From 58b767d709f5d53bc5a0313a400625349e169cb8 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 13 Oct 2026 22:50:37 +0200
Subject: [PATCH 01/30] test(verify): shoot the player states for the v3 pixel
 pass

screens.mjs gains ten player states: now-playing, mini-player, capture,
chapters, up-next, up-next-empty, no-chapters, video, local-player and
media-error, and `set player <label>` runs them. A player state plays the
scene's episode until its media loads, pauses it at a fixed second, saves
it there and opens the full player. capture, chapters and the two up-next
states press the full player's button by its exact text, so they fail at
once on a player without it. `set player` and `set all` go on past a
failed state and fail at the end. seed deletes episode notes, so a
capture cannot change a later state's shots.

fixtures.mjs serves each library episode as silence as long as its feed
says, streamed so an hour costs no memory. #213 carries the prototype's
eight JSON chapters, and Signal & Noise gains a 10 s H.264 test pattern
that ffmpeg makes on first request and an episode whose media answers 404.

ui.mjs gains --exact, so "Chapters" does not also match "Chapters (8)".
---
 .claude/skills/verify/SKILL.md     |  35 ++--
 .claude/skills/verify/fixtures.mjs | 239 ++++++++++++++++++++------
 .claude/skills/verify/screens.mjs  | 262 ++++++++++++++++++++++++++---
 .claude/skills/verify/ui.mjs       |  12 +-
 4 files changed, 455 insertions(+), 93 deletions(-)

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/fixtures.mjs b/.claude/skills/verify/fixtures.mjs
index 0df02eff..73d6a25b 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,30 @@ 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;
+				videos[file] = () => (made ??= testPattern(seconds));
+			} 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 +531,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 +561,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 +573,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..982de964 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,19 @@
 //         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.
 import { execFileSync } from "node:child_process";
 import fs from "node:fs";
 import os from "node:os";
@@ -78,7 +88,40 @@ 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.
+ */
+
+/** 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 +170,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 toast, which has to outlast the shot.
+	capture: { ...FULL_PLAYER, note: true, press: "Timestamp", text: () => "Timestamp added" },
+	// #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 +252,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 +290,6 @@ const PLAYLISTS = [
 		],
 	},
 ];
-/** @type {[string, string]} */
-const NOW_PLAYING = ["Field Notes", "#213"];
 /** @type {[string, string][]} */
 const DOWNLOADS = [
 	["Field Notes", "#213"],
@@ -425,13 +522,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 +586,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 +673,26 @@ 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(`
 		await app.plugins.disablePlugin("podnotes");
 		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 +714,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"]);
@@ -821,11 +1008,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 +1025,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,6 +1041,8 @@ 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();
+				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);
 				row.push({ file, caption: `${width} ${name} ${label}` });
@@ -886,9 +1084,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)

From 2a86891f63cd471d59afad7b520d5953496f6ec7 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 13 Oct 2026 22:58:13 +0200
Subject: [PATCH 02/30] test(verify): wait for PodNotes' unload save before
 seeding

disablePlugin resolves before the save PodNotes starts on unload, and
that save merges its unsaved edits into data.json. seed wrote the next
scene in that window, so a late save could carry the previous state's
feeds or progress into it. seed now awaits flushSaves() on the disabled
instance, which resolves once the unload save is done.
---
 .claude/skills/verify/screens.mjs | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.claude/skills/verify/screens.mjs b/.claude/skills/verify/screens.mjs
index 982de964..2276afbc 100644
--- a/.claude/skills/verify/screens.mjs
+++ b/.claude/skills/verify/screens.mjs
@@ -685,7 +685,10 @@ async function seed(scene, extra) {
 		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);
 		}

From f9281342d0a1487c0a311ea7e1811ce23fbd4887 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 13 Oct 2026 23:05:13 +0200
Subject: [PATCH 03/30] fix(player): keep quarter playback rates and share the
 skip length rule

normalizePlaybackRate rounded to tenths, so 0.75, 1.25 and 1.75 became
0.8, 1.3 and 1.8. It now rounds to hundredths; the rate commands still
step by 0.1. normalizeSkipLength moves from the API to src/utility so the
player can label its skip buttons with the same rule.

size: 98,241 gzip (+2 vs master 98,239)
---
 src/API/API.ts                   |  9 +--------
 src/utility/playbackRate.test.ts | 21 +++++++++++++++++++++
 src/utility/playbackRate.ts      |  9 +++++----
 src/utility/skipLength.ts        |  7 +++++++
 4 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 src/utility/playbackRate.test.ts
 create mode 100644 src/utility/skipLength.ts

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/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;

From 88c1cc3d8b4f234e14515ece5cfd130330b696a3 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 13 Oct 2026 23:07:40 +0200
Subject: [PATCH 04/30] refactor(ui): make the Queue page's list a shared
 QueueList

QueuePage becomes QueueList with an empty label, so the player's Up next
panel can render the same keyed rows and the same one-write drag. A drag
now cancels on Escape through a scope it pushes for its lifetime: inside
the full player, the player's scope takes Escape before a window listener
could hear it. The grip carries data-ignore-swipe, so on a phone a
downward drag starts none of Obsidian's swipe gestures.

size: 98,298 gzip (+59 vs master 98,239)
---
 src/ui/PodcastView/PodcastView.svelte         |  4 +--
 .../{QueuePage.svelte => QueueList.svelte}    | 20 +++++++++-----
 .../{QueuePage.test.ts => QueueList.test.ts}  | 26 ++++++++++++++-----
 src/ui/PodcastView/QueueRow.svelte            |  2 ++
 4 files changed, 37 insertions(+), 15 deletions(-)
 rename src/ui/PodcastView/{QueuePage.svelte => QueueList.svelte} (90%)
 rename src/ui/PodcastView/{QueuePage.test.ts => QueueList.test.ts} (94%)

diff --git a/src/ui/PodcastView/PodcastView.svelte b/src/ui/PodcastView/PodcastView.svelte
index dca302bc..8c441f2c 100644
--- a/src/ui/PodcastView/PodcastView.svelte
+++ b/src/ui/PodcastView/PodcastView.svelte
@@ -23,7 +23,7 @@
 	import { activeRoot, headFor, pageExists, pageKey, type RootCounts } from "./pages";
 	import PlayerOverlay from "./PlayerOverlay.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}
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"

From bede92920eb2cbc4cb1f5f80212889d88f9760dd Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 13 Oct 2026 23:11:16 +0200
Subject: [PATCH 05/30] refactor(ui): give menus their trigger, a rate menu and
 a note entry

A menu now knows the control that opened it. Focus goes back there before
a picked item runs, so an item that opens a note keeps the focus it sets,
or when the menu closes with nothing picked, so the next Escape reaches
the view. rateMenu offers 0.75 to 2 with the live rate checked, and
noteEntry is the episode menu's Open note or Create note, for the player's
capture bar to share. The Menu mock keeps its items and can pick or close.

size: 98,347 gzip (+108 vs master 98,239)
---
 src/ui/PodcastView/LibraryPage.test.ts |  5 +-
 src/ui/PodcastView/ListPage.test.ts    | 10 +++-
 src/ui/PodcastView/menus.test.ts       | 82 ++++++++++++++++++++++++--
 src/ui/PodcastView/menus.ts            | 64 +++++++++++++++-----
 tests/mocks/obsidian.ts                | 63 +++++++++++++++++---
 5 files changed, 192 insertions(+), 32 deletions(-)

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/menus.test.ts b/src/ui/PodcastView/menus.test.ts
index e344bad1..9f176035 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,77 @@ 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();
 	});
+
+	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..98bf943c 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,68 @@ 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(() => {
+		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): MenuEntry {
+	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 +194,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/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) => {

From 2804fab716ce76188fa6ea72f97265107f116510 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 13 Oct 2026 23:20:16 +0200
Subject: [PATCH 06/30] fix(ui): show seconds when less than a minute is left

Rows, the mini player and list totals rounded anything under a minute up
to "1 min", so a nearly finished episode read "1 min left" with seconds
of audio remaining. Under a minute they now show seconds, such as
"45 s left".
---
 src/ui/PodcastView/PodcastView.shell.test.ts | 5 +++++
 src/ui/PodcastView/episodeRow.test.ts        | 7 +++++--
 src/ui/PodcastView/episodeRow.ts             | 3 ++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/ui/PodcastView/PodcastView.shell.test.ts b/src/ui/PodcastView/PodcastView.shell.test.ts
index c28706e8..17692bcd 100644
--- a/src/ui/PodcastView/PodcastView.shell.test.ts
+++ b/src/ui/PodcastView/PodcastView.shell.test.ts
@@ -552,6 +552,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/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..7093d7a9 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`;
 }
 

From 11bc4bc168a6272dc608b5eba52358f40dbccedf Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 13 Oct 2026 23:30:26 +0200
Subject: [PATCH 07/30] feat(ui): replace the legacy player with the v3 now
 playing screen

The full player is one Player component: a head with collapse and the
episode menu; a stage with the artwork, a file tile for a local file or
artwork that fails to load (#394), the video with fullscreen, the media
error with Retry, or a panel at compact widths; and a deck with the
title, the podcast or folder link, a chaptered Scrubber, the current
chapter, a rate pill menu, skip buttons labeled with the configured
lengths, play and pause, a volume popover, Timestamp and Create or Open
note (#347), and the Chapters and Up next switch. Wide views put the
panels in a right column with tabs. Up next is the shared QueueList, so
it reorders in place with one write per move. Escape closes the volume
popover before the player, and Space plays and pauses off controls.

EpisodePlayer, PlayerOverlay, ChapterList, Loading, the obsidian Button,
Icon and Slider wrappers, Progressbar, Image and their helpers go. The
e2e targets and the verify skill's player notes follow the new markup.

size: 97,980 gzip (-259 vs master 98,239)
---
 .claude/skills/verify/features/player.md      |  20 +-
 src/main.activateView.test.ts                 |   1 +
 src/types/CSSObject.ts                        |   3 -
 src/ui/PodcastView/ChapterList.svelte         | 155 ---
 src/ui/PodcastView/ChapterList.test.ts        |  88 --
 src/ui/PodcastView/ChaptersPanel.svelte       |  99 ++
 src/ui/PodcastView/EpisodePlayer.svelte       | 580 ------------
 src/ui/PodcastView/EpisodePlayer.test.ts      | 215 -----
 src/ui/PodcastView/Loading.svelte             |  72 --
 src/ui/PodcastView/MiniPlayer.svelte          |  12 +-
 src/ui/PodcastView/Player.svelte              | 879 ++++++++++++++++++
 src/ui/PodcastView/Player.test.ts             | 444 +++++++++
 src/ui/PodcastView/PlayerOverlay.svelte       | 107 ---
 .../PodcastView.integration.test.ts           |   5 -
 src/ui/PodcastView/PodcastView.svelte         |  84 +-
 src/ui/PodcastView/Scrubber.svelte            | 164 ++++
 src/ui/PodcastView/Scrubber.test.ts           |  92 ++
 src/ui/PodcastView/UpNextPanel.svelte         |  29 +
 src/ui/PodcastView/chapters.test.ts           |  35 +
 src/ui/PodcastView/chapters.ts                |  29 +
 src/ui/PodcastView/episodeRow.ts              |   5 +
 src/ui/PodcastView/menus.ts                   |   5 +-
 src/ui/common/Image.svelte                    |  58 --
 src/ui/common/Image.test.ts                   |  50 -
 src/ui/common/Progressbar.svelte              | 131 ---
 src/ui/common/Progressbar.test.ts             |  58 --
 .../__tests__/ImageFallbackHarness.svelte     |  14 -
 src/ui/obsidian/Button.svelte                 |  61 --
 src/ui/obsidian/Icon.svelte                   |  93 --
 src/ui/obsidian/Slider.svelte                 |  74 --
 src/utility/extractStylesFromObj.ts           |   7 -
 tests/e2e/harness.ts                          |   2 +-
 tests/e2e/journey/targets.ts                  |   6 +-
 tests/e2e/journey/wait.ts                     |   2 +-
 tests/e2e/podnotes-runtime.test.ts            |  21 +-
 tests/mocks/EpisodePlayerStub.svelte          |   4 -
 36 files changed, 1889 insertions(+), 1815 deletions(-)
 delete mode 100644 src/types/CSSObject.ts
 delete mode 100644 src/ui/PodcastView/ChapterList.svelte
 delete mode 100644 src/ui/PodcastView/ChapterList.test.ts
 create mode 100644 src/ui/PodcastView/ChaptersPanel.svelte
 delete mode 100644 src/ui/PodcastView/EpisodePlayer.svelte
 delete mode 100644 src/ui/PodcastView/EpisodePlayer.test.ts
 delete mode 100644 src/ui/PodcastView/Loading.svelte
 create mode 100644 src/ui/PodcastView/Player.svelte
 create mode 100644 src/ui/PodcastView/Player.test.ts
 delete mode 100644 src/ui/PodcastView/PlayerOverlay.svelte
 create mode 100644 src/ui/PodcastView/Scrubber.svelte
 create mode 100644 src/ui/PodcastView/Scrubber.test.ts
 create mode 100644 src/ui/PodcastView/UpNextPanel.svelte
 create mode 100644 src/ui/PodcastView/chapters.test.ts
 create mode 100644 src/ui/PodcastView/chapters.ts
 delete mode 100644 src/ui/common/Image.svelte
 delete mode 100644 src/ui/common/Image.test.ts
 delete mode 100644 src/ui/common/Progressbar.svelte
 delete mode 100644 src/ui/common/Progressbar.test.ts
 delete mode 100644 src/ui/common/__tests__/ImageFallbackHarness.svelte
 delete mode 100644 src/ui/obsidian/Button.svelte
 delete mode 100644 src/ui/obsidian/Icon.svelte
 delete mode 100644 src/ui/obsidian/Slider.svelte
 delete mode 100644 src/utility/extractStylesFromObj.ts
 delete mode 100644 tests/mocks/EpisodePlayerStub.svelte

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/src/main.activateView.test.ts b/src/main.activateView.test.ts
index 8336c950..d3974289 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 () =>
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..612a7682
--- /dev/null
+++ b/src/ui/PodcastView/ChaptersPanel.svelte
@@ -0,0 +1,99 @@
+<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;
+		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/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..e8b6c983 100644
--- a/src/ui/PodcastView/MiniPlayer.svelte
+++ b/src/ui/PodcastView/MiniPlayer.svelte
@@ -3,7 +3,7 @@
 	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();
@@ -71,7 +71,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 +188,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..f169eb8d
--- /dev/null
+++ b/src/ui/PodcastView/Player.svelte
@@ -0,0 +1,879 @@
+<script lang="ts">
+	import { Notice, 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 { 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("");
+
+	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(panel && panels.includes(panel) ? panel : 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;
+		chapters = [];
+		let latest = true;
+		if (url) 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() {
+		const name = (await captureTimestamp())?.path.split("/").pop()?.replace(/\.md$/, "");
+		if (name) new Notice(`Timestamp added to ${name}`);
+	}
+
+	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"
+			class={tabs ? "pn-tab" : "pn-sw"}
+			role={tabs ? "tab" : undefined}
+			aria-selected={tabs ? shown === kind : undefined}
+			aria-pressed={tabs ? undefined : shown === kind}
+			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 !wide && shown}
+					{@render panelView(shown)}
+				{:else 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 video && inMainWindow}
+					<div class="pn-video" use:player.videoStage bind:this={videoFrame}>
+						<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"
+								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"
+						aria-label="Capture timestamp"
+						onclick={capture}
+					>
+						<span {@attach icon("clock-plus")}></span><span>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" role="tabpanel">{@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;
+	}
+
+	.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;
+		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);
+		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;
+	}
+
+	.pn-player .pn-chapnow {
+		min-width: 0;
+		font-size: inherit;
+	}
+
+	.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 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):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-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 {
+		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..dd6b7234
--- /dev/null
+++ b/src/ui/PodcastView/Player.test.ts
@@ -0,0 +1,444 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen, within } from "@testing-library/svelte";
+import * as obsidian from "obsidian";
+import { 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("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("Capture 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("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("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("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(screen.getByRole("list", { name: "Chapters" })).toBeInTheDocument();
+
+		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",
+		);
+	});
+
+	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.svelte b/src/ui/PodcastView/PodcastView.svelte
index 8c441f2c..f0590d28 100644
--- a/src/ui/PodcastView/PodcastView.svelte
+++ b/src/ui/PodcastView/PodcastView.svelte
@@ -21,7 +21,7 @@
 	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 QueueList from "./QueueList.svelte";
 	import Rail from "./Rail.svelte";
@@ -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;
@@ -315,6 +318,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 +327,9 @@
 		--pn-btn: 44px;
 		--pn-row: 44px;
 		--pn-head: 52px;
+		--pn-cap-h: 48px;
+		--pn-play: 64px;
+		--pn-skip: 48px;
 	}
 
 	.pn-body {
@@ -813,6 +821,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 +1383,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 +1409,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 +1469,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/Scrubber.svelte b/src/ui/PodcastView/Scrubber.svelte
new file mode 100644
index 00000000..8cb9a58d
--- /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) =>
+		Math.min(1, Math.max(0, (shown - from) / (to - from))) * 100;
+	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..48acfea3
--- /dev/null
+++ b/src/ui/PodcastView/Scrubber.test.ts
@@ -0,0 +1,92 @@
+// @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%"]);
+	});
+});
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..10b666ac
--- /dev/null
+++ b/src/ui/PodcastView/chapters.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, test } from "vitest";
+import { chapterAt, segmentsOf } from "./chapters";
+
+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]]);
+	});
+});
diff --git a/src/ui/PodcastView/chapters.ts b/src/ui/PodcastView/chapters.ts
new file mode 100644
index 00000000..45d2e2f4
--- /dev/null
+++ b/src/ui/PodcastView/chapters.ts
@@ -0,0 +1,29 @@
+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]);
+}
+
+let last: { url: string; chapters: Promise<Chapter[]> } | undefined;
+
+/** The chapters at `url`. The last one stays loaded, so reopening the player fetches nothing. */
+export function loadChapters(url: string): Promise<Chapter[]> {
+	if (last?.url !== url) last = { url, chapters: fetchChapters(url) };
+	return last.chapters;
+}
diff --git a/src/ui/PodcastView/episodeRow.ts b/src/ui/PodcastView/episodeRow.ts
index 68d47006..640f5d1a 100644
--- a/src/ui/PodcastView/episodeRow.ts
+++ b/src/ui/PodcastView/episodeRow.ts
@@ -116,6 +116,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.ts b/src/ui/PodcastView/menus.ts
index 98bf943c..99be0b3f 100644
--- a/src/ui/PodcastView/menus.ts
+++ b/src/ui/PodcastView/menus.ts
@@ -93,7 +93,10 @@ export function rateMenu({ player }: ShellServices): MenuEntry[] {
 }
 
 /** Open note, or Create note from the template, which opens it. */
