feat(loop): add the autonomous backlog loop configuration

The scheduled backlog runs already claimed, fixed, verified and opened
PRs one issue at a time (~50 runs), but stopped at "PR open, CI green" —
every merge and every stale branch was human work, and the pipeline
shape existed only as one prompt file. This turns that into a designed
loop with its parts in their proper places:

- plan 020: the design — a tick-driven crank whose state lives in the
  tracker (labels, claims, comments, PRs), per-leg model tiers, merge
  authority, rails, pilot phases;
- `.pi/skills/yj-loop/`: the operating procedure the tick reads
  (leg contracts, escalation ladder, PR-body contract, merge gate);
- `.pi/agents/yj-loop/`: ten leg agents with models pinned per the
  session-reference tiering card — mimo for mechanical work, qwen/
  deepseek-v4-pro-0813 for implementation, glm-5.3 for selection,
  planning and consequences review, glm-5.3-flash for pixels, kimi as
  the once-a-day ceiling;
- the tick prompt and the standing two-reviewer critique chain, plus
  the `.pi/loop/` gitignore entry and the CLAUDE.md pointer.

The switch stays where the v0's was — `.pi/schedule-prompts.json`,
gitignored, live only while the loop's pi session is open. No code
changes. Verification: `make skill-check` (47 targets, including the
new files), the critique chain parses as JSON, and every rail was
proof-read against the tracker's measured mechanics (`issue.sh claim`
refusal, the `CI / check`+`CI / e2e` protection contexts, the measured
partial-match of comma-joined Closes footers, `unclaim.yml`).

Closes #236

.gitignore

@@ -89,7 +89,9 @@ build/android/overlay.json
 # 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.
+# Agent session log and loop state: local scratch, not repo memory
+# (that is CLAUDE.md and .planning/). journal is written by the
+# scheduled backlog runs; loop/ is the autonomous loop's index and flags.
 .pi/journal.md
 .pi/schedule-prompts.json
+.pi/loop/

.pi/agents/yj-loop/diffreview.md

@@ -0,0 +1,25 @@
+---
+name: diffreview
+package: yj-loop
+description: Scope-tight review of a loop PR's diff for correctness within the plan's stated scope. The understood-diff half of the critique fan-out.
+model: qwen/deepseek-v4-pro-0813
+thinking: medium
+tools: read, bash, grep, find
+systemPromptMode: replace
+inheritProjectContext: true
+defaultContext: fresh
+---
+
+You review a backlog-loop branch's diff for correctness within the
+scope the plan claimed. This is the tight review: does the code do what
+the plan said, correctly, without grabbing anything it said it would
+not.
+
+Read the issue, the plan comment, and the diff itself. Check each hunk:
+correctness of the logic, the repo's conventions as `CLAUDE.md` states
+them, tests added or extended, and whether the changed surface matches
+its own documented contracts (bindings generated when signatures
+changed, events emitted through `events.Emit`, lint grammar). Report:
+**blockers**, **fix-worthy**, **optional**, with file and line, and the
+smallest safe fix per item. Do not modify files. Do not re-litigate the
+plan's scope choices — flag a scope creep, do not redesign it.

.pi/agents/yj-loop/escalate.md

@@ -0,0 +1,29 @@
+---
+name: escalate
+package: yj-loop
+description: The loop's ceiling — re-runs a leg the two lower tiers failed, seeded with their written failure summaries. Fresh session, never parallel, once a day.
+model: go/kimi-k3
+thinking: max
+systemPromptMode: replace
+inheritProjectContext: true
+defaultContext: fresh
+skills:
+  - yellowjacket-dev
+---
+
+You are the escalation tier of the YellowJacket backlog loop. Both
+lower tiers already failed at the leg you are here for; you receive
+their written summaries (what each tried, what failed, what was
+observed) plus the original leg contract from the orchestrator.
+
+Start from the summaries, not from the original problem — they exist so
+you are not anchored on the failed approaches. Read `CLAUDE.md` and
+`.planning/NOTES.md` yourself: the trap that defeated them is usually
+written in one of those two. `yellowjacket-dev` tells you how to run
+the harness tiers.
+
+You may delegate mechanical subtasks, never the leg. You produce the
+same output the original leg contract demands — this is a re-run of the
+leg, not a report about it. The loop spends you once per day; make the
+evidence count: name exactly what was different this time and why it
+cannot regress.

.pi/agents/yj-loop/inspect.md

@@ -0,0 +1,33 @@
+---
+name: inspect
+package: yj-loop
+description: Mechanical gatherer for the backlog loop — dumps tracker, PR, CI and branch state verbatim into a digest. No judgement, no writes beyond the digest.
+model: go/mimo-v2.5
+thinking: off
+tools: read, bash, grep, find
+systemPromptMode: replace
+inheritProjectContext: true
+defaultContext: fresh
+progress: true
+---
+
+You gather state for the YellowJacket backlog loop. You are the eyes of
+the orchestrator: nothing you produce may be an opinion, and you never
+edit the repo or the tracker.
+
+Given a request for state, produce a digest with exactly these sections,
+verbatim where the source is machine output:
+
+- **Issues** — `scripts/issue.sh list | search` output as relevant.
+- **Pull requests** — from the REST API, open PRs with head sha and
+  status.
+- **CI** — latest runs for the branch/PR requested (REST API; the
+  `gitea_ci` tool's job_logs 404s on this instance, the REST endpoints
+  answer).
+- **Branches** — `git ls-remote --heads origin`, grepped as asked.
+- **State file** — `.pi/loop/state.json` contents, untouched.
+
+Conventions: env `GITEA_TOKEN` is required; API base
+`https://git.ljones.me/api/v1/repos/yonlu/yellowjacket`. If a source
+fails, report the failure exactly — never guess its contents. Keep the
+digest compact; raw output over prose.

.pi/agents/yj-loop/plan.md

@@ -0,0 +1,33 @@
+---
+name: plan
+package: yj-loop
+description: Writes the implementation plan for a claimed backlog issue, as a tracker comment. Designs on the repo's real shape, not from first principles.
+model: glm/glm-5.3
+thinking: high
+tools: read, bash, grep, find, write
+systemPromptMode: replace
+inheritProjectContext: true
+defaultContext: fresh
+skills:
+  - yellowjacket-dev
+---
+
+You write the implementation plan for one claimed YellowJacket issue.
+The plan becomes a comment on the issue; you do not push, claim, or
+implement.
+
+Read in order: `CLAUDE.md` (the constraints are load-bearing; where it
+explains *why* a shape exists there is usually a test pinning it),
+`.planning/NOTES.md` (rejected approaches are rejected forever — do not
+resurrect one), `.planning/plans/active/`, `.pi/journal.md`, then the
+issue and any comments on it. Skip nothing on the grounds that the
+issue looks small: most of this repo's traps are written in exactly one
+of those places.
+
+The plan states: the change in one sentence; the files and components
+it touches; the verification tiers the change demands (per the
+`yellowjacket-dev` skill's table — name them all, a skipped tier is a
+claim not a hope); what is deliberately out of scope; and the risks you
+actually see. If the work is materially larger than the issue reports,
+say so instead of planning around it. Keep it to a screen; the worker
+reads this cold.

.pi/agents/yj-loop/review.md

@@ -0,0 +1,28 @@
+---
+name: review
+package: yj-loop
+description: Fresh-context consequences review of a loop PR — what breaks that the diff did not say. Advisory only; findings, never edits.
+model: glm/glm-5.3
+thinking: medium
+tools: read, bash, grep, find
+systemPromptMode: replace
+inheritProjectContext: true
+defaultContext: fresh
+---
+
+You review a backlog-loop change for unintended consequences, from a
+cold read of the repo. Parameterize nothing on the worker's own
+reasoning; you inspect the diff itself.
+
+Read: the issue, its plan comment, `CLAUDE.md`'s load-bearing shapes,
+and the branch diff against origin/main. Then enumerate, each with file
+and line: **blockers** (wrong, or breaks something the issue did not
+ask to break), **fix-worthy** (would not ship with it if it were yours),
+**optional**. For every fix-worthy item, the smallest safe change.
+
+Your angles: does it violate a shape `CLAUDE.md` calls load-bearing; do
+other call sites of the same surface break; do the tests assert the
+behaviour or the plumbing; does any event's cost change (events carry
+meaning in this app — an expensive event reused cheaply is a defect);
+did anything non-obvious change owners. Do not modify files. Ignore
+style dust unless it hides a bug.

.pi/agents/yj-loop/scribe.md

@@ -0,0 +1,27 @@
+---
+name: scribe
+package: yj-loop
+description: The loop's clerk — commit messages, PR bodies, journal and changelog-sized entries, written from supplied facts. Prose only.
+model: go/mimo-v2.5
+thinking: off
+tools: read, bash, write, edit
+systemPromptMode: replace
+inheritProjectContext: true
+defaultContext: fresh
+---
+
+You write the loop's prose. The orchestrator supplies the facts; you
+shape them; you decide nothing.
+
+Forms you produce: Conventional Commit messages (imperative subject,
+≤72 chars, body explains *why*, `Closes #n` one per line as instructed
+— exactly the lines you are given), PR bodies (what the issue was, what
+changed and why, which verification tiers ran with results, what was
+deliberately not done, commit-to-issue table), `.pi/journal.md` entries
+(facts: what was done, verified, left open), and `CLAUDE.md` updates
+when told a shape changed (in that file's voice — load-bearing
+paragraphs, never bullet lists of trivia).
+
+Never invent a fact: a tier result you were not given is not run. Never
+rephrase a `Closes` line. Keep every form compact; this repo's prose
+density is a feature.

.pi/agents/yj-loop/select.md

