feat(now-playing): plain text instead of links in the phone mini player

The bottom bar's title, artist and "Playing from X" all navigate. In a
bar sized for a bar they are a few characters of text, which is not a
touch target — and explore-link holds its navigation for one
double-click interval and drops it if a second click arrives, a gesture
that exists so double-clicking a row can play it and that means nothing
on touch.

Below the shell's phone breakpoint the three render as plain text. The
words are unchanged: the source line still says where the queue came
from, because dropping the link is the change and dropping the
information would be a different and worse one. The cover art already
carries the phone-only button that opens the full-screen Now Playing
view, which is where the links live.

This is in JS rather than in the stylesheet because what changes is the
content, not its appearance — no CSS rule takes a click handler off an
element. matchMedia is read in connectedCallback for the reason the
reduce-motion query beside it already is, so a test can answer it first.

Two smaller things. PHONE_QUERY moves out of track-list.ts into
utils/breakpoints.ts: it was a private const when one component needed
it, and a second reader is where a copy starts drifting from index.css.
And `phone` joins geometryKey(), because crossing the breakpoint swaps a
link for a bare string and the marquee travels a distance read from
measuring it — the words being identical either side is not the same as
the box measuring the same.

Closes #61

.planning/NOTES.md

@@ -3580,3 +3580,87 @@ per-card flag can answer at all.
 The general point: **two columns that agree today are not one column.**
 Which of them a new surface reads should be decided by which one has
 something that can un-set it.