-export function noteEntry(episode: Episode, { hasNote, settings }: ShellServices): MenuEntry {
+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) }
 		: {
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/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/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/targets.ts b/tests/e2e/journey/targets.ts
index 0edd9b6b..b535984f 100644
--- a/tests/e2e/journey/targets.ts
+++ b/tests/e2e/journey/targets.ts
@@ -74,7 +74,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 +95,8 @@ 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`,
 	),
 	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/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>

From 2b1672ff8539fffc23d9e7637d28f00ca6842fa2 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 13 Oct 2026 23:49:43 +0200
Subject: [PATCH 08/30] feat(capture): show every capture in a Notice with an
 Undo that removes exactly what it inserted

CaptureService now confirms each successful capture, whatever started it (the
player, the mini player, the commands, the headset or lock screen), with an
Undo notice: "Timestamp added to {note}", or "Created {note}" when the
capture created the episode note.

Undo takes back exactly what the capture inserted, and only while it is
still exactly where it was put:
- in an editor, while the same tab still shows the same note in Source or
  Live Preview and the inserted range is untouched; text typed after it
  stays, and a selection the capture replaced comes back;
- in the episode note, while the note still ends with the appended text,
  through the note's open editor when one edits it, else through a
  vault.process that aborts when the end changed. A note the capture created
  is kept; only the timestamp goes.
When the text was edited since, Undo leaves it and says so. The Undo is
disarmed when the plugin unloads (dismissUndoNotices in onunload).

The full player's Timestamp button reads "Added" with a check for 1.2 s
after a capture. The player and mini player no longer show their own
"Timestamp added to" Notice.

size: 98,396 gzip (+157 vs master 98,239)
---
 src/commands.test.ts                         | 201 +++++++++++++++++--
 src/main.activateView.test.ts                |  11 +-
 src/services/CaptureService.ts               |  94 ++++++++-
 src/ui/PodcastView/MiniPlayer.svelte         |   6 +-
 src/ui/PodcastView/Player.svelte             |  19 +-
 src/ui/PodcastView/Player.test.ts            |  32 +++
 src/ui/PodcastView/PodcastView.shell.test.ts |  15 +-
 7 files changed, 338 insertions(+), 40 deletions(-)

diff --git a/src/commands.test.ts b/src/commands.test.ts
index 2ea7fd04..8e336997 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,22 +51,42 @@ 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));
 		},
 	};
 }
@@ -95,7 +115,8 @@ function fakeVault() {
 	};
 }
 
-function fakeWorkspace() {
+/** `fileAt` gives the vault's file for a path, so a note opened in a tab is that file. */
+function fakeWorkspace(fileAt: (path: string) => TFile) {
 	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 +142,7 @@ 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) });
 		const mode = vi.spyOn(view, "getMode").mockReturnValue(reading ? "preview" : "source");
 		leaf.view = view;
 		open.push(leaf);
@@ -155,7 +176,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((path) => notes.get(path)?.file ?? vaultFile(path));
 	const plugin = Object.create(PodNotes.prototype) as PodNotes;
 	Object.assign(plugin, {
 		loadData: vi.fn().mockResolvedValue(data),
@@ -212,6 +233,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 changed since, 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 +267,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 +379,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 +391,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 +408,132 @@ describe("capture", () => {
 		expect(notes.size).toBe(0);
 	});
 
+	describe("Undo", () => {
+		async function intoEditor(text: string, caret?: number) {
+			const session = await loadPlugin(playing);
+			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("keeps what the user typed after the timestamp", async () => {
+			const { editor } = await intoEditor("Notes\n");
+			editor.replaceRange(" a great point", editor.offsetToPos(editor.getValue().length));
+
+			await undo();
+
+			expect(editor.getValue()).toBe("Notes\n a great point");
+		});
+
+		it.each([
+			["before it", 0, "Re: Notes\n- 00:20:34"],
+			["inside it", 8, "Notes\n- 01:00:20:34"],
+		])("leaves the timestamp the user edited %s, and says so", async (_where, at, edited) => {
+			const { editor } = await intoEditor("Notes\n");
+			editor.replaceRange(at === 0 ? "Re: " : "01:", editor.offsetToPos(at));
+
+			await undo();
+
+			expect(editor.getValue()).toBe(edited);
+			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",
+				(tab: Tab) => ((tab.leaf.view as MarkdownView).file = vaultFile("Other.md")),
+			],
+			["it was switched to Reading view", (tab: Tab) => tab.mode.mockReturnValue("preview")],
+		])("leaves an editor's timestamp once %s", async (_change, change) => {
+			const { editor, leaf, mode, close } = await intoEditor("Notes\n");
+			change({ leaf, mode, close: () => close(leaf) });
+
+			await undo();
+
+			expect(editor.getValue()).toBe("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("leaves the episode note's timestamp once the user wrote after it, and says so", async () => {
+			const { plugin, notes, read } = await loadPlugin(playing);
+			await plugin.capture.timestamp();
+			notes.get(NOTE_PATH)!.content += "My thought\n";
+
+			await undo();
+
+			expect(read(NOTE_PATH)).toBe("# Saved Episode\n- 00:20:34\nMy thought\n");
+			expect(said()).toEqual(["Created Saved Episode", REFUSED]);
+		});
+
+		it("takes the timestamp out through the episode note's editor while it is open", async () => {
+			const { plugin, openNote, read } = await loadPlugin(playing);
+			await plugin.capture.timestamp();
+			const { editor } = openNote(NOTE_PATH, `Unsaved draft\n${read(NOTE_PATH)}`);
+
+			await undo();
+
+			expect(editor.getValue()).toBe("Unsaved draft\n# Saved Episode");
+			expect(read(NOTE_PATH)).toBe("# Saved Episode\n- 00:20:34\n");
+		});
+
+		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 d3974289..e46a539f 100644
--- a/src/main.activateView.test.ts
+++ b/src/main.activateView.test.ts
@@ -593,14 +593,20 @@ 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,
+			getSelection: () => "",
+			posToOffset: () => 0,
 			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({
@@ -608,6 +614,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/services/CaptureService.ts b/src/services/CaptureService.ts
index 296097b3..f0b331fd 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";
@@ -74,7 +82,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 +91,24 @@ export class CaptureService {
 				lineCount: editor.lineCount(),
 				cursorLine: editor.getCursor("from").line,
 			});
+			const start = editor.posToOffset(editor.getCursor("from"));
+			const replaced = editor.getSelection();
 			editor.replaceSelection(inserted);
+			// A closed tab or a note switched to Reading view no longer edits. Canvas and
+			// embedded editors have no mode.
+			this.offer(
+				file,
+				false,
+				() =>
+					(!(target instanceof MarkdownView) ||
+						this.editingView(target.leaf) === target) &&
+					target.editor === editor &&
+					target.file === file &&
+					replaceExactly(editor, start, inserted, replaced),
+			);
 			return {
 				destination: "editor",
-				path: target.file?.path ?? "",
+				path: file?.path ?? "",
 				text: inserted,
 				created: false,
 			};
@@ -99,11 +121,13 @@ 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")
-					? `${content}\n${appended}`
-					: `${content}${appended}`,
-			);
+			// Exactly what the append adds: the newline it has to add first, then the text.
+			let suffix = appended;
+			await this.plugin.app.vault.process(file, (content) => {
+				suffix = content.length > 0 && !content.endsWith("\n") ? `\n${appended}` : appended;
+				return content + suffix;
+			});
+			this.offer(file, created, () => this.unappend(file, suffix));
 			return { destination: "note", path: file.path, text: appended, created };
 		} catch (error) {
 			console.error("PodNotes: failed to capture timestamp into episode note", error);
@@ -112,6 +136,47 @@ export class CaptureService {
 		}
 	}
 
+	/**
+	 * Says where the capture went, with an Undo that takes it back. `undo` removes the text
+	 * only while it is still exactly where it was put, so it never removes what the user
+	 * typed since, and returns false when it left the note as it is.
+	 */
+	private offer(file: TFile | null, created: boolean, undo: () => boolean | Promise<boolean>) {
+		const name = file?.basename;
+		noticeWithUndo(
+			created ? `Created ${name}` : name ? `Timestamp added to ${name}` : "Timestamp added",
+			async () => {
+				if (!(await undo())) new Notice("The note changed since, so the timestamp stays");
+			},
+		);
+	}
+
+	/** Takes `suffix` off the end of the note while it still ends with it. */
+	private async unappend(file: TFile, suffix: string): Promise<boolean> {
+		// An open editor's buffer is the note: a vault write behind it could lose what it
+		// has not saved yet.
+		const view = this.plugin.app.workspace
+			.getLeavesOfType("markdown")
+			.map((leaf) => this.editingView(leaf))
+			.find((view) => view?.file === file);
+		if (view) {
+			const value = view.editor.getValue();
+			return (
+				value.endsWith(suffix) &&
+				replaceExactly(view.editor, value.length - suffix.length, suffix, "")
+			);
+		}
+		try {
+			await this.plugin.app.vault.process(file, (content) => {
+				if (!content.endsWith(suffix)) throw new Error("The capture was edited");
+				return content.slice(0, -suffix.length);
+			});
+			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 +193,16 @@ export class CaptureService {
 			: null;
 	}
 }
+
+/** Puts `replacement` in place of `text` at `start`, only while `text` is still exactly there. */
+function replaceExactly(editor: Editor, start: number, text: string, replacement: string): boolean {
+	try {
+		const from = editor.offsetToPos(start);
+		const to = editor.offsetToPos(start + text.length);
+		if (editor.getRange(from, to) !== text) return false;
+		editor.replaceRange(replacement, from, to);
+		return true;
+	} catch {
+		return false;
+	}
+}
diff --git a/src/ui/PodcastView/MiniPlayer.svelte b/src/ui/PodcastView/MiniPlayer.svelte
index e8b6c983..27872e0f 100644
--- a/src/ui/PodcastView/MiniPlayer.svelte
+++ b/src/ui/PodcastView/MiniPlayer.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { Notice } from "obsidian";
 	import { formatDuration } from "src/utility/formatDuration";
 	import { icon } from "../obsidian/icon";
 	import { useServices } from "./context";
@@ -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")}
diff --git a/src/ui/PodcastView/Player.svelte b/src/ui/PodcastView/Player.svelte
index f169eb8d..7d74a327 100644
--- a/src/ui/PodcastView/Player.svelte
+++ b/src/ui/PodcastView/Player.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Notice, Scope } from "obsidian";
+	import { Scope } from "obsidian";
 	import { tick } from "svelte";
 	import type { Chapter } from "src/types/Chapter";
 	import type { Episode } from "src/types/Episode";
@@ -37,6 +37,8 @@
 	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");
@@ -165,8 +167,10 @@
 	}
 
 	async function capture() {
-		const name = (await captureTimestamp())?.path.split("/").pop()?.replace(/\.md$/, "");
-		if (name) new Notice(`Timestamp added to ${name}`);
+		if (!(await captureTimestamp())) return;
+		added = true;
+		window.clearTimeout(addedTimer);
+		addedTimer = window.setTimeout(() => (added = false), 1200);
 	}
 
 	function fullscreen() {
@@ -378,10 +382,13 @@
 					<button
 						type="button"
 						class="pn-btn mod-cta pn-cap"
+						class:is-done={added}
 						aria-label="Capture timestamp"
 						onclick={capture}
 					>
-						<span {@attach icon("clock-plus")}></span><span>Timestamp</span>
+						<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>
@@ -750,6 +757,10 @@
 		--icon-size: 17px;
 	}
 
+	.pn-player .pn-cap.is-done {
+		background: var(--background-modifier-success);
+	}
+
 	.pn-cap span {
 		display: flex;
 		overflow: hidden;
diff --git a/src/ui/PodcastView/Player.test.ts b/src/ui/PodcastView/Player.test.ts
index dd6b7234..7df863b4 100644
--- a/src/ui/PodcastView/Player.test.ts
+++ b/src/ui/PodcastView/Player.test.ts
@@ -247,6 +247,38 @@ describe("the full player", () => {
 		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("Capture 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"]);
+
+		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" });
diff --git a/src/ui/PodcastView/PodcastView.shell.test.ts b/src/ui/PodcastView/PodcastView.shell.test.ts
index 17692bcd..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 () => {

From 9bbe48641a07e1d64fd821645bee2ff1f3be16b4 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 13 Oct 2026 23:50:42 +0200
Subject: [PATCH 09/30] test(player): keep quarter and one-decimal playback
 rates through the API and the saved default

1.25 round-trips through the IAPI playbackRate setter and through the saved
default speed, and a 2.21.1 library's one-decimal default speed (1.3) loads
and saves unchanged with no normalization warning.

size: 98,396 gzip (+157 vs master 98,239)
---
 src/API/API.test.ts                  |  8 ++++++++
 src/persistence/podNotesData.test.ts | 15 +++++++++++++++
 2 files changed, 23 insertions(+)

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/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(),

From 6ff29dd969496a3bef6e888819d1dce3b136bc0e Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Tue, 13 Oct 2026 23:54:11 +0200
Subject: [PATCH 10/30] refactor(ui): fold the current chapter label's rule
 into the podcast link's

The tightening pass over the new player measured three candidates against
98,396 gzip:
- folding ChaptersPanel into Player saves 93 bytes, under the 100-byte bar,
  so it stays a component;
- one shared reset for the player's bare buttons costs 3 bytes more than the
  duplicates it removes, so the per-group resets stay;
- the current chapter label's own rule (min-width 0, font-size inherit) merges
  into the podcast link rule it already shares, with no visual change.

size: 98,386 gzip (+147 vs master 98,239)
---
 src/ui/PodcastView/Player.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/ui/PodcastView/Player.svelte b/src/ui/PodcastView/Player.svelte
index 7d74a327..4863f0b4 100644
--- a/src/ui/PodcastView/Player.svelte
+++ b/src/ui/PodcastView/Player.svelte
@@ -550,6 +550,7 @@
 	.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);
@@ -557,6 +558,7 @@
 		background: none;
 		box-shadow: none;
 		color: var(--text-muted);
+		font-size: inherit;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -589,11 +591,6 @@
 		font-variant-numeric: tabular-nums;
 	}
 
-	.pn-player .pn-chapnow {
-		min-width: 0;
-		font-size: inherit;
-	}
-
 	.r {
 		text-align: right;
 	}

From b308d115cead7d910a88d659c983dc00c8717862 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 00:17:34 +0200
Subject: [PATCH 11/30] fix(ui): keep focus on a menu's control when Escape
 closes the menu

Obsidian's menu closes on Escape but leaves the key unhandled, and Obsidian
then sends focus from a sidebar view to the main area's most recent leaf.
With the player in the right sidebar and a note open, Escape on the episode
menu moved focus into the note, so the next Escape went to the note instead
of closing the volume slider or the player. The menu now marks the Escape
that closes it as handled, so focus stays on the control that opened it.

size: 98,419 gzip (+180 vs master 98,239)
---
 src/ui/PodcastView/menus.test.ts | 23 +++++++++++++++++++++++
 src/ui/PodcastView/menus.ts      |  5 +++++
 2 files changed, 28 insertions(+)

diff --git a/src/ui/PodcastView/menus.test.ts b/src/ui/PodcastView/menus.test.ts
index 9f176035..5d9cced6 100644
--- a/src/ui/PodcastView/menus.test.ts
+++ b/src/ui/PodcastView/menus.test.ts
@@ -601,6 +601,29 @@ describe("a menu", () => {
 		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;
diff --git a/src/ui/PodcastView/menus.ts b/src/ui/PodcastView/menus.ts
index 99be0b3f..66790b95 100644
--- a/src/ui/PodcastView/menus.ts
+++ b/src/ui/PodcastView/menus.ts
@@ -77,6 +77,11 @@ export function showMenu(entries: readonly MenuEntry[], at: MenuAnchor): void {
 		});
 	}
 	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.
+		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);

From 5f95a1ec6be79cbda618e419cc5afe418b4e315f Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 00:17:45 +0200
Subject: [PATCH 12/30] test(e2e): drive capture with Undo, the video stage, Up
 next writes, local artwork and the Escape order

In real Obsidian 1.14.4:
- J-TS-12: the full player's Timestamp goes into a Live Preview note at the
  caret, reads "Added", and Undo through the Notice leaves the note byte for
  byte as before; with no editor open it creates the episode note, Undo keeps
  the note without the line, and a second capture's Undo leaves it as before.
- J-TS-13: the same from the mini player, into a note and into an episode
  note the user has, whose missing final newline Undo takes back too.
- J-TS-14: Capture Timestamp with nothing loaded shows "Play an episode to
  capture" and writes nothing.
- A video episode with 30 queued keeps its 16:9 frame at 320 px, after Up
  next covered the stage, and at 820 px beside Up next.
- Up next reorders by a slow drag and by an arrow key, writing data.json
  once per completed move.
- #394: a local file shows its file tile, never an image, in the player and
  the mini player.
- With a note open in the main area, Escape closes the episode menu, then
  the volume slider, then the player, and focus stays in the view.

size: 98,419 gzip (+180 vs master 98,239)
---
 tests/e2e/journey-notes.test.ts  | 154 ++++++++++++++++-
 tests/e2e/journey-player.test.ts | 283 +++++++++++++++++++++++++++++++
 tests/e2e/journey/targets.ts     |  24 +++
 3 files changed, 459 insertions(+), 2 deletions(-)
 create mode 100644 tests/e2e/journey-player.test.ts

diff --git a/tests/e2e/journey-notes.test.ts b/tests/e2e/journey-notes.test.ts
index f2d6b457..a555b95d 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,46 @@ 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`,
+	);
+}
+
+/** 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("The note changed since"),
+	);
+}
+
 async function detachMarkdownTabs(): Promise<void> {
 	await getContext().obsidian.dev.evalJson('app.workspace.detachLeavesOfType("markdown"), true');
 }
@@ -566,6 +606,116 @@ 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.playerControl("Capture timestamp");
+		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-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..eb7f2043
--- /dev/null
+++ b/tests/e2e/journey-player.test.ts
@@ -0,0 +1,283 @@
+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: Record<string, unknown> = {},
+): Promise<FixtureServer> {
+	const context = getContext();
+	const server = await serve();
+	await seedLibrary(context, server, {
+		subscriptions: [FEED],
+		current: { ...storedEpisode(server, FEED, NOW), ...current },
+		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("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/targets.ts b/tests/e2e/journey/targets.ts
index b535984f..8e5824b3 100644
--- a/tests/e2e/journey/targets.ts
+++ b/tests/e2e/journey/targets.ts
@@ -98,6 +98,30 @@ export const ui = {
 		"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,
+		),
+	playerVolume: byCss("full player's volume", `${PLAYER_VIEW} section.pn-player button.pn-vol`),
+	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(
 			`More options for ${title}`,

From 9e424fb0ecdb37ba4074344dfc2ce702cb492d33 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 00:28:59 +0200
Subject: [PATCH 13/30] docs(verify): describe the capture Notice and its Undo

size: 98,419 gzip (+180 vs master 98,239)
---
 .claude/skills/verify/features/timestamps-uris.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.claude/skills/verify/features/timestamps-uris.md b/.claude/skills/verify/features/timestamps-uris.md
index 8e72f3b3..d0cf185a 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 removes exactly the inserted text while it is still where it was put, else the Notice `The note changed since, so the timestamp stays` says it was left. 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.

From 3cf3e1f1dac47fd155c057a40067739bb104a353 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 00:41:43 +0200
Subject: [PATCH 14/30] fix(ui): left-align chapter rows and keep Undo notices
 to two lines

Obsidian centers a button's content, so chapter rows centered their time
and title instead of starting each at the left as the design shows. A long
note or podcast name made an Undo notice four or five lines tall; it now
stops at two, with Undo beside it.

size: 98,566 gzip (+242 vs master f295af1 98,324)
---
 src/ui/PodcastView/ChaptersPanel.svelte |  1 +
 src/ui/PodcastView/PodcastView.svelte   | 18 +++++++++++++++++-
 src/ui/undoNotice.ts                    |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/ui/PodcastView/ChaptersPanel.svelte b/src/ui/PodcastView/ChaptersPanel.svelte
index 612a7682..8c7859b7 100644
--- a/src/ui/PodcastView/ChaptersPanel.svelte
+++ b/src/ui/PodcastView/ChaptersPanel.svelte
@@ -53,6 +53,7 @@
 	.pn-panel .pn-chap {
 		display: flex;
 		align-items: baseline;
+		justify-content: flex-start;
 		gap: var(--size-4-3);
 		width: 100%;
 		height: auto;
diff --git a/src/ui/PodcastView/PodcastView.svelte b/src/ui/PodcastView/PodcastView.svelte
index f0590d28..ed393263 100644
--- a/src/ui/PodcastView/PodcastView.svelte
+++ b/src/ui/PodcastView/PodcastView.svelte
@@ -280,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. */
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);