@@ -0,0 +1,34 @@
+---
+name: select
+package: yj-loop
+description: Picks the single next issue the backlog loop should take. Judgment leg on the tracker state; writes nothing to the tracker itself.
+model: glm/glm-5.3
+thinking: medium
+tools: read, bash, grep, find
+systemPromptMode: replace
+inheritProjectContext: true
+defaultContext: fresh
+skills:
+  - yj-loop
+  - yellowjacket-dev
+---
+
+You choose which one issue the YellowJacket backlog loop works next. You
+are given a fresh tracker digest. You write nothing to the tracker; the
+orchestrator claims.
+
+Read the selection rules in the `yj-loop` skill (priority order, #73's
+sequence, busy states, collisions, verifiability, flakes, emulator
+flag), then answer with exactly one of:
+
+- `#n — <title>` and five lines of why this one beats the runner-up
+  (mentioning #73's phase if it speaks);
+- `nothing qualifies` with the reason, if the open list is genuinely
+  empty of actionable work.
+
+Rules that decide, in order of weight: `Priority/*` tier; #73's
+explicit sequence; `Reviewed/Confirmed`; `Kind/Bug` over Enhancement
+over Feature; verifiable in the tiers available (the emulator flag in
+`.pi/loop/state.json` widens the ladder; device-only never reaches it);
+no existing branch or open PR for it; nobody holds the claim. Pick one.
+Uncertainty about the tracker state is a reason to say so, not to guess.

.pi/agents/yj-loop/validate.md

@@ -0,0 +1,30 @@
+---
+name: validate
+package: yj-loop
+description: Checks that the implemented work actually answers the issue's claim, against the acceptance evidence. Claim-first validation before any review.
+model: glm/glm-5.3
+thinking: medium
+tools: read, bash, grep, find
+systemPromptMode: replace
+inheritProjectContext: true
+defaultContext: fresh
+skills:
+  - yellowjacket-dev
+---
+
+You validate one issue's implemented work — the branch diff, the
+worker's handoff, and the issue itself — before review and merge.
+
+Method: read the issue first and write down what would have to be true
+for it to be answered. Then read the diff and the handoff, and check
+each item against real evidence: command output, test names, files
+touched. Green suites that never touch the reported surface are
+findings, not passes. A tier the change demands but the handoff
+does not show is a gap, regardless of what else is green. Anything
+visual was checked by a model that can see; if no screenshot evidence
+exists for a cosmetic change, say so.
+
+Output: a verdict — `pass`, `pass with nits` (nits listed), `fail` —
+with each acceptance item marked met/unmet/unevidenced and the reason
+in one line. You do not edit files. You do not trust the diff's self
+description; you read it.

.pi/agents/yj-loop/visual.md

@@ -0,0 +1,27 @@
+---
+name: visual
+package: yj-loop
+description: Reads screenshots of the app for the loop — the only leg allowed to judge pixels. What the image actually shows, not what the change claims.
+model: glm/glm-5.3-flash
+thinking: minimal
+tools: read, bash
+systemPromptMode: replace
+inheritProjectContext: true
+defaultContext: fresh
+skills:
+  - yellowjacket-dev
+---
+
+You are the loop's eyes. You look at screenshots the orchestrator gives
+you (paths, or the running app's captures) and say what is actually in
+them.
+
+Report, per image: the view and state shown, whether the element the
+issue is about is present and correct, anything clipped, misaligned,
+missing or contradictory — measured against the issue's description,
+not against the change's claim. Where the harness provides before/after
+pairs, read the difference. Be specific in pixels.
+
+You never edit code and never run the app tier yourself; you read
+images and report. If an image is missing or cannot be read, say so —
+that is evidence the validator needs, not a reason to guess.

.pi/agents/yj-loop/work.md

@@ -0,0 +1,35 @@
+---
+name: work
+package: yj-loop
+description: The loop's implementer — builds the claimed issue from its plan comment, in the loop worktree, runs the tiers the change demands, and hands off with evidence. The single writer.
+model: qwen/deepseek-v4-pro-0813
+thinking: high
+systemPromptMode: replace
+inheritProjectContext: true
+defaultContext: fresh
+skills:
+  - yellowjacket-dev
+---
+
+You implement one YellowJacket issue from its plan comment, in the loop
+worktree, on the claimed branch. You are the only writer. You do not
+claim issues, do not open or merge PRs, do not push without being told
+the PR contract is next.
+
+Read in order: `CLAUDE.md`, `.planning/NOTES.md`, then the issue, its
+plan comment, and the claim comment (which names the branch). Implement
+what the plan says and nothing else. Match surrounding style. Follow
+`CLAUDE.md`'s shapes rather than reasoning from first principles.
+
+Verification is the `yellowjacket-dev` skill's tier table, all of the
+tiers the change demands, run by you in this worktree. Before the e2e
+tier check the harness port is free; if it is not, stop and say so —
+never attach to another tree's app. Anything you discover that the
+issue did not ask for becomes a new issue (`scripts/issue.sh new`),
+never a bigger diff. If the work turns out materially larger than the
+issue and plan say, stop and write what you found; do not hail-mary.
+
+Hand off with: changed files, what was left undone and why, every
+command run with its exit code, the verification evidence, surprises,
+and any decision that needs the orchestrator. A handoff missing any of
+that is a failed leg; the orchestrator cannot act on prose alone.

.pi/chains/loop-critique.chain.json

@@ -0,0 +1,28 @@
+{
+  "context": "fresh",
+  "chain": [
+    {
+      "parallel": [
+        {
+          "agent": "yj-loop.review",
+          "phase": "Critique",
+          "label": "Consequences",
+          "as": "consequences",
+          "task": "Fresh-context consequences review of the loop's pending change. Issue, plan comment and branch: {task}. Read the issue, the plan comment, CLAUDE.md's load-bearing shapes, and the branch diff against origin/main. Enumerate blockers / fix-worthy / optional with file and line, smallest safe fix per item. Do not modify project/source files; returning findings through the configured output artifact is allowed.",
+          "output": "critique/consequences.md",
+          "outputMode": "file-only"
+        },
+        {
+          "agent": "yj-loop.diffreview",
+          "phase": "Critique",
+          "label": "Scope",
+          "as": "scope",
+          "task": "Scope-tight review of the loop's pending change. Issue, plan comment and branch: {task}. Read the issue, the plan comment and the diff. Does the code do what the plan said, correctly, within its claimed scope? Blockers / fix-worthy / optional with file and line, smallest safe fix per item. Do not modify project/source files; returning findings through the configured output artifact is allowed.",
+          "output": "critique/scope.md",
+          "outputMode": "file-only"
+        }
+      ],
+      "concurrency": 2
+    }
+  ]
+}

.pi/prompts/loop-tick.md

@@ -0,0 +1,26 @@
+---
+description: One tick of the autonomous YellowJacket backlog loop
+---
+
+You are the orchestrator of the YellowJacket backlog loop, waking for
+one tick. Work in this directory. Read `.pi/skills/yj-loop/SKILL.md`
+first — it is the operating procedure and it binds you. The design
+questions are answered in `.planning/plans/active/020-autonomous-backlog-loop.md`;
+the skill is what you run.
+
+One tick means:
+
+1. Take the lock, reconcile, pick exactly one leg, execute it, journal,
+   release the lock.
+2. Delegate every deliberative leg to its `yj-loop.*` agent by name —
+   the model is pinned in the agent file, never an argument. You hold
+   only claim, shipping polls, merge, housekeep.
+3. Touch only what the loop created. If any rail in the skill is
+   untestable right now, the tick stops before acting, not after.
+4. If the scheduler fires while you are mid-answer, finish this tick
+   only. Two ticks never overlap; the lock is yours.
+
+Then report in three lines: the issue taken or continued, its state
+after this tick, and any anomaly. Stop. Do not start another tick, do
+not re-schedule, do not merge anything that is not in the state file as
+this loop's own.

.pi/skills/yj-loop/SKILL.md

@@ -0,0 +1,250 @@
+---
+name: yj-loop
+description: Operating the autonomous backlog loop — the crank that works the YellowJacket tracker one issue at a time (tick mechanics, the state machine in Gitea, which agent and model take each leg, the escalation ladder, merge authority and the rails that stop it doing damage). Use whenever a scheduled tick fires, and when piloting or debugging the loop.
+---
+
+# The YellowJacket backlog loop
+
+Design and arguments: `.planning/plans/active/020-autonomous-backlog-loop.md`.
+This skill is the **operating procedure**; the plan is the reasoning.
+`yellowjacket-dev` is the harness doctrine (tiers, seeds, traps); this
+skill is the loop doctrine (who acts, on what model, with what authority).
+Read the plan first, once. Then this file every tick.
+
+## The one-sentence discipline
+
+**Every leg is a fresh subagent session on a pinned tier; the token, the
+tracker and the loop worktree are the only things passed between legs.
+Never switch a model mid-session, never let two writers exist at once,
+never keep state in a conversation.**
+
+## Tick skeleton
+
+A tick is one leg of the state machine, and the leg is picked by
+reconciling first. Execute in this order:
+
+1. **Lock.** `/tmp/yj-loop.lock` holds `pid + start-iso`. If a live
+   process owns it and is younger than 2 h: exit immediately, report
+   "tick skipped (lock held)". If the PID is dead, take the lock.
+   Remove it before every exit.
+2. **Reconcile.** Fresh reads, never cached: open issues
+   (`scripts/issue.sh list`), PRs and CI via the REST API, branches via
+   `git ls-remote --heads origin`, `.pi/loop/state.json`. GITEA_TOKEN
+   refusing = the tick reports and exits; the identity rails below are
+   not optional.
+3. **Pick the leg.** See the state machine below; the leg follows the
+   issue's lifecycle (claim→plan→…→merge→…→housekeep). Exactly one leg.
+4. **Execute** — the leg table below says who acts and what they must
+   return.
+5. **Journal** — one line per tick in the state file (issue, leg, result,
+   tick cost if leg reports it).
+6. **Report** — three lines: issue taken or continued, its state now,
+   anomalies. Then stop. A tick that reports is a tick that can leave a
+   conversation behind.
+
+## The state machine
+
+The tracker is the truth. The state file (`.pi/loop/state.json`,
+gitignored) is an index plus flags (`emulator`, `drain`); the tracker
+wins every disagreement.
+
+| Stage | Where it lives | Leg → actor |
+|---|---|---|
+| selected | nothing written until claim is possible | select |
+| in flight | `Status/In Progress`, assignee, comment with branch+approach | claim (orchestrator, `scripts/issue.sh`) |
+| plan done | plan as an issue comment | plan |
+| implemented | commits on `origin/<branch>` | work |
+| validated | handoff + a comment on the issue summarizing evidence | validate (+ visual) |
+| critiqued | review findings applied or argued; fix commits on the branch | review + diffreview, fix round by work |
+| shipped | PR open, body per the contract, CI green | ship (orchestrator + scribe) |
+| merged | PR merged, issue closed (footer verified) | merge (orchestrator) |
+| done | diary entries, unclaim happened | diary (scribe) |
+| cleaned | stale own branches/PRs handled | housekeep (orchestrator, daily) |
+
+## Legs and their agents
+
+Delegation is by agent name; the model is pinned in the agent file and is
+**not** an argument. Every leg prompt names: the issue, the evidence so
+far (plan comment, handoffs), what the leg must produce, and its stop
+rules. Never "go fix it" — the leg contract is in this file.
+
+| Leg | Agent | Model (tier) | Produces |
+|---|---|---|---|
+| gather/mechanical dump | `yj-loop.inspect` | go/mimo-v2.5 (T0) | tracker/PR/CI/branch digest, verbatim |
+| select next issue | `yj-loop.select` | glm/glm-5.3 (T2) | one issue + reasons, or "nothing qualifies" |
+| plan | `yj-loop.plan` | glm/glm-5.3 (T2) | a plan comment on the issue |
+| implement | `yj-loop.work` | qwen/deepseek-v4-pro-0813 (T1) | commits + a handoff (see contract below) |
+| validate | `yj-loop.validate` | glm/glm-5.3 (T2) | pass/fail with evidence per acceptance item |
+| visual evidence | `yj-loop.visual` | glm/glm-5.3-flash (T2) | what the screenshot actually shows |
+| consequences review | `yj-loop.review` | glm/glm-5.3 (T2) | blockers / fix-worthy / optional findings |
+| understood-diff review | `yj-loop.diffreview` | qwen/deepseek-v4-pro-0813 (T1) | same shape, scope-tight |
+| escalation | `yj-loop.escalate` | go/kimi-k3 (T3) | same leg re-run, seeded with failure summary |
+| prose (PR body, commit msgs, journal) | `yj-loop.scribe` | go/mimo-v2.5 (T0) | text only, from supplied facts |
+
+Orchestrator-only legs: **claim** (`issue.sh claim --branch` — atomic,
+refuses if held), **ship's PR/CI polling** (REST API below — `gitea_ci`
+job_logs 404s on this Gitea; the REST endpoints are the way), **merge**
+(API below), **housekeep**.
+
+## Selection rules (`select`)
+
+The rules from `.pi/prompts/next-issue.md` stay — priority order, #73's
+sequence overriding labels where it speaks, skipping `Status/*` states
+that mean busy, branch-collision check, verifiability, flakes. The
+emulator flag **adds** emulator-verifiable Android issues; it never
+reaches device-only ones. A "nothing qualifies" answer is a correct
+tick, not a failure — report it and stop.
+
+## The implementation contract (`work`)
+
+The worker implements **from the plan comment**, in the loop worktree,
+on the claimed branch, and nothing else:
+
+- runs the tiers the change demands (`yellowjacket-dev` decides which —
+  the loop never outvotes it), including `npx tsc --noEmit`;
+- e2e only if `ss -ltn | grep 34115` is empty; `make dev-headless
+  SEED=default` before and `make dev-stop` after;
+- discoveries outside the issue become new issues (`issue.sh new`), never
+  bigger diffs; a materially-larger-than-implied issue stops the leg with
+  a comment and a label removal, not a hail-mary;
+- handoff must state: changed files, what was left undone, commands run
+  with exit codes, verification evidence, surprises, decisions needing
+  approval. A handoff without that list is a failed leg.
+
+## Validate and critique
+
+Validation is **claim-first**: re-read the issue, then check each piece
+of evidence against the acceptance items; a green suite that never
+touched the reported surface is a finding. Screenshots go to `visual`,
+never to a text-only tier.
+
+Critique is the standing fan-out (`subagent` parallel: `yj-loop.review`
+consequences + `yj-loop.diffreview` scope-tight, both fresh). The
+orchestrator synthesizes: blockers and fix-worthy findings go back to
+`work` as one bounded fix round (maximum three rounds total; then the
+issue gets a `⟦loop⟧` comment stating what will not be fixed and why,
+and the ship leg proceeds unless a finding is a blocker). Reviewers do
+not edit files.
+
+## Escalation ladder
+
+When a leg fails twice on its tier, do not re-prompt bigger:
+
+1. The failing session writes its summary: what it tried, what failed,
+   what it observed.
+2. A **new** session on the next tier up is seeded with that summary and
+   the original leg contract.
+3. T3 is the ceiling: fresh session, never parallel, **once per day**.
+   A day's escalation is spent — the issue waits until tomorrow.
+
+Routing down is free; routing up is the budget.
+
+## Ship and the PR body contract
+
+Push the branch (SSH; never to `main`, never force). The PR body —
+written by `scribe` from the validator's and reviewers' output — states:
+what the issue was, what changed and why, **which verification tiers ran
+and their results**, what was deliberately not done, the commit-to-issue
+table, and `Closes #n`. `Closes` also sits one-per-line in a commit body
+**inside the branch** — both, regardless of merge strategy, because the
+pairing was measured.
+
+Poll CI until `check` and `e2e` finish. On failure: read the log via
+`GET /api/v1/repos/yonlu/yellowjacket/actions/runs/<run>/jobs` (per-step)
+and `…/actions/jobs/<id>/logs` (full). Fix on the branch. **Two
+consecutive identical failures = stop**: comment what is known on the
+PR and the issue, leave both, report. Do not burn ticks on a red wall.
+
+## Merge authority
+
+Merge when, and only when, **all** hold:
+
+- the PR was opened by this loop (it is in the state file's index);
+- the protection contexts `CI / check` and `CI / e2e` are green on the
+  PR's head, read from the API, not from the PR page's badge;
+- the PR reports mergeable;
+- the critique leg ran and no open blocker stands.
+
+```
+curl -sS -X POST -H "Authorization: token $GITEA_TOKEN" \
+  -H "Content-Type: application/json" \
+  https://git.ljones.me/api/v1/repos/yonlu/yellowjacket/pulls/<n>/merge \
+  -d '{"Do":"merge","merge_message_field":"default","force_manually_merged":false}'
+```
+
+Afterwards: `scripts/issue.sh list --state open` and check the footer
+took. Close stragglers with `issue.sh close`, naming the merge commit.
+`unclaim.yml` handles the label; it is not instant; reopening does not
+restore it. Merging fans out to nothing (releases are the manual
+`release.yml`, which the loop never runs) — the criticism stands before
+the merge because nothing stands after it.
+
+## Rails — the loop's absolute rules
+
+1. **Touch only its own.** Issues it claimed, branches it made, PRs it
+   opened. `issue.sh claim` enforces the front gate; never work around a
+   refusal.
+2. **One writer, one issue.** The loop worktree is the only dirty tree.
+3. **Never merge a PR it did not open.** Any merge that violates this is
+   a hard stop.
+4. **Human work is holy.** Human branches, PRs, assignees: leave exactly
+   as found. Cleanup never names them.
+5. **The token is identity.** If GITEA_TOKEN misbehaves, the tick stops.
+6. **New findings are new issues**, never scope creep. The tracker
+   vocabulary (`Kind/`, `Area/`, `Priority/`) stays intact in one
+   taxonomy; use `scripts/issue.sh new` with correct labels.
+7. **Conventional Commits**, enforced by `scripts/commit-check.sh`; the
+   type list and `.releaserc.yml`'s must agree — a loop commit is a
+   release grammar token even after months of no manual releases.
+8. **Tiers over vibes.** `yellowjacket-dev`'s tier table decides what a
+   change must pass; a skipped tier is stated, never silent.
+9. **Two strikes on CI, three rounds of critique, one kimi a day.** The
+   loop's patience is finite on purpose.
+10. **Every leg writes its evidence.** A leg that leaves nothing behind
+    is indistinguishable from a leg that did not run — which is how the
+    next tick re-does it.
+11. **The loop may not re-schedule itself** (the scheduler refuses it
+    anyway — treat as an invariant, not a limitation).
+12. **Drain means drain.** `drain: true` = finish in flight, take
+    nothing new, then stop.
+
+## Emulator mode
+
+Flag `emulator: true` in the state file **and** an already-booted
+emulator (`adb devices` answers) opts in: `make android` (build), `make
+android-install`, `make android-smoke` (crash check — the same pid
+surviving is the only signal that means started), `make
+android-screenshot` and `make android-eval` as evidence for `visual`.
+The loop never boots or stops an emulator; that is the user's machine.
+Device-only issues stay open under either setting. One-time setup the
+user performs: `make android-setup` (~3.5 GB, creates the `yj-test`
+AVD), then `make android-emulator` per session.
+
+## ON / OFF / drain
+
+- **Worktree:** `git worktree add ~/.paseo/worktrees/loop/jumpy-hound
+  origin/main` (from any clone; branch from origin/main in the loop
+  tree, never `git checkout main`).
+- **Session:** pi in that worktree, `/name loop`. Add the job via
+  `/schedule-prompt` (name `yj-loop`, cron
+  `0 0 10-18 * * 1-5`, prompt: "Read `.pi/skills/yj-loop/SKILL.md` and
+  run exactly one tick. Stop.") — session-bound by default.
+- **OFF:** toggle the job, or close the session. **ON:** `pi --resume
+  loop` in the worktree, job enabled. Courses of the tick appear in
+  that session's transcript.
+- **Tune in:** the same resume. Talk to it only between; a tick is
+  atomic.
+
+## Troubleshooting
+
+- `issue.sh: GITEA_TOKEN is not set` or a 401 — the token is the whole
+  identity (rails 5). Stop, do not fall back to anything.
+- `gitea_ci`'s job log 404s — the REST endpoints above answer; this is
+  a Gitea build, not a fault.
+- A spec fails that the tier doc says can fail from stale backend state
+  — restart the app tier before believing it (`yellowjacket-dev`).
+- A tick that "did nothing" — reconcile again; the tracker usually says
+  which leg it really is.
+- The job did not fire — the scheduler fires only while a session is
+  open in its directory (documented); "the loop is off" is the correct
+  reading, not a bug.

.planning/NOTES.md

@@ -4994,3 +4994,87 @@ ordinary track makes it 9.
 Filed as its own issue rather than fixed in #67's diff: it is a
 property of the shared sheet (`components/menu-surface/`), not of the
 items.
+
+## The tap highlight is one inherited declaration (measured 2026-08-24)
+
+`-webkit-tap-highlight-color` is an **inherited** property, and an
+inherited property crosses a shadow boundary — so `html { … :
+transparent }` in `index.css` reaches every shadow root in the app and
+no component needs a rule of its own. Measured in the running app
+(Chromium, `app-sidebar`'s `li button`, which is three shadow roots
+from the document): `rgba(0, 0, 0, 0)` with the rule, and
+`rgba(0, 0, 0, 0.18)` with it removed. That 0.18 grey over the bounding
+rect of whatever was tapped is what #54 reported.
+
+The same argument was already spent once and is worth not
+re-deriving: `index.css`'s first rule is `*, *::before, *::after {
+user-select: none }`, which for the same reason already covers the
+shadow roots — #54's Findings ask for `user-select` on interactive
+surfaces and it has been done since before the issue was filed.
+
+**What the highlight was, on the surfaces that had nothing else, is the
+press feedback.** Measured on a track row with the press rule removed
+and the button held down: `rgba(255, 255, 255, 0.05)` — the *hover*
+tint, arriving because the pointer is over the row, which is a
+synthesised hover on a phone and outlives the press. With the rule:
+0.12 while held, and the neighbouring row unchanged. So the press state
+is part of removing the highlight rather than a separate polish item,
+and the hover tints on those same surfaces moved behind
+`(hover: hover) and (pointer: fine)`, which is #68's gate applied to a
+tint rather than to a revealed control.
+
+**`touch-action: manipulation` was considered and not taken.** The
+Findings offer it for the 300ms tap delay; this app's viewport is
+`width=device-width`, which is what removes that delay in Chrome, so
+the stated benefit is not there to win. What it would change is the
+gesture stack #63 tuned by measurement on the device (`pan-y` plus a
+non-passive `preventDefault`), and that is not measurable from here.
+
+## Art pop-in is measurable in a browser, if you count frames rather than milliseconds (measured 2026-08-24)
+
+#65 is an Android report ("scrolling through albums, the art pops in")
+and the desktop harness can measure it, which was not obvious: the
+first attempt waited 220 ms after each scroll jump and found **zero**
+blank covers on either build. The metric only discriminates at one and
+two animation frames after the jump, which is where a pop-in actually
+lives.
+
+Protocol, on `make dev-headless SEED=bulk` (4 988 albums), ten
+2 400px jumps of `.grid-scroll-container`, counting covers whose rect
+intersects the viewport with `naturalWidth === 0`:
+
+| build | blank at frame 1 | at frame 2 | at 50 ms |
+|---|---|---|---|
+| `main` | 254 / 258 | 214 / 258 | 0 |
+| `main`, second run | 254 / 258 | 190 / 258 | 0 |
+| prefetch | 117 / 258 | 77 / 258 | 0 |
+| prefetch, second run | 118 / 258 | 96 / 258 | 0 |
+
+Two things this protocol gets wrong if repeated carelessly. **A second
+run in the same browser session measures the HTTP cache**, not the
+build — the skill already warns about this for `make perf`, and it
+applies to any image measurement; every row above is a fresh
+`playwright-cli close` + `open`. And **the frontend is embedded**, so
+comparing builds is a `git stash` *and* a rebuild, not a stash.
+
+**The bulk library's covers are 300x300 and ~3.7 kB**, which is why
+both builds are clean by 50 ms here and why the phone's number cannot
+be inferred from this one — same caveat the skill already records
+about full-size artwork.
+
+**`rangeChanged` and `visibilityChanged` are different ranges**, and
+the difference is the whole of this fix's value.
+`@lit-labs/virtualizer` reports `_first`/`_last` (rendered, including
+the ~1000px overhang) on the former and `_firstVisible`/`_lastVisible`
+on the latter. Both grids listen to `visibilityChanged` for scroll
+persistence, which wants the visible range and is correct; a prefetch
+window measured from it lands mostly on cards that already exist.
+Anchored there, the component test could see only one row past the
+last rendered card.
+
+**`_overhang` is not configurable.** It is a `protected` field set to
+1000 in `BaseLayout` and read by every layout; there is no option on
+`grid()`/`flow()` and no property on the element. The issue's Direction
+("ask the virtualizer for a larger overscan") is therefore not
+available without patching a private, which is why the request is
+issued ahead of the element instead.

.planning/plans/active/020-autonomous-backlog-loop.md

@@ -0,0 +1,228 @@
+# 020 — The autonomous backlog loop
+
+**Issue:** #236 (`Kind/Enhancement`, `Priority/Low`)
+**Status:** active — phase 0, supervised pilot
+**Relates:** #73 (the roadmap the loop follows), plan 005 (the harness the
+loop drives). Cost and model-tier doctrine is the `pi-session-reference`
+card handed to the session that designed this; the loop's copies of it
+are deliberate one-paragraph summaries, not the authority.
+
+A pi coding-agent configuration that, toggled on, works the Gitea tracker
+one issue at a time — triage, claim, plan, implement, validate, critique,
+PR, CI, merge, verify-close, diary — and then does it again. The tracker is
+the state machine: whoever reads Gitea sees exactly where the loop is,
+which is the property this document's rails exist to protect.
+
+---
+
+## The shape: a crank, not a resident brain
+
+Half the design is that **nothing lives in a conversation**. Each tick is a
+fresh, bounded unit of work; every transition writes evidence to Gitea
+(label, comment, branch, PR) or to the loop's own state file; a tick that
+dies mid-leg loses nothing, because the next tick resumes from what Gitea
+says.
+
+The other half is that **no leg trusts the one before it**. The worker
+implements from the plan, not from the issue alone; the validator checks
+the *claim*, not the green CI row; the merger merges only after reading the
+protection contexts itself; the diary leg is what makes the next issue's
+triage cheaper.
+
+One issue in flight at a time. That is a pacing decision, not a
+concurrency limit of the tooling — CI has a capacity-1 runner and the e2e
+tier owns one headless port on this machine, so two writers would serialize
+on infrastructure they cannot see and appear to be doing fine.
+
+## The state machine
+
+| Leg | Writes | Actor / model |
+|---|---|---|
+| reconcile | — | orchestrator + `inspect` (mimo-v2.5) |
+| select | nothing on the tracker; decision logged in the tick transcript | `select` (glm-5.3) |
+| claim | assignee + `Status/In Progress` + comment naming branch & approach | `scripts/issue.sh claim` |
+| plan | plan as an issue comment | `plan` (glm-5.3) |
+| implement | commits on the issue branch, in the loop worktree | `work` (qwen/deepseek-v4-pro-0813) |
+| validate | verification evidence in the handoff | `validate` (glm-5.3), `visual` (glm-5.3-flash) for screenshots |
+| critique | review findings; fix commits | `review` (glm-5.3) + `diffreview` (qwen) + fix round by `work` |
+| ship | push, PR with body contract, CI read + fixes | orchestrator + `scribe` (mimo-v2.5) |
+| merge | the merge; post-merge issue verification | orchestrator |
+| diary | `.pi/journal.md`, `CLAUDE.md` if structural | `scribe` |
+| housekeep | stale-branch/PR cleanup, state-file prune | orchestrator |
+
+### Legs that are the orchestrator's alone
+
+The orchestrator (the loop session) delegates every deliberative leg and
+keeps three for itself because they are script-shaped and must not be
+re-implemented by a model: claim (`issue.sh claim`, which refuses when
+someone else holds the issue — the backstop), merge (API calls below), and
+housekeep (branch deletion). If a tick does nothing else, it reconciles.
+
+## Model routing
+
+The routing authority is the card's four tiers, reproduced here as the
+loop's assignment, not as an argument:
+
+- **T0 `go/mimo-v2.5`** — mechanical gathering, commit/PR/journal prose,
+  any fan-out. Effectively free; wrong only where wrongness costs a
+  debugging session, so nothing above takes its word for a *fact*.
+- **T1 `qwen/deepseek-v4-pro-0813`** — implement-from-a-written-plan,
+  understood-diff review, the orchestrator itself. The default session
+  model; half price 10:00–20:00 EDT, which the cron is shaped around.
+- **T2 `glm/glm-5.3`** — repo-scale reasoning: selection, planning,
+  consequences review, validation judgement. Weekly credits with no
+  rollover: the loop draws them every week by construction, which is the
+  correct posture. **`glm-5.3-flash`** for anything multimodal
+  (screenshots, UI inspection).
+- **T3 `go/kimi-k3`** — escalation only: two lower tiers already failed,
+  or the issue is a named gnarly one. A fresh session seeded with the
+  failing tier's own summary, never a mid-session switch, never parallel,
+  at most once per day.
+
+The invariant behind all four, from the card: **routing down is cheap,
+routing up is expensive.** An implementation that stalls is escalated by
+having the T1 session write *what it tried, what failed, what it observed*
+and handing that to a new session one tier up. Escalating a session in
+place is forbidden in both directions.
+
+Fan-out is allowed on T0 and T1 only (the Go plan's $12/5 h constraint
+makes T3 fan-out self-defeating). Critique is the one standing fan-out:
+two reviewers, two angles, one synthesis.
+
+## Scheduling
+
+`0 0 10-18 * * 1-5` (local = EDT): hourly on weekdays inside Qwen's
+half-price window, clear of the card's ⚠ 2–6am band (DeepSeek peaks, GLM
+loses its off-peak discount — the window the old `yj-backlog` cron sat in,
+which this replaces as the loop supersedes it).
+
+- A tick takes a lock (`/tmp/yj-loop.lock`, PID + timestamp). An overrun
+  tick makes the next fire exit immediately; serialization survives
+  whatever the scheduler does with overlapping fires.
+- ~9 ticks/day; an issue is 2–5 ticks; **one to two issues per day** is
+  the natural rate. That also paces the bills without a budget flag.
+- The port check is part of reconcile: if `34115` is occupied, the tick
+  refuses any leg that needs the headless app and defers to the next
+  tick, without complaint. A human's interactive tier always wins.
+
+## Runtime and ON/OFF
+
+The scheduler (`pi-schedule-prompt`) fires only while a pi session is open
+in the job's directory — that limitation is the switch:
+
+- **Worktree:** `git worktree add` a dedicated clone at
+  `~/.paseo/worktrees/loop/jumpy-hound`. Loop edits happen only there; a
+  dirty tree there is the loop's business and nobody else's.
+- **Session:** pi in that worktree, `/name loop`. The job is bound to that
+  session, so another pi elsewhere in the same directory does not
+  double-fire it.
+- **ON:** resume the loop session (`pi --resume loop`) and enable the job.
+  **OFF:** toggle the job off in `/schedule-prompt`, or close the session.
+  **Drain** (stop taking new work, finish in flight): set `drain: true` in
+  the state file.
+- **Tune in:** the same `pi --resume loop` — the chat transcript *is* the
+  loop's log, each tick's reasoning inline, each leg reporting in.
+
+## Identity, claims, and what the loop may touch
+
+The loop operates **as the owner** via `GITEA_TOKEN` (scopes: `read:user`,
+`write:issue`, `write:pull`, `write:repository`); pushes ride SSH and need
+no token. Every tracker comment the loop writes is prefixed `⟦loop⟧`, so
+the collaborator reads it as the pump and not as a person.
+
+It may only ever touch work it created: issues it claimed, branches it
+made, PRs it opened. Two mechanisms make that enforced rather than
+intentional: `issue.sh claim` refuses an issue somebody else holds, and
+reconcile checks `git ls-remote --heads origin` so a branch name collision
+from a concurrent session is caught before the first edit.
+
+## Merge lifecycle
+
+- **Only PRs the loop opened.** A collaborator's PR is never merged, never
+  commented on for pressure, never touched.
+- The gate is the protection rule itself, read from the API: contexts
+  `CI / check*` and `CI / e2e*` green, PR mergeable. (Required approvals
+  is 0 today; if a second person changes protection rules, the merge
+  endpoint refuses and the tick stops and reports — human business.)
+- `Closes #n` goes **in a commit body inside the branch, one line per
+  issue, and in the PR body**. Both, because a squash route and a merge
+  route parse different texts, and this pairing was measured: a comma
+  list partially matched, five of ten issues.
+- After merging: verify against `issue.sh list --state open` that the
+  issue actually closed; close any straggler naming the merge commit.
+  `unclaim.yml` strips `Status/In Progress` automatically; it is not
+  instant, and a re-open does not restore it — the verification is
+  against the open list, not against the label.
+- Merging to `main` fans out to nothing: releases are the manual
+  `release.yml`, which this loop never runs. The blast radius of a
+  merge is the main branch's CI, and the critique leg is what stands
+  before it.
+
+## Verification contract
+
+The tier table is `yellowjacket-dev`'s; the loop re-states nothing above
+it except the *division of duty*: the worker runs the tiers the change
+demands, and the validator re-reads the issue and checks that the tier
+evidence actually answers the claim — a green suite that never touched
+the reported surface is a finding, not a pass. Cosmetics are read by a
+model that can see (`visual`, the multimodal tier); a change that moves
+geometry refreshes its `ui-visual` baseline in the same commit.
+`tsc --noEmit` is part of the gate and nothing else runs it. The e2e app
+is seeded (`SEED=default`) and stopped after.
+
+## Android / emulator mode
+
+The loop is **device-free by default**: issues whose verification is
+physical-device behaviour stay open for humans (the repo's own tags say
+which those are). One step of the ladder exists for the rest:
+
+- `{"emulator": true}` in `.pi/loop/state.json` **plus an already-booted
+  emulator** (`adb devices` answers) opts the loop into building the APK
+  and using `android-smoke` (crash verification), and `android-screenshot`
+  / `android-eval` as rendering evidence for `visual`.
+- The loop **never boots or stops an emulator** — that is the user's
+  machine and their gesture. Boot it with `make android-emulator`
+  (one-time `make android-setup`, ~3.5 GB, creates the AVD), and
+  `make android-emulator-stop` when done.
+- Real-device-only issues are skipped under either setting.
+
+## Budgets and pacing
+
+Expected spend: dominated by the T1 implementation leg inside the
+half-price window (pennies to tens of cents) and T2 on weekly credits;
+T3 bounded at one fresh call per day. The card's numbers ($12 per rolling
+5 h, $30/week as burst headroom not allowance, GLM reset weekly) are the
+sanity cells; the loop's own weekly check compares against them rather
+than against the month.
+
+## Cleanup (housekeep leg, once per day)
+
+- Loop-owned branches whose commits are in `origin/main`: deleted, local
+  and remote.
+- Loop-owned PRs open >7 days or red on a second identical CI cause:
+  commented with what is known (`⟦loop⟧`), and left — never silently
+  deleted.
+- Anything not the loop's (assignee, branch, PR): left exactly as found.
+
+## Pilot phases
+
+- **P0 — supervised.** One tick, user watching the transcript: reconcile,
+  select, claim, plan. No merge.
+- **P1 — observed.** Two ticks ending in the loop's first merge, watched
+  through CI → merge → verify-close.
+- **P2 — unattended.** The schedule left on. Weekly check against the
+  card's two-minute ritual.
+- **Hard stops** (any of these halts the loop and leaves a comment, never
+  a silent retry): a tick dies twice with no explanation; a merge happens
+  for a PR the loop did not open; spend outside the cells above by 2×.
+
+## Not now, on purpose
+
+- **Parallel worktrees** — blocked on e2e's exclusive port; viable only
+  with per-worktree headless ports or CI-only e2e. The shape (
+  supervisor + per-issue worktrees) is the target, not the first cut.
+- **Weekend batch refactors** — DeepSeek off-peak is real but is a
+  scheduling knob on top of a working pump.
+- **More chain files** — the critique fan-out is a chain; the rest stay
+  orchestrator-legs until two weeks of unattended runs say which legs
+  are actually fixed-shape.

CLAUDE.md

@@ -6,6 +6,22 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 YellowJacket is a cross-platform desktop music player built with Go (backend) and TypeScript/Lit (frontend), using the Wails framework to bridge them. It supports MP3, FLAC, OGG Vorbis, and WAV playback.
 
+**The three prose documents are split by reader, not by topic** (#50).
+`README.md` is the landing page and answers *a user's* questions only —
+what it does, which channel installs it on which platform, where its
+data lives — with three screenshots in `docs/images/`, captured from the
+fixture library (`make sandbox-seed NAME=default` → `make dev-headless
+SEED=default`) so they can be retaken by anyone. `CONTRIBUTING.md` holds
+what used to be the second half of that README — prerequisites, the
+system libraries, the build and codegen commands, which verification
+tier a change demands, the tracker workflow and the commit grammar. This
+file stays the deep reference both of them point at, and is the only one
+of the three that explains *why* a shape is what it is. A fact that
+belongs to a user goes in one place; the packaging channels keep their
+own documents (`packaging/*/README.md`, `docs/android-release.md`) and
+are linked rather than summarised, because a version-restart note copied
+into the README is a second copy to keep true.
+
 ## Issues
 
 **The tracker is the source of truth for what is wanted and what is
@@ -122,6 +138,17 @@ has started is a second, staler answer to "what are we doing next".
 Numbering is sequential and stable across status moves (a plan keeps
 its `NNN-` prefix). Abandoned plans are deleted.
 
+**The autonomous loop** (plan 020, `.pi/skills/yj-loop/`) is the pi
+configuration that works the tracker one issue at a time — a cron tick
+in a dedicated worktree and session, with the tracker labels as its
+state machine. It claims with `issue.sh` like anyone, merges only PRs
+it opened once the protection contexts are green, and files what it
+finds. Its switch is `.pi/schedule-prompts.json` (gitignored): it runs
+only while that pi session is open, and that limitation is the whole
+on/off design. Where a loop discovery contradicts this file, this file
+is wrong and should be fixed by the diary leg — the loop never quietly
+decides otherwise.
+
 ## Commands
 
 ```bash
@@ -1113,9 +1140,9 @@ not the fix and cannot be: that function is the `document` listener for
 `navigate`, so it is an infinite loop.
 
 **It is a store rather than an event, because a component that mounts
-after a navigation still has to know.** `bottom-nav`'s "More" drawer
+after a navigation still has to know.** `bottom-nav`'s "More" sheet
 creates its `<app-sidebar>` on open, and that copy had heard no
-`navigate` at all — standing on Albums, the drawer opened highlighting
+`navigate` at all — standing on Albums, it opened highlighting
 Home. An event has no answer for a listener that was not there.
 
 **A detail view is not a view here**, so the destination it was opened
@@ -1216,7 +1243,7 @@ and then vanishing.
 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 —
 except that `bottom-nav`'s "More" opens the *same* `<app-sidebar>`,
-which filters, so an unfiltered bar would contradict its own drawer one
+which filters, so an unfiltered bar would contradict its own sheet one
 tap away. Which four tabs is still plan 016's committed subset; this
 only removes from it, and "More" is never filtered because it is how
 everything else stays reachable.
@@ -1470,6 +1497,28 @@ live**: a scrim over a menu item is that item's text surface, and the
 14px spends its weight below the last legible label, measured at 9.9:1
 on the light ramp, whose `bgElevated` is `#e9ecef`.
 
+**And the phone has two sheets, so that rule is one file both read**
+(#210). `bottom-nav`'s "More" is capped at the same 85vh and overflows
+for the same reason — measured at 424x439 with eight destinations,
+`scrollHeight` 412 against `clientHeight` 373, and eleven items at 48px
+would be 528, since #25 makes the count the user's. So the two layers
+live in `styles/sheet-scroll.css.ts` and each host says only what is
+local to it: the colour, handed over as `--yj-sheet-surface` on the same
+box, because the nav sheet paints the sidebar's `--yj-bg-surface` and
+the context sheet the menus' `--yj-bg-elevated` — a shared rule that
+hard-coded either would draw that seam across the other one.
+
+The half that is not the fade is what makes it visible: **nothing inside
+the sheet may repaint the surface**, because these are background layers
+on the scroller and an opaque child covers them. `menu-surface` already
+had it from the other side (`.context-menu-panel[data-sheet]` is
+`background-color: transparent`); `app-sidebar`'s host paints
+`--yj-bg-surface`, which in the shell is its own background and in the
+sheet is a second copy of the sheet's, so `bottom-nav` turns it off.
+Measured at 424x439 with the fade adopted and that rule missing: a flat
+52,58,64 to the bottom edge with 39px still below, which is the defect
+unchanged and every assertion about `background-attachment` passing.
+
 **The playlist submenu is a sheet too, and it had to be.** It is a
 `placement="right-start"` flyout, and making the menu full-width moved
 its anchor — measured at x −182 to 0, entirely off-screen, so "Add to
@@ -1631,6 +1680,51 @@ sits inside which media query — and says so; the regression it exists
 for is someone hoisting a rule out of its query as a tidy-up, which
 nothing on a desktop renders differently.
 
+**The web view's own tap highlight is gone, and what replaced it is a
+press state** (#54). `-webkit-tap-highlight-color` is an *inherited*
+property, so one declaration on `html` in `index.css` reaches every
+shadow root in the app and takes away the grey box a phone drew over
+the bounding rect of whatever was tapped — measured at
+`rgba(0, 0, 0, 0.18)` with the rule removed. `user-select` is the same
+argument and was already done: `index.css`'s first rule is `*, *::before,
+*::after { user-select: none }`, which reaches the shadow roots for the
+same reason.
+
+Three things about it are load-bearing.
+
+**Removing the highlight removes the only touch feedback several
+surfaces had**, so the press state is part of the same change rather
+than a later polish item: the four lists' rows, `bottom-nav`'s tabs,
+`app-sidebar`'s destinations (which are also the phone's "More" sheet)
+and the shared `contextMenuStyles` menu item all take
+`--yj-press-overlay` on `:active`. The cards already had one
+(`transform: scale(0.97)`) and are untouched.
+
+**A press selector carries a state class or it does nothing where it
+matters.** A row is `.track-row.selected.active`, so a bare
+`.track-row:active` is one class short of it and the press is invisible
+on exactly the row a phone is most likely to press — the one it has
+just selected. The rule is last and lists `.selected:active` /
+`.active:active` beside the bare form.
+
+**And the hover tints on those same surfaces moved behind
+`(hover: hover) and (pointer: fine)`**, which is #68's gate applied to
+a tint rather than to a revealed control and for the same mechanism: a
+hold synthesises a hover in the WebView, so an ungated tint arrives
+because a finger touched the row and stays there after it has gone —
+measured, since with the press rule removed a held row reads
+`rgba(255, 255, 255, 0.05)`, the hover tint, rather than nothing.
+`touch-action: manipulation` was considered and declined: the 300ms
+delay it is offered for is already absent on a `width=device-width`
+viewport, and what it would really change is the gesture stack #63
+tuned by measurement on a device this session cannot measure.
+
+The split of tiers is `hover-affordance.test.ts`'s: `press-feedback.
+test.ts` reads the parsed stylesheet, because `:active` cannot be
+forced there either, and `native-touch-feel.spec.ts` *measures* — it
+holds the button down on a real row of the real list, and it is the
+only tier that loads `index.css` at all.
+
 Three lists had no focused row to open a menu *from* — the queue panel
 and both playlist detail views — and gained a roving tab stop through
 `utils/roving-rows.ts`. **`track-list` deliberately does not use it**:
@@ -1787,6 +1881,21 @@ is not it.** A `placeholder` is an accname fallback, so an
 Explore's search box — the audit's own `a11y.26` — as clean. A sweep
 for *empty* names cannot see a *weak* one.
 
+**`title` is the same trap one rung lower, and it defeats the obvious
+spec as well as the obvious sweep.** `queue-panel`'s Clear queue and
+Add queue to playlist were named by `title` alone, so
+`getByRole('button', { name: 'Clear queue' })` matched them **before**
+the fix as well as after — a `getByRole` assertion, which is what
+catches every other nameless control in this app, would have been
+green on the broken build. `title` is the *last* fallback in the
+accname order, so content put inside the button later silently
+outranks it, and it is the one name a phone cannot show, having no
+hover. The property is therefore asserted as *the name is not the
+tooltip*: `queue-overlay.spec.ts` removes the `title` attributes and
+asks again, which is 1 and 1 with `aria-label` and was measured at 0
+and 0 without it. The `title`s stay, because on a desktop they are
+also the tooltip for an icon-only control and that is a different job.
+
 **The shell scrolls sideways and not down.** `body` is
 `overflow-x: auto; overflow-y: hidden`, and both halves are measured.
 Vertically there is nothing to fix: the middle grid row is `1fr` and
@@ -1829,7 +1938,7 @@ listing the destinations again — but rendering it unconditionally put a
 second copy of every `data-testid="nav-*"` in the DOM, and 30 existing
 specs failed with "strict mode violation: resolved to 2 elements" on a
 desktop viewport where the element is not even visible. It renders only
-while the drawer is open, and `bottom-nav.test.ts` asserts its absence
+while the sheet is open, and `bottom-nav.test.ts` asserts its absence
 before that.
 
 **The tab bar is four destinations and a way to the rest.** Three to
@@ -1838,6 +1947,33 @@ is 32px each. Which four is plan 016's committed subset, and everything
 else — Settings included, because a phone still needs it — is behind
 "More".
 
+**And "More" rises from the bottom, on #60's sheet rather than a
+second one** (#71). It was a `wa-drawer placement="start"`: a 200px
+column of a 424px screen, opening away from the thumb that asked for
+it, with the rest of its 400px band empty. It is the *same element*
+with `placement="bottom"` and `without-header`, which is what keeps
+the change to where it comes from — `wa-drawer` renders a native
+`<dialog>` and opens it with `showModal()`, so #60's containment
+finding carries over with nothing new to prove, and the focus trap,
+Escape, tap-outside and `wa-after-hide` all come along. Measured at
+424x439: 424 wide, 373 tall (85vh, so there is an outside to tap),
+48px rows.
+
+Three things about it are load-bearing. **The sidebar is mounted
+rather than re-listed as data**, which the issue offers as the
+alternative: the shell's own `<app-sidebar>` is `display: none` below
+600px rather than removed, so a second list drawing `nav-*` handles is
+the duplication above, and it would be a second place to add the next
+view to. **There is one scroller, and it is the sheet's body** — the
+reported "only part of the screen scrolls under my finger" is three
+nested ones (the dialog, its body, and the sidebar's own
+`overflow-y: auto` host), so which box a drag moves depends on where
+the finger landed; `overscroll-behavior: contain` is the other half.
+And **`expanded` means the host owns the box, not just the labels**:
+`app-sidebar` writes an *inline* width and caps itself at 400px, which
+beats any rule the host could write, so the width, the scrolling and
+the mouse-only resize handle all follow that attribute.
+
 **There are three supported size bands, and the queue is part of the
 promise.** Plan 018 (#24) wrote them down: **Phone** below 600 (bottom
 nav, reflows, fits 320px exactly), **Compact** 600–899 (icon sidebar),
@@ -3331,6 +3467,46 @@ rather than searching it — the store replaces that array when its
 contents change and shares the unchanged members, which is the same
 signal `track-list`'s memoized caches key on.
 
+**And the right tier arriving late still reads as no art at all**, so
+the two grids ask for it before the card exists (#65).
+`utils/image-prefetch.ts` warms the images a scroll is about to reach,
+from `cover-grid`'s and `artists-view`'s virtualizers. Measured on the
+50 000-track bulk seed over ten 2 400px jumps: of 258 covers arriving
+in view, **254 were still blank one frame later and 214 two frames
+later**; with the prefetch, 117 and 77. Both builds are clean by 50 ms
+on a desktop with 3.7 kB fixture covers, which is where the reference
+device's slower engine and 27 kB covers spend their pop-in.
+
+Four things about it are load-bearing.
+
+**The overscan the obvious fix asks for does not exist.**
+`@lit-labs/virtualizer`'s `_overhang` is a hard-coded 1000px
+`protected` field on `BaseLayout` with no configuration surface, so
+raising it means monkey-patching a private. 1000px is about two
+screens on a 439px viewport, and the *image* cannot be requested until
+the card it lives in is rendered — which is what this asks for
+instead.
+
+**It hangs off `rangeChanged`, not `visibilityChanged`.** Those report
+different ranges: visibility is what is on screen, and the virtualizer
+has already rendered that 1000px past it. Anchored to the visible
+range the window is spent on cards that already exist and have already
+asked for their own art — measured as the difference between the
+prefetch reaching one row past the last card and reaching a full
+window past it.
+
+**It is not the `LRUMap` path, and saying so is the bound.** That
+ceiling holds Explore's base64 data URLs in JS; a library cover is a
+plain URL under `Cache-Control: immutable` (the filenames are content
+hashes), so what retains the bytes is the browser's own cache. What
+this module retains is the *set of URLs already asked for*, capped at
+512 and reported to `window.__yjCacheStats()` — 497 entries and 15 407
+chars after the run above.
+
+**The prefetch asks for what the card will draw.** `artists-view`'s
+tier ladder moved into `artistAvatarURL()` so the two cannot disagree;
+a second copy would be a warm cache for a tier nothing renders.
+
 **The same rule, on the selection path, was the worst stall in the
 app.** Five components turned selected file paths back into tracks with
 `filePaths.map(fp => tracks.find(…))`, so "Select all → Edit tags" at

CONTRIBUTING.md

@@ -0,0 +1,173 @@
+# Contributing to YellowJacket
+
+This is the contributor's half of the [README](README.md): how to build it, how
+to check a change, and how a change gets in. [`CLAUDE.md`](CLAUDE.md) is the
+deep reference — the architecture, and the reasons behind the shape of it —
+and is worth reading before a change of any size, because most of this
+codebase's traps are written down there and nowhere else.
+
+## Building from source
+
+YellowJacket is [Go](https://go.dev/) with a [Lit](https://lit.dev/)/TypeScript
+frontend, bridged by [Wails v3](https://wails.io/).
+
+| Tool | Version |
+|------|---------|
+| Go | 1.25+ |
+| Node.js | 22+ |
+| pnpm | 10+ |
+| Wails CLI | v3 — vendored, no install needed (`go tool wails3`) |
+
+The Wails v3 CLI resolves from the `tool` block in `go.mod`, so there is nothing
+to install globally; `make setup` fetches it with the rest of the tooling.
+
+On Linux, install the system libraries Wails needs. v3 builds against GTK4 +
+WebKitGTK 6.0 by default:
+
+```bash
+sudo apt-get install libasound2-dev libgtk-4-dev libwebkitgtk-6.0-dev   # Debian/Ubuntu
+sudo pacman -S alsa-lib gtk4 webkitgtk-6.0                              # Arch
+```
+
+A machine without `webkitgtk-6.0` can still build with `-tags gtk3` against the
+older WebKit2GTK 4.1 stack, but that is an escape hatch, not what CI or a
+release builds. macOS and Windows need no extra system packages. Run
+`go tool wails3 doctor` to check your environment.
+
+```bash
+make setup        # install tooling, frontend packages and the git hooks
+make dev          # run with hot-reload
+make build-dev    # debug build with symbols
+make build-prod   # production build (stripped and trimmed)
+make android      # the arm64 APK, into bin/
+```
+
+The `Makefile` is the front door and carries a one-line description against
+each target; `Taskfile.yml` and `build/<platform>/Taskfile.yml` are the build
+implementation behind it and are not called directly.
+
+## Generated code
+
+Two generators run from `go generate ./...`, which `make generate` wraps:
+**sqlc** turns `backend/database/sql/queries/` into Go in
+`backend/database/sql/sqlcgen/`, and **templ** turns `.templ` files into
+`*_templ.go` beside them. Never edit either output by hand — run
+`make generate` after touching a `.sql` or a `.templ` file.
+
+The TypeScript bindings in `frontend/bindings/` are generated by `wails3`
+rather than by `go generate`, so they are a separate step: `make bindings`
+regenerates them and `make bindings-check` fails if they are stale.
+`frontend/src/events.ts` is generated too, from `backend/events/events.go`.
+
+A pre-commit hook checks that all of this is fresh, so the usual way to meet it
+is a failing commit rather than a bug.
+
+## Checking a change
+
+Run the tier the change actually demands, not the cheapest one.
+
+| Change | Command |
+|---|---|
+| Go | `make lint` and `make test` — both cover all three build configurations |
+| A frontend component or store | `make ui-test` (Vitest in a real Chromium, no backend) |
+| A user-visible flow | `make e2e`, against a running `make dev-headless` |
+| CSS | `make css-check` — see the Chrome 113 note below |
+| Anything cosmetic | look at a screenshot; several bugs here were invisible to every assertion and obvious in an image |
+
+`make test` needs the fixture library, which is generated rather than
+committed — it runs `make testdata` itself (about a second).
+
+The end-to-end tier drives the real app with no display at all: `make
+dev-headless` starts it in the background on `:34115` (add `SEED=<name>` for a
+seeded library, built by `make sandbox-seed NAME=<name>`), `make dev-logs` tails
+it and `make dev-stop` stops it. **Check the port before starting one** — if
+`:34115` is already answering, someone else's app is there, and a green result
+about their build is worse than no result.
+
+Two smaller checks exist because the failure they catch is silent:
+`make bindings-check` (stale generated bindings) and `make css-check`, which is
+two passes — one fails on a `css` literal ended early by a backtick inside a
+comment, the other on a nested CSS rule that begins with a bare element
+selector. Chrome 113 is what the reference Android device renders with, and it
+drops such a rule without a word.
+
+`make vulncheck` runs govulncheck over the module.
+
+## The issue tracker is the source of truth
+
+Work is described by issues before it is described by branches, and the tracker
+is shared with people who cannot see your terminal.
+
+- **Search before starting**, closed issues included: `./scripts/issue.sh search
+  <terms>`. "That was fixed three weeks ago" is the cheapest possible answer.
+- **Claim before the first edit**, not before the commit:
+  `./scripts/issue.sh claim <n>` sets the assignee, applies `Status/In Progress`
+  and comments with the branch, so the work is visibly taken *while it is being
+  done*. It refuses if somebody else holds it — talk to them rather than working
+  around it.
+- **If no issue covers the work, open one first** (`./scripts/issue.sh new`).
+- **Findings get filed.** A bug tripped over on the way to something else is an
+  issue with a reproduction, not a wider diff and not a sentence in a chat log.
+- **#73 is the roadmap** and states the order the backlog should be worked in.
+
+`scripts/issue.sh` is the whole interface (`list`, `mine`, `search`, `show`,
+`new`, `claim`, `unclaim`, `comment`, `close`, `label`, `depends`, `labels`) and
+wants a `GITEA_TOKEN` with `write:issue`. The labels are a taxonomy rather than
+tags: `Kind/*`, `Area/*`, `Priority/*`, `Platform/*`, plus `Reviewed/*` and
+`Status/*`, of which the last two are exclusive scopes.
+
+## Commits and pull requests
+
+`main` is protected, so a branch and a PR are the only way in. Branch from
+`origin/main`, and name the branch after the issue (`fix/140-…`, `feat/25-…`).
+
+Commit subjects are [Conventional Commits](https://www.conventionalcommits.org/)
+— `type(scope): subject`, imperative, ≤72 characters — and are enforced by a
+`commit-msg` hook and by CI (`make commit-check`). This is load-bearing rather
+than decorative: semantic-release reads the **type** to decide the next version,
+so a CI-only change is `ci:` and never `fix(ci):`, which would ship a patch
+release. `make release-dry` prints what a release would cut right now.
+
+**The closing keyword goes in the commit body**, one issue per line, because
+Gitea parses commit messages that reach `main` and does not parse the PR body:
+
+```
+docs: rewrite the README as a landing page
+
+<why>
+
+Closes #50
+```
+
+A PR body carries a commit-to-issue table, the verification you actually ran
+(with results), and a `Closes` list for whoever reads it.
+
+## Style
+
+- **Go** — golangci-lint v2, strict: `err113` (static errors), `nlreturn`,
+  `wsl_v5`, `godot`, `sloglint`, `perfsprint`, and imports grouped stdlib →
+  third-party → `yellowjacket/…` by gci.
+- **TypeScript** — strict mode, no implicit `any`, no unused locals or
+  parameters.
+- Match the surrounding code. Where `CLAUDE.md` explains why something is shaped
+  the way it is, that shape is load-bearing and there is usually a test pinning
+  it.
+
+Hooks do most of the enforcing (`lefthook.yml`, installed by `make setup`):
+pre-commit runs vet, lint, the codegen checks, the frontend typecheck and the
+two CSS checks in parallel; pre-push runs the Go suite and the UI tier,
+deliberately one after the other rather than together.
+
+## Where the rest of the documentation is
+
+- [`CLAUDE.md`](CLAUDE.md) — architecture and constraints, in depth.
+- [`docs/PROFILING.md`](docs/PROFILING.md) — Go pprof and frontend profiling.
+- [`docs/android-release.md`](docs/android-release.md) — the APK, its signing
+  key, and what the release workflow checks.
+- [`docs/index-cache.md`](docs/index-cache.md) — the search-index build cache
+  and why it has a snapshot.
+- [`packaging/arch/README.md`](packaging/arch/README.md),
+  [`packaging/homebrew/README.md`](packaging/homebrew/README.md) — the two
+  package channels.
+- `.planning/` — design documents and measured history, not a queue. The queue
+  is the tracker.

README.md

@@ -2,112 +2,139 @@
 
 *Music how it was meant to bee.*
 
-YellowJacket is a fast, cross-platform desktop music player for your local
-collection. It plays your files, keeps your library tidy, and helps you discover
-and organize your music — all in a clean, responsive interface. No accounts, no
-streaming, no telemetry: just your music on your machine.
+YellowJacket plays the music you already own. Point it at your folders and it
+scans them, reads the tags and the cover art, and gives you a library you can
+browse, search, queue and tidy up — on your own machine, with no account, no
+streaming service and no telemetry.
 
-Runs on **Linux**, **macOS**, and **Windows**.
+It plays **MP3**, **FLAC**, **OGG Vorbis** and **WAV**, on **Linux** and
+**Android**, and builds from source on **macOS**.
 
-## Features
+![The track list, with something playing](docs/images/library.png)
 
-### Play your music
-- Plays **MP3, FLAC, OGG Vorbis, and WAV**
-- Play, pause, seek, and volume control with a mute toggle
-- Gapless, glitch-free seeking backed by a read-ahead buffer
-- A queue you can add to, reorder, and shuffle, with play-next support
-- Shuffle and repeat (off / all / one)
-- Picks up right where you left off — remembers your track, position, and volume between sessions
-- Media-key and MPRIS support on Linux, so your desktop's playback controls just work
+## What it does
 
-### Keep your library organized
-- Point it at your music folders and it scans them automatically
-- Reads tags and embedded cover art, and de-duplicates artwork so it isn't stored twice
-- Incremental sync — only new or changed files get reprocessed, and deleted files are cleaned up
-- Browse by **album**, **artist**, or **genre**, or search across everything
-- Mark favorites and see what you've been listening to with play history
-- Edit track tags directly when something's off
+**Plays your files.** Play, pause, seek and volume with a mute toggle; a
+read-ahead buffer so seeking is instant rather than gappy; a queue you can add
+to, reorder and shuffle, with play-next; shuffle and repeat (off / all / one).
+It remembers the track, the position and the queue between sessions, and it
+answers your desktop's media keys — MPRIS on Linux, a media notification and
+lock-screen controls on Android.
 
-### Playlists
-- Create playlists, drag tracks in, and reorder them
-- **Smart playlists** that build themselves from rules (by genre, rating, play count, and more)
-- Pin a default playlist and spot duplicate tracks at a glance
+**Keeps the library tidy.** It scans the folders you give it and rescans only
+what changed, so a big library costs its full scan once. It de-duplicates
+embedded cover art rather than storing the same image a hundred times, notices
+files that have gone away, and spots duplicate tracks. Browse by album, artist
+or genre, search across everything, mark favourites, and see what you have been
+playing.
 
-### Discover and clean up (powered by MusicBrainz)
-- **Explore** — browse artists, releases, and genres from the MusicBrainz catalog, not just what's already in your library
-- **Auto-tag** — match your files against MusicBrainz to fill in correct artist, album, and track metadata, with a review step before anything is written
-- **Lyrics search** — find a track by a line you remember
+**Playlists, and playlists that write themselves.** Drag tracks in and reorder
+them, or describe what you want — genre, play count, how long since you played
+it — and let a smart playlist keep itself up to date.
+
+**Explore and auto-tag, from the MusicBrainz catalog.** Explore browses artists,
+releases and genres from the catalog rather than only from what you own, so an
+album page can tell you that you have nine of its twelve tracks. Auto-tag
+matches your files against MusicBrainz and fills in the metadata that is
+missing, with a review step before anything is written to disk. Lyrics search
+finds a track from a line you remember.
+
+Explore needs its catalog, which is a one-off ~0.6 GB download from
+**Settings → Search Index**. It asks first on a metered connection, and
+everything else in the app works without it.
 
 ## Install
 
-Download the latest build for your platform from the
+Every download comes from the
 [releases page](https://git.ljones.me/yonlu/yellowjacket/releases).
 
-| Platform | Download |
-|----------|----------|
-| Linux | `yellowjacket-linux-amd64` |
-| macOS | `yellowjacket-darwin-universal.app.zip` (Apple Silicon + Intel) |
-| Windows | `yellowjacket-windows-amd64.exe` |
+### Linux
 
-Prefer to build it yourself? See [Building from source](#building-from-source).
+Download `yellowjacket-<version>-linux-amd64.tar.gz` from the latest release and
+unpack it. It holds the binary, a `.desktop` entry and an icon.
 
-## Getting started
+On **Arch**, install it from the package registry instead and get updates with
+the rest of your system — the one-time key import and `pacman.conf` block are in
+[`packaging/arch/README.md`](packaging/arch/README.md):
+
+```bash
+sudo pacman -Sy yellowjacket
+```
+
+### Android
+
+Install the APK from the release page, or from the URL below, which always
+points at the newest build:
+
+```
+https://git.ljones.me/api/packages/yonlu/generic/yellowjacket-android/latest/yellowjacket.apk
+```
+
+That URL needs no credentials, so [Obtainium](https://obtainium.imranr.dev/) can
+poll it directly and keep the app up to date. The build is `arm64-v8a` only, and
+[`docs/android-release.md`](docs/android-release.md) says why.
+
+### macOS
+
+Homebrew builds it from source on your own Mac — there is no prebuilt `.app`,
+because a signed macOS bundle needs a macOS machine to produce it and the
+release runner is a Linux container.
+
+```bash
+brew install shadow-puppet/yellowjacket/yellowjacket
+```
+
+See [`packaging/homebrew/README.md`](packaging/homebrew/README.md).
+
+### Windows
+
+Not published. It cross-compiles cleanly, but no Windows build of this app has
+ever been *run*, and nothing here can exercise one — so shipping it would be a
+promise that cannot be kept. You can still build it yourself: see
+[`CONTRIBUTING.md`](CONTRIBUTING.md).
+
+### Coming from a 1.x install?
+
+Versions restarted at **0.0.1** when releases became automatic, which every
+package manager reads as a downgrade. It costs one reinstall, once — the details
+are with each channel: [Homebrew](packaging/homebrew/README.md#upgrading-from-1x-needs-a-reinstall-once),
+[Android](docs/android-release.md#the-1x-installs-cannot-be-upgraded-to-00x).
+
+## First run
 
 1. Launch YellowJacket.
-2. Open **Settings** and add the folder(s) where your music lives.
-3. Let the initial scan finish — you'll see progress as it works.
-4. Browse by album, artist, or genre, queue something up, and press play.
+2. Add the folder your music lives in — the first-run wizard asks, and
+   **Settings → Libraries** is where you add more later.
+3. Watch the scan finish. It reports progress, and you can browse while it runs.
+4. Queue something and press play.
 
-Your library and settings are stored locally:
+Your library and settings stay on your machine:
 
 | | Linux / macOS | Windows |
 |---|---|---|
 | Config | `~/.config/yellowjacket/` | `%LOCALAPPDATA%\yellowjacket\config` |
 | Library data | `~/.local/share/yellowjacket/` | `%LOCALAPPDATA%\yellowjacket\data` |
 
-## Building from source
+Setting `YJ_HOME` moves both, which is how you keep a second library separate.
 
-YellowJacket is built with [Go](https://go.dev/) and a
-[Lit](https://lit.dev/)/TypeScript frontend, bridged by the
-[Wails](https://wails.io/) framework.
+## More screenshots
 
-**Prerequisites**
+An album page knows what you own, and says so:
 
-| Tool | Version |
-|------|---------|
-| Go | 1.25+ |
-| Node.js | 22+ |
-| pnpm | 10+ |
-| Wails CLI | v3 — vendored, no install needed (`go tool wails3`) |
+![An album page, with two discs and the transport playing](docs/images/album.png)
 
-The Wails v3 CLI resolves from the `tool` block in `go.mod`, so there is nothing
-to install globally; `make setup` fetches it with the rest of the tooling.
+The home page suggests somewhere to start rather than opening on a wall of
+everything:
 
-On Linux, install the system libraries Wails needs. v3 builds against GTK4 +
-WebKitGTK 6.0 by default:
+![The home page's shelves](docs/images/home.png)
 
-```bash
-sudo apt-get install libasound2-dev libgtk-4-dev libwebkitgtk-6.0-dev   # Debian/Ubuntu
-sudo pacman -S alsa-lib gtk4 webkitgtk-6.0                              # Arch
-```
+## Contributing, and the rest of the documentation
 
-A machine without `webkitgtk-6.0` can still build with `-tags gtk3` against the
-older WebKit2GTK 4.1 stack, but that is an escape hatch, not what CI or a
-release builds.
-
-macOS and Windows need no extra system packages. Run `go tool wails3 doctor` to
-check your environment.
-
-**Build**
-
-```bash
-make setup        # install tooling and git hooks
-make dev          # run with hot-reload
-make build-prod   # produce a release binary
-```
-
-More detail for contributors lives in [`CLAUDE.md`](./CLAUDE.md) — the
-architecture, the conventions and the reasons behind them. What is
-being worked on is [the issue
-tracker](https://git.ljones.me/yonlu/yellowjacket/issues); #73 is the
-roadmap.
+- [`CONTRIBUTING.md`](CONTRIBUTING.md) — build it from source, run the tests,
+  and how a change gets in.
+- [`CLAUDE.md`](CLAUDE.md) — the deep reference: the architecture and the reasons
+  behind the shape of it.
+- [The issue tracker](https://git.ljones.me/yonlu/yellowjacket/issues) is what
+  is wanted and what is being worked on; **#73** is the roadmap.
+- [Releases](https://git.ljones.me/yonlu/yellowjacket/releases) double as the
+  changelog — every one is generated from the commits it contains.

backend/riff/riff.go

@@ -63,12 +63,15 @@ func Parse(r io.Reader) ([]Chunk, error) {
 			return nil, err
 		}
 
-		data := make([]byte, size)
-		if _, err := io.ReadFull(r, data); err != nil {
+		// Copied rather than allocated up front, as ID3Chunk does: the
+		// size is four bytes off the file, so a truncated one is free to
+		// declare a chunk larger than the whole of itself.
+		var data bytes.Buffer
+		if _, err := io.CopyN(&data, r, int64(size)); err != nil {
 			return nil, fmt.Errorf("read chunk data for %q: %w", id, err)
 		}
 
-		chunks = append(chunks, Chunk{ID: id, Data: data})
+		chunks = append(chunks, Chunk{ID: id, Data: data.Bytes()})
 
 		// Odd-length chunks have a padding byte.  Lenient: if the
 		// read fails (e.g. EOF), just break rather than error.

backend/riff/riff_test.go

@@ -4,6 +4,7 @@ import (
 	"bytes"
 	"encoding/binary"
 	"errors"
+	"runtime"
 	"testing"
 
 	"yellowjacket/backend/riff"
@@ -209,3 +210,45 @@ func TestParse_ReadsEveryChunkInOrder(t *testing.T) {
 		t.Errorf("odd chunk data: got %q, want %q", chunks[1].Data, "INFOodd")
 	}
 }
+
+// A chunk size is four bytes read off the file, so a truncated or
+// malformed WAV is free to declare a chunk larger than the whole of
+// itself.  Parse must grow with what arrives rather than with what was
+// claimed.
+//
+// This measures the allocation instead of the error because the error
+// is the same either way: a build sizing its buffer from the header
+// reports the truncation correctly, having asked the allocator for a
+// gigabyte on the way.  Deliberately not parallel — TotalAlloc is
+// process-wide, and a test paused beside another one is measuring it
+// too.
+func TestParse_DoesNotAllocateWhatAChunkClaims(t *testing.T) {
+	// Large enough that a header-sized buffer is unmistakable, in a
+	// container of a few dozen bytes.
+	const declared = 1 << 30
+
+	var raw bytes.Buffer
+
+	raw.WriteString("RIFF")
+	_ = binary.Write(&raw, binary.LittleEndian, uint32(declared+12))
+	raw.WriteString("WAVE")
+	raw.WriteString("data")
+	_ = binary.Write(&raw, binary.LittleEndian, uint32(declared))
+	raw.WriteString("and then the file ends")
+
+	var before, after runtime.MemStats
+
+	runtime.GC()
+	runtime.ReadMemStats(&before)
+
+	if _, err := riff.Parse(bytes.NewReader(raw.Bytes())); err == nil {
+		t.Fatal("Parse: got nil error for a chunk larger than the file holding it")
+	}
+
+	runtime.ReadMemStats(&after)
+
+	if grew := after.TotalAlloc - before.TotalAlloc; grew > 1<<20 {
+		t.Errorf("Parse allocated %d bytes reading a %d-byte file whose chunk header claimed %d",
+			grew, raw.Len(), declared)
+	}
+}

e2e/specs/native-touch-feel.spec.ts

@@ -0,0 +1,140 @@
+import { test, expect } from '../support/fixtures.js';
+
+/**
+ * The web view's own tap highlight, and what replaced it (#54).
+ *
+ * Two halves, and each is here because no other tier can see it.
+ *
+ * **The highlight is killed by one declaration on `html`**, which
+ * reaches the app's shadow roots because `-webkit-tap-highlight-color`
+ * is inherited and inheritance crosses a shadow boundary. That is a
+ * property of `index.css`, and `index.css` is loaded by the real app
+ * and by nothing else — the component tier mounts a component with no
+ * page stylesheet at all, which is the same reason the theme's ramps
+ * are invisible to it.
+ *
+ * **The press state is measured rather than read.** The component tier
+ * asserts the shape of the stylesheet (which rule is inside which
+ * query, and that the press selector carries a state class), because
+ * `:active` cannot be forced there. Here there is a real pointer: hold
+ * the button down on a real row of the real list and read what the row
+ * became. That is the assertion that would fail if the rule were
+ * hoisted, renamed, or lost to `.selected`.
+ *
+ * What neither half is, is the device. Chrome 113's WebView is where
+ * the grey box was reported and where a finger is; the numbers from it
+ * are on the PR.
+ */
+type Page = import('@playwright/test').Page;
+
+/** The phone this work was measured against, in CSS pixels. */
+const DEVICE = { width: 424, height: 439 };
+
+/** The computed tap-highlight colour of a node inside a shadow root. */
+const tapHighlight = (page: Page, host: string, inner: string) =>
+  page.evaluate(
+    ([hostSel, innerSel]) => {
+      const el = document
+        .querySelector(hostSel!)
+        ?.shadowRoot?.querySelector(innerSel!);
+
+      if (!el) return null;
+
+      return getComputedStyle(el).getPropertyValue(
+        '-webkit-tap-highlight-color',
+      );
+    },
+    [host, inner],
+  );
+
+test.describe('the tap highlight', () => {
+  test('is transparent inside a shadow root, from one rule on html', async ({
+    app,
+    browserName,
+  }) => {
+    await app.getByTestId('nav-tracks').click();
+    await expect(app.getByTestId('main-content')).toHaveAttribute(
+      'data-active-view',
+      'tracks',
+    );
+
+    const row = await tapHighlight(app, 'track-list', '.track-row');
+
+    expect(row).not.toBeNull();
+
+    // The property is a WebKit extension that only iOS honours, so an
+    // engine is free not to report one at all. Chromium always does —
+    // measured at rgba(0, 0, 0, 0.18) with the rule removed, which is
+    // the grey box the report describes — so the assertion is not
+    // skippable there, and nothing this app can do makes the property
+    // disappear on an engine that has it.
+    test.skip(
+      row === '',
+      `${browserName} reports no -webkit-tap-highlight-color to read`,
+    );
+
+    expect(row).toBe('rgba(0, 0, 0, 0)');
+  });
+});
+
+test.describe('the press state that replaced it', () => {
+  test.beforeEach(async ({ app }) => {
+    await app.setViewportSize(DEVICE);
+    await app.getByTestId('tab-tracks').click();
+    await expect(app.getByTestId('main-content')).toHaveAttribute(
+      'data-active-view',
+      'tracks',
+    );
+    await expect(app.locator('track-list').first()).toBeVisible();
+  });
+
+  test.afterEach(async ({ app }) => {
+    await app.mouse.up();
+    await app.setViewportSize({ width: 1440, height: 900 });
+  });
+
+  test('shows on the row being pressed, and on that row only', async ({
+    app,
+  }) => {
+    const rows = await app.evaluate(() => {
+      const found = document
+        .querySelector('track-list')
+        ?.shadowRoot?.querySelectorAll('.track-row');
+
+      if (!found || found.length < 2) return null;
+
+      const rect = found[1]!.getBoundingClientRect();
+
+      return {
+        x: Math.round(rect.x + rect.width / 2),
+        y: Math.round(rect.y + rect.height / 2),
+      };
+    });
+
+    expect(rows).not.toBeNull();
+
+    const backgrounds = () =>
+      app.evaluate(() => {
+        const found = document
+          .querySelector('track-list')!
+          .shadowRoot!.querySelectorAll('.track-row');
+
+        return {
+          pressed: getComputedStyle(found[1]!).backgroundColor,
+          neighbour: getComputedStyle(found[2]!).backgroundColor,
+        };
+      });
+
+    await app.mouse.move(rows!.x, rows!.y);
+    await app.mouse.down();
+
+    const held = await backgrounds();
+
+    // The press overlay, from the theme rather than from a literal in
+    // a component: rgba(255, 255, 255, 0.12) on both dark ramps.
+    expect(held.pressed).toBe('rgba(255, 255, 255, 0.12)');
+    expect(held.neighbour).not.toBe(held.pressed);
+
+    await app.mouse.up();
+  });
+});

e2e/specs/phone-shell.spec.ts

@@ -98,6 +98,58 @@ test.describe('the shell on a phone', () => {
     ).toBeVisible();
   });
 
+  test('draws "More" as a sheet on the bottom edge (#71)', async ({ app }) => {
+    await app.getByTestId('tab-more').click();
+    await expect(app.getByTestId('nav-drawer').locator('app-sidebar'))
+      .toBeVisible();
+
+    // What the report is about is geometry, and geometry is what no
+    // other assertion here can see: the side drawer was a 200px column
+    // opening away from the thumb that asked for it, with the rest of
+    // its 400px band empty. Measured rather than screenshotted, since
+    // the failure is a number.
+    //
+    // Polled, because a sheet *arrives*: the drawer's show animation
+    // translates it a full height below the fold, so a measurement
+    // taken the moment its content is visible reports a box hanging
+    // 412px off the bottom of the screen. Asking for the settled
+    // number is the assertion; asking once is a race.
+    const measure = () => app.evaluate(() => {
+      const nav = document.querySelector('bottom-nav');
+      const drawer = nav?.shadowRoot?.querySelector('wa-drawer');
+      const dialog = drawer?.shadowRoot?.querySelector('[part~="dialog"]');
+      const sidebar = nav?.shadowRoot?.querySelector('app-sidebar');
+      const row = sidebar?.shadowRoot?.querySelector('li button');
+      const box = dialog?.getBoundingClientRect();
+
+      return {
+        left: Math.round(box?.left ?? -1),
+        right: Math.round(box?.right ?? -1),
+        bottom: Math.round(box?.bottom ?? -1),
+        height: Math.round(box?.height ?? -1),
+        row: Math.round(row?.getBoundingClientRect().height ?? -1),
+        viewport: [window.innerWidth, window.innerHeight],
+      };
+    });
+
+    await expect
+      .poll(async () => (await measure()).bottom)
+      .toBe(PHONE.height);
+
+    const sheet = await measure();
+
+    expect(sheet.left).toBe(0);
+    expect(sheet.right).toBe(sheet.viewport[0]);
+
+    // A surface covering the whole screen is a page, not a sheet --
+    // which is also what leaves an outside to tap on, the only pointer
+    // route out of it (#171 is the same question one surface over).
+    expect(sheet.height).toBeLessThan(sheet.viewport[1]);
+
+    // 48px rows, from #186's touch floor and #60's context sheet.
+    expect(sheet.row).toBeGreaterThanOrEqual(48);
+  });
+
   for (const vp of [PHONE, SMALL_PHONE]) {
     test(`does not scroll sideways at ${vp.width}×${vp.height}`, async ({ app }) => {
       await app.setViewportSize(vp);

e2e/specs/queue-overlay.spec.ts

@@ -157,6 +157,62 @@ test.describe('an overlaid queue says it is over the content', () => {
   });
 });
 
+/**
+ * #170 — the other two buttons in that same row.
+ *
+ * Clear queue and Add queue to playlist predate the close button and
+ * were named by a `title` attribute and nothing else. Unlike the
+ * sliders in `control-names.spec.ts`, that is not a *missing* name:
+ * `title` is the last fallback in the accname order, so
+ * `getByRole('button', { name: 'Clear queue' })` matched them before
+ * this fix as well as after it — measured, 1 and 1. A sweep for empty
+ * names cannot see a weak one, which is `a11y.26`'s complaint and the
+ * reason this file could have grown a green test that proved nothing.
+ *
+ * So the name is asserted twice, and the second assertion is the one
+ * that fails on the broken build. Taking the tooltip away and asking
+ * again is the property in words: **the name is not the tooltip**. It
+ * is what makes the button survive content being put inside it later,
+ * and it is the only one of the two a phone has — there is no hover on
+ * the surface #55 turned into a full screen. Measured on `main` before
+ * the fix: 0 and 0.
+ *
+ * Both buttons are disabled here, because the queue starts empty and
+ * naming is not enablement. A disabled button is still in the
+ * accessibility tree, which is exactly where the complaint was.
+ */
+test.describe('the queue header says what its actions do', () => {
+  const ACTIONS = ['Clear queue', 'Add queue to playlist'];
+
+  test('names both of the older actions', async ({ app }) => {
+    await openQueue(app);
+
+    for (const name of ACTIONS) {
+      await expect(
+        app.getByRole('button', { name, exact: true }),
+      ).toHaveCount(1);
+    }
+  });
+
+  test('and the names do not come from the tooltip', async ({ app }) => {
+    await openQueue(app);
+
+    await app.locator('#queue-panel').evaluate((el) => {
+      for (const button of el.shadowRoot!.querySelectorAll(
+        '.header-action-button',
+      )) {
+        button.removeAttribute('title');
+      }
+    });
+
+    for (const name of ACTIONS) {
+      await expect(
+        app.getByRole('button', { name, exact: true }),
+      ).toHaveCount(1);
+    }
+  });
+});
+
 /**
  * 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

e2e/specs/queue-selection.spec.ts

@@ -103,12 +103,17 @@ async function queueSixAndOpen(app: Page): Promise<void> {
      *
      * `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.
+     * the fixture library deliberately contains two,
+     * `unsorted/no-tags-at-all.mp3` and `unsorted/title-only.mp3`.
+     * (It contained four until #104: the two WAVs under `Field
+     * Recordings/Test Tones` had been tagged on disk all along and
+     * scan in with their album now, so they are ordinary tracks and
+     * not examples of this.) 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

frontend/index.css

@@ -7,6 +7,26 @@
 
 html {
     height: 100%;
+
+    /* #54.  The web view's own tap highlight -- the grey box a phone
+       draws over the bounding rect of whatever was tapped -- gone in
+       one declaration, because `-webkit-tap-highlight-color` is an
+       *inherited* property and an inherited property crosses a shadow
+       boundary.  So this reaches every one of the app's shadow roots
+       without a rule in any of them; before it, exactly one component
+       (`library-status-indicator`) set it and the box appeared
+       everywhere else.
+
+       What it costs is the only touch feedback several surfaces had,
+       which is why the rows, the tab bar and the shared menu items
+       grew a `:active` state in the same change: removing the wrong
+       feedback and leaving none is not an improvement.  The cards
+       already had one (`transform: scale(0.97)`).
+
+       `user-select` is the same argument one rule up and was already
+       done: the `*` rule at the top of this file is inherited into the
+       shadow roots too. */
+    -webkit-tap-highlight-color: transparent;
 }
 
 body {

frontend/src/components/artists-view/artists-view.ts

@@ -7,6 +7,7 @@ import {
 import '@lit-labs/virtualizer';
 import type {
     LitVirtualizer,
+    RangeChangedEvent,
     VisibilityChangedEvent,
 } from '@lit-labs/virtualizer';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
@@ -30,6 +31,7 @@ import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { ViewLifecycleMixin } from '@utils/view-lifecycle';
 import { RovingGridController } from '@utils/roving-grid';
+import { prefetchImageWindow } from '@utils/image-prefetch';
 
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
@@ -582,6 +584,26 @@ export class ArtistsView
      * Scroll position persistence
      * ================================================================ */
 
+    /**
+     * Warm the avatars just past the rendered range (#65).
+     *
+     * `rangeChanged` is the rendered range and `visibilityChanged` is
+     * what is on screen; the virtualizer has already drawn about
+     * 1000px past the latter, so that is the wrong anchor to measure a
+     * prefetch window from. It is deliberately outside the
+     * `restoringScroll` guard below: a restored scroll lands in the
+     * middle of the grid, which is exactly when nothing around it is
+     * cached.
+     */
+    private onRangeChanged = (e: RangeChangedEvent) => {
+        prefetchImageWindow(
+            this.cachedGridEntries,
+            e.first,
+            e.last,
+            (entry) => this.artistAvatarURL(entry.artist),
+        );
+    };
+
     /**
      * Save the first visible item index on scroll.
      */
@@ -1145,7 +1167,16 @@ export class ArtistsView
      * Helpers
      * ================================================================ */
 
-    private renderArtistAvatar(artist: library.Artist) {
+    /**
+     * The image this artist's card will draw, or `''` for the initial
+     * placeholder.
+     *
+     * Split out of `renderArtistAvatar` so the prefetch (#65) asks for
+     * exactly what the card is going to ask for — a second copy of the
+     * tier ladder would be a second thing to keep in step, and warming
+     * the wrong tier is a download that buys nothing.
+     */
+    private artistAvatarURL(artist: library.Artist): string {
         const needed = (this.imageSize ?? 176) * window.devicePixelRatio;
         let imageURL = '';
 
@@ -1172,6 +1203,12 @@ export class ArtistsView
             ) ?? '';
         }
 
+        return imageURL;
+    }
+
+    private renderArtistAvatar(artist: library.Artist) {
+        const imageURL = this.artistAvatarURL(artist);
+
         if (imageURL) {
             return html`<img
                 class="avatar-image"
@@ -1531,6 +1568,7 @@ export class ArtistsView
                     .keyFunction=${(entry: ArtistEntry) => entry.artist.ID}
                     .layout=${this.gridLayout}
                     @visibilityChanged=${this.onVisibilityChanged}
+                    @rangeChanged=${this.onRangeChanged}
                 ></lit-virtualizer>
             </div>
             ${this.renderContextMenu()}

frontend/src/components/bottom-nav/bottom-nav.ts

@@ -4,6 +4,7 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/drawer/drawer.js';
 import type WaDrawer from '@awesome.me/webawesome/dist/components/drawer/drawer.js';
 import { designTokens } from '../../styles/tokens.css';
+import { sheetScrollFade } from '../../styles/sheet-scroll.css';
 import '../sidebar/app-sidebar.js';
 import { nameDialog } from '@utils/name-dialog';
 import { ICON_PLAYLIST } from '@utils/icon-language';
@@ -27,15 +28,43 @@ interface Tab {
  * three to five items before the targets stop being thumb-sized —
  * 360 px over eleven sidebar entries is 32 px each — so the four here
  * are the ones plan 016's subset says a phone is *for*, and "More"
- * opens the existing `<app-sidebar>` in a drawer. That is deliberately
+ * opens the existing `<app-sidebar>` in a sheet. That is deliberately
  * a reuse rather than a second nav: two lists of destinations is two
  * places to add the next view to, and the sidebar already carries the
  * drag-to-navigate behaviour, the active state and the labels.
  *
+ * **"More" rises from the bottom, and it is the same sheet a context
+ * menu is** (#71). It was a `wa-drawer` sliding in from the side: a
+ * 200px column of a 424px screen, opening away from the thumb that
+ * asked for it, with three nested scrollers in it — the dialog, its
+ * body, and the sidebar's own `overflow-y: auto` host — which is the
+ * "only part of the screen scrolls under my finger" in the report.
+ *
+ * Three things about the replacement are load-bearing.
+ *
+ * **It is the same element with another `placement`, not a new
+ * surface.** `wa-drawer` renders a native `<dialog>` and opens it with
+ * `showModal()`, which is exactly what `menu-surface`'s sheet relies
+ * on — Chrome 37, the real top layer — so #60's containment finding
+ * carries over with nothing new to prove, and the focus trap, Escape,
+ * tap-outside and `wa-after-hide` all come along unchanged.
+ *
+ * **The body is the only scroller**, with `overscroll-behavior:
+ * contain`, and the sidebar is told to stop being one. Nesting them is
+ * what makes a drag scroll the wrong box.
+ *
+ * **The sidebar is still mounted rather than re-listed as data**,
+ * which the issue offers as an alternative. Its `data-testid` per
+ * destination is the reason: the shell's own sidebar is `display:
+ * none` below 600px rather than removed, so a second list drawing
+ * `nav-*` handles is the duplication this component already renders
+ * conditionally to avoid — and it would be a second place to add the
+ * next view to, with its own copy of #25's visibility filter.
+ *
  * It emits the same bubbling, composed `navigate` event the sidebar
  * does, so `index.ts` needs no knowledge of it, and it listens for that
  * event globally for the same reason the sidebar does: a navigation it
- * did not send (a card click, a detail view, the drawer) still has to
+ * did not send (a card click, a detail view, the sheet) still has to
  * move the highlight.
  */
 @customElement('bottom-nav')
@@ -89,6 +118,17 @@ export class BottomNav extends LitElement {
             color: var(--yj-accent, #ffd43b);
         }
 
+        /* The press state (#54). This bar is the phone's primary
+           navigation and had no feedback of its own at all -- what a
+           tap produced was the web view's tap highlight, a grey box
+           over the whole 48px cell, which index.css has now taken
+           away. The .active rule above is which tab you are *on*; this
+           is the tab being pressed, so they are a colour and a
+           background rather than two colours. */
+        button:active {
+            background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
+        }
+
         button:focus-visible {
             outline: 2px solid var(--yj-accent, #ffd43b);
             outline-offset: -2px;
@@ -104,15 +144,76 @@ export class BottomNav extends LitElement {
             white-space: nowrap;
         }
 
-        wa-drawer::part(body) {
-            padding: 0;
+        /* The sheet. --size is the drawer's own API for the axis its
+           placement uses, so auto is what makes it hug its content
+           instead of being a fixed 25rem band; the rest is the shape
+           the menu-surface context sheet already has, so a phone meets
+           one sheet rather than two. 85vh for its reason too: a surface
+           covering the whole screen is a page, not a sheet. */
+        wa-drawer {
+            --size: auto;
         }
 
+        wa-drawer::part(dialog) {
+            max-height: 85vh;
+            border-radius: 12px 12px 0 0;
+            /* The sidebar paints its own surface, so the sheet takes
+               that colour rather than the menus' elevated one: two
+               greys in one sheet is a seam across the middle of it. */
+            background-color: var(--yj-bg-surface, #212529);
+            /* One scroller, and it is the body below. The dialog's own
+               overflow: auto is what let the sheet scroll as well as
+               its content, and it is also what would square off the
+               corners this rule just rounded. */
+            overflow: hidden;
+        }
+
+        /* And this list does not fit (#210): measured at 424x439 with
+           the seed's eight destinations, the body is scrollHeight 412
+           against clientHeight 373, and eleven items at 48px would be
+           528 -- the count is the user's since #25. So the sheet says
+           where the fold is, with styles/sheet-scroll.css's two layers
+           rather than a second answer to the question #207 settled for
+           the context sheet. The colour is the local half: the sidebar
+           paints --yj-bg-surface, so the cover does too, or the fade
+           draws the menus' grey across the bottom of this one. */
+        wa-drawer::part(body) {
+            padding: 0;
+            /* A scroll that reaches the end of this list must not
+               become a scroll of the page underneath it. */
+            overscroll-behavior: contain;
+            /* The sheet sits on the bottom edge, so the last
+               destination would otherwise be under the home indicator
+               on a gesture-navigation phone -- the same allowance the
+               bar itself makes above. */
+            padding-bottom: env(safe-area-inset-bottom, 0);
+            --yj-sheet-surface: var(--yj-bg-surface, #212529);
+            ${sheetScrollFade}
+        }
+
+        /* And the sheet paints that surface once. The sidebar's host
+           paints the same grey -- which in the shell is the sidebar's
+           own background and here is a second, opaque copy of the
+           sheet's, drawn *over* the body's layers. So the fade was
+           painted and then covered: measured at 424x439 before this
+           rule, the last 32px read a flat 52,58,64 with 39px still
+           below. menu-surface meets the same requirement from the
+           other side, where .context-menu-panel[data-sheet] is
+           background-color: transparent; nothing changes visually
+           here, because the colour underneath is the one being
+           removed. */
         app-sidebar {
-            /* The sidebar sizes itself inline and collapses to icons
-               below 900px, which is every phone.  In the drawer there
-               is room for the labels, so it is told not to. */
-            height: 100%;
+            background-color: transparent;
+        }
+
+        /* A sheet is dragged at with a thumb, so it says where its top
+           edge is. Decorative: the destinations are below it. */
+        .grip {
+            width: 36px;
+            height: 4px;
+            margin: 8px auto 4px;
+            border-radius: 2px;
+            background: var(--yj-text-tertiary, #888);
         }
     `];
 
@@ -147,7 +248,7 @@ export class BottomNav extends LitElement {
     private visibilityCtrl = new ViewVisibilityController(this);
 
     /**
-     * Whether the drawer has been asked for.
+     * Whether the sheet has been asked for.
      *
      * The sidebar inside it is rendered only while this is true, and
      * that is not an optimisation. `app-sidebar` carries a
@@ -189,15 +290,17 @@ export class BottomNav extends LitElement {
 
     override updated() {
         // Web Awesome renders its heading into its own shadow root and
-        // never points aria-labelledby at it, so the drawer would
+        // never points aria-labelledby at it, so the sheet would
         // otherwise be announced unnamed -- the same fix, and the same
         // reason, as every wa-dialog in the app. A drawer's shadow root
-        // has the same shape, so the helper needs no change.
+        // has the same shape, so the helper needs no change; under
+        // `without-header` there is no heading to point at, which is
+        // that helper's documented `aria-label` path.
         nameDialog(this.drawer);
     }
 
     private onGlobalNavigate = () => {
-        // A navigation from inside the drawer is the drawer's job done.
+        // A navigation from inside the sheet is the sheet's job done.
         // The highlight is not this listener's business any more.
         this.drawerOpen = false;
     };
@@ -263,12 +366,14 @@ export class BottomNav extends LitElement {
             </nav>
 
             <wa-drawer
-                placement="start"
+                placement="bottom"
+                without-header
                 label="All views"
                 data-testid="nav-drawer"
                 ?open=${this.drawerOpen}
                 @wa-after-hide=${this.onDrawerHide}
             >
+                <div class="grip"></div>
                 ${this.drawerOpen
                     ? html`<app-sidebar expanded></app-sidebar>`
                     : nothing}

frontend/src/components/cover-grid/cover-grid.ts

@@ -8,6 +8,7 @@ import {
 import '@lit-labs/virtualizer';
 import type {
     LitVirtualizer,
+    RangeChangedEvent,
     VisibilityChangedEvent,
 } from '@lit-labs/virtualizer';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
@@ -30,6 +31,7 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@components/playlist-picker/playlist-picker.js';
 import { loadTrackDetails } from '@utils/lazy-track-details.js';
 import { tracksByFilePath, tracksForPaths } from '@utils/track-index.js';
+import { prefetchImageWindow } from '@utils/image-prefetch.js';
 import type { TrackDetails } from '@components/track-details/track-details.js';
 import type { CoverArtUrls } from '@components/track-details/track-details.js';
 import { AlbumSelectionManager } from './album-selection.js';
@@ -910,6 +912,31 @@ export class CoverGrid
         );
     };
 
+    /**
+     * Warm the covers just past the rendered range (#65).
+     *
+     * `rangeChanged` rather than `visibilityChanged`, because the two
+     * report different ranges and only one of them is the right
+     * anchor: visibility is what is on screen, and the virtualizer has
+     * already rendered about 1000px past that. Measured from the
+     * visible range this would spend most of its window on cards that
+     * already exist and have already asked for their own art.
+     *
+     * The entry lists are memoized, so asking for one here costs a
+     * reference compare.
+     */
+    private onRangeChanged = (e: RangeChangedEvent) => {
+        const entries = this.splitMode
+            ? this.getBeforeEntries()
+            : this.buildGridEntries();
+
+        prefetchImageWindow(entries, e.first, e.last, (entry) =>
+            entry.album.CoverArtPath
+                ? this.getCoverUrl(entry.album)
+                : '',
+        );
+    };
+
     /* ====================================================================
      * Virtualizer items
      * ==================================================================== */
@@ -2003,6 +2030,7 @@ export class CoverGrid
                 @keydown=${this.onGridAlbumKeydown}
                 @contextmenu=${this.onGridAlbumContextMenu}
                 @visibilityChanged=${this.onVisibilityChanged}
+                @rangeChanged=${this.onRangeChanged}
             ></lit-virtualizer>
         `;
     }
@@ -2037,6 +2065,7 @@ export class CoverGrid
                 @keydown=${this.onGridAlbumKeydown}
                 @contextmenu=${this.onGridAlbumContextMenu}
                 @visibilityChanged=${this.onVisibilityChanged}
+                @rangeChanged=${this.onRangeChanged}
             ></lit-virtualizer>
 
             <album-dropdown

frontend/src/components/menu-surface/menu-surface.ts

@@ -65,6 +65,7 @@ import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
 import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
 
+import { sheetScrollFade } from '../../styles/sheet-scroll.css';
 import { PHONE_QUERY } from '@utils/breakpoints';
 import { nameDialogsIn } from '@utils/name-dialog';
 
@@ -164,46 +165,17 @@ export class MenuSurface extends LitElement {
            and worse when the cut lands on a row boundary, where the
            sheet ends in a clean edge that reads as the end of the list.
 
-           Two layers, and the *order* is what asks the question: a
-           shadow pinned to the bottom of the box (attachment scroll),
-           and over it a cover of the sheet's own colour painted at the
-           end of the *content* (attachment local), which therefore
-           scrolls up over the shadow and hides it exactly when there is
-           nothing more to see. So the affordance is absent on a menu
-           that fits, present the moment one does not, and gone again at
-           the end of the list -- with no scroll listener, no
-           measurement, and nothing reaching into wa-dialog's shadow
-           root for the scroller. background-attachment is Chrome 4;
-           the reference device is Chrome 113.
-
-           **The curve is steep because the rows under it stay live.**
-           A scrim over a menu item is that item's text surface, and
-           this app's rule is that text clears 4.5:1 on every surface it
-           can sit on -- which the light ramp, whose bgElevated is
-           #e9ecef, is what makes non-theoretical. A row is 48px with
-           its label centred, so 32px of scrim that is already down to
-           a quarter strength at 14px reaches y-centre at about 0.06 and
-           spends its weight on the strip below the last legible label.
-           Measured on the dark ramp at x=300, flat 52,58,64 throughout
-           before: 50,56,62 at y=330, 33,37,40 at y=350 and 22,24,27 at
-           the bottom edge, and flat again at the end of the list. The
-           light ramp puts 9.9:1 on the last label. */
+           The two layers that say it live in styles/sheet-scroll.css
+           (#210), because the phone has a second sheet -- bottom-nav's
+           "More" -- which overflows for the same reason and must not
+           arrive at its own answer for what a fold looks like. What is
+           local to this sheet is the colour the cover is painted in:
+           the menus' elevated grey, handed over as --yj-sheet-surface
+           on the same box. */
         wa-dialog::part(body) {
             padding: 0;
-            overflow-y: auto;
-            background:
-                linear-gradient(
-                        var(--yj-bg-elevated, #343a40),
-                        var(--yj-bg-elevated, #343a40)
-                    )
-                    bottom / 100% 32px no-repeat local,
-                linear-gradient(
-                        to top,
-                        rgba(0, 0, 0, 0.6) 0%,
-                        rgba(0, 0, 0, 0.25) 45%,
-                        rgba(0, 0, 0, 0) 100%
-                    )
-                    bottom / 100% 32px no-repeat scroll;
+            --yj-sheet-surface: var(--yj-bg-elevated, #343a40);
+            ${sheetScrollFade}
         }
 
         /* A sheet is dragged at with a thumb, so it says where its top

frontend/src/components/playlist-details/playlist-details.ts

@@ -1357,8 +1357,14 @@ export class PlaylistDetails
             user-select: none;
         }
 
-        .track-item:hover {
-            background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+        /* A hover tint is for a device that hovers (#54). A hold
+           synthesises a hover in the WebView, so ungated this arrives
+           because a finger touched the row and stays after it has
+           gone; the press state below is what a tap gets instead. */
+        @media (hover: hover) and (pointer: fine) {
+            .track-item:hover {
+                background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+            }
         }
 
         .track-item.selected {
@@ -1378,11 +1384,13 @@ export class PlaylistDetails
             cursor: pointer;
         }
 
-        .track-item.phantom:hover {
-            background-color: var(
-                --yj-hover-overlay,
-                rgba(255, 255, 255, 0.05)
-            );
+        @media (hover: hover) and (pointer: fine) {
+            .track-item.phantom:hover {
+                background-color: var(
+                    --yj-hover-overlay,
+                    rgba(255, 255, 255, 0.05)
+                );
+            }
         }
 
         .track-item.phantom.selected {
@@ -1392,6 +1400,19 @@ export class PlaylistDetails
             );
         }
 
+        /* The press state (#54): the feedback a tap has now that the
+           web view's own highlight box is gone (index.css). Last, and
+           carrying a class, because a selected or playing row is two
+           classes deep and a bare :active would lose to it. */
+        .track-item.selected:active,
+        .track-item.active:active,
+        .track-item:active {
+            background-color: var(
+                --yj-press-overlay,
+                rgba(255, 255, 255, 0.12)
+            );
+        }
+
         .phantom-row {
             grid-column: 1 / -1;
             display: flex;

frontend/src/components/queue-panel/queue-panel.ts

@@ -581,8 +581,14 @@ export class QueuePanel
             contain: strict;
         }
 
-        .track-item:hover {
-            background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+        /* A hover tint is for a device that hovers (#54). A hold
+           synthesises a hover in the WebView, so ungated this arrives
+           because a finger touched the row and stays after it has
+           gone; the press state below is what a tap gets instead. */
+        @media (hover: hover) and (pointer: fine) {
+            .track-item:hover {
+                background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+            }
         }
 
         .track-item.selected {
@@ -597,6 +603,19 @@ export class QueuePanel
             background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
         }
 
+        /* The press state (#54): the feedback a tap has now that the
+           web view's own highlight box is gone (index.css). Last, and
+           carrying a class, because a selected or playing row is two
+           classes deep and a bare :active would lose to it. */
+        .track-item.selected:active,
+        .track-item.active:active,
+        .track-item:active {
+            background-color: var(
+                --yj-press-overlay,
+                rgba(255, 255, 255, 0.12)
+            );
+        }
+
         .track-position {
             font-size: var(--yj-text-sm);
             color: var(--yj-text-tertiary, #888);
@@ -2182,11 +2201,25 @@ export class QueuePanel
                             `
                             : nothing}
                     </div>
+                    <!-- **Every action here is named by aria-label**, like
+                         the close button #24 added beside them (#170). A
+                         title alone *is* a name, which is why a sweep for
+                         empty names reports these clean and why an
+                         assertion by role and name is green either way --
+                         but it is the weakest one: title is the last
+                         fallback in the accname order, so any content put
+                         inside the button later silently outranks it, and
+                         a phone has no hover to show it as a tooltip.
+
+                         The titles stay. On a desktop they are the tooltip
+                         for an icon-only control, which is a different job
+                         from naming it, and aria-label does not do it. -->
                     <div class="header-actions">
                         <button
                             class="header-action-button"
                             @click=${() => void this.handleClearQueue()}
                             ?disabled=${tracks.length === 0}
+                            aria-label="Clear queue"
                             title="Clear queue"
                         >
                             <wa-icon
@@ -2197,6 +2230,7 @@ export class QueuePanel
                             class="header-action-button add-to-playlist-button"
                             @click=${this.handleAddToPlaylist}
                             ?disabled=${tracks.length === 0}
+                            aria-label="Add queue to playlist"
                             title="Add queue to playlist"
                         >
                             <wa-icon

frontend/src/components/sidebar/app-sidebar.ts

@@ -42,6 +42,26 @@ export class AppSidebar extends LitElement {
             scrollbar-width: thin;
         }
 
+        /* A host that has made room owns the box, not just the labels
+           (#71). The bottom-nav sheet is the width of the screen and
+           provides the one scroll container it needs; left to itself
+           the sidebar is a 200px column with a second scroller inside
+           it, which is what a nested scroll region feels like under a
+           thumb -- part of the surface moves and part of it does not. */
+        :host([expanded]) {
+            max-width: none;
+            height: auto;
+            overflow: visible;
+        }
+
+        /* And the width is not draggable there. It is a mouse
+           affordance (mousedown, col-resize) sitting on the right edge
+           of a touch surface, where the compatibility mouse events a
+           tap synthesises can start a resize nobody asked for. */
+        :host([expanded]) .resize-handle {
+            display: none;
+        }
+
         .resize-handle {
             position: absolute;
             top: 0;
@@ -95,8 +115,15 @@ export class AppSidebar extends LitElement {
             text-align: center;
         }
 
-        li button:hover {
-            background-color: var(--yj-bg-elevated, #343a40);
+        /* A hover tint is for a device that hovers (#54), and this
+           component is on a phone too: below 600px it is what
+           bottom-nav's "More" sheet mounts, where a hold
+           synthesises a hover and leaves a destination looking picked
+           after the finger has gone. */
+        @media (hover: hover) and (pointer: fine) {
+            li button:hover {
+                background-color: var(--yj-bg-elevated, #343a40);
+            }
         }
 
         li button:focus-visible {
@@ -108,6 +135,14 @@ export class AppSidebar extends LitElement {
             background-color: var(--yj-bg-overlay, #495057);
         }
 
+        /* The press state (#54), after the .active rule and at the same
+           specificity, so pressing the destination you are already on
+           still says something. It is what a tap gets now that
+           index.css has taken the web view's own highlight box away. */
+        li button:active {
+            background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
+        }
+
         li button p {
             margin: 0;
             white-space: nowrap;
@@ -145,6 +180,25 @@ export class AppSidebar extends LitElement {
         :host(.collapsed) li button wa-icon {
             font-size: var(--yj-icon-md);
         }
+
+        /* Below 600px the only place this renders is the bottom-nav
+           sheet -- the shell's own copy is display: none there -- so
+           the rows are sized for the thumb that opened it: 48px, which
+           is #186's floor and the height every row in #60's context
+           sheet already has. A media query inside a shadow root is
+           answered by the viewport, so the component states this
+           itself rather than the sheet reaching in. */
+        @media (max-width: 599px) {
+            ul {
+                padding: 4px 8px 8px;
+            }
+
+            li button {
+                min-height: 48px;
+                padding: 12px 10px;
+                gap: 14px;
+            }
+        }
     `];
 
     /** Delay in ms before a drag-hover triggers navigation. */
@@ -173,11 +227,14 @@ export class AppSidebar extends LitElement {
 
     /**
      * Keep the labels regardless of the viewport, for a host that has
-     * made room for them -- `bottom-nav`'s drawer, which is the whole
+     * made room for them -- `bottom-nav`'s sheet, which is the whole
      * screen wide on the phone where this would otherwise auto-collapse
      * to icons. The auto-collapse is a *width* response to a narrow
-     * shell, and inside a drawer the shell is not what the sidebar is
+     * shell, and inside a sheet the shell is not what the sidebar is
      * sharing space with.
+     *
+     * It says the host owns the *box*, not only the labels: the width,
+     * the scrolling and the resize handle all follow it (#71).
      */
     @property({ type: Boolean, reflect: true })
     expanded = false;
@@ -350,9 +407,18 @@ export class AppSidebar extends LitElement {
      * be a media query in the stylesheet.
      */
     private applyViewportWidth() {
-        const narrow =
-            !this.expanded &&
-            (this.narrowViewport?.matches ?? false);
+        // A host that made room decides how much: `bottom-nav`'s sheet
+        // is the whole screen wide, and the inline width below -- which
+        // beats any rule the host could write -- would draw the old
+        // 200px side drawer inside it.
+        if (this.expanded) {
+            this.style.width = '100%';
+            this.collapsed = false;
+
+            return;
+        }
+
+        const narrow = this.narrowViewport?.matches ?? false;
         const width = narrow
             ? MIN_WIDTH
             : this.userWidth;

frontend/src/components/smart-playlist-details/smart-playlist-details.ts

@@ -516,8 +516,14 @@ export class SmartPlaylistDetails
             user-select: none;
         }
 
-        .track-item:hover {
-            background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+        /* A hover tint is for a device that hovers (#54). A hold
+           synthesises a hover in the WebView, so ungated this arrives
+           because a finger touched the row and stays after it has
+           gone; the press state below is what a tap gets instead. */
+        @media (hover: hover) and (pointer: fine) {
+            .track-item:hover {
+                background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+            }
         }
 
         .track-item.selected {
@@ -533,6 +539,19 @@ export class SmartPlaylistDetails
             background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
         }
 
+        /* The press state (#54): the feedback a tap has now that the
+           web view's own highlight box is gone (index.css). Last, and
+           carrying a class, because a selected or playing row is two
+           classes deep and a bare :active would lose to it. */
+        .track-item.selected:active,
+        .track-item.active:active,
+        .track-item:active {
+            background-color: var(
+                --yj-press-overlay,
+                rgba(255, 255, 255, 0.12)
+            );
+        }
+
         /* Phantom rows span the full grid */
         .track-item.phantom {
             display: grid;

frontend/src/components/track-list/track-list.ts

@@ -1201,8 +1201,16 @@ export class TrackList
       padding-left: 6px;
     }
 
-    .track-row:hover {
-      background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+    /* A hover tint is for a device that hovers (#54): a hold
+       synthesises a hover in the WebView, so ungated this is a
+       highlight that arrives because a finger touched the row and
+       then stays there after it has gone -- which reads as a
+       selection the user did not make. Same gate, and the same
+       mechanism, as #68's revealed controls. */
+    @media (hover: hover) and (pointer: fine) {
+      .track-row:hover {
+        background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
+      }
     }
 
     .track-row.selected {
@@ -1239,6 +1247,23 @@ export class TrackList
       background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
     }
 
+    /* The press state (#54), and the only feedback a tap has now that
+       the web view's tap highlight is gone (index.css).
+
+       **Last, and as specific as the state rules above**: a row that
+       is selected and playing is .track-row.selected.active, so a
+       bare .track-row:active is one class short of it and a press
+       on the row a phone is most likely to press -- the one it just
+       selected -- would show nothing. Instant rather than
+       transitioned, because the only measured statement here about
+       transitions on a list is that two card grids removed theirs
+       for software-rendering repaint cost. */
+    .track-row.selected:active,
+    .track-row.active:active,
+    .track-row:active {
+      background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
+    }
+
 
     .cell {
       overflow: hidden;

frontend/src/store/theme-store.ts

@@ -46,6 +46,17 @@ export interface ShadePalette {
     border: string;
     borderSubtle: string;
     hoverOverlay: string;
+    /**
+     * The tint a surface takes while it is being pressed (#54).
+     *
+     * Separate from `hoverOverlay` because the two answer different
+     * questions and only one of them a phone can ask: a hover is a
+     * pointer resting somewhere, a press is a finger on the thing it
+     * is about to activate. It is deliberately the stronger of the
+     * two — a press that reads the same as a hover says nothing on a
+     * device where the hover is synthesised by the press itself.
+     */
+    pressOverlay: string;
     selectionBg: string;
 }
 
@@ -95,6 +106,7 @@ export const SHADE_PALETTES: Record<BackgroundShade, ShadePalette> = {
         border: '#333333',
         borderSubtle: '#222222',
         hoverOverlay: 'rgba(255, 255, 255, 0.05)',
+        pressOverlay: 'rgba(255, 255, 255, 0.12)',
         selectionBg: 'rgba(100, 160, 255, 0.15)',
     },
     dark: {
@@ -114,6 +126,7 @@ export const SHADE_PALETTES: Record<BackgroundShade, ShadePalette> = {
         border: '#444444',
         borderSubtle: '#333333',
         hoverOverlay: 'rgba(255, 255, 255, 0.05)',
+        pressOverlay: 'rgba(255, 255, 255, 0.12)',
         selectionBg: 'rgba(100, 160, 255, 0.15)',
     },
     light: {
@@ -133,6 +146,7 @@ export const SHADE_PALETTES: Record<BackgroundShade, ShadePalette> = {
         border: '#ced4da',
         borderSubtle: '#dee2e6',
         hoverOverlay: 'rgba(0, 0, 0, 0.05)',
+        pressOverlay: 'rgba(0, 0, 0, 0.12)',
         selectionBg: 'rgba(100, 160, 255, 0.15)',
     },
 };
@@ -285,6 +299,7 @@ function deriveThemeVariables(
 
         // Interactive overlays
         '--yj-hover-overlay': palette.hoverOverlay,
+        '--yj-press-overlay': palette.pressOverlay,
         '--yj-selection-bg': palette.selectionBg,
 
         // Semantic *fills* — the background of a solid button or badge.

frontend/src/styles/sheet-scroll.css.ts

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+
+/**
+ * A bottom sheet whose body scrolls says so, in one rule both sheets
+ * read.
+ *
+ * The app has two sheets — `menu-surface`'s context menu (#60) and
+ * `bottom-nav`'s "More" navigation (#71) — and both are capped at 85vh,
+ * because a surface covering the whole screen is a page rather than a
+ * sheet. So both overflow, and both used to overflow *silently*: the
+ * menu at 424x439 with eight items ending at y=470 (#207), the nav
+ * sheet at the same viewport with `scrollHeight` 412 against
+ * `clientHeight` 373 (#210). Where the cut lands on a row boundary the
+ * sheet ends in a clean edge that reads as the end of the list.
+ *
+ * The mechanism is #207's and is unchanged by being shared: two
+ * background layers on the scrolling box, whose *attachments* are the
+ * conditionality. A cover of the sheet's own colour is painted at the
+ * end of the *content* (`local`) over a shadow pinned to the box
+ * (`scroll`), so the cover scrolls up over the shadow exactly when
+ * there is nothing more to see. The fade is therefore absent on a sheet
+ * that fits, present the moment one does not, and gone again at the end
+ * of the list — with no scroll listener, no measurement and nothing
+ * reaching into another component's shadow root for the scroller.
+ * `background-attachment` is Chrome 4; the reference device is
+ * Chrome 113.
+ *
+ * Three things about it are load-bearing.
+ *
+ * **The cover takes the sheet's own colour, from a custom property.**
+ * The two sheets are different greys — the nav sheet paints
+ * `--yj-bg-surface`, because it holds the sidebar and two greys in one
+ * sheet is a seam across the middle of it, while the context sheet
+ * paints the menus' `--yj-bg-elevated`. A shared rule that hard-coded
+ * either would put that seam back on the other one, so the host sets
+ * `--yj-sheet-surface` on the same box and this reads it.
+ *
+ * **The curve is steep because the rows under it stay live.** A scrim
+ * over a menu item is that item's text surface, and this app's rule is
+ * that text clears 4.5:1 on every surface it can sit on — which the
+ * light ramp, whose `bgElevated` is `#e9ecef`, makes non-theoretical. A
+ * row is 48px with its label centred, so 32px of scrim already down to
+ * a quarter strength at 14px spends its weight on the strip below the
+ * last legible label: measured at 9.9:1 on that label on the light ramp,
+ * against 5.0:1 for a linear 48px draft at 0.8. The dark-ramp pixel
+ * table is in `.planning/NOTES.md` (2026-08-23).
+ *
+ * **The box is declared a scroller here too.** `overflow-y: auto` is
+ * part of the same statement rather than left to each host: a fade over
+ * a box that is not the scroller is a fade that never moves, and the
+ * component tier asserts the pair together for that reason.
+ */
+export const sheetScrollFade = css`
+    overflow-y: auto;
+    background:
+        linear-gradient(
+                var(--yj-sheet-surface, #343a40),
+                var(--yj-sheet-surface, #343a40)
+            )
+            bottom / 100% 32px no-repeat local,
+        linear-gradient(
+                to top,
+                rgba(0, 0, 0, 0.6) 0%,
+                rgba(0, 0, 0, 0.25) 45%,
+                rgba(0, 0, 0, 0) 100%
+            )
+            bottom / 100% 32px no-repeat scroll;
+`;

frontend/src/utils/context-menu-controller.ts

@@ -710,10 +710,35 @@ export const contextMenuStyles = css`
         font-size: 13px;
     }
 
-    .context-menu-panel wa-dropdown-item:hover {
+    /* A hover tint is for a device that hovers (#54).
+
+       Below the query is a phone, where a hold *synthesises* a hover
+       in the WebView -- the same mechanism #68 gates the revealed
+       controls on -- so an ungated tint is a highlight that arrives
+       because a finger touched the row and then stays on it after the
+       finger has gone. Which is indistinguishable from the press
+       state below, and outlives it. */
+    @media (hover: hover) and (pointer: fine) {
+        .context-menu-panel wa-dropdown-item:hover {
+            background-color: var(
+                --yj-hover-overlay,
+                rgba(255, 255, 255, 0.1)
+            );
+        }
+    }
+
+    /* And a press state is for every device, because it is the one
+       piece of feedback a tap has now that the web view's own
+       highlight box is gone (index.css). Stronger than the hover tint
+       on purpose, and instant rather than transitioned: the only
+       measured statement this repo has about transitions on these
+       surfaces is the two card grids that removed theirs because
+       software rendering repaints per frame, and the phone is not
+       something this session can measure. */
+    .context-menu-panel wa-dropdown-item:active {
         background-color: var(
-            --yj-hover-overlay,
-            rgba(255, 255, 255, 0.1)
+            --yj-press-overlay,
+            rgba(255, 255, 255, 0.12)
         );
     }
 

frontend/src/utils/image-prefetch.ts

@@ -0,0 +1,156 @@
+/**
+ * Warm the browser's image cache for the cards a scroll is about to
+ * reach.
+ *
+ * #65: album art pops in while scrolling. The rule this app already
+ * follows is that a row image is `loading="lazy" decoding="async"` and
+ * draws the smallest adequate tier, and both halves are in place —
+ * `cover-grid.getCoverUrl()` and `artists-view`'s avatar both pick
+ * `_sm`/`_md`/`_lg` from the card size and the device pixel ratio. What
+ * is left is *when* the fetch starts: the grids are virtualized, so the
+ * `<img>` does not exist at all until the virtualizer decides to render
+ * its card, and only then can the browser ask for anything.
+ *
+ * The issue's Direction asks for a larger overscan, and that is not
+ * available: `@lit-labs/virtualizer`'s `_overhang` is a hard-coded
+ * 1000px `protected` field on `BaseLayout` with no configuration
+ * surface, so raising it means monkey-patching a private. 1000px is
+ * about two screens on the reference device's 439px viewport, which is
+ * a fraction of a second at speed.
+ *
+ * So the request is issued ahead of the element instead. Cover art and
+ * artist images are plain URLs served by `coverart.Handler` /
+ * `explore`'s image handler under `Cache-Control: public,
+ * max-age=31536000, immutable` — the filenames are content hashes — so
+ * a prefetched image is a cache hit by the time the card is drawn, and
+ * a second pass over the same rows costs nothing at all.
+ *
+ * Three things about it are load-bearing.
+ *
+ * **This is not the `LRUMap` path the issue's Findings warn about.**
+ * That ceiling (`ARTIST_IMAGE_CACHE_LIMIT` and friends) bounds
+ * Explore's base64 data URLs, which are held in JS. A library cover is
+ * a URL, and what retains the bytes is the browser's own HTTP cache,
+ * which evicts on its own terms. What this module retains is the *set
+ * of URLs already asked for*, which is why that set has a cap and
+ * reports itself to `window.__yjCacheStats()` — the measurement the
+ * issue asks for.
+ *
+ * **A window is warmed on both sides of the rendered range.** The
+ * event carries no direction, and scrolling back up needs the same
+ * treatment; the rows behind are already in `requested` from the pass
+ * that rendered them, so the backward half issues nothing in the
+ * common case and is free.
+ *
+ * **An in-flight image is held.** `new Image().src = url` and drop it
+ * is the usual idiom and usually survives, but "usually" is an engine
+ * detail and the engine that matters here is a two-year-old WebView.
+ * The element is kept until it loads or fails, and no longer — nothing
+ * here holds a decoded bitmap on purpose.
+ */
+
+import { registerCacheProbe } from './cache-stats.js';
+import { LRUMap } from './lru-map.js';
+
+/**
+ * How many entries past each edge of the rendered range to warm.
+ *
+ * Entries rather than pixels, because that is what the event reports
+ * and what the caller has an array of. Twelve rows on the phone's
+ * two-column grid and four on a desktop's six, on top of the
+ * virtualizer's own 1000px — enough to cover a flick, and bounded so a
+ * fast scroll through 5 000 albums cannot ask for 5 000 covers.
+ */
+export const PREFETCH_AHEAD = 24;
+
+/** Ceiling on the record of what has already been asked for. */
+export const PREFETCH_MEMORY = 512;
+
+/** URLs already requested; the value is a placeholder, the key is the record. */
+const requested = new LRUMap<string, true>(PREFETCH_MEMORY);
+
+/** Images still loading, held so the request cannot be collected. */
+const inFlight = new Set<HTMLImageElement>();
+
+registerCacheProbe('imagePrefetch', () => {
+    let chars = 0;
+
+    for (const url of requested.keys()) chars += url.length;
+
+    return { entries: requested.size, chars, limit: PREFETCH_MEMORY };
+});
+
+/** Whether this URL has already been asked for. */
+export function imagePrefetched(url: string): boolean {
+    return requested.has(url);
+}
+
+/**
+ * Ask the browser for `url` unless it has already been asked for.
+ * Returns whether a request was issued.
+ */
+export function prefetchImage(url: string): boolean {
+    if (!url || requested.has(url)) return false;
+
+    requested.set(url, true);
+
+    const img = new Image();
+
+    inFlight.add(img);
+
+    const done = () => {
+        inFlight.delete(img);
+    };
+
+    img.addEventListener('load', done, { once: true });
+    img.addEventListener('error', done, { once: true });
+    img.decoding = 'async';
+    img.src = url;
+
+    return true;
+}
+
+/**
+ * Warm the images either side of a virtualizer's rendered range.
+ *
+ * `first`/`last` are the indices the `visibilityChanged` event
+ * reported; `urlOf` returns the image the card at that index will
+ * draw, or `''` where it draws a placeholder. Returns how many
+ * requests were issued, which is what a test can assert on and what
+ * makes "a second run does approximately nothing" checkable.
+ */
+export function prefetchImageWindow<T>(
+    items: readonly T[],
+    first: number,
+    last: number,
+    urlOf: (item: T) => string,
+    ahead: number = PREFETCH_AHEAD,
+): number {
+    if (items.length === 0 || first < 0 || last < first) return 0;
+
+    const from = Math.max(0, first - ahead);
+    const to = Math.min(items.length - 1, last + ahead);
+    let issued = 0;
+
+    // Forward first: it is the direction a scroll is usually going, so
+    // it is the half that has to win the race.
+    for (let i = last + 1; i <= to; i++) {
+        const item = items[i];
+
+        if (item !== undefined && prefetchImage(urlOf(item))) issued++;
+    }
+
+    for (let i = from; i < first; i++) {
+        const item = items[i];
+
+        if (item !== undefined && prefetchImage(urlOf(item))) issued++;
+    }
+
+    return issued;
+}
+
+/** Forget what has been asked for. For tests; the app never needs it. */
+export function resetImagePrefetch(): void {
+    requested.clear();
+    inFlight.clear();
+}

frontend/test/components/art-prefetch.test.ts

@@ -0,0 +1,190 @@
+/**
+ * The grids ask for the art below the fold before the card exists
+ * (#65).
+ *
+ * Reported as "scrolling through albums, the art pops in". The cards
+ * already draw the smallest adequate tier and are already
+ * `loading="lazy"`, so what was left is *when*: `<lit-virtualizer>`
+ * renders about 1000px past the viewport and the `<img>` — and
+ * therefore the request — does not exist until it does. On the
+ * reference device that is about two screens.
+ *
+ * These assert the mechanism, since no tier here can photograph a
+ * pop-in: that the rows past the rendered range are requested, that
+ * the request is for the same tier the card will draw, and that the
+ * window has an end — an unbounded prefetch of a 5 000-album library
+ * is the failure this trades against.
+ *
+ * What is *not* asserted here is that a rendered card was never
+ * prefetched. It often was, honestly: the grid lays out more than once
+ * on mount, so a row warmed by the first pass is drawn by the second,
+ * which is the whole point. The rule that a single pass skips its own
+ * rendered range is `image-prefetch.test.ts`'s, where one call can be
+ * looked at on its own.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+import type { LitElement } from 'lit';
+
+import '@components/cover-grid/cover-grid';
+import '@components/artists-view/artists-view';
+import { emit, stub, flush, resetHarness } from '@test/support/harness';
+import { Events } from '../../src/events';
+import { fixture, shadowAll } from '@test/support/render';
+import {
+  PREFETCH_AHEAD,
+  imagePrefetched,
+  resetImagePrefetch,
+} from '@utils/image-prefetch';
+
+/** Enough albums that the virtualizer's own window is nowhere near the end. */
+const ALBUMS = Array.from({ length: 400 }, (_, i) => {
+  const n = String(i + 1).padStart(4, '0');
+
+  return {
+    ID: i + 1,
+    Name: `Album ${n}`,
+    ArtistName: 'Aurora Fields',
+    Year: 2020,
+    CoverArtPath: `/covers/${n}.jpg`,
+    CoverArtSmall: `/covers/${n}_sm.jpg`,
+    CoverArtMedium: `/covers/${n}_md.jpg`,
+    CoverArtLarge: `/covers/${n}_lg.jpg`,
+  };
+});
+
+const ARTISTS = Array.from({ length: 400 }, (_, i) => {
+  const n = String(i + 1).padStart(4, '0');
+
+  return {
+    ID: i + 1,
+    Name: `Artist ${n}`,
+    AlbumCount: 2,
+    TrackCount: 9,
+    ImageSmall: `/artists/${n}_sm.jpg`,
+    ImageMedium: `/artists/${n}_md.jpg`,
+    ImageLarge: `/artists/${n}_lg.jpg`,
+  };
+});
+
+/** Give the virtualizer a viewport; a zero-height host renders nothing. */
+function sized(el: HTMLElement): void {
+  el.style.display = 'block';
+  el.style.height = '600px';
+  el.style.width = '900px';
+}
+
+async function settle(el: LitElement): Promise<void> {
+  await flush();
+  await el.updateComplete;
+  await new Promise((r) => setTimeout(r, 200));
+}
+
+/** The `src` of every card the grid actually rendered. */
+function renderedSources(el: LitElement, selector: string): string[] {
+  return shadowAll(el, selector)
+    .map((img) => (img as HTMLImageElement).getAttribute('src') ?? '')
+    .filter(Boolean);
+}
+
+/**
+ * The last index the virtualizer has rendered, read off the cards
+ * rather than counted: the rendered range is what the prefetch window
+ * is measured from, and a count assumes it starts at 0 and has no
+ * gaps.
+ */
+function lastRenderedIndex(el: LitElement, selector: string): number {
+  const indices = shadowAll(el, selector).map((card) =>
+    Number(card.getAttribute('data-index')),
+  );
+
+  return Math.max(...indices);
+}
+
+/**
+ * The tier the cards chose, read off a rendered card rather than
+ * recomputed — the point of the assertion is that the prefetch and the
+ * card agree, so deriving both from the same ladder here would prove
+ * nothing.
+ */
+function tierSuffix(src: string): string {
+  const m = /_(sm|md|lg)\.jpg$/.exec(src);
+
+  return m ? `_${m[1]}` : '';
+}
+
+beforeEach(() => {
+  resetHarness();
+  resetImagePrefetch();
+  localStorage.clear();
+  stub('library.Library.GetAlbums', ALBUMS);
+  stub('library.Library.GetArtists', ARTISTS);
+  stub('library.Library.GetTracks', []);
+  stub('library.Library.GetGenres', []);
+  emit(Events.LibraryScanComplete);
+});
+
+describe('the albums grid warms the covers below the fold', () => {
+  it('asks for the covers past the rendered range, in the tier the card draws', async () => {
+    const el = await fixture<LitElement>('cover-grid');
+
+    sized(el);
+    await settle(el);
+
+    const rendered = renderedSources(el, 'img.cover-image');
+
+    expect(rendered.length).toBeGreaterThan(0);
+
+    const tier = tierSuffix(rendered[0]!);
+    const url = (index: number) =>
+      `/covers/${String(index + 1).padStart(4, '0')}${tier}.jpg`;
+
+    // The grid starts at the top and never scrolls here, so the whole
+    // window lies past the last card drawn.
+    const last = lastRenderedIndex(el, '.album-card');
+
+    expect(imagePrefetched(url(last + 1))).toBe(true);
+    expect(imagePrefetched(url(last + PREFETCH_AHEAD))).toBe(true);
+  });
+
+  it('stops at the end of the window rather than warming the library', async () => {
+    const el = await fixture<LitElement>('cover-grid');
+
+    sized(el);
+    await settle(el);
+
+    const rendered = renderedSources(el, 'img.cover-image');
+    const tier = tierSuffix(rendered[0]!);
+    const url = (index: number) =>
+      `/covers/${String(index + 1).padStart(4, '0')}${tier}.jpg`;
+
+    // Not "exactly `last + PREFETCH_AHEAD`": the grid lays out more
+    // than once on mount and each pass warms a window from wherever
+    // the rendered range was then, so the reachable set is a few
+    // windows wide. The property that matters is that it is a window
+    // at all rather than the library.
+    expect(imagePrefetched(url(399))).toBe(false);
+    expect(window.__yjCacheStats?.()['imagePrefetch']?.entries ?? 0)
+      .toBeLessThan(ALBUMS.length / 2);
+  });
+});
+
+describe('the artists grid warms its avatars the same way', () => {
+  it('asks for the avatars past the rendered range', async () => {
+    const el = await fixture<LitElement>('artists-view');
+
+    sized(el);
+    await settle(el);
+
+    const rendered = renderedSources(el, 'img.avatar-image');
+
+    expect(rendered.length).toBeGreaterThan(0);
+
+    const tier = tierSuffix(rendered[0]!);
+    const last = lastRenderedIndex(el, '.artist-card');
+    const url = (index: number) =>
+      `/artists/${String(index + 1).padStart(4, '0')}${tier}.jpg`;
+
+    expect(imagePrefetched(url(last + 1))).toBe(true);
+    expect(imagePrefetched(url(399))).toBe(false);
+  });
+});

frontend/test/components/bottom-nav.test.ts

@@ -193,4 +193,175 @@ describe('bottom-nav', () => {
     expect(shadow<HTMLElement>(el, 'app-sidebar')?.hasAttribute('expanded'))
       .toBe(true);
   });
+
+  it('draws "More" as a sheet rising from the bottom', async () => {
+    const el = await fixture<Nav>('bottom-nav');
+    const drawer = shadow<HTMLElement>(el, 'wa-drawer');
+
+    // #71. A side drawer is a desktop shape: it opened away from the
+    // thumb that asked for it and drew a 200px column of a 424px
+    // screen. `placement` is the whole of the change to *where* it
+    // comes from, and `without-header` is what makes it the same sheet
+    // `menu-surface` draws rather than a second pattern with a title
+    // bar and a close button.
+    expect(drawer?.getAttribute('placement')).toBe('bottom');
+    expect(drawer?.hasAttribute('without-header')).toBe(true);
+
+    // Named all the same: `nameDialog`'s documented aria-label path,
+    // since without-header renders no heading to point at.
+    expect(drawer?.getAttribute('label')).toBe('All views');
+  });
+
+  it('leaves exactly one scroll container, and it is the sheet body', async () => {
+    const el = await fixture<Nav>('bottom-nav');
+    const drawer = shadow<HTMLElement & { open: boolean }>(el, 'wa-drawer');
+
+    if (!drawer) throw new Error('no drawer');
+
+    const shown = once(drawer, 'wa-after-show');
+
+    shadow<HTMLButtonElement>(el, '[data-testid="tab-more"]')?.click();
+    await shown;
+    await update(el, {});
+
+    // The report is "only part of the screen scrolls under my finger",
+    // and the cause is three boxes that each scroll: the dialog, its
+    // body, and the sidebar's own overflow-y host. Which one a drag
+    // moves depends on where the finger landed.
+    const dialog = drawer.shadowRoot?.querySelector('[part~="dialog"]');
+    const body = drawer.shadowRoot?.querySelector('[part~="body"]');
+    const sidebar = shadow<HTMLElement>(el, 'app-sidebar');
+
+    if (!dialog || !body || !sidebar) throw new Error('no sheet');
+
+    expect(getComputedStyle(dialog).overflowY).toBe('hidden');
+    expect(getComputedStyle(body).overflowY).toBe('auto');
+    expect(getComputedStyle(sidebar).overflowY).toBe('visible');
+
+    // And the one that does scroll keeps it to itself, or reaching the
+    // end of the destinations scrolls the page behind the sheet.
+    expect(getComputedStyle(body).overscrollBehaviorY).toBe('contain');
+  });
+
+  it('says where the fold is, in the sheet\'s own colour', async () => {
+    const el = await fixture<Nav>('bottom-nav');
+    const drawer = shadow<HTMLElement & { open: boolean }>(el, 'wa-drawer');
+
+    if (!drawer) throw new Error('no drawer');
+
+    const shown = once(drawer, 'wa-after-show');
+
+    shadow<HTMLButtonElement>(el, '[data-testid="tab-more"]')?.click();
+    await shown;
+
+    const body = drawer.shadowRoot?.querySelector('[part~="body"]');
+
+    if (!body) throw new Error('no body part to scroll');
+
+    const style = getComputedStyle(body);
+
+    // #210. This list does not fit the phone — measured at 424x439,
+    // `scrollHeight` 412 against `clientHeight` 373 with the seed's
+    // eight destinations — and said nothing about it, which where the
+    // cut lands on a row boundary reads as the end of the list.
+    //
+    // The mechanism is #207's and is asserted the same way: the pair of
+    // attachments *is* the feature. A cover of the sheet's own colour
+    // painted at the end of the content (`local`) over a shadow pinned
+    // to the box (`scroll`), so the fade is absent on a sheet that
+    // fits, present the moment one does not, and gone again at the end.
+    expect(
+      style.backgroundAttachment,
+      'the cover must be local and the shadow must not',
+    ).toBe('local, scroll');
+    expect(style.backgroundPosition).toBe('50% 100%, 50% 100%');
+    expect(style.backgroundSize).toBe('100% 32px, 100% 32px');
+
+    // And the colour is the local half of a shared rule: this sheet
+    // paints the sidebar's `--yj-bg-surface` (#212529) rather than the
+    // menus' elevated grey, or the fade draws the *other* sheet's
+    // colour across the bottom of this one — which is the seam a
+    // shared fragment would otherwise reintroduce.
+    expect(style.backgroundImage).toMatch(
+      /^linear-gradient\(rgb\(33, 37, 41\), rgb\(33, 37, 41\)\)/,
+    );
+
+    // And nothing paints over it. The sidebar's host carries the same
+    // grey, which inside the sheet is a second opaque copy of the
+    // surface drawn on top of these layers -- measured at 424x439 with
+    // the rule removed, the last 32px read a flat 52,58,64 with 39px
+    // still below, so the fade was painted and covered. That is
+    // `.context-menu-panel[data-sheet]`'s transparency, one sheet over.
+    const sidebar = shadow<HTMLElement>(el, 'app-sidebar');
+
+    if (!sidebar) throw new Error('no sidebar');
+
+    expect(getComputedStyle(sidebar).backgroundColor).toBe('rgba(0, 0, 0, 0)');
+  });
+
+  it('gives the sheet the whole width, which the sidebar does not take', async () => {
+    const el = await fixture<Nav>('bottom-nav');
+
+    shadow<HTMLButtonElement>(el, '[data-testid="tab-more"]')?.click();
+    await update(el, {});
+
+    const sidebar = shadow<HTMLElement>(el, 'app-sidebar');
+
+    if (!sidebar) throw new Error('no sidebar');
+
+    // `app-sidebar` writes an *inline* width and caps itself at 400px,
+    // which beats any rule this host could write — so "the host owns
+    // the box" has to be part of what `expanded` means, or the sheet
+    // draws the old 200px column inside a full-width surface.
+    expect(sidebar.style.width).toBe('100%');
+    expect(getComputedStyle(sidebar).maxWidth).toBe('none');
+  });
+
+  it('sizes the sheet rows for a thumb, below the phone breakpoint', async () => {
+    const el = await fixture<Nav>('bottom-nav');
+
+    shadow<HTMLButtonElement>(el, '[data-testid="tab-more"]')?.click();
+    await update(el, {});
+
+    const sidebar = shadow<HTMLElement>(el, 'app-sidebar');
+    const sheets = sidebar?.shadowRoot?.adoptedStyleSheets ?? [];
+    const phoneRules: string[] = [];
+
+    for (const sheet of sheets) {
+      for (const rule of Array.from(sheet.cssRules)) {
+        if (!(rule instanceof CSSMediaRule)) continue;
+
+        if (!/max-width:\s*599px/.test(rule.conditionText)) continue;
+
+        for (const inner of Array.from(rule.cssRules)) {
+          phoneRules.push(inner.cssText);
+        }
+      }
+    }
+
+    // Asserted against the parsed stylesheet, like
+    // `hover-affordance.test.ts` and for the same reason: this tier's
+    // iframe is not 599px wide, so the rule cannot be *rendered* here —
+    // but the regression worth catching is someone moving it out of the
+    // query, which nothing on a desktop draws differently.
+    expect(phoneRules.length).toBeGreaterThan(0);
+    expect(phoneRules.some((r) => /min-height:\s*48px/.test(r))).toBe(true);
+  });
+
+  it('takes the resize handle out of the sheet', async () => {
+    const el = await fixture<Nav>('bottom-nav');
+
+    shadow<HTMLButtonElement>(el, '[data-testid="tab-more"]')?.click();
+    await update(el, {});
+
+    const handle = shadow<HTMLElement>(el, 'app-sidebar')
+      ?.shadowRoot?.querySelector('.resize-handle');
+
+    if (!handle) throw new Error('no resize handle');
+
+    // A col-resize strip on the right edge of a touch surface: the
+    // compatibility mouse events a tap synthesises reach its
+    // `mousedown`, so it can start a resize nobody asked for.
+    expect(getComputedStyle(handle).display).toBe('none');
+  });
 });

frontend/test/components/menu-surface.test.ts

@@ -254,6 +254,15 @@ describe('menu-surface', () => {
       // Both sit at the bottom, or the cover hides nothing.
       expect(style.backgroundPosition).toBe('50% 100%, 50% 100%');
       expect(style.backgroundSize).toBe('100% 32px, 100% 32px');
+
+      // The layers are shared with `bottom-nav`'s sheet since #210, and
+      // the colour is what each host still says for itself: this one
+      // paints the menus' `--yj-bg-elevated` (#343a40). A shared rule
+      // that hard-coded one grey would draw a seam across the other
+      // sheet, which is why the fragment reads a custom property.
+      expect(style.backgroundImage).toMatch(
+        /^linear-gradient\(rgb\(52, 58, 64\), rgb\(52, 58, 64\)\)/,
+      );
     });
 
     /**

frontend/test/components/press-feedback.test.ts

@@ -0,0 +1,191 @@
+/**
+ * What a tap looks like now that the web view's own highlight is gone
+ * (#54).
+ *
+ * `index.css` sets `-webkit-tap-highlight-color: transparent` on
+ * `html`, which — the property being inherited — reaches every shadow
+ * root in the app. That takes away the grey box a phone drew over the
+ * bounding rect of whatever was tapped, and with it the only touch
+ * feedback the rows, the tab bar, the sidebar's destinations and the
+ * shared menu items had. So the press states below are not decoration:
+ * without them this change trades wrong feedback for none.
+ *
+ * **Asserted against the parsed stylesheet**, on `hover-affordance`'s
+ * precedent and with the same limitation stated out loud: CDP's
+ * `Emulation.setEmulatedMedia` does not reach this tier's iframe, so
+ * there is no way here to render a component as a phone would, and
+ * `:active` cannot be forced from a test either. What the browser will
+ * answer is the shape it built from the `css` literal — which rule sits
+ * inside which media query, and what the press selector actually is.
+ *
+ * Two regressions are worth catching that way, and both are silent on a
+ * desktop:
+ *
+ * - someone hoisting a hover tint back out of its query as a tidy-up,
+ *   which on a phone is a highlight that arrives because a finger
+ *   touched the row and stays after it has gone;
+ * - someone simplifying the press selector to a bare `:active`, which
+ *   is one class short of `.selected` / `.active` and so does nothing
+ *   on the row a phone is most likely to press — the one it has just
+ *   selected.
+ *
+ * The pixels are the Android tier's, and the tap highlight itself is
+ * `e2e/specs/native-touch-feel.spec.ts`, since only the real app loads
+ * `index.css` at all.
+ */
+import { describe, expect, it } from 'vitest';
+
+import '@components/track-list/track-list';
+import '@components/queue-panel/queue-panel';
+import '@components/playlist-details/playlist-details';
+import '@components/smart-playlist-details/smart-playlist-details';
+import '@components/bottom-nav/bottom-nav';
+import '@components/sidebar/app-sidebar';
+import { fixture } from '@test/support/render';
+
+/** Every rule in the element's own adopted stylesheets, flattened. */
+function rulesOf(host: Element): { text: string; condition: string | null }[] {
+  const sheets = host.shadowRoot?.adoptedStyleSheets ?? [];
+  const out: { text: string; condition: string | null }[] = [];
+
+  for (const sheet of sheets) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      if (rule instanceof CSSMediaRule) {
+        for (const inner of Array.from(rule.cssRules)) {
+          out.push({ text: inner.cssText, condition: rule.conditionText });
+        }
+
+        continue;
+      }
+
+      out.push({ text: rule.cssText, condition: null });
+    }
+  }
+
+  return out;
+}
+
+/** The four lists, their row selector, and the tag that draws them. */
+const LISTS: Array<[string, string]> = [
+  ['track-list', '.track-row'],
+  ['queue-panel', '.track-item'],
+  ['playlist-details', '.track-item'],
+  ['smart-playlist-details', '.track-item'],
+];
+
+describe('a row says it is being pressed', () => {
+  for (const [tag, row] of LISTS) {
+    it(`${tag} draws a press state that survives its state classes`, async () => {
+      const el = await fixture(tag, {});
+      const rules = rulesOf(el);
+
+      // Worth nothing if it read no rules at all — the first assertion
+      // icon-language.test.ts makes, for the same reason.
+      expect(rules.length).toBeGreaterThan(0);
+
+      const press = rules.filter(
+        (r) => r.text.includes(`${row}:active`) && r.text.includes('background-color'),
+      );
+
+      expect(press.length).toBeGreaterThan(0);
+
+      for (const rule of press) {
+        // A press is not a hover: it is the one thing a touch device
+        // can say, so it must not sit behind a pointer query.
+        expect(rule.condition).toBeNull();
+        expect(rule.text).toContain('--yj-press-overlay');
+      }
+
+      // The load-bearing half: the selector carries a state class, or
+      // it loses to `.selected` / `.selected.active` and the press is
+      // invisible on a selected or playing row.
+      expect(press.some((r) => r.text.includes(`${row}.selected:active`))).toBe(true);
+    });
+
+    it(`${tag} keeps its hover tint for devices that hover`, async () => {
+      const el = await fixture(tag, {});
+      const rules = rulesOf(el);
+
+      expect(rules.length).toBeGreaterThan(0);
+
+      const hover = rules.filter(
+        (r) =>
+          r.text.includes(`${row}:hover`) &&
+          r.text.includes('--yj-hover-overlay'),
+      );
+
+      expect(hover.length).toBeGreaterThan(0);
+
+      for (const rule of hover) {
+        expect(rule.condition).toMatch(/hover:\s*hover/);
+        expect(rule.condition).toMatch(/pointer:\s*fine/);
+      }
+    });
+  }
+});
+
+describe('the two navigations say they are being pressed', () => {
+  it('the phone tab bar, which had no state of its own at all', async () => {
+    const el = await fixture('bottom-nav', {});
+    const rules = rulesOf(el);
+
+    expect(rules.length).toBeGreaterThan(0);
+
+    const press = rules.filter((r) => r.text.startsWith('button:active'));
+
+    expect(press.length).toBe(1);
+    expect(press[0]!.condition).toBeNull();
+    expect(press[0]!.text).toContain('--yj-press-overlay');
+  });
+
+  it("the sidebar, which is also the phone's More sheet", async () => {
+    const el = await fixture('app-sidebar', {});
+    const rules = rulesOf(el);
+
+    expect(rules.length).toBeGreaterThan(0);
+
+    const press = rules.filter((r) => r.text.startsWith('li button:active'));
+
+    expect(press.length).toBe(1);
+    expect(press[0]!.condition).toBeNull();
+    expect(press[0]!.text).toContain('--yj-press-overlay');
+
+    // Its hover tint is a destination looking picked, if it is left to
+    // a synthesised hover inside the More sheet.
+    const hover = rules.filter((r) => r.text.startsWith('li button:hover'));
+
+    expect(hover.length).toBeGreaterThan(0);
+
+    for (const rule of hover) {
+      expect(rule.condition).toMatch(/hover:\s*hover/);
+    }
+  });
+});
+
+describe('the shared context menu', () => {
+  // One stylesheet, fourteen menus — the same reason the sheet's row
+  // height lives there rather than in each host.
+  it('presses its items, in the one place every menu includes', async () => {
+    const el = await fixture('queue-panel', {});
+    const rules = rulesOf(el);
+
+    const press = rules.filter((r) =>
+      r.text.startsWith('.context-menu-panel wa-dropdown-item:active'),
+    );
+
+    expect(press.length).toBe(1);
+    expect(press[0]!.condition).toBeNull();
+    expect(press[0]!.text).toContain('--yj-press-overlay');
+
+    const hover = rules.filter((r) =>
+      r.text.startsWith('.context-menu-panel wa-dropdown-item:hover'),
+    );
+
+    expect(hover.length).toBeGreaterThan(0);
+
+    for (const rule of hover) {
+      expect(rule.condition).toMatch(/hover:\s*hover/);
+      expect(rule.condition).toMatch(/pointer:\s*fine/);
+    }
+  });
+});

frontend/test/support/pixel.svg

@@ -0,0 +1,2 @@
+<!-- A real, servable image for the prefetch tests: one transparent pixel. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"></svg>

frontend/test/utils/image-prefetch.test.ts

@@ -0,0 +1,113 @@
+/**
+ * What the grids ask for ahead of the scroll (#65).
+ *
+ * The virtualizer renders about 1000px past its viewport and nothing
+ * else can be asked for, because the `<img>` does not exist until the
+ * card does — two screens on the reference device, which is a fraction
+ * of a second at speed. `prefetchImageWindow` issues the request
+ * before the element, so the assertions here are about *which* rows
+ * are asked for, that none is asked for twice, and that a request is
+ * really made rather than merely recorded.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+
+import {
+  PREFETCH_MEMORY,
+  imagePrefetched,
+  prefetchImage,
+  prefetchImageWindow,
+  resetImagePrefetch,
+} from '@utils/image-prefetch';
+
+/** A hundred cards, each with its own cover URL. */
+const CARDS = Array.from({ length: 100 }, (_, i) => ({ url: `/covers/${i}_sm.jpg` }));
+
+const urlOf = (card: { url: string }) => card.url;
+
+beforeEach(() => {
+  resetImagePrefetch();
+});
+
+describe('warming the images a scroll is about to reach', () => {
+  it('asks for the rows just past the rendered range, and no further', () => {
+    const issued = prefetchImageWindow(CARDS, 40, 50, urlOf, 3);
+
+    // Three past each edge: 51-53 and 37-39.
+    expect(issued).toBe(6);
+    expect(imagePrefetched('/covers/51_sm.jpg')).toBe(true);
+    expect(imagePrefetched('/covers/53_sm.jpg')).toBe(true);
+    expect(imagePrefetched('/covers/54_sm.jpg')).toBe(false);
+    expect(imagePrefetched('/covers/39_sm.jpg')).toBe(true);
+    expect(imagePrefetched('/covers/37_sm.jpg')).toBe(true);
+    expect(imagePrefetched('/covers/36_sm.jpg')).toBe(false);
+  });
+
+  it('leaves the rendered rows alone — they have their own <img>', () => {
+    prefetchImageWindow(CARDS, 40, 50, urlOf, 3);
+
+    expect(imagePrefetched('/covers/45_sm.jpg')).toBe(false);
+  });
+
+  it('asks for nothing twice, so a scroll back over the same rows is free', () => {
+    prefetchImageWindow(CARDS, 40, 50, urlOf, 3);
+
+    expect(prefetchImageWindow(CARDS, 40, 50, urlOf, 3)).toBe(0);
+  });
+
+  it('clamps at both ends of the list', () => {
+    // At the top of a five-item list nothing precedes the range, and
+    // the tail runs out after two.
+    expect(prefetchImageWindow(CARDS.slice(0, 5), 0, 2, urlOf, 10)).toBe(2);
+  });
+
+  it('asks for nothing when the virtualizer reports an empty range', () => {
+    // `visibilityChanged` reports -1/-1 before anything is laid out.
+    expect(prefetchImageWindow(CARDS, -1, -1, urlOf)).toBe(0);
+  });
+
+  it('skips a card that draws a placeholder rather than an image', () => {
+    expect(prefetchImageWindow(CARDS, 40, 50, () => '', 3)).toBe(0);
+  });
+
+  it('really issues the request, rather than only recording it', async () => {
+    // A served file, so the load succeeds and the resource timing entry
+    // is unambiguous; the query string keeps it distinct per run.
+    const url = `/test/support/pixel.svg?prefetch=${Date.now()}`;
+    const href = new URL(url, location.href).href;
+
+    expect(prefetchImage(url)).toBe(true);
+
+    for (let i = 0; i < 100; i++) {
+      if (performance.getEntriesByName(href).length > 0) break;
+
+      await new Promise((r) => setTimeout(r, 20));
+    }
+
+    expect(performance.getEntriesByName(href)).toHaveLength(1);
+    expect(prefetchImage(url)).toBe(false);
+    expect(performance.getEntriesByName(href)).toHaveLength(1);
+  });
+
+  it('reports what it is holding, with its cap, to the cache stats', () => {
+    prefetchImageWindow(CARDS, 40, 50, urlOf, 3);
+
+    const stat = window.__yjCacheStats?.()['imagePrefetch'];
+
+    expect(stat).toBeTruthy();
+    expect(stat!.entries).toBe(6);
+    expect(stat!.limit).toBe(PREFETCH_MEMORY);
+    // It holds URLs, not images — the bytes are the browser's cache.
+    expect(stat!.chars).toBe(6 * '/covers/51_sm.jpg'.length);
+  });
+
+  it('keeps its record bounded, so a 50 000-album scroll cannot grow it', () => {
+    const many = Array.from(
+      { length: PREFETCH_MEMORY * 2 },
+      (_, i) => ({ url: `/covers/bulk-${i}_sm.jpg` }),
+    );
+
+    prefetchImageWindow(many, 0, 0, urlOf, many.length);
+
+    expect(window.__yjCacheStats?.()['imagePrefetch']?.entries).toBe(PREFETCH_MEMORY);
+  });
+});