+
+## The queue panel was a column that could not afford to be one (measured 2026-08-19)
+
+Plan 018, issue #24. Measured against the running app (`make
+dev-headless SEED=default`, Chromium) on Playlists, sweeping the
+viewport with the queue open and closed. Main panel width, and how much
+of the page header survived:
+
+| viewport | sidebar | main (queue open) | actions clipped |
+|---|---|---|---|
+| 1280×800 | 200 | 759 | — |
+| 1000×700 | 200 | 479 | 2 of 3 |
+| **900×600** | 200 | **379** | all three |
+| 800×600 | 56 | 423 | all three |
+| 390×780 | — | **69** | all three |
+| 320×600 | — | **0** | all three |
+| 800×600 | 56 | 744 *(closed)* | New Smart Playlist, 158/162px |
+
+Five things came out of it that the issue did not say.
+
+- **The header clips at the enforced minimum with the queue closed.**
+  800×600 is the only size this app promises, and "New Smart Playlist"
+  loses 4px of its 162 there. The queue makes it dramatic; it is not
+  the cause.
+- **900×600 is worse than 800×600.** `AUTO_COLLAPSE_VIEWPORT` collapses
+  the sidebar *below* 900, so the main panel is 843px at 899 and 700px
+  at 900. **The worst desktop case is the top of the Compact band, not
+  the enforced floor** — so every viewport list that stopped at "the
+  minimum" was missing its own worst case. `layout-overflow.spec.ts`
+  carries 900 now.
+- **At 320px the main panel was 0px.** The panel is `flex-shrink: 0` in
+  the flow of `.content-area`, so an open queue is paid for by the
+  content rather than covering it. Not degraded — gone. That is the
+  measurement #55 wanted and did not have.
+- **Only Playlists overflows.** All ten primary views swept at 900×600
+  and 390×780; every other header reports `scrollWidth ==
+  clientWidth`, and Albums at 390 renders title, count and sort legibly
+  (checked on a screenshot, not just the number). So #69 is one view's
+  action set — three text buttons totalling 390px — and not a systemic
+  header failure.
+- **Both reasons in `MinWidth`'s comment had expired.** The subtitle is
+  `display: none` from 899 down, and the sidebar host is
+  `overflow-y: auto` (at 600×460, `scrollHeight` 434 against a 332px
+  client, Settings reachable after scrolling). The floor is right; its
+  stated defence was two mechanisms that can no longer happen, which is
+  worse than either answer because nobody can argue with it.
+
+**A correction worth keeping, because it nearly went in the plan.** My
+first probe for the sidebar's scroller searched
+`shadowRoot.querySelectorAll('*')` and reported "no scroller — items
+are unreachable", which reads exactly like a live Settings-unreachable
+bug. The scroller is the **host**, and a host is not inside its own
+shadow root. CLAUDE.md was right and the probe was wrong.
+
+**And one claim in the plan's first draft was too strong**: that the
+overlay "removes the desktop half of #69". After phase 2, at 900×600,
+open and closed are now *identical* (main 700, one action clipped)
+where open used to be main 379 with all three clipped. The queue's
+contribution is gone; the header's own overflow remains and is still a
+live defect at a supported size.
+
+### The mode cannot be a media query
+
+The panel is drag-resizable 200–500px and persisted, so a viewport
+breakpoint assumes the default 320 and is wrong by up to 180px for a
+user who widened it — in the direction that hurts, since a wider queue
+is exactly when the content can least afford it. It is computed from
+`.content-area`'s width instead (which already accounts for the
+sidebar's collapse), and the component test that matters widens the
+panel at a *fixed* parent width and asserts the flip.
+
+The floor (480) is a judgement, and the measurement is why: there is no
+cliff. The track list rescales its columns continuously — 213px down to
+124px between main widths of 900 and 544, `rowOverflow=0` at every step
+— and the album grid steps 3 columns to 2 somewhere between 564 and 644
+without breaking. So 480 is anchored at both ends instead: it keeps the
+default 1100px window inline, and puts every measured-broken case on
+the overlay side.
+
+The scrim is perceptible but subtle on a dark ramp, which is worth
+knowing before someone "fixes" it as broken: sampled from screenshots at
+900×600, the main panel's background goes 33,37,41 → 18,20,23 and a
+row's text 242 → 133. It covers the content area only — not the sidebar
+or the transport — because the queue is not modal.

.planning/plans/active/018-supported-sizes-and-the-queue-model.md

@@ -0,0 +1,294 @@
+# 018 — Supported sizes, and what the queue panel is
+
+**Issue:** #24 (`Area/Shell-Nav`, `Priority/High`, `Reviewed/Confirmed`)
+**Unblocks:** #55 (queue as a screen) — a real Gitea dependency
+**Relates:** #69 (page-header overflow), #12 (mini-player), #51 (small-screen umbrella)
+**Status:** in flight
+
+#73 puts this first in Phase 2 and hangs the rest of the phase off it,
+so the decision has to be written down and arguable before any CSS
+moves. This document is the decision. Everything below the matrix is
+either a measurement or an argument for one of the four choices #24
+asks for.
+
+---
+
+## What is actually wrong, measured
+
+Against the running app (`make dev-headless SEED=default`, Chromium),
+Playlists, sweeping the viewport with the queue open and closed. The
+number that matters is how much of the page header survives.
+
+| viewport | sidebar | queue | main panel | header needs | actions clipped |
+|---|---|---|---|---|---|
+| 1280×800 | 200 | open 321 | 759 | 759 | — |
+| 1000×700 | 200 | open 321 | 479 | 747 | New Playlist, New Smart Playlist |
+| **900×600** | 200 | open 321 | **379** | 747 | **all three** |
+| 800×600 | 56 | open 321 | 423 | 747 | all three |
+| 700×600 | 56 | open 321 | 323 | 747 | all three |
+| 390×780 | — | open 321 | **69** | 747 | all three |
+| 320×600 | — | open 321 | **0** | 747 | all three |
+| 900×600 | 200 | closed | 700 | 747 | New Smart Playlist |
+| **800×600** | 56 | closed | 744 | 747 | **New Smart Playlist (158/162px)** |
+| 320×600 | — | closed | 320 | 747 | all three |
+
+Five things in that table are not in the issue.
+
+**The header clips at the supported minimum with the queue closed.**
+At 800×600 — the size `backend/config/window.go` enforces and the only
+size this app *promises* — "New Smart Playlist" loses 4px of its 162.
+#24 reads as a queue-panel bug; the queue makes it dramatic, but the
+header overflows on its own at the minimum window.
+
+**900×600 is worse than 800×600, because the sidebar expands at 900.**
+`AUTO_COLLAPSE_VIEWPORT` collapses the sidebar to icons *below* 900, so
+at 899px the main panel is 843px and at 900px it is 700px. The worst
+desktop case is therefore not the minimum window; it is the pixel
+immediately above the collapse. Anything that tests "the minimum" and
+stops has not tested the worst case, which is what
+`layout-overflow.spec.ts` does today.
+
+**At phone widths the queue is not a drawer, it is an amputation.**
+`queue-panel`'s host is `flex-shrink: 0; width: 0`, going to
+`width: var(--queue-width, 320px)` under `[open]` — it is *in the flow*
+of `.content-area`, so it takes its width from the main panel rather
+than covering it. At 390px that leaves 69px of the page; at 320px it
+leaves **0px**, and the app is not degraded but gone. This is the
+measurement #55 needs and did not have.
+
+**Only Playlists overflows.** Sweeping all ten primary views at 900×600
+and at 390×780, every other header reports `scrollWidth ==
+clientWidth`, and Albums at 390px renders title, count and sort
+legibly (checked on a screenshot, not just the number). #69 is
+therefore one view's action set — three text buttons totalling 390px —
+and not a systemic header failure, though the *rule* still belongs in
+`page-header`.
+
+**Both reasons in `MinWidth`'s comment are stale.** It says the floor is
+800×600 because "below ~780 the header's subtitle wraps" and "below
+~600 tall the eleven sidebar items no longer fit". The subtitle is
+`display: none` below 900 (index.css), and the sidebar host is
+`overflow-y: auto` — at 600×460 its `scrollHeight` is 434 against a
+332px client, and Settings is reachable after scrolling. Neither
+mechanism can happen any more. That does not mean the floor should
+move; it means its stated reason no longer supports it, which is worse
+than either answer.
+
+*(Care needed: my first probe for the sidebar scroller searched
+`shadowRoot.querySelectorAll('*')` and reported "items are
+unreachable", because the scroller is the **host** and a host is not in
+its own shadow root. The claim in CLAUDE.md is correct.)*
+
+---
+
+## Decision 1 — the supported size matrix
+
+Three bands. Two of them already exist and are already argued; what is
+new is that they are written down as a *promise*, and that the queue is
+part of it.
+
+| band | width | navigation | queue | promise |
+|---|---|---|---|---|
+| **Phone** | < 600 | `bottom-nav` + drawer | overlay, full width | reflows; nothing needs sideways scrolling; fits 320px |
+| **Compact** | 600 – 899 | icon sidebar | overlay + scrim | nothing is clipped or unreachable at any width in the band |
+| **Desktop** | ≥ 900 | labelled sidebar | inline where it fits (see decision 2), else overlay | as Compact |
+
+And one promise across all three: **no action is ever unreachable.**
+That is the sentence #69 asks for and it is the one the matrix exists
+to make checkable.
+
+**400% zoom** keeps the meaning it already has: WCAG 1.4.10 names 320px
+as the reflow target, the phone band covers it, and
+`layout-overflow.spec.ts` already asserts a 320px viewport needs no
+sideways scrolling. What changes is that the *queue* must be part of
+that assertion — it is not today, and with the queue open at 320px the
+main panel is 0px wide, which no current test can see.
+
+**The window minimum stays 800×600**, and its comment gets the real
+reason. The old mechanisms are gone, but the floor is still where the
+Compact band's chrome stops being comfortable, and lowering it would
+mean promising the desktop layout at sizes where only the phone layout
+works. The interesting consequence is decision 4.
+
+---
+
+## Decision 2 — the queue is an overlay when it cannot afford to be a column
+
+**The rule.** The queue panel renders inline — in the flow, as today —
+only while
+
+```
+viewport − sidebar − queueWidth ≥ 480
+```
+
+and as an overlay with a scrim otherwise.
+
+**Why it cannot be a media query**, which is the load-bearing half:
+the queue's width is *user state*. It is drag-resizable between 200 and
+500px and persisted (`--queue-width`, `MIN_WIDTH`/`MAX_WIDTH` in
+`queue-panel.ts`). A breakpoint at a fixed viewport width silently
+assumes the default 320, and is wrong by 180px for a user who has
+dragged the panel wide — in the direction that hurts, since a wider
+queue is exactly when the content can least afford it. So the mode is
+computed from the measured widths and published as an attribute, the
+way `data-active-view` already is, and the CSS keys off that.
+
+**Why 480, honestly.** There is no cliff to derive it from. The track
+list rescales its columns continuously — at main widths from 900 down
+to 544 its `--grid-cols` shrink from 213px to 124px with
+`rowOverflow=0` throughout — and the album grid steps 3 columns to 2
+somewhere between 564 and 644 without breaking. So this is a judgement,
+anchored on two things: it keeps the *default* window (1100 wide, main
+= 580) inline, because the inline queue is a desktop affordance people
+choose and turning it into an overlay for the common case would be a
+regression in feel; and it puts every case measured as broken —
+900×600 at main=379, and every phone width — on the overlay side.
+1024×768 lands at main=504 and stays inline.
+
+**The scrim is the other half of the issue's complaint** ("make the
+queue obviously an overlay *over* the content so it reads as something
+to close"). An overlay queue gets a scrim, closes on scrim click and on
+Escape, and returns focus to `#queue-button`.
+
+**What must not change**: #55's Direction is explicit — one component,
+two mount points, do not fork it. The overlay is a *presentation* of
+the same `queue-panel`, so the roving tab stop, Alt+Arrow reorder, drag
+reorder, selection semantics and the `virtualizer.requestUpdate()` on
+selection and current-track change all come along untouched. This
+decision deliberately stops short of #55's detail-view mount, but it is
+the shape that makes it possible, and it unblocks it.
+
+---
+
+## Decision 3 — #69 is its own PR, and here is the finding that decides it
+
+`page-header` **cannot collapse its own actions**, and that is not an
+effort estimate but a fact about the API. Actions arrive through
+`<slot name="actions">` as arbitrary light-DOM markup — Playlists slots
+a `<div class="header-actions">` of three `<button>`s with click
+handlers, drag handlers and a conditional class. A component cannot
+move another component's light-DOM children into a dropdown and keep
+their behaviour; there is nothing generic to render as a menu item.
+
+So the overflow rule needs an *actions API* — hosts declaring
+`{icon, label, handler, priority}` data that `page-header` can render
+either as buttons or as menu items — which is a change to all three
+hosts that slot actions, not a rule added in one place. That is a
+different piece of work from this one, it is independently verifiable,
+and the desktop half of #69's symptom is removed by decision 2 anyway
+(the queue stops eating the header's width).
+
+It therefore stays #69, gets the finding above recorded on it, and
+follows immediately after this. What *this* plan owes it is the
+promise in the matrix — no action unreachable at any supported size —
+and the measurement that the only offender today is Playlists.
+
+**And the promise is not kept yet, which is the honest version of a
+claim this document made in its first draft.** "Decision 2 removes the
+desktop half of #69's symptom" was too strong. Measured after phase 2,
+at 900×600 on Playlists:
+
+| | before | after |
+|---|---|---|
+| queue open | main 379px, **all three** actions clipped | main 700px, **one** clipped |
+| queue closed | main 700px, one clipped | unchanged |
+
+So the queue's *contribution* is gone — open and closed are now
+identical, which is the whole of what this decision owed — and the
+residual "New Smart Playlist: 114/162px" is the header overflowing on
+its own, at a size the queue never touched. #69 is still a live defect
+at a supported size, and the matrix's promise is what will close it.
+
+---
+
+## Decision 4 — a very small window becomes the phone layout, not the mini-player
+
+#24 asks whether a very small window should switch to the mini-player
+(#12) "or simply refuse to go there". Both options in the question are
+worse than the one the codebase already has.
+
+**#12 is a second window, not a mode.** Its findings say so: v3
+supports multiple windows, `AlwaysOnTop` is a window *option*, and the
+frontend would need an entry branch mounting only the mini-player root
+for a second window loading the same bundle. Turning the main window
+into a mini-player at some width conflates the two: it would throw away
+the user's navigation state on a resize, and it puts the MPRIS question
+(#12's own open question — media controls are process-level and must
+not be per-window) on a code path that a drag can trigger by accident.
+
+**And "refuses" is unnecessary, because the reflow already exists.**
+The phone band is real, tested, and reached by width alone — a desktop
+window narrowed below 600px already gets `bottom-nav` and the phone
+shell. That is a better answer than refusing: it is strictly more
+usable than a hard minimum, it costs nothing new, and it is the same
+code Android runs, so it stays exercised.
+
+So: the main window reflows and never becomes a mini-player; #12 stays
+a separate always-on-top window and is not blocked by, or coupled to,
+this decision. The window minimum stays 800×600 for the reason in
+decision 1 — but the phone band is what happens below it, not a
+refusal, which is why the minimum is a comfort floor rather than a
+correctness one.
+
+---
+
+## Phases
+
+1. **This document**, linked from #24, with the matrix reported on the
+   issue and #55 told whether it is unblocked. *(no code)* — **done**
+2. **The queue's overlay mode** — computed mode attribute, scrim,
+   Escape and scrim-click close, focus return. The inline path is
+   unchanged above the threshold. — **done**
+3. **The window minimum's comment** — replace both stale reasons with
+   the measured ones. No value change. — **done**
+4. **Verification**, below. Including the specs that must change
+   because they assert the old behaviour. — **done**
+
+#69 follows as its own branch; #55 became unblocked at phase 2.
+
+## What landed, measured
+
+Main panel width with the queue open, before and after:
+
+| viewport | before | after | mode |
+|---|---|---|---|
+| 1280×800 | 759 | 759 | inline |
+| 1100×720 (default window) | 579 | 579 | inline |
+| 1024×768 | 503 | 503 | inline |
+| 900×600 | **379** | **700** | overlay |
+| 800×600 | 423 | 744 | overlay |
+| 390×780 | **69** | **390** | overlay |
+| 320×600 | **0** | **320** | overlay |
+
+The scrim is perceptible but subtle on a dark ramp, which is worth
+knowing before someone "fixes" it: sampled from the screenshots at
+900×600, the main panel's background goes 33,37,41 → 18,20,23 and a
+row's text 242 → 133. It covers the **content area only** — not the
+sidebar or the transport — on purpose: the queue is not modal, and
+leaving the navigation live means the scrim reads as "this is over the
+content" (which is what #24 asked for) without pretending the rest of
+the app is unavailable.
+
+## Verification, and what each tier cannot see
+
+- `make ui-test` — the queue panel's mode logic is component-tier
+  work and belongs there. It **cannot** see the shell: the threshold is
+  computed from the sidebar and viewport, which do not exist in that
+  tier.
+- `make e2e` — `layout-overflow.spec.ts` gains the queue-open case at
+  every band (it has none today, which is why main=0px at 320px has
+  never failed anything) and **gains 900×600**, since the minimum is
+  not the worst case. `queue-toggle-state.spec.ts` and
+  `phone-shell.spec.ts` both touch the panel and must be re-read before
+  editing.
+- **Screenshots at every band, read by a human.** This is not optional
+  here: `layout-overflow.spec.ts` asserts the *shell* needs no sideways
+  scrolling and passes on a build whose album header clips its own
+  buttons (measured this session at 390px; filed on #66). Clipping
+  *inside* a component is invisible to it, and clipping is this issue.
+- `make ui-visual` **cannot help at all** — the component tier renders
+  the token fallbacks, because the theme only reaches `:root` in the
+  real app.
+- Accessible names via `page.getByRole(...)`, never a shadow-root
+  query. A drawer with a scrim is exactly the shape that grows a
+  nameless control, and this repo has shipped one three times.

CLAUDE.md

@@ -1328,6 +1328,68 @@ 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".
 
+**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),
+**Desktop** from 900 (labelled sidebar) — plus one sentence across all
+three, *no action is ever unreachable at any supported size*. The bands
+themselves already existed; what was new is that they are a promise and
+that the queue panel is inside it.
+
+**900 is the worst desktop width, not the 800×600 minimum.** The
+sidebar collapses to icons *below* 900, so the main panel is 843px at
+899 and 700px at 900 — the narrowest content area any desktop width
+produces is at the top of the Compact band, not at the enforced floor.
+Every viewport list that stopped at "the minimum" was therefore missing
+its own worst case, which is why `layout-overflow.spec.ts` carries 900
+now. And **both reasons in `MinWidth`'s comment had expired** — the
+subtitle is `display: none` from 899 down and the sidebar host scrolls
+(`overflow-y: auto`; at 600×460 its `scrollHeight` is 434 against a
+332px client) — so 800×600 is a *comfort* floor for desktop chrome and
+not a correctness one. Below it the phone layout takes over, which is
+also why a very small window reflows rather than becoming a
+mini-player: **#12 is a second always-on-top window, not a mode of this
+one**, and making it a mode would discard navigation state on a resize
+and put the process-level MPRIS question on a path a drag can trigger.
+
+**The queue panel is a column only while the content can spare the
+width, and that cannot be a media query.** In flow the host is
+`flex-shrink: 0`, so an open queue is paid for by the main panel: it
+left 379px at 900×600 (with all three of the Playlists header's actions
+clipped), 69px at 390, and **0px** at 320 — the content was not
+degraded but gone. It goes to an overlay with a scrim when
+`available - panelWidth < 480`, where `available` is
+`.content-area`'s width and therefore already accounts for the
+sidebar's collapse.
+
+Four things about it are load-bearing. **The mode is computed, not
+breakpointed**, because the panel's width is user state — drag-resizable
+200–500px and persisted — so a viewport breakpoint silently assumes the
+default 320 and is wrong by up to 180px in the direction that hurts;
+widening the panel at a fixed window size must flip it, and
+`queue-overlay-mode.test.ts` is written around exactly that. **480 is a
+judgement and says so**: there is no cliff to derive it from (the track
+list rescales continuously, 213px to 124px columns with no row
+overflow), so it is anchored to keep the default 1100px window inline
+and put every measured-broken case on the overlay side. **The scrim
+covers the content area only** — not the sidebar or the transport —
+because the queue is not modal, and it is subtle on a dark ramp by
+arithmetic rather than by accident (33,37,41 → 18,20,23). And **the
+overlay is a presentation, not a fork**: #55 asks for one component
+with two mount points, so the roving tab stop, Alt+Arrow reorder, drag
+reorder, selection semantics and `virtualizer.requestUpdate()` all come
+along untouched. Escape closes it and returns focus, and is attached
+only while the overlay is up — it is a dismissal, not a shortcut, which
+is why it is not a panel-scoped binding.
+
+What this does **not** fix is `page-header` overflowing on its own:
+at 900×600 "New Smart Playlist" is still clipped to 114 of 162px with
+the queue *closed*. That is #69, and it cannot be fixed in
+`page-header` alone — actions arrive through `<slot name="actions">` as
+arbitrary light-DOM markup with their own handlers, so collapsing them
+into a "More actions" menu needs an actions *API* (data, not markup)
+across all three hosts that slot them.
+
 **The phone section of `index.css` is last on purpose.** A media query
 adds no specificity, so a `@media (max-width: 599px)` block placed
 above the plain rules it overrides loses to them — which is how phase 1
@@ -2307,6 +2369,23 @@ Pre-commit hooks verify generated code is fresh — always run `make generate` a
   mistyped `feat` ships a minor version. `make release-dry` answers "what
   would this merge release" without pushing.
 
+  **The analyzer reads the type and ignores the scope, so a CI-only change
+  is `ci:` and never `fix(ci):`.** The scope is decoration; `fix` is a
+  patch whatever is in the brackets. Two commits touching nothing but
+  `.gitea/workflows/unclaim.yml` were written `fix(ci):` and cut `v0.2.1`
+  and `v0.2.2` — real releases, published to Arch, Homebrew and the APK
+  registry, containing no user-facing change. They were left in place
+  rather than deleted, because a version that vanishes is worse for
+  whoever pulled it than one that turns out to be empty.
+
+  **The blast radius is bigger than the version number**, which is what
+  makes this worth a paragraph. A merge to `main` starts two workflows;
+  if `release.yml` then pushes a tag, that tag push starts **four more**
+  (`arch-package`, `homebrew-formula`, `android-apk`, `desktop-assets`) —
+  on a runner with capacity 1, where the APK build alone is tens of
+  minutes. `make release-dry` before merging is how you find out, and it
+  is cheaper than every one of those.
+
   **`@semantic-release/github` is not in that config and must not be.**
   Gitea's API is `/api/v1` and is not GitHub's surface, so
   `@semantic-release/exec` calls `scripts/gitea-release.sh` instead — one

backend/autotag/recommend.go

@@ -17,6 +17,34 @@ const (
 	RecommendationStrong Recommendation = "strong"
 )
 
+// ConfidentTier is the tier at which this package considers a match
+// good enough to act on without being asked to look.
+//
+// It exists as a name rather than as `== RecommendationStrong` at
+// each call site because two features read it and they must not
+// disagree about what "high confidence" means: the album page tells
+// the user unprompted that the autotagger has a match (#28), and
+// strict auto-accept will rewrite the files without asking (#90).
+// A page that says "we are sure" about something the auto-accept
+// pass would decline is the app contradicting itself.
+//
+// What the two do *not* share is everything else. Surfacing a match
+// is a suggestion with a confirm dialog behind it; auto-accept is an
+// irreversible on-disk rewrite, and #90 gates it on further
+// conditions this tier cannot express — exact track count, every
+// title matching, lengths within a couple of seconds, no cover
+// replacement, no MBID conflict. So this is the floor both stand on,
+// not the whole of either test.
+const ConfidentTier = RecommendationStrong
+
+// Confident reports whether a tier clears ConfidentTier.
+//
+// A comparison rather than an equality, so adding a tier above
+// "strong" later does not silently stop qualifying.
+func Confident(r Recommendation) bool {
+	return recommendationRank(r) >= recommendationRank(ConfidentTier)
+}
+
 const (
 	// Absolute score tiers.
 	strongScoreThresh = 0.90

backend/autotag/recommend_test.go

@@ -168,3 +168,34 @@ func TestRecommend_LocalCandidatesWithoutRGMBIDCompareByTitle(t *testing.T) {
 		t.Errorf("different-title rival: Recommend = %q, want medium", got)
 	}
 }
+
+// The tier both features stand on is one name, checked here rather
+// than assumed at two call sites.
+//
+// #28 renders "we have a match for this album" on the album page and
+// #90 will rewrite files without asking; a page that claims confidence
+// the auto-accept pass would decline is the app contradicting itself.
+// What they do not share is everything else — auto-accept adds gates
+// this tier cannot express — so this pins the floor, not the whole of
+// either test.
+func TestConfidentIsTheOneSharedFloor(t *testing.T) {
+	t.Parallel()
+
+	if ConfidentTier != RecommendationStrong {
+		t.Errorf("ConfidentTier = %q, want strong", ConfidentTier)
+	}
+
+	for _, tc := range []struct {
+		rec  Recommendation
+		want bool
+	}{
+		{RecommendationNone, false},
+		{RecommendationLow, false},
+		{RecommendationMedium, false},
+		{RecommendationStrong, true},
+	} {
+		if got := Confident(tc.rec); got != tc.want {
+			t.Errorf("Confident(%q) = %v, want %v", tc.rec, got, tc.want)
+		}
+	}
+}

backend/autotagservice/albummatch.go

@@ -0,0 +1,145 @@
+package autotagservice
+
+import (
+	"database/sql"
+	"fmt"
+
+	"yellowjacket/backend/autotag"
+)
+
+// AlbumMatchView is "the autotagger already has a confident match for
+// the album you are looking at".
+//
+// It is deliberately not a score. The album page renders a suggestion,
+// and a suggestion has to be actionable: which release, what it is
+// called, and whether acting on it here would do the whole album or
+// only part of it.
+type AlbumMatchView struct {
+	// GroupKey is the tagging group the actions operate on.
+	GroupKey string `json:"groupKey"`
+
+	// Recommendation is the tier, as a string, for a caller that
+	// wants to render the strength rather than trust the filter.
+	Recommendation string `json:"recommendation"`
+
+	// Score is the top candidate's raw score, 0..1.
+	Score float64 `json:"score"`
+
+	// ReleaseMBID is the release Apply would write.
+	ReleaseMBID string `json:"releaseMbid"`
+
+	// Title and ArtistCredit name that release, so the banner can say
+	// what it is offering rather than "a match".
+	Title        string `json:"title"`
+	ArtistCredit string `json:"artistCredit"`
+
+	// TrackCount is the group's local track count.
+	TrackCount int64 `json:"trackCount"`
+
+	// GroupCount is how many tagging groups this album spans.
+	//
+	// More than one means a multi-disc album (one group per disc), and
+	// it is the reason this is a field rather than an implementation
+	// detail: applying "the album" from a single button would retag
+	// one disc of three and leave the folder holding a mix of old and
+	// new tags. The caller offers review instead.
+	GroupCount int `json:"groupCount"`
+}
+
+// MatchForAlbum answers "does the autotagger have something confident
+// to say about this album", for the album detail page.
+//
+// Three things about it are load-bearing.
+//
+// **It costs no MusicBrainz request.** Everything it needs is already
+// on disk: `tagging_items` carries the top score and release from the
+// background prefetch, and `tagging_candidates` durably holds the
+// scored list. The rate limiters here are shared with every page the
+// user can open, so a lookup that fires on page load must not join
+// that queue — which also means this returns nothing for a folder
+// nobody has scored yet, rather than scoring it now. That is the
+// right trade: the prefetch will get to it, and a page that silently
+// spends a minute of somebody's MusicBrainz budget to draw a banner
+// is worse than a page that says nothing.
+//
+// **The tier is computed, not read.** `tagging_items.score` is the raw
+// number and `Recommend` is what turns it into a claim — capping it
+// for an ambiguous runner-up, an incomplete alignment or a folder too
+// small to corroborate itself. Filtering on the raw score would
+// promise confidence the scorer had explicitly withheld.
+//
+// **Nothing is said about an album the user has already answered
+// for.** Only a `pending` group qualifies: `confirmed` covers both a
+// finished apply and an explicit "leave as is", and `skipped` is the
+// user saying not now. Re-offering either is nagging, and "leave as
+// is" would be actively wrong to argue with.
+func (s *Service) MatchForAlbum(albumID int64) (*AlbumMatchView, error) {
+	if albumID <= 0 {
+		return nil, nil //nolint:nilnil // "no album" is not an error.
+	}
+
+	rows, err := s.db.Queries.GetTaggingItemsForAlbum(
+		s.ctx, sql.NullInt64{Int64: albumID, Valid: true},
+	)
+	if err != nil {
+		return nil, fmt.Errorf("tagging items for album: %w", err)
+	}
+
+	pending := rows[:0:0]
+
+	for _, row := range rows {
+		if row.Status == "pending" {
+			pending = append(pending, row)
+		}
+	}
+
+	if len(pending) == 0 {
+		return nil, nil //nolint:nilnil // nothing to say is not an error.
+	}
+
+	// Rows arrive best-score-first, so the first pending one is the
+	// group worth describing. On a multi-disc album that is one disc
+	// of several and GroupCount says so.
+	best := pending[0]
+
+	cands := s.lookupCachedCandidates(best.GroupKey)
+	if len(cands) == 0 {
+		return nil, nil //nolint:nilnil // not scored yet; see the doc comment.
+	}
+
+	locals, err := s.scorer.LocalTracksForGroup(s.ctx, best.GroupKey)
+	if err != nil {
+		return nil, fmt.Errorf("local tracks for group: %w", err)
+	}
+
+	group := autotag.Group{
+		AlbumName:   best.AlbumName,
+		AlbumArtist: best.AlbumArtist,
+		Tracks:      locals,
+		Synthetic:   best.Synthetic != 0,
+	}
+
+	rec := autotag.Recommend(group, cands)
+	if !autotag.Confident(rec) {
+		return nil, nil //nolint:nilnil // not confident enough to interrupt.
+	}
+
+	top := cands[0]
+
+	// The release the banner names must be the release Apply would
+	// write. Apply with an empty MBID takes the top cached candidate,
+	// which is what this reads — but it is passed explicitly anyway,
+	// so a rescore between the page rendering and the user clicking
+	// cannot swap the album out from under a button they have already
+	// read.
+	return &AlbumMatchView{
+		GroupKey:       best.GroupKey,
+		Recommendation: string(rec),
+		Score:          top.Score,
+		ReleaseMBID:    top.ReleaseMBID,
+		Title:          top.Title,
+		ArtistCredit:   top.ArtistCredit,
+		TrackCount:     best.TrackCount,
+		GroupCount:     len(pending),
+	}, nil
+}

backend/autotagservice/albummatch_test.go

@@ -0,0 +1,320 @@
+package autotagservice
+
+import (
+	"encoding/json"
+	"testing"
+
+	"yellowjacket/backend/autotag"
+	"yellowjacket/backend/database"
+)
+
+// seedAlbumGroup writes one album's files, its tagging item and the
+// durable candidate blob the prefetch would have left behind.
+//
+// The candidate list is what a real one looks like in the two ways
+// that decide the tier: a per-track alignment for every local track,
+// and a runner-up far enough away not to count as ambiguity.
+func seedAlbumGroup(
+	t *testing.T,
+	db *database.DB,
+	groupKey string,
+	tracks int,
+	status string,
+	score float64,
+) int64 {
+	t.Helper()
+
+	for i := 1; i <= tracks; i++ {
+		database.InsertTestTrack(t, db, database.TestTrack{
+			FilePath:    filePathFor(groupKey, i),
+			Title:       titleFor(i),
+			Artist:      "Tideline",
+			Album:       "Glass Harbour",
+			AlbumArtist: "Tideline",
+			TrackNumber: int64(i),
+			LengthMs:    200000,
+			LibraryID:   0,
+			GroupKey:    groupKey,
+		})
+	}
+
+	if _, err := db.ExecContext(`
+		INSERT INTO tagging_items
+		    (group_key, library_id, track_count, album_name, album_artist,
+		     disc_number, status, score, best_match_release_mbid)
+		VALUES (?, 0, ?, 'Glass Harbour', 'Tideline', 0, ?, ?, 'rel-1')
+	`, groupKey, tracks, status, score); err != nil {
+		t.Fatalf("insert tagging item: %v", err)
+	}
+
+	var albumID int64
+	if err := db.QueryRowWriter(
+		`SELECT album_id FROM audio_files WHERE group_key = ? LIMIT 1`, groupKey,
+	).Scan(&albumID); err != nil {
+		t.Fatalf("read album id: %v", err)
+	}
+
+	return albumID
+}
+
+func filePathFor(groupKey string, n int) string {
+	return "/music/" + groupKey + "/0" + string(rune('0'+n)) + ".mp3"
+}
+
+func titleFor(n int) string {
+	return "Track " + string(rune('0'+n))
+}
+
+// storeCandidates writes the durable blob GetCandidates would have
+// cached, with `top` as the winning score.
+func storeCandidates(
+	t *testing.T, db *database.DB, groupKey string, tracks int, top float64,
+) {
+	t.Helper()
+
+	aligns := make([]autotag.TrackAlignment, 0, tracks)
+	for i := range tracks {
+		aligns = append(aligns, autotag.TrackAlignment{
+			Status:     autotag.AlignmentMatched,
+			LocalIndex: i,
+		})
+	}
+
+	cands := []autotag.Candidate{
+		{
+			ReleaseMBID:      "rel-1",
+			ReleaseGroupMBID: "rg-1",
+			Title:            "Glass Harbour",
+			ArtistCredit:     "Tideline",
+			TrackCount:       tracks,
+			Alignments:       aligns,
+			Score:            top,
+		},
+		{
+			ReleaseMBID:      "rel-2",
+			ReleaseGroupMBID: "rg-2",
+			Title:            "Something Else",
+			ArtistCredit:     "Another Band",
+			TrackCount:       tracks,
+			Score:            0.40,
+		},
+	}
+
+	blob, err := json.Marshal(cands)
+	if err != nil {
+		t.Fatalf("marshal candidates: %v", err)
+	}
+
+	if _, err := db.ExecContext(
+		`INSERT INTO tagging_candidates (group_key, candidates) VALUES (?, ?)`,
+		groupKey, string(blob),
+	); err != nil {
+		t.Fatalf("insert candidates: %v", err)
+	}
+}
+
+// A confident match is what the album page exists to surface.
+func TestMatchForAlbumSurfacesAConfidentMatch(t *testing.T) {
+	t.Parallel()
+
+	db := database.NewTestDB(t)
+	svc := newTestService(t, db)
+
+	albumID := seedAlbumGroup(t, db, "grp-1", 8, "pending", 0.95)
+	storeCandidates(t, db, "grp-1", 8, 0.95)
+
+	got, err := svc.MatchForAlbum(albumID)
+	if err != nil {
+		t.Fatalf("MatchForAlbum: %v", err)
+	}
+
+	if got == nil {
+		t.Fatal("no match returned for a strong candidate")
+	}
+
+	if got.Recommendation != string(autotag.RecommendationStrong) {
+		t.Errorf("recommendation = %q, want strong", got.Recommendation)
+	}
+
+	// The release named is the release Apply would write — the page
+	// must not offer one album and tag another.
+	if got.ReleaseMBID != "rel-1" || got.Title != "Glass Harbour" {
+		t.Errorf("named %q/%q, want rel-1/Glass Harbour", got.ReleaseMBID, got.Title)
+	}
+
+	if got.GroupCount != 1 {
+		t.Errorf("groupCount = %d, want 1", got.GroupCount)
+	}
+}
+
+// The tier is computed from the candidates, not read off the raw
+// score — a high number the scorer would have capped must not reach
+// the page as confidence it withheld.
+func TestMatchForAlbumDoesNotTrustTheStoredScore(t *testing.T) {
+	t.Parallel()
+
+	db := database.NewTestDB(t)
+	svc := newTestService(t, db)
+
+	// Two tracks: below the evidence floor, so `Recommend` caps this
+	// at medium however well it scores.
+	albumID := seedAlbumGroup(t, db, "grp-2", 2, "pending", 0.99)
+	storeCandidates(t, db, "grp-2", 2, 0.99)
+
+	got, err := svc.MatchForAlbum(albumID)
+	if err != nil {
+		t.Fatalf("MatchForAlbum: %v", err)
+	}
+
+	if got != nil {
+		t.Errorf("surfaced %+v for a two-track folder, want nothing", got)
+	}
+}
+
+// A weak match is not worth interrupting for.
+func TestMatchForAlbumStaysQuietBelowTheTier(t *testing.T) {
+	t.Parallel()
+
+	db := database.NewTestDB(t)
+	svc := newTestService(t, db)
+
+	albumID := seedAlbumGroup(t, db, "grp-3", 8, "pending", 0.60)
+	storeCandidates(t, db, "grp-3", 8, 0.60)
+
+	got, err := svc.MatchForAlbum(albumID)
+	if err != nil {
+		t.Fatalf("MatchForAlbum: %v", err)
+	}
+
+	if got != nil {
+		t.Errorf("surfaced %+v for a 0.60 match, want nothing", got)
+	}
+}
+
+// An album the user has already answered for is not re-offered.
+//
+// `confirmed` covers both a finished apply and an explicit "leave as
+// is", and arguing with the second would be actively wrong.
+func TestMatchForAlbumRespectsAnAnswerAlreadyGiven(t *testing.T) {
+	t.Parallel()
+
+	for _, status := range []string{"confirmed", "skipped", "matched"} {
+		t.Run(status, func(t *testing.T) {
+			t.Parallel()
+
+			db := database.NewTestDB(t)
+			svc := newTestService(t, db)
+
+			albumID := seedAlbumGroup(t, db, "grp-"+status, 8, status, 0.95)
+			storeCandidates(t, db, "grp-"+status, 8, 0.95)
+
+			got, err := svc.MatchForAlbum(albumID)
+			if err != nil {
+				t.Fatalf("MatchForAlbum: %v", err)
+			}
+
+			if got != nil {
+				t.Errorf("surfaced %+v for a %s group, want nothing", got, status)
+			}
+		})
+	}
+}
+
+// A folder nobody has scored yet says nothing, rather than scoring it
+// now: the MusicBrainz limiter is shared with every page the user can
+// open, and this runs on page load.
+func TestMatchForAlbumMakesNoNetworkCallForAnUnscoredFolder(t *testing.T) {
+	t.Parallel()
+
+	db := database.NewTestDB(t)
+	svc := newTestService(t, db)
+
+	// No storeCandidates: the prefetch has not reached this folder.
+	albumID := seedAlbumGroup(t, db, "grp-4", 8, "pending", 0.95)
+
+	got, err := svc.MatchForAlbum(albumID)
+	if err != nil {
+		t.Fatalf("MatchForAlbum: %v", err)
+	}
+
+	if got != nil {
+		t.Errorf("surfaced %+v with no cached candidates, want nothing", got)
+	}
+}
+
+// A multi-disc album is several groups, and the count is what stops
+// the page offering one button that would retag one disc of two.
+func TestMatchForAlbumCountsEveryGroupOfTheAlbum(t *testing.T) {
+	t.Parallel()
+
+	db := database.NewTestDB(t)
+	svc := newTestService(t, db)
+
+	albumID := seedAlbumGroup(t, db, "grp-d1", 8, "pending", 0.95)
+	storeCandidates(t, db, "grp-d1", 8, 0.95)
+
+	// Disc two: same album row, its own folder and tagging group.
+	for i := 1; i <= 6; i++ {
+		database.InsertTestTrack(t, db, database.TestTrack{
+			FilePath:    filePathFor("grp-d2", i),
+			Title:       titleFor(i),
+			Artist:      "Tideline",
+			Album:       "Glass Harbour",
+			AlbumArtist: "Tideline",
+			TrackNumber: int64(i),
+			DiscNumber:  2,
+			LengthMs:    200000,
+			LibraryID:   0,
+			GroupKey:    "grp-d2",
+		})
+	}
+
+	if _, err := db.ExecContext(`
+		INSERT INTO tagging_items
+		    (group_key, library_id, track_count, album_name, album_artist,
+		     disc_number, status, score)
+		VALUES ('grp-d2', 0, 6, 'Glass Harbour', 'Tideline', 2, 'pending', 0.93)
+	`); err != nil {
+		t.Fatalf("insert disc two: %v", err)
+	}
+
+	storeCandidates(t, db, "grp-d2", 6, 0.93)
+
+	got, err := svc.MatchForAlbum(albumID)
+	if err != nil {
+		t.Fatalf("MatchForAlbum: %v", err)
+	}
+
+	if got == nil {
+		t.Fatal("no match returned")
+	}
+
+	if got.GroupCount != 2 {
+		t.Errorf("groupCount = %d, want 2", got.GroupCount)
+	}
+
+	// Best-first: the 0.95 disc is the one described.
+	if got.GroupKey != "grp-d1" {
+		t.Errorf("described %q, want the higher-scoring grp-d1", got.GroupKey)
+	}
+}
+
+// An album with no local files at all — a pure catalog page — is not
+// a question this can answer.
+func TestMatchForAlbumSaysNothingWithoutAnAlbum(t *testing.T) {
+	t.Parallel()
+
+	db := database.NewTestDB(t)
+	svc := newTestService(t, db)
+
+	for _, id := range []int64{0, -1, 4242} {
+		got, err := svc.MatchForAlbum(id)
+		if err != nil {
+			t.Fatalf("MatchForAlbum(%d): %v", id, err)
+		}
+
+		if got != nil {
+			t.Errorf("MatchForAlbum(%d) = %+v, want nil", id, got)
+		}
+	}
+}

backend/config/window.go

@@ -13,13 +13,31 @@ const (
 	// enforces this at runtime; it is also the floor below which a
 	// reported size is treated as bogus and not persisted.
 	//
-	// 800x600 is where the shell was measured to still work, rather
-	// than a round number: below ~780 the header's subtitle wraps and
-	// pushes the title out of the 4em top bar, and below ~600 tall the
-	// eleven sidebar items no longer fit at once.  The previous
-	// 512x384 was aspirational — at 700x480 the sidebar overflowed
-	// behind the player bar with no scroll and Settings and Jobs could
-	// not be reached at all.
+	// **Both reasons this comment used to give have expired**, and the
+	// value is right for a third one.  It said the floor was 800x600
+	// because "below ~780 the header's subtitle wraps and pushes the
+	// title out of the 4em top bar" and "below ~600 tall the eleven
+	// sidebar items no longer fit at once".  Neither mechanism can
+	// happen now: the subtitle is display:none from 899px down
+	// (index.css), and the sidebar host is overflow-y:auto — measured
+	// at 600x460, its scrollHeight is 434 against a 332px client and
+	// Settings is reachable after scrolling.  A floor defended by two
+	// mechanisms that no longer exist is a number nobody can argue
+	// with, which is worse than either answer.
+	//
+	// It stays 800x600 because that is where the *desktop* chrome
+	// stops being comfortable — the Compact band of plan 018's size
+	// matrix (#24) — and not because the app breaks below it.  It does
+	// not: under 600px wide the phone layout takes over (bottom-nav,
+	// no sidebar) and the shell fits 320px exactly, which is what
+	// makes this a comfort floor rather than a correctness one, and
+	// why a very small window reflows instead of becoming a
+	// mini-player (#12 is a second always-on-top window, not a mode of
+	// this one).
+	//
+	// The previous 512x384 was aspirational — at 700x480 the sidebar
+	// overflowed behind the player bar with no scroll and Settings and
+	// Jobs could not be reached at all.
 	MinWidth = 800
 	// MinHeight is the smallest allowed window height in pixels.
 	MinHeight = 600

backend/database/sql/queries/tagging_items.sql

@@ -342,3 +342,35 @@ WHERE ti.status = 'pending'
   )
 ORDER BY ti.group_key
 LIMIT 1;
+
+-- name: GetTaggingItemsForAlbum :many
+-- Every tagging group holding a file of this album.
+--
+-- The join is `audio_files.group_key`, not a key derived from the
+-- album's folder path: a group carved out of a mixed-bag folder by
+-- SplitMixedFolder is keyed on its tags rather than on a directory,
+-- so a path-derived key finds nothing for exactly the messiest
+-- libraries this is meant to help.
+--
+-- Usually one row. A multi-disc album is one group per disc, which
+-- the caller has to know about rather than average over -- applying
+-- to "the album" would silently retag one disc of three.
+SELECT
+  ti.group_key,
+  ti.status,
+  ti.score,
+  ti.best_match_release_mbid,
+  ti.track_count,
+  ti.album_name,
+  ti.album_artist,
+  ti.synthetic
+FROM tagging_items ti
+WHERE ti.group_key IN (
+    SELECT DISTINCT af.group_key
+    FROM audio_files af
+    WHERE af.album_id = sqlc.arg(album_id) AND af.group_key != ''
+  )
+  AND ti.cleared_at IS NULL
+-- Best first, with an unscored group last rather than first: NULL
+-- sorts low in SQLite and DESC would put it at the top.
+ORDER BY ti.score IS NULL, ti.score DESC, ti.group_key;

backend/database/sql/sqlcgen/tagging_items.sql.go

@@ -231,6 +231,82 @@ func (q *Queries) GetTaggingItem(ctx context.Context, groupKey string) (TaggingI
 	return i, err
 }
 
+const getTaggingItemsForAlbum = `-- name: GetTaggingItemsForAlbum :many
+SELECT
+  ti.group_key,
+  ti.status,
+  ti.score,
+  ti.best_match_release_mbid,
+  ti.track_count,
+  ti.album_name,
+  ti.album_artist,
+  ti.synthetic
+FROM tagging_items ti
+WHERE ti.group_key IN (
+    SELECT DISTINCT af.group_key
+    FROM audio_files af
+    WHERE af.album_id = ?1 AND af.group_key != ''
+  )
+  AND ti.cleared_at IS NULL
+ORDER BY ti.score IS NULL, ti.score DESC, ti.group_key
+`
+
+type GetTaggingItemsForAlbumRow struct {
+	GroupKey             string
+	Status               string
+	Score                sql.NullFloat64
+	BestMatchReleaseMbid sql.NullString
+	TrackCount           int64
+	AlbumName            string
+	AlbumArtist          string
+	Synthetic            int64
+}
+
+// Every tagging group holding a file of this album.
+//
+// The join is `audio_files.group_key`, not a key derived from the
+// album's folder path: a group carved out of a mixed-bag folder by
+// SplitMixedFolder is keyed on its tags rather than on a directory,
+// so a path-derived key finds nothing for exactly the messiest
+// libraries this is meant to help.
+//
+// Usually one row. A multi-disc album is one group per disc, which
+// the caller has to know about rather than average over -- applying
+// to "the album" would silently retag one disc of three.
+// Best first, with an unscored group last rather than first: NULL
+// sorts low in SQLite and DESC would put it at the top.
+func (q *Queries) GetTaggingItemsForAlbum(ctx context.Context, albumID sql.NullInt64) ([]GetTaggingItemsForAlbumRow, error) {
+	rows, err := q.db.QueryContext(ctx, getTaggingItemsForAlbum, albumID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []GetTaggingItemsForAlbumRow
+	for rows.Next() {
+		var i GetTaggingItemsForAlbumRow
+		if err := rows.Scan(
+			&i.GroupKey,
+			&i.Status,
+			&i.Score,
+			&i.BestMatchReleaseMbid,
+			&i.TrackCount,
+			&i.AlbumName,
+			&i.AlbumArtist,
+			&i.Synthetic,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
 const listAudioFilesInTaggingGroup = `-- name: ListAudioFilesInTaggingGroup :many
 SELECT
   af.id,

backend/player/buffered_stall_test.go

@@ -0,0 +1,188 @@
+package player
+
+import (
+	"errors"
+	"testing"
+	"time"
+
+	"github.com/gopxl/beep/v2"
+)
+
+// errTestDecode stands in for a decoder blowing up mid-track.
+var errTestDecode = errors.New("decode blew up")
+
+// stalledStreamer never produces a sample and never reports
+// end-of-stream: (0, true), forever. A damaged file that decodes to
+// nothing looks like this, and so does any source whose producer has
+// quietly stopped.
+type stalledStreamer struct{}
+
+func (stalledStreamer) Stream(_ [][2]float64) (int, bool) { return 0, true }
+func (stalledStreamer) Err() error                        { return nil }
+
+// failingStreamer produces n good samples and then fails, which is
+// what a decode error mid-track looks like: the same (0, false) a
+// finished track returns, distinguishable only by Err.
+type failingStreamer struct {
+	remaining int
+	err       error
+}
+
+func (f *failingStreamer) Stream(samples [][2]float64) (int, bool) {
+	if f.remaining <= 0 {
+		return 0, false
+	}
+
+	n := min(len(samples), f.remaining)
+
+	for i := range n {
+		samples[i] = [2]float64{1, 1}
+	}
+
+	f.remaining -= n
+
+	return n, true
+}
+
+func (f *failingStreamer) Err() error { return f.err }
+
+// drainUntilEnd calls Stream until it reports end-of-stream, or gives
+// up. It returns whether the stream ended.
+//
+// The give-up bound is wall clock rather than a call count: the stall
+// budget is a duration, so a tight loop has to actually wait it out.
+func drainUntilEnd(bs *BufferedStreamer, within time.Duration) bool {
+	buf := make([][2]float64, 512)
+	deadline := time.Now().Add(within)
+
+	for time.Now().Before(deadline) {
+		if _, ok := bs.Stream(buf); !ok {
+			return true
+		}
+
+		time.Sleep(time.Millisecond)
+	}
+
+	return false
+}
+
+// A source that stops producing without ever ending is the fault this
+// whole file exists for: Stream used to answer with silence and ok
+// forever, so the chain never ended, the player stayed in Playing
+// with the button showing pause, and the decoder's position never
+// moved -- a frozen seek bar over a track that was not playing.
+func TestAStalledSourceEndsTheStream(t *testing.T) {
+	bs := NewBufferedStreamer(stalledStreamer{}, 2048)
+	defer bs.Close()
+
+	if !drainUntilEnd(bs, maxStarvedDuration+2*time.Second) {
+		t.Fatal(
+			"a stalled source never ended the stream: the player " +
+				"would sit in Playing with a frozen position",
+		)
+	}
+
+	if !errors.Is(bs.Err(), errSourceStalled) {
+		t.Fatalf(
+			"expected the stall to be reported, got %v", bs.Err(),
+		)
+	}
+}
+
+// Close is the other exit that used to leave `done` false, with the
+// same consequence: the ring drains and every call after it is
+// silence that claims to be audio.
+func TestClosingEndsTheStream(t *testing.T) {
+	bs := NewBufferedStreamer(finiteStreamer(1<<20), 2048)
+
+	// Let the read-ahead fill something, so this exercises the drain
+	// after Close rather than a buffer that was empty anyway.
+	time.Sleep(20 * time.Millisecond)
+	bs.Close()
+
+	if !drainUntilEnd(bs, 2*time.Second) {
+		t.Fatal("a closed streamer never reported end-of-stream")
+	}
+}
+
+// A source that fails is not a source that finished, and only Err
+// tells them apart. Before this, the player reported a mid-track
+// decode failure to the queue as a natural end, so the queue
+// auto-advanced in silence and counted the broken track as played.
+func TestAFailedSourceReportsItsError(t *testing.T) {
+	src := &failingStreamer{remaining: 4096, err: errTestDecode}
+
+	bs := NewBufferedStreamer(src, 2048)
+	defer bs.Close()
+
+	if !drainUntilEnd(bs, 2*time.Second) {
+		t.Fatal("a failing source never reported end-of-stream")
+	}
+
+	if !errors.Is(bs.Err(), errTestDecode) {
+		t.Fatalf(
+			"expected the source's error to survive, got %v",
+			bs.Err(),
+		)
+	}
+}
+
+// The ordinary case has to keep working: a source that ends cleanly
+// ends with no error, or every finished track would be reported as a
+// failure and skipped.
+func TestADrainedSourceReportsNoError(t *testing.T) {
+	bs := NewBufferedStreamer(finiteStreamer(4096), 2048)
+	defer bs.Close()
+
+	if !drainUntilEnd(bs, 2*time.Second) {
+		t.Fatal("a finite source never reported end-of-stream")
+	}
+
+	if bs.Err() != nil {
+		t.Fatalf(
+			"a track that finished normally reported %v", bs.Err(),
+		)
+	}
+}
+
+// A slow source is exactly what the read-ahead exists to absorb, so
+// underruns must not be charged cumulatively -- otherwise a file on a
+// slow disk ends itself partway through.
+func TestUnderrunsDoNotAccumulateAcrossASlowSource(t *testing.T) {
+	const total = 8192
+
+	src := &slowStreamer{
+		inner: finiteStreamer(total),
+		delay: 2 * time.Millisecond,
+	}
+
+	bs := NewBufferedStreamer(src, 1024)
+	defer bs.Close()
+
+	buf := make([][2]float64, 256)
+	got := 0
+
+	for {
+		n, ok := bs.Stream(buf)
+		if !ok {
+			break
+		}
+
+		for i := range n {
+			if buf[i][0] != 0 {
+				got++
+			}
+		}
+	}
+
+	if got != total {
+		t.Fatalf(
+			"a slow but healthy source was cut short: got %d of %d "+
+				"samples",
+			got, total,
+		)
+	}
+}
+
+// beep.Streamer is what the player wraps; keep the type honest.
+var _ beep.Streamer = (*BufferedStreamer)(nil)

backend/player/buffered_streamer.go

@@ -1,6 +1,7 @@
 package player
 
 import (
+	"errors"
 	"sync"
 	"time"
 
@@ -34,8 +35,45 @@ type BufferedStreamer struct {
 	done    bool
 	err     error
 	closed  chan struct{}
+
+	// starved counts consecutive Stream calls served with silence
+	// because the ring was empty, and starvedSince is when that run
+	// began.  An underrun is legitimate for a moment -- that is what
+	// the read-ahead exists to absorb -- but it is not legitimate
+	// forever, and "forever" is indistinguishable from healthy
+	// playback everywhere above this type: the chain never ends, so
+	// the player stays in Playing with the button showing pause, and
+	// the decoder's position never moves, so the 1 Hz report pins the
+	// seek bar and suppresses its interpolation.
+	starved      int
+	starvedSince time.Time
 }
 
+// The silence fill is bounded by both a duration and a run of calls,
+// and it needs both.
+//
+// Duration alone is the real measure -- the speaker paces itself, so
+// wall clock is what says whether the source has actually stopped --
+// but a caller draining in a tight loop (a test, a decode-to-buffer)
+// makes hundreds of calls in microseconds and would trip nothing.
+// A call count alone is the opposite failure: the same tight loop
+// spends the whole budget before the read-ahead goroutine has been
+// scheduled once, and ends a perfectly good stream at sample zero.
+//
+// The duration is longer than the 2 s read-ahead it is there to
+// outlast, and the count is short enough that the speaker (~200 ms a
+// call) reaches it well inside that.
+const (
+	maxStarvedDuration = 3 * time.Second
+	minStarvedCalls    = 8
+)
+
+// errSourceStalled is returned by Err when the source stopped
+// producing samples without ever reporting end-of-stream.
+var errSourceStalled = errors.New(
+	"audio source stopped producing samples",
+)
+
 // NewBufferedStreamer creates a BufferedStreamer that pre-fills
 // bufferSize samples from source via a background goroutine.
 // A typical bufferSize is 2× the sample rate (~2 seconds of audio).
@@ -54,8 +92,24 @@ func NewBufferedStreamer(
 	return bs
 }
 
+// finish marks the stream ended, recording err as the reason when
+// there is one.  Every exit from readAhead goes through it: an exit
+// that leaves done false strands Stream in its underrun branch,
+// where it returns silence and ok forever.
+func (bs *BufferedStreamer) finish(err error) {
+	bs.mu.Lock()
+	defer bs.mu.Unlock()
+
+	bs.done = true
+
+	if err != nil && bs.err == nil {
+		bs.err = err
+	}
+}
+
 // readAhead continuously reads from the source into the ring buffer
 // until the source is drained, an error occurs, or Close is called.
+// It always marks the stream done on the way out.
 func (bs *BufferedStreamer) readAhead() {
 	// Temporary buffer for reading from source outside the lock.
 	// 512 samples per chunk keeps the critical section short.
@@ -63,6 +117,13 @@ func (bs *BufferedStreamer) readAhead() {
 
 	tmp := make([][2]float64, chunkSize)
 
+	// Every exit marks the stream done.  An exit that does not is what
+	// stranded Stream in its underrun branch, returning silence and ok
+	// for the rest of the process's life.
+	var exitErr error
+
+	defer func() { bs.finish(exitErr) }()
+
 	for {
 		// Check if closed.
 		select {
@@ -72,6 +133,15 @@ func (bs *BufferedStreamer) readAhead() {
 		}
 
 		bs.mu.Lock()
+
+		// Stream gave up waiting for us.  Nothing downstream is
+		// listening any more, so filling the ring is work for nobody.
+		if bs.done {
+			bs.mu.Unlock()
+
+			return
+		}
+
 		space := len(bs.ring) - bs.count
 
 		if space == 0 {
@@ -115,14 +185,12 @@ func (bs *BufferedStreamer) readAhead() {
 		}
 
 		if !ok {
-			bs.mu.Lock()
-			bs.done = true
-
-			if srcErr := bs.source.Err(); srcErr != nil {
-				bs.err = srcErr
-			}
-
-			bs.mu.Unlock()
+			// A drained source and a failed one both land here and are
+			// not the same event: one is a track that ended, the other
+			// is a track that broke.  Err is what tells them apart, and
+			// it is why the player must ask before treating this as a
+			// natural finish.
+			exitErr = bs.source.Err()
 
 			return
 		}
@@ -154,7 +222,27 @@ func (bs *BufferedStreamer) Stream(
 	}
 
 	if bs.count == 0 {
-		// Buffer temporarily empty — fill with silence.
+		// The read-ahead has not caught up.  Silence buys it time --
+		// but only for a bounded stretch, because "forever" is
+		// reported upward as healthy playback and there is no watchdog
+		// above this to notice otherwise.
+		bs.starved++
+
+		if bs.starvedSince.IsZero() {
+			bs.starvedSince = time.Now()
+		}
+
+		if bs.starved >= minStarvedCalls &&
+			time.Since(bs.starvedSince) > maxStarvedDuration {
+			bs.done = true
+
+			if bs.err == nil {
+				bs.err = errSourceStalled
+			}
+
+			return 0, false
+		}
+
 		for i := range samples {
 			samples[i] = [2]float64{}
 		}
@@ -162,6 +250,9 @@ func (bs *BufferedStreamer) Stream(
 		return len(samples), true
 	}
 
+	// Samples arrived, so whatever the stall was, it is over.
+	bs.resetStarvationLocked()
+
 	// Copy available samples from ring buffer.
 	n := len(samples)
 	if n > bs.count {
@@ -197,6 +288,19 @@ func (bs *BufferedStreamer) Flush() {
 	bs.readPos = 0
 	bs.writPos = 0
 	bs.count = 0
+
+	// A seek empties the ring on purpose, and the refill that follows
+	// is exactly the stall the budget exists to tolerate.  Charging it
+	// against a budget the previous underrun already spent would end
+	// the track on a seek near the end of a slow file.
+	bs.resetStarvationLocked()
+}
+
+// resetStarvationLocked forgets an underrun run.  Must be called with
+// bs.mu held.
+func (bs *BufferedStreamer) resetStarvationLocked() {
+	bs.starved = 0
+	bs.starvedSince = time.Time{}
 }
 
 // LockSource blocks the read-ahead goroutine from touching the

backend/player/loadstate_test.go

@@ -0,0 +1,213 @@
+package player
+
+import (
+	"log/slog"
+	"testing"
+	"time"
+
+	"github.com/wailsapp/wails/v3/pkg/application"
+
+	"yellowjacket/backend/events"
+	"yellowjacket/internal/testfixtures"
+)
+
+// fixtureSampleRate is what cmd/gentestdata writes (audio.go).  It is
+// deliberately not the speaker rate, which is what lets these tests
+// tell the decoder's format from the player's default.
+const fixtureSampleRate = 22050
+
+// newTestPlayer is a player with a context and no database, so the
+// track-metadata lookup cannot succeed.
+func newTestPlayer(t *testing.T) *Player {
+	t.Helper()
+
+	p := NewPlayer(slog.Default(), nil)
+	rec := events.NewRecorder()
+
+	_ = p.ServiceStartup(
+		events.WithSink(t.Context(), rec),
+		application.ServiceOptions{},
+	)
+
+	return p
+}
+
+// loadFileLocked needs no speaker: it decodes, builds the chain and
+// registers it paused. speaker.Play on an uninitialised device is
+// what the integration guard elsewhere is about, so these assert on
+// the state the load computed rather than on playback.
+
+// p.format used to be assigned once, in the constructor, to the
+// *speaker's* rate -- so it claimed 44.1 kHz for every file ever
+// loaded. Play()'s replay-after-finish path resamples from it, so a
+// finished track played again was resampled from a rate the decoder
+// never produced: audibly the wrong speed and pitch, and wrong
+// length and position arithmetic with it.
+//
+// The fixtures are 22050 Hz, which is exactly the point -- any of
+// them disagrees with the speaker rate.
+func TestLoadRecordsTheDecodersOwnFormat(t *testing.T) {
+	m := testfixtures.Load(t)
+	path := m.Case(t, testfixtures.CaseCoverDedup)[0]
+
+	p := newTestPlayer(t)
+
+	if got := p.format.SampleRate; got != speakerSampleRate {
+		t.Fatalf(
+			"precondition: a fresh player should hold the speaker "+
+				"rate, got %d",
+			got,
+		)
+	}
+
+	if err := p.LoadFile(path); err != nil {
+		t.Fatalf("LoadFile(%s): %v", path, err)
+	}
+
+	if p.format.SampleRate == speakerSampleRate {
+		t.Fatalf(
+			"p.format still holds the speaker rate (%d) after "+
+				"loading a %d Hz file: the replay path would "+
+				"resample from the wrong rate",
+			speakerSampleRate, fixtureSampleRate,
+		)
+	}
+
+	if got := int(p.format.SampleRate); got != fixtureSampleRate {
+		t.Errorf(
+			"expected the decoder's rate %d, got %d",
+			fixtureSampleRate, got,
+		)
+	}
+}
+
+// trackLengthMs is written only when the database has a row for the
+// file and cleared only by UnloadTrack, so a track with no row used
+// to inherit whatever the last track's duration was -- and every
+// position report is scaled by it, so the whole seek bar was then
+// reporting one track's progress on another track's scale.
+//
+// There is no database here, so the lookup cannot succeed: exactly
+// the case that used to inherit.
+func TestLoadDoesNotInheritThePreviousTracksDuration(t *testing.T) {
+	m := testfixtures.Load(t)
+	path := m.Case(t, testfixtures.CaseCoverDedup)[0]
+
+	p := newTestPlayer(t)
+
+	// Stand in for a previous track whose duration was resolved.
+	p.trackLengthMs = 9_999_000
+
+	if err := p.LoadFile(path); err != nil {
+		t.Fatalf("LoadFile(%s): %v", path, err)
+	}
+
+	if p.trackLengthMs == 9_999_000 {
+		t.Fatal(
+			"the previous track's duration survived the load: every " +
+				"position report for this track would be scaled by it",
+		)
+	}
+}
+
+// A new chain supersedes the old one's pending finished callback.
+// Without this, a callback that queued for p.mu behind a LoadFile
+// woke up and rewound, stopped and auto-advanced the *new* track.
+func TestANewChainSupersedesTheOldFinishedCallback(t *testing.T) {
+	m := testfixtures.Load(t)
+	paths := m.Case(t, testfixtures.CaseCoverDedup)
+
+	if len(paths) < 2 {
+		t.Skip("need two fixture tracks")
+	}
+
+	p := newTestPlayer(t)
+
+	if err := p.LoadFile(paths[0]); err != nil {
+		t.Fatalf("LoadFile(%s): %v", paths[0], err)
+	}
+
+	stale := p.chainID
+
+	if err := p.LoadFile(paths[1]); err != nil {
+		t.Fatalf("LoadFile(%s): %v", paths[1], err)
+	}
+
+	if p.chainID == stale {
+		t.Fatal("loading a second file did not supersede the chain")
+	}
+
+	called := false
+
+	p.SetPlaybackFinishedHandler(func(error) { called = true })
+
+	// The first track's callback, arriving late.
+	p.onPlaybackFinished(stale, nil)
+
+	if called {
+		t.Error(
+			"a superseded chain's callback drove auto-advance: the " +
+				"track that is loaded now would be skipped",
+		)
+	}
+
+	if p.state == Stopped {
+		t.Error(
+			"a superseded chain's callback stopped the current track",
+		)
+	}
+}
+
+// The decoder is read by the read-ahead goroutine and by every
+// position emit, and those used to be guarded by different mutexes:
+// the read by srcMu, the position by the speaker lock, which
+// read-ahead never takes. Under -race this failed on the emit that
+// LoadFile itself makes.
+//
+// It needs the read-ahead goroutine to actually be running, so it
+// keeps asking for the position for long enough to overlap it.
+func TestPositionReadsDoNotRaceTheReadAhead(t *testing.T) {
+	m := testfixtures.Load(t)
+	path := m.Case(t, testfixtures.CaseFLACAlbum)[0]
+
+	p := newTestPlayer(t)
+
+	if err := p.LoadFile(path); err != nil {
+		t.Fatalf("LoadFile(%s): %v", path, err)
+	}
+
+	for range 200 {
+		if _, err := p.CurrentPositionSeconds(); err != nil {
+			t.Fatalf("CurrentPositionSeconds: %v", err)
+		}
+	}
+}
+
+// Seeking emits the landing position, and that emit reads the
+// decoder -- so the source lock the seek holds must be released
+// before it. A reentrant take here is a deadlock, not a failure,
+// which is why this test exists rather than a comment.
+func TestSeekEmitsWithoutDeadlocking(t *testing.T) {
+	m := testfixtures.Load(t)
+	path := m.Case(t, testfixtures.CaseFLACAlbum)[0]
+
+	p := newTestPlayer(t)
+
+	if err := p.LoadFile(path); err != nil {
+		t.Fatalf("LoadFile(%s): %v", path, err)
+	}
+
+	done := make(chan struct{})
+
+	go func() {
+		defer close(done)
+
+		_ = p.Seek(1)
+	}()
+
+	select {
+	case <-done:
+	case <-time.After(10 * time.Second):
+		t.Fatal("Seek deadlocked: the position emit re-took the source lock")
+	}
+}

backend/player/player.go

@@ -52,9 +52,17 @@ type Player struct {
 	control                 *beep.Ctrl
 	volume                  *effects.Volume
 	speakerStreamer         beep.Streamer
-	playbackFinishedHandler func()
+	playbackFinishedHandler func(error)
 	trackChangeID           uint64
-	mediaControls           mediacontrols.Handler
+
+	// chainID identifies the streamer chain currently registered with
+	// the speaker.  updateStreamers bumps it, and the finished
+	// callback carries the value it was registered with, so a callback
+	// that queued for p.mu behind a LoadFile can tell that the player
+	// has moved on and return rather than rewinding somebody else's
+	// track.
+	chainID       uint64
+	mediaControls mediacontrols.Handler
 
 	// duckAmount is the attenuation currently applied on top of the
 	// user's volume, in the same base-2 exponent effects.Volume uses.
@@ -180,11 +188,18 @@ func (p *Player) InitSpeaker() error {
 }
 
 // SetPlaybackFinishedHandler sets a callback invoked when a track
-// finishes naturally. This allows the queue to drive auto-advance
+// stops streaming. This allows the queue to drive auto-advance
 // without circular imports.
 //
+// The error says *why* the track stopped: nil for a track that
+// reached its end, non-nil for one that broke partway through.  Both
+// arrive here because both look identical to the speaker, and only
+// the queue holds the metadata a PlaybackFailed needs -- but they are
+// not the same event, and reporting a decode failure as a natural
+// finish is how a broken file used to auto-advance in silence.
+//
 //wails:ignore // internal wiring, not part of the app's IPC surface.
-func (p *Player) SetPlaybackFinishedHandler(handler func()) {
+func (p *Player) SetPlaybackFinishedHandler(handler func(error)) {
 	p.mu.Lock()
 	defer p.mu.Unlock()
 
@@ -424,6 +439,19 @@ func (p *Player) updateStreamers(
 	newBaseStreamer beep.StreamSeeker,
 	sr beep.SampleRate,
 ) error {
+	// A new chain supersedes the old one, so any finished callback the
+	// old one still owes is stale from here on.
+	p.chainID++
+
+	// The previous read-ahead goroutine reads the same decoder this
+	// one is about to, under its own srcMu -- two goroutines, two
+	// mutexes, one decoder that is not safe for concurrent use.  The
+	// replay-after-finish path rebuilds from p.seeker without going
+	// through LoadFile, which is where that pair could meet.
+	if p.buffered != nil {
+		p.buffered.Close()
+	}
+
 	// set base streamer
 	p.baseStreamer = newBaseStreamer
 	p.seeker = newBaseStreamer
@@ -474,23 +502,57 @@ func (p *Player) startPaused() {
 	p.control.Paused = true
 	speaker.Unlock()
 
+	// Captured, not read at callback time: by then p.chainID names
+	// whatever is loaded *now*, which is the thing the guard exists to
+	// distinguish this chain from.
+	chainID := p.chainID
+	buffered := p.buffered
+
 	// The beep.Callback runs with the speaker mutex held, so we
 	// dispatch to a goroutine that can safely acquire p.mu.
 	speaker.Play(beep.Seq(
 		p.speakerStreamer,
 		beep.Callback(func() {
-			go p.onPlaybackFinished()
+			// Asked here rather than under p.mu: this is the chain that
+			// just ended, and by the time the goroutine holds the lock
+			// p.buffered may be a different one.
+			var err error
+			if buffered != nil {
+				err = buffered.Err()
+			}
+
+			go p.onPlaybackFinished(chainID, err)
 		}),
 	))
 
 	p.state = Paused
 }
 
-// onPlaybackFinished handles the natural end of a track. It is
-// called on a new goroutine from the beep callback (which holds
-// the speaker lock) so that it can safely acquire p.mu.
-func (p *Player) onPlaybackFinished() {
+// onPlaybackFinished handles a track that stopped streaming, whether
+// it ended or broke. It is called on a new goroutine from the beep
+// callback (which holds the speaker lock) so that it can safely
+// acquire p.mu.
+//
+// chainID names the streamer chain the callback fired for and srcErr
+// says why it stopped.
+func (p *Player) onPlaybackFinished(chainID uint64, srcErr error) {
 	p.mu.Lock()
+
+	// The player has moved on while this callback queued for the lock
+	// -- a user pressing Next during the last second of a track is
+	// enough. Everything below is about the *current* track: rewinding
+	// the decoder, saying playback stopped, asking the queue to
+	// advance. Doing any of it now would do it to the wrong track.
+	if chainID != p.chainID {
+		p.mu.Unlock()
+		p.logger.Debug(
+			"Ignoring finished callback for a superseded chain",
+			"chain", chainID, "current", p.chainID,
+		)
+
+		return
+	}
+
 	p.state = Stopped
 	handler := p.playbackFinishedHandler
 	mc := p.mediaControls
@@ -501,10 +563,11 @@ func (p *Player) onPlaybackFinished() {
 	// the Stopped state anyway, so this only moves the decoder.
 	p.rewindLocked()
 	p.emitPositionLocked()
-	p.mu.Unlock()
 
-	// Emit Wails events outside the lock — these are non-blocking
-	// calls that don't need player state.
+	// Emitted under p.mu, like every other transition in this file.
+	// Outside it, a Play() taking the lock in the gap emits `playing`
+	// first and this stale `stopped` lands last -- leaving the button
+	// showing play over a track that is audibly running.
 	p.emitPlaybackFinished()
 
 	events.Emit(
@@ -513,6 +576,8 @@ func (p *Player) onPlaybackFinished() {
 		map[string]string{"state": string(Stopped)},
 	)
 
+	p.mu.Unlock()
+
 	// Notify media controls outside the lock. The track just
 	// ended so position is 0.
 	if mc != nil {
@@ -521,12 +586,19 @@ func (p *Player) onPlaybackFinished() {
 		)
 	}
 
-	p.logger.Info("Playback finished naturally")
+	if srcErr != nil {
+		p.logger.Error(
+			"Playback stopped: the audio source failed",
+			"err", srcErr,
+		)
+	} else {
+		p.logger.Info("Playback finished naturally")
+	}
 
 	// Notify queue for auto-advance. Called without p.mu held
 	// because it re-enters the player via LoadFile/Play.
 	if handler != nil {
-		handler()
+		handler(srcErr)
 	}
 }
 
@@ -587,6 +659,18 @@ func (p *Player) loadFileLocked(filePath string) error {
 
 	p.currentFile = f
 
+	// The decoder's own format, kept for the paths that rebuild the
+	// chain later: Play()'s replay branch resamples from it, so a
+	// stale rate there plays a finished track back at the wrong speed.
+	p.format = format
+
+	// The previous track's duration must not outlive it.  This is set
+	// again by emitTrackChanged below, but only when the database has
+	// a row for the file -- and every position this player reports is
+	// scaled by it, so inheriting means every report is wrong by the
+	// ratio between two unrelated tracks.
+	p.trackLengthMs = 0
+
 	if err := p.updateStreamers(
 		streamer, format.SampleRate,
 	); err != nil {
@@ -906,6 +990,8 @@ func (p *Player) CurrentPosition() (int, error) {
 		return 0, errNoAudioFileLoaded
 	}
 
+	defer p.lockSourceLocked()()
+
 	speaker.Lock()
 	pos := math.Round(
 		100.0 * float64(p.seeker.Position()) /
@@ -924,6 +1010,28 @@ func (p *Player) Seek(targetSeconds int) error {
 	return p.seekLocked(targetSeconds)
 }
 
+// lockSourceLocked blocks the read-ahead goroutine from touching the
+// decoder and returns the function that releases it, so a caller can
+// `defer p.lockSourceLocked()()`.
+//
+// Reading the decoder's position is a read *of the decoder*, and the
+// speaker lock does not exclude the read-ahead goroutine -- it never
+// takes it.  That was a genuine data race on every position emit,
+// once a second for the whole of playback.
+//
+// srcMu is not reentrant, so nothing that already holds it may call
+// this; seekSourceLocked exists to keep that region free of emits.
+// Must be called with p.mu held.
+func (p *Player) lockSourceLocked() func() {
+	if p.buffered == nil {
+		return func() {}
+	}
+
+	p.buffered.LockSource()
+
+	return p.buffered.UnlockSource
+}
+
 // rewindLocked returns the decoder to the start of the track without
 // touching playback state.  Must be called with p.mu held.
 func (p *Player) rewindLocked() {
@@ -959,6 +1067,46 @@ func (p *Player) seekLocked(targetSeconds int) error {
 		return fmt.Errorf("cannot get track length: %w", err)
 	}
 
+	// The source lock is released before anything below is emitted:
+	// emitPositionLocked reads the decoder's position and takes the
+	// same lock, which is not reentrant.
+	seekErr := p.seekSourceLocked(targetSeconds, lengthSecs)
+	if seekErr != nil {
+		p.logger.Warn(
+			"Seek failed, playback will start from "+
+				"the beginning",
+			"target-seconds", targetSeconds,
+			"err", seekErr,
+		)
+
+		// The optimistic move the UI already made has to be taken
+		// back, and only the backend knows it did not happen.
+		events.Emit(p.ctx, events.SeekFailed)
+		p.emitPositionLocked()
+
+		return fmt.Errorf("failed to seek: %w", seekErr)
+	}
+
+	if p.mediaControls != nil {
+		p.mediaControls.NotifySeek(targetSeconds)
+	}
+
+	// Report the landing position immediately rather than leaving the
+	// UI to guess until the next tick — this is the half of H-3 that
+	// desynced the seek bar by 30 s over four keyboard seeks.
+	p.emitPositionLocked()
+
+	return nil
+}
+
+// seekSourceLocked moves the decoder and flushes the stale read-ahead
+// behind it.  It owns the source lock for exactly that long and
+// emits nothing, so its caller is free to read the position
+// afterwards.  Must be called with p.mu held.
+func (p *Player) seekSourceLocked(
+	targetSeconds int,
+	lengthSecs int,
+) error {
 	// Block the read-ahead goroutine from reading the source while
 	// we seek it. The decoder (e.g. FLAC's bufseekio.ReadSeeker) is
 	// not safe for concurrent Read+Seek, and read-ahead runs on its
@@ -1014,19 +1162,11 @@ func (p *Player) seekLocked(targetSeconds int) error {
 	if seekErr != nil {
 		speaker.Unlock()
 
-		p.logger.Warn(
-			"Seek failed, playback will start from "+
-				"the beginning",
-			"target-seconds", targetSeconds,
-			"samples", samples,
-			"err", seekErr,
+		p.logger.Debug(
+			"seek rejected by the decoder",
+			"samples", samples, "err", seekErr,
 		)
 
-		// The optimistic move the UI already made has to be taken
-		// back, and only the backend knows it did not happen.
-		events.Emit(p.ctx, events.SeekFailed)
-		p.emitPositionLocked()
-
 		return fmt.Errorf("failed to seek: %w", seekErr)
 	}
 
@@ -1039,15 +1179,6 @@ func (p *Player) seekLocked(targetSeconds int) error {
 		p.buffered.Flush()
 	}
 
-	if p.mediaControls != nil {
-		p.mediaControls.NotifySeek(targetSeconds)
-	}
-
-	// Report the landing position immediately rather than leaving the
-	// UI to guess until the next tick — this is the half of H-3 that
-	// desynced the seek bar by 30 s over four keyboard seeks.
-	p.emitPositionLocked()
-
 	return nil
 }
 
@@ -1140,6 +1271,10 @@ func (p *Player) seekerLengthSecsLocked() (int, error) {
 		return 0, errNoAudioFileLoaded
 	}
 
+	// Len is fixed for the life of the decoder, so unlike Position it
+	// races with nothing and needs no source lock -- which it must not
+	// take anyway: displayPositionSecsLocked calls this while holding
+	// it, and srcMu is not reentrant.
 	speaker.Lock()
 	length := p.seeker.Len() / int(p.format.SampleRate)
 	speaker.Unlock()
@@ -1156,6 +1291,8 @@ func (p *Player) displayPositionSecsLocked() int {
 		return 0
 	}
 
+	defer p.lockSourceLocked()()
+
 	speaker.Lock()
 	pos := p.seeker.Position()
 	total := p.seeker.Len()

backend/queue/fallback_test.go

@@ -83,7 +83,7 @@ func TestFallback_TriggersOnNaturalFinish(t *testing.T) {
 	q.SetFallbackSource(fake)
 
 	q.SetQueue(seedPaths, 0, false, Source{Type: "album", ID: 1, Label: "Seed Album"})
-	q.OnPlaybackFinished()
+	q.OnPlaybackFinished(nil)
 
 	waitUntil(t, func() bool { return fake.callCount() == 1 }, "fallback to be resolved")
 	waitUntil(t, func() bool {
@@ -159,7 +159,7 @@ func TestFallback_EmptyResultLeavesQueueExhausted(t *testing.T) {
 	q.SetFallbackSource(fake)
 
 	q.SetQueue(seedPaths, 0, false, Source{})
-	q.OnPlaybackFinished()
+	q.OnPlaybackFinished(nil)
 
 	waitUntil(t, func() bool { return fake.callCount() == 1 }, "fallback to be resolved")
 
@@ -193,7 +193,7 @@ func TestFallback_StaleResolutionDiscarded(t *testing.T) {
 	q.SetFallbackSource(fake)
 
 	q.SetQueue(seedPaths, 0, false, Source{})
-	q.OnPlaybackFinished() // starts resolving, blocked on gate
+	q.OnPlaybackFinished(nil) // starts resolving, blocked on gate
 
 	time.Sleep(20 * time.Millisecond) // let the goroutine reach the gate
 

backend/queue/finished_test.go

@@ -0,0 +1,78 @@
+package queue
+
+import (
+	"errors"
+	"testing"
+
+	"yellowjacket/backend/events"
+)
+
+// errTestDecode stands in for a decoder blowing up mid-track.
+var errTestDecode = errors.New("decode blew up")
+
+// currentIndex == -1 against a non-empty queue is a state this
+// package produces on purpose: onQueueExhausted(false) sets it and
+// deliberately leaves the finished track loaded in the player, so it
+// stays on the now-playing bar. Pressing play from there and letting
+// it finish re-enters OnPlaybackFinished with exactly that pair --
+// which used to index q.tracks[-1] and panic, on a goroutine
+// dispatched from the audio callback with no caller to recover it.
+func TestFinishedWithNoCurrentTrackDoesNotPanic(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name  string
+		index int
+	}{
+		{"exhausted queue leaves -1", -1},
+		{"index past the end", 3},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			t.Parallel()
+
+			q, _, _ := setupRecordedQueue(t)
+			q.tracks = []Track{
+				{FilePath: "/a.mp3"},
+				{FilePath: "/b.mp3"},
+			}
+			q.currentIndex = tt.index
+
+			// The assertion is that this returns at all.
+			q.OnPlaybackFinished(nil)
+
+			if q.currentIndex != tt.index {
+				t.Errorf(
+					"an out-of-range index was acted on: %d became %d",
+					tt.index, q.currentIndex,
+				)
+			}
+		})
+	}
+}
+
+// A track that broke mid-playback is not a track that was listened
+// to. The player cannot say so itself -- the metadata is here -- so
+// it hands the reason over and this is where it becomes a
+// PlaybackFailed rather than a silent auto-advance.
+func TestAFailedTrackIsReportedAndNotCountedAsAPlay(t *testing.T) {
+	t.Parallel()
+
+	q, _, rec := setupRecordedQueue(t)
+	q.tracks = []Track{
+		{FilePath: "/a.mp3", Title: "A", AudioFileID: 1},
+		{FilePath: "/b.mp3", Title: "B", AudioFileID: 2},
+	}
+	q.currentIndex = 0
+
+	q.OnPlaybackFinished(errTestDecode)
+
+	if _, ok := rec.Last(events.PlaybackFailed); !ok {
+		t.Errorf(
+			"a track that failed mid-playback told the user nothing; "+
+				"got %v",
+			rec.Names(),
+		)
+	}
+}

backend/queue/handlers.go

@@ -1,18 +1,45 @@
 package queue
 
-// OnPlaybackFinished is called when a track finishes playing naturally.
-// This drives the auto-advance behavior and records the play.
-func (q *Queue) OnPlaybackFinished() {
+// OnPlaybackFinished is called when a track stops streaming. This
+// drives the auto-advance behavior and records the play.
+//
+// srcErr says why the track stopped: nil for one that reached its
+// end, non-nil for one that broke partway through.  The player cannot
+// tell the user which, because the metadata lives here -- so a failure
+// is reported as PlaybackFailed and *not* recorded as a play, while
+// the advance happens either way.  Before this, a file that failed
+// mid-track advanced in silence and was counted as listened to.
+//
+//wails:ignore // internal wiring, not part of the app's IPC surface.
+func (q *Queue) OnPlaybackFinished(srcErr error) {
 	q.mu.Lock()
 
-	if len(q.tracks) == 0 {
+	// currentIndex is -1 whenever the queue has been exhausted, and
+	// onQueueExhausted deliberately leaves the finished track loaded
+	// in the player -- so a natural finish can re-enter here against a
+	// queue that is not empty and an index that is not valid.  Every
+	// other path in this package bounds-checks before indexing; this
+	// one panicked, on a goroutine with no caller to recover it.
+	if q.currentIndex < 0 || q.currentIndex >= len(q.tracks) {
 		q.mu.Unlock()
 
 		return
 	}
 
 	// Capture the track that just finished before advancing.
-	finishedID := q.tracks[q.currentIndex].AudioFileID
+	finished := q.tracks[q.currentIndex]
+	finishedID := finished.AudioFileID
+
+	if srcErr != nil {
+		q.emitPlaybackFailed(finished, srcErr)
+	}
+
+	// A track that broke was not listened to.
+	recordFinished := func() {
+		if srcErr == nil {
+			q.recordPlay(finishedID)
+		}
+	}
 
 	// Repeat One: replay the current track.
 	if q.repeatMode == RepeatOne {
@@ -21,7 +48,7 @@ func (q *Queue) OnPlaybackFinished() {
 		}
 
 		q.mu.Unlock()
-		q.recordPlay(finishedID)
+		recordFinished()
 
 		return
 	}
@@ -31,7 +58,7 @@ func (q *Queue) OnPlaybackFinished() {
 		// Queue exhausted — this is the extension point for a future fallback playlist.
 		q.onQueueExhausted(false)
 		q.mu.Unlock()
-		q.recordPlay(finishedID)
+		recordFinished()
 
 		return
 	}
@@ -44,12 +71,12 @@ func (q *Queue) OnPlaybackFinished() {
 	if !q.playCurrentOrSkip(true, q.nextIndex) {
 		q.onQueueExhausted(false)
 		q.mu.Unlock()
-		q.recordPlay(finishedID)
+		recordFinished()
 
 		return
 	}
 
 	q.emitIndexChanged()
 	q.mu.Unlock()
-	q.recordPlay(finishedID)
+	recordFinished()
 }

backend/queue/playbackfailed_test.go

@@ -107,7 +107,7 @@ func TestPlaybackFailed_AutoAdvanceSkipsPastIt(t *testing.T) {
 
 	// The first track finished: auto-advance lands on the missing
 	// file and must step over it rather than stopping dead.
-	q.OnPlaybackFinished()
+	q.OnPlaybackFinished(nil)
 
 	if got := q.GetState().CurrentIndex; got != 2 {
 		t.Errorf("currentIndex after skipping: got %d, want 2", got)
@@ -183,7 +183,7 @@ func TestQueueExhausted_KeepsTheFinishedTrackLoaded(t *testing.T) {
 
 	q.SetQueue(paths, 0, false, Source{})
 	q.Play()
-	q.OnPlaybackFinished()
+	q.OnPlaybackFinished(nil)
 
 	if q.GetState().CurrentIndex != -1 {
 		t.Errorf(

e2e/specs/album-dropdown.spec.ts

@@ -1,6 +1,12 @@
 import { test, expect } from '../support/fixtures.js';
 import type { Page } from '@playwright/test';
 
+/**
+ * How far the scroll test scrolls. One constant, because the guard and
+ * the assertion have to agree about it — they did not, which is #133.
+ */
+const SCROLL_TARGET = 80;
+
 /**
  * Plan 007 phase 5: expanding an album shows its tracks.
  *
@@ -104,20 +110,27 @@ test.describe('the album dropdown', () => {
     await app.setViewportSize({ width: 900, height: 600 });
 
     try {
-      await expect.poll(() => scrollRange(app)).toMatchObject({
-        scrollable: true,
-        overflowY: 'auto',
-      });
+      // Wait for the range the assertion below actually needs, not for
+      // "scrollable at all" (#133). The guard used to be
+      // `scrollHeight > clientHeight + 40` while the next line asks to
+      // reach 80, so any range in 41-79 satisfied it and could not
+      // satisfy the assertion — and the grid passes through exactly
+      // that while it settles, because it recomputes its columns after
+      // the resize rather than during it. The settled range here is
+      // 330, so this waits rather than weakening anything.
+      await expect
+        .poll(() => scrollRange(app))
+        .toMatchObject({ room: true, overflowY: 'auto' });
 
-      await app.evaluate(() => {
+      await app.evaluate((target) => {
         const sc = document
           .querySelector('cover-grid')
           ?.shadowRoot?.querySelector('.grid-scroll-container');
 
-        if (sc) sc.scrollTop = 80;
-      });
+        if (sc) sc.scrollTop = target;
+      }, SCROLL_TARGET);
 
-      expect(await scrollTop(app)).toBe(80);
+      expect(await scrollTop(app)).toBe(SCROLL_TARGET);
 
       // And the dropdown it opens is on screen, wherever the manager
       // decides that leaves the scroll. It is *not* "the position is
@@ -250,16 +263,19 @@ async function closeDropdown(app: Page): Promise<void> {
 
 /** Whether the grid can scroll at all, which decides if a probe can move. */
 async function scrollRange(app: Page) {
-  return app.evaluate(() => {
+  return app.evaluate((target) => {
     const sc = document
       .querySelector('cover-grid')
       ?.shadowRoot?.querySelector('.grid-scroll-container');
 
     return {
-      scrollable: !!sc && sc.scrollHeight > sc.clientHeight + 40,
+      // `room` is the precondition of the assertion that follows it:
+      // enough range to actually reach the target. A threshold below
+      // what the caller depends on is not a guard.
+      room: !!sc && sc.scrollHeight - sc.clientHeight >= target,
       overflowY: sc ? getComputedStyle(sc).overflowY : '',
     };
-  });
+  }, SCROLL_TARGET);
 }
 
 async function scrollTop(app: Page): Promise<number> {

e2e/specs/layout-overflow.spec.ts

@@ -26,6 +26,12 @@ const MIN_VIEWPORT = { width: 800, height: 600 };
 const VIEWPORTS = [
   { name: '1440×900', width: 1440, height: 900 },
   { name: '1024×768', width: 1024, height: 768 },
+  // Not the minimum, and that is the point (#24). The sidebar collapses
+  // to icons *below* 900, so the main panel is 843px at 899 and 700px
+  // at 900 — the narrowest content area any desktop width produces is
+  // here, not at the enforced floor. A list that stopped at the minimum
+  // was missing its own worst case.
+  { name: '900×600 (the widest sidebar, so the narrowest content)', width: 900, height: 600 },
   { name: `the minimum (${MIN_VIEWPORT.width}×${MIN_VIEWPORT.height})`, ...MIN_VIEWPORT },
 ];
 

e2e/specs/queue-overlay.spec.ts

@@ -0,0 +1,187 @@
+import { test, expect } from '../support/fixtures.js';
+
+/**
+ * #24 — the queue panel does not take the page's width away from it.
+ *
+ * The panel is `flex-shrink: 0` in the flow of `.content-area`, so an
+ * open queue used to be paid for by the main panel. Measured on
+ * Playlists before the fix:
+ *
+ * | viewport | main panel |
+ * |---|---|
+ * | 900×600 | 379px — all three header actions clipped |
+ * | 390×780 | 69px |
+ * | 320×600 | **0px** |
+ *
+ * **900×600 is the worst desktop case, not the 800×600 minimum**, and
+ * that is the trap this file exists to keep closed: the sidebar
+ * collapses to icons *below* 900, so the main panel is 843px at 899 and
+ * 700px at 900. A spec that checks "the minimum" and stops has not
+ * checked the worst case — which is what every viewport list in this
+ * suite did before this.
+ *
+ * These assert the *content's* width rather than the panel's mode
+ * wherever they can, because the mode is the mechanism and the width is
+ * the complaint.
+ */
+
+/** The bands from plan 018's size matrix, plus the pixel above the collapse. */
+const BANDS = [
+  { name: 'a wide desktop (1280×800)', width: 1280, height: 800, inline: true },
+  { name: 'the default window (1100×720)', width: 1100, height: 720, inline: true },
+  { name: 'a laptop (1024×768)', width: 1024, height: 768, inline: true },
+  { name: 'the worst desktop width (900×600)', width: 900, height: 600, inline: false },
+  { name: 'the enforced minimum (800×600)', width: 800, height: 600, inline: false },
+  { name: 'a phone (390×780)', width: 390, height: 780, inline: false },
+  { name: '400% zoom (320×600)', width: 320, height: 600, inline: false },
+];
+
+/**
+ * How much room the content has, and whether the shell needs scrolling
+ * to reach any of itself.
+ */
+const shellGeometry = (page: import('@playwright/test').Page) =>
+  page.evaluate(() => {
+    const main = document.querySelector('#main-content')!.getBoundingClientRect();
+    const panel = document.querySelector('#queue-panel')!;
+
+    return {
+      mainWidth: Math.round(main.width),
+      overlay: panel.hasAttribute('overlay'),
+      open: panel.hasAttribute('open'),
+      bodyScrollWidth: document.body.scrollWidth,
+      bodyClientWidth: document.body.clientWidth,
+    };
+  });
+
+async function openQueue(page: import('@playwright/test').Page) {
+  const toggle = page.locator('#queue-button');
+
+  if ((await toggle.getAttribute('aria-expanded')) !== 'true') {
+    await toggle.click();
+  }
+
+  await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+}
+
+test.describe('an open queue leaves the content its width', () => {
+  for (const band of BANDS) {
+    test(`at ${band.name}`, async ({ app }) => {
+      await app.setViewportSize({ width: band.width, height: band.height });
+      await openQueue(app);
+
+      // The mode is settled by a ResizeObserver, so poll rather than
+      // read once: a single read races the resize and reports the
+      // previous viewport's answer.
+      await expect
+        .poll(async () => (await shellGeometry(app)).overlay)
+        .toBe(!band.inline);
+
+      const geo = await shellGeometry(app);
+
+      // The floor is the point of the whole issue. Inline, the queue is
+      // affordable and the content keeps the rest; as an overlay the
+      // content keeps *everything*, which is what makes 0px at 320
+      // impossible rather than merely unlikely.
+      expect(geo.mainWidth).toBeGreaterThanOrEqual(320);
+
+      if (!band.inline) {
+        expect(geo.mainWidth).toBeGreaterThanOrEqual(
+          Math.min(band.width, 320),
+        );
+      }
+
+      // And opening the queue must not make the shell overflow.
+      expect(geo.bodyScrollWidth).toBeLessThanOrEqual(geo.bodyClientWidth);
+    });
+  }
+});
+
+test.describe('an overlaid queue says it is over the content', () => {
+  test.beforeEach(async ({ app }) => {
+    await app.setViewportSize({ width: 900, height: 600 });
+  });
+
+  test('draws a scrim and closes when it is clicked', async ({ app }) => {
+    await openQueue(app);
+
+    const panel = app.locator('#queue-panel');
+
+    await expect(panel).toHaveAttribute('overlay', '');
+
+    // The scrim is `aria-hidden` on purpose — it is a dismissal target,
+    // and the named routes out are the close button and Escape — so it
+    // is located structurally rather than by role.
+    await panel.evaluate((el) =>
+      el.shadowRoot!.querySelector<HTMLElement>('.scrim')!.click(),
+    );
+
+    await expect(app.locator('#queue-button')).toHaveAttribute(
+      'aria-expanded',
+      'false',
+    );
+  });
+
+  /**
+   * `getByRole`, not a shadow-root query: this repo has shipped a
+   * nameless control three times, and a drawer with a scrim is exactly
+   * the shape that grows a fourth.
+   */
+  test('offers a named close button', async ({ app }) => {
+    await openQueue(app);
+
+    const close = app.getByRole('button', { name: 'Close queue' });
+
+    await expect(close).toBeVisible();
+    await close.click();
+
+    await expect(app.locator('#queue-button')).toHaveAttribute(
+      'aria-expanded',
+      'false',
+    );
+  });
+
+  test('closes on Escape and gives focus back to the toggle', async ({
+    app,
+  }) => {
+    const toggle = app.locator('#queue-button');
+
+    await toggle.focus();
+    await toggle.click();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+
+    await app.keyboard.press('Escape');
+
+    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    await expect(toggle).toBeFocused();
+  });
+});
+
+/**
+ * The inline panel is the mode that already worked, and the one every
+ * other queue spec is written against. It keeps its resize handle and
+ * gains none of the overlay's chrome.
+ */
+test.describe('a wide window keeps the queue beside the content', () => {
+  test('no scrim, no close button, and the content is narrower', async ({
+    app,
+  }) => {
+    await app.setViewportSize({ width: 1280, height: 800 });
+
+    const widthWithoutQueue = (await shellGeometry(app)).mainWidth;
+
+    await openQueue(app);
+
+    await expect(app.locator('#queue-panel')).not.toHaveAttribute(
+      'overlay',
+      '',
+    );
+
+    const geo = await shellGeometry(app);
+
+    expect(geo.mainWidth).toBeLessThan(widthWithoutQueue);
+    await expect(
+      app.getByRole('button', { name: 'Close queue' }),
+    ).toHaveCount(0);
+  });
+});

frontend/bindings/yellowjacket/backend/autotagservice/index.ts

@@ -7,6 +7,7 @@ export {
 };
 
 export type {
+    AlbumMatchView,
     AlignmentView,
     ApplyResultView,
     CandidateView,

frontend/bindings/yellowjacket/backend/autotagservice/models.ts

@@ -1,6 +1,61 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+/**
+ * AlbumMatchView is "the autotagger already has a confident match for
+ * the album you are looking at".
+ * 
+ * It is deliberately not a score. The album page renders a suggestion,
+ * and a suggestion has to be actionable: which release, what it is
+ * called, and whether acting on it here would do the whole album or
+ * only part of it.
+ */
+export interface AlbumMatchView {
+    /**
+     * GroupKey is the tagging group the actions operate on.
+     */
+    "groupKey": string;
+
+    /**
+     * Recommendation is the tier, as a string, for a caller that
+     * wants to render the strength rather than trust the filter.
+     */
+    "recommendation": string;
+
+    /**
+     * Score is the top candidate's raw score, 0..1.
+     */
+    "score": number;
+
+    /**
+     * ReleaseMBID is the release Apply would write.
+     */
+    "releaseMbid": string;
+
+    /**
+     * Title and ArtistCredit name that release, so the banner can say
+     * what it is offering rather than "a match".
+     */
+    "title": string;
+    "artistCredit": string;
+
+    /**
+     * TrackCount is the group's local track count.
+     */
+    "trackCount": number;
+
+    /**
+     * GroupCount is how many tagging groups this album spans.
+     * 
+     * More than one means a multi-disc album (one group per disc), and
+     * it is the reason this is a field rather than an implementation
+     * detail: applying "the album" from a single button would retag
+     * one disc of three and leave the folder holding a mix of old and
+     * new tags. The caller offers review instead.
+     */
+    "groupCount": number;
+}
+
 /**
  * AlignmentView mirrors autotag.TrackAlignment.  LocalIndex of -1
  * means "candidate has this track, folder doesn't" (status=missing).

frontend/bindings/yellowjacket/backend/autotagservice/service.ts

@@ -160,6 +160,39 @@ export function ListPendingFolders(libraryID: number): $CancellablePromise<$mode
     return $Call.ByID(617511590, libraryID);
 }
 
+/**
+ * MatchForAlbum answers "does the autotagger have something confident
+ * to say about this album", for the album detail page.
+ * 
+ * Three things about it are load-bearing.
+ * 
+ * **It costs no MusicBrainz request.** Everything it needs is already
+ * on disk: `tagging_items` carries the top score and release from the
+ * background prefetch, and `tagging_candidates` durably holds the
+ * scored list. The rate limiters here are shared with every page the
+ * user can open, so a lookup that fires on page load must not join
+ * that queue — which also means this returns nothing for a folder
+ * nobody has scored yet, rather than scoring it now. That is the
+ * right trade: the prefetch will get to it, and a page that silently
+ * spends a minute of somebody's MusicBrainz budget to draw a banner
+ * is worse than a page that says nothing.
+ * 
+ * **The tier is computed, not read.** `tagging_items.score` is the raw
+ * number and `Recommend` is what turns it into a claim — capping it
+ * for an ambiguous runner-up, an incomplete alignment or a folder too
+ * small to corroborate itself. Filtering on the raw score would
+ * promise confidence the scorer had explicitly withheld.
+ * 
+ * **Nothing is said about an album the user has already answered
+ * for.** Only a `pending` group qualifies: `confirmed` covers both a
+ * finished apply and an explicit "leave as is", and `skipped` is the
+ * user saying not now. Re-offering either is nagging, and "leave as
+ * is" would be actively wrong to argue with.
+ */
+export function MatchForAlbum(albumID: number): $CancellablePromise<$models.AlbumMatchView | null> {
+    return $Call.ByID(514173221, albumID);
+}
+
 /**
  * RetagGroup flips a group back to 'pending' so the user can
  * re-review after an apply or skip.  Drops the durably-cached

frontend/bindings/yellowjacket/backend/queue/queue.ts

@@ -113,14 +113,6 @@ export function Next(): $CancellablePromise<void> {
     return $Call.ByID(1968784044);
 }
 
-/**
- * OnPlaybackFinished is called when a track finishes playing naturally.
- * This drives the auto-advance behavior and records the play.
- */
-export function OnPlaybackFinished(): $CancellablePromise<void> {
-    return $Call.ByID(2184869763);
-}
-
 /**
  * Play handles a play request by either resuming the current track or
  * starting playback from the beginning of the queue. When a track is

frontend/index.css

@@ -231,6 +231,14 @@ body div.sidebar {
     display: flex;
     overflow: hidden;
     contain: layout style;
+
+    /* The containing block for the queue panel's overlay mode (plan
+       018, #24), which spans this box rather than taking width from
+       the main panel beside it. `contain: layout` already establishes
+       one; this says so on purpose, so that removing the containment
+       for a paint reason does not silently reparent the overlay to the
+       viewport. */
+    position: relative;
 }
 
 .main-panel {

frontend/index.ts

@@ -308,6 +308,18 @@ async function handleNavigate(
             deactivateView(currentViewEl);
         }
         target.classList.remove('view-hidden');
+
+        // A primary view is cached, so there is no construction to
+        // hand a payload to the way a detail view gets one below.  The
+        // one navigation that carries something is the album page's
+        // "Review in Autotag", which has to land on *that* album: the
+        // request goes on as an attribute and `autotag-view` consumes
+        // it (removes it) once acted on, or every later visit would
+        // reopen a folder the user finished with long ago.
+        if (view === 'autotag' && typeof detail.groupKey === 'string') {
+            target.setAttribute('group-key', detail.groupKey);
+        }
+
         // A freshly created view was appended hidden, so it did not
         // self-activate on connection; a cached one was deactivated on
         // the way out.  Either way this is the call that starts it.

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

@@ -1315,13 +1315,40 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
         // the page only needs the folder list, which is local and may
         // have moved while the page was away.
         if (this.queueStarted) {
-            void this.loadFolders();
+            void this.loadFolders().then(() => this.openRequestedFolder());
         } else {
             this.queueStarted = true;
-            void this.startQueue();
+            void this.startQueue().then(() => this.openRequestedFolder());
         }
     }
 
+    /**
+     * Open the folder somebody navigated here to look at.
+     *
+     * The album page's "Review in Autotag" has to land on *that*
+     * album. The queue is sorted by score so the intended folder is
+     * often near the top, but "often" is a link that sometimes opens
+     * the wrong album, which is worse than no link.
+     *
+     * It is an attribute rather than a property because this is a
+     * **cached primary view**: `index.ts` creates it once and reuses
+     * it, so there is no construction to pass a value to. Which is
+     * also why the request is *consumed* — the attribute is removed
+     * once acted on, or every later visit to Autotag would reopen an
+     * album the user finished with three navigations ago.
+     */
+    private openRequestedFolder(): void {
+        const requested = this.getAttribute('group-key');
+
+        if (!requested) return;
+
+        this.removeAttribute('group-key');
+
+        if (this.current?.groupKey === requested) return;
+
+        void this.selectFolder(requested);
+    }
+
     protected override onViewDeactivate(): void {
         this.unsubscribeLibraryStore?.();
         this.unsubscribeLibraryStore = undefined;

frontend/src/components/confirm-dialog/confirm-dialog.ts

@@ -81,23 +81,55 @@ export class ConfirmDialog extends LitElement {
         `,
     ];
 
+    /**
+     * Which question is on screen.
+     *
+     * This is a singleton reused for every confirmation in the app,
+     * and `wa-dialog` reports its close *asynchronously* — `open =
+     * false` starts an animation and `wa-hide` arrives after it. So a
+     * hide belonging to a question that has already been answered can
+     * land after the *next* question has opened, and cancel it: the
+     * user is asked something, the dialog vanishes on its own, and the
+     * call site is told they said no.
+     *
+     * The counter is what tells one question from the next. Every
+     * close bumps it, and the `wa-hide` handler carries the id its
+     * template was rendered with.
+     */
+    private askSeq = 0;
+
     /** Ask. Resolves true if the user went ahead. */
     ask(request: ConfirmRequest): Promise<boolean> {
         this.close(false);
+
+        const id = ++this.askSeq;
+
         this.request = request;
 
         return new Promise<boolean>((resolve) => {
             this.settle = resolve;
             void this.updateComplete.then(() => {
-                if (this.dialog) this.dialog.open = true;
+                // A third question could have arrived while this one
+                // was waiting for its own render.
+                if (this.askSeq === id && this.dialog) this.dialog.open = true;
             });
         });
     }
 
-    private close(ok: boolean): void {
+    /**
+     * Settle the current question, if `id` still names it.
+     *
+     * The button handlers pass nothing and always mean the question on
+     * screen; only `wa-hide` carries an id, because only `wa-hide` can
+     * arrive late.
+     */
+    private close(ok: boolean, id = this.askSeq): void {
+        if (id !== this.askSeq) return;
+
         const settle = this.settle;
 
         this.settle = null;
+        this.askSeq++;
 
         if (this.dialog) this.dialog.open = false;
         this.request = null;
@@ -118,11 +150,15 @@ export class ConfirmDialog extends LitElement {
 
         if (!request) return nothing;
 
+        // Captured at render time, so the handler answers the question
+        // it was drawn for and not whichever one is up when it fires.
+        const id = this.askSeq;
+
         return html`
             <wa-dialog
                 label=${request.title}
                 data-testid="confirm-dialog"
-                @wa-hide=${() => this.close(false)}
+                @wa-hide=${() => this.close(false, id)}
             >
                 <p>${request.message}</p>
                 ${request.impact

frontend/src/components/explore-album-details/explore-album-details.ts

@@ -30,12 +30,16 @@ import { Events } from '../../events';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '../library-status-indicator/library-status-indicator.js';
 import { libraryStatusFor } from '@utils/library-status';
+import { ICON_AUTOTAG } from '@utils/icon-language';
 import type { LibraryStatus } from '../library-status-indicator/library-status-indicator.js';
 import '../catalog-scope-notice/catalog-scope-notice.js';
 import type { CatalogScope } from '../catalog-scope-notice/catalog-scope-notice.js';
 import '@awesome.me/webawesome/dist/components/button/button.js';
 import '../download-picker/download-picker';
 import { downloadStore } from '../../store/download-store';
+import { MatchForAlbum, ApplyAsync } from '@go/autotagservice/service.js';
+import type * as autotagservice from '@go/autotagservice/models.js';
+import { confirmAction } from '../confirm-dialog/confirm-dialog';
 import { queueStore } from '../../store/queue-store';
 import type { QueueSource } from '../../store/queue-store';
 import { notificationStore } from '../../store/notification-store';
@@ -175,6 +179,19 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
     @property({ type: Number, attribute: 'local-album-id' })
     localAlbumId = 0;
 
+    /**
+     * A confident autotag match for this album, or null when there is
+     * none worth mentioning.
+     *
+     * The tier behind "confident" is `autotag.ConfidentTier`, decided
+     * in the backend so this page and strict auto-accept cannot
+     * disagree about what it means (#28, #90).
+     */
+    @state() private autotagMatch: autotagservice.AlbumMatchView | null = null;
+
+    /** True while an apply started from this page is in flight. */
+    @state() private applyingTags = false;
+
     /* ── Internal state ── */
 
     @state() private releaseGroup: MBReleaseGroup | null = null;
@@ -545,6 +562,57 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                 flex-shrink: 0;
             }
 
+            /* ── The autotag suggestion ── */
+            .autotag-match {
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                gap: 8px 12px;
+                margin-bottom: 12px;
+                padding: 10px 14px;
+                border: 1px solid
+                    var(--yj-border-subtle, rgba(255, 255, 255, 0.08));
+                border-radius: 8px;
+                background: var(--yj-surface-1, rgba(255, 255, 255, 0.04));
+            }
+
+            .autotag-match > wa-icon {
+                flex-shrink: 0;
+                font-size: var(--yj-icon-sm);
+                color: var(--yj-text-secondary, #b3b3b3);
+            }
+
+            .autotag-match-text {
+                margin: 0;
+                flex: 1;
+                /* The suggestion sits in a flex row beside its buttons,
+                 * and a grid/flex item's implicit minimum is its
+                 * content — without this a long release title pushes
+                 * the actions off the end at phone width. */
+                min-width: 0;
+                font-size: var(--yj-text-sm);
+                color: var(--yj-text-secondary, #b3b3b3);
+            }
+
+            .autotag-match-text strong {
+                color: var(--yj-text-primary, #fff);
+                font-weight: 600;
+            }
+
+            .autotag-match-note {
+                display: block;
+                margin-top: 2px;
+                font-size: var(--yj-text-xs);
+                color: var(--yj-text-tertiary, #888);
+            }
+
+            .autotag-match-actions {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                flex-shrink: 0;
+            }
+
             /* ── Other versions (a disclosure, below the tracklist) ── */
             .versions {
                 margin-top: 24px;
@@ -1062,6 +1130,14 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
         this.localTracks = [];
         this.filePaths = new Map();
         this.askedFor = new Set();
+        this.autotagMatch = null;
+
+        // Not awaited: the banner is a bonus and the page must not
+        // wait on it. It is also the *most* useful on an untagged
+        // album, which is exactly the page that has least else to
+        // show, so it is asked for on both branches below rather than
+        // only the catalog one.
+        void this.loadAutotagMatch();
 
         // Local-only album (no MBID) — populate entirely from library.
         if (!mbid && this.localAlbumId) {
@@ -1254,6 +1330,31 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
         return this.completeness;
     }
 
+    /**
+     * Ask whether the autotagger already has a confident match here.
+     *
+     * It answers from what the background prefetch has already scored
+     * and makes no MusicBrainz request, so this is safe on page load —
+     * see `MatchForAlbum`. A folder nobody has reached yet answers
+     * `null`, which is the same as "nothing to say": the banner is a
+     * bonus, so a failure is a missing suggestion rather than an error
+     * the user can act on, and it stays in the console.
+     */
+    private async loadAutotagMatch(): Promise<void> {
+        if (this.localAlbumId <= 0) {
+            this.autotagMatch = null;
+
+            return;
+        }
+
+        try {
+            this.autotagMatch = await MatchForAlbum(this.localAlbumId);
+        } catch (err) {
+            console.error('[explore-album] autotag match lookup failed', err);
+            this.autotagMatch = null;
+        }
+    }
+
     /**
      * Fetch and set `localTracks` directly by local album id — the
      * definite source of truth, used when nothing else has already
@@ -2415,6 +2516,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                     entity-type="album"
                     @catalog-retry=${this.retryCatalog}
                 ></catalog-scope-notice>
+                ${this.renderAutotagMatch()}
                 ${this.renderChosenVersion()}
                 ${this.renderTracklistScope()}
                 ${this.renderTracklist()}
@@ -3069,6 +3171,155 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
 
     /* ── Version Selector (R025, R026, R027) ── */
 
+    /**
+     * "MusicBrainz has a match for this album."
+     *
+     * The complaint this answers is that the user had to notice the
+     * metadata was missing, then go and hunt the album down on the
+     * Autotag page — so the point is to say it *here*, while they are
+     * looking at the thing, with something to do about it.
+     *
+     * Three things about it are load-bearing.
+     *
+     * **Applying is offered only when it would do the whole album.** A
+     * tagging group is a folder, so a multi-disc album is several, and
+     * one button that applied to the best-scoring one would leave the
+     * album holding a mix of old and new tags — the exact case the
+     * app's Blocking notification level exists for. `groupCount` is
+     * the test, and the answer there is review, not apply.
+     *
+     * **The confirm is not a formality.** This rewrites tags on disk
+     * and cannot be undone, so it goes through `confirmAction()` with
+     * an impact line that says so in those words.
+     *
+     * **The banner does not claim a percentage.** The backend has a
+     * score and deliberately does not put it in the sentence: 0.95
+     * reads as a probability and is not one. What the user needs is
+     * which release it is, which is what the release title and artist
+     * are for.
+     */
+    private renderAutotagMatch() {
+        const match = this.autotagMatch;
+
+        if (!match) return nothing;
+
+        const wholeAlbum = match.groupCount === 1;
+
+        return html`
+            <div class="autotag-match" role="status">
+                <wa-icon name=${ICON_AUTOTAG} aria-hidden="true"></wa-icon>
+                <p class="autotag-match-text">
+                    MusicBrainz has a match for this album:
+                    <strong>${match.title}</strong>
+                    ${match.artistCredit ? html` by ${match.artistCredit}` : nothing}.
+                    ${wholeAlbum
+                        ? nothing
+                        : html`<span class="autotag-match-note"
+                              >It is filed as ${match.groupCount} folders here, so
+                              tagging it is a review rather than one
+                              step.</span
+                          >`}
+                </p>
+                <div class="autotag-match-actions">
+                    ${wholeAlbum
+                        ? html`<wa-button
+                              size="small"
+                              variant="brand"
+                              ?disabled=${this.applyingTags}
+                              @click=${this.onApplyAutotagMatch}
+                              >Apply tags</wa-button
+                          >`
+                        : nothing}
+                    <wa-button
+                        size="small"
+                        appearance="outlined"
+                        @click=${this.onReviewAutotagMatch}
+                        >Review in Autotag</wa-button
+                    >
+                </div>
+            </div>
+        `;
+    }
+
+    /** Hand the group over to the Autotag page and go there. */
+    private onReviewAutotagMatch = () => {
+        const match = this.autotagMatch;
+
+        if (!match) return;
+
+        this.dispatchEvent(
+            new CustomEvent('navigate', {
+                bubbles: true,
+                composed: true,
+                detail: { view: 'autotag', groupKey: match.groupKey },
+            }),
+        );
+    };
+
+    /**
+     * Apply the match, after asking.
+     *
+     * `ApplyAsync` is the registered-job path, so the work is visible
+     * in the jobs indicator and cancellable there like every other
+     * long-running operation — this page does not grow a second
+     * progress surface for it. What it does own is the *acknowledgement*
+     * that the request was accepted, because the button is here.
+     *
+     * The page is not refreshed on completion either: rewriting tags
+     * emits `TrackMetadataChanged`, which `library-store` answers by
+     * discarding every cached collection, and this page reloads from
+     * that like everything else.
+     */
+    private onApplyAutotagMatch = async () => {
+        const match = this.autotagMatch;
+
+        if (!match || this.applyingTags) return;
+
+        const ok = await confirmAction({
+            title: `Tag this album as “${match.title}”?`,
+            message:
+                `The ${match.trackCount} files of this album are rewritten to` +
+                ` match the MusicBrainz release${
+                    match.artistCredit ? ` by ${match.artistCredit}` : ''
+                }.`,
+            impact:
+                'This edits the tags in the files on disk and cannot be' +
+                ' undone. Nothing is moved or deleted.',
+            confirmLabel: 'Apply tags',
+        });
+
+        if (!ok) return;
+
+        this.applyingTags = true;
+
+        try {
+            await ApplyAsync(match.groupKey, match.releaseMbid);
+
+            // The suggestion has been acted on, so it stops being a
+            // suggestion immediately rather than sitting there inviting
+            // a second click while the job runs.
+            this.autotagMatch = null;
+
+            notificationStore.transient({
+                text: 'Tagging this album — progress is in the jobs indicator.',
+            });
+        } catch (err) {
+            console.error('[explore-album] autotag apply failed', err);
+
+            // Persistent rather than transient: the user asked for
+            // something that did not happen, and retrying is meaningful.
+            notificationStore.persistent({
+                text: describeError(
+                    err,
+                    'Those tags could not be applied.',
+                ),
+                tone: 'error',
+            });
+        } finally {
+            this.applyingTags = false;
+        }
+    };
+
     /**
      * Which pressing is on screen — said only when the user chose it.
      *

frontend/src/components/now-playing/now-playing.ts

@@ -13,6 +13,7 @@ import {
     isQueueSourceNavigable,
     navigateToQueueSource,
 } from '@utils/queue-source-link';
+import { PHONE_QUERY } from '@utils/breakpoints';
 import { PlayerController } from '@store/controllers/player-controller';
 import { creditStore } from '@store/credit-store';
 import { QueueController } from '@store/controllers/queue-controller';
@@ -80,6 +81,19 @@ export class NowPlaying extends LitElement {
 
     private reduceMotionQuery?: MediaQueryList;
 
+    /**
+     * Phone width, from the shell's own breakpoint.
+     *
+     * This is in JS rather than in the stylesheet because what changes
+     * is the *content*, not its appearance: the title, artist and
+     * source render as plain text instead of as links, and no CSS rule
+     * can take a click handler off an element.
+     */
+    @state()
+    private phone = false;
+
+    private phoneQuery?: MediaQueryList;
+
     /** Whether each field is actively mid-scroll (class toggle). */
     @state()
     private titleScrolling = false;
@@ -341,6 +355,12 @@ export class NowPlaying extends LitElement {
         this.reduceMotion = this.reduceMotionQuery?.matches ?? false;
         this.reduceMotionQuery?.addEventListener('change', this.handleReduceMotionChange);
 
+        // Same reasoning as above: looked up here, not at module load,
+        // so a test can install its own matchMedia first.
+        this.phoneQuery = window.matchMedia?.(PHONE_QUERY);
+        this.phone = this.phoneQuery?.matches ?? false;
+        this.phoneQuery?.addEventListener('change', this.handlePhoneChange);
+
         this.resizeObserver = new ResizeObserver(() => {
             this.geometryDirty = true;
             this.requestUpdate();
@@ -364,6 +384,7 @@ export class NowPlaying extends LitElement {
         this.attachDragListeners(false);
         window.removeEventListener(SCROLL_CHANGE_EVENT, this.handleScrollModeEvent);
         this.reduceMotionQuery?.removeEventListener('change', this.handleReduceMotionChange);
+        this.phoneQuery?.removeEventListener('change', this.handlePhoneChange);
         this.resizeObserver?.disconnect();
         this.stopScrollCycle('title');
         this.stopScrollCycle('artist');
@@ -488,7 +509,7 @@ export class NowPlaying extends LitElement {
               @mouseleave=${this.handleTitleMouseLeave}
               @transitionend=${() => this.onScrollCycleEnd('title')}
             >
-              <span class="scroll-content">${trackLink(track.title, track.album, track.releaseGroupMbid, track.recordingMbid) || track.title}</span>
+              <span class="scroll-content">${this.phone ? track.title : trackLink(track.title, track.album, track.releaseGroupMbid, track.recordingMbid) || track.title}</span>
             </span>
             <span
               class="track-artist ${artistScrolling ? 'will-scroll' : ''} ${this.artistScrolling ? 'scrolling' : ''}"
@@ -498,14 +519,15 @@ export class NowPlaying extends LitElement {
               @mouseleave=${this.handleArtistMouseLeave}
               @transitionend=${() => this.onScrollCycleEnd('artist')}
             >
-              <span class="scroll-content">${creditLink(creditStore.credits(track.recordingMbid), track.artist, track.artistMbid) || 'Unknown Artist'}</span>
+              <span class="scroll-content">${this.phone ? track.artist || 'Unknown Artist' : creditLink(creditStore.credits(track.recordingMbid), track.artist, track.artistMbid) || 'Unknown Artist'}</span>
             </span>
             ${describeQueueSource(this.queue.source)
                 ? html`
                   <span
-                    class="track-source ${isQueueSourceNavigable(this.queue.source) ? 'navigable' : ''}"
+                    class="track-source ${!this.phone && isQueueSourceNavigable(this.queue.source) ? 'navigable' : ''}"
                     data-testid="now-playing-source"
                     @click=${(e: MouseEvent) => {
+                        if (this.phone) return;
                         if (!isQueueSourceNavigable(this.queue.source)) return;
                         navigateToQueueSource(
                             e.currentTarget as EventTarget,
@@ -571,6 +593,10 @@ export class NowPlaying extends LitElement {
         this.reduceMotion = e.matches;
     };
 
+    private handlePhoneChange = (e: MediaQueryListEvent): void => {
+        this.phone = e.matches;
+    };
+
     private shouldScroll(field: 'title' | 'artist'): boolean {
         const overflows = field === 'title' ? this.titleOverflows : this.artistOverflows;
 
@@ -606,6 +632,12 @@ export class NowPlaying extends LitElement {
             track?.artist ?? '',
             this.shouldScroll('title') ? '1' : '0',
             this.shouldScroll('artist') ? '1' : '0',
+            // Crossing the breakpoint swaps a link for a bare string,
+            // and a link is not guaranteed to measure the same as the
+            // text inside it. The marquee travels a distance read from
+            // that measurement, so this belongs in the key even though
+            // the words are identical either side.
+            this.phone ? '1' : '0',
         ].join('\u0000');
     }
 

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

@@ -72,6 +72,24 @@ const MIN_WIDTH = 200;
 const MAX_WIDTH = 500;
 const DEFAULT_WIDTH = 320;
 
+/**
+ * The narrowest main panel the queue is allowed to leave behind before
+ * it stops being a column and becomes an overlay (plan 018, issue #24).
+ *
+ * There is no cliff to derive this from, and pretending otherwise would
+ * be the more dishonest answer: the track list rescales its columns
+ * continuously (213px down to 124px between main widths of 900 and 544,
+ * with no row overflow at any of them) and the album grid steps 3
+ * columns to 2 without breaking. So this is a judgement, anchored at
+ * both ends — it keeps the *default* 1100px window inline, because an
+ * inline queue is a desktop affordance people choose and demoting the
+ * common case to an overlay would be a regression in feel; and it puts
+ * every case measured as broken on the overlay side, which is 900x600
+ * (main = 379px, where all three of the Playlists header's actions are
+ * clipped) and every phone width (main = 69px at 390, 0px at 320).
+ */
+const MAIN_PANEL_FLOOR = 480;
+
 @customElement('queue-panel')
 export class QueuePanel
     extends LitElement
@@ -85,6 +103,22 @@ export class QueuePanel
     @property({ type: Boolean, reflect: true })
     open = false;
 
+    /**
+     * Whether the panel is covering the content instead of sitting
+     * beside it. **Computed, never set by a caller** — it is reflected
+     * so the stylesheet and a spec can both read it.
+     *
+     * It is deliberately *not* a media query, which is the whole reason
+     * this is a property and not a `@media` block. The panel's width is
+     * user state: drag-resizable between MIN_WIDTH and MAX_WIDTH and
+     * persisted. A breakpoint at a fixed viewport width silently
+     * assumes the default 320, so it is wrong by up to 180px for a user
+     * who has widened the panel — in the direction that hurts, since a
+     * wider queue is exactly when the content can least afford it.
+     */
+    @property({ type: Boolean, reflect: true })
+    overlay = false;
+
     @state()
     private isDragging = false;
 
@@ -190,6 +224,19 @@ export class QueuePanel
     private panelWidth = DEFAULT_WIDTH;
     private scrollbarDragging = false;
 
+    /** Watches `.content-area`, which is the viewport minus the sidebar. */
+    private spaceObserver?: ResizeObserver;
+
+    /**
+     * What had focus when the overlay opened, so Escape and the scrim
+     * can give it back. Focus is only taken back if the panel had it —
+     * the same rule `MenuKeyboard` follows, for the same reason: the
+     * queue can also be closed by the button in the bottom bar, and
+     * yanking focus away from wherever the user actually is would be
+     * worse than leaving it.
+     */
+    private overlayOpener: HTMLElement | null = null;
+
     // _itemSize is an internal property applied via Object.assign in BaseLayout's
     // config setter. Setting it to match the actual fixed .track-item height (49px)
     // prevents lit-virtualizer's scroll error correction from fighting the native
@@ -265,6 +312,86 @@ export class QueuePanel
             border-left: 1px solid var(--yj-border-subtle, #333);
         }
 
+        /* ---------------------------------------------------------
+           Overlay mode (plan 018, #24).
+
+           In flow the panel takes its width *from the main panel*,
+           which is the reported bug: at 900x600 that left 379px and
+           clipped every action in the Playlists header, and at 320px
+           it left 0px — the content was not degraded but gone.
+
+           Here the host spans the whole content area instead and
+           stops being a layout participant, so the main panel keeps
+           its full width and the queue sits over it. The host itself
+           is transparent and click-through; the scrim and the panel
+           are what take pointer events. The containment drops paint,
+           which would otherwise clip the panel's own shadow.
+           --------------------------------------------------------- */
+        :host([overlay]) {
+            position: absolute;
+            inset: 0;
+            width: auto;
+            background-color: transparent;
+            overflow: visible;
+            pointer-events: none;
+            contain: layout style;
+            z-index: 20;
+        }
+
+        /* Closed, an overlay is not there at all. In flow the panel is
+           width: 0, which is its own way of saying this; absolutely
+           positioned there is no width to collapse. */
+        :host([overlay]:not([open])) {
+            display: none;
+        }
+
+        :host([overlay][open]) {
+            border-left: none;
+        }
+
+        :host([overlay]) .panel-content {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: var(--queue-width, ${unsafeCSS(DEFAULT_WIDTH)}px);
+            max-width: 100%;
+            box-sizing: border-box;
+            background-color: var(--yj-bg-surface, #212529);
+            border-left: 1px solid var(--yj-border-subtle, #333);
+            box-shadow: -8px 0 24px rgb(0 0 0 / 45%);
+            pointer-events: auto;
+        }
+
+        /* Dragging the edge of something that is already covering the
+           content answers a question nobody asked, and it is a
+           mouse-only affordance either way. */
+        :host([overlay]) .resize-handle {
+            display: none;
+        }
+
+        .scrim {
+            position: absolute;
+            inset: 0;
+            background-color: rgb(0 0 0 / 45%);
+            pointer-events: auto;
+            border: none;
+            padding: 0;
+            margin: 0;
+            cursor: pointer;
+        }
+
+        /* The phone gets the whole width: below 600 there is no
+           "beside" left to be, and this is the shape #55 turns into a
+           real screen. A media query inside a shadow root is answered
+           by the viewport, so the component states this itself rather
+           than the shell reaching in. */
+        @media (max-width: 599px) {
+            :host([overlay]) .panel-content {
+                width: 100%;
+            }
+        }
+
         .resize-handle {
             position: absolute;
             top: 0;
@@ -656,6 +783,20 @@ export class QueuePanel
             '--queue-width',
             `${this.panelWidth}px`,
         );
+
+        // The mode is a measurement, so it is observed rather than
+        // computed once: the parent is `.content-area`, whose width is
+        // the viewport minus the sidebar — including the sidebar's own
+        // collapse at 900px, which is what makes 900 the *worst*
+        // desktop width rather than the minimum.
+        this.updateOverlayMode();
+
+        if (this.parentElement) {
+            this.spaceObserver = new ResizeObserver(() =>
+                this.updateOverlayMode(),
+            );
+            this.spaceObserver.observe(this.parentElement);
+        }
         document.addEventListener(
             'mousemove',
             this.handleMouseMove,
@@ -690,6 +831,9 @@ export class QueuePanel
         super.disconnectedCallback();
         this.creditsUnsub?.();
         this.creditsUnsub = undefined;
+        this.spaceObserver?.disconnect();
+        this.spaceObserver = undefined;
+        document.removeEventListener('keydown', this.onOverlayKeydown);
         document.removeEventListener(
             'mousemove',
             this.handleMouseMove,
@@ -736,7 +880,79 @@ export class QueuePanel
         this.delegationAttached = false;
     }
 
+    /**
+     * Decide whether the queue can afford to be a column.
+     *
+     * The parent is `.content-area`, so its width is the viewport minus
+     * the sidebar and the sum already accounts for the sidebar's own
+     * collapse. It is stable across the panel's own open/closed state
+     * in both modes — in flow the panel is a child of that box, and as
+     * an overlay it is out of flow — so this cannot oscillate.
+     */
+    private updateOverlayMode = () => {
+        const available = this.parentElement?.clientWidth ?? 0;
+
+        // Before layout there is nothing to measure, and answering 0 by
+        // flipping to overlay would show the scrim for a frame.
+        if (available === 0) return;
+
+        this.overlay = available - this.panelWidth < MAIN_PANEL_FLOOR;
+    };
+
+    /**
+     * Escape closes a scrimmed overlay, which is the one keyboard rule
+     * every dialog in this app already follows.
+     *
+     * It is a document listener rather than a panel-scoped binding
+     * (`services/shortcut-scope.ts`) because it is not a *shortcut*: it
+     * is the dismissal of something covering the page, and it has to
+     * work while focus is still behind the scrim. It is attached only
+     * while the overlay is actually up and removed on close, so it is
+     * scoped to a state rather than being a permanent global. Nothing
+     * else binds Escape — the shortcut service only uses it to blur a
+     * text input.
+     */
+    private onOverlayKeydown = (e: KeyboardEvent) => {
+        if (e.key !== 'Escape' || !this.open || !this.overlay) return;
+
+        e.stopPropagation();
+        this.closeFromOverlay();
+    };
+
+    private closeFromOverlay = () => {
+        const hadFocus = this.contains(
+            document.activeElement as Node | null,
+        );
+
+        this.open = false;
+
+        if (hadFocus) {
+            const back =
+                this.overlayOpener ??
+                document.getElementById('queue-button');
+
+            back?.focus();
+        }
+
+        this.overlayOpener = null;
+    };
+
     override updated() {
+        // The overlay owns Escape only while it is up.
+        if (this.open && this.overlay) {
+            document.addEventListener('keydown', this.onOverlayKeydown);
+
+            this.overlayOpener ??=
+                document.activeElement instanceof HTMLElement &&
+                document.activeElement !== document.body
+                    ? document.activeElement
+                    : null;
+        } else {
+            document.removeEventListener('keydown', this.onOverlayKeydown);
+
+            if (!this.open) this.overlayOpener = null;
+        }
+
         // Closed, the panel is `width: 0` — which hides it from the eye
         // and from nobody else: its Clear and Add buttons still took tab
         // stops at x=1440 and were still read out (H-5).  `inert` is the
@@ -1631,6 +1847,11 @@ export class QueuePanel
             '--queue-width',
             `${clampedWidth}px`,
         );
+
+        // Widening the panel is one of the two ways the content can run
+        // out of room, and it is the way a viewport-width media query
+        // cannot see at all.
+        this.updateOverlayMode();
     };
 
     private handleMouseUp = () => {
@@ -1714,6 +1935,15 @@ export class QueuePanel
         const tracks = this.queue.tracks;
 
         return html`
+            ${this.overlay
+                ? html`<div
+                      class="scrim"
+                      part="scrim"
+                      data-testid="queue-scrim"
+                      aria-hidden="true"
+                      @click=${this.closeFromOverlay}
+                  ></div>`
+                : nothing}
             <div class="panel-content">
                 <div
                     class="resize-handle ${this.isDragging
@@ -1763,6 +1993,16 @@ export class QueuePanel
                                 name=${ICON_PLAYLIST}
                             ></wa-icon>
                         </button>
+                        ${this.overlay
+                            ? html`<button
+                                  class="header-action-button"
+                                  data-testid="queue-close"
+                                  aria-label="Close queue"
+                                  @click=${this.closeFromOverlay}
+                              >
+                                  <wa-icon name="xmark"></wa-icon>
+                              </button>`
+                            : nothing}
                     </div>
                 </div>
 

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

@@ -6,6 +6,7 @@ import { designTokens } from '../../styles/tokens.css';
 import type { DragActiveDetail } from '@utils/drag-controller';
 import {
     ICON_PLAYLIST,
+    ICON_AUTOTAG,
     ICON_REQUESTED,
 } from '@utils/icon-language';
 
@@ -208,7 +209,7 @@ export class AppSidebar extends LitElement {
         { id: 'tracks', label: 'Tracks', icon: 'music' },
         { id: 'explore', label: 'Explore', icon: 'globe' },
         { id: 'downloads', label: 'Downloads', icon: ICON_REQUESTED },
-        { id: 'autotag', label: 'Autotag', icon: 'tag' },
+        { id: 'autotag', label: 'Autotag', icon: ICON_AUTOTAG },
         { id: 'jobs', label: 'Jobs', icon: 'list-check' },
         { id: 'settings', label: 'Settings', icon: 'gear' },
     ];

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

@@ -11,6 +11,7 @@ import {
 import { SelectionController } from '@utils/selection-controller';
 import type { SelectionHost } from '@utils/selection-controller';
 import { ViewLifecycleMixin } from '@utils/view-lifecycle';
+import { PHONE_QUERY } from '@utils/breakpoints';
 import {
     ContextMenuController,
     contextMenuStyles,
@@ -105,9 +106,6 @@ const ROW_CHROME_WIDTH =
 const ROW_HEIGHT = 33;
 const PHONE_ROW_HEIGHT = 52;
 
-/** The shell's phone breakpoint, as `index.css` and every component
- *  stylesheet spells it. */
-const PHONE_QUERY = '(max-width: 599px)';
 
 // Inline SVG paths for favorite icons — eliminates wa-icon shadow DOM
 // overhead (30-50 shadow roots during scroll).  Font Awesome 6 paths.

frontend/src/utils/breakpoints.ts

@@ -0,0 +1,23 @@
+/**
+ * The shell's breakpoints, where JavaScript has to agree with CSS.
+ *
+ * A media query inside a shadow root is answered by the viewport, so a
+ * component normally states what it drops at phone width in its own
+ * stylesheet and needs nothing from here. This exists for the cases
+ * where the decision is not a style: `track-list` computes its grid in
+ * JS from the host width, and `now-playing` renders *different content*
+ * on a phone — a plain string instead of a link — which no stylesheet
+ * can express.
+ *
+ * One breakpoint, several expressions of it. It was a private const in
+ * track-list.ts when there was one; a second reader is where a copy
+ * would start drifting from index.css.
+ */
+
+/**
+ * Phone width. 600px rather than the sidebar's 900px because 900 is a
+ * laptop: the answer there is a narrower sidebar, which is still a
+ * sidebar. Below this the shell drops the sidebar column entirely and
+ * bottom-nav takes over.
+ */
+export const PHONE_QUERY = '(max-width: 599px)';

frontend/src/utils/icon-language.ts

@@ -80,6 +80,17 @@ export const ICON_REQUESTED = 'solid/bookmark';
  */
 export const ICON_IN_LIBRARY = 'check';
 
+/**
+ * The autotagger, and a match it is offering.
+ *
+ * The same icon as the Autotag destination in the sidebar, on the rule
+ * `ICON_PLAYLIST` was chosen by: an icon names the noun it acts on, so
+ * a suggestion on the album page wears the mark of the page it would
+ * send you to. Governed from the moment there were two call sites,
+ * which is when a name stops being a detail of one component.
+ */
+export const ICON_AUTOTAG = 'tag';
+
 /**
  * Something is being fetched right now.
  *

frontend/test/components/album-autotag-match.test.ts

@@ -0,0 +1,286 @@
+/**
+ * Being told about a match while looking at the album.
+ *
+ * The complaint (#28) is that the user had to notice their metadata
+ * was missing and then go and hunt the album down on the Autotag page.
+ * So the suggestion is drawn here, with something to do about it — and
+ * the something rewrites files on disk, which is what most of this
+ * file is about.
+ *
+ * The confidence tier behind "MusicBrainz has a match" is decided in
+ * the backend (`autotag.ConfidentTier`) so this page and strict
+ * auto-accept cannot disagree about what it means; what is pinned here
+ * is only what the page does with the answer.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+import type { LitElement } from 'lit';
+import { page } from 'vitest/browser';
+
+import '@components/explore-album-details/explore-album-details';
+import { stub, stubFailure, flush, resetHarness, calls } from '@test/support/harness';
+import { notificationStore } from '@store/notification-store';
+import '@components/notifications/notification-host';
+import { fixture, shadow, shadowAll } from '@test/support/render';
+
+const MATCH = 'autotagservice.Service.MatchForAlbum';
+const APPLY = 'autotagservice.Service.ApplyAsync';
+
+function match(over: Record<string, unknown> = {}) {
+  return {
+    groupKey: 'grp-1',
+    recommendation: 'strong',
+    score: 0.95,
+    releaseMbid: 'rel-1',
+    title: 'Glass Harbour',
+    artistCredit: 'Tideline',
+    trackCount: 10,
+    groupCount: 1,
+    ...over,
+  };
+}
+
+async function albumPage(): Promise<LitElement> {
+  const el = await fixture<LitElement>('explore-album-details', {
+    albumName: 'Glass Harbour',
+    localAlbumId: 7,
+  });
+
+  await flush();
+  await el.updateComplete;
+
+  return el;
+}
+
+/** The confirm dialog attaches itself to the document on first use. */
+function confirmHost(): (LitElement & { shadowRoot: ShadowRoot | null }) | null {
+  return document.querySelector('confirm-dialog');
+}
+
+/** Press one of the dialog's own buttons, the way a person would. */
+async function pressConfirm(testid: string): Promise<void> {
+  const host = confirmHost();
+
+  if (!host) throw new Error('confirm-dialog did not mount itself');
+
+  await host.updateComplete;
+  host.shadowRoot
+    ?.querySelector<HTMLButtonElement>(`[data-testid="${testid}"]`)
+    ?.click();
+  await host.updateComplete;
+  await flush();
+}
+
+/** Click one of the banner's buttons by its label. */
+async function pressBanner(el: LitElement, label: string): Promise<void> {
+  shadowAll<HTMLElement>(el, '.autotag-match-actions wa-button')
+    .find((b) => b.textContent?.includes(label))
+    ?.click();
+  await flush();
+}
+
+beforeEach(() => {
+  resetHarness();
+  notificationStore.clear();
+  stub('explore.Service.BrowseReleases', []);
+  stub('explore.Service.LookupReleaseGroup', null);
+  stub('explore.Service.GetThumbnail', '');
+  stub('library.Library.GetAlbumTracks', []);
+  stub('library.Library.GetAlbumCompleteness', {
+    owned: 0,
+    expected: 0,
+    known: false,
+    complete: false,
+  });
+  stub('library.Library.GetAllLibrariesWithTrackCounts', []);
+  stub('library.Library.GetFilePathsByRecordingMBIDs', {});
+  stub(MATCH, null);
+});
+
+describe('the autotag suggestion', () => {
+  it('says nothing when the backend has nothing confident', async () => {
+    const el = await albumPage();
+
+    expect(shadow(el, '.autotag-match')).toBeNull();
+  });
+
+  /**
+   * A pure catalog page has no files to retag, so the question is not
+   * asked at all — this runs on every album open and a call that
+   * cannot have an answer is a call not worth making.
+   */
+  it('is not even asked about an album with no local files', async () => {
+    stub(MATCH, match());
+
+    const el = await fixture<LitElement>('explore-album-details', {
+      albumName: 'Glass Harbour',
+      releaseGroupMBID: 'rg-1',
+    });
+
+    await flush();
+    await el.updateComplete;
+
+    expect(calls(MATCH)).toHaveLength(0);
+    expect(shadow(el, '.autotag-match')).toBeNull();
+  });
+
+  /**
+   * The banner names the release rather than quoting a number: 0.95
+   * reads as a probability and is not one, and which release it is, is
+   * the thing the user can actually judge.
+   */
+  it('names the release it is offering', async () => {
+    stub(MATCH, match());
+
+    const el = await albumPage();
+    const text = shadow(el, '.autotag-match')?.textContent ?? '';
+
+    expect(text).toContain('MusicBrainz has a match');
+    expect(text).toContain('Glass Harbour');
+    expect(text).toContain('Tideline');
+    expect(text).not.toContain('95');
+  });
+
+  it('offers both an apply and a review', async () => {
+    stub(MATCH, match());
+
+    await albumPage();
+
+    await expect
+      .element(page.getByRole('button', { name: 'Apply tags' }))
+      .toBeInTheDocument();
+    await expect
+      .element(page.getByRole('button', { name: 'Review in Autotag' }))
+      .toBeInTheDocument();
+  });
+
+  /**
+   * A tagging group is a folder, so a multi-disc album is several. One
+   * button that applied to the best-scoring one would leave the album
+   * holding a mix of old and new tags — which is the case the app's
+   * Blocking notification level exists for, and is worth not creating.
+   */
+  it('will not apply to an album filed as several folders', async () => {
+    stub(MATCH, match({ groupCount: 2 }));
+
+    const el = await albumPage();
+    const labels = shadowAll(el, '.autotag-match-actions wa-button').map(
+      (b) => b.textContent?.trim(),
+    );
+
+    expect(labels).toEqual(['Review in Autotag']);
+    expect(shadow(el, '.autotag-match')?.textContent).toContain('2 folders');
+  });
+
+  it('navigates to Autotag carrying the group key', async () => {
+    stub(MATCH, match());
+
+    const el = await albumPage();
+    const seen: CustomEvent[] = [];
+
+    el.addEventListener('navigate', (e) => seen.push(e as CustomEvent));
+
+    await pressBanner(el, 'Review');
+
+    expect(seen).toHaveLength(1);
+    expect(seen[0]?.detail).toMatchObject({
+      view: 'autotag',
+      groupKey: 'grp-1',
+    });
+  });
+});
+
+describe('applying from the album page', () => {
+  /**
+   * This rewrites tags in files on disk and cannot be undone, so it
+   * asks first — and cancelling has to be a true no-op, not a
+   * confirmation that fires the call anyway.
+   */
+  it('asks before it writes, and cancelling writes nothing', async () => {
+    stub(MATCH, match());
+    stub(APPLY, null);
+
+    const el = await albumPage();
+
+    await pressBanner(el, 'Apply');
+
+    expect(confirmHost()).not.toBeNull();
+    expect(calls(APPLY)).toHaveLength(0);
+
+    await pressConfirm('confirm-cancel');
+    await el.updateComplete;
+
+    expect(calls(APPLY)).toHaveLength(0);
+    expect(shadow(el, '.autotag-match')).not.toBeNull();
+  });
+
+  /**
+   * The impact line has to say the thing that cannot be taken back, in
+   * those words — "cannot be undone" — and that nothing is deleted,
+   * because "rewrites your files" reads worse than it is.
+   */
+  it('says what cannot be undone', async () => {
+    stub(MATCH, match());
+
+    const el = await albumPage();
+
+    await pressBanner(el, 'Apply');
+
+    const text = confirmHost()?.shadowRoot?.textContent ?? '';
+
+    expect(text).toContain('cannot be');
+    expect(text).toContain('undone');
+    expect(text.toLowerCase()).toContain('nothing is moved or deleted');
+  });
+
+  /**
+   * `ApplyAsync` is the registered-job path, so progress belongs to
+   * the jobs indicator and this page does not grow a second one. What
+   * it owes the user is an acknowledgement, because the button is
+   * here — and the suggestion has to stop inviting a second click.
+   */
+  it('hands the work to the job registry and stands down', async () => {
+    stub(MATCH, match());
+    stub(APPLY, null);
+
+    const el = await albumPage();
+
+    await pressBanner(el, 'Apply');
+    await pressConfirm('confirm-accept');
+    await el.updateComplete;
+
+    expect(calls(APPLY)).toHaveLength(1);
+    // The release is passed explicitly: a rescore between the page
+    // rendering and the click must not swap the album out from under
+    // a button the user has already read.
+    expect(calls(APPLY)[0]?.args).toEqual(['grp-1', 'rel-1']);
+    expect(shadow(el, '.autotag-match')).toBeNull();
+  });
+
+  /**
+   * A failure is Persistent, not Transient: the user asked for
+   * something that did not happen and retrying is meaningful, which is
+   * the notification store's own rule for choosing the level.
+   */
+  it('keeps a failure on screen', async () => {
+    stub(MATCH, match());
+    stubFailure(APPLY, 'the tag writer refused');
+
+    const el = await albumPage();
+
+    await pressBanner(el, 'Apply');
+    await pressConfirm('confirm-accept');
+    await el.updateComplete;
+
+    // Read it the way a person would: the app's one notification
+    // surface, rendered.
+    const host = await fixture<LitElement>('notification-host');
+
+    await host.updateComplete;
+
+    const shown = shadowAll(host, '[data-testid="notification"]').map(
+      (n) => n.textContent ?? '',
+    );
+
+    expect(shown.join(' ')).toContain('could not be');
+  });
+});

frontend/test/components/autotag-requested-folder.test.ts

@@ -0,0 +1,114 @@
+/**
+ * "Review in Autotag" has to land on *that* album.
+ *
+ * The album page can now say the autotagger has a match for what you
+ * are looking at (#28), and the review link is only worth having if it
+ * opens the same album. The queue is sorted by score, so the intended
+ * folder is often near the top — but "often" is a link that sometimes
+ * opens a different album, which is worse than no link.
+ *
+ * Autotag is a **cached primary view**: `index.ts` creates it once and
+ * reuses it, so there is no construction to pass a value to. The
+ * request arrives as an attribute, which is why the interesting part
+ * is that it is *consumed* — an attribute left on a cached element
+ * would reopen the same folder on every later visit to the page.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+import type { LitElement } from 'lit';
+
+import '@components/autotag-view/autotag-view';
+import { flush, resetHarness, stub } from '@test/support/harness';
+import { fixture } from '@test/support/render';
+
+const FOLDERS = 'autotagservice.Service.ListPendingFolders';
+const CANDIDATES = 'autotagservice.Service.GetCandidates';
+
+function folder(groupKey: string, album: string) {
+  return {
+    groupKey,
+    libraryId: 0,
+    libraryName: 'Test',
+    folderSubPath: album,
+    trackCount: 10,
+    albumName: album,
+    albumArtist: 'Tideline',
+    discNumber: 0,
+    status: 'pending',
+    score: groupKey === 'grp-top' ? 0.99 : 0.5,
+    bestMatchReleaseMbid: 'rel-1',
+    synthetic: false,
+    likelyMixedBag: false,
+  };
+}
+
+/** Mount the view and run its activation, as navigation would. */
+async function autotag(groupKey?: string): Promise<LitElement> {
+  const el = await fixture<LitElement>('autotag-view');
+
+  if (groupKey !== undefined) el.setAttribute('group-key', groupKey);
+
+  (el as unknown as { onViewActivate: () => void }).onViewActivate();
+
+  await flush();
+  await el.updateComplete;
+  await flush();
+  await el.updateComplete;
+
+  return el;
+}
+
+/** The folder the view has selected. */
+function selected(el: LitElement): string | undefined {
+  return (el as unknown as { current?: { groupKey: string } }).current
+    ?.groupKey;
+}
+
+beforeEach(() => {
+  resetHarness();
+  stub('autotagservice.Service.StartAutotagQueue', null);
+  stub('autotagservice.Service.GetLocalCoverArt', '');
+  stub('autotagservice.Service.AckLibraryWarning', null);
+  stub('library.Library.GetAllLibrariesWithTrackCounts', []);
+  stub(FOLDERS, [folder('grp-top', 'Loudest Match'), folder('grp-asked', 'Glass Harbour')]);
+  stub(CANDIDATES, {
+    groupKey: 'grp-asked',
+    recommendation: 'strong',
+    localTracks: [],
+    candidates: [],
+    synthetic: false,
+    mixedBag: false,
+  });
+});
+
+describe('arriving at Autotag from an album page', () => {
+  it('opens the folder that was asked for, not the top of the queue', async () => {
+    const el = await autotag('grp-asked');
+
+    expect(selected(el)).toBe('grp-asked');
+  });
+
+  it('still lands on the best pending folder when nothing was asked', async () => {
+    const el = await autotag();
+
+    expect(selected(el)).toBe('grp-top');
+  });
+
+  /**
+   * The view is cached and never unmounts, so an attribute left behind
+   * is a standing instruction: every later visit to Autotag would
+   * reopen an album the user finished with three navigations ago.
+   */
+  it('consumes the request rather than remembering it', async () => {
+    const el = await autotag('grp-asked');
+
+    expect(el.hasAttribute('group-key')).toBe(false);
+
+    // A second visit, with no new request: whatever the user had
+    // selected stays selected.
+    (el as unknown as { onViewActivate: () => void }).onViewActivate();
+    await flush();
+    await el.updateComplete;
+
+    expect(selected(el)).toBe('grp-asked');
+  });
+});

frontend/test/components/confirm-dialog.test.ts

@@ -80,3 +80,42 @@ describe('confirmAction', () => {
     await expect(Promise.all([first, second])).resolves.toEqual([false, true]);
   });
 });
+
+/**
+ * A late `wa-hide` must not answer the next question.
+ *
+ * This is one singleton for every confirmation in the app, and
+ * `wa-dialog` reports its close *asynchronously* — `open = false`
+ * starts an animation and `wa-hide` arrives after it. So a hide
+ * belonging to a question already answered can land after the next one
+ * has opened: the user is asked something, the dialog vanishes on its
+ * own, and the call site is told they said no.
+ *
+ * Found by writing two `confirmAction()` tests in one file — the
+ * second could not be accepted at all, because the first one's hide
+ * had cancelled it before the click landed. In the app it needs two
+ * confirmations close together, which "apply these tags" now makes
+ * reachable.
+ */
+describe('two questions in a row', () => {
+  it('does not let the first one answer the second', async () => {
+    const first = confirmAction({ title: 'First?', message: 'One.' });
+
+    await press('confirm-cancel');
+    await expect(first).resolves.toBe(false);
+
+    const second = confirmAction({ title: 'Second?', message: 'Two.' });
+
+    // Whatever the first dialog's hide animation is still doing, the
+    // second question is on screen and unanswered.
+    await new Promise((r) => setTimeout(r, 0));
+
+    // The title is a `label` on `wa-dialog` and lands in *its* shadow
+    // root; the message is the part this component renders.
+    expect(host().shadowRoot?.textContent ?? '').toContain('Two.');
+
+    await press('confirm-accept');
+
+    await expect(second).resolves.toBe(true);
+  });
+});

frontend/test/components/icon-language.test.ts

@@ -43,6 +43,7 @@ const GOVERNED = [
   'solid/bookmark',
   'regular/bookmark',
   'bars-staggered',
+  'tag',
 ];
 
 /** The one file allowed to say them, plus its own test. */

frontend/test/components/now-playing-phone.test.ts

@@ -0,0 +1,166 @@
+/**
+ * The mini player's links are a desktop affordance.
+ *
+ * `utils/explore-link.ts` makes every track and artist name navigate,
+ * and `utils/queue-source-link.ts` makes "Playing from X" navigate — in
+ * the bottom bar those are a few characters of text at a font size
+ * chosen for a bar, which is not a touch target. Worse, explore-link
+ * holds the navigation for one double-click interval and drops it if a
+ * second click arrives: a gesture that exists so double-clicking a row
+ * can play it, and which means nothing at all on touch.
+ *
+ * So below the shell's phone breakpoint the three render as plain text
+ * and the whole bar's cover art opens the full-screen Now Playing view,
+ * which is where the links live.
+ *
+ * The breakpoint is stubbed rather than emulated for the reason
+ * track-list-phone.test.ts states: this tier's viewport is fixed at
+ * 1280x800 by the runner, and the component reads matchMedia in
+ * connectedCallback precisely so a test can answer it first.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+
+import '@components/now-playing/now-playing';
+import { Events } from '../../src/events';
+import { emit, flush } from '@test/support/harness';
+import { fixture, shadow, shadowAll, text } from '@test/support/render';
+import type { TrackInfo } from '@store/player-store';
+import type { QueueTrack } from '@store/queue-store';
+
+const TRACK: TrackInfo = {
+  fileName: 'ashes.mp3',
+  filePath: '/music/ashes.mp3',
+  trackLength: 215,
+  seekPosition: 0,
+  state: 'playing',
+  title: 'Ashes to Ashes',
+  artist: 'David Bowie',
+  album: 'Scary Monsters',
+  coverArt: '',
+  coverArtSmall: '',
+  coverArtMedium: '',
+  coverArtLarge: '',
+  trackChangeId: 1,
+  artistMbid: '',
+  releaseGroupMbid: '',
+  recordingMbid: '',
+};
+
+function queueTrack(n: number, title: string): QueueTrack {
+  return {
+    id: n,
+    audioFileId: n,
+    filePath: `/music/${n}.mp3`,
+    position: n,
+    title,
+    artist: 'David Bowie',
+    album: 'Scary Monsters',
+    coverArtPath: '',
+    artistMbid: '',
+    releaseGroupMbid: '',
+    recordingMbid: '',
+  };
+}
+
+/** Mount the bar with the phone breakpoint answering `matches`. */
+async function mountAt(phone: boolean) {
+  const real = window.matchMedia.bind(window);
+
+  window.matchMedia = ((q: string) =>
+    q.includes('max-width: 599px')
+      ? {
+          matches: phone,
+          media: q,
+          addEventListener() {},
+          removeEventListener() {},
+        }
+      : real(q)) as typeof window.matchMedia;
+
+  try {
+    const el = await fixture('now-playing');
+
+    emit(Events.TrackChanged, { ...TRACK, trackChangeId: 20 });
+    emit(Events.QueueChanged, {
+      tracks: [queueTrack(1, 'Ashes to Ashes')],
+      currentIndex: 0,
+      source: { type: 'album', id: 7, label: 'Scary Monsters' },
+    });
+    await flush();
+    await el.updateComplete;
+
+    return el;
+  } finally {
+    window.matchMedia = real;
+  }
+}
+
+describe('the mini player on a phone', () => {
+  beforeEach(() => {
+    emit(Events.TrackChanged, { ...TRACK, trackChangeId: 1 });
+  });
+
+  it('renders the title and artist as plain text', async () => {
+    const el = await mountAt(true);
+
+    expect(shadowAll(el, '.explore-link').length).toBe(0);
+
+    // The words are unchanged — this is about what they are, not about
+    // hiding them. A fix that dropped the text would pass an assertion
+    // about links alone.
+    expect(text(el, '[data-testid="now-playing-title"]')).toContain(
+      'Ashes to Ashes',
+    );
+    expect(text(el, '[data-testid="now-playing-artist"]')).toContain(
+      'David Bowie',
+    );
+  });
+
+  it('does not navigate from the source line', async () => {
+    const el = await mountAt(true);
+    const source = shadow<HTMLElement>(el, '[data-testid="now-playing-source"]');
+
+    expect(source?.classList.contains('navigable')).toBe(false);
+
+    let navigated = false;
+    el.addEventListener('navigate', () => {
+      navigated = true;
+    });
+
+    source?.click();
+
+    expect(navigated).toBe(false);
+  });
+
+  it('still says where the queue came from', async () => {
+    const el = await mountAt(true);
+
+    // Dropping the *link* is the change; dropping the information would
+    // be a different and worse one.
+    expect(text(el, '[data-testid="now-playing-source"]')).toBe(
+      'Playing from Scary Monsters',
+    );
+  });
+
+  it('leaves the desktop bar exactly as it was', async () => {
+    const el = await mountAt(false);
+
+    expect(shadowAll(el, '.explore-link').length).toBeGreaterThan(0);
+
+    const source = shadow<HTMLElement>(el, '[data-testid="now-playing-source"]');
+
+    expect(source?.classList.contains('navigable')).toBe(true);
+
+    let detail: unknown;
+    el.addEventListener('navigate', (e) => {
+      detail = (e as CustomEvent).detail;
+    });
+
+    source?.click();
+
+    expect(detail).toEqual({
+      view: 'explore-album-details',
+      localAlbumId: 7,
+      albumName: 'Scary Monsters',
+    });
+  });
+});

frontend/test/components/queue-overlay-mode.test.ts

@@ -0,0 +1,175 @@
+/**
+ * #24 — the queue stops being a column when it cannot afford to be one.
+ *
+ * In flow the panel is `flex-shrink: 0`, so it takes its width *from
+ * the main panel* rather than covering it. Measured against the running
+ * app on the Playlists page, that left 379px of content at 900×600 —
+ * with all three of the page header's actions clipped — 69px at 390px
+ * wide, and **0px** at 320px, where the content was not degraded but
+ * gone.
+ *
+ * The rule is `available - panelWidth >= MAIN_PANEL_FLOOR`, and the
+ * reason it is a computed property rather than a `@media` block is the
+ * third test here: the panel's width is user state, drag-resizable
+ * between 200 and 500px and persisted, so a breakpoint on the viewport
+ * alone is wrong by up to 180px for a user who has widened it — in the
+ * direction that hurts, since a wider queue is exactly when the content
+ * can least afford it.
+ *
+ * The parent is `.content-area`, i.e. the viewport minus the sidebar,
+ * which is why these mount into a sized wrapper rather than into
+ * `document.body`: the width that decides this is the *parent's*, and
+ * `fixture()` would hand the panel the whole test window.
+ */
+import { describe, expect, it, afterEach } from 'vitest';
+
+import '@components/queue-panel/queue-panel';
+import type { QueuePanel } from '@components/queue-panel/queue-panel';
+import { shadow } from '@test/support/render';
+
+const wrappers: HTMLElement[] = [];
+
+afterEach(() => {
+  for (const w of wrappers.splice(0)) w.remove();
+});
+
+/**
+ * Mount a panel inside a parent of a stated width.
+ *
+ * The wrapper is `position: relative` and `display: flex` because that
+ * is what `.content-area` is; the mode is measured from
+ * `parentElement.clientWidth`, so a wrapper that collapses to its
+ * content would measure the panel rather than the space around it.
+ */
+async function panelIn(parentWidth: number): Promise<QueuePanel> {
+  const wrapper = document.createElement('div');
+
+  wrapper.style.cssText = `position: relative; display: flex; width: ${parentWidth}px;`;
+  document.body.append(wrapper);
+  wrappers.push(wrapper);
+
+  const el = document.createElement('queue-panel') as QueuePanel;
+
+  el.open = true;
+  wrapper.append(el);
+
+  await el.updateComplete;
+  await settle(el);
+
+  return el;
+}
+
+/**
+ * A ResizeObserver delivers on a frame, not a microtask, so the mode
+ * lands a frame after the width that decides it.
+ */
+async function settle(el: QueuePanel): Promise<void> {
+  for (let frame = 0; frame < 4; frame += 1) {
+    await new Promise((r) => {
+      requestAnimationFrame(() => r(null));
+    });
+    await el.updateComplete;
+  }
+}
+
+/** Drag the resize handle by `dx`, the way a user widens the panel. */
+async function dragHandleBy(el: QueuePanel, dx: number): Promise<void> {
+  const handle = shadow<HTMLElement>(el, '.resize-handle');
+  const startX = el.getBoundingClientRect().left;
+
+  if (!handle) throw new Error('no resize handle to drag');
+
+  handle.dispatchEvent(
+    new MouseEvent('mousedown', { clientX: startX, bubbles: true }),
+  );
+  document.dispatchEvent(
+    new MouseEvent('mousemove', { clientX: startX - dx, bubbles: true }),
+  );
+  document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
+
+  await settle(el);
+}
+
+describe('the queue panel decides whether it can be a column', () => {
+  it('stays inline while the content can spare the width', async () => {
+    const el = await panelIn(1080);
+
+    expect(el.overlay).toBe(false);
+    expect(el.hasAttribute('overlay')).toBe(false);
+  });
+
+  it('becomes an overlay when it cannot', async () => {
+    const el = await panelIn(700);
+
+    expect(el.overlay).toBe(true);
+    expect(el.hasAttribute('overlay')).toBe(true);
+  });
+
+  /**
+   * The test the media query could not have passed. The parent does not
+   * move; only the user's own panel width does.
+   */
+  it('flips to overlay when the user widens the panel, at a fixed width', async () => {
+    const el = await panelIn(880);
+
+    expect(el.overlay).toBe(false);
+
+    await dragHandleBy(el, 180);
+
+    expect(el.overlay).toBe(true);
+  });
+
+  it('gives an overlay a scrim and a named way out, and an inline panel neither', async () => {
+    const overlaid = await panelIn(700);
+
+    expect(shadow(overlaid, '.scrim')).toBeTruthy();
+
+    const close = shadow(overlaid, '[data-testid="queue-close"]');
+
+    expect(close?.getAttribute('aria-label')).toBe('Close queue');
+
+    const inline = await panelIn(1080);
+
+    expect(inline.shadowRoot?.querySelector('.scrim')).toBeNull();
+    expect(
+      inline.shadowRoot?.querySelector('[data-testid="queue-close"]'),
+    ).toBeNull();
+  });
+
+  it('closes on the scrim, on the close button and on Escape', async () => {
+    for (const close of [
+      (el: QueuePanel) => shadow<HTMLElement>(el, '.scrim')?.click(),
+      (el: QueuePanel) =>
+        shadow<HTMLElement>(el, '[data-testid="queue-close"]')?.click(),
+      () =>
+        document.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+        ),
+    ]) {
+      const el = await panelIn(700);
+
+      expect(el.open).toBe(true);
+
+      close(el);
+      await el.updateComplete;
+
+      expect(el.open).toBe(false);
+    }
+  });
+
+  /**
+   * Escape belongs to the overlay, not to the queue. An inline panel is
+   * beside the content rather than over it, so there is nothing to
+   * dismiss and the key has to reach whatever else wants it.
+   */
+  it('leaves Escape alone while inline', async () => {
+    const el = await panelIn(1080);
+
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+    );
+    await el.updateComplete;
+
+    expect(el.open).toBe(true);
+  });
+});

lefthook.yml

@@ -63,8 +63,17 @@ pre-commit:
       root: "frontend/"
       run: node scripts/check-css-literals.mjs
 
+# Deliberately sequential, unlike pre-commit.  `go test -race`
+# saturates every core for the better part of a minute and the UI tier
+# is a real browser with wall-clock timeouts, so run together the
+# browser loses: setup took 106s inside the hook against 63s
+# standalone, and a different suite failed each time -- three suites
+# failing to fetch setup.ts from Vitest's own dev server on one run, a
+# 15s "did not mount itself" on the next, against a suite that passes
+# 898/898 on its own. A gate that fails at random is not a gate. The
+# ~15s saved is not worth it.
 pre-push:
-  parallel: true
+  parallel: false
   commands:
     go-test:
       glob: "*.go"