docs(agent): drop #204's workaround from the baseline rule

#204 landed first, so the ui-tier rule can name `make ui-visual-update
UI_ARGS=<path>` rather than the raw vitest invocation it needed while
the recipe swallowed its filter.

.pi/skills/yellowjacket-dev/SKILL.md

@@ -158,7 +158,7 @@ only climb when it cannot.
 | You changed | Run | Cost |
 |---|---|---|
 | A Lit component, a store, the shortcut service | `make ui-test` | ~2 s, no app |
-| …and it renders differently | `make ui-visual` | + 6 baselines, opt-in |
+| …and it renders differently | `make ui-visual` | + 10 baselines, opt-in, never gates |
 | Any Go code | `make test` | 3 passes, ~2 min |
 | A service that emits events | `make test` — assert on the payload, see `backend/queue/emit_test.go` | in-process, no app |
 | A bound method or a bound struct field | `make bindings` then `make ui-test` | ~1.5 s + 2 s |
@@ -180,6 +180,13 @@ less than it looks.)
 
 Two rules about climbing:
 
+- **If you moved a component's geometry, run `make ui-visual` and
+  refresh that component's baseline in the same commit.** Nothing else
+  will: it is the one tier in this repo no hook and no CI job runs, and
+  it cannot be one — its references are machine-specific, measured in
+  [references/ui-tier.md](references/ui-tier.md). Four of them drifted
+  across three merges before anyone noticed (#196). Read the image;
+  never bless a reference you did not cause.
 - **A component test passing is not the app rendering.** If you touched
   anything in `frontend/src`, verify it in the real app too — start it
   headless, `screenshot --filename=/tmp/shot.png`, and *read the PNG*.

.pi/skills/yellowjacket-dev/references/ui-tier.md

@@ -78,9 +78,58 @@ synchronously.
   Microtasks and not a timer, deliberately: a timer hangs forever under
   the suites that install fake ones.
 
-Visual baselines are font-hinting and compositing sensitive, which is
+## The visual tier does not gate, and that is measured (#196)
-why they are opt-in: they only mean anything on the machine that
+
-recorded them.
+`make ui-visual` is the same suite with nine `toMatchScreenshot`
+baselines switched on. **Nothing runs it but a person**, deliberately,
+and the reason is a number rather than a preference: the committed
+baselines were recorded on Arch, and replayed in a bare `ubuntu:24.04`
+container — CI's `check` image — three of them fail for reasons that
+have nothing to do with any component.
+
+| baseline | Arch | ubuntu:24.04 |
+|---|---|---|
+| `page-header` filtered-by-search | passes | ratio 0.03 differ, against a 0.02 allowance |
+| `track-info` | passes | ratio 0.03 differ |
+| `seek-bar` | 1152×18 | 1152×17 |
+
+The two references that were genuinely stale did not even agree about
+their *new* size — `now-playing` renders 1152×65 on Arch and 1152×64 in
+the container. So moving CI's `check` job from `make ui-test` to
+`make ui-visual` is not a one-line change: it needs a second,
+container-recorded baseline set, which every local run would then fail
+against. That is the same trap the other way round, and a pre-push hook
+is the same fault again — one machine's baselines against everybody
+else's renderer.
+
+So the tier stays local and opt-in, and the rule that replaces the gate
+is:
+
+- **A change that moves a component's geometry refreshes that
+  component's reference in the same commit, having read the image.**
+  Look at the PNG; the dimensions in the failure message are the cheap
+  half of the answer.
+- **Never refresh a reference you did not cause.** #196 exists because
+  four of them drifted across three unrelated merges, and every red run
+  made the next person likelier to stop running the tier than to read
+  it.
+- **State the world the shot is taken in.** The stores are singletons,
+  so a visual case that sets nothing photographs whatever the previous
+  case left behind — which is how the sidebar's baseline came to have
+  Tracks lit and `now-playing`'s to be playing from a dynamic mix.
+- **Record one file with `make ui-visual-update UI_ARGS=<path>`**, and
+  check `git status` before committing either way. That filter is only
+  honoured since #204: the recipe was a bare `--update`, and vitest
+  takes the following positional as the flag's value, so the path was
+  swallowed and *every* baseline was re-recorded — blessing any stale
+  one in silence.
+
+What the tier is worth, for the record: it is a *layout* check, blind to
+colour (the component tier has no `:root`, so it renders the fallbacks —
+`make ui-visual` passed unchanged through a whole palette rewrite,
+twice), and it has caught one thing nothing else could — swapping
+`library-status-indicator`'s `<button>` for a `<span>` lost the UA
+stylesheet's `box-sizing` and grew the badge 36→38px.
 
 ## Bindings
 

.planning/NOTES.md

@@ -4912,38 +4912,3 @@ bridge leaves the wizard up with its "Get Started" button correctly
 disabled — it gates on a directory chosen *in the wizard*, and the
 existing-library check runs once, on mount. A reload clears it. Nothing
 is broken; it cost twenty minutes of believing a tap had been swallowed.
-
-## The tap highlight is one inherited declaration (measured 2026-08-24)
-
-`-webkit-tap-highlight-color` is an **inherited** property, and an
-inherited property crosses a shadow boundary — so `html { … :
-transparent }` in `index.css` reaches every shadow root in the app and
-no component needs a rule of its own. Measured in the running app
-(Chromium, `app-sidebar`'s `li button`, which is three shadow roots
-from the document): `rgba(0, 0, 0, 0)` with the rule, and
-`rgba(0, 0, 0, 0.18)` with it removed. That 0.18 grey over the bounding
-rect of whatever was tapped is what #54 reported.
-
-The same argument was already spent once and is worth not
-re-deriving: `index.css`'s first rule is `*, *::before, *::after {
-user-select: none }`, which for the same reason already covers the
-shadow roots — #54's Findings ask for `user-select` on interactive
-surfaces and it has been done since before the issue was filed.
-
-**What the highlight was, on the surfaces that had nothing else, is the
-press feedback.** Measured on a track row with the press rule removed
-and the button held down: `rgba(255, 255, 255, 0.05)` — the *hover*
-tint, arriving because the pointer is over the row, which is a
-synthesised hover on a phone and outlives the press. With the rule:
-0.12 while held, and the neighbouring row unchanged. So the press state
-is part of removing the highlight rather than a separate polish item,
-and the hover tints on those same surfaces moved behind
-`(hover: hover) and (pointer: fine)`, which is #68's gate applied to a
-tint rather than to a revealed control.
-
-**`touch-action: manipulation` was considered and not taken.** The
-Findings offer it for the 300ms tap delay; this app's viewport is
-`width=device-width`, which is what removes that delay in Chrome, so
-the stated benefit is not there to win. What it would change is the
-gesture stack #63 tuned by measurement on the device (`pan-y` plus a
-non-passive `preventDefault`), and that is not measurable from here.

CLAUDE.md

@@ -262,6 +262,26 @@ real store code. A binding carries an **ID**, not a name
 `yellowjacket/backend/home.Service.GetShelves`), so the fake derives
 that map from the generated tree rather than writing it down.
 
+**A test file does not get its own origin, so `setup.ts` clears
+`localStorage` between tests.** `@vitest/browser-playwright` opens one
+BrowserContext per session and runs several files in it one after
+another, so everything a component persists — the track list's sort and
+column widths, the cover size, `now-playing`'s scroll mode — is still
+there when the next file mounts the same component. Which files share a
+tab, and in what order, changes run to run, so the symptom is a spec
+that fails about one test in three and passes every time it is run on
+its own: #138 cost three scheduled runs, one of them a PR whose diff
+held no frontend code at all. Measured on the build before the fix, a
+single full run started **24** tests with storage already set. Two
+things follow. The clear is safe precisely because the leak is
+sequential — files in a session do not overlap, so it cannot wipe
+storage a concurrently-running file is in the middle of using — and it
+belongs in `setup.ts` rather than in the specs that write, because the
+spec that *reads* is never the one that knows. And a spec whose
+assertion depends on an order still **states that order** rather than
+inheriting a default, or the next change to a default is the same
+mystery again.
+
 **`frontend/bindings/` is generated by `wails3`, not `go generate`**, so
 the pre-commit codegen check does not cover it. `make bindings-check`
 (~3.5 s warm, ~20 s on a cold build cache, also a pre-commit hook)
@@ -1592,51 +1612,6 @@ sits inside which media query — and says so; the regression it exists
 for is someone hoisting a rule out of its query as a tidy-up, which
 nothing on a desktop renders differently.
 
-**The web view's own tap highlight is gone, and what replaced it is a
-press state** (#54). `-webkit-tap-highlight-color` is an *inherited*
-property, so one declaration on `html` in `index.css` reaches every
-shadow root in the app and takes away the grey box a phone drew over
-the bounding rect of whatever was tapped — measured at
-`rgba(0, 0, 0, 0.18)` with the rule removed. `user-select` is the same
-argument and was already done: `index.css`'s first rule is `*, *::before,
-*::after { user-select: none }`, which reaches the shadow roots for the
-same reason.
-
-Three things about it are load-bearing.
-
-**Removing the highlight removes the only touch feedback several
-surfaces had**, so the press state is part of the same change rather
-than a later polish item: the four lists' rows, `bottom-nav`'s tabs,
-`app-sidebar`'s destinations (which are also the phone's "More" sheet)
-and the shared `contextMenuStyles` menu item all take
-`--yj-press-overlay` on `:active`. The cards already had one
-(`transform: scale(0.97)`) and are untouched.
-
-**A press selector carries a state class or it does nothing where it
-matters.** A row is `.track-row.selected.active`, so a bare
-`.track-row:active` is one class short of it and the press is invisible
-on exactly the row a phone is most likely to press — the one it has
-just selected. The rule is last and lists `.selected:active` /
-`.active:active` beside the bare form.
-
-**And the hover tints on those same surfaces moved behind
-`(hover: hover) and (pointer: fine)`**, which is #68's gate applied to
-a tint rather than to a revealed control and for the same mechanism: a
-hold synthesises a hover in the WebView, so an ungated tint arrives
-because a finger touched the row and stays there after it has gone —
-measured, since with the press rule removed a held row reads
-`rgba(255, 255, 255, 0.05)`, the hover tint, rather than nothing.
-`touch-action: manipulation` was considered and declined: the 300ms
-delay it is offered for is already absent on a `width=device-width`
-viewport, and what it would really change is the gesture stack #63
-tuned by measurement on a device this session cannot measure.
-
-The split of tiers is `hover-affordance.test.ts`'s: `press-feedback.
-test.ts` reads the parsed stylesheet, because `:active` cannot be
-forced there either, and `native-touch-feel.spec.ts` *measures* — it
-holds the button down on a real row of the real list, and it is the
-only tier that loads `index.css` at all.
-
 Three lists had no focused row to open a menu *from* — the queue panel
 and both playlist detail views — and gained a roving tab stop through
 `utils/roving-rows.ts`. **`track-list` deliberately does not use it**:
@@ -2594,11 +2569,38 @@ Five things about it are load-bearing, and four of them fail silently:
   correctly. Confidently wrong is worse than absent here, which is the
   same rule `Known` exists for.
 
-One gap this did not close, and it is older: **`dhowden/tag` has no
+One gap this did not close and #104 did: **`dhowden/tag` has no RIFF
-RIFF reader**, so nothing the tag writer puts in a WAV's `id3 ` chunk
+reader**, so nothing the tag writer put in a WAV's `id3 ` chunk was
-is visible to `metadata.ExtractTags` — not the totals and not the title
+visible to `metadata.ExtractTags` — not the totals and not the title
-either. `wav_test.go` reads that chunk itself, which is why no test
+either, on files the app itself had just tagged. `wav_test.go` read
-ever noticed.
+that chunk itself, which is why no test noticed: a round trip asserted
+through the writer's own parser is a test of the writer.
+
+`backend/riff` is where the container is now read, and it is its own
+package because the alternative is an import cycle — `tagwriter`
+imports `metadata`, so `metadata` cannot reach back for `parseRIFF`.
+`backend/tagtotals` is the precedent.
+
+Three things about it are load-bearing. **The two readers are
+deliberately different**: `Parse` holds every chunk in memory, which is
+what rewriting a file needs, and a WAV's audio *is* a chunk — so the
+scan path uses `ID3Chunk`, which seeks over what it is not looking for.
+**The container decides, before `tag.ReadFrom` rather than after it
+fails**, because that library's last resort is an ID3v1 trailer and a
+WAV carrying both would otherwise be read by the wrong one. And **an
+untagged WAV is a file with no tags, not a file with a problem**: no
+chunk, an RF64 container or a tag holding no frames all read as empty
+metadata with no `TagReadWarning`, since the scanner's filename
+fallback is the right answer and a warning would put a fault on a file
+that has none.
+
+The gap was pinned by a test that said so, which failed the moment the
+reader learned and carried the instructions for what to update in its
+own comment. So it is deleted, `TestFixturesMatchManifest` no longer
+skips `wav`, and `totals_test.go`'s WAV case goes through
+`metadata.ExtractTags` like the other three formats. The fixture
+library's two WAV tracks scan with their tags and their cover now,
+which is a change to what every seeded tier sees.
 
 **The absence is what gets marked, not the presence.** The tracklist
 put a green tick against every owned track and a legend underneath
@@ -3469,6 +3471,25 @@ Pre-commit hooks verify generated code is fresh — always run `make generate` a
 Tests use `database.NewTestDB(t)` for in-memory SQLite, built by the same
 `applySchema` production uses so the two cannot diverge. Test audio fixtures live in `test_data/music_library_test/`. Table-driven tests are the norm.
 
+**`make ui-visual` is the one tier nothing but a person runs, and it
+cannot become one.** Its ten `toMatchScreenshot` baselines were recorded
+on a developer's Arch box; replayed in a bare `ubuntu:24.04` container
+— CI's `check` image — three of them fail on font metrics and
+compositing alone (`track-info` and one `page-header` shot at a 0.03
+mismatch ratio against a 0.02 allowance, `seek-bar` one pixel shorter),
+and two components disagree about their own height between the two
+machines. So CI keeps running `make ui-test`, which is the same suite
+with the comparisons off, and a pre-push hook would be the same fault
+with the machines swapped. What replaces the gate is a rule, in
+`.pi/skills/yellowjacket-dev/references/ui-tier.md`: **a change that
+moves a component's geometry refreshes that component's baseline in the
+same commit, having read the image, and never one it did not cause**.
+That is #196, which was four stale references accumulated across three
+unrelated merges — a red tier nobody could read, which is how it stayed
+red. A visual case must also **state the world it photographs**, since
+the stores are singletons and a case that sets nothing records whatever
+the previous one left in them.
+
 ## Git Workflow
 
 Feature branches and PRs are the only way in: **`main` is a protected

Makefile

@@ -160,8 +160,11 @@ ui-watch: ## Same suite, in watch mode
 ui-visual: ## Run the suite including screenshot comparisons
 	@cd frontend && YJ_VISUAL=1 npx vitest run $(UI_ARGS)
 
-ui-visual-update: ## Re-record the screenshot baselines
+# `--update=true`, never a bare `--update`: vitest takes the following
-	@cd frontend && YJ_VISUAL=1 npx vitest run --update $(UI_ARGS)
+# positional as the flag's value, so `--update <path>` swallows the path
+# and re-records every baseline in the repo instead of the one named.
+ui-visual-update: ## Re-record the screenshot baselines (UI_ARGS=<path> to filter)
+	@cd frontend && YJ_VISUAL=1 npx vitest run --update=true $(UI_ARGS)
 
 ui-setup: ## Install the Vitest browser provider's own Chromium (once)
 	@cd frontend && pnpm install && npx playwright install chromium

backend/metadata/tags.go

@@ -74,6 +74,14 @@ func ExtractTags(path string) (*TrackMetadata, error) {
 
 // ExtractTagsFromReader reads metadata from an io.ReadSeeker.
 func ExtractTagsFromReader(r io.ReadSeeker) (*TrackMetadata, error) {
+	// The container decides, so this is asked before tag.ReadFrom and
+	// not after its failure: a WAV's tags live in a RIFF chunk that
+	// dhowden/tag cannot see, and its fallback -- an ID3v1 trailer --
+	// would otherwise outrank them.
+	if meta, ok := wavTags(r); ok {
+		return meta, nil
+	}
+
 	m, err := tag.ReadFrom(r)
 	if err != nil {
 		// No tags found is not necessarily an error - return empty metadata

backend/metadata/tags_wav.go

@@ -0,0 +1,68 @@
+package metadata
+
+import (
+	"bytes"
+	"errors"
+	"fmt"
+	"io"
+	"strings"
+
+	"yellowjacket/backend/riff"
+)
+
+// wavTags reads the ID3v2 tag a WAV carries in its RIFF "id3 " chunk,
+// which is where backend/tagwriter puts it and where dhowden/tag --
+// having no RIFF reader at all -- cannot look.  Without this a WAV
+// scans as an untagged file however carefully it was tagged.
+//
+// ok is false when r is not a RIFF/WAVE container, and the read
+// position is restored either way so the caller can carry on.
+func wavTags(r io.ReadSeeker) (*TrackMetadata, bool) {
+	start, err := r.Seek(0, io.SeekCurrent)
+	if err != nil {
+		return nil, false
+	}
+
+	id3Data, chunkErr := riff.ID3Chunk(r)
+
+	if _, err := r.Seek(start, io.SeekStart); err != nil {
+		return nil, false
+	}
+
+	switch {
+	case chunkErr == nil:
+		return wavTagsFrom(id3Data), true
+
+	// Not ours to read: let the ordinary dispatch have the file.
+	case errors.Is(chunkErr, riff.ErrNotRIFF), errors.Is(chunkErr, riff.ErrNotWAVE):
+		return nil, false
+
+	// A RIFF container we cannot get a tag out of -- no chunk, an RF64
+	// file, a truncated header.  That is a file with no readable tags,
+	// which is what the scanner's filename fallback is for.
+	default:
+		return &TrackMetadata{}, true
+	}
+}
+
+// wavTagsFrom parses the bytes of a WAV's ID3v2 chunk.
+func wavTagsFrom(id3Data []byte) *TrackMetadata {
+	meta, err := extractID3v2Lenient(bytes.NewReader(id3Data))
+	if err != nil {
+		// A tag holding no frames is not a damaged tag: writing every
+		// field back out empty leaves one, and warning about it would
+		// put a fault on a file that has none.
+		if errors.Is(err, ErrTagsUnreadable) {
+			return &TrackMetadata{}
+		}
+
+		return &TrackMetadata{
+			TagReadWarning: fmt.Errorf("%w: %w", ErrTagsUnreadable, err),
+		}
+	}
+
+	// extractID3v2Lenient names MP3, being the recovery path for one.
+	meta.FileFormat = strings.ToUpper(strings.TrimPrefix(string(WAV), "."))
+
+	return meta
+}

backend/riff/riff.go

@@ -0,0 +1,183 @@
+// Package riff reads the chunk layout of a RIFF/WAVE container.
+//
+// It exists because both halves of WAV tagging need it and neither can
+// import the other: backend/tagwriter writes a WAV's tags into a RIFF
+// "id3 " chunk and already imports backend/metadata, which is what has
+// to read them back out.  backend/tagtotals is the precedent.
+//
+// The two readers here are deliberately different.  Parse holds every
+// chunk's data in memory, which is what rewriting a file needs; a WAV's
+// audio *is* the "data" chunk, so doing that on the scan path would
+// read every library file in full.  ID3Chunk seeks over what it is not
+// looking for instead.  Both walk the same headers.
+package riff
+
+import (
+	"bytes"
+	"encoding/binary"
+	"errors"
+	"fmt"
+	"io"
+	"strings"
+)
+
+// Sentinel errors describing a container this package will not read.
+var (
+	ErrRF64NotSupported = errors.New("RF64 files are not yet supported")
+	ErrNotRIFF          = errors.New("not a RIFF file")
+	ErrNotWAVE          = errors.New("not a WAVE file")
+	ErrNoID3Chunk       = errors.New("no ID3 chunk in RIFF file")
+)
+
+// Chunk holds a single RIFF sub-chunk (ID + raw data).
+type Chunk struct {
+	ID   [4]byte
+	Data []byte
+}
+
+// IsID3 reports whether id is that of an ID3v2 RIFF chunk.  Both
+// lowercase "id3 " and uppercase "ID3 " are accepted.
+func IsID3(id [4]byte) bool {
+	return strings.ToLower(string(id[:3])) == "id3"
+}
+
+// Parse reads every RIFF sub-chunk from r, in order, starting at the
+// reader's current position.  It rejects RF64 files and non-WAVE
+// containers with descriptive errors.  The parser is lenient: it
+// tolerates a missing final padding byte and ignores the declared
+// RIFF size.
+func Parse(r io.Reader) ([]Chunk, error) {
+	if err := readContainer(r); err != nil {
+		return nil, err
+	}
+
+	var chunks []Chunk
+
+	for {
+		id, size, err := nextHeader(r)
+		if errors.Is(err, io.EOF) {
+			break
+		}
+
+		if err != nil {
+			return nil, err
+		}
+
+		data := make([]byte, size)
+		if _, err := io.ReadFull(r, data); err != nil {
+			return nil, fmt.Errorf("read chunk data for %q: %w", id, err)
+		}
+
+		chunks = append(chunks, Chunk{ID: id, Data: data})
+
+		// Odd-length chunks have a padding byte.  Lenient: if the
+		// read fails (e.g. EOF), just break rather than error.
+		if size%2 != 0 {
+			var pad [1]byte
+
+			if _, err := r.Read(pad[:]); err != nil {
+				break
+			}
+		}
+	}
+
+	return chunks, nil
+}
+
+// ID3Chunk returns the payload of the ID3v2 chunk of the RIFF/WAVE
+// container at the reader's current position, seeking over every other
+// chunk rather than reading it.  It returns ErrNoID3Chunk when the
+// container carries no such chunk, and leaves the read position
+// unspecified either way.
+func ID3Chunk(r io.ReadSeeker) ([]byte, error) {
+	if err := readContainer(r); err != nil {
+		return nil, err
+	}
+
+	for {
+		id, size, err := nextHeader(r)
+		if errors.Is(err, io.EOF) {
+			return nil, ErrNoID3Chunk
+		}
+
+		if err != nil {
+			return nil, err
+		}
+
+		if !IsID3(id) {
+			// Odd-length chunks carry a padding byte.  Seeking past
+			// the end of the file is not an error; the next header
+			// read is what reports the end.
+			if _, err := r.Seek(int64(size)+int64(size%2), io.SeekCurrent); err != nil {
+				return nil, fmt.Errorf("skip chunk %q: %w", id, err)
+			}
+
+			continue
+		}
+
+		// Copied rather than allocated up front: a truncated file is
+		// free to declare a chunk larger than the whole of itself.
+		var data bytes.Buffer
+		if _, err := io.CopyN(&data, r, int64(size)); err != nil {
+			return nil, fmt.Errorf("read chunk data for %q: %w", id, err)
+		}
+
+		return data.Bytes(), nil
+	}
+}
+
+// readContainer consumes the 12-byte RIFF/WAVE header at the reader's
+// current position.
+func readContainer(r io.Reader) error {
+	var magic [4]byte
+	if _, err := io.ReadFull(r, magic[:]); err != nil {
+		return fmt.Errorf("read RIFF magic: %w", err)
+	}
+
+	if string(magic[:]) == "RF64" {
+		return ErrRF64NotSupported
+	}
+
+	if string(magic[:]) != "RIFF" {
+		return fmt.Errorf("%w: got %q", ErrNotRIFF, magic)
+	}
+
+	// Read (and discard) RIFF size — lenient, do not enforce.
+	var riffSize uint32
+	if err := binary.Read(r, binary.LittleEndian, &riffSize); err != nil {
+		return fmt.Errorf("read RIFF size: %w", err)
+	}
+
+	var form [4]byte
+	if _, err := io.ReadFull(r, form[:]); err != nil {
+		return fmt.Errorf("read WAVE form type: %w", err)
+	}
+
+	if string(form[:]) != "WAVE" {
+		return fmt.Errorf("%w: got %q", ErrNotWAVE, form)
+	}
+
+	return nil
+}
+
+// nextHeader reads one sub-chunk header.  It returns io.EOF once the
+// chunks are exhausted, including for a header cut short.
+func nextHeader(r io.Reader) ([4]byte, uint32, error) {
+	var id [4]byte
+
+	_, err := io.ReadFull(r, id[:])
+	if errors.Is(err, io.EOF) || errors.Is(err, io.ErrUnexpectedEOF) {
+		return id, 0, io.EOF
+	}
+
+	if err != nil {
+		return id, 0, fmt.Errorf("read chunk ID: %w", err)
+	}
+
+	var size uint32
+	if err := binary.Read(r, binary.LittleEndian, &size); err != nil {
+		return id, 0, fmt.Errorf("read chunk size for %q: %w", id, err)
+	}
+
+	return id, size, nil
+}

backend/riff/riff_test.go

@@ -0,0 +1,211 @@
+package riff_test
+
+import (
+	"bytes"
+	"encoding/binary"
+	"errors"
+	"testing"
+
+	"yellowjacket/backend/riff"
+)
+
+// chunk is one sub-chunk to put in a test container.
+type chunk struct {
+	id   string
+	data []byte
+}
+
+// buildRIFF assembles a container from magic, form type and chunks,
+// padding odd-length chunks the way a writer must.
+func buildRIFF(magic, form string, chunks []chunk) []byte {
+	var body bytes.Buffer
+
+	body.WriteString(form)
+
+	for _, c := range chunks {
+		body.WriteString(c.id)
+		_ = binary.Write(&body, binary.LittleEndian, uint32(len(c.data)))
+		body.Write(c.data)
+
+		if len(c.data)%2 != 0 {
+			body.WriteByte(0)
+		}
+	}
+
+	var out bytes.Buffer
+
+	out.WriteString(magic)
+	_ = binary.Write(&out, binary.LittleEndian, uint32(body.Len()))
+	out.Write(body.Bytes())
+
+	return out.Bytes()
+}
+
+func TestID3Chunk_FindsTheTagPastTheAudio(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name   string
+		chunks []chunk
+		want   string
+	}{
+		{
+			name: "after an odd-length chunk",
+			chunks: []chunk{
+				{id: "fmt ", data: make([]byte, 16)},
+				{id: "LIST", data: []byte("INFOodd")},
+				{id: "data", data: make([]byte, 200)},
+				{id: "id3 ", data: []byte("ID3vTAG")},
+			},
+			want: "ID3vTAG",
+		},
+		{
+			// The chunk ID is written both ways in the wild, and the
+			// writer accepts either, so the reader must too.
+			name: "uppercase ID3",
+			chunks: []chunk{
+				{id: "data", data: make([]byte, 8)},
+				{id: "ID3 ", data: []byte("upper")},
+			},
+			want: "upper",
+		},
+		{
+			name: "first chunk",
+			chunks: []chunk{
+				{id: "id3 ", data: []byte("first")},
+				{id: "data", data: make([]byte, 8)},
+			},
+			want: "first",
+		},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			t.Parallel()
+
+			r := bytes.NewReader(buildRIFF("RIFF", "WAVE", tc.chunks))
+
+			got, err := riff.ID3Chunk(r)
+			if err != nil {
+				t.Fatalf("ID3Chunk: %v", err)
+			}
+
+			if string(got) != tc.want {
+				t.Errorf("chunk data: got %q, want %q", got, tc.want)
+			}
+		})
+	}
+}
+
+func TestID3Chunk_RejectsWhatItCannotRead(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name  string
+		bytes []byte
+		want  error
+	}{
+		{
+			name:  "no ID3 chunk",
+			bytes: buildRIFF("RIFF", "WAVE", []chunk{{id: "data", data: []byte{1, 2}}}),
+			want:  riff.ErrNoID3Chunk,
+		},
+		{
+			name:  "no chunks at all",
+			bytes: buildRIFF("RIFF", "WAVE", nil),
+			want:  riff.ErrNoID3Chunk,
+		},
+		{
+			name:  "not RIFF",
+			bytes: []byte("ID3\x03\x00\x00\x00\x00\x00\x00\x00\x00"),
+			want:  riff.ErrNotRIFF,
+		},
+		{
+			name:  "not WAVE",
+			bytes: buildRIFF("RIFF", "AVI ", []chunk{{id: "id3 ", data: []byte("x")}}),
+			want:  riff.ErrNotWAVE,
+		},
+		{
+			name:  "RF64",
+			bytes: buildRIFF("RF64", "WAVE", []chunk{{id: "id3 ", data: []byte("x")}}),
+			want:  riff.ErrRF64NotSupported,
+		},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			t.Parallel()
+
+			_, err := riff.ID3Chunk(bytes.NewReader(tc.bytes))
+			if !errors.Is(err, tc.want) {
+				t.Errorf("ID3Chunk error: got %v, want %v", err, tc.want)
+			}
+		})
+	}
+}
+
+// A file cut short mid-chunk is a file with no tag, not a reason to
+// allocate the size it claims: the declared size is four bytes any
+// truncation can leave saying 4 GB.
+func TestID3Chunk_ToleratesATruncatedFile(t *testing.T) {
+	t.Parallel()
+
+	full := buildRIFF("RIFF", "WAVE", []chunk{
+		{id: "data", data: make([]byte, 64)},
+		{id: "id3 ", data: []byte("tag")},
+	})
+
+	t.Run("cut inside the audio", func(t *testing.T) {
+		t.Parallel()
+
+		_, err := riff.ID3Chunk(bytes.NewReader(full[:32]))
+		if !errors.Is(err, riff.ErrNoID3Chunk) {
+			t.Errorf("ID3Chunk error: got %v, want %v", err, riff.ErrNoID3Chunk)
+		}
+	})
+
+	t.Run("cut inside the tag", func(t *testing.T) {
+		t.Parallel()
+
+		if _, err := riff.ID3Chunk(bytes.NewReader(full[:len(full)-2])); err == nil {
+			t.Error("ID3Chunk: got nil error for a truncated tag chunk")
+		}
+	})
+}
+
+// Parse is the writer's half and reads every chunk into memory, which
+// is what preserving them needs.
+func TestParse_ReadsEveryChunkInOrder(t *testing.T) {
+	t.Parallel()
+
+	raw := buildRIFF("RIFF", "WAVE", []chunk{
+		{id: "fmt ", data: make([]byte, 16)},
+		{id: "LIST", data: []byte("INFOodd")},
+		{id: "id3 ", data: []byte("tag")},
+	})
+
+	chunks, err := riff.Parse(bytes.NewReader(raw))
+	if err != nil {
+		t.Fatalf("Parse: %v", err)
+	}
+
+	want := []string{"fmt ", "LIST", "id3 "}
+	if len(chunks) != len(want) {
+		t.Fatalf("chunk count: got %d, want %d", len(chunks), len(want))
+	}
+
+	for i, id := range want {
+		if got := string(chunks[i].ID[:]); got != id {
+			t.Errorf("chunk %d: got %q, want %q", i, got, id)
+		}
+	}
+
+	if !riff.IsID3(chunks[2].ID) || string(chunks[2].Data) != "tag" {
+		t.Errorf("id3 chunk: got %q", chunks[2].Data)
+	}
+
+	// The padding byte after an odd chunk is not part of its data.
+	if string(chunks[1].Data) != "INFOodd" {
+		t.Errorf("odd chunk data: got %q, want %q", chunks[1].Data, "INFOodd")
+	}
+}

backend/tagwriter/totals_test.go

@@ -13,9 +13,10 @@ import (
 // indistinguishable from never having written one.  So these assert the
 // round trip through the *reader the scan uses*, not the bytes.
 //
-// WAV is the exception and it is not this change's: dhowden/tag has no
+// WAV was the exception until #104 -- dhowden/tag has no RIFF reader,
-// RIFF reader at all, so metadata.ExtractTags cannot see a WAV's ID3
+// so metadata.ExtractTags could not see a WAV's ID3 chunk and this
-// chunk -- which is why every other test here reads that chunk itself.
+// case read the chunk itself, which is a test of the writer wearing
+// the shape of a round trip.  All four go through the scanner now.
 func TestWriteTotals_RoundTripsInEveryFormat(t *testing.T) {
 	t.Parallel()
 
@@ -91,7 +92,7 @@ func TestWriteTotals_RoundTripsInEveryFormat(t *testing.T) {
 		},
 		{
 			name: "wav",
-			read: readWavID3Tags,
+			read: viaScanner,
 			write: func(t *testing.T, dir string) string {
 				t.Helper()
 

backend/tagwriter/wav.go

@@ -8,116 +8,22 @@ import (
 	"io"
 	"log/slog"
 	"os"
-	"strings"
 
 	id3v2 "github.com/bogem/id3v2/v2"
 
 	"yellowjacket/backend/fileutil"
+	"yellowjacket/backend/riff"
 )
 
-// Sentinel errors for WAV RIFF operations.
+// errFileTooLargeForWAV is the one RIFF error that belongs to the
-var (
+// writer; reading rejects a container in backend/riff.
-	errRF64NotSupported   = errors.New("RF64 files are not yet supported")
+var errFileTooLargeForWAV = errors.New("file too large for WAV format (>4GB)")
-	errNotRIFF            = errors.New("not a RIFF file")
-	errNotWAVE            = errors.New("not a WAVE file")
-	errFileTooLargeForWAV = errors.New("file too large for WAV format (>4GB)")
-)
-
-// riffChunk holds a single RIFF sub-chunk (ID + raw data).
-type riffChunk struct {
-	id   [4]byte
-	data []byte
-}
-
-// parseRIFF reads all RIFF sub-chunks from r.  It rejects RF64 files
-// and non-WAVE containers with descriptive errors.  The parser is
-// lenient on read: it tolerates missing padding bytes and ignores
-// the declared RIFF size.
-func parseRIFF(r io.ReadSeeker) ([]riffChunk, error) {
-	// Read 4-byte container magic.
-	var magic [4]byte
-	if _, err := io.ReadFull(r, magic[:]); err != nil {
-		return nil, fmt.Errorf("read RIFF magic: %w", err)
-	}
-
-	if string(magic[:]) == "RF64" {
-		return nil, errRF64NotSupported
-	}
-
-	if string(magic[:]) != "RIFF" {
-		return nil, fmt.Errorf("%w: got %q", errNotRIFF, magic)
-	}
-
-	// Read (and discard) RIFF size — lenient, do not enforce.
-	var riffSize uint32
-	if err := binary.Read(r, binary.LittleEndian, &riffSize); err != nil {
-		return nil, fmt.Errorf("read RIFF size: %w", err)
-	}
-
-	// Read 4-byte form type.
-	var form [4]byte
-	if _, err := io.ReadFull(r, form[:]); err != nil {
-		return nil, fmt.Errorf("read WAVE form type: %w", err)
-	}
-
-	if string(form[:]) != "WAVE" {
-		return nil, fmt.Errorf("%w: got %q", errNotWAVE, form)
-	}
-
-	// Read sub-chunks until EOF.
-	var chunks []riffChunk
-
-	for {
-		var chunkID [4]byte
-
-		_, err := io.ReadFull(r, chunkID[:])
-		if errors.Is(err, io.EOF) || errors.Is(err, io.ErrUnexpectedEOF) {
-			break
-		}
-
-		if err != nil {
-			return nil, fmt.Errorf("read chunk ID: %w", err)
-		}
-
-		var chunkSize uint32
-		if err := binary.Read(r, binary.LittleEndian, &chunkSize); err != nil {
-			return nil, fmt.Errorf("read chunk size for %q: %w", chunkID, err)
-		}
-
-		data := make([]byte, chunkSize)
-		if _, err := io.ReadFull(r, data); err != nil {
-			return nil, fmt.Errorf("read chunk data for %q: %w", chunkID, err)
-		}
-
-		chunks = append(chunks, riffChunk{id: chunkID, data: data})
-
-		// Odd-length chunks have a padding byte.  Lenient: if the
-		// read fails (e.g. EOF), just break rather than error.
-		if chunkSize%2 != 0 {
-			var pad [1]byte
-
-			if _, err := r.Read(pad[:]); err != nil {
-				break
-			}
-		}
-	}
-
-	return chunks, nil
-}
-
-// isID3ChunkID returns true if id represents an ID3v2 RIFF chunk.
-// Both lowercase "id3 " and uppercase "ID3 " are accepted.
-func isID3ChunkID(id [4]byte) bool {
-	s := strings.ToLower(string(id[:3]))
-
-	return s == "id3"
-}
 
 // writeRIFF writes a complete RIFF/WAVE container to w, preserving
 // the given chunks in order and appending the id3Data as the final
 // "id3 " chunk.  Returns errFileTooLargeForWAV if the result would
 // exceed the 4 GB RIFF limit.
-func writeRIFF(w io.Writer, chunks []riffChunk, id3Data []byte) error {
+func writeRIFF(w io.Writer, chunks []riff.Chunk, id3Data []byte) error {
 	// Calculate total RIFF payload size:
 	//   4 bytes (WAVE form type)
 	// + for each preserved chunk: 8 (header) + len(data) + padding
@@ -125,7 +31,7 @@ func writeRIFF(w io.Writer, chunks []riffChunk, id3Data []byte) error {
 	riffPayload := uint64(4)
 
 	for _, c := range chunks {
-		sz := uint64(len(c.data))
+		sz := uint64(len(c.Data))
 		riffPayload += 8 + sz
 
 		if sz%2 != 0 {
@@ -162,7 +68,7 @@ func writeRIFF(w io.Writer, chunks []riffChunk, id3Data []byte) error {
 
 	// Write each preserved chunk.
 	for _, c := range chunks {
-		if err := writeChunk(w, c.id, c.data); err != nil {
+		if err := writeChunk(w, c.ID, c.Data); err != nil {
 			return err
 		}
 	}
@@ -225,7 +131,7 @@ func writeWavTags(
 		return fmt.Errorf("open wav for reading: %w", err)
 	}
 
-	allChunks, err := parseRIFF(f)
+	allChunks, err := riff.Parse(f)
 
 	// Close immediately — we need the handle released before
 	// AtomicWrite creates the replacement file.
@@ -237,13 +143,13 @@ func writeWavTags(
 
 	// Separate preserved chunks from existing ID3 data.
 	var (
-		preserved   []riffChunk
+		preserved   []riff.Chunk
 		existingID3 []byte
 	)
 
 	for _, c := range allChunks {
-		if isID3ChunkID(c.id) {
+		if riff.IsID3(c.ID) {
-			existingID3 = c.data
+			existingID3 = c.Data
 		} else {
 			preserved = append(preserved, c)
 		}

backend/tagwriter/wav_test.go

@@ -12,6 +12,7 @@ import (
 	id3v2 "github.com/bogem/id3v2/v2"
 
 	"yellowjacket/backend/metadata"
+	"yellowjacket/backend/riff"
 )
 
 // createTestWAV builds a minimal valid WAV file with an optional
@@ -270,6 +271,88 @@ func TestWriteWavTags_PartialUpdate(t *testing.T) {
 	assertStrField(t, "Composer", meta.Composer, "Original Composer")
 }
 
+// The writer has always been correct and the reader could not see it:
+// a WAV tagged by this app scanned as an untagged file, so editing
+// tags, autotagging a folder or importing a WAV download all appeared
+// to work and changed nothing the library could show (#104).  So this
+// asserts the write through metadata.ExtractTags -- the reader the
+// scan uses -- rather than through the id3 chunk.
+func TestWriteWavTags_ReadBackByTheScanner(t *testing.T) {
+	t.Parallel()
+
+	dir := t.TempDir()
+	path := createTestWAV(t, dir, "scanner.wav", nil)
+	art := tinyJPEG(t)
+
+	changes := TagChanges{
+		FieldTitle:       "Some Song",
+		FieldArtist:      "Some Artist",
+		FieldAlbum:       "Some Album",
+		FieldAlbumArtist: "Some Album Artist",
+		FieldGenre:       "Rock",
+		FieldYear:        2024,
+		FieldTrackNumber: 3,
+		FieldComposer:    "Some Composer",
+		FieldCoverArt:    art,
+	}
+
+	if err := writeWavTags(testLogger(), path, changes); err != nil {
+		t.Fatalf("writeWavTags: %v", err)
+	}
+
+	meta, err := metadata.ExtractTags(path)
+	if err != nil {
+		t.Fatalf("ExtractTags: %v", err)
+	}
+
+	if meta.TagReadWarning != nil {
+		t.Errorf("TagReadWarning: %v", meta.TagReadWarning)
+	}
+
+	assertStrField(t, "Title", meta.Title, "Some Song")
+	assertStrField(t, "Artist", meta.Artist, "Some Artist")
+	assertStrField(t, "Album", meta.Album, "Some Album")
+	assertStrField(t, "AlbumArtist", meta.AlbumArtist, "Some Album Artist")
+	assertStrField(t, "Genre", meta.Genre, "Rock")
+	assertStrField(t, "Composer", meta.Composer, "Some Composer")
+	assertStrField(t, "FileFormat", meta.FileFormat, "WAV")
+	assertIntField(t, "Year", meta.Year, 2024)
+	assertIntField(t, "TrackNumber", meta.TrackNumber, 3)
+
+	if !strings.HasPrefix(meta.TagFormat, "ID3v2") {
+		t.Errorf("TagFormat: got %q, want an ID3v2 version", meta.TagFormat)
+	}
+
+	if meta.Picture == nil {
+		t.Fatal("expected cover art, got nil")
+	}
+
+	if !bytes.Equal(meta.Picture.Data, art) {
+		t.Errorf("picture data mismatch: got %d bytes, want %d",
+			len(meta.Picture.Data), len(art))
+	}
+}
+
+// An untagged WAV is a file with no tags, not a file with a problem:
+// the scanner falls back to the filename and must not be handed a
+// warning to surface about it.
+func TestUntaggedWav_ReadsAsEmptyWithoutAWarning(t *testing.T) {
+	t.Parallel()
+
+	path := createTestWAV(t, t.TempDir(), "bare.wav", nil)
+
+	meta, err := metadata.ExtractTags(path)
+	if err != nil {
+		t.Fatalf("ExtractTags: %v", err)
+	}
+
+	if meta.TagReadWarning != nil {
+		t.Errorf("TagReadWarning: %v", meta.TagReadWarning)
+	}
+
+	assertStrField(t, "Title", meta.Title, "")
+}
+
 func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	t.Parallel()
 
@@ -282,7 +365,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 		t.Fatalf("open original: %v", err)
 	}
 
-	origChunks, err := parseRIFF(origFile)
+	origChunks, err := riff.Parse(origFile)
 	_ = origFile.Close()
 
 	if err != nil {
@@ -292,7 +375,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	// Record original chunk data by ID string.
 	origData := map[string][]byte{}
 	for _, c := range origChunks {
-		origData[string(c.id[:])] = c.data
+		origData[string(c.ID[:])] = c.Data
 	}
 
 	// Write a tag to trigger RIFF rewrite.
@@ -309,7 +392,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 		t.Fatalf("open after write: %v", err)
 	}
 
-	newChunks, err := parseRIFF(newFile)
+	newChunks, err := riff.Parse(newFile)
 	_ = newFile.Close()
 
 	if err != nil {
@@ -320,7 +403,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	origNonID3 := 0
 
 	for _, c := range origChunks {
-		if !isID3ChunkID(c.id) {
+		if !riff.IsID3(c.ID) {
 			origNonID3++
 		}
 	}
@@ -328,7 +411,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	newNonID3 := 0
 
 	for _, c := range newChunks {
-		if !isID3ChunkID(c.id) {
+		if !riff.IsID3(c.ID) {
 			newNonID3++
 		}
 	}
@@ -359,17 +442,17 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 // in chunks and its data matches want byte-for-byte.
 func checkChunkPreserved(
 	t *testing.T,
-	chunks []riffChunk,
+	chunks []riff.Chunk,
 	idStr string,
 	want []byte,
 ) {
 	t.Helper()
 
 	for _, c := range chunks {
-		if string(c.id[:]) == idStr {
+		if string(c.ID[:]) == idStr {
-			if !bytes.Equal(c.data, want) {
+			if !bytes.Equal(c.Data, want) {
 				t.Errorf("chunk %q data changed: got %d bytes, want %d",
-					idStr, len(c.data), len(want))
+					idStr, len(c.Data), len(want))
 			}
 
 			return
@@ -430,7 +513,7 @@ func TestWriteWavTags_RejectsRF64(t *testing.T) {
 	buf.WriteString("WAVE")
 
 	// Minimal ds64 chunk (required for RF64 but we just need
-	// enough bytes for parseRIFF to hit the RF64 rejection).
+	// enough bytes for riff.Parse to hit the RF64 rejection).
 	buf.WriteString("ds64")
 	_ = binary.Write(&buf, binary.LittleEndian, uint32(28)) //nolint:mnd
 	buf.Write(make([]byte, 28))                             //nolint:mnd
@@ -454,9 +537,12 @@ func TestWriteWavTags_RejectsRF64(t *testing.T) {
 
 // readWavID3Tags extracts ID3v2 metadata from a WAV file by parsing
 // the RIFF structure and reading the id3 chunk with bogem/id3v2.
-// dhowden/tag's ReadFrom does not support WAV files, and its
+//
-// ReadID3v2Tags fails on empty tags (after clearing all frames).
+// metadata.ExtractTags reads a WAV since #104 and is what the round
-// Using bogem/id3v2.ParseReader handles all cases correctly.
+// trips assert through.  This stays for the two cases that are about
+// the bytes rather than about the scan: a tag with every frame
+// cleared, which no reader reports as anything, and the chunk
+// preservation test, which is already parsing the container itself.
 func readWavID3Tags(
 	t *testing.T,
 	path string,
@@ -470,17 +556,17 @@ func readWavID3Tags(
 
 	defer func() { _ = f.Close() }()
 
-	chunks, err := parseRIFF(f)
+	chunks, err := riff.Parse(f)
 	if err != nil {
-		t.Fatalf("parseRIFF: %v", err)
+		t.Fatalf("riff.Parse: %v", err)
 	}
 
 	// Find the id3 chunk.
 	var id3Data []byte
 
 	for _, c := range chunks {
-		if isID3ChunkID(c.id) {
+		if riff.IsID3(c.ID) {
-			id3Data = c.data
+			id3Data = c.Data
 
 			break
 		}

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

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

frontend/index.css

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

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

@@ -89,17 +89,6 @@ export class BottomNav extends LitElement {
             color: var(--yj-accent, #ffd43b);
         }
 
-        /* The press state (#54). This bar is the phone's primary
-           navigation and had no feedback of its own at all -- what a
-           tap produced was the web view's tap highlight, a grey box
-           over the whole 48px cell, which index.css has now taken
-           away. The .active rule above is which tab you are *on*; this
-           is the tab being pressed, so they are a colour and a
-           background rather than two colours. */
-        button:active {
-            background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
-        }
-
         button:focus-visible {
             outline: 2px solid var(--yj-accent, #ffd43b);
             outline-offset: -2px;

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

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

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

@@ -579,14 +579,8 @@ export class QueuePanel
             contain: strict;
         }
 
-        /* A hover tint is for a device that hovers (#54). A hold
+        .track-item:hover {
-           synthesises a hover in the WebView, so ungated this arrives
+            background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
-           because a finger touched the row and stays after it has
-           gone; the press state below is what a tap gets instead. */
-        @media (hover: hover) and (pointer: fine) {
-            .track-item:hover {
-                background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
-            }
         }
 
         .track-item.selected {
@@ -601,19 +595,6 @@ export class QueuePanel
             background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
         }
 
-        /* The press state (#54): the feedback a tap has now that the
-           web view's own highlight box is gone (index.css). Last, and
-           carrying a class, because a selected or playing row is two
-           classes deep and a bare :active would lose to it. */
-        .track-item.selected:active,
-        .track-item.active:active,
-        .track-item:active {
-            background-color: var(
-                --yj-press-overlay,
-                rgba(255, 255, 255, 0.12)
-            );
-        }
-
         .track-position {
             font-size: var(--yj-text-sm);
             color: var(--yj-text-tertiary, #888);

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

@@ -95,15 +95,8 @@ export class AppSidebar extends LitElement {
             text-align: center;
         }
 
-        /* A hover tint is for a device that hovers (#54), and this
+        li button:hover {
-           component is on a phone too: below 600px it is what
+            background-color: var(--yj-bg-elevated, #343a40);
-           bottom-nav's "More" sheet mounts, where a hold
-           synthesises a hover and leaves a destination looking picked
-           after the finger has gone. */
-        @media (hover: hover) and (pointer: fine) {
-            li button:hover {
-                background-color: var(--yj-bg-elevated, #343a40);
-            }
         }
 
         li button:focus-visible {
@@ -115,14 +108,6 @@ export class AppSidebar extends LitElement {
             background-color: var(--yj-bg-overlay, #495057);
         }
 
-        /* The press state (#54), after the .active rule and at the same
-           specificity, so pressing the destination you are already on
-           still says something. It is what a tap gets now that
-           index.css has taken the web view's own highlight box away. */
-        li button:active {
-            background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
-        }
-
         li button p {
             margin: 0;
             white-space: nowrap;

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

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

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

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

frontend/src/store/theme-store.ts

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

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

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

frontend/test/components/chrome.test.ts

@@ -137,6 +137,11 @@ describe('<app-sidebar>', () => {
   });
 
   it('looks the way it did last time', async () => {
+    // Stated rather than inherited: `activeViewStore` is a singleton, so
+    // without this the shot records whichever view the *previous* case
+    // left in it and the reference moves when the file is reordered.
+    activeViewStore.setView('home', true);
+
     const el = await fixture('app-sidebar');
 
     await visual(el, 'app-sidebar');

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

@@ -366,6 +366,16 @@ describe('<now-playing>', () => {
     const el = await fixture('now-playing');
 
     emit(Events.TrackChanged, { ...TRACK, trackChangeId: 6 });
+    // Stated rather than inherited: the queue store is a singleton, so
+    // without this the shot records whichever source the *previous*
+    // case left in it and the reference moves when the file is
+    // reordered. Three lines is what the bar renders while playing
+    // from somewhere, which is the arrangement worth recording.
+    setQueue([queueTrack(1, 'Ashes to Ashes')], 0, {
+      type: 'album',
+      id: 7,
+      label: 'Scary Monsters',
+    });
     await flush();
     await el.updateComplete;
 

frontend/test/components/play-in-context.test.ts

@@ -161,6 +161,15 @@ describe('double-clicking a row in the track list', () => {
     localStorage.removeItem('track-list-column-widths');
 
     el = await fixture<LitElement>('track-list', { externalTracks: LIST });
+
+    // Say which order is being asserted rather than inheriting one.
+    // `restoreSortPreferences()` runs in `connectedCallback`, so the
+    // list opens in whatever sort was last persisted -- and
+    // `track-11` sorts before `track-3` by title, which is the shape
+    // of #138. The row below is the fixture's third track only while
+    // nothing is sorting the list.
+    (el as unknown as { sortField: string | null }).sortField = null;
+
     el.style.display = 'block';
     el.style.height = '600px';
     await flush();
@@ -172,6 +181,10 @@ describe('double-clicking a row in the track list', () => {
     const rows = shadowAll(el, '.track-row');
     const row = rows.find((r) => r.getAttribute('data-index') === '3');
 
+    // Stated first, so a list that is not in the order this asserts
+    // fails by saying so rather than as an off-by-eight file path.
+    expect(row?.getAttribute('data-file-path')).toBe('/music/track-3.mp3');
+
     dblclick(row!);
     await flush();
 

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

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

frontend/test/setup.ts

@@ -72,6 +72,23 @@ document.body.style.margin = '0';
 
 beforeEach(() => {
   resetHarness();
+
+  // A test file does not get its own origin. `@vitest/browser-playwright`
+  // opens one BrowserContext per session and runs several files in it,
+  // one after another, so everything a component persists — the track
+  // list's sort and column widths, the cover size, `now-playing`'s
+  // scroll mode — is still there when the next file mounts the same
+  // component. That is invisible until it is intermittent, because
+  // which files share a tab and in what order changes run to run: it
+  // cost #138 three scheduled runs, one of them a PR with no frontend
+  // code in it at all.
+  //
+  // Clearing here rather than in the specs that write is deliberate —
+  // the spec that *reads* is never the one that knows. It is safe for
+  // the same reason the leak exists: files in a session are
+  // sequential, so this cannot wipe storage a concurrent file is in
+  // the middle of using.
+  localStorage.clear();
 });
 
 afterEach(() => {

internal/testfixtures/fixtures_test.go

@@ -30,12 +30,6 @@ func TestFixturesMatchManifest(t *testing.T) {
 	m := testfixtures.Load(t)
 
 	for _, want := range m.Tracks {
-		// WAV tags are write-only today; see
-		// TestWAVTagsAreNotReadableYet.
-		if want.Format == "wav" {
-			continue
-		}
-
 		t.Run(want.Path, func(t *testing.T) {
 			t.Parallel()
 
@@ -161,39 +155,6 @@ func TestDuplicateFixturesAreIndistinguishable(t *testing.T) {
 	}
 }
 
-// TestWAVTagsAreNotReadableYet pins a known gap rather than hiding it.
-//
-// backend/tagwriter writes WAV tags into a RIFF "id3 " chunk, but
-// backend/metadata reads through dhowden/tag, which recognises MP3,
-// FLAC, OGG, MP4 and DSF and has no RIFF parser at all.  So every tag
-// the app writes to a WAV is invisible to the app that wrote it, and
-// WAV tracks always scan in as untitled.
-//
-// The fixtures are tagged correctly on disk, so when the reader learns
-// to unwrap the RIFF chunk this test starts failing — which is the
-// point.  Delete it then and drop the "wav" skip in
-// TestFixturesMatchManifest.
-func TestWAVTagsAreNotReadableYet(t *testing.T) {
-	t.Parallel()
-
-	m := testfixtures.Load(t)
-
-	for _, path := range m.Case(t, testfixtures.CaseWAVTracks) {
-		got, err := metadata.ExtractTags(path)
-		if err != nil {
-			t.Fatalf("extract tags from %s: %v", path, err)
-		}
-
-		if got.Title != "" {
-			t.Errorf(
-				"%s: WAV tags are now readable (%q) — good news; "+
-					"see this test's comment for what to update",
-				filepath.Base(path), got.Title,
-			)
-		}
-	}
-}
-
 func assertTag(t *testing.T, field string, want testfixtures.Track, got string) {
 	t.Helper()