From b22837671de6909833f2e3b87a215fb705478504 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 00:41:43 +0200
Subject: [PATCH 15/30] test(verify): keep the capture notice in the capture
 shots

Capture feedback is an Obsidian notice, so the capture state keeps notices
in its shots, fails unless one says "Timestamp added to", and clears older
notices before it presses Timestamp.
---
 .claude/skills/verify/screens.mjs | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/.claude/skills/verify/screens.mjs b/.claude/skills/verify/screens.mjs
index 2276afbc..6fb89716 100644
--- a/.claude/skills/verify/screens.mjs
+++ b/.claude/skills/verify/screens.mjs
@@ -46,7 +46,8 @@
 //         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.
+//         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";
@@ -102,6 +103,7 @@ const CURRENT_THEME = `(document.body.classList.contains("theme-dark") ? "dark"
  *   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]} */
@@ -178,8 +180,8 @@ const STATES = {
 		play: NOW_PLAYING_AT,
 		text: (library) => episode(library, NOW_PLAYING).title.slice(0, 40),
 	},
-	// The capture toast, which has to outlast the shot.
-	capture: { ...FULL_PLAYER, note: true, press: "Timestamp", text: () => "Timestamp added" },
+	// 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] },
@@ -881,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?.();
@@ -896,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.
@@ -908,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]),
@@ -1045,9 +1050,15 @@ async function set(state, label, widths, themes) {
 				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))

From 994eb48cb9a1fdefeeade168d84d3910628b9310 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 00:56:55 +0200
Subject: [PATCH 16/30] fix(ui): refetch chapters after a failed load and keep
 a Chapters choice with its episode

A chapters fetch that failed, as offline, was memoized as an empty list, so
Chapters stayed hidden for the session. Only loaded chapters are kept now, and
a reopened player takes them on its first frame instead of showing Up next
until a promise settles. A panel choice resets when the chapters change, so a
Chapters choice no longer comes back on its own on a later episode.

size: 98,605 gzip (+281 vs master f295af1 98,324)
---
 src/ui/PodcastView/Player.svelte    | 10 ++++++---
 src/ui/PodcastView/Player.test.ts   | 32 ++++++++++++++++++++++++++++-
 src/ui/PodcastView/chapters.test.ts | 20 ++++++++++++++++--
 src/ui/PodcastView/chapters.ts      | 16 ++++++++++-----
 4 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/src/ui/PodcastView/Player.svelte b/src/ui/PodcastView/Player.svelte
index 4863f0b4..9fdfaa07 100644
--- a/src/ui/PodcastView/Player.svelte
+++ b/src/ui/PodcastView/Player.svelte
@@ -8,7 +8,7 @@
 	import { ownRecord } from "src/utility/ownRecord";
 	import { normalizeSkipLength } from "src/utility/skipLength";
 	import { icon } from "../obsidian/icon";
-	import { chapterAt, loadChapters } from "./chapters";
+	import { cachedChapters, chapterAt, loadChapters } from "./chapters";
 	import ChaptersPanel from "./ChaptersPanel.svelte";
 	import { useServices } from "./context";
 	import { sourceOf } from "./episodeRow";
@@ -71,9 +71,13 @@
 
 	$effect.pre(() => {
 		const url = chaptersUrl;
-		chapters = [];
+		// 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;
-		if (url) void loadChapters(url).then((loaded) => latest && (chapters = loaded));
+		void loadChapters(url).then((loaded) => latest && (chapters = loaded));
 		return () => (latest = false);
 	});
 
diff --git a/src/ui/PodcastView/Player.test.ts b/src/ui/PodcastView/Player.test.ts
index 7df863b4..c96f887a 100644
--- a/src/ui/PodcastView/Player.test.ts
+++ b/src/ui/PodcastView/Player.test.ts
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { fireEvent, render, screen, within } from "@testing-library/svelte";
 import * as obsidian from "obsidian";
-import { tick } from "svelte";
+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";
@@ -349,6 +349,36 @@ describe("the player's panels", () => {
 		);
 	});
 
+	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());
diff --git a/src/ui/PodcastView/chapters.test.ts b/src/ui/PodcastView/chapters.test.ts
index 10b666ac..524d1293 100644
--- a/src/ui/PodcastView/chapters.test.ts
+++ b/src/ui/PodcastView/chapters.test.ts
@@ -1,5 +1,8 @@
-import { describe, expect, test } from "vitest";
-import { chapterAt, segmentsOf } from "./chapters";
+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}` }));
 
