diff --git a/.claude/skills/verify/SKILL.md b/.claude/skills/verify/SKILL.md
index 847c3c2a..114b0c60 100644
--- a/.claude/skills/verify/SKILL.md
+++ b/.claude/skills/verify/SKILL.md
@@ -231,8 +231,10 @@ its profile. It keeps the vault and `.obsidian-e2e-artifacts/`. Delete
   `obsidian dev:cdp`. Its verbs are `click <css> [--text <s>] [--right]`,
   `type <css> <text>` (insert at the cursor), `fill <css> <text>` (replace),
   `key <Enter|Escape|Tab|ArrowUp|ArrowDown|Backspace|<char>|Ctrl+<char>>`,
-  `wait <css> [--text <s>]`, and `uri <obsidian://...>`. `click`, `type`,
-  `fill` and `wait` wait up to 10 s; `--timeout <ms>` changes that. They also
+  `wait <css> [--text <s>]`, and `uri <obsidian://...>`. `--text` matches a
+  substring; with `--exact`, only an element whose visible text is exactly
+  `<s>`. `click`, `type`, `fill` and `wait` wait up to 10 s; `--timeout <ms>`
+  changes that. They also
   wait until nothing covers the element's center, and fail with
   `covered by <tag.class>` when it stays covered, as under the full player. `key` and
   `uri` do not wait. Each CLI call fails after 15 s without an answer.
@@ -240,22 +242,33 @@ its profile. It keeps the vault and `.obsidian-e2e-artifacts/`. Delete
   are `place <sidebar|pane|phone>` (fails unless the view measures 320 x 720,
   820 x 680, or a 390 x 844 phone screen), `theme <light|dark>`,
   `seed <empty|library|episodes|lists|local|offline>` (replaces `data.json`
-  while PodNotes is disabled; `local` and `offline` also write media files into
-  the vault), `go '<page JSON>'`, `offline <on|off>`, `shot <file.png>`, and
-  `set <state|all> <label> [--widths ...] [--themes ...]`. `set` writes
+  while PodNotes is disabled and deletes the episode notes; `local` and
+  `offline` also write media files into the vault), `go '<page JSON>'`,
+  `offline <on|off>`, `shot <file.png>`, and
+  `set <state|player|all> <label> [--widths ...] [--themes ...]`. `set` writes
   `.obsidian-e2e-artifacts/screens/<label>/<state>-<width>-<theme>.png` and a
   `<state>-sheet.png` with the design prototype's screen beside each shot, when
   the design has one. The states are `first-run`, `add-podcast`, `library`,
   `episodes`, `error-feed`, `queue`, `playlists`, `playlist`, `latest`,
-  `played`, `local-files`, `offline` and `status-bar`. `set` opens each page
-  by its page JSON, so a state works on any version of the view. `shot` hides
-  Obsidian's status bar, except in `status-bar`, which puts a `9 properties`
-  item in it over the mini player and has no phone shot, because Obsidian hides
-  the status bar on mobile.
+  `played`, `local-files`, `offline` and `status-bar`, and the player's
+  `now-playing`, `mini-player`, `capture`, `chapters`, `up-next`,
+  `up-next-empty`, `no-chapters`, `video`, `local-player` and `media-error`.
+  `set player` runs the player's states and `set all` every state; both go on
+  past a failed state and fail at the end. `set` opens each page by its page
+  JSON, so a state works on any version of the view. A player state plays an
+  episode until its media loads and pauses it at a fixed second.
+  `capture`, `chapters`, `up-next` and `up-next-empty` then press the full
+  player's `Timestamp`, `Chapters` or `Up next` button, and fail at once
+  without a button that reads exactly that, as on a full player before v3.
+  `shot` hides Obsidian's status bar, except in `status-bar`, which puts a
+  `9 properties` item in it over the mini player and has no phone shot, because
+  Obsidian hides the status bar on mobile.
 - `.claude/skills/verify/fixtures.mjs` runs as `feed`, `feed-b`, `transcripts`,
   `library`, `retitle`, `requests`, `audio [vault path]` or `stop`. `library`
   prints the URL of a manifest of eight podcasts, one whose feed answers 404, and
-  one more feed to add. `retitle` renames the first feed's two episodes to
+  one more feed to add. Their episodes' media is silence as long as the feed
+  says. `#213` has chapters, and `Signal & Noise` has a 10 s video episode that
+  ffmpeg makes on its first request and one whose media answers 404. `retitle` renames the first feed's two episodes to
   `Renamed Opening Show` and `Renamed Closing Show`, keeping their GUIDs, until
   the server stops. `requests` prints the paths
   PodNotes fetched from the server. The feed URL uses the host `podnotes.test`,
diff --git a/.claude/skills/verify/features/player.md b/.claude/skills/verify/features/player.md
index 513e7c60..cdfcd1ab 100644
--- a/.claude/skills/verify/features/player.md
+++ b/.claude/skills/verify/features/player.md
@@ -2,18 +2,19 @@
 
 The PodNotes view lives in the right sidebar. A user opens it, picks an episode
 from a podcast's episode list, and the full player opens over the view with
-artwork, title, progress, skip buttons, and volume and rate sliders while the
-audio plays. Collapsing it leaves the mini player at the bottom of every page.
+artwork, title, a chaptered scrubber, a rate pill, skip and play buttons, a
+volume popover, Timestamp and Create note, and the Chapters and Up next panels
+while the audio plays. Collapsing it leaves the mini player at the bottom of every page.
 
 ## Sub-features
 
 - `player-open` reveals the view from the ribbon, and opens the full player from the "Show player" command.
 - `player-collapse` collapses the full player to the mini player from its chevron or Escape, and opens it again from the mini player, without pausing.
 - `player-play` starts a feed episode from its episode list.
-- `player-toggle` pauses and resumes from the artwork button and the "Toggle playback" command.
+- `player-toggle` pauses and resumes from the play button, Space, and the "Toggle playback" command.
 - `player-skip` moves back and forward by the configured skip lengths (15 s by default).
-- `player-seek` jumps to a position from a click on the progress bar.
-- `player-rate` changes the playback rate from the slider and the rate commands.
+- `player-seek` jumps to a position from a click on the scrubber or its arrow keys.
+- `player-rate` changes the playback rate from the rate pill's menu and the rate commands.
 
 ## How to get to it (user POV)
 
@@ -34,10 +35,10 @@ Preconditions:
 - **Open from the palette.** Run `UI key Ctrl+p`, `UI type .prompt-input 'Show player'`, `UI click .suggestion-item --text 'Show player'`. The same view is revealed, with no second PodNotes leaf (`CLI eval code='app.workspace.getLeavesOfType("podcast_player_view").length'` is `=> 1`). With an episode loaded, the full player (`.podcast-view section.pn-player`) covers the view.
 - **Play an episode.** On the Library (`UI click '.podcast-view .pn-head button[aria-label^="Back to"]'` until `h1.pn-head-title` reads `Library`), run `UI click '.podcast-view button.pn-gridcard[aria-label="PodNotes Fixture"]'` and `UI click '.podcast-view .pn-ep-main' --text 'Fixture Episode 1'`. The full player opens with the title `Fixture Episode 1`, and after a few seconds `api.isPlaying` is true and `api.currentTime` grows.
 - **Collapse and open.** Run `UI click '.podcast-view [aria-label="Collapse player"]'` or `UI key Escape`. The mini player (`.podcast-view section.pn-mini`) shows the episode and `api.isPlaying` stays true. Run `UI click '.podcast-view .pn-mini-open'` to open the full player again.
-- **Toggle.** Run `UI click '.podcast-view [aria-label="Toggle playback"]'`. `api.isPlaying` flips and `api.currentTime` stops advancing.
-- **Skip.** Run `UI click '.podcast-view .controls-container > :last-child button'` (forward) or `'.podcast-view .controls-container > :first-child button'` (backward). `api.currentTime` moves by 15 s, clamped to the episode.
-- **Seek.** Run `UI click '.podcast-view [aria-label="Seek within episode"]'`. It clicks the bar's center, so `api.currentTime` lands near 30 s of the 60 s fixture.
-- **Rate.** Run `CLI command id=podnotes:increase-playback-rate`. `api.playbackRate` and the label in `.playbackrate-container` both increase.
+- **Toggle.** Run `UI click '.podcast-view .pn-player button.pn-play'`. `api.isPlaying` flips and `api.currentTime` stops advancing.
+- **Skip.** Run `UI click '.podcast-view [aria-label="Forward 15 seconds"]'` or `'.podcast-view [aria-label="Back 15 seconds"]'`. `api.currentTime` moves by 15 s, clamped to the episode. The labels name the configured lengths.
+- **Seek.** Run `UI click '.podcast-view [role="slider"][aria-label="Seek"]'`. It clicks the scrubber's center, so `api.currentTime` lands near 30 s of the 60 s fixture.
+- **Rate.** Run `CLI command id=podnotes:increase-playback-rate`. `api.playbackRate` and the rate pill (`.pn-player button.pn-rate`) both increase. Click the pill and a menu item such as `1.25×` for the menu's speeds.
 - **Proof.** Run `npm run screenshot:e2e-obsidian -- .obsidian-e2e-artifacts/player/playing.png` while it plays, and record a toggle or skip with `npm run record:e2e-obsidian -- .obsidian-e2e-artifacts/player/flow.mp4 -- <driver>`. Read `jq '.playedEpisodes' <data.json>` for the stored position.
 
 ## Gotchas
@@ -47,5 +48,4 @@ Preconditions:
 - After a restart the view opens on its last page, and the mini player shows the last episode paused at its saved position. Nothing loads or plays until you press play. A sync that lands before then updates the shown episode and position, unless you moved the position.
 - A video plays in the main window only. With the view in a popout, the player shows the artwork and the video keeps playing hidden in the main window.
 - With `Keep a queue of episodes you switch away from` on (the default), switching episodes queues the previous one, and it plays again when the current one ends.
-- The skip buttons have no accessible name. Address them by position inside `.controls-container`.
 - Headless Obsidian plays to a null audio sink. Prove playback through `api.currentTime` advancing, not by sound.
diff --git a/.claude/skills/verify/features/timestamps-uris.md b/.claude/skills/verify/features/timestamps-uris.md
index 8e72f3b3..616ad0ba 100644
--- a/.claude/skills/verify/features/timestamps-uris.md
+++ b/.claude/skills/verify/features/timestamps-uris.md
@@ -9,6 +9,7 @@ moment.
 
 - `ts-capture` inserts the formatted current time at the cursor ("Capture Timestamp").
 - `ts-segment` inserts a linked range ending now ("Capture Last 10 Seconds", "Capture Last 20 Seconds").
+- `ts-undo` confirms every capture, from the player, the mini player, a command or the headset, in a Notice: `Timestamp added to <note>`, or `Created <note>` when it created the episode note. Its Undo puts the note back as the capture found it, only while the note is still exactly as the capture left it; any later change, also a pending save, gets the Notice `The note isn't as the capture left it, so the timestamp stays`. A created note is kept.
 - `ts-format` applies the `Capture timestamp format` and `Timestamp offset (s)` settings.
 - `uri-open` reopens the linked episode at `time`, also after another episode played.
 - `uri-segment` plays a linked range and stops at its end (`endTime`).
@@ -31,6 +32,7 @@ Preconditions:
 - **Set a linked format.** Open Settings > PodNotes ([feeds.md](./feeds.md)), run `UI fill '.modal.mod-settings textarea[placeholder="- {{linktime}} "]' '* {{linktime}} - '`, then close Settings. `data.json` `timestamp.template` is `* {{linktime}} - `.
 - **Play.** Start `Fixture Episode 1` ([player.md](./player.md)) and wait about 5 s.
 - **Capture.** Run `UI click '.workspace-leaf-content[data-type="markdown"] .cm-content .cm-line:last-child'`, `UI key Ctrl+p`, `UI type .prompt-input 'Capture Timestamp'`, `UI click .suggestion-item --text 'Capture Timestamp'`. After about 2 s, `CLI read path='Verify/Timestamps.md'` has a line like `* [00:00:05](obsidian://podnotes?episodeName=Fixture%20Episode%201&url=...&time=5.73) - `.
+- **Undo.** Within 7 s of a capture, run `UI click '.notice button.pn-undo'`. The editor, then the file about 2 s later, reads as it did before the capture. Type into the captured line first, and Undo leaves it and shows the refusal Notice.
 - **Segment.** Run the same palette steps with `Capture Last 10 Seconds`. The line holds a range such as `00:00:05-00:00:15` and its URI has `time` and `endTime`.
 - **Open the link.** Let playback move on, run `CLI command id=markdown:toggle-preview` (Reading view), then `UI click '.markdown-reading-view a' --text '00:00:05'`. `api.podcast.title` is `Fixture Episode 1` and `api.currentTime` restarts from about 5.7 s. On Linux, the instance directory's `obsidian.log` (the parent of the private `HOME`) shows `Received callback URL` and `Processed URI`.
 - **Direct URI path.** Run `UI uri 'obsidian://podnotes?episodeName=Fixture%20Episode%201&url=<encoded feed URL>&time=30'`. `api.currentTime` jumps to about 30 s.
diff --git a/.claude/skills/verify/fixtures.mjs b/.claude/skills/verify/fixtures.mjs
index 0df02eff..f5d67978 100755
--- a/.claude/skills/verify/fixtures.mjs
+++ b/.claude/skills/verify/fixtures.mjs
@@ -7,18 +7,24 @@
 //   node .claude/skills/verify/fixtures.mjs transcripts    same server, print a feed whose episodes publish transcripts
 //   node .claude/skills/verify/fixtures.mjs library        same server, print the URL of a JSON manifest of eight
 //                                                          podcasts as PodNotes saves them (Night Owl Science's feed
-//                                                          answers 404) and one more feed to add
+//                                                          answers 404) and one more feed to add. Each episode's
+//                                                          media is silence as long as its feed says. #213 has
+//                                                          chapters; Signal & Noise has a video episode, a 10 s
+//                                                          test pattern ffmpeg makes on first request, and an
+//                                                          episode whose media answers 404
 //   node .claude/skills/verify/fixtures.mjs retitle        rename the first feed's episodes, keeping their GUIDs, until the server stops
 //   node .claude/skills/verify/fixtures.mjs requests       print the paths the server has answered, oldest first
 //   node .claude/skills/verify/fixtures.mjs audio [path]   write a 60 s WAV into this worktree's vault
 //                                                          (default path: "Fixtures/Local Fixture.wav")
 //   node .claude/skills/verify/fixtures.mjs stop           stop the feed server
-import { spawn } from "node:child_process";
+import { execFile, spawn } from "node:child_process";
 import crypto from "node:crypto";
 import fs from "node:fs";
 import http from "node:http";
 import path from "node:path";
+import { Readable, pipeline } from "node:stream";
 import { fileURLToPath } from "node:url";
+import { promisify } from "node:util";
 import { loadRunnerConfig, resolveProvisionOptions } from "obsidian-e2e/runner";
 import { FIXTURE_HOST } from "../../../scripts/e2e-instance.mjs";
 
@@ -36,30 +42,80 @@ const FEED_TITLE = "PodNotes Fixture";
 const FEED_B_TITLE = "PodNotes Fixture B";
 const TRANSCRIPTS_TITLE = "PodNotes Transcripts";
 const transcriptFixtures = path.join(root, "tests/fixtures/transcripts");
+// Media made here outlives the server; node_modules/.cache is where tools keep caches.
+const CACHE = path.join(root, "node_modules/.cache/podnotes-fixtures");
+const RATE = 8000;
+const SILENCE = Buffer.alloc(64 * 1024);
+
+/** @typedef {{ length: number, chunks: (start: number, end: number) => Iterable<Buffer> }} Stream */
+
+/** A 16-bit mono WAV header for `samples` samples at RATE. @param {number} samples */
+function wavHeader(samples) {
+	const header = Buffer.alloc(44);
+	header.write("RIFF", 0);
+	header.writeUInt32LE(36 + samples * 2, 4);
+	header.write("WAVEfmt ", 8);
+	header.writeUInt32LE(16, 16);
+	header.writeUInt16LE(1, 20);
+	header.writeUInt16LE(1, 22);
+	header.writeUInt32LE(RATE, 24);
+	header.writeUInt32LE(RATE * 2, 28);
+	header.writeUInt16LE(2, 32);
+	header.writeUInt16LE(16, 34);
+	header.write("data", 36);
+	header.writeUInt32LE(samples * 2, 40);
+	return header;
+}
 
 function wav(seconds = 60) {
-	const rate = 8000;
-	const samples = rate * seconds;
-	const buffer = Buffer.alloc(44 + samples * 2);
-	buffer.write("RIFF", 0);
-	buffer.writeUInt32LE(36 + samples * 2, 4);
-	buffer.write("WAVEfmt ", 8);
-	buffer.writeUInt32LE(16, 16);
-	buffer.writeUInt16LE(1, 20);
-	buffer.writeUInt16LE(1, 22);
-	buffer.writeUInt32LE(rate, 24);
-	buffer.writeUInt32LE(rate * 2, 28);
-	buffer.writeUInt16LE(2, 32);
-	buffer.writeUInt16LE(16, 34);
-	buffer.write("data", 36);
-	buffer.writeUInt32LE(samples * 2, 40);
+	const samples = RATE * seconds;
+	const data = Buffer.alloc(samples * 2);
 	for (let i = 0; i < samples; i++) {
-		buffer.writeInt16LE(
-			Math.round(3000 * Math.sin((2 * Math.PI * 440 * i) / rate)),
-			44 + i * 2,
-		);
+		data.writeInt16LE(Math.round(3000 * Math.sin((2 * Math.PI * 440 * i) / RATE)), i * 2);
 	}
-	return buffer;
+	return Buffer.concat([wavHeader(samples), data]);
+}
+
+/**
+ * Silence as long as an episode, made as it is sent, so an hour costs no memory and the
+ * player can seek anywhere in it with Range requests.
+ * @param {number} seconds @returns {Stream}
+ */
+function silentWav(seconds) {
+	const header = wavHeader(RATE * seconds);
+	return {
+		length: header.length + RATE * seconds * 2,
+		*chunks(start, end) {
+			if (start < header.length)
+				yield header.subarray(start, Math.min(end + 1, header.length));
+			for (let at = Math.max(start, header.length); at <= end; at += SILENCE.length) {
+				yield SILENCE.subarray(0, Math.min(SILENCE.length, end + 1 - at));
+			}
+		},
+	};
+}
+
+/**
+ * ffmpeg's test pattern, which prints its own time, kept in CACHE for later servers.
+ * @param {number} seconds
+ */
+async function testPattern(seconds) {
+	const file = path.join(CACHE, `test-pattern-${seconds}s.mp4`);
+	if (!fs.existsSync(file)) {
+		fs.mkdirSync(CACHE, { recursive: true });
+		const scratch = `${file}.${process.pid}.mp4`;
+		await promisify(execFile)("ffmpeg", [
+			..."-v error -y -f lavfi -i testsrc2=size=640x360:rate=25 -f lavfi -i anullsrc".split(
+				" ",
+			),
+			..."-c:v libx264 -pix_fmt yuv420p -c:a aac -b:a 8k -movflags +faststart".split(" "),
+			"-t",
+			String(seconds),
+			scratch,
+		]);
+		fs.renameSync(scratch, file);
+	}
+	return fs.readFileSync(file);
 }
 
 const RETITLED = ["", "Renamed Opening Show", "Renamed Closing Show"];
@@ -144,7 +200,14 @@ const transcript = (file) => fs.readFileSync(path.join(transcriptFixtures, file)
  * @property {string} [label] The artwork's text, when the title is too long for it.
  * @property {boolean} [lower] Keep the artwork's text in mixed case.
  * @property {boolean} [missing] The feed answers 404.
- * @property {[title: string, date: string, seconds: number][]} episodes
+ * @property {[title: string, date: string, seconds: number, extra?: EpisodeExtra][]} episodes
+ */
+
+/**
+ * @typedef {object} EpisodeExtra
+ * @property {[startTime: number, title: string][]} [chapters] Podcasting 2.0 JSON chapters.
+ * @property {boolean} [video] The media is the test pattern.
+ * @property {boolean} [missing] The media answers 404.
  */
 
 // The design prototype's sample library, so captures compare with its screens.
@@ -161,6 +224,18 @@ const LIBRARY = [
 				"#213 How to remember everything you read: memory palaces, spaced repetition and the surprising science of forgetting, with Dr. Ana Ilić",
 				"2026-10-02",
 				4350,
+				{
+					chapters: [
+						[0, "Intro"],
+						[220, "Why we forget"],
+						[845, "The forgetting curve"],
+						[1650, "Memory palaces 101"],
+						[2172, "The method of loci in practice"],
+						[2990, "Spaced repetition without the apps"],
+						[3738, "Reading with a pen"],
+						[4180, "Listener question"],
+					],
+				},
 			],
 			["#212 The commonplace book, revisited", "2026-09-25", 3303],
 			["#211 Notes from the field: a week of walking in Kyoto", "2026-09-18", 2507],
@@ -208,6 +283,9 @@ const LIBRARY = [
 				3660,
 			],
 			["Ep. 87: The quiet economics of open source", "2026-09-23", 3420],
+			// Older than every other episode, so the list pages' first screens stay the prototype's.
+			["Ep. 86: Inside the radar room (video)", "2026-07-15", 10, { video: true }],
+			["Ep. 85: When the radio towers went quiet", "2026-07-01", 3480, { missing: true }],
 		],
 	},
 	{
@@ -279,22 +357,40 @@ function libraryFeed({ slug, title, author }) {
 	};
 }
 
