docs: a CI-only change is ci:, not fix(ci):

The commit-analyzer reads the type and ignores the scope, so `fix` is a patch whatever sits in the brackets. Two commits touching nothing but .gitea/workflows/unclaim.yml were written `fix(ci):` and cut v0.2.1 and v0.2.2 -- real releases, published to Arch, Homebrew and the APK registry, containing no user-facing change. CLAUDE.md already warned that a mistyped feat ships a minor version. That was not enough, because this was not a mistyped type: `fix` was chosen deliberately, in the belief that the (ci) scope qualified it. The version bump is the small half, which is why this gets a paragraph rather than a clause. A merge to main starts two workflows; if release.yml then pushes a tag, that tag push starts four more -- arch-package, homebrew-formula, android-apk and desktop-assets -- on a runner with capacity 1, where the APK build alone is tens of minutes and publishes a signed artifact to a public registry. So a mistyped type is six workflow runs, not an odd-looking changelog. `make release-dry` answers this before the merge instead of after, and is cheaper than any one of those runs. The two releases are staying: they are already published, and a version that vanishes is worse for whoever pulled it than one that turns out to be empty. Closes #111
2026-08-19 14:53:01 +00:00
192 changed files with 2343 additions and 23993 deletions
@@ -88,8 +88,3 @@ build/android/overlay.json
 # Written by @semantic-release/changelog purely to carry the release notes
 # into scripts/gitea-release.sh; the release page is the changelog.
 .release-notes.md
 # Agent session log: local scratch, not repo memory (that is CLAUDE.md
 # and .planning/). Written by the scheduled backlog runs.
 .pi/journal.md
 .pi/schedule-prompts.json
@@ -1,142 +0,0 @@
 ---
 description: Take on the next actionable backlog issue end to end, and stop
 ---
 Take on exactly one issue from the YellowJacket backlog, end to end, and stop.
 Repo: yonlu/yellowjacket at https://git.ljones.me — API base
 https://git.ljones.me/api/v1/repos/yonlu/yellowjacket, auth with
 `-H "Authorization: token $GITEA_TOKEN"`. Default branch is `main`.
 ## 1. Orient before you pick
 Read, in this order: `CLAUDE.md` (the architecture and the reasons behind
 it), `.pi/journal.md` (what happened last), `.planning/NOTES.md` (what was
 already considered and rejected), and `.planning/plans/active/`. Do not skip
 this because the issue looks small — most of this codebase's traps are
 written down in exactly one of those four places, and the ones that bite are
 the ones you didn't read.
 ## 2. Pick the issue
 List open issues. Choose the single highest-value one that is *actionable
 right now*:
 - Order by `Priority/Critical` → `High` → `Medium` → `Low`. Within a tier,
  prefer `Reviewed/Confirmed`, then `Kind/Bug` over `Kind/Enhancement` over
  `Kind/Feature`.
 - Consult issue #73 (the roadmap) — if it sequences the candidates, that
  ordering wins over the label ordering.
 - **Skip** anything labelled `Status/Blocked`, `Status/In Progress`,
  `Status/Abandoned`, `Reviewed/Won't Fix`, `Reviewed/Duplicate`,
  `Reviewed/Invalid`, or already carrying an open PR.
 - **Skip anything someone else is already on.** The label is not the only
  claim, because a concurrent session may not have applied it — several pi
  sessions run against this repo from separate worktrees under
  `~/.paseo/worktrees/`. Run `git ls-remote --heads origin` and skip any
  issue whose number or slug matches an existing branch (`60-…`,
  `fix/<slug>`). A duplicated fix costs more than a skipped issue.
 - **Skip** anything that cannot be verified without hardware you do not
  have: physical-device Android behaviour (audio output, on-device file
  writes, real gesture input). A browser at 424px is not a phone — see the
  Chrome 113 section of `CLAUDE.md`.
 - **Skip** intermittent-failure issues unless you can reproduce the failure
  on demand within a few minutes. Chasing a 1-in-3 flake is an unbounded
  task and does not belong in a scheduled run.
 - If nothing qualifies, say so, do nothing, and stop. An empty run is a
  correct outcome.
 ## 3. Claim it
 Add `Status/In Progress` to the issue and comment that you are picking it
 up. Then branch:
 ```
 git fetch origin && git checkout -b <type>/<short-slug> origin/main
 ```
 `<type>` matches the issue's `Kind` (`fix/`, `feat/`, `refactor/`, `test/`,
 `docs/`, `ci/`). Branch from `origin/main`, never by checking out `main`
 itself — this repo is worked from several git worktrees at once and `main`
 is checked out in one of them, so `git checkout main` fails outright.
 ## 4. Do the work
 Fix the issue that was reported and nothing else. Match the surrounding
 code's style. Follow the constraints in `CLAUDE.md` rather than reasoning
 from first principles — where it explains why something is shaped the way it
 is, that shape is load-bearing and there is usually a test pinning it.
 **Anything else you discover becomes a new issue, not a bigger diff.** File
 it with the right `Area/`, `Kind/`, `Priority/` labels, describe the
 symptom before the theory, and link it from your PR. Scope creep is the
 failure mode this instruction exists to prevent.
 If the work turns out to be materially larger than the issue implied, stop:
 comment on the issue with what you found and what it would actually take,
 remove `Status/In Progress`, push nothing, and end the run.
 ## 5. Verify — the right tier, not the cheapest one
 Run `make generate` if you touched `.sql` or `.templ`, and `make bindings`
 if you changed a bound Go signature. Then run what the change actually
 demands:
 - Go change → `make lint` and `make test` (both cover all three build
  configurations).
 - Frontend component or store → `make ui-test`.
 - User-visible flow → `make e2e` against `make dev-headless`. **Check the
  port first**: `ss -ltn | grep 34115`. If it is occupied, another worktree
  is already running the app — do not start a second one and do not run
  `make e2e`. Attaching to someone else's build produces a green result
  about code that is not yours, which is worse than no result. Either
  choose an issue that does not need this tier, or stop and say why.
 - Anything cosmetic or layout-related → look at a screenshot. Several bugs
  in this repo's history were invisible to every assertion and obvious in an
  image.
 A tier you skipped is a claim you did not check. If a tier fails for reasons
 unrelated to your change, say so explicitly rather than quietly moving on.
 ## 6. Keep the documentation true
 If you changed structure, behaviour, or a constraint, update `CLAUDE.md` in
 the same commit. That file is this project's memory; a change that leaves it
 describing the old shape is worse than no change. Append a short entry to
 `.pi/journal.md` covering what you did, what you verified, and what you left
 open.
 ## 7. Commit and open the PR
 Conventional Commits, imperative subject, ≤72 chars, scope optional. The
 body explains *why*. Push the branch — never push to `main`, never
 force-push.
 Open the PR:
 ```
 curl -sS -X POST \
  -H "Authorization: token $GITEA_TOKEN" \
  -H "Content-Type: application/json" \
  https://git.ljones.me/api/v1/repos/yonlu/yellowjacket/pulls \
  -d '{"head":"<branch>","base":"main","title":"<subject>","body":"<body>"}'
 ```
 The body states: what the issue was, what you changed and why, **which
 verification tiers you ran and their results**, anything you deliberately
 did not do, and `Closes #<n>`.
 Then wait for CI (`ci.yml`, jobs `check` and `e2e`) and report the result on
 the PR. If it fails, read the log — `gitea_ci`'s `job_logs` 404s on this
 Gitea build, so use
 `GET /api/v1/repos/yonlu/yellowjacket/actions/runs/<run>/jobs` for per-step
 status and `GET /api/v1/repos/yonlu/yellowjacket/actions/jobs/<id>/logs` for
 the log — and fix it. Two consecutive failed CI runs on the same cause: stop,
 comment what you know on the PR, and leave it for a human.
 **Do not merge.** Comment on the issue linking the PR, leave
 `Status/In Progress` on, and end the run.
 ## Finally
 Report in three lines: which issue you took, what state it is in
 (PR open / CI green / stopped and why), and any issues you filed.
@@ -130,13 +130,7 @@ reference, because you need them *before* the failure, not after.
  what you otherwise get is `Property 'scroll' does not exist on type
  'CSSResult'` pointing at a line of prose, or every test in the suite
  failing to import. It went in after the trap cost a fourth session in
-  which its own warning had been read twice. **The same command carries
+  which its own warning had been read twice.
  a second CSS check**: a nested rule whose selector starts with an
  element name (`audio-player { … }` rather than `& audio-player { … }`)
  is silently dropped by the device's Chrome 113 and by nothing else, so
  every tier you can run renders it correctly. Run it after touching
  `index.css` or any `css` literal; a rule directly inside a top-level
  `@media` is not nested and is not flagged.
 - **A failing CI job's log is reachable even when `gitea_ci job_logs`
  says it is not.** That endpoint 404s on this Gitea build. The REST
  API answers, with the `GITEA_TOKEN` already in the environment:
@@ -201,12 +195,6 @@ Two rules about climbing:
 - **Do not write an e2e spec first.** Drive the flow by hand, then
  promote it with `/e2e`. Specs written blind assert on selectors that
  do not exist.
 - **Not every view has a nav item.** Since #25 the destinations are
  configurable, Autotag is hidden by default and Downloads is absent
  until a download client exists — so `getByTestId('nav-<view>')` waits
  30 s for a locator that will never resolve. `navigateTo(page, view)`
  (`e2e/support/fixtures.ts`) dispatches the app's own `navigate` event.
  Click the nav item when the *nav* is what the spec is about.
 Before a commit, the gate is `make lint`, `make test`, `make ui-test`,
 `make bindings-check`, `make css-check` and — from `frontend/` —
@@ -8,29 +8,13 @@ This tier answers "does the phone build run", nothing else. It is not a
 spec tier, it does not run in CI, and the app is not a usable Android
 player yet (plan 015 says why, at length).
-## Two facts that make failure invisible
+## Three facts that make failure invisible
-There were three. The first was that **Go's stdout does not reach
+**Go's stdout does not reach logcat.** An Android app's fd 1 and 2 go to
-logcat** — an Android app's fd 1 and 2 go to `/dev/null`, so every
+`/dev/null`. Every `slog` line the app writes is discarded — including
-`slog` line the app wrote was discarded, including the one naming the
+the one naming the error it is about to exit on. `setprop
-error it was about to exit on. That is fixed (#160):
+log.redirect-stdio true` does not help: it redirects the *Java*
-`backend/androidlog` is a `slog.Handler` over `__android_log_write`,
+runtime's `System.out`, and the Go code is a c-shared native library.
 selected in `main()` by build tag, and the app's whole diagnostic
 stream now arrives under the `yellowjacket` tag, which `make
 android-logs` filters for.
 What remains true about it is the part that misleads: **`setprop
 log.redirect-stdio true` still does not help**, because it redirects
 the *Java* runtime's `System.out` and the Go code is a c-shared native
 library. Nothing that reaches logcat here does so through stdout, so
 anything printed with `fmt.Println` is still lost. Log with `slog`.
 The tag is a fixed string rather than the application id, and that is
 load-bearing rather than tidy: the debug build carries
 `applicationIdSuffix ".dev"` so it can be installed beside the release
 app, and it is the only build whose WebView can be inspected — so a tag
 derived from the id would be filtered out on the one build anybody
 debugging this app is running.
 **`os.Exit` is a silent death.** `main()` ends several failure paths in
 `os.Exit(1)`. From Android's side that is a process that vanished:
@@ -50,10 +34,7 @@ the wrong question. `make android-smoke` asks the right one — is it the
 The tell, once you know it: `I/WailsBridge: Wails bridge initialized`
 followed immediately by a new pid doing the same thing. That means the
 native library loaded, the JNI bridge came up, Go's `main()` ran, and
-`main()` left. Work backwards through its `os.Exit(1)` paths — and
+`main()` left. Work backwards through its `os.Exit(1)` paths.
 since #160, **read the `E/yellowjacket` line above it first**, because
 every one of those paths logs the error before it exits. That line is
 what #52 spent months without.
 ## What to run
@@ -213,13 +194,9 @@ like the app's fault and none is:
 |---|---|---|
 | x86_64 | modernc's raw `lstat` vs seccomp | SIGSYS, syscall 6 |
 | arm64, translated | Go reads `ID_AA64ISAR0_EL1` | SIGILL |
-| arm64, real device | **runs** (2026-08-20) | — |
+| arm64, real device | — | unverified, still |
-**A physical arm64 device remains the only verification path**, and it
+**A physical arm64 device remains the only verification path.**
 has now been walked: a Light Phone III (TLP301, Android 14 / SDK 34,
 arm64-v8a, WebView Chrome 113 at 424x439). The app builds, installs,
 launches and stays up; `make android-smoke SECONDS=60` passes on it.
 What that run *found* is the lifecycle fault below.
 ### What was fixed to get here
@@ -233,11 +210,6 @@ no-op. `backend/system` gained no import of the Wails application
 package, which matters for the same reason `backend/events` is split by
 the `indexbuild` tag.
 **And `main()` is now latched to one run per process** (#52). That is
 the second `os.Exit(1)` in this file's history and it had the same
 signature as the first, which is the argument for #160: both were named
 exactly by an `slog` line that went to `/dev/null`.
 ### What is still not done
 The shell is still a desktop shell, and the x86_64 half of the APK is
@@ -277,25 +249,10 @@ one.
 `build/android/Taskfile.yml` ships more than the Makefile wraps, and
 they are the right thing to reach for when you want something one-off:
 > **These four were unsafe until #159 and are now the way in.** All of
 > them began with `adb uninstall {{.APP_ID}}`, where `APP_ID` defaulted
 > to `app.yellowjacket` — the **release** id — while `run` and
 > `run:device` build the **debug** variant, whose id is
 > `app.yellowjacket.dev`. So they uninstalled the user's app, taking
 > the library with it, installed a different package, and then failed
 > to launch the one they had removed.
 >
 > They share `scripts/android-deploy.sh` now, which **never**
 > uninstalls (`install -r`, and a changed signing certificate is
 > reported with the command rather than acted on), reads the package id
 > back out of the built APK, and refuses a target that is not the kind
 > the task names. There is nothing left to avoid; the manual sequence
 > below is kept because it is still the smallest thing that works.
 ```
 wails3 task android:run              # debug build + emulator install + launch
-wails3 task android:run:device       # debug build + install + launch on a phone
+wails3 task android:run:device       # same, first connected physical device
-wails3 task android:deploy-device    # release build, same
+wails3 task android:deploy-device    # production APK to a device
 wails3 task android:bundle:fat       # AAB, for a Play Store upload
 wails3 task android:studio           # open build/android/ in Android Studio
 wails3 task android:device:list
@@ -303,16 +260,6 @@ wails3 task android:logs:all
 wails3 task android:clean
 ```
 **`run` and `deploy-emulator` mean the emulator, and now say so to
 adb.** They used a bare `adb install`, which with exactly one device
 attached picks that device whatever it is — so with a phone plugged in
 and no emulator running, the task whose summary reads "in the Android
 Emulator" installed on the phone. They pass `--target emulator` and
 refuse with `make android-emulator` as the remedy.
 **`DEVICE_ID=<serial>` still names a device, and several attached
 devices is now an error rather than a silent pick of the first.**
 Two are deliberately **not** wrapped. `android:logs` greps logcat for
 `(Wails|yellowjacket)`, which catches the `WailsBridge` tag but misses
 the app's own process tag (`app.yellowjacket` — lowercase, so `Wails`
@@ -322,51 +269,16 @@ instead. And `ensure-emulator` boots whatever `-list-avds | tail -1`
 returns, with no pidfile and no boot wait, so it cannot be stopped or
 sequenced.
-## The identity is read back from the APK
+## The identity is declared twice
 It used to be **declared twice**, and that is what #159 was.
 `applicationId` in `build/android/app/build.gradle` is what Gradle
-installs; `APP_ID` in `build/android/Taskfile.yml` was what every
+installs. `APP_ID` in `build/android/Taskfile.yml` is what every
-adb-driven task uninstalled, launched and filtered, and nothing
+adb-driven task uninstalls, launches and filters. **Nothing enforces
-enforced that they agree. They did not: the debug buildType carries
+that they agree**, and `ANDROID.md`'s advice to set `APP_ID` in
-`applicationIdSuffix ".dev"`, so every task that assembles a debug APK
+`build/config.yml` does not work in beta.8 — `wails3 task` never reads
-addressed the release id. This file flagged the hazard for five phases
+that file (verified with `--dry`), and even when set it feeds only the
-and it cashed out twice — once as a wrong `am start`, once as an
+adb commands, never Gradle. Change both or the official `run`/`deploy`
-uninstall of the user's library.
+tasks address a package that is not installed.
 **`scripts/android-pkgid.sh` is the one answer now.** It prints the
 package id an APK declares (`aapt2 dump packagename`, falling back to
 `aapt dump badging`), and the deploy path installs and launches *that*.
 The APK is the authority because the task that installs it has just
 built it: whatever Gradle resolved the applicationId to, suffixes and
 flavours included, is in the file, and no default can disagree with it.
 An APK it cannot read is a hard failure, never a fallback to a written
 down default — guessing is the bug.
 **`APP_ID` survives as an assertion, not a setting**, and has no
 default. `wails3 task android:run APP_ID=app.yellowjacket` says "this
 build had better declare that id" and is refused, naming both, *before*
 anything is installed or a device is even chosen. It could never have
 been a setting: `ANDROID.md`'s advice to put it in `build/config.yml`
 does not work in beta.8 — `wails3 task` never reads that file (verified
 with `--dry`) — and even when set it fed only the adb commands, never
 Gradle.
 `scripts/android-emulator.sh` derives `PKG` the same way, from
 `bin/yellowjacket.apk` when one is built, so `make android-install`,
 `android-launch`, `android-logs` and `android-smoke` follow whichever
 variant is actually in `bin/`. `YJ_ANDROID_PKG` still overrides, and
 the old literal survives only for a tree with no APK built yet.
 **The uninstall is gone and is not coming back.** It existed to make
 the bare `install` on the next line work at all — without `-r` Android
 refuses an install over an existing package — so `install -r` removes
 the *reason* for it rather than merely removing it. What is left is the
 one case an uninstall really is the remedy, a changed signing
 certificate, and that is exactly the case where performing it silently
 costs the user their library. So it is named and not done, which is the
 answer `scripts/android-emulator.sh` had already reached for
 `make android-install`.
 Related, and it will bite once: the launcher activity is
 `com.wails.app.MainActivity` and the applicationId is
@@ -375,27 +287,6 @@ resolves the leading dot against the *applicationId* and fails with a
 class-not-found that reads like a broken build. Always the
 fully-qualified form.
 **`wails3 task android:run:device` is the way to put a debug build on a
 real device**, since #159. What #52 used, before it was safe, was the
 longer form, and it is still the smallest thing that works if you want
 no script between you and adb:
 ```bash
 wails3 task android:build ARCH=arm64 && wails3 task android:assemble:apk
 adb install -r bin/yellowjacket.apk      # -r, never uninstall
 adb shell am start -n app.yellowjacket.dev/com.wails.app.MainActivity
 ```
 The id in that last line is the one thing to keep an eye on by hand —
 `./scripts/android-pkgid.sh bin/yellowjacket.apk` is what the tasks ask,
 and it is a good habit before any `am start` written out in full.
 `YJ_ANDROID_PKG=app.yellowjacket.dev` still overrides what
 `scripts/android-emulator.sh` — and therefore `make android-smoke`,
 `android-logs`, `android-launch` — addresses, but it is rarely needed
 now: that default is read from `bin/yellowjacket.apk`, so it already
 follows whichever variant was built last.
 ## What only a device can answer
 The emulator cannot run this app (three separate reasons, none of them
@@ -420,91 +311,6 @@ system bars, the back gesture, focus and audio interruptions,
 permission dialogs, the keyboard — not about what the app draws. The
 drawing is what the other five tiers already cover.
 **The third such fault was the activity lifecycle** (#52), and it is
 the one to re-check after touching `main()`, `WailsBridge` or
 `MainActivity`. Android destroys and recreates an activity **without
 restarting the process**, and Wails' `nativeInit` — which
 `MainActivity.onCreate` calls — runs `go mainFunc()` every time. So
 Go's `main()` ran again on a live app, `app.Run()` refused (`a.starting`
 is still true behind Android's `select{}`), and the `os.Exit(1)` under
 it took the healthy first app down with it.
 ### The lifecycle check, and how to trigger it on demand
 This is the regression guard for #52 on this tier, because no other
 tier runs `main()` on Android at all. The Go-side guard
 (`TestMainClaimsBeforeItDoesAnything`) catches work creeping above the
 latch; only the device catches the latch not working.
 **Trigger a relaunch with a configuration change the manifest does not
 declare.** `AndroidManifest.xml` lists
 `orientation|screenSize|keyboardHidden|uiMode`, so those are handled
 in-place and are *not* triggers. `fontScale` is not listed, and it is a
 one-liner:
 ```bash
 adb shell settings put system font_scale 1.15   # restore the old value after
 ```
 That is the same in-process destroy/recreate that "Don't keep
 activities", a locale change and a memory trim produce, but on demand.
 **"Don't keep activities" is the report's own lever and did not work on
 this device**: `settings put global always_finish_activities 1` reads
 back as `1`, `am set-always-finish-activities` does not exist on this
 build, and the activity was never finished on backgrounding. Do not
 spend an afternoon on it; use the config change.
 **The assertion is the pid, and the tell is two bridge inits in one.**
 ```bash
 adb logcat -d | grep -E "Wails bridge initialized|has died|finishDrawing of relaunch"
 ```
 Healthy is one pid appearing twice — the process surviving the
 recreation:
 ```
 I/WailsBridge(28420): Wails bridge initialized
 I/WailsBridge(28420): Wails bridge initialized     <- same pid, recreated
 ```
 Broken is that pair followed within a second by:
 ```
 I/WindowManager: finishDrawing of relaunch: Window{...MainActivity} 603ms
 I/ActivityManager: Process app.yellowjacket.dev (pid 22956) has died: fg  TOP
 W/ActivityTaskManager: Force removing ActivityRecord{...}: app died, no saved state
 ```
 Two things about reading that. **`has died: fg  TOP` is not a memory
 kill** — the system does not reclaim the foreground process, so this is
 the app leaving of its own accord. And there is **no crash record
 anywhere**: `logcat -b crash` is empty, no `AndroidRuntime`, no
 `libc: Fatal signal`, no tombstone. That is the `os.Exit` signature,
 and it is why "the system killed it" is the wrong first hypothesis.
 **Surviving is only half of it — check the recreated WebView is still
 wired to the running app.** A plausible-looking fix (making
 `WailsBridge.initialized` static, so the second `nativeInit` is skipped)
 keeps the process alive and silently breaks this, because `nativeInit`
 is also what re-points the JNI reference at the new bridge. Go would go
 on executing JavaScript against the destroyed activity's WebView: the
 app opens, renders, and never receives another backend event.
 Ask the page, after a relaunch and a resume:
 ```bash
 make android-inspect
 make android-eval EXPR='(()=>{window.__probe=[];const o=window._wails.dispatchWailsEvent.bind(window._wails);window._wails.dispatchWailsEvent=(e)=>{window.__probe.push(e&&e.name);return o(e)};return "ok"})()'
 # background and foreground the app, then:
 make android-eval EXPR='JSON.stringify(window.__probe)'
 ```
 A healthy build answers with events from the live services —
 `["IndexStatusChanged","JobsChanged","JobsChanged","android:storageAccess"]`.
 `[]` means the bridge reference is stale.
 ## Asking the device, not just looking at it
 A real phone can be inspected, and that turns this tier from "reported
@@ -534,130 +340,6 @@ Four things about it, each of which costs an hour if met cold:
  script. Plug in over USB for anything longer than a couple of probes.
 - **The socket name carries the pid**, which changes on every launch, so
  it is resolved rather than remembered.
 - **A reinstall resets the runtime permissions**, and the grant dialog
  is a separate activity that takes focus — so the app is up, `am start`
  reports "delivered to currently running top-most instance", and
  `pidof` is empty because it never got to the foreground.
  `dumpsys window | grep mCurrentFocus` naming
  `GrantPermissionsActivity` is the tell. `adb shell pm grant
  app.yellowjacket.dev android.permission.READ_MEDIA_AUDIO` (and
  `POST_NOTIFICATIONS`) ahead of the launch skips it.
 ### Getting the app into a state worth measuring
 A fresh install is **not** a neutral starting point, and three things
 about it will each cost you a measurement.
 **It downloads the real catalog.** `YJ_CORE_INDEX_URL` is stubbed in
 `dev-headless.sh` and in CI and is *real* here, so the app spends its
 first minutes fetching ~0.6 GB and `job-band` is **103px of a 439px
 screen** while it does. Every vertical number taken in that state is
 wrong -- one #51 measurement had the album art at 0px and it was
 entirely this.
 `__yj.call("explore.Service.StopIndexBuild", [])` stops it and returns
 cleanly. **It then starts again within seconds.** So stop it
 *immediately before* the measurement rather than once at the beginning,
 and check `jobs.Service.GetJobs` afterwards -- an empty array is the
 only proof. `jobs.Service.ClearFinishedJobs` tidies the finished rows
 that otherwise keep the band open.
 **A library added over the bridge does not dismiss the first-run
 wizard.** `library.Library.AddLibrary` works and scans, but the wizard
 checks for an existing library once, on mount, and its "Get Started"
 button gates on a directory chosen *in the wizard* -- so it stays up
 with a correctly disabled button over everything you are trying to
 measure. Nothing is broken; reload the page and it is gone. This reads
 exactly like a tap being swallowed, which is the expensive part.
 **Scoped storage decides where the music can be.** `/sdcard/Music/...`
 plus `pm grant <pkg> android.permission.READ_MEDIA_AUDIO` works and
 `AddLibrary` takes the plain path; a push into
 `/sdcard/Android/data/<pkg>/files/` looks like it worked and then is not
 there. Some builds additionally want
 `appops set <pkg> MANAGE_EXTERNAL_STORAGE allow`, and until they have it
 the app opens the *system* "All files access" screen on launch -- so
 `dumpsys window | grep mCurrentFocus` naming `com.android.settings` is
 that, not a crash.
 ### A note on quoting `make android-eval`
 `EXPR='...'` is a single-quoted shell word, so anything with a quote or
 an apostrophe in it -- a file path like `Blazo, 49'ers - ...`, or a
 snippet containing a string literal -- breaks in a way that reads as a
 JavaScript error. Put the expression in a file and pass it positionally:
 ```bash
 node ./scripts/android-eval.mjs "$(cat /tmp/probe.js)"
 ```
 That is the same script `make android-eval` wraps, so nothing is lost.
 Two things worth knowing about it: it does **not** await a promise, so
 an async call has to park its result (`window.__r = ...`) and be read
 back in a second eval; and the shim from the section below is lost on
 every reload and every app restart, along with the devtools socket,
 whose name carries the pid.
 ### Calling a binding on the device
 **The runtime call does not go over HTTP on Android**, and this is worth
 knowing before an hour is spent on it. The WebView cannot deliver a
 `fetch()` POST body to `shouldInterceptRequest`, so v3 routes runtime
 calls through the `addJavascriptInterface` bridge instead: the
@wailsio/runtime installs a `customTransport` that calls
 `window.wails.invokeAsync(id, payload)` and receives the answer on
 `window._wailsAndroidCallback`. Two consequences:
 - **`.playwright/init-events.js` does not transfer to the device.** Its
  outbound half hooks `fetch`, which sees nothing here, and its
  `call()` posts to `/wails/runtime`, which answers
  `Invalid runtime call: missing object value` — the interceptor got the
  URL with no body. Its *inbound* half is still right, because
  `dispatchWailsEvent` is the entry point in every mode.
 - **Hooking `fetch` from an eval is too late anyway**, on any platform:
  the bundle captured its reference at module scope, so a wrapper
  installed afterwards records nothing. That is why the harness is an
  `initScript` and not a step in a spec.
 What works is to borrow the bridge, chaining the runtime's own callback
 so its pending calls still resolve:
 ```js
 const pending = new Map();
 const prev = window._wailsAndroidCallback;
 window._wailsAndroidCallback = (id, response, error) => {
  if (!pending.has(id)) return prev && prev(id, response, error);
  const p = pending.get(id); pending.delete(id);
  const env = JSON.parse(response || "{}");
  return env.ok ? p.resolve(env.data ?? env.text) : p.reject(new Error(env.error));
 };
 window.__yj = { call(name, args) {
  return new Promise((resolve, reject) => {
    const id = "yj" + Math.random().toString(36).slice(2);
    pending.set(id, { resolve, reject });
    window.wails.invokeAsync(id, JSON.stringify({
      object: 0, method: 0, windowName: "",
      args: { "call-id": id, methodName: "yellowjacket/backend/" + name, args: args || [] },
      clientId: window._wails.clientId,
    }));
  });
 } };
 ```
 That turns the device into a tier that can be *driven* rather than only
 looked at — `__yj.call("player.Player.LoadFile", [path])` and
 `__yj.call("library.Library.AddLibrary", ["/sdcard/Music/..."])` are how
 #53 was measured. Names are the Go ones (`GetTracks`, not
 `GetAllTracks`); an unknown one comes back as a plain
 `unknown bound method name`, so a wrong guess is loud.
 **Getting audio onto the phone**: `adb push` into
 `/sdcard/Android/data/<pkg>/files/` looks like it works and then the
 files are not there — scoped storage. `/sdcard/Music/...` plus
 `pm grant … READ_MEDIA_AUDIO` does work, and `AddLibrary` takes the
 plain path. The generated fixtures are **~2 seconds** each, which is
 fine for a scan and useless for watching a seek bar, so synthesise a
 long one: `ffmpeg -f lavfi -i sine=frequency=440:duration=240`.
 **And the reason to bother: the phone is an engine, not a screen.** The
 first device here renders in **Chrome 113** at 424x439 CSS px. Every
@@ -1,253 +0,0 @@
 # 019 — The Android touch model
 **Issue:** #63 (`Area/Library-UI`, `Kind/Feature`, `Priority/High`)
 **Depends on:** #60 (bottom-sheet menus) — closed, merged as PR #176
 **Relates:** #67 (inline links into the menu), #71 ("More" nav), #54
 (native feel), #5/#8 (selection, drag to queue — the desktop semantics
 being diverged from)
 **Status:** in flight.
 #73 puts #60 first in Phase 4 because it is "the presentation every
 other item needs", and this is the next one. The Direction on #63 asks
 for the interaction model to be designed as one piece before any of it
 is built, because it *reassigns an existing gesture* rather than adding
 one — `utils/long-press.ts` currently owns the 500ms hold, and every
 context menu in the app is downstream of it.
 This document is that design. Everything below is a measurement, or an
 argument for one of the choices #63 leaves open.
 ---
 ## The mapping
 | gesture | pointer is a finger | pointer is a mouse |
 |---|---|---|
 | single tap / click | **play the row** | select the row |
 | double | — | play the row |
 | long press (500ms) | **enter selection mode** | — |
 | right-click | — | context menu |
 | swipe right | **add to queue** | — |
 | drag | reorder / drag to playlist | reorder / drag to playlist |
 Three of those are #63's report unchanged. Two are decisions it left
 open, and one is a deliberate divergence.
 ---
 ## Decision 1 — the predicate is the pointer, not the platform
 #63 says "the row component needs a platform-aware interaction layer
 rather than shared handlers". It needs an interaction layer; it should
 not be platform-aware.
 **The question a row has to answer is not "am I on Android" or "is the
 viewport under 600px" but "what made this event".** `pointerType ===
 'touch'`, read off the event that is being handled, which is already
 how `long-press.ts` decides (`if (e.pointerType !== 'touch') return`)
 and is the only such test in the frontend today.
 This is #64's rule — the predicate is named after the capability, not
 the platform — and it carries #64's warning with it. Keyed on a width:
 - an Android **tablet** at 600px or more gets click-selects /
  double-click-plays on a touchscreen, which is the exact inversion
  this issue exists to fix, on the platform it exists for;
 - a **touchscreen laptop** cannot be described at all, because both
  pointers are live in the same session on the same row;
 - and a narrow desktop window gets phone semantics with a mouse.
 Per event, all three are right for free, and there is no second
 declaration of what a phone does — the thing CLAUDE.md declines to add
 every time it comes up.
 **Measured, so this is not an assumption about the WebView.** On the
 reference device (TLP301, Android 14, WebView Chrome 113, 424x439),
 driving a real tap with `adb shell input tap`:
 ```
 [["down","touch",78,94],["touchstart","touchstart",0,0],["up","touch",78,94]]
 ```
 `PointerEvent` exists, `pointerType` is `"touch"`, `maxTouchPoints` is
 5, and `(pointer: coarse)` / `(hover: none)` both match.
 ---
 ## Decision 2 — there is no double-tap, and the number is why
 #63 asks for *single tap → play* **and** *double tap → context menu*.
 Those two cannot both be honoured. The first tap of a double tap is
 indistinguishable from a single tap until the interval expires, so
 "tap plays" necessarily becomes "tap waits to find out whether you
 meant something else, then plays". The app already owns that constant:
 `utils/explore-link.ts` holds a navigation for `DOUBLE_CLICK_GRACE_MS
 = 250` for precisely this reason.
 **What it would be added to, measured on the device.** Six runs, from
 the play command to the backend's `TrackChanged`:
 ```
 155, 123, 85, 56, 91 ms          median ~100
 ```
 So the app's primary interaction is ~100ms, and a double-tap
 discriminator makes it ~350 — **3.5x, of which 250ms is spent
 deliberately doing nothing** — paid on every track anyone ever plays,
 in order to reach a menu.
 It is also against the platform's convention, which counts for more
 than usual here because this is the phone build and nothing else:
 long-press is *how you select* on Android (Gmail, Files, Photos),
 double-tap is zoom or nothing, and a list's menu is either the
 long-press sheet or a per-row overflow.
 **So the menu and the selection action bar become the same surface**,
 which is the convention and removes a concept rather than adding one.
 Long-press selects the row it was made on and raises the action bar;
 the bar's actions *are* the context menu's actions, contextualised to
 whatever is selected — one row or forty. #60's bottom sheet stays
 behind it as the overflow, so `contextMenuStyles`, `MenuKeyboard` and
 `menu-surface` are reused rather than reimplemented.
 ---
 ## Decision 3 — tap-to-play and selection mode ship together
 The obvious phase order is "tap plays first, it is the smallest
 change". It is wrong, and the reason is a capability that exists today
 and is easy to miss.
 **A touch user can already multi-select**: tap selects (the desktop
 semantics, which a finger currently gets), and the long-press menu then
 acts on the selection. Move tap to play without shipping selection mode
 in the same change and there is a window — a release, if it lands — in
 which selecting forty tracks to add to a playlist is impossible on a
 phone. That is a regression dressed as an increment.
 So phase 1 is both, or neither.
 ---
 ## What the code looks like now
 | surface | how it binds | selection |
 |---|---|---|
 | `track-list` | delegated on the virtualizer: `click`, `dblclick`, `contextmenu`, `dragstart` | `SelectionController` |
 | `queue-panel` | delegated, same shape | `SelectionController` |
 | `playlist-details` | per row | `SelectionController` |
 | `smart-playlist-details` | per row | `SelectionController` |
 All four already share `SelectionController`, and all four resolve a
 row from an event by `data-index` / `data-file-path` on the row. So the
 gesture layer has one shape to talk to, and "selection mode" is a flag
 on the controller they already have rather than a fifth concept.
 `utils/long-press.ts` is one document-capture listener that synthesises
 a `contextmenu` — the seam that needed no component to opt in. **This
 plan keeps that shape and changes what the gesture means**, which is
 why it is a rewrite of that file rather than a second listener set: two
 document listeners both claiming the 500ms hold is the fault the file's
 own header warns about.
 ---
 ## Two measurements that decide the implementation
 **`touch-action` is `auto` on both the virtualizer and the rows.** With
 `auto` the browser owns panning on both axes, so a horizontal drag can
 be claimed as a scroll and our gesture ends in `pointercancel`
 mid-swipe. A row that wants a horizontal swipe has to declare
 `touch-action: pan-y`: the browser keeps the vertical pan (which is the
 virtualizer's scroll, and must stay native or the list stutters) and
 hands us the horizontal axis. This is the single most likely way for
 swipe-to-queue to "work in Chromium and not on the phone".
 **The row is 424x52 on the device**, so a swipe threshold in px is a
 fraction of a row height, not of a screen.
 **And the third one was found by building phase 1 and then running it**
 — it is not something any browser tier can report. Chrome 113's Android
 WebView **fires its own `contextmenu` on a long press**. `long-press.ts`
 stood down when a trusted one arrived, which was right while both paths
 ended in the same place; once a hold can mean selection mode they end
 in different places, and standing down means the gesture silently does
 the *old* thing. Measured, before the fix:
 ```
 {"log":["contextmenu isTrusted=true"],
 "state":{"bar":null,"menuActive":true,"selected":1}}
 ```
 `yj-long-press` was never announced at all, the context menu opened,
 and all 26 tests in the component tier passed — dispatched pointer
 events do not make a browser synthesise a `contextmenu`.
 So the browser's event is a **trigger, not a competitor**: the gesture
 is announced from it, and only a component that claims it suppresses
 the native menu. Unclaimed, it propagates untouched. That is the same
 "browser wins" outcome, reached by asking instead of assuming — and
 verified both ways on the device, a track row entering selection mode
 and an album card still opening its menu.
 The tier could not *find* it and can *hold* it: a test cannot dispatch
 a trusted event, but this module has always told its own apart by
 identity rather than `isTrusted`, so an untrusted one from a test takes
 exactly the browser's path.
 ---
 ## A tier note: this one can be driven, not only measured
 `adb shell input tap|swipe` reaches the WebView as real pointer events,
 which the log above is evidence of. So for the first time the Android
 tier can *perform* the thing under test rather than describe the page
 afterwards — a long press is `input swipe X Y X Y 600`, a swipe right
 is `input swipe X Y X+N Y 120`.
 Device CSS pixels from device pixels, on this phone:
 `css = (device - 59) / 2.564` vertically, `css = device / 2.564`
 horizontally (measured from the tap above: 200,300 arrived as 78,94).
 This does not make the device a spec tier — it does not run in CI and
 `make ui-test` still has to carry the assertions. It makes "does the
 gesture actually fire on Chrome 113" answerable in seconds.
 ---
 ## Phases
 **Phase 1 — the seam, tap-to-play, selection mode.** `utils/
 touch-gestures.ts` replacing `long-press.ts`: pointer-typed
 recognition of tap / long-press / horizontal swipe, dispatched as
 composed custom events so a delegated listener in any shadow root
 still works. `SelectionController` gains a mode. `track-list` acts on
 tap and enters the mode on long press. The action bar.
 **Phase 2 — swipe right to queue**, with the `touch-action: pan-y`
 finding above and a reveal-and-snap affordance.
 **Phase 3 — the other three surfaces**, which is mostly wiring, since
 they already share the controller.
 **Phase 4 — what this leaves behind.** The inline `explore-link`s in a
 row are a single-click target inside a row whose single tap now plays;
 that conflict is #67's, and this plan should not pre-empt its answer
 beyond making tap-to-play win on touch.
 ---
 ## Open questions
 1. **Does selection mode have an escape other than the bar's own
   close?** Back is the platform's answer and the shell already owns
   the history stack (#6/#55). Pushing an entry for a *mode* rather
   than a place is the same argument #55 settled for the overlaid
   queue, and it should probably be settled the same way — but the
   queue is a screen and a selection mode is not, so it wants its own
   paragraph rather than an assumption.
 2. **Does a tap on a row's favourite icon still toggle it in normal
   mode?** It is inside the row and the row now plays. It has to keep
   working — it is a 44px target since #56 — so the gesture layer needs
   the same "a control inside the row wins" rule the keyboard service
   has for a focused control that owns a key.
@@ -1,327 +0,0 @@
 # 018 — Supported sizes, and what the queue panel is
 **Issue:** #24 (`Area/Shell-Nav`, `Priority/High`, `Reviewed/Confirmed`)
 **Unblocks:** #55 (queue as a screen) — a real Gitea dependency
 **Relates:** #69 (page-header overflow), #12 (mini-player), #51 (small-screen umbrella)
 **Status:** complete — #24 shipped as PR #132, and the matrix's last
 unkept promise closed with #69.
 #73 puts this first in Phase 2 and hangs the rest of the phase off it,
 so the decision has to be written down and arguable before any CSS
 moves. This document is the decision. Everything below the matrix is
 either a measurement or an argument for one of the four choices #24
 asks for.
 ---
 ## What is actually wrong, measured
 Against the running app (`make dev-headless SEED=default`, Chromium),
 Playlists, sweeping the viewport with the queue open and closed. The
 number that matters is how much of the page header survives.
 | viewport | sidebar | queue | main panel | header needs | actions clipped |
 |---|---|---|---|---|---|
 | 1280×800 | 200 | open 321 | 759 | 759 | — |
 | 1000×700 | 200 | open 321 | 479 | 747 | New Playlist, New Smart Playlist |
 | **900×600** | 200 | open 321 | **379** | 747 | **all three** |
 | 800×600 | 56 | open 321 | 423 | 747 | all three |
 | 700×600 | 56 | open 321 | 323 | 747 | all three |
 | 390×780 | — | open 321 | **69** | 747 | all three |
 | 320×600 | — | open 321 | **0** | 747 | all three |
 | 900×600 | 200 | closed | 700 | 747 | New Smart Playlist |
 | **800×600** | 56 | closed | 744 | 747 | **New Smart Playlist (158/162px)** |
 | 320×600 | — | closed | 320 | 747 | all three |
 Five things in that table are not in the issue.
 **The header clips at the supported minimum with the queue closed.**
 At 800×600 — the size `backend/config/window.go` enforces and the only
 size this app *promises* — "New Smart Playlist" loses 4px of its 162.
 #24 reads as a queue-panel bug; the queue makes it dramatic, but the
 header overflows on its own at the minimum window.
 **900×600 is worse than 800×600, because the sidebar expands at 900.**
 `AUTO_COLLAPSE_VIEWPORT` collapses the sidebar to icons *below* 900, so
 at 899px the main panel is 843px and at 900px it is 700px. The worst
 desktop case is therefore not the minimum window; it is the pixel
 immediately above the collapse. Anything that tests "the minimum" and
 stops has not tested the worst case, which is what
 `layout-overflow.spec.ts` does today.
 **At phone widths the queue is not a drawer, it is an amputation.**
 `queue-panel`'s host is `flex-shrink: 0; width: 0`, going to
 `width: var(--queue-width, 320px)` under `[open]` — it is *in the flow*
 of `.content-area`, so it takes its width from the main panel rather
 than covering it. At 390px that leaves 69px of the page; at 320px it
 leaves **0px**, and the app is not degraded but gone. This is the
 measurement #55 needs and did not have.
 **Only Playlists overflows.** Sweeping all ten primary views at 900×600
 and at 390×780, every other header reports `scrollWidth ==
 clientWidth`, and Albums at 390px renders title, count and sort
 legibly (checked on a screenshot, not just the number). #69 is
 therefore one view's action set — three text buttons totalling 390px —
 and not a systemic header failure, though the *rule* still belongs in
 `page-header`.
 **Both reasons in `MinWidth`'s comment are stale.** It says the floor is
 800×600 because "below ~780 the header's subtitle wraps" and "below
 ~600 tall the eleven sidebar items no longer fit". The subtitle is
 `display: none` below 900 (index.css), and the sidebar host is
 `overflow-y: auto` — at 600×460 its `scrollHeight` is 434 against a
 332px client, and Settings is reachable after scrolling. Neither
 mechanism can happen any more. That does not mean the floor should
 move; it means its stated reason no longer supports it, which is worse
 than either answer.
 *(Care needed: my first probe for the sidebar scroller searched
 `shadowRoot.querySelectorAll('*')` and reported "items are
 unreachable", because the scroller is the **host** and a host is not in
 its own shadow root. The claim in CLAUDE.md is correct.)*
 ---
 ## Decision 1 — the supported size matrix
 Three bands. Two of them already exist and are already argued; what is
 new is that they are written down as a *promise*, and that the queue is
 part of it.
 | band | width | navigation | queue | promise |
 |---|---|---|---|---|
 | **Phone** | < 600 | `bottom-nav` + drawer | overlay, full width | reflows; nothing needs sideways scrolling; fits 320px |
 | **Compact** | 600 – 899 | icon sidebar | overlay + scrim | nothing is clipped or unreachable at any width in the band |
 | **Desktop** | ≥ 900 | labelled sidebar | inline where it fits (see decision 2), else overlay | as Compact |
 And one promise across all three: **no action is ever unreachable.**
 That is the sentence #69 asks for and it is the one the matrix exists
 to make checkable.
 **400% zoom** keeps the meaning it already has: WCAG 1.4.10 names 320px
 as the reflow target, the phone band covers it, and
 `layout-overflow.spec.ts` already asserts a 320px viewport needs no
 sideways scrolling. What changes is that the *queue* must be part of
 that assertion — it is not today, and with the queue open at 320px the
 main panel is 0px wide, which no current test can see.
 **The window minimum stays 800×600**, and its comment gets the real
 reason. The old mechanisms are gone, but the floor is still where the
 Compact band's chrome stops being comfortable, and lowering it would
 mean promising the desktop layout at sizes where only the phone layout
 works. The interesting consequence is decision 4.
 ---
 ## Decision 2 — the queue is an overlay when it cannot afford to be a column
 **The rule.** The queue panel renders inline — in the flow, as today —
 only while
 ```
 viewport − sidebar − queueWidth ≥ 480
 ```
 and as an overlay with a scrim otherwise.
 **Why it cannot be a media query**, which is the load-bearing half:
 the queue's width is *user state*. It is drag-resizable between 200 and
 500px and persisted (`--queue-width`, `MIN_WIDTH`/`MAX_WIDTH` in
 `queue-panel.ts`). A breakpoint at a fixed viewport width silently
 assumes the default 320, and is wrong by 180px for a user who has
 dragged the panel wide — in the direction that hurts, since a wider
 queue is exactly when the content can least afford it. So the mode is
 computed from the measured widths and published as an attribute, the
 way `data-active-view` already is, and the CSS keys off that.
 **Why 480, honestly.** There is no cliff to derive it from. The track
 list rescales its columns continuously — at main widths from 900 down
 to 544 its `--grid-cols` shrink from 213px to 124px with
 `rowOverflow=0` throughout — and the album grid steps 3 columns to 2
 somewhere between 564 and 644 without breaking. So this is a judgement,
 anchored on two things: it keeps the *default* window (1100 wide, main
 = 580) inline, because the inline queue is a desktop affordance people
 choose and turning it into an overlay for the common case would be a
 regression in feel; and it puts every case measured as broken —
 900×600 at main=379, and every phone width — on the overlay side.
 1024×768 lands at main=504 and stays inline.
 **The scrim is the other half of the issue's complaint** ("make the
 queue obviously an overlay *over* the content so it reads as something
 to close"). An overlay queue gets a scrim, closes on scrim click and on
 Escape, and returns focus to `#queue-button`.
 **What must not change**: #55's Direction is explicit — one component,
 two mount points, do not fork it. The overlay is a *presentation* of
 the same `queue-panel`, so the roving tab stop, Alt+Arrow reorder, drag
 reorder, selection semantics and the `virtualizer.requestUpdate()` on
 selection and current-track change all come along untouched. This
 decision deliberately stops short of #55's detail-view mount, but it is
 the shape that makes it possible, and it unblocks it.
 ---
 ## Decision 3 — #69 is its own PR, and here is the finding that decides it
 `page-header` **cannot collapse its own actions**, and that is not an
 effort estimate but a fact about the API. Actions arrive through
 `<slot name="actions">` as arbitrary light-DOM markup — Playlists slots
 a `<div class="header-actions">` of three `<button>`s with click
 handlers, drag handlers and a conditional class. A component cannot
 move another component's light-DOM children into a dropdown and keep
 their behaviour; there is nothing generic to render as a menu item.
 So the overflow rule needs an *actions API* — hosts declaring
 `{icon, label, handler, priority}` data that `page-header` can render
 either as buttons or as menu items — which is a change to all three
 hosts that slot actions, not a rule added in one place. That is a
 different piece of work from this one, it is independently verifiable,
 and the desktop half of #69's symptom is removed by decision 2 anyway
 (the queue stops eating the header's width).
 It therefore stays #69, gets the finding above recorded on it, and
 follows immediately after this. What *this* plan owes it is the
 promise in the matrix — no action unreachable at any supported size —
 and the measurement that the only offender today is Playlists.
 **And the promise is not kept yet, which is the honest version of a
 claim this document made in its first draft.** "Decision 2 removes the
 desktop half of #69's symptom" was too strong. Measured after phase 2,
 at 900×600 on Playlists:
 | | before | after |
 |---|---|---|
 | queue open | main 379px, **all three** actions clipped | main 700px, **one** clipped |
 | queue closed | main 700px, one clipped | unchanged |
 So the queue's *contribution* is gone — open and closed are now
 identical, which is the whole of what this decision owed — and the
 residual "New Smart Playlist: 114/162px" is the header overflowing on
 its own, at a size the queue never touched. #69 is still a live defect
 at a supported size, and the matrix's promise is what will close it.
 ---
 ## Decision 4 — a very small window becomes the phone layout, not the mini-player
 #24 asks whether a very small window should switch to the mini-player
 (#12) "or simply refuse to go there". Both options in the question are
 worse than the one the codebase already has.
 **#12 is a second window, not a mode.** Its findings say so: v3
 supports multiple windows, `AlwaysOnTop` is a window *option*, and the
 frontend would need an entry branch mounting only the mini-player root
 for a second window loading the same bundle. Turning the main window
 into a mini-player at some width conflates the two: it would throw away
 the user's navigation state on a resize, and it puts the MPRIS question
 (#12's own open question — media controls are process-level and must
 not be per-window) on a code path that a drag can trigger by accident.
 **And "refuses" is unnecessary, because the reflow already exists.**
 The phone band is real, tested, and reached by width alone — a desktop
 window narrowed below 600px already gets `bottom-nav` and the phone
 shell. That is a better answer than refusing: it is strictly more
 usable than a hard minimum, it costs nothing new, and it is the same
 code Android runs, so it stays exercised.
 So: the main window reflows and never becomes a mini-player; #12 stays
 a separate always-on-top window and is not blocked by, or coupled to,
 this decision. The window minimum stays 800×600 for the reason in
 decision 1 — but the phone band is what happens below it, not a
 refusal, which is why the minimum is a comfort floor rather than a
 correctness one.
 ---
 ## Phases
 1. **This document**, linked from #24, with the matrix reported on the
   issue and #55 told whether it is unblocked. *(no code)* — **done**
 2. **The queue's overlay mode** — computed mode attribute, scrim,
   Escape and scrim-click close, focus return. The inline path is
   unchanged above the threshold. — **done**
 3. **The window minimum's comment** — replace both stale reasons with
   the measured ones. No value change. — **done**
 4. **Verification**, below. Including the specs that must change
   because they assert the old behaviour. — **done**
 #69 follows as its own branch; #55 became unblocked at phase 2.
 ## What landed, measured
 Main panel width with the queue open, before and after:
 | viewport | before | after | mode |
 |---|---|---|---|
 | 1280×800 | 759 | 759 | inline |
 | 1100×720 (default window) | 579 | 579 | inline |
 | 1024×768 | 503 | 503 | inline |
 | 900×600 | **379** | **700** | overlay |
 | 800×600 | 423 | 744 | overlay |
 | 390×780 | **69** | **390** | overlay |
 | 320×600 | **0** | **320** | overlay |
 The scrim is perceptible but subtle on a dark ramp, which is worth
 knowing before someone "fixes" it: sampled from the screenshots at
 900×600, the main panel's background goes 33,37,41 → 18,20,23 and a
 row's text 242 → 133. It covers the **content area only** — not the
 sidebar or the transport — on purpose: the queue is not modal, and
 leaving the navigation live means the scrim reads as "this is over the
 content" (which is what #24 asked for) without pretending the rest of
 the app is unavailable.
 ## What #69 did with the promise, and one thing this plan got wrong
 #69 landed on its own branch as decision 3 said it would, and the
 matrix's *no action is ever unreachable at any supported size* is now
 kept rather than promised. Measured on Playlists, actions clipped:
 | viewport | before #24 | after #24 | after #69 |
 |---|---|---|---|
 | 900×600, queue open | all three | one (114/162px) | none |
 | 900×600, queue closed | one | one | none |
 | 800×600, queue closed | one (158/162px) | one | none |
 | 390×780 | all three | all three | none |
 | 320×600 | all three | all three | none |
 The shape was the one decision 3 predicted — an actions API first, an
 overflow rule second — and all three hosts that slot actions migrated.
 **What this document got wrong is smaller and worth keeping.** Decision
 1 says the header's minimum is a *comfort* floor and that only the
 queue and the actions compete for the header's width. They are not the
 only two: every child of that flex row was `flex-shrink: 0`, so
 whatever came last lost, and the actions come last. At 320px the sort
 control alone is 172px of the header — so with every action already
 collapsed into the menu, the *menu button* was 76px off the right edge.
 The promise was still broken with nothing left to collapse.
 That is why #69 also had to decide what gives way: the title (which the
 navigation also states) and, below 600px, the word "Sort:" (which the
 direction arrow implies). Neither is an action, which is the rule the
 matrix actually encodes — **an action is a capability and everything
 else on that row is a label.**
 ## Verification, and what each tier cannot see
 - `make ui-test` — the queue panel's mode logic is component-tier
  work and belongs there. It **cannot** see the shell: the threshold is
  computed from the sidebar and viewport, which do not exist in that
  tier.
 - `make e2e` — `layout-overflow.spec.ts` gains the queue-open case at
  every band (it has none today, which is why main=0px at 320px has
  never failed anything) and **gains 900×600**, since the minimum is
  not the worst case. `queue-toggle-state.spec.ts` and
  `phone-shell.spec.ts` both touch the panel and must be re-read before
  editing.
 - **Screenshots at every band, read by a human.** This is not optional
  here: `layout-overflow.spec.ts` asserts the *shell* needs no sideways
  scrolling and passes on a build whose album header clips its own
  buttons (measured this session at 390px; filed on #66). Clipping
  *inside* a component is invisible to it, and clipping is this issue.
 - `make ui-visual` **cannot help at all** — the component tier renders
  the token fallbacks, because the theme only reaches `:root` in the
  real app.
 - Accessible names via `page.getByRole(...)`, never a shadow-root
  query. A drawer with a scrim is exactly the shape that grows a
  nameless control, and this repo has shipped one three times.
@@ -172,17 +172,12 @@ ui-setup: ## Install the Vitest browser provider's own Chromium (once)
 bindings-check: ## Fail if the generated bindings are stale
 	@./scripts/bindings-check.sh
 # Two CSS traps that report a long way from their cause, or not at all.
 # A backtick inside a comment in a css`` literal ends the literal, and
 # what you get back is a type error about CSSResult, or every test in
-# the suite failing to import. Four sessions, three plans. And a nested
+# the suite failing to import. Four sessions, three plans. Instant.
 # rule starting with an element name is dropped by the device's
 # Chrome 113 in silence -- no tier here runs an engine that can see it.
 # Instant.
 .PHONY: css-check
-css-check: ## Fail on a css`` literal ended early by a backtick, or a nested rule needing an &
+css-check: ## Fail if a css`` literal was ended early by a backtick in a comment
 	@cd frontend && node scripts/check-css-literals.mjs
 	@cd frontend && node scripts/check-css-nesting.mjs
 # .pi/ and CLAUDE.md document commands, and a doc that documents a
 # command wrongly is worse than no doc: an agent runs it confidently.
@@ -1,55 +0,0 @@
 //go:build android
 // The write itself, and nothing else. Everything decidable off a phone
 // is in androidlog.go; see the package comment for why.
 package androidlog
 /*
 #cgo LDFLAGS: -llog
 #include <stdlib.h>
 #include <android/log.h>
 */
 import "C"
 import (
 	"log/slog"
 	"unsafe"
 )
 // The priorities in androidlog.go are android/log.h's own values, and
 // these are what says so. A constant expression that would be negative
 // does not compile as a uint, so a renumbered header fails the build
 // here rather than logging everything at the wrong severity -- which is
 // the failure that would otherwise be invisible, since logcat would
 // happily print whatever number it was handed.
 const (
 	_ = uint(C.ANDROID_LOG_VERBOSE - PrioVerbose)
 	_ = uint(PrioVerbose - C.ANDROID_LOG_VERBOSE)
 	_ = uint(C.ANDROID_LOG_DEBUG - PrioDebug)
 	_ = uint(PrioDebug - C.ANDROID_LOG_DEBUG)
 	_ = uint(C.ANDROID_LOG_INFO - PrioInfo)
 	_ = uint(PrioInfo - C.ANDROID_LOG_INFO)
 	_ = uint(C.ANDROID_LOG_WARN - PrioWarn)
 	_ = uint(PrioWarn - C.ANDROID_LOG_WARN)
 	_ = uint(C.ANDROID_LOG_ERROR - PrioError)
 	_ = uint(PrioError - C.ANDROID_LOG_ERROR)
 	_ = uint(C.ANDROID_LOG_FATAL - PrioFatal)
 	_ = uint(PrioFatal - C.ANDROID_LOG_FATAL)
 )
 // New returns the handler main() installs on Android.
 func New(opts *slog.HandlerOptions) slog.Handler {
 	return NewHandler(opts, write)
 }
 // write hands one line to liblog.
 func write(prio int, tag, msg string) {
 	cTag := C.CString(tag)
 	defer C.free(unsafe.Pointer(cTag))
 	cMsg := C.CString(msg)
 	defer C.free(unsafe.Pointer(cMsg))
 	C.__android_log_write(C.int(prio), cTag, cMsg)
 }
@@ -1,250 +0,0 @@
 // Package androidlog routes slog to logcat.
 //
 // **An Android app's fd 1 and 2 go to /dev/null**, so every line this
 // app writes with slog is discarded on that platform -- including the
 // one naming the error it is about to os.Exit on. #52 is what that
 // cost: a process that vanished with no tombstone, no AndroidRuntime
 // stack and nothing in `logcat -b crash`, at Priority/Critical for
 // months, whose entire diagnosis was one slog.Error main.go was
 // already writing.
 //
 // The platform's own sink is __android_log_write, which is a handful
 // of cgo -- and cgo compiled by nothing `make lint` or `make test`
 // runs, since the only toolchain that builds the android tag is a
 // cross-compiler and the only thing that runs it is a phone. So the
 // split here is the one backend/mediacontrols/androidpayload.go makes,
 // pushed as far as it will go: **everything except the write itself is
 // in this file, untagged**. The priority mapping, the formatting, the
 // chunking and the handler's own attr and group bookkeeping are
 // ordinary Go that `go test` exercises on any platform; android.go is
 // fifteen lines that hand a string to liblog.
 package androidlog
 import (
 	"bytes"
 	"context"
 	"log/slog"
 	"strconv"
 	"strings"
 	"sync"
 )
 // Tag is what logcat labels these lines with.
 //
 // It is a constant of ours rather than the application id, because the
 // debug build carries `applicationIdSuffix ".dev"` so that it can be
 // installed beside the release app -- so a tag derived from the package
 // name is a *different* tag on the one build that can be inspected, and
 // the filter that is supposed to show these lines would hide them on
 // exactly the build used to look for them.
 const Tag = "yellowjacket"
 // Android's priorities, from android/log.h. These are the values
 // __android_log_write takes; android.go asserts at compile time that
 // they still match the header, so a renumbered platform is a build
 // failure here rather than a warning silently logged as an error.
 const (
 	PrioVerbose = 2
 	PrioDebug   = 3
 	PrioInfo    = 4
 	PrioWarn    = 5
 	PrioError   = 6
 	PrioFatal   = 7
 )
 // maxPayload is how much of one line liblog will carry.
 //
 // The kernel logger's entry is 4068 bytes for the tag, the message and
 // their two NULs together, and what does not fit is **dropped without
 // comment** -- so a long line would be truncated in the middle of the
 // thing worth reading. 3500 leaves room for the tag and for the "(N/M)"
 // a continuation carries.
 const maxPayload = 3500
 // WriteFunc is the platform sink: one already-formatted line, at one
 // priority, under one tag.
 //
 // It is a parameter rather than a package-level function so that the
 // handler can be driven by a test on a machine with no liblog at all.
 type WriteFunc func(prio int, tag, msg string)
 // Priority maps a slog level onto an Android one.
 //
 // slog's levels are open -- a caller may define its own at any int --
 // so this is a banding rather than a lookup: anything below Info is
 // debug, anything at or above Error is error. A custom level between
 // two of the standard ones lands in the band beneath it, which is what
 // slog's own level naming does.
 func Priority(level slog.Level) int {
 	switch {
 	case level < slog.LevelDebug:
 		return PrioVerbose
 	case level < slog.LevelInfo:
 		return PrioDebug
 	case level < slog.LevelWarn:
 		return PrioInfo
 	case level < slog.LevelError:
 		return PrioWarn
 	default:
 		return PrioError
 	}
 }
 // Handler formats records with slog's own TextHandler and hands each
 // line to a WriteFunc.
 //
 // It delegates the formatting rather than doing it, because WithAttrs
 // and WithGroup are the half of slog.Handler that is easy to get subtly
 // wrong -- and a logger whose groups are wrong is a logger nobody reads.
 // What it does own is what logcat needs and TextHandler does not know
 // about: the priority, and the fact that a line has a maximum length.
 type Handler struct {
 	write WriteFunc
 	// mu guards buf, which the delegate writes into. slog.Handler is
 	// documented as safe for concurrent use.
 	mu       *sync.Mutex
 	buf      *bytes.Buffer
 	delegate slog.Handler
 }
 // NewHandler builds a handler over an arbitrary sink.
 //
 // The time and the level are dropped from the formatted line: logcat
 // stamps every entry with both, and repeating them costs a quarter of
 // the width of a phone-sized terminal to say the same thing twice.
 func NewHandler(opts *slog.HandlerOptions, write WriteFunc) *Handler {
 	buf := &bytes.Buffer{}
 	inner := &slog.HandlerOptions{}
 	if opts != nil {
 		*inner = *opts
 	}
 	user := inner.ReplaceAttr
 	inner.ReplaceAttr = func(groups []string, a slog.Attr) slog.Attr {
 		if len(groups) == 0 && isBuiltin(a) {
 			return slog.Attr{}
 		}
 		if user != nil {
 			return user(groups, a)
 		}
 		return a
 	}
 	return &Handler{
 		write:    write,
 		mu:       &sync.Mutex{},
 		buf:      buf,
 		delegate: slog.NewTextHandler(buf, inner),
 	}
 }
 // isBuiltin reports whether an attr is slog's own time or level,
 // rather than a caller's attribute that happens to share the name.
 //
 // ReplaceAttr cannot tell those apart by key. It is called with an
 // empty group path for the built-ins *and* for every top-level
 // attribute, so a key comparison alone silently eats a caller's own
 // "level" or "time" -- which is not hypothetical: the probe that
 // verified this package on the device logged one, and the attribute
 // vanished. The kinds are what separate them, because slog builds the
 // built-ins as slog.Any(LevelKey, r.Level) and slog.Time(TimeKey, ...)
 // and an attribute value of type slog.Level is not something a caller
 // passes by accident.
 func isBuiltin(a slog.Attr) bool {
 	switch a.Key {
 	case slog.TimeKey:
 		return a.Value.Kind() == slog.KindTime
 	case slog.LevelKey:
 		_, ok := a.Value.Any().(slog.Level)
 		return ok
 	default:
 		return false
 	}
 }
 // Enabled reports whether the level is worth formatting.
 func (h *Handler) Enabled(ctx context.Context, level slog.Level) bool {
 	return h.delegate.Enabled(ctx, level)
 }
 // Handle formats one record and writes it out, in as many entries as
 // its length demands.
 func (h *Handler) Handle(ctx context.Context, rec slog.Record) error {
 	h.mu.Lock()
 	defer h.mu.Unlock()
 	h.buf.Reset()
 	if err := h.delegate.Handle(ctx, rec); err != nil {
 		return err
 	}
 	prio := Priority(rec.Level)
 	for _, line := range Chunk(strings.TrimRight(h.buf.String(), "\n")) {
 		h.write(prio, Tag, line)
 	}
 	return nil
 }
 // WithAttrs returns a handler carrying the given attributes.
 func (h *Handler) WithAttrs(attrs []slog.Attr) slog.Handler {
 	return h.derive(h.delegate.WithAttrs(attrs))
 }
 // WithGroup returns a handler that qualifies subsequent attributes.
 func (h *Handler) WithGroup(name string) slog.Handler {
 	return h.derive(h.delegate.WithGroup(name))
 }
 // derive shares the buffer and its mutex with the parent.
 //
 // They must be shared rather than copied: the delegate returned by
 // WithAttrs writes into the *same* buffer this one does, so a second
 // mutex would guard nothing and two loggers derived from one would
 // interleave their bytes into a single line.
 func (h *Handler) derive(delegate slog.Handler) *Handler {
 	return &Handler{
 		write:    h.write,
 		mu:       h.mu,
 		buf:      h.buf,
 		delegate: delegate,
 	}
 }
 // Chunk splits a formatted record into entries liblog will carry
 // whole.
 //
 // A record short enough to fit is returned as it is, which is nearly
 // every record; the numbering only appears where something was going
 // to be silently truncated anyway. It splits on bytes rather than runes
 // because the limit is a byte count -- a multi-byte rune straddling the
 // boundary is a mojibake character in a log line, against a lost one.
 func Chunk(msg string) []string {
 	if len(msg) <= maxPayload {
 		return []string{msg}
 	}
 	var parts []string
 	for rest := msg; rest != ""; {
 		n := min(maxPayload, len(rest))
 		parts = append(parts, rest[:n])
 		rest = rest[n:]
 	}
 	numbered := make([]string, 0, len(parts))
 	for i, p := range parts {
 		numbered = append(
 			numbered,
 			"("+strconv.Itoa(i+1)+"/"+strconv.Itoa(len(parts))+") "+p,
 		)
 	}
 	return numbered
 }
@@ -1,355 +0,0 @@
 package androidlog_test
 import (
 	"log/slog"
 	"strings"
 	"sync"
 	"testing"
 	"yellowjacket/backend/androidlog"
 )
 // entry is one call to the sink.
 type entry struct {
 	prio int
 	tag  string
 	msg  string
 }
 // recorder is the platform write, on a machine with no platform.
 type recorder struct {
 	mu      sync.Mutex
 	entries []entry
 }
 func (r *recorder) write(prio int, tag, msg string) {
 	r.mu.Lock()
 	defer r.mu.Unlock()
 	r.entries = append(r.entries, entry{prio: prio, tag: tag, msg: msg})
 }
 func (r *recorder) only(t *testing.T) entry {
 	t.Helper()
 	r.mu.Lock()
 	defer r.mu.Unlock()
 	if len(r.entries) != 1 {
 		t.Fatalf("want exactly one entry, got %d: %v", len(r.entries), r.entries)
 	}
 	return r.entries[0]
 }
 func newLogger(r *recorder, level slog.Level) *slog.Logger {
 	return slog.New(androidlog.NewHandler(
 		&slog.HandlerOptions{Level: level},
 		r.write,
 	))
 }
 // TestPriorityMapsEveryLevel pins the level banding.
 //
 // This is the one thing in #160 that a wrong answer hides rather than
 // breaks: logcat prints whatever priority it is handed, so an Error
 // filed as Info is a line that is present, correct and invisible to
 // every filter anyone would use to look for it.
 func TestPriorityMapsEveryLevel(t *testing.T) {
 	t.Parallel()
 	tests := []struct {
 		name  string
 		level slog.Level
 		want  int
 	}{
 		{"below debug is verbose", slog.LevelDebug - 1, androidlog.PrioVerbose},
 		{"debug", slog.LevelDebug, androidlog.PrioDebug},
 		{"info", slog.LevelInfo, androidlog.PrioInfo},
 		{"warn", slog.LevelWarn, androidlog.PrioWarn},
 		{"error", slog.LevelError, androidlog.PrioError},
 		// slog's levels are open, so a caller may sit between two of
 		// the named ones.  Each lands in the band beneath it, which is
 		// what slog's own level naming does ("INFO+2").
 		{"between info and warn", slog.LevelInfo + 2, androidlog.PrioInfo},
 		{"between warn and error", slog.LevelWarn + 1, androidlog.PrioWarn},
 		{"above error", slog.LevelError + 4, androidlog.PrioError},
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
 			t.Parallel()
 			if got := androidlog.Priority(tt.level); got != tt.want {
 				t.Errorf("Priority(%v) = %d, want %d", tt.level, got, tt.want)
 			}
 		})
 	}
 }
 // TestPrioritiesAreTheHeadersValues pins the constants themselves.
 //
 // android.go asserts these against android/log.h at compile time, but
 // only a cross-compiler ever builds that file.  This is the assertion
 // that runs in CI, and the numbers are written out longhand on purpose
 // -- comparing a constant to itself would pass on any renumbering.
 func TestPrioritiesAreTheHeadersValues(t *testing.T) {
 	t.Parallel()
 	for _, tt := range []struct {
 		name string
 		got  int
 		want int
 	}{
 		{"verbose", androidlog.PrioVerbose, 2},
 		{"debug", androidlog.PrioDebug, 3},
 		{"info", androidlog.PrioInfo, 4},
 		{"warn", androidlog.PrioWarn, 5},
 		{"error", androidlog.PrioError, 6},
 		{"fatal", androidlog.PrioFatal, 7},
 	} {
 		if tt.got != tt.want {
 			t.Errorf("%s priority = %d, want %d", tt.name, tt.got, tt.want)
 		}
 	}
 }
 // TestRecordReachesTheSink is the whole point of the package: a line
 // written with slog arrives, under the app's tag, at the right
 // priority.
 func TestRecordReachesTheSink(t *testing.T) {
 	t.Parallel()
 	rec := &recorder{}
 	newLogger(rec, slog.LevelInfo).Error("application error", "err", "boom")
 	got := rec.only(t)
 	if got.prio != androidlog.PrioError {
 		t.Errorf("priority = %d, want %d", got.prio, androidlog.PrioError)
 	}
 	if got.tag != androidlog.Tag {
 		t.Errorf("tag = %q, want %q", got.tag, androidlog.Tag)
 	}
 	if !strings.Contains(got.msg, "application error") {
 		t.Errorf("message %q does not carry the message", got.msg)
 	}
 	if !strings.Contains(got.msg, `err=boom`) {
 		t.Errorf("message %q does not carry the attribute", got.msg)
 	}
 }
 // TestTheTagIsNotTheApplicationID guards the trap the tag exists to
 // avoid.
 //
 // The debug build carries `applicationIdSuffix ".dev"`, so it is
 // installed as app.yellowjacket.dev -- and it is the *only* build whose
 // WebView can be inspected, so it is the build anyone debugging this
 // app is running.  A tag derived from the application id therefore
 // differs between the build being looked at and the build the filter
 // was written for, which is the failure this whole issue is about
 // wearing a different hat.
 func TestTheTagIsNotTheApplicationID(t *testing.T) {
 	t.Parallel()
 	if strings.Contains(androidlog.Tag, ".") {
 		t.Errorf(
 			"tag %q looks like an application id; it must be stable "+
 				"across the debug suffix",
 			androidlog.Tag,
 		)
 	}
 	// Logcat's tag field is 23 bytes.  A longer one is truncated, and a
 	// truncated tag matches no filter.
 	if len(androidlog.Tag) > 23 {
 		t.Errorf("tag %q is %d bytes, over logcat's 23", androidlog.Tag, len(androidlog.Tag))
 	}
 }
 // TestTimeAndLevelAreDropped checks the formatting decision.
 //
 // logcat stamps every entry with a timestamp and a priority letter, so
 // carrying slog's own is the same information twice on a 424px screen.
 func TestTimeAndLevelAreDropped(t *testing.T) {
 	t.Parallel()
 	rec := &recorder{}
 	newLogger(rec, slog.LevelInfo).Warn("scan finished", "files", 1577)
 	got := rec.only(t).msg
 	if strings.Contains(got, "time=") {
 		t.Errorf("message %q still carries a timestamp", got)
 	}
 	if strings.Contains(got, "level=") {
 		t.Errorf("message %q still carries a level", got)
 	}
 	if !strings.Contains(got, "files=1577") {
 		t.Errorf("message %q lost its attributes with them", got)
 	}
 }
 // TestACallersOwnLevelAttrSurvives is a regression, and it was found on
 // the phone rather than here.
 //
 // Dropping slog's built-in time and level by key alone also drops a
 // caller's attribute of the same name, because ReplaceAttr sees an
 // empty group path for both. The probe that verified this package on
 // the device wrote slog.Info("...", "level", "info") and logcat showed
 // the message with no attributes at all.
 func TestACallersOwnLevelAttrSurvives(t *testing.T) {
 	t.Parallel()
 	rec := &recorder{}
 	newLogger(rec, slog.LevelInfo).Info("probe", "level", "info", "time", "soon")
 	got := rec.only(t).msg
 	for _, want := range []string{"level=info", "time=soon"} {
 		if !strings.Contains(got, want) {
 			t.Errorf("message %q lost the caller's %q", got, want)
 		}
 	}
 	// And slog's own are still gone: the built-in level renders as a
 	// bare word like INFO, never as the caller's value.
 	if strings.Contains(got, "level=INFO") {
 		t.Errorf("message %q carries slog's own level", got)
 	}
 }
 // TestLevelIsHonoured checks that Enabled reaches the delegate.
 func TestLevelIsHonoured(t *testing.T) {
 	t.Parallel()
 	rec := &recorder{}
 	log := newLogger(rec, slog.LevelWarn)
 	log.Info("not this one")
 	log.Warn("this one")
 	if got := rec.only(t).msg; !strings.Contains(got, "this one") {
 		t.Errorf("wrong record survived: %q", got)
 	}
 }
 // TestGroupsAndAttrsSurvive covers the half of slog.Handler this
 // delegates rather than implements -- the reason it delegates at all.
 func TestGroupsAndAttrsSurvive(t *testing.T) {
 	t.Parallel()
 	rec := &recorder{}
 	log := newLogger(rec, slog.LevelInfo).
 		With("component", "player").
 		WithGroup("track")
 	log.Info("loaded", "path", "/sdcard/Music/a.flac")
 	got := rec.only(t).msg
 	for _, want := range []string{
 		"component=player",
 		"track.path=/sdcard/Music/a.flac",
 	} {
 		if !strings.Contains(got, want) {
 			t.Errorf("message %q is missing %q", got, want)
 		}
 	}
 }
 // TestDerivedHandlersDoNotInterleave is why derive shares the buffer's
 // mutex rather than taking a new one.
 //
 // Two loggers derived from one write into the same buffer, so a second
 // mutex would guard nothing and a concurrent pair would splice each
 // other's bytes into a single line -- which reads as corrupted logs
 // under load and as nothing at all in a test that logs once.
 func TestDerivedHandlersDoNotInterleave(t *testing.T) {
 	t.Parallel()
 	rec := &recorder{}
 	base := newLogger(rec, slog.LevelInfo)
 	var wg sync.WaitGroup
 	for i := range 8 {
 		wg.Add(1)
 		go func() {
 			defer wg.Done()
 			log := base.With("worker", i).WithGroup("g")
 			for range 50 {
 				log.Info("tick", "n", i)
 			}
 		}()
 	}
 	wg.Wait()
 	rec.mu.Lock()
 	defer rec.mu.Unlock()
 	if len(rec.entries) != 8*50 {
 		t.Fatalf("got %d entries, want %d", len(rec.entries), 8*50)
 	}
 	for _, e := range rec.entries {
 		if strings.Count(e.msg, "msg=tick") != 1 {
 			t.Fatalf("interleaved line: %q", e.msg)
 		}
 	}
 }
 // TestChunkLeavesShortLinesAlone is the common case: no numbering
 // appears on a record that was never going to be truncated.
 func TestChunkLeavesShortLinesAlone(t *testing.T) {
 	t.Parallel()
 	got := androidlog.Chunk("msg=short")
 	if len(got) != 1 || got[0] != "msg=short" {
 		t.Errorf("Chunk(short) = %q, want the input unchanged", got)
 	}
 }
 // TestChunkSplitsWhatWouldBeTruncated covers the case liblog drops
 // silently.
 func TestChunkSplitsWhatWouldBeTruncated(t *testing.T) {
 	t.Parallel()
 	const n = 9000
 	long := strings.Repeat("x", n)
 	parts := androidlog.Chunk(long)
 	if len(parts) < 2 {
 		t.Fatalf("a %d-byte line was not split", n)
 	}
 	var payload strings.Builder
 	for i, p := range parts {
 		if len(p) > 4000 {
 			t.Errorf("part %d is %d bytes, over liblog's entry", i, len(p))
 		}
 		_, rest, found := strings.Cut(p, ") ")
 		if !found {
 			t.Fatalf("part %d carries no (n/m) marker: %q", i, p)
 		}
 		payload.WriteString(rest)
 	}
 	if payload.String() != long {
 		t.Errorf("the parts do not reassemble into the input")
 	}
 }
@@ -544,7 +544,7 @@ func (c *Config) SetDefaultPage(page string) error {
 		c.General.ApplyDefaults()
 	}
-	c.General.DefaultPage = View(page)
+	c.General.DefaultPage = DefaultPage(page)
 	if err := c.General.Validate(); err != nil {
 		return fmt.Errorf(
@@ -666,124 +666,6 @@ func (c *Config) SetAllowMeteredCatalogDownload(allow bool) error {
 	return nil
 }
 // GetPopupVolume reports whether the bottom bar's volume control is a
 // click-to-open popup rather than an inline slider (#42).
 func (c *Config) GetPopupVolume() bool {
 	if c.General == nil {
 		return false
 	}
 	return c.General.PopupVolume
 }
 // SetPopupVolume saves the volume control's presentation.
 //
 // Nothing to validate: both values are legal at every width, and the
 // frontend additionally stands the inline slider down below the phone
 // breakpoint whatever this says, because that is about room rather than
 // about preference.
 func (c *Config) SetPopupVolume(popup bool) error {
 	if c.General == nil {
 		c.General = &GeneralConfig{}
 		c.General.ApplyDefaults()
 	}
 	c.General.PopupVolume = popup
 	if err := c.Save(); err != nil {
 		return fmt.Errorf(
 			"could not save config: %w", err,
 		)
 	}
 	events.Emit(
 		c.ctx,
 		events.GeneralConfigChanged,
 		map[string]any{
 			"PopupVolume": popup,
 		},
 	)
 	c.logger.Info("volume control presentation updated", "popup", popup)
 	return nil
 }
 // GetViewVisibility reports which primary views the sidebar should
 // show, answered for every known view rather than only the ones the
 // config mentions -- so the frontend filters on a value and never has
 // to hold a second copy of the defaults.
 func (c *Config) GetViewVisibility() map[string]bool {
 	if c.General == nil {
 		general := &GeneralConfig{}
 		general.ApplyDefaults()
 		return general.ResolvedViewVisibility()
 	}
 	return c.General.ResolvedViewVisibility()
 }
 // SetViewVisible shows or hides one primary view.
 //
 // Two refusals, both about a state the user cannot get out of from the
 // UI they would be left with: Settings is never hideable, and the
 // launch page is never hideable while it is the launch page (change it
 // first). Hiding a view does not make it unreachable -- `navigate`
 // still resolves it, which detail views depend on -- it only takes the
 // nav item away.
 func (c *Config) SetViewVisible(view string, visible bool) error {
 	spec, known := LookupView(view)
 	if !known {
 		return fmt.Errorf("%w: %q", errUnknownView, view)
 	}
 	if c.General == nil {
 		c.General = &GeneralConfig{}
 		c.General.ApplyDefaults()
 	}
 	if !visible {
 		if !spec.Hideable {
 			return fmt.Errorf("%w: %q", errViewNotHideable, view)
 		}
 		if spec.ID == c.General.DefaultPage {
 			return fmt.Errorf("%w: %q", errViewIsLaunchPage, view)
 		}
 	}
 	if c.General.ViewVisibility == nil {
 		c.General.ViewVisibility = make(map[string]bool, len(Views))
 	}
 	c.General.ViewVisibility[view] = visible
 	if err := c.General.Validate(); err != nil {
 		return fmt.Errorf("invalid view visibility: %w", err)
 	}
 	if err := c.Save(); err != nil {
 		return fmt.Errorf("could not save config: %w", err)
 	}
 	events.Emit(
 		c.ctx,
 		events.GeneralConfigChanged,
 		map[string]any{
 			"ViewVisibility": c.General.ResolvedViewVisibility(),
 		},
 	)
 	c.logger.Info(
 		"view visibility updated",
 		"view", view,
 		"visible", visible,
 	)
 	return nil
 }
 // GetTrackListColumns returns the configured track-list columns.
 func (c *Config) GetTrackListColumns() []tracklist.Column {
 	if c.TrackList == nil {
@@ -188,43 +188,3 @@ func TestEmit_FavoritesChangeCarriesFullConfig(t *testing.T) {
 		}
 	}
 }
 // TestEmit_PopupVolumeRoundTripsAndDefaultsToInline pins both halves of
 // #42's storage decision.
 //
 // The **default** is the load-bearing one: inline is what a fresh
 // install and an existing `config.toml` with no such key must both
 // produce, which is why the field names the popup rather than the
 // inline slider. A flag spelled the other way round would default to
 // false, hand every existing install the popup this issue exists to
 // stop being the only option, and need a migration to say otherwise.
 func TestEmit_PopupVolumeRoundTripsAndDefaultsToInline(t *testing.T) {
 	t.Parallel()
 	conf, rec := setupRecordedConfig(t)
 	if conf.GetPopupVolume() {
 		t.Error("a config with no PopupVolume key wants the popup, want inline")
 	}
 	if err := conf.SetPopupVolume(true); err != nil {
 		t.Fatalf("SetPopupVolume: %v", err)
 	}
 	if !conf.GetPopupVolume() {
 		t.Error("GetPopupVolume = false after setting it true")
 	}
 	data := payloadMap(t, rec, events.GeneralConfigChanged)
 	if data["PopupVolume"] != true {
 		t.Errorf("PopupVolume = %v, want true", data["PopupVolume"])
 	}
 	if err := conf.SetPopupVolume(false); err != nil {
 		t.Fatalf("SetPopupVolume(false): %v", err)
 	}
 	if conf.GetPopupVolume() {
 		t.Error("GetPopupVolume = true after setting it false")
 	}
 }
@@ -5,14 +5,28 @@ import (
 	"fmt"
 )
-// DefaultDefaultPage is the launch page for a fresh install.
+// DefaultPage identifies which view the app opens to on launch.
-const DefaultDefaultPage = ViewHome
+type DefaultPage string
-var (
+// Valid DefaultPage values, matching the frontend's top-level route ids.
-	errUnknownDefaultPage = errors.New("unknown default page")
+const (
-	errViewCannotLaunch   = errors.New("view cannot be the launch page")
+	DefaultPageHome      DefaultPage = "home"
 	DefaultPageTracks    DefaultPage = "tracks"
 	DefaultPageAlbums    DefaultPage = "albums"
 	DefaultPageArtists   DefaultPage = "artists"
 	DefaultPageGenres    DefaultPage = "genres"
 	DefaultPagePlaylists DefaultPage = "playlists"
 	DefaultPageExplore   DefaultPage = "explore"
 	DefaultPageDownloads DefaultPage = "downloads"
 	DefaultPageAutotag   DefaultPage = "autotag"
 	DefaultPageJobs      DefaultPage = "jobs"
 )
 // DefaultDefaultPage is the launch page for a fresh install.
 const DefaultDefaultPage = DefaultPageHome
 var errUnknownDefaultPage = errors.New("unknown default page")
 // QueueFallback identifies what plays, if anything, once the queue
 // runs out with nothing left to auto-advance to.
 type QueueFallback string
@@ -32,52 +46,18 @@ var errUnknownQueueFallback = errors.New("unknown queue fallback")
 // GeneralConfig holds general application preferences that don't
 // belong to a more specific subsystem.
 type GeneralConfig struct {
-	DefaultPage   View          `toml:"DefaultPage"`
+	DefaultPage   DefaultPage   `toml:"DefaultPage"`
 	QueueFallback QueueFallback `toml:"QueueFallback"`
 	// ViewVisibility says which sidebar destinations are shown, keyed by
 	// view id.
 	//
 	// **An absent key means that view's own default** (`Views`), and that
 	// is the whole reason this is a map rather than a `HiddenViews
 	// []string` or a struct of booleans. A list's zero value is "hide
 	// nothing", which cannot express Autotag being off by default without
 	// a migration; a struct field for a view that later stops existing is
 	// stored garbage somebody has to deprecate. Here a view added later
 	// gets its own default rather than being invisible or forcibly
 	// visible, an unknown key is dropped on load, and no install needs
 	// migrating in either direction. Same polarity rule as
 	// AllowMeteredCatalogDownload: the zero value is the intended answer.
 	ViewVisibility map[string]bool `toml:"ViewVisibility"`
 	// AllowMeteredCatalogDownload permits the ~0.6 GB Explore catalog to
 	// be fetched on a connection the platform calls cellular. It defaults
 	// to false, which is the whole point: the zero value is the safe one,
 	// so an existing config with no such key refuses by default rather
 	// than needing a migration to become careful.
 	AllowMeteredCatalogDownload bool `toml:"AllowMeteredCatalogDownload"`
 	// PopupVolume draws the bottom bar's volume as a click-to-open popup
 	// instead of a slider that is always there (#42).
 	//
 	// The polarity is the rule this file already states twice: **the
 	// zero value is the intended answer**. Inline is the new default, so
 	// the flag has to name the *other* choice — an `InlineVolume bool`
 	// would default to false and give every existing install the popup
 	// this issue exists to stop being the only option, and would need a
 	// migration to say otherwise.
 	PopupVolume bool `toml:"PopupVolume"`
 }
 // ApplyDefaults fills zero-value fields with sensible defaults.
 //
 // A launch page naming a *retired* view is treated as a zero value
 // rather than as an error, because the alternative is an app that will
 // not start for anyone who had that page selected when it was removed.
 // An unknown-but-not-retired name still fails Validate: that is a typo,
 // and telling someone about it is the useful answer.
 func (c *GeneralConfig) ApplyDefaults() {
 	if _, retired := RetiredViews[c.DefaultPage]; retired {
 		c.DefaultPage = ""
 	}
 	if c.DefaultPage == "" {
 		c.DefaultPage = DefaultDefaultPage
 	}
@@ -91,17 +71,15 @@ func (c *GeneralConfig) ApplyDefaults() {
 func (c *GeneralConfig) Validate() error {
 	c.ApplyDefaults()
-	spec, known := LookupView(string(c.DefaultPage))
+	switch c.DefaultPage {
-	if !known {
+	case DefaultPageHome, DefaultPageTracks, DefaultPageAlbums, DefaultPageArtists,
 		DefaultPageGenres, DefaultPagePlaylists, DefaultPageExplore, DefaultPageDownloads,
 		DefaultPageAutotag, DefaultPageJobs:
 		// Valid.
 	default:
 		return fmt.Errorf("%w: %q", errUnknownDefaultPage, c.DefaultPage)
 	}
 	if !spec.CanLaunch {
 		return fmt.Errorf("%w: %q", errViewCannotLaunch, c.DefaultPage)
 	}
 	c.normalizeViewVisibility()
 	switch c.QueueFallback {
 	case QueueFallbackStop, QueueFallbackFavorites, QueueFallbackDynamicMix:
 		// Valid.
@@ -111,51 +89,3 @@ func (c *GeneralConfig) Validate() error {
 	return nil
 }
 // normalizeViewVisibility drops what the stored map may not say, and
 // repairs the one invariant the shell depends on.
 //
 // Three things are dropped or forced, and all three are reachable only
 // from a hand-edited config or from a version that knew different
 // views: an unknown id (a view removed since, e.g. when #27 folds Jobs
 // into Settings) says nothing to anybody; a view that is not Hideable
 // cannot be false; and **the launch page is always visible**, because
 // otherwise an install lands on a page with no nav item pointing at it.
 //
 // That last one is a *repair* here and an *error* at the setter
 // (SetViewVisible), deliberately. On load there is nobody to tell and
 // the honest reading of "my launch page is Autotag" is that this user
 // wants Autotag, so it is un-hidden rather than the launch page being
 // silently reset to something they did not choose. At the setter the
 // user is right there and can act, so it refuses and says why.
 func (c *GeneralConfig) normalizeViewVisibility() {
 	for id := range c.ViewVisibility {
 		spec, known := LookupView(id)
 		if !known || !spec.Hideable {
 			delete(c.ViewVisibility, id)
 		}
 	}
 	if visible, ok := c.ViewVisibility[string(c.DefaultPage)]; ok && !visible {
 		c.ViewVisibility[string(c.DefaultPage)] = true
 	}
 }
 // ResolvedViewVisibility answers for every known view, so no caller has
 // to know the defaults -- the frontend included, which is why the
 // binding returns this rather than the stored map.
 func (c *GeneralConfig) ResolvedViewVisibility() map[string]bool {
 	resolved := make(map[string]bool, len(Views))
 	for _, v := range Views {
 		visible := v.VisibleByDefault
 		if stored, ok := c.ViewVisibility[string(v.ID)]; ok && v.Hideable {
 			visible = stored
 		}
 		resolved[string(v.ID)] = visible
 	}
 	return resolved
 }
@@ -1,103 +0,0 @@
 package config
 import "errors"
 var (
 	errUnknownView      = errors.New("unknown view")
 	errViewNotHideable  = errors.New("view cannot be hidden")
 	errViewIsLaunchPage = errors.New("view is the launch page")
 )
 // View identifies one of the shell's primary destinations -- the
 // things the sidebar lists and `index.ts` knows as `VIEW_TAGS`.
 type View string
 // The primary views, in no particular order: the sidebar owns the order
 // it draws them in, because that is presentation.
 const (
 	ViewHome      View = "home"
 	ViewPlaylists View = "playlists"
 	ViewArtists   View = "artists"
 	ViewGenres    View = "genres"
 	ViewAlbums    View = "albums"
 	ViewTracks    View = "tracks"
 	ViewExplore   View = "explore"
 	ViewDownloads View = "downloads"
 	ViewAutotag   View = "autotag"
 	ViewSettings  View = "settings"
 )
 // RetiredViews are destinations that used to exist and no longer do.
 //
 // A *visibility* entry for a removed view needs no such list: it is a
 // key in a map, and an unknown key is dropped on load. A `DefaultPage`
 // is a **value**, and an unknown one fails validation -- which on the
 // load path means the app refuses to start rather than a setting being
 // ignored. So the one shape that cannot be retired for free is named
 // here and reset to the default instead.
 //
 // `jobs` was folded into Settings by #27: library scans under
 // Libraries, index work under Search Index, downloads under the
 // download clients, and the autotag apply into the Autotag view.
 var RetiredViews = map[View]struct{}{
 	"jobs": {},
 }
 // ViewSpec is what the backend knows about a destination. The label and
 // the icon are deliberately absent: those are presentation, they live
 // beside the rest of the app's icon vocabulary in
 // `frontend/src/utils/icon-language.ts`, and a Go copy of them would be
 // a second thing to keep in step for nothing.
 type ViewSpec struct {
 	// ID is the view name the frontend navigates by.
 	ID View
 	// VisibleByDefault is what an install gets when the config says
 	// nothing about this view -- which is every install until somebody
 	// changes it, and every view added after this one shipped.
 	VisibleByDefault bool
 	// Hideable is false for Settings alone. It is a property of the
 	// view rather than a check in the setter because `config.toml` is
 	// hand-editable, and an app that can be locked out of its own
 	// Settings by a typo is a support problem nobody can debug
 	// remotely.
 	Hideable bool
 	// CanLaunch reports whether the view may be the launch page.
 	// Settings is the only one that may not, which is the shape the
 	// DefaultPage enum already had.
 	CanLaunch bool
 }
 // Views is the one list of primary destinations, in the order Settings
 // offers them.
 //
 // It is the single source for three things that used to be written down
 // separately: which views exist, which of them may be the launch page
 // (`DefaultPage`'s validation reads it), and what an unconfigured
 // install shows.
 //
 // Autotag is the one view hidden by default: it rewrites tags on disk,
 // which is not what most libraries want on day one, and #25 asks for it
 // to be turned on deliberately.
 var Views = []ViewSpec{
 	{ID: ViewHome, VisibleByDefault: true, Hideable: true, CanLaunch: true},
 	{ID: ViewPlaylists, VisibleByDefault: true, Hideable: true, CanLaunch: true},
 	{ID: ViewArtists, VisibleByDefault: true, Hideable: true, CanLaunch: true},
 	{ID: ViewGenres, VisibleByDefault: true, Hideable: true, CanLaunch: true},
 	{ID: ViewAlbums, VisibleByDefault: true, Hideable: true, CanLaunch: true},
 	{ID: ViewTracks, VisibleByDefault: true, Hideable: true, CanLaunch: true},
 	{ID: ViewExplore, VisibleByDefault: true, Hideable: true, CanLaunch: true},
 	{ID: ViewDownloads, VisibleByDefault: true, Hideable: true, CanLaunch: true},
 	{ID: ViewAutotag, VisibleByDefault: false, Hideable: true, CanLaunch: true},
 	{ID: ViewSettings, VisibleByDefault: true, Hideable: false, CanLaunch: false},
 }
 // LookupView returns the spec for a view id.
 func LookupView(id string) (ViewSpec, bool) {
 	for _, v := range Views {
 		if string(v.ID) == id {
 			return v, true
 		}
 	}
 	return ViewSpec{}, false
 }
@@ -1,307 +0,0 @@
 package config
 import (
 	"errors"
 	"log/slog"
 	"path/filepath"
 	"testing"
 )
 // newViewTestConfig builds a Config backed by a temp file, which is all
 // SetViewVisible needs: it saves and emits, and the emit is a no-op
 // without a running app.
 func newViewTestConfig(t *testing.T) *Config {
 	t.Helper()
 	c := &Config{
 		logger:   slog.Default(),
 		filePath: filepath.Join(t.TempDir(), "config.toml"),
 	}
 	// Load a file that is not there: that is what marks the config
 	// loaded, without which Save refuses on the *second* write.
 	if err := c.Load(); err != nil {
 		t.Fatalf("Load() error: %v", err)
 	}
 	return c
 }
 // A view the config says nothing about takes its own default, which is
 // what makes this need no migration in either direction: an existing
 // install gets Autotag hidden without a key, and a view added later
 // gets its own answer rather than the list's.
 func TestViewVisibilityDefaults(t *testing.T) {
 	t.Parallel()
 	general := &GeneralConfig{}
 	general.ApplyDefaults()
 	resolved := general.ResolvedViewVisibility()
 	if len(resolved) != len(Views) {
 		t.Fatalf("resolved %d views, want %d", len(resolved), len(Views))
 	}
 	if resolved[string(ViewAutotag)] {
 		t.Error("autotag should be hidden by default")
 	}
 	for _, v := range Views {
 		if v.ID == ViewAutotag {
 			continue
 		}
 		if !resolved[string(v.ID)] {
 			t.Errorf("%s should be visible by default", v.ID)
 		}
 	}
 }
 // A stored answer wins over the default, in both directions -- turning
 // Autotag on is the whole user-facing point.
 func TestViewVisibilityStoredWins(t *testing.T) {
 	t.Parallel()
 	general := &GeneralConfig{
 		ViewVisibility: map[string]bool{
 			string(ViewAutotag): true,
 			string(ViewExplore): false,
 		},
 	}
 	general.ApplyDefaults()
 	resolved := general.ResolvedViewVisibility()
 	if !resolved[string(ViewAutotag)] {
 		t.Error("autotag was switched on and should be visible")
 	}
 	if resolved[string(ViewExplore)] {
 		t.Error("explore was switched off and should be hidden")
 	}
 }
 // A key for a view that no longer exists is discarded rather than
 // migrated. This is the property the #25-before-#27 ordering rests on:
 // when Jobs folds into Settings, `jobs = true` in somebody's config is
 // a key nothing asks about, not a cleanup task.
 func TestValidateDropsUnknownAndUnhideableViews(t *testing.T) {
 	t.Parallel()
 	general := &GeneralConfig{
 		ViewVisibility: map[string]bool{
 			"a-view-that-was-removed": true,
 			string(ViewSettings):      false,
 			string(ViewAutotag):       true,
 		},
 	}
 	if err := general.Validate(); err != nil {
 		t.Fatalf("Validate() error: %v", err)
 	}
 	if _, ok := general.ViewVisibility["a-view-that-was-removed"]; ok {
 		t.Error("an unknown view id should be dropped on load")
 	}
 	if _, ok := general.ViewVisibility[string(ViewSettings)]; ok {
 		t.Error("settings is not hideable and should not be stored")
 	}
 	if !general.ResolvedViewVisibility()[string(ViewSettings)] {
 		t.Error("settings must resolve visible whatever the file said")
 	}
 }
 // On load there is nobody to tell, so a launch page hidden by a
 // hand-edited file is un-hidden rather than the launch page being
 // reset to something the user did not choose.
 func TestValidateRevealsAHiddenLaunchPage(t *testing.T) {
 	t.Parallel()
 	general := &GeneralConfig{
 		DefaultPage: ViewAutotag,
 		ViewVisibility: map[string]bool{
 			string(ViewAutotag): false,
 		},
 	}
 	if err := general.Validate(); err != nil {
 		t.Fatalf("Validate() error: %v", err)
 	}
 	if !general.ResolvedViewVisibility()[string(ViewAutotag)] {
 		t.Error("the launch page must be visible")
 	}
 }
 // A launch page naming a view that no longer exists resets to the
 // default instead of failing validation, which on the load path would
 // mean the app refusing to start for whoever had it selected.
 //
 // This is the one shape #25's storage decision does *not* make free: a
 // visibility entry is a key and an unknown key is dropped, but a launch
 // page is a value.
 func TestARetiredLaunchPageFallsBackToTheDefault(t *testing.T) {
 	t.Parallel()
 	general := &GeneralConfig{DefaultPage: "jobs"}
 	if err := general.Validate(); err != nil {
 		t.Fatalf("Validate() error: %v", err)
 	}
 	if general.DefaultPage != DefaultDefaultPage {
 		t.Errorf("DefaultPage = %q, want %q", general.DefaultPage, DefaultDefaultPage)
 	}
 }
 // A name that is merely wrong is still an error: that is a typo, and
 // saying so is more useful than ignoring it.
 func TestAnUnknownLaunchPageIsStillAnError(t *testing.T) {
 	t.Parallel()
 	general := &GeneralConfig{DefaultPage: "nonsense"}
 	if err := general.Validate(); !errors.Is(err, errUnknownDefaultPage) {
 		t.Fatalf("Validate() error = %v, want errUnknownDefaultPage", err)
 	}
 }
 // A retired view is not a view, so nothing offers it and nothing
 // resolves it -- the visibility map included.
 func TestARetiredViewIsGone(t *testing.T) {
 	t.Parallel()
 	for id := range RetiredViews {
 		if _, ok := LookupView(string(id)); ok {
 			t.Errorf("%s is retired but still in Views", id)
 		}
 		general := &GeneralConfig{}
 		general.ApplyDefaults()
 		if _, ok := general.ResolvedViewVisibility()[string(id)]; ok {
 			t.Errorf("%s is retired but still resolves a visibility", id)
 		}
 	}
 }
 // Settings may not be the launch page, which is the shape the old
 // DefaultPage enum had and is now read off the same table.
 func TestValidateRejectsAnUnlaunchablePage(t *testing.T) {
 	t.Parallel()
 	general := &GeneralConfig{DefaultPage: ViewSettings}
 	err := general.Validate()
 	if !errors.Is(err, errViewCannotLaunch) {
 		t.Fatalf("Validate() error = %v, want errViewCannotLaunch", err)
 	}
 }
 // At the setter the user is present and can act, so the two states
 // they could not get out of are refused rather than repaired.
 func TestSetViewVisibleRefusals(t *testing.T) {
 	t.Parallel()
 	tests := []struct {
 		name    string
 		view    string
 		visible bool
 		want    error
 	}{
 		{"settings is never hideable", string(ViewSettings), false, errViewNotHideable},
 		{"the launch page is not hideable", string(ViewHome), false, errViewIsLaunchPage},
 		{"an unknown view is not a setting", "nonsense", false, errUnknownView},
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
 			t.Parallel()
 			c := newViewTestConfig(t)
 			err := c.SetViewVisible(tt.view, tt.visible)
 			if !errors.Is(err, tt.want) {
 				t.Fatalf("SetViewVisible() error = %v, want %v", err, tt.want)
 			}
 		})
 	}
 }
 // Showing a view is never refused, including Settings and the launch
 // page -- there is no state to be stuck in.
 func TestSetViewVisibleShowsAnything(t *testing.T) {
 	t.Parallel()
 	c := newViewTestConfig(t)
 	for _, v := range Views {
 		if err := c.SetViewVisible(string(v.ID), true); err != nil {
 			t.Fatalf("SetViewVisible(%q, true) error: %v", v.ID, err)
 		}
 	}
 	if !c.GetViewVisibility()[string(ViewAutotag)] {
 		t.Error("autotag was switched on and should be visible")
 	}
 }
 // The stored map survives a save/load round trip, which is what a
 // map-valued TOML key is worth checking for.
 func TestViewVisibilityRoundTrips(t *testing.T) {
 	t.Parallel()
 	path := filepath.Join(t.TempDir(), "config.toml")
 	original := &Config{logger: slog.Default(), filePath: path}
 	if err := original.Load(); err != nil {
 		t.Fatalf("Load() error: %v", err)
 	}
 	if err := original.SetViewVisible(string(ViewAutotag), true); err != nil {
 		t.Fatalf("SetViewVisible() error: %v", err)
 	}
 	if err := original.SetViewVisible(string(ViewExplore), false); err != nil {
 		t.Fatalf("SetViewVisible() error: %v", err)
 	}
 	loaded := &Config{logger: slog.Default(), filePath: path}
 	if err := loaded.Load(); err != nil {
 		t.Fatalf("Load() error: %v", err)
 	}
 	resolved := loaded.GetViewVisibility()
 	if !resolved[string(ViewAutotag)] {
 		t.Error("autotag should have loaded as visible")
 	}
 	if resolved[string(ViewExplore)] {
 		t.Error("explore should have loaded as hidden")
 	}
 }
 // Every view the shell can launch into is a view the sidebar can show,
 // or an install could land on a page with no nav item and no setting
 // pointing at it.
 func TestEveryLaunchableViewIsAView(t *testing.T) {
 	t.Parallel()
 	for _, v := range Views {
 		if !v.CanLaunch {
 			continue
 		}
 		if !v.Hideable {
 			continue
 		}
 		if _, ok := LookupView(string(v.ID)); !ok {
 			t.Errorf("%s is launchable but not a known view", v.ID)
 		}
 	}
 }
@@ -13,31 +13,13 @@ const (
 	// enforces this at runtime; it is also the floor below which a
 	// reported size is treated as bogus and not persisted.
 	//
-	// **Both reasons this comment used to give have expired**, and the
+	// 800x600 is where the shell was measured to still work, rather
-	// value is right for a third one.  It said the floor was 800x600
+	// than a round number: below ~780 the header's subtitle wraps and
-	// because "below ~780 the header's subtitle wraps and pushes the
+	// pushes the title out of the 4em top bar, and below ~600 tall the
-	// title out of the 4em top bar" and "below ~600 tall the eleven
+	// eleven sidebar items no longer fit at once.  The previous
-	// sidebar items no longer fit at once".  Neither mechanism can
+	// 512x384 was aspirational — at 700x480 the sidebar overflowed
-	// happen now: the subtitle is display:none from 899px down
+	// behind the player bar with no scroll and Settings and Jobs could
-	// (index.css), and the sidebar host is overflow-y:auto — measured
+	// not be reached at all.
 	// at 600x460, its scrollHeight is 434 against a 332px client and
 	// Settings is reachable after scrolling.  A floor defended by two
 	// mechanisms that no longer exist is a number nobody can argue
 	// with, which is worse than either answer.
 	//
 	// It stays 800x600 because that is where the *desktop* chrome
 	// stops being comfortable — the Compact band of plan 018's size
 	// matrix (#24) — and not because the app breaks below it.  It does
 	// not: under 600px wide the phone layout takes over (bottom-nav,
 	// no sidebar) and the shell fits 320px exactly, which is what
 	// makes this a comfort floor rather than a correctness one, and
 	// why a very small window reflows instead of becoming a
 	// mini-player (#12 is a second always-on-top window, not a mode of
 	// this one).
 	//
 	// The previous 512x384 was aspirational — at 700x480 the sidebar
 	// overflowed behind the player bar with no scroll and Settings and
 	// Jobs could not be reached at all.
 	MinWidth = 800
 	// MinHeight is the smallest allowed window height in pixels.
 	MinHeight = 600
@@ -40,8 +40,7 @@ WHERE id = ? AND (mbid IS NULL OR mbid = '');
 -- name: GetAlbumsWithPendingReleaseMBID :many
 SELECT id, pending_release_mbid FROM albums
 WHERE pending_release_mbid IS NOT NULL AND pending_release_mbid != ''
-  AND (mbid IS NULL OR mbid = '')
+  AND (mbid IS NULL OR mbid = '');
 LIMIT ?;
 -- name: DeleteAlbum :exec
 DELETE FROM albums WHERE id = ?;
@@ -331,7 +331,6 @@ const getAlbumsWithPendingReleaseMBID = `-- name: GetAlbumsWithPendingReleaseMBI
 SELECT id, pending_release_mbid FROM albums
 WHERE pending_release_mbid IS NOT NULL AND pending_release_mbid != ''
  AND (mbid IS NULL OR mbid = '')
 LIMIT ?
 `
 type GetAlbumsWithPendingReleaseMBIDRow struct {
@@ -339,8 +338,8 @@ type GetAlbumsWithPendingReleaseMBIDRow struct {
 	PendingReleaseMbid sql.NullString
 }
-func (q *Queries) GetAlbumsWithPendingReleaseMBID(ctx context.Context, limit int64) ([]GetAlbumsWithPendingReleaseMBIDRow, error) {
+func (q *Queries) GetAlbumsWithPendingReleaseMBID(ctx context.Context) ([]GetAlbumsWithPendingReleaseMBIDRow, error) {
-	rows, err := q.db.QueryContext(ctx, getAlbumsWithPendingReleaseMBID, limit)
+	rows, err := q.db.QueryContext(ctx, getAlbumsWithPendingReleaseMBID)
 	if err != nil {
 		return nil, err
 	}
@@ -2,7 +2,6 @@ package explore
 import (
 	"context"
 	"database/sql"
 	"log/slog"
 	"math"
 	"sort"
@@ -13,7 +12,6 @@ import (
 	"golang.org/x/sync/singleflight"
 	"yellowjacket/backend/database"
 	"yellowjacket/backend/database/sql/sqlcgen"
 	"yellowjacket/backend/events"
 	"yellowjacket/backend/jobs"
 )
@@ -281,32 +279,37 @@ func (e *Service) BackfillReleaseGroupMBIDs() {
 	go e.backfillReleaseGroupMBIDs(e.ctx)
 }
 // pendingReleaseMBIDs is the albums this pass has work to do on.
 //
 // It is separate from the pass, and returns its error rather than
 // logging it, so that a test can assert the statement runs against the
 // real schema. That is not a general preference -- it is this
 // statement's history: it named `release_groups`, a table plan 013
 // renamed to `albums`, so it failed on every launch since e7748f1 and
 // the pass returned quietly having done nothing. A test of the pass
 // as a whole cannot see that, because a query error and an empty
 // library are the same early return.
 func (e *Service) pendingReleaseMBIDs(
 	ctx context.Context,
 ) ([]sqlcgen.GetAlbumsWithPendingReleaseMBIDRow, error) {
 	return e.db.ReadQueries.GetAlbumsWithPendingReleaseMBID(
 		ctx, releaseGroupMBIDBackfillMaxPerRun,
 	)
 }
 func (e *Service) backfillReleaseGroupMBIDs(ctx context.Context) {
-	pending, err := e.pendingReleaseMBIDs(ctx)
+	rows, err := e.db.QueryContext(
 		"SELECT id, pending_release_mbid FROM release_groups "+
 			"WHERE (mbid IS NULL OR mbid = '') "+
 			"AND pending_release_mbid IS NOT NULL AND pending_release_mbid != '' "+
 			"LIMIT ?",
 		releaseGroupMBIDBackfillMaxPerRun,
 	)
 	if err != nil {
 		e.logger.Warn("release-group mbid backfill: query failed", "error", err)
 		return
 	}
 	type pendingRow struct {
 		id          int64
 		releaseMBID string
 	}
 	var pending []pendingRow
 	for rows.Next() {
 		var p pendingRow
 		if err := rows.Scan(&p.id, &p.releaseMBID); err == nil {
 			pending = append(pending, p)
 		}
 	}
 	_ = rows.Close()
 	if len(pending) == 0 {
 		return
 	}
@@ -332,7 +335,7 @@ func (e *Service) backfillReleaseGroupMBIDs(ctx context.Context) {
 		job.progress(i, len(pending))
-		release, err := e.mb.LookupRelease(ctx, p.PendingReleaseMbid.String)
+		release, err := e.mb.LookupRelease(ctx, p.releaseMBID)
 		if err != nil || release.ReleaseGroupMBID == "" {
 			// Left alone rather than cleared: LookupRelease caches its
 			// answer (success or a release with no group) for 7 days,
@@ -341,19 +344,12 @@ func (e *Service) backfillReleaseGroupMBIDs(ctx context.Context) {
 			continue
 		}
-		// The writer, not ReadQueries: an UPDATE issued on the
+		_, err = e.db.ExecContext(
-		// query-only pool fails at runtime with "attempt to write a
+			"UPDATE release_groups SET mbid = ?, pending_release_mbid = NULL "+
-		// readonly database".
+				"WHERE id = ? AND (mbid IS NULL OR mbid = '')",
-		if err := e.db.Queries.ResolveAlbumPendingReleaseMBID(
+			release.ReleaseGroupMBID, p.id,
-			ctx,
+		)
-			sqlcgen.ResolveAlbumPendingReleaseMBIDParams{
+		if err != nil {
 				Mbid: sql.NullString{
 					String: release.ReleaseGroupMBID,
 					Valid:  true,
 				},
 				ID: p.ID,
 			},
 		); err != nil {
 			e.logger.Warn("release-group mbid backfill: update failed", "error", err)
 		}
 	}
@@ -1,250 +0,0 @@
 package explore
 import (
 	"database/sql"
 	"log/slog"
 	"strconv"
 	"testing"
 	"yellowjacket/backend/database"
 	"yellowjacket/backend/database/sql/sqlcgen"
 )
 // The release-group MBID backfill queried `release_groups`, a table
 // plan 013 renamed to `albums`, so it failed on its first statement on
 // every launch from e7748f1 until #189 -- and the pass swallowed that,
 // because a query error and an empty library are the same early
 // return. Nothing noticed for two reasons worth keeping in mind:
 //
 //   - the statement was **raw SQL**, so sqlc never read it. Every other
 //     statement in the repo was renamed by the same change because sqlc
 //     reads sql/schemas/ and cannot generate against a table that is not
 //     declared. The two sqlc queries this now calls were written by 013
 //     and left uncalled.
 //   - it needs no network and no fixture library to reproduce. The
 //     failure is at prepare time.
 // seedPendingAlbum inserts an album whose files carried a release MBID
 // but no release-group MBID, which is what `library.updateMBIDs`
 // leaves behind for this pass to resolve.
 func seedPendingAlbum(
 	t *testing.T,
 	db *database.DB,
 	name, pendingMBID string,
 ) int64 {
 	t.Helper()
 	res, err := db.ExecContext(
 		"INSERT INTO albums (name, artist_credit, pending_release_mbid) "+
 			"VALUES (?, ?, ?)",
 		name, "Test Artist", pendingMBID,
 	)
 	if err != nil {
 		t.Fatalf("insert albums row: %v", err)
 	}
 	id, err := res.LastInsertId()
 	if err != nil {
 		t.Fatalf("last insert id: %v", err)
 	}
 	return id
 }
 func newPendingTestService(db *database.DB) *Service {
 	return &Service{db: db, logger: slog.Default()}
 }
 // TestPendingReleaseMBIDsRunsAgainstTheRealSchema is the regression.
 //
 // It asserts the statement *runs*, which is the whole of what was
 // broken: against the old raw SQL this returns
 // "no such table: release_groups" rather than a row.
 func TestPendingReleaseMBIDsRunsAgainstTheRealSchema(t *testing.T) {
 	t.Parallel()
 	db := database.NewTestDB(t)
 	e := newPendingTestService(db)
 	want := seedPendingAlbum(t, db, "Pending Album", "release-mbid-1")
 	pending, err := e.pendingReleaseMBIDs(db.Ctx)
 	if err != nil {
 		t.Fatalf("the backfill's query failed: %v", err)
 	}
 	if len(pending) != 1 {
 		t.Fatalf("got %d pending albums, want 1", len(pending))
 	}
 	if pending[0].ID != want {
 		t.Errorf("got album id %d, want %d", pending[0].ID, want)
 	}
 	if got := pending[0].PendingReleaseMbid.String; got != "release-mbid-1" {
 		t.Errorf("got pending mbid %q, want %q", got, "release-mbid-1")
 	}
 }
 // TestOnlyUnresolvedAlbumsAreReturned pins the two conditions that make
 // the pass idempotent, since between them they are what stops it doing
 // the same MusicBrainz lookups on every launch forever.
 func TestOnlyUnresolvedAlbumsAreReturned(t *testing.T) {
 	t.Parallel()
 	db := database.NewTestDB(t)
 	e := newPendingTestService(db)
 	pendingID := seedPendingAlbum(t, db, "Still Pending", "release-mbid-1")
 	// Already resolved: it has a real MBID, so there is nothing to
 	// look up even though a marker is still sitting on it.
 	resolved := seedPendingAlbum(t, db, "Already Resolved", "release-mbid-2")
 	if err := db.Queries.SetAlbumMBID(db.Ctx, sqlcgen.SetAlbumMBIDParams{
 		Mbid: sql.NullString{String: "rg-mbid", Valid: true},
 		ID:   resolved,
 	}); err != nil {
 		t.Fatalf("set album mbid: %v", err)
 	}
 	// Never had a release MBID to resolve in the first place, which is
 	// most of a library.
 	seedPendingAlbum(t, db, "Nothing Pending", "")
 	pending, err := e.pendingReleaseMBIDs(db.Ctx)
 	if err != nil {
 		t.Fatalf("the backfill's query failed: %v", err)
 	}
 	if len(pending) != 1 || pending[0].ID != pendingID {
 		t.Fatalf(
 			"got %d albums %v, want only the unresolved one (%d)",
 			len(pending), pending, pendingID,
 		)
 	}
 }
 // TestResolvingClearsTheMarker is the other half: once the lookup has
 // answered, the album must stop being a candidate, or the pass repeats
 // the same live MusicBrainz call on every launch.
 func TestResolvingClearsTheMarker(t *testing.T) {
 	t.Parallel()
 	db := database.NewTestDB(t)
 	e := newPendingTestService(db)
 	id := seedPendingAlbum(t, db, "Pending Album", "release-mbid-1")
 	// The writer, deliberately: this is an UPDATE, and the read pool
 	// would refuse it at runtime.
 	if err := db.Queries.ResolveAlbumPendingReleaseMBID(
 		db.Ctx,
 		sqlcgen.ResolveAlbumPendingReleaseMBIDParams{
 			Mbid: sql.NullString{String: "resolved-rg-mbid", Valid: true},
 			ID:   id,
 		},
 	); err != nil {
 		t.Fatalf("resolve pending release mbid: %v", err)
 	}
 	pending, err := e.pendingReleaseMBIDs(db.Ctx)
 	if err != nil {
 		t.Fatalf("the backfill's query failed: %v", err)
 	}
 	if len(pending) != 0 {
 		t.Fatalf("a resolved album is still a candidate: %v", pending)
 	}
 	album, err := db.ReadQueries.GetAlbum(db.Ctx, id)
 	if err != nil {
 		t.Fatalf("get album: %v", err)
 	}
 	if album.Mbid.String != "resolved-rg-mbid" {
 		t.Errorf("album mbid = %q, want the resolved one", album.Mbid.String)
 	}
 	if album.PendingReleaseMbid.Valid &&
 		album.PendingReleaseMbid.String != "" {
 		t.Errorf(
 			"the pending marker survived as %q",
 			album.PendingReleaseMbid.String,
 		)
 	}
 }
 // TestAResolvedMBIDIsNeverOverwritten covers the guard in the UPDATE.
 //
 // The pass runs against rows it read earlier, and a rescan can resolve
 // an album from its tags in between -- a real MBID from the file must
 // win over one this pass inferred from a release.
 func TestAResolvedMBIDIsNeverOverwritten(t *testing.T) {
 	t.Parallel()
 	db := database.NewTestDB(t)
 	id := seedPendingAlbum(t, db, "Pending Album", "release-mbid-1")
 	if err := db.Queries.SetAlbumMBID(db.Ctx, sqlcgen.SetAlbumMBIDParams{
 		Mbid: sql.NullString{String: "from-the-tags", Valid: true},
 		ID:   id,
 	}); err != nil {
 		t.Fatalf("set album mbid: %v", err)
 	}
 	if err := db.Queries.ResolveAlbumPendingReleaseMBID(
 		db.Ctx,
 		sqlcgen.ResolveAlbumPendingReleaseMBIDParams{
 			Mbid: sql.NullString{String: "from-the-backfill", Valid: true},
 			ID:   id,
 		},
 	); err != nil {
 		t.Fatalf("resolve pending release mbid: %v", err)
 	}
 	album, err := db.ReadQueries.GetAlbum(db.Ctx, id)
 	if err != nil {
 		t.Fatalf("get album: %v", err)
 	}
 	if album.Mbid.String != "from-the-tags" {
 		t.Errorf(
 			"album mbid = %q, want the tagged one to have won",
 			album.Mbid.String,
 		)
 	}
 }
 // TestThePassIsBounded checks the LIMIT.
 //
 // Each row costs a live MusicBrainz lookup on a 1 req/s limiter shared
 // with every page the user can open, so an unbounded read is a run that
 // lasts as long as the library is untagged. The sqlc query 013 wrote
 // had no LIMIT; the raw statement it was replacing did.
 func TestThePassIsBounded(t *testing.T) {
 	t.Parallel()
 	db := database.NewTestDB(t)
 	e := newPendingTestService(db)
 	for i := range releaseGroupMBIDBackfillMaxPerRun + 10 {
 		seedPendingAlbum(
 			t, db,
 			"Album "+string(rune('A'+i%26))+strconv.Itoa(i),
 			"release-mbid-"+strconv.Itoa(i),
 		)
 	}
 	pending, err := e.pendingReleaseMBIDs(db.Ctx)
 	if err != nil {
 		t.Fatalf("the backfill's query failed: %v", err)
 	}
 	if len(pending) != releaseGroupMBIDBackfillMaxPerRun {
 		t.Errorf(
 			"got %d albums, want the run bounded at %d",
 			len(pending), releaseGroupMBIDBackfillMaxPerRun,
 		)
 	}
 }
@@ -82,100 +82,6 @@ func TestPruneStaleLocalCrossReferences(t *testing.T) {
 	}
 }
 // TestPruneClearsInLibraryWithNoLocalID covers the fixed point: a row
 // carrying in_library with a NULL local_*_id.  The upsert's conflict
 // clause is `in_library = MAX(in_library, excluded.in_library)`, so it
 // can only ever raise the flag, and this pass used to be gated on the id
 // being present — which meant nothing in the app could clear such a row,
 // ever.  It is asserted for all three entity types because the gate was
 // written once and used three times, so a fix applied to one is a fix
 // that looks complete.
 //
 // The rows are seeded with raw SQL rather than through seedIndexResult
 // deliberately: upsertBatch writes a zero LocalArtistID as literal 0,
 // not NULL, and 0 satisfies `IS NOT NULL` — so the old gate already
 // caught that shape and a fixture built through the upsert cannot
 // reproduce this at all.  NULL is what the artifact importer and any
 // older writer leave behind, the column being nullable with no default.
 func TestPruneClearsInLibraryWithNoLocalID(t *testing.T) {
 	t.Parallel()
 	db := database.NewTestDB(t)
 	si := NewSearchIndex(db, nil, nil, slog.Default())
 	// A genuinely owned artist, to prove the wider gate does not simply
 	// clear everything it now looks at.
 	database.InsertTestTrack(t, db, database.TestTrack{
 		FilePath: "/music/owned.mp3",
 		Artist:   "Owned",
 	})
 	artist, err := db.Queries.GetArtistByName(t.Context(), "Owned")
 	if err != nil {
 		t.Fatalf("read seeded artist: %v", err)
 	}
 	seedIndexResult(t, db, SearchIndexResult{
 		EntityType:    EntityArtist,
 		MBID:          testMBID("owned"),
 		Title:         "Owned",
 		ArtistName:    "Owned",
 		ArtistMBID:    testMBID("owned"),
 		InLibrary:     true,
 		LocalArtistID: artist.ID,
 	})
 	orphans := []struct {
 		name       string
 		entityType string
 		mbid       string
 	}{
 		{"artist", EntityArtist, "orphan-artist"},
 		{"release group", EntityReleaseGroup, "orphan-release-group"},
 		{"recording", EntityRecording, "orphan-recording"},
 	}
 	for _, o := range orphans {
 		if _, err := db.ExecContext(
 			`INSERT INTO explore_index
 			     (entity_type, mbid, title, artist_name, artist_mbid,
 			      in_library,
 			      local_artist_id, local_release_group_id, local_recording_id)
 			 VALUES (?, ?, ?, ?, ?, 1, ?, ?, ?)`,
 			dbEntityType(o.entityType), dbMBID(testMBID(o.mbid)), o.name, o.name,
 			dbMBID(testMBID(o.mbid)),
 			nil, nil, nil,
 		); err != nil {
 			t.Fatalf("seed %s orphan: %v", o.name, err)
 		}
 	}
 	si.pruneStaleLocalCrossReferences()
 	inLibrary := func(t *testing.T, mbid string) int {
 		t.Helper()
 		var flag int
 		if err := db.QueryRowWriter(
 			"SELECT in_library FROM explore_index WHERE mbid = ?", dbMBID(mbid),
 		).Scan(&flag); err != nil {
 			t.Fatalf("read in_library for %q: %v", mbid, err)
 		}
 		return flag
 	}
 	for _, o := range orphans {
 		if got := inLibrary(t, testMBID(o.mbid)); got != 0 {
 			t.Errorf("%s with a NULL local id: in_library = %d, want 0", o.name, got)
 		}
 	}
 	if got := inLibrary(t, testMBID("owned")); got != 1 {
 		t.Errorf("owned artist: in_library = %d, want 1 (it still has a file)", got)
 	}
 }
 // TestUnenrichedLibraryArtistMBIDs_OrdersByOwnedTrackCount verifies the
 // backfill queue prioritizes artists by how many tracks the user actually
 // owns, not by how many duplicate-mbid artist rows happen to exist (the
@@ -2562,19 +2562,6 @@ func (si *SearchIndex) PopulateLocalCrossReferences() {
 // The row itself is left in place (it may still be part of the shipped
 // catalog, just no longer owned) — only the "this is mine" bookkeeping
 // is cleared.
 //
 // It is gated on the flag *or* the id, not on the id alone.  Gated on
 // the id, `in_library = 1 AND local_*_id IS NULL` is a fixed point: the
 // upsert can only ever raise the flag and this pass skipped such a row
 // by construction, so nothing in the app could clear it — a row claiming
 // to be owned, permanently, with no local row to check the claim
 // against.  Nothing in the tree writes that shape today
 // (collectLibraryEntities sets both together), which is exactly why it
 // is worth closing now: the exposure is a database written by an older
 // version, and the next writer that sets the flag without an id, which
 // nothing structurally prevents.  A NULL id fails the existence test on
 // its own, so the wider gate needs no second clause to say what "not
 // owned" means.
 func (si *SearchIndex) pruneStaleLocalCrossReferences() {
 	type prune struct {
 		entityType string
@@ -2607,8 +2594,7 @@ func (si *SearchIndex) pruneStaleLocalCrossReferences() {
 		result, err := si.db.ExecContext(
 			`UPDATE explore_index
 			 SET in_library = 0, `+p.column+` = NULL
-			 WHERE entity_type = ?
+			 WHERE entity_type = ? AND `+p.column+` IS NOT NULL
 			   AND (`+p.column+` IS NOT NULL OR in_library = 1)
 			   AND NOT EXISTS (`+p.exists+`)`,
 			dbEntityType(p.entityType),
 		)
@@ -1,188 +0,0 @@
 package player
 import (
 	"errors"
 	"testing"
 	"time"
 	"github.com/gopxl/beep/v2"
 )
 // errTestDecode stands in for a decoder blowing up mid-track.
 var errTestDecode = errors.New("decode blew up")
 // stalledStreamer never produces a sample and never reports
 // end-of-stream: (0, true), forever. A damaged file that decodes to
 // nothing looks like this, and so does any source whose producer has
 // quietly stopped.
 type stalledStreamer struct{}
 func (stalledStreamer) Stream(_ [][2]float64) (int, bool) { return 0, true }
 func (stalledStreamer) Err() error                        { return nil }
 // failingStreamer produces n good samples and then fails, which is
 // what a decode error mid-track looks like: the same (0, false) a
 // finished track returns, distinguishable only by Err.
 type failingStreamer struct {
 	remaining int
 	err       error
 }
 func (f *failingStreamer) Stream(samples [][2]float64) (int, bool) {
 	if f.remaining <= 0 {
 		return 0, false
 	}
 	n := min(len(samples), f.remaining)
 	for i := range n {
 		samples[i] = [2]float64{1, 1}
 	}
 	f.remaining -= n
 	return n, true
 }
 func (f *failingStreamer) Err() error { return f.err }
 // drainUntilEnd calls Stream until it reports end-of-stream, or gives
 // up. It returns whether the stream ended.
 //
 // The give-up bound is wall clock rather than a call count: the stall
 // budget is a duration, so a tight loop has to actually wait it out.
 func drainUntilEnd(bs *BufferedStreamer, within time.Duration) bool {
 	buf := make([][2]float64, 512)
 	deadline := time.Now().Add(within)
 	for time.Now().Before(deadline) {
 		if _, ok := bs.Stream(buf); !ok {
 			return true
 		}
 		time.Sleep(time.Millisecond)
 	}
 	return false
 }
 // A source that stops producing without ever ending is the fault this
 // whole file exists for: Stream used to answer with silence and ok
 // forever, so the chain never ended, the player stayed in Playing
 // with the button showing pause, and the decoder's position never
 // moved -- a frozen seek bar over a track that was not playing.
 func TestAStalledSourceEndsTheStream(t *testing.T) {
 	bs := NewBufferedStreamer(stalledStreamer{}, 2048)
 	defer bs.Close()
 	if !drainUntilEnd(bs, maxStarvedDuration+2*time.Second) {
 		t.Fatal(
 			"a stalled source never ended the stream: the player " +
 				"would sit in Playing with a frozen position",
 		)
 	}
 	if !errors.Is(bs.Err(), errSourceStalled) {
 		t.Fatalf(
 			"expected the stall to be reported, got %v", bs.Err(),
 		)
 	}
 }
 // Close is the other exit that used to leave `done` false, with the
 // same consequence: the ring drains and every call after it is
 // silence that claims to be audio.
 func TestClosingEndsTheStream(t *testing.T) {
 	bs := NewBufferedStreamer(finiteStreamer(1<<20), 2048)
 	// Let the read-ahead fill something, so this exercises the drain
 	// after Close rather than a buffer that was empty anyway.
 	time.Sleep(20 * time.Millisecond)
 	bs.Close()
 	if !drainUntilEnd(bs, 2*time.Second) {
 		t.Fatal("a closed streamer never reported end-of-stream")
 	}
 }
 // A source that fails is not a source that finished, and only Err
 // tells them apart. Before this, the player reported a mid-track
 // decode failure to the queue as a natural end, so the queue
 // auto-advanced in silence and counted the broken track as played.
 func TestAFailedSourceReportsItsError(t *testing.T) {
 	src := &failingStreamer{remaining: 4096, err: errTestDecode}
 	bs := NewBufferedStreamer(src, 2048)
 	defer bs.Close()
 	if !drainUntilEnd(bs, 2*time.Second) {
 		t.Fatal("a failing source never reported end-of-stream")
 	}
 	if !errors.Is(bs.Err(), errTestDecode) {
 		t.Fatalf(
 			"expected the source's error to survive, got %v",
 			bs.Err(),
 		)
 	}
 }
 // The ordinary case has to keep working: a source that ends cleanly
 // ends with no error, or every finished track would be reported as a
 // failure and skipped.
 func TestADrainedSourceReportsNoError(t *testing.T) {
 	bs := NewBufferedStreamer(finiteStreamer(4096), 2048)
 	defer bs.Close()
 	if !drainUntilEnd(bs, 2*time.Second) {
 		t.Fatal("a finite source never reported end-of-stream")
 	}
 	if bs.Err() != nil {
 		t.Fatalf(
 			"a track that finished normally reported %v", bs.Err(),
 		)
 	}
 }
 // A slow source is exactly what the read-ahead exists to absorb, so
 // underruns must not be charged cumulatively -- otherwise a file on a
 // slow disk ends itself partway through.
 func TestUnderrunsDoNotAccumulateAcrossASlowSource(t *testing.T) {
 	const total = 8192
 	src := &slowStreamer{
 		inner: finiteStreamer(total),
 		delay: 2 * time.Millisecond,
 	}
 	bs := NewBufferedStreamer(src, 1024)
 	defer bs.Close()
 	buf := make([][2]float64, 256)
 	got := 0
 	for {
 		n, ok := bs.Stream(buf)
 		if !ok {
 			break
 		}
 		for i := range n {
 			if buf[i][0] != 0 {
 				got++
 			}
 		}
 	}
 	if got != total {
 		t.Fatalf(
 			"a slow but healthy source was cut short: got %d of %d "+
 				"samples",
 			got, total,
 		)
 	}
 }
 // beep.Streamer is what the player wraps; keep the type honest.
 var _ beep.Streamer = (*BufferedStreamer)(nil)
@@ -1,7 +1,6 @@
 package player
 import (
 	"errors"
 	"sync"
 	"time"
@@ -35,78 +34,8 @@ type BufferedStreamer struct {
 	done    bool
 	err     error
 	closed  chan struct{}
 	// starved counts consecutive Stream calls served with silence
 	// because the ring was empty, and starvedSince is when that run
 	// began.  An underrun is legitimate for a moment -- that is what
 	// the read-ahead exists to absorb -- but it is not legitimate
 	// forever, and "forever" is indistinguishable from healthy
 	// playback everywhere above this type: the chain never ends, so
 	// the player stays in Playing with the button showing pause, and
 	// the decoder's position never moves, so the 1 Hz report pins the
 	// seek bar and suppresses its interpolation.
 	starved      int
 	starvedSince time.Time
 	// underruns accumulates for the life of this streamer, where
 	// starved is reset by every arriving sample.
 	//
 	// The two answer different questions and only the first was being
 	// asked. starved is a *stall* detector: it exists to end a track
 	// whose source has died, so it forgets a run the moment audio
 	// resumes -- which is exactly the case this counts. A hundred 20ms
 	// underruns a minute never approach the give-up threshold and were
 	// invisible to the log, the UI and every test tier, while being
 	// audible as static: an underrun is served as a run of zeros
 	// spliced into the waveform, and a step discontinuity at each edge
 	// is what a click is.
 	underruns UnderrunStats
 }
 // UnderrunStats is what the ring buffer missed, cumulatively.
 //
 // Samples rather than milliseconds because this type does not know the
 // sample rate -- the player does, and converts at the point of
 // reporting.
 type UnderrunStats struct {
 	// Runs is the number of *episodes*: transitions from healthy into
 	// starved. Calls is how many Stream calls were served with
 	// silence, and Samples is how much silence that was.
 	//
 	// Runs is the count that means something audible. One episode is
 	// one pop however many calls it spans, and the ratio of the two is
 	// how long the average episode was -- which is what separates
 	// "clicking" from "dropping out".
 	Runs    int64
 	Calls   int64
 	Samples int64
 }
 // The silence fill is bounded by both a duration and a run of calls,
 // and it needs both.
 //
 // Duration alone is the real measure -- the speaker paces itself, so
 // wall clock is what says whether the source has actually stopped --
 // but a caller draining in a tight loop (a test, a decode-to-buffer)
 // makes hundreds of calls in microseconds and would trip nothing.
 // A call count alone is the opposite failure: the same tight loop
 // spends the whole budget before the read-ahead goroutine has been
 // scheduled once, and ends a perfectly good stream at sample zero.
 //
 // The duration is longer than the 2 s read-ahead it is there to
 // outlast, and the count is short enough that the speaker (~200 ms a
 // call) reaches it well inside that.
 const (
 	maxStarvedDuration = 3 * time.Second
 	minStarvedCalls    = 8
 )
 // errSourceStalled is returned by Err when the source stopped
 // producing samples without ever reporting end-of-stream.
 var errSourceStalled = errors.New(
 	"audio source stopped producing samples",
 )
 // NewBufferedStreamer creates a BufferedStreamer that pre-fills
 // bufferSize samples from source via a background goroutine.
 // A typical bufferSize is 2× the sample rate (~2 seconds of audio).
@@ -125,24 +54,8 @@ func NewBufferedStreamer(
 	return bs
 }
 // finish marks the stream ended, recording err as the reason when
 // there is one.  Every exit from readAhead goes through it: an exit
 // that leaves done false strands Stream in its underrun branch,
 // where it returns silence and ok forever.
 func (bs *BufferedStreamer) finish(err error) {
 	bs.mu.Lock()
 	defer bs.mu.Unlock()
 	bs.done = true
 	if err != nil && bs.err == nil {
 		bs.err = err
 	}
 }
 // readAhead continuously reads from the source into the ring buffer
 // until the source is drained, an error occurs, or Close is called.
 // It always marks the stream done on the way out.
 func (bs *BufferedStreamer) readAhead() {
 	// Temporary buffer for reading from source outside the lock.
 	// 512 samples per chunk keeps the critical section short.
@@ -150,13 +63,6 @@ func (bs *BufferedStreamer) readAhead() {
 	tmp := make([][2]float64, chunkSize)
 	// Every exit marks the stream done.  An exit that does not is what
 	// stranded Stream in its underrun branch, returning silence and ok
 	// for the rest of the process's life.
 	var exitErr error
 	defer func() { bs.finish(exitErr) }()
 	for {
 		// Check if closed.
 		select {
@@ -166,15 +72,6 @@ func (bs *BufferedStreamer) readAhead() {
 		}
 		bs.mu.Lock()
 		// Stream gave up waiting for us.  Nothing downstream is
 		// listening any more, so filling the ring is work for nobody.
 		if bs.done {
 			bs.mu.Unlock()
 			return
 		}
 		space := len(bs.ring) - bs.count
 		if space == 0 {
@@ -218,12 +115,14 @@ func (bs *BufferedStreamer) readAhead() {
 		}
 		if !ok {
-			// A drained source and a failed one both land here and are
+			bs.mu.Lock()
-			// not the same event: one is a track that ended, the other
+			bs.done = true
-			// is a track that broke.  Err is what tells them apart, and
+
-			// it is why the player must ask before treating this as a
+			if srcErr := bs.source.Err(); srcErr != nil {
-			// natural finish.
+				bs.err = srcErr
-			exitErr = bs.source.Err()
+			}
 			bs.mu.Unlock()
 			return
 		}
@@ -255,34 +154,7 @@ func (bs *BufferedStreamer) Stream(
 	}
 	if bs.count == 0 {
-		// The read-ahead has not caught up.  Silence buys it time --
+		// Buffer temporarily empty — fill with silence.
 		// but only for a bounded stretch, because "forever" is
 		// reported upward as healthy playback and there is no watchdog
 		// above this to notice otherwise.
 		if bs.starved == 0 {
 			bs.underruns.Runs++
 		}
 		bs.underruns.Calls++
 		bs.underruns.Samples += int64(len(samples))
 		bs.starved++
 		if bs.starvedSince.IsZero() {
 			bs.starvedSince = time.Now()
 		}
 		if bs.starved >= minStarvedCalls &&
 			time.Since(bs.starvedSince) > maxStarvedDuration {
 			bs.done = true
 			if bs.err == nil {
 				bs.err = errSourceStalled
 			}
 			return 0, false
 		}
 		for i := range samples {
 			samples[i] = [2]float64{}
 		}
@@ -290,9 +162,6 @@ func (bs *BufferedStreamer) Stream(
 		return len(samples), true
 	}
 	// Samples arrived, so whatever the stall was, it is over.
 	bs.resetStarvationLocked()
 	// Copy available samples from ring buffer.
 	n := len(samples)
 	if n > bs.count {
@@ -309,20 +178,6 @@ func (bs *BufferedStreamer) Stream(
 	return n, true
 }
 // Underruns returns the cumulative underrun count.
 //
 // It is a snapshot rather than a live view, and it is read from
 // outside the audio callback: counting happens in Stream, under the
 // lock it already takes, because that path has a real-time deadline
 // and anything that allocates or formats on it is a cause of the
 // defect it is measuring rather than a measurement of it.
 func (bs *BufferedStreamer) Underruns() UnderrunStats {
 	bs.mu.Lock()
 	defer bs.mu.Unlock()
 	return bs.underruns
 }
 // Err returns any error encountered by the source streamer.
 func (bs *BufferedStreamer) Err() error {
 	bs.mu.Lock()
@@ -342,23 +197,6 @@ func (bs *BufferedStreamer) Flush() {
 	bs.readPos = 0
 	bs.writPos = 0
 	bs.count = 0
 	// A seek empties the ring on purpose, and the refill that follows
 	// is exactly the stall the budget exists to tolerate.  Charging it
 	// against a budget the previous underrun already spent would end
 	// the track on a seek near the end of a slow file.
 	bs.resetStarvationLocked()
 }
 // resetStarvationLocked forgets an underrun run.  Must be called with
 // bs.mu held.
 //
 // Deliberately does not touch bs.underruns: forgetting the run is what
 // makes starved a stall detector, and remembering it is the whole
 // point of the counter beside it.
 func (bs *BufferedStreamer) resetStarvationLocked() {
 	bs.starved = 0
 	bs.starvedSince = time.Time{}
 }
 // LockSource blocks the read-ahead goroutine from touching the
@@ -1,279 +0,0 @@
 package player
 import (
 	"sync"
 	"testing"
 	"time"
 )
 // An underrun is audible and nothing counted it (#135).
 //
 // The distinction these tests exist for is that `starved` and
 // `underruns` disagree on purpose. `starved` is a stall detector: it is
 // reset by every arriving sample, because its job is to end a track
 // whose source has died and a source that is merely slow must not be
 // cut short (TestUnderrunsDoNotAccumulateAcrossASlowSource, next
 // door). That reset is exactly what made the audible case invisible --
 // a hundred short underruns a minute never approach the give-up
 // threshold, and each one is a run of zeros spliced into the waveform
 // with a step discontinuity at both edges.
 // TestAnEmptyRingIsCounted is the measurement itself: silence served
 // for a missing sample is recorded rather than merely tolerated.
 func TestAnEmptyRingIsCounted(t *testing.T) {
 	t.Parallel()
 	// A source that never produces is the cleanest way to make the
 	// ring empty on demand; the stall budget is far longer than the
 	// handful of calls below.
 	bs := NewBufferedStreamer(stalledStreamer{}, 1024)
 	defer bs.Close()
 	if got := bs.Underruns(); got != (UnderrunStats{}) {
 		t.Fatalf("a fresh streamer already reports %+v", got)
 	}
 	buf := make([][2]float64, 256)
 	for range 3 {
 		if _, ok := bs.Stream(buf); !ok {
 			t.Fatal("the stall budget ran out before the test did")
 		}
 	}
 	got := bs.Underruns()
 	if got.Calls != 3 {
 		t.Errorf("Calls = %d, want 3", got.Calls)
 	}
 	if got.Samples != int64(3*len(buf)) {
 		t.Errorf("Samples = %d, want %d", got.Samples, 3*len(buf))
 	}
 	// Three consecutive silent calls are one episode, not three. That
 	// is the number that means something audible: one interruption is
 	// one pop however many callbacks it spans.
 	if got.Runs != 1 {
 		t.Errorf("Runs = %d, want 1 -- an unbroken run is one episode", got.Runs)
 	}
 }
 // TestSilenceIsWhatIsCounted pins what an underrun actually does to the
 // waveform, which is the reason to count it at all.
 func TestSilenceIsWhatIsCounted(t *testing.T) {
 	t.Parallel()
 	bs := NewBufferedStreamer(stalledStreamer{}, 1024)
 	defer bs.Close()
 	buf := make([][2]float64, 64)
 	for i := range buf {
 		buf[i] = [2]float64{0.5, 0.5}
 	}
 	n, ok := bs.Stream(buf)
 	if !ok || n != len(buf) {
 		t.Fatalf("Stream = (%d, %v), want (%d, true)", n, ok, len(buf))
 	}
 	for i := range buf {
 		if buf[i] != ([2]float64{}) {
 			t.Fatalf("sample %d is %v, want silence", i, buf[i])
 		}
 	}
 	if got := bs.Underruns().Samples; got != int64(len(buf)) {
 		t.Errorf("counted %d samples of silence, wrote %d", got, len(buf))
 	}
 }
 // TestSeparateEpisodesAreSeparateRuns is the counter's whole shape:
 // audio arriving between two underruns makes them two, because that is
 // two interruptions and two clicks.
 func TestSeparateEpisodesAreSeparateRuns(t *testing.T) {
 	t.Parallel()
 	// A source that yields nothing until it is fed, so the ring can be
 	// emptied, filled and emptied again on demand.
 	src := &gatedStreamer{}
 	bs := NewBufferedStreamer(src, 1024)
 	defer bs.Close()
 	buf := make([][2]float64, 128)
 	starve := func() {
 		t.Helper()
 		for range 2 {
 			if _, ok := bs.Stream(buf); !ok {
 				t.Fatal("the stall budget ran out before the test did")
 			}
 		}
 	}
 	// feed lets exactly one bufferful through and drains it, so the
 	// ring is empty again on return. Allowing more would mean the
 	// starve() after it drained real audio instead of underrunning,
 	// which is what the first version of this test did -- it reported
 	// one episode and looked like the counter was wrong.
 	feed := func() {
 		t.Helper()
 		src.allow(len(buf))
 		// The read-ahead is a goroutine, so wait for real samples
 		// rather than assuming they have landed.
 		deadline := time.Now().Add(2 * time.Second)
 		for time.Now().Before(deadline) {
 			n, ok := bs.Stream(buf)
 			if ok && n > 0 && buf[0] != ([2]float64{}) {
 				return
 			}
 			time.Sleep(time.Millisecond)
 		}
 		t.Fatal("the source never delivered a sample")
 	}
 	starve()
 	feed()
 	starve()
 	if got := bs.Underruns().Runs; got < 2 {
 		t.Errorf(
 			"Runs = %d, want at least 2 -- audio in between makes two "+
 				"episodes, not one",
 			got,
 		)
 	}
 }
 // TestTheStallResetDoesNotClearTheCounter is the regression this file
 // is really about.
 //
 // resetStarvationLocked runs on every arriving sample and on every
 // Flush. If it cleared the cumulative count too, the counter would
 // report zero on exactly the workload it exists to measure -- a stream
 // that underruns repeatedly but always recovers -- which is
 // indistinguishable from healthy playback and is what the code did
 // before #135.
 func TestTheStallResetDoesNotClearTheCounter(t *testing.T) {
 	t.Parallel()
 	bs := NewBufferedStreamer(stalledStreamer{}, 1024)
 	defer bs.Close()
 	buf := make([][2]float64, 128)
 	if _, ok := bs.Stream(buf); !ok {
 		t.Fatal("the stall budget ran out before the test did")
 	}
 	before := bs.Underruns()
 	if before.Runs == 0 {
 		t.Fatal("nothing was counted, so the reset cannot be tested")
 	}
 	// Both of the ways a run is forgotten.
 	bs.mu.Lock()
 	bs.resetStarvationLocked()
 	bs.mu.Unlock()
 	bs.Flush()
 	if got := bs.Underruns(); got != before {
 		t.Errorf(
 			"forgetting the stall run also discarded the count: %+v, "+
 				"want %+v",
 			got, before,
 		)
 	}
 }
 // TestUnderrunDeltaNeverGoesBackwards covers the one arithmetic trap in
 // the reporting side.
 //
 // The counter belongs to the streamer and the streamer is replaced on
 // every track, so a baseline carried across a track change is the
 // previous track's total subtracted from a fresh zero. The load path
 // resets the baseline, and this clamps as well -- a negative count in a
 // log line reads as a broken instrument, which would discredit the
 // measurement rather than merely mis-state it.
 func TestUnderrunDeltaNeverGoesBackwards(t *testing.T) {
 	t.Parallel()
 	tests := []struct {
 		name string
 		now  UnderrunStats
 		last UnderrunStats
 		want UnderrunStats
 	}{
 		{
 			name: "ordinary progress",
 			now:  UnderrunStats{Runs: 5, Calls: 40, Samples: 4000},
 			last: UnderrunStats{Runs: 2, Calls: 10, Samples: 1000},
 			want: UnderrunStats{Runs: 3, Calls: 30, Samples: 3000},
 		},
 		{
 			name: "nothing happened",
 			now:  UnderrunStats{Runs: 5, Calls: 40, Samples: 4000},
 			last: UnderrunStats{Runs: 5, Calls: 40, Samples: 4000},
 			want: UnderrunStats{},
 		},
 		{
 			name: "a new streamer, with a stale baseline",
 			now:  UnderrunStats{},
 			last: UnderrunStats{Runs: 9, Calls: 90, Samples: 9000},
 			want: UnderrunStats{},
 		},
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
 			t.Parallel()
 			if got := underrunDelta(tt.now, tt.last); got != tt.want {
 				t.Errorf("underrunDelta = %+v, want %+v", got, tt.want)
 			}
 		})
 	}
 }
 // gatedStreamer produces only what it has been allowed to, and
 // otherwise stalls without ending -- so a test can decide exactly when
 // the ring runs dry.
 type gatedStreamer struct {
 	mu        sync.Mutex
 	remaining int
 }
 func (g *gatedStreamer) allow(n int) {
 	g.mu.Lock()
 	defer g.mu.Unlock()
 	g.remaining += n
 }
 func (g *gatedStreamer) Stream(samples [][2]float64) (int, bool) {
 	g.mu.Lock()
 	defer g.mu.Unlock()
 	if g.remaining <= 0 {
 		return 0, true
 	}
 	n := min(len(samples), g.remaining)
 	for i := range n {
 		samples[i] = [2]float64{0.25, 0.25}
 	}
 	g.remaining -= n
 	return n, true
 }
 func (g *gatedStreamer) Err() error { return nil }
@@ -1,213 +0,0 @@
 package player
 import (
 	"log/slog"
 	"testing"
 	"time"
 	"github.com/wailsapp/wails/v3/pkg/application"
 	"yellowjacket/backend/events"
 	"yellowjacket/internal/testfixtures"
 )
 // fixtureSampleRate is what cmd/gentestdata writes (audio.go).  It is
 // deliberately not the speaker rate, which is what lets these tests
 // tell the decoder's format from the player's default.
 const fixtureSampleRate = 22050
 // newTestPlayer is a player with a context and no database, so the
 // track-metadata lookup cannot succeed.
 func newTestPlayer(t *testing.T) *Player {
 	t.Helper()
 	p := NewPlayer(slog.Default(), nil)
 	rec := events.NewRecorder()
 	_ = p.ServiceStartup(
 		events.WithSink(t.Context(), rec),
 		application.ServiceOptions{},
 	)
 	return p
 }
 // loadFileLocked needs no speaker: it decodes, builds the chain and
 // registers it paused. speaker.Play on an uninitialised device is
 // what the integration guard elsewhere is about, so these assert on
 // the state the load computed rather than on playback.
 // p.format used to be assigned once, in the constructor, to the
 // *speaker's* rate -- so it claimed 44.1 kHz for every file ever
 // loaded. Play()'s replay-after-finish path resamples from it, so a
 // finished track played again was resampled from a rate the decoder
 // never produced: audibly the wrong speed and pitch, and wrong
 // length and position arithmetic with it.
 //
 // The fixtures are 22050 Hz, which is exactly the point -- any of
 // them disagrees with the speaker rate.
 func TestLoadRecordsTheDecodersOwnFormat(t *testing.T) {
 	m := testfixtures.Load(t)
 	path := m.Case(t, testfixtures.CaseCoverDedup)[0]
 	p := newTestPlayer(t)
 	if got := p.format.SampleRate; got != speakerSampleRate {
 		t.Fatalf(
 			"precondition: a fresh player should hold the speaker "+
 				"rate, got %d",
 			got,
 		)
 	}
 	if err := p.LoadFile(path); err != nil {
 		t.Fatalf("LoadFile(%s): %v", path, err)
 	}
 	if p.format.SampleRate == speakerSampleRate {
 		t.Fatalf(
 			"p.format still holds the speaker rate (%d) after "+
 				"loading a %d Hz file: the replay path would "+
 				"resample from the wrong rate",
 			speakerSampleRate, fixtureSampleRate,
 		)
 	}
 	if got := int(p.format.SampleRate); got != fixtureSampleRate {
 		t.Errorf(
 			"expected the decoder's rate %d, got %d",
 			fixtureSampleRate, got,
 		)
 	}
 }
 // trackLengthMs is written only when the database has a row for the
 // file and cleared only by UnloadTrack, so a track with no row used
 // to inherit whatever the last track's duration was -- and every
 // position report is scaled by it, so the whole seek bar was then
 // reporting one track's progress on another track's scale.
 //
 // There is no database here, so the lookup cannot succeed: exactly
 // the case that used to inherit.
 func TestLoadDoesNotInheritThePreviousTracksDuration(t *testing.T) {
 	m := testfixtures.Load(t)
 	path := m.Case(t, testfixtures.CaseCoverDedup)[0]
 	p := newTestPlayer(t)
 	// Stand in for a previous track whose duration was resolved.
 	p.trackLengthMs = 9_999_000
 	if err := p.LoadFile(path); err != nil {
 		t.Fatalf("LoadFile(%s): %v", path, err)
 	}
 	if p.trackLengthMs == 9_999_000 {
 		t.Fatal(
 			"the previous track's duration survived the load: every " +
 				"position report for this track would be scaled by it",
 		)
 	}
 }
 // A new chain supersedes the old one's pending finished callback.
 // Without this, a callback that queued for p.mu behind a LoadFile
 // woke up and rewound, stopped and auto-advanced the *new* track.
 func TestANewChainSupersedesTheOldFinishedCallback(t *testing.T) {
 	m := testfixtures.Load(t)
 	paths := m.Case(t, testfixtures.CaseCoverDedup)
 	if len(paths) < 2 {
 		t.Skip("need two fixture tracks")
 	}
 	p := newTestPlayer(t)
 	if err := p.LoadFile(paths[0]); err != nil {
 		t.Fatalf("LoadFile(%s): %v", paths[0], err)
 	}
 	stale := p.chainID
 	if err := p.LoadFile(paths[1]); err != nil {
 		t.Fatalf("LoadFile(%s): %v", paths[1], err)
 	}
 	if p.chainID == stale {
 		t.Fatal("loading a second file did not supersede the chain")
 	}
 	called := false
 	p.SetPlaybackFinishedHandler(func(error) { called = true })
 	// The first track's callback, arriving late.
 	p.onPlaybackFinished(stale, nil)
 	if called {
 		t.Error(
 			"a superseded chain's callback drove auto-advance: the " +
 				"track that is loaded now would be skipped",
 		)
 	}
 	if p.state == Stopped {
 		t.Error(
 			"a superseded chain's callback stopped the current track",
 		)
 	}
 }
 // The decoder is read by the read-ahead goroutine and by every
 // position emit, and those used to be guarded by different mutexes:
 // the read by srcMu, the position by the speaker lock, which
 // read-ahead never takes. Under -race this failed on the emit that
 // LoadFile itself makes.
 //
 // It needs the read-ahead goroutine to actually be running, so it
 // keeps asking for the position for long enough to overlap it.
 func TestPositionReadsDoNotRaceTheReadAhead(t *testing.T) {
 	m := testfixtures.Load(t)
 	path := m.Case(t, testfixtures.CaseFLACAlbum)[0]
 	p := newTestPlayer(t)
 	if err := p.LoadFile(path); err != nil {
 		t.Fatalf("LoadFile(%s): %v", path, err)
 	}
 	for range 200 {
 		if _, err := p.CurrentPositionSeconds(); err != nil {
 			t.Fatalf("CurrentPositionSeconds: %v", err)
 		}
 	}
 }
 // Seeking emits the landing position, and that emit reads the
 // decoder -- so the source lock the seek holds must be released
 // before it. A reentrant take here is a deadlock, not a failure,
 // which is why this test exists rather than a comment.
 func TestSeekEmitsWithoutDeadlocking(t *testing.T) {
 	m := testfixtures.Load(t)
 	path := m.Case(t, testfixtures.CaseFLACAlbum)[0]
 	p := newTestPlayer(t)
 	if err := p.LoadFile(path); err != nil {
 		t.Fatalf("LoadFile(%s): %v", path, err)
 	}
 	done := make(chan struct{})
 	go func() {
 		defer close(done)
 		_ = p.Seek(1)
 	}()
 	select {
 	case <-done:
 	case <-time.After(10 * time.Second):
 		t.Fatal("Seek deadlocked: the position emit re-took the source lock")
 	}
 }
@@ -39,35 +39,22 @@ type Player struct {
 	// via the queue).
 	mu sync.Mutex
-	ctx          context.Context
+	ctx                     context.Context
-	logger       *slog.Logger
+	logger                  *slog.Logger
-	db           *database.DB
+	db                      *database.DB
-	state        State
+	state                   State
-	currentFile  *os.File
+	currentFile             *os.File
-	format       beep.Format
+	format                  beep.Format
-	baseStreamer beep.Streamer
+	baseStreamer            beep.Streamer
-	seeker       beep.StreamSeeker
+	seeker                  beep.StreamSeeker
-	resampled    beep.Streamer
+	resampled               beep.Streamer
-	buffered     *BufferedStreamer
+	buffered                *BufferedStreamer
 	// lastUnderruns is the previous report, so the 1 Hz log can say
 	// what happened in the last second and stay quiet when nothing did.
 	// It is reset with the streamer, in loadFileLocked.
 	lastUnderruns           UnderrunStats
 	control                 *beep.Ctrl
 	volume                  *effects.Volume
 	speakerStreamer         beep.Streamer
-	playbackFinishedHandler func(error)
+	playbackFinishedHandler func()
 	trackChangeID           uint64
-
+	mediaControls           mediacontrols.Handler
 	// chainID identifies the streamer chain currently registered with
 	// the speaker.  updateStreamers bumps it, and the finished
 	// callback carries the value it was registered with, so a callback
 	// that queued for p.mu behind a LoadFile can tell that the player
 	// has moved on and return rather than rewinding somebody else's
 	// track.
 	chainID       uint64
 	mediaControls mediacontrols.Handler
 	// duckAmount is the attenuation currently applied on top of the
 	// user's volume, in the same base-2 exponent effects.Volume uses.
@@ -76,19 +63,6 @@ type Player struct {
 	// not something the user chose.
 	duckAmount float64
 	// systemVolume is what SystemOwnsVolume answers: the platform's own
 	// control is the only one, so ours neither acts nor persists.  It is
 	// a field rather than the build constant read directly so that a
 	// test can exercise both sides on any machine.  See systemvolume.go.
 	systemVolume bool
 	// storedVolume and storedMuted hold the persisted level as it was
 	// found at restore, for a platform whose volume we do not own: the
 	// maximum we then run at is not a level the user chose, so saveState
 	// writes back what it read rather than overwriting it.
 	storedVolume UserVolume
 	storedMuted  bool
 	// trackLengthMs holds the authoritative track duration in
 	// milliseconds, sourced from the database (which uses the
 	// custom header parser).  The go-mp3 decoder's Len() can be
@@ -174,8 +148,6 @@ func NewPlayer(logger *slog.Logger, db *database.DB) *Player {
 		logger:       logger,
 		db:           db,
 		state:        Stopped,
 		systemVolume: platformOwnsVolume,
 		storedVolume: DefaultUserVol,
 		baseStreamer: generators.Silence(-1),
 		format: beep.Format{
 			SampleRate: speakerSampleRate,
@@ -208,18 +180,11 @@ func (p *Player) InitSpeaker() error {
 }
 // SetPlaybackFinishedHandler sets a callback invoked when a track
-// stops streaming. This allows the queue to drive auto-advance
+// finishes naturally. This allows the queue to drive auto-advance
 // without circular imports.
 //
 // The error says *why* the track stopped: nil for a track that
 // reached its end, non-nil for one that broke partway through.  Both
 // arrive here because both look identical to the speaker, and only
 // the queue holds the metadata a PlaybackFailed needs -- but they are
 // not the same event, and reporting a decode failure as a natural
 // finish is how a broken file used to auto-advance in silence.
 //
 //wails:ignore // internal wiring, not part of the app's IPC surface.
-func (p *Player) SetPlaybackFinishedHandler(handler func(error)) {
+func (p *Player) SetPlaybackFinishedHandler(handler func()) {
 	p.mu.Lock()
 	defer p.mu.Unlock()
@@ -297,78 +262,9 @@ func (p *Player) emitPositionIfPlaying() {
 		return
 	}
 	p.reportUnderrunsLocked()
 	p.emitPositionLocked()
 }
 // underrunDelta is what happened since the last report.
 //
 // It clamps at zero rather than subtracting blind, because the counter
 // belongs to the *streamer* and the streamer is replaced on every
 // track: a baseline carried across that boundary is the previous
 // track's total subtracted from a fresh zero, which is negative. That
 // is repaired at the load (lastUnderruns is reset with the streamer)
 // and clamped here as well, because a negative count in a log line
 // reads as a broken instrument and would discredit the measurement
 // this exists to make.
 func underrunDelta(now, last UnderrunStats) UnderrunStats {
 	return UnderrunStats{
 		Runs:    max(0, now.Runs-last.Runs),
 		Calls:   max(0, now.Calls-last.Calls),
 		Samples: max(0, now.Samples-last.Samples),
 	}
 }
 // reportUnderrunsLocked logs what the ring buffer missed, at most once
 // a second and only when the number moved.  Must be called with p.mu
 // held.
 //
 // **An underrun is audible and nothing counted it** (#135). The ring
 // serves silence when it is empty, so a run of zeros is spliced into
 // the waveform and the step discontinuity at each edge is a click; a
 // series of short ones is static. Everything that makes one likelier
 // is worse on a phone than on a desktop -- slower storage, a governor
 // that parks cores, background work, GC -- and no tier here can see it,
 // since CI's audio device is a null sink chosen because it keeps time.
 //
 // Three things about the reporting are deliberate.
 //
 // **It is on the 1 Hz position ticker rather than in Stream.** Stream
 // runs on the speaker callback's real-time deadline, and a log line
 // there would allocate, format and write on the exact path whose
 // missed deadline is the defect -- measuring by making it worse.
 //
 // **An unchanged count is not logged.** That is emitStatus' rule one
 // package over: a healthy player is silent, so anything in the log is
 // news, and the line appears exactly while it is popping. Reading it
 // off a device means `make android-logs` with the audio audible.
 //
 // **It is Info rather than Debug**, because the default level is Info
 // and a phone has no convenient way to set YJ_LOG_LEVEL -- a debug
 // line here would be a counter nobody on the affected platform can
 // read, which is the shape of the bug that made #160 necessary.
 func (p *Player) reportUnderrunsLocked() {
 	if p.buffered == nil {
 		return
 	}
 	stats := p.buffered.Underruns()
 	if stats == p.lastUnderruns {
 		return
 	}
 	since := underrunDelta(stats, p.lastUnderruns)
 	p.lastUnderruns = stats
 	slog.Info("audio underrun",
 		"runs", since.Runs,
 		"calls", since.Calls,
 		"silenceMs", speakerSampleRate.D(int(since.Samples)).Milliseconds(),
 		"trackRuns", stats.Runs,
 		"trackSilenceMs", speakerSampleRate.D(int(stats.Samples)).Milliseconds(),
 	)
 }
 // emitPositionLocked pushes the current position to the frontend.
 // Must be called with p.mu held.
 func (p *Player) emitPositionLocked() {
@@ -528,19 +424,6 @@ func (p *Player) updateStreamers(
 	newBaseStreamer beep.StreamSeeker,
 	sr beep.SampleRate,
 ) error {
 	// A new chain supersedes the old one, so any finished callback the
 	// old one still owes is stale from here on.
 	p.chainID++
 	// The previous read-ahead goroutine reads the same decoder this
 	// one is about to, under its own srcMu -- two goroutines, two
 	// mutexes, one decoder that is not safe for concurrent use.  The
 	// replay-after-finish path rebuilds from p.seeker without going
 	// through LoadFile, which is where that pair could meet.
 	if p.buffered != nil {
 		p.buffered.Close()
 	}
 	// set base streamer
 	p.baseStreamer = newBaseStreamer
 	p.seeker = newBaseStreamer
@@ -558,12 +441,6 @@ func (p *Player) updateStreamers(
 		p.resampled, int(speakerSampleRate)*2,
 	)
 	// The counter belongs to the streamer, so the baseline it is
 	// reported against has to go with it -- otherwise the first report
 	// of a new track is the previous track's total subtracted from
 	// zero, which is negative and looks like the instrument is broken.
 	p.lastUnderruns = UnderrunStats{}
 	// wrap in ctrl streamer to allow play/pause
 	p.control = &beep.Ctrl{Streamer: p.buffered}
@@ -597,57 +474,23 @@ func (p *Player) startPaused() {
 	p.control.Paused = true
 	speaker.Unlock()
 	// Captured, not read at callback time: by then p.chainID names
 	// whatever is loaded *now*, which is the thing the guard exists to
 	// distinguish this chain from.
 	chainID := p.chainID
 	buffered := p.buffered
 	// The beep.Callback runs with the speaker mutex held, so we
 	// dispatch to a goroutine that can safely acquire p.mu.
 	speaker.Play(beep.Seq(
 		p.speakerStreamer,
 		beep.Callback(func() {
-			// Asked here rather than under p.mu: this is the chain that
+			go p.onPlaybackFinished()
 			// just ended, and by the time the goroutine holds the lock
 			// p.buffered may be a different one.
 			var err error
 			if buffered != nil {
 				err = buffered.Err()
 			}
 			go p.onPlaybackFinished(chainID, err)
 		}),
 	))
 	p.state = Paused
 }
-// onPlaybackFinished handles a track that stopped streaming, whether
+// onPlaybackFinished handles the natural end of a track. It is
-// it ended or broke. It is called on a new goroutine from the beep
+// called on a new goroutine from the beep callback (which holds
-// callback (which holds the speaker lock) so that it can safely
+// the speaker lock) so that it can safely acquire p.mu.
-// acquire p.mu.
+func (p *Player) onPlaybackFinished() {
 //
 // chainID names the streamer chain the callback fired for and srcErr
 // says why it stopped.
 func (p *Player) onPlaybackFinished(chainID uint64, srcErr error) {
 	p.mu.Lock()
 	// The player has moved on while this callback queued for the lock
 	// -- a user pressing Next during the last second of a track is
 	// enough. Everything below is about the *current* track: rewinding
 	// the decoder, saying playback stopped, asking the queue to
 	// advance. Doing any of it now would do it to the wrong track.
 	if chainID != p.chainID {
 		p.mu.Unlock()
 		p.logger.Debug(
 			"Ignoring finished callback for a superseded chain",
 			"chain", chainID, "current", p.chainID,
 		)
 		return
 	}
 	p.state = Stopped
 	handler := p.playbackFinishedHandler
 	mc := p.mediaControls
@@ -658,11 +501,10 @@ func (p *Player) onPlaybackFinished(chainID uint64, srcErr error) {
 	// the Stopped state anyway, so this only moves the decoder.
 	p.rewindLocked()
 	p.emitPositionLocked()
 	p.mu.Unlock()
-	// Emitted under p.mu, like every other transition in this file.
+	// Emit Wails events outside the lock — these are non-blocking
-	// Outside it, a Play() taking the lock in the gap emits `playing`
+	// calls that don't need player state.
 	// first and this stale `stopped` lands last -- leaving the button
 	// showing play over a track that is audibly running.
 	p.emitPlaybackFinished()
 	events.Emit(
@@ -671,8 +513,6 @@ func (p *Player) onPlaybackFinished(chainID uint64, srcErr error) {
 		map[string]string{"state": string(Stopped)},
 	)
 	p.mu.Unlock()
 	// Notify media controls outside the lock. The track just
 	// ended so position is 0.
 	if mc != nil {
@@ -681,19 +521,12 @@ func (p *Player) onPlaybackFinished(chainID uint64, srcErr error) {
 		)
 	}
-	if srcErr != nil {
+	p.logger.Info("Playback finished naturally")
 		p.logger.Error(
 			"Playback stopped: the audio source failed",
 			"err", srcErr,
 		)
 	} else {
 		p.logger.Info("Playback finished naturally")
 	}
 	// Notify queue for auto-advance. Called without p.mu held
 	// because it re-enters the player via LoadFile/Play.
 	if handler != nil {
-		handler(srcErr)
+		handler()
 	}
 }
@@ -754,18 +587,6 @@ func (p *Player) loadFileLocked(filePath string) error {
 	p.currentFile = f
 	// The decoder's own format, kept for the paths that rebuild the
 	// chain later: Play()'s replay branch resamples from it, so a
 	// stale rate there plays a finished track back at the wrong speed.
 	p.format = format
 	// The previous track's duration must not outlive it.  This is set
 	// again by emitTrackChanged below, but only when the database has
 	// a row for the file -- and every position this player reports is
 	// scaled by it, so inheriting means every report is wrong by the
 	// ratio between two unrelated tracks.
 	p.trackLengthMs = 0
 	if err := p.updateStreamers(
 		streamer, format.SampleRate,
 	); err != nil {
@@ -970,10 +791,6 @@ func (p *Player) SetVolume(desiredVolume UserVolume) {
 	p.mu.Lock()
 	defer p.mu.Unlock()
 	if p.systemVolume {
 		return
 	}
 	p.setVolumeLocked(desiredVolume)
 	p.emitVolumeChanged()
 	p.saveState()
@@ -1022,10 +839,6 @@ func (p *Player) ChangeVolume(deltaVolume int) error {
 	p.mu.Lock()
 	defer p.mu.Unlock()
 	if p.systemVolume {
 		return nil
 	}
 	p.setVolumeLocked(p.getUserVolume() + UserVolume(deltaVolume))
 	p.emitVolumeChanged()
 	p.saveState()
@@ -1056,14 +869,6 @@ func (p *Player) MuteToggle() error {
 		return errNoAudioFileLoaded
 	}
 	// Mute is a level of zero by another name, so it goes with the rest
 	// of the volume where the system owns it -- and it would be the one
 	// state on such a platform the user could not get out of, since with
 	// no control rendered there is nothing left to un-mute with.
 	if p.systemVolume {
 		return nil
 	}
 	speaker.Lock()
 	p.volume.Silent = !p.volume.Silent
 	speaker.Unlock()
@@ -1101,8 +906,6 @@ func (p *Player) CurrentPosition() (int, error) {
 		return 0, errNoAudioFileLoaded
 	}
 	defer p.lockSourceLocked()()
 	speaker.Lock()
 	pos := math.Round(
 		100.0 * float64(p.seeker.Position()) /
@@ -1121,28 +924,6 @@ func (p *Player) Seek(targetSeconds int) error {
 	return p.seekLocked(targetSeconds)
 }
 // lockSourceLocked blocks the read-ahead goroutine from touching the
 // decoder and returns the function that releases it, so a caller can
 // `defer p.lockSourceLocked()()`.
 //
 // Reading the decoder's position is a read *of the decoder*, and the
 // speaker lock does not exclude the read-ahead goroutine -- it never
 // takes it.  That was a genuine data race on every position emit,
 // once a second for the whole of playback.
 //
 // srcMu is not reentrant, so nothing that already holds it may call
 // this; seekSourceLocked exists to keep that region free of emits.
 // Must be called with p.mu held.
 func (p *Player) lockSourceLocked() func() {
 	if p.buffered == nil {
 		return func() {}
 	}
 	p.buffered.LockSource()
 	return p.buffered.UnlockSource
 }
 // rewindLocked returns the decoder to the start of the track without
 // touching playback state.  Must be called with p.mu held.
 func (p *Player) rewindLocked() {
@@ -1178,46 +959,6 @@ func (p *Player) seekLocked(targetSeconds int) error {
 		return fmt.Errorf("cannot get track length: %w", err)
 	}
 	// The source lock is released before anything below is emitted:
 	// emitPositionLocked reads the decoder's position and takes the
 	// same lock, which is not reentrant.
 	seekErr := p.seekSourceLocked(targetSeconds, lengthSecs)
 	if seekErr != nil {
 		p.logger.Warn(
 			"Seek failed, playback will start from "+
 				"the beginning",
 			"target-seconds", targetSeconds,
 			"err", seekErr,
 		)
 		// The optimistic move the UI already made has to be taken
 		// back, and only the backend knows it did not happen.
 		events.Emit(p.ctx, events.SeekFailed)
 		p.emitPositionLocked()
 		return fmt.Errorf("failed to seek: %w", seekErr)
 	}
 	if p.mediaControls != nil {
 		p.mediaControls.NotifySeek(targetSeconds)
 	}
 	// Report the landing position immediately rather than leaving the
 	// UI to guess until the next tick — this is the half of H-3 that
 	// desynced the seek bar by 30 s over four keyboard seeks.
 	p.emitPositionLocked()
 	return nil
 }
 // seekSourceLocked moves the decoder and flushes the stale read-ahead
 // behind it.  It owns the source lock for exactly that long and
 // emits nothing, so its caller is free to read the position
 // afterwards.  Must be called with p.mu held.
 func (p *Player) seekSourceLocked(
 	targetSeconds int,
 	lengthSecs int,
 ) error {
 	// Block the read-ahead goroutine from reading the source while
 	// we seek it. The decoder (e.g. FLAC's bufseekio.ReadSeeker) is
 	// not safe for concurrent Read+Seek, and read-ahead runs on its
@@ -1273,11 +1014,19 @@ func (p *Player) seekSourceLocked(
 	if seekErr != nil {
 		speaker.Unlock()
-		p.logger.Debug(
+		p.logger.Warn(
-			"seek rejected by the decoder",
+			"Seek failed, playback will start from "+
-			"samples", samples, "err", seekErr,
+				"the beginning",
 			"target-seconds", targetSeconds,
 			"samples", samples,
 			"err", seekErr,
 		)
 		// The optimistic move the UI already made has to be taken
 		// back, and only the backend knows it did not happen.
 		events.Emit(p.ctx, events.SeekFailed)
 		p.emitPositionLocked()
 		return fmt.Errorf("failed to seek: %w", seekErr)
 	}
@@ -1290,6 +1039,15 @@ func (p *Player) seekSourceLocked(
 		p.buffered.Flush()
 	}
 	if p.mediaControls != nil {
 		p.mediaControls.NotifySeek(targetSeconds)
 	}
 	// Report the landing position immediately rather than leaving the
 	// UI to guess until the next tick — this is the half of H-3 that
 	// desynced the seek bar by 30 s over four keyboard seeks.
 	p.emitPositionLocked()
 	return nil
 }
@@ -1382,10 +1140,6 @@ func (p *Player) seekerLengthSecsLocked() (int, error) {
 		return 0, errNoAudioFileLoaded
 	}
 	// Len is fixed for the life of the decoder, so unlike Position it
 	// races with nothing and needs no source lock -- which it must not
 	// take anyway: displayPositionSecsLocked calls this while holding
 	// it, and srcMu is not reentrant.
 	speaker.Lock()
 	length := p.seeker.Len() / int(p.format.SampleRate)
 	speaker.Unlock()
@@ -1402,8 +1156,6 @@ func (p *Player) displayPositionSecsLocked() int {
 		return 0
 	}
 	defer p.lockSourceLocked()()
 	speaker.Lock()
 	pos := p.seeker.Position()
 	total := p.seeker.Len()
@@ -1514,15 +1266,7 @@ func (p *Player) saveState() {
 	volume := int64(DefaultUserVol)
 	muted := false
-	switch {
+	if p.volume != nil {
 	case p.systemVolume:
 		// The maximum this platform runs at is not a level anybody
 		// chose, so it is not one to remember.  Writing back what
 		// restore found keeps the row a description of the user's
 		// setting without needing a second query that omits the column.
 		volume = int64(p.storedVolume)
 		muted = p.storedMuted
 	case p.volume != nil:
 		volume = int64(p.getUserVolume())
 		muted = p.volume.Silent
 	}
@@ -1606,20 +1350,11 @@ func (p *Player) restoreStateLocked() {
 		}
 	}
-	if p.systemVolume {
+	vol := clampVolume(UserVolume(state.Volume))
-		// Remembered, not applied: the device's keys are the volume
+	p.setVolumeLocked(vol)
 		// control here, so the player runs wide open and hands the
 		// stored level back untouched at the next save.
 		p.storedVolume = clampVolume(UserVolume(state.Volume))
 		p.storedMuted = state.Muted
 		p.setVolumeLocked(MaxUserVol)
 	} else {
 		vol := clampVolume(UserVolume(state.Volume))
 		p.setVolumeLocked(vol)
-		if state.Muted {
+	if state.Muted {
-			p.volume.Silent = true
+		p.volume.Silent = true
 		}
 	}
 	// Restore last track if the file still exists.
@@ -1659,9 +1394,8 @@ func (p *Player) restoreStateLocked() {
 	}
 	p.logger.Info("Player state restored",
-		"volume", p.getUserVolume(),
+		"volume", vol,
-		"muted", p.volume.Silent,
+		"muted", state.Muted,
 		"systemVolume", p.systemVolume,
 		"trackPath", state.LastTrackPath,
 		"positionSeconds", state.LastPositionSeconds,
 	)
@@ -1,42 +0,0 @@
 package player
 // Who owns the volume, and what follows when it is not us.
 //
 // On Android the hardware keys *are* the volume control and the
 // framework mixes our stream against the device level, so a second
 // control inside the app is a slider that moves something the user
 // already moved (#64).  Where that is true the player's own level sits
 // at maximum, nothing changes it, and nothing persists it.
 //
 // **The predicate is named after the capability, not the platform.**
 // The frontend asks "is there a volume for me to control", which is a
 // question about this build; asking "is this a phone" instead would
 // key the answer to a viewport, and an Android tablet at 600px or more
 // would then draw the bottom bar's slider over a level pinned at
 // maximum -- a control that cannot act, which is the thing
 // `library-status-indicator` already settled is worse than none.
 //
 // **Only `platformOwnsVolume` is behind a build tag**, in two files
 // that declare nothing else.  A tagged file is compiled by nothing
 // `make lint` or `make test` runs and is untestable off a phone, which
 // is the reasoning `mediacontrols/androidpayload.go` states for
 // keeping its contract out of one -- so everything decidable here is
 // decided against `Player.systemVolume`, a field a test sets either
 // way, and the tag decides only what that field starts as.
 //
 // The one thing this must not disturb is ducking.  `SetDuck` applies
 // its attenuation by re-applying the *user's* level through
 // `setVolumeLocked`, so pinning that level to maximum leaves the
 // offset arithmetic exactly as it was: an OS asking us to get out of
 // the way of a navigation prompt is not the user setting a volume, and
 // it is the only thing that may move the output on such a platform.
 // SystemOwnsVolume reports whether the platform's own control is the
 // only volume control there is, so this app neither offers one nor
 // remembers a level.
 //
 // It is bound: the frontend renders no `<volume-control>` when it is
 // true, at any width.
 func (p *Player) SystemOwnsVolume() bool {
 	return p.systemVolume
 }
@@ -1,11 +0,0 @@
 //go:build android
 package player
 // platformOwnsVolume is true on Android: volume is the device's, set
 // with the hardware keys, and `mediacontrols`' Android handler
 // implements no volume callback for the same reason.
 //
 // See systemvolume.go for why this constant is the whole of what a
 // build tag decides here.
 const platformOwnsVolume = true
@@ -1,10 +0,0 @@
 //go:build !android
 package player
 // platformOwnsVolume is false everywhere but Android: a desktop mixer
 // is per-application, so our level is the one the user reaches for.
 //
 // See systemvolume.go for why this constant is the whole of what a
 // build tag decides here.
 const platformOwnsVolume = false
@@ -1,215 +0,0 @@
 package player
 import (
 	"log/slog"
 	"os"
 	"path/filepath"
 	"strings"
 	"testing"
 	"github.com/gopxl/beep/v2/effects"
 	"yellowjacket/backend/database"
 )
 // pinnedPlayer is a player on a platform whose volume belongs to the
 // device.  The field is set rather than the build constant read,
 // because the constant is true on exactly one platform and no tier
 // here runs on it -- see systemvolume.go.
 func pinnedPlayer(t *testing.T, db *database.DB) *Player {
 	t.Helper()
 	p := NewPlayer(slog.Default(), db)
 	p.systemVolume = true
 	p.volume = &effects.Volume{Base: 2}
 	p.setVolumeLocked(MaxUserVol)
 	return p
 }
 // TestSystemVolumeRefusesEveryWayToChangeTheLevel is the first half of
 // #64: where the device owns the volume, ours sits at maximum and none
 // of the three routes to a level moves it.  Mute is in that list
 // because it is a level of zero by another name, and because with no
 // control rendered it is the one state on such a platform there would
 // be nothing to get out of.
 func TestSystemVolumeRefusesEveryWayToChangeTheLevel(t *testing.T) {
 	t.Parallel()
 	p := pinnedPlayer(t, nil)
 	if !p.SystemOwnsVolume() {
 		t.Fatal("SystemOwnsVolume() = false on a pinned player")
 	}
 	if got := p.getUserVolume(); got != MaxUserVol {
 		t.Errorf("starting volume = %d, want %d", got, MaxUserVol)
 	}
 	p.SetVolume(20)
 	if got := p.getUserVolume(); got != MaxUserVol {
 		t.Errorf("volume after SetVolume(20) = %d, want %d", got, MaxUserVol)
 	}
 	if err := p.ChangeVolume(-30); err != nil {
 		t.Fatalf("ChangeVolume: %v", err)
 	}
 	if got := p.getUserVolume(); got != MaxUserVol {
 		t.Errorf("volume after ChangeVolume(-30) = %d, want %d", got, MaxUserVol)
 	}
 	if err := p.MuteToggle(); err != nil {
 		t.Fatalf("MuteToggle: %v", err)
 	}
 	if p.volume.Silent {
 		t.Error("MuteToggle silenced a player whose volume the system owns")
 	}
 }
 // TestAnUnpinnedPlayerStillChangesItsVolume is the other side of the
 // same switch.  Without it the test above passes on a player that
 // refuses everything, which is what a mis-wired field would produce.
 func TestAnUnpinnedPlayerStillChangesItsVolume(t *testing.T) {
 	t.Parallel()
 	p := NewPlayer(slog.Default(), nil)
 	p.volume = &effects.Volume{Base: 2}
 	p.setVolumeLocked(MaxUserVol)
 	if p.SystemOwnsVolume() {
 		t.Fatal("SystemOwnsVolume() = true off Android")
 	}
 	p.SetVolume(20)
 	if got := p.getUserVolume(); got != 20 {
 		t.Errorf("volume after SetVolume(20) = %d, want 20", got)
 	}
 	if err := p.MuteToggle(); err != nil {
 		t.Fatalf("MuteToggle: %v", err)
 	}
 	if !p.volume.Silent {
 		t.Error("MuteToggle did not silence an ordinary player")
 	}
 }
 // TestSystemVolumeStillDucks is the issue's second Finding, made a
 // test: pinning the user's level must leave the OS's attenuation
 // working, because a duck is not a volume the user chose and is the
 // only thing that may move the output on such a platform.
 func TestSystemVolumeStillDucks(t *testing.T) {
 	t.Parallel()
 	p := pinnedPlayer(t, nil)
 	open := p.volume.Volume
 	p.SetDuck(true)
 	if p.volume.Volume >= open {
 		t.Errorf(
 			"ducked output = %v, want less than %v", p.volume.Volume, open,
 		)
 	}
 	if got := p.getUserVolume(); got != MaxUserVol {
 		t.Errorf("user volume while ducked = %d, want %d", got, MaxUserVol)
 	}
 	// A refused SetVolume must not disturb the offset either: it
 	// returns before setVolumeLocked, which is what re-applies it.
 	ducked := p.volume.Volume
 	p.SetVolume(10)
 	if p.volume.Volume != ducked {
 		t.Errorf(
 			"output after a refused SetVolume = %v, want %v",
 			p.volume.Volume, ducked,
 		)
 	}
 	p.SetDuck(false)
 	if p.volume.Volume != open {
 		t.Errorf("output after unduck = %v, want %v", p.volume.Volume, open)
 	}
 }
 // TestSystemVolumeWritesBackTheLevelItFound is the rest of the
 // Direction: "make sure nothing writes a persisted volume from that
 // platform".  The maximum the player runs at is synthetic, so saving
 // must not record it over whatever the row already said.
 func TestSystemVolumeWritesBackTheLevelItFound(t *testing.T) {
 	t.Parallel()
 	db := database.NewTestDB(t)
 	// A level set by some earlier, unpinned session.
 	writer := NewPlayer(slog.Default(), db)
 	writer.volume = &effects.Volume{Base: 2}
 	writer.setVolumeLocked(30)
 	writer.SaveState()
 	p := pinnedPlayer(t, db)
 	p.RestoreState()
 	if got := p.getUserVolume(); got != MaxUserVol {
 		t.Errorf("restored volume = %d, want %d (the level is pinned)", got, MaxUserVol)
 	}
 	if p.volume.Silent {
 		t.Error("restore muted a player whose volume the system owns")
 	}
 	p.SaveState()
 	state, err := db.Queries.GetPlayerState(db.Ctx)
 	if err != nil {
 		t.Fatalf("GetPlayerState: %v", err)
 	}
 	if state.Volume != 30 {
 		t.Errorf("persisted volume = %d, want 30 (untouched)", state.Volume)
 	}
 }
 // TestPlatformVolumeOwnershipIsDeclaredOncePerPlatform sweeps the
 // source, because the pair of tagged files is the one thing here no
 // tier compiles both halves of: `make lint` and `make test` build the
 // `!android` side only, so a deleted or edited android file fails
 // nothing until somebody has a phone in their hand.
 func TestPlatformVolumeOwnershipIsDeclaredOncePerPlatform(t *testing.T) {
 	t.Parallel()
 	want := map[string]string{
 		"systemvolume_other.go":   "const platformOwnsVolume = false",
 		"systemvolume_android.go": "const platformOwnsVolume = true",
 	}
 	tags := map[string]string{
 		"systemvolume_other.go":   "//go:build !android",
 		"systemvolume_android.go": "//go:build android",
 	}
 	for name, decl := range want {
 		src, err := os.ReadFile(filepath.Join(".", name))
 		if err != nil {
 			t.Errorf("%s: %v", name, err)
 			continue
 		}
 		if !strings.Contains(string(src), decl) {
 			t.Errorf("%s does not declare %q", name, decl)
 		}
 		if !strings.Contains(string(src), tags[name]) {
 			t.Errorf("%s does not carry %q", name, tags[name])
 		}
 	}
 }
@@ -83,7 +83,7 @@ func TestFallback_TriggersOnNaturalFinish(t *testing.T) {
 	q.SetFallbackSource(fake)
 	q.SetQueue(seedPaths, 0, false, Source{Type: "album", ID: 1, Label: "Seed Album"})
-	q.OnPlaybackFinished(nil)
+	q.OnPlaybackFinished()
 	waitUntil(t, func() bool { return fake.callCount() == 1 }, "fallback to be resolved")
 	waitUntil(t, func() bool {
@@ -159,7 +159,7 @@ func TestFallback_EmptyResultLeavesQueueExhausted(t *testing.T) {
 	q.SetFallbackSource(fake)
 	q.SetQueue(seedPaths, 0, false, Source{})
-	q.OnPlaybackFinished(nil)
+	q.OnPlaybackFinished()
 	waitUntil(t, func() bool { return fake.callCount() == 1 }, "fallback to be resolved")
@@ -193,7 +193,7 @@ func TestFallback_StaleResolutionDiscarded(t *testing.T) {
 	q.SetFallbackSource(fake)
 	q.SetQueue(seedPaths, 0, false, Source{})
-	q.OnPlaybackFinished(nil) // starts resolving, blocked on gate
+	q.OnPlaybackFinished() // starts resolving, blocked on gate
 	time.Sleep(20 * time.Millisecond) // let the goroutine reach the gate
@@ -1,78 +0,0 @@
 package queue
 import (
 	"errors"
 	"testing"
 	"yellowjacket/backend/events"
 )
 // errTestDecode stands in for a decoder blowing up mid-track.
 var errTestDecode = errors.New("decode blew up")
 // currentIndex == -1 against a non-empty queue is a state this
 // package produces on purpose: onQueueExhausted(false) sets it and
 // deliberately leaves the finished track loaded in the player, so it
 // stays on the now-playing bar. Pressing play from there and letting
 // it finish re-enters OnPlaybackFinished with exactly that pair --
 // which used to index q.tracks[-1] and panic, on a goroutine
 // dispatched from the audio callback with no caller to recover it.
 func TestFinishedWithNoCurrentTrackDoesNotPanic(t *testing.T) {
 	t.Parallel()
 	tests := []struct {
 		name  string
 		index int
 	}{
 		{"exhausted queue leaves -1", -1},
 		{"index past the end", 3},
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
 			t.Parallel()
 			q, _, _ := setupRecordedQueue(t)
 			q.tracks = []Track{
 				{FilePath: "/a.mp3"},
 				{FilePath: "/b.mp3"},
 			}
 			q.currentIndex = tt.index
 			// The assertion is that this returns at all.
 			q.OnPlaybackFinished(nil)
 			if q.currentIndex != tt.index {
 				t.Errorf(
 					"an out-of-range index was acted on: %d became %d",
 					tt.index, q.currentIndex,
 				)
 			}
 		})
 	}
 }
 // A track that broke mid-playback is not a track that was listened
 // to. The player cannot say so itself -- the metadata is here -- so
 // it hands the reason over and this is where it becomes a
 // PlaybackFailed rather than a silent auto-advance.
 func TestAFailedTrackIsReportedAndNotCountedAsAPlay(t *testing.T) {
 	t.Parallel()
 	q, _, rec := setupRecordedQueue(t)
 	q.tracks = []Track{
 		{FilePath: "/a.mp3", Title: "A", AudioFileID: 1},
 		{FilePath: "/b.mp3", Title: "B", AudioFileID: 2},
 	}
 	q.currentIndex = 0
 	q.OnPlaybackFinished(errTestDecode)
 	if _, ok := rec.Last(events.PlaybackFailed); !ok {
 		t.Errorf(
 			"a track that failed mid-playback told the user nothing; "+
 				"got %v",
 			rec.Names(),
 		)
 	}
 }
@@ -1,45 +1,18 @@
 package queue
-// OnPlaybackFinished is called when a track stops streaming. This
+// OnPlaybackFinished is called when a track finishes playing naturally.
-// drives the auto-advance behavior and records the play.
+// This drives the auto-advance behavior and records the play.
-//
+func (q *Queue) OnPlaybackFinished() {
 // srcErr says why the track stopped: nil for one that reached its
 // end, non-nil for one that broke partway through.  The player cannot
 // tell the user which, because the metadata lives here -- so a failure
 // is reported as PlaybackFailed and *not* recorded as a play, while
 // the advance happens either way.  Before this, a file that failed
 // mid-track advanced in silence and was counted as listened to.
 //
 //wails:ignore // internal wiring, not part of the app's IPC surface.
 func (q *Queue) OnPlaybackFinished(srcErr error) {
 	q.mu.Lock()
-	// currentIndex is -1 whenever the queue has been exhausted, and
+	if len(q.tracks) == 0 {
 	// onQueueExhausted deliberately leaves the finished track loaded
 	// in the player -- so a natural finish can re-enter here against a
 	// queue that is not empty and an index that is not valid.  Every
 	// other path in this package bounds-checks before indexing; this
 	// one panicked, on a goroutine with no caller to recover it.
 	if q.currentIndex < 0 || q.currentIndex >= len(q.tracks) {
 		q.mu.Unlock()
 		return
 	}
 	// Capture the track that just finished before advancing.
-	finished := q.tracks[q.currentIndex]
+	finishedID := q.tracks[q.currentIndex].AudioFileID
 	finishedID := finished.AudioFileID
 	if srcErr != nil {
 		q.emitPlaybackFailed(finished, srcErr)
 	}
 	// A track that broke was not listened to.
 	recordFinished := func() {
 		if srcErr == nil {
 			q.recordPlay(finishedID)
 		}
 	}
 	// Repeat One: replay the current track.
 	if q.repeatMode == RepeatOne {
@@ -48,7 +21,7 @@ func (q *Queue) OnPlaybackFinished(srcErr error) {
 		}
 		q.mu.Unlock()
-		recordFinished()
+		q.recordPlay(finishedID)
 		return
 	}
@@ -58,7 +31,7 @@ func (q *Queue) OnPlaybackFinished(srcErr error) {
 		// Queue exhausted — this is the extension point for a future fallback playlist.
 		q.onQueueExhausted(false)
 		q.mu.Unlock()
-		recordFinished()
+		q.recordPlay(finishedID)
 		return
 	}
@@ -71,12 +44,12 @@ func (q *Queue) OnPlaybackFinished(srcErr error) {
 	if !q.playCurrentOrSkip(true, q.nextIndex) {
 		q.onQueueExhausted(false)
 		q.mu.Unlock()
-		recordFinished()
+		q.recordPlay(finishedID)
 		return
 	}
 	q.emitIndexChanged()
 	q.mu.Unlock()
-	recordFinished()
+	q.recordPlay(finishedID)
 }
@@ -107,7 +107,7 @@ func TestPlaybackFailed_AutoAdvanceSkipsPastIt(t *testing.T) {
 	// The first track finished: auto-advance lands on the missing
 	// file and must step over it rather than stopping dead.
-	q.OnPlaybackFinished(nil)
+	q.OnPlaybackFinished()
 	if got := q.GetState().CurrentIndex; got != 2 {
 		t.Errorf("currentIndex after skipping: got %d, want 2", got)
@@ -183,7 +183,7 @@ func TestQueueExhausted_KeepsTheFinishedTrackLoaded(t *testing.T) {
 	q.SetQueue(paths, 0, false, Source{})
 	q.Play()
-	q.OnPlaybackFinished(nil)
+	q.OnPlaybackFinished()
 	if q.GetState().CurrentIndex != -1 {
 		t.Errorf(
@@ -24,19 +24,10 @@ func DefaultBindings() map[string]string {
 		"player.repeat":      "R",
 		"player.mute":        "M",
-		// Navigation (Global scope).  Back and forward are the browser's
+		// Navigation (Global scope)
 		// own combination on every platform, which is the whole design
 		// brief for them: the app has one global history and this is the
 		// gesture people already have for it.  The modifier is what keeps
 		// them clear of `player.seekBack`/`seekForward`, which are the
 		// bare arrows -- a binding is matched on its full canonical
 		// string, so "Alt+Left" and "Left" are different keys and not a
 		// conflict.
 		"nav.search":    "/",
 		"nav.searchAlt": "Ctrl+F",
 		"nav.queue":     "Q",
 		"nav.back":      "Alt+Left",
 		"nav.forward":   "Alt+Right",
 		// App actions
 		"app.selectAll": "Ctrl+A",
@@ -52,75 +52,6 @@ func UseHomeOverride(base string) {
 	_ = os.Setenv(envHomeOverride, base)
 }
 // envTempDir is the variable Go's os.TempDir() reads, and through it
 // every library in the process that asks for a temporary file.
 const envTempDir = "TMPDIR"
 // tempDirName is the subdirectory of the app's own storage that
 // becomes that answer.
 const tempDirName = "tmp"
 // UseTempDir gives the process a temporary directory that exists.
 //
 // **Android has no /tmp and hands an app no TMPDIR**, and Go's
 // os.TempDir() falls back to "/tmp" when the variable is unset -- so
 // every library in the process that wants scratch space is handed a
 // path that has never existed. SQLite is the one that noticed: an
 // INSERT ... SELECT large enough to spill returned
 // SQLITE_IOERR_GETTEMPPATH (disk I/O error 6410), which is how the
 // champion search index came to fail its rebuild on every launch while
 // the app otherwise looked healthy (#190).
 //
 // It is the *class* that is fixed here rather than that statement.
 // Anything that spills fails the same way on that platform -- large
 // sorts, large joins, VACUUM -- so the repair belongs at the process's
 // one answer to the question rather than at each caller. The
 // alternative considered was PRAGMA temp_store = MEMORY, which is
 // cheaper and more local and is a promise that every future spill fits
 // in RAM on a phone; the catalog is the largest thing in this app and
 // that is not a promise worth making silently.
 //
 // The rules are UseHomeOverride's, for the same reasons. **An empty
 // base is a no-op**, because that is what
 // application.Mobile.StoragePath() returns on desktop -- so this needs
 // no build tag and changes nothing off mobile, where /tmp is real. And
 // **an explicit TMPDIR wins**, so anyone who set one deliberately gets
 // what they asked for; nothing sets it on the platform this exists for.
 //
 // It returns its error rather than swallowing it because a temp
 // directory that could not be created is the same silent failure one
 // step earlier, and since #160 a log line on that platform is
 // something a person can actually read.
 func UseTempDir(base string) error {
 	if base == "" || os.Getenv(envTempDir) != "" {
 		return nil
 	}
 	dir := filepath.Join(base, tempDirName)
 	if err := os.MkdirAll(dir, os.ModePerm); err != nil {
 		return fmt.Errorf("could not make the temp directory %s: %w", dir, err)
 	}
 	// Writability is checked rather than assumed: the whole failure
 	// this repairs is a directory that is named and cannot be used, and
 	// MkdirAll on an existing unwritable directory succeeds.
 	probe, err := os.CreateTemp(dir, "probe")
 	if err != nil {
 		return fmt.Errorf("temp directory %s is not writable: %w", dir, err)
 	}
 	name := probe.Name()
 	_ = probe.Close()
 	_ = os.Remove(name)
 	if err := os.Setenv(envTempDir, dir); err != nil {
 		return fmt.Errorf("could not set %s: %w", envTempDir, err)
 	}
 	return nil
 }
 // getUserDirPath returns and creates the path for a user directory.
 func getUserDirPath(dt dirType) (string, error) {
 	path, err := resolveUserDirPath(dt)
@@ -87,116 +87,3 @@ func TestUseHomeOverride(t *testing.T) {
 		})
 	}
 }
 // UseTempDir carries UseHomeOverride's two rules for the same reasons,
 // plus one of its own: the directory it names has to be usable.
 //
 // **The only tier that can compile the platform this exists for is a
 // phone**, so everything decidable off one is decided here -- which is
 // androidpayload.go's discipline, and is why the platform call is a
 // parameter rather than something this package reaches for. The
 // device's half is a single measurement: no /tmp, no TMPDIR (#190).
 func TestUseTempDir(t *testing.T) {
 	t.Run("an empty base is a no-op", func(t *testing.T) {
 		// This is the desktop case in full: StoragePath() answers ""
 		// off mobile, where /tmp is real and must be left alone.
 		t.Setenv(envTempDir, "")
 		if err := UseTempDir(""); err != nil {
 			t.Fatalf("UseTempDir(\"\") = %v, want nil", err)
 		}
 		if got := os.Getenv(envTempDir); got != "" {
 			t.Errorf("%s = %q, want it untouched", envTempDir, got)
 		}
 	})
 	t.Run("an explicit TMPDIR wins", func(t *testing.T) {
 		const chosen = "/somewhere/deliberate"
 		// The base is taken before TMPDIR moves, because t.TempDir()
 		// reads TMPDIR too -- which is the same fact this function is
 		// about, met from the other side.
 		base := t.TempDir()
 		t.Setenv(envTempDir, chosen)
 		if err := UseTempDir(base); err != nil {
 			t.Fatalf("UseTempDir = %v, want nil", err)
 		}
 		if got := os.Getenv(envTempDir); got != chosen {
 			t.Errorf("%s = %q, want the explicit %q", envTempDir, got, chosen)
 		}
 	})
 	t.Run("points at a real directory under the base", func(t *testing.T) {
 		base := t.TempDir()
 		t.Setenv(envTempDir, "")
 		if err := UseTempDir(base); err != nil {
 			t.Fatalf("UseTempDir = %v, want nil", err)
 		}
 		got := os.Getenv(envTempDir)
 		want := filepath.Join(base, tempDirName)
 		if got != want {
 			t.Fatalf("%s = %q, want %q", envTempDir, got, want)
 		}
 		// The whole failure being repaired is a temp directory that is
 		// named and does not exist, so naming one is not enough.
 		info, err := os.Stat(got)
 		if err != nil {
 			t.Fatalf("the temp directory was named but not created: %v", err)
 		}
 		if !info.IsDir() {
 			t.Fatalf("%s is not a directory", got)
 		}
 	})
 	t.Run("os.TempDir then answers with it", func(t *testing.T) {
 		// The point of setting the variable at all: this is what every
 		// library in the process reads, SQLite's driver included.
 		base := t.TempDir()
 		t.Setenv(envTempDir, "")
 		if err := UseTempDir(base); err != nil {
 			t.Fatalf("UseTempDir = %v, want nil", err)
 		}
 		if got := os.TempDir(); got != filepath.Join(base, tempDirName) {
 			t.Errorf("os.TempDir() = %q, want the directory we made", got)
 		}
 	})
 	t.Run("an unwritable directory is an error, not a silent success", func(t *testing.T) {
 		if os.Getuid() == 0 {
 			t.Skip("root can write anywhere, so there is nothing to refuse")
 		}
 		base := t.TempDir()
 		// MkdirAll on an existing directory succeeds whatever its
 		// mode, so without the write probe this case would set TMPDIR
 		// to a directory nothing can use -- which is the bug again,
 		// one directory over.
 		if err := os.Mkdir(filepath.Join(base, tempDirName), 0o500); err != nil {
 			t.Fatalf("prepare the unwritable directory: %v", err)
 		}
 		t.Setenv(envTempDir, "")
 		if err := UseTempDir(base); err == nil {
 			t.Fatal("UseTempDir accepted a directory it cannot write to")
 		}
 		if got := os.Getenv(envTempDir); got != "" {
 			t.Errorf("%s was set to %q despite the failure", envTempDir, got)
 		}
 	})
 }
@@ -4,28 +4,18 @@ includes:
  common: ../Taskfile.yml
 vars:
-  # APP_ID is an *assertion*, not a setting, and it has no default.
+  # The *installed* package name, which every adb-driven task below uses
  # to uninstall, launch and filter. It must agree with `applicationId`
  # in app/build.gradle, and nothing enforces that.
  #
-  # It used to be the id every adb-driven task below uninstalled,
+  # ANDROID.md says to set this in build/config.yml. That does not work
-  # launched and filtered, defaulting to "app.yellowjacket". It could
+  # in beta.8, checked both ways: `wails3 task` builds its var set from
-  # never have been a setting: `wails3 task` builds its var set from CLI
+  # CLI KEY=VALUE arguments and the Taskfile tree only -- nothing reads
-  # KEY=VALUE arguments and the Taskfile tree only -- nothing reads
+  # config.yml -- and even when set it feeds only these adb commands,
-  # build/config.yml, contrary to ANDROID.md, checked with --dry -- and
+  # never Gradle. So the identity is declared twice, here and in
-  # even when set it fed only the adb commands, never Gradle. So the
+  # build.gradle, and a change to one alone means the official run and
-  # identity was declared twice, here and as `applicationId` in
+  # deploy tasks address a package that is not installed.
-  # app/build.gradle, with nothing enforcing that they agree.
+  APP_ID: '{{.APP_ID | default "app.yellowjacket"}}'
  #
  # They did not agree. The debug buildType carries
  # `applicationIdSuffix ".dev"`, so the tasks that assemble a debug APK
  # addressed the *release* id -- on a device, the user's installed app
  # and their library (#159).
  #
  # The id is now read back from the built APK by scripts/android-
  # pkgid.sh, so the thing installed and the thing launched agree by
  # construction. Passing APP_ID= says "this build had better declare
  # that id", and the deploy refuses before touching anything if it does
  # not -- which is the check that would have caught #159 statically.
  APP_ID: '{{.APP_ID | default ""}}'
  MIN_SDK: '21'
  TARGET_SDK: '35'
  # The emulator runs the host architecture; physical devices are arm64
@@ -382,7 +372,9 @@ tasks:
          ARCH: '{{.ARCH | default .HOST_ARCH}}'
    cmds:
      - task: ensure-emulator
-      - './scripts/android-deploy.sh --apk "{{.BIN_DIR}}/{{.APP_NAME}}.apk" --target emulator{{if .APP_ID}} --expect "{{.APP_ID}}"{{end}}'
+      - '"{{.ADB}}" uninstall {{.APP_ID}} 2>/dev/null || true'
      - '"{{.ADB}}" install "{{.BIN_DIR}}/{{.APP_NAME}}.apk"'
      - '"{{.ADB}}" shell am start -n {{.APP_ID}}/com.wails.app.MainActivity'
  run:
    summary: Build, install and launch a debug build in the Android Emulator
@@ -391,7 +383,9 @@ tasks:
      - task: build
    cmds:
      - task: assemble:apk
-      - './scripts/android-deploy.sh --apk "{{.BIN_DIR}}/{{.APP_NAME}}.apk" --target emulator{{if .APP_ID}} --expect "{{.APP_ID}}"{{end}}'
+      - '"{{.ADB}}" uninstall {{.APP_ID}} 2>/dev/null || true'
      - '"{{.ADB}}" install "{{.BIN_DIR}}/{{.APP_NAME}}.apk"'
      - '"{{.ADB}}" shell am start -n {{.APP_ID}}/com.wails.app.MainActivity'
  device:list:
    summary: Lists connected Android devices and emulators (serials)
@@ -406,7 +400,25 @@ tasks:
          ARCH: arm64
    cmds:
      - task: assemble:apk
-      - './scripts/android-deploy.sh --apk "{{.BIN_DIR}}/{{.APP_NAME}}.apk" --target device{{if .DEVICE_ID}} --serial "{{.DEVICE_ID}}"{{end}}{{if .APP_ID}} --expect "{{.APP_ID}}"{{end}}'
+      - |
        DEVICE='{{.DEVICE_ID | default ""}}'
        if [ -z "$DEVICE" ]; then
          DEVICE="${DEVICE_ID:-}"
        fi
        if [ -z "$DEVICE" ]; then
          DEVICE=$("{{.ADB}}" devices | awk 'NR > 1 && $2 == "device" && $1 !~ /^emulator-/ { print $1; exit }')
        fi
        if [ -z "$DEVICE" ]; then
          echo "Error: no connected physical Android device found."
          echo "Pass DEVICE_ID=<serial> to target a device explicitly."
          echo "Find connected device serials with: {{.ADB}} devices"
          exit 1
        fi
        echo "Deploying {{.BIN_DIR}}/{{.APP_NAME}}.apk to device $DEVICE..."
        "{{.ADB}}" -s "$DEVICE" uninstall {{.APP_ID}} 2>/dev/null || true
        "{{.ADB}}" -s "$DEVICE" install "{{.BIN_DIR}}/{{.APP_NAME}}.apk"
        "{{.ADB}}" -s "$DEVICE" shell am start -n {{.APP_ID}}/com.wails.app.MainActivity
    preconditions:
      - sh: '[ -x "{{.ADB}}" ] || command -v adb'
        msg: "adb not found. Install the Android SDK platform-tools (or set ANDROID_HOME)"
@@ -418,7 +430,25 @@ tasks:
        vars:
          ARCH: arm64
    cmds:
-      - './scripts/android-deploy.sh --apk "{{.BIN_DIR}}/{{.APP_NAME}}.apk" --target device{{if .DEVICE_ID}} --serial "{{.DEVICE_ID}}"{{end}}{{if .APP_ID}} --expect "{{.APP_ID}}"{{end}}'
+      - |
        DEVICE='{{.DEVICE_ID | default ""}}'
        if [ -z "$DEVICE" ]; then
          DEVICE="${DEVICE_ID:-}"
        fi
        if [ -z "$DEVICE" ]; then
          DEVICE=$("{{.ADB}}" devices | awk 'NR > 1 && $2 == "device" && $1 !~ /^emulator-/ { print $1; exit }')
        fi
        if [ -z "$DEVICE" ]; then
          echo "Error: no connected physical Android device found."
          echo "Pass DEVICE_ID=<serial> to target a device explicitly."
          echo "Find connected device serials with: {{.ADB}} devices"
          exit 1
        fi
        echo "Deploying {{.BIN_DIR}}/{{.APP_NAME}}.apk to device $DEVICE..."
        "{{.ADB}}" -s "$DEVICE" uninstall {{.APP_ID}} 2>/dev/null || true
        "{{.ADB}}" -s "$DEVICE" install "{{.BIN_DIR}}/{{.APP_NAME}}.apk"
        "{{.ADB}}" -s "$DEVICE" shell am start -n {{.APP_ID}}/com.wails.app.MainActivity
    preconditions:
      - sh: '[ -x "{{.ADB}}" ] || command -v adb'
        msg: "adb not found. Install the Android SDK platform-tools (or set ANDROID_HOME)"
@@ -891,41 +891,13 @@ public class MainActivity extends AppCompatActivity {
        }
    }
    /**
     * The activity going away is not the app shutting down.
     *
     * <p>The scaffold called {@code bridge.shutdown()} here, which is
     * the natural reading of onDestroy and is wrong for this app twice
     * over. Android destroys and recreates an activity for a
     * configuration change the manifest does not declare, under memory
     * pressure, and on every background if the user has "Don't keep
     * activities" on -- all **without restarting the process**. And
     * when the user really does leave, this app's reason for existing
     * in the background is that a song is playing, which is what the
     * {@code mediaPlayback} foreground service is holding the process
     * alive for. Either way, tearing the Go side down here would stop
     * the music.
     *
     * <p>It was harmless only by accident: {@code nativeShutdown} calls
     * {@code App.Quit()}, whose Android {@code destroy()} is an empty
     * method, and {@code Run()}'s deferred {@code shutdownServices()}
     * can never fire because Android's {@code platformRun} is
     * {@code select{}} and does not return. So no {@code
     * ServiceShutdown} has ever run on Android, and removing this call
     * changes nothing today -- it stops the day someone implements
     * {@code destroy()} from silently killing playback on a rotation.
     *
     * <p>There is no callback for "the process is going away"; Android
     * simply kills it. Durability on this platform is the persist
     * writers, which submit on every mutation rather than at exit.
     *
     * <p>See #52, and CLAUDE.md, "An activity is a view onto the
     * process".
     */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        unregisterSystemEventReceivers();
        if (bridge != null) {
            bridge.shutdown();
        }
        if (webView != null) {
            webView.destroy();
        }
@@ -129,24 +129,7 @@ public class WailsBridge {
    }
    /**
-     * Initialize the native Go library.
+     * Initialize the native Go library
     *
     * <p><b>{@code initialized} is deliberately per-instance, and making
     * it {@code static} is the trap this comment exists for.</b> A
     * recreated activity builds a new bridge and calls this again, in a
     * process where the native library is already loaded and Go's
     * {@code main()} is already running -- so "initialise once per
     * process" looks like exactly the right rule. It is not, because
     * {@code nativeInit} does <i>two</i> things: it runs
     * {@code go mainFunc()}, and it stores the global JNI reference to
     * <i>this</i> bridge. Skip it and Go keeps executing JavaScript
     * against the destroyed activity's WebView: the app opens, renders,
     * and never receives another backend event.
     *
     * <p>So this is called every time, and the half that must not repeat
     * is latched on the Go side instead, at the top of {@code main()} --
     * which is also where the damage was ({@code os.Exit(1)}), and the
     * only place that can see it. See #52.
     */
    public void initialize() {
        if (initialized) {
@@ -1,12 +1,6 @@
 import { test, expect } from '../support/fixtures.js';
 import type { Page } from '@playwright/test';
 /**
 * How far the scroll test scrolls. One constant, because the guard and
 * the assertion have to agree about it — they did not, which is #133.
 */
 const SCROLL_TARGET = 80;
 /**
 * Plan 007 phase 5: expanding an album shows its tracks.
 *
@@ -110,30 +104,20 @@ test.describe('the album dropdown', () => {
    await app.setViewportSize({ width: 900, height: 600 });
    try {
-      // The container has to be a scroller at all, which is the thing
+      await expect.poll(() => scrollRange(app)).toMatchObject({
-      // the defect behind this spec broke and is a property rather
+        scrollable: true,
-      // than a moment.
+        overflowY: 'auto',
-      await expect
+      });
        .poll(() => scrollRange(app))
        .toMatchObject({ overflowY: 'auto' });
-      // **Scrolling it and reading it back are one round trip** (#151).
+      await app.evaluate(() => {
-      //
+        const sc = document
-      // #133 made the guard ask for the range this needs rather than
+          .querySelector('cover-grid')
-      // for "scrollable at all", which was necessary and is not
+          ?.shadowRoot?.querySelector('.grid-scroll-container');
-      // sufficient: a guard and the write it guards are separate
+
-      // `evaluate` calls, so the grid can satisfy the range and settle
+        if (sc) sc.scrollTop = 80;
-      // out of it before the write lands. It still does — observed as
+      });
-      // `Expected 80, Received 10` in the second of three consecutive
+
-      // full-suite runs, with the spec green alone on the same app
+      expect(await scrollTop(app)).toBe(80);
      // straight afterwards.
      //
      // Polling harder cannot close a window between two moments; only
      // removing the window can. So the probe sets `scrollTop` and
      // returns what it reads back, in one page-side call, and the
      // poll retries *that* — which also means the assertion is about
      // what the grid did rather than about what it was ready to do.
      await expect.poll(() => scrollTo(app, SCROLL_TARGET)).toBe(SCROLL_TARGET);
      // And the dropdown it opens is on screen, wherever the manager
      // decides that leaves the scroll. It is *not* "the position is
@@ -264,45 +248,27 @@ async function closeDropdown(app: Page): Promise<void> {
  });
 }
-/** Whether the grid is a scroller at all, which is what the bug broke. */
+/** Whether the grid can scroll at all, which decides if a probe can move. */
 async function scrollRange(app: Page) {
-  return app.evaluate((target) => {
+  return app.evaluate(() => {
    const sc = document
      .querySelector('cover-grid')
      ?.shadowRoot?.querySelector('.grid-scroll-container');
    return {
-      // Reported for the failure message rather than waited on: `room`
+      scrollable: !!sc && sc.scrollHeight > sc.clientHeight + 40,
      // was the guard #133 strengthened, and #151 is that a guard in
      // its own round trip cannot speak for the write in the next one.
      // `scrollTo` below is the assertion now; this says *why* it did
      // not reach the target when it does not.
      room: !!sc && sc.scrollHeight - sc.clientHeight >= target,
      overflowY: sc ? getComputedStyle(sc).overflowY : '',
    };
-  }, SCROLL_TARGET);
+  });
 }
-/**
+async function scrollTop(app: Page): Promise<number> {
- * Scroll the grid and report where it actually landed, in one call.
+  return app.evaluate(
- *
+    () =>
- * The whole point is that the set and the read share a moment: a
+      document
- * `scrollTop` write is clamped to the range *at the instant it lands*,
+        .querySelector('cover-grid')
- * so reading it back in a second round trip asks a container that may
+        ?.shadowRoot?.querySelector('.grid-scroll-container')?.scrollTop ?? -1,
- * have re-laid out in between.
+  );
 */
 async function scrollTo(app: Page, target: number): Promise<number> {
  return app.evaluate((to) => {
    const sc = document
      .querySelector('cover-grid')
      ?.shadowRoot?.querySelector('.grid-scroll-container');
    if (!sc) return -1;
    sc.scrollTop = to;
    return sc.scrollTop;
  }, target);
 }
 /** Whether the open dropdown is inside the scroll container's viewport. */
@@ -15,49 +15,12 @@ import { test, expect } from '../support/fixtures.js';
 *
 * What it cannot answer is whether Android's *gesture* reaches the
 * WebView, which is between the OS and the scaffold.
 *
 * **And `data-active-view` is not the behaviour.** Every assertion here
 * used to be that attribute, which the shell sets on every path
 * including `_isBack` — so this file was green throughout #72, in
 * which both navs highlighted the view the user had just *left*. The
 * shell's own bookkeeping was the one thing that was already right;
 * what a person sees is `aria-current`, and that is asserted below as
 * well. This is the same trap `layout-overflow.spec.ts` set for #69: a
 * spec named for the behaviour, measuring the plumbing.
 */
 type Page = import('@playwright/test').Page;
 const activeView = (page: Page) =>
  page.getByTestId('main-content');
 /** A common phone, where the bottom bar is the primary navigation. */
 const PHONE = { width: 390, height: 844 };
 /**
 * The nav item for a destination, in whichever navigation is on screen.
 *
 * Both navs carry a button named `Albums`, and only one of them is ever
 * in the accessibility tree — the other is `display: none` — so the
 * role query resolves to the one the user can see at this viewport.
 * That is the point: the highlight has to be right in both, and #72 was
 * two different-looking symptoms of one cause.
 */
 const navItem = (page: Page, label: string) =>
  page.getByRole('button', { name: label, exact: true });
 /**
 * `aria-current="page"` is the accessible fact and the assertion worth
 * making; `.active` is a class and could be restyled without breaking
 * anything real.
 */
 async function expectHighlighted(page: Page, label: string): Promise<void> {
  await expect(navItem(page, label)).toHaveAttribute('aria-current', 'page');
 }
 async function expectNotHighlighted(page: Page, label: string): Promise<void> {
  await expect(navItem(page, label)).toHaveAttribute('aria-current', 'false');
 }
 /**
 * Open an artist's detail view, which is the deepest ordinary route.
 *
@@ -79,114 +42,6 @@ async function openAnArtist(app: Page): Promise<void> {
  );
 }
 /**
 * The global back/forward control (#6).
 *
 * It is desktop chrome — hidden below 900px, where the sidebar has
 * already given up its labels — so these set a desktop viewport
 * explicitly rather than trusting the runner's default.
 */
 const DESKTOP = { width: 1280, height: 800 };
 const backButton = (page: Page) =>
  page.locator('nav-history').getByRole('button', { name: 'Back' });
 const forwardButton = (page: Page) =>
  page.locator('nav-history').getByRole('button', { name: 'Forward' });
 test.describe('global back and forward', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(DESKTOP);
  });
  test('offers nothing at launch, in either direction', async ({ app }) => {
    // The launch entry is *replaced*, not pushed, so there is nothing
    // of ours behind it — and a Back button that is live at the root
    // is a press that does nothing on desktop and, on Android, the
    // press that should have exited the app (#142). This assertion is
    // what pins that: it failed before the launch navigation stopped
    // recording two entries.
    await expect(backButton(app)).toBeDisabled();
    await expect(forwardButton(app)).toBeDisabled();
  });
  test('walks the history in both directions, and says which are available', async ({
    app,
  }) => {
    await app.getByTestId('nav-albums').click();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
    await expect(backButton(app)).toBeEnabled();
    await expect(forwardButton(app)).toBeDisabled();
    await app.getByTestId('nav-tracks').click();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'tracks');
    await backButton(app).click();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
    // Standing in the middle of the list: both directions live, which
    // is the state a single depth counter cannot express.
    await expect(backButton(app)).toBeEnabled();
    await expect(forwardButton(app)).toBeEnabled();
    await forwardButton(app).click();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'tracks');
    await expect(forwardButton(app)).toBeDisabled();
  });
  test('reaches the detail view a tab click left behind', async ({ app }) => {
    // The report, exactly: the album is one entry away the whole time,
    // and before this control the only way back to it was a button
    // that had gone off screen with the view it belonged to.
    await app.getByTestId('nav-artists').click();
    await openAnArtist(app);
    await app.getByTestId('nav-tracks').click();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'tracks');
    await backButton(app).click();
    await expect(activeView(app)).toHaveAttribute(
      'data-active-view',
      'explore-artist-details',
    );
  });
  test('drops the forward list when the user navigates from the middle', async ({
    app,
  }) => {
    await app.getByTestId('nav-albums').click();
    await app.getByTestId('nav-tracks').click();
    await backButton(app).click();
    await expect(forwardButton(app)).toBeEnabled();
    // A browser truncates here, and so does this: what was ahead is no
    // longer reachable, and a Forward button still offering it would
    // be pointing at an entry that has been overwritten.
    await app.getByTestId('nav-genres').click();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'genres');
    await expect(forwardButton(app)).toBeDisabled();
    await expect(backButton(app)).toBeEnabled();
  });
  test('is absent below the desktop band, where nothing needs it', async ({
    app,
  }) => {
    // Alt+Left/Right survive at every width, the detail views keep
    // their own back buttons and the phone has the platform's gesture
    // — so this is a control standing down, not an action becoming
    // unreachable. It is hidden at 899 because the top bar is what
    // runs out of room first below 900 (#143).
    await app.setViewportSize({ width: 899, height: 600 });
    await expect(app.locator('nav-history')).toBeHidden();
    await app.setViewportSize({ width: 390, height: 844 });
    await expect(app.locator('nav-history')).toBeHidden();
  });
 });
 test.describe('the back gesture', () => {
  test('leaves a detail view for the view it was opened from', async ({
    app,
@@ -216,105 +71,6 @@ test.describe('the back gesture', () => {
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
  });
  test('leaves the nav highlighting the view it landed on, not the one it left', async ({
    app,
  }) => {
    await app.getByTestId('nav-albums').click();
    await expectHighlighted(app, 'Albums');
    await app.getByTestId('nav-tracks').click();
    await expectHighlighted(app, 'Tracks');
    await app.goBack();
    // #72, and the half of it the report did not describe: this is
    // desktop, and before the shell published the active view *both*
    // navs stayed on Tracks. An absent highlight reads as a glitch; a
    // confident wrong one is worse, and any back across two primary
    // views produced it.
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
    await expectHighlighted(app, 'Albums');
    await expectNotHighlighted(app, 'Tracks');
  });
  test('keeps the parent destination lit while a detail view is open', async ({
    app,
  }) => {
    await app.getByTestId('nav-artists').click();
    await expectHighlighted(app, 'Artists');
    await openAnArtist(app);
    // A detail view is not a destination in either nav, and the user is
    // still inside Artists. `app-sidebar` did this by accident -- it
    // guarded on its own item list, so an unmatched name left the
    // highlight alone -- and that accident is why the sidebar looked
    // right on a detail view while the tab bar lit nothing. This test
    // therefore passed before the fix and is here to keep the rule from
    // being lost while the others are made to pass; the *tab bar's*
    // half of it is the phone test below, which did not.
    await expectHighlighted(app, 'Artists');
    await app.goBack();
    await expectHighlighted(app, 'Artists');
  });
  test('the tab bar survives the same journey on a phone', async ({ app }) => {
    await app.setViewportSize(PHONE);
    // The reported shape: Albums, open an album, press back. The tab
    // bar had a highlight, then no highlight at all, and never got it
    // back — `bottom-nav` took the detail view's name, matched it
    // against no tab, and lit nothing.
    await navItem(app, 'Albums').click();
    await expectHighlighted(app, 'Albums');
    await app.locator('cover-grid').getByText('Glass Harbour').first().click();
    await expect(activeView(app)).toHaveAttribute(
      'data-active-view',
      'explore-album-details',
    );
    await expectHighlighted(app, 'Albums');
    await app.goBack();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
    await expectHighlighted(app, 'Albums');
  });
  test('the drawer sidebar opens on the page you are standing on', async ({
    app,
  }) => {
    await app.setViewportSize(PHONE);
    await navItem(app, 'Tracks').click();
    await expectHighlighted(app, 'Tracks');
    // A third symptom of the same cause, found while measuring #72 and
    // not in the report: `bottom-nav` mounts its `<app-sidebar>` when
    // the drawer opens, so that copy had heard no `navigate` at all and
    // showed its own default — Home, from any page in the app. An event
    // has no answer for a listener that was not there; a store does.
    await navItem(app, 'More').click();
    // The element carrying the testid is the `wa-drawer` host, which
    // always reports hidden -- what is visible is the `<dialog>` in its
    // shadow root -- so the drawer being open is asserted of the
    // sidebar it holds rather than of itself.
    const drawer = app.getByTestId('nav-drawer');
    await expect(drawer.locator('app-sidebar')).toBeVisible();
    await expect(drawer.getByTestId('nav-tracks')).toHaveAttribute(
      'aria-current',
      'page',
    );
    await expect(drawer.getByTestId('nav-home')).toHaveAttribute(
      'aria-current',
      'false',
    );
  });
  test('an in-app back button consumes exactly one entry', async ({ app }) => {
    await app.getByTestId('nav-tracks').click();
    await openAnArtist(app);
@@ -1,147 +0,0 @@
 import { test, expect, callBinding, NO_QUEUE_SOURCE } from '../support/fixtures.js';
 import type { Page } from '@playwright/test';
 /**
 * The bottom bar's two promises (#23, #42): the transport is centred in
 * the window, and the volume is a slider rather than a popup.
 *
 * **"Centred" is measured against the window, not against the space
 * left over**, which is the whole of #23. The bar was
 * `320px 1fr auto`, so the transport sat in the middle of what the
 * metadata and the queue button did not use — its centre was ~140px
 * right of the window's at every size, which reads as an alignment
 * mistake rather than as a layout choice.
 *
 * The mechanism is that the outer two columns are the same width, so
 * this asserts the *outcome* (centre lines up) rather than the CSS. A
 * spec that checked `grid-template-columns` would pass on any build
 * that kept the declaration and broke the result.
 */
 /** Where the transport sits, against where the window's centre is. */
 const geometry = (app: Page) =>
  app.evaluate(() => {
    const bar = document.querySelector<HTMLElement>('.bottom-bar')!;
    const player = document.querySelector<HTMLElement>('audio-player')!;
    const b = bar.getBoundingClientRect();
    const p = player.getBoundingClientRect();
    const seek = player.shadowRoot
      ?.querySelector('seek-bar')
      ?.shadowRoot?.querySelector('wa-slider');
    return {
      offset: Math.round(p.left + p.width / 2 - (b.left + b.width / 2)),
      barHeight: Math.round(b.height),
      seekWidth: seek ? Math.round(seek.getBoundingClientRect().width) : -1,
    };
  });
 /** Something has to be playing before the transport draws a seek bar. */
 async function play(app: Page): Promise<void> {
  const paths = await app.evaluate(async () => {
    const tracks = (await window.__yjEvents.call(
      'library.Library.GetTracks',
      [0],
      10_000,
    )) as { FilePath: string }[];
    return tracks.slice(0, 3).map((t) => t.FilePath);
  });
  await callBinding(app, 'queue.Queue.SetQueue', [
    paths,
    0,
    false,
    NO_QUEUE_SOURCE,
  ]);
  await callBinding(app, 'queue.Queue.Play');
  await expect(app.getByTestId('now-playing-title')).not.toBeEmpty();
 }
 test.describe('the bottom bar', () => {
  test.afterEach(async ({ app }) => {
    await callBinding(app, 'queue.Queue.Clear').catch(() => {
      /* already empty */
    });
    await app.setViewportSize({ width: 1440, height: 900 });
  });
  /**
   * Four widths, because a centring bug is a function of width: the old
   * layout was off by half the difference between the two outer
   * columns, so it was wrong by a different amount at each one and
   * exactly right at none.
   */
  for (const width of [800, 900, 1100, 1440]) {
    test(`centres the transport in the window at ${width}px`, async ({
      app,
    }) => {
      await app.setViewportSize({ width, height: 700 });
      await play(app);
      await expect.poll(() => geometry(app).then((g) => g.offset)).toBe(0);
    });
  }
  /**
   * The seek bar is what the centring is *paid for* with, so it is
   * asserted rather than assumed.
   *
   * Reserving the metadata's full width on both sides centres the
   * transport perfectly and squeezes the control you drag: measured
   * during this work at **61px of track at 800px**, against 257 before
   * the change. The side columns are capped at a quarter of the bar for
   * that reason, and this is the number that says so — 246 at 800px,
   * which is parity with the uncentred layout.
   */
  test('does not pay for the centring with the seek bar', async ({ app }) => {
    await app.setViewportSize({ width: 800, height: 700 });
    await play(app);
    await expect
      .poll(() => geometry(app).then((g) => g.seekWidth))
      .toBeGreaterThan(200);
  });
  /**
   * #42: the slider is simply there. Three gestures — click open, drag,
   * click closed — is what a bottom bar has room not to ask for.
   */
  test('shows the volume slider without a click', async ({ app }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
    const volume = app.locator('.bottom-bar volume-control');
    await expect(volume).toBeVisible();
    await expect(volume.locator('wa-slider')).toBeVisible();
  });
  /**
   * And the inline icon is the mute toggle, because with the slider
   * beside it there is nothing left to disclose. The name follows the
   * action rather than the state for the same reason.
   */
  test('names the inline icon after what it does', async ({ app }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
    await expect(
      app.locator('.bottom-bar volume-control').getByRole('button', {
        name: 'Mute',
      }),
    ).toBeVisible();
  });
  /**
   * The bar is a fixed 4em row and the transport sits in it. A slider
   * with a label grows `#slider` by 8px unless `wa-slider-label.css`
   * suppresses it, which moved the whole bar the last time — so the
   * height is pinned here rather than left to a screenshot.
   */
  test('stays 4em tall', async ({ app }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
    await play(app);
    await expect.poll(() => geometry(app).then((g) => g.barHeight)).toBe(64);
  });
 });
@@ -29,13 +29,18 @@ test.describe('a control says what it controls', () => {
  });
  test('the volume slider is announced as Volume', async ({ app }) => {
-    // No disclosure to open first, and no state to put back afterwards:
+    // The popup renders no slider at all while closed, the same way the
-    // #42 made the slider inline, so it is simply there. The assertion
+    // queue panel renders no list — so this has to open it first.
-    // is unchanged — the *name* is the subject here, and the route to
+    await app.getByRole('button', { name: /volume/i }).click();
-    // the control got shorter rather than different.
+
    await expect(
      app.getByRole('slider', { name: 'Volume' }),
    ).toBeVisible();
    // Leave the transport as it was found: the specs share one page in
    // file order, and an open popup covers the buttons beneath it.
    await app.keyboard.press('Escape');
    await app.locator('body').click({ position: { x: 5, y: 5 } });
  });
  test('naming the slider did not move the transport', async ({ app }) => {
@@ -36,16 +36,9 @@ test.describe('a failed binding says so', () => {
    // Libraries is the one section that starts expanded (H-22), so ask
    // the disclosure what state it is in rather than assuming one — a
    // blind click used to expand it and now collapses it.
    //
    // By role and name, not by `.header`: since #27 the section also
    // contains a `job-panel`, and an open `job-details-drawer` inside
    // it carries the same class. That only bites once a job exists,
    // which is why it showed up on the *second* engine of a CI run and
    // not the first.
    const disclosure = page
      .locator('config-section[heading="Libraries"]')
-      .getByRole('button', { name: 'Libraries' })
+      .locator('.header');
      .first();
    if ((await disclosure.getAttribute('aria-expanded')) === 'false') {
      await disclosure.click();
@@ -1,318 +0,0 @@
 import { test, expect } from '../support/fixtures.js';
 /**
 * #69: the Playlists header's buttons could not be reached.
 *
 * Three text buttons — Import (91px), New Playlist (122px), New Smart
 * Playlist (162px), 390px in total — inside a header that gets 700px at
 * 900×600. "New Smart Playlist" rendered **114 of its 162px**, and at
 * phone width the Android report was the plain version of it: you
 * cannot scroll to reach them, and scrolling is not how page controls
 * should be exposed anyway.
 *
 * **`layout-overflow.spec.ts` passes on the broken build**, which is why
 * this file exists rather than a case being added there. That spec
 * asserts the *shell* needs no sideways scrolling; clipping *inside* a
 * component is invisible to it. So the measurement here is per-button
 * and per-header, against the widths the app promises.
 *
 * Plan 018's size matrix is the promise being kept: **no action is ever
 * unreachable at any supported size.** These are its three bands.
 */
 const VIEWPORTS = [
  // Desktop's worst case, and not the enforced minimum: the sidebar
  // collapses to icons *below* 900, so the content area is 843px at 899
  // and 700px at 900. Testing "the minimum" and stopping misses it.
  { name: '900×600 (widest sidebar, narrowest content)', width: 900, height: 600 },
  { name: '800×600 (the enforced minimum)', width: 800, height: 600 },
  { name: '390×780 (phone)', width: 390, height: 780 },
  // WCAG 1.4.10's reflow target, which plan 018 promises the app fits.
  { name: '320×600 (400% zoom)', width: 320, height: 600 },
 ];
 /** Every action the Playlists header can offer, in declared order. */
 const ACTIONS = ['Import', 'New Playlist', 'New Smart Playlist'];
 /**
 * What the header is actually rendering, measured rather than inferred.
 *
 * A shadow query is the wrong tool for *asserting* — that is what
 * `getByRole` below is for — but it is the right one for a measurement,
 * because the number this issue is about (a button 48px wider than the
 * box holding it) is not in the accessibility tree at all.
 */
 const headerFit = (page: import('@playwright/test').Page) =>
  page.evaluate(() => {
    const root = document
      .querySelector('[data-testid="main-content"] playlist-view')
      ?.shadowRoot?.querySelector('page-header')?.shadowRoot;
    if (!root) return null;
    const header = root.querySelector<HTMLElement>('.page-header')!;
    const box = header.getBoundingClientRect();
    const title = root.querySelector<HTMLElement>('h1')!;
    const clipped = [
      ...root.querySelectorAll<HTMLElement>('.action, .more-button'),
    ]
      .filter((b) => !b.hidden)
      .filter((b) => {
        const r = b.getBoundingClientRect();
        return r.right > box.right + 1 || r.left < box.left - 1;
      })
      .map((b) => b.dataset['actionId'] ?? 'more');
    return {
      overflow: header.scrollWidth - header.clientWidth,
      clipped,
      titleTruncated: title.scrollWidth > title.clientWidth + 1,
      buttons: [...root.querySelectorAll<HTMLElement>('.action')]
        .filter((b) => !b.hidden)
        .map((b) => b.textContent?.trim() ?? ''),
      menu: [
        ...root.querySelectorAll('#page-header-overflow wa-dropdown-item'),
      ].map((i) => i.textContent?.trim() ?? ''),
    };
  });
 test.describe('the page header never clips an action', () => {
  test.beforeEach(async ({ app }) => {
    await app.getByTestId('nav-playlists').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'playlists',
    );
  });
  test.afterEach(async ({ app }) => {
    await app.setViewportSize({ width: 1280, height: 800 });
  });
  for (const vp of VIEWPORTS) {
    test(`every action is reachable at ${vp.name}`, async ({ app }) => {
      await app.setViewportSize({ width: vp.width, height: vp.height });
      // Polled: the fit is decided by a ResizeObserver, so it settles a
      // frame after the resize rather than with it.
      await expect
        .poll(async () => (await headerFit(app))?.clipped)
        .toEqual([]);
      const fit = (await headerFit(app))!;
      expect(fit.overflow).toBeLessThanOrEqual(0);
      // Between them, buttons and menu account for all three. This is
      // the assertion the issue asks for: not "it fits" but "nothing
      // was dropped to make it fit".
      expect([...fit.buttons, ...fit.menu].sort()).toEqual([...ACTIONS].sort());
    });
  }
  /**
   * The title gives way before an action does.
   *
   * Once the heading can ellipsis it absorbs the pressure, and
   * `scrollWidth` then reports a header that fits perfectly while the
   * heading reads "Playlis…" — this issue's own failure mode moved from
   * the button to the title, and invisible to exactly the measurement
   * that missed it the first time. At the desktop sizes there is always
   * an action to collapse instead.
   */
  test('does not truncate the heading to keep a button', async ({ app }) => {
    for (const vp of VIEWPORTS.slice(0, 2)) {
      await app.setViewportSize({ width: vp.width, height: vp.height });
      await expect
        .poll(async () => (await headerFit(app))?.titleTruncated)
        .toBe(false);
    }
  });
  /**
   * Asserted through the accessibility tree, never a shadow query. An
   * overflow menu is exactly the shape that grows a nameless control,
   * and this repo has shipped one four times — most recently the
   * queue's own close button.
   */
  test('the overflow is a named control that opens a named menu', async ({
    app,
  }) => {
    await app.setViewportSize({ width: 900, height: 600 });
    const more = app.getByRole('button', { name: 'More actions' });
    await expect(more).toBeVisible();
    await expect(more).toHaveAttribute('aria-expanded', 'false');
    await more.click();
    await expect(more).toHaveAttribute('aria-expanded', 'true');
    const menu = app.getByRole('menu', { name: 'More actions' });
    await expect(menu).toBeVisible();
    // Collapsed at 900×600: Import (lowest priority) and New Smart
    // Playlist. New Playlist stays a button because it is the drop
    // target, and a closed menu cannot be one.
    await expect(
      menu.getByRole('menuitem', { name: 'Import' }),
    ).toBeVisible();
    await expect(
      app.getByRole('button', { name: 'New Playlist', exact: true }),
    ).toBeVisible();
  });
  /**
   * The phone case is the original report. Every action is in the menu
   * at 390px, and the menu is reachable by name — which is the whole of
   * "these need to be reachable in a sensible way".
   */
  test('offers every action from the menu on a phone', async ({ app }) => {
    await app.setViewportSize({ width: 390, height: 780 });
    const more = app.getByRole('button', { name: 'More actions' });
    await expect(more).toBeVisible();
    await more.click();
    const menu = app.getByRole('menu', { name: 'More actions' });
    for (const label of ACTIONS) {
      await expect(menu.getByRole('menuitem', { name: label })).toBeVisible();
    }
  });
  /**
   * Escape closes it and focus goes back to the trigger — `MenuKeyboard`
   * is shared with every other menu in the app precisely so this is not
   * a second keyboard model, and this is what proves it was wired up
   * rather than merely imported.
   */
  test('takes the keyboard, and gives it back', async ({ app }) => {
    await app.setViewportSize({ width: 900, height: 600 });
    const more = app.getByRole('button', { name: 'More actions' });
    await more.click();
    const menu = app.getByRole('menu', { name: 'More actions' });
    await expect(menu).toBeVisible();
    // The first item takes focus on open. `wa-dropdown-item` sets its
    // own role in its own first update, so this is polled rather than
    // read: a query at the host's updateComplete finds nothing, which
    // reads exactly like a menu that refused to take focus.
    await expect
      .poll(async () =>
        app.evaluate(() => {
          // Stops where `MenuKeyboard`'s own `deepActiveElement` stops:
          // on the *host* whose shadow root has no active element.
          // Descending unconditionally lands inside the focused
          // `wa-dropdown-item`'s own shadow root, where nothing is
          // focused — which reads exactly like a menu that refused the
          // keyboard, on a build where it did not.
          let el = document.activeElement;
          while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement;
          return el?.textContent?.trim() ?? null;
        }),
      )
      .toBe('Import');
    await app.keyboard.press('Escape');
    await expect(more).toHaveAttribute('aria-expanded', 'false');
    await expect(more).toBeFocused();
  });
  /**
   * New Playlist is a drop target, and declaring it as data must not
   * take that away — which is why a `PageAction` carries the drop
   * handlers rather than the header owning a notion of dropping.
   *
   * Nothing covered this before, in either tier, and it is the one
   * behaviour the migration could plausibly have destroyed silently:
   * dragging still *looks* fine against a button that no longer
   * accepts anything.
   */
  test('New Playlist still accepts a dropped track', async ({ app }) => {
    await app.setViewportSize({ width: 1280, height: 800 });
    const button = app.getByRole('button', {
      name: 'New Playlist',
      exact: true,
    });
    await expect(button).toBeVisible();
    const result = await app.evaluate(async () => {
      const view = document.querySelector(
        '[data-testid="main-content"] playlist-view',
      )!;
      const target = view.shadowRoot!
        .querySelector('page-header')!
        .shadowRoot!.querySelector('[data-testid="page-action-new-playlist"]')!;
      const data = new DataTransfer();
      data.setData(
        'application/x-yj-tracks',
        JSON.stringify({ filePaths: ['/tmp/dropped.mp3'] }),
      );
      const fire = (type: string) =>
        target.dispatchEvent(
          new DragEvent(type, {
            bubbles: true,
            cancelable: true,
            dataTransfer: data,
          }),
        );
      fire('dragover');
      await new Promise((r) => setTimeout(r, 50));
      // The affordance is the host's state reaching the header's
      // button, which is the half a plain handler call would not prove.
      const highlighted = target.classList.contains('drag-over');
      fire('drop');
      await new Promise((r) => setTimeout(r, 200));
      return {
        highlighted,
        opened: view.shadowRoot!.querySelector('.create-form') !== null,
      };
    });
    expect(result).toEqual({ highlighted: true, opened: true });
    // Leave the view as it was found.
    await app.keyboard.press('Escape');
  });
  /**
   * An action given back when the window widens again. The collapsed
   * set is a function of the current width and not of how it got there
   * — a rule that only ever *added* to it would never widen.
   */
  test('gives the buttons back when the window grows', async ({ app }) => {
    await app.setViewportSize({ width: 390, height: 780 });
    await expect.poll(async () => (await headerFit(app))?.buttons).toEqual([]);
    await app.setViewportSize({ width: 1440, height: 900 });
    await expect
      .poll(async () => (await headerFit(app))?.buttons)
      .toEqual(ACTIONS);
    await expect.poll(async () => (await headerFit(app))?.menu).toEqual([]);
  });
 });
@@ -1,124 +0,0 @@
 import { test, expect, waitForEvent } from '../support/fixtures.js';
 /**
 * The Jobs tab folded into the places the work is started (#27).
 *
 * The assertion worth making is not that the tab is gone — that is one
 * line of a table — but that **nothing became unreachable when it
 * went**. Scanning is the case that mattered: the per-library controls
 * lived only on that page, and the tab's own comment says they had been
 * moved there out of Settings in the first place.
 *
 * `#24` wrote down one sentence covering all three size bands: *no
 * action is ever unreachable at any supported size*. Deleting a
 * destination is exactly the change that can quietly break it.
 */
 type Page = import('@playwright/test').Page;
 const section = (page: Page, heading: string) =>
  page.locator(`config-page config-section[heading="${heading}"]`);
 async function openSettings(page: Page, heading: string): Promise<void> {
  await page.getByTestId('nav-settings').click();
  // The section's own disclosure, by role rather than by `.header`:
  // an open Libraries section also contains `job-details-drawer`,
  // whose own header matches that class and makes it ambiguous.
  const header = section(page, heading)
    .getByRole('button', { name: heading })
    .first();
  await expect(header).toBeVisible();
  if ((await header.getAttribute('aria-expanded')) === 'false') {
    await header.click();
  }
  await expect(header).toHaveAttribute('aria-expanded', 'true');
 }
 test.describe('background jobs live where the work is started', () => {
  test('the Jobs destination is gone', async ({ app }) => {
    await expect(app.getByTestId('nav-jobs')).toHaveCount(0);
    // And it is not offered as a launch page either, which is the copy
    // of the destination list that is easiest to forget.
    await openSettings(app, 'General');
    const options = await section(app, 'General')
      .locator('select')
      .first()
      .locator('option')
      .allTextContents();
    expect(options).not.toContain('Jobs');
  });
  /**
   * Scanning is startable from Settings → Libraries, and the job that
   * results is visible there with its controls. One assertion covers
   * both halves, because a Scan All that started nothing would leave
   * the panel empty and read exactly like a panel that does not work.
   */
  test('a scan is started and watched in Settings', async ({ app }) => {
    await openSettings(app, 'Libraries');
    const libraries = section(app, 'Libraries');
    await libraries.getByRole('button', { name: 'Scan All' }).click();
    await waitForEvent(app, 'LibraryScanComplete', { timeoutMs: 60_000 });
    const panel = libraries.locator('job-panel');
    await expect(panel.locator('job-row')).toHaveCount(1, { timeout: 10_000 });
    // The generic affordances are the point of the panel: the tier
    // list and the progress rings the other surfaces already had
    // cannot open a log.
    await expect(
      panel.getByRole('button', { name: /^Details/ }),
    ).toBeVisible();
  });
  /** A finished job dismisses from where it is shown. */
  test('a finished scan can be dismissed in place', async ({ app }) => {
    await openSettings(app, 'Libraries');
    const panel = section(app, 'Libraries').locator('job-panel');
    const dismiss = panel.getByRole('button', { name: /^Dismiss/ }).first();
    await expect(dismiss).toBeVisible({ timeout: 10_000 });
    await dismiss.click();
    await expect(panel.locator('job-row')).toHaveCount(0);
  });
  /**
   * Full rescan is destructive and asks first. It is asserted at the
   * dialog rather than through it — running one against the seeded app
   * would delete the library the rest of the suite reads.
   */
  test('Full Rescan asks before it does anything', async ({ app }) => {
    await openSettings(app, 'Libraries');
    await section(app, 'Libraries')
      .getByRole('button', { name: 'Full Rescan' })
      .click();
    const dialog = app.getByRole('dialog', { name: 'Full rescan' });
    await expect(dialog).toBeVisible();
    // The message is read off the *host*, not the dialog: a wa-dialog
    // keeps its slotted content in the host's shadow root, so
    // `toContainText` on the dialog itself sees only Web Awesome's
    // chrome.
    await expect(app.locator('confirm-dialog')).toContainText(
      'deletes all library data',
    );
    await app.getByRole('button', { name: 'Cancel' }).click();
    await expect(dialog).toBeHidden();
  });
 });
@@ -1,204 +0,0 @@
 import { test, expect } from '../support/fixtures.js';
 /**
 * #62. On a phone, background work is shown in the notification band
 * and the header indicator stands down.
 *
 * The report was that the indicator's popover "is obscured by other UI,
 * so it cannot be read while jobs run". Worth saying plainly: **that
 * symptom did not reproduce in this tier.** Measured at the device's
 * own 424x439 viewport, the popover was neither clipped nor covered —
 * `elementFromPoint` at its centre returned the indicator at every
 * width tried. So this is not a fix for a stacking bug, and a spec
 * asserting one would be a spec asserting something that was never
 * true here.
 *
 * What is true regardless, and is what these assert:
 *
 * - a popover is a **disclosure**, and it is anchored to a bar 3.25em
 *   tall on a screen 439px tall. Background work is the one thing a
 *   phone should not make you open something to see.
 * - #57 deletes that bar and is *blocked on this issue*, because the
 *   indicator needs somewhere else to live first. Somewhere else is
 *   the band, and the test that matters for #57 is that the bar no
 *   longer holds the indicator at all.
 *
 * This is the media-query tier by necessity: a query inside a shadow
 * root is answered by the viewport, and `notification-host` decides
 * whether the panel *exists* from `matchMedia`. The component tier
 * cannot set either.
 */
 type Page = import('@playwright/test').Page;
 const JOBS = [
  {
    id: 'phone:scan',
    kind: 'library-scan',
    state: 'running',
    title: 'Scanning Music',
    current: 40,
    total: 100,
    caps: { pausable: true, cancellable: true },
  },
  {
    id: 'phone:idx',
    kind: 'index-build',
    state: 'running',
    title: 'Building the search index',
    current: 2,
    total: 9,
    caps: { pausable: true, cancellable: true },
  },
 ];
 /** The panel the band renders. Playwright's CSS engine pierces open
 *  shadow roots, which is what keeps this one line. */
 const bandPanel = (page: Page) => page.locator('job-band').locator('job-panel');
 const PHONE = { width: 424, height: 439 };
 const DESKTOP = { width: 1100, height: 800 };
 test.describe('background jobs on a phone', () => {
  test('are shown in the band, without opening anything', async ({
    app,
    testctl,
  }) => {
    await app.setViewportSize(PHONE);
    await testctl.emit('JobsChanged', JOBS);
    await expect(bandPanel(app)).toBeVisible();
    // Both jobs, drawn by real `job-row`s -- asking the rows what they
    // hold rather than reading the panel's text, which would pass
    // whether or not a row rendered. Playwright's CSS engine pierces
    // open shadow roots, which is what makes this one line;
    // `querySelectorAll` does not, and stops at `job-panel`.
    await expect(bandPanel(app).locator('job-row')).toHaveCount(2);
    await expect(
      bandPanel(app).locator('job-row').first(),
    ).toContainText('Scanning Music');
  });
  /**
   * The #57 assertion. Not "the indicator is invisible" — that could be
   * true because the bar overflowed — but that the shell's own rule
   * puts it away at this width.
   */
  test('leave the top bar, which is what #57 is waiting for', async ({
    app,
    testctl,
  }) => {
    await app.setViewportSize(PHONE);
    await testctl.emit('JobsChanged', JOBS);
    await expect(bandPanel(app)).toBeVisible();
    await expect(app.locator('job-indicator')).toBeHidden();
  });
  /**
   * The property the first attempt at this got wrong, so it is the one
   * worth pinning: the band is **in the layout**, not over it.
   *
   * A fixed band reads fine in a screenshot and is unusable -- at
   * 424x439 a compact panel is ~200px of a 439px screen and it covers
   * what is under it. Four specs failed on that version, two
   * phone-shell journeys and the header's action menu, because the
   * panel was intercepting the taps. So: nothing of the app is
   * underneath it, and the main panel starts below it.
   */
  test('push the content down rather than covering it', async ({
    app,
    testctl,
  }) => {
    await app.setViewportSize(PHONE);
    const before = await app
      .getByTestId('main-content')
      .evaluate((el) => el.getBoundingClientRect().top);
    await testctl.emit('JobsChanged', JOBS);
    await expect(bandPanel(app)).toBeVisible();
    const after = await app.evaluate(() => {
      const band = document.querySelector('job-band') as HTMLElement;
      const main = document.querySelector(
        '[data-testid="main-content"]',
      ) as HTMLElement;
      const b = band.getBoundingClientRect();
      const m = main.getBoundingClientRect();
      // What the browser reports at the band's own centre. If this is
      // anything but the band, the band is sitting on top of it.
      const hit = document.elementFromPoint(
        Math.round(b.x + b.width / 2),
        Math.round(b.y + b.height / 2),
      );
      return {
        mainTop: m.top,
        bandBottom: b.bottom,
        withinViewport: b.bottom <= window.innerHeight + 0.5,
        hit: hit?.tagName.toLowerCase() ?? null,
      };
    });
    expect({
      pushed: after.mainTop > before,
      mainClearsBand: after.mainTop >= after.bandBottom - 0.5,
      withinViewport: after.withinViewport,
      hit: after.hit,
    }).toEqual({
      pushed: true,
      mainClearsBand: true,
      withinViewport: true,
      hit: 'job-band',
    });
  });
  /**
   * A running job repaints several times a second. The stack it sits
   * beside is `role="status" aria-live="polite"`, and a progress bar
   * inside a live region is a screen reader reading a number out over
   * and over — so the two are siblings in the band rather than one
   * list, and this is what says so.
   */
  test('are not inside the live region they sit beside', async ({
    app,
    testctl,
  }) => {
    await app.setViewportSize(PHONE);
    await testctl.emit('JobsChanged', JOBS);
    await expect(bandPanel(app)).toBeVisible();
    const insideLiveRegion = await app.evaluate(() => {
      const band = document.querySelector('job-band');
      // Neither the band itself nor anything it is nested in may be a
      // live region -- `closest` answers both at once.
      return !!band?.closest('[aria-live]') || band?.hasAttribute('aria-live');
    });
    expect(insideLiveRegion).toBe(false);
  });
  /**
   * `bottom-nav` rendering its duplicate `<app-sidebar>` unconditionally
   * broke 30 specs with "resolved to 2 elements" on a viewport where it
   * was not even visible. Settings already holds four `job-panel`s, so
   * a fifth that answers for *every* kind is the same trap — which is
   * why the band decides from `matchMedia` whether the element exists
   * rather than hiding it with CSS.
   */
  test('do not leave a second panel behind on a desktop', async ({
    app,
    testctl,
  }) => {
    await app.setViewportSize(DESKTOP);
    await testctl.emit('JobsChanged', JOBS);
    await expect(app.locator('job-indicator')).toBeVisible();
    await expect(bandPanel(app)).toHaveCount(0);
  });
 });
@@ -26,21 +26,7 @@ const MIN_VIEWPORT = { width: 800, height: 600 };
 const VIEWPORTS = [
  { name: '1440×900', width: 1440, height: 900 },
  { name: '1024×768', width: 1024, height: 768 },
  // Not the minimum, and that is the point (#24). The sidebar collapses
  // to icons *below* 900, so the main panel is 843px at 899 and 700px
  // at 900 — the narrowest content area any desktop width produces is
  // here, not at the enforced floor. A list that stopped at the minimum
  // was missing its own worst case.
  { name: '900×600 (the widest sidebar, so the narrowest content)', width: 900, height: 600 },
  { name: `the minimum (${MIN_VIEWPORT.width}×${MIN_VIEWPORT.height})`, ...MIN_VIEWPORT },
  // Below the enforced minimum on purpose, and for the reason 700×480
  // is below it further down: a scaled display or a large system font
  // lands the layout here without the window ever being dragged there,
  // and 600 is the last width before the phone layout takes over. The
  // *narrowest header* is a different question from the narrowest
  // content area and has a different answer — this one (#143), where
  // the bar was 611px inside 600 sitting still.
  { name: '600×600 (the bottom of the Compact band)', width: 600, height: 600 },
 ];
 /**
@@ -101,10 +87,9 @@ test.describe('the app fits in its own window', () => {
      )
      .toBe(true);
-    // Settings is the one that was unreachable: it is last in the nav,
+    // Settings and Jobs are the two that were unreachable: they are
-    // and the pane used to clip rather than scroll. (Jobs was the other
+    // last in the nav, and the pane used to clip rather than scroll.
-    // half of this until #27 folded it into Settings.)
+    for (const view of ['jobs', 'settings'] as const) {
    for (const view of ['explore', 'settings'] as const) {
      const item = app.getByTestId(`nav-${view}`);
      await item.scrollIntoViewIfNeeded();
@@ -132,45 +117,27 @@ test.describe('the app fits in its own window', () => {
    // be dragged here, but a scaled display or a large system font can
    // still land the layout in it, and clipping the nav with no scroll
    // is the failure that made Settings unreachable.
-    //
+    const reachable = await app.locator('app-sidebar').evaluate((el) => {
-    // The scroll and the measurement share one `evaluate` — #151's
+      const settings = el.shadowRoot?.querySelector<HTMLElement>(
-    // rule, which this already had — and the whole probe is polled,
+        '[data-testid="nav-settings"]',
-    // which it did not: a viewport change settles asynchronously, so a
+      );
    // single attempt reads whatever the sidebar happened to be doing.
    // The probe is safe to repeat because scrolling to the bottom twice
    // is scrolling to the bottom.
    await expect
      .poll(() =>
        app.locator('app-sidebar').evaluate((el) => {
          const settings = el.shadowRoot?.querySelector<HTMLElement>(
            '[data-testid="nav-settings"]',
          );
-          if (!settings) return null;
+      if (!settings) return null;
-          el.scrollTop = el.scrollHeight;
+      el.scrollTop = el.scrollHeight;
-          const item = settings.getBoundingClientRect();
+      const item = settings.getBoundingClientRect();
-          const pane = el.getBoundingClientRect();
+      const pane = el.getBoundingClientRect();
-          return (
+      return item.bottom <= Math.ceil(pane.bottom) && item.top >= Math.floor(pane.top);
-            item.bottom <= Math.ceil(pane.bottom) &&
+    });
-            item.top >= Math.floor(pane.top)
+
-          );
+    expect(reachable).toBe(true);
        }),
      )
      .toBe(true);
  });
 });
 test.describe('the title block fits its bar', () => {
  test('the hgroup stays inside the 4em top bar', async ({ app }) => {
    // Stated rather than inherited from whatever ran last. Since #143
    // the wordmark is visually hidden at widths where the bar cannot
    // afford it, so a test about its *vertical* fit has to say which
    // width it is asking about.
    await app.setViewportSize({ width: 1440, height: 900 });
    // The state a11y.29 landed in. The pair is flex-centred and a UA
    // gives an `h1` a 0.67em top margin, so the block measured 67px
    // inside 64 — pre-existing, and invisible until dropping the h3's
@@ -272,26 +239,16 @@ test.describe('the shell reflows rather than hiding what does not fit', () => {
    test(`no scrollbar appears at ${vp.name}`, async ({ app }) => {
      await app.setViewportSize({ width: vp.width, height: vp.height });
-      // Polled, for the reason the track-row test above is: since #143
+      const excess = await app.evaluate(() => {
-      // the top bar's fit is *measured* — a ResizeObserver decides what
+        const de = document.documentElement;
      // it can afford at this width — so a single read taken straight
      // after the resize races the observer and reports the frame
      // before it. Read once, this passed alone and failed in the full
      // suite, which is the shape of a timing assumption rather than of
      // a defect.
      //
      // The other half of the assertion: at every size this app
      // promises, the fix costs nothing. A scrollbar that is always
      // there is a worse answer than the clipping it replaced.
      await expect
        .poll(() =>
          app.evaluate(() => {
            const de = document.documentElement;
-            return de.scrollWidth - de.clientWidth;
+        return de.scrollWidth - de.clientWidth;
-          }),
+      });
-        )
+
-        .toBe(0);
+      // The other half: at every size this app promises, the fix costs
      // nothing. A scrollbar that is always there is a worse answer
      // than the clipping it replaced.
      expect(excess).toBe(0);
    });
  }
 });
@@ -0,0 +1,127 @@
 import { test, expect } from '../support/fixtures.js';
 /**
 * Long-press is the touch route to a context menu (plan 016 B2 phase 3).
 *
 * The component tier proves the gesture in isolation, against markup it
 * built itself. What it cannot prove is the half that made this one
 * listener instead of six: that the synthetic event reaches the handler
 * a *real* component bound — `track-list` delegates its `contextmenu`
 * on the `lit-virtualizer` rather than binding one per row — and that
 * the real `wa-popup` menu opens from it, which is a path with its own
 * history of opening and then refusing to work (see
 * `menu-keyboard.spec.ts`).
 *
 * The pointer events are dispatched rather than performed: this project
 * runs Desktop Chrome and Desktop Safari, neither of which has touch,
 * and a device tier does not exist. So this is honest about what it
 * checks — the app's own listeners, on the app's own DOM, from the
 * events a touch would produce — and not about a real finger.
 */
 /** A common small phone, as in `phone-shell.spec.ts`. */
 const PHONE = { width: 390, height: 844 };
 /** Comfortably past the module's 500ms hold. */
 const HELD = 900;
 type Page = import('@playwright/test').Page;
 /** The track list's menu panel, or null while it is not rendered. */
 const panel = (page: Page) =>
  page.evaluate(() => {
    const el = document
      .querySelector('track-list')
      ?.shadowRoot?.querySelector('.context-menu-panel');
    if (!el) return null;
    return {
      role: el.getAttribute('role'),
      label: el.getAttribute('aria-label'),
      items: el.querySelectorAll('[role="menuitem"]').length,
    };
  });
 /**
 * Press the first track row, optionally dragging partway through — the
 * shape of a scroll that begins on a row, which must not open a menu.
 */
 async function pressFirstRow(
  page: Page,
  opts: { driftY?: number } = {},
 ): Promise<void> {
  await page.evaluate((drift) => {
    // `.track-row`, not `[role="row"]`: the column header is a row too,
    // and it is the *first* one -- a press on it is correctly ignored,
    // which reads exactly like the gesture not working.
    const row = document
      .querySelector('track-list')
      ?.shadowRoot?.querySelector('.track-row');
    if (!row) throw new Error('no track row to press');
    const box = row.getBoundingClientRect();
    const x = Math.round(box.left + box.width / 2);
    const y = Math.round(box.top + box.height / 2);
    const send = (type: string, dy = 0) =>
      row.dispatchEvent(
        new PointerEvent(type, {
          bubbles: true,
          composed: true,
          cancelable: true,
          pointerType: 'touch',
          isPrimary: true,
          clientX: x,
          clientY: y + dy,
        }),
      );
    send('pointerdown');
    if (drift) send('pointermove', drift);
  }, opts.driftY ?? 0);
 }
 test.describe('long-press opens the track menu', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(PHONE);
    await app.getByTestId('tab-tracks').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'tracks',
    );
  });
  test.afterEach(async ({ app }) => {
    // Every other spec file runs against a desktop, and the viewport
    // belongs to the shared context rather than to this file.
    await app.setViewportSize({ width: 1440, height: 900 });
  });
  test('reaches the delegated handler and opens the real menu', async ({
    app,
  }) => {
    await expect.poll(() => panel(app)).toBeNull();
    await pressFirstRow(app);
    await expect
      .poll(() => panel(app), { timeout: HELD + 2000 })
      .toMatchObject({ role: 'menu', label: 'Track actions' });
    // The same panel Shift+F10 opens, items and all -- not an empty
    // popup that happened to become visible.
    expect((await panel(app))?.items).toBeGreaterThan(0);
  });
  test('does not open one for a press that turns into a scroll', async ({
    app,
  }) => {
    await pressFirstRow(app, { driftY: 40 });
    await app.waitForTimeout(HELD);
    expect(await panel(app)).toBeNull();
  });
 });
@@ -28,7 +28,7 @@ const EXPECTED_MIN_ICONS = 5;
 const VIEWS = [
  'home', 'tracks', 'albums', 'artists', 'genres', 'playlists',
-  'explore', 'downloads', 'autotag', 'settings',
+  'explore', 'downloads', 'jobs', 'settings',
 ];
 type IconState = { name: string; hasSvg: boolean };
@@ -1,4 +1,4 @@
-import { test, expect, navigateTo } from '../support/fixtures.js';
+import { test, expect } from '../support/fixtures.js';
 /**
 * H-19: Playlists, Downloads, Jobs, Settings and Home had a page
@@ -21,6 +21,7 @@ const VIEWS: [string, string, boolean][] = [
  ['tracks', 'Tracks', true],
  ['explore', 'Explore', false],
  ['downloads', 'Downloads', false],
  ['jobs', 'Background jobs', false],
 ];
 /** The header lives in the view's shadow root, inside its own. */
@@ -52,16 +53,13 @@ const TAGS: Record<string, string> = {
  tracks: 'track-list',
  explore: 'explore-view',
  downloads: 'downloads-view',
  jobs: 'jobs-view',
 };
 test.describe('every primary view says what it is', () => {
  test('each one has the shared header, with a heading', async ({ app }) => {
    // By event rather than by nav item: a destination is not
    // guaranteed to have one any more (#25 — Downloads is absent
    // without a download client), and every one of these is still a
    // primary view with a header, which is what this spec is about.
    for (const [view, heading, hasCount] of VIEWS) {
-      await navigateTo(app, view);
+      await app.getByTestId(`nav-${view}`).click();
      await expect(app.getByTestId('main-content')).toHaveAttribute(
        'data-active-view',
        view,
@@ -1,209 +0,0 @@
 import { test, expect } from '../support/fixtures.js';
 import type { Page } from '@playwright/test';
 /**
 * The album page on a phone (#66).
 *
 * Two faults, and neither was visible to `layout-overflow.spec.ts`:
 * that spec asserts the *shell* needs no sideways scrolling, and the
 * shell was correct throughout — `body.scrollWidth === clientWidth`
 * while `explore-album-details` itself measured 443 inside a 424px box
 * and clipped two of the album's three primary actions with its own
 * `overflow: hidden`. So the measurement here is **per control against
 * the component's box**, which is the same shape `top-bar-fit.spec.ts`
 * needed for the same reason.
 *
 * The other half is the scroll: the page was a fixed header over a
 * scrolling tracklist, so at the reference device's 424x439 the header
 * owned 253 of the panel's 318px and the list scrolled in the 64 that
 * were left. It is one scroll container below 600px, which is a
 * property of the *host* rather than of `.content`.
 *
 * The engine is the caveat this tier cannot close: the reference device
 * renders in Chrome 113 and this is Chromium/WebKit. A flex direction
 * and a scroll container are nowhere near that engine's documented gaps
 * (relaxed nesting, the Popover API, `light-dark()`), but "it renders
 * at that size in Chromium" is not evidence about the phone.
 */
 /** The phone this was measured on, in CSS pixels. */
 const DEVICE = { width: 424, height: 439 };
 const details = (page: Page) => page.locator('explore-album-details');
 /** The page's own boxes, read from inside its shadow root. */
 const geometry = (page: Page) =>
  page.evaluate(() => {
    const host = document.querySelector('explore-album-details');
    const sr = host?.shadowRoot;
    if (!host || !sr) return null;
    const box = (sel: string) => {
      const el = sr.querySelector(sel);
      if (!el) return null;
      const r = el.getBoundingClientRect();
      return { width: Math.round(r.width), right: Math.round(r.right) };
    };
    const content = sr.querySelector('.content');
    return {
      hostWidth: host.clientWidth,
      hostScrollWidth: host.scrollWidth,
      // The host is the scroller below 600px, so the page is taller
      // than its box rather than the tracklist being a window inside it.
      hostScrolls: host.scrollHeight > host.clientHeight,
      contentScrolls: content
        ? content.scrollHeight > content.clientHeight
        : null,
      header: box('.album-header'),
      play: box('[data-testid="album-play"]'),
      shuffle: box('[data-testid="album-shuffle"]'),
      queue: box('[data-testid="album-queue"]'),
      title: (() => {
        const el = sr.querySelector('.album-title-text');
        return el ? el.scrollWidth <= el.clientWidth + 1 : null;
      })(),
    };
  });
 test.describe('the album page on a phone', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(DEVICE);
    await openFirstAlbum(app);
  });
  test.afterEach(async ({ app }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
    await app.getByTestId('nav-tracks').click();
  });
  test('keeps every action inside its own box', async ({ app }) => {
    const geo = await geometry(app);
    expect(geo).not.toBeNull();
    // "Shuffle album" ended at x=443 in a 424px component and could not
    // be reached by any gesture; "Add to queue" at 440.
    for (const action of ['play', 'shuffle', 'queue'] as const) {
      expect(
        geo?.[action],
        `${action} is rendered`,
      ).not.toBeNull();
      expect(
        geo?.[action]?.right ?? 0,
        `${action} ends inside the page`,
      ).toBeLessThanOrEqual(geo?.hostWidth ?? 0);
    }
    expect(geo?.hostScrollWidth).toBe(geo?.hostWidth);
    expect(geo?.header?.width).toBe(geo?.hostWidth);
  });
  test('gives the title the row rather than one glyph of it', async ({
    app,
  }) => {
    // `.album-info` was squeezed to 112px beside the art, so an album
    // called *Glass Harbour* drew as `G…`. It carries `min-width: 0`
    // and was shrinking as asked — the row had to stack.
    expect(await geometry(app).then((g) => g?.title)).toBe(true);
  });
  test('scrolls as one page, with the header scrolling away', async ({
    app,
  }) => {
    const before = await geometry(app);
    expect(before?.hostScrolls).toBe(true);
    expect(before?.contentScrolls).toBe(false);
    const headerTop = () =>
      app.evaluate(
        () =>
          document
            .querySelector('explore-album-details')
            ?.shadowRoot?.querySelector('.album-header')
            ?.getBoundingClientRect().top ?? 0,
      );
    expect(await headerTop()).toBeGreaterThanOrEqual(0);
    // A wheel gesture, not `scrollTop`: `overflow: hidden` still permits
    // programmatic scrolling, so a probe that assigns it passes on the
    // build this exists to fail.
    await details(app).hover();
    await app.mouse.wheel(0, 250);
    await expect.poll(headerTop).toBeLessThan(-100);
  });
  test('is the desktop arrangement again above the breakpoint', async ({
    app,
  }) => {
    await app.setViewportSize({ width: 1024, height: 800 });
    // The same element, re-laid-out: one component with two
    // arrangements, not a phone-only copy.
    await expect
      .poll(async () => (await geometry(app))?.hostScrolls)
      .toBe(false);
    const arrangement = await app.evaluate(() => {
      const sr = document.querySelector('explore-album-details')?.shadowRoot;
      const header = sr?.querySelector('.album-header');
      const content = sr?.querySelector('.content');
      return {
        direction: header ? getComputedStyle(header).flexDirection : null,
        contentOverflow: content ? getComputedStyle(content).overflowY : null,
      };
    });
    expect(arrangement.direction).toBe('row');
    expect(arrangement.contentOverflow).toBe('auto');
  });
 });
 /** Albums → the second card, which navigates to the album page. */
 async function openFirstAlbum(app: Page): Promise<void> {
  // Below 600px the sidebar is gone; the tab bar is the navigation.
  await app.getByTestId('tab-albums').click();
  await expect(app.getByTestId('main-content')).toHaveAttribute(
    'data-active-view',
    'albums',
  );
  await expect.poll(() => cardCount(app)).toBeGreaterThan(1);
  // Dispatched rather than clicked: the card lives in a virtualizer
  // inside a shadow root, and Enter expands the dropdown instead.
  await app.evaluate(() => {
    document
      .querySelector('cover-grid')
      ?.shadowRoot?.querySelectorAll('.album-card')[1]
      ?.dispatchEvent(
        new MouseEvent('click', { bubbles: true, composed: true }),
      );
  });
  await expect(app.getByTestId('main-content')).toHaveAttribute(
    'data-active-view',
    'explore-album-details',
  );
  await expect(
    details(app).locator('[data-testid="album-play"]'),
  ).toBeVisible();
 }
 async function cardCount(app: Page): Promise<number> {
  return app.evaluate(
    () =>
      document
        .querySelector('cover-grid')
        ?.shadowRoot?.querySelectorAll('.album-card').length ?? 0,
  );
 }
@@ -1,283 +0,0 @@
 import { test, expect } from '../support/fixtures.js';
 /**
 * Now Playing on a short screen (#51).
 *
 * #51 asks for a layout that "survives" ~424x439 with the controls
 * never scrolling off. #172 measured why it did not — the stacked
 * layout's budget is fixed, so the art gets whatever is left, and that
 * was 39px before #64 and 53px after it.
 *
 * **Two separate claims are asserted here, and only one of them is
 * about the phone.**
 *
 * The first is that the art is *square*. It was not: `aspect-ratio` is
 * specified not to re-derive the width when `max-height` clamps the
 * height, so the art was drawn as a letterbox band and `object-fit:
 * cover` cropped the cover to it — 264x53 on the reference device. The
 * leftover only exceeds the width above ~843px of viewport, so this
 * was every height from ~500 to ~843 as well: most phones, and any
 * short window. That is ordinary CSS rather than a Chrome 113 quirk,
 * so this tier can see it, and the heights below are chosen to cover
 * the range rather than the one device.
 *
 * The second is the reflow: below 500px the art and the names sit side
 * by side, which is what takes the art from 53px to 143px. That is
 * asserted as a *relation between boxes* — the art beside the names,
 * not above them — because the pixel count is a consequence of the
 * arrangement and would pin this file to one device's chrome.
 *
 * **What this tier cannot see** is the device's engine: CI's Chromium
 * and WebKit are current, and #60's clipping showed what that costs.
 * Nothing here depends on Chrome 113 behaviour — the sizing rules were
 * checked against the device itself, at column heights of 288, 300,
 * 451, 600 and 800, and the numbers are on #51.
 */
 type Page = import('@playwright/test').Page;
 /** The reference device's real viewport. */
 const DEVICE = { width: 424, height: 439 };
 /**
 * A tall phone, above the reflow's 500px. Roughly a Pixel 7, which is
 * #51's other named device and was not attached — so what is checked
 * here is the layout it *should* get, not that device.
 */
 const TALL_PHONE = { width: 412, height: 869 };
 /** Inside the crop's old range and above the reflow: a short window. */
 const SHORT_WINDOW = { width: 390, height: 700 };
 /**
 * The height the layout reflows at. Written down once here because the
 * specs have to know which arrangement to *wait* for, not only which
 * to assert.
 */
 const REFLOW_AT = 500;
 /** Put a track in the player, so the view has art and names to lay out. */
 async function stageATrack(page: Page): Promise<void> {
  await page.evaluate(async () => {
    const tracks = (await window.__yjEvents.call(
      'library.Library.GetTracks',
      [0],
      10_000,
    )) as { FilePath: string }[];
    await window.__yjEvents.call(
      'queue.Queue.SetQueue',
      [tracks.slice(0, 4).map((t) => t.FilePath), 0, false, { type: '', id: 0, label: '' }],
      10_000,
    );
  });
 }
 /** Open the full-screen view and wait for the shell to say so. */
 async function openNowPlaying(page: Page): Promise<void> {
  await page.evaluate(() => {
    document.dispatchEvent(
      new CustomEvent('navigate', {
        detail: { view: 'now-playing' },
        bubbles: true,
      }),
    );
  });
  await expect(page.getByTestId('main-content')).toHaveAttribute(
    'data-active-view',
    'now-playing',
  );
  // The attribute is the shell's bookkeeping and lands before the view
  // has a track, so measuring on it alone races the first layout --
  // which showed up as a 60x5 art on the first spec of a cold run.
  //
  // Waiting for a non-zero box is not enough on its own either: a
  // previous test leaves the *other* arrangement on screen, and a
  // stale column satisfies "has a size" perfectly. So the wait is for
  // the arrangement this viewport should have, which is the thing
  // every assertion below depends on. Found by this file passing one
  // test at a time and failing in file order.
  const wantRow = (page.viewportSize()?.height ?? 0) <= REFLOW_AT;
  await page.waitForFunction(
    (row: boolean) => {
      const v = document.querySelector('now-playing-view');
      const stack = v?.shadowRoot?.querySelector('.stack');
      const el = v?.shadowRoot?.querySelector('.art img, .art .placeholder');
      const t = v?.shadowRoot?.querySelector('.transport');
      if (!el || !t) return false;
      // A build with no `.stack` at all is the one before this change,
      // and the squareness assertions are still meaningful against it
      // -- so this waits for the arrangement only where there is one to
      // wait for. Otherwise reverting the component to check that these
      // tests bite produces eight timeouts instead of the measurements
      // that make the case.
      if (stack) {
        const dir = getComputedStyle(stack).flexDirection;
        if (dir !== (row ? 'row' : 'column')) return false;
      }
      const r = el.getBoundingClientRect();
      return r.width > 0 && r.height > 0 && t.getBoundingClientRect().height > 0;
    },
    wantRow,
  );
 }
 /**
 * The boxes this file reasons about, read in one evaluate.
 *
 * It reaches into the view's shadow root rather than using locators
 * because the question is geometric — where these boxes are *relative
 * to each other* — and a testid per edge would be four locators and
 * four round trips to say one thing.
 */
 async function boxes(page: Page) {
  return page.evaluate(() => {
    const v = document.querySelector('now-playing-view');
    if (!v || !v.shadowRoot) return null;
    const rect = (sel: string) => {
      const el = v.shadowRoot!.querySelector(sel);
      if (!el) return null;
      const r = el.getBoundingClientRect();
      return {
        left: r.left, right: r.right, top: r.top, bottom: r.bottom,
        width: r.width, height: r.height,
      };
    };
    return {
      // Whichever of the two the track has; both carry the sizing.
      art: rect('.art img') ?? rect('.art .placeholder'),
      artBox: rect('.art'),
      stack: rect('.stack'),
      meta: rect('.meta'),
      transport: rect('.transport'),
      scrollHeight: v.scrollHeight,
      clientHeight: v.clientHeight,
    };
  });
 }
 test.describe('Now Playing survives a short screen', () => {
  test.beforeEach(async ({ app }) => {
    await stageATrack(app);
  });
  /**
   * The crop, at four heights spanning the range it covered. This is
   * the assertion that fails on the build before this change: at
   * 424x439 the art measured 264x53.
   */
  for (const vp of [DEVICE, SHORT_WINDOW, TALL_PHONE, { width: 900, height: 500 }]) {
    test(`draws the art square at ${vp.width}x${vp.height}`, async ({ app }) => {
      await app.setViewportSize(vp);
      await openNowPlaying(app);
      const b = await boxes(app);
      expect(b, 'now-playing-view did not mount').not.toBeNull();
      expect(b!.art, 'neither art nor placeholder rendered').not.toBeNull();
      const { width, height } = b!.art!;
      expect(width, 'the art has no width').toBeGreaterThan(0);
      // One pixel of slack for sub-pixel layout, and no more: the
      // defect this guards was a 5:1 band.
      expect(
        Math.abs(width - height),
        `art is ${Math.round(width)}x${Math.round(height)}, not square`,
      ).toBeLessThanOrEqual(1);
    });
  }
  /**
   * The promise #51 states and plan 018's matrix repeats. A floor on
   * the art with the block scrolling was the other option on #172 and
   * this is why it was not taken.
   */
  test('never scrolls the transport off the bottom', async ({ app }) => {
    await app.setViewportSize(DEVICE);
    await openNowPlaying(app);
    const b = await boxes(app);
    expect(b!.transport!.bottom).toBeLessThanOrEqual(DEVICE.height);
    expect(
      b!.scrollHeight,
      'the view scrolls, so the transport can be moved off screen',
    ).toBeLessThanOrEqual(b!.clientHeight + 1);
  });
  /**
   * The reflow itself, as a relation rather than a measurement: below
   * 500px the names are *beside* the art, above it they are below.
   */
  test('puts the names beside the art below 500px', async ({ app }) => {
    await app.setViewportSize(DEVICE);
    await openNowPlaying(app);
    const b = await boxes(app);
    expect(
      b!.meta!.left,
      'the names are not to the right of the art',
    ).toBeGreaterThanOrEqual(b!.artBox!.right - 1);
  });
  test('keeps the names below the art on a tall phone', async ({ app }) => {
    await app.setViewportSize(TALL_PHONE);
    await openNowPlaying(app);
    const b = await boxes(app);
    expect(
      b!.meta!.top,
      'the names are not below the art',
    ).toBeGreaterThanOrEqual(b!.artBox!.bottom - 1);
  });
  /**
   * What the reflow actually does, stated as a mechanism rather than
   * as a number: in a row the art is bounded by the row's *height*,
   * so it fills it — where in a column it is the leftover after the
   * names, which is what made it 53px.
   *
   * **The pixel count is deliberately not asserted here.** Two drafts
   * tried. The first compared the art against the column's leftover
   * computed from the boxes on screen and passed on the broken build,
   * because the subtraction goes negative when the names are taller
   * than the art — precisely the defect. The second put a floor of
   * 100px on it, passed locally at 114 and **failed in CI at 64**: this
   * app is long-lived, so a job staged by an earlier spec is still on
   * screen, and the volume control renders here where it does not on
   * Android. Both are chrome above and below this view, and both move
   * the leftover. A test that asserts how much room CI happened to
   * have is a test about the runner.
   *
   * The device numbers — 53px to 143px — are on #51, measured there,
   * which is the only tier that can honestly produce them.
   */
  test('fills the row with the art rather than the leftover', async ({ app }) => {
    await app.setViewportSize(DEVICE);
    await openNowPlaying(app);
    const b = await boxes(app);
    expect(b!.stack, 'there is no row to fill').not.toBeNull();
    expect(
      Math.abs(b!.artBox!.height - b!.stack!.height),
      'the art does not fill the row, so it is still a leftover',
    ).toBeLessThanOrEqual(1);
  });
 });
@@ -1,136 +0,0 @@
 import {
  test,
  expect,
  callBinding,
  resetEvents,
  waitForEvent,
  LONG_TRACK,
  NO_QUEUE_SOURCE,
 } from '../support/fixtures.js';
 import type { Page } from '@playwright/test';
 /**
 * The phone's progress line (#58).
 *
 * The component tier already pins what the line *says* — that it
 * renders the backend's reported position and never a count of its own.
 * What only a real shell can answer is **where it is**: the issue asks
 * for a line on the border between the mini player and the tab bar, and
 * "on the border" is two adjacencies in a grid that no component-level
 * render has around it.
 *
 * It also asserts the line is not there on a desktop, which is the
 * other half of the same fact: above 600px there is no tab bar for it
 * to sit on the border of, and the bar carries a real seek bar.
 */
 type Rect = { x: number; y: number; width: number; height: number };
 /** The reference device's real viewport. */
 const DEVICE = { width: 424, height: 439 };
 const DESKTOP = { width: 1280, height: 800 };
 async function rectOf(app: Page, selector: string): Promise<Rect | null> {
  return app.evaluate((sel) => {
    const el = document.querySelector(sel);
    if (!el) return null;
    const r = el.getBoundingClientRect();
    return { x: r.x, y: r.y, width: r.width, height: r.height };
  }, selector);
 }
 /**
 * Put the 90-second fixture on and wait for the first position report.
 *
 * The long track rather than any track: every other fixture is 2-6
 * seconds, which is shorter than the time this spec takes to measure
 * three rectangles.
 */
 async function play(app: Page): Promise<void> {
  const tracks = await callBinding<{ FilePath: string; TrackName: string }[]>(
    app,
    'library.Library.GetTracks',
    [0],
  );
  // `TrackName`, not `Title`: that is what the library model calls it.
  const long = tracks.find((t) => t.TrackName === LONG_TRACK);
  expect(long, `no fixture track named ${LONG_TRACK}`).toBeTruthy();
  await callBinding(app, 'queue.Queue.Clear');
  await resetEvents(app);
  await callBinding(app, 'queue.Queue.SetQueue', [
    [long!.FilePath],
    0,
    false,
    NO_QUEUE_SOURCE,
  ]);
  await waitForEvent(app, 'QueueChanged');
  await callBinding(app, 'queue.Queue.Play');
  await waitForEvent(app, 'PlaybackPositionChanged', { timeoutMs: 15_000 });
 }
 test.describe('the progress line sits on the border between the bars', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(DEVICE);
    await play(app);
  });
  /*
   * Every test here starts a LONG_TRACK and the suite is workers: 1,
   * fullyParallel: false against one long-lived app — so without this
   * the four phone-* specs that follow alphabetically inherit a playing
   * queue. phone-transport.spec.ts records where that lesson came from:
   * the fault first showed up as a flake in a spec about something else.
   */
  test.afterEach(async ({ app }) => {
    await callBinding(app, 'queue.Queue.Clear').catch(() => {
      /* already empty */
    });
    await app.setViewportSize(DESKTOP);
  });
  test('spans the width, between the mini player and the tab bar', async ({
    app,
  }) => {
    const line = await rectOf(app, 'player-progress-line');
    const bar = await rectOf(app, '.bottom-bar');
    const nav = await rectOf(app, 'bottom-nav');
    expect(line, 'no progress line on the phone').not.toBeNull();
    expect(bar).not.toBeNull();
    expect(nav).not.toBeNull();
    // A border, not a band: 2px, the full width, and touching both.
    expect(line!.height).toBeCloseTo(2, 0);
    expect(line!.width).toBeCloseTo(bar!.width, 0);
    expect(line!.y).toBeCloseTo(bar!.y + bar!.height, 0);
    expect(nav!.y).toBeCloseTo(line!.y + line!.height, 0);
  });
  /**
   * It is 2px on the top edge of the tab bar, which is exactly where a
   * thumb aiming at a tab lands. A line that sometimes seeks is worse
   * than one that never does, so it must take no part in hit testing
   * at all.
   */
  test('takes no taps', async ({ app }) => {
    const line = await rectOf(app, 'player-progress-line');
    const hit = await app.evaluate(
      ({ x, y }) => document.elementFromPoint(x, y)?.tagName ?? '',
      { x: line!.x + line!.width / 2, y: line!.y + 1 },
    );
    expect(hit).not.toBe('PLAYER-PROGRESS-LINE');
  });
  test('is not there on a desktop', async ({ app }) => {
    await app.setViewportSize(DESKTOP);
    await expect(app.locator('player-progress-line')).toBeHidden();
  });
 });
@@ -1,322 +0,0 @@
 import { test, expect } from '../support/fixtures.js';
 /**
 * #57. Below 600px the top bar is not in the layout, and search is a
 * button that opens a modal on the pages where searching means
 * anything.
 *
 * **This is the tier that can answer it, with one honest exception.**
 * The shell's breakpoints are media queries, which the component tier
 * cannot set — so whether the bar is a grid row, and whether a header
 * grows a search button, is a question for a real viewport. What this
 * tier *cannot* answer is the reason the surface is a `wa-dialog`:
 * #60 read out of the Web Awesome source that `wa-popup` falls back to
 * `position: fixed` where there is no Popover API (Chrome 113, the
 * reference device) and that `.main-panel`'s `contain: paint` clips a
 * fixed descendant. Chromium and WebKit here both have the Popover API,
 * so a popup is top-layered and correct, and **an assertion that the
 * modal is not clipped would pass on the broken build.** The mechanism
 * is asserted in `frontend/test/components/search-dialog.test.ts`
 * instead, where "is there a native <dialog>" is a question a browser
 * can answer without lying.
 *
 * **And it is measured per element.** `layout-overflow.spec.ts` asks
 * whether the *shell* needs sideways scrolling and was green throughout
 * the defect it is named for; the win this issue is for is vertical and
 * belongs to one element, so it is that element's box that is read.
 */
 type Page = import('@playwright/test').Page;
 /** The reference device's own viewport, and a common small phone. */
 const DEVICE = { width: 424, height: 439 };
 const PHONE = { width: 390, height: 780 };
 /**
 * Where the top bar is, and how much of the screen it costs.
 *
 * `contentTop` is measured against the *jobs band* rather than against
 * the window, because that band is a real grid row whenever work is in
 * flight (#62) and the app under these specs is long-lived — a job
 * staged by another file is still in the store. Measuring against zero
 * makes this assertion say "and no background job is running", which is
 * not what it is for and is not something it can arrange.
 */
 const barBox = (page: Page) =>
  page.evaluate(() => {
    const bar = document.querySelector<HTMLElement>('header.top-bar')!;
    const main = document.querySelector<HTMLElement>('.main-panel')!;
    const band = document.querySelector<HTMLElement>('job-band');
    const cs = getComputedStyle(bar);
    return {
      position: cs.position,
      height: Math.round(bar.getBoundingClientRect().height),
      /** Where the content starts, and where the row above it ends. */
      contentTop: Math.round(main.getBoundingClientRect().top),
      aboveBottom: Math.round(band?.getBoundingClientRect().bottom ?? 0),
    };
  });
 test.describe('the phone has no top bar', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(DEVICE);
  });
  test.afterEach(async ({ app }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
  });
  /**
   * The vertical win, measured rather than asserted by the absence of
   * an element: `display: none` on the header would satisfy "the bar is
   * hidden" while leaving a 3.25em grid row exactly where it was.
   */
  test('gives the row back to the content', async ({ app }) => {
    const box = await barBox(app);
    // Out of flow, so it takes no row — and 1px rather than 0, because
    // it still carries the document's h1.
    expect(box.position).toBe('absolute');
    expect(box.height).toBeLessThanOrEqual(1);
    // The content starts where the row above it ends, and there is no
    // row above it but the jobs band. On `main` at the time of writing
    // the content started 52px down from that point.
    expect(box.contentTop).toBe(box.aboveBottom);
  });
  /**
   * The wordmark yields its width and not its existence, which is the
   * rule `top-bar-fit.ts` already lives by one band up: with the bar
   * gone, `display: none` would take this document from one top-level
   * heading to none on every page whose own header has no h1 —
   * Settings has no `page-header` at all.
   */
  test('still has a top-level heading', async ({ app }) => {
    await expect(
      app.getByRole('heading', { name: 'YellowJacket', level: 1 }),
    ).toHaveCount(1);
  });
  /**
   * And its four controls are gone from the tab order, not merely from
   * sight. A visually-hidden container is still focusable, and tabbing
   * into a search box nobody can see is worse than not having one.
   */
  test('leaves nothing in the bar to tab into', async ({ app }) => {
    for (const tag of [
      'nav-history',
      'library-filter',
      'search-bar',
      'job-indicator',
    ]) {
      await expect(app.locator(`header.top-bar ${tag}`)).toBeHidden();
    }
    const focusable = await app.evaluate(
      () =>
        document
          .querySelector('header.top-bar')!
          .querySelectorAll('input, select, button, a[href]').length,
    );
    // Nothing in the bar is *rendered*, so nothing in it can be
    // focused; the controls are display:none, which takes their own
    // shadow content with them.
    expect(focusable).toBe(0);
  });
 });
 test.describe('search on a phone', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(PHONE);
  });
  test.afterEach(async ({ app }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
  });
  test('is a button in the view that can be searched', async ({ app }) => {
    await app.getByTestId('tab-tracks').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'tracks',
    );
    // Scoped to the view: every cached primary view holds a
    // `page-header`, and an unscoped testid is `bottom-nav`'s
    // "resolved to 2 elements" trap again.
    const trigger = app.locator('track-list page-header search-trigger button');
    await expect(trigger).toBeVisible();
    await expect(trigger).toHaveAttribute('aria-label', 'Search tracks');
  });
  /**
   * The whole journey, which is the thing the issue asks for: a button,
   * a modal, and the results on the page behind it saying what they are
   * showing.
   */
  test('opens a modal, filters the page, and says so', async ({ app }) => {
    await app.getByTestId('tab-tracks').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'tracks',
    );
    await app.locator('track-list page-header search-trigger button').click();
    const dialog = app.getByTestId('search-dialog');
    // Attached, not visible: `wa-dialog`'s host is `display: contents`,
    // so the element carrying the testid always reports hidden — what
    // is visible is the native `<dialog>` inside it. That awkwardness
    // is written down in CLAUDE.md and is why the assertion that this
    // is really up is the role query below.
    await expect(dialog).toBeAttached();
    // Named, which `getByRole` can answer and the a11y snapshot cannot
    // — the snapshot never prints a dialog's name, named or not. This
    // is also the assertion that the dialog is genuinely showing.
    await expect(
      app.getByRole('dialog', { name: 'Search tracks' }),
    ).toBeVisible();
    // Scoped: the header's own box is still in the document, hidden.
    // This is the one moment there are two `search-input`s.
    await dialog.getByTestId('search-input').fill('aurora');
    // Enter hands the screen back, because the results are the page.
    await app.keyboard.press('Enter');
    await expect(dialog).not.toBeAttached();
    // Polled: the box debounces by 150ms, so reading the page once
    // straight after closing the dialog can capture the state before
    // the term ever reached the store.
    await expect
      .poll(() =>
        app.evaluate(
          () =>
            document
              .querySelector('[data-testid="main-content"] track-list')
              ?.shadowRoot?.querySelector('page-header')
              ?.shadowRoot?.querySelector('[data-testid="page-search-scope"]')
              ?.textContent?.trim() ?? '',
        ),
      )
      .toMatch(/matching.*aurora/);
    // And the button says the search is on, in its name rather than
    // only in its colour.
    await expect(
      app.locator('track-list page-header search-trigger button'),
    ).toHaveAttribute('aria-label', /aurora/);
    // Leave the app as the next spec expects to find it.
    await app.locator('track-list page-header search-trigger button').click();
    await app.getByTestId('search-dialog').getByTestId('search-input').fill('');
    await app.keyboard.press('Escape');
  });
  /**
   * Two of the seven searchable views have no `page-header` — they are
   * detail views that filter on the term and say so in their own
   * headers. A trigger placed only in `page-header` would leave them
   * with a search they can show and no way to set it, which is #24's
   * sentence broken in the band it was written for.
   */
  test('reaches the playlist detail view too', async ({ app }) => {
    await app.getByTestId('tab-playlists').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'playlists',
    );
    // `.playlist-item`, which is what the list renders. Asserted to
    // exist rather than skipped on: the seed has a playlist, and a
    // spec that quietly skips when its selector stops matching is a
    // spec that reports success for a renamed class.
    const first = app.locator('playlist-view .playlist-item').first();
    await expect(first).toBeVisible();
    await first.dblclick();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'playlist-details',
    );
    await expect(
      app.locator('playlist-details search-trigger button'),
    ).toBeVisible();
  });
  /**
   * A button that cannot do anything is worse than none — the rule
   * `library-status-indicator` was rewritten on. Home has nothing of
   * its own to search and is not in the store's map.
   */
  test('offers no button where there is nothing to search', async ({ app }) => {
    await app.getByTestId('tab-home').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'home',
    );
    await expect(
      app.locator('home-view page-header search-trigger button'),
    ).toHaveCount(0);
  });
  test('offers no button on a desktop, where the header has a box', async ({
    app,
  }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
    await app.getByTestId('nav-tracks').click();
    await expect(
      app.locator('track-list page-header search-trigger button'),
    ).toHaveCount(0);
    await expect(app.locator('header.top-bar search-bar')).toBeVisible();
  });
 });
 /**
 * #148, which #57 inherits: `library-filter` is the only control in the
 * app that calls `setSelectedLibrary`, and the bar it lived in is gone
 * on a phone. #143 refused to hide it as a fit step for exactly this
 * reason, so dropping it here would have been the same trade.
 */
 test.describe('the library filter has a home that is not the bar', () => {
  test.afterEach(async ({ app }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
  });
  test('is in Settings, and is reachable from a phone', async ({ app }) => {
    await app.setViewportSize(PHONE);
    await app.getByTestId('tab-more').click();
    await app.getByTestId('nav-drawer').getByTestId('nav-settings').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'settings',
    );
    const filter = app.getByTestId('settings-library-filter');
    await expect(filter).toBeVisible();
    await expect(filter.locator('select')).toBeVisible();
  });
  test('and it is the same control at every width', async ({ app }) => {
    // Not a phone-only copy: "where do I change which library I am
    // browsing" having two answers by viewport is the fault, not the
    // fix.
    await app.setViewportSize({ width: 1440, height: 900 });
    await app.getByTestId('nav-settings').click();
    await expect(app.getByTestId('settings-library-filter')).toBeVisible();
    await expect(app.locator('header.top-bar library-filter')).toBeVisible();
  });
 });
@@ -1,4 +1,4 @@
-import { test, expect, LONG_TRACK } from '../support/fixtures.js';
+import { test, expect } from '../support/fixtures.js';
 /**
 * The phone shell (plan 016 B2, phase 1).
@@ -130,25 +130,6 @@ test.describe('the shell on a phone', () => {
    // are here, and they are the *same* components -- this view
    // composes the transport rather than reimplementing it.
    await expect(app.locator('now-playing-view seek-bar')).toBeVisible();
    // Volume is here **because the player says there is one** (#64),
    // not because this is a phone. This tier is the platform that owns
    // its own volume, so what it can assert is that the control's
    // presence follows that answer -- an inverted polarity in
    // `volume-style-store` fails here and in `bottom-bar.spec.ts`, and
    // the *absent* branch is checked in the component tier, where the
    // binding can be stubbed. Nothing here can reach the Android side.
    const systemOwns = await app.evaluate(
      async () =>
        (await window.__yjEvents.call(
          'player.Player.SystemOwnsVolume',
          [],
          5_000,
        )) as boolean,
    );
    expect(systemOwns, 'this platform should own its own volume').toBe(false);
    await expect(app.locator('now-playing-view volume-control')).toBeVisible();
    // Back goes where the user came from, through the nav stack.
@@ -157,78 +138,6 @@ test.describe('the shell on a phone', () => {
      .toHaveAttribute('data-active-view', 'tracks');
  });
  /**
   * The same journey with a track that has **no cover art** (#150).
   *
   * The test above starts the *first* row of the track list, so which
   * track it plays is the order the scan inserted them in — and the
   * answer decided whether it passed. A track with artwork renders an
   * `<img>`, which is no obstacle; one without renders a placeholder
   * `wa-icon`, which took every click aimed at the button beneath it,
   * because that button is absolutely positioned with `z-index: auto`
   * and the art is a *later* sibling. They tied, and the later one won.
   *
   * So this picks a track *for* the property that broke it, which is
   * the only way the assertion means anything: the version above passes
   * on a broken build roughly two runs in three, which is exactly how
   * it came to cost three CI cycles across two branches that could not
   * have caused it.
   */
  test('opens the full-screen now playing for a track with no art', async ({
    app,
  }) => {
    // `LONG_TRACK` by name, and not "the first track with no
    // CoverArt": the *library* model reports that field empty for
    // every row in this fixture (31 of 31), so filtering on it selects
    // nothing in particular and picked a 2-second track, which had
    // finished before the assertions ran. The placeholder check below
    // is what actually holds the property this test needs.
    const started = await app.evaluate(async (longTitle) => {
      const tracks = (await window.__yjEvents.call(
        'library.Library.GetTracks',
        [0],
        10_000,
      )) as { FilePath: string; TrackName: string }[];
      const bare = tracks.find((t) => t.TrackName === longTitle);
      if (!bare) return null;
      await window.__yjEvents.call(
        'queue.Queue.SetQueue',
        [[bare.FilePath], 0, false, { type: '', id: 0, label: '' }],
        10_000,
      );
      await window.__yjEvents.call('queue.Queue.Play', [], 5_000);
      return bare.TrackName;
    }, LONG_TRACK);
    expect(started).toBe(LONG_TRACK);
    await expect(app.getByTestId('now-playing-title')).not.toBeEmpty();
    // **The placeholder is the whole point**, so it is asserted rather
    // than assumed: this test is about the thing that renders when
    // there is no artwork. If the fixture ever gives this album a
    // cover, this fails and says so instead of passing while measuring
    // the easy case.
    //
    // One selector rather than a chain from the host: Playwright's CSS
    // engine pierces an open shadow root, and chaining from the host
    // element does not reach into it.
    await expect(
      app.locator('now-playing .cover-placeholder'),
    ).toBeAttached();
    await app.getByTestId('open-now-playing').click();
    await expect(app.getByTestId('main-content'))
      .toHaveAttribute('data-active-view', 'now-playing');
    await app.getByTestId('npv-back').click();
  });
  test('offers no way in on a desktop, where the bar is whole', async ({ app }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
@@ -245,26 +154,9 @@ test.describe('the shell on a phone', () => {
    await expect(app.locator('now-playing')).toBeVisible();
    // Volume is the hardware keys' job on a phone, and a 4px seek bar
-    // is not a thumb target -- both belong to the full-screen
+    // is not a thumb target -- both belong to a later phase's
-    // now-playing view.
+    // full-screen now-playing view.
-    //
+    await expect(app.locator('audio-player volume-control')).toBeHidden();
    // `.bottom-bar volume-control`, not `audio-player volume-control`:
    // #42 moved the control out of that component and into the bar, and
    // **the old locator would have kept passing** — `toBeHidden()` is
    // satisfied by an element that does not exist, so this assertion
    // would have gone on reporting success about nothing. Its partner
    // below is what makes this one mean something.
    await expect(app.locator('.bottom-bar volume-control')).toBeHidden();
    // The element is there and hidden, rather than absent: the check
    // above cannot tell those apart on its own.
    await expect(app.locator('.bottom-bar volume-control')).toHaveCount(1);
    // And the seek bar is still inside the transport, where it stands
    // down by its own media query.
    await expect(
      app.locator('audio-player').locator('seek-bar'),
    ).toBeHidden();
  });
 });
@@ -1,315 +0,0 @@
 import { test, expect } from '../support/fixtures.js';
 /**
 * The phone's transport (#59, #56).
 *
 * #56 reports that "the playback controls are the most important thing
 * in the mobile app and they are tiny". Measured at the reference
 * device's 424x439 before this, every one of them was **33x21px**, and
 * the favourite beside them — which #59 keeps on the bar — was
 * **18x14px**, the smallest control in the app.
 *
 * #59 is what makes the sizes affordable: five controls plus a queue
 * button at 44px does not fit 424 CSS px, so the bar carries three and
 * the rest are on the full-screen view.
 *
 * **The assertion that matters is not the pixel count.** Plan 018's
 * matrix promises that *no action is ever unreachable at any supported
 * size*, and #59 removes three controls from the phone's bar — so the
 * first thing this file checks is that all three are still reachable,
 * by walking the route a user would. A spec that only measured the
 * survivors would be green on a build that had made shuffle
 * unreachable, which is the failure mode this pair of issues is one
 * mistake away from.
 */
 type Page = import('@playwright/test').Page;
 /** The reference device's real viewport. */
 const DEVICE = { width: 424, height: 439 };
 const PHONE = { width: 390, height: 780 };
 const DESKTOP = { width: 1280, height: 800 };
 /**
 * The touch-target floor. 44px is what #56's Findings name and what
 * #55's queue header was sized to, so the app has one number.
 */
 const TARGET = 44;
 /** The play button is named for its action, not its identity. */
 const PLAY_PAUSE = /^(Play|Pause)$/;
 const barControls = (page: Page) =>
  page.locator('audio-player player-controls');
 /**
 * `name` may be a regex, and for play/pause it must be: that button is
 * named for the *action*, so it is "Pause" while a track runs and
 * "Play" when it stops. An exact 'Play' made these tests wait out a
 * fixture track (11.1s each, passing by luck) and would have failed
 * outright against `LONG_TRACK`. A test about a control's size does not
 * care what the transport is doing.
 */
 async function sizeOf(
  page: Page,
  name: string | RegExp,
 ): Promise<[number, number]> {
  const box = await page
    .getByRole('button', { name, exact: typeof name === 'string' })
    .boundingBox();
  expect(box, `no button named ${name}`).not.toBeNull();
  return [box!.width, box!.height];
 }
 /** Put something in the queue, so the transport has a track to act on. */
 async function stageATrack(page: Page): Promise<void> {
  await page.evaluate(async () => {
    const tracks = (await window.__yjEvents.call(
      'library.Library.GetTracks',
      [0],
      10_000,
    )) as { FilePath: string }[];
    await window.__yjEvents.call(
      'queue.Queue.SetQueue',
      [tracks.slice(0, 4).map((t) => t.FilePath), 0, false, { type: '', id: 0, label: '' }],
      10_000,
    );
  });
 }
 test.describe('the phone bar carries three controls', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(DEVICE);
    await stageATrack(app);
  });
  test('drops shuffle, repeat and the queue from the bar', async ({ app }) => {
    const bar = barControls(app);
    await expect(bar.getByRole('button', { name: 'Previous track' })).toBeVisible();
    await expect(bar.getByRole('button', { name: 'Next track' })).toBeVisible();
    // Not in the bar's own subtree. Asserted against the bar rather
    // than the page, because the whole point is that they moved rather
    // than went away -- a page-wide `not.toBeVisible()` would fail the
    // moment Now Playing is open and would be asserting the wrong
    // thing besides.
    await expect(bar.getByRole('button', { name: 'Shuffle' })).toHaveCount(0);
    await expect(bar.getByRole('button', { name: /^Repeat/ })).toHaveCount(0);
    await expect(app.locator('#queue-button')).toBeHidden();
  });
  /**
   * The promise, walked. Every control #59 takes off the bar is
   * reachable from the mini player's art in one tap.
   */
  test('leaves every removed control reachable from Now Playing', async ({
    app,
  }) => {
    await app.getByTestId('open-now-playing').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'now-playing',
    );
    await expect(app.getByRole('button', { name: 'Shuffle' })).toBeVisible();
    await expect(app.getByRole('button', { name: /^Repeat/ })).toBeVisible();
    await expect(app.getByRole('button', { name: 'Show the queue' })).toBeVisible();
  });
  test('sizes what is left for a thumb', async ({ app }) => {
    for (const name of ['Previous track', 'Next track']) {
      const [w, h] = await sizeOf(app, name);
      expect(w, `${name} width`).toBeGreaterThanOrEqual(TARGET);
      expect(h, `${name} height`).toBeGreaterThanOrEqual(TARGET);
    }
    // Play is deliberately bigger than its neighbours: a row of
    // identical squares says every action is equally likely, which is
    // not true of play.
    const [pw, ph] = await sizeOf(app, PLAY_PAUSE);
    const [nw] = await sizeOf(app, 'Next track');
    expect(ph).toBeGreaterThanOrEqual(TARGET);
    expect(pw).toBeGreaterThan(nw);
  });
  /**
   * The favourite was 18x14 and is one of the three controls #59
   * keeps, so it is part of this issue rather than a nicety.
   */
  test('sizes the favourite, which was the smallest control in the app', async ({
    app,
  }) => {
    const fav = app
      .locator('now-playing')
      .getByRole('button', { name: /Favorites$/ });
    const box = await fav.boundingBox();
    expect(box).not.toBeNull();
    expect(box!.width).toBeGreaterThanOrEqual(TARGET);
    expect(box!.height).toBeGreaterThanOrEqual(TARGET);
  });
  /**
   * **The route to the queue must not depend on what is playing.**
   *
   * `now-playing` renders two branches, and the no-track one had no
   * `.expand` button on its placeholder — so with nothing loaded there
   * was no way to Now Playing, and once #59 takes the queue button off
   * the bar that makes the *queue* unreachable. The queue is persisted
   * across restarts, so "tracks queued, nothing playing" is a state the
   * app launches into.
   *
   * This is asserted with the queue explicitly emptied rather than by
   * relying on the app not having played anything: `make e2e` runs one
   * long-lived app across every spec file (#168), so "no track loaded"
   * is otherwise whatever the file before this one left behind — which
   * is how the underlying fault first showed up as a flake in a spec
   * about something else.
   */
  test('reaches the queue with nothing playing', async ({ app }) => {
    await app.evaluate(async () => {
      await window.__yjEvents.call('queue.Queue.Clear', [], 10_000);
    });
    await expect(app.getByTestId('open-now-playing')).toBeVisible();
    await app.getByTestId('open-now-playing').click();
    await app.getByTestId('npv-queue').click();
    await expect(app.locator('#queue-panel')).toHaveAttribute('open', '');
  });
  test('still fits, with nothing to scroll sideways to', async ({ app }) => {
    const fit = await app.evaluate(() => ({
      scroll: document.body.scrollWidth,
      client: document.body.clientWidth,
    }));
    expect(fit.scroll).toBe(fit.client);
  });
 });
 test.describe('the full-screen transport is the page', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(DEVICE);
    await stageATrack(app);
    await app.getByTestId('open-now-playing').click();
  });
  test('draws all five, larger than the bar draws any', async ({ app }) => {
    const [pw, ph] = await sizeOf(app, PLAY_PAUSE);
    expect(pw).toBeGreaterThanOrEqual(56);
    expect(ph).toBeGreaterThanOrEqual(56);
    for (const name of ['Shuffle', 'Previous track', 'Next track']) {
      const [w, h] = await sizeOf(app, name);
      expect(w, `${name} width`).toBeGreaterThanOrEqual(TARGET);
      expect(h, `${name} height`).toBeGreaterThanOrEqual(TARGET);
    }
  });
  test('fits at both phone widths', async ({ app }) => {
    for (const size of [DEVICE, PHONE]) {
      await app.setViewportSize(size);
      const fit = await app.evaluate(() => ({
        scroll: document.body.scrollWidth,
        client: document.body.clientWidth,
      }));
      expect(fit.scroll, `${size.width}px`).toBe(fit.client);
    }
  });
 });
 /**
 * **The desktop bar is not what either issue is about, and must not
 * move.** Both are `Platform/Android`; this is the guard that says so
 * in a way a build can check.
 *
 * It caught a real regression while it was being written: a generic
 * `font-size` on the buttons took them from the UA stylesheet's 13.3px
 * to the shell's 16px and grew every one from 33x21 to 36x24 — a
 * change nobody asked for, invisible to every other assertion here.
 */
 test.describe('the desktop bar is untouched', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(DESKTOP);
    await stageATrack(app);
  });
  test('keeps all five controls and the queue button', async ({ app }) => {
    const bar = barControls(app);
    for (const name of ['Shuffle', 'Previous track', 'Next track']) {
      await expect(bar.getByRole('button', { name })).toBeVisible();
    }
    await expect(bar.getByRole('button', { name: /^Repeat/ })).toBeVisible();
    await expect(app.locator('#queue-button')).toBeVisible();
  });
  /**
   * **The mechanism, because the pixels are the engine's.**
   *
   * The first version of this asserted the literal `'33x21'`, measured
   * on `main` in Chromium — and WebKit draws the same button **36x24**,
   * so it failed in CI on a build where nothing was wrong. A button's
   * box comes from the UA stylesheet when the author sets nothing, and
   * what each UA sets is its own business.
   *
   * What this PR must not do is *set* anything here, so that is what is
   * asserted: our two box properties are unset, and the font is still
   * the UA's rather than the shell's. That is precisely the regression
   * this caught the first time — a generic `font-size: inherit` took
   * these from the UA's default to 16px — and it catches it in either
   * engine.
   */
  test('sets no size of its own on the desktop bar', async ({ app }) => {
    const measured = await barControls(app).evaluate((el) => {
      // A bare button with no author styles: whatever this engine
      // gives one is what the bar's buttons must still be.
      const probe = document.createElement('button');
      document.body.appendChild(probe);
      const uaFontSize = getComputedStyle(probe).fontSize;
      probe.remove();
      return [...el.shadowRoot!.querySelectorAll('button')].map((b) => {
        const cs = getComputedStyle(b);
        const r = b.getBoundingClientRect();
        return {
          minWidth: cs.minWidth,
          minHeight: cs.minHeight,
          usesUaFont: cs.fontSize === uaFontSize,
          size: `${Math.round(r.width)}x${Math.round(r.height)}`,
        };
      });
    });
    expect(measured).toHaveLength(5);
    for (const m of measured) {
      expect(m.minWidth, 'min-width').toBe('0px');
      expect(m.minHeight, 'min-height').toBe('0px');
      expect(m.usesUaFont, 'font-size is still the UA default').toBe(true);
    }
    // And all five are the same box: `.play` takes a larger size in
    // both sized contexts, so this is what says the desktop is neither
    // of them.
    expect(new Set(measured.map((m) => m.size)).size).toBe(1);
  });
 });
@@ -1,373 +0,0 @@
 import { test, expect, openTheQueue } from '../support/fixtures.js';
 /**
 * #55 — the queue is a *place* while it covers the content, and a
 * *control* while it sits beside it.
 *
 * #24 already made the pixels right: measured at the reference device's
 * 424×439, the overlaid panel is 424×318, which is `.main-panel`'s rect
 * exactly. What was missing was the navigation model, and the defect was
 * measurable in one line — opening the queue on Artists and pressing
 * back moved the page *underneath* to Albums and left the queue up. A
 * back press that changes something the user cannot see, and costs them
 * their place, is the whole of "it does not flow".
 *
 * **These assert the entry, not the attribute.** The temptation is to
 * check `#queue-button[aria-expanded]` and stop, which is the shell's
 * own bookkeeping and was right throughout the bug: what has to be true
 * is that *one* back press closes the queue and the *next* one
 * navigates. Asserting only the first would pass on a build that
 * orphans the entry, which is the defect moved one press later — the
 * same trap `back-navigation.spec.ts` documents about `data-active-view`
 * and `layout-overflow.spec.ts` set for #69.
 *
 * **Three of these nine fail on the build before #55**, and the other
 * six cannot, which is worth knowing before trusting them: "the entry
 * is not orphaned" and "the column is not in the stack" are both
 * vacuously true of a build that pushes no entry at all, and the
 * containment assertion pins the mount that was *not* taken. They guard
 * the next change rather than reproducing this one — the three that
 * reproduce it are the two back-press tests and the touch target.
 */
 type Page = import('@playwright/test').Page;
 /** The reference device's real viewport, not a resized desktop. */
 const DEVICE = { width: 424, height: 439 };
 /** Wide enough that the queue is a column: 1280 − 200 − 320 ≥ 480. */
 const DESKTOP = { width: 1280, height: 800 };
 /**
 * The Compact band, where the queue is a *screen* (644 − 320 < 480) and
 * the bottom bar still carries its button.
 *
 * Two of these tests need both facts at once and only this band has
 * them: below 600px #59 takes the button off the bar, so there is no
 * toggle to re-press and the queue is opened from Now Playing — which
 * is itself a detail view, so "the destination stays lit" is vacuously
 * true there rather than tested.
 */
 const COMPACT = { width: 700, height: 600 };
 const activeView = (page: Page) => page.getByTestId('main-content');
 const queue = (page: Page) => page.locator('#queue-panel');
 const toggle = (page: Page) => page.locator('#queue-button');
 /**
 * Whether the queue is up.
 *
 * The panel's own attribute rather than the toggle's `aria-expanded`,
 * because below 600px there is no toggle to ask (#59) — and the panel
 * is the one fact both of them reflect anyway.
 */
 async function expectQueue(page: Page, open: boolean): Promise<void> {
  const panel = queue(page);
  if (open) {
    await expect(panel).toHaveAttribute('open', '');
  } else {
    await expect(panel).not.toHaveAttribute('open', '');
  }
 }
 test.describe('the queue is a screen where it covers the content', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(DEVICE);
    await app.getByTestId('tab-albums').click();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
  });
  // On a phone the queue is opened from Now Playing (#59), so the page
  // *underneath* it is `now-playing` and the journey is two entries
  // deep: albums -> now-playing -> queue. That is the real route a user
  // takes, which is why these do not reach for the shortcut.
  test('back closes the queue and leaves the page where it was', async ({
    app,
  }) => {
    await expect(queue(app)).toHaveAttribute('overlay', '');
    await openTheQueue(app);
    await expectQueue(app, true);
    await app.goBack();
    await expectQueue(app, false);
    // The page underneath is untouched. Before #55 this was the
    // *previous* view, because the queue was not in the stack at all
    // and back spent an entry navigating something nobody could see.
    await expect(activeView(app)).toHaveAttribute(
      'data-active-view',
      'now-playing',
    );
  });
  test('costs exactly one entry, so the next press navigates', async ({
    app,
  }) => {
    await openTheQueue(app);
    await expectQueue(app, true);
    await app.goBack();
    await expectQueue(app, false);
    await expect(activeView(app)).toHaveAttribute(
      'data-active-view',
      'now-playing',
    );
    await app.goBack();
    // Exactly one entry each: the second press leaves Now Playing for
    // the page it was opened from, rather than being swallowed by a
    // queue that had already closed.
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
  });
  /**
   * Every route out unwinds the entry, and they do it through the
   * panel's own `open` attribute rather than each knowing about
   * history — which is why a fourth route added later gets this free.
   *
   * The failure this pins is silent: close by button, and if the entry
   * is orphaned the app looks correct until the next back press does
   * nothing at all. It is a guard rather than a reproduction — a build
   * with no entry to orphan passes it — and it is paired with the two
   * above, which do reproduce.
   */
  for (const [name, dismiss] of [
    [
      'the close button',
      async (app: Page) => {
        await app.getByRole('button', { name: 'Close queue' }).click();
      },
    ],
    [
      'Escape',
      async (app: Page) => {
        await app.keyboard.press('Escape');
      },
    ],
  ] as Array<[string, (app: Page) => Promise<void>]>) {
    test(`${name} leaves no entry behind`, async ({ app }) => {
      await openTheQueue(app);
      await expectQueue(app, true);
      await dismiss(app);
      await expectQueue(app, false);
      await app.goBack();
      // One press, one screen: Now Playing is what the queue was opened
      // from, so leaving it lands on Albums. An orphaned entry would
      // have spent this press on nothing and left it here.
      await expect(activeView(app)).toHaveAttribute(
        'data-active-view',
        'albums',
      );
    });
  }
  /**
   * A detail view leaves the destination it was opened from lit
   * (`active-view-store`, #72), and the queue inherits that — it is
   * published with `isPrimary: false`, so `isActive('albums')` is still
   * true underneath it.
   *
   * `aria-current` rather than a class, for the reason
   * `back-navigation.spec.ts` gives: the class was right throughout the
   * bug that rule exists for.
   */
  /**
   * With the panel spanning the whole width there is no scrim here at
   * all (#171), so the close button is the only pointer route out of a
   * full-screen surface. Measured at 424×439 before #55: **25×21px**.
   */
  test('offers a way out a thumb can hit', async ({ app }) => {
    await openTheQueue(app);
    const box = await app
      .getByRole('button', { name: 'Close queue' })
      .boundingBox();
    expect(box).not.toBeNull();
    expect(box!.width).toBeGreaterThanOrEqual(44);
    expect(box!.height).toBeGreaterThanOrEqual(44);
  });
  /**
   * #171 — and it draws no scrim, because there is nowhere to tap.
   *
   * `.panel-content` is `width: 100%` here, so the scrim sat entirely
   * underneath it: measured at 424×439, host, panel and scrim all
   * 424×318. #24's tap-outside-to-close cannot exist on a surface with
   * no outside, and a `cursor: pointer` layer nobody can reach is a
   * claim the component cannot keep.
   *
   * Asserted as absence rather than by clicking, for the reason the
   * issue gives: a naive phone case clicks the scrim's centre and hits
   * the panel, so it passes on the build this exists to fail. The scrim
   * is still real between 600 and 899px, which `queue-overlay.spec.ts`
   * asserts at 900×600 by clicking it.
   */
  test('draws no scrim, because a screen has no outside to tap', async ({
    app,
  }) => {
    await openTheQueue(app);
    const scrim = await queue(app).evaluate(
      (el) => el.shadowRoot!.querySelector('.scrim') !== null,
    );
    expect(scrim).toBe(false);
  });
 });
 /**
 * **The mechanism, because no tier here can see the consequence.**
 *
 * #55's Direction asked for a `DETAIL_LOADERS` mount, which would put
 * the panel inside `.main-panel > *`. That box is paint-contained under
 * a `.main-panel` that is too, and `contain: paint` makes an element a
 * containing block for fixed descendants *and clips them* — which is
 * what a `wa-popup` falls back to on the reference device's Chrome 113,
 * where the Popover API does not exist (#60, `.planning/NOTES.md`).
 * `queue-panel` has a context menu, so that mount would have broken a
 * working menu on the one device this issue is about.
 *
 * CI's Chromium and WebKit both *have* the Popover API, so the menu is
 * top-layered and correct here either way: a spec asserting "the menu is
 * not clipped" is green on the broken build. What a browser can answer
 * honestly is where the element is, so that is what this asks.
 */
 test('the panel stays out of the paint-contained region', async ({ app }) => {
  await app.setViewportSize(DEVICE);
  // Open, because that is the only state in which a menu can be opened
  // from it — and because the host drops `paint` from its own
  // containment deliberately in overlay mode, so a closed panel answers
  // a different question.
  await openTheQueue(app);
  await expectQueue(app, true);
  const ancestry = await app.evaluate(() => {
    const chain: Array<{ tag: string; contain: string }> = [];
    for (
      let el = document.getElementById('queue-panel');
      el && el !== document.documentElement;
      el = el.parentElement
    ) {
      chain.push({
        tag: el.tagName.toLowerCase(),
        contain: getComputedStyle(el).contain,
      });
    }
    return chain;
  });
  expect(ancestry.length).toBeGreaterThan(1);
  expect(ancestry.some((a) => a.tag === 'main')).toBe(false);
  for (const { tag, contain } of ancestry) {
    expect(
      `${tag}: ${contain}`,
      'a paint-contained ancestor clips a fixed-positioned popup on Chrome 113',
    ).not.toMatch(/paint|content|strict/);
  }
 });
 /**
 * Two properties need the queue to be a *screen* and the bar to still
 * have its button, and only the Compact band has both — below 600px #59
 * takes the button off the bar.
 */
 test.describe('a screen opened from the bar', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(COMPACT);
    await app.getByTestId('nav-albums').click();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
    await expect(queue(app)).toHaveAttribute('overlay', '');
  });
  /**
   * A detail view leaves the destination it was opened from lit
   * (`active-view-store`, #72), and the queue inherits that — it is
   * published with `isPrimary: false`, so `isActive('albums')` is still
   * true underneath it.
   *
   * `aria-current` rather than a class, for the reason
   * `back-navigation.spec.ts` gives: the class was right throughout the
   * bug that rule exists for.
   */
  test('leaves the destination it was opened from highlighted', async ({
    app,
  }) => {
    // By testid, not by role: at 700px the sidebar is in icon mode, so
    // what the item is *named* is a different question from which item
    // it is. The assertion is still `aria-current`, which is the
    // accessible fact.
    const albums = app.getByTestId('nav-albums');
    await expect(albums).toHaveAttribute('aria-current', 'page');
    await toggle(app).click();
    await expectQueue(app, true);
    await expect(albums).toHaveAttribute('aria-current', 'page');
  });
  /** The toggle is a fourth way out, and it unwinds the entry like the
   *  other three — through the panel's attribute, not its own handler. */
  test('closes from the same toggle, leaving no entry behind', async ({
    app,
  }) => {
    await toggle(app).click();
    await expectQueue(app, true);
    await toggle(app).click();
    await expectQueue(app, false);
    await app.goBack();
    await expect(activeView(app)).not.toHaveAttribute(
      'data-active-view',
      'albums',
    );
  });
 });
 /**
 * The column is not a place. Somebody docked it; back must not undock
 * it, and navigating to another view must not take it away.
 *
 * This is the half a viewport breakpoint would get wrong: the mode is
 * computed from the panel's own drag-resizable width, so the queue
 * becomes a screen exactly when it stops being affordable as a column.
 */
 test.describe('a docked queue is not in the back stack', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(DESKTOP);
  });
  test('survives a navigation, and back navigates the page', async ({
    app,
  }) => {
    await app.getByTestId('nav-albums').click();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
    await toggle(app).click();
    await expectQueue(app, true);
    await expect(queue(app)).not.toHaveAttribute('overlay', '');
    await app.getByTestId('nav-artists').click();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'artists');
    await expectQueue(app, true);
    await app.goBack();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
    await expectQueue(app, true);
  });
 });
@@ -1,187 +0,0 @@
 import { test, expect, openTheQueue } from '../support/fixtures.js';
 /**
 * #24 — the queue panel does not take the page's width away from it.
 *
 * The panel is `flex-shrink: 0` in the flow of `.content-area`, so an
 * open queue used to be paid for by the main panel. Measured on
 * Playlists before the fix:
 *
 * | viewport | main panel |
 * |---|---|
 * | 900×600 | 379px — all three header actions clipped |
 * | 390×780 | 69px |
 * | 320×600 | **0px** |
 *
 * **900×600 is the worst desktop case, not the 800×600 minimum**, and
 * that is the trap this file exists to keep closed: the sidebar
 * collapses to icons *below* 900, so the main panel is 843px at 899 and
 * 700px at 900. A spec that checks "the minimum" and stops has not
 * checked the worst case — which is what every viewport list in this
 * suite did before this.
 *
 * These assert the *content's* width rather than the panel's mode
 * wherever they can, because the mode is the mechanism and the width is
 * the complaint.
 */
 /** The bands from plan 018's size matrix, plus the pixel above the collapse. */
 const BANDS = [
  { name: 'a wide desktop (1280×800)', width: 1280, height: 800, inline: true },
  { name: 'the default window (1100×720)', width: 1100, height: 720, inline: true },
  { name: 'a laptop (1024×768)', width: 1024, height: 768, inline: true },
  { name: 'the worst desktop width (900×600)', width: 900, height: 600, inline: false },
  { name: 'the enforced minimum (800×600)', width: 800, height: 600, inline: false },
  { name: 'a phone (390×780)', width: 390, height: 780, inline: false },
  { name: '400% zoom (320×600)', width: 320, height: 600, inline: false },
 ];
 /**
 * How much room the content has, and whether the shell needs scrolling
 * to reach any of itself.
 */
 const shellGeometry = (page: import('@playwright/test').Page) =>
  page.evaluate(() => {
    const main = document.querySelector('#main-content')!.getBoundingClientRect();
    const panel = document.querySelector('#queue-panel')!;
    return {
      mainWidth: Math.round(main.width),
      overlay: panel.hasAttribute('overlay'),
      open: panel.hasAttribute('open'),
      bodyScrollWidth: document.body.scrollWidth,
      bodyClientWidth: document.body.clientWidth,
    };
  });
 /**
 * Opening the queue is `openTheQueue`, which takes the route this
 * viewport offers. It used to be a local helper that clicked
 * `#queue-button` unconditionally, and #59 hid that button below
 * 600px -- so the two phone bands here failed on a build where the
 * queue was working perfectly, having been asserting *how* it opens as
 * much as what it does.
 */
 const openQueue = openTheQueue;
 test.describe('an open queue leaves the content its width', () => {
  for (const band of BANDS) {
    test(`at ${band.name}`, async ({ app }) => {
      await app.setViewportSize({ width: band.width, height: band.height });
      await openQueue(app);
      // The mode is settled by a ResizeObserver, so poll rather than
      // read once: a single read races the resize and reports the
      // previous viewport's answer.
      await expect
        .poll(async () => (await shellGeometry(app)).overlay)
        .toBe(!band.inline);
      const geo = await shellGeometry(app);
      // The floor is the point of the whole issue. Inline, the queue is
      // affordable and the content keeps the rest; as an overlay the
      // content keeps *everything*, which is what makes 0px at 320
      // impossible rather than merely unlikely.
      expect(geo.mainWidth).toBeGreaterThanOrEqual(320);
      if (!band.inline) {
        expect(geo.mainWidth).toBeGreaterThanOrEqual(
          Math.min(band.width, 320),
        );
      }
      // And opening the queue must not make the shell overflow.
      expect(geo.bodyScrollWidth).toBeLessThanOrEqual(geo.bodyClientWidth);
    });
  }
 });
 test.describe('an overlaid queue says it is over the content', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize({ width: 900, height: 600 });
  });
  test('draws a scrim and closes when it is clicked', async ({ app }) => {
    await openQueue(app);
    const panel = app.locator('#queue-panel');
    await expect(panel).toHaveAttribute('overlay', '');
    // The scrim is `aria-hidden` on purpose — it is a dismissal target,
    // and the named routes out are the close button and Escape — so it
    // is located structurally rather than by role.
    await panel.evaluate((el) =>
      el.shadowRoot!.querySelector<HTMLElement>('.scrim')!.click(),
    );
    await expect(app.locator('#queue-button')).toHaveAttribute(
      'aria-expanded',
      'false',
    );
  });
  /**
   * `getByRole`, not a shadow-root query: this repo has shipped a
   * nameless control three times, and a drawer with a scrim is exactly
   * the shape that grows a fourth.
   */
  test('offers a named close button', async ({ app }) => {
    await openQueue(app);
    const close = app.getByRole('button', { name: 'Close queue' });
    await expect(close).toBeVisible();
    await close.click();
    await expect(app.locator('#queue-button')).toHaveAttribute(
      'aria-expanded',
      'false',
    );
  });
  test('closes on Escape and gives focus back to the toggle', async ({
    app,
  }) => {
    const toggle = app.locator('#queue-button');
    await toggle.focus();
    await toggle.click();
    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
    await app.keyboard.press('Escape');
    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
    await expect(toggle).toBeFocused();
  });
 });
 /**
 * The inline panel is the mode that already worked, and the one every
 * other queue spec is written against. It keeps its resize handle and
 * gains none of the overlay's chrome.
 */
 test.describe('a wide window keeps the queue beside the content', () => {
  test('no scrim, no close button, and the content is narrower', async ({
    app,
  }) => {
    await app.setViewportSize({ width: 1280, height: 800 });
    const widthWithoutQueue = (await shellGeometry(app)).mainWidth;
    await openQueue(app);
    await expect(app.locator('#queue-panel')).not.toHaveAttribute(
      'overlay',
      '',
    );
    const geo = await shellGeometry(app);
    expect(geo.mainWidth).toBeLessThan(widthWithoutQueue);
    await expect(
      app.getByRole('button', { name: 'Close queue' }),
    ).toHaveCount(0);
  });
 });
@@ -1,299 +0,0 @@
 import {
  test,
  expect,
  callBinding,
  navigateTo,
  LONG_TRACK,
  NO_QUEUE_SOURCE,
 } from '../support/fixtures.js';
 import type { Page } from '@playwright/test';
 /**
 * The queue panel's mouse model (#43): single click selects, ctrl and
 * shift extend, double click plays from that row.
 *
 * **All four already worked, and nothing pinned any of them** — which is
 * the whole reason the report could be made and could not be settled.
 * `queue-reorder.spec.ts` covers the keyboard, `queue-overlay.spec.ts`
 * covers the panel's mode, and the component tier has the reorder
 * arithmetic; the pointer path had no coverage in either tier, so
 * "selection is broken here" and "selection is fine here" were equally
 * consistent with a green suite.
 *
 * Two things this spec is deliberately shaped around.
 *
 * **The clicks are real.** A `dispatchEvent(new MouseEvent('click'))`
 * on a row exercises the delegated handler and *not* the question being
 * asked, which is what the pointer lands on: the rows carry
 * `explore-link` names that take their own clicks, and a synthetic
 * event aimed at the row reports a selection the mouse would never have
 * produced. Every click here goes through Playwright.
 *
 * **The playing assertions use the 90-second fixture.** Every other
 * track is 2–6 seconds, so "double click plays row 3" read against a
 * 2-second track reports whatever auto-advance moved on to — measured
 * during this work as row 3 double-clicked and row 4 playing, which
 * reads exactly like an off-by-one in `PlayIndex` and is not one.
 */
 /**
 * How long a click may take to show up as a highlight.
 *
 * **A poll with the default 5s timeout cannot see this defect**, and
 * that is the point of naming it. `queue-panel` repaints its rows two
 * ways — `onSelectionChanged()` calls `virtualizer.requestUpdate()`,
 * and `.keyFunction` is a per-render arrow, which is itself a changed
 * property the virtualizer reacts to. With **both** removed the
 * highlight still arrives, on whatever unrelated render happens next:
 * measured at 134ms, 3,866ms and 5,816ms for three clicks, against
 * 5ms, 16ms and 17ms on a healthy build.
 *
 * A user cannot tell "four seconds late" from "broken", which is very
 * close to what this issue reports. So the assertion is that the
 * highlight is *prompt*, with a bound ~30x the measured healthy case
 * and an order of magnitude under the degraded one.
 */
 const HIGHLIGHT_MS = 500;
 /** The queue's own answer, never the DOM's. */
 async function playing(app: Page): Promise<{ index: number; title: string }> {
  const state = await callBinding<{
    currentIndex: number;
    tracks: { title: string }[];
  }>(app, 'queue.Queue.GetState');
  return {
    index: state.currentIndex,
    title: state.tracks[state.currentIndex]?.title ?? '',
  };
 }
 /** Which rows are selected, as the accessibility tree sees it. */
 const selected = (app: Page) =>
  app.evaluate(() =>
    [
      ...document
        .querySelector('queue-panel')!
        .shadowRoot!.querySelectorAll('[data-index]'),
    ]
      .filter((row) => row.getAttribute('aria-selected') === 'true')
      .map((row) => Number((row as HTMLElement).dataset['index'])),
  );
 /**
 * Six tracks with the long one in the middle, so a "play from here"
 * assertion has something to land on that will still be playing when it
 * is read back.
 */
 async function queueSixAndOpen(app: Page): Promise<void> {
  const paths = await app.evaluate(async (longTitle) => {
    // `TrackName`, not `Title`: the library model names it after the
    // tag, and the *queue* is what calls it `title`.
    const tracks = (await window.__yjEvents.call(
      'library.Library.GetTracks',
      [0],
      10_000,
    )) as { FilePath: string; TrackName: string; Album: string }[];
    const long = tracks.find((t) => t.TrackName === longTitle);
    /**
     * **Tracks that have an album**, which is a requirement of one of
     * the tests and was previously left to luck (#156).
     *
     * `explore-link` routes a track name to its *album's* page, so a
     * track with no album renders a name that navigates nowhere — and
     * the fixture library deliberately contains two (`01 Tone A`,
     * `02 Tone B`). Which tracks arrive first is `audio_files.id`
     * order, i.e. the order the **scan** inserted them, which depends
     * on concurrency and directory traversal: locally the first eight
     * all had albums and the spec passed twice over, and CI rebuilds
     * its seed with a real scan and got a different eight.
     *
     * Asking for what the test needs is the fix. It is not a
     * narrowing: every assertion here wants an ordinary track, and
     * "the first five rows" was never a way to ask for one in a
     * library whose whole purpose is edge cases.
     */
    const rest = tracks
      .filter((t) => t.TrackName !== longTitle && t.Album !== '')
      .slice(0, 5);
    // Index 3 is the long one: far enough down that a shift-extend has
    // room either side of it.
    return [
      ...rest.slice(0, 3).map((t) => t.FilePath),
      long!.FilePath,
      ...rest.slice(3).map((t) => t.FilePath),
    ];
  }, LONG_TRACK);
  await callBinding(app, 'queue.Queue.SetQueue', [
    paths,
    0,
    false,
    NO_QUEUE_SOURCE,
  ]);
  // A closed panel renders no list at all.
  await app.locator('#queue-button').click();
  await expect(app.locator('queue-panel .track-item').first()).toBeVisible();
  await expect(app.locator('queue-panel .track-item')).toHaveCount(6);
 }
 /** The row at a data-index, not the nth child: see the note in the file. */
 const row = (app: Page, index: number) =>
  app.locator(`queue-panel .track-item[data-index="${index}"]`);
 test.describe('selecting in the queue with a mouse', () => {
  // The suite shares one backend in file order, and a queue and an open
  // panel both outlive the page. `queue-reorder.spec.ts` sets the
  // precedent and the reason: a spec that spends state fails the next
  // one, in a list that reads like a regression in whatever you hold.
  test.afterEach(async ({ app }) => {
    await callBinding(app, 'queue.Queue.Clear').catch(() => {
      /* an empty queue is the state we were asking for */
    });
    const open = await app.locator('queue-panel[open]').count();
    if (open > 0) await app.locator('#queue-button').click();
  });
  test('a single click selects that row and only that row', async ({ app }) => {
    await queueSixAndOpen(app);
    await row(app, 1).click();
    await expect
      .poll(() => selected(app), { timeout: HIGHLIGHT_MS })
      .toEqual([1]);
    // And it *replaces* rather than accumulating, which is the half a
    // test of one click cannot see.
    await row(app, 4).click();
    await expect
      .poll(() => selected(app), { timeout: HIGHLIGHT_MS })
      .toEqual([4]);
  });
  test('ctrl adds a row and shift extends a range', async ({ app }) => {
    await queueSixAndOpen(app);
    await row(app, 1).click();
    await row(app, 3).click({ modifiers: ['Control'] });
    await expect
      .poll(() => selected(app), { timeout: HIGHLIGHT_MS })
      .toEqual([1, 3]);
    // From the last row touched, so 3→5, keeping the ctrl-picked 1.
    await row(app, 5).click({ modifiers: ['Shift'] });
    await expect
      .poll(() => selected(app), { timeout: HIGHLIGHT_MS })
      .toEqual([1, 3, 4, 5]);
    // A plain click collapses the whole thing back to one.
    await row(app, 2).click();
    await expect
      .poll(() => selected(app), { timeout: HIGHLIGHT_MS })
      .toEqual([2]);
  });
  test('a double click plays from that row', async ({ app }) => {
    await queueSixAndOpen(app);
    // Row 3 is the 90-second track. Asked of the backend, because the
    // panel's own highlight is a different claim.
    await row(app, 3).dblclick();
    await expect.poll(() => playing(app)).toEqual({
      index: 3,
      title: LONG_TRACK,
    });
    // Playing is not selecting: the double click clears the selection
    // it made on the way through, or every play leaves a row looking
    // picked out for an action the user did not ask for.
    await expect.poll(() => selected(app)).toEqual([]);
  });
  /**
   * The one collision the report is actually about.
   *
   * Every track, album and artist name in the app navigates
   * (`utils/explore-link.ts`), and it does that by **stopping the
   * click's propagation** — in its own words, "the row must not also
   * treat it as a selection". So a click that lands on the name text
   * navigates and selects nothing, in the queue panel and in the track
   * list alike.
   *
   * That is deliberate and it is pinned here rather than argued with,
   * because the measurement says the queue is not the surface where it
   * hurts: a horizontal hit-scan of a row at three heights makes the
   * queue row **12%** link and the track list's row **21%** — the panel
   * the report calls broken is *less* covered by links than the list it
   * calls correct. What is left is one deliberate exception, and a
   * change to it should have to fail a test.
   */
  test('a click on a name navigates instead, and that is the exception', async ({
    app,
  }) => {
    await queueSixAndOpen(app);
    await row(app, 1).click();
    await expect
      .poll(() => selected(app), { timeout: HIGHLIGHT_MS })
      .toEqual([1]);
    // `.track-title .explore-link`, not `.explore-link` first(): a row
    // has two, and which one `first()` finds depends on whether the
    // *title* is a link at all. It is not, for a track with no album —
    // `explore-link` renders plain text where it cannot route — so the
    // loose locator silently clicked the **artist** instead and the
    // assertion below was about a different destination than the one
    // being exercised (#156).
    await row(app, 2).locator('.track-title .explore-link').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'explore-album-details',
    );
    // Row 2 did not join the selection — the link took the click.
    await expect.poll(() => selected(app)).toEqual([1]);
    await navigateTo(app, 'tracks');
  });
  /**
   * And the other half of that bargain: the link holds its navigation
   * for one double-click interval and drops it if a second click
   * arrives, so double-clicking a *name* still plays the row rather
   * than navigating away from it. That is what makes the exception
   * above survivable, and it is the part most likely to break silently
   * if the grace interval is ever removed.
   */
  test('a double click on a name plays rather than navigating', async ({
    app,
  }) => {
    await queueSixAndOpen(app);
    // Read rather than assumed: which view the app lands on is the
    // user's `DefaultPage`, so naming one here would be asserting on a
    // config value in a test about a double click.
    const before = await app
      .getByTestId('main-content')
      .getAttribute('data-active-view');
    await row(app, 3).locator('.explore-link').first().dblclick();
    await expect.poll(() => playing(app)).toEqual({
      index: 3,
      title: LONG_TRACK,
    });
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      before!,
    );
  });
 });
@@ -1,4 +1,4 @@
-import { test, expect, navigateTo } from '../support/fixtures.js';
+import { test, expect } from '../support/fixtures.js';
 /**
 * Plan 007 phase 5: a11y.1 and a11y.2, frozen against the real app.
@@ -18,19 +18,16 @@ test.describe('Settings is reachable without a mouse', () => {
  }) => {
    await app.getByTestId('nav-settings').click();
-    // Per *section*, not per `.header`: a section holding a
+    const headers = app.locator('config-page config-section .header');
    // `job-panel` (#27) also contains `job-details-drawer`, whose own
    // header carries that class and is not a disclosure.
    const sections = app.locator('config-page config-section');
-    await expect(sections.first()).toBeVisible();
+    await expect(headers.first()).toBeVisible();
-    const count = await sections.count();
+    const count = await headers.count();
    expect(count).toBeGreaterThan(4);
    for (let i = 0; i < count; i++) {
-      const header = sections.nth(i).locator('.header').first();
+      const header = headers.nth(i);
      expect(await header.evaluate((el) => el.tagName)).toBe('BUTTON');
      expect(['true', 'false']).toContain(
@@ -59,9 +56,7 @@ test.describe('Settings is reachable without a mouse', () => {
 test.describe("Downloads' tabs are tabs", () => {
  test('arrow keys move the selection and swap the panel', async ({ app }) => {
-    // By event, not by nav item: with no download client configured
+    await app.getByTestId('nav-downloads').click();
    // there is no Downloads destination to click (#25).
    await navigateTo(app, 'downloads');
    const view = app.locator('downloads-view');
    const requests = view.getByRole('tab', { name: 'Requests' });
@@ -1,269 +0,0 @@
 import { test, expect } from '../support/fixtures.js';
 /**
 * The top bar fits the window it is in (#143).
 *
 * **This is measured per child, not on the shell**, which is #69's
 * lesson repeated one component over: `layout-overflow.spec.ts` asserts
 * the *document* needs no sideways scrolling, and clipping inside a
 * component is invisible to it — which is exactly why that spec was
 * green throughout this defect. What a user sees is a control rendered
 * past the edge of the bar it belongs to, so that is what is asserted.
 *
 * **And it is measured with a job running**, which is the half the
 * original report missed. `job-indicator` is `hidden` while idle and up
 * to 235px wide when it is not, so the bar was 611px inside 600 sitting
 * still and 862px during a scan — 171 to 262px of overflow, arriving
 * exactly when a user has reason to look at that bar. Nothing else in
 * this suite has ever measured a layout with work in flight;
 * `/__test/emit` stages it without staging the scan.
 */
 type Page = import('@playwright/test').Page;
 /**
 * The widths this asks about.
 *
 * 600 is the bottom of the Compact band (#24) and where the defect
 * lands; 899 and 900 straddle `nav-history` appearing (68px more to
 * find, at the width that just gained the sidebar's labels); 800 is the
 * enforced minimum.
 *
 * **390 is kept, and what it asks changed with #57.** There is no bar
 * to fit below 600px any more — it is out of the grid and visually
 * hidden — so "nothing hangs out of it" is a claim about an element
 * with no row, and would pass on a build that had merely broken the
 * bar. Dropping the width would be dropping the one place this file
 * can still say something true about a phone, so it asserts the
 * *stronger* property instead, below: the bar is out of the layout
 * altogether, which is the thing #57 wanted and the thing that makes
 * fitting moot.
 */
 const WIDTHS = [600, 800, 899, 900, 1440];
 /** Where #57 leaves the bar, and where the desktop still has one. */
 const PHONE_WIDTH = 390;
 /**
 * A scan whose title is as long as a real one gets. The label is capped
 * at 12rem by the component, so this is the widest the indicator can
 * be — measuring with "Scanning" instead reports a bar that fits and a
 * defect that is 100px smaller than it is.
 */
 const LONG_JOB = {
  id: 'top-bar-fit',
  kind: 'library-scan',
  state: 'running',
  title: 'Scanning Music from the external drive',
  current: 40,
  total: 100,
 };
 /**
 * Every child's right edge against the bar's own content box.
 *
 * The content box, not `clientWidth`: the bar has a 2em right gutter,
 * and a control sitting in the padding is already the failure — it is
 * simply one that `scrollWidth` under-reports, because `scrollWidth`
 * counts the left padding and not the right.
 */
 const overflowingChildren = (page: Page) =>
  page.evaluate(() => {
    const bar = document.querySelector<HTMLElement>('header.top-bar')!;
    const style = getComputedStyle(bar);
    const box = bar.getBoundingClientRect();
    const left = box.left + parseFloat(style.paddingLeft);
    const right = box.right - parseFloat(style.paddingRight);
    return [...bar.children]
      .filter((child) => {
        const cs = getComputedStyle(child);
        // Out of flow is out of the question: a collapsed wordmark is
        // `position: absolute` and 1px wide precisely so it costs the
        // row nothing.
        if (cs.display === 'none' || cs.position === 'absolute') return false;
        const r = child.getBoundingClientRect();
        return r.width > 0 && (r.right > right + 0.5 || r.left < left - 0.5);
      })
      .map((child) => {
        const r = child.getBoundingClientRect();
        return `${child.tagName.toLowerCase()}: ${Math.round(r.left)}..${Math.round(r.right)} outside ${Math.round(left)}..${Math.round(right)}`;
      });
  });
 /** What the fit pass gave up, read back off the DOM it changed. */
 const collapsed = (page: Page) =>
  page.evaluate(() => ({
    wordmark: !!document.querySelector('header.top-bar hgroup.yj-collapsed'),
    jobLabel: !!document.querySelector('job-indicator[compact]'),
  }));
 test.describe('the top bar fits the window', () => {
  /**
   * The phone's answer, which is not "it fits" (#57).
   *
   * The bar has no grid row below 600px, so measuring its children
   * against its content box is measuring a 1px box that is already
   * invisible — a fit pass would collapse the wordmark every time and
   * report success about nothing, which is why `measureTopBarFit`
   * declines to run at all when the bar is out of flow. What is worth
   * asserting here is that the fit pass has not quietly started
   * *undoing* that: a rule that put the bar back in the layout would
   * pass every assertion in this file and cost a 439px screen 12% of
   * its height.
   */
  test(`the bar is out of the layout at ${PHONE_WIDTH}px, with a job running`, async ({
    app,
    testctl,
  }) => {
    await app.setViewportSize({ width: PHONE_WIDTH, height: 600 });
    await testctl.emit('JobsChanged', [LONG_JOB]);
    // Not merely hidden: `display: none` on the header would satisfy
    // "invisible" and leave the 3.25em row exactly where it was. So
    // the assertion is that the content starts where the row above it
    // ends -- and with a job staged, the row above it is the jobs
    // band, which is the whole reason this row could go.
    await expect
      .poll(() =>
        app.evaluate(() => {
          const bar = document.querySelector<HTMLElement>('header.top-bar')!;
          const main = document.querySelector<HTMLElement>('.main-panel')!;
          const band = document.querySelector<HTMLElement>('job-band')!;
          return {
            position: getComputedStyle(bar).position,
            gap:
              Math.round(main.getBoundingClientRect().top) -
              Math.round(band.getBoundingClientRect().bottom),
          };
        }),
      )
      .toEqual({ position: 'absolute', gap: 0 });
    // And the work is still visible, in the band that replaced the
    // indicator (#62) — which is what made this row removable at all.
    await expect(app.locator('job-indicator')).toBeHidden();
    await expect(app.locator('job-band').locator('job-row')).toHaveCount(1);
    await app.setViewportSize({ width: 1440, height: 900 });
  });
  for (const width of WIDTHS) {
    test(`no control sits outside the bar at ${width}px, idle`, async ({
      app,
    }) => {
      await app.setViewportSize({ width, height: 600 });
      await expect.poll(() => overflowingChildren(app)).toEqual([]);
    });
    test(`no control sits outside the bar at ${width}px, with a job running`, async ({
      app,
      testctl,
    }) => {
      await app.setViewportSize({ width, height: 600 });
      await testctl.emit('JobsChanged', [LONG_JOB]);
      // The indicator has to actually be up, or this test passes by
      // measuring the idle case under another name.
      await expect(app.locator('job-indicator')).toBeVisible();
      await expect.poll(() => overflowingChildren(app)).toEqual([]);
    });
  }
  /**
   * The other half of "measured, never breakpointed": a rule that
   * collapses defensively at every narrow width fits just as well and
   * is a worse app. 1440 is roomy at any job title; 899 was measured to
   * fit with the longest one, because `nav-history` is not there yet.
   */
  test('nothing is given up where there is room for it', async ({
    app,
    testctl,
  }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
    await testctl.emit('JobsChanged', [LONG_JOB]);
    await expect(app.locator('job-indicator')).toBeVisible();
    await expect.poll(() => collapsed(app)).toEqual({
      wordmark: false,
      jobLabel: false,
    });
  });
  /**
   * And it gives them back. The pass starts from all-visible every
   * time, so this is the property that a rule which only ever *added*
   * to the collapsed set would fail — the wordmark would be gone for
   * the rest of the session after one narrow moment.
   */
  test('the wordmark comes back when the window does', async ({
    app,
    testctl,
  }) => {
    await testctl.emit('JobsChanged', [LONG_JOB]);
    await app.setViewportSize({ width: 600, height: 600 });
    await expect.poll(() => collapsed(app)).toEqual({
      wordmark: true,
      jobLabel: true,
    });
    await app.setViewportSize({ width: 1440, height: 900 });
    await expect.poll(() => collapsed(app)).toEqual({
      wordmark: false,
      jobLabel: false,
    });
  });
  /**
   * The wordmark yields its width and not its existence: `display:
   * none` would take the document from one top-level heading to none.
   */
  test('the collapsed wordmark is still the document heading', async ({
    app,
    testctl,
  }) => {
    await testctl.emit('JobsChanged', [LONG_JOB]);
    await app.setViewportSize({ width: 600, height: 600 });
    await expect.poll(() => collapsed(app)).toMatchObject({ wordmark: true });
    await expect(
      app.getByRole('heading', { name: 'YellowJacket', level: 1 }),
    ).toHaveCount(1);
  });
  /**
   * And the indicator keeps saying what it is doing after its visible
   * label goes — the `sr-only` live region is what announces the state,
   * which is the same argument the phone's own rule was written on.
   */
  test('the job indicator still announces its state without its label', async ({
    app,
    testctl,
  }) => {
    await testctl.emit('JobsChanged', [LONG_JOB]);
    await app.setViewportSize({ width: 600, height: 600 });
    await expect.poll(() => collapsed(app)).toMatchObject({ jobLabel: true });
    const spoken = await app
      .locator('job-indicator')
      .evaluate(
        (el) =>
          el.shadowRoot?.querySelector('[aria-live]')?.textContent?.trim() ?? '',
      );
    expect(spoken).toContain('Scanning Music from the external drive');
    // Leave the app as the next spec expects to find it.
    await app.setViewportSize({ width: 1440, height: 900 });
  });
 });
@@ -1,194 +0,0 @@
 import { test, expect } from '../support/fixtures.js';
 /**
 * The touch gestures against the real app (plan 019, #63; long-press
 * from plan 016 B2).
 *
 * The component tier proves the gestures in isolation, against markup
 * it built itself. What it cannot prove is the half that made this one
 * document listener instead of six: that the announced gesture reaches
 * the handler a *real* component bound — `track-list` delegates on the
 * `lit-virtualizer` rather than binding per row — and that the real
 * menu opens from it, a path with its own history of opening and then
 * refusing to work (see `menu-keyboard.spec.ts`).
 *
 * **Both halves of the reassignment are here, and the second is the
 * one that matters.** #63 makes a hold on a *track row* mean selection
 * mode; every other surface in the app keeps the context menu it has
 * had, because an unclaimed `yj-long-press` still becomes a
 * `contextmenu`. A spec that only checked the row would pass on a
 * build that had silently broken the other thirteen menus.
 *
 * The pointer events are dispatched rather than performed: this
 * project runs Desktop Chrome and Desktop Safari, neither of which has
 * touch. So this is honest about what it checks — the app's own
 * listeners, on the app's own DOM, from the events a touch would
 * produce — and not about a real finger. The finger is the Android
 * tier, and it found something this cannot see: Chrome 113's WebView
 * fires its own `contextmenu` on a long press, which is why the module
 * announces the gesture from a native event rather than standing down.
 */
 /** A common small phone, as in `phone-shell.spec.ts`. */
 const PHONE = { width: 390, height: 844 };
 /** Comfortably past the module's 500ms hold. */
 const HELD = 900;
 type Page = import('@playwright/test').Page;
 /** A component's menu panel, or null while it is not rendered. */
 const panel = (page: Page, host: string) =>
  page.evaluate((tag) => {
    const el = document
      .querySelector(tag)
      ?.shadowRoot?.querySelector('.context-menu-panel');
    if (!el) return null;
    return {
      role: el.getAttribute('role'),
      label: el.getAttribute('aria-label'),
      items: el.querySelectorAll('[role="menuitem"]').length,
    };
  }, host);
 /** How many tracks the selection bar says are selected, or null. */
 const selectionCount = (page: Page) =>
  page.evaluate(() => {
    const bar = document
      .querySelector('track-list')
      ?.shadowRoot?.querySelector('selection-bar');
    return bar ? (bar as unknown as { count: number }).count : null;
  });
 /**
 * Press an element, optionally dragging partway through — the shape of
 * a scroll that begins on a row, which must be neither gesture — and
 * optionally lifting, which is what makes it a tap rather than a hold.
 */
 async function press(
  page: Page,
  selector: { host: string; inner: string },
  opts: { driftY?: number; lift?: boolean } = {},
 ): Promise<void> {
  await page.evaluate(
    ({ host, inner, drift, lift }) => {
      const el = document
        .querySelector(host)
        ?.shadowRoot?.querySelector(inner);
      if (!el) throw new Error(`no ${inner} in ${host} to press`);
      const box = el.getBoundingClientRect();
      const x = Math.round(box.left + box.width / 2);
      const y = Math.round(box.top + box.height / 2);
      const send = (type: string, dy = 0) =>
        el.dispatchEvent(
          new PointerEvent(type, {
            bubbles: true,
            composed: true,
            cancelable: true,
            pointerType: 'touch',
            isPrimary: true,
            clientX: x,
            clientY: y + dy,
          }),
        );
      send('pointerdown');
      if (drift) send('pointermove', drift);
      if (lift) send('pointerup');
    },
    {
      host: selector.host,
      inner: selector.inner,
      drift: opts.driftY ?? 0,
      lift: opts.lift ?? false,
    },
  );
 }
 // `.track-row`, not `[role="row"]`: the column header is a row too, and
 // it is the *first* one — a press on it is correctly ignored, which
 // reads exactly like the gesture not working.
 const TRACK_ROW = { host: 'track-list', inner: '.track-row' };
 test.describe('a hold on a track row selects it', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(PHONE);
    await app.getByTestId('tab-tracks').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'tracks',
    );
  });
  test.afterEach(async ({ app }) => {
    // Every other spec file runs against a desktop, and the viewport
    // belongs to the shared context rather than to this file.
    await app.setViewportSize({ width: 1440, height: 900 });
  });
  test('raises the selection bar rather than the context menu', async ({
    app,
  }) => {
    await expect.poll(() => selectionCount(app)).toBeNull();
    await press(app, TRACK_ROW);
    await expect
      .poll(() => selectionCount(app), { timeout: HELD + 2000 })
      .toBe(1);
    // The gesture is claimed, so the menu this hold used to open must
    // not also be up -- on a phone that would be a sheet over the bar.
    expect(await panel(app, 'track-list')).toBeNull();
  });
  test('is neither gesture when the press turns into a scroll', async ({
    app,
  }) => {
    await press(app, TRACK_ROW, { driftY: 40 });
    await app.waitForTimeout(HELD);
    expect(await selectionCount(app)).toBeNull();
    expect(await panel(app, 'track-list')).toBeNull();
  });
 });
 test.describe('a hold anywhere else still opens the menu', () => {
  test.beforeEach(async ({ app }) => {
    await app.setViewportSize(PHONE);
    await app.getByTestId('tab-albums').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'albums',
    );
  });
  test.afterEach(async ({ app }) => {
    await app.setViewportSize({ width: 1440, height: 900 });
  });
  test('reaches the delegated handler and opens the real menu', async ({
    app,
  }) => {
    // The property that let #63 reassign the hold without touching one
    // of the fourteen context menus: unclaimed, it is what it was.
    // Without this half, breaking all of them passes the suite.
    await expect.poll(() => panel(app, 'cover-grid')).toBeNull();
    await press(app, { host: 'cover-grid', inner: '[role="option"]' });
    await expect
      .poll(() => panel(app, 'cover-grid'), { timeout: HELD + 2000 })
      .toMatchObject({ role: 'menu' });
    // The same panel Shift+F10 opens, items and all -- not an empty
    // popup that happened to become visible.
    expect((await panel(app, 'cover-grid'))?.items).toBeGreaterThan(0);
  });
 });
@@ -4,7 +4,6 @@ import {
  eventNames,
  resetEvents,
  waitForEvent,
  navigateTo,
 } from '../support/fixtures.js';
 /**
@@ -40,9 +39,7 @@ test.describe('view lifecycle', () => {
  test('a keypress on Settings does not reach the Autotag queue', async ({
    app,
  }) => {
-    // By event, not by nav item: Autotag is hidden by default (#25)
+    await app.getByTestId('nav-autotag').click();
    // and a hidden view is still reachable.
    await navigateTo(app, 'autotag');
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'autotag',
@@ -86,9 +83,7 @@ test.describe('view lifecycle', () => {
    // The other half of the same bug (H-2): two document keydown handlers
    // with no arbitration meant `s` on this page skipped the album *and*
    // toggled shuffle.  As a panel binding it can only mean one thing.
-    // By event, not by nav item: Autotag is hidden by default (#25)
+    await app.getByTestId('nav-autotag').click();
    // and a hidden view is still reachable.
    await navigateTo(app, 'autotag');
    await expect
      .poll(() => pendingCount(app))
      .toMatch(/^Pending \(\d+\)$/);
@@ -1,116 +0,0 @@
 import { test, expect, navigateTo } from '../support/fixtures.js';
 /**
 * Which destinations the navigation offers (#25).
 *
 * Eleven sidebar entries is more than most libraries need, so they are
 * individually toggleable from Settings, Autotag is off until asked for
 * and Downloads is absent until there is a client to download with.
 *
 * **The assertions are about the navigation, not about the setting.**
 * "The config was saved" is the plumbing, and the two most recent bugs
 * in this area — #69 and #72 — both shipped green under specs that
 * measured exactly that. What a person sees is whether the item is in
 * the accessibility tree, and whether the view is still reachable when
 * it is not.
 *
 * This runs against the seeded app, whose config is defaults and whose
 * download client list is empty, so the initial state below is what a
 * fresh install looks like.
 */
 type Page = import('@playwright/test').Page;
 const navItem = (page: Page, label: string) =>
  page.getByRole('button', { name: label, exact: true });
 /** The Navigation section's checkbox for a destination. */
 const viewToggle = (page: Page, label: string) =>
  page.getByRole('checkbox', { name: `Show ${label} in the navigation` });
 async function openNavigationSettings(page: Page): Promise<void> {
  await page.getByTestId('nav-settings').click();
  const section = page.locator(
    'config-page config-section[heading="Navigation"] .header',
  );
  await expect(section).toBeVisible();
  if ((await section.getAttribute('aria-expanded')) === 'false') {
    await section.click();
  }
  await expect(section).toHaveAttribute('aria-expanded', 'true');
 }
 test.describe('configurable destinations', () => {
  test('Autotag is off by default and Downloads needs a client', async ({
    app,
  }) => {
    await expect(app.getByTestId('nav-home')).toBeVisible();
    await expect(app.getByTestId('nav-autotag')).toHaveCount(0);
    await expect(app.getByTestId('nav-downloads')).toHaveCount(0);
  });
  /**
   * Hiding takes the item away and nothing else. Detail views navigate
   * into these and the launch page is one of them, so a destination
   * with no nav item still has to open.
   */
  test('a hidden destination is still reachable', async ({ app }) => {
    await navigateTo(app, 'autotag');
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'autotag',
    );
    // And nothing is falsely lit while standing on it -- the same rule
    // a detail view follows, with no special case for either.
    await expect(navItem(app, 'Home')).toHaveAttribute('aria-current', 'false');
  });
  test('switching Autotag on adds it to the sidebar', async ({ app }) => {
    await openNavigationSettings(app);
    await viewToggle(app, 'Autotag').check();
    await expect(app.getByTestId('nav-autotag')).toBeVisible();
    // Clicking it is the point of having it.
    await app.getByTestId('nav-autotag').click();
    await expect(app.getByTestId('main-content')).toHaveAttribute(
      'data-active-view',
      'autotag',
    );
    // Put it back, or the next spec against this app sees a library
    // this one changed.
    await openNavigationSettings(app);
    await viewToggle(app, 'Autotag').uncheck();
    await expect(app.getByTestId('nav-autotag')).toHaveCount(0);
  });
  /**
   * Settings has no toggle at all, rather than a toggle that refuses:
   * a user who hides it cannot get back to unhide it. The backend
   * refuses it too, because `config.toml` is hand-editable.
   */
  test('Settings cannot be switched off', async ({ app }) => {
    await openNavigationSettings(app);
    await expect(viewToggle(app, 'Settings')).toBeDisabled();
    await expect(app.getByTestId('nav-settings')).toBeVisible();
  });
  /**
   * The launch page is refused while it is the launch page, which is a
   * state the user can leave by changing the launch page above it.
   */
  test('the launch page cannot be switched off', async ({ app }) => {
    await openNavigationSettings(app);
    await expect(viewToggle(app, 'Home')).toBeDisabled();
  });
 });
@@ -111,79 +111,6 @@ export async function bindingCalls(page: Page): Promise<string[]> {
  return calls.map(nameOf);
 }
 /**
 * Go to a view without going through the navigation.
 *
 * `navigate` is the event the shell listens for and every nav item, card
 * and detail view dispatches, so this is the app's own mechanism rather
 * than a test-only door. It exists because a destination is not
 * guaranteed to have a nav item any more (#25): Autotag is hidden until
 * the user asks for it and Downloads until a client exists, and a spec
 * about what a *view* does should not also be asserting that the
 * sidebar offers it.
 */
 export async function navigateTo(page: Page, view: string): Promise<void> {
  await page.evaluate(
    (v) =>
      void document.dispatchEvent(
        new CustomEvent('navigate', {
          detail: { view: v },
          bubbles: true,
          composed: true,
        }),
      ),
    view,
  );
  await page
    .getByTestId('main-content')
    .waitFor({ state: 'attached' });
 }
 /**
 * Open the queue the way a user at this viewport would.
 *
 * **The route differs by width and that is the feature, not an
 * inconvenience.** Above 600px the bottom bar carries a queue button.
 * Below it that button is gone (#59) and the queue is reached from the
 * full-screen Now Playing view, which the mini player's art opens —
 * "reachable only from Now Playing", which is what the issue asks for.
 *
 * It is here rather than in one spec because four files need it, and
 * because a spec that hard-codes `#queue-button` is quietly asserting
 * *which* route exists as well as what the queue does. Four of them
 * were, which is how hiding one button failed ten tests about
 * something else.
 *
 * The width is read from the page rather than passed, so a caller that
 * resizes and then opens does not have to say so twice.
 */
 export async function openTheQueue(page: Page): Promise<void> {
  const toggle = page.locator('#queue-button');
  if (await toggle.isVisible()) {
    if ((await toggle.getAttribute('aria-expanded')) !== 'true') {
      await toggle.click();
    }
    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
    return;
  }
  // The phone: through Now Playing. `open-now-playing` is the mini
  // player's art, which is a button only below 600px.
  if (
    (await page.getByTestId('main-content').getAttribute('data-active-view')) !==
    'now-playing'
  ) {
    await page.getByTestId('open-now-playing').click();
  }
  await page.getByTestId('npv-queue').click();
  await expect(page.locator('#queue-panel')).toHaveAttribute('open', '');
 }
 /** Thin client for the dev-only /__test/ surface (backend/testctl). */
 export class TestCtl {
  constructor(private readonly baseURL: string) {}
@@ -69,14 +69,6 @@ export function GetPinDefaultPlaylist(): $CancellablePromise<boolean> {
    return $Call.ByID(3818283301);
 }
 /**
 * GetPopupVolume reports whether the bottom bar's volume control is a
 * click-to-open popup rather than an inline slider (#42).
 */
 export function GetPopupVolume(): $CancellablePromise<boolean> {
    return $Call.ByID(2885777);
 }
 /**
 * GetQueueFallback returns what plays, if anything, once the queue
 * runs out.
@@ -120,16 +112,6 @@ export function GetTrackListColumns(): $CancellablePromise<tracklist$0.Column[]
    return $Call.ByID(3426289065);
 }
 /**
 * GetViewVisibility reports which primary views the sidebar should
 * show, answered for every known view rather than only the ones the
 * config mentions -- so the frontend filters on a value and never has
 * to hold a second copy of the defaults.
 */
 export function GetViewVisibility(): $CancellablePromise<{ [_ in string]?: boolean } | null> {
    return $Call.ByID(2798108026);
 }
 /**
 * Load reads and parses the config file from disk.
 */
@@ -215,18 +197,6 @@ export function SetPinDefaultPlaylist(pin: boolean): $CancellablePromise<void> {
    return $Call.ByID(372446849, pin);
 }
 /**
 * SetPopupVolume saves the volume control's presentation.
 * 
 * Nothing to validate: both values are legal at every width, and the
 * frontend additionally stands the inline slider down below the phone
 * breakpoint whatever this says, because that is about room rather than
 * about preference.
 */
 export function SetPopupVolume(popup: boolean): $CancellablePromise<void> {
    return $Call.ByID(1430308453, popup);
 }
 /**
 * SetQueueFallback validates and saves a new queue-fallback mode.
 */
@@ -277,20 +247,6 @@ export function SetTrackListColumns(columns: tracklist$0.Column[] | null): $Canc
    return $Call.ByID(4226159685, columns);
 }
 /**
 * SetViewVisible shows or hides one primary view.
 * 
 * Two refusals, both about a state the user cannot get out of from the
 * UI they would be left with: Settings is never hideable, and the
 * launch page is never hideable while it is the launch page (change it
 * first). Hiding a view does not make it unreachable -- `navigate`
 * still resolves it, which detail views depend on -- it only takes the
 * nav item away.
 */
 export function SetViewVisible(view: string, visible: boolean): $CancellablePromise<void> {
    return $Call.ByID(1751982648, view, visible);
 }
 /**
 * Validate returns errors if there is a breaking issue with the config.
 */
@@ -142,18 +142,6 @@ export function SetVolume(desiredVolume: $models.UserVolume): $CancellablePromis
    return $Call.ByID(1375836663, desiredVolume);
 }
 /**
 * SystemOwnsVolume reports whether the platform's own control is the
 * only volume control there is, so this app neither offers one nor
 * remembers a level.
 * 
 * It is bound: the frontend renders no `<volume-control>` when it is
 * true, at any width.
 */
 export function SystemOwnsVolume(): $CancellablePromise<boolean> {
    return $Call.ByID(1027623185);
 }
 /**
 * TrackLengthInSeconds returns the duration of the current track.
 */
@@ -113,6 +113,14 @@ export function Next(): $CancellablePromise<void> {
    return $Call.ByID(1968784044);
 }
 /**
 * OnPlaybackFinished is called when a track finishes playing naturally.
 * This drives the auto-advance behavior and records the play.
 */
 export function OnPlaybackFinished(): $CancellablePromise<void> {
    return $Call.ByID(2184869763);
 }
 /**
 * Play handles a play request by either resuming the current track or
 * starting playback from the beginning of the queue. When a track is
@@ -104,51 +104,6 @@ p {
    flex: 0 1 320px;
 }
 /* What the bar gives up when it does not fit is decided by measuring
   it (`services/top-bar-fit.ts`, #143). Two rules here are what make
   that measurement mean anything.
   **Nothing but the search box may shrink.** `scrollWidth` reports a
   perfect fit while a child quietly truncates -- #69's trap, one
   component over -- and the indicator's label is `text-overflow:
   ellipsis`, so it would have absorbed the deficit and hidden it. The
   search box is exempt because it shrinks between its 320px basis and
   the 200px floor its own stylesheet sets, and a narrower input hides
   nothing it was showing. */
 .top-bar hgroup,
 .top-bar library-filter,
 .top-bar job-indicator {
    flex-shrink: 0;
 }
 /* **The wordmark yields its width, not its existence.** It is the
   app's top-level heading as well as its brand, and `display: none`
   would take a document from one `h1` to none at exactly the widths
   where the view's own header is the only thing left saying where you
   are. This is `styles/sr-only.css.ts`'s recipe, written out because
   that one is a `CSSResult` for shadow roots and this is the light
   DOM. */
 .top-bar hgroup.yj-collapsed {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
 }
 /* The bar is `justify-content: space-between`, which with four children
   spreads them evenly and left back/forward floating in the middle of
   nothing. Collecting the free space *after* this one puts the pair
   beside the brand, where a browser keeps them, and leaves the
   right-hand group exactly as it was. */
 .top-bar nav-history {
    margin-right: auto;
 }
 ul {
    list-style-type: none;
 }
@@ -178,23 +133,6 @@ ul {
    .subtitle {
        display: none;
    }
    /* Back/forward is Desktop-band chrome (#6), and 900 is the same
       line the sidebar's labels and the subtitle are already given up
       at -- below it the shell is narrow enough that the header is
       what runs out of room first. Measured at 600, the bottom of the
       Compact band: the bar is 611px inside a 600px viewport *before*
       this component exists (filed separately), and 695px with it, so
       keeping it here would be widening a violation of the promise
       that nothing scrolls sideways at a supported size.
       Nothing is unreachable as a result, which is the rule that
       decides it: Alt+Left / Alt+Right are global and every width has
       them, the detail views keep their own back buttons, and the
       phone additionally has the platform's gesture. */
    .top-bar nav-history {
        display: none;
    }
 }
 body div.sidebar {
@@ -211,39 +149,7 @@ body div.sidebar {
    padding: 0.25em;
    background-color: var(--yj-bg-elevated, #343a40);
    display: grid;
-    /* Three columns whose outer two are the *same* width, which is what
+    grid-template-columns: var(--now-playing-width, 320px) 1fr auto;
       centres the middle one (#23). It was `var(--now-playing-width) 1fr
       auto`, so the transport's centre sat at `W/2 + 140px` — in the
       middle of the space left over, which is not the same thing and
       reads as an alignment mistake at every window size.
       The outer width is still `--now-playing-width`, so **the metadata
       panel's drag handle keeps meaning something**: widening it takes
       room from the transport on both sides at once, symmetrically. An
       `1fr … 1fr` pair would have centred the transport just as well and
       silently made that handle a no-op.
       **The cap is what stops that being a regression**, and it was
       measured as one first. Reserving the full metadata width on both
       sides costs the transport twice: at 800px the outer pair wanted
       640 of 800, and the seek bar's track went from 257px to 61px
       (and to 0 at 200% text) — the control you drag, squeezed out to
       centre the buttons above it. So the side tracks are the metadata
       width *or a quarter of the bar*, whichever is smaller, which
       leaves the drag handle meaningful everywhere it has room to be
       and hands the difference to the transport where it does not.
       `minmax(0, …)` on the outer tracks and `min-content` on the middle
       decide who yields when even that is not enough: the metadata and
       the end group shrink (both truncate; neither loses an action), and
       the transport keeps at least its buttons. Without the `min-content`
       floor the middle collapses first, because a `1fr` track's minimum
       is `auto` only until something else insists. */
    --bar-side: min(var(--now-playing-width, 320px), 25%);
    grid-template-columns:
        minmax(0, var(--bar-side))
        minmax(min-content, 1fr)
        minmax(0, var(--bar-side));
    align-items: center;
    contain: layout style;
@@ -271,44 +177,23 @@ body div.sidebar {
            text-wrap-mode: nowrap;
            overflow: hidden;
-            /* `& p`, not `p`. **A nested rule that begins with a bare
+            p {
               element selector is silently dropped before Chrome 120**
               (relaxed nesting), and the phone this app runs on renders
               in Chrome 113 -- so this ellipsis, and the two rules
               below, have never applied on the device. Nothing fails;
               the text simply overflows there. The `&` form is valid in
               both, which is why it is used for every element selector
               in this file's nested blocks. */
            & p {
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
-    & now-playing {
+    now-playing {
        overflow: hidden;
    }
-    & audio-player {
+    audio-player {
        margin: 0.5em 1em;
        min-width: 0;
    }
    /* The right-hand group, and the thing the left column is matched
       against. It is one grid cell rather than two columns because the
       centring rule above compares *columns*: volume and the queue
       button in separate tracks would make the outer pair unequal by
       whatever the volume happens to measure. */
    .bar-end {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 0.25em;
        min-width: 0;
    }
    #queue-button {
        justify-self: end;
        background: none;
        border: none;
        color: inherit;
@@ -346,14 +231,6 @@ body div.sidebar {
    display: flex;
    overflow: hidden;
    contain: layout style;
    /* The containing block for the queue panel's overlay mode (plan
       018, #24), which spans this box rather than taking width from
       the main panel beside it. `contain: layout` already establishes
       one; this says so on purpose, so that removing the containment
       for a paint reason does not silently reparent the overlay to the
       viewport. */
    position: relative;
 }
 .main-panel {
@@ -412,21 +289,10 @@ body div.sidebar {
   =================================================================== */
@media (max-width: 599px) {
    body {
        /* **There is no top-bar row here (#57).** Every one of the five
           things that bar held has somewhere else to be below 600px:
           `nav-history` is the platform's own gesture (gone from 899
           down), the job indicator is `<job-band>` (#62), the search
           box is a modal opened from the view's own header
           (`search-trigger`), the library filter is Settings ->
           Libraries (#148), and the wordmark is below. That is 3.25em
           of a 439 CSS px viewport -- the single biggest vertical win
           available on the reference device, which is why #57 asks for
           the row rather than for a smaller bar. */
        grid-template:
-            "jobs-band" auto
+            "top-bar" 3.25em
            "main-panel" 1fr
            "bottom-bar" auto
            "progress-line" auto
            "bottom-nav" auto
            / 1fr;
        /* Nothing may scroll sideways here.  On a desktop the shell is
@@ -443,55 +309,40 @@ body div.sidebar {
        grid-area: bottom-nav;
    }
-    /* The bar is out of the layout, and out of it the way the *wordmark*
+    /* The 2em gutters are half a thumb each at this width, and the
-       already goes at desktop widths: visually hidden rather than
+       subtitle is already gone from 900 down.
       `display: none`, because that `h1` is the document's top-level
       heading and this app would otherwise have none on the pages whose
       own header is empty by design (`page-header` renders no `h1` when
       `heading` is '', and Settings has no `page-header` at all).
-       Its four *controls* are `display: none` below, which is what
+       `min-width: 0` is the load-bearing half. A grid item's implicit
-       keeps them out of the tab order -- a visually-hidden container is
+       minimum is `auto` -- its content -- so a header whose children
-       still focusable, and tabbing into a search box nobody can see is
+       ask for 580px makes the *body* 580px wide inside a 360px
-       worse than not having one.
+       viewport, and `overflow-x: hidden` then hides the right-hand
-
+       third of the app rather than fitting it. Every box between the
-       This is `styles/sr-only.css.ts`'s recipe again, written out
+       viewport and the content that must shrink needs this. */
       because that one is a `CSSResult` for shadow roots and this is
       the light DOM. `position: absolute` is also what tells
       `services/top-bar-fit.ts` there is no row to fit into. */
    .top-bar {
-        position: absolute;
+        padding-left: 0.75em;
-        width: 1px;
+        padding-right: 0.75em;
-        height: 1px;
+        gap: 0.5em;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        gap: 0;
        min-width: 0;
        overflow: hidden;
    }
    .top-bar nav-history,
    .top-bar library-filter,
    .top-bar search-bar,
    .top-bar job-indicator {
        display: none;
    }
    /* `min-width: 0` is load-bearing wherever a box sits between the
       viewport and content that must shrink. A grid item's implicit
       minimum is `auto` -- its content -- so one child insisting on
       580px makes the *body* 580px wide inside a 360px viewport, and
       `overflow-x: hidden` then hides the right-hand third of the app
       rather than fitting it. */
    .content-area,
    .main-panel,
    .bottom-bar {
        min-width: 0;
    }
    .title {
        font-size: 1.1em;
    }
    /* The search box is the one header control worth its width; the
       library filter is a rarely-changed setting and reachable from
       the drawer's Settings. */
    .top-bar library-filter {
        display: none;
    }
    /* The full-screen now-playing view *is* the transport, so the bar
       repeating it underneath is 4em of a small screen spent saying
       the same thing twice -- visible in a screenshot, invisible to
@@ -502,18 +353,17 @@ body div.sidebar {
       expression of the same fact is a second thing to keep in step.
       The view carries its own queue button, because this is where
       that one lived. */
-    body:has(#main-content[data-active-view="now-playing"]) .bottom-bar,
+    body:has(#main-content[data-active-view="now-playing"]) .bottom-bar {
    body:has(#main-content[data-active-view="now-playing"]) player-progress-line {
        display: none;
    }
    .top-bar search-bar {
        flex: 1 1 auto;
        min-width: 0;
    }
 }
@media (max-width: 599px) {
    /* The phone keeps the two-part bar it had: metadata, then the
       transport and the queue button. There is no third column to
       balance because the centring the desktop does is a luxury of
       having room — at 360px the metadata needs all of the space the
       controls do not. */
    .bottom-bar {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 0.25em;
@@ -522,107 +372,4 @@ body div.sidebar {
    .bottom-bar audio-player {
        margin: 0.25em;
    }
    /* Volume stands down here whatever the setting says, because this
       is about room: five controls and a slider do not fit a 360px
       bar, and the full-screen now-playing view is where seeking and
       volume go on a phone. It moved from `audio-player`'s own media
       query when #42 moved the control into the bar — same rule, and
       now stated where the element actually is.
       **This rule used to carry the platform argument too, and no
       longer does** (#64). "The hardware keys own the volume" is not a
       width: it is false of a narrow desktop window and true of an
       Android tablet, which this selector gets backwards both ways.
       The player answers it now — `SystemOwnsVolume` — and
       `volume-control` renders nothing when it is true, at every
       width and in both of its mount points. What is left here is the
       question a stylesheet can actually answer. */
    .bottom-bar volume-control {
        display: none;
    }
    /* The queue leaves the phone's bar (#59), because #55 made it a
       screen with an entry in the back stack and Now Playing already
       carries its own button for it. The route is the mini player's
       art -> Now Playing -> the queue, which is the "reachable only
       from Now Playing" this issue asks for.
       This is allowed to remove a control only because the control is
       still reachable: plan 018's matrix promises that no action is
       ever unreachable at any supported size, and that promise is what
       `phone-transport.spec.ts` asserts rather than the button count.
       **`.bottom-bar #queue-button`, not `#queue-button`**, and that is
       not decoration. The rule this overrides is written *nested*
       inside `.bottom-bar`, so it builds to a descendant selector one
       class more specific than it looks in the source -- and a bare
       `#queue-button` here loses to it, media query or not. Being last
       in the file is not enough when the thing above is more specific,
       which is the same lesson as this section's own header one level
       down: nesting adds specificity the source does not show, and the
       failure is silent (the button simply stayed). */
    .bottom-bar #queue-button {
        display: none;
    }
 }
 /* Out of the desktop grid entirely.  `job-band` renders nothing above
   600px anyway, but an in-flow grid child with no named area is
   auto-placed into a row of the shell -- the same trap the skip link is
   absolutely positioned to avoid.  `player-progress-line` (#58) is the
   same element in the same position for the same reason: below 600px it
   has a named row, and above it there is no border for it to sit on --
   the desktop bar carries a real, interactive seek bar. */
 body job-band,
 body player-progress-line {
    display: none;
 }
 /* #62.  The job indicator stands down on the phone, and its work is
   shown in the notification band instead (notification-host).
   Three reasons, and the first is the report: its popover is anchored
   to the top bar, which is 3.25em here on a viewport 439 CSS px tall,
   and it was reported as unreadable behind other UI.  The second is
   that a popover is a disclosure, and background work is the one thing
   a phone should not make you disclose.  The third is #57, which
   deletes this bar entirely and is blocked on the indicator having
   somewhere else to live -- this is that somewhere.
   #57 has since done exactly that, so the indicator's own rule now
   lives with the other three in the phone block above, where the bar
   goes out of the layout in one statement rather than four. What stays
   here is the band, and the argument for it.  */
@media (max-width: 599px) {
    /* The indicator's rows appear here, in the grid row above the content.
       In flow rather than over it: a fixed band reads fine in a
       screenshot and is unusable, because at 424x439 a compact panel
       is ~200px of a 439px screen and it *covers* what is under it.
       Measured, not assumed -- four e2e specs failed on that version,
       two phone-shell journeys and the header's action menu, because
       the panel was intercepting the taps. */
    body job-band {
        display: block;
        grid-area: jobs-band;
        background-color: var(--yj-bg-elevated, #343a40);
    }
 }
 /* #58.  How far through the song we are, in its own grid row between
   the two bars -- so the line is *on* the border rather than inside
   either of them, and in flow rather than over it.  The row is `auto`
   and the element renders nothing while no track is loaded, so it costs
   no height at all until there is something to say.
   **This block is below the `display: none` above and has to be**, for
   the reason the band's rule is: a media query adds no specificity, so
   `body player-progress-line { display: block }` written before that
   rule loses to it at equal specificity and the line never appears at
   any width.  Nothing fails; it is simply not there. */
@media (max-width: 599px) {
    body player-progress-line {
        display: block;
        grid-area: progress-line;
    }
 }
@@ -14,37 +14,16 @@
         user is not walked through the header, the library filter, the
         search box and eleven nav items on every navigation. -->
    <a class="skip-link" href="#main-content">Skip to content</a>
    <!-- Below 600px this bar is not in the layout at all (#57): index.css
         takes its grid row away and leaves the element visually hidden,
         carrying nothing but the `h1` below.  Every control in it has
         somewhere else to be there -- `nav-history` is the platform's
         own back gesture, `job-indicator` is `<job-band>`, `search-bar`
         is `<search-dialog>` opened from the view's own header, and
         `library-filter` is Settings -> Libraries (#148). -->
    <header class="top-bar">
        <hgroup>
            <h1 class="title">YellowJacket</h1>
            <!-- a11y.29: a heading level was being used for type size. -->
            <p class="subtitle">Music how it was meant to bee.</p>
        </hgroup>
        <!-- Global back/forward (#6). Before the library filter so the
             two navigation controls in this bar are adjacent, and after
             the brand because that is where a window's chrome ends and
             the app's begins. Hidden below 600px by index.css: the
             phone has a system back, and this bar has no room. -->
        <nav-history></nav-history>
        <library-filter></library-filter>
        <search-bar></search-bar>
        <job-indicator></job-indicator>
    </header>
    <!-- The phone's view of background work (#62): below 600px the
         indicator above stands down and its rows appear here instead,
         in the layout rather than over it.  `display: none` above that
         width in index.css, which is also what keeps it out of the
         desktop grid -- an in-flow child with no named area is
         auto-placed into one of the shell's rows, which is the trap the
         skip link is absolutely positioned to avoid. -->
    <job-band></job-band>
    <div class="sidebar">
        <app-sidebar></app-sidebar>
    </div>
@@ -55,42 +34,17 @@
        </main>
        <queue-panel id="queue-panel"></queue-panel>
    </div>
    <!-- Three columns, and the outer two are the same width, which is
         what makes the middle one *centred* rather than merely in the
         middle of what is left (#23). The transport used to sit in a
         `320px 1fr auto` grid, so its centre was ~140px right of the
         window's.
         That is also why the volume moved out of `audio-player` and
         into the bar (#42): the transport column has to contain the
         transport and nothing else, or "centred" means centred with a
         slider bolted to one side. It joins the queue button in
         `.bar-end`, whose width is what the left column is matched
         against. -->
    <footer class="bottom-bar">
        <now-playing></now-playing>
        <audio-player></audio-player>
-        <div class="bar-end">
+        <button aria-label="Toggle queue" aria-controls="queue-panel" aria-expanded="false"
-            <volume-control></volume-control>
+            id="queue-button">
-            <button aria-label="Toggle queue" aria-controls="queue-panel" aria-expanded="false"
+            <!-- ICON_QUEUE in src/utils/icon-language.ts, written out
-                id="queue-button">
+                 because this file has no module scope. It was `list`,
-                <!-- ICON_QUEUE in src/utils/icon-language.ts, written out
+                 which is the Playlists destination's icon. -->
-                     because this file has no module scope. It was `list`,
+            <wa-icon name="bars-staggered"></wa-icon>
-                     which is the Playlists destination's icon. -->
+        </button>
                <wa-icon name="bars-staggered"></wa-icon>
            </button>
        </div>
    </footer>
    <!-- How far through the song we are, on the border between the two
         bars (#58). The shell's element rather than either bar's:
         they are separate components stacked in this grid, so a line
         on the border between them is a row of it, and neither one has
         to reach into the other's box for two pixels. It renders
         nothing above 600px and nothing with no track, is `aria-hidden`
         (Now Playing's seek bar is what announces the position) and
         takes no pointer events at all -- a thin line that sometimes
         seeks is worse than one that never does. -->
    <player-progress-line></player-progress-line>
    <!-- The phone's primary navigation, hidden above 600px by
         index.css.  Eager rather than a chunk, for the reason
         notification-host is: it is the only way to move around the
@@ -101,12 +55,6 @@
    <first-run-wizard></first-run-wizard>
    <notification-host></notification-host>
    <shortcuts-overlay></shortcuts-overlay>
    <!-- The phone's search surface (#57).  A singleton here for the
         reason shortcuts-overlay is one: one instance, one document
         listener, and no `data-testid="search-input"` resolving to two
         elements.  It renders nothing while shut, so the header's box
         is still the only one on a desktop. -->
    <search-dialog></search-dialog>
 </body>
 </html>
@@ -18,25 +18,12 @@
 //   track-list — index.html renders one, so it is the first paint.
 // ---------------------------------------------------------------------------
 import '@components/audio-player/audio-player.ts';
 // In the bar rather than inside `audio-player` since #42, so the shell
 // is what has to register it.
 import '@components/audio-player/volume-control/volume-control.ts';
 // The phone's progress line (#58), on the border between the mini
 // player and the tab bar. In the shell for the same reason the volume
 // is, and eager because it is part of the bottom bar's first paint.
 import '@components/audio-player/progress-line/progress-line.ts';
 import '@components/track-list/track-list.ts';
 import '@components/now-playing/now-playing.ts';
 import '@components/sidebar/app-sidebar.ts';
 import '@components/bottom-nav/bottom-nav.ts';
 import '@components/queue-panel/queue-panel.ts';
 import '@components/nav-history/nav-history.ts';
 import '@components/search-bar/search-bar.ts';
 // The phone's search surface (#57). Eager, because below 600px it is
 // the *only* way to search and a modal that has to fetch a chunk before
 // it can take a keystroke is late by exactly the interval it exists to
 // remove. It renders nothing until asked.
 import '@components/search-dialog/search-dialog.ts';
 import '@components/library-filter/library-filter.ts';
 import '@components/first-run-wizard/first-run-wizard.ts';
 import '@components/notifications/notification-host.ts';
@@ -47,19 +34,12 @@ import '@components/confirm-dialog/confirm-dialog.ts';
 // not know what is going on. It costs a dialog and a table.
 import '@components/shortcuts-overlay/shortcuts-overlay.ts';
 import '@components/jobs/job-indicator.ts';
 // The phone's half of the same thing (#62). Eager because it is part
 // of the shell's first paint below 600px, and because a band that has
 // to fetch a chunk before it can say the app is busy is late by
 // exactly the interval it exists to explain.
 import '@components/jobs/job-band.ts';
 import '@awesome.me/webawesome/dist/styles/themes/default.css';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import { setBasePath } from '@awesome.me/webawesome/dist/webawesome.js';
 import { registerBundledIcons } from './src/icons';
 import { queueStore } from '@store/queue-store';
 import { searchStore } from '@store/search-store';
 import { activeViewStore } from '@store/active-view-store';
 import { historyStore } from '@store/history-store';
 import * as Player from '@go/player/player.js';
 import * as Queue from '@go/queue/queue.js';
 import { GetDefaultPage } from '@go/config/config.js';
@@ -70,9 +50,7 @@ import '@store/theme-store';
 // registers the document keydown listener for global shortcuts.
 import './src/services/keyboard-shortcut-service';
 import { activateView, deactivateView } from '@utils/view-lifecycle';
-import { installTouchGestures } from '@utils/touch-gestures';
+import { installLongPressContextMenu } from '@utils/long-press';
 import { openQueue, queuePanelElement } from '@utils/open-queue';
 import { installTopBarFit } from './src/services/top-bar-fit';
 import {
    hasTrackPayload,
    getDragPayload,
@@ -87,21 +65,10 @@ setBasePath('/dist/webawesome');
 // the session.
 registerBundledIcons();
-// Every touch gesture in the app, installed once rather than per
+// The touch equivalent of a right-click, installed once for every menu
-// component (plan 019). Harmless on a desktop: it acts on
+// in the app rather than per component. Harmless on a desktop: it acts
-// `pointerType === 'touch'` only, per event, so a mouse on a
+// on `pointerType === 'touch'` only.
-// touchscreen keeps click-selects / double-click-plays on the very
+installLongPressContextMenu();
 // same row. An unclaimed long press still becomes a `contextmenu`,
 // which is what leaves all fourteen menus untouched by #63.
 installTouchGestures();
 // The top bar decides what it can afford to show (#143). Here rather
 // than in a component because the bar is light DOM in index.html and
 // its children are five separate elements; the shell is the only thing
 // that can see all five at once.
 const topBar = document.querySelector<HTMLElement>('header.top-bar');
 if (topBar) installTopBarFit(topBar);
 // ---------------------------------------------------------------------------
 // View caching navigation system
@@ -131,6 +98,7 @@ const VIEW_TAGS: Record<string, string> = {
    explore: 'explore-view',
    autotag: 'autotag-view',
    downloads: 'downloads-view',
    jobs: 'jobs-view',
    settings: 'config-page',
 };
@@ -148,6 +116,7 @@ const VIEW_LOADERS: Record<string, () => Promise<unknown>> = {
    explore: () => import('@components/explore-view/explore-view.ts'),
    autotag: () => import('@components/autotag-view/autotag-view.ts'),
    downloads: () => import('@components/downloads-view/downloads-view.ts'),
    jobs: () => import('@components/jobs/jobs-view.ts'),
    settings: () => import('@components/config-page/config-page.ts'),
 };
@@ -245,132 +214,49 @@ document.addEventListener('navigate', (e: Event) => {
 // go through `history.back()` rather than popping `navStack`
 // themselves, so one press cannot consume two entries.
-/** The navigation an entry stands for, and where it sits in this
+/** The navigation an entry stands for. `undefined` on the entry that
- *  session's list. `undefined` on the entry that predates the app's own
+ *  predates the app's own routing, which is the one back exits from. */
- *  routing, which is the one back exits from. */
+type NavState = { yjNav?: { view: string; [key: string]: any } };
 type NavState = { yjNav?: { view: string; [key: string]: any }; yjIdx?: number };
 /** Whether the app's first navigation has been recorded. It *replaces*
 *  the launch entry rather than pushing, or every launch would cost one
 *  back press before the app would exit. */
 let historyStarted = false;
-// Back and forward are the *same* `popstate` event -- it carries no
+/** How many entries this session has pushed beyond that first one --
-// direction, and the History API exposes neither the current position
+ *  i.e. how deep back can go while staying inside the app. */
-// nor a reachable depth. So the shell numbers its own entries: the
+let pushedEntries = 0;
 // index of the one showing, and the highest index reachable from here.
 //
 // The counter this replaced (`pushedEntries`, one number decremented on
 // every pop) could not express forward at all: going forward looked
 // exactly like going back again, so two presses of a Forward button
 // would have claimed the app was at its root.
 /** Index of the entry now showing. 0 is the launch entry, which is
 *  replaced rather than pushed -- so this is also how deep back can go
 *  while staying inside the app. */
 let currentIndex = 0;
 /** The highest index reachable from here: how far forward is left.
 *  A new navigation truncates the forward list, exactly as a browser
 *  does, so this is reset to the entry being pushed. */
 let maxIndex = 0;
 function publishDepth(): void {
    historyStore.setDepth(currentIndex > 0, currentIndex < maxIndex);
 }
 function recordNavigation(detail: { view: string; [key: string]: any }): void {
-    // `_isBack` and `_replace` are bookkeeping, not destination: keeping
+    // `_isBack` is bookkeeping, not destination: keeping it in the entry
-    // either in the entry would make a replayed navigation claim to be
+    // would make a replayed navigation claim to be a back-navigation.
-    // one.
+    const { _isBack: _ignored, ...nav } = detail;
-    const { _isBack: _ignored, _replace: replace, ...nav } = detail;
+    const state: NavState = { yjNav: nav };
    // Still launching: the configured landing page is not a navigation
    // *away* from the eager one, it is the same arrival arriving late
    // (#142). Pushing it left the app one entry deep before the user
    // had touched anything, so the first back press replayed home over
    // home -- invisible on desktop until #6 drew a Back button, and on
    // Android the press that should have exited the app instead did
    // nothing, because `canGoBack()` was true.
    //
    // Guarded on being at the root rather than on a flag, because
    // `GetDefaultPage()` is a backend call and the user can navigate
    // while it is in flight: past index 0 this is an ordinary
    // navigation, or a slow answer would overwrite an entry they made.
    if (historyStarted && replace && currentIndex === 0) {
        history.replaceState({ yjNav: nav, yjIdx: 0 }, '');
        maxIndex = 0;
        publishDepth();
        return;
    }
    // Same URL, deliberately: the app has no routes, and a path a
    // reload cannot resolve is worse than no path at all.
    if (historyStarted) {
-        currentIndex += 1;
+        history.pushState(state, '');
-        // Navigating from the middle of the list drops what was ahead
+        pushedEntries += 1;
        // of it -- there is no longer a forward to go to.
        maxIndex = currentIndex;
        history.pushState({ yjNav: nav, yjIdx: currentIndex }, '');
    } else {
-        currentIndex = 0;
+        history.replaceState(state, '');
        maxIndex = 0;
        history.replaceState({ yjNav: nav, yjIdx: 0 }, '');
        historyStarted = true;
    }
    publishDepth();
 }
 window.addEventListener('popstate', (e: PopStateEvent) => {
-    const state = e.state as NavState | null;
+    const nav = (e.state as NavState | null)?.yjNav;
    const nav = state?.yjNav;
    // Before the app's first navigation, or an entry somebody else
    // pushed: nothing to restore, and the activity should be free to
    // finish.
    if (!nav) return;
-    // The entry says where it is, so this works in both directions and
+    pushedEntries = Math.max(0, pushedEntries - 1);
    // across a jump of more than one -- which a long-press on a
    // browser's back button, and `history.go(-n)`, both produce.
    // The fallback is for an entry pushed before this numbering
    // existed; it can only be wrong about a control's disabled state,
    // never about which view is restored.
    currentIndex = state?.yjIdx ?? Math.max(0, currentIndex - 1);
    publishDepth();
    void handleNavigate({ ...nav, _isBack: true });
 });
 /**
 * The queue, while it is a screen (#55).
 *
 * It is *not* in `VIEW_TAGS` and *not* in `DETAIL_LOADERS`: there is
 * nothing to mount, because the panel is already in the document and,
 * as an overlay, already occupies `.main-panel`'s rect exactly. What a
 * navigation adds is the two things that make a screen a screen — a
 * history entry, so the platform's back gesture answers it, and a
 * destination to leave, so navigating anywhere else takes it away.
 *
 * Keeping it out of both tables is what keeps its context menu working
 * on the reference device: `.main-panel > *` is paint-contained and a
 * `wa-popup` falls back to `position: fixed` on Chrome 113, which
 * escapes overflow but not containment (#60). The panel stays in
 * `.content-area`, which is not paint-contained, exactly as it is
 * today.
 */
 const QUEUE_VIEW = 'queue';
 /** Close a queue that is being navigated away from. A *column* is not
 *  a place, so it survives a navigation the way the sidebar does. */
 function dismissQueueScreen(): void {
    const panel = queuePanelElement();
    if (panel?.hasAttribute('overlay')) panel.removeAttribute('open');
 }
 async function handleNavigate(
    detail: { view: string; [key: string]: any },
 ): Promise<void> {
@@ -382,25 +268,6 @@ async function handleNavigate(
    if (!detail._isBack) recordNavigation(detail);
    if (view === QUEUE_VIEW) {
        // The shell says where the user is; `false` because the queue is
        // not a primary view, so nothing in either nav lights while it
        // is up -- the same rule a detail view gets, and the reason the
        // tab the queue was opened from stays lit.
        activeViewStore.setView(view, false);
        queuePanelElement()?.setAttribute('open', '');
        // Deliberately not `searchStore.setCurrentView` and not
        // `dataset.activeView`: both describe what is *in the main
        // panel*, and the queue covers that panel without replacing it.
        // Overwriting either would disable the search box belonging to
        // the page underneath and make every `data-active-view`
        // selector in the suite disagree with the element it names.
        return;
    }
    dismissQueueScreen();
    // Bookkeeping stays synchronous with the click: the search box's
    // scope and the active-view attribute describe the navigation that
    // was *asked for*, and are what the rest of the app and the e2e
@@ -412,20 +279,6 @@ async function handleNavigate(
    // attribute keeps e2e selectors semantic instead of structural.
    mainContent.dataset.activeView = view;
    // And publishing it as a *value* is what the nav components read.
    // They used to learn the active view from the `navigate` event,
    // which only the outbound path dispatches -- so a back-navigation
    // left both of them highlighting the view it had just left (#72).
    // Re-dispatching `navigate` here is not the fix: this file is a
    // document listener for it, so that is an infinite loop, and
    // "please go to X" is not the statement being made.
    //
    // `view in VIEW_TAGS` is the primary/detail split, and it is passed
    // rather than re-derived because this table is where it is written
    // down.  A detail view therefore leaves the tab it was opened from
    // lit, which is what the report asks for.
    activeViewStore.setView(view, view in VIEW_TAGS);
    // --- Primary (cacheable) views ----------------------------------------
    if (view in VIEW_TAGS) {
        // Remove any active detail view first
@@ -644,18 +497,7 @@ function schedule(fn: () => void): void {
 // anyway would leave the app: the depth check is what stops a stray
 // `navigate-back` closing it.
 document.addEventListener('navigate-back', () => {
-    if (currentIndex > 0) history.back();
+    if (pushedEntries > 0) history.back();
 });
 // Forward: the other half of #6. The stack was always global -- every
 // navigation is an entry and `popstate` restores any of them -- so what
 // was missing is a way to ask for one, and a truthful answer to whether
 // there is one to ask for. It is guarded for the same reason back is:
 // `history.forward()` at the end of the list is silent, so a button
 // that offers it when there is nothing there is a button that does
 // nothing.
 document.addEventListener('navigate-forward', () => {
    if (currentIndex < maxIndex) history.forward();
 });
 // Navigate to the user's configured launch page.  Falls back to 'home'
@@ -665,17 +507,14 @@ GetDefaultPage()
        document.dispatchEvent(new CustomEvent('navigate', {
            bubbles: true,
            composed: true,
-            // Part of launching, not a navigation away from the eager
+            detail: { view: view || 'home' },
            // 'home' above: it replaces that entry rather than
            // stacking on it (#142).
            detail: { view: view || 'home', _replace: true },
        }));
    })
    .catch(() => {
        document.dispatchEvent(new CustomEvent('navigate', {
            bubbles: true,
            composed: true,
-            detail: { view: 'home', _replace: true },
+            detail: { view: 'home' },
        }));
    });
@@ -685,17 +524,13 @@ const queuePanel = document.getElementById('queue-panel') as HTMLElement | null;
 if (queueButton && queuePanel) {
    queueButton.addEventListener('click', () => {
-        if (queuePanel.hasAttribute('open')) {
+        const isOpen = queuePanel.hasAttribute('open');
-            // Closing goes through the panel either way; where the queue
+
-            // is a screen the observer below is what unwinds its history
+        if (isOpen) {
            // entry, so this button, Escape, the scrim and the close
            // button all take the same route out.
            queuePanel.removeAttribute('open');
-
+        } else {
-            return;
+            queuePanel.setAttribute('open', '');
        }
        openQueue();
    });
    // The button says whether the panel is open, and it learns that
@@ -713,39 +548,7 @@ if (queueButton && queuePanel) {
        );
    };
-    /**
+    new MutationObserver(reflectQueueState).observe(queuePanel, {
     * Keep the back stack honest about a queue that closed itself.
     *
     * Where the queue is a screen its `open` attribute and the current
     * history entry are two statements of one fact, and the panel can
     * change its half on its own -- Escape, the scrim, the close button,
     * and anything added later. Reconciling here rather than at each of
     * those is the same reason this observer already exists for
     * `aria-expanded`: the attribute is the one fact, and a state kept
     * beside a click is right until something else changes it.
     *
     * Without this the entry is orphaned and the *next* back press is
     * the one that closes the queue -- a press that appears to do
     * nothing, which is the defect this issue is about, moved one press
     * later.
     *
     * `history.back()` rather than a stack of our own, for the reason
     * `navigate-back` does: two stacks is how a component's own way out
     * and the phone's gesture come to disagree about what one press
     * means.
     */
    const reconcileQueueHistory = () => {
        if (queuePanel.hasAttribute('open')) return;
        const state = history.state as NavState | null;
        if (state?.yjNav?.view === QUEUE_VIEW) history.back();
    };
    new MutationObserver(() => {
        reflectQueueState();
        reconcileQueueHistory();
    }).observe(queuePanel, {
        attributes: true,
        attributeFilter: ['open'],
    });
@@ -23,23 +23,97 @@
 * as the literal contains an unterminated `/*`. Nothing else produces
 * that, and a legitimate literal cannot contain one.
 */
-import { globSync, readFileSync } from 'node:fs';
+import { readFileSync } from 'node:fs';
-
+import { globSync } from 'node:fs';
 import { taggedLiterals } from './css-literals.mjs';
 const TAGS = ['css', 'html', 'svg'];
 /**
 * Find the end of a template literal that starts at `start` (the index
 * of its opening backtick), respecting escapes and `${}` substitutions.
 * Returns the index of the closing backtick, or -1.
 */
 function endOfTemplate(src, start) {
  let depth = 0;
  for (let i = start + 1; i < src.length; i++) {
    const c = src[i];
    if (c === '\\') {
      i++;
      continue;
    }
    if (c === '$' && src[i + 1] === '{') {
      depth++;
      i++;
      continue;
    }
    if (c === '}' && depth > 0) {
      depth--;
      continue;
    }
    if (c === '`' && depth === 0) return i;
  }
  return -1;
 }
 /** Strip `${...}` substitutions, which may legitimately contain anything. */
 function stripSubstitutions(text) {
  let out = '';
  let depth = 0;
  for (let i = 0; i < text.length; i++) {
    if (text[i] === '$' && text[i + 1] === '{') {
      depth++;
      i++;
      continue;
    }
    if (text[i] === '}' && depth > 0) {
      depth--;
      continue;
    }
    if (depth === 0) out += text[i];
  }
  return out;
 }
 function lineOf(src, index) {
  return src.slice(0, index).split('\n').length;
 }
 const files = globSync('src/**/*.ts', { cwd: process.cwd() });
 const problems = [];
 for (const file of files) {
  const src = readFileSync(file, 'utf8');
  const tagPattern = new RegExp(`(^|[^\\w$.])(${TAGS.join('|')})\``, 'g');
-  for (const { tag, body, line } of taggedLiterals(src, TAGS)) {
+  let match;
  while ((match = tagPattern.exec(src)) !== null) {
    const open = match.index + match[0].length - 1;
    const close = endOfTemplate(src, open);
    if (close === -1) continue;
    const body = stripSubstitutions(src.slice(open + 1, close));
    const opens = (body.match(/\/\*/g) ?? []).length;
    const closes = (body.match(/\*\//g) ?? []).length;
-    if (opens > closes) problems.push({ file, line, tag });
+    if (opens > closes) {
      problems.push({
        file,
        line: lineOf(src, open),
        tag: match[2],
      });
    }
  }
 }
@@ -1,79 +0,0 @@
 #!/usr/bin/env node
 /**
 * Fail on a nested rule whose selector starts with an element name.
 *
 * See `css-nesting.mjs` for what the phone does with one. No tier here
 * can see it: the component tier, the e2e tier and `make ui-visual` all
 * run a current Chromium, where the rule applies normally, so the only
 * report is a screenshot of the device — which is how the bottom bar's
 * title came to have never truncated there.
 *
 * It covers `index.css` and the `css` literals in the components alike,
 * because a shadow-root stylesheet is parsed by the same engine.
 */
 import { globSync, readFileSync } from 'node:fs';
 import { taggedLiterals } from './css-literals.mjs';
 import { findBareNestedRules } from './css-nesting.mjs';
 const problems = [];
 // Every stylesheet, not `index.css` by name: the hook that runs this
 // fires on `frontend/**/*.{ts,css}`, so naming one file promises a
 // coverage the sweep does not deliver -- a second stylesheet would be
 // silently unswept while the hook still went green over it. There is
 // only `index.css` today, which is exactly when this is free to fix.
 const stylesheets = globSync('*.css', { cwd: process.cwd() });
 if (stylesheets.length === 0) {
  console.error('css-nesting-check: no stylesheet matched *.css');
  process.exit(1);
 }
 for (const file of stylesheets) {
  for (const { line, selector } of findBareNestedRules(
    readFileSync(file, 'utf8'),
  )) {
    problems.push({ file, line, selector });
  }
 }
 const sources = globSync('src/**/*.ts', { cwd: process.cwd() });
 // A sweep over an empty glob passes, and this one is expected to find
 // nothing, so "it found nothing" has to mean it looked.
 if (sources.length === 0) {
  console.error('css-nesting-check: no sources matched src/**/*.ts');
  process.exit(1);
 }
 for (const file of sources) {
  const src = readFileSync(file, 'utf8');
  for (const literal of taggedLiterals(src, ['css'])) {
    for (const { line, selector } of findBareNestedRules(literal.body)) {
      problems.push({ file, line: literal.line + line - 1, selector });
    }
  }
 }
 if (problems.length > 0) {
  for (const p of problems) {
    console.error(
      `${p.file}:${p.line}: nested rule "${p.selector.split('\n')[0]}" starts ` +
        'with an element name — write it as "& ' +
        `${p.selector.split('\n')[0]}"`,
    );
  }
  console.error(
    `\ncss-nesting-check: ${problems.length} problem(s). ` +
      'Chrome 113 (the device) drops a nested rule that does not start ' +
      'with a symbol; the leading & is valid in both syntaxes.',
  );
  process.exit(1);
 }
 console.log(
  `css-nesting-check: ${stylesheets.length} stylesheet(s) + ${sources.length} files, no bare nested rules`,
 );
@@ -1,103 +0,0 @@
 /**
 * Finding the `css` tagged templates in a TypeScript source.
 *
 * Two checks read them — the unterminated-comment one and the nesting
 * one — and a second scanner would be a second thing to keep in step
 * with how a template literal actually ends.
 */
 /**
 * Find the end of a template literal that starts at `start` (the index
 * of its opening backtick), respecting escapes and `${}` substitutions.
 * Returns the index of the closing backtick, or -1.
 */
 export function endOfTemplate(src, start) {
  let depth = 0;
  for (let i = start + 1; i < src.length; i++) {
    const c = src[i];
    if (c === '\\') {
      i++;
      continue;
    }
    if (c === '$' && src[i + 1] === '{') {
      depth++;
      i++;
      continue;
    }
    if (c === '}' && depth > 0) {
      depth--;
      continue;
    }
    if (c === '`' && depth === 0) return i;
  }
  return -1;
 }
 /**
 * Strip `${...}` substitutions, which may legitimately contain anything.
 *
 * Newlines inside them are kept, so a line number taken from the
 * stripped text still names the right line of the file it came from.
 */
 export function stripSubstitutions(text) {
  let out = '';
  let depth = 0;
  for (let i = 0; i < text.length; i++) {
    if (text[i] === '$' && text[i + 1] === '{') {
      depth++;
      i++;
      continue;
    }
    if (text[i] === '}' && depth > 0) {
      depth--;
      continue;
    }
    if (depth === 0) out += text[i];
    else if (text[i] === '\n') out += '\n';
  }
  return out;
 }
 /** The 1-based line number of `index` in `src`. */
 export function lineOf(src, index) {
  return src.slice(0, index).split('\n').length;
 }
 /**
 * Every tagged template literal in `src` whose tag is in `tags`.
 *
 * `body` has its substitutions stripped and `line` is the line its
 * opening backtick sits on, so `line + (n - 1)` is the file line of the
 * body's own line `n`.
 */
 export function taggedLiterals(src, tags) {
  const pattern = new RegExp(`(^|[^\\w$.])(${tags.join('|')})\``, 'g');
  const found = [];
  let match;
  while ((match = pattern.exec(src)) !== null) {
    const open = match.index + match[0].length - 1;
    const close = endOfTemplate(src, open);
    if (close === -1) continue;
    found.push({
      tag: match[2],
      body: stripSubstitutions(src.slice(open + 1, close)),
      line: lineOf(src, open),
    });
  }
  return found;
 }
@@ -1,119 +0,0 @@
 /**
 * A nested rule whose selector starts with an element name is silently
 * dropped on the phone.
 *
 * The device renders in Chrome 113, which predates relaxed CSS nesting
 * (Chrome 120): before that a nested selector had to start with
 * something that could not be read as the beginning of a declaration,
 * so `.bottom-bar { audio-player { … } }` is not a parse error anyone
 * would notice — the inner rule simply does not exist, on the phone and
 * only on the phone. Three were live in `index.css`, one of them the
 * `text-overflow: ellipsis` on the bottom bar's title, which had
 * therefore never truncated on the device.
 *
 * `& audio-player` is valid in both syntaxes, so no nested rule here
 * has any reason to omit it.
 *
 * Two things the detection has to get right:
 *
 * - **A rule directly inside an at-rule is not nested.**
 *   `@media (…) { bottom-nav { … } }` at the top level is an ordinary
 *   rule and is fine — and it is the majority of the matches a regex
 *   over the file would produce. What decides it is whether a *style*
 *   rule is somewhere above, not what the immediate parent is: inside
 *   `.bar { @media (…) { audio-player { … } } }` the inner rule is
 *   nested, at-rule in between or not.
 * - **A declaration is not a rule.** `background: url(…)` and any
 *   string or comment can hold a brace, so this tracks them rather than
 *   matching lines.
 */
 /** Does this selector start with an identifier, rather than a symbol? */
 function startsWithIdent(selector) {
  return /^[A-Za-z_\u00A0-\uFFFF]/.test(selector);
 }
 /**
 * Every nested style rule in `css` whose selector starts with an
 * element name, as `{ line, selector }` with a 1-based line.
 */
 export function findBareNestedRules(css) {
  const found = [];
  /** The blocks we are inside, innermost last: 'style' or 'at'. */
  const stack = [];
  /** The text since the last `{`, `}` or `;` — a prelude, if a `{` follows. */
  let prelude = '';
  let preludeLine = 1;
  let line = 1;
  const startPrelude = () => {
    prelude = '';
    preludeLine = line;
  };
  for (let i = 0; i < css.length; i++) {
    const c = css[i];
    if (c === '\n') {
      line++;
      if (prelude.trim() === '') preludeLine = line;
      prelude += c;
      continue;
    }
    if (c === '/' && css[i + 1] === '*') {
      const end = css.indexOf('*/', i + 2);
      const comment = css.slice(i, end === -1 ? css.length : end + 2);
      line += (comment.match(/\n/g) ?? []).length;
      i += comment.length - 1;
      if (prelude.trim() === '') preludeLine = line;
      continue;
    }
    if (c === '"' || c === "'") {
      let j = i + 1;
      while (j < css.length && css[j] !== c) {
        if (css[j] === '\\') j++;
        j++;
      }
      prelude += css.slice(i, j + 1);
      i = j;
      continue;
    }
    if (c === '{') {
      const selector = prelude.trim();
      const kind = selector.startsWith('@') ? 'at' : 'style';
      if (
        kind === 'style' &&
        stack.includes('style') &&
        startsWithIdent(selector)
      ) {
        found.push({ line: preludeLine, selector });
      }
      stack.push(kind);
      startPrelude();
      continue;
    }
    if (c === '}') {
      stack.pop();
      startPrelude();
      continue;
    }
    if (c === ';') {
      startPrelude();
      continue;
    }
    prelude += c;
  }
  return found;
 }
@@ -1 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l370.7 0-105.4 105.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
@@ -1 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M0 256a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm168 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm224-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/></svg>
@@ -14,7 +14,6 @@ import {
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@components/cover-grid/cover-grid.js';
 import { designTokens } from '../../styles/tokens.css';
 import { backButton } from '../../styles/back-button.css';
@customElement('artist-details')
 export class ArtistDetails extends LitElement {
@@ -41,7 +40,7 @@ export class ArtistDetails extends LitElement {
    /** Tracks the store's cached array reference to detect refreshes. */
    private lastAlbumsRef: library.Album[] | null = null;
-    static override styles = [designTokens, backButton, css`
+    static override styles = [designTokens, css`
        :host {
            display: flex;
            flex-direction: column;
@@ -67,6 +66,31 @@ export class ArtistDetails extends LitElement {
                );
        }
        .back-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 50%;
            background: var(
                --yj-bg-overlay,
                rgba(255, 255, 255, 0.06)
            );
            color: var(--yj-text-primary, #fff);
            cursor: pointer;
            flex-shrink: 0;
            transition: background-color 0.15s ease;
        }
        .back-button:hover {
            background: var(
                --yj-bg-hover,
                rgba(255, 255, 255, 0.12)
            );
        }
        .back-button wa-icon {
            font-size: 16px; /* back button — outside type scale */
        }
@@ -26,15 +26,14 @@ import {
    contextMenuStyles,
    isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost } from '@utils/context-menu-controller.js';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { ViewLifecycleMixin } from '@utils/view-lifecycle';
 import { RovingGridController } from '@utils/roving-grid';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
-import type { MenuSurface } from '../menu-surface/menu-surface';
+import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
 import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@components/playlist-picker/playlist-picker.js';
 import { dict, list } from '@utils/binding';
@@ -132,17 +131,17 @@ export class ArtistsView
    private contextMenuArtistId: number | null = null;
    @query('#context-menu')
-    private contextMenuPopup!: MenuSurface;
+    private contextMenuPopup!: WaPopup;
    @query('#playlist-submenu')
-    private playlistSubmenuPopup!: MenuSurface;
+    private playlistSubmenuPopup!: WaPopup;
-    getContextMenuPopup(): MenuTarget | undefined {
+    getContextMenuPopup(): WaPopup | undefined {
        return this.contextMenuPopup;
    }
    getPlaylistSubmenuPopup():
-        | MenuTarget
+        | WaPopup
        | undefined {
        return this.playlistSubmenuPopup;
    }
@@ -1337,8 +1336,11 @@ export class ArtistsView
    private renderContextMenu() {
        return html`
-            <menu-surface
+            <wa-popup
                id="context-menu"
                placement="bottom-start"
                flip
                shift
                .active=${this.ctxMenu
                    .contextMenuOpen}
            >
@@ -1432,12 +1434,13 @@ export class ArtistsView
                          </div>
                      `
                    : nothing}
-            </menu-surface>
+            </wa-popup>
-            <menu-surface
+            <wa-popup
                id="playlist-submenu"
                label="Add to playlist"
                placement="right-start"
                flip
                shift
                .active=${this.ctxMenu
                    .playlistSubmenuOpen}
            >
@@ -1465,7 +1468,7 @@ export class ArtistsView
                          </div>
                      `
                    : nothing}
-            </menu-surface>
+            </wa-popup>
        `;
    }
@@ -3,6 +3,7 @@ import { customElement } from 'lit/decorators.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import './controls/player-controls';
 import './seekbar/seek-bar';
 import './volume-control/volume-control';
 import '../notifications/inline-notice';
 import { PlayerRegion } from '@store/player-store';
 import { designTokens } from '../../styles/tokens.css';
@@ -29,7 +30,6 @@ export class AudioPlayer extends LitElement {
    .player-main {
      flex: 1;
      min-width: 0;
    }
    /* The phone transport (plan 016 B2): the buttons, and nothing
@@ -37,17 +37,14 @@ export class AudioPlayer extends LitElement {
       viewport, not by the host, so this is the component saying what
       it drops at phone width rather than the shell reaching in.
       Volume goes because the hardware keys own it on a phone --
       Android routes them to the media stream, which is also why
       mediacontrols' Android handler implements no volume callback.
       The seek bar goes because a 4px-tall target dragged with a thumb
       is not a seek control; seeking belongs to the full-screen
-       now-playing view.
+       now-playing view, which is the next phase. */
       Volume used to go from here too, and now goes from index.css
       instead: #42 moved the control out of this component and into
       the bar, so the shell is what can hide it. The reason is
       unchanged -- the hardware keys own volume on a phone, which is
       also why mediacontrols' Android handler implements no volume
       callback. */
    @media (max-width: 599px) {
      volume-control,
      seek-bar {
        display: none;
      }
@@ -68,6 +65,7 @@ export class AudioPlayer extends LitElement {
            <seek-bar></seek-bar>
          </div>
        </div>
        <volume-control></volume-control>
      </div>
    `;
  }
@@ -1,77 +1,22 @@
-import { LitElement, html, css, nothing } from 'lit';
+import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import { PlayerController } from '@store/controllers/player-controller';
 import { queueStore } from '@store/queue-store';
 import type { RepeatMode } from '@store/queue-store';
 import { designTokens } from '../../../styles/tokens.css';
 import { PHONE_QUERY } from '../../../utils/breakpoints';
 /**
 * The transport, in the two places it appears.
 *
 * **The context is a property and cannot be a media query**, which is
 * the whole reason this exists (#56). Everywhere else in this app a
 * component states what it drops at phone width itself, because a media
 * query inside a shadow root is answered by the viewport and that is
 * the honest signal. Here the two hosts want *different* answers at the
 * *same* viewport: on a phone the bottom bar wants three controls sized
 * for a thumb, and `now-playing-view` wants five, larger still. So the
 * host says which context and the viewport says which size band, and
 * neither one alone can express it.
 *
 * Measured at the reference device's 424x439 before this: every button
 * here was **33x21px**, in both places, which is what #56 reports as
 * "the most important thing in the mobile app and they are tiny".
 */
 export type ControlsContext = 'bar' | 'full';
@customElement('player-controls')
 export class PlayerControls extends LitElement {
  private player = new PlayerController(this);
  private unsubscribeQueue?: () => void;
  /**
   * Where these controls are drawn. `bar` is the bottom bar in both
   * bands; `full` is the full-screen transport.
   *
   * Reflected so a spec can read it and so the stylesheet keys off one
   * fact rather than a class the host has to remember to set.
   */
  @property({ type: String, reflect: true })
  context: ControlsContext = 'bar';
  @state() private shuffleMode = false;
  @state() private repeatMode: RepeatMode = 'off';
  /**
   * Phone width, from `matchMedia` rather than from a media query,
   * because what it decides is whether shuffle and repeat *exist* here
   * — and a stylesheet can only decide whether they are painted.
   * `job-band` and `search-trigger` are the same pattern for the same
   * reason.
   */
  @state() private phone = false;
  private media?: MediaQueryList;
  private onMedia = (e: MediaQueryListEvent) => {
    this.phone = e.matches;
  };
  /** Whether this is the phone's bottom bar, which carries three
   *  controls rather than five. */
  private get slim(): boolean {
    return this.context === 'bar' && this.phone;
  }
  override connectedCallback(): void {
    super.connectedCallback();
    this.media = window.matchMedia(PHONE_QUERY);
    this.phone = this.media.matches;
    this.media.addEventListener('change', this.onMedia);
    const s = queueStore.getState();
    this.shuffleMode = s.shuffleMode;
    this.repeatMode = s.repeatMode;
@@ -92,7 +37,6 @@ export class PlayerControls extends LitElement {
  override disconnectedCallback(): void {
    super.disconnectedCallback();
    this.unsubscribeQueue?.();
    this.media?.removeEventListener('change', this.onMedia);
  }
  static override styles = [designTokens, css`
@@ -114,99 +58,6 @@ export class PlayerControls extends LitElement {
      justify-content: center;
    }
    /* ---------------------------------------------------------------
       Sizes (#56).
       44px is the floor everything here is sized to, and play/pause
       alone goes above it -- "large play/pause, adequate prev/next" is
       the Direction, and it is the one control the report calls "front
       and centre".
       They are stated as custom properties rather than on each button
       so a context sets two numbers instead of five rules, and so the
       icon scales with its target: a 44px box around a 16px glyph is a
       big hit area that still looks tiny, which is half of what the
       report is about.
       **The desktop bar sets none of them and must not change at all.**
       #56 is an Android issue; the desktop's buttons are 33x21 before
       this and are 33x21 after it.
       That is why the box rules take a zero fallback and the *font-size*
       rules are scoped to the two contexts instead of sharing them. A
       button does not inherit its font from its parent -- the UA
       stylesheet gives it one -- so a generic font-size: inherit is
       not the no-op it reads as: it moved the desktop's buttons from
       33x21 to 36x24, silently, by taking them from the UA's 13.3px to
       the shell's 16px. Measured before and after by stashing this
       file, which is the only way that particular 3px shows up.
       --------------------------------------------------------------- */
    button {
      min-width: var(--yj-control-target, 0);
      min-height: var(--yj-control-target, 0);
    }
    button.play {
      min-width: var(--yj-control-play-target, 0);
      min-height: var(--yj-control-play-target, 0);
    }
    /* The phone's bottom bar: three controls, sized for a thumb.
       Shuffle and repeat are not here -- see the render method, which
       does not draw them rather than hiding them, because a control
       that is display:none is still a thing the component claims to
       have. They are on the full-screen view, which is one tap away
       through the mini player's art (#59). */
    @media (max-width: 599px) {
      :host([context='bar']) {
        --yj-control-target: 44px;
        --yj-control-icon: 18px;
        --yj-control-play-target: 56px;
        --yj-control-play-icon: 24px;
      }
      :host([context='bar']) button {
        font-size: var(--yj-control-icon);
      }
      :host([context='bar']) button.play {
        font-size: var(--yj-control-play-icon);
      }
    }
    /* The full-screen transport, at every width: this view *is* the
       player, so the controls are the page rather than a strip of it. */
    :host([context='full']) {
      --yj-control-target: 44px;
      --yj-control-icon: 20px;
      --yj-control-play-target: 64px;
      --yj-control-play-icon: 28px;
    }
    :host([context='full']) button {
      font-size: var(--yj-control-icon);
    }
    :host([context='full']) button.play {
      font-size: var(--yj-control-play-icon);
    }
    :host([context='full']) #player-control-buttons {
      gap: 12px;
    }
    /* Secondary controls sit below the primary row rather than beside
       it, which is the Direction's shape and is why this is a second
       group in the DOM instead of a CSS order property: visual order
       and focus order have to agree. */
    .secondary {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px;
      margin-top: 8px;
    }
    button:hover {
      color: var(--yj-accent-text, #ffd43b);
    }
@@ -253,107 +104,46 @@ export class PlayerControls extends LitElement {
    queueStore.cycleRepeat();
  };
-  /** Shuffle. Secondary: it changes how the queue behaves rather than
+  override render() {
-   *  what is playing now. */
+    const playOrPauseIcon = this.player.isPlaying ? 'pause' : 'play';
-  private renderShuffle() {
+    const playOrPauseHandler = this.player.isPlaying
-    return html`
+      ? this.handlePauseClick
-      <button
+      : this.handlePlayClick;
        class=${this.shuffleMode ? 'active' : ''}
        aria-label="Shuffle"
        aria-pressed=${this.shuffleMode}
        @click=${this.handleShuffleClick}
      >
        <wa-icon name="shuffle"></wa-icon>
      </button>
    `;
  }
-  /** Repeat, whose label spells the mode out because one icon covers
+    const shuffleClass = this.shuffleMode ? 'active' : '';
   *  three states. */
  private renderRepeat() {
    const repeatMode = this.repeatMode;
    const repeatClasses = [
      repeatMode !== 'off' ? 'active' : '',
      repeatMode === 'one' ? 'repeat-one' : '',
    ].filter(Boolean).join(' ');
    return html`
      <button
        class=${repeatClasses}
        aria-label=${`Repeat: ${repeatMode}`}
        aria-pressed=${repeatMode !== 'off'}
        @click=${this.handleRepeatClick}
      >
        <wa-icon name="repeat"></wa-icon>
      </button>
    `;
  }
  /** Previous, play/pause, next — the three that are always drawn, in
   *  every context and at every width. Only play/pause takes the large
   *  size: the Direction asks for "large play/pause, adequate
   *  prev/next", and a row of identical squares says every action here
   *  is equally likely, which is not true of play. */
  private renderPrimary() {
    const playOrPauseIcon = this.player.isPlaying ? 'pause' : 'play';
    const playOrPauseHandler = this.player.isPlaying
      ? this.handlePauseClick
      : this.handlePlayClick;
    return html`
      <button
        aria-label="Previous track"
        @click=${this.handlePreviousClick}
      >
        <wa-icon name="backward-step"></wa-icon>
      </button>
      <button
        class="play"
        aria-label=${this.player.isPlaying ? 'Pause' : 'Play'}
        @click="${playOrPauseHandler}"
      >
        <wa-icon name=${playOrPauseIcon}></wa-icon>
      </button>
      <button
        aria-label="Next track"
        @click=${this.handleNextClick}
      >
        <wa-icon name="forward-step"></wa-icon>
      </button>
    `;
  }
  /**
   * Two arrangements, not two components.
   *
   * `bar` keeps the order it has always had — shuffle, prev, play,
   * next, repeat, one row — so nothing about the desktop bar moves.
   * `full` puts the primary three on their own row with the secondary
   * pair beneath, which the Direction asks for.
   *
   * **The phone's bar draws three buttons rather than hiding two.** A
   * `display: none` control is still in the component's shadow root,
   * still in the accessibility tree's markup, and still something a
   * `shadowAll('button')[4]` finds — so "the phone has three controls"
   * would be true of the pixels and false of the element. They are
   * reachable on the full-screen view, which the mini player's art
   * opens, and through the global shortcuts.
   */
  override render() {
    if (this.context === 'full') {
      return html`
        <div id="player-control-buttons">${this.renderPrimary()}</div>
        <div class="secondary">
          ${this.renderShuffle()}${this.renderRepeat()}
        </div>
      `;
    }
    return html`
      <div id="player-control-buttons">
-        ${this.slim ? nothing : this.renderShuffle()}
+        <button
-        ${this.renderPrimary()}
+          class=${shuffleClass}
-        ${this.slim ? nothing : this.renderRepeat()}
+          aria-label="Shuffle"
          aria-pressed=${this.shuffleMode}
          @click=${this.handleShuffleClick}
        >
          <wa-icon name="shuffle"></wa-icon>
        </button>
        <button aria-label="Previous track" @click=${this.handlePreviousClick}>
          <wa-icon name="backward-step"></wa-icon>
        </button>
        <button aria-label=${this.player.isPlaying ? 'Pause' : 'Play'} @click="${playOrPauseHandler}">
          <wa-icon name=${playOrPauseIcon}></wa-icon>
        </button>
        <button aria-label="Next track" @click=${this.handleNextClick}>
          <wa-icon name="forward-step"></wa-icon>
        </button>
        <button
          class=${repeatClasses}
          aria-label=${`Repeat: ${repeatMode}`}
          aria-pressed=${repeatMode !== 'off'}
          @click=${this.handleRepeatClick}
        >
          <wa-icon name="repeat"></wa-icon>
        </button>
      </div>
    `;
  }
@@ -1,204 +0,0 @@
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { PlayerController } from '@store/controllers/player-controller';
 import { designTokens } from '../../../styles/tokens.css';
 import { PHONE_QUERY } from '../../../utils/breakpoints';
 /**
 * How far through the song we are, on the border between the mini
 * player and the tab bar (#58).
 *
 * The phone's bottom bar carries three controls and no seek bar — plan
 * 016 B2 took it out, because 4px of height is not a thumb target and the
 * full-screen `now-playing-view` is where seeking belongs. What went
 * with it is the one thing a mini player is expected to say without
 * being opened: how far through the song it is. This is that, and
 * only that.
 *
 * Four things about it are load-bearing.
 *
 * **It is the shell's element, not either bar's.** The mini player and
 * `<bottom-nav>` are separate components stacked in the shell's grid,
 * so a line on the border between them is a row of the grid — either
 * one drawing it means reaching into the other's box for two pixels.
 *
 * **It never counts.** The position is pushed at 1 Hz by the backend
 * (`PlaybackPositionChanged`), and the interval here interpolates
 * *between* those reports and is stopped and restarted by every one of
 * them — the seek bar's rule, for the reason the seek bar has it: a
 * local clock drifted 30 s away from the backend across four keyboard
 * seeks. The `trackChangeId` and `seq` guards come along for the same
 * reason: the store is a singleton, so a report about the previous
 * track must not be adopted, and the same second reported twice still
 * has to reset the interpolation.
 *
 * **It is not a control and cannot become one.** `aria-hidden` on the
 * host and `pointer-events: none` throughout: the real progress is
 * announced by the seek bar on Now Playing, and a 2px strip on the top
 * edge of the tab bar that sometimes seeks is worse than one that
 * never does. It is also where a thumb aiming at a tab lands.
 *
 * **It renders nothing above 600px**, from `matchMedia` rather than a
 * media query, because that decides whether the element *exists* — and
 * with it whether a 1 Hz interval runs for the life of every desktop
 * session about a line nobody can see. `job-band`, `search-trigger`
 * and `player-controls` are the same pattern for the same reason.
 */
 /**
 * The reporting cadence, matched. This is not the clock: it exists
 * only so the line moves in the second between two reports, and its
 * error is discarded by the next one rather than carried.
 */
 const InterpolationIntervalMillis = 1000;
@customElement('player-progress-line')
 export class PlayerProgressLine extends LitElement {
    private player = new PlayerController(this);
    /** Phone width. See the class comment: existence, not paint. */
    @state() private phone = false;
    /** Seconds into the track, from the last report plus interpolation. */
    @state() private elapsed = 0;
    private previousTrackChangeId = -1;
    /** The sequence number of the last backend report applied. */
    private previousPositionSeq = -1;
    private timerID = -1;
    private media?: MediaQueryList;
    private onMedia = (e: MediaQueryListEvent) => {
        this.phone = e.matches;
    };
    static override styles = [
        designTokens,
        css`
            :host {
                display: block;
                /* Not a target, at any depth. */
                pointer-events: none;
            }
            .track {
                height: 2px;
                background-color: var(--yj-bg-surface, #212529);
            }
            .fill {
                height: 100%;
                background-color: var(--yj-accent, #ffd43b);
                /* scaleX off a full-width box rather than a width in
                   percent, so the moving thing is a transform and the
                   line costs no layout once a second. */
                transform-origin: left center;
            }
        `,
    ];
    private get trackLength(): number {
        return this.player.currentTrack?.trackLength ?? 0;
    }
    override connectedCallback(): void {
        super.connectedCallback();
        // Decorative in full: the seek bar on Now Playing is what
        // announces the position, and this says the same thing without
        // a name, a value or a way to act on it.
        this.setAttribute('aria-hidden', 'true');
        this.media = window.matchMedia(PHONE_QUERY);
        this.phone = this.media.matches;
        this.media.addEventListener('change', this.onMedia);
    }
    override disconnectedCallback(): void {
        super.disconnectedCallback();
        this.stopInterpolating();
        this.media?.removeEventListener('change', this.onMedia);
    }
    override updated(): void {
        // A track change resets the line, and `trackChangeId` is what
        // reveals one when the same file plays twice in a row.
        const currentChangeId = this.player.currentTrack?.trackChangeId ?? -1;
        if (currentChangeId !== this.previousTrackChangeId) {
            this.previousTrackChangeId = currentChangeId;
            this.elapsed = this.player.currentTrack?.seekPosition ?? 0;
            this.stopInterpolating();
        }
        // The backend's own position wins over anything counted here,
        // and a report for a track that is no longer loaded is stale by
        // definition.
        const position = this.player.position;
        if (
            position &&
            position.trackChangeId === currentChangeId &&
            position.seq !== this.previousPositionSeq
        ) {
            this.previousPositionSeq = position.seq;
            this.elapsed = position.positionSeconds;
            this.stopInterpolating();
        }
        // One owner for the interval, as in `seek-bar`: everything that
        // wants it started or stopped says so by changing state that
        // brings us back here.
        if (this.phone && this.player.isPlaying && currentChangeId !== -1) {
            this.startInterpolating();
        } else {
            this.stopInterpolating();
        }
    }
    private stopInterpolating(): void {
        if (this.timerID !== -1) {
            clearInterval(this.timerID);
            this.timerID = -1;
        }
    }
    private startInterpolating(): void {
        if (this.timerID !== -1) {
            return;
        }
        this.timerID = window.setInterval(() => {
            if (this.elapsed < this.trackLength) {
                this.elapsed += 1;
            }
        }, InterpolationIntervalMillis);
    }
    override render() {
        // Nothing playing is nothing to say, and the grid row is `auto`
        // so an empty render costs no height at all -- `job-band`'s
        // rule one row down.
        if (!this.phone || this.player.currentTrack === null) return nothing;
        const length = this.trackLength;
        const fraction =
            length > 0 ? Math.min(1, Math.max(0, this.elapsed / length)) : 0;
        return html`
            <div class="track" data-testid="progress-line">
                <div class="fill" style="transform: scaleX(${fraction})"></div>
            </div>
        `;
    }
 }
 declare global {
    interface HTMLElementTagNameMap {
        'player-progress-line': PlayerProgressLine;
    }
 }
@@ -22,29 +22,23 @@ export class SeekBar extends LitElement {
  @state()
  private seekValue: number = 0;
  /**
   * Whether the user is dragging the thumb right now.
   *
   * It is `@state` rather than a plain field because `updated()` owns
   * the interval and only reactive state brings `updated()` round.  A
   * bare `stopProgress()` in the input handler mutated nothing, so
   * nothing re-rendered, so the tail of `updated()` that restarts the
   * interval never ran — and the only things that could restart it
   * were a `change` event or the next backend report.  Any `input`
   * without a committed `change` therefore froze the interpolation:
   * a drag cancelled outside the element, a pointer taken by a scroll,
   * or a touch on the track treated as a scrub, which on a phone are
   * ordinary gestures.  While playing, the 1 Hz report papered over it
   * within a second; with reports not arriving it was permanent.
   */
  @state()
  private dragging: boolean = false;
  /** Whether the right-hand clock shows time remaining or total. */
  @state()
  private showRemaining: boolean = true;
  static override styles = [designTokens, waSliderLabel, css`
    /* 12px below the phone breakpoint. The bottom bar's seek bar is
       display:none there (016 B2 phase 1), so the only instance a
       viewport media query can reach at that width is the full-screen
       now-playing view's -- which is exactly the one a thumb uses.
       The track size lives on wa-slider inside this shadow root, so a
       custom property set by the host would not reach it. */
    @media (max-width: 599px) {
      wa-slider {
        --track-size: 12px;
      }
    }
    wa-slider {
      --track-size: 6px;
      flex: 1;
@@ -68,57 +62,6 @@ export class SeekBar extends LitElement {
      background: var(--yj-bg-base, black);
    }
    /* The phone's seek bar, and this block is last on purpose.
       A media query adds no specificity, so this lived above the plain
       "wa-slider" rule and lost to it at every width: the 12px track it
       asks for had never once applied, and the bar measured 261x6 on
       the device while the source said 12. That is index.css's rule
       ("the phone section is last on purpose") met inside a component's
       own stylesheet, and nothing renders differently in any tier here
       to say so.
       The bottom bar's seek bar is display:none below this width (016
       B2 phase 1), so the only instance a viewport media query can
       reach is the full-screen now-playing view's -- which is exactly
       the one a thumb uses. The desktop bar keeps its 6px, where a
       mouse is precise and the thickness is right.
       The painted track and the thing you can hit are allowed to
       differ, and a slider is the clearest case where they should: 12px
       is a progress bar you can see, and 44px is the app's touch floor
       (#56). A 44px-*thick* bar would be wrong-looking and would cost
       the album art the vertical space #51 spent an issue recovering.
       Two things about how the target is built.
       The padding goes on ::part(slider) rather than on the host,
       because that inner div is what carries the gesture -- it has the
       listener and the touch-action: none, and it is exactly the host's
       size, so padding the host would grow a box that does not take the
       press.
       The padding is asymmetric and the margins cancel it, so the row
       does not grow by the difference. Both halves are measured: the
       seek row is 19px (its clocks, not the track, decide that) and the
       play button's top edge is 8px below it, so the target takes the
       space *above*, where .art is a non-interactive div. Growing the
       row instead cost the art 25px of 143. Verified on the device at
       424x439: hit area 44px, painted track 12px, row still 19px, art
       still 143px, 8px of clearance left under the play button, a press
       26px above the track seeks, and a hit test on the play button's
       top edge still reaches the play button. */
    @media (max-width: 599px) {
      wa-slider {
        --track-size: 12px;
      }
      wa-slider::part(slider) {
        padding-block: 28px 4px;
        margin-block: -28px -4px;
      }
    }
    #seek-bar-container {
      display: flex;
      justify-content: space-between;
@@ -190,7 +133,6 @@ export class SeekBar extends LitElement {
  override disconnectedCallback() {
    super.disconnectedCallback();
    this.stopProgress();
    this.endDrag();
  }
  override updated() {
@@ -212,33 +154,18 @@ export class SeekBar extends LitElement {
    // A report for a track that is no longer loaded is stale by
    // definition: the change id is the only thing that distinguishes
    // it, since the same file can play twice in a row.
    //
    // A report arriving mid-drag is deliberately *not* applied: the
    // thumb belongs to the finger on it, and adopting a report once a
    // second pulls it back out from under them.  The seq is left
    // unrecorded too, so the first report after the drag still counts
    // as fresh.
    const position = this.player.position;
    const forThisTrack =
      position !== null && position.trackChangeId === currentChangeId;
-    if (
+    if (position && forThisTrack && position.seq !== this.previousPositionSeq) {
      position &&
      forThisTrack &&
      !this.dragging &&
      position.seq !== this.previousPositionSeq
    ) {
      this.previousPositionSeq = position.seq;
      this.seekValue = position.positionSeconds;
      this.stopProgress();
    }
-    // One owner for the interval, and this is it.  Every other place
+    // Start/stop progress interval based on playback state
-    // that wants it started or stopped says so by changing state that
+    if (this.isPlaying && this.hasTrack) {
    // brings us back here, so the timer cannot be left running by a
    // path that forgot to stop it or stopped by a path that forgot to
    // start it again.
    if (this.isPlaying && this.hasTrack && !this.dragging) {
      this.startProgress();
    } else {
      this.stopProgress();
@@ -283,48 +210,18 @@ export class SeekBar extends LitElement {
  private handleChange(e: Event) {
    const newSeekVal = (e.target as WaSlider).value;
    this.endDrag();
    this.setSeekValue(newSeekVal);
    this.player.seek(newSeekVal);
  }
-  /**
+    if (this.isPlaying) {
-   * The user is moving the thumb.
+      this.startProgress();
   *
   * This only records that fact; `updated()` decides what it means for
   * the interval.  `seekValue` follows the slider so the clocks track
   * the thumb during the drag rather than jumping when it is released.
   */
  private handleInput(e: Event) {
    this.setSeekValue((e.target as WaSlider).value);
    if (this.dragging) {
      return;
    }
    this.dragging = true;
    // A drag that never commits must not strand the flag, or this fix
    // turns a stall of up to one second into a permanent one -- which
    // is the failure it exists to remove.  `change` is the ordinary
    // end; these are the ones that are not, and they are on the
    // document because the pointer is routinely released outside the
    // element it started in.  A drag's listeners belong to the drag,
    // so they go on with it and come off with it.
    document.addEventListener('pointerup', this.endDrag);
    document.addEventListener('pointercancel', this.endDrag);
    document.addEventListener('touchend', this.endDrag);
    document.addEventListener('touchcancel', this.endDrag);
  }
-  private endDrag = () => {
+  // Stops progress while user is dragging the thumb
-    document.removeEventListener('pointerup', this.endDrag);
+  private handleInput() {
-    document.removeEventListener('pointercancel', this.endDrag);
+    this.stopProgress();
-    document.removeEventListener('touchend', this.endDrag);
+  }
    document.removeEventListener('touchcancel', this.endDrag);
    this.dragging = false;
  };
  private setSeekValue(val: number) {
    if (val < 0) val = 0;
@@ -1,10 +1,9 @@
-import { LitElement, html, css, nothing } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/slider/slider.js';
 import type WaSlider from '@awesome.me/webawesome/dist/components/slider/slider.js';
 import { PlayerController } from '@store/controllers/player-controller';
 import { volumeStyleStore } from '@store/volume-style-store';
 import { designTokens } from '../../../styles/tokens.css';
 import { waSliderLabel } from '../../../styles/wa-slider-label.css';
@@ -23,32 +22,6 @@ export class VolumeControl extends LitElement {
  @state()
  private showSlider = false;
  /** Whether this is the click-to-open popup rather than a slider. */
  @state()
  private popup = volumeStyleStore.popup;
  /**
   * Whether there is a volume of ours to control at all (#64).
   *
   * The decision is made here rather than at either mount point,
   * because there are two -- the bottom bar's copy lives in
   * `index.html`, which has no module scope to make it conditional --
   * and one of them is a control the shell cannot un-render. So the
   * control answers for itself, and the bar and the phone's
   * full-screen transport get the same answer without either knowing
   * the question exists.
   *
   * It renders `nothing` *and* hides the host: an empty shadow root is
   * what stops a positional or role query finding a button that cannot
   * act, and `:host([hidden])` is what stops the element occupying a
   * flex item's worth of the transport -- the `:host` display above
   * outranks the UA's `[hidden]` rule, so it has to be said.
   */
  @state()
  private available = volumeStyleStore.available;
  private unsubscribeStyle?: () => void;
  // Locally-tracked volume while the user is actively dragging or scrolling.
  // The store's volume only updates once the backend echoes VolumeChanged
  // (which we debounce), so we track intent here for responsive UI and to let
@@ -63,13 +36,6 @@ export class VolumeControl extends LitElement {
      align-items: center;
    }
    /* See the available field. A gap is only drawn between boxes,
       so a hidden host costs its parent nothing -- which is where the
       29px this gives back to Now Playing comes from (#172). */
    :host([hidden]) {
      display: none;
    }
    button {
      background: none;
      border: none;
@@ -120,31 +86,11 @@ export class VolumeControl extends LitElement {
      --thumb-height: 16px;
    }
-    .volume-popup wa-slider::part(track) {
+    wa-slider::part(track) {
      background: var(--yj-text-primary, white);
      height: 120px;
    }
    /* The inline slider (#42). It is the default now, so the width is
       a real layout decision rather than a detail: 5em is wide enough
       to aim at and narrow enough that the bottom bar's *outer*
       columns stay equal without squeezing the transport — which is
       the arrangement #23 depends on.
       flex-shrink: 0 for the reason the top bar's children have it
       (#143): a control that quietly gets narrower under pressure
       hides the fact that the bar has run out of room. This one stands
       down at phone width instead, in index.css, where the shell can
       see the viewport. */
    .inline-slider {
      width: 5em;
      flex-shrink: 0;
    }
    .inline-slider::part(track) {
      background: var(--yj-text-primary, white);
    }
    wa-slider::part(indicator) {
      background: var(--yj-accent, yellow);
    }
@@ -176,26 +122,8 @@ export class VolumeControl extends LitElement {
  // LIFECYCLE
  // ===================================================================
  override connectedCallback() {
    super.connectedCallback();
    this.unsubscribeStyle = volumeStyleStore.subscribe(() => {
      this.popup = volumeStyleStore.popup;
      this.setAvailable(volumeStyleStore.available);
      // Switching to the slider while the popup is open would leave the
      // document listener installed for a popup that no longer renders.
      if (!this.popup) this.closeSlider();
    });
    this.setAvailable(volumeStyleStore.available);
    void volumeStyleStore.init();
  }
  override disconnectedCallback() {
    super.disconnectedCallback();
    this.unsubscribeStyle?.();
    document.removeEventListener('click', this.boundHandleOutsideClick);
    clearTimeout(this.volumeDebounceTimer);
  }
@@ -226,12 +154,10 @@ export class VolumeControl extends LitElement {
  private handleOutsideClick(e: Event) {
    const path = e.composedPath();
-    if (!path.includes(this)) this.closeSlider();
+    if (!path.includes(this)) {
-  }
+      this.showSlider = false;
-
+      document.removeEventListener('click', this.boundHandleOutsideClick);
-  private closeSlider() {
+    }
    this.showSlider = false;
    document.removeEventListener('click', this.boundHandleOutsideClick);
  }
  private handleInput(e: Event) {
@@ -263,67 +189,21 @@ export class VolumeControl extends LitElement {
  // RENDER
  // ===================================================================
  /**
   * `hidden` is set imperatively rather than reflected from the state,
   * because it has to be on the *host* and a `@state` does not reflect.
   * It is the right attribute besides: it takes the element out of the
   * accessibility tree as well as out of the layout.
   */
  private setAvailable(available: boolean) {
    this.available = available;
    this.hidden = !available;
    // A popup left open when the control goes away would keep its
    // document click listener installed for markup that no longer
    // renders.
    if (!available) this.closeSlider();
  }
  override render() {
    if (!this.available) return nothing;
    const muted = this.player.muted;
    // Inline, the icon is the mute toggle rather than a disclosure:
    // there is nothing left to disclose, and a button that opens a
    // popup containing the slider already beside it would be a control
    // whose only effect is to duplicate its neighbour.
    const iconAction = this.popup
      ? this.toggleSlider
      : () => this.player.toggleMute();
    const iconLabel = this.popup
      ? muted
        ? 'Muted'
        : `Volume ${this.currentVolume}%`
      : muted
        ? 'Unmute'
        : 'Mute';
    return html`
      <button
        class=${muted ? 'muted' : ''}
        title=${muted ? 'Muted — click for volume' : 'Volume'}
-        aria-label=${iconLabel}
+        aria-label=${muted ? 'Muted' : `Volume ${this.currentVolume}%`}
        data-muted=${muted ? 'true' : 'false'}
-        @click="${iconAction}"
+        @click="${this.toggleSlider}"
        @wheel="${this.handleWheel}"
      >
        <wa-icon name=${this.volumeIcon}></wa-icon>
      </button>
-      ${!this.popup
+      ${this.showSlider
        ? html`
            <wa-slider
              class="inline-slider ${muted ? 'muted' : ''}"
              label="Volume"
              min="0"
              max="100"
              .value="${this.currentVolume}"
              @input="${this.handleInput}"
              @wheel="${this.handleWheel}"
            ></wa-slider>
          `
        : ''}
      ${this.popup && this.showSlider
        ? html`
            <div
              class="volume-popup ${muted ? 'muted' : ''}"
@@ -29,7 +29,6 @@ import { nameDialogsIn } from '../../utils/name-dialog';
 import { ViewLifecycleMixin } from '../../utils/view-lifecycle';
 import { confirmAction } from '../confirm-dialog/confirm-dialog';
 import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
 import '@components/jobs/job-panel';
 import { list } from '@utils/binding';
 type PendingItem = autotagservice.PendingItem;
@@ -136,20 +135,8 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
                padding: 0.75rem 1rem;
            }
            /* The header and the apply-job panel share the header row.
               A wrapper rather than a third grid row, because the panel
               is display:none while nothing is applying and a grid
               row would still spend the container's gap on it -- the
               idle case, which is nearly always. */
            .header-area {
                grid-area: header;
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                min-width: 0;
            }
            .header {
                grid-area: header;
                display: flex;
                align-items: center;
                gap: 0.75rem;
@@ -250,20 +237,13 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
            }
            /* Collapsible-section toggle used in the Pending header —
-               transparent button that inherits the header's type.
+               transparent button that inherits the header's type. */
               187x**15** before this (#186), which was the smallest
               control measured anywhere in the app until the column
               arrows were counted. It is transparent and full-width
               already, so the floor costs it a height and nothing
               else. */
            .section-toggle {
                display: flex;
                align-items: center;
                gap: 0.35rem;
                flex: 1;
                min-width: 0;
                min-block-size: 44px;
                padding: 0;
                background: transparent;
                border: 0;
@@ -281,8 +261,6 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
                color: var(--yj-text-tertiary, #888);
            }
            /* 32x18, and it has no background until hover -- so the
               padding out to a square target is invisible (#186). */
            .folders-menu-trigger {
                background: transparent;
                border: 0;
@@ -290,8 +268,6 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
                font-size: 1.1rem;
                line-height: 1;
                padding: 0.1rem 0.4rem;
                min-inline-size: 44px;
                min-block-size: 44px;
                border-radius: 3px;
                cursor: pointer;
            }
@@ -304,10 +280,7 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
            .folders-refresh-trigger {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.95rem;
                min-inline-size: 44px;
                min-block-size: 44px;
            }
            .folders-refresh-trigger:disabled {
@@ -3234,20 +3207,7 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
        // sees a blank full-screen "Loading\u2026".
        return html`
            <div class="root">
-                <div class="header-area">
+                ${this.renderHeader()}
                    ${this.renderHeader()}
                    <!--
                      Applying rewrites tags on disk, and until #27 the
                      only way to stop a run was the Jobs tab or the
                      header popover. The per-album ring says work is
                      happening; this is what can stop it, and what has
                      the log when it goes wrong.
                    -->
                    <job-panel
                        kinds="autotag-apply"
                        heading="Applying tags"
                    ></job-panel>
                </div>
                ${this.renderFolderSidebar()}
                ${this.renderMain()}
            </div>
@@ -7,8 +7,6 @@ import { designTokens } from '../../styles/tokens.css';
 import '../sidebar/app-sidebar.js';
 import { nameDialog } from '@utils/name-dialog';
 import { ICON_PLAYLIST } from '@utils/icon-language';
 import { ActiveViewController } from '@store/controllers/active-view-controller';
 import { ViewVisibilityController } from '@store/controllers/view-visibility-controller';
 type View = 'home' | 'albums' | 'tracks' | 'playlists';
@@ -116,35 +114,8 @@ export class BottomNav extends LitElement {
        }
    `];
-    /**
+    @state()
-     * Which tab is lit, read from the shell rather than tracked here.
+    private activeView = 'home';
     *
     * This was a `@state()` field set from the `navigate` event, which
     * only the outbound path dispatches -- so backing out of a detail
     * view left the highlight wherever it had been (#72). It had no
     * equivalent of `app-sidebar`'s `navItems.some(...)` guard either,
     * so a detail view set it to a name matching no tab and *nothing*
     * was lit; that asymmetry is why one nav looked broken and the
     * other looked fine. The store answers both: a detail view leaves
     * the tab it was opened from lit, in both components.
     */
    private activeCtrl = new ActiveViewController(this);
    /**
     * The tab bar honours the sidebar's toggles (#25), and the reason is
     * inside this component rather than a general rule about phones.
     * `PHONE_COLUMN_IDS` is the precedent for "what a phone shows is a
     * different question", and it would apply here too -- except that
     * "More" opens the *same* `<app-sidebar>`, which filters. An
     * unfiltered bar would therefore contradict its own drawer, one tap
     * apart, and a destination the user switched off is off wherever it
     * is offered.
     *
     * Which four tabs remains plan 016's committed subset; this only
     * removes from it. Hiding all four leaves "More", which is always
     * present and reaches everything.
     */
    private visibilityCtrl = new ViewVisibilityController(this);
    /**
     * Whether the drawer has been asked for.
@@ -196,9 +167,12 @@ export class BottomNav extends LitElement {
        nameDialog(this.drawer);
    }
-    private onGlobalNavigate = () => {
+    private onGlobalNavigate = (e: Event) => {
        const detail = (e as CustomEvent<{ view?: string }>).detail;
        if (detail?.view) this.activeView = detail.view;
        // A navigation from inside the drawer is the drawer's job done.
        // The highlight is not this listener's business any more.
        this.drawerOpen = false;
    };
@@ -228,17 +202,13 @@ export class BottomNav extends LitElement {
        return html`
            <nav aria-label="Primary">
                <ul>
-                    ${BottomNav.TABS
+                    ${BottomNav.TABS.map((tab) => html`
                        .filter((tab) => this.visibilityCtrl.visible(tab.id))
                        .map((tab) => html`
                        <li>
                            <button
                                type="button"
-                                class=${this.activeCtrl.isActive(tab.id)
+                                class=${this.activeView === tab.id ? 'active' : ''}
                                    ? 'active'
                                    : ''}
                                data-testid="tab-${tab.id}"
-                                aria-current=${this.activeCtrl.isActive(tab.id)
+                                aria-current=${this.activeView === tab.id
                                    ? 'page'
                                    : 'false'}
                                @click=${() => this.navigate(tab.id)}
@@ -85,21 +85,6 @@ export class ConfigField extends LitElement {
            gap: 0.5em;
        }
        /* Every control here meets the app's 44px touch floor (#186).
           This is the shape every row in Settings uses, so it is the
           one rule that covers the most controls -- and it is the
           *cheapest* place to reach the floor, because there is no
           overflow fit on this page. The page header's had one (#69),
           which is why that pass had to grow padding and hand the
           width back with a negative margin; here the control is a
           block in a column and a taller box costs nothing but the
           height it takes.
           Measured on the reference device before this: the select
           335x30, the text and number inputs the same, the browse
           button 30 tall, the colour swatch 33x33 and the toggle
           **34x19**. */
        input[type='text'],
        input[type='number'] {
            background: var(--yj-bg-elevated, #343a40);
@@ -110,7 +95,6 @@ export class ConfigField extends LitElement {
            font-size: 0.85em;
            font-family: inherit;
            min-width: 0;
            min-block-size: 44px;
            flex: 1;
        }
@@ -133,7 +117,6 @@ export class ConfigField extends LitElement {
            font-size: 0.85em;
            font-family: inherit;
            cursor: pointer;
            min-block-size: 44px;
            flex: 1;
        }
@@ -156,7 +139,6 @@ export class ConfigField extends LitElement {
            font-size: 0.85em;
            cursor: pointer;
            white-space: nowrap;
            min-block-size: 44px;
        }
        button:hover {
@@ -176,12 +158,8 @@ export class ConfigField extends LitElement {
        }
        input[type='color'] {
-            /* border-box, or the 2px border makes this 48 and the
+            width: 2.5em;
-               assertion below reads as passing by four pixels of
+            height: 2.5em;
               border rather than by the rule. */
            box-sizing: border-box;
            width: 44px;
            height: 44px;
            border: 2px solid var(--yj-border, #444);
            border-radius: 4px;
            padding: 0;
@@ -209,32 +187,12 @@ export class ConfigField extends LitElement {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-block-size: 44px;
        }
        /* The toggle is the one control here whose target and paint
           must differ, and it is also the one no sweep can see.
           Its <input> is opacity: 0; width: 0; height: 0, so a
           walk of every input on the page skips it as a zero-sized
           node -- the thing a finger actually hits is this <label>,
           which measured **34x19**. That is smaller than anything in
           #186's original table and it is absent from it for exactly
           that reason.
           A 44px pill is not what a switch should look like, so the
           box is 44px and the paint is not: .toggle-slider is a
           2.5em x 1.4em child centred in it rather than an absolute
           fill. The negative inline margins hand the extra width back
           to the layout, so the pill stays flush with the right edge
           of the inputs in the rows above it -- the header pass's
           shape, used here for alignment rather than for a fit. */
        .toggle-switch {
-            display: grid;
+            position: relative;
-            place-items: center;
+            width: 2.5em;
-            inline-size: 44px;
+            height: 1.4em;
            block-size: 44px;
            margin-inline: calc((2.5em - 44px) / 2);
        }
        .toggle-switch input {
@@ -244,10 +202,9 @@ export class ConfigField extends LitElement {
        }
        .toggle-slider {
-            position: relative;
+            position: absolute;
            cursor: pointer;
-            inline-size: 2.5em;
+            inset: 0;
            block-size: 1.4em;
            background: var(--yj-bg-overlay, #495057);
            border-radius: 1em;
            transition: background 0.2s;
@@ -9,13 +9,7 @@ import {
    RemoveLibrary,
    GetRemovalImpact,
    GetAllLibrariesWithTrackCounts,
    ScanLibrary,
    ScanAllLibraries,
    FullRescan,
 } from '@go/library/library.js';
 import { jobStore } from '@store/job-store';
 import type { Job } from '@store/job-store';
 import '@components/jobs/job-panel';
 import {
    GetScanConcurrency,
    SetScanConcurrency,
@@ -25,8 +19,6 @@ import {
    SetQueueFallback,
    GetAllowMeteredCatalogDownload,
    SetAllowMeteredCatalogDownload,
    GetPopupVolume,
    SetPopupVolume,
 } from '@go/config/config.js';
 import { GetIndexStatus } from '@go/explore/service.js';
 import { notificationStore } from '@store/notification-store';
@@ -35,9 +27,6 @@ import type * as library from '@go/library/models.js';
 import { ThemeController } from '@store/controllers/theme-controller';
 import { TrackListController } from '@store/controllers/tracklist-controller';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { ViewVisibilityController } from '@store/controllers/view-visibility-controller';
 import { VIEW_META } from '../../services/view-meta';
 import { downloadStore } from '@store/download-store';
 import { GetAllPlaylists } from '@go/playlist/service.js';
 import type * as playlist from '@go/playlist/models.js';
 import { Events } from '../../events';
@@ -56,10 +45,6 @@ import {
 import './config-field';
 import './config-section';
 // The view filter's home (#148). The same component the top bar
 // carries, placed a second time rather than reimplemented -- two
 // definitions of "which library am I browsing" is what this is for.
 import '@components/library-filter/library-filter';
 import './download-clients';
 import './shortcut-capture';
 import { confirmAction } from '../confirm-dialog/confirm-dialog';
@@ -86,27 +71,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
    // --- Favorites controller ---
    private favCtrl = new FavoritesController(this);
    /** Which destinations the navigation offers (#25). */
    private viewsCtrl = new ViewVisibilityController(this);
    /**
     * The job snapshot, for the per-library scan status (#27).
     *
     * Held as state rather than read from the store in `render()` so
     * Lit sees the dependency: the store notifies, and a getter read
     * inside a template is not a reactive input.
     */
    @state() private jobs: Job[] = [];
    /**
     * Set between pressing a scan button and the job snapshot that
     * proves it started -- `JobsChanged` is coalesced at 250 ms, which
     * is long enough for a second click to start a second scan.
     */
    @state() private startingScan = false;
    private unsubscribeJobs: (() => void) | null = null;
    // --- Shortcuts controller ---
    private shortcutsCtrl = new ShortcutsController(this);
@@ -131,8 +95,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
    @state() private concurrencyMode = 'auto';
    @state() private defaultPage = 'home';
    @state() private queueFallback = 'favorites';
    @state() private popupVolume = false;
    @state() private indexStatus: explore.IndexStatus | null = null;
    /** Three states, not one: the panel used to say "Loading status…"
     *  for the entire session, because the only thing that ever set
@@ -176,13 +138,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
            cursor: pointer;
            transition: background-color 0.15s ease;
            white-space: nowrap;
            /* The app's 44px touch floor (#56, #186), stated once for
               all 41 buttons this page renders rather than per class.
               Height is free here: Settings has no overflow fit, so
               the header's "only width is contested" rule does not
               bind, and the two classes that need more than a height
               say so below. */
            min-block-size: 44px;
        }
        button:disabled {
@@ -242,42 +197,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
            flex-wrap: wrap;
        }
        /* #148, and the second half of #57.
           library-filter is the only control in the app that calls
           setSelectedLibrary, and it lived in the top bar -- which
           #57 takes out of the layout on a phone, and which #143
           already refused to hide as a fit step precisely because
           hiding it takes away an action. So the selection gets a home
           that does not depend on that bar existing.
           At every width, not below 600px: a phone-only copy would be
           a second place the control lives, and "where do I change
           which library I am browsing" having two answers by size is
           the fault, not the fix. */
        .library-scope {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1em;
            flex-wrap: wrap;
            margin-bottom: 1em;
        }
        .library-scope .scope-label {
            font-weight: 600;
            font-size: 0.85em;
            color: var(--yj-text-primary, #fff);
            display: block;
        }
        .library-scope .scope-description {
            font-size: 0.75em;
            color: var(--yj-text-tertiary, #888);
            margin: 0.35em 0 0;
            max-width: 40em;
        }
        .save-row {
            display: flex;
            gap: 0.5em;
@@ -516,24 +435,11 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
            margin: 0;
        }
        /* The two column lists are the densest thing in the app, and
           the density argument is why they are shaped the way they
           are rather than simply grown (#186).
           Measured on the reference device: the row was already
           335x36 -- it is the controls *inside* it that were 16x16 and
           **16x14**, the smallest anywhere in this app, 36 of them.
           So the fix grows the controls into the row they already
           occupy and only takes the row from 36 to 44, which over the
           two lists (10 and 19 items) is 232px of extra scroll on a
           439px screen. Growing each control to its own 44px row
           instead would have cost four screens. */
        .column-item {
            display: flex;
-            align-items: stretch;
+            align-items: center;
            gap: 0.5em;
-            padding: 0 0.75em;
+            padding: 0.5em 0.75em;
            min-block-size: 44px;
            border-bottom: 1px solid
                var(--yj-border-subtle, #333);
            font-size: 0.85em;
@@ -551,19 +457,8 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
            color: var(--yj-text-tertiary, #888);
        }
        /* A native checkbox cannot grow its hit area without growing
           its paint, and a 44px checkbox is not what anyone wants. So
           the target is the label instead: .column-label is a real
           <label for> now, which makes the column's *name* the thing
           you tap -- ~250x44 rather than 16x16.
           That is the argument config-field already makes one file
           over for its own labels: "a real label association also
           makes the label text a click target for the control, which
           is behaviour, not annotation". Here it is the whole fix. */
        .column-toggle {
            cursor: pointer;
            align-self: center;
            accent-color: var(
                --yj-accent,
                #ffd43b
@@ -572,32 +467,14 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
        .column-label {
            flex: 1;
            display: flex;
            align-items: center;
            cursor: pointer;
            min-block-size: 44px;
        }
        .view-note {
            color: var(--yj-text-tertiary, #888);
            font-size: var(--yj-font-size-sm, 0.85rem);
            margin-left: auto;
            /* The row stretches its children so the label can be a
               full-height target; this is text, not a target. */
            align-self: center;
        }
        .column-arrows {
            display: flex;
            align-items: stretch;
            gap: 0.15em;
            margin-left: auto;
        }
        /* 16x14 before this, and they carry background: none and a
           transparent border -- so padding out to 44px grows the
           target and changes nothing anyone can see until hover,
           which is precisely what #186's Direction asks for. */
        .column-arrow-btn {
            background: none;
            border: 1px solid transparent;
@@ -607,8 +484,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
            font-size: 0.65em;
            line-height: 1;
            padding: 0.2em 0.35em;
            min-inline-size: 44px;
            min-block-size: 44px;
            transition:
                color 0.15s,
                border-color 0.15s;
@@ -756,11 +631,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
            padding: 0.2em 0.4em;
            letter-spacing: 2px;
            border-radius: 4px;
            /* Square, so it needs the width too -- the shared rule
               above only gives it a height. It was 31x31, and it is
               the only route to "Remove library", which is the case
               #55 settled one component over: the way out is 44px. */
            min-inline-size: 44px;
        }
        .overflow-btn:hover {
@@ -982,14 +852,8 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
        this.scrollMode =
            localStorage.getItem(SCROLL_STORAGE_KEY) || 'hover';
-        // Scanning is started and watched here (#27), so the job
+        // Scan progress lives in the jobs panel now — this page only
-        // snapshot is a live input to this page.
+        // needs to know when the library list itself changes.
        this.unsubscribeJobs = jobStore.subscribe(() => {
            this.jobs = jobStore.jobs;
        });
        this.jobs = jobStore.jobs;
        void jobStore.init();
        this.cancelLibraryAdded = EventsOn(
            Events.LibraryAdded,
            () => void this.loadLibraries(),
@@ -1020,9 +884,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
    }
    protected override onViewDeactivate(): void {
        this.unsubscribeJobs?.();
        this.unsubscribeJobs = null;
        this.cancelLibraryAdded?.();
        this.cancelLibraryRenamed?.();
        this.cancelLibraryRemoved?.();
@@ -1032,28 +893,20 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
    private async loadLibraries(): Promise<void> {
        try {
-            const [
+            const [libs, mode, defaultPage, queueFallback, allowMetered] =
-                libs,
+                await Promise.all([
-                mode,
+                    GetAllLibrariesWithTrackCounts(),
-                defaultPage,
+                    GetScanConcurrency(),
-                queueFallback,
+                    GetDefaultPage(),
-                allowMetered,
+                    GetQueueFallback(),
-                popupVolume,
+                    GetAllowMeteredCatalogDownload(),
-            ] = await Promise.all([
+                ]);
                GetAllLibrariesWithTrackCounts(),
                GetScanConcurrency(),
                GetDefaultPage(),
                GetQueueFallback(),
                GetAllowMeteredCatalogDownload(),
                GetPopupVolume(),
            ]);
            this.libraries = libs ?? [];
            this.concurrencyMode = mode;
            this.defaultPage = defaultPage;
            this.queueFallback = queueFallback;
            this.allowMeteredCatalogDownload = allowMetered;
            this.popupVolume = popupVolume;
        } catch (err) {
            console.error(
@@ -1231,133 +1084,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
        }
    }
    // ===================================================================
    // SCANNING (#27 — back from the Jobs tab)
    // ===================================================================
    /** The scan job for a library, if one is registered. */
    private jobForLibrary(id: number): Job | undefined {
        return this.jobs.find((job) => job.id === `scan:${id}`);
    }
    /** The status line under a library name while it is being scanned. */
    private libraryScanStatus(id: number): string | null {
        const job = this.jobForLibrary(id);
        if (!job) return null;
        switch (job.state) {
            case 'running':
                return job.phase ? `Scanning · ${job.phase}` : 'Scanning';
            case 'queued':
                return 'Queued';
            case 'paused':
                return 'Paused';
            case 'pausing':
                return 'Pausing…';
            case 'cancelling':
                return 'Stopping…';
            default:
                return null;
        }
    }
    private get anyScanning(): boolean {
        return this.libraries.some(
            (lib) => this.libraryScanStatus(lib.id) !== null,
        );
    }
    /**
     * Run something that starts a job, holding the buttons until the
     * snapshot lands and saying so when it does not start at all.
     *
     * Persistent, not a toast: the user asked for work to happen, it
     * did not, and retrying is exactly the useful response.
     */
    private async startJob(
        what: string,
        start: () => Promise<unknown>,
        retry: () => void,
    ): Promise<void> {
        if (this.startingScan) return;
        this.startingScan = true;
        try {
            await start();
        } catch (err) {
            console.error(`${what} failed:`, err);
            notificationStore.persistent({
                key: 'scan-start',
                title: 'Scan did not start',
                text: `${what} failed. ${describeError(err)}`,
                detail: String(err),
                action: { label: 'Try again', run: retry },
            });
        } finally {
            this.startingScan = false;
        }
    }
    private handleScanLibrary = (id: number): void => {
        this.activeMenuId = null;
        void this.startJob(
            'Scanning that library',
            () => ScanLibrary(id),
            () => this.handleScanLibrary(id),
        );
    };
    private handleScanAll = (): void => {
        void this.startJob(
            'Scanning your libraries',
            () => ScanAllLibraries(),
            () => this.handleScanAll(),
        );
    };
    private handleFullRescan = async (): Promise<void> => {
        const ok = await confirmAction({
            title: 'Full rescan',
            message:
                'This deletes all library data — including downloaded '
                + 'cover art — and rebuilds it from your files.',
            impact:
                'It is not the same as “Scan now”, which only picks up '
                + 'what changed.',
            confirmLabel: 'Rebuild everything',
            danger: true,
        });
        if (!ok) return;
        await this.startJob(
            'The full rescan',
            () => FullRescan(),
            () => void this.handleFullRescan(),
        );
    };
    private handleViewToggle = (
        view: string,
        visible: boolean,
    ): void => {
        this.viewsCtrl
            .setVisible(view, visible)
            .catch((err: unknown) => {
                console.error('Failed to save view visibility:', err);
                notificationStore.transient({
                    key: 'view-visibility',
                    text: `Could not change which views are shown. ${describeError(err)}`,
                    detail: String(err),
                });
                // The checkbox has already flipped itself; the store is
                // the truth, so redraw from it.
                this.requestUpdate();
            });
    };
    private handleDefaultPageChange = (
        e: CustomEvent<ConfigFieldChangeEvent>,
    ): void => {
@@ -1702,7 +1428,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
            -->
            ${this.renderLibrarySection()}
            ${this.renderGeneralSection()}
            ${this.renderNavigationSection()}
            ${this.renderNowPlayingSection()}
            ${this.renderThemeSection()}
            ${this.renderTrackListSection()}
@@ -1797,20 +1522,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                    .value=${this.allowMeteredCatalogDownload}
                    @config-change=${this.handleAllowMeteredChange}
                ></config-field>
                <!--
                  The tier list above says what the build is *doing*;
                  this says it is a job, and gives it the pause, cancel
                  and log the tier list never had (#27). Cancelling one
                  still asks first — that confirmation is inside
                  applyJobControl, keyed on the kind, which is why
                  this embeds the shared rows rather than drawing its
                  own.
                -->
                <job-panel
                    kinds="index-build,catalog-enrich"
                    heading="Index jobs"
                ></job-panel>
            </config-section>
        `;
    }
@@ -1931,15 +1642,18 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                        description:
                            'The page the app opens to on launch.',
                        type: 'select' as const,
-                        // Derived, not written out: this list was a
+                        options: [
-                        // second copy of the launchable set, and #27
+                            { value: 'home', label: 'Home' },
-                        // removing a destination is exactly the change
+                            { value: 'tracks', label: 'Tracks' },
-                        // that would have left the two disagreeing.
+                            { value: 'albums', label: 'Albums' },
-                        // Settings is excluded because it is the one
+                            { value: 'artists', label: 'Artists' },
-                        // view the backend refuses to launch into.
+                            { value: 'genres', label: 'Genres' },
-                        options: VIEW_META
+                            { value: 'playlists', label: 'Playlists' },
-                            .filter((v) => v.alwaysShown !== true)
+                            { value: 'explore', label: 'Explore' },
-                            .map((v) => ({ value: v.id, label: v.label })),
+                            { value: 'downloads', label: 'Downloads' },
                            { value: 'autotag', label: 'Autotag' },
                            { value: 'jobs', label: 'Jobs' },
                        ],
                    }}
                    .value=${this.defaultPage}
                    @config-change=${this.handleDefaultPageChange}
@@ -1960,121 +1674,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                    .value=${this.queueFallback}
                    @config-change=${this.handleQueueFallbackChange}
                ></config-field>
                <config-field
                    .schema=${{
                        key: 'popupVolume',
                        label: 'Volume opens in a popup',
                        description:
                            'Off, the volume slider is always visible in the '
                            + 'player bar. On, it hides behind the speaker '
                            + 'icon. The slider stands down on a phone either '
                            + 'way, where the hardware keys own volume.',
                        type: 'toggle' as const,
                    }}
                    .value=${this.popupVolume}
                    @config-change=${this.handlePopupVolumeChange}
                ></config-field>
            </config-section>
        `;
    }
    /**
     * The volume control's presentation (#42).
     *
     * In General rather than beside the theme because it is about the
     * transport's behaviour rather than its colours, and next to "When
     * the Queue Ends" because both are answers to "how should the
     * player behave".
     */
    private handlePopupVolumeChange = (
        e: CustomEvent<ConfigFieldChangeEvent>,
    ): void => {
        const popup = Boolean(e.detail.value);
        const previous = this.popupVolume;
        this.popupVolume = popup;
        void SetPopupVolume(popup).catch((err: unknown) => {
            console.error('failed to save the volume control setting', err);
            this.popupVolume = previous;
            notificationStore.transient({
                key: 'popup-volume-setting',
                title: 'Setting not saved',
                text: describeError(err, 'That setting could not be saved.'),
            });
        });
    };
    // --- Navigation section ---
    /**
     * Which destinations the sidebar and the phone's tab bar offer.
     *
     * Two items are drawn but not editable, and both say why in place
     * rather than being silently inert. Settings is never hideable --
     * the backend refuses it too, because `config.toml` is
     * hand-editable. The launch page is not hideable *while it is the
     * launch page*, which is a state the user can leave by changing the
     * launch page above; refusing is preferable to the alternatives,
     * since resetting their launch page silently changes a second thing
     * they chose and allowing it lands the app on a page nothing points
     * at.
     */
    private renderNavigationSection() {
        return html`
            <config-section
                heading="Navigation"
                description="Choose which destinations the sidebar and the phone's tab bar offer. Hiding one does not remove it — links and the launch page still open it."
            >
                <ul class="column-list">
                    ${repeat(VIEW_META, (v) => v.id, (v) => {
            const checked = this.viewsCtrl.enabled(v.id);
            const isLaunchPage = this.defaultPage === v.id;
            const locked = v.alwaysShown === true || isLaunchPage;
            let note = '';
            if (v.alwaysShown === true) {
                note = 'Always shown.';
            } else if (isLaunchPage) {
                note = 'This is the launch page.';
            } else if (
                v.id === 'downloads' &&
                checked &&
                !downloadStore.available
            ) {
                // The config says show it and the nav does not, which
                // would otherwise read as the checkbox not working.
                note = 'Hidden until a download client is configured.';
            }
            return html`
                            <li
                                class="column-item ${checked ? 'enabled' : 'disabled'}"
                            >
                                <input
                                    id="view-${v.id}"
                                    type="checkbox"
                                    class="column-toggle"
                                    aria-label="Show ${v.label} in the navigation"
                                    .checked=${checked}
                                    ?disabled=${locked}
                                    @change=${(e: Event) =>
                    this.handleViewToggle(
                        v.id,
                        (e.target as HTMLInputElement).checked,
                    )}
                                />
                                <label class="column-label" for="view-${v.id}">
                                    ${v.label}
                                </label>
                                ${note
                    ? html`<span class="view-note">${note}</span>`
                    : nothing}
                            </li>
                        `;
        })}
                </ul>
            </config-section>
        `;
    }
@@ -2263,7 +1862,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                                class="column-item ${checked ? 'enabled' : 'disabled'}"
                            >
                                <input
                                    id="column-${id}"
                                    type="checkbox"
                                    class="column-toggle"
                                    aria-label="Show the ${columnLabel} column"
@@ -2274,12 +1872,11 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                                            id,
                                        )}
                                />
-                                <label
+                                <span
                                    class="column-label"
                                    for="column-${id}"
                                >
                                    ${columnLabel}
-                                </label>
+                                </span>
                                <span
                                    class="column-arrows"
                                >
@@ -2459,25 +2056,10 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
        return html`
            <config-section
                heading="Libraries"
-                description="Manage your music library folders, and scan them
+                description="Manage your music library folders. Scanning and its
-                    for new and changed files."
+                    progress live in the Jobs panel."
                .open=${true}
            >
                <div class="library-scope">
                    <div>
                        <span class="scope-label">Showing</span>
                        <p class="scope-description">
                            Which library the Albums, Artists and Genres
                            views show. This is a view filter, not a
                            setting about the libraries themselves — the
                            list below is where they are added, renamed
                            and scanned.
                        </p>
                    </div>
                    <library-filter data-testid="settings-library-filter">
                    </library-filter>
                </div>
                <div class="scan-actions">
                    <button
                        class="btn-primary"
@@ -2485,23 +2067,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                    >
                        Add Library
                    </button>
                    <button
                        ?disabled=${this.anyScanning
                || this.startingScan
                || this.libraries.length === 0}
                        @click=${this.handleScanAll}
                    >
                        Scan All
                    </button>
                    <button
                        class="btn-danger"
                        ?disabled=${this.anyScanning
                || this.startingScan
                || this.libraries.length === 0}
                        @click=${this.handleFullRescan}
                    >
                        Full Rescan
                    </button>
                </div>
                ${this.libraries.length > 0
@@ -2539,8 +2104,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                                        <span class="library-count">
                                            ${this.removingLibraryId === lib.id
                                                ? 'Removing…'
-                                                : this.libraryScanStatus(lib.id)
+                                                : html`${lib.trackCount} tracks`}
                                                    ?? html`${lib.trackCount} tracks`}
                                        </span>
                                        <div class="overflow-wrapper">
                                            <button
@@ -2563,16 +2127,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                                                          >
                                                              Rename
                                                          </div>
                                                          ${this.libraryScanStatus(lib.id) === null
                                                            ? html`
                                                                  <div
                                                                      class="overflow-item"
                                                                      @click=${() => this.handleScanLibrary(lib.id)}
                                                                  >
                                                                      Scan now
                                                                  </div>
                                                              `
                                                            : nothing}
                                                          <div
                                                              class="overflow-item overflow-item--danger"
                                                              @click=${() => void this.handleRemoveClick(lib.id)}
@@ -2616,11 +2170,6 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                    @config-change=${this.handleConcurrencyChange}
                ></config-field>
                <job-panel
                    kinds="library-scan"
                    heading="Scans"
                ></job-panel>
            </config-section>
        `;
    }
@@ -8,7 +8,6 @@ import '@awesome.me/webawesome/dist/components/switch/switch.js';
 import '@awesome.me/webawesome/dist/components/spinner/spinner.js';
 import '@awesome.me/webawesome/dist/components/callout/callout.js';
 import { designTokens } from '../../styles/tokens.css';
 import { waTouchFloor } from '../../styles/wa-touch-floor.css';
 import type {
    DownloadDescriptor,
    DownloadProvider,
@@ -23,7 +22,6 @@ import { compact } from '@utils/binding';
 import { describeError, explainError } from '@utils/describe-error';
 import { confirmAction } from '@components/confirm-dialog/confirm-dialog';
 import './config-section';
 import '@components/jobs/job-panel';
 import { pickDirectory } from '../../utils/pick-directory';
 /**
@@ -137,7 +135,6 @@ export class DownloadClients extends LitElement {
    static override styles = [
        designTokens,
        waTouchFloor,
        css`
            :host {
                display: block;
@@ -241,17 +238,12 @@ export class DownloadClients extends LitElement {
                margin-top: 0.4em;
            }
            /* The checkbox is 16x16 and cannot grow without becoming
               a 44px checkbox, but it is already wrapped in the label
               that names it -- so the label is the target and only
               needs the height (#186). Eight of them. */
            .format-option {
                display: flex;
                align-items: center;
                gap: 0.4em;
                font-size: 0.9em;
                cursor: pointer;
                min-block-size: 44px;
            }
        `,
    ];
@@ -282,17 +274,6 @@ export class DownloadClients extends LitElement {
                            </wa-button>
                        </div>
                    `}
                <!--
                  The Downloads view already shows every download's
                  lifecycle state; what it has never had is pause,
                  cancel and the log, which the Jobs tab carried (#27).
                  Renders nothing while nothing is downloading.
                -->
                <job-panel
                    kinds="download"
                    heading="Downloads in progress"
                ></job-panel>
            </config-section>
            <config-section
@@ -25,11 +25,6 @@ export class ShortcutCapture extends LitElement {
        :host {
            display: inline-block;
        }
        /* 80x25, twenty-six of them -- the most numerous control on
           the Settings page after the column lists (#186). The floor
           is a height here and nothing else: the width was already
           past it, and the type stays where it is so a shortcut still
           reads as a key rather than as a button. */
        button {
            font-family: inherit;
            font-size: var(--yj-text-sm, 13px);
@@ -40,7 +35,6 @@ export class ShortcutCapture extends LitElement {
            color: var(--yj-text-primary, #eee);
            cursor: pointer;
            min-width: 80px;
            min-height: 44px;
            text-align: center;
            transition:
                border-color 0.15s,
@@ -67,11 +61,6 @@ export class ShortcutCapture extends LitElement {
                opacity: 0.7;
            }
        }
        /* Reset renders only for a rebound shortcut, so a sweep of a
           freshly-installed app never sees it -- it is not in #186's
           tables for that reason, and it is a touch target the moment
           anybody uses the feature. It also has no background, so the
           padding out to 44px is invisible. */
        .reset-btn {
            font-size: var(--yj-text-xs, 11px);
            padding: 2px 6px;
@@ -80,8 +69,7 @@ export class ShortcutCapture extends LitElement {
            background: transparent;
            color: var(--yj-text-tertiary, #888);
            cursor: pointer;
-            min-width: 44px;
+            min-width: auto;
            min-height: 44px;
            opacity: 0;
            transition: opacity 0.15s;
        }
@@ -91,17 +79,6 @@ export class ShortcutCapture extends LitElement {
        .reset-btn:hover {
            color: var(--yj-accent-text, #ffd43b);
        }
        /*
         * Reset is the only way to put a rebound shortcut back, so where
         * the device has no hover it is always visible rather than an
         * invisible button holding its hit area. The inverse of #68's
         * rule, which applies where the hover control is redundant.
         */
        @media not all and (hover: hover) {
            .reset-btn {
                opacity: 1;
            }
        }
    `;
    private handleClick = () => {
@@ -23,8 +23,7 @@ import { gridColumnsFor, gridSpacingFor } from '@utils/grid-spacing';
 import { queueStore } from '@store/queue-store';
 import type { QueueSource } from '@store/queue-store';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
-import type { MenuSurface } from '../menu-surface/menu-surface';
+import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
 import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@components/playlist-picker/playlist-picker.js';
@@ -52,7 +51,7 @@ import {
    ContextMenuController,
    isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost } from '@utils/context-menu-controller.js';
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { creditLink, exploreLinkStyles } from '../../utils/explore-link';
 import { creditStore } from '@store/credit-store';
@@ -416,17 +415,17 @@ export class CoverGrid
    splitIndex = 0;
    @query('#context-menu')
-    private contextMenuPopup!: MenuSurface;
+    private contextMenuPopup!: WaPopup;
    @query('#playlist-submenu')
-    private playlistSubmenuPopup!: MenuSurface;
+    private playlistSubmenuPopup!: WaPopup;
    // ContextMenuHost interface.
-    getContextMenuPopup(): MenuTarget | undefined {
+    getContextMenuPopup(): WaPopup | undefined {
        return this.contextMenuPopup;
    }
-    getPlaylistSubmenuPopup(): MenuTarget | undefined {
+    getPlaylistSubmenuPopup(): WaPopup | undefined {
        return this.playlistSubmenuPopup;
    }
@@ -2088,8 +2087,11 @@ export class CoverGrid
        const { ctxMenu } = this;
        return html`
-            <menu-surface
+            <wa-popup
                id="context-menu"
                placement="bottom-start"
                flip
                shift
                .active=${ctxMenu.contextMenuOpen}
            >
                ${ctxMenu.contextMenuOpen
@@ -2202,12 +2204,13 @@ export class CoverGrid
                          </div>
                      `
                : nothing}
-            </menu-surface>
+            </wa-popup>
-            <menu-surface
+            <wa-popup
                id="playlist-submenu"
                label="Add to playlist"
                placement="right-start"
                flip
                shift
                .active=${ctxMenu.playlistSubmenuOpen}
            >
                ${ctxMenu.playlistSubmenuOpen
@@ -2229,7 +2232,7 @@ export class CoverGrid
                          </div>
                      `
                : nothing}
-            </menu-surface>
+            </wa-popup>
            <track-details></track-details>
        `;
@@ -246,7 +246,7 @@ export class DownloadPicker extends LitElement {
            return html`
                <wa-callout variant="success">
                    Found a clear match and started downloading it. Progress is
-                    on the Downloads page.
+                    in the background jobs panel.
                </wa-callout>
            `;
        }
@@ -3,7 +3,6 @@ import { customElement, state } from 'lit/decorators.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/button/button.js';
 import '@components/page-header/page-header';
 import type { PageAction } from '@components/page-header/page-header';
 import { designTokens } from '../../styles/tokens.css';
 import { downloadStore, stateLabel } from '@store/download-store';
 import type { Request, RequestSummary, DownloadView as DownloadRecord } from '@store/download-store';
@@ -93,26 +92,8 @@ export class DownloadsView extends ViewLifecycleMixin(LitElement) {
                border-bottom: 1px solid var(--yj-bg-overlay, rgba(255, 255, 255, 0.08));
            }
            /* 85x34 and 96x34 before this (#186). A tab is the only
               route to the panel it names, so it is the last control
               that should be hard to hit -- and the underline that
               marks the active one is drawn on the bottom border,
               which a taller box moves further from the label. So the
               height goes on *padding*, keeping the border against
               the label rather than 10px below a centred one.
               The min-size is the floor and is not redundant: padding
               alone made this 44px here and **43px in CI**, because
               the total is 13 + 13 + 2 + whatever line box the font
               gives 13px text, and ubuntu:24.04's is a pixel shorter
               than this machine's. A height computed from a font's
               line box is not a height you control -- the same
               mistake #195 made about a layout property measured on
               one engine, one layer down, and caught here by the test
               rather than by a person. */
            .tab {
-                min-block-size: 44px;
+                padding: 8px 14px;
                padding: 13px 14px;
                font-size: 13px;
                font-weight: 600;
                color: var(--yj-text-secondary, #b3b3b3);
@@ -265,23 +246,23 @@ export class DownloadsView extends ViewLifecycleMixin(LitElement) {
    override render() {
        return html`
-            <page-header
+            <page-header heading="Downloads">
-                heading="Downloads"
+                ${this.tab === 'requests'
-                .actions=${this.tab === 'requests'
+                    ? html`
-                    ? ([
+                          <wa-button
-                          {
+                              slot="actions"
-                              id: 'check-now',
+                              size="small"
-                              label: this.checking
+                              appearance="outlined"
-                                  ? 'Searching\u2026'
+                              ?disabled=${this.checking}
-                                  : 'Check now',
+                              title="Search every download client for everything on this list right now, instead of waiting for the next scheduled check"
-                              icon: 'rotate',
+                              @click=${() => void this.checkNow()}
-                              disabled: this.checking,
+                          >
-                              title: 'Search every download client for everything on this list right now, instead of waiting for the next scheduled check',
+                              <wa-icon slot="start" name="rotate"></wa-icon>
-                              onSelect: () => void this.checkNow(),
+                              ${this.checking ? 'Searching…' : 'Check now'}
-                          },
+                          </wa-button>
-                      ] satisfies PageAction[])
+                      `
-                    : []}
+                    : nothing}
-            ></page-header>
+            </page-header>
            <p class="subtitle">
                Music you have requested, and the download attempts that
@@ -2,7 +2,6 @@ import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { designTokens } from '../../styles/tokens.css';
 import { backButton } from '../../styles/back-button.css';
 import { srOnly } from '../../styles/sr-only.css';
 import { unownedLabel, unownedStyles } from '@utils/ownership';
 import {
@@ -50,11 +49,9 @@ import {
    contextMenuStyles,
    isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost } from '@utils/context-menu-controller.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
 import type { MenuSurface } from '../menu-surface/menu-surface';
 import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import { dictByName } from '@utils/binding';
 import type { TrackDetails } from '@components/track-details/track-details.js';
@@ -330,7 +327,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
    @state() private ctxMenuTrack: MBTrack | null = null;
    @query('#track-context-menu')
-    private contextMenuPopup!: MenuSurface;
+    private contextMenuPopup!: WaPopup;
    @query('#playlist-submenu')
    private playlistSubmenuPopup?: WaPopup;
@@ -340,11 +337,11 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
    // -- ContextMenuHost interface --
-    getContextMenuPopup(): MenuTarget | undefined {
+    getContextMenuPopup(): WaPopup | undefined {
        return this.contextMenuPopup;
    }
-    getPlaylistSubmenuPopup(): MenuTarget | undefined {
+    getPlaylistSubmenuPopup(): WaPopup | undefined {
        return this.playlistSubmenuPopup;
    }
@@ -356,7 +353,6 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
    static override styles = [
        designTokens,
        backButton,
        exploreLinkStyles,
        contextMenuStyles,
        srOnly,
@@ -381,6 +377,25 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                    var(--yj-border-subtle, rgba(255, 255, 255, 0.06));
            }
            .back-button {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border: none;
                border-radius: 50%;
                background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
                color: var(--yj-text-primary, #fff);
                cursor: pointer;
                flex-shrink: 0;
                transition: background-color 0.15s ease;
            }
            .back-button:hover {
                background: var(--yj-bg-hover, rgba(255, 255, 255, 0.12));
            }
            .back-button wa-icon {
                font-size: 16px;
            }
@@ -875,67 +890,6 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
            .track-row .track-request {
                flex-shrink: 0;
            }
            /* ── The phone (#66) ──
             *
             * **This block is last on purpose**, for index.css's
             * reason: a media query adds no specificity, so a rule
             * written above the plain one it overrides loses to it and
             * every declaration here is silently dead.
             *
             * Two faults, one shape. The page is a fixed header over a
             * scrolling tracklist — the desktop arrangement — so at the
             * reference device's 424x439 the header owned 253 of the
             * panel's 318px and the tracklist scrolled inside the 64px
             * that were left. And the header's flex row squeezed
             * .album-info to 112px, so the title drew as one ellipsised
             * glyph and two of the album's three primary actions were
             * clipped by the host's own overflow: Shuffle album ended
             * at x=443 in a 424px box, unreachable by any gesture.
             *
             * .album-info carries min-width: 0 and was shrinking as
             * asked, so another one is not the fix — the row has to
             * stack, or the info column has nothing to be wide with.
             *
             * The scroller moves to the host and .content stops being
             * one, which is what makes the header scroll away; the
             * tracklist is plain DOM rather than a virtualizer, so
             * nothing inside wants a scroll window of its own. */
            @media (max-width: 599px) {
                :host {
                    overflow-y: auto;
                }
                .album-header {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 12px;
                    padding: 12px 16px;
                }
                /* Stacked, the art is the whole of the header's width
                 * budget and its 200px square is 45% of the reference
                 * device's height. It is still what identifies the
                 * album, so it shrinks rather than going. */
                .cover-art-container {
                    width: 140px;
                    height: 140px;
                }
                /* A column flex item takes its content's width from
                 * align-items: flex-start above, which would leave the
                 * actions wrapping inside a box narrower than the row
                 * they now have to themselves. */
                .album-info {
                    align-self: stretch;
                }
                .content {
                    flex: 0 0 auto;
                    overflow-y: visible;
                    padding: 16px 16px 24px;
                }
            }
        `,
    ];
@@ -3827,8 +3781,11 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
        const track = this.ctxMenuTrack;
        return html`
-            <menu-surface
+            <wa-popup
                id="track-context-menu"
                placement="bottom-start"
                flip
                shift
                .active=${this.ctxMenu.contextMenuOpen}
            >
                ${this.ctxMenu.contextMenuOpen && track
@@ -3889,12 +3846,13 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                          </div>
                      `
                    : nothing}
-            </menu-surface>
+            </wa-popup>
-            <menu-surface
+            <wa-popup
                id="playlist-submenu"
                label="Add to playlist"
                placement="right-start"
                flip
                shift
                .active=${this.ctxMenu.playlistSubmenuOpen}
            >
                ${this.ctxMenu.playlistSubmenuOpen
@@ -3911,7 +3869,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                          </div>
                      `
                    : nothing}
-            </menu-surface>
+            </wa-popup>
        `;
    }
 }
@@ -3,7 +3,6 @@ import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { designTokens } from '../../styles/tokens.css';
 import { backButton } from '../../styles/back-button.css';
 import {
    LookupArtist,
    BrowseReleaseGroups,
@@ -62,11 +61,9 @@ import {
    contextMenuStyles,
    isContextMenuKey,
 } from '@utils/context-menu-controller.js';
-import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller.js';
+import type { ContextMenuHost } from '@utils/context-menu-controller.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
 import type { MenuSurface } from '../menu-surface/menu-surface';
 import '../menu-surface/menu-surface';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import { dict, dictByName } from '@utils/binding';
 import type { TrackDetails } from '@components/track-details/track-details.js';
@@ -218,7 +215,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
    @state() private ctxMenuTarget: ContextMenuTarget | null = null;
    @query('#context-menu')
-    private contextMenuPopup!: MenuSurface;
+    private contextMenuPopup!: WaPopup;
    @query('#playlist-submenu')
    private playlistSubmenuPopup?: WaPopup;
@@ -236,11 +233,11 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
    // -- ContextMenuHost interface --
-    getContextMenuPopup(): MenuTarget | undefined {
+    getContextMenuPopup(): WaPopup | undefined {
        return this.contextMenuPopup;
    }
-    getPlaylistSubmenuPopup(): MenuTarget | undefined {
+    getPlaylistSubmenuPopup(): WaPopup | undefined {
        return this.playlistSubmenuPopup;
    }
@@ -267,7 +264,6 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
    static override styles = [
        designTokens,
        backButton,
        exploreLinkStyles,
        contextMenuStyles,
        unownedStyles,
@@ -291,6 +287,25 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                    var(--yj-border-subtle, rgba(255, 255, 255, 0.06));
            }
            .back-button {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border: none;
                border-radius: 50%;
                background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
                color: var(--yj-text-primary, #fff);
                cursor: pointer;
                flex-shrink: 0;
                transition: background-color 0.15s ease;
            }
            .back-button:hover {
                background: var(--yj-bg-hover, rgba(255, 255, 255, 0.12));
            }
            .back-button wa-icon {
                font-size: 16px;
            }
@@ -2606,8 +2621,11 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
        const target = this.ctxMenuTarget;
        return html`
-            <menu-surface
+            <wa-popup
                id="context-menu"
                placement="bottom-start"
                flip
                shift
                .active=${this.ctxMenu.contextMenuOpen}
            >
                ${this.ctxMenu.contextMenuOpen && target
@@ -2625,12 +2643,13 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                          </div>
                      `
                    : nothing}
-            </menu-surface>
+            </wa-popup>
-            <menu-surface
+            <wa-popup
                id="playlist-submenu"
                label="Add to playlist"
                placement="right-start"
                flip
                shift
                .active=${this.ctxMenu.playlistSubmenuOpen}
            >
                ${this.ctxMenu.playlistSubmenuOpen
@@ -2647,7 +2666,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                          </div>
                      `
                    : nothing}
-            </menu-surface>
+            </wa-popup>
        `;
    }
--- a/Show More
+++ b/Show More
		`@@ -1 +0,0 @@`
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l370.7 0-105.4 105.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
		`@@ -1 +0,0 @@`
			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M0 256a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm168 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm224-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/></svg>`