@@ -32,4 +35,17 @@ describe("chapters", () => {
 		]);
 		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();
+	});
 });
diff --git a/src/ui/PodcastView/chapters.ts b/src/ui/PodcastView/chapters.ts
index 45d2e2f4..46e20702 100644
--- a/src/ui/PodcastView/chapters.ts
+++ b/src/ui/PodcastView/chapters.ts
@@ -20,10 +20,16 @@ export function segmentsOf(chapters: readonly Chapter[], duration: number): [num
 	return bounds.slice(1).map((end, index) => [bounds[index], end]);
 }
 
-let last: { url: string; chapters: Promise<Chapter[]> } | undefined;
+let last: { url: string; chapters: Chapter[] } | undefined;
 
-/** The chapters at `url`. The last one stays loaded, so reopening the player fetches nothing. */
-export function loadChapters(url: string): Promise<Chapter[]> {
-	if (last?.url !== url) last = { url, chapters: fetchChapters(url) };
-	return last.chapters;
+/** The chapters last loaded, while they are the ones at `url`. */
+export function cachedChapters(url: string): Chapter[] | undefined {
+	return last?.url === url ? last.chapters : undefined;
+}
+
+/** 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) last = { url, chapters };
+	return chapters;
 }

From 709e7c8688e7e0e5b12ad3b2a0f0bf98fc14f218 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 00:57:51 +0200
Subject: [PATCH 17/30] fix(capture): offer no Undo for a capture that ends
 after the plugin unloaded

CaptureService awaits the note write before it offers Undo, so a capture
still running when the plugin unloaded showed an armed Undo after
dismissUndoNotices had run. onunload now disposes the service, and a
disposed service offers no Undo.

size: 98,623 gzip (+299 vs master f295af1 98,324)
---
 src/commands.test.ts           | 11 +++++++++++
 src/main.ts                    |  1 +
 src/services/CaptureService.ts |  7 +++++++
 3 files changed, 19 insertions(+)

diff --git a/src/commands.test.ts b/src/commands.test.ts
index 8e336997..a0441329 100644
--- a/src/commands.test.ts
+++ b/src/commands.test.ts
@@ -522,6 +522,17 @@ describe("capture", () => {
 			expect(read(NOTE_PATH)).toBe("# Saved Episode\n- 00:20:34\n");
 		});
 
+		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);
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/services/CaptureService.ts b/src/services/CaptureService.ts
index f0b331fd..76c2810a 100644
--- a/src/services/CaptureService.ts
+++ b/src/services/CaptureService.ts
@@ -28,6 +28,7 @@ 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;
@@ -47,6 +48,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));
 	}
@@ -142,6 +148,7 @@ export class CaptureService {
 	 * typed since, and returns false when it left the note as it is.
 	 */
 	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",

From bf8fed2ee39be09d69bab10661297593e235e0ec Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 00:59:24 +0200
Subject: [PATCH 18/30] fix(ui): give the video frame its own play and pause,
 and show a media error over an open panel

Fullscreen shows only the video frame, whose one control was Fullscreen. The
frame now carries a play/pause button over the video, showing its icon while
paused or under the pointer, as the replaced player's overlay did. A media
error now takes the stage before a compact panel, so its message and Retry
show when Up next or Chapters was open.

size: 98,770 gzip (+446 vs master f295af1 98,324)
---
 src/ui/PodcastView/Player.svelte  | 47 +++++++++++++++++++++++++++++--
 src/ui/PodcastView/Player.test.ts | 28 ++++++++++++++++++
 2 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/src/ui/PodcastView/Player.svelte b/src/ui/PodcastView/Player.svelte
index 9fdfaa07..a5542d25 100644
--- a/src/ui/PodcastView/Player.svelte
+++ b/src/ui/PodcastView/Player.svelte
@@ -245,9 +245,7 @@
 	<div class="pn-np-body">
 		<div class="pn-np-left">
 			<div class="pn-stage">
-				{#if !wide && shown}
-					{@render panelView(shown)}
-				{:else if failed}
+				{#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>
@@ -255,8 +253,18 @@
 							>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"
@@ -511,6 +519,39 @@
 		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;
diff --git a/src/ui/PodcastView/Player.test.ts b/src/ui/PodcastView/Player.test.ts
index c96f887a..135f4cf9 100644
--- a/src/ui/PodcastView/Player.test.ts
+++ b/src/ui/PodcastView/Player.test.ts
@@ -236,6 +236,20 @@ describe("the full player", () => {
 		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();
+	});
+
 	test("Create note while the episode has none, Open note once it has one", async () => {
 		await openPlayer();
 		expect(button("Create note")).toBeInTheDocument();
@@ -290,6 +304,20 @@ describe("the full player", () => {
 		).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" });

From 54fb83581e53bdcd9fb23ba3bf3b4de1242e09f8 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 01:01:42 +0200
Subject: [PATCH 19/30] fix(ui): name the Timestamp button by its text and link
 the player's tabs to their panel

The Timestamp button's accessible name now follows what it shows, Timestamp
and then Added. The wide player's tabs carry ids and aria-controls, and the
tab panel is labelled by the selected tab. The scrubber shows an empty track,
not width NaN%, before the duration is known, and the menu's Escape comment
says why it holds on desktop and does nothing on a phone.

size: 98,825 gzip (+501 vs master f295af1 98,324)
---
 src/ui/PodcastView/Player.svelte    | 12 ++++++++++--
 src/ui/PodcastView/Player.test.ts   | 15 ++++++++++++---
 src/ui/PodcastView/Scrubber.svelte  |  2 +-
 src/ui/PodcastView/Scrubber.test.ts |  9 +++++++++
 src/ui/PodcastView/menus.ts         |  2 ++
 tests/e2e/journey-notes.test.ts     |  2 +-
 tests/e2e/journey/targets.ts        |  5 +++++
 7 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/ui/PodcastView/Player.svelte b/src/ui/PodcastView/Player.svelte
index a5542d25..91e19cc1 100644
--- a/src/ui/PodcastView/Player.svelte
+++ b/src/ui/PodcastView/Player.svelte
@@ -206,9 +206,11 @@
 	{#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}
 			onclick={() => (panel = !tabs && shown === kind ? undefined : kind)}
 			>{kind === "chapters" ? "Chapters" : "Up next"}</button
@@ -395,7 +397,6 @@
 						type="button"
 						class="pn-btn mod-cta pn-cap"
 						class:is-done={added}
-						aria-label="Capture timestamp"
 						onclick={capture}
 					>
 						<span {@attach icon(added ? "check" : "clock-plus")}></span><span
@@ -418,7 +419,14 @@
 				<div class="pn-tabs" role="tablist" aria-label="Player panels">
 					{@render choices(true)}
 				</div>
-				<div class="pn-panelwrap" role="tabpanel">{@render panelView(shown)}</div>
+				<div
+					class="pn-panelwrap"
+					id="{id}-panel"
+					role="tabpanel"
+					aria-labelledby="{id}-{shown}"
+				>
+					{@render panelView(shown)}
+				</div>
 			</div>
 		{/if}
 	</div>
diff --git a/src/ui/PodcastView/Player.test.ts b/src/ui/PodcastView/Player.test.ts
index 135f4cf9..85f1f875 100644
--- a/src/ui/PodcastView/Player.test.ts
+++ b/src/ui/PodcastView/Player.test.ts
@@ -225,7 +225,7 @@ describe("the full player", () => {
 			"aria-disabled",
 			"true",
 		);
-		expect(button("Capture timestamp")).toBeEnabled();
+		expect(button("Timestamp")).toBeEnabled();
 		expect(button("Episode options")).toBeEnabled();
 
 		await fireEvent.click(within(alert).getByRole("button", { name: "Retry" }));
@@ -263,7 +263,7 @@ describe("the full player", () => {
 
 	test("Timestamp reads Added for 1.2 s after a capture, and not when nothing was captured", async () => {
 		await openPlayer();
-		const timestamp = button("Capture timestamp");
+		const timestamp = button("Timestamp");
 		const reads = () => [
 			timestamp.textContent,
 			timestamp.querySelector("[data-icon]")?.getAttribute("data-icon"),
@@ -284,6 +284,7 @@ describe("the full player", () => {
 		await fireEvent.click(timestamp);
 		await tick();
 		expect(reads()).toEqual(["Added", "check"]);
+		expect(button("Added")).toBe(timestamp);
 
 		vi.advanceTimersByTime(1199);
 		await tick();
@@ -364,7 +365,14 @@ describe("the player's panels", () => {
 				"true",
 			),
 		);
-		expect(screen.getByRole("list", { name: "Chapters" })).toBeInTheDocument();
+		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();
@@ -375,6 +383,7 @@ describe("the player's panels", () => {
 			"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 () => {
diff --git a/src/ui/PodcastView/Scrubber.svelte b/src/ui/PodcastView/Scrubber.svelte
index 8cb9a58d..ce664fc1 100644
--- a/src/ui/PodcastView/Scrubber.svelte
+++ b/src/ui/PodcastView/Scrubber.svelte
@@ -24,7 +24,7 @@
 	const shown = $derived(drag?.time ?? position);
 	const segments = $derived(segmentsOf(chapters, duration));
 	const fill = (from: number, to: number) =>
-		Math.min(1, Math.max(0, (shown - from) / (to - from))) * 100;
+		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,
diff --git a/src/ui/PodcastView/Scrubber.test.ts b/src/ui/PodcastView/Scrubber.test.ts
index 48acfea3..5a939812 100644
--- a/src/ui/PodcastView/Scrubber.test.ts
+++ b/src/ui/PodcastView/Scrubber.test.ts
@@ -89,4 +89,13 @@ describe("the scrubber", () => {
 		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/menus.ts b/src/ui/PodcastView/menus.ts
index 66790b95..7cabc862 100644
--- a/src/ui/PodcastView/menus.ts
+++ b/src/ui/PodcastView/menus.ts
@@ -79,6 +79,8 @@ export function showMenu(entries: readonly MenuEntry[], at: MenuAnchor): void {
 	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();
diff --git a/tests/e2e/journey-notes.test.ts b/tests/e2e/journey-notes.test.ts
index a555b95d..703c955a 100644
--- a/tests/e2e/journey-notes.test.ts
+++ b/tests/e2e/journey-notes.test.ts
@@ -613,7 +613,7 @@ describe("episode note and capture journeys", () => {
 		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.playerControl("Capture timestamp");
+		const timestamp = ui.playerTimestamp;
 		const label = () =>
 			obsidian.dev.evalJson<string>(`(${timestamp.elements})[0]?.textContent.trim() ?? ""`);
 
diff --git a/tests/e2e/journey/targets.ts b/tests/e2e/journey/targets.ts
index 8e5824b3..4c692687 100644
--- a/tests/e2e/journey/targets.ts
+++ b/tests/e2e/journey/targets.ts
@@ -106,6 +106,11 @@ export const ui = {
 			label,
 		),
 	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"]`,

From 90ccedca65ba9d8c9de4ab3fb5d00d5057452f60 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 01:01:42 +0200
Subject: [PATCH 20/30] test(verify): retry a test pattern whose ffmpeg run
 failed

A failed run stayed cached as a rejected promise, so every later request for
the video answered 500 until the fixture server restarted.

size: 98,825 gzip (+501 vs master f295af1 98,324)
---
 .claude/skills/verify/fixtures.mjs | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/.claude/skills/verify/fixtures.mjs b/.claude/skills/verify/fixtures.mjs
index 73d6a25b..f5d67978 100755
--- a/.claude/skills/verify/fixtures.mjs
+++ b/.claude/skills/verify/fixtures.mjs
@@ -505,7 +505,12 @@ function serve() {
 			if (extra?.video) {
 				/** @type {Promise<Buffer> | undefined} */
 				let made;
-				videos[file] = () => (made ??= testPattern(seconds));
+				// 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)];
 			}

From 3291dd790db6416e17ccd3552e23b2c52a732967 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 01:05:50 +0200
Subject: [PATCH 21/30] test(e2e): drive Space, a refused Undo and the podcast
 link in real Obsidian

The player journey presses Space with the focus on the player's title and
checks that api.isPlaying flips both ways, then opens the podcast's page from
the link under the title. J-TS-15 writes a line after a capture into the
episode note and checks that Undo leaves both lines and says so. A unit test
covers the link for a saved and an unsaved podcast.

size: 98,825 gzip (+501 vs master f295af1 98,324)
---
 src/ui/PodcastView/Player.test.ts | 23 +++++++++++++++++++++++
 tests/e2e/journey-notes.test.ts   | 31 +++++++++++++++++++++++++++++++
 tests/e2e/journey-player.test.ts  | 23 +++++++++++++++++++++++
 tests/e2e/journey/input.ts        | 17 ++++++++++-------
 tests/e2e/journey/targets.ts      |  6 ++++++
 5 files changed, 93 insertions(+), 7 deletions(-)

diff --git a/src/ui/PodcastView/Player.test.ts b/src/ui/PodcastView/Player.test.ts
index 85f1f875..c0567bac 100644
--- a/src/ui/PodcastView/Player.test.ts
+++ b/src/ui/PodcastView/Player.test.ts
@@ -126,6 +126,29 @@ describe("the full player", () => {
 		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);
diff --git a/tests/e2e/journey-notes.test.ts b/tests/e2e/journey-notes.test.ts
index 703c955a..fedbf75e 100644
--- a/tests/e2e/journey-notes.test.ts
+++ b/tests/e2e/journey-notes.test.ts
@@ -696,6 +696,37 @@ describe("episode note and capture journeys", () => {
 		);
 	});
 
+	test("J-TS-15 Undo leaves an episode note written to since the capture, 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",
+		);
+		await obsidian.dev.evalJsonAsync(
+			`app.vault.append(app.vault.getAbstractFileByPath(${jsLiteral(episodeNote)}), ${jsLiteral("My thought\n")}).then(() => true)`,
+		);
+		const written = `${created}My thought\n`;
+		await waitForText(episodeNote, (text) => text === written, "a line written after it");
+		await click(obsidian, ui.undo("Created Original Title"));
+
+		await obsidian.waitFor(
+			async () =>
+				(await notices(obsidian)).includes(
+					"The note changed since, so the timestamp stays",
+				),
+			{ timeoutMs: 5_000, intervalMs: 100, message: "the Notice that Undo left the note" },
+		);
+		expect(await readVaultText(obsidian, episodeNote)).toBe(written);
+	});
+
 	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");
diff --git a/tests/e2e/journey-player.test.ts b/tests/e2e/journey-player.test.ts
index eb7f2043..69367dec 100644
--- a/tests/e2e/journey-player.test.ts
+++ b/tests/e2e/journey-player.test.ts
@@ -237,6 +237,29 @@ describe("player journeys", () => {
 		expect(mini.tile?.width).toBe(mini.tile?.height);
 	});
 
+	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");
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 4c692687..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}`),
@@ -105,6 +106,11 @@ export const ui = {
 			"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(

From 755850df4cbcfe0ed3e3094e7c93ccd29289072e Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 01:28:20 +0200
Subject: [PATCH 22/30] test(e2e): read the Undo notice's message and the new
 player's elapsed time

The Undo notice now wraps its message in a span, so dismissNotice found no
text to click and J-FEED-05 and the shared-feed Remove journey timed out.
The synced-progress journeys from master read the replaced player's
.episode-player status line; they read the new player's elapsed time now.

size: 98,825 gzip (+501 vs master f295af1 98,324)
---
 tests/e2e/journey/actions.ts              | 2 +-
 tests/e2e/synced-progress-handoff.test.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

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/synced-progress-handoff.test.ts b/tests/e2e/synced-progress-handoff.test.ts
index 19645c2f..1601c798 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>(

From 5bb65d5ed497193e8a37c3ceb4d0725efd3b312d Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 01:50:50 +0200
Subject: [PATCH 23/30] refactor: drop doc comments that restate their
 function's name

---
 src/services/CaptureService.ts | 2 --
 src/ui/PodcastView/chapters.ts | 1 -
 2 files changed, 3 deletions(-)

diff --git a/src/services/CaptureService.ts b/src/services/CaptureService.ts
index 76c2810a..6d067aa5 100644
--- a/src/services/CaptureService.ts
+++ b/src/services/CaptureService.ts
@@ -158,7 +158,6 @@ export class CaptureService {
 		);
 	}
 
-	/** Takes `suffix` off the end of the note while it still ends with it. */
 	private async unappend(file: TFile, suffix: string): Promise<boolean> {
 		// An open editor's buffer is the note: a vault write behind it could lose what it
 		// has not saved yet.
@@ -201,7 +200,6 @@ export class CaptureService {
 	}
 }
 
-/** Puts `replacement` in place of `text` at `start`, only while `text` is still exactly there. */
 function replaceExactly(editor: Editor, start: number, text: string, replacement: string): boolean {
 	try {
 		const from = editor.offsetToPos(start);
diff --git a/src/ui/PodcastView/chapters.ts b/src/ui/PodcastView/chapters.ts
index 46e20702..071cf8cf 100644
--- a/src/ui/PodcastView/chapters.ts
+++ b/src/ui/PodcastView/chapters.ts
@@ -22,7 +22,6 @@ export function segmentsOf(chapters: readonly Chapter[], duration: number): [num
 
 let last: { url: string; chapters: Chapter[] } | undefined;
 
-/** The chapters last loaded, while they are the ones at `url`. */
 export function cachedChapters(url: string): Chapter[] | undefined {
 	return last?.url === url ? last.chapters : undefined;
 }

From aa6ab607f2b89047b68f537dde923e896a5a12dc Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 01:53:14 +0200
Subject: [PATCH 24/30] fix(ui): keep the latest episode's chapters and switch
 panels off during a media error

A slower chapters load for an earlier episode could replace the cached
chapters of the episode on screen, so reopening the player fetched again and
showed Up next first. At compact widths a media error takes the stage, so the
panel switches now read off and are disabled until the media loads.

size: 98,854 gzip (+530 vs master f295af1 98,324)
---
 src/ui/PodcastView/Player.svelte    | 14 ++++++++++++--
 src/ui/PodcastView/Player.test.ts   |  2 ++
 src/ui/PodcastView/chapters.test.ts | 17 +++++++++++++++++
 src/ui/PodcastView/chapters.ts      |  5 ++++-
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/ui/PodcastView/Player.svelte b/src/ui/PodcastView/Player.svelte
index 91e19cc1..774769d7 100644
--- a/src/ui/PodcastView/Player.svelte
+++ b/src/ui/PodcastView/Player.svelte
@@ -50,7 +50,16 @@
 	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(panel && panels.includes(panel) ? panel : wide ? panels[0] : undefined);
+	// At compact widths a media error takes the stage, so no panel shows meanwhile.
+	const shown = $derived(
+		failed && !wide
+			? undefined
+			: panel && panels.includes(panel)
+				? panel
+				: wide
+					? panels[0]
+					: undefined,
+	);
 	const current = $derived(chapterAt(chapters, elapsed));
 	const back = $derived(normalizeSkipLength($settings.skipBackwardLength));
 	const forward = $derived(normalizeSkipLength($settings.skipForwardLength));
@@ -212,6 +221,7 @@
 			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
 		>
@@ -763,7 +773,7 @@
 		--icon-size: 20px;
 	}
 
-	.pn-player :is(.pn-rate, .pn-skip, .pn-vol, .pn-play):disabled {
+	.pn-player :is(.pn-rate, .pn-skip, .pn-vol, .pn-play, .pn-sw):disabled {
 		opacity: 0.35;
 	}
 
diff --git a/src/ui/PodcastView/Player.test.ts b/src/ui/PodcastView/Player.test.ts
index c0567bac..4ba1cc09 100644
--- a/src/ui/PodcastView/Player.test.ts
+++ b/src/ui/PodcastView/Player.test.ts
@@ -271,6 +271,8 @@ describe("the full player", () => {
 			"Could not load this episode's media.",
 		);
 		expect(button("Retry")).toBeEnabled();
+		expect(button("Up next")).toHaveAttribute("aria-pressed", "false");
+		expect(button("Up next")).toBeDisabled();
 	});
 
 	test("Create note while the episode has none, Open note once it has one", async () => {
diff --git a/src/ui/PodcastView/chapters.test.ts b/src/ui/PodcastView/chapters.test.ts
index 524d1293..77d65bfc 100644
--- a/src/ui/PodcastView/chapters.test.ts
+++ b/src/ui/PodcastView/chapters.test.ts
@@ -48,4 +48,21 @@ describe("chapters", () => {
 		expect(cachedChapters(url)).toEqual(chapters);
 		expect(cachedChapters("https://pod.test/other.json")).toBeUndefined();
 	});
+
+	test("a slower load for an earlier episode keeps the latest episode's chapters", 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)).toBeUndefined();
+	});
 });
diff --git a/src/ui/PodcastView/chapters.ts b/src/ui/PodcastView/chapters.ts
index 071cf8cf..cd97a5eb 100644
--- a/src/ui/PodcastView/chapters.ts
+++ b/src/ui/PodcastView/chapters.ts
@@ -21,6 +21,7 @@ export function segmentsOf(chapters: readonly Chapter[], duration: number): [num
 }
 
 let last: { url: string; chapters: Chapter[] } | undefined;
+let requested: string | undefined;
 
 export function cachedChapters(url: string): Chapter[] | undefined {
 	return last?.url === url ? last.chapters : undefined;
@@ -28,7 +29,9 @@ export function cachedChapters(url: string): Chapter[] | undefined {
 
 /** 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[]> {
+	requested = url;
 	const chapters = await fetchChapters(url);
-	if (chapters.length > 0) last = { url, chapters };
+	// Only the latest request is kept, so a slower one for an earlier episode cannot evict it.
+	if (chapters.length > 0 && requested === url) last = { url, chapters };
 	return chapters;
 }

From e201c4da9dafbd515a9e5c93330e8862f2e7465c Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 02:02:27 +0200
Subject: [PATCH 25/30] fix(ui): keep every episode's loaded chapters and keep
 panel controls off during a media error

A one-entry chapters cache let a slower or earlier load evict the chapters
of the episode on screen, also after a return to that episode. Chapters now
stay per address for the session, so no load order can evict them. During a
media error at compact widths the current chapter label no longer opens a
panel, and disabled switches no longer take the hover style.

size: 98,859 gzip (+535 vs master f295af1 98,324)
---
 src/services/CaptureService.ts      |  1 +
 src/ui/PodcastView/Player.svelte    | 21 +++++++++------------
 src/ui/PodcastView/Player.test.ts   |  8 ++++++++
 src/ui/PodcastView/chapters.test.ts |  4 ++--
 src/ui/PodcastView/chapters.ts      |  9 +++------
 5 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/services/CaptureService.ts b/src/services/CaptureService.ts
index 6d067aa5..dfe18103 100644
--- a/src/services/CaptureService.ts
+++ b/src/services/CaptureService.ts
@@ -158,6 +158,7 @@ export class CaptureService {
 		);
 	}
 
+	/** False, leaving the note as it is, once the note no longer ends with `suffix`. */
 	private async unappend(file: TFile, suffix: string): Promise<boolean> {
 		// An open editor's buffer is the note: a vault write behind it could lose what it
 		// has not saved yet.
diff --git a/src/ui/PodcastView/Player.svelte b/src/ui/PodcastView/Player.svelte
index 774769d7..536db736 100644
--- a/src/ui/PodcastView/Player.svelte
+++ b/src/ui/PodcastView/Player.svelte
@@ -50,16 +50,12 @@
 	const duration = $derived($playerState.duration);
 	const elapsed = $derived(Math.min($playerState.currentTime, duration));
 	const panels = $derived<Panel[]>(chapters.length > 0 ? ["chapters", "queue"] : ["queue"]);
-	// At compact widths a media error takes the stage, so no panel shows meanwhile.
-	const shown = $derived(
-		failed && !wide
-			? undefined
-			: panel && panels.includes(panel)
-				? panel
-				: wide
-					? panels[0]
-					: undefined,
-	);
+	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));
@@ -325,6 +321,7 @@
 								type="button"
 								class="pn-chapnow"
 								title="Chapters"
+								disabled={failed && !wide}
 								onclick={() => (panel = "chapters")}
 								>{chapters[current].title}</button
 							>
@@ -696,7 +693,7 @@
 		font-variant-numeric: tabular-nums;
 	}
 
-	.pn-rate:hover span {
+	.pn-rate:hover:not(:disabled) span {
 		border-color: var(--background-modifier-border-focus);
 		color: var(--text-normal);
 	}
@@ -851,7 +848,7 @@
 		font-size: var(--font-ui-smaller);
 	}
 
-	.pn-player .pn-sw:hover {
+	.pn-player .pn-sw:hover:not(:disabled) {
 		background: var(--background-modifier-hover);
 		color: var(--text-normal);
 	}
diff --git a/src/ui/PodcastView/Player.test.ts b/src/ui/PodcastView/Player.test.ts
index 4ba1cc09..3a6c9092 100644
--- a/src/ui/PodcastView/Player.test.ts
+++ b/src/ui/PodcastView/Player.test.ts
@@ -273,6 +273,14 @@ describe("the full player", () => {
 		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 () => {
diff --git a/src/ui/PodcastView/chapters.test.ts b/src/ui/PodcastView/chapters.test.ts
index 77d65bfc..ab953691 100644
--- a/src/ui/PodcastView/chapters.test.ts
+++ b/src/ui/PodcastView/chapters.test.ts
@@ -49,7 +49,7 @@ describe("chapters", () => {
 		expect(cachedChapters("https://pod.test/other.json")).toBeUndefined();
 	});
 
-	test("a slower load for an earlier episode keeps the latest episode's chapters", async () => {
+	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 = () => {};
@@ -63,6 +63,6 @@ describe("chapters", () => {
 		await slow;
 
 		expect(cachedChapters(latest)).toEqual(chapters);
-		expect(cachedChapters(earlier)).toBeUndefined();
+		expect(cachedChapters(earlier)).toEqual([{ startTime: 0, title: "Earlier" }]);
 	});
 });
diff --git a/src/ui/PodcastView/chapters.ts b/src/ui/PodcastView/chapters.ts
index cd97a5eb..66a6e433 100644
--- a/src/ui/PodcastView/chapters.ts
+++ b/src/ui/PodcastView/chapters.ts
@@ -20,18 +20,15 @@ export function segmentsOf(chapters: readonly Chapter[], duration: number): [num
 	return bounds.slice(1).map((end, index) => [bounds[index], end]);
 }
 
-let last: { url: string; chapters: Chapter[] } | undefined;
-let requested: string | undefined;
+const loaded = new Map<string, Chapter[]>();
 
 export function cachedChapters(url: string): Chapter[] | undefined {
-	return last?.url === url ? last.chapters : 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[]> {
-	requested = url;
 	const chapters = await fetchChapters(url);
-	// Only the latest request is kept, so a slower one for an earlier episode cannot evict it.
-	if (chapters.length > 0 && requested === url) last = { url, chapters };
+	if (chapters.length > 0) loaded.set(url, chapters);
 	return chapters;
 }

From ce78e39d58f930e9d26ea039fd4d4b7295ca343c Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 03:51:44 +0200
Subject: [PATCH 26/30] fix(capture): bind Undo to where the capture put its
 text

Undo found an episode note capture by the note's ending, so after the user
wrote the same line again, an older Undo removed the later line and kept
its own. Undo also refused once the note's tab closed or switched to
Reading view, though the note had not changed.

Each capture now keeps where its text went: the offset, the text and the
selection it replaced. Undo takes the text out of an editor open on the
note, else out of the saved file in one vault.process, and only while that
exact range still holds exactly the inserted text. Text written after the
capture stays. Otherwise Undo leaves the note and says so.

size: 98,943 gzip (+607 vs master b14edf12 98,336)
---
 src/commands.test.ts           |  94 ++++++++++++++++++++++------
 src/services/CaptureService.ts | 108 ++++++++++++++++++++-------------
 2 files changed, 141 insertions(+), 61 deletions(-)

diff --git a/src/commands.test.ts b/src/commands.test.ts
index a0441329..338b3946 100644
--- a/src/commands.test.ts
+++ b/src/commands.test.ts
@@ -115,8 +115,9 @@ function fakeVault() {
 	};
 }
 
-/** `fileAt` gives the vault's file for a path, so a note opened in a tab is that file. */
-function fakeWorkspace(fileAt: (path: string) => TFile) {
+/** 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);
@@ -142,7 +143,14 @@ function fakeWorkspace(fileAt: (path: string) => TFile) {
 	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: fileAt(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);
@@ -163,7 +171,9 @@ function fakeWorkspace(fileAt: (path: string) => TFile) {
 			workspace.activeEditor = null;
 			trigger("active-leaf-change", podNotesLeaf);
 		},
+		/** Closes a tab, which saves its note first. */
 		close(leaf: WorkspaceLeaf) {
+			void (leaf.view as MarkdownView).save();
 			open.splice(open.indexOf(leaf), 1);
 			if (workspace.activeEditor === leaf.view) workspace.activeEditor = null;
 			trigger("layout-change");
@@ -176,7 +186,7 @@ const loaded: PodNotes[] = [];
 async function loadPlugin(data: Record<string, unknown>) {
 	const commands: obsidian.Command[] = [];
 	const { vault, read, notes } = fakeVault();
-	const workspace = fakeWorkspace((path) => notes.get(path)?.file ?? vaultFile(path));
+	const workspace = fakeWorkspace(notes);
 	const plugin = Object.create(PodNotes.prototype) as PodNotes;
 	Object.assign(plugin, {
 		loadData: vi.fn().mockResolvedValue(data),
@@ -411,6 +421,7 @@ describe("capture", () => {
 	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");
@@ -465,16 +476,38 @@ describe("capture", () => {
 			["its tab was closed", (tab: Tab) => tab.close()],
 			[
 				"its tab shows another note",
-				(tab: Tab) => ((tab.leaf.view as MarkdownView).file = vaultFile("Other.md")),
+				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");
+				},
 			],
-			["it was switched to Reading view", (tab: Tab) => tab.mode.mockReturnValue("preview")],
-		])("leaves an editor's timestamp once %s", async (_change, change) => {
-			const { editor, leaf, mode, close } = await intoEditor("Notes\n");
-			change({ leaf, mode, close: () => close(leaf) });
+		])("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(editor.getValue()).toBe("Notes\n- 00:20:34");
+			expect(read("Journal.md")).toBe("Re: Notes\n- 00:20:34");
 			expect(said()).toEqual(["Timestamp added to Journal", REFUSED]);
 		});
 
@@ -500,26 +533,51 @@ describe("capture", () => {
 			expect(said()).toEqual(["Created Saved Episode"]);
 		});
 
-		it("leaves the episode note's timestamp once the user wrote after it, and says so", async () => {
+		it("keeps what the user wrote after the episode note's timestamp", async () => {
 			const { plugin, notes, read } = await loadPlugin(playing);
 			await plugin.capture.timestamp();
 			notes.get(NOTE_PATH)!.content += "My thought\n";
 
 			await undo();
 
-			expect(read(NOTE_PATH)).toBe("# Saved Episode\n- 00:20:34\nMy thought\n");
-			expect(said()).toEqual(["Created Saved Episode", REFUSED]);
+			expect(read(NOTE_PATH)).toBe("# Saved Episode\nMy thought\n");
+			expect(said()).toEqual(["Created Saved Episode"]);
 		});
 
-		it("takes the timestamp out through the episode note's editor while it is open", async () => {
-			const { plugin, openNote, read } = await loadPlugin(playing);
+		it("takes out its own timestamp, not an identical one written after it, in the saved note", async () => {
+			const { plugin, notes, read } = await loadPlugin(playing);
+			notes.set(NOTE_PATH, { file: vaultFile(NOTE_PATH), content: "# Mine\n" });
 			await plugin.capture.timestamp();
-			const { editor } = openNote(NOTE_PATH, `Unsaved draft\n${read(NOTE_PATH)}`);
+			notes.get(NOTE_PATH)!.content += "A thought\n- 00:20:34\n";
 
 			await undo();
 
-			expect(editor.getValue()).toBe("Unsaved draft\n# Saved Episode");
-			expect(read(NOTE_PATH)).toBe("# Saved Episode\n- 00:20:34\n");
+			expect(read(NOTE_PATH)).toBe("# Mine\nA thought\n- 00:20:34\n");
+			expect(said()).toEqual(["Timestamp added to Saved Episode"]);
+		});
+
+		it("takes out its own timestamp, not an identical one written after it, in the 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)}A thought\n- 00:20:34\n`);
+
+			await undo();
+
+			expect(editor.getValue()).toBe("# Mine\nA thought\n- 00:20:34\n");
+			expect(read(NOTE_PATH)).toBe("# Mine\n- 00:20:34\n");
+		});
+
+		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 () => {
diff --git a/src/services/CaptureService.ts b/src/services/CaptureService.ts
index dfe18103..fc788806 100644
--- a/src/services/CaptureService.ts
+++ b/src/services/CaptureService.ts
@@ -23,6 +23,15 @@ export interface Capture {
 	created: boolean;
 }
 
+/** Where a capture put its text: `text` at `start`, in place of the `replaced` selection. */
+interface Insertion {
+	readonly start: number;
+	readonly text: string;
+	readonly replaced: string;
+	/** The newline put before `text` to start its line. */
+	readonly separated?: boolean;
+}
+
 /** Puts a capture where the user writes: the editor they used last, else the episode note. */
 export class CaptureService {
 	private activeLeaf: WorkspaceLeaf | null;
@@ -97,21 +106,22 @@ export class CaptureService {
 				lineCount: editor.lineCount(),
 				cursorLine: editor.getCursor("from").line,
 			});
-			const start = editor.posToOffset(editor.getCursor("from"));
-			const replaced = editor.getSelection();
+			const insertion: Insertion = {
+				start: editor.posToOffset(editor.getCursor("from")),
+				text: inserted,
+				replaced: editor.getSelection(),
+			};
 			editor.replaceSelection(inserted);
-			// A closed tab or a note switched to Reading view no longer edits. Canvas and
-			// embedded editors have no mode.
-			this.offer(
-				file,
-				false,
-				() =>
-					(!(target instanceof MarkdownView) ||
-						this.editingView(target.leaf) === target) &&
-					target.editor === editor &&
-					target.file === file &&
-					replaceExactly(editor, start, inserted, replaced),
-			);
+			// 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, insertion)
+					: () =>
+							target.editor === editor &&
+							target.file === file &&
+							revertIn(editor, insertion);
+			this.offer(file, false, undo);
 			return {
 				destination: "editor",
 				path: file?.path ?? "",
@@ -127,13 +137,15 @@ export class CaptureService {
 		try {
 			const { file, created } = await createPodcastNoteFileIfNotExists(episode);
 			const appended = text.endsWith("\n") ? text : `${text}\n`;
-			// Exactly what the append adds: the newline it has to add first, then the text.
-			let suffix = appended;
-			await this.plugin.app.vault.process(file, (content) => {
-				suffix = content.length > 0 && !content.endsWith("\n") ? `\n${appended}` : appended;
-				return content + suffix;
+			let separated = false;
+			const written = await this.plugin.app.vault.process(file, (content) => {
+				separated = content.length > 0 && !content.endsWith("\n");
+				return `${content}${separated ? "\n" : ""}${appended}`;
 			});
-			this.offer(file, created, () => this.unappend(file, suffix));
+			const start = written.length - appended.length;
+			this.offer(file, created, () =>
+				this.revert(file, { start, text: appended, replaced: "", separated }),
+			);
 			return { destination: "note", path: file.path, text: appended, created };
 		} catch (error) {
 			console.error("PodNotes: failed to capture timestamp into episode note", error);
@@ -158,25 +170,25 @@ export class CaptureService {
 		);
 	}
 
-	/** False, leaving the note as it is, once the note no longer ends with `suffix`. */
-	private async unappend(file: TFile, suffix: string): Promise<boolean> {
+	/**
+	 * Takes the insertion out of the note, in an editor open on it, else in the saved
+	 * file. False, leaving the note as it is, once the text there is not exactly the
+	 * inserted text.
+	 */
+	private async revert(file: TFile, insertion: Insertion): Promise<boolean> {
 		// An open editor's buffer is the note: a vault write behind it could lose what it
-		// has not saved yet.
-		const view = this.plugin.app.workspace
+		// has not saved yet. Obsidian saves a note as it leaves editing, so 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 (view) {
-			const value = view.editor.getValue();
-			return (
-				value.endsWith(suffix) &&
-				replaceExactly(view.editor, value.length - suffix.length, suffix, "")
-			);
-		}
+		if (editing) return revertIn(editing.editor, insertion);
 		try {
 			await this.plugin.app.vault.process(file, (content) => {
-				if (!content.endsWith(suffix)) throw new Error("The capture was edited");
-				return content.slice(0, -suffix.length);
+				const span = spanOf(content, insertion);
+				if (!span) throw new Error("The capture was edited");
+				return content.slice(0, span[0]) + insertion.replaced + content.slice(span[1]);
 			});
 			return true;
 		} catch {
@@ -201,14 +213,24 @@ export class CaptureService {
 	}
 }
 
-function replaceExactly(editor: Editor, start: number, text: string, replacement: string): boolean {
-	try {
-		const from = editor.offsetToPos(start);
-		const to = editor.offsetToPos(start + text.length);
-		if (editor.getRange(from, to) !== text) return false;
-		editor.replaceRange(replacement, from, to);
-		return true;
-	} catch {
-		return false;
-	}
+/**
+ * The insertion's range in `content` while its text is still exactly where it was put.
+ * With nothing after it, the newline put before it goes too, so the note ends as it did.
+ */
+function spanOf(content: string, { start, text, separated }: Insertion): [number, number] | null {
+	const end = start + text.length;
+	if (content.slice(start, end) !== text) return null;
+	const trailing = separated && end === content.length && content[start - 1] === "\n";
+	return [trailing ? start - 1 : start, end];
+}
+
+function revertIn(editor: Editor, insertion: Insertion): boolean {
+	const span = spanOf(editor.getValue(), insertion);
+	if (!span) return false;
+	editor.replaceRange(
+		insertion.replaced,
+		editor.offsetToPos(span[0]),
+		editor.offsetToPos(span[1]),
+	);
+	return true;
 }

From 8bef8e598129be4b72d634fa7d4fd0f2e8d27cda Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 03:51:44 +0200
Subject: [PATCH 27/30] test(e2e): drive an older Undo, Undo after the tab
 closed, and the transport during a media error

---
 tests/e2e/journey-notes.test.ts  | 78 ++++++++++++++++++++++++++++++--
 tests/e2e/journey-player.test.ts | 40 ++++++++++++++--
 2 files changed, 110 insertions(+), 8 deletions(-)

diff --git a/tests/e2e/journey-notes.test.ts b/tests/e2e/journey-notes.test.ts
index fedbf75e..decd2d35 100644
--- a/tests/e2e/journey-notes.test.ts
+++ b/tests/e2e/journey-notes.test.ts
@@ -224,6 +224,13 @@ async function editorText(path: string): Promise<string | null> {
 	);
 }
 
+/** Adds `text` to the end of the note at `path`, as a sync from another device does. */
+async function appendToNote(path: string, text: string): Promise<void> {
+	await getContext().obsidian.dev.evalJsonAsync(
+		`app.vault.append(app.vault.getAbstractFileByPath(${jsLiteral(path)}), ${jsLiteral(text)}).then(() => true)`,
+	);
+}
+
 /** 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();
@@ -696,7 +703,37 @@ describe("episode note and capture journeys", () => {
 		);
 	});
 
-	test("J-TS-15 Undo leaves an episode note written to since the capture, and says so", async () => {
+	test("J-TS-15 Undo takes out its own capture and keeps an identical line written after it", async () => {
+		const { obsidian } = getContext();
+		const journey = await setUp("Journey Undo Older");
+		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 later = `A thought\n${line}\n`;
+		await appendToNote(episodeNote, later);
+		await waitForText(
+			episodeNote,
+			(text) => text === `${created}${later}`,
+			"a thought and the same line written after it",
+		);
+		await click(obsidian, ui.undo("Created Original Title"));
+
+		const kept = `${created.slice(0, -`${line}\n`.length)}${later}`;
+		await waitForText(episodeNote, (text) => text === kept, "only the first capture taken out");
+		expect(await notices(obsidian)).not.toContainEqual(
+			expect.stringContaining("The note changed since"),
+		);
+	});
+
+	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);
@@ -710,11 +747,15 @@ describe("episode note and capture journeys", () => {
 			(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.append(app.vault.getAbstractFileByPath(${jsLiteral(episodeNote)}), ${jsLiteral("My thought\n")}).then(() => true)`,
+			`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",
 		);
-		const written = `${created}My thought\n`;
-		await waitForText(episodeNote, (text) => text === written, "a line written after it");
 		await click(obsidian, ui.undo("Created Original Title"));
 
 		await obsidian.waitFor(
@@ -724,7 +765,34 @@ describe("episode note and capture journeys", () => {
 				),
 			{ timeoutMs: 5_000, intervalMs: 100, message: "the Notice that Undo left the note" },
 		);
-		expect(await readVaultText(obsidian, episodeNote)).toBe(written);
+		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("The note changed since"),
+		);
 	});
 
 	test("J-TS-14 Capture Timestamp with nothing loaded says to play an episode, and writes nothing", async () => {
diff --git a/tests/e2e/journey-player.test.ts b/tests/e2e/journey-player.test.ts
index 69367dec..d522ea45 100644
--- a/tests/e2e/journey-player.test.ts
+++ b/tests/e2e/journey-player.test.ts
@@ -49,13 +49,13 @@ async function serve(): Promise<FixtureServer> {
 /** Restores `NOW` paused with `queue` queued, and shows PodNotes with the full player open. */
 async function openPlayer(
 	queue: readonly FixtureEpisode[],
-	current: Record<string, unknown> = {},
+	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 },
+		current: { ...storedEpisode(server, FEED, NOW), ...current(server) },
 		queue: queue.map((episode) => storedEpisode(server, FEED, episode)),
 	});
 	await showPodNotes(context.obsidian);
@@ -128,7 +128,7 @@ const focused = (target: UiTarget) =>
 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 openPlayer(QUEUED, () => ({ mediaType: "video" }));
 		await click(obsidian, ui.playbackToggle);
 		await waitForPlayback(
 			obsidian,
@@ -237,6 +237,40 @@ describe("player journeys", () => {
 		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]);

From 45467713104be8a91c6f38f0bb678c2e0945b2bb Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 04:27:05 +0200
Subject: [PATCH 28/30] fix(capture): undo only while the note is exactly as
 the capture left it

Matching the inserted text at its old offset was not identity: a copy of
the capture pasted before it sat at that offset, so Undo deleted the copy.
Undo also refused while a closing tab's save was still pending, with a
message that said the note had changed.

A capture now keeps the note's text before and after it. Undo restores the
text before only while the note, in its open editor or else its saved file,
equals the text after. Any other state refuses, including an edit anywhere
and a save still pending, with a message that holds in every case. In an
editor, Undo replaces only the changed stretch, so the caret and the
editor's own undo history stay.

size: 98,927 gzip (+591 vs master b14edf12 98,336)
---
 src/commands.test.ts           | 96 ++++++++++++++++++++++++----------
 src/services/CaptureService.ts | 96 +++++++++++++++-------------------
 2 files changed, 110 insertions(+), 82 deletions(-)

diff --git a/src/commands.test.ts b/src/commands.test.ts
index 338b3946..58a72e00 100644
--- a/src/commands.test.ts
+++ b/src/commands.test.ts
@@ -159,6 +159,13 @@ function fakeWorkspace(notes: ReturnType<typeof fakeVault>["notes"]) {
 		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. */
@@ -171,13 +178,12 @@ function fakeWorkspace(notes: ReturnType<typeof fakeVault>["notes"]) {
 			workspace.activeEditor = null;
 			trigger("active-leaf-change", podNotesLeaf);
 		},
-		/** Closes a tab, which saves its note first. */
+		/** Closes a tab, which saves its note. */
 		close(leaf: WorkspaceLeaf) {
-			void (leaf.view as MarkdownView).save();
-			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,
 	};
 }
 
@@ -258,7 +264,7 @@ async function undo() {
 	await new Promise((resolve) => setTimeout(resolve));
 }
 
-const REFUSED = "The note changed since, so the timestamp stays";
+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 {
@@ -437,25 +443,45 @@ describe("capture", () => {
 			expect(said()).toEqual(["Timestamp added to Journal"]);
 		});
 
-		it("keeps what the user typed after the timestamp", async () => {
+		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(" a great point", editor.offsetToPos(editor.getValue().length));
+			editor.replaceRange("- 00:20:34\nA thought\n", editor.offsetToPos(6));
 
 			await undo();
 
-			expect(editor.getValue()).toBe("Notes\n a great point");
+			expect(editor.getValue()).toBe("Notes\n- 00:20:34\nA thought\n- 00:20:34");
+			expect(said()).toEqual(["Timestamp added to Journal", REFUSED]);
 		});
 
-		it.each([
-			["before it", 0, "Re: Notes\n- 00:20:34"],
-			["inside it", 8, "Notes\n- 01:00:20:34"],
-		])("leaves the timestamp the user edited %s, and says so", async (_where, at, edited) => {
-			const { editor } = await intoEditor("Notes\n");
-			editor.replaceRange(at === 0 ? "Re: " : "01:", editor.offsetToPos(at));
+		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(editor.getValue()).toBe(edited);
+			expect(read("Journal.md")).toBe("Notes\n- 00:20:34");
 			expect(said()).toEqual(["Timestamp added to Journal", REFUSED]);
 		});
 
@@ -533,39 +559,51 @@ describe("capture", () => {
 			expect(said()).toEqual(["Created Saved Episode"]);
 		});
 
-		it("keeps what the user wrote after the episode note's timestamp", async () => {
+		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();
-			notes.get(NOTE_PATH)!.content += "My thought\n";
+			const note = notes.get(NOTE_PATH)!;
+			note.content = change(note.content);
+			const changed = note.content;
 
 			await undo();
 
-			expect(read(NOTE_PATH)).toBe("# Saved Episode\nMy thought\n");
-			expect(said()).toEqual(["Created Saved Episode"]);
+			expect(read(NOTE_PATH)).toBe(changed);
+			expect(said()).toEqual(["Timestamp added to Saved Episode", REFUSED]);
 		});
 
-		it("takes out its own timestamp, not an identical one written after it, in the saved note", async () => {
-			const { plugin, notes, read } = await loadPlugin(playing);
+		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();
-			notes.get(NOTE_PATH)!.content += "A thought\n- 00:20:34\n";
+			const { editor } = openNote(NOTE_PATH, `${read(NOTE_PATH)}Unsaved line\n`);
 
 			await undo();
 
-			expect(read(NOTE_PATH)).toBe("# Mine\nA thought\n- 00:20:34\n");
-			expect(said()).toEqual(["Timestamp added to Saved Episode"]);
+			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 out its own timestamp, not an identical one written after it, in the note's open editor", async () => {
+		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)}A thought\n- 00:20:34\n`);
+			const { editor } = openNote(NOTE_PATH, read(NOTE_PATH)!);
+			notes.get(NOTE_PATH)!.content = "on disk only";
 
 			await undo();
 
-			expect(editor.getValue()).toBe("# Mine\nA thought\n- 00:20:34\n");
-			expect(read(NOTE_PATH)).toBe("# Mine\n- 00:20:34\n");
+			expect(editor.getValue()).toBe("# Mine\n");
+			expect(read(NOTE_PATH)).toBe("on disk only");
 		});
 
 		it("leaves an episode note timestamp the user edited, and says so", async () => {
diff --git a/src/services/CaptureService.ts b/src/services/CaptureService.ts
index fc788806..fe9277e5 100644
--- a/src/services/CaptureService.ts
+++ b/src/services/CaptureService.ts
@@ -23,13 +23,10 @@ export interface Capture {
 	created: boolean;
 }
 
-/** Where a capture put its text: `text` at `start`, in place of the `replaced` selection. */
-interface Insertion {
-	readonly start: number;
-	readonly text: string;
-	readonly replaced: string;
-	/** The newline put before `text` to start its line. */
-	readonly separated?: 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. */
@@ -106,21 +103,18 @@ export class CaptureService {
 				lineCount: editor.lineCount(),
 				cursorLine: editor.getCursor("from").line,
 			});
-			const insertion: Insertion = {
-				start: editor.posToOffset(editor.getCursor("from")),
-				text: inserted,
-				replaced: editor.getSelection(),
-			};
+			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, insertion)
+					? () => this.revert(file, snapshot)
 					: () =>
 							target.editor === editor &&
 							target.file === file &&
-							revertIn(editor, insertion);
+							revertIn(editor, snapshot);
 			this.offer(file, false, undo);
 			return {
 				destination: "editor",
@@ -137,15 +131,14 @@ export class CaptureService {
 		try {
 			const { file, created } = await createPodcastNoteFileIfNotExists(episode);
 			const appended = text.endsWith("\n") ? text : `${text}\n`;
-			let separated = false;
-			const written = await this.plugin.app.vault.process(file, (content) => {
-				separated = content.length > 0 && !content.endsWith("\n");
-				return `${content}${separated ? "\n" : ""}${appended}`;
+			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}`;
 			});
-			const start = written.length - appended.length;
-			this.offer(file, created, () =>
-				this.revert(file, { start, text: appended, replaced: "", separated }),
-			);
+			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);
@@ -155,9 +148,8 @@ export class CaptureService {
 	}
 
 	/**
-	 * Says where the capture went, with an Undo that takes it back. `undo` removes the text
-	 * only while it is still exactly where it was put, so it never removes what the user
-	 * typed since, and returns false when it left the note as it is.
+	 * 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;
@@ -165,30 +157,27 @@ export class CaptureService {
 		noticeWithUndo(
 			created ? `Created ${name}` : name ? `Timestamp added to ${name}` : "Timestamp added",
 			async () => {
-				if (!(await undo())) new Notice("The note changed since, so the timestamp stays");
+				if (!(await undo())) {
+					new Notice("The note isn't as the capture left it, so the timestamp stays");
+				}
 			},
 		);
 	}
 
-	/**
-	 * Takes the insertion out of the note, in an editor open on it, else in the saved
-	 * file. False, leaving the note as it is, once the text there is not exactly the
-	 * inserted text.
-	 */
-	private async revert(file: TFile, insertion: Insertion): Promise<boolean> {
+	/** 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 a closed tab or
-		// one in Reading view leaves the file as the note.
+		// 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, insertion);
+		if (editing) return revertIn(editing.editor, snapshot);
 		try {
 			await this.plugin.app.vault.process(file, (content) => {
-				const span = spanOf(content, insertion);
-				if (!span) throw new Error("The capture was edited");
-				return content.slice(0, span[0]) + insertion.replaced + content.slice(span[1]);
+				if (content !== snapshot.after) throw new Error("The note changed");
+				return snapshot.before;
 			});
 			return true;
 		} catch {
@@ -214,23 +203,24 @@ export class CaptureService {
 }
 
 /**
- * The insertion's range in `content` while its text is still exactly where it was put.
- * With nothing after it, the newline put before it goes too, so the note ends as it did.
+ * Puts back only the stretch the capture changed, so the caret and the editor's own
+ * undo history stay.
  */
-function spanOf(content: string, { start, text, separated }: Insertion): [number, number] | null {
-	const end = start + text.length;
-	if (content.slice(start, end) !== text) return null;
-	const trailing = separated && end === content.length && content[start - 1] === "\n";
-	return [trailing ? start - 1 : start, end];
-}
-
-function revertIn(editor: Editor, insertion: Insertion): boolean {
-	const span = spanOf(editor.getValue(), insertion);
-	if (!span) return false;
+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(
-		insertion.replaced,
-		editor.offsetToPos(span[0]),
-		editor.offsetToPos(span[1]),
+		before.slice(from, before.length - tail),
+		editor.offsetToPos(from),
+		editor.offsetToPos(after.length - tail),
 	);
 	return true;
 }

From 4d55bba00a313b91574ea6881c47f2125985f7f9 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 04:27:05 +0200
Subject: [PATCH 29/30] test: refuse Undo after a pasted copy and while a
 closing tab's save is pending

---
 .../skills/verify/features/timestamps-uris.md |  2 +-
 src/main.activateView.test.ts                 |  3 +-
 tests/e2e/journey-notes.test.ts               | 82 +++++++++++++------
 3 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/.claude/skills/verify/features/timestamps-uris.md b/.claude/skills/verify/features/timestamps-uris.md
index d0cf185a..616ad0ba 100644
--- a/.claude/skills/verify/features/timestamps-uris.md
+++ b/.claude/skills/verify/features/timestamps-uris.md
@@ -9,7 +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 removes exactly the inserted text while it is still where it was put, else the Notice `The note changed since, so the timestamp stays` says it was left. A created note is kept.
+- `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`).
diff --git a/src/main.activateView.test.ts b/src/main.activateView.test.ts
index 3498fa7a..1c2c050a 100644
--- a/src/main.activateView.test.ts
+++ b/src/main.activateView.test.ts
@@ -598,8 +598,7 @@ describe("PodNotes onload wiring (#55)", () => {
 			getCursor: () => ({ line: 0, ch: 0 }),
 			getLine: () => "",
 			lineCount: () => 1,
-			getSelection: () => "",
-			posToOffset: () => 0,
+			getValue: () => "",
 			replaceSelection: vi.fn(),
 		};
 		Object.assign(plugin.app.workspace, {
diff --git a/tests/e2e/journey-notes.test.ts b/tests/e2e/journey-notes.test.ts
index decd2d35..e36de439 100644
--- a/tests/e2e/journey-notes.test.ts
+++ b/tests/e2e/journey-notes.test.ts
@@ -224,12 +224,7 @@ async function editorText(path: string): Promise<string | null> {
 	);
 }
 
-/** Adds `text` to the end of the note at `path`, as a sync from another device does. */
-async function appendToNote(path: string, text: string): Promise<void> {
-	await getContext().obsidian.dev.evalJsonAsync(
-		`app.vault.append(app.vault.getAbstractFileByPath(${jsLiteral(path)}), ${jsLiteral(text)}).then(() => true)`,
-	);
-}
+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> {
@@ -260,7 +255,7 @@ async function captureThenUndo(
 	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("The note changed since"),
+		expect.stringContaining(REFUSED),
 	);
 }
 
@@ -703,9 +698,9 @@ describe("episode note and capture journeys", () => {
 		);
 	});
 
-	test("J-TS-15 Undo takes out its own capture and keeps an identical line written after it", async () => {
+	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 Older");
+		const journey = await setUp("Journey Undo Pasted");
 		const episodeNote = notePath(journey.show, ORIGINAL.title);
 		await detachMarkdownTabs();
 		await playFromList(journey.show, ORIGINAL.title);
@@ -717,20 +712,28 @@ describe("episode note and capture journeys", () => {
 			(text) => text.endsWith(`\n${line}\n`),
 			"the capture in a new episode note",
 		);
-		const later = `A thought\n${line}\n`;
-		await appendToNote(episodeNote, later);
+		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 === `${created}${later}`,
-			"a thought and the same line written after it",
+			(text) => text === pasted,
+			"a copy pasted before the capture",
 		);
 		await click(obsidian, ui.undo("Created Original Title"));
 
-		const kept = `${created.slice(0, -`${line}\n`.length)}${later}`;
-		await waitForText(episodeNote, (text) => text === kept, "only the first capture taken out");
-		expect(await notices(obsidian)).not.toContainEqual(
-			expect.stringContaining("The note changed since"),
+		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 () => {
@@ -758,13 +761,11 @@ describe("episode note and capture journeys", () => {
 		);
 		await click(obsidian, ui.undo("Created Original Title"));
 
-		await obsidian.waitFor(
-			async () =>
-				(await notices(obsidian)).includes(
-					"The note changed since, so the timestamp stays",
-				),
-			{ timeoutMs: 5_000, intervalMs: 100, message: "the Notice that Undo left the note" },
-		);
+		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);
 	});
 
@@ -790,8 +791,37 @@ describe("episode note and capture journeys", () => {
 		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("The note changed since"),
+		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",
 		);
 	});
 

From d11513db6619fbd0713ed3c6165ffe27efc46844 Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Wed, 14 Oct 2026 06:07:36 +0200
Subject: [PATCH 30/30] test: refuse Undo when the note changed on disk before
 Obsidian's cache saw it

The unit vault fake now has cachedRead, read, modify and process, with a
cache that a change on disk does not update, as Obsidian's. A unit test and
J-TS-19 change the episode note behind that cache and click Undo: it must
refuse and keep the newer text. Both fail when Undo reads with cachedRead
and writes with modify instead of one vault.process.
---
 src/commands.test.ts            | 37 +++++++++++++++++++++++++----
 tests/e2e/journey-notes.test.ts | 41 +++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/src/commands.test.ts b/src/commands.test.ts
index 58a72e00..c4a40c26 100644
--- a/src/commands.test.ts
+++ b/src/commands.test.ts
@@ -91,8 +91,18 @@ function fakeEditor(text: string, caret = text.length) {
 	};
 }
 
+/**
+ * `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,
@@ -106,11 +116,16 @@ 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)),
 		},
 	};
 }
@@ -606,6 +621,20 @@ describe("capture", () => {
 			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();
diff --git a/tests/e2e/journey-notes.test.ts b/tests/e2e/journey-notes.test.ts
index e36de439..6e1ae700 100644
--- a/tests/e2e/journey-notes.test.ts
+++ b/tests/e2e/journey-notes.test.ts
@@ -825,6 +825,47 @@ describe("episode note and capture journeys", () => {
 		);
 	});
 
+	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");