-/** @param {LibraryPodcast} podcast @param {number} audioBytes */
-function libraryFeedXml(podcast, audioBytes) {
+/**
+ * Where an episode's media and chapters are served. The test pattern is made on request,
+ * so its enclosure length is 0, as RSS has it for a size not known in advance.
+ * @param {LibraryPodcast} podcast @param {number} n
+ */
+function libraryMedia({ slug, episodes }, n) {
+	const [, , seconds, extra] = episodes[n];
+	const route = `/library/${slug}/${n}`;
+	return {
+		route,
+		...(extra?.video
+			? { file: `${route}.mp4`, type: "video/mp4", length: 0 }
+			: { file: `${route}.wav`, type: "audio/wav", length: silentWav(seconds).length }),
+		chaptersUrl: extra?.chapters && `${base}${route}.json`,
+	};
+}
+
+/** @param {LibraryPodcast} podcast */
+function libraryFeedXml(podcast) {
 	const feed = libraryFeed(podcast);
-	const items = podcast.episodes.map(
-		([title, date, seconds], n) => `
+	const items = podcast.episodes.map(([title, date, seconds], n) => {
+		const media = libraryMedia(podcast, n);
+		return `
 		<item>
 			<title>${xml(title)}</title>
 			<guid isPermaLink="false">podnotes-library-${podcast.slug}-${n}</guid>
 			<pubDate>${new Date(`${date}T12:00:00Z`).toUTCString()}</pubDate>
 			<description>${xml(title)}.</description>
-			<enclosure url="${base}/library/${podcast.slug}/${n}.wav" type="audio/wav" length="${audioBytes}"/>
-			<itunes:duration>${seconds}</itunes:duration>
-		</item>`,
-	);
+			<enclosure url="${base}${media.file}" type="${media.type}" length="${media.length}"/>
+			<itunes:duration>${seconds}</itunes:duration>${media.chaptersUrl ? `\n\t\t\t<podcast:chapters url="${media.chaptersUrl}" type="application/json+chapters"/>` : ""}
+		</item>`;
+	});
 	return `<?xml version="1.0" encoding="UTF-8"?>
-<rss version="2.0" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
+<rss version="2.0" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:podcast="https://podcastindex.org/namespace/1.0">
 	<channel>
 		<title>${xml(feed.title)}</title>
 		<link>${feed.link}</link>
@@ -335,20 +431,24 @@ function libraryManifest() {
 			return {
 				feed,
 				missing: podcast.missing === true,
-				episodes: podcast.episodes.map(([title, date, seconds], n) => ({
-					title,
-					streamUrl: `${base}/library/${podcast.slug}/${n}.wav`,
-					url: feed.url,
-					description: `${title}.`,
-					content: "",
-					podcastName: feed.title,
-					artworkUrl: feed.artworkUrl,
-					episodeDate: `${date}T12:00:00.000Z`,
-					feedUrl: feed.url,
-					itunesTitle: "",
-					duration: seconds,
-					mediaType: "audio",
-				})),
+				episodes: podcast.episodes.map(([title, date, seconds, extra], n) => {
+					const { file, chaptersUrl } = libraryMedia(podcast, n);
+					return {
+						title,
+						streamUrl: `${base}${file}`,
+						url: feed.url,
+						description: `${title}.`,
+						content: "",
+						podcastName: feed.title,
+						artworkUrl: feed.artworkUrl,
+						episodeDate: `${date}T12:00:00.000Z`,
+						feedUrl: feed.url,
+						itunesTitle: "",
+						duration: seconds,
+						...(chaptersUrl && { chaptersUrl }),
+						mediaType: extra?.video ? "video" : "audio",
+					};
+				}),
 			};
 		}),
 		add: libraryFeed(ADD_PODCAST),
@@ -357,7 +457,7 @@ function libraryManifest() {
 
 function serve() {
 	const audio = wav();
-	/** @type {Record<string, [string, Buffer]>} */
+	/** @type {Record<string, [string, Buffer | Stream]>} */
 	const routes = {
 		"/feed.xml": ["application/rss+xml", Buffer.from(feedXml(audio.length, FEED_TITLE, ""))],
 		"/artwork.svg": ["image/svg+xml", Buffer.from(artwork(FEED_TITLE, "#7c3aed"))],
@@ -379,6 +479,9 @@ function serve() {
 	};
 	for (let n = 1; n <= 5; n++) routes[`/t/episode-${n}.wav`] = ["audio/wav", audio];
 	routes["/library.json"] = ["application/json", Buffer.from(JSON.stringify(libraryManifest()))];
+	// Made on their first request, so the server starts without ffmpeg.
+	/** @type {Record<string, () => Promise<Buffer>>} */
+	const videos = {};
 	for (const podcast of [...LIBRARY, ADD_PODCAST]) {
 		routes[`/library/${podcast.slug}.svg`] = [
 			"image/svg+xml",
@@ -387,16 +490,35 @@ function serve() {
 		if (!podcast.missing) {
 			routes[`/library/${podcast.slug}.xml`] = [
 				"application/rss+xml",
-				Buffer.from(libraryFeedXml(podcast, audio.length)),
+				Buffer.from(libraryFeedXml(podcast)),
 			];
 		}
-		podcast.episodes.forEach((_, n) => {
-			routes[`/library/${podcast.slug}/${n}.wav`] = ["audio/wav", audio];
+		podcast.episodes.forEach(([, , seconds, extra], n) => {
+			const { route, file } = libraryMedia(podcast, n);
+			if (extra?.chapters) {
+				const chapters = extra.chapters.map(([startTime, title]) => ({ startTime, title }));
+				routes[`${route}.json`] = [
+					"application/json+chapters",
+					Buffer.from(JSON.stringify({ version: "1.2.0", chapters })),
+				];
+			}
+			if (extra?.video) {
+				/** @type {Promise<Buffer> | undefined} */
+				let made;
+				// A failed run is dropped, so the next request tries again.
+				videos[file] = () =>
+					(made ??= testPattern(seconds).catch((error) => {
+						made = undefined;
+						throw error;
+					}));
+			} else if (!extra?.missing) {
+				routes[file] = ["audio/wav", silentWav(seconds)];
+			}
 		});
 	}
 	/** @type {string[]} */
 	const requests = [];
-	const server = http.createServer((request, response) => {
+	const server = http.createServer(async (request, response) => {
 		if (request.method === "POST" && request.url === "/__retitle") {
 			routes["/feed.xml"][1] = Buffer.from(feedXml(audio.length, FEED_TITLE, "", true));
 			response.end();
@@ -414,12 +536,26 @@ function serve() {
 		}
 		const fromPodNotes = request.headers.host?.startsWith(host);
 		if (fromPodNotes) requests.push(`${request.method} ${request.url}`);
-		const route = routes[request.url ?? ""];
+		const url = request.url ?? "";
+		let route = routes[url];
+		if (!route && videos[url]) {
+			try {
+				route = ["video/mp4", await videos[url]()];
+			} catch (error) {
+				response.writeHead(500).end(String(error));
+				return;
+			}
+		}
 		if (!route) {
 			response.writeHead(404).end();
 			return;
 		}
 		const [type, body] = route;
+		/** @param {number} start @param {number} end */
+		const send = (start, end) =>
+			Buffer.isBuffer(body)
+				? response.end(body.subarray(start, end + 1))
+				: pipeline(Readable.from(body.chunks(start, end)), response, () => {});
 		// The player seeks with Range requests, so serve 206 partial content.
 		const range = /^bytes=(\d*)-(\d*)$/.exec(request.headers.range ?? "");
 		if (!range) {
@@ -430,7 +566,7 @@ function serve() {
 				// As a podcast host serves artwork, so covers seen once still show offline.
 				...(type.startsWith("image/") && { "Cache-Control": "max-age=86400" }),
 			});
-			response.end(body);
+			send(0, body.length - 1);
 			return;
 		}
 		const start = range[1] ? Number(range[1]) : body.length - Number(range[2]);
@@ -442,7 +578,7 @@ function serve() {
 			"Content-Range": `bytes ${start}-${end}/${body.length}`,
 			"Accept-Ranges": "bytes",
 		});
-		response.end(body.subarray(start, end + 1));
+		send(start, end);
 	});
 	server.on("error", (error) => {
 		console.error(`The fixture feed cannot listen on 127.0.0.1:${port}: ${error.message}`);
diff --git a/.claude/skills/verify/screens.mjs b/.claude/skills/verify/screens.mjs
index af7f92f4..6fb89716 100644
--- a/.claude/skills/verify/screens.mjs
+++ b/.claude/skills/verify/screens.mjs
@@ -8,7 +8,7 @@
 //   node .claude/skills/verify/screens.mjs go '<page JSON>'     e.g. '{"kind":"feed","key":"Field Notes"}'
 //   node .claude/skills/verify/screens.mjs offline <on|off>
 //   node .claude/skills/verify/screens.mjs shot <file.png>
-//   node .claude/skills/verify/screens.mjs set <state|all> <label> [--widths sidebar,pane,phone] [--themes light,dark]
+//   node .claude/skills/verify/screens.mjs set <state|player|all> <label> [--widths sidebar,pane,phone] [--themes light,dark]
 //
 // place   sidebar: the view in the right sidebar, 320 x 720. pane: the view in the
 //         main area, 820 x 680, both sidebars collapsed. phone: mobile emulation on a
@@ -16,11 +16,12 @@
 //         exactly that. Any other place leaves the phone for the desktop.
 // seed    empty is a first run. library has the fixture library's eight podcasts (one
 //         feed answers 404), a queue of four, a playlist and some played episodes;
-//         episodes is the same vault. lists adds Favorites, three more playlists and
-//         a loaded, paused episode. local adds four media files in vault folders,
-//         registered as local files; offline adds four downloaded episodes instead.
-//         It rewrites data.json while PodNotes is disabled and clears its feed
-//         cache, as a user would have it after earlier use.
+//         episodes is the same vault. lists adds Favorites, three more playlists, a
+//         1.25x speed and a loaded, paused episode. local adds four media files in vault
+//         folders, registered as local files; offline adds four downloaded episodes
+//         instead. It rewrites data.json while PodNotes is disabled, deletes the episode
+//         notes under PodNotes/ and clears its feed cache, as a user would have it after
+//         earlier use.
 // offline on: the renderer goes offline through CDP, so navigator.onLine is false
 //         and the window fires `offline`, and the fixture server stops, so feed
 //         requests fail too: Obsidian sends them from its main process, which CDP
@@ -33,10 +34,20 @@
 //         Then <state>-sheet.png has a row per width: light, then dark, each shot
 //         followed by the prototype's screen when the design folder has one.
 //         States: first-run, add-podcast, library, episodes, error-feed, queue,
-//         playlists, playlist, latest, played, local-files, offline, status-bar.
+//         playlists, playlist, latest, played, local-files, offline, status-bar, and the
+//         player's: now-playing, mini-player, capture, chapters, up-next, up-next-empty,
+//         no-chapters, video, local-player, media-error. player runs the player's states
+//         and all runs every state; both go on past a failed state and fail at the end.
 //         status-bar is the queue with the mini player and a "9 properties" item in
 //         Obsidian's status bar, which that state's shots keep. It has no phone shot:
 //         Obsidian hides the status bar on mobile.
+//         A player state plays the scene's current episode until its media loads, then
+//         pauses it at a fixed second, and opens the full player over the Library;
+//         mini-player stays on the podcast's page. media-error waits for the load to
+//         fail instead. capture, chapters, up-next and up-next-empty then press the full
+//         player's Timestamp, Chapters or Up next button with real input, so they fail
+//         at once on a full player without a button that reads exactly that. capture
+//         keeps the "Timestamp added to" notice in its shots.
 import { execFileSync } from "node:child_process";
 import fs from "node:fs";
 import os from "node:os";
@@ -78,7 +89,41 @@ const CURRENT_THEME = `(document.body.classList.contains("theme-dark") ? "dark"
  * @typedef {(data: Data, library: Library) => void | Promise<void>} Ingredient
  */
 
-/** @type {Record<string, { scene: string, page: (library: Library) => Page, text?: (library: Library) => string, paste?: boolean, offline?: boolean, statusBar?: boolean }>} */
+/**
+ * @typedef {object} Recipe
+ * @property {string} scene
+ * @property {Ingredient} [extra] Applied after the scene's ingredients.
+ * @property {(library: Library) => Page} page
+ * @property {(library: Library) => string} [text] Text the view shows once it is ready.
+ * @property {boolean} [paste]
+ * @property {boolean} [offline]
+ * @property {boolean} [statusBar]
+ * @property {boolean} [open] Opens the full player.
+ * @property {number | "error"} [play] The second the current episode pauses at, or "error"
+ *   when its media fails to load.
+ * @property {boolean} [note] The episode note already holds a capture.
+ * @property {string} [press] The full player's button to press, by its text.
+ * @property {string} [notice] Text an Obsidian notice shows, which the shot keeps.
+ */
+
+/** The episode the listener is in the middle of, as in the prototype. @type {[string, string]} */
+const NOW_PLAYING = ["Field Notes", "#213"];
+const NOW_PLAYING_AT = 2294;
+/** @type {[string, string]} */
+const NO_CHAPTERS = ["Signal & Noise", "Ep. 87"];
+/** @type {[string, string]} */
+const VIDEO = ["Signal & Noise", "Ep. 86"];
+/** @type {[string, string]} */
+const BROKEN_MEDIA = ["Signal & Noise", "Ep. 85"];
+/** @type {Recipe} */
+const FULL_PLAYER = {
+	scene: "lists",
+	page: () => ({ kind: "library" }),
+	open: true,
+	play: NOW_PLAYING_AT,
+};
+
+/** @type {Record<string, Recipe>} */
 const STATES = {
 	"first-run": { scene: "empty", page: () => ({ kind: "library" }) },
 	"add-podcast": {
@@ -127,6 +172,62 @@ const STATES = {
 		text: () => QUEUE[0][1],
 		statusBar: true,
 	},
+	// The chapters load after the player opens. This one is #213's at NOW_PLAYING_AT.
+	"now-playing": { ...FULL_PLAYER, text: () => "The method of loci in practice" },
+	"mini-player": {
+		scene: "lists",
+		page: (library) => ({ kind: "feed", key: episode(library, NOW_PLAYING).podcastName }),
+		play: NOW_PLAYING_AT,
+		text: (library) => episode(library, NOW_PLAYING).title.slice(0, 40),
+	},
+	// The capture's notice, which has to outlast the shot.
+	capture: { ...FULL_PLAYER, note: true, press: "Timestamp", notice: "Timestamp added to" },
+	// #213's last chapter.
+	chapters: { ...FULL_PLAYER, press: "Chapters", text: () => "Listener question" },
+	"up-next": { ...FULL_PLAYER, press: "Up next", text: () => QUEUE[0][1] },
+	"up-next-empty": {
+		...FULL_PLAYER,
+		extra: (data) => {
+			data.queue.episodes = [];
+		},
+		press: "Up next",
+	},
+	"no-chapters": {
+		...FULL_PLAYER,
+		extra: (data, library) => {
+			data.currentEpisode = episode(library, NO_CHAPTERS);
+		},
+		play: 1140,
+		text: () => NO_CHAPTERS[1],
+	},
+	video: {
+		...FULL_PLAYER,
+		extra: (data, library) => {
+			data.currentEpisode = episode(library, VIDEO);
+			data.queue.episodes = latest(library).slice(0, 14);
+		},
+		play: 4,
+		text: () => VIDEO[1],
+	},
+	"local-player": {
+		...FULL_PLAYER,
+		scene: "local",
+		extra: (data) => {
+			data.currentEpisode = data.downloadedEpisodes["local file"].find(
+				(/** @type {{ filePath: string }} */ file) => file.filePath === LOCAL_FILES[0][0],
+			);
+		},
+		play: 1283,
+		text: () => path.parse(LOCAL_FILES[0][0]).name,
+	},
+	"media-error": {
+		...FULL_PLAYER,
+		extra: (data, library) => {
+			data.currentEpisode = episode(library, BROKEN_MEDIA);
+		},
+		play: "error",
+		text: () => BROKEN_MEDIA[1],
+	},
 };
 const STATUS_ITEM = "podnotes-verify-status-item";
 
@@ -153,7 +254,7 @@ const PLAYLIST = {
 };
 /** @type {[[string, string], number | "finished"][]} */
 const PLAYED = [
-	[["Field Notes", "#213"], 2294],
+	[NOW_PLAYING, NOW_PLAYING_AT],
 	[["Field Notes", "#212"], "finished"],
 	[["Field Notes", "#210"], "finished"],
 	[["Field Notes", "#209"], 760],
@@ -191,8 +292,6 @@ const PLAYLISTS = [
 		],
 	},
 ];
-/** @type {[string, string]} */
-const NOW_PLAYING = ["Field Notes", "#213"];
 /** @type {[string, string][]} */
 const DOWNLOADS = [
 	["Field Notes", "#213"],
@@ -425,13 +524,17 @@ function missingFeed(lib) {
 	return feed;
 }
 
-/** The newest episode Latest episodes lists: Night Owl Science's feed answers 404. @param {Library} lib */
-function newestTitle(lib) {
+/** What Latest episodes lists, newest first: Night Owl Science's feed answers 404. @param {Library} lib */
+function latest(lib) {
 	return lib.feeds
 		.filter((feed) => !feed.missing)
 		.flatMap((feed) => feed.episodes)
-		.reduce((newest, episode) => (episode.episodeDate > newest.episodeDate ? episode : newest))
-		.title;
+		.sort((a, b) => b.episodeDate.localeCompare(a.episodeDate));
+}
+
+/** @param {Library} lib */
+function newestTitle(lib) {
+	return latest(lib)[0].title;
 }
 
 /** @param {Library} lib @param {[string, string]} reference */
@@ -485,6 +588,7 @@ function listening(data, lib) {
 	data.favorites.episodes = FAVORITES.map((reference) => episode(lib, reference));
 	for (const list of PLAYLISTS) data.playlists[list.name] = playlist(list, lib);
 	data.currentEpisode = episode(lib, NOW_PLAYING);
+	data.defaultPlaybackRate = 1.25;
 }
 
 /** The entries src/playLocalFile.ts writes, for media written into the vault. @type {Ingredient} */
@@ -571,21 +675,29 @@ function downloads(data, lib) {
 	}
 }
 
-/** @param {string} scene */
-async function seed(scene) {
+/** @param {string} scene @param {Ingredient} [extra] */
+async function seed(scene, extra) {
 	const ingredients = SCENES[scene];
 	if (!ingredients) throw new Error(`Usage: seed <${Object.keys(SCENES).join("|")}>`);
 	/** @type {Data} */
 	const data = structuredClone(/** @type {Data} */ (config.defaultData));
-	if (ingredients.length > 0) {
+	const all = extra ? [...ingredients, extra] : ingredients;
+	if (all.length > 0) {
 		const lib = await library();
-		for (const add of ingredients) await add(data, lib);
+		for (const add of all) await add(data, lib);
 	}
 	await evaluate(`
+		const plugin = app.plugins.plugins.podnotes;
 		await app.plugins.disablePlugin("podnotes");
+		// Unloading saves without waiting, and that save merges into the file written next.
+		await plugin?.flushSaves();
 		for (const key of Object.keys(localStorage)) {
 			if (key.includes("podnotes:feed-cache")) localStorage.removeItem(key);
 		}
+		// A note left by an earlier capture shows as Open note and as a note mark in lists.
+		for (const note of app.vault.getMarkdownFiles()) {
+			if (note.path.startsWith("PodNotes/")) await app.vault.delete(note);
+		}
 		return true;
 	`);
 	fs.writeFileSync(DATA_PATH, `${JSON.stringify(data, null, "\t")}\n`);
@@ -607,6 +719,86 @@ async function go(page) {
 	`);
 }
 
+const PLAYER_STATE = `let state;
+	app.plugins.plugins.podnotes.player.state.subscribe((value) => (state = value))();`;
+
+/**
+ * Plays the episode the scene restored and pauses it at `at` seconds once its media has
+ * loaded, saved there so lists show the same progress every time. "error" waits for the
+ * load to fail instead.
+ * @param {number | "error"} at
+ */
+async function playback(at) {
+	await evaluate(
+		`${PLAYER_STATE} app.plugins.plugins.podnotes.player.play(state.episode); return true;`,
+	);
+	if (at === "error") {
+		await waitFor(
+			`${PLAYER_STATE} return state.status === "error";`,
+			"The episode's media did not fail to load",
+		);
+		return;
+	}
+	await waitFor(
+		`${PLAYER_STATE} return state.status === "playing";`,
+		"The episode's media did not load and play",
+	);
+	await evaluate(`
+		const { player } = app.plugins.plugins.podnotes;
+		player.pause();
+		player.seek(${at});
+		return true;
+	`);
+	await waitFor(
+		`const media = document.querySelector(".podnotes-media");
+		return media.paused && !media.seeking && media.readyState >= 2 && media.currentTime === ${at};`,
+		`The episode did not pause at ${at} s`,
+	);
+	await evaluate("app.plugins.plugins.podnotes.player.save(); return true;");
+}
+
+/** Captures once without the UI, so the episode note exists, as after an earlier capture. */
+async function episodeNote() {
+	const capture = await evaluate(`
+		// The last note open in an editor would take the capture.
+		app.workspace.detachLeavesOfType("markdown");
+		return await app.plugins.plugins.podnotes.capture.timestamp();
+	`);
+	if (capture?.destination !== "note") {
+		throw new Error(`The capture went to ${JSON.stringify(capture)}, not the episode note.`);
+	}
+}
+
+/**
+ * Presses the full player's button that reads `text`, with real input. A panel switch or
+ * tab that is already on stays on. Fails at once without such a button.
+ * @param {string} text
+ */
+async function press(text) {
+	const button = `[...document.querySelectorAll("section.pn-player button")].find((button) =>
+		button.getBoundingClientRect().width > 0 && button.innerText.trim() === ${JSON.stringify(text)})`;
+	// "true" or "false" for a panel switch or tab.
+	const state = `((button) => !button ? "missing" :
+		button.getAttribute("aria-pressed") ?? button.getAttribute("aria-selected") ?? "action")(${button})`;
+	const kind = await evaluate(`return ${state};`);
+	if (kind === "missing") {
+		throw new Error(`No button in the full player (section.pn-player) reads "${text}".`);
+	}
+	if (kind === "true") return;
+	execFileSync(
+		process.execPath,
+		[UI, "click", "section.pn-player button", "--text", text, "--exact"],
+		{ stdio: "inherit" },
+	);
+	if (kind === "false") {
+		await waitFor(`return ${state} === "true";`, `"${text}" did not turn on`, 5000);
+		return;
+	}
+	// Timestamp reads "Added" for 1.2 s after a capture.
+	await sleep(1500);
+	await waitFor(`return Boolean(${button});`, `"${text}" did not come back`, 5000);
+}
+
 /** @param {boolean} on */
 async function offline(on) {
 	execFileSync(process.execPath, [FIXTURES, on ? "stop" : "library"]);
@@ -691,10 +883,10 @@ async function settle(text = "") {
 
 /**
  * `statusBar` keeps Obsidian's status bar in the capture, which then fails unless the
- * whole bar lies inside it.
- * @param {string} file @param {string} [text] @param {string} [themeName] @param {boolean} [statusBar]
+ * whole bar lies inside it. `notice` keeps Obsidian's notices, and fails unless one says it.
+ * @param {string} file @param {string} [text] @param {string} [themeName] @param {boolean} [statusBar] @param {string} [notice]
  */
-async function shot(file, text, themeName, statusBar = false) {
+async function shot(file, text, themeName, statusBar = false, notice = "") {
 	await cdp("Input.dispatchMouseEvent", { type: "mouseMoved", x: -10, y: -10 });
 	await evaluate(`
 		document.activeElement?.blur?.();
@@ -706,7 +898,7 @@ async function shot(file, text, themeName, statusBar = false) {
 		document.querySelectorAll(".tooltip").forEach((tooltip) => tooltip.remove());
 		const notices = [...document.querySelectorAll(".notice")].map((notice) => {
 			const said = notice.innerText.trim();
-			notice.remove();
+			if (!${JSON.stringify(notice)}) notice.remove();
 			return said;
 		});
 		// Obsidian's status bar floats over the view's bottom-right corner.
@@ -718,6 +910,9 @@ async function shot(file, text, themeName, statusBar = false) {
 			: document.querySelector(".podcast-view").getBoundingClientRect().toJSON();
 		return { notices, rect, bar: bar?.getBoundingClientRect().toJSON(), scale: devicePixelRatio, theme: ${CURRENT_THEME} };
 	`);
+	if (notice && !target.notices.some((/** @type {string} */ said) => said.includes(notice))) {
+		throw new Error(`No notice says "${notice}": ${JSON.stringify(target.notices)}`);
+	}
 	// Whole pixels, so the capture is not resampled.
 	const [x, y, width, height] = ["x", "y", "width", "height"].map((key) =>
 		Math.round(target.rect[key]),
@@ -821,11 +1016,14 @@ function contactSheet(rows, out) {
 /** @param {string} state @param {string} label @param {string[]} widths @param {string[]} themes */
 async function set(state, label, widths, themes) {
 	const recipe = STATES[state];
-	if (!recipe)
-		throw new Error(`Unknown state ${state}; use all or ${Object.keys(STATES).join(", ")}.`);
+	if (!recipe) {
+		throw new Error(
+			`Unknown state ${state}; use all, player or ${Object.keys(STATES).join(", ")}.`,
+		);
+	}
 	const lib = await library();
 	const dir = path.join(OUT, label);
-	await seed(recipe.scene);
+	await seed(recipe.scene, recipe.extra);
 	/** @type {{ file: string, caption: string }[][]} */
 	const rows = [];
 	try {
@@ -835,6 +1033,12 @@ async function set(state, label, widths, themes) {
 			const row = [];
 			for (const name of themes) {
 				await go(recipe.page(lib));
+				if (recipe.open) {
+					await evaluate(
+						"app.plugins.plugins.podnotes.navigation.expand(); return true;",
+					);
+				}
+				if (recipe.play !== undefined) await playback(recipe.play);
 				if (recipe.paste) {
 					execFileSync(
 						process.execPath,
@@ -845,8 +1049,16 @@ async function set(state, label, widths, themes) {
 				if (recipe.offline) await offline(true);
 				await theme(name);
 				if (recipe.statusBar) await statusItem(true);
+				if (recipe.note) await episodeNote();
+				// Notices from earlier shots would stand above the one the press shows.
+				if (recipe.notice) {
+					await evaluate(
+						`document.querySelectorAll(".notice").forEach((n) => n.remove()); return true;`,
+					);
+				}
+				if (recipe.press) await press(recipe.press);
 				const file = path.join(dir, `${state}-${width}-${name}.png`);
-				await shot(file, recipe.text?.(lib), name, recipe.statusBar);
+				await shot(file, recipe.text?.(lib), name, recipe.statusBar, recipe.notice);
 				row.push({ file, caption: `${width} ${name} ${label}` });
 				const prototype = path.join(DESIGN, `${state}-${width}-${name}.png`);
 				if (fs.existsSync(prototype))
@@ -886,9 +1098,25 @@ try {
 			...themes.filter((name) => !(name in THEMES)),
 		];
 		if (unknown.length > 0) throw new Error(`Unknown width or theme: ${unknown.join(", ")}.`);
-		for (const state of target === "all" ? Object.keys(STATES) : [target]) {
-			await set(state, rest[0], widths, themes);
+		const names = Object.keys(STATES);
+		const states =
+			target === "all"
+				? names
+				: target === "player"
+					? names.filter((name) => STATES[name].play !== undefined)
+					: [target];
+		const failed = [];
+		for (const state of states) {
+			try {
+				await set(state, rest[0], widths, themes);
+			} catch (error) {
+				console.error(
+					`${state}: ${error instanceof Error ? error.message : String(error)}`,
+				);
+				failed.push(state);
+			}
 		}
+		if (failed.length > 0) throw new Error(`Failed: ${failed.join(", ")}.`);
 	} else {
 		throw new Error(
 			"Usage: screens.mjs place|theme|seed|go|offline|shot|set ... (see the header of this file)",
diff --git a/.claude/skills/verify/ui.mjs b/.claude/skills/verify/ui.mjs
index 4a7e94f4..50bce9e7 100755
--- a/.claude/skills/verify/ui.mjs
+++ b/.claude/skills/verify/ui.mjs
@@ -2,17 +2,18 @@
 // Trusted input for this worktree's Obsidian instance: real mouse and keyboard
 // events sent through `obsidian dev:cdp`, aimed at an element found by CSS.
 //
-//   node .claude/skills/verify/ui.mjs click '<css>' [--text <substring>] [--right] [--timeout <ms>]
+//   node .claude/skills/verify/ui.mjs click '<css>' [--text <substring> [--exact]] [--right] [--timeout <ms>]
 //   node .claude/skills/verify/ui.mjs type '<css>' '<text>'    click, then insert at the cursor
 //   node .claude/skills/verify/ui.mjs fill '<css>' '<text>'    click, select all, then replace
 //   node .claude/skills/verify/ui.mjs key <Enter|Escape|Tab|ArrowDown|ArrowUp|Backspace|<char>|Ctrl+<char>>
-//   node .claude/skills/verify/ui.mjs wait '<css>' [--text <substring>] [--timeout <ms>]
+//   node .claude/skills/verify/ui.mjs wait '<css>' [--text <substring> [--exact]] [--timeout <ms>]
 //   node .claude/skills/verify/ui.mjs uri 'obsidian://podnotes?...'
 //
 // `click`, `type`, `fill` and `wait` wait up to 10 s until exactly one visible
 // element matches the selector and --text filter and nothing covers its center,
 // so they never act on a list still loading, on the wrong match, or through an
-// overlay. `key` and `uri` do not wait.
+// overlay. --exact matches only an element whose visible text is --text, so
+// "Chapters" does not also match "Chapters (8)". `key` and `uri` do not wait.
 import { fileURLToPath } from "node:url";
 import {
 	cliSocketExists,
@@ -78,9 +79,11 @@ async function locate(css, text) {
 	const output = await obsidian([
 		"eval",
 		`code=(() => {
+			const text = ${JSON.stringify(text ?? "")};
 			const matches = [...document.querySelectorAll(${JSON.stringify(css)})].filter((el) => {
 				const rect = el.getBoundingClientRect();
-				return rect.width > 0 && rect.height > 0 && (${JSON.stringify(text ?? "")} === "" || el.textContent.includes(${JSON.stringify(text ?? "")}));
+				return rect.width > 0 && rect.height > 0 && (text === "" ||
+					(${exact} ? el.innerText.trim() === text : el.textContent.includes(text)));
 			});
 			if (matches.length !== 1) return JSON.stringify({ count: matches.length });
 			matches[0].scrollIntoView({ block: "center", inline: "center" });
@@ -189,6 +192,7 @@ function flag(args, name) {
 
 const [verb, target, ...rest] = process.argv.slice(2);
 const text = flag(rest, "--text");
+const exact = rest.includes("--exact");
 const timeoutMs = Number(flag(rest, "--timeout") ?? 10000);
 try {
 	if (verb === "click" && target)
diff --git a/src/API/API.test.ts b/src/API/API.test.ts
index 6ae2254b..eeef3910 100644
--- a/src/API/API.test.ts
+++ b/src/API/API.test.ts
@@ -206,6 +206,14 @@ describe("API playback rate controls", () => {
 		expect(api.playbackRate).toBe(0.5);
 	});
 
+	test("keeps a quarter rate, such as 1.25, set through the API", () => {
+		const { api, media } = setup();
+
+		api.playbackRate = 1.25;
+
+		expect([api.playbackRate, media().playbackRate]).toEqual([1.25, 1.25]);
+	});
+
 	test("resets playback rate to the configured default", () => {
 		const { api } = setup();
 
diff --git a/src/API/API.ts b/src/API/API.ts
index 2f36573e..0e018e98 100644
--- a/src/API/API.ts
+++ b/src/API/API.ts
@@ -11,14 +11,7 @@ import {
 	PLAYBACK_RATE_STEP,
 } from "src/utility/playbackRate";
 import { getEpisodeTranscriptPath } from "src/utility/getEpisodeTranscriptPath";
-
-// Default used when a persisted/configured skip length is missing or invalid
-// (e.g. a cleared settings field serialized to null/NaN). Mirrors
-// DEFAULT_SETTINGS.skip*Length.
-const DEFAULT_SKIP_LENGTH = 15;
-
-const normalizeSkipLength = (length: number): number =>
-	Number.isFinite(length) && length > 0 ? length : DEFAULT_SKIP_LENGTH;
+import { normalizeSkipLength } from "src/utility/skipLength";
 
 export class API implements IAPI {
 	private get player() {
diff --git a/src/commands.test.ts b/src/commands.test.ts
index 2ea7fd04..c4a40c26 100644
--- a/src/commands.test.ts
+++ b/src/commands.test.ts
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import * as obsidian from "obsidian";
-import { MarkdownView, TFile, TFolder, type WorkspaceLeaf } from "obsidian";
+import { MarkdownView, TFile, TFolder, type EditorPosition, type WorkspaceLeaf } from "obsidian";
 import { get } from "svelte/store";
 import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
 import PodNotes from "./main";
@@ -51,28 +51,58 @@ function vaultFile(path: string): TFile {
 	});
 }
 
-/** Enough of CodeMirror for a capture: text, a caret, and replaceSelection. */
+/** Enough of CodeMirror for a capture and its Undo: text, a selection, offsets and ranges. */
 function fakeEditor(text: string, caret = text.length) {
 	let value = text;
-	let at = caret;
+	let from = caret;
+	let to = caret;
 	const lines = () => value.split("\n");
+	const pos = (offset: number) => {
+		if (offset < 0 || offset > value.length)
+			throw new RangeError(`Offset ${offset} is outside`);
+		const before = value.slice(0, offset).split("\n");
+		return { line: before.length - 1, ch: before[before.length - 1].length };
+	};
+	const offset = ({ line, ch }: EditorPosition) =>
+		lines()
+			.slice(0, line)
+			.reduce((sum, text) => sum + text.length + 1, ch);
 	return {
 		getValue: () => value,
 		getLine: (line: number) => lines()[line] ?? "",
 		lineCount: () => lines().length,
-		getCursor: () => {
-			const before = value.slice(0, at).split("\n");
-			return { line: before.length - 1, ch: before[before.length - 1].length };
+		getCursor: (side?: "from" | "to") => pos(side === "from" ? from : to),
+		getSelection: () => value.slice(from, to),
+		setSelection(anchor: EditorPosition, head = anchor) {
+			from = offset(anchor);
+			to = offset(head);
 		},
 		replaceSelection: (replacement: string) => {
-			value = value.slice(0, at) + replacement + value.slice(at);
-			at += replacement.length;
+			value = value.slice(0, from) + replacement + value.slice(to);
+			from = to = from + replacement.length;
+		},
+		posToOffset: offset,
+		offsetToPos: pos,
+		getRange: (start: EditorPosition, end: EditorPosition) =>
+			value.slice(offset(start), offset(end)),
+		replaceRange(replacement: string, start: EditorPosition, end = start) {
+			value = value.slice(0, offset(start)) + replacement + value.slice(offset(end));
 		},
 	};
 }
 
+/**
+ * `notes` is what is on disk. Like Obsidian's, `cachedRead` answers from a cache that a
+ * change on disk outside the vault does not update; `process` reads the disk.
+ */
 function fakeVault() {
 	const notes = new Map<string, { file: TFile; content: string }>();
+	const cache = new Map<string, string>();
+	const write = (file: TFile, content: string) => {
+		notes.get(file.path)!.content = content;
+		cache.set(file.path, content);
+		return content;
+	};
 	return {
 		notes,
 		read: (path: string) => notes.get(path)?.content,
@@ -86,16 +116,23 @@ function fakeVault() {
 				notes.set(path, { file, content });
 				return file;
 			},
-			process: async (file: TFile, change: (content: string) => string) => {
-				const note = notes.get(file.path)!;
-				note.content = change(note.content);
-				return note.content;
+			read: async (file: TFile) => notes.get(file.path)!.content,
+			cachedRead: async (file: TFile) => {
+				if (!cache.has(file.path)) cache.set(file.path, notes.get(file.path)!.content);
+				return cache.get(file.path)!;
 			},
+			modify: async (file: TFile, content: string) => {
+				write(file, content);
+			},
+			process: async (file: TFile, change: (content: string) => string) =>
+				write(file, change(notes.get(file.path)!.content)),
 		},
 	};
 }
 
-function fakeWorkspace() {
+/** A note opened in a tab is the vault's file, and saving the tab writes its text there. */
+function fakeWorkspace(notes: ReturnType<typeof fakeVault>["notes"]) {
+	const fileAt = (path: string) => notes.get(path)?.file ?? vaultFile(path);
 	const listeners = new Map<string, Array<(...args: unknown[]) => void>>();
 	const trigger = (name: string, ...args: unknown[]) => {
 		for (const listener of listeners.get(name) ?? []) listener(...args);
@@ -121,7 +158,14 @@ function fakeWorkspace() {
 	const openNote = (path: string, text: string, caret?: number, reading = false) => {
 		const leaf = {} as WorkspaceLeaf;
 		const editor = fakeEditor(text, caret);
-		const view = Object.assign(new MarkdownView(leaf), { editor, file: vaultFile(path) });
+		const view = Object.assign(new MarkdownView(leaf), {
+			editor,
+			file: fileAt(path),
+			save: async () => {
+				const note = notes.get(view.file?.path ?? "");
+				if (note) note.content = editor.getValue();
+			},
+		});
 		const mode = vi.spyOn(view, "getMode").mockReturnValue(reading ? "preview" : "source");
 		leaf.view = view;
 		open.push(leaf);
@@ -130,6 +174,13 @@ function fakeWorkspace() {
 		return { leaf, editor, mode };
 	};
 
+	const closeUnsaved = (leaf: WorkspaceLeaf) => {
+		open.splice(open.indexOf(leaf), 1);
+		if (workspace.activeEditor === leaf.view) workspace.activeEditor = null;
+		trigger("layout-change");
+		return () => (leaf.view as MarkdownView).save();
+	};
+
 	return {
 		workspace,
 		/** Paths of the files opened in a tab. */
@@ -142,11 +193,12 @@ function fakeWorkspace() {
 			workspace.activeEditor = null;
 			trigger("active-leaf-change", podNotesLeaf);
 		},
+		/** Closes a tab, which saves its note. */
 		close(leaf: WorkspaceLeaf) {
-			open.splice(open.indexOf(leaf), 1);
-			if (workspace.activeEditor === leaf.view) workspace.activeEditor = null;
-			trigger("layout-change");
+			void closeUnsaved(leaf)();
 		},
+		/** Closes a tab whose save has not landed yet: the returned function lands it. */
+		closeUnsaved,
 	};
 }
 
@@ -155,7 +207,7 @@ const loaded: PodNotes[] = [];
 async function loadPlugin(data: Record<string, unknown>) {
 	const commands: obsidian.Command[] = [];
 	const { vault, read, notes } = fakeVault();
-	const workspace = fakeWorkspace();
+	const workspace = fakeWorkspace(notes);
 	const plugin = Object.create(PodNotes.prototype) as PodNotes;
 	Object.assign(plugin, {
 		loadData: vi.fn().mockResolvedValue(data),
@@ -212,6 +264,30 @@ afterEach(() => {
 	vi.restoreAllMocks();
 });
 
+/** What each Notice said; an Undo notice by its text before the button. */
+const said = () =>
+	notice.mock.calls.map(([message]) =>
+		message instanceof DocumentFragment ? message.firstChild?.textContent : message,
+	);
+
+/** Clicks Undo on the latest Undo notice, and waits for what it does. */
+async function undo() {
+	const undoNotices = notice.mock.calls.flatMap(([message]) =>
+		message instanceof DocumentFragment ? [message] : [],
+	);
+	undoNotices.at(-1)!.querySelector("button")!.click();
+	await new Promise((resolve) => setTimeout(resolve));
+}
+
+const REFUSED = "The note isn't as the capture left it, so the timestamp stays";
+
+/** A note's tab, and the changes a user can make to it. */
+interface Tab {
+	readonly leaf: WorkspaceLeaf;
+	readonly mode: MockInstance<() => "source" | "preview">;
+	close(): void;
+}
+
 describe("capture", () => {
 	it("lands at the caret of the editor focused before the PodNotes view", async () => {
 		const { run, openNote, focusPodNotes, notes } = await loadPlugin(playing);
@@ -222,7 +298,7 @@ describe("capture", () => {
 
 		expect(editor.getValue()).toBe("Listening notes\n- 00:20:34\nLater");
 		expect(notes.size).toBe(0);
-		expect(notice).not.toHaveBeenCalled();
+		expect(said()).toEqual(["Timestamp added to Journal"]);
 	});
 
 	it("keeps a table row intact when the caret is in a cell", async () => {
@@ -334,10 +410,10 @@ describe("capture", () => {
 			created: false,
 		});
 		expect(read(NOTE_PATH)).toBe("# Saved Episode\n- 00:20:34\n- 00:20:34\n");
-		expect(notice).not.toHaveBeenCalled();
+		expect(said()).toEqual(["Created Saved Episode", "Timestamp added to Saved Episode"]);
 	});
 
-	it("appends to an episode note the user already has, without a notice", async () => {
+	it("appends to an episode note the user already has", async () => {
 		const { plugin, notes, read } = await loadPlugin(playing);
 		notes.set(NOTE_PATH, { file: vaultFile(NOTE_PATH), content: "# Mine" });
 
@@ -346,7 +422,7 @@ describe("capture", () => {
 			created: false,
 		});
 		expect(read(NOTE_PATH)).toBe("# Mine\n- 00:20:34\n");
-		expect(notice).not.toHaveBeenCalled();
+		expect(said()).toEqual(["Timestamp added to Saved Episode"]);
 	});
 
 	it("asks for an episode when none is loaded, and writes nothing", async () => {
@@ -363,6 +439,237 @@ describe("capture", () => {
 		expect(notes.size).toBe(0);
 	});
 
+	describe("Undo", () => {
+		async function intoEditor(text: string, caret?: number) {
+			const session = await loadPlugin(playing);
+			session.notes.set("Journal.md", { file: vaultFile("Journal.md"), content: text });
+			const tab = session.openNote("Journal.md", text, caret);
+			session.focusPodNotes();
+			session.run("capture-timestamp");
+			return { ...session, ...tab };
+		}
+
+		it("takes the timestamp out of the editor, leaving the note as it was", async () => {
+			const { editor } = await intoEditor("Listening notes\n\nLater", 16);
+
+			await undo();
+
+			expect(editor.getValue()).toBe("Listening notes\n\nLater");
+			expect(said()).toEqual(["Timestamp added to Journal"]);
+		});
+
+		it.each([
+			["before it", 0, "Re: Notes\n- 00:20:34"],
+			["inside it", 8, "Notes\n- 01:00:20:34"],
+			["after it", 16, "Notes\n- 00:20:34 a great point"],
+		])(
+			"leaves the timestamp once the user typed %s, and says so",
+			async (_where, at, edited) => {
+				const { editor } = await intoEditor("Notes\n");
+				editor.replaceRange(
+					{ 0: "Re: ", 8: "01:", 16: " a great point" }[at]!,
+					editor.offsetToPos(at),
+				);
+
+				await undo();
+
+				expect(editor.getValue()).toBe(edited);
+				expect(said()).toEqual(["Timestamp added to Journal", REFUSED]);
+			},
+		);
+
+		it("leaves the timestamp once a copy of it was pasted before it, and says so", async () => {
+			const { editor } = await intoEditor("Notes\n");
+			editor.replaceRange("- 00:20:34\nA thought\n", editor.offsetToPos(6));
+
+			await undo();
+
+			expect(editor.getValue()).toBe("Notes\n- 00:20:34\nA thought\n- 00:20:34");
+			expect(said()).toEqual(["Timestamp added to Journal", REFUSED]);
+		});
+
+		it("leaves the timestamp while the closed tab's save is pending, and the save keeps it", async () => {
+			const { leaf, closeUnsaved, read } = await intoEditor("Notes\n");
+			const land = closeUnsaved(leaf);
+
+			await undo();
+			expect(read("Journal.md")).toBe("Notes\n");
+			await land();
+
+			expect(read("Journal.md")).toBe("Notes\n- 00:20:34");
+			expect(said()).toEqual(["Timestamp added to Journal", REFUSED]);
+		});
+
+		it("puts back the selection the timestamp replaced", async () => {
+			const session = await loadPlugin(playing);
+			const { editor } = session.openNote("Journal.md", "Heard: draft line");
+			editor.setSelection(editor.offsetToPos(7), editor.offsetToPos(17));
+			session.focusPodNotes();
+			session.run("capture-timestamp");
+			expect(editor.getValue()).toBe("Heard: - 00:20:34");
+
+			await undo();
+
+			expect(editor.getValue()).toBe("Heard: draft line");
+		});
+
+		it.each([
+			["its tab was closed", (tab: Tab) => tab.close()],
+			[
+				"its tab shows another note",
+				async (tab: Tab) => {
+					const view = tab.leaf.view as MarkdownView;
+					await view.save();
+					view.file = vaultFile("Other.md");
+				},
+			],
+			[
+				"it was switched to Reading view",
+				// Obsidian saves a note as it leaves editing.
+				async (tab: Tab) => {
+					await (tab.leaf.view as MarkdownView).save();
+					tab.mode.mockReturnValue("preview");
+				},
+			],
+		])("takes an editor's timestamp out of the saved note once %s", async (_change, change) => {
+			const { leaf, mode, close, read } = await intoEditor("Notes\n");
+			await change({ leaf, mode, close: () => close(leaf) });
+
+			await undo();
+
+			expect(read("Journal.md")).toBe("Notes\n");
+			expect(said()).toEqual(["Timestamp added to Journal"]);
+		});
+
+		it("leaves the saved note's timestamp once the note changed there, and says so", async () => {
+			const { leaf, close, notes, read } = await intoEditor("Notes\n");
+			close(leaf);
+			notes.get("Journal.md")!.content = `Re: ${read("Journal.md")}`;
+
+			await undo();
+
+			expect(read("Journal.md")).toBe("Re: Notes\n- 00:20:34");
+			expect(said()).toEqual(["Timestamp added to Journal", REFUSED]);
+		});
+
+		it("takes the timestamp off the end of the episode note, with the newline it added", async () => {
+			const { plugin, notes, read } = await loadPlugin(playing);
+			notes.set(NOTE_PATH, { file: vaultFile(NOTE_PATH), content: "# Mine" });
+			await plugin.capture.timestamp();
+
+			await undo();
+
+			expect(read(NOTE_PATH)).toBe("# Mine");
+			expect(said()).toEqual(["Timestamp added to Saved Episode"]);
+		});
+
+		it("keeps a note it created, taking out only the timestamp", async () => {
+			const { plugin, notes, read } = await loadPlugin(playing);
+			await plugin.capture.timestamp();
+
+			await undo();
+
+			expect([...notes.keys()]).toEqual([NOTE_PATH]);
+			expect(read(NOTE_PATH)).toBe("# Saved Episode");
+			expect(said()).toEqual(["Created Saved Episode"]);
+		});
+
+		it.each([
+			["the user wrote after it", (text: string) => `${text}My thought\n`],
+			[
+				"a copy of it was pasted before it",
+				(text: string) =>
+					text.replace("- 00:20:34\n", "- 00:20:34\nA thought\n- 00:20:34\n"),
+			],
+		])("leaves the episode note's timestamp once %s, and says so", async (_change, change) => {
+			const { plugin, notes, read } = await loadPlugin(playing);
+			notes.set(NOTE_PATH, { file: vaultFile(NOTE_PATH), content: "# Mine\n" });
+			await plugin.capture.timestamp();
+			const note = notes.get(NOTE_PATH)!;
+			note.content = change(note.content);
+			const changed = note.content;
+
+			await undo();
+
+			expect(read(NOTE_PATH)).toBe(changed);
+			expect(said()).toEqual(["Timestamp added to Saved Episode", REFUSED]);
+		});
+
+		it("leaves the episode note's timestamp once the note's open editor holds more, and says so", async () => {
+			const { plugin, notes, openNote, read } = await loadPlugin(playing);
+			notes.set(NOTE_PATH, { file: vaultFile(NOTE_PATH), content: "# Mine\n" });
+			await plugin.capture.timestamp();
+			const { editor } = openNote(NOTE_PATH, `${read(NOTE_PATH)}Unsaved line\n`);
+
+			await undo();
+
+			expect(editor.getValue()).toBe("# Mine\n- 00:20:34\nUnsaved line\n");
+			expect(read(NOTE_PATH)).toBe("# Mine\n- 00:20:34\n");
+			expect(said()).toEqual(["Timestamp added to Saved Episode", REFUSED]);
+		});
+
+		it("takes the timestamp out through the episode note's open editor", async () => {
+			const { plugin, notes, openNote, read } = await loadPlugin(playing);
+			notes.set(NOTE_PATH, { file: vaultFile(NOTE_PATH), content: "# Mine\n" });
+			await plugin.capture.timestamp();
+			const { editor } = openNote(NOTE_PATH, read(NOTE_PATH)!);
+			notes.get(NOTE_PATH)!.content = "on disk only";
+
+			await undo();
+
+			expect(editor.getValue()).toBe("# Mine\n");
+			expect(read(NOTE_PATH)).toBe("on disk only");
+		});
+
+		it("leaves the episode note's timestamp once a change on disk is newer than Obsidian's cache, and says so", async () => {
+			const { plugin, notes, read } = await loadPlugin(playing);
+			await plugin.capture.timestamp();
+			const note = notes.get(NOTE_PATH)!;
+			await plugin.app.vault.cachedRead(note.file);
+			note.content = `External user edit\n${note.content}`;
+			const newer = note.content;
+
+			await undo();
+
+			expect(read(NOTE_PATH)).toBe(newer);
+			expect(said()).toEqual(["Created Saved Episode", REFUSED]);
+		});
+
+		it("leaves an episode note timestamp the user edited, and says so", async () => {
+			const { plugin, notes, read } = await loadPlugin(playing);
+			await plugin.capture.timestamp();
+			const note = notes.get(NOTE_PATH)!;
+			note.content = note.content.replace("00:20:34", "00:20:34 key point");
+
+			await undo();
+
+			expect(read(NOTE_PATH)).toBe("# Saved Episode\n- 00:20:34 key point\n");
+			expect(said()).toEqual(["Created Saved Episode", REFUSED]);
+		});
+
+		it("offers no Undo for a capture that ends after the plugin unloaded", async () => {
+			const { plugin, read } = await loadPlugin(playing);
+			const capturing = plugin.capture.timestamp();
+			loaded.splice(loaded.indexOf(plugin), 1);
+			plugin.onunload();
+
+			expect(await capturing).toMatchObject({ destination: "note", created: true });
+			expect(read(NOTE_PATH)).toBe("# Saved Episode\n- 00:20:34\n");
+			expect(said()).toEqual([]);
+		});
+
+		it("does nothing once the plugin unloaded", async () => {
+			const { plugin, editor } = await intoEditor("Notes");
+			loaded.splice(loaded.indexOf(plugin), 1);
+			plugin.onunload();
+
+			await undo();
+
+			expect(editor.getValue()).toBe("Notes- 00:20:34");
+			expect(said()).toEqual(["Timestamp added to Journal"]);
+		});
+	});
+
 	describe("segments and the headphones' previous-track button", () => {
 		const handlers = new Map<string, () => void>();
 		const original = Object.getOwnPropertyDescriptor(window.navigator, "mediaSession");
diff --git a/src/main.activateView.test.ts b/src/main.activateView.test.ts
index 915dd07a..1c2c050a 100644
--- a/src/main.activateView.test.ts
+++ b/src/main.activateView.test.ts
@@ -337,6 +337,7 @@ describe("PodNotes onload wiring (#55)", () => {
 				},
 				vault: {
 					on: vi.fn(() => ({ e: { offref: () => {} } })),
+					getAbstractFileByPath: () => null,
 					adapter: {
 						exists: vi.fn(async () => true),
 						read: vi.fn(async () =>
@@ -592,14 +593,19 @@ describe("PodNotes onload wiring (#55)", () => {
 
 	it("captures a timestamp into the active note and names that note", async () => {
 		const { plugin } = await loadPlugin(savedData);
+		const notice = vi.spyOn(obsidian, "Notice");
 		const editor = {
 			getCursor: () => ({ line: 0, ch: 0 }),
 			getLine: () => "",
 			lineCount: () => 1,
+			getValue: () => "",
 			replaceSelection: vi.fn(),
 		};
 		Object.assign(plugin.app.workspace, {
-			activeEditor: { editor, file: { path: "Journal/Daily note.md" } },
+			activeEditor: {
+				editor,
+				file: { path: "Journal/Daily note.md", basename: "Daily note" },
+			},
 		});
 
 		await expect(plugin.capture.timestamp()).resolves.toMatchObject({
@@ -607,6 +613,9 @@ describe("PodNotes onload wiring (#55)", () => {
 			path: "Journal/Daily note.md",
 		});
 		expect(editor.replaceSelection).toHaveBeenCalledWith(expect.stringContaining("00:20:34"));
+		expect((notice.mock.calls[0][0] as DocumentFragment).textContent).toBe(
+			"Timestamp added to Daily noteUndo",
+		);
 	});
 
 	it("says why a timestamp has nowhere to go when the episode note is not set up", async () => {
diff --git a/src/main.ts b/src/main.ts
index 6afb708b..25027d9b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -345,6 +345,7 @@ export default class PodNotes extends Plugin implements IPodNotes {
 		this.isUnloaded = true;
 		// The refusal ends with this instance; the next one reads the file itself.
 		this.refusalNotice?.hide();
+		this.capture?.dispose();
 		dismissUndoNotices();
 		// Before the store bindings are disposed, so the position it saves reaches the writer.
 		this.player?.dispose();
diff --git a/src/persistence/podNotesData.test.ts b/src/persistence/podNotesData.test.ts
index ef870281..800eb2d4 100644
--- a/src/persistence/podNotesData.test.ts
+++ b/src/persistence/podNotesData.test.ts
@@ -544,6 +544,21 @@ describe("PodNotes data schema", () => {
 		).toEqual({ ...released2211, libraryId: "" });
 	});
 
+	it.each([
+		["a 2.21.1 library's one-decimal default speed", 1.3],
+		["the rate menu's quarter speed as the default", 1.25],
+	])("loads and saves %s unchanged", (_case, rate) => {
+		const decoded = decodePodNotesData({
+			...structuredClone(released2211),
+			defaultPlaybackRate: rate,
+		});
+
+		expect(decoded.warnings).toEqual([]);
+		expect(decoded.changed).toBe(false);
+		expect(decoded.settings.defaultPlaybackRate).toBe(rate);
+		expect(encodePodNotesData(decoded.settings).defaultPlaybackRate).toBe(rate);
+	});
+
 	const storedDownload = (downloadedByPodNotes: unknown) => ({
 		...episode("Downloaded"),
 		episodeDate: episodeDate.toISOString(),
diff --git a/src/services/CaptureService.ts b/src/services/CaptureService.ts
index 296097b3..fe9277e5 100644
--- a/src/services/CaptureService.ts
+++ b/src/services/CaptureService.ts
@@ -1,6 +1,14 @@
-import { MarkdownView, Notice, type MarkdownFileInfo, type WorkspaceLeaf } from "obsidian";
+import {
+	MarkdownView,
+	Notice,
+	type Editor,
+	type MarkdownFileInfo,
+	type TFile,
+	type WorkspaceLeaf,
+} from "obsidian";
 import { TimestampTemplateEngine } from "src/TemplateEngine";
 import { createPodcastNoteFileIfNotExists } from "src/createPodcastNote";
+import { noticeWithUndo } from "src/ui/undoNotice";
 import { prepareTimestampForInsertion } from "src/utility/prepareTimestampInsertion";
 import { createRecentPodcastSegment, getSegmentCaptureTemplate } from "src/utility/podcastSegment";
 import type PodNotes from "src/main";
@@ -15,11 +23,18 @@ export interface Capture {
 	created: boolean;
 }
 
+/** A note's text as a capture found it and as it left it. */
+interface Snapshot {
+	readonly before: string;
+	readonly after: string;
+}
+
 /** Puts a capture where the user writes: the editor they used last, else the episode note. */
 export class CaptureService {
 	private activeLeaf: WorkspaceLeaf | null;
 	// Clicking in the PodNotes view leaves workspace.activeEditor null.
 	private lastEditorLeaf: WorkspaceLeaf | null = null;
+	private disposed = false;
 
 	constructor(private readonly plugin: PodNotes) {
 		const { workspace } = plugin.app;
@@ -39,6 +54,11 @@ export class CaptureService {
 		);
 	}
 
+	/** An Undo is bound to the plugin instance, so a capture that ends after unload offers none. */
+	dispose(): void {
+		this.disposed = true;
+	}
+
 	timestamp(): Promise<Capture | null> {
 		return this.capture((template) => TimestampTemplateEngine(template));
 	}
@@ -74,7 +94,7 @@ export class CaptureService {
 
 		const target = this.editorTarget();
 		if (target?.editor) {
-			const { editor } = target;
+			const { editor, file } = target;
 			// replaceSelection lets the editor place the caret, which hand-computed
 			// positions get wrong in Live Preview table cells. Inside a table the text is
 			// escaped so pipes and newlines don't break the row (#165).
@@ -83,10 +103,22 @@ export class CaptureService {
 				lineCount: editor.lineCount(),
 				cursorLine: editor.getCursor("from").line,
 			});
+			const before = editor.getValue();
 			editor.replaceSelection(inserted);
+			const snapshot = { before, after: editor.getValue() };
+			// Outside a note's own view, as in a canvas card, the editor's text need not be
+			// its file's, so only that editor can take the capture back.
+			const undo =
+				target instanceof MarkdownView && file
+					? () => this.revert(file, snapshot)
+					: () =>
+							target.editor === editor &&
+							target.file === file &&
+							revertIn(editor, snapshot);
+			this.offer(file, false, undo);
 			return {
 				destination: "editor",
-				path: target.file?.path ?? "",
+				path: file?.path ?? "",
 				text: inserted,
 				created: false,
 			};
@@ -99,11 +131,14 @@ export class CaptureService {
 		try {
 			const { file, created } = await createPodcastNoteFileIfNotExists(episode);
 			const appended = text.endsWith("\n") ? text : `${text}\n`;
-			await this.plugin.app.vault.process(file, (content) =>
-				content.length > 0 && !content.endsWith("\n")
+			let before = "";
+			const after = await this.plugin.app.vault.process(file, (content) => {
+				before = content;
+				return content.length > 0 && !content.endsWith("\n")
 					? `${content}\n${appended}`
-					: `${content}${appended}`,
-			);
+					: `${content}${appended}`;
+			});
+			this.offer(file, created, () => this.revert(file, { before, after }));
 			return { destination: "note", path: file.path, text: appended, created };
 		} catch (error) {
 			console.error("PodNotes: failed to capture timestamp into episode note", error);
@@ -112,6 +147,44 @@ export class CaptureService {
 		}
 	}
 
+	/**
+	 * Says where the capture went, with an Undo that takes it back. `undo` returns false,
+	 * leaving the note as it is, unless the note is still exactly as the capture left it.
+	 */
+	private offer(file: TFile | null, created: boolean, undo: () => boolean | Promise<boolean>) {
+		if (this.disposed) return;
+		const name = file?.basename;
+		noticeWithUndo(
+			created ? `Created ${name}` : name ? `Timestamp added to ${name}` : "Timestamp added",
+			async () => {
+				if (!(await undo())) {
+					new Notice("The note isn't as the capture left it, so the timestamp stays");
+				}
+			},
+		);
+	}
+
+	/** Puts the note back as the capture found it, while it is exactly as the capture left it. */
+	private async revert(file: TFile, snapshot: Snapshot): Promise<boolean> {
+		// An open editor's buffer is the note: a vault write behind it could lose what it
+		// has not saved yet. Obsidian saves a note as it leaves editing, so once that save
+		// lands, a closed tab or one in Reading view leaves the file as the note.
+		const editing = this.plugin.app.workspace
+			.getLeavesOfType("markdown")
+			.map((leaf) => this.editingView(leaf))
+			.find((view) => view?.file === file);
+		if (editing) return revertIn(editing.editor, snapshot);
+		try {
+			await this.plugin.app.vault.process(file, (content) => {
+				if (content !== snapshot.after) throw new Error("The note changed");
+				return snapshot.before;
+			});
+			return true;
+		} catch {
+			return false;
+		}
+	}
+
 	/** The focused editor, which covers canvas and embedded editors, else the one used last. */
 	private editorTarget(): MarkdownFileInfo | null {
 		const active = this.plugin.app.workspace.activeEditor;
@@ -128,3 +201,26 @@ export class CaptureService {
 			: null;
 	}
 }
+
+/**
+ * Puts back only the stretch the capture changed, so the caret and the editor's own
+ * undo history stay.
+ */
+function revertIn(editor: Editor, { before, after }: Snapshot): boolean {
+	if (editor.getValue() !== after) return false;
+	let from = 0;
+	while (from < before.length && before[from] === after[from]) from++;
+	let tail = 0;
+	while (
+		tail < Math.min(before.length, after.length) - from &&
+		before[before.length - 1 - tail] === after[after.length - 1 - tail]
+	) {
+		tail++;
+	}
+	editor.replaceRange(
+		before.slice(from, before.length - tail),
+		editor.offsetToPos(from),
+		editor.offsetToPos(after.length - tail),
+	);
+	return true;
+}
diff --git a/src/types/CSSObject.ts b/src/types/CSSObject.ts
deleted file mode 100644
index fb0d7b35..00000000
--- a/src/types/CSSObject.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type CSSObject = {
-	[key: string]: CSSStyleDeclaration[keyof CSSStyleDeclaration];
-};
diff --git a/src/ui/PodcastView/ChapterList.svelte b/src/ui/PodcastView/ChapterList.svelte
deleted file mode 100644
index bc5ca39f..00000000
--- a/src/ui/PodcastView/ChapterList.svelte
+++ /dev/null
@@ -1,155 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import type { Chapter } from "src/types/Chapter";
-	import { formatSeconds } from "src/utility/formatSeconds";
-	import Icon from "../obsidian/Icon.svelte";
-
-	export let chapters: Chapter[] = [];
-	export let currentTime: number = 0;
-
-	const dispatch = createEventDispatcher<{ seek: { time: number } }>();
-
-	let isExpanded = true;
-
-	// Component-unique id so aria-controls on the header points at this
-	// instance's list even if multiple ChapterLists ever render.
-	const listId = "chapter-list-" + Math.random().toString(36).slice(2);
-
-	// Take the list/time as params so Svelte's reactive statement below tracks
-	// both as dependencies and recomputes the highlight as currentTime advances
-	// or the chapters are async-replaced.
-	function getCurrentChapterIndex(list: Chapter[], time: number): number {
-		for (let i = list.length - 1; i >= 0; i--) {
-			if (time >= list[i].startTime) {
-				return i;
-			}
-		}
-		return -1;
-	}
-
-	function handleChapterClick(chapter: Chapter) {
-		dispatch("seek", { time: chapter.startTime });
-	}
-
-	$: currentChapterIndex = getCurrentChapterIndex(chapters, currentTime);
-</script>
-
-{#if chapters.length > 0}
-	<div class="chapter-list">
-		<button
-			type="button"
-			class="chapter-header"
-			on:click={() => (isExpanded = !isExpanded)}
-			aria-expanded={isExpanded}
-			aria-controls={isExpanded ? listId : undefined}
-		>
-			<Icon icon={isExpanded ? "chevron-down" : "chevron-right"} size={16} />
-			<h3>Chapters ({chapters.length})</h3>
-		</button>
-
-		{#if isExpanded}
-			<ul class="chapters" id={listId}>
-				{#each chapters as chapter, index (index)}
-					<li class:active={index === currentChapterIndex}>
-						<button
-							type="button"
-							class="chapter-item"
-							aria-label={`Jump to ${chapter.title}`}
-							on:click={() => handleChapterClick(chapter)}
-						>
-							<span class="chapter-time"
-								>{formatSeconds(chapter.startTime, "H:mm:ss")}</span
-							>
-							<span class="chapter-title">{chapter.title}</span>
-						</button>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.chapter-list {
-		margin: 1rem 0;
-	}
-
-	.chapter-header {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		background: none;
-		border: none;
-		padding: 0.25rem 0;
-		cursor: pointer;
-		width: 100%;
-		text-align: left;
-		color: var(--text-normal);
-	}
-
-	.chapter-header:hover {
-		color: var(--text-accent);
-	}
-
-	.chapter-header h3 {
-		margin: 0;
-		font-size: 0.875rem;
-		font-weight: 600;
-	}
-
-	.chapters {
-		list-style: none;
-		padding: 0;
-		margin: 0.5rem 0 0 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.125rem;
-	}
-
-	.chapters li {
-		border-radius: 0.375rem;
-	}
-
-	.chapters li.active {
-		background: var(--background-modifier-hover);
-	}
-
-	.chapter-item {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		width: 100%;
-		padding: 0.5rem 0.625rem;
-		background: none;
-		border: none;
-		cursor: pointer;
-		text-align: left;
-		color: var(--text-normal);
-		border-radius: 0.375rem;
-		transition: background 100ms ease;
-	}
-
-	.chapter-item:hover {
-		background: var(--background-modifier-hover);
-	}
-
-	.chapter-time {
-		font-size: 0.75rem;
-		font-family: var(--font-monospace);
-		color: var(--text-muted);
-		min-width: 4rem;
-	}
-
-	.chapter-title {
-		font-size: 0.875rem;
-		flex: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.chapters li.active .chapter-title {
-		font-weight: 500;
-		color: var(--text-accent);
-	}
-</style>
diff --git a/src/ui/PodcastView/ChapterList.test.ts b/src/ui/PodcastView/ChapterList.test.ts
deleted file mode 100644
index 1bb6c747..00000000
--- a/src/ui/PodcastView/ChapterList.test.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-// @vitest-environment jsdom
-import { fireEvent, render } from "@testing-library/svelte";
-import { describe, expect, test, vi } from "vitest";
-
-import type { Chapter } from "src/types/Chapter";
-import ChapterList from "./ChapterList.svelte";
-
-const chapters: Chapter[] = [
-	{ title: "Intro", startTime: 0 },
-	{ title: "Main topic", startTime: 60 },
-	{ title: "Wrap up", startTime: 120 },
-];
-
-function activeIndex(container: HTMLElement): number {
-	const items = Array.from(container.querySelectorAll(".chapters li"));
-	return items.findIndex((li) => li.classList.contains("active"));
-}
-
-describe("ChapterList", () => {
-	test("highlights the chapter containing the initial currentTime", () => {
-		const { container } = render(ChapterList, {
-			props: { chapters, currentTime: 75 },
-		});
-
-		expect(activeIndex(container)).toBe(1);
-	});
-
-	test("moves the highlight as currentTime advances (CH-05)", async () => {
-		const { container, rerender } = render(ChapterList, {
-			props: { chapters, currentTime: 10 },
-		});
-
-		expect(activeIndex(container)).toBe(0);
-
-		await rerender({ chapters, currentTime: 65 });
-		expect(activeIndex(container)).toBe(1);
-
-		await rerender({ chapters, currentTime: 130 });
-		expect(activeIndex(container)).toBe(2);
-	});
-
-	test("no chapter is active before the first chapter's startTime", () => {
-		const before: Chapter[] = [{ title: "Late start", startTime: 30 }];
-		const { container } = render(ChapterList, {
-			props: { chapters: before, currentTime: 10 },
-		});
-
-		expect(activeIndex(container)).toBe(-1);
-	});
-
-	test("clicking a chapter dispatches a seek and the highlight follows the resulting currentTime (CH-06)", async () => {
-		const seek = vi.fn();
-		const { container, rerender } = render(ChapterList, {
-			props: { chapters, currentTime: 0 },
-			events: { seek },
-		});
-
-		expect(activeIndex(container)).toBe(0);
-
-		const buttons = container.querySelectorAll(".chapter-item");
-		await fireEvent.click(buttons[2]);
-
-		expect(seek).toHaveBeenCalledTimes(1);
-		expect(seek.mock.calls[0][0].detail).toEqual({ time: 120 });
-
-		// The parent seeks; reflecting that back as currentTime must move the
-		// highlight onto the clicked chapter.
-		await rerender({ chapters, currentTime: 120 });
-		expect(activeIndex(container)).toBe(2);
-	});
-
-	test("exposes aria-controls / list id and per-chapter seek labels (CH-04)", () => {
-		const { container } = render(ChapterList, {
-			props: { chapters, currentTime: 0 },
-		});
-
-		const header = container.querySelector(".chapter-header") as HTMLButtonElement;
-		const list = container.querySelector(".chapters") as HTMLUListElement;
-
-		expect(list.id).toBeTruthy();
-		expect(header.getAttribute("aria-controls")).toBe(list.id);
-
-		const labels = Array.from(container.querySelectorAll(".chapter-item")).map((b) =>
-			b.getAttribute("aria-label"),
-		);
-		expect(labels).toEqual(["Jump to Intro", "Jump to Main topic", "Jump to Wrap up"]);
-	});
-});
diff --git a/src/ui/PodcastView/ChaptersPanel.svelte b/src/ui/PodcastView/ChaptersPanel.svelte
new file mode 100644
index 00000000..8c7859b7
--- /dev/null
+++ b/src/ui/PodcastView/ChaptersPanel.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { Chapter } from "src/types/Chapter";
+	import { formatDuration } from "src/utility/formatDuration";
+	import { chapterAt } from "./chapters";
+
+	let {
+		chapters,
+		position,
+		onseek,
+	}: {
+		chapters: readonly Chapter[];
+		position: number;
+		onseek(time: number): void;
+	} = $props();
+
+	let list: HTMLOListElement | undefined = $state();
+	const current = $derived(chapterAt(chapters, position));
+
+	// Scrolls only the panel: scrollIntoView would also scroll the view and an editor around it.
+	$effect(() => {
+		const row = list?.children[current];
+		if (!list || !row) return;
+		const top = row.getBoundingClientRect().top - list.getBoundingClientRect().top;
+		list.scrollTop += top - list.clientHeight / 3;
+	});
+</script>
+
+<div class="pn-panel">
+	<ol class="pn-panel-scroll" aria-label="Chapters" bind:this={list}>
+		{#each chapters as chapter, index (index)}
+			<li>
+				<button
+					type="button"
+					class="pn-chap"
+					class:is-now={index === current}
+					aria-current={index === current || undefined}
+					onclick={() => onseek(chapter.startTime)}
+				>
+					<span class="tm">{formatDuration(chapter.startTime)}</span>
+					<span class="nm">{chapter.title}</span>
+				</button>
+			</li>
+		{/each}
+	</ol>
+</div>
+
+<style>
+	ol {
+		margin: 0;
+		list-style: none;
+	}
+
+	.pn-panel .pn-chap {
+		display: flex;
+		align-items: baseline;
+		justify-content: flex-start;
+		gap: var(--size-4-3);
+		width: 100%;
+		height: auto;
+		padding: 6px var(--size-4-2);
+		border-radius: var(--radius-s);
+		background: none;
+		box-shadow: none;
+		color: var(--text-muted);
+		font-size: inherit;
+		line-height: 1.45;
+		text-align: left;
+		white-space: normal;
+	}
+
+	.pn-panel .pn-chap:hover {
+		background: var(--background-modifier-hover);
+		color: var(--text-normal);
+	}
+
+	.pn-panel .pn-chap.is-now {
+		background: hsla(var(--interactive-accent-hsl), 0.12);
+		color: var(--text-normal);
+	}
+
+	.tm {
+		flex: none;
+		width: 44px;
+		font-size: var(--font-ui-smaller);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.is-now .tm {
+		color: var(--text-accent);
+	}
+
+	.nm {
+		font-weight: var(--font-medium);
+	}
+
+	:global(.is-phone) .pn-panel .pn-chap {
+		min-height: 44px;
+		padding: 10px var(--size-4-2);
+	}
+</style>
diff --git a/src/ui/PodcastView/EpisodePlayer.svelte b/src/ui/PodcastView/EpisodePlayer.svelte
deleted file mode 100644
index 647e7cc3..00000000
--- a/src/ui/PodcastView/EpisodePlayer.svelte
+++ /dev/null
@@ -1,580 +0,0 @@
-<script lang="ts">
-	import { formatSeconds } from "src/utility/formatSeconds";
-	import { fetchChapters } from "src/utility/fetchChapters";
-	import { onMount } from "svelte";
-	import Icon from "../obsidian/Icon.svelte";
-	import Button from "../obsidian/Button.svelte";
-	import Slider from "../obsidian/Slider.svelte";
-	import Loading from "./Loading.svelte";
-	import ChapterList from "./ChapterList.svelte";
-	import Progressbar from "../common/Progressbar.svelte";
-	import type { Episode } from "src/types/Episode";
-	import type { Chapter } from "src/types/Chapter";
-	import Image from "../common/Image.svelte";
-	import { useServices } from "./context";
-	import EpisodeRow from "./EpisodeRow.svelte";
-	import { anchorOf, episodeMenu, openEpisode, showMenu } from "./menus";
-	import { getEpisodeKey } from "src/utility/episodeKey";
-	import { isEpisodeFinished } from "src/utility/episodeStatus";
-	import {
-		PLAYBACK_RATE_MAX,
-		PLAYBACK_RATE_MIN,
-		PLAYBACK_RATE_STEP,
-	} from "src/utility/playbackRate";
-
-	const services = useServices();
-	const { player, api, settings, library } = services;
-	const { queue, playedEpisodes, hidePlayedEpisodes } = library;
-	const playerState = player.state;
-
-	let isHoveringArtwork = $state(false);
-	let root: HTMLDivElement;
-	let inMainWindow = $state(true);
-	let videoContainer: HTMLDivElement | undefined = $state();
-	let chapters: Chapter[] = $state([]);
-	let lastChaptersUrl: string | undefined = undefined;
-
-	// Hide the player's Queue list only when queue automation is off AND the queue
-	// is empty (issue #108), otherwise show it (default-on state or a non-empty
-	// manual queue).
-	const showQueue = $derived($settings.autoQueue !== false || $queue.episodes.length > 0);
-	const queueRows = $derived(
-		$hidePlayedEpisodes
-			? $queue.episodes.filter((entry) => !isEpisodeFinished(entry, $playedEpisodes))
-			: $queue.episodes,
-	);
-
-	const episode = $derived($playerState.episode as Episode);
-	// Title length feeds the CSS length-based downscaling on .podcast-title (issue #81).
-	const titleCharCount = $derived(episode.title.length);
-	// The video plays in the main window, so a view in a popout shows the artwork.
-	const showVideo = $derived($playerState.mediaType === "video" && inMainWindow);
-	const paused = $derived($playerState.status !== "playing");
-	const isLoading = $derived($playerState.status === "loading");
-	const loadError = $derived(
-		$playerState.status === "error" ? "Could not load this episode's media." : null,
-	);
-	const remaining = $derived(Math.max(0, $playerState.duration - $playerState.currentTime));
-
-	// Clear the previous episode's chapters at once so they never flash against the
-	// next one, and drop a fetch that a newer episode superseded.
-	$effect.pre(() => loadChapters(episode.chaptersUrl));
-	function loadChapters(chaptersUrl: string | undefined) {
-		if (chaptersUrl === lastChaptersUrl) return;
-		lastChaptersUrl = chaptersUrl;
-		chapters = [];
-		if (!chaptersUrl) return;
-		void fetchChapters(chaptersUrl).then((c) => {
-			if (chaptersUrl === lastChaptersUrl) chapters = c;
-		});
-	}
-
-	onMount(() => {
-		const follow = () => (inMainWindow = root.ownerDocument === document);
-		follow();
-		return root.onWindowMigrated?.(follow);
-	});
-
-	function onClickProgressbar({
-		detail: { event, percent },
-	}: CustomEvent<{ event: MouseEvent | KeyboardEvent; percent?: number }>) {
-		if (typeof percent === "number") {
-			player.seek(percent * $playerState.duration);
-			return;
-		}
-
-		if (event instanceof MouseEvent) {
-			const progressbar = event.currentTarget as HTMLDivElement;
-			const ratio = progressbar.offsetWidth ? event.offsetX / progressbar.offsetWidth : 0;
-			player.seek(ratio * $playerState.duration);
-		}
-	}
-
-	function enterFullscreen() {
-		// Prefer fullscreening the container so the custom overlay/controls stay
-		// usable; fall back to the bare video element on iOS Safari/WKWebView,
-		// where requestFullscreen on a div is unsupported and only the media
-		// element itself can go fullscreen.
-		if (videoContainer?.requestFullscreen) {
-			void videoContainer.requestFullscreen();
-			return;
-		}
-
-		const video = videoContainer?.querySelector("video") as
-			| (HTMLVideoElement & { webkitEnterFullscreen?: () => void })
-			| null
-			| undefined;
-		if (video?.requestFullscreen) {
-			void video.requestFullscreen();
-		} else if (video?.webkitEnterFullscreen) {
-			video.webkitEnterFullscreen();
-		}
-	}
-
-	function handleContextMenuEpisodeImage(event: MouseEvent) {
-		const at = anchorOf(event);
-		showMenu(episodeMenu(episode, services, { place: "player", at }), at);
-	}
-</script>
-
-<div class="episode-player" bind:this={root}>
-	{#if showVideo}
-		<div class="episode-video-container" use:player.videoStage bind:this={videoContainer}>
-			{#if isLoading}
-				<div class="podcast-artwork-isloading-overlay">
-					<Loading />
-				</div>
-			{:else if loadError}
-				<div class="podcast-artwork-load-error" role="alert">
-					<Icon icon="alert-triangle" clickable={false} />
-					<span>{loadError}</span>
-				</div>
-			{:else}
-				<button
-					type="button"
-					class="podcast-video-overlay"
-					class:visible={paused}
-					onclick={() => player.toggle()}
-					oncontextmenu={handleContextMenuEpisodeImage}
-					aria-label="Toggle playback"
-				>
-					<Icon icon={paused ? "play" : "pause"} clickable={false} />
-				</button>
-			{/if}
-
-			<button
-				type="button"
-				class="podcast-video-fullscreen"
-				onclick={enterFullscreen}
-				aria-label="Enter fullscreen"
-			>
-				<Icon icon="maximize" clickable={false} />
-			</button>
-		</div>
-	{:else}
-		<div class="episode-image-container">
-			<button
-				type="button"
-				class="hover-container"
-				onclick={() => player.toggle()}
-				oncontextmenu={handleContextMenuEpisodeImage}
-				onmouseenter={() => (isHoveringArtwork = true)}
-				onmouseleave={() => (isHoveringArtwork = false)}
-				aria-label="Toggle playback"
-			>
-				<Image
-					class="podcast-artwork"
-					src={episode.artworkUrl ?? ""}
-					alt={episode.title}
-					opacity={isHoveringArtwork || paused ? 0.5 : 1}
-				>
-					<svelte:fragment slot="fallback">
-						<div
-							class={"podcast-artwork-placeholder" +
-								(isHoveringArtwork || paused ? " opacity-50" : "")}
-						>
-							<Icon icon="image" size={150} clickable={false} />
-						</div>
-					</svelte:fragment>
-				</Image>
-
-				{#if isLoading}
-					<div class="podcast-artwork-isloading-overlay">
-						<Loading />
-					</div>
-				{:else if loadError}
-					<div class="podcast-artwork-load-error" role="alert">
-						<Icon icon="alert-triangle" clickable={false} />
-						<span>{loadError}</span>
-					</div>
-				{:else}
-					<div
-						class="podcast-artwork-overlay"
-						class:visible={isHoveringArtwork || paused}
-					>
-						<Icon icon={paused ? "play" : "pause"} clickable={false} />
-					</div>
-				{/if}
-			</button>
-		</div>
-	{/if}
-
-	<h2 class="podcast-title" style="--title-char-count: {titleCharCount}">
-		{episode.title}
-	</h2>
-
-	<div class="status-container">
-		<span>{formatSeconds($playerState.currentTime, "HH:mm:ss")}</span>
-		<Progressbar
-			on:click={onClickProgressbar}
-			value={$playerState.currentTime}
-			max={$playerState.duration}
-			ariaLabel="Seek within episode"
-			valueText={`${formatSeconds($playerState.currentTime, "HH:mm:ss")} of ${formatSeconds($playerState.duration, "HH:mm:ss")}`}
-		/>
-		<span>{formatSeconds(remaining, "HH:mm:ss")}</span>
-	</div>
-
-	<div class="controls-container">
-		<Button
-			icon="skip-back"
-			tooltip="Skip backward"
-			on:click={() => api.skipBackward()}
-			class="player-control-button"
-		/>
-		<Button
-			icon="skip-forward"
-			tooltip="Skip forward"
-			on:click={() => api.skipForward()}
-			class="player-control-button"
-		/>
-	</div>
-
-	<div class="slider-stack">
-		<div class="volume-container">
-			<span>Volume: {Math.round($playerState.volume * 100)}%</span>
-			<Slider
-				on:change={(event) => player.setVolume(event.detail.value)}
-				value={$playerState.volume}
-				limits={[0, 1, 0.05]}
-			/>
-		</div>
-
-		<div class="playbackrate-container">
-			<span>{$playerState.playbackRate}x</span>
-			<Slider
-				on:change={(event) => player.setPlaybackRate(event.detail.value)}
-				value={$playerState.playbackRate}
-				limits={[PLAYBACK_RATE_MIN, PLAYBACK_RATE_MAX, PLAYBACK_RATE_STEP]}
-			/>
-		</div>
-	</div>
-
-	<div class="lists-container">
-		<ChapterList
-			{chapters}
-			currentTime={$playerState.currentTime}
-			on:seek={(event) => player.seek(event.detail.time)}
-		/>
-
-		{#if showQueue}
-			<h3>Queue</h3>
-			<div class="pn-list" role="list">
-				{#each queueRows as queued (getEpisodeKey(queued))}
-					<EpisodeRow
-						episode={queued}
-						cover
-						onplay={() => openEpisode(services, queued)}
-						onmenu={(at) =>
-							showMenu(episodeMenu(queued, services, { place: "list", at }), at)}
-					/>
-				{/each}
-			</div>
-		{/if}
-	</div>
-</div>
-
-<style>
-	.episode-player {
-		display: flex;
-		flex-direction: column;
-		flex: 1 1 auto;
-		min-height: 0;
-		padding: 0 1rem;
-		padding-bottom: var(--pn-status-bar);
-		overflow-y: auto;
-		gap: 0.35rem;
-	}
-
-	.episode-image-container {
-		width: 100%;
-		max-width: 20rem;
-		margin: 0 auto 0.5rem;
-		padding: 1rem 0 0.5rem;
-	}
-
-	.episode-video-container {
-		width: 100%;
-		max-width: 32rem;
-		aspect-ratio: 16 / 9;
-		position: relative;
-		margin: 0 auto 0.5rem;
-		background: #000;
-		border-radius: 0.75rem;
-		overflow: hidden;
-		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-	}
-
-	.episode-video-container :global(video) {
-		width: 100%;
-		height: 100%;
-		display: block;
-		object-fit: contain;
-		background: #000;
-	}
-
-	/* Square by aspect-ratio: Obsidian's mobile buttons override padding. */
-	.hover-container {
-		box-sizing: border-box;
-		width: 100%;
-		height: auto;
-		aspect-ratio: 1;
-		display: block;
-		position: relative;
-		border: none;
-		background: transparent;
-		cursor: pointer;
-		border-radius: 0.75rem;
-		overflow: hidden;
-		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-		transition:
-			box-shadow 200ms ease,
-			transform 200ms ease;
-	}
-
-	.hover-container:hover {
-		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
-	}
-
-	.hover-container:active {
-		transform: scale(0.98);
-	}
-
-	.hover-container :global(.pn_image_container) {
-		position: absolute;
-		inset: 0;
-	}
-
-	:global(.podcast-artwork) {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		transition: opacity 200ms ease;
-	}
-
-	:global(.podcast-artwork-placeholder) {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: var(--background-secondary);
-		transition: opacity 200ms ease;
-	}
-
-	.podcast-artwork-overlay {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		opacity: 0;
-		background: rgba(0, 0, 0, 0.1);
-		transition: opacity 200ms ease;
-	}
-
-	.podcast-video-overlay {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		opacity: 0;
-		border: none;
-		background: rgba(0, 0, 0, 0.1);
-		color: var(--text-on-accent);
-		cursor: pointer;
-		transition: opacity 200ms ease;
-	}
-
-	.episode-video-container:hover .podcast-video-overlay,
-	.podcast-video-overlay:focus-visible,
-	.podcast-artwork-overlay.visible,
-	.podcast-video-overlay.visible {
-		opacity: 1;
-	}
-
-	.podcast-video-overlay:focus-visible {
-		outline: 2px solid var(--background-modifier-border-focus);
-		outline-offset: -4px;
-	}
-
-	.podcast-video-fullscreen {
-		position: absolute;
-		right: 0.5rem;
-		bottom: 0.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0.35rem;
-		border: none;
-		border-radius: 0.375rem;
-		background: rgba(0, 0, 0, 0.45);
-		color: var(--text-on-accent);
-		cursor: pointer;
-		opacity: 0;
-		transition:
-			opacity 200ms ease,
-			background-color 120ms ease;
-	}
-
-	.episode-video-container:hover .podcast-video-fullscreen,
-	.podcast-video-fullscreen:focus-visible {
-		opacity: 1;
-	}
-
-	.podcast-video-fullscreen:hover {
-		background: rgba(0, 0, 0, 0.65);
-	}
-
-	.podcast-video-fullscreen:focus-visible {
-		outline: 2px solid var(--background-modifier-border-focus);
-		outline-offset: 2px;
-	}
-
-	.podcast-artwork-load-error {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: 0.5rem;
-		text-align: center;
-		padding: 0.5rem;
-		background-color: rgba(0, 0, 0, 0.6);
-		color: var(--text-error);
-		font-size: 0.85rem;
-	}
-
-	.podcast-artwork-isloading-overlay {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: rgba(0, 0, 0, 0.3);
-	}
-
-	:global(.opacity-50) {
-		opacity: 0.5;
-	}
-
-	.podcast-title {
-		/*
-		 * Scale the title down as it gets longer (issue #81) so a long episode
-		 * title no longer renders at one large fixed size. Titles up to ~40
-		 * characters render at the 1rem base; beyond that the size eases down
-		 * (0.0025rem per extra character) toward a readable 0.875rem floor,
-		 * reached around ~90 characters. --title-char-count is an approximate
-		 * length signal (UTF-16 code units, set from the title in the markup), so
-		 * it only loosely tracks rendered width for non-Latin scripts;
-		 * word-break: break-word below is what actually keeps any title contained.
-		 */
-		font-size: clamp(
-			0.875rem,
-			calc(1rem - (var(--title-char-count, 0) - 40) * 0.0025rem),
-			1rem
-		);
-		font-weight: 600;
-		line-height: 1.4;
-		margin: 0 0 0.75rem;
-		text-align: center;
-		color: var(--text-normal);
-		white-space: normal;
-		word-break: break-word;
-	}
-
-	.status-container {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 0 0.25rem;
-	}
-
-	.status-container span {
-		font-size: 0.8rem;
-		font-variant-numeric: tabular-nums;
-		color: var(--text-muted);
-		min-width: 4rem;
-		text-align: center;
-	}
-
-	.status-container span:first-child {
-		text-align: right;
-	}
-
-	.status-container span:last-child {
-		text-align: left;
-	}
-
-	:global(.episode-player .status-container .progress) {
-		height: var(--episode-player-progress-height, 0.5rem);
-		flex: 1 1 auto;
-	}
-
-	.controls-container {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 2rem;
-		margin: 1.25rem 0;
-	}
-
-	:global(.player-control-button) {
-		margin: 0;
-		cursor: pointer;
-		padding: 0.5rem;
-		border-radius: 50%;
-		transition: background-color 120ms ease;
-	}
-
-	:global(.player-control-button:hover) {
-		background-color: var(--background-modifier-hover);
-	}
-
-	.slider-stack {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		padding: 1rem 0 0.75rem;
-		border-top: 1px solid var(--background-modifier-border);
-	}
-
-	.playbackrate-container,
-	.volume-container {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-		padding: 0 0.5rem;
-	}
-
-	.playbackrate-container span,
-	.volume-container span {
-		font-size: 0.8rem;
-		color: var(--text-muted);
-		min-width: 5rem;
-	}
-
-	:global(.episode-player h3) {
-		font-size: 0.875rem;
-		font-weight: 600;
-		color: var(--text-muted);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		margin: 1rem 0 0.5rem;
-		padding: 0 0.5rem;
-	}
-
-	.lists-container {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		padding-bottom: 0.5rem;
-	}
-</style>
diff --git a/src/ui/PodcastView/EpisodePlayer.test.ts b/src/ui/PodcastView/EpisodePlayer.test.ts
deleted file mode 100644
index 1804a10b..00000000
--- a/src/ui/PodcastView/EpisodePlayer.test.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-// @vitest-environment jsdom
-import { fireEvent, render, screen } from "@testing-library/svelte";
-import { tick } from "svelte";
-import { derived, get, readable, writable } from "svelte/store";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-
-import { DEFAULT_SETTINGS } from "src/constants";
-import type { PlayerState } from "src/player/PlayerController";
-import { hidePlayedEpisodes, playedEpisodes, plugin, queue } from "src/store";
-import type { Episode } from "src/types/Episode";
-import { pluginLibrary } from "../../../tests/mocks/services";
-import WithServices from "../../../tests/mocks/WithServices.svelte";
-import EpisodePlayer from "./EpisodePlayer.svelte";
-import { Navigation } from "./Navigation";
-
-const episode: Episode = {
-	title: "Current Episode",
-	streamUrl: "https://pod.example.com/audio.mp3",
-	url: "https://pod.example.com/episode",
-	description: "",
-	content: "",
-	podcastName: "Test Podcast",
-};
-
-/** The view over a player whose state the test sets, recording the intents it receives. */
-function renderPlayer(patch: Partial<PlayerState> = {}, target = document.body) {
-	const state = writable<PlayerState>({
-		status: "playing",
-		episode,
-		mediaType: "audio",
-		currentTime: 0,
-		duration: 3600,
-		playbackRate: 1,
-		volume: 1,
-		...patch,
-	});
-	const player = {
-		state,
-		play: vi.fn(),
-		seek: vi.fn(),
-		toggle: vi.fn(),
-		setVolume: vi.fn(),
-		setPlaybackRate: vi.fn(),
-		videoStage: vi.fn(() => ({ destroy: vi.fn() })),
-	};
-	const services = {
-		settings: derived(plugin, ($plugin) => $plugin.settings),
-		api: { skipBackward: vi.fn(), skipForward: vi.fn() },
-		player,
-		navigation: new Navigation(),
-		// A queued episode's menu reads the plugin's queue, so the player shows that one.
-		library: pluginLibrary,
-		hasNote: () => false,
-		rowHasNote: readable(() => false),
-		online: readable(true),
-	} as never;
-	return {
-		...render(WithServices, { target, props: { services, component: EpisodePlayer } }),
-		state,
-		player,
-	};
-}
-
-const labels = (container: HTMLElement) =>
-	Array.from(container.querySelectorAll(".status-container span")).map((s) => s.textContent);
-const barWidth = (container: HTMLElement) =>
-	(container.querySelector(".progress__bar") as HTMLElement).style.width;
-
-afterEach(() => {
-	vi.restoreAllMocks();
-});
-
-beforeEach(() => {
-	queue.set({ ...structuredClone(DEFAULT_SETTINGS.queue), episodes: [] });
-	playedEpisodes.set({});
-	hidePlayedEpisodes.set(false);
-	plugin.set({ settings: structuredClone(DEFAULT_SETTINGS) } as never);
-});
-
-describe("EpisodePlayer", () => {
-	test("holds no media element: playback outlives the view", () => {
-		const { container } = renderPlayer();
-
-		expect(container.querySelector("audio, video")).toBeNull();
-	});
-
-	test("shows a spinner while loading, then an error instead when the media fails", async () => {
-		const { container, state } = renderPlayer({ status: "loading" });
-		expect(container.querySelector(".podcast-artwork-isloading-overlay")).not.toBeNull();
-
-		state.update((s) => ({ ...s, status: "error" }));
-		await Promise.resolve();
-
-		expect(container.querySelector(".podcast-artwork-isloading-overlay")).toBeNull();
-		expect(container.querySelector(".podcast-artwork-load-error")?.textContent).toContain(
-			"Could not load this episode's media.",
-		);
-	});
-
-	test("shows a restored episode paused at its saved position", () => {
-		const { container } = renderPlayer({
-			status: "restored",
-			currentTime: 1800,
-			duration: 3600,
-		});
-
-		expect(labels(container)).toEqual(["00:30:00", "00:30:00"]);
-		expect(barWidth(container)).toBe("50%");
-		expect(container.querySelector(".podcast-artwork-overlay.visible")).not.toBeNull();
-		expect(container.querySelector(".podcast-artwork-isloading-overlay")).toBeNull();
-	});
-
-	test("clicking the artwork toggles playback", async () => {
-		const { container, player } = renderPlayer();
-
-		await fireEvent.click(container.querySelector(".hover-container") as HTMLElement);
-
-		expect(player.toggle).toHaveBeenCalledTimes(1);
-	});
-
-	test("the End key on the progress bar seeks to the end", async () => {
-		const { container, player } = renderPlayer({ currentTime: 100, duration: 3600 });
-
-		await fireEvent.keyDown(container.querySelector(".progress") as HTMLElement, {
-			key: "End",
-		});
-
-		expect(player.seek).toHaveBeenCalledWith(3600);
-	});
-
-	test("the rate label shows the rate, and its slider sets it", async () => {
-		const { container, player } = renderPlayer({ playbackRate: 1.7 });
-
-		expect(container.querySelector(".playbackrate-container span")?.textContent).toBe("1.7x");
-		const slider = container.querySelector(".playbackrate-container input") as HTMLInputElement;
-		await fireEvent.input(slider, { target: { value: "2.2" } });
-
-		expect(player.setPlaybackRate).toHaveBeenCalledWith(2.2);
-	});
-
-	test("the volume label shows the volume, and its slider sets it", async () => {
-		const { container, player } = renderPlayer({ volume: 0.4 });
-
-		expect(container.querySelector(".volume-container span")?.textContent).toBe("Volume: 40%");
-		const slider = container.querySelector(".volume-container input") as HTMLInputElement;
-		await fireEvent.input(slider, { target: { value: "0.65" } });
-
-		expect(player.setVolume).toHaveBeenCalledWith(0.65);
-	});
-
-	test("clicking a queued episode plays it", async () => {
-		const queued = { ...episode, title: "Queued Episode" };
-		queue.set({ ...get(queue), episodes: [queued] });
-		const { player } = renderPlayer();
-
-		await fireEvent.click(screen.getByText("Queued Episode"));
-
-		expect(player.play).toHaveBeenCalledWith(queued);
-	});
-
-	test("leaves played episodes out of the queue while hide played is pressed", async () => {
-		const played = { ...episode, title: "Played Queued" };
-		const fresh = { ...episode, title: "New Queued" };
-		queue.set({ ...get(queue), episodes: [played, fresh] });
-		playedEpisodes.markAsPlayed(played);
-		renderPlayer();
-		expect(screen.getByText("Played Queued")).toBeInTheDocument();
-
-		hidePlayedEpisodes.set(true);
-		await tick();
-
-		expect(screen.queryByText("Played Queued")).toBeNull();
-		expect(screen.getByText("New Queued")).toBeInTheDocument();
-	});
-
-	test("an empty Queue follows queue automation as settings change or are imported (#108)", async () => {
-		const host = get(plugin);
-		renderPlayer();
-		expect(screen.getByRole("heading", { name: "Queue" })).toBeInTheDocument();
-
-		host.settings.autoQueue = false;
-		plugin.set(host);
-		await tick();
-		expect(screen.queryByRole("heading", { name: "Queue" })).toBeNull();
-
-		host.settings = { ...structuredClone(DEFAULT_SETTINGS), autoQueue: true };
-		plugin.set(host);
-		await tick();
-		expect(screen.getByRole("heading", { name: "Queue" })).toBeInTheDocument();
-	});
-
-	test("a video episode in a popout shows its artwork, since the video plays in the main window", async () => {
-		const popout = document.body.appendChild(document.createElement("iframe"));
-		const { container, player } = renderPlayer(
-			{ mediaType: "video", status: "paused" },
-			popout.contentDocument?.body,
-		);
-		await Promise.resolve();
-
-		expect(container.querySelector(".episode-video-container")).toBeNull();
-		expect(container.querySelector(".podcast-video-fullscreen")).toBeNull();
-		await fireEvent.click(container.querySelector(".hover-container") as HTMLElement);
-		expect(player.toggle).toHaveBeenCalledTimes(1);
-		popout.remove();
-	});
-
-	test("a video episode gives the player a stage for its video", async () => {
-		const { container, player } = renderPlayer({ mediaType: "video", status: "paused" });
-		const stage = container.querySelector(".episode-video-container");
-
-		expect(player.videoStage).toHaveBeenCalledWith(stage);
-		await fireEvent.click(container.querySelector(".podcast-video-overlay") as HTMLElement);
-		expect(player.toggle).toHaveBeenCalledTimes(1);
-	});
-});
diff --git a/src/ui/PodcastView/LibraryPage.test.ts b/src/ui/PodcastView/LibraryPage.test.ts
index 8a0eeb0e..75ddd445 100644
--- a/src/ui/PodcastView/LibraryPage.test.ts
+++ b/src/ui/PodcastView/LibraryPage.test.ts
@@ -178,7 +178,10 @@ describe("the Library's podcast grid", () => {
 			"Copy feed URL",
 			"Remove podcast",
 		]);
-		expect(shown).toHaveBeenCalledWith({ x: 40, y: 50, doc: document }, document);
+		expect(shown).toHaveBeenCalledWith(
+			{ x: 40, y: 50, doc: document, el: card("Art Show") },
+			document,
+		);
 	});
 
 	test("a compact Library lists its lists above the grid", () => {
diff --git a/src/ui/PodcastView/ListPage.test.ts b/src/ui/PodcastView/ListPage.test.ts
index 5d9e54b9..3cdffca8 100644
--- a/src/ui/PodcastView/ListPage.test.ts
+++ b/src/ui/PodcastView/ListPage.test.ts
@@ -179,7 +179,7 @@ describe("an episode list", () => {
 
 		expect(more.closest(".pn-ep-main")).toBeNull();
 		expect(more.previousElementSibling).toHaveClass("pn-ep-main");
-		expect(shown).toHaveBeenCalledWith({ x: 280, y: 90, doc: document }, document);
+		expect(shown).toHaveBeenCalledWith({ x: 280, y: 90, doc: document, el: more }, document);
 		expect(titles.mock.calls[0]).toEqual(["Play"]);
 	});
 
@@ -187,9 +187,13 @@ describe("an episode list", () => {
 		renderPlaylist([episode("First")]);
 		const shown = vi.spyOn(obsidian.Menu.prototype, "showAtPosition");
 
-		await fireEvent.contextMenu(await screen.findByText("First"), { clientX: 12, clientY: 34 });
+		const title = await screen.findByText("First");
+		await fireEvent.contextMenu(title, { clientX: 12, clientY: 34 });
 
-		expect(shown).toHaveBeenCalledWith({ x: 12, y: 34, doc: document }, document);
+		expect(shown).toHaveBeenCalledWith(
+			{ x: 12, y: 34, doc: document, el: title.closest(".pn-ep-main") },
+			document,
+		);
 	});
 
 	test("lists every episode, also two that share a podcast and a title", async () => {
diff --git a/src/ui/PodcastView/Loading.svelte b/src/ui/PodcastView/Loading.svelte
deleted file mode 100644
index f9283ca4..00000000
--- a/src/ui/PodcastView/Loading.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-</script>
-
-<div class="la-line-scale">
-	<div></div>
-	<div></div>
-	<div></div>
-	<div></div>
-	<div></div>
-</div>
-
-<style>
-	/*!
- * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
- * Copyright 2015 Daniel Cardoso <@DanielCardoso>
- * Licensed under MIT
- */
-	.la-line-scale,
-	.la-line-scale > div {
-		position: relative;
-		box-sizing: border-box;
-	}
-	.la-line-scale {
-		display: block;
-		font-size: 0;
-		color: #fff;
-	}
-	.la-line-scale > div {
-		display: inline-block;
-		float: none;
-		background-color: currentColor;
-		border: 0 solid currentColor;
-	}
-	.la-line-scale {
-		width: 40px;
-		height: 32px;
-	}
-	.la-line-scale > div {
-		width: 4px;
-		height: 32px;
-		margin: 2px;
-		margin-top: 0;
-		margin-bottom: 0;
-		border-radius: 0;
-		animation: line-scale 1.2s infinite ease;
-	}
-	.la-line-scale > div:nth-child(1) {
-		animation-delay: -1.2s;
-	}
-	.la-line-scale > div:nth-child(2) {
-		animation-delay: -1.1s;
-	}
-	.la-line-scale > div:nth-child(3) {
-		animation-delay: -1s;
-	}
-	.la-line-scale > div:nth-child(4) {
-		animation-delay: -0.9s;
-	}
-	.la-line-scale > div:nth-child(5) {
-		animation-delay: -0.8s;
-	}
-	@keyframes line-scale {
-		0%,
-		40%,
-		100% {
-			transform: scaleY(0.4);
-		}
-		20% {
-			transform: scaleY(1);
-		}
-	}
-</style>
diff --git a/src/ui/PodcastView/MiniPlayer.svelte b/src/ui/PodcastView/MiniPlayer.svelte
index e6fe6ba4..27872e0f 100644
--- a/src/ui/PodcastView/MiniPlayer.svelte
+++ b/src/ui/PodcastView/MiniPlayer.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { Notice } from "obsidian";
 	import { formatDuration } from "src/utility/formatDuration";
 	import { icon } from "../obsidian/icon";
 	import { useServices } from "./context";
-	import { formatMinutes } from "./episodeRow";
+	import { formatMinutes, sourceOf } from "./episodeRow";
 	import type { Layout } from "./layout";
 
 	let { layout }: { layout: Layout } = $props();
@@ -22,10 +21,7 @@
 	let failedArtworkUrl = $state("");
 	const id = $props.id();
 
-	async function capture() {
-		const note = (await captureTimestamp())?.path.split("/").pop()?.replace(/\.md$/, "");
-		if (note) new Notice(`Timestamp added to ${note}`);
-	}
+	const capture = () => void captureTimestamp();
 </script>
 
 {#snippet progress(kind: "pn-mini-prog" | "pn-mini-track")}
@@ -71,7 +67,7 @@
 			<span class="pn-mini-txt">
 				<span class="pn-mini-t">{episode.title}</span>
 				<span class="pn-mini-s">
-					{episode.podcastName}{left}
+					{sourceOf(episode)}{left}
 				</span>
 			</span>
 		</button>
@@ -188,14 +184,6 @@
 		height: 44px;
 	}
 
-	.pn-filetile {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: var(--background-modifier-hover);
-		color: var(--text-muted);
-	}
-
 	.pn-mini-txt {
 		flex: 1;
 		min-width: 0;
diff --git a/src/ui/PodcastView/Player.svelte b/src/ui/PodcastView/Player.svelte
new file mode 100644
index 00000000..536db736
--- /dev/null
+++ b/src/ui/PodcastView/Player.svelte
@@ -0,0 +1,947 @@
+<script lang="ts">
+	import { Scope } from "obsidian";
+	import { tick } from "svelte";
+	import type { Chapter } from "src/types/Chapter";
+	import type { Episode } from "src/types/Episode";
+	import { formatDuration } from "src/utility/formatDuration";
+	import { isLocalFile } from "src/utility/isLocalFile";
+	import { ownRecord } from "src/utility/ownRecord";
+	import { normalizeSkipLength } from "src/utility/skipLength";
+	import { icon } from "../obsidian/icon";
+	import { cachedChapters, chapterAt, loadChapters } from "./chapters";
+	import ChaptersPanel from "./ChaptersPanel.svelte";
+	import { useServices } from "./context";
+	import { sourceOf } from "./episodeRow";
+	import type { Layout } from "./layout";
+	import { anchorOf, episodeMenu, noteEntry, rateMenu, showMenu } from "./menus";
+	import type { Page } from "./pages";
+	import Scrubber from "./Scrubber.svelte";
+	import UpNextPanel from "./UpNextPanel.svelte";
+
+	type Panel = "chapters" | "queue";
+
+	let { viewRoot, layout }: { viewRoot: HTMLElement; layout: Layout } = $props();
+	const services = useServices();
+	const { app, api, player, navigation, settings, library, rowHasNote, captureTimestamp } =
+		services;
+	const playerState = player.state;
+	const { savedFeeds } = library;
+	const id = $props.id();
+
+	let section: HTMLElement | undefined = $state();
+	let volumeButton: HTMLButtonElement | undefined = $state();
+	let videoFrame: HTMLElement | undefined = $state();
+	let inMainWindow = $state(true);
+	let chapters: readonly Chapter[] = $state([]);
+	/** The panel the user chose. None shows the artwork at compact widths. */
+	let panel = $state<Panel>();
+	let volumeOpen = $state(false);
+	let failedArtworkUrl = $state("");
+	let added = $state(false);
+	let addedTimer: number | undefined;
+
+	const episode = $derived($playerState.episode as Episode);
+	const wide = $derived(layout === "wide");
+	const playing = $derived(
+		$playerState.status === "playing" || $playerState.status === "loading",
+	);
+	const failed = $derived($playerState.status === "error");
+	const video = $derived($playerState.mediaType === "video");
+	const duration = $derived($playerState.duration);
+	const elapsed = $derived(Math.min($playerState.currentTime, duration));
+	const panels = $derived<Panel[]>(chapters.length > 0 ? ["chapters", "queue"] : ["queue"]);
+	const shown = $derived.by(() => {
+		// At compact widths a media error takes the stage, so no panel shows meanwhile.
+		if (failed && !wide) return undefined;
+		if (panel && panels.includes(panel)) return panel;
+		return wide ? panels[0] : undefined;
+	});
+	const current = $derived(chapterAt(chapters, elapsed));
+	const back = $derived(normalizeSkipLength($settings.skipBackwardLength));
+	const forward = $derived(normalizeSkipLength($settings.skipForwardLength));
+	const source = $derived(sourceOf(episode));
+	const sourcePage = $derived<Page | undefined>(
+		isLocalFile(episode)
+			? { kind: "local" }
+			: ownRecord($savedFeeds)[episode.podcastName]
+				? { kind: "feed", key: episode.podcastName }
+				: undefined,
+	);
+	const note = $derived.by(() => {
+		// A note made or removed since, also by a capture, changes the store.
+		void $rowHasNote;
+		return noteEntry(episode, services);
+	});
+	const chaptersUrl = $derived(episode.chaptersUrl);
+
+	$effect.pre(() => {
+		const url = chaptersUrl;
+		// A choice of Chapters belongs to the episode it was made on.
+		panel = undefined;
+		const cached = url && cachedChapters(url);
+		chapters = cached || [];
+		if (!url || cached) return;
+		let latest = true;
+		void loadChapters(url).then((loaded) => latest && (chapters = loaded));
+		return () => (latest = false);
+	});
+
+	$effect(() => {
+		if (failed) volumeOpen = false;
+	});
+
+	// Obsidian's keymap gives a key to the newest scope, so a menu or modal opened
+	// over the player takes Escape first. It keeps one stack per window and pushes
+	// onto the active window's, so the scope goes onto the stack of the view's
+	// window once that window is active, and moves when the view moves to another
+	// window. It is pushed once: pushing it again on a later focus would lift it over
+	// a modal opened since. Keys typed elsewhere, as in an editor, stay there.
+	$effect(() => {
+		const scope = new Scope(app.scope);
+		const ours = (evt: KeyboardEvent) => {
+			const target = evt.target as Element | null;
+			return target === viewRoot.ownerDocument.body || viewRoot.contains(target);
+		};
+		scope.register(null, "Escape", (evt) => {
+			if (!ours(evt)) return true;
+			if (volumeOpen) {
+				volumeOpen = false;
+				volumeButton?.focus();
+			} else void collapse();
+			return false;
+		});
+		scope.register(null, " ", (evt) => {
+			const target = evt.target as Element | null;
+			const control = "input, textarea, select, button, a, [contenteditable], [role=slider]";
+			if (!ours(evt) || target?.closest?.(control)) return true;
+			player.toggle();
+			return false;
+		});
+		let win = viewRoot.win;
+		let pushed = false;
+		// Obsidian's own focus listener runs first and makes the window active.
+		const push = () => {
+			if (pushed || activeWindow !== win) return;
+			app.keymap.pushScope(scope);
+			pushed = true;
+		};
+		const pop = () => {
+			app.keymap.popScope(scope);
+			pushed = false;
+		};
+		const follow = (next: Window) => {
+			win = next;
+			// The video plays in the main window, so a popout shows the artwork.
+			inMainWindow = next === window;
+			win.addEventListener("focus", push);
+			push();
+		};
+		follow(win);
+		const stopFollowing = viewRoot.onWindowMigrated((next) => {
+			win.removeEventListener("focus", push);
+			pop();
+			follow(next);
+		});
+		return () => {
+			stopFollowing();
+			win.removeEventListener("focus", push);
+			pop();
+		};
+	});
+
+	/** A keyboard user who collapses the player lands on the mini player that opens it again. */
+	async function collapse() {
+		const hadFocus = !!section?.contains(viewRoot.ownerDocument.activeElement);
+		navigation.collapse();
+		if (!hadFocus) return;
+		await tick();
+		viewRoot.querySelector<HTMLElement>(".pn-mini-open")?.focus();
+	}
+
+	/** Takes focus unless the player opened while the user works elsewhere, as when a link plays. */
+	function focusFromView(button: HTMLButtonElement) {
+		const active = button.ownerDocument.activeElement;
+		if (!active || active === button.ownerDocument.body || viewRoot.contains(active)) {
+			button.focus();
+		}
+	}
+
+	function closeOutside(popover: HTMLElement) {
+		const close = (event: PointerEvent) => {
+			const target = event.target as Node;
+			if (!popover.contains(target) && !volumeButton?.contains(target)) volumeOpen = false;
+		};
+		popover.doc.addEventListener("pointerdown", close, true);
+		return () => popover.doc.removeEventListener("pointerdown", close, true);
+	}
+
+	async function capture() {
+		if (!(await captureTimestamp())) return;
+		added = true;
+		window.clearTimeout(addedTimer);
+		addedTimer = window.setTimeout(() => (added = false), 1200);
+	}
+
+	function fullscreen() {
+		// iOS fullscreens only the media element itself.
+		const video = videoFrame?.querySelector("video") as
+			| (HTMLVideoElement & { webkitEnterFullscreen?: () => void })
+			| null;
+		if (videoFrame?.requestFullscreen) void videoFrame.requestFullscreen();
+		else video?.webkitEnterFullscreen?.();
+	}
+</script>
+
+{#snippet panelView(kind: Panel)}
+	{#if kind === "chapters"}
+		<ChaptersPanel
+			{chapters}
+			position={elapsed}
+			onseek={(time) => {
+				player.seek(time);
+				player.resume();
+			}}
+		/>
+	{:else}
+		<UpNextPanel />
+	{/if}
+{/snippet}
+
+{#snippet choices(tabs: boolean)}
+	{#each panels as kind (kind)}
+		<button
+			type="button"
+			id={tabs ? `${id}-${kind}` : undefined}
+			class={tabs ? "pn-tab" : "pn-sw"}
+			role={tabs ? "tab" : undefined}
+			aria-selected={tabs ? shown === kind : undefined}
+			aria-controls={tabs ? `${id}-panel` : undefined}
+			aria-pressed={tabs ? undefined : shown === kind}
+			disabled={!tabs && failed}
+			onclick={() => (panel = !tabs && shown === kind ? undefined : kind)}
+			>{kind === "chapters" ? "Chapters" : "Up next"}</button
+		>
+	{/each}
+{/snippet}
+
+<section class="pn-player" class:is-wide={wide} aria-labelledby="{id}-name" bind:this={section}>
+	<span id="{id}-name" hidden>Player</span>
+	<header class="pn-np-head">
+		<button
+			type="button"
+			class="pn-iconbtn"
+			aria-label="Collapse player"
+			title="Collapse player"
+			onclick={collapse}
+			{@attach icon("chevron-down")}
+			{@attach focusFromView}
+		></button>
+		<span class="pn-spacer"></span>
+		<button
+			type="button"
+			class="pn-iconbtn"
+			aria-label="Episode options"
+			title="Episode options"
+			aria-haspopup="menu"
+			onclick={(event) => {
+				const at = anchorOf(event);
+				showMenu(episodeMenu(episode, services, { place: "player", at }), at);
+			}}
+			{@attach icon("more-horizontal")}
+		></button>
+	</header>
+	<div class="pn-np-body">
+		<div class="pn-np-left">
+			<div class="pn-stage">
+				{#if failed}
+					<div class="pn-np-err" role="alert">
+						<span class="pn-np-err-icon" {@attach icon("alert-triangle")}></span>
+						<span>Could not load this episode's media.</span>
+						<button type="button" class="pn-btn" onclick={() => player.resume()}
+							>Retry</button
+						>
+					</div>
+				{:else if !wide && shown}
+					{@render panelView(shown)}
+				{:else if video && inMainWindow}
+					<div class="pn-video" use:player.videoStage bind:this={videoFrame}>
+						<button
+							type="button"
+							class="pn-vplay"
+							class:is-paused={!playing}
+							aria-label={playing ? "Pause" : "Play"}
+							onclick={() => player.toggle()}
+							><span {@attach icon(playing ? "pause" : "play")}></span></button
+						>
+						<button
+							type="button"
+							class="pn-fs"
+							aria-label="Fullscreen"
+							title="Fullscreen"
+							onclick={fullscreen}
+							{@attach icon("maximize")}
+						></button>
+					</div>
+				{:else if episode.artworkUrl && episode.artworkUrl !== failedArtworkUrl}
+					<img
+						class="pn-np-art"
+						src={episode.artworkUrl}
+						alt=""
+						onerror={() => (failedArtworkUrl = episode.artworkUrl ?? "")}
+					/>
+				{:else}
+					<span class="pn-np-art pn-filetile" {@attach icon(video ? "video" : "music")}
+					></span>
+				{/if}
+			</div>
+			<div class="pn-deck">
+				<div class="pn-tb">
+					<h2 class="pn-np-title" title={episode.title}>{episode.title}</h2>
+					{#if sourcePage}
+						{@const page = sourcePage}
+						<button type="button" class="pn-np-pod" onclick={() => navigation.go(page)}
+							>{source}</button
+						>
+					{:else}
+						<span class="pn-np-pod">{source}</span>
+					{/if}
+				</div>
+				<div class="pn-scrubwrap">
+					<Scrubber
+						position={elapsed}
+						{duration}
+						{chapters}
+						disabled={failed}
+						onseek={(time) => player.seek(time)}
+					/>
+					<div class="pn-times">
+						<span>{formatDuration(elapsed)}</span>
+						{#if current >= 0}
+							<button
+								type="button"
+								class="pn-chapnow"
+								title="Chapters"
+								disabled={failed && !wide}
+								onclick={() => (panel = "chapters")}
+								>{chapters[current].title}</button
+							>
+						{:else}
+							<span></span>
+						{/if}
+						<span class="r">-{formatDuration(Math.max(0, duration - elapsed))}</span>
+					</div>
+				</div>
+				<div class="pn-transport">
+					<button
+						type="button"
+						class="pn-rate"
+						aria-label="Playback speed {$playerState.playbackRate}x"
+						aria-haspopup="menu"
+						disabled={failed}
+						onclick={(event) => showMenu(rateMenu(services), anchorOf(event))}
+						><span>{$playerState.playbackRate}×</span></button
+					>
+					<div class="mid">
+						<button
+							type="button"
+							class="pn-skip"
+							aria-label="Back {back} seconds"
+							title="Back {back} seconds"
+							disabled={failed}
+							onclick={() => api.skipBackward()}
+						>
+							<span {@attach icon("rotate-ccw")}></span><b>{back}</b>
+						</button>
+						<button
+							type="button"
+							class="pn-play"
+							aria-label={playing ? "Pause" : "Play"}
+							title={playing ? "Pause" : "Play"}
+							disabled={failed}
+							onclick={() => player.toggle()}
+							{@attach icon(playing ? "pause" : "play")}
+						></button>
+						<button
+							type="button"
+							class="pn-skip"
+							aria-label="Forward {forward} seconds"
+							title="Forward {forward} seconds"
+							disabled={failed}
+							onclick={() => api.skipForward()}
+						>
+							<span {@attach icon("rotate-cw")}></span><b>{forward}</b>
+						</button>
+					</div>
+					<button
+						type="button"
+						class="pn-vol"
+						aria-label="Volume {Math.round($playerState.volume * 100)}%"
+						title="Volume"
+						aria-expanded={volumeOpen}
+						disabled={failed}
+						bind:this={volumeButton}
+						onclick={() => (volumeOpen = !volumeOpen)}
+						{@attach icon($playerState.volume > 0 ? "volume-2" : "volume-x")}
+					></button>
+					{#if volumeOpen}
+						<div class="pn-pop" {@attach closeOutside}>
+							<input
+								type="range"
+								min="0"
+								max="1"
+								step="0.05"
+								value={$playerState.volume}
+								aria-label="Volume"
+								oninput={(event) =>
+									player.setVolume(Number(event.currentTarget.value))}
+							/>
+							<span>{Math.round($playerState.volume * 100)}%</span>
+						</div>
+					{/if}
+				</div>
+				<div class="pn-capture">
+					<button
+						type="button"
+						class="pn-btn mod-cta pn-cap"
+						class:is-done={added}
+						onclick={capture}
+					>
+						<span {@attach icon(added ? "check" : "clock-plus")}></span><span
+							>{added ? "Added" : "Timestamp"}</span
+						>
+					</button>
+					<button type="button" class="pn-btn pn-cap" onclick={() => note.onClick()}>
+						<span {@attach icon(note.icon)}></span><span>{note.title}</span>
+					</button>
+				</div>
+				{#if !wide}
+					<div class="pn-switch" role="group" aria-label="Player panels">
+						{@render choices(false)}
+					</div>
+				{/if}
+			</div>
+		</div>
+		{#if wide && shown}
+			<div class="pn-np-right">
+				<div class="pn-tabs" role="tablist" aria-label="Player panels">
+					{@render choices(true)}
+				</div>
+				<div
+					class="pn-panelwrap"
+					id="{id}-panel"
+					role="tabpanel"
+					aria-labelledby="{id}-{shown}"
+				>
+					{@render panelView(shown)}
+				</div>
+			</div>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.pn-player {
+		position: absolute;
+		inset: 0;
+		z-index: 10;
+		display: flex;
+		flex-direction: column;
+		background: var(--pn-bg);
+	}
+
+	.pn-np-head {
+		flex: none;
+		display: flex;
+		align-items: center;
+		height: var(--pn-head);
+		padding: 0 var(--size-4-2);
+	}
+
+	.pn-np-body {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		padding-bottom: var(--pn-status-bar);
+	}
+
+	/* A short view scrolls the player, so neither the artwork nor a video shrinks to nothing. */
+	.pn-np-left {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+	}
+
+	.pn-stage {
+		flex: 1 0 auto;
+		min-height: 160px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 var(--pn-pad);
+		container-type: size;
+	}
+
+	.pn-np-art {
+		flex: none;
+		width: min(100cqw, 100cqh - 8px, 300px);
+		aspect-ratio: 1;
+		border-radius: 12px;
+		box-shadow: var(--shadow-s);
+		object-fit: cover;
+	}
+
+	:global(.is-phone) .pn-np-art {
+		width: min(100cqw, 100cqh - 8px, 358px);
+	}
+
+	.pn-stage .pn-np-art.pn-filetile {
+		color: var(--text-faint);
+		container-type: inline-size;
+		--icon-size: 25cqw;
+		--icon-stroke: 1.25px;
+	}
+
+	.pn-np-err {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--size-4-3);
+		color: var(--text-muted);
+		text-align: center;
+	}
+
+	.pn-np-err-icon {
+		display: flex;
+		color: var(--text-error);
+		--icon-size: 28px;
+	}
+
+	.pn-video {
+		position: relative;
+		width: 100cqw;
+		max-height: 100cqh;
+		aspect-ratio: 16 / 9;
+		border-radius: var(--radius-m);
+		overflow: hidden;
+	}
+
+	.pn-video :global(video) {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+
+	/* Fullscreen shows this frame alone, so it carries its own play and pause. */
+	.pn-player .pn-vplay {
+		position: absolute;
+		inset: 0;
+		width: auto;
+		height: auto;
+		padding: 0;
+		border-radius: 0;
+		background: none;
+		box-shadow: none;
+		opacity: 0;
+	}
+
+	.pn-player .pn-vplay:focus-visible {
+		outline-offset: -2px;
+	}
+
+	.pn-vplay.is-paused,
+	.pn-video:hover .pn-vplay,
+	.pn-vplay:focus-visible {
+		opacity: 1;
+	}
+
+	.pn-vplay span {
+		display: flex;
+		padding: var(--size-4-3);
+		border-radius: 50%;
+		background: var(--background-primary);
+		box-shadow: var(--shadow-s);
+		color: var(--text-normal);
+		--icon-size: 24px;
+	}
+
+	.pn-player .pn-fs {
+		position: absolute;
+		right: 8px;
+		bottom: 8px;
+		z-index: 1;
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		background: var(--background-primary);
+		box-shadow: var(--shadow-s);
+		--icon-size: 16px;
+	}
+
+	.pn-deck {
+		flex: none;
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-4-3);
+		padding: var(--size-4-3) var(--pn-pad);
+	}
+
+	.pn-tb {
+		min-width: 0;
+		text-align: center;
+	}
+
+	.pn-np-title {
+		margin: 0;
+		font-size: var(--font-ui-medium);
+		font-weight: var(--font-semibold);
+		line-height: 1.3;
+		letter-spacing: -0.005em;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		overflow-wrap: anywhere;
+	}
+
+	.pn-player .pn-np-pod,
+	.pn-player .pn-chapnow {
+		display: inline-block;
+		min-width: 0;
+		max-width: 100%;
+		height: auto;
+		padding: 1px var(--size-2-3);
+		border-radius: var(--radius-s);
+		background: none;
+		box-shadow: none;
+		color: var(--text-muted);
+		font-size: inherit;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.pn-np-pod {
+		margin-top: var(--size-2-2);
+		vertical-align: top;
+	}
+
+	.pn-player button.pn-np-pod:hover,
+	.pn-player .pn-chapnow:hover {
+		background: var(--background-modifier-hover);
+		color: var(--text-normal);
+	}
+
+	.pn-scrubwrap {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-2-2);
+	}
+
+	.pn-times {
+		display: grid;
+		grid-template-columns: 1fr minmax(0, auto) 1fr;
+		align-items: center;
+		gap: var(--size-4-2);
+		color: var(--text-muted);
+		font-size: var(--font-ui-smaller);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.r {
+		text-align: right;
+	}
+
+	.pn-transport {
+		position: relative;
+		display: grid;
+		grid-template-columns: 1fr auto 1fr;
+		align-items: center;
+	}
+
+	.mid {
+		display: flex;
+		align-items: center;
+		gap: var(--size-4-3);
+	}
+
+	.pn-player :is(.pn-rate, .pn-skip, .pn-vol, .pn-play) {
+		padding: 0;
+		background: none;
+		box-shadow: none;
+	}
+
+	.pn-player .pn-rate {
+		justify-self: start;
+		min-width: 44px;
+		height: var(--pn-skip);
+	}
+
+	.pn-rate span {
+		display: inline-flex;
+		align-items: center;
+		height: 24px;
+		padding: 0 var(--size-4-2);
+		border: 1px solid var(--background-modifier-border-hover);
+		border-radius: 12px;
+		color: var(--text-muted);
+		font-size: var(--font-ui-smaller);
+		font-weight: var(--font-semibold);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.pn-rate:hover:not(:disabled) span {
+		border-color: var(--background-modifier-border-focus);
+		color: var(--text-normal);
+	}
+
+	:global(.is-phone) .pn-rate span {
+		height: 30px;
+		padding: 0 var(--size-4-3);
+		border-radius: 15px;
+	}
+
+	.pn-player :is(.pn-skip, .pn-vol) {
+		position: relative;
+		width: var(--pn-skip);
+		height: var(--pn-skip);
+		border-radius: 50%;
+	}
+
+	.pn-player :is(.pn-skip, .pn-vol):hover {
+		background: var(--background-modifier-hover);
+	}
+
+	.pn-skip {
+		--icon-size: 26px;
+		--icon-stroke: 1.6px;
+	}
+
+	.pn-skip span {
+		display: flex;
+	}
+
+	.pn-skip b {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 50%;
+		transform: translateY(-38%);
+		font-size: 8.5px;
+		letter-spacing: -0.02em;
+	}
+
+	:global(.is-phone) .pn-skip {
+		--icon-size: 30px;
+	}
+
+	:global(.is-phone) .pn-skip b {
+		font-size: 10px;
+	}
+
+	.pn-player .pn-play {
+		width: var(--pn-play);
+		height: var(--pn-play);
+		border-radius: 50%;
+		background: var(--text-normal);
+		color: var(--pn-bg);
+		transition: transform 120ms ease;
+		--icon-size: calc(var(--pn-play) * 0.4);
+	}
+
+	.pn-play :global(svg) {
+		fill: currentColor;
+	}
+
+	.pn-play :global(.lucide-play) {
+		margin-left: 6%;
+	}
+
+	.pn-play:active {
+		transform: scale(0.95);
+	}
+
+	.pn-player .pn-vol {
+		justify-self: end;
+		color: var(--text-muted);
+		--icon-size: 20px;
+	}
+
+	.pn-player :is(.pn-rate, .pn-skip, .pn-vol, .pn-play, .pn-sw):disabled {
+		opacity: 0.35;
+	}
+
+	.pn-pop {
+		position: absolute;
+		right: 0;
+		bottom: calc(100% + 6px);
+		z-index: 5;
+		display: flex;
+		align-items: center;
+		gap: var(--size-4-2);
+		padding: var(--size-4-2) var(--size-4-3);
+		border: 1px solid var(--background-modifier-border-hover);
+		border-radius: var(--radius-m);
+		background: var(--background-primary);
+		box-shadow: var(--shadow-s);
+		color: var(--text-muted);
+		font-size: var(--font-ui-smaller);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.pn-pop input {
+		width: 120px;
+	}
+
+	.pn-pop span {
+		min-width: 4ch;
+		text-align: right;
+	}
+
+	.pn-capture {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: var(--size-4-2);
+	}
+
+	.pn-player .pn-cap {
+		min-width: 0;
+		height: var(--pn-cap-h);
+		font-weight: var(--font-medium);
+		--icon-size: 17px;
+	}
+
+	.pn-player .pn-cap.is-done {
+		background: var(--background-modifier-success);
+	}
+
+	.pn-cap span {
+		display: flex;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	:global(.is-phone) .pn-cap {
+		--icon-size: 20px;
+	}
+
+	.pn-switch {
+		display: flex;
+		justify-content: center;
+		gap: var(--size-2-2);
+	}
+
+	.pn-player :is(.pn-sw, .pn-tab) {
+		padding: 0 var(--size-4-3);
+		background: none;
+		box-shadow: none;
+		color: var(--text-muted);
+		font-weight: var(--font-medium);
+	}
+
+	.pn-player .pn-sw {
+		height: 28px;
+		border-radius: 14px;
+		font-size: var(--font-ui-smaller);
+	}
+
+	.pn-player .pn-sw:hover:not(:disabled) {
+		background: var(--background-modifier-hover);
+		color: var(--text-normal);
+	}
+
+	.pn-player .pn-sw[aria-pressed="true"] {
+		background: var(--background-modifier-border);
+		color: var(--text-normal);
+	}
+
+	:global(.is-phone) .pn-player .pn-sw {
+		height: 44px;
+		border-radius: 22px;
+		padding: 0 var(--size-4-4);
+	}
+
+	:global(.is-phone) .pn-deck {
+		gap: var(--size-4-4);
+		padding-bottom: var(--size-4-2);
+	}
+
+	.is-wide .pn-np-head {
+		padding: 0 var(--size-4-3);
+	}
+
+	.is-wide .pn-np-body {
+		display: grid;
+		grid-template-columns: 360px minmax(0, 1fr);
+	}
+
+	.is-wide .pn-np-left {
+		padding-bottom: var(--size-4-4);
+	}
+
+	.is-wide .pn-stage {
+		padding: var(--size-4-1) var(--size-4-6) 0;
+	}
+
+	.is-wide .pn-deck {
+		gap: var(--size-4-4);
+		padding: var(--size-4-4) var(--size-4-6) 0;
+	}
+
+	.is-wide .pn-np-title {
+		font-size: var(--font-ui-large);
+		line-height: 1.25;
+		letter-spacing: -0.01em;
+		-webkit-line-clamp: 3;
+		line-clamp: 3;
+	}
+
+	.pn-np-right {
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		border-left: 1px solid var(--background-modifier-border);
+	}
+
+	.pn-tabs {
+		flex: none;
+		display: flex;
+		gap: var(--size-4-5);
+		padding: 0 var(--size-4-6);
+		border-bottom: 1px solid var(--background-modifier-border);
+	}
+
+	.pn-player .pn-tab {
+		position: relative;
+		height: 40px;
+		padding: 0;
+		border-radius: 0;
+	}
+
+	.pn-player .pn-tab:hover,
+	.pn-player .pn-tab[aria-selected="true"] {
+		background: none;
+		color: var(--text-normal);
+	}
+
+	.pn-tab[aria-selected="true"]::after {
+		content: "";
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: -1px;
+		height: 2px;
+		border-radius: 1px;
+		background: var(--interactive-accent);
+	}
+
+	.pn-panelwrap {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+</style>
diff --git a/src/ui/PodcastView/Player.test.ts b/src/ui/PodcastView/Player.test.ts
new file mode 100644
index 00000000..3a6c9092
--- /dev/null
+++ b/src/ui/PodcastView/Player.test.ts
@@ -0,0 +1,576 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen, within } from "@testing-library/svelte";
+import * as obsidian from "obsidian";
+import { flushSync, tick } from "svelte";
+import { get } from "svelte/store";
+import { afterEach, beforeEach, describe, expect, onTestFinished, test, vi } from "vitest";
+import { DEFAULT_SETTINGS } from "src/constants";
+import { plugin, queue } from "src/store";
+import type { Episode } from "src/types/Episode";
+import { isLocalFile } from "src/utility/isLocalFile";
+import type { FakeDocument } from "../../../tests/mocks/fakeMedia";
+import type { Keymap as FakeKeymap, Menu as FakeMenu } from "../../../tests/mocks/obsidian";
+import { openPopout } from "../../../tests/mocks/popout";
+import {
+	installResizeObserver,
+	type FakeResizeObservers,
+} from "../../../tests/mocks/resizeObserver";
+import {
+	createTestServices,
+	pluginLibrary,
+	type TestServices,
+} from "../../../tests/mocks/services";
+import PodcastView from "./PodcastView.svelte";
+
+vi.mock("src/utility/fetchChapters", () => ({
+	fetchChapters: async () =>
+		["Intro", "Memory palaces", "Questions"].map((title, index) => ({
+			title,
+			startTime: index * 600,
+		})),
+}));
+
+const episode: Episode = {
+	title: "How to remember everything",
+	streamUrl: "https://pod.test/remember.mp3",
+	url: "https://pod.test/remember",
+	description: "",
+	content: "",
+	podcastName: "Field Notes",
+	artworkUrl: "https://pod.test/art.jpg",
+	duration: 1800,
+};
+const withChapters = { ...episode, chaptersUrl: "https://pod.test/chapters.json" };
+const queued = (title: string): Episode => ({
+	...episode,
+	title,
+	streamUrl: `https://pod.test/${title}.mp3`,
+	duration: 1200,
+});
+
+let services: TestServices;
+let doc: FakeDocument;
+let dispose: () => void;
+let widths: FakeResizeObservers;
+
+beforeEach(() => {
+	({ services, doc, dispose } = createTestServices({ library: pluginLibrary }));
+	widths = installResizeObserver();
+});
+
+afterEach(() => {
+	widths.uninstall();
+	dispose();
+	queue.set(structuredClone(DEFAULT_SETTINGS.queue));
+	vi.restoreAllMocks();
+});
+
+/** The full player over `played`, playing at 10:00 of 30:00, in a view `width` wide. */
+async function openPlayer(played: Episode = episode, width = 320) {
+	const result = render(PodcastView, { props: { services } });
+	widths.resize(result.container.querySelector(".podcast-view")!, width);
+	if (isLocalFile(played)) {
+		services.player.restore(played);
+	} else {
+		services.player.play(played);
+		doc.media.duration = 1800;
+		doc.media.emit("loadedmetadata");
+		doc.media.currentTime = 600;
+		doc.media.emit("timeupdate");
+	}
+	services.navigation.expand();
+	await tick();
+	await tick();
+	return { ...result, player: screen.getByRole("region", { name: "Player" }) };
+}
+
+const button = (name: string | RegExp) => screen.getByRole("button", { name });
+const keymap = () => services.app.keymap as unknown as FakeKeymap;
+const press = (key: string, target: Element = document.activeElement ?? document.body) => {
+	const event = new KeyboardEvent("keydown", { key, bubbles: true });
+	Object.defineProperty(event, "target", { value: target });
+	keymap().dispatch(event);
+};
+const shownMenu = () => (obsidian.Menu as unknown as typeof FakeMenu).shown!;
+
+describe("the full player", () => {
+	test("shows the artwork, and a file tile for a local file or artwork that fails to load (#394)", async () => {
+		const { player } = await openPlayer();
+		const art = player.querySelector("img.pn-np-art")!;
+		expect(art).toHaveAttribute("src", episode.artworkUrl);
+
+		await fireEvent.error(art);
+
+		expect(player.querySelector("img")).toBeNull();
+		expect(player.querySelector(".pn-np-art.pn-filetile")).toHaveAttribute(
+			"data-icon",
+			"music",
+		);
+	});
+
+	test("a local file shows a file tile, and its folder links to Local files", async () => {
+		const local: Episode = {
+			...episode,
+			podcastName: "local file",
+			artworkUrl: undefined,
+			filePath: "Lectures/Week 7.mp3",
+		} as Episode;
+		const { player } = await openPlayer(local);
+
+		expect(player.querySelector("img")).toBeNull();
+		expect(player.querySelector(".pn-np-art.pn-filetile")).toHaveAttribute(
+			"data-icon",
+			"music",
+		);
+		await fireEvent.click(within(player).getByRole("button", { name: "Lectures" }));
+		expect(services.navigation.current.page).toEqual({ kind: "local" });
+	});
+
+	test("a saved podcast's name opens its page; another's is plain text", async () => {
+		services.library.savedFeeds.set({
+			"Field Notes": {
+				title: "Field Notes",
+				url: "https://pod.test/feed.xml",
+				artworkUrl: "",
+			},
+		});
+		const { player } = await openPlayer();
+
+		await fireEvent.click(within(player).getByRole("button", { name: "Field Notes" }));
+
+		expect(services.navigation.current).toMatchObject({
+			page: { kind: "feed", key: "Field Notes" },
+			expanded: false,
+		});
+		services.library.savedFeeds.set({});
+		services.navigation.expand();
+		await tick();
+		expect(screen.queryByRole("button", { name: "Field Notes" })).toBeNull();
+		expect(screen.getByText("Field Notes")).toBeInTheDocument();
+	});
+
+	test("the rate pill shows the live rate once, and its menu sets another", async () => {
+		const { player } = await openPlayer();
+		services.player.setPlaybackRate(1.25);
+		await tick();
+		const pill = button("Playback speed 1.25x");
+		expect(within(player).getAllByText("1.25×")).toEqual([pill.firstElementChild]);
+
+		await fireEvent.click(pill);
+		shownMenu().pick("1.75×");
+		await tick();
+
+		expect(get(services.player.state).playbackRate).toBe(1.75);
+		expect(button("Playback speed 1.75x")).toHaveTextContent("1.75×");
+		expect(button("Playback speed 1.75x")).toHaveFocus();
+	});
+
+	test("the volume button opens a slider that sets the volume, shown once as a percent", async () => {
+		const { player } = await openPlayer();
+		services.player.setVolume(0.4);
+		await tick();
+
+		await fireEvent.click(button("Volume 40%"));
+		expect(button("Volume 40%")).toHaveAttribute("aria-expanded", "true");
+		await fireEvent.input(screen.getByRole("slider", { name: "Volume" }), {
+			target: { value: "0.65" },
+		});
+
+		expect(get(services.player.state).volume).toBe(0.65);
+		expect(within(player).getAllByText("65%")).toHaveLength(1);
+		expect(button("Volume 65%")).toBeInTheDocument();
+	});
+
+	test("Escape closes the volume slider first, then collapses the player", async () => {
+		await openPlayer();
+		await fireEvent.click(button("Volume 100%"));
+
+		press("Escape", screen.getByRole("slider", { name: "Volume" }));
+		await tick();
+		expect(screen.queryByRole("slider", { name: "Volume" })).toBeNull();
+		expect(button("Volume 100%")).toHaveFocus();
+		expect(services.navigation.current.expanded).toBe(true);
+
+		press("Escape");
+		await tick();
+		expect(services.navigation.current.expanded).toBe(false);
+	});
+
+	test("a press outside the volume slider closes it", async () => {
+		await openPlayer();
+		await fireEvent.click(button("Volume 100%"));
+
+		await fireEvent.pointerDown(button("Pause"));
+
+		expect(screen.queryByRole("slider", { name: "Volume" })).toBeNull();
+	});
+
+	test("Space plays and pauses, except on a control", async () => {
+		const { player } = await openPlayer();
+
+		press(" ", player);
+		expect(get(services.player.state).status).toBe("paused");
+		press(" ", button("Volume 100%"));
+		expect(get(services.player.state).status).toBe("paused");
+		press(" ", document.body);
+
+		expect(get(services.player.state).status).toBe("playing");
+	});
+
+	test("the skip buttons name and skip the configured lengths", async () => {
+		get(plugin).settings.skipBackwardLength = 10;
+		get(plugin).settings.skipForwardLength = 45;
+		plugin.update((host) => host);
+		await openPlayer();
+
+		await fireEvent.click(button("Back 10 seconds"));
+		await fireEvent.click(button("Forward 45 seconds"));
+
+		expect(button("Back 10 seconds")).toHaveTextContent("10");
+		expect(services.api.skipBackward).toHaveBeenCalledTimes(1);
+		expect(services.api.skipForward).toHaveBeenCalledTimes(1);
+		Object.assign(get(plugin).settings, { skipBackwardLength: 15, skipForwardLength: 15 });
+	});
+
+	test("when the media fails, the stage says so and Retry loads it again; the transport waits", async () => {
+		const { player } = await openPlayer();
+
+		doc.media.emit("error");
+		await tick();
+
+		const alert = within(player).getByRole("alert");
+		expect(alert).toHaveTextContent("Could not load this episode's media.");
+		for (const name of ["Play", "Back 15 seconds", "Forward 15 seconds", /^Playback speed/]) {
+			expect(button(name)).toBeDisabled();
+		}
+		expect(button(/^Volume/)).toBeDisabled();
+		expect(screen.getByRole("slider", { name: "Seek" })).toHaveAttribute(
+			"aria-disabled",
+			"true",
+		);
+		expect(button("Timestamp")).toBeEnabled();
+		expect(button("Episode options")).toBeEnabled();
+
+		await fireEvent.click(within(alert).getByRole("button", { name: "Retry" }));
+		await tick();
+
+		expect(get(services.player.state).status).toBe("loading");
+		expect(within(player).queryByRole("alert")).toBeNull();
+		expect(button("Pause")).toBeEnabled();
+	});
+
+	test("a media error shows over an open panel, with Retry", async () => {
+		const { player } = await openPlayer();
+		await fireEvent.click(button("Up next"));
+		expect(within(player).getByText("Queue is empty")).toBeInTheDocument();
+
+		doc.media.emit("error");
+		await tick();
+
+		expect(within(player).getByRole("alert")).toHaveTextContent(
+			"Could not load this episode's media.",
+		);
+		expect(button("Retry")).toBeEnabled();
+		expect(button("Up next")).toHaveAttribute("aria-pressed", "false");
+		expect(button("Up next")).toBeDisabled();
+
+		await fireEvent.click(button("Retry"));
+		await tick();
+
+		expect(within(player).queryByRole("alert")).toBeNull();
+		expect(button("Up next")).toBeEnabled();
+		expect(button("Up next")).toHaveAttribute("aria-pressed", "true");
+		expect(within(player).getByText("Queue is empty")).toBeInTheDocument();
+	});
+
+	test("Create note while the episode has none, Open note once it has one", async () => {
+		await openPlayer();
+		expect(button("Create note")).toBeInTheDocument();
+
+		services.hasNote.mockReturnValue(true);
+		services.rowHasNote.set(() => true);
+		await tick();
+
+		expect(button("Open note")).toBeInTheDocument();
+	});
+
+	test("Timestamp reads Added for 1.2 s after a capture, and not when nothing was captured", async () => {
+		await openPlayer();
+		const timestamp = button("Timestamp");
+		const reads = () => [
+			timestamp.textContent,
+			timestamp.querySelector("[data-icon]")?.getAttribute("data-icon"),
+		];
+		vi.useFakeTimers();
+		onTestFinished(() => void vi.useRealTimers());
+
+		await fireEvent.click(timestamp);
+		await tick();
+		expect(reads()).toEqual(["Timestamp", "clock-plus"]);
+
+		services.captureTimestamp.mockResolvedValueOnce({
+			destination: "note",
+			path: "PodNotes/Field Notes/How to remember everything.md",
+			text: "- 00:10:00\n",
+			created: false,
+		});
+		await fireEvent.click(timestamp);
+		await tick();
+		expect(reads()).toEqual(["Added", "check"]);
+		expect(button("Added")).toBe(timestamp);
+
+		vi.advanceTimersByTime(1199);
+		await tick();
+		expect(reads()).toEqual(["Added", "check"]);
+		vi.advanceTimersByTime(1);
+		await tick();
+		expect(reads()).toEqual(["Timestamp", "clock-plus"]);
+	});
+
+	test("a video plays on the stage, which offers fullscreen", async () => {
+		const stage = vi.spyOn(services.player, "videoStage");
+		const { player } = await openPlayer({ ...episode, mediaType: "video" });
+
+		const frame = player.querySelector(".pn-video");
+		expect(stage).toHaveBeenCalledWith(frame);
+		expect(
+			within(frame as HTMLElement).getByRole("button", { name: "Fullscreen" }),
+		).toBeInTheDocument();
+	});
+
+	test("the video frame plays and pauses on its own, as it does in fullscreen", async () => {
+		const { player } = await openPlayer({ ...episode, mediaType: "video" });
+		const frame = within(player.querySelector<HTMLElement>(".pn-video")!);
+
+		await fireEvent.click(frame.getByRole("button", { name: "Pause" }));
+		expect(get(services.player.state).status).toBe("paused");
+		expect(
+			frame.getByRole("button", { name: "Play" }).querySelector("[data-icon]"),
+		).toHaveAttribute("data-icon", "play");
+
+		await fireEvent.click(frame.getByRole("button", { name: "Play" }));
+		expect(get(services.player.state).status).toBe("playing");
+	});
+
+	test("a video in a popout shows its artwork, since the video plays in the main window", async () => {
+		const popout = openPopout();
+		const { container, player } = await openPlayer({ ...episode, mediaType: "video" });
+
+		popout.moveIn(container);
+		await tick();
+
+		expect(player.querySelector(".pn-video")).toBeNull();
+		expect(player.querySelector("img.pn-np-art")).not.toBeNull();
+	});
+});
+
+describe("the player's panels", () => {
+	const switchButton = (name: string) =>
+		within(screen.getByRole("group", { name: "Player panels" })).getByRole("button", { name });
+
+	test("at compact width, a panel replaces the artwork until it is chosen again", async () => {
+		const { player } = await openPlayer(withChapters);
+		await vi.waitFor(() => expect(switchButton("Chapters")).toBeInTheDocument());
+		expect(player.querySelector(".pn-np-art")).not.toBeNull();
+
+		await fireEvent.click(switchButton("Up next"));
+		expect(switchButton("Up next")).toHaveAttribute("aria-pressed", "true");
+		expect(player.querySelector(".pn-np-art")).toBeNull();
+		expect(within(player).getByText("Queue is empty")).toBeInTheDocument();
+
+		await fireEvent.click(switchButton("Up next"));
+		expect(player.querySelector(".pn-np-art")).not.toBeNull();
+	});
+
+	test("an episode without chapters offers no Chapters", async () => {
+		await openPlayer();
+
+		expect(
+			within(screen.getByRole("group", { name: "Player panels" })).getAllByRole("button"),
+		).toEqual([switchButton("Up next")]);
+	});
+
+	test("at wide width, the right column shows Chapters, or Up next without chapters", async () => {
+		await openPlayer(withChapters, 820);
+		await vi.waitFor(() =>
+			expect(screen.getByRole("tab", { name: "Chapters" })).toHaveAttribute(
+				"aria-selected",
+				"true",
+			),
+		);
+		expect(
+			within(screen.getByRole("tabpanel", { name: "Chapters" })).getByRole("list", {
+				name: "Chapters",
+			}),
+		).toBeInTheDocument();
+		expect(screen.getByRole("tabpanel").id).toBe(
+			screen.getByRole("tab", { name: "Chapters" }).getAttribute("aria-controls"),
+		);
+
+		services.player.play(queued("Without chapters"));
+		await tick();
+		await tick();
+
+		expect(screen.getAllByRole("tab").map((tab) => tab.textContent)).toEqual(["Up next"]);
+		expect(screen.getByRole("tab", { name: "Up next" })).toHaveAttribute(
+			"aria-selected",
+			"true",
+		);
+		expect(screen.getByRole("tabpanel", { name: "Up next" })).toBeInTheDocument();
+	});
+
+	test("a reopened player shows the chapters it loaded on its first frame", async () => {
+		await openPlayer({ ...episode, chaptersUrl: "https://pod.test/reopened.json" }, 820);
+		await vi.waitFor(() => expect(screen.getByRole("tab", { name: "Chapters" })).toBeVisible());
+		await fireEvent.click(button("Collapse player"));
+
+		flushSync(() => services.navigation.expand());
+
+		expect(screen.getByRole("tab", { name: "Chapters" })).toHaveAttribute(
+			"aria-selected",
+			"true",
+		);
+	});
+
+	test("a choice of Chapters stays with its episode", async () => {
+		const { player } = await openPlayer(withChapters);
+		await vi.waitFor(() => expect(switchButton("Chapters")).toBeInTheDocument());
+		await fireEvent.click(switchButton("Chapters"));
+		services.player.play(queued("Without chapters"));
+		await tick();
+
+		services.player.play({
+			...queued("Also with chapters"),
+			chaptersUrl: "https://pod.test/also.json",
+		});
+		await vi.waitFor(() => expect(switchButton("Chapters")).toBeInTheDocument());
+
+		expect(switchButton("Chapters")).toHaveAttribute("aria-pressed", "false");
+		expect(player.querySelector(".pn-np-art")).not.toBeNull();
+	});
+
+	test("the current chapter is named under the scrubber, opens Chapters, and is marked there", async () => {
+		await openPlayer(withChapters);
+		await vi.waitFor(() => expect(button("Memory palaces")).toBeInTheDocument());
+
+		await fireEvent.click(button("Memory palaces"));
+		const chapters = screen.getByRole("list", { name: "Chapters" });
+		const current = within(chapters).getByRole("button", { name: /Memory palaces/ });
+		expect(current).toHaveAttribute("aria-current", "true");
+
+		doc.media.currentTime = 1250;
+		doc.media.emit("timeupdate");
+		await tick();
+		expect(within(chapters).getByRole("button", { name: /Questions/ })).toHaveAttribute(
+			"aria-current",
+			"true",
+		);
+		expect(current).not.toHaveAttribute("aria-current");
+	});
+
+	test("a chapter plays from its start", async () => {
+		await openPlayer(withChapters);
+		await vi.waitFor(() => expect(switchButton("Chapters")).toBeInTheDocument());
+		services.player.pause();
+		await fireEvent.click(switchButton("Chapters"));
+
+		await fireEvent.click(screen.getByRole("button", { name: /^0:00 Intro/ }));
+
+		expect(get(services.player.state)).toMatchObject({ currentTime: 0, status: "playing" });
+	});
+
+	describe("Up next", () => {
+		const [one, two, three] = ["One", "Two", "Three"].map(queued);
+
+		async function openUpNext() {
+			queue.set({ ...structuredClone(DEFAULT_SETTINGS.queue), episodes: [one, two, three] });
+			const result = await openPlayer();
+			await fireEvent.click(switchButton("Up next"));
+			return result;
+		}
+
+		const listed = () =>
+			within(screen.getByRole("list", { name: "Queue" }))
+				.getAllByRole("listitem")
+				.map((row) => row.querySelector(".pn-ep-title")?.textContent);
+
+		test("lists the queue with its count and time left, and Edit opens the Queue page", async () => {
+			const { player } = await openUpNext();
+
+			expect(within(player).getByText("3 episodes · 1 h 0 min")).toBeInTheDocument();
+			expect(listed()).toEqual(["One", "Two", "Three"]);
+			await fireEvent.click(within(player).getByRole("button", { name: "Edit" }));
+
+			expect(services.navigation.current).toMatchObject({
+				page: { kind: "queue" },
+				expanded: false,
+			});
+		});
+
+		test("reorders in place, writing the queue once per move", async () => {
+			await openUpNext();
+			let writes = 0;
+			onTestFinished(queue.subscribe(() => writes++));
+			writes = 0;
+
+			await fireEvent.keyDown(button(/^Reorder One,/), { key: "ArrowDown" });
+			await fireEvent.keyDown(button(/^Reorder One,/), { key: "ArrowDown" });
+
+			expect(listed()).toEqual(["Two", "Three", "One"]);
+			expect(get(queue).episodes.map(({ title }) => title)).toEqual(["Two", "Three", "One"]);
+			expect(writes).toBe(2);
+		});
+
+		/** Lays the panel's rows out 40 px apart, as the browser would, for a pointer to cross. */
+		function layOutRows() {
+			const rows = [
+				...screen
+					.getByRole("list", { name: "Queue" })
+					.querySelectorAll<HTMLElement>(".pn-ep"),
+			];
+			for (const [index, row] of rows.entries()) {
+				row.getBoundingClientRect = () =>
+					({ top: index * 40, bottom: index * 40 + 40, left: 0, right: 300 }) as DOMRect;
+			}
+			document.elementFromPoint = (_x, y) =>
+				rows[Math.floor(y / 40)]?.querySelector(".pn-ep-title") ?? document.body;
+			onTestFinished(() => {
+				Reflect.deleteProperty(document, "elementFromPoint");
+			});
+		}
+
+		test("a drag across two rows writes the queue once, on release", async () => {
+			await openUpNext();
+			let writes = 0;
+			onTestFinished(queue.subscribe(() => writes++));
+			writes = 0;
+			const at = (clientY: number) => ({ pointerId: 1, buttons: 1, clientX: 150, clientY });
+
+			layOutRows();
+			await fireEvent.pointerDown(button(/^Reorder One,/), { ...at(20), button: 0 });
+			await fireEvent.pointerMove(window, at(70));
+			layOutRows();
+			await fireEvent.pointerMove(window, at(110));
+			expect(listed()).toEqual(["Two", "Three", "One"]);
+			expect(writes).toBe(0);
+			await fireEvent.pointerUp(window, at(110));
+
+			expect(get(queue).episodes.map(({ title }) => title)).toEqual(["Two", "Three", "One"]);
+			expect(writes).toBe(1);
+		});
+
+		test("Escape during a drag cancels the drag, writing nothing, and keeps the player open", async () => {
+			await openUpNext();
+			const before = get(queue);
+
+			await fireEvent.pointerDown(button(/^Reorder One,/), { button: 0, pointerId: 1 });
+			press("Escape");
+			await fireEvent.pointerUp(window, { pointerId: 1 });
+
+			expect(get(queue)).toBe(before);
+			expect(services.navigation.current.expanded).toBe(true);
+			press("Escape");
+			expect(services.navigation.current.expanded).toBe(false);
+		});
+	});
+});
diff --git a/src/ui/PodcastView/PlayerOverlay.svelte b/src/ui/PodcastView/PlayerOverlay.svelte
deleted file mode 100644
index cb3c5494..00000000
--- a/src/ui/PodcastView/PlayerOverlay.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts">
-	import { Scope } from "obsidian";
-	import { tick } from "svelte";
-	import { icon } from "../obsidian/icon";
-	import { useServices } from "./context";
-	import EpisodePlayer from "./EpisodePlayer.svelte";
-
-	let { viewRoot }: { viewRoot: HTMLElement } = $props();
-	const { app, navigation } = useServices();
-
-	let section: HTMLElement | undefined = $state();
-	const id = $props.id();
-
-	// Obsidian's keymap gives Escape to the newest scope, so a menu or modal opened
-	// over the player closes first. It keeps one stack per window and pushes onto the
-	// active window's, so the scope goes onto the stack of the view's window once that
-	// window is active, and moves when the view moves to another window. It is pushed
-	// once: pushing it again on a later focus would lift it over a modal opened since.
-	// Escape typed elsewhere, as in an editor, stays there.
-	$effect(() => {
-		const scope = new Scope(app.scope);
-		scope.register(null, "Escape", (evt) => {
-			const target = evt.target as Node | null;
-			if (target !== viewRoot.ownerDocument.body && !viewRoot.contains(target)) return true;
-			void collapse();
-			return false;
-		});
-		let win = viewRoot.win;
-		let pushed = false;
-		// Obsidian's own focus listener runs first and makes the window active.
-		const push = () => {
-			if (pushed || activeWindow !== win) return;
-			app.keymap.pushScope(scope);
-			pushed = true;
-		};
-		const pop = () => {
-			app.keymap.popScope(scope);
-			pushed = false;
-		};
-		win.addEventListener("focus", push);
-		push();
-		const stopFollowing = viewRoot.onWindowMigrated((next) => {
-			win.removeEventListener("focus", push);
-			pop();
-			win = next;
-			win.addEventListener("focus", push);
-			push();
-		});
-		return () => {
-			stopFollowing();
-			win.removeEventListener("focus", push);
-			pop();
-		};
-	});
-
-	/** A keyboard user who collapses the player lands on the mini player that opens it again. */
-	async function collapse() {
-		const hadFocus = !!section?.contains(viewRoot.ownerDocument.activeElement);
-		navigation.collapse();
-		if (!hadFocus) return;
-		await tick();
-		viewRoot.querySelector<HTMLElement>(".pn-mini-open")?.focus();
-	}
-
-	/** Takes focus unless the player opened while the user works elsewhere, as when a link plays. */
-	function focusFromView(button: HTMLButtonElement) {
-		const active = button.ownerDocument.activeElement;
-		if (!active || active === button.ownerDocument.body || viewRoot.contains(active)) {
-			button.focus();
-		}
-	}
-</script>
-
-<section class="pn-player" aria-labelledby="{id}-name" bind:this={section}>
-	<span id="{id}-name" hidden>Player</span>
-	<header class="pn-np-head">
-		<button
-			type="button"
-			class="pn-iconbtn"
-			aria-label="Collapse player"
-			title="Collapse player"
-			onclick={collapse}
-			{@attach icon("chevron-down")}
-			{@attach focusFromView}
-		></button>
-	</header>
-	<EpisodePlayer />
-</section>
-
-<style>
-	.pn-player {
-		position: absolute;
-		inset: 0;
-		z-index: 10;
-		display: flex;
-		flex-direction: column;
-		background: var(--pn-bg);
-	}
-
-	.pn-np-head {
-		flex: none;
-		display: flex;
-		align-items: center;
-		height: var(--pn-head);
-		padding: 0 var(--size-4-2);
-	}
-</style>
diff --git a/src/ui/PodcastView/PodcastView.integration.test.ts b/src/ui/PodcastView/PodcastView.integration.test.ts
index 8dd35695..db73d382 100644
--- a/src/ui/PodcastView/PodcastView.integration.test.ts
+++ b/src/ui/PodcastView/PodcastView.integration.test.ts
@@ -14,7 +14,6 @@ import { hidePlayedEpisodes, playedEpisodes, plugin, savedFeeds } from "src/stor
 import type { Episode } from "src/types/Episode";
 import type { PodcastFeed } from "src/types/PodcastFeed";
 import { privateFeedPlaceholder } from "src/utility/privateFeedUrl";
-import EpisodePlayerStub from "../../../tests/mocks/EpisodePlayerStub.svelte";
 import { deferred, feedDocument, MemoryStorage } from "../../../tests/mocks/feeds";
 import { pluginLibrary } from "../../../tests/mocks/services";
 import { FakeDocument } from "../../../tests/mocks/fakeMedia";
@@ -23,10 +22,6 @@ import { PlayerController } from "src/player/PlayerController";
 import { Navigation } from "./Navigation";
 import { PodcastSearch } from "./podcastSearch";
 
-vi.mock("./EpisodePlayer.svelte", () => ({
-	default: EpisodePlayerStub,
-}));
-
 import PodcastView from "./PodcastView.svelte";
 
 function renderView() {
diff --git a/src/ui/PodcastView/PodcastView.shell.test.ts b/src/ui/PodcastView/PodcastView.shell.test.ts
index c28706e8..bd4ffc24 100644
--- a/src/ui/PodcastView/PodcastView.shell.test.ts
+++ b/src/ui/PodcastView/PodcastView.shell.test.ts
@@ -500,24 +500,25 @@ describe("mini player", () => {
 		expect(button("Play")).toBeInTheDocument();
 	});
 
-	test("Timestamp names the note it added to", async () => {
+	test("Timestamp captures, compact or wide, and leaves saying where to the capture's notice", async () => {
 		const notice = vi.spyOn(obsidian, "Notice");
 		services.player.restore(episode);
-		renderView();
-
-		services.captureTimestamp.mockResolvedValueOnce(null);
-		await fireEvent.click(button("Capture timestamp"));
-		services.captureTimestamp.mockResolvedValueOnce({
+		const { resize } = renderView(320);
+		services.captureTimestamp.mockResolvedValue({
 			destination: "note",
 			path: "PodNotes/Pod/Episode 1 Launch.md",
 			text: "- 00:00:01\n",
 			created: false,
 		});
+
 		await fireEvent.click(button("Capture timestamp"));
+		resize(820);
+		await tick();
+		await fireEvent.click(button("Timestamp"));
 		await tick();
 
 		expect(services.captureTimestamp).toHaveBeenCalledTimes(2);
-		expect(notice.mock.calls).toEqual([["Timestamp added to Episode 1 Launch"]]);
+		expect(notice).not.toHaveBeenCalled();
 	});
 
 	test("tells assistive technology its progress, compact or wide", async () => {
@@ -552,6 +553,11 @@ describe("mini player", () => {
 		await tick();
 		expect(nowPlaying()).toHaveTextContent(`${feed.title} · 10 min left`);
 
+		doc.media.currentTime = 3555;
+		doc.media.emit("timeupdate");
+		await tick();
+		expect(nowPlaying()).toHaveTextContent(`${feed.title} · 45 s left`);
+
 		doc.media.currentTime = 3600;
 		doc.media.emit("timeupdate");
 		await tick();
diff --git a/src/ui/PodcastView/PodcastView.svelte b/src/ui/PodcastView/PodcastView.svelte
index dca302bc..ed393263 100644
--- a/src/ui/PodcastView/PodcastView.svelte
+++ b/src/ui/PodcastView/PodcastView.svelte
@@ -21,9 +21,9 @@
 	import { anchorOf, playlistMenu, podcastMenu, queueMenu, showMenu } from "./menus";
 	import MiniPlayer from "./MiniPlayer.svelte";
 	import { activeRoot, headFor, pageExists, pageKey, type RootCounts } from "./pages";
-	import PlayerOverlay from "./PlayerOverlay.svelte";
+	import Player from "./Player.svelte";
 	import PlaylistsPage from "./PlaylistsPage.svelte";
-	import QueuePage from "./QueuePage.svelte";
+	import QueueList from "./QueueList.svelte";
 	import Rail from "./Rail.svelte";
 	import SearchField from "./SearchField.svelte";
 
@@ -238,7 +238,7 @@
 						{:else if page.kind === "feed"}
 							<EpisodesPage key={page.key} />
 						{:else if page.kind === "queue"}
-							<QueuePage />
+							<QueueList empty="Nothing here yet" />
 						{:else}
 							<ListPage {page} />
 						{/if}
@@ -251,7 +251,7 @@
 		<MiniPlayer {layout} />
 	{/if}
 	{#if overlaid && root}
-		<PlayerOverlay viewRoot={root} />
+		<Player viewRoot={root} {layout} />
 	{/if}
 </div>
 
@@ -263,6 +263,9 @@
 		--pn-btn: 28px;
 		--pn-row: 28px;
 		--pn-head: 40px;
+		--pn-cap-h: 36px;
+		--pn-play: 52px;
+		--pn-skip: 40px;
 		position: relative;
 		display: flex;
 		flex-direction: column;
@@ -277,8 +280,24 @@
 		padding: 0;
 	}
 
+	/* A long note or podcast name keeps an Undo notice to two lines, with Undo beside it. */
+	:global(.notice-message:has(> .pn-undo)) {
+		display: flex;
+		align-items: center;
+		gap: var(--size-4-2);
+	}
+
+	:global(.notice .pn-undo-message) {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		overflow-wrap: anywhere;
+	}
+
 	:global(.notice .pn-undo) {
-		margin-left: var(--size-4-2);
+		flex: none;
 	}
 
 	/* A prompt's field takes the rest of its row, so a feed address shows whole. */
@@ -315,6 +334,8 @@
 	.podcast-view.is-wide {
 		--pn-pad: var(--size-4-6);
 		--pn-head: 44px;
+		--pn-cap-h: 38px;
+		--pn-play: 56px;
 	}
 
 	.podcast-view.is-phone {
@@ -322,6 +343,9 @@
 		--pn-btn: 44px;
 		--pn-row: 44px;
 		--pn-head: 52px;
+		--pn-cap-h: 48px;
+		--pn-play: 64px;
+		--pn-skip: 48px;
 	}
 
 	.pn-body {
@@ -813,6 +837,62 @@
 			--icon-stroke: 1.5px;
 		}
 
+		.pn-panel {
+			width: 100%;
+			height: 100%;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.pn-panel-scroll {
+			flex: 1;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+			overflow-y: auto;
+			padding: var(--size-4-2) 0 var(--size-4-4);
+			mask-image: linear-gradient(
+				to bottom,
+				transparent,
+				#000 12px,
+				#000 calc(100% - 20px),
+				transparent
+			);
+		}
+
+		.pn-panel-scroll > .pn-panel-empty {
+			margin: auto 0;
+		}
+
+		.pn-panel-head {
+			flex: none;
+			display: flex;
+			align-items: center;
+			gap: var(--size-4-2);
+			min-height: 32px;
+			padding-bottom: var(--size-2-2);
+			color: var(--text-muted);
+			font-size: var(--font-ui-smaller);
+			font-weight: var(--font-medium);
+			white-space: nowrap;
+		}
+
+		.pn-textbtn {
+			height: auto;
+			padding: var(--size-2-2) var(--size-4-2);
+			border-radius: var(--radius-s);
+			background: none;
+			box-shadow: none;
+			color: var(--text-accent);
+			font-size: var(--font-ui-small);
+			font-weight: var(--font-medium);
+		}
+
+		.pn-textbtn:hover {
+			background: var(--background-modifier-hover);
+		}
+
 		/* Obsidian's buttons keep their text on one line; these wrap their titles. */
 		.pn-result,
 		.pn-ep-main,
@@ -1319,7 +1399,9 @@
 		.pn-alt:focus-visible,
 		.pn-result:focus-visible,
 		.pn-railsearch:focus-visible,
-		.pn-mini-open:focus-visible {
+		.pn-mini-open:focus-visible,
+		.pn-textbtn:focus-visible,
+		.pn-player button:focus-visible {
 			outline: 2px solid var(--interactive-accent);
 			outline-offset: 1px;
 			box-shadow: none;
@@ -1343,6 +1425,14 @@
 	}
 
 	.is-wide :global {
+		.pn-player .pn-panel-scroll {
+			padding: var(--size-4-3) var(--size-4-4) var(--size-4-4);
+		}
+
+		.pn-player .pn-panel-head {
+			padding: var(--size-4-2) var(--size-4-4) 0 var(--size-4-6);
+		}
+
 		.pn-ep-meta {
 			flex-wrap: nowrap;
 			white-space: nowrap;
@@ -1395,6 +1485,10 @@
 	}
 
 	.is-phone :global {
+		.pn-panel-head {
+			min-height: 44px;
+		}
+
 		.pn-grid {
 			grid-template-columns: repeat(3, 1fr);
 			gap: var(--size-4-3);
diff --git a/src/ui/PodcastView/QueuePage.svelte b/src/ui/PodcastView/QueueList.svelte
similarity index 90%
rename from src/ui/PodcastView/QueuePage.svelte
rename to src/ui/PodcastView/QueueList.svelte
index 31cd728d..7538871e 100644
--- a/src/ui/PodcastView/QueuePage.svelte
+++ b/src/ui/PodcastView/QueueList.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Scope } from "obsidian";
 	import { onDestroy, tick } from "svelte";
 	import { get } from "svelte/store";
 	import { reorderEpisodes, type QueuePlacement } from "src/store";
@@ -8,7 +9,8 @@
 	import { useServices } from "./context";
 	import QueueRow from "./QueueRow.svelte";
 
-	const { actions, library } = useServices();
+	let { empty }: { empty: string } = $props();
+	const { actions, library, app } = useServices();
 	const { queue } = library;
 
 	let list: HTMLElement | undefined = $state();
@@ -53,13 +55,17 @@
 		const cancel = (cancelled: PointerEvent) => {
 			if (cancelled.pointerId === pointerId) end();
 		};
-		const escape = (key: KeyboardEvent) => {
-			if (key.key === "Escape") end();
-		};
+		// Obsidian's keymap gives Escape to the newest scope and stops it there, so a
+		// window listener would not hear an Escape the full player's scope takes.
+		const escape = new Scope(app.scope);
+		escape.register(null, "Escape", () => {
+			end();
+			return false;
+		});
+		app.keymap.pushScope(escape);
 		win.addEventListener("pointermove", move);
 		win.addEventListener("pointerup", release);
 		win.addEventListener("pointercancel", cancel);
-		win.addEventListener("keydown", escape);
 		drag = {
 			pointerId,
 			episode,
@@ -67,7 +73,7 @@
 				win.removeEventListener("pointermove", move);
 				win.removeEventListener("pointerup", release);
 				win.removeEventListener("pointercancel", cancel);
-				win.removeEventListener("keydown", escape);
+				app.keymap.popScope(escape);
 			},
 		};
 	}
@@ -127,6 +133,6 @@
 {:else}
 	<div class="pn-panel-empty">
 		<span class="pn-panel-empty-icon" {@attach icon("list-end")}></span>
-		<span>Nothing here yet</span>
+		<span>{empty}</span>
 	</div>
 {/if}
diff --git a/src/ui/PodcastView/QueuePage.test.ts b/src/ui/PodcastView/QueueList.test.ts
similarity index 94%
rename from src/ui/PodcastView/QueuePage.test.ts
rename to src/ui/PodcastView/QueueList.test.ts
index a6fa8f1d..3337621e 100644
--- a/src/ui/PodcastView/QueuePage.test.ts
+++ b/src/ui/PodcastView/QueueList.test.ts
@@ -13,7 +13,8 @@ import {
 	type TestServices,
 } from "../../../tests/mocks/services";
 import WithServices from "../../../tests/mocks/WithServices.svelte";
-import QueuePage from "./QueuePage.svelte";
+import type { Keymap as FakeKeymap } from "../../../tests/mocks/obsidian";
+import QueueList from "./QueueList.svelte";
 
 function episode(title: string, podcastName = "Field Notes"): Episode {
 	return {
@@ -44,7 +45,9 @@ afterEach(() => {
 
 function renderQueue(...episodes: Episode[]) {
 	queue.set({ ...structuredClone(DEFAULT_SETTINGS.queue), episodes });
-	return render(WithServices, { props: { services, component: QueuePage } });
+	return render(WithServices, {
+		props: { services, component: QueueList, props: { empty: "Nothing here yet" } },
+	});
 }
 
 const queued = () => get(queue).episodes.map(({ title, podcastName }) => `${podcastName}/${title}`);
@@ -52,6 +55,11 @@ const listed = () =>
 	screen.queryAllByRole("listitem").map((row) => row.querySelector(".pn-ep-title")?.textContent);
 const grip = (title: string) =>
 	screen.getByRole("button", { name: new RegExp(`^Reorder ${title},`) });
+/** An Escape as Obsidian delivers it: to the newest scope of the window's keymap. */
+const escape = () =>
+	(services.app.keymap as unknown as FakeKeymap).dispatch(
+		new KeyboardEvent("keydown", { key: "Escape" }),
+	);
 
 function layOutRows(shown = 1000) {
 	const rows = [...document.querySelectorAll<HTMLElement>(".pn-ep")];
@@ -69,7 +77,7 @@ function layOutRows(shown = 1000) {
 	};
 }
 
-describe("the Queue page", () => {
+describe("the queue list", () => {
 	test("lists the queue in its order, each with a grip that says where it is", () => {
 		renderQueue(a, b, c);
 
@@ -259,7 +267,9 @@ describe("dragging a grip", () => {
 
 	test("over a row of another Queue, as in a second PodNotes view, moves nothing", async () => {
 		renderQueue(a, b, c);
-		render(WithServices, { props: { services, component: QueuePage } });
+		render(WithServices, {
+			props: { services, component: QueueList, props: { empty: "Nothing here yet" } },
+		});
 		layOutRows();
 		const ownGrip = () => screen.getAllByRole("button", { name: /^Reorder A,/ })[0];
 
@@ -285,7 +295,8 @@ describe("dragging a grip", () => {
 		await fireEvent.pointerMove(window, at(70));
 		expect(listed()).toEqual(["B", "A", "C"]);
 
-		await fireEvent.keyDown(window, { key: "Escape" });
+		escape();
+		await tick();
 		expect(listed()).toEqual(["A", "B", "C"]);
 		layOutRows();
 		await fireEvent.pointerMove(window, at(110));
@@ -367,6 +378,8 @@ describe("dragging a grip", () => {
 		layOutRows();
 		const added = vi.spyOn(window, "addEventListener");
 		const removed = vi.spyOn(window, "removeEventListener");
+		const passedOn = vi.fn(() => false);
+		services.app.scope.register(null, "Escape", passedOn);
 
 		await fireEvent.pointerDown(grip("A"), { ...at(20), button: 0 });
 		await fireEvent.pointerMove(window, at(70));
@@ -379,10 +392,11 @@ describe("dragging a grip", () => {
 			"pointermove",
 			"pointerup",
 			"pointercancel",
-			"keydown",
 		]);
 		expect(removed.mock.calls.map(([type, listener]) => [type, listener])).toEqual(
 			expect.arrayContaining(listening),
 		);
+		escape();
+		expect(passedOn).toHaveBeenCalledTimes(1);
 	});
 });
diff --git a/src/ui/PodcastView/QueueRow.svelte b/src/ui/PodcastView/QueueRow.svelte
index 08269fea..11256d5c 100644
--- a/src/ui/PodcastView/QueueRow.svelte
+++ b/src/ui/PodcastView/QueueRow.svelte
@@ -49,11 +49,13 @@
 	onmenu={(at) => showMenu(episodeMenu(episode, services, { place: "list", at }), at)}
 >
 	{#snippet leading()}
+		<!-- A touch that starts on the grip starts none of Obsidian's mobile swipes, such as the pull-down action. -->
 		<button
 			type="button"
 			class="pn-iconbtn pn-grip"
 			class:is-dragging={dragging}
 			data-queue-key={getEpisodeKey(episode)}
+			data-ignore-swipe="true"
 			aria-label="Reorder {episode.title}, position {index +
 				1} of {count}. Use arrow keys to move."
 			title="Drag or use arrow keys"
diff --git a/src/ui/PodcastView/Scrubber.svelte b/src/ui/PodcastView/Scrubber.svelte
new file mode 100644
index 00000000..ce664fc1
--- /dev/null
+++ b/src/ui/PodcastView/Scrubber.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+	import type { Chapter } from "src/types/Chapter";
+	import { formatDuration } from "src/utility/formatDuration";
+	import { segmentsOf } from "./chapters";
+
+	let {
+		position,
+		duration,
+		chapters,
+		disabled,
+		onseek,
+	}: {
+		position: number;
+		duration: number;
+		chapters: readonly Chapter[];
+		disabled: boolean;
+		/** Once per press or key, in seconds within the episode. */
+		onseek(time: number): void;
+	} = $props();
+
+	/** A press under way: the thumb follows the pointer, and the seek waits for the release. */
+	let drag = $state.raw<{ readonly pointerId: number; readonly time: number }>();
+	const off = $derived(disabled || !(duration > 0));
+	const shown = $derived(drag?.time ?? position);
+	const segments = $derived(segmentsOf(chapters, duration));
+	const fill = (from: number, to: number) =>
+		to > from ? Math.min(1, Math.max(0, (shown - from) / (to - from))) * 100 : 0;
+	const clamp = (time: number) => Math.min(duration, Math.max(0, time));
+	const KEYS: Record<string, (time: number) => number> = {
+		ArrowLeft: (time) => time - 5,
+		ArrowDown: (time) => time - 5,
+		ArrowRight: (time) => time + 5,
+		ArrowUp: (time) => time + 5,
+		PageDown: (time) => time - 30,
+		PageUp: (time) => time + 30,
+		Home: () => 0,
+		End: () => duration,
+	};
+
+	function timeAt(event: PointerEvent): number {
+		const { left, width } = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		return width > 0 ? clamp(((event.clientX - left) / width) * duration) : 0;
+	}
+
+	function press(event: PointerEvent) {
+		if (off || event.button !== 0) return;
+		(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
+		drag = { pointerId: event.pointerId, time: timeAt(event) };
+	}
+
+	function move(event: PointerEvent) {
+		if (drag?.pointerId === event.pointerId) drag = { ...drag, time: timeAt(event) };
+	}
+
+	function release(event: PointerEvent) {
+		if (drag?.pointerId !== event.pointerId) return;
+		const { time } = drag;
+		drag = undefined;
+		onseek(time);
+	}
+
+	function keydown(event: KeyboardEvent) {
+		const step = KEYS[event.key];
+		if (off || !step) return;
+		event.preventDefault();
+		onseek(clamp(step(position)));
+	}
+</script>
+
+<div
+	class="pn-scrub"
+	role="slider"
+	tabindex={off ? -1 : 0}
+	aria-label="Seek"
+	aria-valuemin={0}
+	aria-valuemax={Math.floor(duration)}
+	aria-valuenow={Math.floor(shown)}
+	aria-valuetext="{formatDuration(shown)} of {formatDuration(duration)}"
+	aria-disabled={off}
+	onpointerdown={press}
+	onpointermove={move}
+	onpointerup={release}
+	onpointercancel={() => (drag = undefined)}
+	onkeydown={keydown}
+>
+	<span class="pn-segs">
+		{#each segments as [from, to] (from)}
+			<span class="pn-seg" style:flex-grow={to - from}>
+				<span style:width="{fill(from, to)}%"></span>
+			</span>
+		{/each}
+	</span>
+	<span class="pn-thumb" style:left="{duration > 0 ? (shown / duration) * 100 : 0}%"></span>
+</div>
+
+<style>
+	.pn-scrub {
+		position: relative;
+		height: 16px;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		touch-action: none;
+	}
+
+	.pn-scrub:focus-visible {
+		outline: 2px solid var(--interactive-accent);
+		outline-offset: 3px;
+		border-radius: 4px;
+	}
+
+	.pn-scrub[aria-disabled="true"] {
+		opacity: 0.5;
+		cursor: default;
+	}
+
+	.pn-segs {
+		display: flex;
+		gap: 2px;
+		width: 100%;
+		height: 4px;
+	}
+
+	.pn-seg {
+		flex: 1 1 0;
+		min-width: 2px;
+		border-radius: 2px;
+		background: var(--background-modifier-border-hover);
+		overflow: hidden;
+	}
+
+	.pn-seg span {
+		display: block;
+		height: 100%;
+		background: var(--interactive-accent);
+	}
+
+	.pn-thumb {
+		position: absolute;
+		top: 50%;
+		width: 12px;
+		height: 12px;
+		margin: -6px 0 0 -6px;
+		border-radius: 50%;
+		background: var(--interactive-accent);
+		box-shadow: 0 0 0 2px var(--pn-bg);
+		pointer-events: none;
+	}
+
+	:global(.is-phone) .pn-scrub {
+		height: 44px;
+		margin: -8px 0;
+	}
+
+	:global(.is-phone) .pn-segs {
+		height: 5px;
+	}
+
+	:global(.is-phone) .pn-thumb {
+		width: 16px;
+		height: 16px;
+		margin: -8px 0 0 -8px;
+	}
+</style>
diff --git a/src/ui/PodcastView/Scrubber.test.ts b/src/ui/PodcastView/Scrubber.test.ts
new file mode 100644
index 00000000..5a939812
--- /dev/null
+++ b/src/ui/PodcastView/Scrubber.test.ts
@@ -0,0 +1,101 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen } from "@testing-library/svelte";
+import { describe, expect, test, vi } from "vitest";
+import Scrubber from "./Scrubber.svelte";
+
+function renderScrubber(props: { position?: number; duration?: number; disabled?: boolean } = {}) {
+	const onseek = vi.fn();
+	render(Scrubber, {
+		props: { position: 600, duration: 3600, chapters: [], disabled: false, onseek, ...props },
+	});
+	const slider = screen.getByRole("slider", { name: "Seek" });
+	slider.getBoundingClientRect = () => ({ left: 100, width: 200 }) as DOMRect;
+	return { slider, onseek };
+}
+
+describe("the scrubber", () => {
+	test("tells its position as time", () => {
+		const { slider } = renderScrubber({ position: 754.6, duration: 2700.4 });
+
+		expect(slider).toHaveAttribute("aria-valuenow", "754");
+		expect(slider).toHaveAttribute("aria-valuemax", "2700");
+		expect(slider).toHaveAttribute("aria-valuetext", "12:34 of 45:00");
+	});
+
+	test("seeks 5 s with the arrows, 30 s with Page Up and Down, and to either end", async () => {
+		const { slider, onseek } = renderScrubber();
+
+		for (const key of ["ArrowLeft", "ArrowRight", "PageDown", "PageUp", "Home", "End"]) {
+			await fireEvent.keyDown(slider, { key });
+		}
+
+		expect(onseek.mock.calls).toEqual([[595], [605], [570], [630], [0], [3600]]);
+	});
+
+	test("never seeks past either end", async () => {
+		const { slider, onseek } = renderScrubber({ position: 3590 });
+
+		await fireEvent.keyDown(slider, { key: "PageUp" });
+
+		expect(onseek).toHaveBeenCalledWith(3600);
+	});
+
+	test("follows a press as it moves, and seeks once, where it is released", async () => {
+		const { slider, onseek } = renderScrubber();
+
+		await fireEvent.pointerDown(slider, { button: 0, pointerId: 1, clientX: 150 });
+		await fireEvent.pointerMove(slider, { pointerId: 1, clientX: 250 });
+		expect(slider).toHaveAttribute("aria-valuenow", "2700");
+		expect(onseek).not.toHaveBeenCalled();
+		await fireEvent.pointerUp(slider, { pointerId: 1, clientX: 250 });
+
+		expect(onseek.mock.calls).toEqual([[2700]]);
+	});
+
+	test("a cancelled press seeks nothing and shows the position again", async () => {
+		const { slider, onseek } = renderScrubber();
+
+		await fireEvent.pointerDown(slider, { button: 0, pointerId: 1, clientX: 250 });
+		await fireEvent.pointerCancel(slider, { pointerId: 1 });
+
+		expect(slider).toHaveAttribute("aria-valuenow", "600");
+		expect(onseek).not.toHaveBeenCalled();
+	});
+
+	test("disabled, it leaves the tab order and seeks on no key or press", async () => {
+		const { slider, onseek } = renderScrubber({ disabled: true });
+
+		await fireEvent.keyDown(slider, { key: "End" });
+		await fireEvent.pointerDown(slider, { button: 0, pointerId: 1, clientX: 250 });
+		await fireEvent.pointerUp(slider, { pointerId: 1, clientX: 250 });
+
+		expect(slider).toHaveAttribute("tabindex", "-1");
+		expect(slider).toHaveAttribute("aria-disabled", "true");
+		expect(onseek).not.toHaveBeenCalled();
+	});
+
+	test("splits its track at each chapter, filled up to the position", () => {
+		const onseek = vi.fn();
+		const { container } = render(Scrubber, {
+			props: {
+				position: 90,
+				duration: 180,
+				chapters: [0, 60, 120].map((startTime) => ({ startTime, title: "" })),
+				disabled: false,
+				onseek,
+			},
+		});
+
+		const fills = [...container.querySelectorAll<HTMLElement>(".pn-seg > span")];
+		expect(fills.map((fill) => fill.style.width)).toEqual(["100%", "50%", "0%"]);
+	});
+
+	test("shows an empty track before the duration is known", () => {
+		const { container } = render(Scrubber, {
+			props: { position: 0, duration: 0, chapters: [], disabled: false, onseek: vi.fn() },
+		});
+
+		const fills = [...container.querySelectorAll<HTMLElement>(".pn-seg > span")];
+		expect(fills.map((fill) => fill.style.width)).toEqual(["0%"]);
+	});
+});
diff --git a/src/ui/PodcastView/UpNextPanel.svelte b/src/ui/PodcastView/UpNextPanel.svelte
new file mode 100644
index 00000000..8aaea2d3
--- /dev/null
+++ b/src/ui/PodcastView/UpNextPanel.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { useServices } from "./context";
+	import { formatMinutes, secondsLeft } from "./episodeRow";
+	import QueueList from "./QueueList.svelte";
+
+	const { library, navigation } = useServices();
+	const { queue, playedEpisodes } = library;
+	const count = $derived($queue.episodes.length);
+</script>
+
+<div class="pn-panel">
+	{#if count > 0}
+		<div class="pn-panel-head">
+			<span>
+				{count}
+				{count === 1 ? "episode" : "episodes"} · {formatMinutes(
+					secondsLeft($queue.episodes, $playedEpisodes),
+				)}
+			</span>
+			<span class="pn-spacer"></span>
+			<button
+				type="button"
+				class="pn-textbtn"
+				onclick={() => navigation.go({ kind: "queue" })}>Edit</button
+			>
+		</div>
+	{/if}
+	<div class="pn-panel-scroll"><QueueList empty="Queue is empty" /></div>
+</div>
diff --git a/src/ui/PodcastView/chapters.test.ts b/src/ui/PodcastView/chapters.test.ts
new file mode 100644
index 00000000..ab953691
--- /dev/null
+++ b/src/ui/PodcastView/chapters.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, test, vi } from "vitest";
+import { fetchChapters } from "src/utility/fetchChapters";
+import { cachedChapters, chapterAt, loadChapters, segmentsOf } from "./chapters";
+
+vi.mock("src/utility/fetchChapters", () => ({ fetchChapters: vi.fn() }));
+
+const chapters = [0, 60, 120].map((startTime) => ({ startTime, title: `At ${startTime}` }));
+
+describe("chapters", () => {
+	test("the chapter under way is the last one started", () => {
+		expect([0, 59, 60, 500].map((time) => chapterAt(chapters, time))).toEqual([0, 0, 1, 2]);
+		expect(chapterAt(chapters.slice(1), 30)).toBe(-1);
+	});
+
+	test("split the scrubber at each start inside the episode", () => {
+		expect(segmentsOf(chapters, 180)).toEqual([
+			[0, 60],
+			[60, 120],
+			[120, 180],
+		]);
+		expect(segmentsOf([...chapters, { startTime: 500, title: "Past the end" }], 180)).toEqual([
+			[0, 60],
+			[60, 120],
+			[120, 180],
+		]);
+	});
+
+	test("never make an empty or backward stretch from unsorted or repeated starts", () => {
+		const messy = [120, 60, 60].map((startTime) => ({ startTime, title: "" }));
+
+		expect(segmentsOf(messy, 180)).toEqual([
+			[0, 60],
+			[60, 120],
+			[120, 180],
+		]);
+		expect(segmentsOf([], 0)).toEqual([[0, 0]]);
+	});
+
+	test("a load that failed, as offline, fetches again the next time", async () => {
+		const url = "https://pod.test/chapters.json";
+		vi.mocked(fetchChapters).mockResolvedValueOnce([]).mockResolvedValueOnce(chapters);
+
+		expect(await loadChapters(url)).toEqual([]);
+		expect(cachedChapters(url)).toBeUndefined();
+		expect(await loadChapters(url)).toEqual(chapters);
+
+		expect(fetchChapters).toHaveBeenCalledTimes(2);
+		expect(cachedChapters(url)).toEqual(chapters);
+		expect(cachedChapters("https://pod.test/other.json")).toBeUndefined();
+	});
+
+	test("each episode keeps the chapters it loaded, whichever load finishes first", async () => {
+		const earlier = "https://pod.test/earlier.json";
+		const latest = "https://pod.test/latest.json";
+		let finishEarlier: (loaded: typeof chapters) => void = () => {};
+		vi.mocked(fetchChapters)
+			.mockReturnValueOnce(new Promise((resolve) => (finishEarlier = resolve)))
+			.mockResolvedValueOnce(chapters);
+
+		const slow = loadChapters(earlier);
+		await loadChapters(latest);
+		finishEarlier([{ startTime: 0, title: "Earlier" }]);
+		await slow;
+
+		expect(cachedChapters(latest)).toEqual(chapters);
+		expect(cachedChapters(earlier)).toEqual([{ startTime: 0, title: "Earlier" }]);
+	});
+});
diff --git a/src/ui/PodcastView/chapters.ts b/src/ui/PodcastView/chapters.ts
new file mode 100644
index 00000000..66a6e433
--- /dev/null
+++ b/src/ui/PodcastView/chapters.ts
@@ -0,0 +1,34 @@
+import type { Chapter } from "src/types/Chapter";
+import { fetchChapters } from "src/utility/fetchChapters";
+
+/** The chapter under way at `time`: the last to start at or before it. -1 before the first. */
+export function chapterAt(chapters: readonly Chapter[], time: number): number {
+	let at = -1;
+	for (const [index, chapter] of chapters.entries()) if (chapter.startTime <= time) at = index;
+	return at;
+}
+
+/**
+ * The scrubber's stretches, in seconds, between the chapter starts inside the episode.
+ * Unsorted or repeated starts make no empty or backward stretch.
+ */
+export function segmentsOf(chapters: readonly Chapter[], duration: number): [number, number][] {
+	const starts = [
+		...new Set(chapters.map((c) => c.startTime).filter((t) => t > 0 && t < duration)),
+	].sort((a, b) => a - b);
+	const bounds = [0, ...starts, Math.max(0, duration)];
+	return bounds.slice(1).map((end, index) => [bounds[index], end]);
+}
+
+const loaded = new Map<string, Chapter[]>();
+
+export function cachedChapters(url: string): Chapter[] | undefined {
+	return loaded.get(url);
+}
+
+/** The chapters at `url`. A failed load, as offline, is not kept, so the next one fetches again. */
+export async function loadChapters(url: string): Promise<Chapter[]> {
+	const chapters = await fetchChapters(url);
+	if (chapters.length > 0) loaded.set(url, chapters);
+	return chapters;
+}
diff --git a/src/ui/PodcastView/episodeRow.test.ts b/src/ui/PodcastView/episodeRow.test.ts
index a9303df9..f172b294 100644
--- a/src/ui/PodcastView/episodeRow.test.ts
+++ b/src/ui/PodcastView/episodeRow.test.ts
@@ -164,8 +164,11 @@ describe("an episode row", () => {
 	});
 });
 
-test("minutes round to whole minutes, at least one, and hours past 60", () => {
-	expect([20, 90, 48 * 60, 63 * 60].map(formatMinutes)).toEqual([
+test("under a minute shows seconds, at least one, then whole minutes, and hours past 60", () => {
+	expect([0.2, 20, 59.4, 59.6, 90, 48 * 60, 63 * 60].map(formatMinutes)).toEqual([
+		"1 s",
+		"20 s",
+		"59 s",
 		"1 min",
 		"2 min",
 		"48 min",
diff --git a/src/ui/PodcastView/episodeRow.ts b/src/ui/PodcastView/episodeRow.ts
index 68d47006..da69eda5 100644
--- a/src/ui/PodcastView/episodeRow.ts
+++ b/src/ui/PodcastView/episodeRow.ts
@@ -69,7 +69,8 @@ function formatDate(value: Date | string | undefined): string | undefined {
 }
 
 export function formatMinutes(seconds: number): string {
-	const total = Math.max(1, Math.round(seconds / 60));
+	if (seconds < 59.5) return `${Math.max(1, Math.round(seconds))} s`;
+	const total = Math.round(seconds / 60);
 	return total >= 60 ? `${Math.floor(total / 60)} h ${total % 60} min` : `${total} min`;
 }
 
@@ -116,6 +117,11 @@ function folderOf(path: string): string {
 	return slash > 0 ? path.slice(0, slash) : "/";
 }
 
+/** Where the episode comes from: its podcast, or the folder of a local file. */
+export function sourceOf(episode: Episode): string {
+	return isLocalFile(episode) ? folderOf(episode.filePath ?? "") : episode.podcastName;
+}
+
 export function episodeRowModel(episode: Episode, state: RowState): EpisodeRowModel {
 	const record = getPlayedEpisode(state.played, episode);
 	const played = record?.finished ?? false;
diff --git a/src/ui/PodcastView/menus.test.ts b/src/ui/PodcastView/menus.test.ts
index e344bad1..5d9cced6 100644
--- a/src/ui/PodcastView/menus.test.ts
+++ b/src/ui/PodcastView/menus.test.ts
@@ -2,7 +2,7 @@
 import * as obsidian from "obsidian";
 import { get } from "svelte/store";
 import { fireEvent, screen } from "@testing-library/svelte";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, onTestFinished, test, vi } from "vitest";
 import { DEFAULT_SETTINGS } from "src/constants";
 import {
 	downloadedEpisodes,
@@ -18,6 +18,7 @@ import type { Playlist } from "src/types/Playlist";
 import { FeedRepository } from "src/services/FeedRepository";
 import { isPrivateFeedPlaceholder, privateFeedPlaceholder } from "src/utility/privateFeedUrl";
 import { feedDocument, MemoryStorage } from "../../../tests/mocks/feeds";
+import type { Menu as FakeMenu } from "../../../tests/mocks/obsidian";
 import {
 	createTestServices,
 	pluginLibrary,
@@ -30,6 +31,7 @@ import {
 	playlistMenu,
 	podcastMenu,
 	queueMenu,
+	rateMenu,
 	showMenu,
 	type EpisodeMenuOptions,
 	type MenuAnchor,
@@ -45,7 +47,8 @@ const episode: Episode = {
 	podcastName: "Podcast",
 	feedUrl: "https://show.test/feed.xml",
 };
-const at: MenuAnchor = { x: 3, y: 4, doc: document };
+const trigger = document.body.appendChild(document.createElement("button"));
+const at: MenuAnchor = { x: 3, y: 4, doc: document, el: trigger };
 
 let services: TestServices;
 let dispose: () => void;
@@ -547,9 +550,9 @@ describe("a menu", () => {
 		const shown = vi.spyOn(obsidian.Menu.prototype, "showAtPosition");
 		const popout = document.implementation.createHTMLDocument();
 
-		showMenu([], { x: 12, y: 34, doc: popout });
+		showMenu([], { x: 12, y: 34, doc: popout, el: trigger });
 
-		expect(shown).toHaveBeenCalledWith({ x: 12, y: 34, doc: popout }, popout);
+		expect(shown).toHaveBeenCalledWith({ x: 12, y: 34, doc: popout, el: trigger }, popout);
 	});
 
 	test("marks checked, destructive and disabled items", () => {
@@ -591,10 +594,100 @@ describe("a menu", () => {
 		button.click();
 
 		expect(anchors).toEqual([
-			{ x: 50, y: 60, doc: document },
-			{ x: 7, y: 30, doc: document },
+			{ x: 50, y: 60, doc: document, el: button },
+			{ x: 7, y: 30, doc: document, el: button },
 		]);
 		expect(rightClick.defaultPrevented).toBe(true);
 		button.remove();
 	});
+
+	test("an Escape that closes it counts as handled, so Obsidian leaves focus in the view", () => {
+		// As Obsidian's keymap, which hears a key first and closes the menu on Escape.
+		const keymap = (event: KeyboardEvent) => {
+			if (event.key === "Escape") (obsidian.Menu as unknown as typeof FakeMenu).shown?.hide();
+		};
+		window.addEventListener("keydown", keymap, true);
+		onTestFinished(() => window.removeEventListener("keydown", keymap, true));
+		const escape = () => {
+			const event = new KeyboardEvent("keydown", {
+				key: "Escape",
+				bubbles: true,
+				cancelable: true,
+			});
+			document.body.dispatchEvent(event);
+			return event.defaultPrevented;
+		};
+		showMenu([{ title: "Item", onClick: () => {} }], at);
+
+		expect(escape(), "the Escape that closes the menu").toBe(true);
+		expect(trigger, "focus back on the control").toHaveFocus();
+		expect(escape(), "an Escape once the menu is gone").toBe(false);
+	});
+
+	describe("gives focus back to the control that opened it", () => {
+		const shown = () => (obsidian.Menu as unknown as typeof FakeMenu).shown!;
+		let note: HTMLTextAreaElement;
+
+		beforeEach(() => {
+			note = document.body.appendChild(document.createElement("textarea"));
+			onTestFinished(() => note.remove());
+		});
+
+		test("when it closes with nothing picked, wherever focus went meanwhile", () => {
+			showMenu([{ title: "Item", onClick: () => {} }], at);
+			note.focus();
+
+			shown().close();
+
+			expect(trigger).toHaveFocus();
+		});
+
+		test("before a picked item runs", () => {
+			const focusedOnRun = vi.fn(() => document.activeElement);
+			showMenu([{ title: "Item", onClick: focusedOnRun }], at);
+			note.focus();
+
+			shown().pick("Item");
+
+			expect(focusedOnRun).toHaveReturnedWith(trigger);
+			expect(trigger).toHaveFocus();
+		});
+
+		test("and leaves it where a picked item put it", () => {
+			showMenu([{ title: "Open", onClick: () => note.focus() }], at);
+
+			shown().pick("Open");
+
+			expect(note).toHaveFocus();
+		});
+	});
+});
+
+describe("the rate menu", () => {
+	test("offers 0.75 to 2 in quarter steps, the live rate checked, and sets the picked one", () => {
+		services.player.setPlaybackRate(1.25);
+
+		showMenu(rateMenu(services), at);
+		const menu = (obsidian.Menu as unknown as typeof FakeMenu).shown!;
+		const items = menu.items.filter((item) => item !== "separator");
+		expect(items.map(({ title, checked }) => [title, checked])).toEqual([
+			["0.75×", null],
+			["1×", null],
+			["1.25×", true],
+			["1.5×", null],
+			["1.75×", null],
+			["2×", null],
+		]);
+		menu.pick("1.75×");
+
+		expect(get(services.player.state).playbackRate).toBe(1.75);
+	});
+
+	test("checks none while the commands have stepped to a rate it does not offer", () => {
+		services.player.setPlaybackRate(1.1);
+
+		expect(rateMenu(services).some((entry) => entry !== "separator" && entry.checked)).toBe(
+			false,
+		);
+	});
 });
diff --git a/src/ui/PodcastView/menus.ts b/src/ui/PodcastView/menus.ts
index 04551af0..7cabc862 100644
--- a/src/ui/PodcastView/menus.ts
+++ b/src/ui/PodcastView/menus.ts
@@ -21,7 +21,7 @@ import { availabilityOf, isCurrentEpisode } from "./episodeRow";
 export type MenuEntry =
 	| {
 			readonly title: string;
-			readonly icon: IconType;
+			readonly icon?: IconType;
 			readonly checked?: boolean;
 			readonly warning?: boolean;
 			readonly disabled?: boolean;
@@ -29,11 +29,15 @@ export type MenuEntry =
 	  }
 	| "separator";
 
-/** Where a menu opens. The document is the one the pointer was in, which can be a popout's. */
+/**
+ * Where a menu opens, and the control that opened it. The document is the one the
+ * pointer was in, which can be a popout's.
+ */
 export interface MenuAnchor {
 	readonly x: number;
 	readonly y: number;
 	readonly doc: Document;
+	readonly el: HTMLElement;
 }
 
 /** A right-click or long press opens the menu at the pointer, a button under itself. */
@@ -41,29 +45,78 @@ export function anchorOf(event: MouseEvent): MenuAnchor {
 	const el = event.currentTarget as HTMLElement;
 	if (event.type === "contextmenu") {
 		event.preventDefault();
-		return { x: event.clientX, y: event.clientY, doc: el.doc };
+		return { x: event.clientX, y: event.clientY, doc: el.doc, el };
 	}
 	const { left, bottom } = el.getBoundingClientRect();
-	return { x: left, y: bottom, doc: el.doc };
+	return { x: left, y: bottom, doc: el.doc, el };
 }
 
+/**
+ * Focus goes back to the control that opened the menu, so the next Escape reaches
+ * the view. A picked item runs after that, so one that opens a note or a modal
+ * keeps the focus it sets. Obsidian runs an item before it hides the menu.
+ */
 export function showMenu(entries: readonly MenuEntry[], at: MenuAnchor): void {
 	const menu = new Menu();
+	let picked = false;
 	for (const entry of entries) {
 		if (entry === "separator") {
 			menu.addSeparator();
 			continue;
 		}
 		menu.addItem((item) => {
-			item.setTitle(entry.title).setIcon(entry.icon).onClick(entry.onClick);
+			item.setTitle(entry.title).onClick(() => {
+				picked = true;
+				at.el.focus();
+				entry.onClick();
+			});
+			if (entry.icon) item.setIcon(entry.icon);
 			if (entry.checked) item.setChecked(true);
 			if (entry.warning) item.setWarning(true);
 			if (entry.disabled) item.setDisabled(true);
 		});
 	}
+	menu.onHide(() => {
+		// Obsidian's menu passes on the Escape that closes it, and Obsidian sends focus from
+		// a sidebar to the main area on an Escape nothing handled. This one counts as handled.
+		// It works because the menu hides synchronously inside that keydown. On a phone the
+		// hide is animated, so the event is gone by then and this does nothing.
+		const closing = at.el.win.event;
+		if (closing?.type === "keydown" && "key" in closing && closing.key === "Escape")
+			closing.preventDefault();
+		if (!picked && at.el.isConnected) at.el.focus();
+	});
 	menu.showAtPosition(at, at.doc);
 }
 
+/** The rate pill's speeds. The live rate, which the commands step by 0.1, may be none of them. */
+export function rateMenu({ player }: ShellServices): MenuEntry[] {
+	const live = get(player.state).playbackRate;
+	return [0.75, 1, 1.25, 1.5, 1.75, 2].map((rate) => ({
+		title: `${rate}×`,
+		checked: rate === live,
+		onClick: () => player.setPlaybackRate(rate),
+	}));
+}
+
+/** Open note, or Create note from the template, which opens it. */
+export function noteEntry(
+	episode: Episode,
+	{ hasNote, settings }: ShellServices,
+): { readonly title: string; readonly icon: IconType; onClick(): void } {
+	return hasNote(episode)
+		? { title: "Open note", icon: "file-text", onClick: () => openPodcastNote(episode) }
+		: {
+				title: "Create note",
+				icon: "file-plus",
+				onClick: () => {
+					const { path, template } = get(settings).note;
+					if (path && template) void createPodcastNote(episode);
+					else new Notice("Please set a note path and template in the settings.");
+				},
+			};
+}
+
 function copy(text: string, what: string): void {
 	navigator.clipboard.writeText(text).then(
 		() => new Notice(`${what.charAt(0).toUpperCase()}${what.slice(1)} copied`),
@@ -151,16 +204,7 @@ export function episodeMenu(
 			actions.setQueued(episode, !queued),
 		),
 	);
-	entries.push(
-		"separator",
-		services.hasNote(episode)
-			? item("Open note", "file-text", () => openPodcastNote(episode))
-			: item("Create note", "file-plus", () => {
-					const { path, template } = get(settings).note;
-					if (path && template) void createPodcastNote(episode);
-					else new Notice("Please set a note path and template in the settings.");
-				}),
-	);
+	entries.push("separator", noteEntry(episode, services));
 	if (isLocalFile(episode)) {
 		if (downloaded) {
 			// Removing a local file forgets it and never trashes it.
diff --git a/src/ui/common/Image.svelte b/src/ui/common/Image.svelte
deleted file mode 100644
index e4d414a4..00000000
--- a/src/ui/common/Image.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-	export let src: string;
-	export let alt: string;
-	export let fadeIn: boolean = false;
-	export let opacity: number = 0; // Falsey value so condition isn't triggered if not set.
-	export let loading: "lazy" | "eager" | null | undefined = "lazy";
-	export { _class as class };
-	let _class = "";
-
-	let loaded = false;
-	let isLoading = true;
-	let failed = false;
-</script>
-
-{#if isLoading || loaded}
-	<div class="pn_image_container">
-		<img
-			draggable="false"
-			{src}
-			{alt}
-			{loading}
-			class={_class}
-			style:opacity={opacity ? opacity : !fadeIn ? 1 : loaded ? 1 : 0}
-			style:transition={fadeIn ? "opacity 0.5s ease-out" : ""}
-			on:load={() => {
-				loaded = true;
-				isLoading = false;
-			}}
-			on:error={() => {
-				failed = true;
-				isLoading = false;
-			}}
-		/>
-	</div>
-{:else if failed}
-	<slot name="fallback" />
-{/if}
-
-<style>
-	.pn_image_container {
-		width: 100%;
-		height: 100%;
-		display: block;
-		position: relative;
-		overflow: hidden;
-		border: none;
-		padding: 0;
-		background: var(--background-secondary);
-		cursor: default;
-	}
-
-	.pn_image_container img {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-</style>
diff --git a/src/ui/common/Image.test.ts b/src/ui/common/Image.test.ts
deleted file mode 100644
index 7a9603da..00000000
--- a/src/ui/common/Image.test.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// @vitest-environment jsdom
-import { fireEvent, render, screen } from "@testing-library/svelte";
-import { tick } from "svelte";
-import { describe, expect, test } from "vitest";
-
-import Image from "./Image.svelte";
-import ImageFallbackHarness from "./__tests__/ImageFallbackHarness.svelte";
-
-const baseProps = {
-	src: "https://example.com/art.jpg",
-	alt: "Example artwork",
-	fadeIn: true,
-};
-
-describe("Image component", () => {
-	test("renders the image with its attributes", () => {
-		const { getByRole } = render(Image, { props: baseProps });
-
-		const img = getByRole("img") as HTMLImageElement;
-
-		expect(img.alt).toBe(baseProps.alt);
-		expect(img.getAttribute("src")).toBe(baseProps.src);
-	});
-
-	test("fades image in once it has loaded", async () => {
-		const { getByRole } = render(Image, { props: baseProps });
-		const img = getByRole("img") as HTMLImageElement;
-
-		expect(img.style.opacity).toBe("0");
-
-		await fireEvent.load(img);
-		await tick();
-
-		expect(img.style.opacity).toBe("1");
-	});
-
-	test("shows fallback slot when loading fails", async () => {
-		const { getByRole } = render(ImageFallbackHarness, {
-			props: {
-				props: baseProps,
-			},
-		});
-		const img = getByRole("img");
-
-		await fireEvent.error(img);
-		await tick();
-
-		expect(screen.getByText("placeholder")).toBeVisible();
-	});
-});
diff --git a/src/ui/common/Progressbar.svelte b/src/ui/common/Progressbar.svelte
deleted file mode 100644
index d710940c..00000000
--- a/src/ui/common/Progressbar.svelte
+++ /dev/null
@@ -1,131 +0,0 @@
-<script lang="ts">
-	import type { CSSObject } from "src/types/CSSObject";
-	import extractStylesFromObj from "src/utility/extractStylesFromObj";
-	import { createEventDispatcher } from "svelte";
-
-	export let max: number;
-	export let value: number;
-	export let ariaLabel = "Seek";
-	export let valueText: string | undefined = undefined;
-	export { _styled as style };
-
-	let isDragging: boolean = false;
-	let _styled: CSSObject = {};
-	let progressRef: HTMLDivElement;
-
-	let styles: string;
-
-	$: {
-		styles = extractStylesFromObj(_styled);
-	}
-
-	const dispatch = createEventDispatcher();
-
-	function forwardClick(e: MouseEvent | KeyboardEvent, percent?: number) {
-		dispatch("click", { event: e, percent });
-	}
-
-	function onDragStart() {
-		isDragging = true;
-	}
-
-	function onDragEnd() {
-		isDragging = false;
-	}
-
-	function handleDragging(e: MouseEvent) {
-		if (!isDragging) return;
-
-		forwardClick(e);
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if (!progressRef || !max) return;
-		const step = max * 0.05;
-		let nextValue = value;
-
-		switch (event.key) {
-			case "ArrowRight":
-			case "ArrowUp":
-				nextValue = Math.min(max, value + step);
-				break;
-			case "ArrowLeft":
-			case "ArrowDown":
-				nextValue = Math.max(0, value - step);
-				break;
-			case "Home":
-				nextValue = 0;
-				break;
-			case "End":
-				nextValue = max;
-				break;
-			case "Enter":
-			case " ":
-				// Keep current value; allow parent to handle if needed.
-				nextValue = value;
-				break;
-			default:
-				return;
-		}
-
-		event.preventDefault();
-		const percent = max ? nextValue / max : 0;
-		forwardClick(event, percent);
-	}
-</script>
-
-<div
-	class="progress"
-	role="slider"
-	tabindex="0"
-	aria-label={ariaLabel}
-	aria-valuemin="0"
-	aria-valuemax={max}
-	aria-valuenow={value}
-	aria-valuetext={valueText}
-	style={styles}
-	on:click={forwardClick}
-	on:mousedown={onDragStart}
-	on:mouseup={onDragEnd}
-	on:mousemove={handleDragging}
-	on:keydown={handleKeyDown}
-	bind:this={progressRef}
->
-	<div
-		class="progress__bar"
-		style={`width: ${max ? Math.min(100, (value / max) * 100) : 0}%;`}
-	></div>
-</div>
-
-<style>
-	.progress {
-		position: relative;
-		width: 100%;
-		height: 0.5rem;
-		background: var(--background-modifier-border);
-		border-radius: 9999px;
-		overflow: hidden;
-		cursor: pointer;
-		transition: height 120ms ease;
-	}
-
-	.progress:hover,
-	.progress:focus-visible {
-		height: 0.625rem;
-	}
-
-	.progress:focus-visible {
-		outline: 2px solid var(--interactive-accent);
-		outline-offset: 2px;
-	}
-
-	.progress__bar {
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 100%;
-		background: var(--interactive-accent);
-		border-radius: 9999px;
-		transition: width 50ms linear;
-	}
-</style>
diff --git a/src/ui/common/Progressbar.test.ts b/src/ui/common/Progressbar.test.ts
deleted file mode 100644
index 7555f4f2..00000000
--- a/src/ui/common/Progressbar.test.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-// @vitest-environment jsdom
-import { fireEvent, render } from "@testing-library/svelte";
-import { describe, expect, test, vi } from "vitest";
-
-import Progressbar from "./Progressbar.svelte";
-
-describe("Progressbar", () => {
-	test("renders slider with expected attributes and width", () => {
-		const { getByRole } = render(Progressbar, {
-			props: { value: 25, max: 200 },
-		});
-
-		const slider = getByRole("slider");
-		expect(slider).toHaveAttribute("aria-valuenow", "25");
-		expect(slider).toHaveAttribute("aria-valuemax", "200");
-		const bar = slider.querySelector(".progress__bar") as HTMLDivElement | null;
-		expect(bar).not.toBeNull();
-		expect(bar?.style.width).toBe("12.5%");
-	});
-
-	test("announces percent changes from keyboard interactions", async () => {
-		const handler = vi.fn();
-		const { getByRole } = render(Progressbar, {
-			props: { value: 40, max: 200 },
-			events: {
-				click: handler,
-			},
-		});
-		const slider = getByRole("slider");
-
-		await fireEvent.keyDown(slider, { key: "ArrowRight" });
-		await fireEvent.keyDown(slider, { key: "Home" });
-
-		const [incrementEvent, homeEvent] = handler.mock.calls.map((call) => call[0].detail);
-
-		expect(incrementEvent.percent).toBeCloseTo(0.25, 5);
-		expect(homeEvent.percent).toBe(0);
-	});
-
-	test("fires drag events while mouse is down", async () => {
-		const handler = vi.fn();
-		const { getByRole } = render(Progressbar, {
-			props: { value: 30, max: 100 },
-			events: {
-				click: handler,
-			},
-		});
-		const slider = getByRole("slider");
-
-		await fireEvent.mouseDown(slider);
-		await fireEvent.mouseMove(slider);
-		await fireEvent.mouseUp(slider);
-
-		expect(handler).toHaveBeenCalled();
-		expect(handler.mock.calls[0][0].detail.percent).toBeUndefined();
-		expect(handler.mock.calls[0][0].detail.event).toBeInstanceOf(MouseEvent);
-	});
-});
diff --git a/src/ui/common/__tests__/ImageFallbackHarness.svelte b/src/ui/common/__tests__/ImageFallbackHarness.svelte
deleted file mode 100644
index d2be7434..00000000
--- a/src/ui/common/__tests__/ImageFallbackHarness.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import Image from "../Image.svelte";
-	export let props: {
-		src: string;
-		alt: string;
-		fadeIn?: boolean;
-		opacity?: number;
-		class?: string;
-	};
-</script>
-
-<Image {...props}>
-	<span slot="fallback">placeholder</span>
-</Image>
diff --git a/src/ui/obsidian/Button.svelte b/src/ui/obsidian/Button.svelte
deleted file mode 100644
index c59528ec..00000000
--- a/src/ui/obsidian/Button.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script lang="ts">
-	import { ButtonComponent } from "obsidian";
-	import type { CSSObject } from "src/types/CSSObject";
-	import type { IconType } from "src/types/IconType";
-	import extractStylesFromObj from "src/utility/extractStylesFromObj";
-	import { afterUpdate, createEventDispatcher, onMount } from "svelte";
-
-	export let text: string = "";
-	export let tooltip: string = "";
-	export let ariaLabel: string = "";
-	export let icon: IconType | undefined = undefined;
-	export let disabled: boolean = false;
-	export let warning: boolean = false;
-	export let cta: boolean = false;
-	export { className as class };
-	export { styles as style };
-
-	let buttonRef: HTMLSpanElement;
-	let className: string;
-	let styles: CSSObject;
-
-	let button: ButtonComponent;
-
-	const dispatch = createEventDispatcher();
-
-	onMount(() => createButton(buttonRef));
-	afterUpdate(() => updateButtonAttributes(button));
-
-	function createButton(container: HTMLElement) {
-		button = new ButtonComponent(container);
-		button.onClick((event: MouseEvent) => {
-			dispatch("click", { event });
-		});
-
-		updateButtonAttributes(button);
-	}
-
-	function updateButtonAttributes(btn: ButtonComponent) {
-		if (text) btn.setButtonText(text);
-		if (tooltip) btn.setTooltip(tooltip);
-		if (icon) btn.setIcon(icon);
-		if (disabled) btn.setDisabled(disabled);
-		if (warning) btn.setWarning();
-		else btn.buttonEl.classList.remove("mod-warning");
-		if (className) btn.setClass(className);
-		if (cta) btn.setCta();
-		else btn.removeCta();
-
-		if (styles) {
-			btn.buttonEl.setAttr("style", extractStylesFromObj(styles));
-		}
-
-		if (ariaLabel) {
-			btn.buttonEl.setAttr("aria-label", ariaLabel);
-		} else {
-			btn.buttonEl.removeAttribute("aria-label");
-		}
-	}
-</script>
-
-<span bind:this={buttonRef}></span>
diff --git a/src/ui/obsidian/Icon.svelte b/src/ui/obsidian/Icon.svelte
deleted file mode 100644
index 91bc6106..00000000
--- a/src/ui/obsidian/Icon.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script lang="ts">
-	import { setIcon } from "obsidian";
-	import type { CSSObject } from "src/types/CSSObject";
-	import type { IconType } from "src/types/IconType";
-	import extractStylesFromObj from "src/utility/extractStylesFromObj";
-	import { afterUpdate, createEventDispatcher, onMount } from "svelte";
-
-	export let size: number = 16;
-	export let icon: IconType;
-	export let clickable: boolean = true;
-	export let label: string = "";
-	export let pressed: boolean | undefined = undefined;
-	export let disabled: boolean = false;
-	export { styles as style };
-
-	let ref: HTMLSpanElement;
-	let styles: CSSObject = {};
-	let stylesStr: string;
-	let pressedAttr: "true" | "false" | undefined;
-
-	$: stylesStr = extractStylesFromObj(styles);
-	$: pressedAttr = pressed === undefined ? undefined : pressed ? "true" : "false";
-
-	const dispatch = createEventDispatcher();
-
-	onMount(() => {
-		setIcon(ref, icon);
-		applyIconStyles();
-	});
-
-	afterUpdate(() => {
-		setIcon(ref, icon);
-		applyIconStyles();
-	});
-
-	function applyIconStyles() {
-		if (!ref) return;
-		ref.style.cssText = stylesStr;
-
-		if (size) {
-			ref.style.width = `${size}px`;
-			ref.style.height = `${size}px`;
-		}
-	}
-
-	function forwardClick(event: MouseEvent) {
-		if (!clickable || disabled) return;
-		dispatch("click", { event });
-	}
-</script>
-
-{#if clickable}
-	<button
-		type="button"
-		class="icon-button"
-		on:click={forwardClick}
-		aria-label={label}
-		aria-pressed={pressedAttr}
-		{disabled}
-	>
-		<span bind:this={ref}></span>
-	</button>
-{:else}
-	<span
-		class="icon-static"
-		aria-label={label || undefined}
-		aria-hidden={label ? undefined : "true"}
-		bind:this={ref}
-	></span>
-{/if}
-
-<style>
-	.icon-button {
-		border: none;
-		background: none;
-		padding: 0;
-		cursor: pointer;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.icon-button:disabled {
-		cursor: not-allowed;
-		opacity: 0.4;
-	}
-
-	.icon-static {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-</style>
diff --git a/src/ui/obsidian/Slider.svelte b/src/ui/obsidian/Slider.svelte
deleted file mode 100644
index c0e01ce2..00000000
--- a/src/ui/obsidian/Slider.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script lang="ts">
-	import { SliderComponent } from "obsidian";
-	import type { CSSObject } from "src/types/CSSObject";
-	import extractStylesFromObj from "src/utility/extractStylesFromObj";
-	import { createEventDispatcher, onDestroy, onMount } from "svelte";
-
-	export let value: number;
-	export let limits: [min: number, max: number] | [min: number, max: number, step: number];
-	export { styles as style };
-
-	let sliderRef: HTMLSpanElement;
-
-	const dispatch = createEventDispatcher();
-
-	let slider: SliderComponent;
-	let styles: CSSObject = {};
-	let changeHandler: ((event: Event) => void) | null = null;
-	let isProgrammaticUpdate = false;
-
-	// This is not a complete implementation. I implemented what I needed.
-
-	onMount(() => {
-		slider = new SliderComponent(sliderRef);
-
-		changeHandler = (event: Event) => {
-			if (isProgrammaticUpdate) return;
-
-			const newValue = Number((event.target as HTMLInputElement).value);
-			dispatch("change", { value: newValue });
-		};
-
-		slider.sliderEl.addEventListener("input", changeHandler);
-	});
-
-	onDestroy(() => {
-		if (slider?.sliderEl && changeHandler) {
-			slider.sliderEl.removeEventListener("input", changeHandler);
-		}
-	});
-
-	$: if (slider) {
-		updateSliderAttributes(slider, value, limits, styles);
-	}
-
-	function updateSliderAttributes(
-		sldr: SliderComponent,
-		currentValue: number,
-		currentLimits: [min: number, max: number] | [min: number, max: number, step: number],
-		currentStyles: CSSObject,
-	) {
-		// Limits first: a range input snaps its value to the step from its minimum,
-		// so the default step of 1 would turn a rate of 1 into 1.5 once min is 0.5.
-		if (currentLimits) {
-			if (currentLimits.length === 2) {
-				sldr.setLimits(currentLimits[0], currentLimits[1], 1);
-			} else {
-				sldr.setLimits(currentLimits[0], currentLimits[1], currentLimits[2]);
-			}
-		}
-		const sliderValue =
-			typeof sldr.getValue === "function" ? sldr.getValue() : Number(sldr.sliderEl?.value);
-
-		if (currentValue !== undefined && sliderValue !== currentValue) {
-			isProgrammaticUpdate = true;
-			sldr.setValue(currentValue);
-			isProgrammaticUpdate = false;
-		}
-		if (currentStyles) {
-			sldr.sliderEl.setAttr("style", extractStylesFromObj(currentStyles));
-		}
-	}
-</script>
-
-<span bind:this={sliderRef}></span>
diff --git a/src/ui/undoNotice.ts b/src/ui/undoNotice.ts
index 8a983f2e..dc5b3bcf 100644
--- a/src/ui/undoNotice.ts
+++ b/src/ui/undoNotice.ts
@@ -6,8 +6,8 @@ const showing = new Set<() => void>();
 /** A Notice that ends in an Undo button. Undo runs at most once, and hides the notice. */
 export function noticeWithUndo(message: string, undo: () => void): void {
 	const fragment = activeDocument.createDocumentFragment();
+	fragment.createSpan({ cls: "pn-undo-message", text: message });
 	const button = fragment.createEl("button", { cls: "pn-undo", text: "Undo" });
-	fragment.prepend(message);
 	const notice = new Notice(fragment, 7000);
 	const dismiss = () => {
 		showing.delete(dismiss);
diff --git a/src/utility/extractStylesFromObj.ts b/src/utility/extractStylesFromObj.ts
deleted file mode 100644
index 45bc183c..00000000
--- a/src/utility/extractStylesFromObj.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { CSSObject } from "src/types/CSSObject";
-
-export default function extractStylesFromObj(obj: CSSObject): string {
-	return Object.entries(obj)
-		.map(([key, value]) => `${key}: ${value}`)
-		.join("; ");
-}
diff --git a/src/utility/playbackRate.test.ts b/src/utility/playbackRate.test.ts
new file mode 100644
index 00000000..404f5652
--- /dev/null
+++ b/src/utility/playbackRate.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, test } from "vitest";
+import { adjustPlaybackRate, normalizePlaybackRate } from "./playbackRate";
+
+describe("playback rate", () => {
+	test("keeps the rate menu's quarter steps", () => {
+		expect([0.75, 1.25, 1.75].map((rate) => normalizePlaybackRate(rate))).toEqual([
+			0.75, 1.25, 1.75,
+		]);
+	});
+
+	test("steps by a tenth from a quarter step, without float noise", () => {
+		expect(adjustPlaybackRate(1.25, 0.1)).toBe(1.35);
+		expect(adjustPlaybackRate(1.1, 0.1)).toBe(1.2);
+		expect(adjustPlaybackRate(0.75, -0.1)).toBe(0.65);
+	});
+
+	test("clamps to 0.5 to 4, and falls back for a rate that is not a number", () => {
+		expect([normalizePlaybackRate(0.1), normalizePlaybackRate(9)]).toEqual([0.5, 4]);
+		expect(normalizePlaybackRate("fast", 1.5)).toBe(1.5);
+	});
+});
diff --git a/src/utility/playbackRate.ts b/src/utility/playbackRate.ts
index b139abc3..f85e44de 100644
--- a/src/utility/playbackRate.ts
+++ b/src/utility/playbackRate.ts
@@ -15,13 +15,14 @@ export function normalizePlaybackRate(value: unknown, fallback = DEFAULT_PLAYBAC
 }
 
 export function adjustPlaybackRate(currentRate: number, delta: number): number {
-	return normalizePlaybackRate(roundToTenths(currentRate + delta));
+	return normalizePlaybackRate(roundToHundredths(currentRate + delta));
 }
 
 function clampPlaybackRate(value: number): number {
-	return Math.min(PLAYBACK_RATE_MAX, Math.max(PLAYBACK_RATE_MIN, roundToTenths(value)));
+	return Math.min(PLAYBACK_RATE_MAX, Math.max(PLAYBACK_RATE_MIN, roundToHundredths(value)));
 }
 
-function roundToTenths(value: number): number {
-	return Math.round(value * 10) / 10;
+// Hundredths, so the rate menu's quarter steps such as 1.25 survive.
+function roundToHundredths(value: number): number {
+	return Math.round(value * 100) / 100;
 }
diff --git a/src/utility/skipLength.ts b/src/utility/skipLength.ts
new file mode 100644
index 00000000..ea4f2c2c
--- /dev/null
+++ b/src/utility/skipLength.ts
@@ -0,0 +1,7 @@
+// Default used when a persisted/configured skip length is missing or invalid
+// (e.g. a cleared settings field serialized to null/NaN). Mirrors
+// DEFAULT_SETTINGS.skip*Length.
+const DEFAULT_SKIP_LENGTH = 15;
+
+export const normalizeSkipLength = (length: number): number =>
+	Number.isFinite(length) && length > 0 ? length : DEFAULT_SKIP_LENGTH;
diff --git a/tests/e2e/harness.ts b/tests/e2e/harness.ts
index a4207fa3..16f35e80 100644
--- a/tests/e2e/harness.ts
+++ b/tests/e2e/harness.ts
@@ -425,7 +425,7 @@ export async function getPlaybackState(obsidian: {
 			const plugin = app.plugins.plugins.${PLUGIN_ID};
 			return {
 				currentTime: plugin?.api?.currentTime ?? null,
-				hasPlayer: Boolean(document.querySelector(".episode-player")),
+				hasPlayer: Boolean(document.querySelector(".pn-player")),
 				isPlaying: Boolean(plugin?.api?.isPlaying),
 				title: plugin?.api?.podcast?.title ?? null,
 			};
diff --git a/tests/e2e/journey-notes.test.ts b/tests/e2e/journey-notes.test.ts
index f2d6b457..6e1ae700 100644
--- a/tests/e2e/journey-notes.test.ts
+++ b/tests/e2e/journey-notes.test.ts
@@ -14,8 +14,8 @@ import {
 	showPodNotes,
 } from "./journey/actions";
 import { click } from "./journey/input";
-import { ui } from "./journey/targets";
-import { isShown, waitUntilShown } from "./journey/wait";
+import { ui, type UiTarget } from "./journey/targets";
+import { eventually, isShown, notices, waitUntilShown } from "./journey/wait";
 import {
 	type FixtureEpisode,
 	type FixtureFeed,
@@ -217,6 +217,48 @@ async function properties(path: string): Promise<Record<string, unknown>> {
 	);
 }
 
+/** The text in the open editor of `path`, which runs ahead of the file it saves. */
+async function editorText(path: string): Promise<string | null> {
+	return await getContext().obsidian.dev.evalJson<string | null>(
+		`app.workspace.getLeavesOfType("markdown").find((leaf) => leaf.view.file?.path === ${jsLiteral(path)})?.view.editor.getValue() ?? null`,
+	);
+}
+
+const REFUSED = "The note isn't as the capture left it, so the timestamp stays";
+
+/** Opens `path` in Live Preview with the caret at `line` and `ch`, both zero-based. */
+async function writeIn(path: string, line: number, ch: number): Promise<void> {
+	const { obsidian } = getContext();
+	await openInEditor(obsidian, path);
+	expect(
+		await obsidian.dev.evalJson<unknown>(
+			`app.workspace.getLeavesOfType("markdown").find((leaf) => leaf.view.file?.path === ${jsLiteral(path)}).view.getState()`,
+		),
+		"Live Preview",
+	).toMatchObject({ mode: "source", source: false });
+	expect(await clickInEditor(obsidian, path, line, ch)).toEqual({ line, ch });
+}
+
+/**
+ * Clicks `timestamp`, waits until `read` shows `captured`, then clicks Undo on the Notice
+ * that says `message` and waits until `read` shows `before` again.
+ */
+async function captureThenUndo(
+	timestamp: UiTarget,
+	message: string,
+	read: () => Promise<string | null>,
+	{ before, captured }: { before: string; captured: string },
+): Promise<void> {
+	const { obsidian } = getContext();
+	await click(obsidian, timestamp);
+	expect(await eventually(obsidian, read, captured, 10_000), "captured").toBe(captured);
+	await click(obsidian, ui.undo(message));
+	expect(await eventually(obsidian, read, before, 10_000), "after Undo").toBe(before);
+	expect(await notices(obsidian), "Undo left nothing behind to say").not.toContainEqual(
+		expect.stringContaining(REFUSED),
+	);
+}
+
 async function detachMarkdownTabs(): Promise<void> {
 	await getContext().obsidian.dev.evalJson('app.workspace.detachLeavesOfType("markdown"), true');
 }
@@ -566,6 +608,284 @@ describe("episode note and capture journeys", () => {
 		expect(note.endsWith(`\n${firstLine}\n${secondLine}\n`), note).toBe(true);
 	});
 
+	test("J-TS-12 the player's Timestamp goes into the note being written and into the episode note, and Undo leaves each as it was", async () => {
+		const { obsidian, sandbox } = getContext();
+		const journey = await setUp("Journey Player Capture");
+		const draft = sandbox.path("Player draft.md");
+		const episodeNote = notePath(journey.show, ORIGINAL.title);
+		const original = "Before the cut after the cut\nSecond line\n";
+		await writeVaultFile(obsidian, draft, original);
+		const timestamp = ui.playerTimestamp;
+		const label = () =>
+			obsidian.dev.evalJson<string>(`(${timestamp.elements})[0]?.textContent.trim() ?? ""`);
+
+		await playFromList(journey.show, ORIGINAL.title);
+		await writeIn(draft, 0, 14);
+		const paused = await pauseInView();
+		const line = capture(journey, ORIGINAL, paused.seconds);
+
+		await click(obsidian, timestamp);
+		expect(await eventually(obsidian, label, "Added", 1_000), "the button confirms").toBe(
+			"Added",
+		);
+		expect(await eventually(obsidian, label, "Timestamp", 3_000)).toBe("Timestamp");
+		const captured = `Before the cut${line} after the cut\nSecond line\n`;
+		expect(await eventually(obsidian, () => editorText(draft), captured)).toBe(captured);
+		await click(obsidian, ui.undo("Timestamp added to Player draft"));
+		expect(await eventually(obsidian, () => editorText(draft), original)).toBe(original);
+		await waitForText(draft, (text) => text === original, "the draft saved as it was");
+
+		await detachMarkdownTabs();
+		await click(obsidian, timestamp);
+		const created = await waitForText(
+			episodeNote,
+			(text) => text.endsWith(`\n${line}\n`),
+			"the capture in a new episode note",
+		);
+		await click(obsidian, ui.undo("Created Original Title"));
+		const kept = created.slice(0, -`${line}\n`.length);
+		await waitForText(
+			episodeNote,
+			(text) => text === kept,
+			"the created note kept, without the line",
+		);
+
+		const read = async () =>
+			(await exists(episodeNote)) ? await readVaultText(obsidian, episodeNote) : null;
+		await captureThenUndo(timestamp, "Timestamp added to Original Title", read, {
+			before: kept,
+			captured: `${kept}${line}\n`,
+		});
+		expect(await editorText(draft), "the draft is closed").toBeNull();
+		expect(await readVaultText(obsidian, draft)).toBe(original);
+	});
+
+	test("J-TS-13 the mini player's Timestamp goes into the note being written and into the episode note, and Undo leaves each as it was", async () => {
+		const { obsidian, sandbox } = getContext();
+		const journey = await setUp("Journey Mini Capture");
+		const draft = sandbox.path("Mini draft.md");
+		const episodeNote = notePath(journey.show, ORIGINAL.title);
+		const original = "First line\nSecond line\n";
+		const mine = "# My notes\nNo newline at the end";
+		await writeVaultFile(obsidian, draft, original);
+		await writeVaultFile(obsidian, episodeNote, mine);
+
+		await playFromList(journey.show, ORIGINAL.title);
+		await writeIn(draft, 1, 6);
+		await click(obsidian, ui.collapsePlayer);
+		await waitUntilShown(obsidian, ui.miniPlayer);
+		await click(obsidian, ui.miniPlayback);
+		const paused = await waitForPlayback(obsidian, (playback) => !playback.playing, "paused");
+		const line = capture(journey, ORIGINAL, paused.seconds);
+
+		await captureThenUndo(
+			ui.miniCapture,
+			"Timestamp added to Mini draft",
+			() => editorText(draft),
+			{
+				before: original,
+				captured: `First line\nSecond${line} line\n`,
+			},
+		);
+		await waitForText(draft, (text) => text === original, "the draft saved as it was");
+
+		await detachMarkdownTabs();
+		await captureThenUndo(
+			ui.miniCapture,
+			"Timestamp added to Original Title",
+			() => readVaultText(obsidian, episodeNote),
+			{ before: mine, captured: `${mine}\n${line}\n` },
+		);
+	});
+
+	test("J-TS-15 Undo leaves a note with a copy of its line pasted before it, and says so", async () => {
+		const { obsidian } = getContext();
+		const journey = await setUp("Journey Undo Pasted");
+		const episodeNote = notePath(journey.show, ORIGINAL.title);
+		await detachMarkdownTabs();
+		await playFromList(journey.show, ORIGINAL.title);
+		const line = capture(journey, ORIGINAL, (await pauseInView()).seconds);
+
+		await click(obsidian, ui.playerTimestamp);
+		const created = await waitForText(
+			episodeNote,
+			(text) => text.endsWith(`\n${line}\n`),
+			"the capture in a new episode note",
+		);
+		const at = created.length - `${line}\n`.length;
+		const pasted = `${created.slice(0, at)}${line}\nA thought\n${created.slice(at)}`;
+		await obsidian.dev.evalJsonAsync(
+			`app.vault.modify(app.vault.getAbstractFileByPath(${jsLiteral(episodeNote)}), ${jsLiteral(pasted)}).then(() => true)`,
+		);
+		await waitForText(
+			episodeNote,
+			(text) => text === pasted,
+			"a copy pasted before the capture",
+		);
+		await click(obsidian, ui.undo("Created Original Title"));
+
+		await obsidian.waitFor(
+			async () =>
+				(await notices(obsidian)).includes(REFUSED) ||
+				(await readVaultText(obsidian, episodeNote)) !== pasted,
+			{ timeoutMs: 5_000, intervalMs: 100, message: "Undo to answer" },
+		);
+		expect(await readVaultText(obsidian, episodeNote), "the pasted copy and the capture").toBe(
+			pasted,
+		);
+		expect(await notices(obsidian)).toContain(REFUSED);
+	});
+
+	test("J-TS-16 Undo leaves a capture edited since, and says so", async () => {
+		const { obsidian } = getContext();
+		const journey = await setUp("Journey Undo Refused");
+		const episodeNote = notePath(journey.show, ORIGINAL.title);
+		await detachMarkdownTabs();
+		await playFromList(journey.show, ORIGINAL.title);
+		const line = capture(journey, ORIGINAL, (await pauseInView()).seconds);
+
+		await click(obsidian, ui.playerTimestamp);
+		const created = await waitForText(
+			episodeNote,
+			(text) => text.endsWith(`\n${line}\n`),
+			"the capture in a new episode note",
+		);
+		const edited = `${created.slice(0, -1)}key point\n`;
+		await obsidian.dev.evalJsonAsync(
+			`app.vault.modify(app.vault.getAbstractFileByPath(${jsLiteral(episodeNote)}), ${jsLiteral(edited)}).then(() => true)`,
+		);
+		await waitForText(
+			episodeNote,
+			(text) => text === edited,
+			"a note added on the capture's line",
+		);
+		await click(obsidian, ui.undo("Created Original Title"));
+
+		await obsidian.waitFor(async () => (await notices(obsidian)).includes(REFUSED), {
+			timeoutMs: 5_000,
+			intervalMs: 100,
+			message: "the Notice that Undo left the note",
+		});
+		expect(await readVaultText(obsidian, episodeNote)).toBe(edited);
+	});
+
+	test("J-TS-17 Undo takes a capture out of a note whose tab closed unchanged", async () => {
+		const { obsidian, sandbox } = getContext();
+		const journey = await setUp("Journey Undo Closed");
+		const draft = sandbox.path("Closed draft.md");
+		const original = "First line\nSecond line\n";
+		await writeVaultFile(obsidian, draft, original);
+		await playFromList(journey.show, ORIGINAL.title);
+		await writeIn(draft, 0, 10);
+		const line = capture(journey, ORIGINAL, (await pauseInView()).seconds);
+
+		await click(obsidian, ui.playerTimestamp);
+		const captured = `First line${line}\nSecond line\n`;
+		expect(await eventually(obsidian, () => editorText(draft), captured)).toBe(captured);
+		await detachMarkdownTabs();
+		await waitForText(
+			draft,
+			(text) => text === captured,
+			"the capture saved as the tab closed",
+		);
+		await click(obsidian, ui.undo("Timestamp added to Closed draft"));
+
+		await waitForText(draft, (text) => text === original, "the draft as it was");
+		expect(await notices(obsidian)).not.toContainEqual(expect.stringContaining(REFUSED));
+	});
+
+	test("J-TS-18 Undo in the same moment the note's tab closes leaves the capture, and says so", async () => {
+		const { obsidian, sandbox } = getContext();
+		const journey = await setUp("Journey Undo Race");
+		const draft = sandbox.path("Race draft.md");
+		const original = "First line\nSecond line\n";
+		await writeVaultFile(obsidian, draft, original);
+		await playFromList(journey.show, ORIGINAL.title);
+		await writeIn(draft, 0, 10);
+		const line = capture(journey, ORIGINAL, (await pauseInView()).seconds);
+
+		await click(obsidian, ui.playerTimestamp);
+		const captured = `First line${line}\nSecond line\n`;
+		expect(await eventually(obsidian, () => editorText(draft), captured)).toBe(captured);
+		await obsidian.dev.evalJson(`(() => {
+			app.workspace.getLeavesOfType("markdown").find((leaf) => leaf.view.file?.path === ${jsLiteral(draft)}).detach();
+			[...document.querySelectorAll(".notice button.pn-undo")].at(-1).click();
+			return true;
+		})()`);
+
+		await obsidian.waitFor(async () => (await notices(obsidian)).includes(REFUSED), {
+			timeoutMs: 5_000,
+			intervalMs: 100,
+			message: "the Notice that Undo left the note",
+		});
+		await waitForText(
+			draft,
+			(text) => text === captured,
+			"the closing tab's save, with the capture",
+		);
+	});
+
+	test("J-TS-19 Undo leaves an episode note changed on disk before Obsidian read it again, and says so", async () => {
+		const { obsidian } = getContext();
+		const journey = await setUp("Journey Undo Stale");
+		const episodeNote = notePath(journey.show, ORIGINAL.title);
+		await detachMarkdownTabs();
+		await playFromList(journey.show, ORIGINAL.title);
+		const line = capture(journey, ORIGINAL, (await pauseInView()).seconds);
+
+		await click(obsidian, ui.playerTimestamp);
+		const created = await waitForText(
+			episodeNote,
+			(text) => text.endsWith(`\n${line}\n`),
+			"the capture in a new episode note",
+		);
+		const file = `app.vault.getAbstractFileByPath(${jsLiteral(episodeNote)})`;
+		expect(
+			await obsidian.dev.evalJsonAsync<string>(`app.vault.cachedRead(${file})`),
+			"Obsidian's cached text",
+		).toBe(created);
+		const newer = `External user edit\n${created}`;
+		// Written to the file and Undo clicked in one turn, before Obsidian's file watcher
+		// reports the change, so its cache still holds the text as the capture left it.
+		await obsidian.dev.evalJson(`(() => {
+			require("fs").writeFileSync(app.vault.adapter.getFullPath(${jsLiteral(episodeNote)}), ${jsLiteral(newer)});
+			[...document.querySelectorAll(".notice")]
+				.find((notice) => notice.textContent.startsWith("Created Original Title"))
+				.querySelector("button.pn-undo")
+				.click();
+			return true;
+		})()`);
+
+		await obsidian.waitFor(
+			async () =>
+				(await notices(obsidian)).includes(REFUSED) ||
+				(await readVaultText(obsidian, episodeNote)) !== newer,
+			{ timeoutMs: 5_000, intervalMs: 100, message: "Undo to answer" },
+		);
+		expect(await readVaultText(obsidian, episodeNote), "the newer text on disk").toBe(newer);
+		expect(await notices(obsidian)).toContain(REFUSED);
+	});
+
+	test("J-TS-14 Capture Timestamp with nothing loaded says to play an episode, and writes nothing", async () => {
+		const { obsidian, sandbox } = getContext();
+		const journey = await setUp("Journey Nothing Loaded");
+		const draft = sandbox.path("Nothing loaded.md");
+		await writeVaultFile(obsidian, draft, "Notes\n");
+		await showPodNotes(obsidian);
+		expect(await loadedEpisode()).toBeNull();
+		expect(await isShown(obsidian, ui.miniPlayer), "no mini player").toBe(false);
+		await writeIn(draft, 0, 5);
+
+		await runFromPalette(obsidian, "Capture Timestamp");
+
+		await obsidian.waitFor(
+			async () => (await notices(obsidian)).includes("Play an episode to capture"),
+			{ timeoutMs: 5_000, intervalMs: 100, message: "the Play an episode to capture Notice" },
+		);
+		expect(await editorText(draft)).toBe("Notes\n");
+		expect(await exists(notePath(journey.show, ORIGINAL.title))).toBe(false);
+	});
+
 	test("J-TS-09 Capture Timestamp lands in a popout editor, then in the episode note once the popout closes", async () => {
 		const { obsidian, sandbox } = getContext();
 		const journey = await setUp("Journey Popout");
diff --git a/tests/e2e/journey-player.test.ts b/tests/e2e/journey-player.test.ts
new file mode 100644
index 00000000..d522ea45
--- /dev/null
+++ b/tests/e2e/journey-player.test.ts
@@ -0,0 +1,340 @@
+import { describe, expect, onTestFinished, test } from "vitest";
+import { createPodNotesE2EHarness } from "./harness";
+import { closePodNotes, openInEditor, revealInFileExplorer, showPodNotes } from "./journey/actions";
+import { cdp, click, pointOn, pressKey, pressMouse } from "./journey/input";
+import { PLAYER_VIEW, ui, type UiTarget } from "./journey/targets";
+import { eventually, holdsFor, isShown, waitUntilFocused, waitUntilShown } from "./journey/wait";
+import {
+	type FixtureEpisode,
+	type FixtureFeed,
+	type FixtureServer,
+	pubDate,
+	startFixtureServer,
+	wav,
+} from "./journey/fixtures";
+import {
+	readLibrary,
+	recordWrites,
+	seedLibrary,
+	storedEpisode,
+	waitForPlayback,
+	writeVaultFile,
+} from "./journey/library";
+import { jsLiteral, VIEW_TYPE } from "./runtime";
+
+const getContext = createPodNotesE2EHarness("journey-player");
+
+const NOW: FixtureEpisode = { title: "Player Now", seconds: 60, pubDate: pubDate(0), guid: "now" };
+const QUEUED: FixtureEpisode[] = Array.from({ length: 30 }, (_, index) => ({
+	title: `Up Next ${index + 1}`,
+	seconds: 6,
+	pubDate: pubDate(index + 1),
+	guid: `up-next-${index + 1}`,
+}));
+const [ONE, TWO, THREE, FOUR] = QUEUED;
+const FEED: FixtureFeed = {
+	title: "Journey Player",
+	slug: "player",
+	artwork: true,
+	episodes: [NOW, ...QUEUED],
+};
+const titles = (episodes: readonly FixtureEpisode[]) => episodes.map(({ title }) => title);
+
+async function serve(): Promise<FixtureServer> {
+	const server = await startFixtureServer([FEED]);
+	onTestFinished(() => server.stop());
+	return server;
+}
+
+/** Restores `NOW` paused with `queue` queued, and shows PodNotes with the full player open. */
+async function openPlayer(
+	queue: readonly FixtureEpisode[],
+	current: (server: FixtureServer) => Record<string, unknown> = () => ({}),
+): Promise<FixtureServer> {
+	const context = getContext();
+	const server = await serve();
+	await seedLibrary(context, server, {
+		subscriptions: [FEED],
+		current: { ...storedEpisode(server, FEED, NOW), ...current(server) },
+		queue: queue.map((episode) => storedEpisode(server, FEED, episode)),
+	});
+	await showPodNotes(context.obsidian);
+	if (!(await isShown(context.obsidian, ui.fullPlayer)))
+		await click(context.obsidian, ui.openPlayer);
+	await waitUntilShown(context.obsidian, ui.fullPlayer);
+	return server;
+}
+
+async function resizeView(width: number, layout: "compact" | "wide"): Promise<void> {
+	const { obsidian } = getContext();
+	await obsidian.dev.evalJson(`app.workspace.rightSplit.setSize(${width}), true`);
+	await obsidian.waitFor(
+		() =>
+			obsidian.dev.evalJson<boolean>(
+				`document.querySelector(${jsLiteral(PLAYER_VIEW)}).classList.contains(${jsLiteral(`is-${layout}`)})`,
+			),
+		{ timeoutMs: 5_000, intervalMs: 100, message: `the ${layout} layout` },
+	);
+}
+
+type Box = Readonly<{ width: number; height: number }>;
+
+/** The video stage and the media element in it, or null when the stage shows no video. */
+async function videoStage(): Promise<{ frame: Box; video: Box } | null> {
+	return await getContext().obsidian.dev.evalJson(`(() => {
+		const frame = document.querySelector(${jsLiteral(`${PLAYER_VIEW} .pn-player .pn-video`)});
+		const video = frame?.querySelector("video.podnotes-media");
+		const box = (el) => {
+			const { width, height } = el.getBoundingClientRect();
+			return { width: Math.round(width), height: Math.round(height) };
+		};
+		return frame && video ? { frame: box(frame), video: box(video) } : null;
+	})()`);
+}
+
+async function expectVideoFrame(when: string, minWidth: number): Promise<void> {
+	const stage = await videoStage();
+	expect(stage, `${when}: the video on the stage`).not.toBeNull();
+	const { frame, video } = stage!;
+	expect(frame.width, `${when}: frame width`).toBeGreaterThanOrEqual(minWidth);
+	expect(
+		Math.abs(frame.height - (frame.width * 9) / 16),
+		`${when}: a 16:9 frame, ${frame.width} by ${frame.height}`,
+	).toBeLessThanOrEqual(1);
+	expect(video, `${when}: the video fills its frame`).toEqual(frame);
+}
+
+/** The titles in the player's Up next panel, in order. */
+async function upNext(): Promise<string[]> {
+	return await getContext().obsidian.dev.evalJson<string[]>(
+		`[...document.querySelectorAll(${jsLiteral(`${PLAYER_VIEW} .pn-player .pn-queue .pn-ep-title`)})].map((el) => el.textContent.trim())`,
+	);
+}
+
+async function expectQueue(expected: readonly string[]): Promise<void> {
+	const { obsidian, plugin } = getContext();
+	expect(await eventually(obsidian, upNext, expected), "in Up next").toEqual(expected);
+	expect(
+		await eventually(obsidian, async () => (await readLibrary(plugin)).queue, expected),
+		"in data.json",
+	).toEqual(expected);
+}
+
+const focused = (target: UiTarget) =>
+	getContext().obsidian.dev.evalJson<boolean>(
+		`(${target.elements}).includes(document.activeElement)`,
+	);
+
+describe("player journeys", () => {
+	test("a video with a long queue keeps its 16:9 frame, compact and wide, and after a panel covered it", async () => {
+		const { obsidian } = getContext();
+		await openPlayer(QUEUED, () => ({ mediaType: "video" }));
+		await click(obsidian, ui.playbackToggle);
+		await waitForPlayback(
+			obsidian,
+			(playback) => playback.playing && playback.seconds > 0.5,
+			"the video playing",
+		);
+
+		await resizeView(320, "compact");
+		await expectVideoFrame("compact", 250);
+		await click(obsidian, ui.playerPanel("Up next"));
+		expect(await eventually(obsidian, upNext, titles(QUEUED))).toEqual(titles(QUEUED));
+		expect(await videoStage(), "Up next covers the stage").toBeNull();
+		await click(obsidian, ui.playerPanel("Up next"));
+		await expectVideoFrame("compact, after Up next", 250);
+
+		await resizeView(820, "wide");
+		expect(await eventually(obsidian, upNext, titles(QUEUED)), "Up next beside it").toEqual(
+			titles(QUEUED),
+		);
+		await expectVideoFrame("wide, beside 30 queued episodes", 300);
+		await waitForPlayback(
+			obsidian,
+			(playback) => playback.playing && playback.media?.paused === false,
+			"the video still playing",
+		);
+	});
+
+	test("Up next reorders the queue in place, writing data.json once per completed move", async () => {
+		const { obsidian } = getContext();
+		await openPlayer([ONE, TWO, THREE, FOUR]);
+		await click(obsidian, ui.playerPanel("Up next"));
+		await waitUntilShown(obsidian, ui.queueGrip(ONE.title));
+		const writes = await recordWrites(obsidian);
+
+		const mouse = await pressMouse(obsidian, await pointOn(obsidian, ui.queueGrip(ONE.title)));
+		for (const [row, shown] of [
+			[TWO, [TWO, ONE, THREE, FOUR]],
+			[THREE, [TWO, THREE, ONE, FOUR]],
+		] as const) {
+			await mouse.moveTo(await pointOn(obsidian, ui.queueRow(row.title), "bottom"), 4);
+			// Long enough for a save the crossing started to finish.
+			expect(await holdsFor(obsidian, upNext, titles(shown), 1000)).toEqual(titles(shown));
+		}
+		await mouse.release();
+		await expectQueue(titles([TWO, THREE, ONE, FOUR]));
+
+		await click(obsidian, ui.queueGrip(FOUR.title));
+		await pressKey(obsidian, "ArrowUp");
+		await expectQueue(titles([TWO, THREE, FOUR, ONE]));
+		expect(await writes.stop()).toMatchObject({
+			attempted: 2,
+			completed: 2,
+			failed: 0,
+			intact: true,
+		});
+		expect(await isShown(obsidian, ui.fullPlayer), "the player stays open").toBe(true);
+	});
+
+	test("#394 a local file shows its file tile, not a broken image, in the player and the mini player", async () => {
+		const context = getContext();
+		const { obsidian, sandbox } = context;
+		await seedLibrary(context, null);
+		await obsidian.plugin("file-explorer").enable({ filter: "core" });
+		const audioPath = sandbox.path("Tile Lecture.wav");
+		await writeVaultFile(obsidian, audioPath, wav(30));
+		await closePodNotes(obsidian);
+
+		await revealInFileExplorer(obsidian, audioPath);
+		await click(obsidian, ui.fileExplorerItem(audioPath), { button: "right" });
+		await click(obsidian, ui.menuItem("Play with PodNotes"));
+		await waitForPlayback(
+			obsidian,
+			(playback) => playback.episode?.title === "Tile Lecture" && playback.seconds > 0,
+			"the local file playing",
+		);
+		if (!(await isShown(obsidian, ui.fullPlayer))) await click(obsidian, ui.openPlayer);
+		await waitUntilShown(obsidian, ui.fullPlayer);
+
+		const artwork = (where: string) =>
+			obsidian.dev.evalJson<{
+				images: number;
+				broken: number;
+				tile: { icon: string | null; width: number; height: number } | null;
+			}>(`(() => {
+				const root = document.querySelector(${jsLiteral(`.workspace-leaf-content[data-type="${VIEW_TYPE}"] ${where}`)});
+				const images = [...root.querySelectorAll("img")];
+				const tile = root.querySelector(".pn-filetile");
+				const box = tile?.getBoundingClientRect();
+				return {
+					images: images.length,
+					broken: images.filter((img) => img.complete && img.naturalWidth === 0).length,
+					tile: tile && { icon: tile.querySelector("svg")?.getAttribute("class") ?? null, width: Math.round(box.width), height: Math.round(box.height) },
+				};
+			})()`);
+		const player = await artwork(".pn-player .pn-stage");
+		expect(player).toMatchObject({ images: 0, broken: 0 });
+		expect(player.tile?.icon).toContain("lucide-music");
+		expect(player.tile?.width, "the tile has the artwork's size").toBeGreaterThanOrEqual(200);
+		expect(player.tile?.height).toBe(player.tile?.width);
+
+		await click(obsidian, ui.collapsePlayer);
+		await waitUntilShown(obsidian, ui.miniPlayer);
+		const mini = await artwork(".pn-mini");
+		expect(mini).toMatchObject({ images: 0, broken: 0 });
+		expect(mini.tile?.icon).toContain("lucide-music");
+		expect(mini.tile?.width).toBe(mini.tile?.height);
+	});
+
+	test("a media error offers Retry in place of the artwork and turns the transport off", async () => {
+		const { obsidian } = getContext();
+		await openPlayer([ONE], (server) => ({
+			streamUrl: `${server.mediaUrl(FEED, NOW)}.missing`,
+		}));
+		const state = () =>
+			obsidian.dev.evalJson<{
+				alert: string;
+				retry: boolean;
+				transportOff: boolean[];
+			}>(`(() => {
+				const player = document.querySelector(${jsLiteral(`${PLAYER_VIEW} section.pn-player`)});
+				return {
+					alert: player.querySelector('[role="alert"] > span:not(:has(svg))')?.textContent.trim() ?? "",
+					retry: [...player.querySelectorAll("button")].some((button) => button.textContent.trim() === "Retry" && !button.disabled),
+					transportOff: [...player.querySelectorAll(".pn-transport button")].map((button) => button.disabled),
+				};
+			})()`);
+		expect(await state(), "before the load").toEqual({
+			alert: "",
+			retry: false,
+			transportOff: [false, false, false, false, false],
+		});
+
+		await click(obsidian, ui.playbackToggle);
+
+		const failed = {
+			alert: "Could not load this episode's media.",
+			retry: true,
+			transportOff: [true, true, true, true, true],
+		};
+		expect(await eventually(obsidian, state, failed, 10_000)).toEqual(failed);
+	});
+
+	test("Space pauses and plays with the focus on the player's text, and the podcast's name opens its page", async () => {
+		const { obsidian } = getContext();
+		await openPlayer([ONE]);
+		await click(obsidian, ui.playbackToggle);
+		await waitForPlayback(obsidian, (playback) => playback.seconds > 0.5, "playing");
+
+		await click(obsidian, ui.playerTitle);
+		expect(
+			await obsidian.dev.evalJson<string>(
+				'document.activeElement.closest("button, input, a, [role=slider]")?.outerHTML ?? "none"',
+			),
+			"the focused control",
+		).toBe("none");
+		await pressKey(obsidian, "Space");
+		await waitForPlayback(obsidian, (playback) => !playback.playing, "paused by Space");
+		await pressKey(obsidian, "Space");
+		await waitForPlayback(obsidian, (playback) => playback.playing, "playing again by Space");
+
+		await click(obsidian, ui.playerPodcast);
+		await waitUntilShown(obsidian, ui.podcastPage(FEED.title));
+		expect(await isShown(obsidian, ui.fullPlayer), "the player collapsed").toBe(false);
+	});
+
+	test("Escape closes the episode menu, then the volume slider, then the player, with a note open beside it", async () => {
+		const { obsidian, sandbox } = getContext();
+		const note = sandbox.path("Beside the player.md");
+		await writeVaultFile(obsidian, note, "A note in the main area\n");
+		await openInEditor(obsidian, note);
+		await openPlayer([ONE]);
+		await click(obsidian, ui.playerVolume);
+		await waitUntilShown(obsidian, ui.volumeSlider);
+		// Tab to the menu button, which leaves the slider open; a click outside would close it.
+		await obsidian.dev.evalJson(
+			`(${ui.playerControl("Episode options").elements})[0].focus(), true`,
+		);
+		// A key press activates a button only with the text it types.
+		const enter = { key: "Enter", code: "Enter", windowsVirtualKeyCode: 13 };
+		await cdp(obsidian, "Input.dispatchKeyEvent", { type: "keyDown", text: "\r", ...enter });
+		await cdp(obsidian, "Input.dispatchKeyEvent", { type: "keyUp", ...enter });
+		await waitUntilShown(obsidian, ui.menuItem("Add to queue"));
+
+		await pressKey(obsidian, "Escape");
+		expect(
+			await eventually(obsidian, () => isShown(obsidian, ui.menuItem("Add to queue")), false),
+		).toBe(false);
+		expect(
+			await holdsFor(obsidian, () => isShown(obsidian, ui.fullPlayer), true, 1000),
+			"the player stays open after the menu closes",
+		).toBe(true);
+		expect(await isShown(obsidian, ui.volumeSlider), "the slider stays open").toBe(true);
+		expect(await focused(ui.playerControl("Episode options"))).toBe(true);
+
+		await pressKey(obsidian, "Escape");
+		expect(await eventually(obsidian, () => isShown(obsidian, ui.volumeSlider), false)).toBe(
+			false,
+		);
+		expect(await holdsFor(obsidian, () => isShown(obsidian, ui.fullPlayer), true, 500)).toBe(
+			true,
+		);
+		await waitUntilFocused(obsidian, ui.playerVolume);
+
+		await pressKey(obsidian, "Escape");
+		await waitUntilShown(obsidian, ui.miniPlayer);
+		expect(await isShown(obsidian, ui.fullPlayer)).toBe(false);
+		await waitUntilFocused(obsidian, ui.openPlayer);
+	});
+});
diff --git a/tests/e2e/journey/actions.ts b/tests/e2e/journey/actions.ts
index 5ea8e732..19f4bed1 100644
--- a/tests/e2e/journey/actions.ts
+++ b/tests/e2e/journey/actions.ts
@@ -126,7 +126,7 @@ export async function dismissNotice(obsidian: ObsidianClient, message: string):
 		async () => {
 			const sample = await obsidian.dev.evalJson<Point | null>(`(() => {
 				const notice = [...document.querySelectorAll(".notice")].find((el) => el.textContent.trim().startsWith(${jsLiteral(message)}));
-				const body = notice?.querySelector(".notice-message") ?? notice;
+				const body = notice?.querySelector(".pn-undo-message") ?? notice?.querySelector(".notice-message") ?? notice;
 				const text = body && [...body.childNodes].find((node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim());
 				if (!text) return null;
 				const range = document.createRange();
diff --git a/tests/e2e/journey/input.ts b/tests/e2e/journey/input.ts
index 3ebee9fa..b3b63dea 100644
--- a/tests/e2e/journey/input.ts
+++ b/tests/e2e/journey/input.ts
@@ -194,14 +194,17 @@ export async function typeText(obsidian: ObsidianClient, text: string): Promise<
 	await cdp(obsidian, "Input.insertText", { text });
 }
 
-const KEY_CODES = { Enter: 13, Escape: 27, ArrowUp: 38, ArrowDown: 40 } as const;
+const KEYS = {
+	Enter: { key: "Enter", windowsVirtualKeyCode: 13 },
+	Escape: { key: "Escape", windowsVirtualKeyCode: 27 },
+	ArrowUp: { key: "ArrowUp", windowsVirtualKeyCode: 38 },
+	ArrowDown: { key: "ArrowDown", windowsVirtualKeyCode: 40 },
+	Space: { key: " ", windowsVirtualKeyCode: 32, text: " " },
+} as const;
 
-/** Presses and releases `key` on whatever has focus. */
-export async function pressKey(
-	obsidian: ObsidianClient,
-	key: keyof typeof KEY_CODES,
-): Promise<void> {
-	const event = { key, code: key, windowsVirtualKeyCode: KEY_CODES[key] };
+/** Presses and releases the key with this `code` on whatever has focus. */
+export async function pressKey(obsidian: ObsidianClient, code: keyof typeof KEYS): Promise<void> {
+	const event = { code, ...KEYS[code] };
 	await cdp(obsidian, "Input.dispatchKeyEvent", { type: "keyDown", ...event });
 	await cdp(obsidian, "Input.dispatchKeyEvent", { type: "keyUp", ...event });
 }
diff --git a/tests/e2e/journey/targets.ts b/tests/e2e/journey/targets.ts
index 0edd9b6b..6d9a450d 100644
--- a/tests/e2e/journey/targets.ts
+++ b/tests/e2e/journey/targets.ts
@@ -36,6 +36,7 @@ export const ui = {
 	libraryHead: byCss("Library page", `${PLAYER_VIEW} h1.pn-head-title`, "Library"),
 	pageTitle: (title: string) =>
 		byCss(`${title} page`, `${PLAYER_VIEW} :is(h1.pn-head-title, .pn-title h1)`, title),
+	podcastPage: (title: string) => byCss(`${title}'s page`, `${PLAYER_VIEW} .pn-hero h1`, title),
 	back: byCss("Back button", `${PLAYER_VIEW} .pn-head button[aria-label^="Back to "]`),
 	backTo: (label: string) =>
 		byAttribute(`Back to ${label}`, `${PLAYER_VIEW} button`, "aria-label", `Back to ${label}`),
@@ -74,7 +75,7 @@ export const ui = {
 		),
 	episode: (title: string): UiTarget => ({
 		name: `episode ${title}`,
-		elements: `[...document.querySelectorAll(${jsLiteral(`${PLAYER_VIEW} .pn-ep-main`)})].filter((el) => !el.closest(".episode-player") && el.querySelector(".pn-ep-title")?.textContent.trim() === ${jsLiteral(title)})`,
+		elements: `[...document.querySelectorAll(${jsLiteral(`${PLAYER_VIEW} .pn-ep-main`)})].filter((el) => !el.closest(".pn-player") && el.querySelector(".pn-ep-title")?.textContent.trim() === ${jsLiteral(title)})`,
 	}),
 	episodeLoading: byCss(
 		"episode list loading",
@@ -95,8 +96,42 @@ export const ui = {
 			label,
 		),
 	playbackToggle: byCss(
-		"on-screen playback toggle",
-		`${PLAYER_VIEW} .episode-player button[aria-label="Toggle playback"]`,
+		"full player's play/pause",
+		`${PLAYER_VIEW} section.pn-player button.pn-play`,
+	),
+	playerControl: (label: string) =>
+		byAttribute(
+			`full player's ${label}`,
+			`${PLAYER_VIEW} section.pn-player button`,
+			"aria-label",
+			label,
+		),
+	playerTitle: byCss("full player's title", `${PLAYER_VIEW} section.pn-player h2.pn-np-title`),
+	playerPodcast: byCss(
+		"full player's podcast link",
+		`${PLAYER_VIEW} section.pn-player button.pn-np-pod`,
+	),
+	playerVolume: byCss("full player's volume", `${PLAYER_VIEW} section.pn-player button.pn-vol`),
+	/** It reads Timestamp, then Added for a moment after a capture. */
+	playerTimestamp: byCss(
+		"full player's Timestamp",
+		`${PLAYER_VIEW} section.pn-player button.pn-cap.mod-cta`,
+	),
+	volumeSlider: byCss(
+		"volume slider",
+		`${PLAYER_VIEW} section.pn-player input[type="range"][aria-label="Volume"]`,
+	),
+	playerPanel: (name: string) =>
+		byCss(
+			`player panel ${name}`,
+			`${PLAYER_VIEW} section.pn-player :is(.pn-sw, .pn-tab)`,
+			name,
+		),
+	miniCapture: byAttribute(
+		"mini player's Capture timestamp",
+		`${PLAYER_VIEW} section.pn-mini button`,
+		"aria-label",
+		"Capture timestamp",
 	),
 	episodeMenu: (title: string) =>
 		byAttribute(
diff --git a/tests/e2e/journey/wait.ts b/tests/e2e/journey/wait.ts
index e9fbc74b..561454a4 100644
--- a/tests/e2e/journey/wait.ts
+++ b/tests/e2e/journey/wait.ts
@@ -40,7 +40,7 @@ export async function waitUntilShown(
 
 export async function listedEpisodes(obsidian: ObsidianClient): Promise<string[]> {
 	return await obsidian.dev.evalJson<string[]>(
-		`[...document.querySelectorAll(${jsLiteral(`${PLAYER_VIEW} .pn-ep-main`)})].filter((el) => !el.closest(".episode-player") && el.getClientRects().length > 0).map((el) => el.querySelector(".pn-ep-title")?.textContent.trim() ?? "")`,
+		`[...document.querySelectorAll(${jsLiteral(`${PLAYER_VIEW} .pn-ep-main`)})].filter((el) => !el.closest(".pn-player") && el.getClientRects().length > 0).map((el) => el.querySelector(".pn-ep-title")?.textContent.trim() ?? "")`,
 	);
 }
 
diff --git a/tests/e2e/podnotes-runtime.test.ts b/tests/e2e/podnotes-runtime.test.ts
index 993fad4a..8c131141 100644
--- a/tests/e2e/podnotes-runtime.test.ts
+++ b/tests/e2e/podnotes-runtime.test.ts
@@ -294,7 +294,7 @@ describe("PodNotes runtime", () => {
 		expect(rate).toMatchObject({
 			api: 1.5,
 			audio: 1.5,
-			slider: "1.5",
+			pill: "1.5×",
 		});
 	});
 
@@ -1117,12 +1117,12 @@ async function getLevels(obsidian: {
 	`);
 }
 
-/** The rate as the API, the media element, the rate label and the rate slider show it. */
+/** The rate as the API, the media element and the full player's rate pill show it. */
 type PlaybackRates = {
 	api: number | null;
 	audio: number | null;
-	label: string | null;
-	slider: string | null;
+	pill: string | null;
+	name: string | null;
 };
 
 async function waitForPlaybackRate(
@@ -1133,19 +1133,18 @@ async function waitForPlaybackRate(
 	expected: number,
 ): Promise<PlaybackRates> {
 	const startedAt = Date.now();
-	let lastRate: PlaybackRates = { api: null, audio: null, label: null, slider: null };
+	let lastRate: PlaybackRates = { api: null, audio: null, pill: null, name: null };
 
 	while (Date.now() - startedAt < WAIT_OPTS.timeoutMs) {
 		lastRate = await obsidian.dev.evalJson<PlaybackRates>(`
 			(() => {
 				const audio = document.querySelector("audio.podnotes-media");
-				const label = document.querySelector(".playbackrate-container span");
-				const slider = document.querySelector(".playbackrate-container input");
+				const pill = document.querySelector(".pn-player button.pn-rate");
 				return {
 					api: app.plugins.plugins.${PLUGIN_ID}?.api?.playbackRate ?? null,
 					audio: audio?.playbackRate ?? null,
-					label: label?.textContent ?? null,
-					slider: slider?.value ?? null,
+					pill: pill?.textContent ?? null,
+					name: pill?.getAttribute("aria-label") ?? null,
 				};
 			})()
 		`);
@@ -1153,8 +1152,8 @@ async function waitForPlaybackRate(
 		if (
 			lastRate.api === expected &&
 			lastRate.audio === expected &&
-			lastRate.label === `${expected}x` &&
-			lastRate.slider === String(expected)
+			lastRate.pill === `${expected}×` &&
+			lastRate.name === `Playback speed ${expected}x`
 		) {
 			return lastRate;
 		}
diff --git a/tests/e2e/synced-progress-handoff.test.ts b/tests/e2e/synced-progress-handoff.test.ts
index b2394a15..e7fde7d4 100644
--- a/tests/e2e/synced-progress-handoff.test.ts
+++ b/tests/e2e/synced-progress-handoff.test.ts
@@ -84,11 +84,11 @@ for (const [action, expected] of Object.entries(SAVED_AFTER)) {
 			.poll(
 				() =>
 					obsidian.dev.evalJson<string>(
-						'document.querySelector(".episode-player .status-container")?.textContent',
+						'document.querySelector(".pn-player .pn-times span")?.textContent',
 					),
 				POLL,
 			)
-			.toContain("00:00:45");
+			.toBe("0:45");
 		await click(obsidian, ui.collapsePlayer);
 		expect(
 			await obsidian.dev.evalJson<string>(
diff --git a/tests/mocks/EpisodePlayerStub.svelte b/tests/mocks/EpisodePlayerStub.svelte
deleted file mode 100644
index 988477c6..00000000
--- a/tests/mocks/EpisodePlayerStub.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<script lang="ts">
-</script>
-
-<div data-testid="episode-player-stub"></div>
diff --git a/tests/mocks/obsidian.ts b/tests/mocks/obsidian.ts
index 8e06b7d9..4aa2f8cf 100644
--- a/tests/mocks/obsidian.ts
+++ b/tests/mocks/obsidian.ts
@@ -560,13 +560,21 @@ export const MarkdownRenderer = {
 };
 
 export class MenuItem {
-	setIcon() {
+	title = "";
+	icon: string | null = null;
+	checked: boolean | null = null;
+	callback: (() => void) | null = null;
+
+	setIcon(icon: string | null) {
+		this.icon = icon;
 		return this;
 	}
-	setTitle() {
+	setTitle(title: string) {
+		this.title = title;
 		return this;
 	}
-	setChecked(_checked: boolean | null) {
+	setChecked(checked: boolean | null) {
+		this.checked = checked;
 		return this;
 	}
 	setWarning(_warning: boolean) {
@@ -575,24 +583,65 @@ export class MenuItem {
 	setDisabled(_disabled: boolean) {
 		return this;
 	}
-	onClick(_callback: () => void) {
+	onClick(callback: () => void) {
+		this.callback = callback;
 		return this;
 	}
 }
 
 export class Menu {
+	/** Test only: the menu on screen, until it hides. */
+	static shown: Menu | null = null;
+	items: Array<MenuItem | "separator"> = [];
+	private hideCallback: (() => unknown) | null = null;
+
 	addItem(callback: (item: MenuItem) => void) {
-		callback(new MenuItem());
+		const item = new MenuItem();
+		this.items.push(item);
+		callback(item);
 		return this;
 	}
 
 	addSeparator() {
+		this.items.push("separator");
 		return this;
 	}
 
-	showAtMouseEvent() {}
+	onHide(callback: () => unknown) {
+		this.hideCallback = callback;
+	}
+
+	showAtMouseEvent() {
+		Menu.shown = this;
+		return this;
+	}
 
-	showAtPosition() {}
+	showAtPosition() {
+		Menu.shown = this;
+		return this;
+	}
+
+	hide() {
+		if (Menu.shown === this) Menu.shown = null;
+		const callback = this.hideCallback;
+		this.hideCallback = null;
+		callback?.();
+		return this;
+	}
+
+	close() {
+		this.hide();
+	}
+
+	/** Test only: as Obsidian, runs the item, then hides the menu. */
+	pick(title: string) {
+		const item = this.items.find(
+			(entry): entry is MenuItem => entry !== "separator" && entry.title === title,
+		);
+		if (!item) throw new Error(`No menu item ${title}`);
+		item.callback?.();
+		this.hide();
+	}
 }
 
 export const debounce = <T extends (...args: unknown[]) => unknown>(fn: T) => {