diff --git a/.github/workflows/build-web-ext.yml b/.github/workflows/build-web-ext.yml
index 3e7f9443..c71f1def 100644
--- a/.github/workflows/build-web-ext.yml
+++ b/.github/workflows/build-web-ext.yml
@@ -20,10 +20,12 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Bun
-        uses: oven-sh/setup-bun@v1
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.3.14
 
       - name: Install Dependencies
-        run: cd web-ext && bun install
+        run: cd web-ext && bun install --frozen-lockfile
 
       - name: Build for Firefox
         run: cd web-ext && bun run build:firefox
@@ -35,10 +37,14 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Bun
-        uses: oven-sh/setup-bun@v1
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.3.14
 
       - name: Install Dependencies
-        run: cd web-ext && bun install
+        run: cd web-ext && bun install --frozen-lockfile
 
+      - name: Check
+        run: cd web-ext && bun run check
       - name: Build for Chrome
         run: cd web-ext && bun run build
diff --git a/AGENTS.md b/AGENTS.md
index 3d0f29e2..c8edb6fe 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -19,7 +19,7 @@ This file holds the rules that apply **everywhere in the repo**. Anything that a
 
 | You are touching | Read this too | What it is |
 | --- | --- | --- |
-| `web-ext/` | _(not written yet — root rules only)_ | Chrome/Firefox extension for YouTube |
+| `web-ext/` | [`AGENTS/web-ext.md`](AGENTS/web-ext.md) | Chrome/Firefox extension for YouTube |
 | `website/` | [`website/AGENTS.md`](website/AGENTS.md) | Next.js marketing and docs site (static export) |
 | `backend/` | [`backend/AGENTS.md`](backend/AGENTS.md) | Cloudflare Worker behind `/api` |
 | `assets/` | _(none)_ | Brand assets |
@@ -78,6 +78,7 @@ The repo predates this rule and still carries comments that break it. Do not lau
 - **Smallest diff that works.** Do not restructure files you were not asked to change. Do not add abstractions for a second caller that does not exist yet.
 - **Delete over add.** Removing dead code is a complete contribution.
 - **Match the surrounding file** in naming, import ordering, and idiom, even where it differs from your own preference.
+- **File order:** imports, then types, then module-level constants and state (selectors, ids, limits, caches, flags), then functions. A value built from the file's own helpers (a settings slice, a feature object, a catalogue) comes after the helpers it uses.
 - **No new dependencies** for something a few lines of platform or standard-library code already do. If a dependency is genuinely needed, say why before adding it.
 - **Never commit unless asked.** When asked, stage only the files your task touched — the working tree often carries unrelated in-progress work. No `Co-Authored-By` or agent-attribution trailers.
 - **Verify before claiming done.** Run the project's type-check or test command and report what it actually printed, including pre-existing failures you did not cause.
diff --git a/AGENTS/web-ext.md b/AGENTS/web-ext.md
new file mode 100644
index 00000000..a9526fe3
--- /dev/null
+++ b/AGENTS/web-ext.md
@@ -0,0 +1,128 @@
+# AGENTS/web-ext.md
+
+Scoped rules for `web-ext/`, the Chrome and Firefox extension. Read [`../AGENTS.md`](../AGENTS.md) first — its rules, especially the comment policy, apply here in full.
+
+---
+
+## 1. COMMANDS
+
+Run from `web-ext/`:
+
+| Command | What it does |
+| --- | --- |
+| `bun run dev` | Build into `dist/` (Chrome, MV3) and rebuild on change |
+| `bun run dev:firefox` | Same, transformed to MV2 |
+| `bun run build` / `build:firefox` | Production build |
+| `bun run check` | `tsc --noEmit` (app and `scripts/`), then `bun test` |
+| `bun run release` / `release:firefox` | Build, then zip `dist/` via `scripts/release.ts` |
+
+The build is `scripts/build.ts`: `Bun.build` per entry (IIFE, no code splitting), Tailwind through its PostCSS API from `tailwind.config.ts`, static copies, and the manifest transform. Set `DIST=<dir>` to build somewhere other than `dist/`, so a Chrome and a Firefox build can coexist. CSS is not imported from JS: the popup and options pages link their stylesheet; the content script ships none, because everything it injects is styled inside its own shadow roots.
+
+---
+
+## 2. ENTRY POINTS
+
+Five entries, all under `app/` (`scripts/build.ts`):
+
+| Entry | Source | Runs in |
+| --- | --- | --- |
+| `background` | `app/background/index.ts` | Service worker (MV3) / background page (MV2) |
+| `content` | `app/content/index.ts` | Injected into YouTube pages |
+| `popup` | `app/popup/index.tsx` | Toolbar popup |
+| `options` | `app/options/index.tsx` | Options page |
+| `offscreen` | `app/offscreen/index.ts` | Chrome only: a hidden page the service worker opens to read location (`lib/location.ts`) |
+
+The content script does one thing: `bootFeatures([...features], onNavigate, { enabled })`. The background serves feature messages, migrates the pre-kernel store, keeps the toolbar icon in step with the master switch, and runs profile schedules (`features/schedules/background.ts`) on a one-minute alarm, with their status on the toolbar badge.
+
+---
+
+## 3. THE KERNEL
+
+Every feature is one folder under `features/` exporting a `Feature` (`kernel/features.ts`). The kernel mounts a feature on each navigation that lands on one of its `routes` and calls the returned unmount on the next, so `mount` always starts from a clean page and never has to be idempotent. YouTube is a single-page app; `youtube/route.ts` turns its `yt-navigate-finish` event into a `Route`.
+
+A feature folder holds, as needed:
+
+- `settings.ts` — its slice: `defineSettings(id, defaults, { legacy?, area? })` (`kernel/settings.ts`), stored as `settings:<id>` in `chrome.storage.sync` (or `local` for data too big or personal to roam). `legacy` maps the pre-kernel store into the slice; `migrateSettings` runs each once. Pages read a slice with `useSettings`.
+- `keys.ts` — its keyboard actions: `defineKeys({ id, title, keys })` (`kernel/keys.ts`). A feature binds handlers at mount with `bindKeys`; the user's overrides live in the `keybindings` slice by action id (`playback.seekForward`); the Shortcuts page renders every group from the registries. Data-driven shortcuts (a saved segment config's own key) are the feature's business.
+- `messages.ts` — anything the background must do for it: `defineMessage(kind)` (`kernel/messaging.ts`), handled in a `background.ts` next to the feature.
+- `index.tsx` — the `Feature`. Where it needs a page element it asks `youtube/` (`resolveVideo`, `resolveRatePanel`, …), which wraps `resolveTarget` (`kernel/dom/resolve.ts`) around ordered selector strategies, and records the outcome with `setCapabilityStatus` so the options page can say a selector broke. `resolveTarget` skips elements that are not rendered, because YouTube keeps pages you left alive but hidden, and a bare `document.querySelector` can answer from one of those. Lookups inside something already resolved live (the player, the Shorts page) use `findWithin(root, strategies)` instead, which does not require visibility: there YouTube hides things on purpose, like the settings menu while closed. **Selectors live in `youtube/`, not in features.**
+- UI is Preact. `mount()` (`kernel/dom/mount.ts`) renders into a shadow root so YouTube's CSS and ours never meet; `mountInline()` renders into a host the caller shapes when the element must take YouTube's own classes (a `.ytp-button`, a settings-menu row). In-page styles read YouTube's colour tokens through `themeTokens` (`kernel/dom/theme.ts`) and so follow the page's theme. `showToast` (`kernel/dom/toast.tsx`) is the shared notice.
+- Profiles are built on primitives: `youtube/primitives.ts` catalogues each page knob (id, routes, strategies, `parse`, idempotent `apply`, `reset`), and `runPrimitives` (`kernel/primitives.ts`) keeps a set of values applied while the page re-renders and restores everything on stop.
+- Tests run under Bun with happy-dom; `test/setup.ts` registers the DOM and an in-memory `chrome.storage` that emits change events. A feature takes anything it cannot get from the page as a `deps` object (a fetcher, a storage) so tests mount it against HTML fixtures of each YouTube layout. `features/playlist-runtime/index.test.ts` and `features/segments/index.test.ts` are the patterns.
+
+Live verification covers both browsers. Chromium: Playwright loading the built `dist/`. Firefox: Puppeteer over WebDriver BiDi with `browser.installExtension`, launched with `-remote-allow-system-access`; BiDi will not navigate to `moz-extension://` pages directly, so a throwaway copy of the build lists `options/*` and `popup/*` as web-accessible and is reached from a normal page. Headless, logged-out YouTube serves older layouts than a signed-in browser, so a strategy list should carry both.
+
+---
+
+## 4. PAGES
+
+`app/popup/` and `app/options/` are Preact pages (`preact/hooks`; `preact/compat` only for portals). Options routes by hash (`app/options/router.ts`); the search box (`app/options/search/`) locates a result by its rendered label, so a copy edit in a page must land in `searchIndex.ts` too.
+
+The pages wear the Toppings brand, shared with the website: ink, bone and ember on `--color-*` tokens in `ui/theme.css`, Gloock for display (`tw-font-display`) and Instrument Sans for text, both bundled in `assets/fonts` so the popup never calls a third party. Only what Toppings draws inside YouTube takes YouTube's palette (`kernel/dom/theme.ts`). Tailwind runs prefixed and without preflight; `ui/base.css` is the reset, and sets the font on `body` because Chrome gives extension pages' body its own system font. Tailwind's opacity modifiers (`tw-bg-accent/50`) do nothing on these variable colours — use `color-mix` in a style attribute instead.
+
+---
+
+## 5. STORAGE
+
+| Layer | Holds | Accessed via |
+| --- | --- | --- |
+| `chrome.storage.sync` | Every settings slice, `settings:<id>` | `kernel/settings.ts` |
+| `chrome.storage.local` | The profile store (`settings:profiles`), schedules and places (`settings:schedules`), schedule state (`settings:schedule-state`), the capability cache (`toppings:capability:<id>`), feature reports, per-device UI flags | `features/profiles/store.ts`, `features/schedules/`, `kernel/dom/capabilities.ts`, `kernel/dom/featureReports.ts`, `lib/useChromeStorageLocal.ts` |
+| IndexedDB | Per-video segment data | `lib/indexedDb.ts`, `features/segments/store.ts` |
+
+Anything the options page or background must read goes in extension storage, never IndexedDB: a content script's IndexedDB belongs to youtube.com.
+
+A slice is read with its defaults merged in, which is also how a new setting reaches existing users. The pre-kernel store (`isExtensionEnabled`, `ui`, `preferences`) is migrated once by `app/background/migrations.ts` and then removed; `migrations.test.ts` pins the mapping.
+
+---
+
+## 6. MANIFEST AND VERSIONING
+
+- `app/manifest.json` is the **MV3 source of truth**. The MV2 Firefox variant is generated at build time by the transform in `scripts/build.ts` (flips `manifest_version`, folds `host_permissions` into `permissions`, renames `action` → `browser_action`, flattens `web_accessible_resources`). Never hand-maintain a second manifest; extend the transform.
+- Version lives in `lib/version.ts` as `EXTENSION_VERSION` and is injected into the manifest at build time; a pre-release suffix (`4.0.0-alpha`) goes to `version_name`, since `version` takes only numbers. It is mirrored in `website/lib/site.ts` (`site.version`) only on a store release — update both then.
+
+---
+
+## 7. LAYOUT
+
+```text
+web-ext/
+├── app/                 # The four surfaces, and only their shells
+│   ├── background/      # Install hooks, migrations, message handlers, icon
+│   ├── content/         # bootFeatures
+│   ├── options/         # Preact options page: router, layout, search, routes/
+│   ├── popup/           # Preact toolbar popup
+│   └── settings.ts      # The app slice: master switch and theme
+├── kernel/              # Feature contract, settings, keys, messaging, primitives,
+│                        # dom/ (resolve, mount, capabilities, reports, theme, toast)
+├── youtube/             # Routes, navigation, selectors per page area, the primitive catalogue
+├── features/            # One folder per thing the extension does
+│   ├── playback/        # Default rate, rate and seek keys, custom rates in the speed panel
+│   ├── playlist-runtime/# Runtime statistics on playlist and watch pages
+│   ├── profiles/        # Presets, profile store, gear-menu panel, native settings, import/export
+│   ├── segments/        # Engine, session, storage, markers, button, panel/
+│   └── shorts/          # Auto-scroll, rate and seek on Shorts
+├── lib/                 # Plumbing with no YouTube or kernel knowledge: storage keys,
+│                        # indexedDb, duration, urls, version, brand
+├── ui/                  # Shared page components: form, feedback, layout, primitives, theme
+├── test/                # Bun test preload
+└── scripts/             # build.ts (Bun.build + manifest transform), release.ts
+```
+
+Imports across folders use the `@/` root alias; same-folder imports stay relative. There are no barrel `index.ts` files: import the file that defines what you need. Options routes stay under `app/options/routes` because they do not map one-to-one onto features.
+
+A helper that only one feature uses lives in that feature's folder. It moves to `kernel/` when it is about running features, to `youtube/` when it is about YouTube's page, and to `lib/` only when it is neither.
+
+---
+
+## 8. YOUTUBE-SPECIFIC GOTCHAS
+
+- Selectors in `youtube/` target YouTube's markup and break when YouTube ships changes. They are the correct place for a "why" comment naming the layout variant a strategy targets.
+- YouTube's Polymer lists (the guide, the settings menu) drop foreign children when they re-render; anything injected into one must be put back on a `MutationObserver` (`features/profiles/index.tsx`).
+- The player's speed panel is a slider with preset chips, not a menu list; the playback feature replaces the chips and syncs the slider and display itself, because YouTube only redraws them from its own state.
+- The desktop player has no double-tap seek overlay to reuse; the playback feature draws its own.
+- An install or update cuts off the content script in open tabs (Firefox unloads it; Chrome leaves it running without the extension). The background starts the new one in those tabs, and a new copy dispatches `tppng:takeover` so an older one stops (`app/content/index.ts`); removing that handshake doubles every shortcut after an update.
+- `process.env.BROWSER` is `"chrome"` or `"firefox"` at build time and branches on it are folded away, so a Firefox bundle carries no Chrome-only API calls for AMO's linter to flag.
+- Location is asked for the way a website asks, from the options page; the manifest holds no location permission, because Chrome cannot make it optional and a required one pauses the extension for every user on update.
+- Firefox's `chrome.*` namespace is callback-only under MV2: called for a promise it returns `undefined`. The code calls `chrome.*` promise-style, and the Firefox build rewrites the global to `browser` (`scripts/build.ts`). Never pass callbacks to extension APIs, or the Firefox build breaks the other way.
+- YouTube's theme reaches shadow roots as `--yt-sys-color-baseline--*` custom properties on `<html>`; a shadow host reset with `all: initial` would discard them.
diff --git a/README.md b/README.md
index 0347fbfe..85ac78db 100644
--- a/README.md
+++ b/README.md
@@ -1,160 +1,106 @@
-# Toppings on YouTube
+<p align="center">
+  <img src="assets/logo-transparent.png" alt="" width="96" height="96" />
+</p>
 
-A customizable browser extension that gives you total control over YouTube—track playlist runtimes, fine-tune playback speed, auto-scroll Shorts, set custom seek durations, and more. Take control of your YouTube like never before.
+<h1 align="center">Toppings</h1>
 
----
-
-## Why Toppings?
-
-- **Track Playlist Runtimes**: Know exactly how much time you’ll spend binging playlists.
-- **Custom Playback Controls**: Set precise playback speeds and seek durations.
-- **Auto-Scroll Shorts**: Enjoy an uninterrupted flow of Shorts with automatic scrolling.
-- **Deep Personalization**: Tailor every feature to fit your workflow with custom keybindings.
-- **Privacy-First**: No data collection—your browsing remains yours.
-
----
-
-## Get Started
-
-- **[Download for Chrome](https://chrome.google.com/webstore/detail/toppings/aemiblppibhggpgijajindcmmomboibl)**
-- **[Download for Firefox](https://addons.mozilla.org/en-US/firefox/addon/toppings/)**
-
----
+<p align="center">
+  <strong>Your YouTube, your way.</strong><br />
+  A free, open-source browser extension that adds the controls YouTube's player is missing.
+</p>
 
-## Development
-
-Here’s how to set up Toppings for local development:
-
-### Prerequisites
-
-Ensure the following tools are installed:
-
-- [Bun](https://bun.sh/)
-- [Git](https://git-scm.com/)
-- A [Google API Key](https://console.developers.google.com/) with access to the YouTube API
-
-### 📁 Project Structure
-
-The repository is organized into three main directories:
-
-1. **web-ext**: Contains the browser extension code.
-2. **backend**: Server-side logic built with Cloudflare Workers.
-3. **website**: The official homepage of the Toppings extension, built with Next.js.
+<p align="center">
+  <a href="https://toppings.enry.ch">toppings.enry.ch</a> ·
+  <a href="https://chrome.google.com/webstore/detail/toppings/aemiblppibhggpgijajindcmmomboibl">Chrome Web Store</a> ·
+  <a href="https://addons.mozilla.org/en-US/firefox/addon/toppings/">Firefox Add-ons</a>
+</p>
 
 ---
 
-### 🏡 Local Development Setup
+I built Toppings because YouTube's player is missing things I wanted every day. It's a side project, it's free, and it stays that way. Everything it adds looks like YouTube, follows YouTube's light or dark theme, and gets out of the way.
 
-#### Setting Up the Extension
+## What it does
 
-1. Clone the repository:
+- **Profiles.** Presets that reshape YouTube in one switch. *Audio* covers the video with a waveform that moves with the sound and leaves the player's controls alone; press B to flip it on and off. *Focus* hides the sidebar, comments and end cards. You can make your own, give each its own shortcut, and export or import them as JSON.
+- **Schedules.** Turn a profile on during set hours (say Audio on weekdays 9 to 6) or while you're at a saved place, and back off afterwards. The toolbar badge and a note on YouTube tell you when a schedule takes over or is about to.
+- **Loop segments.** Mark in and out points and loop a section. You can also line up several segments, each with its own loop count and speed.
+- **Custom playback rates.** Speeds YouTube doesn't offer, from 0.0625× to 16×, right in the player's own speed panel.
+- **Toggle rate.** One key flips between 1× and your preferred fast rate.
+- **Seek shortcuts.** Jump back and forward by however many seconds you like.
+- **Shorts auto-scroll.** Moves on to the next Short when one ends.
+- **Playlist runtime.** Shows the total and average runtime at the top of every playlist.
 
-   ```bash
-   git clone https://github.com/enrych/toppings.git
-   cd toppings/web-ext
-   ```
+Every shortcut can be rebound. The defaults are listed at [toppings.enry.ch/docs/keybindings](https://toppings.enry.ch/docs/keybindings).
 
-2. Install dependencies:
+## Privacy
 
-   ```bash
-   bun install
-   ```
+There are no accounts, no analytics and no trackers. Your settings live in your browser's extension storage. The one exception is playlist runtime. YouTube's page doesn't expose video durations, so the extension sends the playlist ID to a small Cloudflare Worker at `toppings.enry.ch/api`, which asks the YouTube Data API. That's all it sends.
 
-3. Start development mode:
+## Docs
 
-   For Chrome:
+- [Getting started](https://toppings.enry.ch/docs)
+- [Keybindings](https://toppings.enry.ch/docs/keybindings)
+- [FAQ](https://toppings.enry.ch/docs/faq)
+- [Changelog](https://toppings.enry.ch/docs/changelog)
 
-   ```bash
-   bun run dev
-   ```
+## Hacking on it
 
-   For Firefox:
+The repo holds three projects, each on [Bun](https://bun.sh):
 
-   ```bash
-   bun run dev:firefox
-   ```
+| Folder | What it is |
+| --- | --- |
+| [`web-ext/`](web-ext) | The extension, for Chrome (MV3) and Firefox (MV2) from one codebase |
+| [`backend/`](backend) | The Cloudflare Worker behind `/api` |
+| [`website/`](website) | [toppings.enry.ch](https://toppings.enry.ch), a static Next.js export on Cloudflare Pages |
 
----
+If you use a coding agent, point it at [`AGENTS.md`](AGENTS.md) first. That file holds the house rules, and each project has its own scoped notes.
 
-#### Setting Up the Server (Optional)
+### Extension
 
-Some features require backend functionality. You can run the server locally using Cloudflare Workers.
+```bash
+cd web-ext
+bun install
+bun run dev            # builds dist/ for Chrome and rebuilds on change
+bun run dev:firefox    # same, as a Firefox MV2 build
+```
 
-1. Navigate to the backend directory:
+To load it in Chrome, open `chrome://extensions`, turn on Developer mode, click **Load unpacked** and pick `web-ext/dist`. In Firefox, open `about:debugging`, go to **This Firefox**, click **Load Temporary Add-on** and pick `web-ext/dist/manifest.json`.
 
-   ```bash
-   cd ../backend
-   ```
+`bun run check` type-checks and runs the tests. `bun run build` makes a production build.
 
-2. Install `wrangler` (if not already installed):
+Every build, dev included, asks the live API at `toppings.enry.ch/api` for playlist runtimes, so you don't need the backend running. To work on the Worker itself, point a build at it with `TOPPINGS_API=http://127.0.0.1:8787/api bun run dev`.
 
-   ```bash
-   npm install -g wrangler
-   ```
+### Backend
 
-3. Add your Google YouTube API secret in `.dev.vars`:
+You need a [YouTube Data API v3 key](https://console.cloud.google.com/apis/library/youtube.googleapis.com).
 
-   ```env
-   GOOGLE_SECRET=your-google-youtube-api-key
-   ```
+```bash
+cd backend
+bun install
+echo "YOUTUBE_DATA_API_V3_KEY=your-key" > .dev.vars   # gitignored
+bun run dev            # wrangler dev on http://127.0.0.1:8787
+```
 
-4. Start the server:
+### Website
 
-   ```bash
-   wrangler dev
-   ```
+```bash
+cd website
+bun install
+bun run dev
+```
 
----
+`bun run check` runs the type-check and lint. `bun run build` writes the static site to `out/`.
 
-#### Running the Website
+Pushes to `main` deploy the website and the backend. The extension ships to the stores by hand.
 
-1. Navigate to the `website` directory:
+## Bugs, ideas, help
 
-   ```bash
-   cd ../website
-   ```
+Found something broken or have an idea? [Open an issue](https://github.com/enrych/toppings/issues). YouTube changes its page often, so if a feature shows as unavailable in the options page, the **Report** button there fills in most of the issue for you.
 
-2. Install dependencies:
+## Add a topping
 
-   ```bash
-   bun install
-   ```
-
-3. Start the development server:
-
-   ```bash
-   bun run dev
-   ```
-
----
-
-## Feedback and Support
-
-Feedback is always welcome! If you enjoy Toppings, consider:
-
-- Leaving a ⭐ on [GitHub](https://github.com/enrych/toppings)
-- Reviewing on:
-  - [Chrome Web Store](https://chrome.google.com/webstore/detail/toppings/aemiblppibhggpgijajindcmmomboibl)
-  - [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/toppings/)
-
-Use these channels to get involved:
-
-- **Discussions**: For questions or feature ideas, join the [GitHub Discussions](https://github.com/enrych/toppings/discussions).
-- **Issues**: Report bugs or request features in the [Issues](https://github.com/enrych/toppings/issues) section.
-- **Wiki**: Find detailed documentation in the [GitHub wiki](https://github.com/enrych/toppings/wiki).
-
----
-
-## Support the Project
-
-Toppings is free and open-source. If you find it helpful, consider supporting the development through [sponsorships](https://darhkvoyd.me/sponsor).
-
-Your support helps improve Toppings and keeps it sustainable.
-
----
+Toppings is free and always will be. If it saves you time, you can [add a topping](https://darhkvoyd.me/sponsor) to keep it going. A ⭐ here or a review on the [Chrome Web Store](https://chrome.google.com/webstore/detail/toppings/aemiblppibhggpgijajindcmmomboibl) or [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/toppings/) helps a lot too.
 
 ## License
 
-Toppings is licensed under the [GPL-3.0 License](./LICENSE). You’re free to use, modify, and distribute the extension as long as your work complies with the GPL-3.0 terms.
-
-Happy coding! 😊
+[GPL-3.0](LICENSE). Fork it, change it, ship it. Keep it open.
diff --git a/backend/AGENTS.md b/backend/AGENTS.md
index 280dea54..aae9553b 100644
--- a/backend/AGENTS.md
+++ b/backend/AGENTS.md
@@ -11,7 +11,7 @@ A Cloudflare Worker serving `https://toppings.enry.ch/api/*` for the extension.
 
 ## Contract with the extension
 
-`web-ext/app/background/api.ts` calls these; change them together.
+`web-ext/features/playlist-runtime/background.ts` calls these; change them together.
 
 - `GET /api/ping` → `"pong"`
 - `GET /api/v1/playlist/:playlistId` → `{ scope: "playlist", payload: { playlistId, totalVideos, totalRuntime, averageRuntime } }`, runtimes in seconds. Errors are `{ status, error }` with the same HTTP status.
diff --git a/backend/src/index.ts b/backend/src/index.ts
index 673282ad..06374ce7 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -2,6 +2,8 @@ import { CORS, HttpError, json } from "./http";
 import { getPlaylistRuntime } from "./playlist";
 
 const PLAYLIST_PATH = /^\/api\/v1\/playlist\/([^/]+)$/;
+// Checked before any Data API call, so a junk ID costs no quota.
+const PLAYLIST_ID = /^[\w-]{2,64}$/;
 
 async function route(request: Request, env: Env): Promise<Response> {
   const { pathname } = new URL(request.url);
@@ -13,10 +15,11 @@ async function route(request: Request, env: Env): Promise<Response> {
 
   const playlist = PLAYLIST_PATH.exec(pathname);
   if (playlist) {
+    const playlistId = playlist[1];
+    if (!PLAYLIST_ID.test(playlistId)) throw new HttpError(400, "Invalid playlist ID");
     if (!env.YOUTUBE_DATA_API_V3_KEY) {
       throw new HttpError(500, "YOUTUBE_DATA_API_V3_KEY is not set");
     }
-    const playlistId = playlist[1];
     return json({
       scope: "playlist",
       payload: await getPlaylistRuntime(playlistId, env.YOUTUBE_DATA_API_V3_KEY),
diff --git a/backend/src/playlist.ts b/backend/src/playlist.ts
index 9fd45309..a025c9d5 100644
--- a/backend/src/playlist.ts
+++ b/backend/src/playlist.ts
@@ -1,13 +1,23 @@
 import { errorMessage, HttpError } from "./http";
 
+// Playlist pages come one after another, since each page's token arrives
+// with the page before it, but a page's durations need nothing further, so
+// they are fetched while the next page loads rather than before it.
 export async function getPlaylistRuntime(playlistId: string, apiKey: string) {
   let totalVideos = 0;
-  let totalRuntime = 0;
+  const durations: Promise<number>[] = [];
+  let failed = false;
 
   for await (const videoIds of fetchVideoIdsByPage(playlistId, apiKey)) {
     totalVideos += videoIds.length;
-    totalRuntime += await fetchDurationSeconds(videoIds, apiKey);
+    const duration = fetchDurationSeconds(videoIds, apiKey);
+    // The Promise.all below reports the failure; noting it here stops paging
+    // through a list whose answer is already lost, each page costing quota.
+    duration.catch(() => (failed = true));
+    durations.push(duration);
+    if (failed) break;
   }
+  const totalRuntime = (await Promise.all(durations)).reduce((sum, seconds) => sum + seconds, 0);
 
   return {
     playlistId,
@@ -48,12 +58,13 @@ async function fetchDurationSeconds(videoIds: string[], apiKey: string): Promise
   return total;
 }
 
-// YouTube writes durations as ISO 8601, e.g. PT1H2M3S, with any part optional.
+// YouTube writes durations as ISO 8601, e.g. PT1H2M3S or P1DT2H for a video
+// over a day, with any part optional; P0D is a live or upcoming stream.
 function toSeconds(isoDuration: string): number {
-  const match = /PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+(?:\.\d+)?)S)?/.exec(isoDuration);
+  const match = /^P(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+(?:\.\d+)?)S)?)?$/.exec(isoDuration);
   if (!match) return 0;
-  const [, hours = "0", minutes = "0", seconds = "0"] = match;
-  return Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds);
+  const [, days = "0", hours = "0", minutes = "0", seconds = "0"] = match;
+  return Number(days) * 86400 + Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds);
 }
 
 // The Data API answers 404 for a playlist that is private or deleted.
diff --git a/web-ext/app/background/index.ts b/web-ext/app/background/index.ts
new file mode 100644
index 00000000..8ba9833f
--- /dev/null
+++ b/web-ext/app/background/index.ts
@@ -0,0 +1,64 @@
+import { getFeatureReports, markRecovered, removeFeatureReport } from "@/kernel/dom/featureReports";
+import type { CapabilityCacheEntry } from "@/kernel/dom/capabilities";
+import { CHROME_STORAGE_LOCAL_KEY } from "@/lib/storageKeys";
+import { URLS } from "@/lib/urls";
+import { appSettings } from "@/app/settings";
+import { servePlaylistRuntime } from "@/features/playlist-runtime/background";
+import { runSchedules } from "@/features/schedules/background";
+import { migrateLegacyStore } from "./migrations";
+
+servePlaylistRuntime();
+runSchedules();
+
+// Also on every start, not only on install: on a new device, sync can deliver
+// the old settings after the install event has already run. Each slice is
+// migrated once, so repeating this is harmless.
+void migrateLegacyStore();
+
+chrome.runtime.onInstalled.addListener(async ({ reason }) => {
+  if (reason !== "install" && reason !== "update") return;
+  if (process.env.NODE_ENV === "production") {
+    void chrome.tabs.create({ url: URLS.GREETINGS });
+    void chrome.runtime.setUninstallURL(URLS.FAREWELL);
+  }
+  await migrateLegacyStore();
+  await startInOpenTabs();
+});
+
+// Tabs open across an install or update have no working Toppings until they
+// reload, since the old content script is cut off; this starts the new one.
+async function startInOpenTabs(): Promise<void> {
+  for (const tab of await chrome.tabs.query({ url: "https://www.youtube.com/*" })) {
+    if (tab.id === undefined) continue;
+    // A discarded or still-loading tab refuses; it gets the script when it loads.
+    void chrome.scripting.executeScript({ target: { tabId: tab.id, allFrames: true }, files: ["/content.js"] }).catch(() => {});
+  }
+}
+
+// The toolbar icon greys out while the master switch is off.
+function setIcon(enabled: boolean): void {
+  const prefix = enabled ? "" : "disabled_";
+  const path = Object.fromEntries([16, 32, 48, 128].map((size) => [size, `/assets/icons/${prefix}icon${size}.png`]));
+  // Firefox still ships MV2, where the toolbar button is browserAction.
+  // @ts-expect-error chrome-types only declares MV3
+  void (chrome.action ?? chrome.browserAction).setIcon({ path });
+}
+void appSettings.get().then((app) => setIcon(app.enabled));
+appSettings.subscribe((app) => setIcon(app.enabled));
+
+// A reported primitive that a content script now finds is marked recovered
+// for the options page to surface; after an update adds strategies, that is
+// the first YouTube page the new version loads.
+chrome.storage.onChanged.addListener((changes, area) => {
+  if (area !== "local") return;
+  for (const [key, change] of Object.entries(changes)) {
+    const entry = change.newValue as CapabilityCacheEntry | undefined;
+    if (key.startsWith(CHROME_STORAGE_LOCAL_KEY.CAPABILITY_PREFIX) && entry?.status === "supported") void resolveReport(entry.primitiveId);
+  }
+});
+
+async function resolveReport(primitiveId: string): Promise<void> {
+  if (!(await getFeatureReports()).some((report) => report.primitiveId === primitiveId)) return;
+  await markRecovered(primitiveId);
+  await removeFeatureReport(primitiveId);
+}
diff --git a/web-ext/app/background/migrations.test.ts b/web-ext/app/background/migrations.test.ts
new file mode 100644
index 00000000..681c043d
--- /dev/null
+++ b/web-ext/app/background/migrations.test.ts
@@ -0,0 +1,77 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+import { migrateLegacyStore } from "./migrations";
+import { appSettings } from "@/app/settings";
+import { playbackSettings } from "@/features/playback/settings";
+import { shortsSettings } from "@/features/shorts/settings";
+import { segmentsSettings } from "@/features/segments/settings";
+import { profilesSettings } from "@/features/profiles/settings";
+import { profileStore } from "@/features/profiles/store";
+import { keybindings } from "@/kernel/keys";
+
+const legacy = {
+  isExtensionEnabled: false,
+  ui: { theme: "light", gearMenuEnabled: true },
+  preferences: {
+    watch: {
+      isEnabled: true,
+      defaultPlaybackRate: { value: "1.5" },
+      togglePlaybackRate: { key: "T", value: "2" },
+      increasePlaybackRate: { key: "W", value: "0.5" },
+      seekBackward: { key: "A", value: "10" },
+      seekForward: { key: "D", value: "20" },
+      customPlaybackRates: ["1.00", "1.50"],
+      toggleLoopSegment: { key: "L" },
+      nudgeLoopSegment: { startBackwardKey: "Shift+Q", baseStep: "2", multiplier: "3", maxStep: "8" },
+      segments: { freshSlateKey: "Shift+Z", autoLoad: "last-used" },
+    },
+    shorts: { isEnabled: false, reelAutoScroll: { value: false }, togglePlaybackRate: { key: "X", value: "1.75" } },
+  },
+};
+
+beforeEach(async () => {
+  await chrome.storage.sync.clear();
+  await chrome.storage.local.clear();
+});
+
+describe("migrateLegacyStore", () => {
+  test("copies every slice out of the old store and drops the old keys", async () => {
+    await chrome.storage.sync.set(legacy);
+    await chrome.storage.local.set({ "toppings:profile_store": { activeProfileId: "preset:focus", profiles: [] } });
+    await migrateLegacyStore();
+
+    expect(await appSettings.get()).toEqual({ enabled: false, theme: "light" });
+    expect(await playbackSettings.get()).toEqual({ enabled: true, defaultRate: 1.5, toggleRate: 2, rateStep: 0.5, seekBackward: 10, seekForward: 20, customRates: [1, 1.5] });
+    expect(await shortsSettings.get()).toMatchObject({ enabled: false, autoScroll: false, toggleRate: 1.75, seekBackward: 5 });
+    expect(await segmentsSettings.get()).toEqual({ enabled: true, autoLoad: "last-used", nudgeBaseStep: 2, nudgeMultiplier: 3, nudgeMaxStep: 8 });
+    expect(await profilesSettings.get()).toEqual({ gearMenu: true, audioButton: true });
+    expect((await profileStore.get()).activeProfileId).toBe("preset:focus");
+    expect(await keybindings.get()).toEqual({ "playback.toggleRate": "T", "playback.increaseRate": "W", "playback.seekBackward": "A", "playback.seekForward": "D", "segments.toggle": "L", "segments.fresh": "Shift+Z", "segments.nudgeStartBackward": "Shift+Q", "shorts.toggleRate": "X" });
+    expect(Object.keys(await chrome.storage.sync.get()).filter((k) => !k.startsWith("settings:"))).toEqual([]);
+  });
+
+  test("a watch page switched off keeps segments off too", async () => {
+    await chrome.storage.sync.set({ preferences: { watch: { ...legacy.preferences.watch, isEnabled: false } } });
+    await migrateLegacyStore();
+    expect((await playbackSettings.get()).enabled).toBe(false);
+    expect((await segmentsSettings.get()).enabled).toBe(false);
+  });
+
+  test("3.x audio mode's key and player button carry over to the Audio profile", async () => {
+    await chrome.storage.sync.set({ preferences: { watch: { audioMode: { isEnabled: false, toggleAudioMode: { key: "Shift+B" } } } } });
+    await migrateLegacyStore();
+    expect((await keybindings.get())["profiles.preset:audio"]).toBe("Shift+B");
+    expect((await profilesSettings.get()).audioButton).toBe(false);
+  });
+
+  test("a fresh install keeps every default", async () => {
+    await migrateLegacyStore();
+    expect(await appSettings.get()).toEqual({ enabled: true, theme: "system" });
+    expect(await playbackSettings.get()).toEqual(playbackSettings.defaults);
+  });
+
+  test("runs once: a slice the user already changed is left alone", async () => {
+    await chrome.storage.sync.set({ ...legacy, "settings:app": { enabled: true, theme: "dark" } });
+    await migrateLegacyStore();
+    expect(await appSettings.get()).toEqual({ enabled: true, theme: "dark" });
+  });
+});
diff --git a/web-ext/app/background/migrations.ts b/web-ext/app/background/migrations.ts
new file mode 100644
index 00000000..4e353291
--- /dev/null
+++ b/web-ext/app/background/migrations.ts
@@ -0,0 +1,59 @@
+import { keybindings } from "@/kernel/keys";
+import { appSettings } from "@/app/settings";
+import { migrateSettings, type Settings } from "@/kernel/settings";
+import { playlistRuntimeSettings } from "@/features/playlist-runtime/settings";
+import { shortsSettings } from "@/features/shorts/settings";
+import { playbackSettings } from "@/features/playback/settings";
+import { profilesSettings } from "@/features/profiles/settings";
+import { profileStore } from "@/features/profiles/store";
+import { segmentsSettings } from "@/features/segments/settings";
+
+// Where each action's binding lived in the pre-kernel store, by action id.
+const LEGACY_BINDINGS: Record<string, string> = {
+  "playback.toggleRate": "preferences.watch.togglePlaybackRate.key",
+  "playback.increaseRate": "preferences.watch.increasePlaybackRate.key",
+  "playback.decreaseRate": "preferences.watch.decreasePlaybackRate.key",
+  "playback.seekBackward": "preferences.watch.seekBackward.key",
+  "playback.seekForward": "preferences.watch.seekForward.key",
+  "profiles.cycle": "preferences.watch.cycleProfiles.key",
+  "segments.toggle": "preferences.watch.toggleLoopSegment.key",
+  "segments.fresh": "preferences.watch.segments.freshSlateKey",
+  "segments.setStart": "preferences.watch.setLoopSegmentBegin.key",
+  "segments.setEnd": "preferences.watch.setLoopSegmentEnd.key",
+  "segments.save": "preferences.watch.saveLoopSegment.key",
+  "segments.nudgeStartBackward": "preferences.watch.nudgeLoopSegment.startBackwardKey",
+  "segments.nudgeStartForward": "preferences.watch.nudgeLoopSegment.startForwardKey",
+  "segments.nudgeEndBackward": "preferences.watch.nudgeLoopSegment.endBackwardKey",
+  "segments.nudgeEndForward": "preferences.watch.nudgeLoopSegment.endForwardKey",
+  "shorts.toggleRate": "preferences.shorts.togglePlaybackRate.key",
+  "shorts.seekBackward": "preferences.shorts.seekBackward.key",
+  "shorts.seekForward": "preferences.shorts.seekForward.key",
+  "profiles.preset:audio": "preferences.watch.audioMode.toggleAudioMode.key",
+};
+
+// The pre-kernel store lived under these three keys; once every slice has
+// had its chance to copy from them they are dropped.
+const LEGACY_KEYS = ["isExtensionEnabled", "ui", "preferences"];
+
+function read(store: Record<string, unknown>, path: string): unknown {
+  return path.split(".").reduce<unknown>((node, part) => (node as Record<string, unknown> | undefined)?.[part], store);
+}
+
+const legacyKeybindings: Settings<Record<string, string>> = {
+  ...keybindings,
+  legacy(store) {
+    const bindings: Record<string, string> = {};
+    for (const [action, path] of Object.entries(LEGACY_BINDINGS)) {
+      const value = read(store, path);
+      if (typeof value === "string") bindings[action] = value;
+    }
+    return Object.keys(bindings).length ? bindings : undefined;
+  },
+};
+
+export async function migrateLegacyStore(): Promise<void> {
+  await migrateSettings([appSettings, playlistRuntimeSettings, shortsSettings, playbackSettings, profilesSettings, profileStore, segmentsSettings, legacyKeybindings]);
+  // Only when present: this runs at every background start, and each removal
+  // counts against sync's write quota.
+  if (Object.keys(await chrome.storage.sync.get(LEGACY_KEYS)).length) await chrome.storage.sync.remove(LEGACY_KEYS);
+}
diff --git a/web-ext/app/content/index.ts b/web-ext/app/content/index.ts
new file mode 100644
index 00000000..5d68dd81
--- /dev/null
+++ b/web-ext/app/content/index.ts
@@ -0,0 +1,43 @@
+import { bootFeatures, type Booted } from "@/kernel/features";
+import { onNavigate } from "@/youtube/route";
+import { appSettings } from "@/app/settings";
+import { playlistRuntime } from "@/features/playlist-runtime";
+import { shorts } from "@/features/shorts";
+import { playback } from "@/features/playback";
+import { profiles } from "@/features/profiles";
+import { segments } from "@/features/segments";
+import { scheduleNotices } from "@/features/schedules";
+
+const TAKEOVER_EVENT = "tppng:takeover";
+
+// An update cuts off the content script in tabs already open: Firefox unloads
+// it, Chrome leaves it running without the extension. The background starts
+// this copy in those tabs, and it asks an older one to step down first, or
+// every shortcut would fire twice.
+document.dispatchEvent(new Event(TAKEOVER_EVENT));
+let booted: Booted | undefined;
+let handedOver = false;
+document.addEventListener(
+  TAKEOVER_EVENT,
+  () => {
+    handedOver = true;
+    booted?.stop();
+  },
+  { once: true },
+);
+
+// Booted only once the master switch is known: the first navigation mounts
+// at once, and with the switch off it must not, say, apply the default rate.
+// A read that fails leaves the defaults, so Toppings still runs.
+void appSettings.get().catch(() => appSettings.defaults).then((app) => {
+  if (handedOver) return;
+  let enabled = app.enabled;
+  booted = bootFeatures([playlistRuntime, shorts, playback, profiles, segments, scheduleNotices], onNavigate, { enabled: () => enabled });
+
+  // The app slice also holds the theme, which features do not read.
+  appSettings.subscribe((next) => {
+    if (next.enabled === enabled) return;
+    enabled = next.enabled;
+    booted?.refresh();
+  });
+});
diff --git a/web-ext/src/manifest.json b/web-ext/app/manifest.json
similarity index 66%
rename from web-ext/src/manifest.json
rename to web-ext/app/manifest.json
index e27a0b6f..a633dec5 100644
--- a/web-ext/src/manifest.json
+++ b/web-ext/app/manifest.json
@@ -7,26 +7,29 @@
       "48": "assets/icons/icon48.png",
       "128": "assets/icons/icon128.png"
     },
-    "default_title": "__MSG_popupTitle__",
+    "default_title": "Toppings",
     "default_popup": "popup/index.html"
   },
   "author": "Enrych",
   "background": {
     "service_worker": "/background.js"
   },
-  "commands": {},
   "content_scripts": [
     {
       "all_frames": true,
-      "js": ["/content.js"],
-      "matches": ["https://www.youtube.com/*"],
+      "js": [
+        "/content.js"
+      ],
+      "matches": [
+        "https://www.youtube.com/*"
+      ],
       "run_at": "document_end"
     }
   ],
-  "default_locale": "en",
-  "description": "__MSG_description__",
-  "homepage_url": "https://enrych.github.io/toppings",
-  "host_permissions": ["*://*.youtube.com/*"],
+  "description": "Your YouTube, your way.",
+  "host_permissions": [
+    "*://*.youtube.com/*"
+  ],
   "icons": {
     "16": "assets/icons/icon16.png",
     "32": "assets/icons/icon32.png",
@@ -39,13 +42,21 @@
     "open_in_tab": true,
     "page": "/options/index.html"
   },
-  "permissions": ["webNavigation", "storage"],
+  "permissions": [
+    "alarms",
+    "offscreen",
+    "scripting",
+    "storage"
+  ],
   "short_name": "Toppings",
-  "version": "0.0.0",
   "web_accessible_resources": [
     {
-      "matches": ["https://*/*"],
-      "resources": ["assets/*"]
+      "matches": [
+        "https://*/*"
+      ],
+      "resources": [
+        "assets/*"
+      ]
     }
   ]
 }
diff --git a/web-ext/app/offscreen/index.html b/web-ext/app/offscreen/index.html
new file mode 100644
index 00000000..914d08e9
--- /dev/null
+++ b/web-ext/app/offscreen/index.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<script src="index.js"></script>
diff --git a/web-ext/app/offscreen/index.ts b/web-ext/app/offscreen/index.ts
new file mode 100644
index 00000000..d611fbd8
--- /dev/null
+++ b/web-ext/app/offscreen/index.ts
@@ -0,0 +1,3 @@
+import { answerLocationRequests } from "@/lib/location";
+
+answerLocationRequests();
diff --git a/web-ext/app/options/App.tsx b/web-ext/app/options/App.tsx
new file mode 100644
index 00000000..b25a0175
--- /dev/null
+++ b/web-ext/app/options/App.tsx
@@ -0,0 +1,49 @@
+import type { ComponentType } from "preact";
+import { useTheme } from "@/ui/useTheme";
+import { ToastProvider } from "@/ui/feedback/ToastProvider";
+import SectionNav from "@/ui/layout/SectionNav";
+import { OPTIONS_PAGES } from "./data";
+import { useRoute } from "./router";
+import Sidebar from "./layout/Sidebar";
+import General from "./routes/General";
+import Watch from "./routes/Watch";
+import Shorts from "./routes/Shorts";
+import Playlist from "./routes/Playlist";
+import Profiles from "./routes/Profiles";
+import Shortcuts from "./routes/Shortcuts";
+
+const PAGE_BY_SEGMENT: Record<string, ComponentType> = {
+  "": General,
+  watch: Watch,
+  shorts: Shorts,
+  playlist: Playlist,
+  profiles: Profiles,
+  shortcuts: Shortcuts,
+};
+
+export default function App() {
+  useTheme();
+  const segment = useRoute();
+  const page = OPTIONS_PAGES.find((p) => p.segment === segment) ?? OPTIONS_PAGES[0];
+  const Page = PAGE_BY_SEGMENT[page.segment];
+
+  return (
+    <ToastProvider>
+      <div class="tw-min-h-screen tw-flex tw-bg-bg tw-text-fg">
+        <Sidebar />
+        <main class="tw-flex-1 tw-min-w-0">
+          <div class="tw-mx-auto tw-max-w-5xl tw-px-10 tw-py-8 tw-flex tw-gap-10 tw-items-start">
+            <div class="tw-flex-1 tw-min-w-0">
+              <Page key={page.segment} />
+            </div>
+            {page.sections && (
+              <div class="tw-w-44 tw-flex-shrink-0 tw-hidden lg:tw-block tw-sticky tw-top-6">
+                <SectionNav items={page.sections} />
+              </div>
+            )}
+          </div>
+        </main>
+      </div>
+    </ToastProvider>
+  );
+}
diff --git a/web-ext/app/options/components/CapabilityStatusRow.tsx b/web-ext/app/options/components/CapabilityStatusRow.tsx
new file mode 100644
index 00000000..57236f3e
--- /dev/null
+++ b/web-ext/app/options/components/CapabilityStatusRow.tsx
@@ -0,0 +1,99 @@
+import { useState } from "preact/hooks";
+import Button from "@/ui/primitives/Button";
+import { EXTENSION_VERSION } from "@/lib/version";
+import type { CapabilityStatus } from "@/kernel/dom/capabilities";
+import { addFeatureReport } from "@/kernel/dom/featureReports";
+
+interface CapabilityStatusRowProps {
+  label: string;
+  primitiveId: string; // e.g. "watch.sidebar"
+  status: CapabilityStatus;
+}
+
+const STATUS_CONFIG: Record<
+  CapabilityStatus,
+  { dot: string; text: string; hint: string }
+> = {
+  supported: {
+    dot: "tw-bg-green-500",
+    text: "Working",
+    hint: "This feature is active on your YouTube.",
+  },
+  unsupported: {
+    dot: "tw-bg-amber-500",
+    text: "Unavailable on your YouTube",
+    hint: "YouTube's UI on your account doesn't match any known layout for this feature.",
+  },
+  untested: {
+    dot: "tw-bg-fg-subtle",
+    text: "Not yet checked",
+    hint: "Visit a YouTube watch page to check this feature.",
+  },
+};
+
+export default function CapabilityStatusRow({
+  label,
+  primitiveId,
+  status,
+}: CapabilityStatusRowProps) {
+  const config = STATUS_CONFIG[status];
+  const [reported, setReported] = useState(false);
+
+  const handleReport = async () => {
+    // Stored before the issue is opened so the next update can tell the user
+    // their report started working, whether or not they submit the issue.
+    await addFeatureReport(primitiveId);
+    setReported(true);
+
+    const title = encodeURIComponent(
+      `[Report] Feature unavailable: ${label} (${primitiveId})`,
+    );
+    const body = encodeURIComponent(
+      [
+        `**Feature:** ${label}`,
+        `**Primitive ID:** \`${primitiveId}\``,
+        `**Extension version:** ${EXTENSION_VERSION}`,
+        `**Browser:** ${navigator.userAgent}`,
+        "",
+        "### What happened",
+        "This feature shows as unavailable in my Toppings options page.",
+        "",
+        "### Steps to reproduce",
+        "1. Install Toppings",
+        "2. Open YouTube watch page",
+        "3. Open Options → Watch → Feature Availability",
+        `4. "${label}" shows as unavailable`,
+      ].join("\n"),
+    );
+    window.open(
+      `https://github.com/enrych/toppings/issues/new?title=${title}&body=${body}&labels=Type%3A+Bug+%F0%9F%90%9B%2CStatus%3A+Needs+Investigation`,
+      "_blank",
+    );
+  };
+
+  return (
+    <div class="tw-w-full tw-flex tw-items-center tw-justify-between tw-gap-4 tw-py-3">
+      <div class="tw-flex tw-flex-col tw-gap-0.5">
+        <span
+          class={`tw-text-[15px] tw-font-medium tw-leading-tight ${
+            status === "unsupported" ? "tw-text-fg-muted" : "tw-text-fg"
+          }`}
+        >
+          {label}
+        </span>
+        <div class="tw-flex tw-items-center tw-gap-1.5">
+          <span
+            class={`tw-inline-block tw-w-2 tw-h-2 tw-rounded-full tw-flex-shrink-0 ${config.dot}`}
+          />
+          <span class="tw-text-xs tw-text-fg-subtle">{config.text}</span>
+        </div>
+      </div>
+
+      {status === "unsupported" && (
+        <Button size="sm" onClick={() => void handleReport()} disabled={reported} title={reported ? "Reported. The next update will tell you when it works again." : "Report this feature as unavailable"}>
+          {reported ? "Reported" : "Report"}
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/web-ext/app/options/components/Schedules.test.ts b/web-ext/app/options/components/Schedules.test.ts
new file mode 100644
index 00000000..01fae03c
--- /dev/null
+++ b/web-ext/app/options/components/Schedules.test.ts
@@ -0,0 +1,172 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { h, render } from "preact";
+import { act } from "preact/test-utils";
+import { ToastProvider } from "@/ui/feedback/ToastProvider";
+import { getAllProfiles } from "@/features/profiles/store";
+import { schedulesStore, type Place, type Schedule } from "@/features/schedules/settings";
+import { scheduleState } from "@/features/schedules/state";
+import Schedules from "./Schedules";
+
+const root = document.createElement("div");
+document.body.append(root);
+const originalGeolocation = navigator.geolocation;
+
+const settle = () => act(() => new Promise((r) => setTimeout(r, 20)));
+
+const mount = async () => {
+  const profiles = await getAllProfiles();
+  act(() => {
+    render(h(ToastProvider, null, h(Schedules, { profiles })), root);
+  });
+  await settle();
+};
+
+const buttonNamed = (text: string) => [...root.querySelectorAll("button")].find((b) => b.textContent === text)!;
+const inputLabelled = (label: string) => {
+  const el = [...root.querySelectorAll("label")].find((l) => l.textContent === label)!;
+  return root.querySelector<HTMLInputElement>(`[id="${el.htmlFor}"]`)!;
+};
+const type = (input: HTMLInputElement, value: string) =>
+  act(() => {
+    input.value = value;
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+
+const work: Place = { id: "work", name: "Work", latitude: 51.5, longitude: -0.12, radiusMeters: 200 };
+const weekdays: Schedule = { id: "a", profileId: "preset:audio", enabled: true, rule: { kind: "time", days: [1, 2, 3, 4, 5], start: "09:00", end: "18:00" } };
+const atWork: Schedule = { id: "b", profileId: "preset:focus", enabled: true, rule: { kind: "place", placeId: "work" } };
+
+beforeEach(async () => {
+  await chrome.storage.local.clear();
+});
+afterEach(() => {
+  act(() => render(null, root));
+  document.body.replaceChildren(root);
+  Object.defineProperty(navigator, "geolocation", { value: originalGeolocation, configurable: true });
+});
+
+describe("Schedules", () => {
+  test("adding a time schedule stores its profile, days and window", async () => {
+    await mount();
+    act(() => buttonNamed("New schedule").click());
+    act(() => buttonNamed("Sat").click());
+    act(() => buttonNamed("Mon").click());
+    type(inputLabelled("Starts"), "22:00");
+    type(inputLabelled("Ends"), "06:30");
+    expect(root.textContent).toContain("Runs overnight");
+    act(() => buttonNamed("Add schedule").click());
+    await settle();
+
+    const { schedules } = await schedulesStore.get();
+    expect(schedules).toHaveLength(1);
+    expect(schedules[0]).toEqual({
+      id: expect.any(String),
+      profileId: "preset:audio",
+      enabled: true,
+      rule: { kind: "time", days: [2, 3, 4, 5, 6], start: "22:00", end: "06:30" },
+    });
+    expect(root.textContent).toContain("Audio · Tue–Sat 22:00–06:30 overnight");
+  });
+
+  test("an empty week or a zero-length window is refused", async () => {
+    await mount();
+    act(() => buttonNamed("New schedule").click());
+    type(inputLabelled("Ends"), "09:00");
+    expect(root.textContent).toContain("End at a different time from the start.");
+    expect(root.textContent).not.toContain("Runs overnight");
+    type(inputLabelled("Ends"), "17:00");
+    for (const day of ["Mon", "Tue", "Wed", "Thu", "Fri"]) act(() => buttonNamed(day).click());
+    expect(root.textContent).toContain("Pick at least one day.");
+    expect(buttonNamed("Add schedule").disabled).toBe(true);
+  });
+
+  test("toggling and reordering persist, and list order is what is stored", async () => {
+    await schedulesStore.set({ schedules: [weekdays, atWork], places: [work] });
+    await mount();
+    expect(root.textContent).toContain("Focus · while at Work");
+
+    const toggle = root.querySelector<HTMLButtonElement>("[role='switch'][aria-label='Focus · while at Work, enabled']")!;
+    act(() => toggle.click());
+    await settle();
+    expect((await schedulesStore.get()).schedules.map((s) => s.enabled)).toEqual([true, false]);
+
+    const moveUp = root.querySelectorAll<HTMLButtonElement>("button[aria-label='Move up']");
+    expect(moveUp[0].disabled).toBe(true);
+    act(() => moveUp[1].click());
+    await settle();
+    expect((await schedulesStore.get()).schedules.map((s) => s.id)).toEqual(["b", "a"]);
+  });
+
+  test("adding a place stores where the browser says you are, with the radius", async () => {
+    Object.defineProperty(navigator, "geolocation", {
+      configurable: true,
+      value: {
+        getCurrentPosition: (ok: PositionCallback) => ok({ coords: { latitude: 48.8566, longitude: 2.3522, accuracy: 35 } } as GeolocationPosition),
+      },
+    });
+    await mount();
+    act(() => buttonNamed("New place").click());
+    act(() => buttonNamed("Save place").click());
+    expect(root.textContent).toContain("Give the place a name.");
+
+    type(inputLabelled("Name"), " Office ");
+    type(inputLabelled("Radius"), "20");
+    expect(root.textContent).toContain("Enter a whole number from 50 to 2000.");
+    type(inputLabelled("Radius"), "300");
+    act(() => buttonNamed("Use my current location").click());
+    await settle();
+    expect(root.textContent).toContain("accurate to about 35 m");
+    act(() => buttonNamed("Save place").click());
+    await settle();
+
+    expect((await schedulesStore.get()).places).toEqual([{ id: expect.any(String), name: "Office", latitude: 48.8566, longitude: 2.3522, radiusMeters: 300 }]);
+  });
+
+  test("a fix looser than the radius warns, and a refusal says why", async () => {
+    let answer: "loose" | "denied" = "loose";
+    Object.defineProperty(navigator, "geolocation", {
+      configurable: true,
+      value: {
+        getCurrentPosition: (ok: PositionCallback, fail: PositionErrorCallback) =>
+          answer === "loose"
+            ? ok({ coords: { latitude: 1, longitude: 2, accuracy: 900 } } as GeolocationPosition)
+            : fail({ message: "User denied Geolocation" } as GeolocationPositionError),
+      },
+    });
+    await mount();
+    act(() => buttonNamed("New place").click());
+    act(() => buttonNamed("Use my current location").click());
+    await settle();
+    expect(root.textContent).toContain("looser than the radius");
+    answer = "denied";
+    act(() => buttonNamed("Locate again").click());
+    await settle();
+    expect(root.textContent).toContain("Location unavailable: User denied Geolocation.");
+  });
+
+  test("a place a schedule uses cannot be deleted until the schedule is", async () => {
+    await schedulesStore.set({ schedules: [atWork], places: [work] });
+    await mount();
+    expect(root.textContent).toContain("used by 1 schedule");
+    const deletePlace = () => [...root.querySelectorAll("button")].filter((b) => b.textContent === "Delete").at(-1)!.click();
+    act(deletePlace);
+    await settle();
+    expect((await schedulesStore.get()).places).toHaveLength(1);
+    expect(document.body.textContent).toContain('"Work" is in use');
+
+    act(() => buttonNamed("Delete").click());
+    await settle();
+    act(deletePlace);
+    await settle();
+    expect(await schedulesStore.get()).toEqual({ schedules: [], places: [] });
+  });
+
+  test("shows the runner's status and a location problem", async () => {
+    await scheduleState.set({ inCharge: "a", status: "Audio on by schedule until 18:00", locationError: "Location too imprecise to tell places apart" });
+    await schedulesStore.set({ schedules: [weekdays], places: [] });
+    await mount();
+    expect(root.querySelector("[role='status']")?.textContent).toBe("Audio on by schedule until 18:00");
+    expect(root.textContent).toContain("Location unavailable: Location too imprecise to tell places apart.");
+    expect(root.textContent).toContain("In charge");
+  });
+});
diff --git a/web-ext/app/options/components/Schedules.tsx b/web-ext/app/options/components/Schedules.tsx
new file mode 100644
index 00000000..a957a8b8
--- /dev/null
+++ b/web-ext/app/options/components/Schedules.tsx
@@ -0,0 +1,412 @@
+import { useId, useState } from "preact/hooks";
+import Button from "@/ui/primitives/Button";
+import IconButton from "@/ui/primitives/IconButton";
+import Icon from "@/ui/primitives/Icon";
+import Section from "@/ui/layout/Section";
+import Card from "@/ui/layout/Card";
+import { Toggle } from "@/ui/form/Switch";
+import Select from "@/ui/form/Select";
+import Field from "@/ui/form/Field";
+import { useToast } from "@/ui/feedback/ToastProvider";
+import { useSettings } from "@/kernel/useSettings";
+import { readPosition, type Position } from "@/lib/location";
+import { schedulesStore, type Place, type Schedule, type Weekday } from "@/features/schedules/settings";
+import { scheduleState } from "@/features/schedules/state";
+import type { Profile } from "@/features/profiles/profiles";
+
+type RuleKind = Schedule["rule"]["kind"];
+
+interface ScheduleEditorProps {
+  profiles: Profile[];
+  places: Place[];
+  onAdd: (schedule: Schedule) => void;
+  onCancel: () => void;
+}
+
+interface ScheduleRowProps {
+  summary: string;
+  enabled: boolean;
+  inCharge: boolean;
+  onToggle: () => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  onDelete: () => void;
+}
+
+const WEEK: { day: Weekday; label: string }[] = [
+  { day: 1, label: "Mon" },
+  { day: 2, label: "Tue" },
+  { day: 3, label: "Wed" },
+  { day: 4, label: "Thu" },
+  { day: 5, label: "Fri" },
+  { day: 6, label: "Sat" },
+  { day: 0, label: "Sun" },
+];
+const CLOCK_TIME = /^([01]\d|2[0-3]):[0-5]\d$/;
+const RADIUS_MIN = 50;
+const RADIUS_MAX = 2000;
+const INPUT_CLASS =
+  "tw-h-9 tw-px-3 tw-rounded-lg tw-bg-surface-hover tw-text-fg tw-text-sm tw-border tw-border-transparent focus:tw-outline-none focus:tw-border-accent tw-transition-colors";
+const BADGE_CLASS = "tw-text-[10px] tw-font-medium tw-uppercase tw-tracking-wider tw-text-accent tw-bg-info-bg tw-rounded tw-px-1.5 tw-py-0.5";
+
+function describeDays(days: readonly Weekday[]): string {
+  if (days.length === 7) return "Every day";
+  const runs: string[][] = [[]];
+  for (const { day, label } of WEEK) {
+    if (days.includes(day)) runs[runs.length - 1].push(label);
+    else if (runs[runs.length - 1].length) runs.push([]);
+  }
+  return runs
+    .filter((run) => run.length)
+    .map((run) => (run.length > 2 ? `${run[0]}–${run[run.length - 1]}` : run.join(", ")))
+    .join(", ");
+}
+
+function describeSchedule(schedule: Schedule, profiles: readonly Profile[], places: readonly Place[]): string {
+  const profile = profiles.find((p) => p.id === schedule.profileId)?.name ?? "Deleted profile";
+  const { rule } = schedule;
+  if (rule.kind === "place") return `${profile} · while at ${places.find((place) => place.id === rule.placeId)?.name ?? "a deleted place"}`;
+  return `${profile} · ${describeDays(rule.days)} ${rule.start}–${rule.end}${rule.end <= rule.start ? " overnight" : ""}`;
+}
+
+const usedBy = (schedules: readonly Schedule[], place: Place) =>
+  schedules.filter((schedule) => schedule.rule.kind === "place" && schedule.rule.placeId === place.id).length;
+
+function DayChips({ days, onChange }: { days: Weekday[]; onChange: (days: Weekday[]) => void }) {
+  return (
+    <div role="group" aria-label="Days" class="tw-flex tw-flex-wrap tw-gap-1.5">
+      {WEEK.map(({ day, label }) => {
+        const on = days.includes(day);
+        return (
+          <button
+            key={day}
+            type="button"
+            aria-pressed={on}
+            onClick={() => onChange(on ? days.filter((d) => d !== day) : [...days, day].sort((a, b) => a - b))}
+            class={`tw-h-8 tw-w-11 tw-rounded-lg tw-text-[13px] tw-font-medium tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-accent ${on ? "tw-bg-fg tw-text-bg" : "tw-bg-surface-hover tw-text-fg hover:tw-bg-border-default"}`}
+          >
+            {label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function ScheduleEditor({ profiles, places, onAdd, onCancel }: ScheduleEditorProps) {
+  const startId = useId();
+  const endId = useId();
+  const [profileId, setProfileId] = useState("");
+  const [kind, setKind] = useState<RuleKind>("time");
+  const [days, setDays] = useState<Weekday[]>([1, 2, 3, 4, 5]);
+  const [start, setStart] = useState("09:00");
+  const [end, setEnd] = useState("17:00");
+  const [placeId, setPlaceId] = useState("");
+
+  const chosenProfile = profileId || profiles[0]?.id || "";
+  const chosenPlace = placeId || places[0]?.id || "";
+  const daysError = days.length === 0 ? "Pick at least one day." : undefined;
+  const startError = CLOCK_TIME.test(start) ? undefined : "Enter a start time.";
+  const endError = !CLOCK_TIME.test(end) ? "Enter an end time." : end === start ? "End at a different time from the start." : undefined;
+  const invalid = !chosenProfile || (kind === "time" ? Boolean(daysError || startError || endError) : !chosenPlace);
+
+  const add = () => {
+    if (invalid) return;
+    onAdd({
+      id: crypto.randomUUID(),
+      profileId: chosenProfile,
+      rule: kind === "time" ? { kind, days, start, end } : { kind, placeId: chosenPlace },
+      enabled: true,
+    });
+  };
+
+  return (
+    <div class="tw-divide-y tw-divide-border-subtle">
+      <Select<string>
+        label="Profile"
+        value={chosenProfile}
+        options={profiles.map((p) => ({ value: p.id, label: p.name }))}
+        onChange={setProfileId}
+      />
+      <Select<RuleKind>
+        label="Switch by"
+        value={kind}
+        options={[
+          { value: "time", label: "Time", description: "On chosen days, between two times" },
+          { value: "place", label: "Place", description: "While you are at a saved place" },
+        ]}
+        onChange={setKind}
+      />
+      {kind === "time" ? (
+        <>
+          <Field label="Days" error={daysError}>
+            <DayChips days={days} onChange={setDays} />
+          </Field>
+          <Field label="Starts" htmlFor={startId} error={startError}>
+            <input id={startId} type="time" value={start} onInput={(e) => setStart(e.currentTarget.value)} class={`tw-w-32 ${INPUT_CLASS}`} />
+          </Field>
+          <Field
+            label="Ends"
+            htmlFor={endId}
+            error={endError}
+            hint={end < start ? "Runs overnight, into the next day." : undefined}
+          >
+            <input id={endId} type="time" value={end} onInput={(e) => setEnd(e.currentTarget.value)} class={`tw-w-32 ${INPUT_CLASS}`} />
+          </Field>
+        </>
+      ) : places.length ? (
+        <Select<string>
+          label="Place"
+          value={chosenPlace}
+          options={places.map((place) => ({ value: place.id, label: place.name }))}
+          onChange={setPlaceId}
+        />
+      ) : (
+        <div class="tw-py-3 tw-text-sm tw-text-fg-muted">No places yet. Add one under Places below first.</div>
+      )}
+      <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-py-3">
+        <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+        <Button variant="primary" onClick={add} disabled={invalid}>Add schedule</Button>
+      </div>
+    </div>
+  );
+}
+
+function ScheduleRow({ summary, enabled, inCharge, onToggle, onMoveUp, onMoveDown, onDelete }: ScheduleRowProps) {
+  return (
+    <div class="tw-flex tw-items-center tw-justify-between tw-gap-4 tw-py-3">
+      <div class="tw-flex tw-items-center tw-gap-2 tw-min-w-0">
+        <span class={`tw-text-[15px] tw-font-medium tw-truncate ${enabled ? "tw-text-fg" : "tw-text-fg-subtle"}`}>{summary}</span>
+        {inCharge && <span class={BADGE_CLASS}>In charge</span>}
+      </div>
+      <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
+        <IconButton size="sm" aria-label="Move up" title="Move up" disabled={!onMoveUp} onClick={onMoveUp}>
+          <Icon name="chevron-down" size={16} class="tw-rotate-180" />
+        </IconButton>
+        <IconButton size="sm" aria-label="Move down" title="Move down" disabled={!onMoveDown} onClick={onMoveDown}>
+          <Icon name="chevron-down" size={16} />
+        </IconButton>
+        <Button size="sm" variant="ghost" onClick={onDelete}>Delete</Button>
+        <span class="tw-pl-2 tw-inline-flex">
+          <Toggle on={enabled} onClick={onToggle} label={`${summary}, enabled`} />
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function PlaceEditor({ onAdd, onCancel }: { onAdd: (place: Place) => void; onCancel: () => void }) {
+  const nameId = useId();
+  const radiusId = useId();
+  const [name, setName] = useState("");
+  const [radius, setRadius] = useState("200");
+  const [position, setPosition] = useState<Position | null>(null);
+  const [locating, setLocating] = useState(false);
+  const [locationError, setLocationError] = useState<string | null>(null);
+  const [attempted, setAttempted] = useState(false);
+
+  const radiusMeters = Number(radius);
+  const radiusError =
+    radius.trim() !== "" && Number.isInteger(radiusMeters) && radiusMeters >= RADIUS_MIN && radiusMeters <= RADIUS_MAX
+      ? undefined
+      : `Enter a whole number from ${RADIUS_MIN} to ${RADIUS_MAX}.`;
+  const nameError = attempted && !name.trim() ? "Give the place a name." : undefined;
+  const positionError = locationError
+    ? `Location unavailable: ${locationError}. Allow location for Toppings when your browser asks.`
+    : attempted && !position
+      ? "Use your current location while you are there."
+      : undefined;
+
+  const locate = async () => {
+    setLocating(true);
+    setLocationError(null);
+    try {
+      setPosition(await readPosition());
+    } catch (error) {
+      setLocationError(error instanceof Error ? error.message : String(error));
+    }
+    setLocating(false);
+  };
+
+  const save = () => {
+    setAttempted(true);
+    if (!name.trim() || radiusError || !position) return;
+    onAdd({ id: crypto.randomUUID(), name: name.trim(), latitude: position.latitude, longitude: position.longitude, radiusMeters });
+  };
+
+  return (
+    <div class="tw-divide-y tw-divide-border-subtle">
+      <Field label="Name" htmlFor={nameId} error={nameError}>
+        <input
+          id={nameId}
+          type="text"
+          value={name}
+          maxLength={40}
+          placeholder="e.g. Work"
+          onInput={(e) => setName(e.currentTarget.value)}
+          class={`tw-w-44 placeholder:tw-text-fg-subtle ${INPUT_CLASS}`}
+        />
+      </Field>
+      <Field label="Radius" htmlFor={radiusId} hint="How far from this spot still counts as there, in metres." error={radiusError}>
+        <span class="tw-inline-flex tw-items-center tw-gap-2 tw-text-sm tw-text-fg-muted">
+          <input
+            id={radiusId}
+            type="number"
+            min={RADIUS_MIN}
+            max={RADIUS_MAX}
+            step={10}
+            value={radius}
+            onInput={(e) => setRadius(e.currentTarget.value)}
+            class={`tw-w-24 ${INPUT_CLASS}`}
+          />
+          m
+        </span>
+      </Field>
+      <Field
+        label="Location"
+        error={positionError}
+        hint={position ? `Found, accurate to about ${Math.round(position.accuracyMeters)} m.` : "Stand at the place, then use your current location."}
+      >
+        <Button size="sm" onClick={() => void locate()} disabled={locating}>
+          {locating ? "Locating…" : position ? "Locate again" : "Use my current location"}
+        </Button>
+      </Field>
+      {position && !radiusError && position.accuracyMeters > radiusMeters && (
+        <div class="tw-py-3 tw-text-xs tw-text-warning-fg">
+          That fix is looser than the radius, so the place may match from farther away or not at all. Locate again, or widen the radius.
+        </div>
+      )}
+      <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-py-3">
+        <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+        <Button variant="primary" onClick={save}>Save place</Button>
+      </div>
+    </div>
+  );
+}
+
+export default function Schedules({ profiles }: { profiles: Profile[] }) {
+  const toast = useToast();
+  const store = useSettings(schedulesStore);
+  const { value: state } = useSettings(scheduleState);
+  const [addingSchedule, setAddingSchedule] = useState(false);
+  const [addingPlace, setAddingPlace] = useState(false);
+  const { schedules, places } = store.value;
+
+  const setSchedules = (next: Schedule[]) => store.update({ schedules: next });
+  const move = (index: number, by: number) => {
+    const next = [...schedules];
+    [next[index], next[index + by]] = [next[index + by], next[index]];
+    setSchedules(next);
+  };
+
+  const deletePlace = (place: Place) => {
+    const users = usedBy(schedules, place);
+    if (users) {
+      toast.error(`"${place.name}" is in use`, `Delete the ${users === 1 ? "schedule that uses" : `${users} schedules that use`} it first.`);
+      return;
+    }
+    store.update({ places: places.filter((p) => p.id !== place.id) });
+    toast.success(`"${place.name}" deleted`);
+  };
+
+  return (
+    <>
+      <Section
+        title="Schedules"
+        description="A schedule turns its profile on when it starts and puts back what you had when it ends. Pick a profile yourself in between and yours stays. The first matching schedule wins."
+        actions={!addingSchedule && <Button size="sm" variant="primary" onClick={() => setAddingSchedule(true)}>New schedule</Button>}
+      >
+        {(state.status || state.locationError) && (
+          <div class="tw-flex tw-flex-col tw-gap-1 tw-mb-3 tw-text-sm">
+            {state.status && (
+              <p role="status" class="tw-flex tw-items-center tw-gap-2 tw-text-fg">
+                <span aria-hidden class="tw-inline-block tw-w-2 tw-h-2 tw-rounded-full tw-bg-accent" />
+                {state.status}
+              </p>
+            )}
+            {state.locationError && (
+              <p class="tw-text-danger-fg">
+                Location unavailable: {state.locationError}. Allow location for Toppings when your browser asks, from "Use my current location" under Places.
+              </p>
+            )}
+          </div>
+        )}
+        <Card>
+          {addingSchedule && (
+            <ScheduleEditor
+              profiles={profiles}
+              places={places}
+              onAdd={(schedule) => {
+                setSchedules([...schedules, schedule]);
+                setAddingSchedule(false);
+                toast.success("Schedule added");
+              }}
+              onCancel={() => setAddingSchedule(false)}
+            />
+          )}
+          {schedules.length === 0 && !addingSchedule ? (
+            <div class="tw-py-8 tw-text-center tw-text-sm tw-text-fg-subtle">No schedules yet. Add one with the button above.</div>
+          ) : (
+            schedules.map((schedule, index) => (
+              <ScheduleRow
+                key={schedule.id}
+                summary={describeSchedule(schedule, profiles, places)}
+                enabled={schedule.enabled}
+                inCharge={state.inCharge === schedule.id}
+                onToggle={() => setSchedules(schedules.map((s) => (s.id === schedule.id ? { ...s, enabled: !s.enabled } : s)))}
+                onMoveUp={index > 0 ? () => move(index, -1) : undefined}
+                onMoveDown={index < schedules.length - 1 ? () => move(index, 1) : undefined}
+                onDelete={() => setSchedules(schedules.filter((s) => s.id !== schedule.id))}
+              />
+            ))
+          )}
+        </Card>
+        <p class="tw-text-xs tw-text-fg-subtle tw-mt-2">
+          While a schedule is in charge, the toolbar badge shows its profile's initial, and it counts down the minutes before a change.
+        </p>
+      </Section>
+
+      <Section
+        title="Places"
+        description="For schedules that switch by place. Places stay on this device, and Toppings only checks where you are while a place schedule is on."
+        actions={!addingPlace && <Button size="sm" variant="primary" onClick={() => setAddingPlace(true)}>New place</Button>}
+      >
+        <Card>
+          {addingPlace && (
+            <PlaceEditor
+              onAdd={(place) => {
+                store.update({ places: [...places, place] });
+                setAddingPlace(false);
+                toast.success(`"${place.name}" added`);
+              }}
+              onCancel={() => setAddingPlace(false)}
+            />
+          )}
+          {places.length === 0 && !addingPlace ? (
+            <div class="tw-py-8 tw-text-center tw-text-sm tw-text-fg-subtle">No places yet. Add one with the button above.</div>
+          ) : (
+            places.map((place) => {
+              const users = usedBy(schedules, place);
+              const details = [
+                `Within ${place.radiusMeters} m`,
+                users ? `used by ${users} ${users === 1 ? "schedule" : "schedules"}` : "",
+              ].filter(Boolean);
+              return (
+                <div key={place.id} class="tw-flex tw-items-center tw-justify-between tw-gap-4 tw-py-3">
+                  <div class="tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0">
+                    <div class="tw-flex tw-items-center tw-gap-2">
+                      <span class="tw-text-[15px] tw-font-medium tw-text-fg tw-truncate">{place.name}</span>
+                      {state.atPlaces.includes(place.id) && <span class={BADGE_CLASS}>Here</span>}
+                    </div>
+                    <span class="tw-text-xs tw-text-fg-subtle">{details.join(" · ")}</span>
+                  </div>
+                  <Button size="sm" variant="ghost" onClick={() => deletePlace(place)}>Delete</Button>
+                </div>
+              );
+            })
+          )}
+        </Card>
+      </Section>
+    </>
+  );
+}
diff --git a/web-ext/app/options/data.ts b/web-ext/app/options/data.ts
new file mode 100644
index 00000000..15166642
--- /dev/null
+++ b/web-ext/app/options/data.ts
@@ -0,0 +1,42 @@
+import type { IconName } from "@/ui/primitives/Icon";
+import type { SectionNavItem } from "@/ui/layout/SectionNav";
+
+export const OPTIONS_HTML = "options/index.html";
+export const OPTIONS_ICON_SRC = "/assets/icons/icon48.png";
+
+export interface OptionsPage {
+  // The hash segment; "" is the landing page.
+  segment: string;
+  label: string;
+  icon: IconName;
+  sections?: readonly SectionNavItem[];
+}
+
+export const OPTIONS_PAGES: readonly OptionsPage[] = [
+  { segment: "", label: "General", icon: "general" },
+  {
+    segment: "watch",
+    label: "Watch",
+    icon: "watch",
+    sections: [
+      { id: "playback-rate", label: "Playback rate" },
+      { id: "seek", label: "Seek" },
+      { id: "segments", label: "Segments" },
+      { id: "feature-availability", label: "Availability" },
+    ],
+  },
+  { segment: "shorts", label: "Shorts", icon: "shorts" },
+  { segment: "playlist", label: "Playlist", icon: "playlist" },
+  { segment: "profiles", label: "Profiles", icon: "profiles" },
+  {
+    segment: "shortcuts",
+    label: "Shortcuts",
+    icon: "keyboard",
+    sections: [
+      { id: "playback", label: "Playback" },
+      { id: "segments", label: "Segments" },
+      { id: "shorts", label: "Shorts" },
+      { id: "profiles", label: "Profiles" },
+    ],
+  },
+];
diff --git a/web-ext/app/options/index.css b/web-ext/app/options/index.css
new file mode 100644
index 00000000..4f8dfa79
--- /dev/null
+++ b/web-ext/app/options/index.css
@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "../../ui/base.css";
+
+.tppng-search-highlight {
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+@keyframes tppng-section-flash {
+  0% { background: transparent; }
+  20% { background: color-mix(in srgb, var(--color-accent) 20%, transparent); border-radius: 8px; }
+  100% { background: transparent; }
+}
+
+.tppng-section-flash {
+  animation: tppng-section-flash 900ms ease-out forwards;
+}
diff --git a/web-ext/src/options/index.html b/web-ext/app/options/index.html
similarity index 89%
rename from web-ext/src/options/index.html
rename to web-ext/app/options/index.html
index 2f7c577e..859e3b35 100644
--- a/web-ext/src/options/index.html
+++ b/web-ext/app/options/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Toppings: Preferences</title>
     <link rel="icon" href="/assets/icons/icon32.png" type="image/png" />
+    <link rel="stylesheet" href="./index.css" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/web-ext/app/options/index.tsx b/web-ext/app/options/index.tsx
new file mode 100644
index 00000000..a4eaf2a2
--- /dev/null
+++ b/web-ext/app/options/index.tsx
@@ -0,0 +1,4 @@
+import { render } from "preact";
+import App from "./App";
+
+render(<App />, document.getElementById("root")!);
diff --git a/web-ext/app/options/layout/AppLayout.tsx b/web-ext/app/options/layout/AppLayout.tsx
new file mode 100644
index 00000000..9e571962
--- /dev/null
+++ b/web-ext/app/options/layout/AppLayout.tsx
@@ -0,0 +1,25 @@
+import type { ComponentChildren } from "preact";
+import Sidebar from "./Sidebar";
+
+interface AppLayoutProps {
+  children: ComponentChildren;
+  rightRail?: ComponentChildren;
+}
+
+export default function AppLayout({ children, rightRail }: AppLayoutProps) {
+  return (
+    <div class="tw-min-h-screen tw-flex tw-bg-bg tw-text-fg">
+      <Sidebar />
+      <main class="tw-flex-1 tw-min-w-0">
+        <div class="tw-mx-auto tw-max-w-5xl tw-px-10 tw-py-8 tw-flex tw-gap-10 tw-items-start">
+          <div class="tw-flex-1 tw-min-w-0">{children}</div>
+          {rightRail && (
+            <div class="tw-w-44 tw-flex-shrink-0 tw-hidden lg:tw-block tw-self-start tw-sticky tw-top-6">
+              {rightRail}
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/web-ext/app/options/layout/Sidebar.tsx b/web-ext/app/options/layout/Sidebar.tsx
new file mode 100644
index 00000000..00474967
--- /dev/null
+++ b/web-ext/app/options/layout/Sidebar.tsx
@@ -0,0 +1,69 @@
+import Icon from "@/ui/primitives/Icon";
+import IconButton from "@/ui/primitives/IconButton";
+import Tooltip from "@/ui/primitives/Tooltip";
+import { useChromeStorageLocal } from "@/lib/useChromeStorageLocal";
+import { BRAND_METADATA } from "@/lib/brand";
+import { CHROME_STORAGE_LOCAL_KEY } from "@/lib/storageKeys";
+import { EXTENSION_VERSION } from "@/lib/version";
+import { useTheme } from "@/ui/useTheme";
+import { OPTIONS_ICON_SRC, OPTIONS_PAGES } from "../data";
+import { hrefFor, useRoute } from "../router";
+import SidebarThemeToggle from "./SidebarThemeToggle";
+import OptionsSearch from "../search/OptionsSearch";
+
+export default function Sidebar() {
+  const [collapsed, setCollapsed] = useChromeStorageLocal<boolean>(CHROME_STORAGE_LOCAL_KEY.OPTIONS_SIDEBAR_COLLAPSED, false);
+  const { theme, setTheme } = useTheme();
+  const active = useRoute();
+  const collapseLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
+
+  return (
+    <aside class={`tw-flex-shrink-0 tw-h-screen tw-sticky tw-top-0 tw-flex tw-flex-col tw-bg-bg tw-border-r tw-border-border-subtle tw-transition-[width] tw-duration-200 ${collapsed ? "tw-w-[72px]" : "tw-w-[240px]"}`}>
+      <div class={`tw-py-5 ${collapsed ? "tw-px-0" : "tw-px-4"}`}>
+        <div class={`tw-flex tw-items-center tw-gap-3 ${collapsed ? "tw-justify-center" : "tw-px-2"}`}>
+          <img src={OPTIONS_ICON_SRC} alt={collapsed ? BRAND_METADATA.NAME : ""} class="tw-w-7 tw-h-7 tw-flex-shrink-0" />
+          {!collapsed && (
+            <div class="tw-min-w-0">
+              <div class="tw-font-display tw-text-xl tw-leading-none tw-text-fg tw-truncate">{BRAND_METADATA.NAME}</div>
+              <div class="tw-text-[11px] tw-text-fg-subtle tw-mt-1">v{EXTENSION_VERSION}</div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!collapsed && <OptionsSearch />}
+
+      <nav class="tw-flex-1 tw-overflow-y-auto tw-px-3">
+        <ul class="tw-flex tw-flex-col tw-gap-0.5">
+          {OPTIONS_PAGES.map((page) => {
+            const isActive = page.segment === active;
+            const link = (
+              <a
+                href={hrefFor(page.segment)}
+                aria-current={isActive ? "page" : undefined}
+                class={`tw-flex tw-items-center tw-rounded-lg tw-text-sm tw-transition-colors ${collapsed ? "tw-justify-center tw-w-12 tw-h-12 tw-mx-auto" : "tw-gap-4 tw-px-3 tw-h-10"} ${
+                  isActive ? "tw-bg-surface-hover tw-text-fg tw-font-medium" : "tw-text-fg hover:tw-bg-surface-hover"
+                }`}
+              >
+                <Icon name={page.icon} size={collapsed ? 22 : 20} />
+                {!collapsed && <span>{page.label}</span>}
+              </a>
+            );
+            return <li key={page.segment}>{collapsed ? <Tooltip text={page.label}>{link}</Tooltip> : link}</li>;
+          })}
+        </ul>
+      </nav>
+
+      <div class={`tw-flex tw-flex-col tw-gap-2 tw-py-4 ${collapsed ? "tw-px-2 tw-items-center" : "tw-px-4"}`}>
+        {!collapsed && <SidebarThemeToggle value={theme} onChange={setTheme} />}
+        <div class={`tw-flex ${collapsed ? "tw-justify-center" : "tw-justify-end"}`}>
+          <Tooltip text={collapseLabel} side={collapsed ? "right" : "left"}>
+            <IconButton size="sm" aria-label={collapseLabel} onClick={() => setCollapsed(!collapsed)}>
+              <Icon name={collapsed ? "chevron-right" : "chevron-left"} size={16} />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </div>
+    </aside>
+  );
+}
diff --git a/web-ext/app/options/layout/SidebarThemeToggle.tsx b/web-ext/app/options/layout/SidebarThemeToggle.tsx
new file mode 100644
index 00000000..a0eb6972
--- /dev/null
+++ b/web-ext/app/options/layout/SidebarThemeToggle.tsx
@@ -0,0 +1,26 @@
+import type { ThemePreference } from "@/ui/useTheme";
+
+const OPTIONS: { id: ThemePreference; label: string }[] = [
+  { id: "system", label: "System" },
+  { id: "dark", label: "Dark" },
+  { id: "light", label: "Light" },
+];
+
+export default function SidebarThemeToggle({ value, onChange }: { value: ThemePreference; onChange: (next: ThemePreference) => void }) {
+  return (
+    <div role="radiogroup" aria-label="Appearance" class="tw-inline-flex tw-w-full tw-p-0.5 tw-rounded-full tw-bg-surface-hover">
+      {OPTIONS.map((opt) => (
+        <button
+          key={opt.id}
+          type="button"
+          role="radio"
+          aria-checked={value === opt.id}
+          onClick={() => onChange(opt.id)}
+          class={`tw-flex-1 tw-h-7 tw-text-xs tw-font-medium tw-rounded-full tw-transition-colors ${value === opt.id ? "tw-bg-fg tw-text-bg" : "tw-text-fg-muted hover:tw-text-fg"}`}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/web-ext/app/options/router.ts b/web-ext/app/options/router.ts
new file mode 100644
index 00000000..7c09060d
--- /dev/null
+++ b/web-ext/app/options/router.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "preact/hooks";
+
+// Pages are hash segments ("#watch"), so a page can be linked and the
+// browser's back button works, with nothing beyond the platform's own history.
+const current = () => location.hash.replace(/^#\/?/, "");
+
+export function useRoute(): string {
+  const [segment, setSegment] = useState(current);
+  useEffect(() => {
+    const onChange = () => setSegment(current());
+    window.addEventListener("hashchange", onChange);
+    return () => window.removeEventListener("hashchange", onChange);
+  }, []);
+  return segment;
+}
+
+export function navigate(segment: string): void {
+  location.hash = segment;
+}
+
+export const hrefFor = (segment: string) => `#${segment}`;
diff --git a/web-ext/app/options/routes/General.test.ts b/web-ext/app/options/routes/General.test.ts
new file mode 100644
index 00000000..6f3d841f
--- /dev/null
+++ b/web-ext/app/options/routes/General.test.ts
@@ -0,0 +1,33 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { h, render } from "preact";
+import { act } from "preact/test-utils";
+import { ToastProvider } from "@/ui/feedback/ToastProvider";
+import { profilesSettings } from "@/features/profiles/settings";
+import General from "./General";
+
+const root = document.createElement("div");
+document.body.append(root);
+
+const settle = () => act(() => new Promise((r) => setTimeout(r, 20)));
+
+beforeEach(async () => {
+  await chrome.storage.sync.clear();
+});
+afterEach(() => {
+  act(() => render(null, root));
+});
+
+describe("General page", () => {
+  test("the audio button switch writes the profiles surfaces slice", async () => {
+    act(() => {
+      render(h(ToastProvider, null, h(General, null)), root);
+    });
+    await settle();
+    const label = [...root.querySelectorAll<HTMLLabelElement>("label")].find((el) => el.textContent === "Audio button in the player")!;
+    const toggle = root.querySelector<HTMLButtonElement>(`[id="${label.htmlFor}"]`)!;
+    expect(toggle.getAttribute("aria-checked")).toBe("true");
+    act(() => toggle.click());
+    await settle();
+    expect((await profilesSettings.get()).audioButton).toBe(false);
+  });
+});
diff --git a/web-ext/app/options/routes/General.tsx b/web-ext/app/options/routes/General.tsx
new file mode 100644
index 00000000..8e2f60e9
--- /dev/null
+++ b/web-ext/app/options/routes/General.tsx
@@ -0,0 +1,99 @@
+import { useState } from "preact/hooks";
+import PageHeader from "@/ui/layout/PageHeader";
+import Section from "@/ui/layout/Section";
+import Card from "@/ui/layout/Card";
+import Switch from "@/ui/form/Switch";
+import Select from "@/ui/form/Select";
+import Button from "@/ui/primitives/Button";
+import { useToast } from "@/ui/feedback/ToastProvider";
+import { useSettings } from "@/kernel/useSettings";
+import { useCapabilityCache } from "@/kernel/dom/useCapabilities";
+import { appSettings, type ThemePreference } from "@/app/settings";
+import { profilesSettings } from "@/features/profiles/settings";
+
+export default function General() {
+  const app = useSettings(appSettings);
+  const surfaces = useSettings(profilesSettings);
+  const toast = useToast();
+  const { rescan } = useCapabilityCache();
+  const [rescanning, setRescanning] = useState(false);
+
+  return (
+    <>
+      <PageHeader title="General" description="The master switch, appearance, and where profile controls appear." />
+
+      <div class="tw-flex tw-flex-col tw-gap-8">
+        <Section title="Extension">
+          <Card>
+            <Switch
+              label="Enable Toppings"
+              description="When off, nothing runs on YouTube."
+              isEnabled={app.value.enabled}
+              onToggle={(enabled) => {
+                app.update({ enabled });
+                toast.success(enabled ? "Toppings enabled" : "Toppings disabled");
+              }}
+            />
+          </Card>
+        </Section>
+
+        <Section title="Appearance">
+          <Card>
+            <Select<ThemePreference>
+              label="Appearance"
+              description="For the popup and this page. YouTube itself is untouched."
+              value={app.value.theme}
+              options={[
+                { value: "system", label: "Use device theme" },
+                { value: "dark", label: "Dark theme" },
+                { value: "light", label: "Light theme" },
+              ]}
+              onChange={(theme) => app.update({ theme })}
+            />
+          </Card>
+        </Section>
+
+        <Section title="Profile surfaces" description="Extra places to switch profiles from. The popup always has a switcher.">
+          <Card>
+            <Switch
+              label="Player gear menu"
+              description="A Profile row in the player's settings menu, for switching profiles without leaving the video."
+              isEnabled={surfaces.value.gearMenu}
+              onToggle={(gearMenu) => surfaces.update({ gearMenu })}
+            />
+            <Switch
+              label="Audio button in the player"
+              description="A headphones button beside the player's controls that turns the Audio profile on and off."
+              isEnabled={surfaces.value.audioButton}
+              onToggle={(audioButton) => surfaces.update({ audioButton })}
+            />
+          </Card>
+        </Section>
+
+        <Section title="Diagnostics" description="If a feature is not working, clear the compatibility check so it runs again on your next YouTube visit.">
+          <Card>
+            <div class="tw-w-full tw-flex tw-items-center tw-justify-between tw-gap-4 tw-py-3">
+              <div class="tw-flex tw-flex-col tw-gap-0.5">
+                <label for="rescan-features" class="tw-text-[15px] tw-text-fg tw-leading-tight">Re-scan features</label>
+                <span class="tw-text-xs tw-text-fg-subtle">Features are re-checked the next time you open YouTube.</span>
+              </div>
+              <Button
+                id="rescan-features"
+                size="sm"
+                disabled={rescanning}
+                onClick={async () => {
+                  setRescanning(true);
+                  await rescan();
+                  setRescanning(false);
+                  toast.success("Cache cleared", "Open YouTube to re-check features.");
+                }}
+              >
+                {rescanning ? "Clearing…" : "Re-scan"}
+              </Button>
+            </div>
+          </Card>
+        </Section>
+      </div>
+    </>
+  );
+}
diff --git a/web-ext/app/options/routes/Playlist.tsx b/web-ext/app/options/routes/Playlist.tsx
new file mode 100644
index 00000000..6700a174
--- /dev/null
+++ b/web-ext/app/options/routes/Playlist.tsx
@@ -0,0 +1,32 @@
+import { useSettings } from "@/kernel/useSettings";
+import { playlistRuntimeSettings } from "@/features/playlist-runtime/settings";
+import PageHeader from "@/ui/layout/PageHeader";
+import Section from "@/ui/layout/Section";
+import Card from "@/ui/layout/Card";
+import Switch from "@/ui/form/Switch";
+
+export default function Playlist() {
+  const { value, update } = useSettings(playlistRuntimeSettings);
+
+  return (
+    <>
+      <PageHeader title="Playlist" description="Settings for YouTube playlist pages." />
+
+      <div class="tw-flex tw-flex-col tw-gap-8">
+        <Section
+          title="Runtime Statistics"
+          description="The total and average runtime of a playlist, shown at the top of the page."
+        >
+          <Card>
+            <Switch
+              label="Runtime statistics"
+              description="Show runtime statistics on playlist pages."
+              isEnabled={value.enabled}
+              onToggle={(enabled) => update({ enabled })}
+            />
+          </Card>
+        </Section>
+      </div>
+    </>
+  );
+}
diff --git a/web-ext/app/options/routes/Profiles.test.ts b/web-ext/app/options/routes/Profiles.test.ts
new file mode 100644
index 00000000..96b2dcbf
--- /dev/null
+++ b/web-ext/app/options/routes/Profiles.test.ts
@@ -0,0 +1,97 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { h, render } from "preact";
+import { act } from "preact/test-utils";
+import { ToastProvider } from "@/ui/feedback/ToastProvider";
+import { createProfile, getCustomProfiles, setActiveProfileId } from "@/features/profiles/store";
+import { CHROME_STORAGE_LOCAL_KEY } from "@/lib/storageKeys";
+import Profiles from "./Profiles";
+
+const root = document.createElement("div");
+document.body.append(root);
+
+const settle = () => act(() => new Promise((r) => setTimeout(r, 20)));
+
+const mount = async () => {
+  act(() => {
+    render(h(ToastProvider, null, h(Profiles, null)), root);
+  });
+  await settle();
+};
+
+const buttonNamed = (text: string) => [...root.querySelectorAll("button")].find((b) => b.textContent === text)!;
+
+const cardOf = (name: string) =>
+  [...root.querySelectorAll<HTMLElement>(".tw-py-3")].find((el) => el.textContent?.startsWith(name))!;
+
+beforeEach(async () => {
+  await chrome.storage.local.clear();
+});
+afterEach(() => {
+  act(() => render(null, root));
+  document.body.replaceChildren(root);
+});
+
+describe("Profiles page", () => {
+  test("importing a file creates the profile and says so", async () => {
+    await mount();
+    const input = root.querySelector<HTMLInputElement>("input[type='file']")!;
+    const file = new File([JSON.stringify({ name: "Study", primitives: { "watch.sidebar": { visible: false } } })], "study.json", { type: "application/json" });
+    Object.defineProperty(input, "files", { value: [file], configurable: true });
+    act(() => {
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    await settle();
+    expect((await getCustomProfiles()).map((p) => p.name)).toEqual(["Study"]);
+    expect(document.body.textContent).toContain('"Study" imported');
+  });
+
+  test("the Import button opens the file picker", async () => {
+    await mount();
+    const input = root.querySelector<HTMLInputElement>("input[type='file']")!;
+    let opened = 0;
+    input.addEventListener("click", () => opened++);
+    const button = [...root.querySelectorAll("button")].find((b) => b.textContent === "Import")!;
+    act(() => button.click());
+    expect(opened).toBe(1);
+  });
+
+  test("follows a profile switched from elsewhere", async () => {
+    await mount();
+    expect(cardOf("Focus").textContent).toContain("Activate");
+    await setActiveProfileId("preset:focus");
+    await settle();
+    expect(cardOf("Focus").textContent).toContain("Deactivate");
+  });
+
+  test("the Audio preset shows its screen by the option's name", async () => {
+    await mount();
+    expect(cardOf("Audio").textContent).toContain("Video screen: Visualizer");
+  });
+
+  test("a custom screen picks, previews and clears the device's image", async () => {
+    await createProfile({ name: "Night", primitives: { "watch.visuals": { value: "custom" } } });
+    await mount();
+    act(() => buttonNamed("Edit").click());
+    const input = root.querySelector<HTMLInputElement>("input[type='file'][accept='image/*']")!;
+    let opened = 0;
+    input.addEventListener("click", () => opened++);
+    act(() => buttonNamed("Choose image").click());
+    expect(opened).toBe(1);
+
+    const file = new File([new Uint8Array([137, 80, 78, 71])], "cover.png", { type: "image/png" });
+    Object.defineProperty(input, "files", { value: [file], configurable: true });
+    act(() => {
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    await act(() => new Promise((r) => setTimeout(r, 100)));
+    const key = CHROME_STORAGE_LOCAL_KEY.VISUALS_IMAGE;
+    const stored = (await chrome.storage.local.get(key))[key];
+    expect(stored).toStartWith("data:image/png;base64,");
+    expect(root.querySelector("img")?.getAttribute("src")).toBe(stored);
+
+    act(() => buttonNamed("Clear").click());
+    await settle();
+    expect(await chrome.storage.local.get(key)).toEqual({});
+    expect(root.querySelector("img")).toBeNull();
+  });
+});
diff --git a/web-ext/app/options/routes/Profiles.tsx b/web-ext/app/options/routes/Profiles.tsx
new file mode 100644
index 00000000..5a470262
--- /dev/null
+++ b/web-ext/app/options/routes/Profiles.tsx
@@ -0,0 +1,610 @@
+import { useEffect, useId, useRef, useState } from "preact/hooks";
+import Button from "@/ui/primitives/Button";
+import PageHeader from "@/ui/layout/PageHeader";
+import Section from "@/ui/layout/Section";
+import Card from "@/ui/layout/Card";
+import Switch from "@/ui/form/Switch";
+import Select, { type SelectOption } from "@/ui/form/Select";
+import Field from "@/ui/form/Field";
+import { useToast } from "@/ui/feedback/ToastProvider";
+import Schedules from "@/app/options/components/Schedules";
+import { useCapabilityCache } from "@/kernel/dom/useCapabilities";
+import { useChromeStorageLocal } from "@/lib/useChromeStorageLocal";
+import { CHROME_STORAGE_LOCAL_KEY } from "@/lib/storageKeys";
+import {
+  getAllProfiles,
+  getActiveProfile,
+  setActiveProfileId,
+  createProfile,
+  updateProfile,
+  deleteProfile,
+  subscribeProfiles,
+} from "@/features/profiles/store";
+import {
+  exportProfile,
+  importProfileFromFile,
+} from "@/features/profiles/importExport";
+import {
+  type Profile,
+  type ProfilePrimitiveConfig,
+  type ThumbnailMode,
+} from "@/features/profiles/profiles";
+import type { PlayerLayout, VisualsMode } from "@/features/profiles/profiles";
+
+const VISUALS_OPTIONS: SelectOption<VisualsMode>[] = [
+  { value: "video", label: "Real video", description: "The video as YouTube shows it" },
+  { value: "black", label: "Black screen", description: "A plain black screen" },
+  { value: "visualizer", label: "Visualizer", description: "A waveform that reacts to the audio" },
+  { value: "custom", label: "Custom image", description: "An image of your choice" },
+];
+
+function blankPrimitives(): ProfilePrimitiveConfig {
+  return {
+    "watch.sidebar": { visible: true },
+    "watch.comments": { visible: true },
+    "watch.endCards": { visible: true },
+    "watch.layout": { value: "default" },
+  };
+}
+
+function VisualsImagePicker() {
+  const toast = useToast();
+  const [image] = useChromeStorageLocal<string | null>(CHROME_STORAGE_LOCAL_KEY.VISUALS_IMAGE, null);
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  const store = (file: File) => {
+    const reader = new FileReader();
+    reader.onload = async () => {
+      if (typeof reader.result !== "string") return;
+      // Local storage is capped without unlimitedStorage, and a photo's data
+      // URL can pass the cap, so a failed write is expected, not exceptional.
+      try {
+        await chrome.storage.local.set({ [CHROME_STORAGE_LOCAL_KEY.VISUALS_IMAGE]: reader.result });
+      } catch {
+        toast.error("Image not saved", "It is too large; try a smaller one.");
+      }
+    };
+    reader.onerror = () => toast.error("Could not read that image");
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <Field label="Custom image" hint="Kept on this device only, and shared by every profile set to a custom image.">
+      <div class="tw-flex tw-items-center tw-gap-2">
+        {image && <img src={image} alt="" class="tw-h-8 tw-w-14 tw-rounded tw-object-cover tw-border tw-border-border-subtle" />}
+        {image && <Button size="sm" variant="ghost" onClick={() => void chrome.storage.local.remove(CHROME_STORAGE_LOCAL_KEY.VISUALS_IMAGE)}>Clear</Button>}
+        <Button size="sm" onClick={() => fileInput.current?.click()}>{image ? "Change image" : "Choose image"}</Button>
+        <input
+          ref={fileInput}
+          type="file"
+          accept="image/*"
+          hidden
+          onChange={(e) => {
+            const input = e.currentTarget;
+            const file = input.files?.[0];
+            input.value = "";
+            if (file) store(file);
+          }}
+        />
+      </div>
+    </Field>
+  );
+}
+
+interface ProfileEditorProps {
+  initial: Partial<Profile>;
+  onSave: (name: string, primitives: ProfilePrimitiveConfig) => Promise<void>;
+  onCancel: () => void;
+  getStatus: (id: string) => "supported" | "unsupported" | "untested";
+}
+
+function ProfileEditor({
+  initial,
+  onSave,
+  onCancel,
+  getStatus,
+}: ProfileEditorProps) {
+  const nameId = useId();
+  const [name, setName] = useState(initial.name ?? "");
+  const [primitives, setPrimitives] = useState<ProfilePrimitiveConfig>(
+    initial.primitives ?? blankPrimitives(),
+  );
+  const [isSaving, setIsSaving] = useState(false);
+
+  const layout = primitives["watch.layout"]?.value ?? "default";
+  const visuals = primitives["watch.visuals"]?.value ?? "video";
+
+  const set = <K extends keyof ProfilePrimitiveConfig>(
+    key: K,
+    value: ProfilePrimitiveConfig[K],
+  ) => setPrimitives((prev) => ({ ...prev, [key]: value }));
+
+  const handleSave = async () => {
+    if (!name.trim()) return;
+    setIsSaving(true);
+    await onSave(name.trim(), primitives);
+    setIsSaving(false);
+  };
+
+  const isUnsupported = (id: string) => getStatus(id) === "unsupported";
+
+  return (
+    <div class="tw-p-4 tw-flex tw-flex-col tw-gap-4">
+            <div class="tw-flex tw-flex-col tw-gap-1">
+        <label for={nameId} class="tw-text-sm tw-font-medium tw-text-fg">
+          Profile name
+        </label>
+        <input
+          id={nameId}
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.currentTarget.value)}
+          placeholder="e.g. Study session"
+          maxLength={40}
+          class="tw-w-full tw-h-9 tw-rounded-lg tw-bg-surface-hover tw-px-3 tw-text-sm tw-text-fg placeholder:tw-text-fg-subtle tw-border tw-border-transparent focus:tw-outline-none focus:tw-border-accent"
+        />
+      </div>
+
+            <div class="tw-flex tw-flex-col tw-gap-2">
+        <span class="tw-text-xs tw-font-medium tw-uppercase tw-tracking-wider tw-text-fg-subtle">
+          Watch page
+        </span>
+
+        <div class="tw-bg-surface tw-border tw-border-border-subtle tw-rounded-xl tw-divide-y tw-divide-border-subtle">
+                    <div
+            class={`tw-px-4 ${isUnsupported("watch.layout") ? "tw-opacity-50" : ""}`}
+          >
+            <Select<PlayerLayout>
+              label="Player Layout"
+              description={
+                isUnsupported("watch.layout")
+                  ? "Not available on your YouTube"
+                  : "How the video player is arranged on the page."
+              }
+              value={layout}
+              options={[
+                { value: "default", label: "Default", description: "YouTube's standard layout" },
+                { value: "no-video", label: "No Video", description: "Hide the player area entirely" },
+              ]}
+              onChange={(v) => set("watch.layout", { value: v })}
+            />
+          </div>
+
+          <div
+            class={`tw-px-4 ${isUnsupported("watch.visuals") ? "tw-opacity-50" : ""}`}
+          >
+            <Select<VisualsMode>
+              label="Video screen"
+              description={
+                isUnsupported("watch.visuals")
+                  ? "Not available on your YouTube"
+                  : "Covers the video but keeps the player's controls, so you can listen without the picture showing."
+              }
+              value={visuals}
+              options={VISUALS_OPTIONS}
+              onChange={(v) => set("watch.visuals", { value: v })}
+            />
+            {visuals === "custom" && <VisualsImagePicker />}
+          </div>
+
+                    <div
+            class={`tw-px-4 ${isUnsupported("watch.sidebar") ? "tw-opacity-50 tw-pointer-events-none" : ""}`}
+          >
+            <Switch
+              label="Recommendations Sidebar"
+              description={
+                isUnsupported("watch.sidebar")
+                  ? "Not available on your YouTube"
+                  : "Show or hide the 'Up next' panel."
+              }
+              isEnabled={primitives["watch.sidebar"]?.visible ?? true}
+              onToggle={(v) => set("watch.sidebar", { visible: v })}
+            />
+          </div>
+
+                    <div
+            class={`tw-px-4 ${isUnsupported("watch.comments") ? "tw-opacity-50 tw-pointer-events-none" : ""}`}
+          >
+            <Switch
+              label="Comments Section"
+              description={
+                isUnsupported("watch.comments")
+                  ? "Not available on your YouTube"
+                  : "Show or hide the comments below the video."
+              }
+              isEnabled={primitives["watch.comments"]?.visible ?? true}
+              onToggle={(v) => set("watch.comments", { visible: v })}
+            />
+          </div>
+
+                    <div
+            class={`tw-px-4 ${isUnsupported("watch.endCards") ? "tw-opacity-50 tw-pointer-events-none" : ""}`}
+          >
+            <Switch
+              label="End Screen Cards"
+              description={
+                isUnsupported("watch.endCards")
+                  ? "Not available on your YouTube"
+                  : "Show or hide overlay cards at the end of videos."
+              }
+              isEnabled={primitives["watch.endCards"]?.visible ?? true}
+              onToggle={(v) => set("watch.endCards", { visible: v })}
+            />
+          </div>
+        </div>
+      </div>
+
+            <div class="tw-flex tw-flex-col tw-gap-2">
+        <span class="tw-text-xs tw-font-medium tw-uppercase tw-tracking-wider tw-text-fg-subtle">
+          Home page
+        </span>
+        <div class="tw-bg-surface tw-border tw-border-border-subtle tw-rounded-xl tw-divide-y tw-divide-border-subtle">
+          <div class="tw-px-4">
+            <Select<ThumbnailMode>
+              label="Feed Thumbnails"
+              description="Show, hide, or blur thumbnail images in the home feed."
+              value={primitives["home.thumbnails"]?.mode ?? "show"}
+              options={[
+                { value: "show", label: "Show", description: "Normal thumbnails" },
+                { value: "blur", label: "Blur", description: "Blurred — layout preserved" },
+                { value: "hide", label: "Hide", description: "Invisible thumbnails" },
+              ]}
+              onChange={(v) => set("home.thumbnails", { mode: v })}
+            />
+          </div>
+          <div class="tw-px-4">
+            <Switch
+              label="Home Feed"
+              description="Show or hide the entire home page feed."
+              isEnabled={primitives["home.feed"]?.visible ?? true}
+              onToggle={(v) => set("home.feed", { visible: v })}
+            />
+          </div>
+          <div class="tw-px-4">
+            <Switch
+              label="Shorts Shelf"
+              description="Show or hide the Shorts row in the home feed."
+              isEnabled={primitives["home.shorts"]?.visible ?? true}
+              onToggle={(v) => set("home.shorts", { visible: v })}
+            />
+          </div>
+        </div>
+      </div>
+
+            <div class="tw-flex tw-flex-col tw-gap-2">
+        <span class="tw-text-xs tw-font-medium tw-uppercase tw-tracking-wider tw-text-fg-subtle">
+          Search
+        </span>
+        <div class="tw-bg-surface tw-border tw-border-border-subtle tw-rounded-xl tw-divide-y tw-divide-border-subtle">
+          <div class="tw-px-4">
+            <Select<ThumbnailMode>
+              label="Result Thumbnails"
+              description="Show, hide, or blur thumbnails in search results."
+              value={primitives["search.thumbnails"]?.mode ?? "show"}
+              options={[
+                { value: "show", label: "Show", description: "Normal thumbnails" },
+                { value: "blur", label: "Blur", description: "Blurred — layout preserved" },
+                { value: "hide", label: "Hide", description: "Plain text list" },
+              ]}
+              onChange={(v) => set("search.thumbnails", { mode: v })}
+            />
+          </div>
+          <div class="tw-px-4">
+            <Switch
+              label="Video Metadata"
+              description="Show or hide view count and date below search results."
+              isEnabled={primitives["search.metadata"]?.visible ?? true}
+              onToggle={(v) => set("search.metadata", { visible: v })}
+            />
+          </div>
+          <div class="tw-px-4">
+            <Switch
+              label="Shorts in Search"
+              description="Show or hide the Shorts shelf in search results."
+              isEnabled={primitives["search.shorts"]?.visible ?? true}
+              onToggle={(v) => set("search.shorts", { visible: v })}
+            />
+          </div>
+        </div>
+      </div>
+
+            <div class="tw-flex tw-flex-col tw-gap-2">
+        <span class="tw-text-xs tw-font-medium tw-uppercase tw-tracking-wider tw-text-fg-subtle">
+          Shorts
+        </span>
+        <div class="tw-bg-surface tw-border tw-border-border-subtle tw-rounded-xl tw-divide-y tw-divide-border-subtle">
+          <div class="tw-px-4">
+            <Switch
+              label="Shorts Shelf (everywhere)"
+              description="Hide the Shorts shelf across home, search, and other pages."
+              isEnabled={primitives["shorts.shelf"]?.visible ?? true}
+              onToggle={(v) => set("shorts.shelf", { visible: v })}
+            />
+          </div>
+        </div>
+      </div>
+
+            <div class="tw-flex tw-items-center tw-justify-end tw-gap-2 tw-pt-1">
+        <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+        <Button variant="primary" onClick={handleSave} disabled={!name.trim() || isSaving}>
+          {isSaving ? "Saving…" : "Save profile"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+interface PresetCardProps {
+  profile: Profile;
+  isActive: boolean;
+  onActivate: () => void;
+}
+
+function PresetCard({ profile, isActive, onActivate }: PresetCardProps) {
+  const primitiveLabels: Record<string, string> = {
+    "watch.layout": "Layout",
+    "watch.visuals": "Video screen",
+    "watch.sidebar": "Sidebar",
+    "watch.comments": "Comments",
+    "watch.endCards": "End Cards",
+    "home.thumbnails": "Home Thumbnails",
+    "home.feed": "Home Feed",
+    "home.shorts": "Home Shorts",
+    "search.thumbnails": "Search Thumbnails",
+    "search.metadata": "Search Metadata",
+    "search.shorts": "Search Shorts",
+    "shorts.shelf": "Shorts Shelf",
+  };
+
+  const summaryParts = Object.entries(profile.primitives)
+    .map(([key, val]) => {
+      const label = primitiveLabels[key] ?? key;
+      if ("visible" in val) return `${label}: ${val.visible ? "on" : "off"}`;
+      if ("mode" in val) return `${label}: ${val.mode}`;
+      if (key === "watch.visuals" && "value" in val) {
+        return `${label}: ${VISUALS_OPTIONS.find((o) => o.value === val.value)?.label ?? val.value}`;
+      }
+      if ("value" in val) return `${label}: ${val.value}`;
+      return label;
+    })
+    .join(" · ");
+
+  return (
+    <div class="tw-flex tw-items-center tw-justify-between tw-gap-4 tw-py-3">
+      <div class="tw-flex tw-flex-col tw-gap-0.5">
+        <div class="tw-flex tw-items-center tw-gap-2">
+          <span class="tw-text-[15px] tw-font-medium tw-text-fg">
+            {profile.name}
+          </span>
+          <span class="tw-text-[10px] tw-font-medium tw-uppercase tw-tracking-wider tw-text-fg-muted tw-bg-surface-hover tw-rounded tw-px-1.5 tw-py-0.5">
+            Built-in
+          </span>
+          {isActive && (
+            <span class="tw-text-[10px] tw-font-medium tw-uppercase tw-tracking-wider tw-text-accent tw-bg-info-bg tw-rounded tw-px-1.5 tw-py-0.5">
+              Active
+            </span>
+          )}
+        </div>
+        <span class="tw-text-xs tw-text-fg-subtle">{summaryParts}</span>
+      </div>
+      <Button size="sm" variant={isActive ? "secondary" : "primary"} onClick={onActivate}>
+        {isActive ? "Deactivate" : "Activate"}
+      </Button>
+    </div>
+  );
+}
+
+interface CustomProfileCardProps {
+  profile: Profile;
+  isActive: boolean;
+  onActivate: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+function CustomProfileCard({
+  profile,
+  isActive,
+  onActivate,
+  onEdit,
+  onDelete,
+}: CustomProfileCardProps) {
+  return (
+    <div class="tw-flex tw-items-center tw-justify-between tw-gap-4 tw-py-3">
+      <div class="tw-flex tw-flex-col tw-gap-0.5">
+        <div class="tw-flex tw-items-center tw-gap-2">
+          <span class="tw-text-[15px] tw-font-medium tw-text-fg">
+            {profile.name}
+          </span>
+          {isActive && (
+            <span class="tw-text-[10px] tw-font-medium tw-uppercase tw-tracking-wider tw-text-accent tw-bg-info-bg tw-rounded tw-px-1.5 tw-py-0.5">
+              Active
+            </span>
+          )}
+        </div>
+        <span class="tw-text-xs tw-text-fg-subtle">
+          {Object.keys(profile.primitives).length} primitive
+          {Object.keys(profile.primitives).length !== 1 ? "s" : ""} configured
+        </span>
+      </div>
+      <div class="tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0">
+        <Button size="sm" variant="ghost" title="Export as JSON" onClick={() => exportProfile(profile)}>Export</Button>
+        <Button size="sm" variant="ghost" onClick={onEdit}>Edit</Button>
+        <Button size="sm" variant="ghost" onClick={onDelete}>Delete</Button>
+        <Button size="sm" variant={isActive ? "secondary" : "primary"} onClick={onActivate}>
+          {isActive ? "Deactivate" : "Activate"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+type EditorMode =
+  | { type: "closed" }
+  | { type: "create" }
+  | { type: "edit"; profile: Profile };
+
+export default function Profiles() {
+  const toast = useToast();
+  const { getStatus } = useCapabilityCache();
+
+  const [profiles, setProfiles] = useState<Profile[]>([]);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [editor, setEditor] = useState<EditorMode>({ type: "closed" });
+  const importInput = useRef<HTMLInputElement>(null);
+
+  const load = async () => {
+    const [all, active] = await Promise.all([
+      getAllProfiles(),
+      getActiveProfile(),
+    ]);
+    setProfiles(all);
+    setActiveId(active?.id ?? null);
+  };
+
+  useEffect(() => {
+    void load();
+    return subscribeProfiles(() => void load());
+  }, []);
+
+  const handleActivate = async (id: string) => {
+    const next = activeId === id ? null : id;
+    await setActiveProfileId(next);
+    setActiveId(next);
+    const name = profiles.find((p) => p.id === id)?.name ?? "Profile";
+    toast.success(next ? `${name} activated` : "Profile deactivated");
+  };
+
+  const handleCreate = async (
+    name: string,
+    primitives: ProfilePrimitiveConfig,
+  ) => {
+    await createProfile({ name, primitives });
+    await load();
+    setEditor({ type: "closed" });
+    toast.success(`"${name}" created`);
+  };
+
+  const handleUpdate = async (
+    id: string,
+    name: string,
+    primitives: ProfilePrimitiveConfig,
+  ) => {
+    await updateProfile(id, { name, primitives });
+    await load();
+    setEditor({ type: "closed" });
+    toast.success(`"${name}" saved`);
+  };
+
+  const handleDelete = async (profile: Profile) => {
+    await deleteProfile(profile.id);
+    await load();
+    toast.success(`"${profile.name}" deleted`);
+  };
+
+  const presets = profiles.filter((p) => p.isPreset);
+  const custom = profiles.filter((p) => !p.isPreset);
+
+  return (
+    <>
+      <PageHeader
+        title="Profiles"
+        description="Switch your entire YouTube experience in one tap. Built-in presets are ready to use; create custom profiles to mix and match any combination."
+      />
+
+      <div class="tw-flex tw-flex-col tw-gap-8">
+                <Section title="Built-in presets" description="Curated by Toppings — activate in one tap, no configuration needed.">
+          <Card>
+            {presets.map((p) => (
+              <PresetCard
+                key={p.id}
+                profile={p}
+                isActive={activeId === p.id}
+                onActivate={() => handleActivate(p.id)}
+              />
+            ))}
+          </Card>
+        </Section>
+
+                <Section
+          title="My profiles"
+          description="Create your own mix of YouTube experience settings."
+          actions={
+            editor.type === "closed" ? (
+              <div class="tw-flex tw-items-center tw-gap-2">
+                <Button size="sm" title="Import profile from JSON" onClick={() => importInput.current?.click()}>Import</Button>
+                <input
+                  ref={importInput}
+                  type="file"
+                  accept=".json,application/json"
+                  hidden
+                  onChange={async (e) => {
+                    // currentTarget is null once the handler first awaits.
+                    const input = e.currentTarget;
+                    const file = input.files?.[0];
+                    input.value = "";
+                    if (!file) return;
+                    const result = await importProfileFromFile(file);
+                    if (!result.ok) {
+                      toast.error("Import failed", result.message);
+                      return;
+                    }
+                    await createProfile({
+                      name: result.name,
+                      primitives: result.primitives,
+                    });
+                    await load();
+                    toast.success(`"${result.name}" imported`);
+                  }}
+                />
+                <Button size="sm" variant="primary" onClick={() => setEditor({ type: "create" })}>New profile</Button>
+              </div>
+            ) : null
+          }
+        >
+          <Card>
+                        {editor.type === "create" && (
+              <ProfileEditor
+                initial={{ primitives: blankPrimitives() }}
+                onSave={handleCreate}
+                onCancel={() => setEditor({ type: "closed" })}
+                getStatus={getStatus}
+              />
+            )}
+
+            {custom.length === 0 && editor.type !== "create" ? (
+              <div class="tw-py-8 tw-text-center tw-text-sm tw-text-fg-subtle">
+                No custom profiles yet. Create one with the button above.
+              </div>
+            ) : (
+              custom.map((p) =>
+                editor.type === "edit" && editor.profile.id === p.id ? (
+                  <ProfileEditor
+                    key={p.id}
+                    initial={p}
+                    onSave={(name, primitives) =>
+                      handleUpdate(p.id, name, primitives)
+                    }
+                    onCancel={() => setEditor({ type: "closed" })}
+                    getStatus={getStatus}
+                  />
+                ) : (
+                  <CustomProfileCard
+                    key={p.id}
+                    profile={p}
+                    isActive={activeId === p.id}
+                    onActivate={() => handleActivate(p.id)}
+                    onEdit={() => setEditor({ type: "edit", profile: p })}
+                    onDelete={() => handleDelete(p)}
+                  />
+                ),
+              )
+            )}
+          </Card>
+        </Section>
+
+        <Schedules profiles={profiles} />
+      </div>
+    </>
+  );
+}
diff --git a/web-ext/app/options/routes/Shortcuts.test.ts b/web-ext/app/options/routes/Shortcuts.test.ts
new file mode 100644
index 00000000..869dc3a4
--- /dev/null
+++ b/web-ext/app/options/routes/Shortcuts.test.ts
@@ -0,0 +1,59 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { h, render } from "preact";
+import { act } from "preact/test-utils";
+import { keybindings } from "@/kernel/keys";
+import { createProfile } from "@/features/profiles/store";
+import Shortcuts from "./Shortcuts";
+
+const root = document.createElement("div");
+document.body.append(root);
+
+const settle = () => act(() => new Promise((r) => setTimeout(r, 20)));
+
+const mount = async () => {
+  act(() => {
+    render(h(Shortcuts, null), root);
+  });
+  await settle();
+};
+
+const profileRows = () => [...root.querySelectorAll<HTMLElement>("section#profiles label")].map((el) => el.textContent);
+
+const inputOf = (label: string) => {
+  const labelEl = [...root.querySelectorAll<HTMLLabelElement>("section#profiles label")].find((el) => el.textContent === label)!;
+  return root.querySelector<HTMLInputElement>(`[id="${labelEl.htmlFor}"]`)!;
+};
+
+beforeEach(async () => {
+  await chrome.storage.local.clear();
+  await chrome.storage.sync.clear();
+});
+afterEach(() => {
+  act(() => render(null, root));
+});
+
+describe("Shortcuts page", () => {
+  test("lists cycle and a shortcut per profile in the Profiles group", async () => {
+    await mount();
+    expect(profileRows()).toEqual(["Cycle profiles", "Audio", "Focus"]);
+    expect(inputOf("Audio").value).toBe("B");
+  });
+
+  test("a profile's shortcut is stored under its profile id", async () => {
+    await mount();
+    const input = inputOf("Focus");
+    act(() => input.focus());
+    act(() => {
+      input.dispatchEvent(new KeyboardEvent("keydown", { key: "f", bubbles: true, cancelable: true }));
+    });
+    await settle();
+    expect(await keybindings.get()).toEqual({ "profiles.preset:focus": "F" });
+  });
+
+  test("a profile created elsewhere gets a row", async () => {
+    await mount();
+    await createProfile({ name: "Study", primitives: {} });
+    await settle();
+    expect(profileRows()).toContain("Study");
+  });
+});
diff --git a/web-ext/app/options/routes/Shortcuts.tsx b/web-ext/app/options/routes/Shortcuts.tsx
new file mode 100644
index 00000000..3468f637
--- /dev/null
+++ b/web-ext/app/options/routes/Shortcuts.tsx
@@ -0,0 +1,67 @@
+import { useEffect, useState } from "preact/hooks";
+import PageHeader from "@/ui/layout/PageHeader";
+import Section from "@/ui/layout/Section";
+import Card from "@/ui/layout/Card";
+import Keybinding from "@/ui/form/Keybinding";
+import { useSettings } from "@/kernel/useSettings";
+import { actionId, bindingOf, keybindings, type KeyGroup } from "@/kernel/keys";
+import { playbackKeys } from "@/features/playback/keys";
+import { profilesKeys, profileToggleKeys } from "@/features/profiles/keys";
+import { getAllProfiles, subscribeProfiles } from "@/features/profiles/store";
+import { segmentsKeys } from "@/features/segments/keys";
+import { shortsKeys } from "@/features/shorts/keys";
+
+const GROUPS: { group: KeyGroup; description: string }[] = [
+  { group: playbackKeys, description: "On the watch page." },
+  { group: segmentsKeys, description: "On the watch page, while segments are loaded where it applies." },
+  { group: shortsKeys, description: "On the Shorts player." },
+];
+
+export default function Shortcuts() {
+  const { value: stored, update } = useSettings(keybindings);
+  const [profilesGroup, setProfilesGroup] = useState<KeyGroup>(profilesKeys);
+
+  useEffect(() => {
+    const load = async () => {
+      const toggles = profileToggleKeys(await getAllProfiles());
+      setProfilesGroup({ ...profilesKeys, keys: { ...profilesKeys.keys, ...toggles.keys } });
+    };
+    void load();
+    return subscribeProfiles(() => void load());
+  }, []);
+
+  const groups = [
+    ...GROUPS,
+    { group: profilesGroup, description: "Anywhere on YouTube. A profile's shortcut switches to it; press again to go back." },
+  ];
+
+  return (
+    <>
+      <PageHeader title="Shortcuts" description="Click a shortcut to record a new one. Backspace clears it; Escape cancels." />
+
+      <div class="tw-flex tw-flex-col tw-gap-8">
+        {groups.map(({ group, description }) => (
+          <Section key={group.id} id={group.id} title={group.title} description={description}>
+            <Card>
+              {Object.entries(group.keys).map(([key, definition]) => {
+                const id = actionId(group, key);
+                return (
+                  <Keybinding
+                    key={key}
+                    label={definition.label}
+                    description={definition.description}
+                    value={bindingOf(group, key, stored)}
+                    onChange={(binding) => update({ [id]: binding })}
+                    // The slice merges on write, so an override is dropped by
+                    // writing undefined, which bindingOf reads as the default.
+                    onReset={stored[id] == null ? undefined : () => update({ [id]: undefined })}
+                  />
+                );
+              })}
+            </Card>
+          </Section>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/web-ext/app/options/routes/Shorts.tsx b/web-ext/app/options/routes/Shorts.tsx
new file mode 100644
index 00000000..2370d9f3
--- /dev/null
+++ b/web-ext/app/options/routes/Shorts.tsx
@@ -0,0 +1,73 @@
+import { useSettings } from "@/kernel/useSettings";
+import { shortsSettings } from "@/features/shorts/settings";
+import PageHeader from "@/ui/layout/PageHeader";
+import Section from "@/ui/layout/Section";
+import Card from "@/ui/layout/Card";
+import Switch from "@/ui/form/Switch";
+import Input from "@/ui/form/Input";
+import { isSeconds } from "@/app/options/validators";
+
+const isRate = (v: string) => Number.isFinite(Number(v)) && Number(v) >= 0.0625 && Number(v) <= 16;
+
+export default function Shorts() {
+  const { value, update } = useSettings(shortsSettings);
+
+  return (
+    <>
+      <PageHeader title="Shorts" description="Settings for the YouTube Shorts player." />
+
+      <div class="tw-flex tw-flex-col tw-gap-8">
+        <Section title="Behavior" description="How Shorts playback responds.">
+          <Card>
+            <Switch
+              label="Shorts features"
+              description="Auto-scroll, seek and rate controls on Shorts."
+              isEnabled={value.enabled}
+              onToggle={(enabled) => update({ enabled })}
+            />
+            <Switch
+              label="Auto-scroll"
+              description="Continue to the next Short when one ends."
+              isEnabled={value.autoScroll}
+              onToggle={(autoScroll) => update({ autoScroll })}
+            />
+          </Card>
+        </Section>
+
+        <Section title="Playback rate" description="Toggle between normal speed and a custom rate.">
+          <Card>
+            <Input
+              label="Toggle playback rate"
+              description="Rate to switch to with the toggle button or shortcut."
+              initialValue={String(value.toggleRate)}
+              validator={isRate}
+              errorMessage="Must be between 0.0625 and 16"
+              onChange={(v) => update({ toggleRate: Number(v) })}
+            />
+          </Card>
+        </Section>
+
+        <Section title="Seek" description="How far to jump on the seek shortcuts.">
+          <Card>
+            <Input
+              label="Seek backward"
+              description="Seconds to seek backward."
+              initialValue={String(value.seekBackward)}
+              validator={isSeconds}
+              errorMessage="Must be more than 0"
+              onChange={(v) => update({ seekBackward: Number(v) })}
+            />
+            <Input
+              label="Seek forward"
+              description="Seconds to seek forward."
+              initialValue={String(value.seekForward)}
+              validator={isSeconds}
+              errorMessage="Must be more than 0"
+              onChange={(v) => update({ seekForward: Number(v) })}
+            />
+          </Card>
+        </Section>
+      </div>
+    </>
+  );
+}
diff --git a/web-ext/app/options/routes/Watch.tsx b/web-ext/app/options/routes/Watch.tsx
new file mode 100644
index 00000000..7e2151bd
--- /dev/null
+++ b/web-ext/app/options/routes/Watch.tsx
@@ -0,0 +1,222 @@
+import { useEffect, useState } from "preact/hooks";
+import Button from "@/ui/primitives/Button";
+import PageHeader from "@/ui/layout/PageHeader";
+import Section from "@/ui/layout/Section";
+import Card from "@/ui/layout/Card";
+import Input from "@/ui/form/Input";
+import Select from "@/ui/form/Select";
+import Switch from "@/ui/form/Switch";
+import CapabilityStatusRow from "@/app/options/components/CapabilityStatusRow";
+import { isNudgeMax, isNudgeStep, isSeconds } from "@/app/options/validators";
+import { useSettings } from "@/kernel/useSettings";
+import { useCapabilityCache } from "@/kernel/dom/useCapabilities";
+import { MAX_RATE, MIN_RATE, parseRates, playbackSettings } from "@/features/playback/settings";
+import { segmentsSettings } from "@/features/segments/settings";
+import type { AutoLoad } from "@/features/segments/store";
+import {
+  getUndismissedRecovered,
+  dismissRecovered,
+  type RecoveredFeature,
+} from "@/kernel/dom/featureReports";
+
+// Adding a watch-page primitive means appending an entry here; nothing
+// discovers them automatically.
+const WATCH_PRIMITIVES: { id: string; label: string }[] = [
+  { id: "watch.player",        label: "Video Player" },
+  { id: "watch.rightControls", label: "Player Controls Bar" },
+  { id: "watch.progressBar",   label: "Progress Bar" },
+  { id: "watch.moviePlayer",   label: "Movie Player Container" },
+  { id: "watch.settingsButton",label: "Settings Button" },
+  { id: "watch.speedRow",      label: "Playback Speed Menu Row" },
+  { id: "watch.ratePanel",     label: "Playback Speed Panel" },
+  { id: "watch.sidebar",       label: "Recommendations Sidebar" },
+  { id: "watch.comments",      label: "Comments Section" },
+  { id: "watch.endCards",      label: "End Screen Cards" },
+];
+
+const isRate = (v: string) => Number.isFinite(Number(v)) && Number(v) >= MIN_RATE && Number(v) <= MAX_RATE;
+const isStep = (v: string) => Number.isFinite(Number(v)) && Number(v) > 0 && Number(v) <= MAX_RATE;
+const isRateList = (v: string) => parseRates(v) !== undefined;
+
+function useRecoveredFeatures() {
+  const [recovered, setRecovered] = useState<RecoveredFeature[]>([]);
+
+  useEffect(() => {
+    getUndismissedRecovered().then(setRecovered);
+  }, []);
+
+  const dismiss = async (primitiveId: string) => {
+    await dismissRecovered(primitiveId);
+    setRecovered((prev) => prev.filter((r) => r.primitiveId !== primitiveId));
+  };
+
+  return { recovered, dismiss };
+}
+
+export default function Watch() {
+  const { value, update } = useSettings(playbackSettings);
+  const segments = useSettings(segmentsSettings);
+  const { getStatus, isLoading } = useCapabilityCache();
+  const { recovered, dismiss } = useRecoveredFeatures();
+
+  return (
+    <>
+      <PageHeader title="Watch" description="Playback rate, seek, and segments on the watch page." />
+
+      {recovered.map((r) => (
+        <div key={r.primitiveId} class="tw-flex tw-items-start tw-justify-between tw-gap-4 tw-p-4 tw-mb-6 tw-rounded-xl tw-bg-success-bg">
+          <div class="tw-flex tw-flex-col tw-gap-0.5">
+            <span class="tw-text-sm tw-font-medium tw-text-success-fg">A feature you reported works again</span>
+            <span class="tw-text-xs tw-text-fg-muted">
+              <code>{r.primitiveId}</code> now resolves on your YouTube.
+            </span>
+          </div>
+          <Button size="sm" variant="ghost" onClick={() => void dismiss(r.primitiveId)}>Dismiss</Button>
+        </div>
+      ))}
+
+      <div class="tw-flex tw-flex-col tw-gap-8">
+        <Section
+          id="playback-rate"
+          title="Playback rate"
+          description="Custom rate options and the default rate applied when a video starts."
+        >
+          <Card>
+            <Switch
+              label="Playback controls"
+              description="Default rate, rate shortcuts and seek shortcuts on the watch page."
+              isEnabled={value.enabled}
+              onToggle={(enabled) => update({ enabled })}
+            />
+            <Input
+              label="Default playback rate"
+              description="Rate applied to every video on load. 1 = Normal."
+              initialValue={String(value.defaultRate)}
+              validator={isRate}
+              errorMessage={`Must be between ${MIN_RATE} and ${MAX_RATE}`}
+              onChange={(v) => update({ defaultRate: Number(v) })}
+            />
+            <Input
+              label="Custom playback rates"
+              description="Leave empty to keep YouTube's speed menu, or comma-separated rates that include 1."
+              initialValue={value.customRates.join(", ")}
+              validator={isRateList}
+              errorMessage={`Comma-separated rates between ${MIN_RATE} and ${MAX_RATE}, including 1`}
+              widthClass="tw-w-72"
+              onChange={(v) => update({ customRates: parseRates(v) ?? [] })}
+            />
+            <Input
+              label="Toggle playback rate"
+              description="Rate to switch to with the toggle shortcut."
+              initialValue={String(value.toggleRate)}
+              validator={isRate}
+              errorMessage={`Must be between ${MIN_RATE} and ${MAX_RATE}`}
+              onChange={(v) => update({ toggleRate: Number(v) })}
+            />
+            <Input
+              label="Playback rate step"
+              description="Amount the rate changes on the increase and decrease shortcuts."
+              initialValue={String(value.rateStep)}
+              validator={isStep}
+              errorMessage={`Must be between 0 and ${MAX_RATE}`}
+              onChange={(v) => update({ rateStep: Number(v) })}
+            />
+          </Card>
+        </Section>
+
+        <Section id="seek" title="Seek" description="How far to jump on the seek shortcuts.">
+          <Card>
+            <Input
+              label="Seek backward"
+              description="Seconds to seek backward."
+              initialValue={String(value.seekBackward)}
+              validator={isSeconds}
+              errorMessage="Must be more than 0"
+              onChange={(v) => update({ seekBackward: Number(v) })}
+            />
+            <Input
+              label="Seek forward"
+              description="Seconds to seek forward."
+              initialValue={String(value.seekForward)}
+              validator={isSeconds}
+              errorMessage="Must be more than 0"
+              onChange={(v) => update({ seekForward: Number(v) })}
+            />
+          </Card>
+        </Section>
+
+        <Section
+          id="segments"
+          title="Segments"
+          description="Time-range segments on any video, played in sequence."
+        >
+          <Card>
+            <Switch
+              label="Segments"
+              description="The segments button, panel and markers, and their shortcuts."
+              isEnabled={segments.value.enabled}
+              onToggle={(enabled) => segments.update({ enabled })}
+            />
+            <Select<AutoLoad>
+              label="Auto-load on page open"
+              description="Whether to automatically restore segments when you open a video. Per-video pins (set in the player panel) override this setting."
+              value={segments.value.autoLoad}
+              options={[
+                { value: "off", label: "Off — manual only (press Z to load)" },
+                { value: "last-used", label: "Restore last-used session" },
+                { value: "default", label: "Restore default saved config" },
+              ]}
+              onChange={(autoLoad) => segments.update({ autoLoad })}
+            />
+            <Input
+              label="Nudge step"
+              description="Seconds a segment edge moves on the first nudge."
+              initialValue={String(segments.value.nudgeBaseStep)}
+              validator={(v) => isNudgeStep(v, segments.value.nudgeMaxStep)}
+              errorMessage="Must be more than 0 and no more than the nudge maximum"
+              onChange={(v) => segments.update({ nudgeBaseStep: Number(v) })}
+            />
+            <Input
+              label="Nudge multiplier"
+              description="How much the step grows on each repeated nudge in the same direction."
+              initialValue={String(segments.value.nudgeMultiplier)}
+              validator={isStep}
+              onChange={(v) => segments.update({ nudgeMultiplier: Number(v) })}
+            />
+            <Input
+              label="Nudge maximum"
+              description="Largest step a repeated nudge can reach, in seconds."
+              initialValue={String(segments.value.nudgeMaxStep)}
+              validator={(v) => isNudgeMax(v, segments.value.nudgeBaseStep)}
+              errorMessage="Must be at least the nudge step"
+              onChange={(v) => segments.update({ nudgeMaxStep: Number(v) })}
+            />
+          </Card>
+        </Section>
+
+        <Section
+          id="feature-availability"
+          title="Feature availability"
+          description="Which features work on your YouTube. Its layout varies by account; report anything shown as unavailable."
+        >
+          <Card>
+            {isLoading ? (
+              <div class="tw-py-4 tw-text-sm tw-text-fg-subtle tw-text-center">
+                Checking features…
+              </div>
+            ) : (
+              WATCH_PRIMITIVES.map(({ id, label }) => (
+                <CapabilityStatusRow
+                  key={id}
+                  primitiveId={id}
+                  label={label}
+                  status={getStatus(id)}
+                />
+              ))
+            )}
+          </Card>
+        </Section>
+      </div>
+    </>
+  );
+}
diff --git a/web-ext/app/options/search/OptionsSearch.test.ts b/web-ext/app/options/search/OptionsSearch.test.ts
new file mode 100644
index 00000000..6b8d6682
--- /dev/null
+++ b/web-ext/app/options/search/OptionsSearch.test.ts
@@ -0,0 +1,56 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { h, render } from "preact";
+import { act } from "preact/test-utils";
+import Shortcuts from "@/app/options/routes/Shortcuts";
+import Profiles from "@/app/options/routes/Profiles";
+import General from "@/app/options/routes/General";
+import { ToastProvider } from "@/ui/feedback/ToastProvider";
+import OptionsSearch from "./OptionsSearch";
+import { SEARCH_INDEX } from "./searchIndex";
+
+const root = document.createElement("div");
+document.body.append(root);
+
+const wait = (ms: number) => act(() => new Promise((r) => setTimeout(r, ms)));
+
+afterEach(() => {
+  act(() => render(null, root));
+});
+
+describe("options search", () => {
+  test("a Shorts shortcut result flashes the Shorts row, not the Playback one with the same label", async () => {
+    act(() => {
+      render(h("div", null, h(OptionsSearch, null), h(Shortcuts, null)), root);
+    });
+    const search = root.querySelector<HTMLInputElement>("input[aria-label='Search settings']")!;
+    act(() => {
+      search.value = "Seek forward";
+      search.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    const result = [...root.querySelectorAll("button")].find((b) => b.textContent === "Seek forwardShortcuts › Shorts")!;
+    act(() => result.click());
+    await wait(200);
+    const flashed = root.querySelector(".tppng-section-flash");
+    expect(flashed?.closest("section")?.id).toBe("shorts");
+  });
+
+  test("Profiles section entries match the rendered headings", async () => {
+    act(() => {
+      render(h(ToastProvider, null, h(Profiles, null)), root);
+    });
+    await wait(20);
+    const headings = [...root.querySelectorAll("h2")].map((el) => el.textContent);
+    const sections = SEARCH_INDEX.filter((e) => e.page === "Profiles" && e.label === e.section).map((e) => e.label);
+    expect(sections.length).toBeGreaterThan(0);
+    for (const label of sections) expect(headings).toContain(label);
+  });
+
+  test("every General page entry matches a rendered label", async () => {
+    act(() => {
+      render(h(ToastProvider, null, h(General, null)), root);
+    });
+    await wait(20);
+    const labels = [...root.querySelectorAll("label, h2")].map((el) => el.textContent?.trim());
+    for (const entry of SEARCH_INDEX.filter((e) => e.page === "General")) expect(labels).toContain(entry.label);
+  });
+});
diff --git a/web-ext/app/options/search/OptionsSearch.tsx b/web-ext/app/options/search/OptionsSearch.tsx
new file mode 100644
index 00000000..5e989971
--- /dev/null
+++ b/web-ext/app/options/search/OptionsSearch.tsx
@@ -0,0 +1,112 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import Icon from "@/ui/primitives/Icon";
+import { navigate } from "../router";
+import { fuzzySearch, type SearchEntry, type SearchResult } from "./searchIndex";
+
+function Highlighted({ text, indices }: { text: string; indices: number[] }) {
+  const marks = new Set(indices);
+  return <>{[...text].map((ch, i) => (marks.has(i) ? <mark class="tppng-search-highlight">{ch}</mark> : ch))}</>;
+}
+
+// Results are located by their rendered label: a field's <label> first, then
+// a section heading, so a row wins over the section that contains it. The
+// search stays inside the entry's section, because the Shortcuts page repeats
+// labels across groups.
+function findByLabel(label: string, scope: ParentNode): HTMLElement | null {
+  for (const el of scope.querySelectorAll<HTMLElement>("label, h2")) {
+    if (el.textContent?.trim() !== label) continue;
+    return el.closest<HTMLElement>("section, [class*='tw-py-3']") ?? el;
+  }
+  return null;
+}
+
+function flash(el: HTMLElement): void {
+  el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  el.classList.remove("tppng-section-flash");
+  void el.offsetWidth;
+  el.classList.add("tppng-section-flash");
+  setTimeout(() => el.classList.remove("tppng-section-flash"), 1000);
+}
+
+export default function OptionsSearch() {
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(0);
+  const root = useRef<HTMLDivElement>(null);
+  const input = useRef<HTMLInputElement>(null);
+  const results = fuzzySearch(query);
+
+  const go = ({ entry }: SearchResult) => {
+    setQuery("");
+    setOpen(false);
+    navigate(entry.segment);
+    // The row exists only once the page has rendered.
+    setTimeout(() => {
+      const section = entry.sectionId ? document.getElementById(entry.sectionId) : null;
+      const target = findByLabel(entry.label, section ?? document) ?? section;
+      if (target) flash(target);
+    }, 150);
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") return (setOpen(false), input.current?.blur());
+    if (!open || !results.length) return;
+    if (e.key === "ArrowDown") (e.preventDefault(), setActive((i) => (i + 1) % results.length));
+    else if (e.key === "ArrowUp") (e.preventDefault(), setActive((i) => (i - 1 + results.length) % results.length));
+    else if (e.key === "Enter") (e.preventDefault(), go(results[active]));
+  };
+
+  useEffect(() => {
+    const onDown = (e: MouseEvent) => {
+      if (!root.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, []);
+  useEffect(() => setActive(0), [query]);
+
+  const crumb = (entry: SearchEntry) => `${entry.page}${entry.section ? ` › ${entry.section}` : ""}`;
+
+  return (
+    <div ref={root} class="tw-relative tw-px-3 tw-pb-3">
+      <div class="tw-relative tw-flex tw-items-center">
+        <Icon name="search" size={16} class="tw-absolute tw-left-3 tw-text-fg-subtle tw-pointer-events-none" />
+        <input
+          ref={input}
+          type="text"
+          value={query}
+          placeholder="Search settings"
+          aria-label="Search settings"
+          onInput={(e) => (setQuery(e.currentTarget.value), setOpen(true))}
+          onFocus={() => setOpen(true)}
+          onKeyDown={onKeyDown}
+          class="tw-w-full tw-h-9 tw-bg-surface-hover tw-rounded-full tw-pl-9 tw-pr-8 tw-text-sm tw-text-fg placeholder:tw-text-fg-subtle focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-accent"
+        />
+        {query && (
+          <button type="button" aria-label="Clear search" onClick={() => (setQuery(""), input.current?.focus())} class="tw-absolute tw-right-2.5 tw-text-fg-subtle hover:tw-text-fg">
+            <Icon name="x" size={14} />
+          </button>
+        )}
+      </div>
+      {open && query && (
+        <div class="tw-absolute tw-left-3 tw-right-3 tw-top-full tw-mt-1 tw-bg-surface-2 tw-rounded-xl tw-shadow-xl tw-z-50 tw-overflow-hidden tw-py-1">
+          {results.length === 0 && <p class="tw-px-3 tw-py-2 tw-text-xs tw-text-fg-subtle">No results for “{query}”</p>}
+          {results.map((result, i) => (
+            <button
+              key={`${result.entry.segment}-${result.entry.section}-${result.entry.label}`}
+              type="button"
+              onMouseEnter={() => setActive(i)}
+              onClick={() => go(result)}
+              class={`tw-w-full tw-text-left tw-px-3 tw-py-2 tw-transition-colors ${i === active ? "tw-bg-surface-hover" : ""}`}
+            >
+              <div class="tw-text-sm tw-text-fg tw-leading-snug">
+                <Highlighted text={result.entry.label} indices={result.matchedIndices} />
+              </div>
+              <div class="tw-text-[11px] tw-text-fg-subtle tw-mt-0.5">{crumb(result.entry)}</div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web-ext/app/options/search/searchIndex.ts b/web-ext/app/options/search/searchIndex.ts
new file mode 100644
index 00000000..9b01ee46
--- /dev/null
+++ b/web-ext/app/options/search/searchIndex.ts
@@ -0,0 +1,102 @@
+import { playbackKeys } from "@/features/playback/keys";
+import { profilesKeys } from "@/features/profiles/keys";
+import { segmentsKeys } from "@/features/segments/keys";
+import { shortsKeys } from "@/features/shorts/keys";
+
+export interface SearchEntry {
+  // Must match the rendered label character for character: a result is
+  // located in the DOM by this text, so a copy edit in the page must land
+  // here too.
+  label: string;
+  description?: string;
+  segment: string;
+  sectionId?: string;
+  page: string;
+  section?: string;
+}
+
+export interface SearchResult {
+  entry: SearchEntry;
+  score: number;
+  matchedIndices: number[];
+}
+
+const shortcutEntries = (group: { id: string; title: string; keys: Record<string, { label: string; description?: string }> }): SearchEntry[] =>
+  Object.values(group.keys).map((key) => ({ label: key.label, description: key.description, segment: "shortcuts", sectionId: group.id, page: "Shortcuts", section: group.title }));
+
+export const SEARCH_INDEX: SearchEntry[] = [
+  { label: "Enable Toppings", description: "When off, nothing runs on YouTube.", segment: "", page: "General", section: "Extension" },
+  { label: "Appearance", description: "System, dark, or light, for the popup and this page.", segment: "", page: "General", section: "Appearance" },
+  { label: "Player gear menu", description: "A Profile row in the player\'s settings menu.", segment: "", page: "General", section: "Profile surfaces" },
+  { label: "Audio button in the player", description: "A headphones button that turns the Audio profile on and off.", segment: "", page: "General", section: "Profile surfaces" },
+  { label: "Re-scan features", description: "Clears the cached feature compatibility check.", segment: "", page: "General", section: "Diagnostics" },
+  { label: "Playback controls", description: "Default rate, rate shortcuts and seek shortcuts on the watch page.", segment: "watch", sectionId: "playback-rate", page: "Watch", section: "Playback rate" },
+  { label: "Default playback rate", description: "Rate applied to every video on load.", segment: "watch", sectionId: "playback-rate", page: "Watch", section: "Playback rate" },
+  { label: "Custom playback rates", description: "Rates offered in the player's speed panel.", segment: "watch", sectionId: "playback-rate", page: "Watch", section: "Playback rate" },
+  { label: "Toggle playback rate", description: "Rate to switch to with the toggle shortcut.", segment: "watch", sectionId: "playback-rate", page: "Watch", section: "Playback rate" },
+  { label: "Playback rate step", description: "Amount the rate changes on the increase and decrease shortcuts.", segment: "watch", sectionId: "playback-rate", page: "Watch", section: "Playback rate" },
+  { label: "Seek backward", description: "Seconds to seek backward.", segment: "watch", sectionId: "seek", page: "Watch", section: "Seek" },
+  { label: "Seek forward", description: "Seconds to seek forward.", segment: "watch", sectionId: "seek", page: "Watch", section: "Seek" },
+  { label: "Segments", description: "The segments button, panel and markers, and their shortcuts.", segment: "watch", sectionId: "segments", page: "Watch", section: "Segments" },
+  { label: "Auto-load on page open", description: "Restore segments when you open a video.", segment: "watch", sectionId: "segments", page: "Watch", section: "Segments" },
+  { label: "Nudge step", description: "Seconds a segment edge moves on the first nudge.", segment: "watch", sectionId: "segments", page: "Watch", section: "Segments" },
+  { label: "Nudge multiplier", description: "How much the step grows on repeated nudges.", segment: "watch", sectionId: "segments", page: "Watch", section: "Segments" },
+  { label: "Nudge maximum", description: "Largest step a repeated nudge can reach.", segment: "watch", sectionId: "segments", page: "Watch", section: "Segments" },
+  { label: "Feature availability", description: "Which features work on your YouTube.", segment: "watch", sectionId: "feature-availability", page: "Watch", section: "Feature availability" },
+  { label: "Shorts features", description: "Auto-scroll, seek and rate controls on Shorts.", segment: "shorts", page: "Shorts", section: "Behavior" },
+  { label: "Auto-scroll", description: "Continue to the next Short when one ends.", segment: "shorts", page: "Shorts", section: "Behavior" },
+  { label: "Toggle playback rate", description: "Rate to switch to on Shorts.", segment: "shorts", page: "Shorts", section: "Playback rate" },
+  { label: "Seek backward", description: "Seconds to seek backward on Shorts.", segment: "shorts", page: "Shorts", section: "Seek" },
+  { label: "Seek forward", description: "Seconds to seek forward on Shorts.", segment: "shorts", page: "Shorts", section: "Seek" },
+  { label: "Runtime statistics", description: "Total and average runtime at the top of playlist pages.", segment: "playlist", page: "Playlist", section: "Runtime statistics" },
+  { label: "Built-in presets", description: "Audio and Focus, ready to activate.", segment: "profiles", page: "Profiles", section: "Built-in presets" },
+  { label: "Audio", description: "Built-in preset: hides the video, keeps the sound.", segment: "profiles", page: "Profiles", section: "Built-in presets" },
+  { label: "Focus", description: "Built-in preset: hides sidebar, comments, and end cards.", segment: "profiles", page: "Profiles", section: "Built-in presets" },
+  { label: "My profiles", description: "Your own mix of page tweaks.", segment: "profiles", page: "Profiles", section: "My profiles" },
+  { label: "Video screen", description: "Real video, black screen, visualizer, or your own image, in a profile.", segment: "profiles", page: "Profiles", section: "My profiles" },
+  { label: "Schedules", description: "Switch a profile on by time of day or by place.", segment: "profiles", page: "Profiles", section: "Schedules" },
+  { label: "Places", description: "Saved places for schedules, kept on this device.", segment: "profiles", page: "Profiles", section: "Places" },
+  ...shortcutEntries(playbackKeys),
+  ...shortcutEntries(segmentsKeys),
+  ...shortcutEntries(shortsKeys),
+  ...shortcutEntries(profilesKeys),
+];
+
+// Subsequence match: query characters must appear in order but need not be
+// adjacent. Bonuses pull contiguous and word-start matches above scattered ones.
+function fuzzyMatch(text: string, query: string): { score: number; indices: number[] } {
+  const t = text.toLowerCase();
+  const q = query.toLowerCase();
+  const indices: number[] = [];
+  let score = 0;
+  let run = 0;
+  let qi = 0;
+  for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+    if (t[ti] !== q[qi]) continue;
+    run = indices.length && indices[indices.length - 1] === ti - 1 ? run + 1 : 0;
+    score += 1 + run * 2 + (ti === 0 || t[ti - 1] === " " ? 3 : 0);
+    indices.push(ti);
+    qi++;
+  }
+  if (qi < q.length) return { score: 0, indices: [] };
+  if (t.includes(q)) score += 15;
+  if (t.startsWith(q)) score += 25;
+  if (t === q) score += 50;
+  return { score, indices };
+}
+
+export function fuzzySearch(query: string): SearchResult[] {
+  const q = query.trim();
+  if (!q) return [];
+  const results: SearchResult[] = [];
+  for (const entry of SEARCH_INDEX) {
+    const label = fuzzyMatch(entry.label, q);
+    const score =
+      label.score * 3 +
+      (entry.section ? fuzzyMatch(entry.section, q).score * 1.5 : 0) +
+      fuzzyMatch(entry.page, q).score +
+      (entry.description ? fuzzyMatch(entry.description, q).score * 0.5 : 0);
+    if (score > 0) results.push({ entry, score, matchedIndices: label.indices });
+  }
+  return results.sort((a, b) => b.score - a.score).slice(0, 10);
+}
diff --git a/web-ext/app/options/validators.test.ts b/web-ext/app/options/validators.test.ts
new file mode 100644
index 00000000..952f3dd5
--- /dev/null
+++ b/web-ext/app/options/validators.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, test } from "bun:test";
+import { isNudgeMax, isNudgeStep, isSeconds } from "./validators";
+
+describe("options validators", () => {
+  test("seconds must be a positive number, not a blank field", () => {
+    expect(isSeconds("5")).toBe(true);
+    expect(isSeconds("0.5")).toBe(true);
+    expect(isSeconds("")).toBe(false);
+    expect(isSeconds("  ")).toBe(false);
+    expect(isSeconds("0")).toBe(false);
+    expect(isSeconds("-1")).toBe(false);
+    expect(isSeconds("abc")).toBe(false);
+    expect(isSeconds("Infinity")).toBe(false);
+  });
+
+  test("the nudge step stays at or under the maximum, and the maximum at or over the step", () => {
+    expect(isNudgeStep("2", 16)).toBe(true);
+    expect(isNudgeStep("16", 16)).toBe(true);
+    expect(isNudgeStep("20", 16)).toBe(false);
+    expect(isNudgeStep("", 16)).toBe(false);
+    expect(isNudgeMax("16", 1)).toBe(true);
+    expect(isNudgeMax("1", 1)).toBe(true);
+    expect(isNudgeMax("0.5", 1)).toBe(false);
+    expect(isNudgeMax(" ", 1)).toBe(false);
+  });
+});
diff --git a/web-ext/app/options/validators.ts b/web-ext/app/options/validators.ts
new file mode 100644
index 00000000..3d4f8af0
--- /dev/null
+++ b/web-ext/app/options/validators.ts
@@ -0,0 +1,7 @@
+// Number("") and Number("  ") are 0, so a cleared field would otherwise pass
+// as a real value.
+export const isSeconds = (v: string) => v.trim() !== "" && Number.isFinite(Number(v)) && Number(v) > 0;
+
+export const isNudgeStep = (v: string, maxStep: number) => isSeconds(v) && Number(v) <= maxStep;
+
+export const isNudgeMax = (v: string, baseStep: number) => isSeconds(v) && Number(v) >= baseStep;
diff --git a/web-ext/app/popup/App.test.ts b/web-ext/app/popup/App.test.ts
new file mode 100644
index 00000000..92ce913f
--- /dev/null
+++ b/web-ext/app/popup/App.test.ts
@@ -0,0 +1,63 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { h, render } from "preact";
+import { act } from "preact/test-utils";
+import { scheduleState } from "@/features/schedules/state";
+import { skipSchedule } from "@/features/schedules/messages";
+import App from "./App";
+
+const root = document.createElement("div");
+document.body.append(root);
+const originalSendMessage = chrome.runtime.sendMessage;
+let sent: unknown[] = [];
+
+const settle = () => act(() => new Promise((r) => setTimeout(r, 20)));
+
+const mount = async () => {
+  act(() => {
+    render(h(App, null), root);
+  });
+  await settle();
+};
+
+const statusLine = () => root.querySelector("[role='status']");
+const skipButton = () => [...root.querySelectorAll("button")].find((b) => b.textContent?.trim() === "Skip");
+
+beforeEach(async () => {
+  await chrome.storage.local.clear();
+  sent = [];
+  Object.assign(chrome, { tabs: { query: async () => [] } });
+  Object.assign(chrome.runtime, {
+    sendMessage: async (message: unknown) => {
+      sent.push(message);
+      return { response: undefined };
+    },
+  });
+});
+afterEach(() => {
+  act(() => render(null, root));
+  Object.assign(chrome.runtime, { sendMessage: originalSendMessage });
+  Reflect.deleteProperty(chrome, "tabs");
+});
+
+describe("popup schedule line", () => {
+  test("shows nothing while no schedule has anything to say", async () => {
+    await mount();
+    expect(statusLine()).toBeNull();
+  });
+
+  test("an upcoming change is shown without a Skip", async () => {
+    await scheduleState.set({ status: "Audio turns on at 09:00", inCharge: null });
+    await mount();
+    expect(statusLine()?.textContent).toBe("Audio turns on at 09:00");
+    expect(skipButton()).toBeUndefined();
+  });
+
+  test("Skip asks the background to skip the schedule in charge", async () => {
+    await scheduleState.set({ status: "Audio on by schedule until 18:00", inCharge: "work" });
+    await mount();
+    expect(statusLine()?.textContent).toBe("Audio on by schedule until 18:00");
+    act(() => skipButton()!.click());
+    await settle();
+    expect(sent).toEqual([{ kind: skipSchedule.kind, request: undefined }]);
+  });
+});
diff --git a/web-ext/app/popup/App.tsx b/web-ext/app/popup/App.tsx
new file mode 100644
index 00000000..bcb8834f
--- /dev/null
+++ b/web-ext/app/popup/App.tsx
@@ -0,0 +1,153 @@
+import { useEffect, useState } from "preact/hooks";
+import { useTheme } from "@/ui/useTheme";
+import { Toggle } from "@/ui/form/Switch";
+import Icon, { type IconName } from "@/ui/primitives/Icon";
+import { useSettings } from "@/kernel/useSettings";
+import { appSettings } from "@/app/settings";
+import { OPTIONS_HTML } from "@/app/options/data";
+import { playbackSettings } from "@/features/playback/settings";
+import { shortsSettings } from "@/features/shorts/settings";
+import { getActiveProfile, getAllProfiles, setActiveProfileId, subscribeProfiles } from "@/features/profiles/store";
+import type { Profile } from "@/features/profiles/profiles";
+import { scheduleState } from "@/features/schedules/state";
+import { skipSchedule } from "@/features/schedules/messages";
+import { routeFor, type Route } from "@/youtube/route";
+import { URLS } from "@/lib/urls";
+import { EXTENSION_VERSION } from "@/lib/version";
+import { YOUTUBE_HOSTNAME_SUFFIX } from "@/youtube/urls";
+
+const WIDTH = 340;
+
+const ROUTE_LABEL: Record<Route["name"], string> = {
+  watch: "Watch page",
+  shorts: "Shorts",
+  playlist: "Playlist",
+  home: "Home",
+  search: "Search",
+  other: "YouTube",
+};
+
+function useActiveTab() {
+  const [tab, setTab] = useState<{ host: string; route: Route | null }>({ host: "", route: null });
+  useEffect(() => {
+    void chrome.tabs.query({ active: true, currentWindow: true }).then(([active]) => {
+      if (!active?.url) return;
+      const url = new URL(active.url);
+      setTab({ host: url.hostname, route: url.hostname.endsWith(YOUTUBE_HOSTNAME_SUFFIX) ? routeFor(url) : null });
+    });
+  }, []);
+  return tab;
+}
+
+function useProfiles() {
+  const [profiles, setProfiles] = useState<Profile[]>([]);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  useEffect(() => {
+    const load = async () => {
+      setProfiles(await getAllProfiles());
+      setActiveId((await getActiveProfile())?.id ?? null);
+    };
+    void load();
+    return subscribeProfiles(() => void load());
+  }, []);
+  return { profiles, activeId, activate: (id: string | null) => void setActiveProfileId(id) };
+}
+
+function Row({ title, subtitle, on, onToggle, disabled }: { title: string; subtitle: string; on: boolean; onToggle: () => void; disabled?: boolean }) {
+  return (
+    <div class={`tw-flex tw-items-center tw-gap-3 tw-px-4 tw-h-14 ${disabled ? "tw-opacity-40 tw-pointer-events-none" : ""}`}>
+      <div class="tw-min-w-0 tw-flex-1">
+        <div class="tw-text-sm tw-text-fg tw-truncate">{title}</div>
+        <div class="tw-text-xs tw-text-fg-muted tw-truncate">{subtitle}</div>
+      </div>
+      <Toggle on={on} onClick={onToggle} label={title} />
+    </div>
+  );
+}
+
+function NavButton({ icon, label, onClick }: { icon: IconName; label: string; onClick: () => void }) {
+  return (
+    <button type="button" title={label} aria-label={label} onClick={onClick} class="tw-flex-1 tw-grid tw-place-items-center tw-h-12 tw-text-fg-muted hover:tw-bg-surface-hover hover:tw-text-fg tw-transition-colors">
+      <Icon name={icon} size={22} />
+    </button>
+  );
+}
+
+export default function App() {
+  useTheme();
+  const app = useSettings(appSettings);
+  const playback = useSettings(playbackSettings);
+  const shorts = useSettings(shortsSettings);
+  const schedule = useSettings(scheduleState).value;
+  const tab = useActiveTab();
+  const { profiles, activeId, activate } = useProfiles();
+  const onYouTube = tab.route !== null;
+
+  return (
+    <div class="tw-flex tw-flex-col tw-overflow-hidden tw-bg-bg tw-text-fg tw-rounded-xl" style={{ width: WIDTH }}>
+      <header class="tw-flex tw-items-center tw-gap-3 tw-px-4 tw-h-14 tw-border-b tw-border-border-subtle">
+        <img src="/assets/icons/icon48.png" alt="" class="tw-w-7 tw-h-7" />
+        <div class="tw-flex-1 tw-font-display tw-text-xl tw-leading-none">Toppings</div>
+        <span class="tw-text-[11px] tw-text-fg-subtle">v{EXTENSION_VERSION}</span>
+      </header>
+
+      <div class="tw-flex tw-items-center tw-gap-2.5 tw-px-4 tw-py-3 tw-bg-surface tw-border-b tw-border-border-subtle">
+        <span aria-hidden class={`tw-inline-block tw-w-2 tw-h-2 tw-rounded-full ${onYouTube && app.value.enabled ? "tw-bg-accent tw-animate-[pulseAccent_1.6s_ease-out_infinite]" : "tw-bg-fg-subtle"}`} />
+        <div class="tw-min-w-0 tw-flex-1">
+          <div class="tw-text-[13px] tw-font-medium tw-truncate">{tab.route ? `${ROUTE_LABEL[tab.route.name]} · ${app.value.enabled ? "active" : "off"}` : "Open a YouTube page"}</div>
+          <div class="tw-text-[11px] tw-text-fg-subtle tw-truncate">{tab.host || "—"}</div>
+        </div>
+      </div>
+
+      <div class="tw-divide-y tw-divide-border-subtle">
+        <Row title="Toppings" subtitle={app.value.enabled ? "Running on every YouTube tab" : "Turned off everywhere"} on={app.value.enabled} onToggle={() => app.update({ enabled: !app.value.enabled })} />
+        <Row title="Playback controls" subtitle={`Rates · seek · default ${playback.value.defaultRate}×`} on={playback.value.enabled} onToggle={() => playback.update({ enabled: !playback.value.enabled })} disabled={!app.value.enabled} />
+        <Row title="Auto-scroll Shorts" subtitle="Continue when one ends" on={shorts.value.autoScroll} onToggle={() => shorts.update({ autoScroll: !shorts.value.autoScroll })} disabled={!app.value.enabled} />
+      </div>
+
+      <div class="tw-px-4 tw-pt-3 tw-pb-2 tw-bg-surface tw-border-t tw-border-border-subtle">
+        <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
+          <span class="tw-text-[11px] tw-font-medium tw-uppercase tw-tracking-wider tw-text-fg-subtle">Profile</span>
+          {activeId !== null && (
+            <button type="button" class="tw-text-[11px] tw-text-fg-muted hover:tw-text-fg" onClick={() => activate(null)}>
+              Clear
+            </button>
+          )}
+        </div>
+        <div class="tw-flex tw-flex-wrap tw-gap-2 tw-pb-1">
+          {profiles.map((p) => {
+            const active = p.id === activeId;
+            return (
+              <button
+                key={p.id}
+                type="button"
+                aria-pressed={active}
+                onClick={() => activate(active ? null : p.id)}
+                class={`tw-h-8 tw-px-3 tw-rounded-lg tw-text-[13px] tw-font-medium tw-transition-colors ${active ? "tw-bg-fg tw-text-bg" : "tw-bg-surface-hover tw-text-fg hover:tw-bg-border-default"}`}
+              >
+                {p.name}
+              </button>
+            );
+          })}
+        </div>
+        {app.value.enabled && schedule.status && (
+          <div class="tw-flex tw-items-center tw-gap-2 tw-pb-1 tw-pt-1">
+            <span aria-hidden class="tw-inline-block tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-accent tw-flex-shrink-0" />
+            <span role="status" class="tw-min-w-0 tw-flex-1 tw-text-[11px] tw-text-fg-muted tw-truncate" title={schedule.status}>{schedule.status}</span>
+            {schedule.inCharge !== null && (
+              <button type="button" title="Skip this schedule for now" class="tw-text-[11px] tw-text-fg-muted hover:tw-text-fg" onClick={() => void skipSchedule.send()}>
+                Skip
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      <nav class="tw-flex tw-border-t tw-border-border-subtle">
+        <NavButton icon="bug" label="Report a bug" onClick={() => window.open(URLS.GITHUB_ISSUES, "_blank")} />
+        <NavButton icon="heart" label="Add a topping" onClick={() => window.open(URLS.SPONSOR_ME, "_blank")} />
+        <NavButton icon="settings" label="Open settings" onClick={() => window.open(chrome.runtime.getURL(OPTIONS_HTML), "_blank")} />
+      </nav>
+    </div>
+  );
+}
diff --git a/web-ext/app/popup/index.css b/web-ext/app/popup/index.css
new file mode 100644
index 00000000..2fbd45d1
--- /dev/null
+++ b/web-ext/app/popup/index.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "../../ui/base.css";
+
+body {
+  background: transparent;
+}
diff --git a/web-ext/src/popup/index.html b/web-ext/app/popup/index.html
similarity index 88%
rename from web-ext/src/popup/index.html
rename to web-ext/app/popup/index.html
index 27246fc0..b8d6bb43 100644
--- a/web-ext/src/popup/index.html
+++ b/web-ext/app/popup/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Toppings: Quick Access</title>
+    <link rel="stylesheet" href="./index.css" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/web-ext/app/popup/index.tsx b/web-ext/app/popup/index.tsx
new file mode 100644
index 00000000..a4eaf2a2
--- /dev/null
+++ b/web-ext/app/popup/index.tsx
@@ -0,0 +1,4 @@
+import { render } from "preact";
+import App from "./App";
+
+render(<App />, document.getElementById("root")!);
diff --git a/web-ext/app/settings.ts b/web-ext/app/settings.ts
new file mode 100644
index 00000000..af7ed72f
--- /dev/null
+++ b/web-ext/app/settings.ts
@@ -0,0 +1,20 @@
+import { defineSettings } from "@/kernel/settings";
+
+export type ThemePreference = "system" | "dark" | "light";
+
+export interface AppSettings {
+  // The master switch: off means no feature mounts anywhere.
+  enabled: boolean;
+  theme: ThemePreference;
+}
+
+export const appSettings = defineSettings<AppSettings>(
+  "app",
+  { enabled: true, theme: "system" },
+  {
+    legacy: (store) => ({
+      enabled: store.isExtensionEnabled as boolean | undefined,
+      theme: (store.ui as { theme?: ThemePreference } | undefined)?.theme,
+    }),
+  },
+);
diff --git a/web-ext/assets/fonts/OFL-Gloock.txt b/web-ext/assets/fonts/OFL-Gloock.txt
new file mode 100644
index 00000000..3a6f194d
--- /dev/null
+++ b/web-ext/assets/fonts/OFL-Gloock.txt
@@ -0,0 +1,93 @@
+Copyright 2022 The Gloock Project Authors (https://github.com/duartp/gloock)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/web-ext/assets/fonts/OFL-InstrumentSans.txt b/web-ext/assets/fonts/OFL-InstrumentSans.txt
new file mode 100644
index 00000000..26bd2f95
--- /dev/null
+++ b/web-ext/assets/fonts/OFL-InstrumentSans.txt
@@ -0,0 +1,93 @@
+Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/web-ext/assets/fonts/gloock-400.woff2 b/web-ext/assets/fonts/gloock-400.woff2
new file mode 100644
index 00000000..f479c152
Binary files /dev/null and b/web-ext/assets/fonts/gloock-400.woff2 differ
diff --git a/web-ext/assets/fonts/instrument-sans.woff2 b/web-ext/assets/fonts/instrument-sans.woff2
new file mode 100644
index 00000000..665fa65c
Binary files /dev/null and b/web-ext/assets/fonts/instrument-sans.woff2 differ
diff --git a/web-ext/src/assets/icons/disabled_icon128.png b/web-ext/assets/icons/disabled_icon128.png
similarity index 100%
rename from web-ext/src/assets/icons/disabled_icon128.png
rename to web-ext/assets/icons/disabled_icon128.png
diff --git a/web-ext/src/assets/icons/disabled_icon16.png b/web-ext/assets/icons/disabled_icon16.png
similarity index 100%
rename from web-ext/src/assets/icons/disabled_icon16.png
rename to web-ext/assets/icons/disabled_icon16.png
diff --git a/web-ext/src/assets/icons/disabled_icon32.png b/web-ext/assets/icons/disabled_icon32.png
similarity index 100%
rename from web-ext/src/assets/icons/disabled_icon32.png
rename to web-ext/assets/icons/disabled_icon32.png
diff --git a/web-ext/src/assets/icons/disabled_icon48.png b/web-ext/assets/icons/disabled_icon48.png
similarity index 100%
rename from web-ext/src/assets/icons/disabled_icon48.png
rename to web-ext/assets/icons/disabled_icon48.png
diff --git a/web-ext/src/assets/icons/icon128.png b/web-ext/assets/icons/icon128.png
similarity index 100%
rename from web-ext/src/assets/icons/icon128.png
rename to web-ext/assets/icons/icon128.png
diff --git a/web-ext/src/assets/icons/icon16.png b/web-ext/assets/icons/icon16.png
similarity index 100%
rename from web-ext/src/assets/icons/icon16.png
rename to web-ext/assets/icons/icon16.png
diff --git a/web-ext/src/assets/icons/icon32.png b/web-ext/assets/icons/icon32.png
similarity index 100%
rename from web-ext/src/assets/icons/icon32.png
rename to web-ext/assets/icons/icon32.png
diff --git a/web-ext/src/assets/icons/icon48.png b/web-ext/assets/icons/icon48.png
similarity index 100%
rename from web-ext/src/assets/icons/icon48.png
rename to web-ext/assets/icons/icon48.png
diff --git a/web-ext/bun.lock b/web-ext/bun.lock
new file mode 100644
index 00000000..330b6625
--- /dev/null
+++ b/web-ext/bun.lock
@@ -0,0 +1,218 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "web-ext",
+      "dependencies": {
+        "preact": "^10.29.8",
+      },
+      "devDependencies": {
+        "@happy-dom/global-registrator": "^20.14.5",
+        "@types/bun": "^1.3.14",
+        "@types/node": "^20.8.9",
+        "autoprefixer": "^10.4.19",
+        "chrome-types": "^0.1.231",
+        "happy-dom": "^20.14.5",
+        "postcss": "^8.4.38",
+        "tailwindcss": "^3.4.4",
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@alloc/quick-lru": ["@alloc/quick-lru@5.3.0", "", {}, "sha512-U4+70Pc5ZS9osnCBCE5Jha/ciHM+Yp+CNMNC/7HvYbNRk1Ldd+f7qO65W5qfhu/TCv+/ozljlXXe9Nj8419DMA=="],
+
+    "@happy-dom/global-registrator": ["@happy-dom/global-registrator@20.14.5", "", { "dependencies": { "@types/node": ">=20.0.0", "happy-dom": "^20.14.5" } }, "sha512-B05ID9DhSwLs6mlm1fzlkAtTIvB3duCvjJjfr19LBrlTK7VZtRjDqoTRIVv13GuYuNdhByu8LSZgThwV3Rkj7g=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.6.0", "", {}, "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
+
+    "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
+
+    "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
+
+    "@types/bun": ["@types/bun@1.4.2", "", { "dependencies": { "bun-types": "1.4.2" } }, "sha512-GimotNn7+ZV0uVArItBbriZsR1oNf0+WTzPkdcFrzShI7k2norL0uzEaJT8T33dWr7O/c9ZDuAFQrctKCi72oQ=="],
+
+    "@types/node": ["@types/node@20.19.43", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA=="],
+
+    "@types/whatwg-mimetype": ["@types/whatwg-mimetype@3.0.2", "", {}, "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA=="],
+
+    "@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
+
+    "any-promise": ["any-promise@1.3.0", "", {}, "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="],
+
+    "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
+
+    "arg": ["arg@5.0.2", "", {}, "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="],
+
+    "autoprefixer": ["autoprefixer@10.6.1", "", { "dependencies": { "browserslist": "^4.28.9", "caniuse-lite": "^1.0.30001810", "fraction.js": "^5.3.4", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-cL1Qz6ADZhcEbny/8HPfe99J6HhNoYtpX2LFLIbhgGE7Q1hlQVkYFdetDN7Id3KiQxhDrHwzlHr/YQCnZ8+xSA=="],
+
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.11.26", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-GLQdD3y6UF8iVuMJl5fHgE4jdn/ua7n+toKfLgNlg3BqQtOZjpy68T8Tup8/wGWZCDlm7KMg7tPb4MPn7oN0TQ=="],
+
+    "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
+
+    "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
+
+    "browserslist": ["browserslist@4.29.1", "", { "dependencies": { "baseline-browser-mapping": "^2.11.25", "caniuse-lite": "^1.0.30001810", "electron-to-chromium": "^1.5.438", "node-releases": "^2.0.57", "update-browserslist-db": "^1.3.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-AUdjuRyCNGUYtqpqfTmWyM4fXay8yIQhmLnvYe/THMGfT9B/34X7xQd3ifKxwyNPPpowVBjLb+64BN9Rn1mizw=="],
+
+    "buffer-image-size": ["buffer-image-size@0.6.4", "", { "dependencies": { "@types/node": "*" } }, "sha512-nEh+kZOPY1w+gcCMobZ6ETUp9WfibndnosbpwB1iJk/8Gt5ZF2bhS6+B6bPYz424KtwsR6Rflc3tCz1/ghX2dQ=="],
+
+    "bun-types": ["bun-types@1.4.2", "", { "dependencies": { "@types/node": "*" } }, "sha512-bxV1FgK7yBIzjRe5zBozIM4Bem11ZJcCXSrjWRG3YWLt8yFDePu4cLjpebO8OvPeIE9trbyPF4fuj3Cia4Fj3w=="],
+
+    "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
+
+    "caniuse-lite": ["caniuse-lite@1.0.30001812", "", {}, "sha512-qN+QNNBr93TCmFrmte0bBCjSDMuRvt78VlHT99qIGPszm4QsqCX8lnyWUFkHi8B7ZBAPq8SH+UqyXNy/odMdng=="],
+
+    "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
+
+    "chrome-types": ["chrome-types@0.1.450", "", {}, "sha512-ixMJSqLzFkLNd08+Pr59zIBO34XssCn7DhPH5jAOY4ph7lAvDxm38YLpJd7QJXfZwcIIw9zjFlIYzG4MXdZEpw=="],
+
+    "commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
+
+    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
+
+    "didyoumean": ["didyoumean@1.2.2", "", {}, "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="],
+
+    "dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
+
+    "electron-to-chromium": ["electron-to-chromium@1.5.439", "", {}, "sha512-qu6QIPXhsb+CRcAiTMNjR4A1y/7tCYKkKjr5CZXRVih6qkDf79peZ2BpEU3qoDBNCRrcy3Mra3X9nG5oruuA7Q=="],
+
+    "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
+
+    "es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
+
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
+
+    "fastq": ["fastq@1.20.3", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw=="],
+
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
+
+    "fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
+
+    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
+
+    "happy-dom": ["happy-dom@20.14.5", "", { "dependencies": { "@types/node": ">=20.0.0", "@types/whatwg-mimetype": "^3.0.2", "@types/ws": "^8.18.1", "buffer-image-size": "^0.6.4", "entities": "^7.0.1", "whatwg-mimetype": "^3.0.0", "ws": "^8.21.0" } }, "sha512-x/RzkpWO40bTjIoT30iQtt64FLLmH/iRcUCN2X//bLx7H3ifkdfPXyqsro/OYtqzIAhiLMMA7mmiOR9C3NOKjQ=="],
+
+    "hasown": ["hasown@2.0.4", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A=="],
+
+    "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
+
+    "is-core-module": ["is-core-module@2.17.0", "", { "dependencies": { "hasown": "^2.0.4" } }, "sha512-J/vG0zBCbIKOQFfufSwyXdMrsohyJIUNkrnmo6WZGzoM7tr/lsbfW5b2BvisL6zsyMzK9UxV9L6c7AoFbyXHOA=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
+    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
+    "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
+
+    "jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
+
+    "lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
+
+    "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
+
+    "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
+
+    "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
+
+    "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
+
+    "nanoid": ["nanoid@3.3.19", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug=="],
+
+    "node-releases": ["node-releases@2.0.57", "", {}, "sha512-kQK9LGGFiHtrWiNhZtA7Qbw17AQz+dmsEKODRIVTXA9+e5MS/2gZEBhYJt13GrAz5/IOZKddH/0Z3TP/Zgo+yw=="],
+
+    "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
+
+    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
+
+    "object-hash": ["object-hash@3.0.0", "", {}, "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="],
+
+    "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
+
+    "pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],
+
+    "postcss": ["postcss@8.5.28", "", { "dependencies": { "nanoid": "^3.3.18", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A=="],
+
+    "postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
+
+    "postcss-js": ["postcss-js@4.1.0", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw=="],
+
+    "postcss-load-config": ["postcss-load-config@6.0.1", "", { "dependencies": { "lilconfig": "^3.1.1" }, "peerDependencies": { "jiti": ">=1.21.0", "postcss": ">=8.0.9", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["jiti", "postcss", "tsx", "yaml"] }, "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g=="],
+
+    "postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
+
+    "postcss-selector-parser": ["postcss-selector-parser@6.1.4", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ=="],
+
+    "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
+
+    "preact": ["preact@10.29.8", "", { "peerDependencies": { "preact-render-to-string": ">=5" }, "optionalPeers": ["preact-render-to-string"] }, "sha512-ej2aVZ+vZ8WO7tvlQWRM9N63A0KzF9q4mWJfDUHgYaIofWY9hu74QdnQrjoPMmZi2/nZ5gN0bJCQF49xQqx09Q=="],
+
+    "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
+
+    "read-cache": ["read-cache@1.0.2", "", {}, "sha512-/peqiBB/n07gQGLsWaHho3WfvUyRscw0gYTsEFMhrIe/nWLkYaf5SbKYjGYqtRV3aPwykJgF2VEMo1ac4bnsGA=="],
+
+    "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
+
+    "resolve": ["resolve@1.22.12", "", { "dependencies": { "es-errors": "^1.3.0", "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA=="],
+
+    "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
+
+    "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "sucrase": ["sucrase@3.35.1", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "lines-and-columns": "^1.1.6", "mz": "^2.7.0", "pirates": "^4.0.1", "tinyglobby": "^0.2.11", "ts-interface-checker": "^0.1.9" }, "bin": { "sucrase": "bin/sucrase", "sucrase-node": "bin/sucrase-node" } }, "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw=="],
+
+    "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
+
+    "tailwindcss": ["tailwindcss@3.4.19", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.7", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ=="],
+
+    "thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="],
+
+    "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
+
+    "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
+
+    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
+
+    "ts-interface-checker": ["ts-interface-checker@0.1.13", "", {}, "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
+
+    "update-browserslist-db": ["update-browserslist-db@1.3.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-pJ2sYawQS0R/WI928Gj5GlPhTGzbMelq0+4INtSYNDV9ErKJcX6xjGWkoG/VnB3dpUm00zALaqkrUD77pO5TDQ=="],
+
+    "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
+
+    "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
+
+    "ws": ["ws@8.22.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-Ydggc987+RO0AnWtZ/7Wq9FtNvcrL1b/RO0ud9mWjUPgDrsAAwQSF51sm2hm1XofbU/4jkpGEsLFsZZxU+1DOg=="],
+
+    "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+
+    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+
+    "tinyglobby/picomatch": ["picomatch@4.0.7", "", {}, "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA=="],
+  }
+}
diff --git a/web-ext/bun.lockb b/web-ext/bun.lockb
deleted file mode 100755
index b52920bb..00000000
Binary files a/web-ext/bun.lockb and /dev/null differ
diff --git a/web-ext/bunfig.toml b/web-ext/bunfig.toml
new file mode 100644
index 00000000..8755352e
--- /dev/null
+++ b/web-ext/bunfig.toml
@@ -0,0 +1,2 @@
+[test]
+preload = ["./test/setup.ts"]
diff --git a/web-ext/features/playback/RateChips.tsx b/web-ext/features/playback/RateChips.tsx
new file mode 100644
index 00000000..cbc8beb6
--- /dev/null
+++ b/web-ext/features/playback/RateChips.tsx
@@ -0,0 +1,29 @@
+
+export interface RateChipsProps {
+  rates: number[];
+  current: number;
+  onPick: (rate: number) => void;
+}
+
+const chipLabel = (rate: number) => (Number.isInteger(rate) ? rate.toFixed(1) : String(rate));
+
+// Rendered inside YouTube's own speed panel with its class names, so the
+// chips take YouTube's styling and stay in step with its theme.
+export function RateChips({ rates, current, onPick }: RateChipsProps) {
+  return (
+    <>
+      {rates.map((rate) => (
+        <div class="ytp-variable-speed-panel-preset-button-wrapper" aria-hidden="false">
+          <button
+            class="ytp-button ytp-variable-speed-panel-preset-button ytp-variable-speed-panel-button"
+            aria-pressed={rate === current}
+            onClick={() => onPick(rate)}
+          >
+            <span>{chipLabel(rate)}</span>
+          </button>
+          {rate === 1 && <div class="ytp-variable-speed-panel-preset-button-label-text">Normal</div>}
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/web-ext/features/playback/SeekFlash.tsx b/web-ext/features/playback/SeekFlash.tsx
new file mode 100644
index 00000000..261eca0e
--- /dev/null
+++ b/web-ext/features/playback/SeekFlash.tsx
@@ -0,0 +1,32 @@
+
+export interface SeekFlashProps {
+  seconds: number;
+  side: "back" | "forward";
+  visible: boolean;
+}
+
+const style = `
+  :host { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
+  .pill {
+    position: absolute; top: 50%; transform: translateY(-50%);
+    padding: 10px 18px; border-radius: 999px;
+    background: rgba(0, 0, 0, .55); color: #fff;
+    font: 500 15px/1 Roboto, Arial, sans-serif; letter-spacing: .01em;
+    opacity: 0; transition: opacity .15s ease;
+  }
+  .pill[data-visible] { opacity: 1; }
+  .back { left: 12%; }
+  .forward { right: 12%; }
+`;
+
+export function SeekFlash({ seconds, side, visible }: SeekFlashProps) {
+  const sign = side === "back" ? "−" : "+";
+  return (
+    <>
+      <style>{style}</style>
+      <div class={`pill ${side}`} data-visible={visible || undefined}>
+        {sign}{seconds}s
+      </div>
+    </>
+  );
+}
diff --git a/web-ext/features/playback/index.test.ts b/web-ext/features/playback/index.test.ts
new file mode 100644
index 00000000..592bfb04
--- /dev/null
+++ b/web-ext/features/playback/index.test.ts
@@ -0,0 +1,206 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { playback } from "./index";
+import { playbackSettings } from "./settings";
+
+const SPEED_ICON = "M12 1c1.44 0 2.87.28 4.21.83a11 11 0 0 1 3.45 2.27";
+const page = (label = "Playback speed", normal = "Normal") => `
+  <div id="movie_player" class="html5-video-player">
+    <video></video>
+    <button class="ytp-settings-button"></button>
+    <div class="ytp-settings-menu">
+      <div class="ytp-panel"><div class="ytp-panel-menu">
+        <div class="ytp-menuitem"><div class="ytp-menuitem-icon"><svg><path d="${SPEED_ICON}"></path></svg></div><div class="ytp-menuitem-label">${label}</div><div class="ytp-menuitem-content">${normal}</div></div>
+      </div></div>
+      <div class="ytp-panel"><div class="ytp-variable-speed-panel-content">
+        <div class="ytp-variable-speed-panel-display"><span>1.00x</span></div>
+        <input class="ytp-speedslider" type="range" min="0.25" max="2" step="0.05" value="1">
+        <div class="ytp-variable-speed-panel-chips"><div class="ytp-variable-speed-panel-preset-button-wrapper"><button><span>1.0</span></button></div></div>
+      </div></div>
+    </div>
+  </div>`;
+
+const route = { name: "watch", videoId: "v1", playlistId: null } as const;
+const press = (key: string) => document.body.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true }));
+const video = () => document.querySelector("video") as HTMLVideoElement;
+const tick = () => new Promise((r) => setTimeout(r, 5));
+const flashPill = () => document.getElementById("tppng-seek-flash")?.shadowRoot?.querySelector(".pill");
+const chips = () => [...document.querySelectorAll(".ytp-variable-speed-panel-chips button")];
+
+let unmount: (() => void) | undefined | void;
+const mountPlayback = async () => {
+  unmount = await playback.mount({ signal: new AbortController().signal, route });
+};
+
+async function openSpeedPanel() {
+  document.querySelector<HTMLElement>(".ytp-settings-button")!.click();
+  await tick();
+  document.querySelector<HTMLElement>(".ytp-menuitem-label")!.parentElement!.click();
+  await tick();
+}
+
+beforeEach(async () => {
+  await chrome.storage.sync.clear();
+  document.body.innerHTML = page();
+  video().currentTime = 60;
+});
+afterEach(() => {
+  unmount?.();
+  unmount = undefined;
+  document.body.innerHTML = "";
+});
+
+describe("playback", () => {
+  test("applies the default rate on mount", async () => {
+    await playbackSettings.set({ defaultRate: 1.25 });
+    await mountPlayback();
+    await tick();
+    expect(video().playbackRate).toBe(1.25);
+    expect(document.querySelector(".ytp-menuitem-content")!.textContent).toBe("1.25");
+  });
+
+  test("rate keys toggle, step and clamp", async () => {
+    await playbackSettings.set({ toggleRate: 2, rateStep: 0.5 });
+    await mountPlayback();
+    press("x");
+    expect(video().playbackRate).toBe(2);
+    press("w");
+    expect(video().playbackRate).toBe(2.5);
+    press("x");
+    expect(video().playbackRate).toBe(1);
+    for (let i = 0; i < 5; i++) press("s");
+    expect(video().playbackRate).toBe(0.0625);
+  });
+
+  test("sixteenth steps stay exact", async () => {
+    await playbackSettings.set({ rateStep: 0.0625 });
+    await mountPlayback();
+    press("w");
+    press("w");
+    await tick();
+    expect(video().playbackRate).toBe(1.125);
+    expect(document.querySelector(".ytp-menuitem-content")!.textContent).toBe("1.125");
+  });
+
+  test("seek keys move the playhead and flash the amount", async () => {
+    await playbackSettings.set({ seekForward: 10, seekBackward: 30 });
+    await mountPlayback();
+    press("d");
+    expect(video().currentTime).toBe(70);
+    expect(flashPill()?.textContent).toBe("+10s");
+    expect(flashPill()?.hasAttribute("data-visible")).toBe(true);
+    press("a");
+    expect(video().currentTime).toBe(40);
+    expect(flashPill()?.textContent).toBe("−30s");
+    unmount?.();
+    unmount = undefined;
+    expect(document.getElementById("tppng-seek-flash")).toBeNull();
+  });
+
+  test("custom rates replace YouTube's speed chips", async () => {
+    await playbackSettings.set({ customRates: [1, 1.5, 3] });
+    await mountPlayback();
+    await openSpeedPanel();
+    expect(chips().map((b) => b.textContent)).toEqual(["1.0", "1.5", "3.0"]);
+    expect(chips().map((b) => b.getAttribute("aria-pressed"))).toEqual(["true", "false", "false"]);
+
+    (chips()[2] as HTMLElement).click();
+    await tick();
+    expect(video().playbackRate).toBe(3);
+    expect(chips()[2].getAttribute("aria-pressed")).toBe("true");
+    expect(document.querySelector(".ytp-variable-speed-panel-display span")!.textContent).toBe("3.00x");
+    expect(document.querySelector<HTMLInputElement>(".ytp-speedslider")!.value).toBe("3");
+    expect(document.querySelector<HTMLInputElement>(".ytp-speedslider")!.style.getPropertyValue("--yt-slider-shape-gradient-percent")).toBe("100%");
+  });
+
+  test("the panel reflects a rate set by keyboard", async () => {
+    await playbackSettings.set({ customRates: [1, 2], toggleRate: 2 });
+    await mountPlayback();
+    press("x");
+    await openSpeedPanel();
+    expect(document.querySelector(".ytp-variable-speed-panel-display span")!.textContent).toBe("2.00x");
+    expect(chips()[1].getAttribute("aria-pressed")).toBe("true");
+  });
+
+  test("an open speed panel follows a rate changed by shortcut", async () => {
+    await playbackSettings.set({ customRates: [1, 2], toggleRate: 2 });
+    await mountPlayback();
+    await openSpeedPanel();
+    press("x");
+    await tick();
+    expect(document.querySelector(".ytp-variable-speed-panel-display span")!.textContent).toBe("2.00x");
+    expect(chips()[1].getAttribute("aria-pressed")).toBe("true");
+    expect(document.querySelector<HTMLInputElement>(".ytp-speedslider")!.style.getPropertyValue("--yt-slider-shape-gradient-percent")).toBe("100%");
+  });
+
+  test("the slider's filled track sits where the rate is, YouTube's way", async () => {
+    await playbackSettings.set({ customRates: [1, 1.5] });
+    await mountPlayback();
+    await openSpeedPanel();
+    (chips()[1] as HTMLElement).click();
+    await tick();
+    const fill = document.querySelector<HTMLInputElement>(".ytp-speedslider")!.style.getPropertyValue("--yt-slider-shape-gradient-percent");
+    expect(parseFloat(fill)).toBeCloseTo(71.43, 1);
+  });
+
+  test("the speed row is current when YouTube puts the main list back after a submenu", async () => {
+    await playbackSettings.set({ toggleRate: 2 });
+    await mountPlayback();
+    await openSpeedPanel();
+    const mainList = document.querySelector(".ytp-panel-menu")!;
+    const parent = mainList.parentElement!;
+    mainList.remove();
+    press("x");
+    await tick();
+    parent.prepend(mainList);
+    expect(mainList.querySelector(".ytp-menuitem-content")!.textContent).toBe("2");
+  });
+
+  test("without custom rates the panel is left to YouTube", async () => {
+    await mountPlayback();
+    await openSpeedPanel();
+    expect(chips().map((b) => b.textContent)).toEqual(["1.0"]);
+  });
+
+  test("the speed row follows a rate set while the menu is closed", async () => {
+    document.querySelector<HTMLElement>(".ytp-settings-menu")!.style.display = "none";
+    await playbackSettings.set({ toggleRate: 2 });
+    await mountPlayback();
+    press("x");
+    await tick();
+    expect(document.querySelector(".ytp-menuitem-content")!.textContent).toBe("2");
+  });
+
+  test("the speed row keeps YouTube's own word for 1x in any language", async () => {
+    document.body.innerHTML = page("Wiedergabegeschwindigkeit", "Standard");
+    await playbackSettings.set({ defaultRate: 1.25, toggleRate: 2 });
+    await mountPlayback();
+    const value = () => document.querySelector(".ytp-menuitem-content")!.textContent;
+    await tick();
+    expect(value()).toBe("1.25");
+    press("x");
+    await tick();
+    expect(value()).toBe("Standard");
+    press("x");
+    await tick();
+    expect(value()).toBe("2");
+    press("x");
+    await tick();
+    expect(value()).toBe("Standard");
+  });
+
+  test("custom rates reach the speed panel in any language", async () => {
+    document.body.innerHTML = page("Wiedergabegeschwindigkeit", "Standard");
+    await playbackSettings.set({ customRates: [1, 1.5, 3] });
+    await mountPlayback();
+    await openSpeedPanel();
+    expect(chips().map((b) => b.textContent)).toEqual(["1.0", "1.5", "3.0"]);
+  });
+
+  test("keys stop working after unmount", async () => {
+    await mountPlayback();
+    unmount?.();
+    unmount = undefined;
+    press("x");
+    expect(video().playbackRate).toBe(1);
+  });
+});
diff --git a/web-ext/features/playback/index.tsx b/web-ext/features/playback/index.tsx
new file mode 100644
index 00000000..b0cdf7f6
--- /dev/null
+++ b/web-ext/features/playback/index.tsx
@@ -0,0 +1,152 @@
+import { render } from "preact";
+import type { Feature } from "@/kernel/features";
+import { bindKeys } from "@/kernel/keys";
+import { mount } from "@/kernel/dom/mount";
+import { setCapabilityStatus } from "@/kernel/dom/capabilities";
+import {
+  findSpeedRow,
+  ratePanelChips,
+  resolveMoviePlayer,
+  resolveRatePanel,
+  resolveSettingsButton,
+  resolveVideo,
+  showRateInSpeedRow,
+  syncRatePanel,
+} from "@/youtube/player";
+import { playbackKeys } from "./keys";
+import { RateChips } from "./RateChips";
+import { SeekFlash } from "./SeekFlash";
+import { MAX_RATE, MIN_RATE, playbackSettings } from "./settings";
+
+// Four places keep 1/16 steps exact while dropping float drift like 1.1 + 0.1.
+const clamp = (rate: number) => Math.min(MAX_RATE, Math.max(MIN_RATE, Number(rate.toFixed(4))));
+
+export const playback: Feature = {
+  id: "playback",
+  routes: ["watch"],
+  async mount() {
+    const settings = await playbackSettings.get();
+    if (!settings.enabled) return;
+
+    const player = await resolveVideo();
+    void setCapabilityStatus("watch.player", "watch", player);
+    if (!player.resolved) return;
+    const video = player.element as HTMLVideoElement;
+
+    const setRate = (rate: number) => {
+      video.playbackRate = clamp(rate);
+    };
+    setRate(settings.defaultRate);
+
+    const flash = await mountSeekFlash();
+    const seek = (side: "back" | "forward", seconds: number) => {
+      video.currentTime += side === "back" ? -seconds : seconds;
+      flash?.show(side, seconds);
+    };
+
+    const unbindKeys = bindKeys(playbackKeys, {
+      toggleRate: () => setRate(video.playbackRate === 1 ? settings.toggleRate : 1),
+      increaseRate: () => setRate(video.playbackRate + settings.rateStep),
+      decreaseRate: () => setRate(video.playbackRate - settings.rateStep),
+      seekBackward: () => seek("back", settings.seekBackward),
+      seekForward: () => seek("forward", settings.seekForward),
+    });
+
+    const unhookMenu = await hookSettingsMenu(settings.customRates, video, setRate);
+
+    return () => {
+      unbindKeys();
+      unhookMenu?.();
+      flash?.unmount();
+    };
+  },
+};
+
+async function mountSeekFlash() {
+  const host = await resolveMoviePlayer();
+  void setCapabilityStatus("watch.moviePlayer", "watch", host);
+  if (!host.resolved) return;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  const ui = mount("tppng-seek-flash", host.element, <SeekFlash side="forward" seconds={0} visible={false} />);
+  return {
+    show(side: "back" | "forward", seconds: number) {
+      ui.update(<SeekFlash side={side} seconds={seconds} visible />);
+      clearTimeout(timer);
+      timer = setTimeout(() => ui.update(<SeekFlash side={side} seconds={seconds} visible={false} />), 600);
+    },
+    unmount() {
+      clearTimeout(timer);
+      ui.unmount();
+    },
+  };
+}
+
+// YouTube builds the settings menu lazily on first open and the speed panel
+// on each entry, so both are hooked by click rather than resolved up front.
+// It only redraws them from its own state, which a rate set straight on the
+// <video> never reaches, so they follow the video's ratechange instead.
+async function hookSettingsMenu(rates: number[], video: HTMLVideoElement, setRate: (rate: number) => void) {
+  const button = await resolveSettingsButton();
+  void setCapabilityStatus("watch.settingsButton", "watch", button);
+  if (!button.resolved) return;
+
+  let redrawPanel: (() => void) | null = null;
+  const onSpeedRow = async () => {
+    const panel = await resolveRatePanel();
+    void setCapabilityStatus("watch.ratePanel", "watch", panel);
+    if (!panel.resolved) return;
+    const chips = rates.length ? ratePanelChips(panel.element) : null;
+    const draw = () => {
+      if (!panel.element.isConnected) return void (redrawPanel = null);
+      syncRatePanel(panel.element, video.playbackRate);
+      if (chips) render(<RateChips rates={rates} current={video.playbackRate} onPick={setRate} />, chips);
+    };
+    if (chips) {
+      chips.replaceChildren();
+      chips.style.flexWrap = "wrap";
+    }
+    redrawPanel = draw;
+    draw();
+  };
+
+  // Kept rather than looked up: while a submenu is open YouTube takes the main
+  // list out of the page, and the row must still be current when it returns.
+  let speedRow: Element | null = null;
+  const onRateChange = () => {
+    const row = speedRow ?? findSpeedRow(video).element;
+    if (row) showRateInSpeedRow(row, video.playbackRate);
+    redrawPanel?.();
+  };
+  video.addEventListener("ratechange", onRateChange);
+
+  let speedRowReported = false;
+  let pending: ReturnType<typeof setTimeout> | undefined;
+  const onSettings = () => {
+    clearTimeout(pending);
+    // The row exists only once the menu has rendered, which happens on this same
+    // click, and the menu can be opened before YouTube has built every row.
+    pending = setTimeout(() => {
+      const found = findSpeedRow(video);
+      if (!speedRowReported) {
+        void setCapabilityStatus("watch.speedRow", "watch", found);
+        speedRowReported = found.resolved;
+      }
+      if (!found.resolved) return;
+      const row = found.element;
+      showRateInSpeedRow(row, video.playbackRate);
+      if (row !== speedRow) {
+        speedRow?.removeEventListener("click", onSpeedRow);
+        row.addEventListener("click", onSpeedRow);
+        speedRow = row;
+      }
+    }, 0);
+  };
+  button.element.addEventListener("click", onSettings);
+
+  return () => {
+    clearTimeout(pending);
+    video.removeEventListener("ratechange", onRateChange);
+    button.element.removeEventListener("click", onSettings);
+    speedRow?.removeEventListener("click", onSpeedRow);
+  };
+}
diff --git a/web-ext/features/playback/keys.ts b/web-ext/features/playback/keys.ts
new file mode 100644
index 00000000..71b3365e
--- /dev/null
+++ b/web-ext/features/playback/keys.ts
@@ -0,0 +1,13 @@
+import { defineKeys } from "@/kernel/keys";
+
+export const playbackKeys = defineKeys({
+  id: "playback",
+  title: "Playback",
+  keys: {
+    toggleRate: { label: "Toggle playback rate", description: "Between 1× and your toggle rate.", defaultBinding: "X" },
+    increaseRate: { label: "Increase playback rate", defaultBinding: "W" },
+    decreaseRate: { label: "Decrease playback rate", defaultBinding: "S" },
+    seekBackward: { label: "Seek backward", defaultBinding: "A" },
+    seekForward: { label: "Seek forward", defaultBinding: "D" },
+  },
+});
diff --git a/web-ext/features/playback/settings.test.ts b/web-ext/features/playback/settings.test.ts
new file mode 100644
index 00000000..0481f732
--- /dev/null
+++ b/web-ext/features/playback/settings.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, test } from "bun:test";
+import { parseRates } from "./settings";
+
+describe("parseRates", () => {
+  test("empty means YouTube's own menu", () => {
+    expect(parseRates("  ")).toEqual([]);
+  });
+  test("sorts, dedupes and requires 1", () => {
+    expect(parseRates("2, 1, 1.5,2")).toEqual([1, 1.5, 2]);
+    expect(parseRates("1.5, 2")).toBeUndefined();
+  });
+  test("rejects out-of-range and junk", () => {
+    expect(parseRates("1, 17")).toBeUndefined();
+    expect(parseRates("1, fast")).toBeUndefined();
+  });
+});
diff --git a/web-ext/features/playback/settings.ts b/web-ext/features/playback/settings.ts
new file mode 100644
index 00000000..80f272a3
--- /dev/null
+++ b/web-ext/features/playback/settings.ts
@@ -0,0 +1,54 @@
+import { defineSettings } from "@/kernel/settings";
+
+export interface PlaybackSettings {
+  enabled: boolean;
+  defaultRate: number;
+  toggleRate: number;
+  rateStep: number;
+  seekBackward: number;
+  seekForward: number;
+  customRates: number[];
+}
+
+interface LegacyWatch {
+  isEnabled?: boolean;
+  defaultPlaybackRate?: { value?: string };
+  togglePlaybackRate?: { value?: string };
+  increasePlaybackRate?: { value?: string };
+  seekBackward?: { value?: string };
+  seekForward?: { value?: string };
+  customPlaybackRates?: string[];
+}
+
+export const MIN_RATE = 0.0625;
+export const MAX_RATE = 16;
+
+const number = (value: string | undefined) => (value === undefined ? undefined : Number(value));
+
+export const playbackSettings = defineSettings<PlaybackSettings>(
+  "playback",
+  { enabled: true, defaultRate: 1, toggleRate: 1.5, rateStep: 0.25, seekBackward: 15, seekForward: 15, customRates: [] },
+  {
+    legacy: (store) => {
+      const legacy = (store.preferences as { watch?: LegacyWatch } | undefined)?.watch;
+      if (!legacy) return undefined;
+      return {
+        enabled: legacy.isEnabled,
+        defaultRate: number(legacy.defaultPlaybackRate?.value),
+        toggleRate: number(legacy.togglePlaybackRate?.value),
+        rateStep: number(legacy.increasePlaybackRate?.value),
+        seekBackward: number(legacy.seekBackward?.value),
+        seekForward: number(legacy.seekForward?.value),
+        customRates: legacy.customPlaybackRates?.map(Number),
+      };
+    },
+  },
+);
+
+// A rate list must keep 1 so the user can always return to normal speed.
+export function parseRates(text: string): number[] | undefined {
+  if (text.trim() === "") return [];
+  const rates = text.split(",").map((part) => Number(part.trim()));
+  const valid = rates.every((rate) => Number.isFinite(rate) && rate >= MIN_RATE && rate <= MAX_RATE);
+  return valid && rates.includes(1) ? [...new Set(rates)].sort((a, b) => a - b) : undefined;
+}
diff --git a/web-ext/features/playlist-runtime/RuntimeLine.tsx b/web-ext/features/playlist-runtime/RuntimeLine.tsx
new file mode 100644
index 00000000..b415ac60
--- /dev/null
+++ b/web-ext/features/playlist-runtime/RuntimeLine.tsx
@@ -0,0 +1,49 @@
+import { credit } from "@/kernel/dom/credit";
+import { formatClock } from "@/lib/duration";
+import type { PlaylistRuntime } from "./messages";
+import { skeletonStyle } from "./skeleton";
+
+export interface RuntimeLineProps {
+  // null while the runtime is on its way.
+  runtime: PlaylistRuntime | null;
+  // YouTube's separator in the row above, or null where it spaces items instead.
+  separator: string | null;
+  onRefresh?: () => void;
+}
+
+// Font and colour are inherited from the host, which copies them from
+// YouTube's own metadata text beside it.
+const styles = `
+  :host { display: block; }
+  .line { display: flex; align-items: center; min-height: 18px; }
+  .sep { margin: 0 4px; }
+  .spaced { margin-left: 8px; }
+  .refresh {
+    display: grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0;
+    border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 12px; line-height: 1; cursor: pointer;
+  }
+  .refresh:hover { background: rgba(127, 127, 127, .2); }
+  ${skeletonStyle}
+`;
+
+export function RuntimeLine({ runtime, separator, onRefresh }: RuntimeLineProps) {
+  return (
+    <div class="line" title={credit("Total and average playlist runtime")}>
+      <style>{styles}</style>
+      {runtime ? (
+        <>
+          <span>{formatClock(runtime.totalRuntime)} total</span>
+          {separator ? <span class="sep" aria-hidden="true">{separator}</span> : null}
+          <span class={separator ? undefined : "spaced"}>{formatClock(runtime.averageRuntime)} avg</span>
+          {onRefresh && (
+            <button class="refresh" title={credit("Refresh playlist runtime")} onClick={onRefresh}>
+              ↻
+            </button>
+          )}
+        </>
+      ) : (
+        <span class="bone" style={{ width: "140px" }} aria-label="Loading playlist runtime" />
+      )}
+    </div>
+  );
+}
diff --git a/web-ext/features/playlist-runtime/background.ts b/web-ext/features/playlist-runtime/background.ts
new file mode 100644
index 00000000..b83079c3
--- /dev/null
+++ b/web-ext/features/playlist-runtime/background.ts
@@ -0,0 +1,64 @@
+import { CHROME_STORAGE_LOCAL_KEY } from "@/lib/storageKeys";
+import { getPlaylistRuntime, type PlaylistRuntime } from "./messages";
+
+// Set at build time; `TOPPINGS_API=http://127.0.0.1:8787/api bun run dev`
+// points a build at a local Worker.
+const API_BASE = process.env.TOPPINGS_API;
+
+// A playlist's runtime changes only when videos are added or removed, so a
+// day-old answer is nearly always right; the refresh button bypasses it.
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+
+// YouTube announces a hard load more than once, so the same playlist is often
+// asked for again before its first answer is back.
+const inFlight = new Map<string, Promise<PlaylistRuntime | null>>();
+
+interface CacheEntry {
+  data: PlaylistRuntime;
+  cachedAt: number;
+}
+
+function cacheKey(playlistId: string): string {
+  return `${CHROME_STORAGE_LOCAL_KEY.PLAYLIST_CACHE_PREFIX}${playlistId}`;
+}
+
+async function readCache(playlistId: string): Promise<PlaylistRuntime | null> {
+  const key = cacheKey(playlistId);
+  const entry = (await chrome.storage.local.get(key))[key] as CacheEntry | undefined;
+  if (!entry) return null;
+  if (Date.now() - entry.cachedAt > CACHE_TTL_MS) {
+    await chrome.storage.local.remove(key);
+    return null;
+  }
+  return entry.data;
+}
+
+async function fetchRuntime(playlistId: string): Promise<PlaylistRuntime | null> {
+  const response = await fetch(`${API_BASE}/v1/playlist/${encodeURIComponent(playlistId)}`, { headers: { Accept: "application/json" } });
+  if (!response.ok) return null;
+  const body = (await response.json()) as { payload: PlaylistRuntime };
+  return body.payload;
+}
+
+async function fetchAndCache(playlistId: string): Promise<PlaylistRuntime | null> {
+  const data = await fetchRuntime(playlistId);
+  // An empty answer means the API could not see the list, not that it is empty.
+  if (!data || data.totalVideos === 0) return null;
+  await chrome.storage.local.set({ [cacheKey(playlistId)]: { data, cachedAt: Date.now() } satisfies CacheEntry });
+  return data;
+}
+
+export function servePlaylistRuntime(): void {
+  getPlaylistRuntime.handle(async ({ playlistId, refresh }) => {
+    if (!refresh) {
+      const cached = await readCache(playlistId);
+      if (cached) return cached;
+    }
+    let pending = inFlight.get(playlistId);
+    if (!pending) {
+      pending = fetchAndCache(playlistId).finally(() => inFlight.delete(playlistId));
+      inFlight.set(playlistId, pending);
+    }
+    return pending;
+  });
+}
diff --git a/web-ext/features/playlist-runtime/index.test.ts b/web-ext/features/playlist-runtime/index.test.ts
new file mode 100644
index 00000000..d8041323
--- /dev/null
+++ b/web-ext/features/playlist-runtime/index.test.ts
@@ -0,0 +1,166 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { createPlaylistRuntime } from "./index";
+
+// The playlist header layouts YouTube serves, reduced to what the feature
+// resolves against.
+const layouts = {
+  "header card": `<ytd-browse page-subtype="playlist"><ytd-playlist-header-renderer><div class="metadata-action-bar">
+      <div class="metadata-text-wrapper"><ytd-playlist-byline-renderer>10 videos</ytd-playlist-byline-renderer></div>
+    </div></ytd-playlist-header-renderer></ytd-browse>`,
+  "page header": `<ytd-browse page-subtype="playlist"><yt-page-header-renderer><div class="ytPageHeaderViewModelHost">
+      <yt-content-metadata-view-model class="ytContentMetadataViewModelHost"><div><span class="ytContentMetadataViewModelMetadataText">Playlist</span><span class="ytContentMetadataViewModelDelimiter">•</span><span class="ytContentMetadataViewModelMetadataText" style="color: rgb(170, 170, 170)">10 videos</span></div></yt-content-metadata-view-model>
+    </div></yt-page-header-renderer></ytd-browse>`,
+  sidebar: `<ytd-browse page-subtype="playlist"><ytd-playlist-sidebar-primary-info-renderer><div id="stats">10 videos</div></ytd-playlist-sidebar-primary-info-renderer></ytd-browse>`,
+};
+
+const runtime = { playlistId: "PL1", totalVideos: 10, totalRuntime: 13054, averageRuntime: 1305 };
+
+function feature(overrides: Partial<Parameters<typeof createPlaylistRuntime>[0]> = {}) {
+  return createPlaylistRuntime({
+    getRuntime: async () => runtime,
+    isEnabled: async () => true,
+    ...overrides,
+  });
+}
+
+const playlistRoute = { name: "playlist", playlistId: "PL1", system: false } as const;
+const settle = () => new Promise((r) => setTimeout(r, 0));
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("playlist runtime", () => {
+  for (const [name, html] of Object.entries(layouts)) {
+    test(`renders the runtimes into the ${name} layout`, async () => {
+      document.body.innerHTML = html;
+      const unmount = await feature().mount({ signal: new AbortController().signal, route: playlistRoute });
+      await settle();
+
+      const host = document.getElementById("tppng-playlist-runtime");
+      expect(host).not.toBeNull();
+      const text = host!.shadowRoot!.textContent;
+      expect(text).toMatch(/3:37:34 total•?21:45 avg/);
+
+      unmount?.();
+      expect(document.getElementById("tppng-playlist-runtime")).toBeNull();
+    });
+  }
+
+  test("lands under the byline, not in a hidden channel page left behind by navigation", async () => {
+    document.body.innerHTML = `<ytd-browse page-subtype="channels" hidden><yt-page-header-renderer><yt-content-metadata-view-model></yt-content-metadata-view-model></yt-page-header-renderer></ytd-browse>${layouts["header card"]}`;
+    const unmount = await feature().mount({ signal: new AbortController().signal, route: playlistRoute });
+    const host = document.getElementById("tppng-playlist-runtime")!;
+    expect(host.parentElement!.className).toBe("metadata-text-wrapper");
+    expect(host.previousElementSibling!.tagName.toLowerCase()).toBe("ytd-playlist-byline-renderer");
+    unmount?.();
+  });
+
+  test("adds a badge to the playlist panel on a watch page", async () => {
+    document.body.innerHTML = `<ytd-playlist-panel-renderer><div id="header"><div id="header-description"><h3>Neural networks</h3><div id="publisher-container">3Blue1Brown · 2/10</div></div></div></ytd-playlist-panel-renderer>`;
+    const unmount = await feature().mount({ signal: new AbortController().signal, route: { name: "watch", videoId: "v1", playlistId: "PL1" } });
+    await settle();
+    const badge = document.getElementById("tppng-watch-playlist-runtime");
+    expect(badge!.parentElement!.id).toBe("header-description");
+    expect(badge!.shadowRoot!.textContent).toContain("3:37:34 total21:45 avg");
+    unmount?.();
+    expect(document.getElementById("tppng-watch-playlist-runtime")).toBeNull();
+  });
+
+  test("takes YouTube's separator and text colour in the page-header layout", async () => {
+    document.body.innerHTML = layouts["page header"];
+    const unmount = await feature().mount({ signal: new AbortController().signal, route: playlistRoute });
+    await settle();
+    const host = document.getElementById("tppng-playlist-runtime")!;
+    expect(host.shadowRoot!.textContent).toContain("3:37:34 total•21:45 avg");
+    expect(host.style.color).toBe("rgb(170, 170, 170)");
+    unmount?.();
+  });
+
+  test("mounts without waiting for the runtime, holding the space with a skeleton", async () => {
+    document.body.innerHTML = layouts["header card"];
+    let answer!: (r: typeof runtime) => void;
+    const unmount = await feature({ getRuntime: () => new Promise((r) => (answer = r)) }).mount({ signal: new AbortController().signal, route: playlistRoute });
+    const root = document.getElementById("tppng-playlist-runtime")!.shadowRoot!;
+    expect(root.querySelector(".bone")).not.toBeNull();
+    answer(runtime);
+    await settle();
+    expect(root.querySelector(".bone")).toBeNull();
+    expect(root.textContent).toContain("3:37:34 total");
+    unmount?.();
+  });
+
+  test("removes the skeleton when the runtime cannot be fetched", async () => {
+    document.body.innerHTML = layouts["header card"];
+    await feature({ getRuntime: async () => null }).mount({ signal: new AbortController().signal, route: playlistRoute });
+    await settle();
+    expect(document.getElementById("tppng-playlist-runtime")).toBeNull();
+  });
+
+  test("removes the skeleton when asking for the runtime throws", async () => {
+    document.body.innerHTML = layouts["header card"];
+    await feature({ getRuntime: () => Promise.reject(new Error("offline")) }).mount({ signal: new AbortController().signal, route: playlistRoute });
+    await settle();
+    expect(document.getElementById("tppng-playlist-runtime")).toBeNull();
+  });
+
+  test("draws nothing when the runtime arrives after navigating away", async () => {
+    document.body.innerHTML = layouts["header card"];
+    let answer!: (r: typeof runtime) => void;
+    const unmount = await feature({ getRuntime: () => new Promise((r) => (answer = r)) }).mount({ signal: new AbortController().signal, route: playlistRoute });
+    unmount?.();
+    answer(runtime);
+    await settle();
+    expect(document.getElementById("tppng-playlist-runtime")).toBeNull();
+  });
+
+  test("skips mixes in the watch page's playlist panel", async () => {
+    document.body.innerHTML = `<ytd-playlist-panel-renderer><div id="header"><div id="header-description"></div></div></ytd-playlist-panel-renderer>`;
+    await feature().mount({ signal: new AbortController().signal, route: { name: "watch", videoId: "v1", playlistId: "RDv1" } });
+    expect(document.getElementById("tppng-watch-playlist-runtime")).toBeNull();
+  });
+
+  test("does nothing when disabled", async () => {
+    document.body.innerHTML = layouts.sidebar;
+    await feature({ isEnabled: async () => false }).mount({ signal: new AbortController().signal, route: playlistRoute });
+    expect(document.getElementById("tppng-playlist-runtime")).toBeNull();
+  });
+
+  test("skips Watch Later and Liked", async () => {
+    document.body.innerHTML = layouts.sidebar;
+    await feature().mount({ signal: new AbortController().signal, route: { name: "playlist", playlistId: "WL", system: true } });
+    expect(document.getElementById("tppng-playlist-runtime")).toBeNull();
+  });
+
+  test("refresh asks for uncached data and shows it", async () => {
+    document.body.innerHTML = layouts.sidebar;
+    const calls: boolean[] = [];
+    await feature({
+      getRuntime: async (_, refresh) => {
+        calls.push(refresh);
+        return refresh ? { ...runtime, totalRuntime: 60, averageRuntime: 6 } : runtime;
+      },
+    }).mount({ signal: new AbortController().signal, route: playlistRoute });
+    await settle();
+
+    const root = document.getElementById("tppng-playlist-runtime")!.shadowRoot!;
+    root.querySelector("button")!.click();
+    expect(root.querySelector(".bone")).not.toBeNull();
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(calls).toEqual([false, true]);
+    expect(root.querySelector(".bone")).toBeNull();
+    expect(root.textContent).toContain("1:00 total");
+  });
+
+  test("a refresh that fails keeps showing the last runtime", async () => {
+    document.body.innerHTML = layouts.sidebar;
+    await feature({ getRuntime: async (_, refresh) => (refresh ? Promise.reject(new Error("offline")) : runtime) }).mount({ signal: new AbortController().signal, route: playlistRoute });
+    await settle();
+    const root = document.getElementById("tppng-playlist-runtime")!.shadowRoot!;
+    root.querySelector("button")!.click();
+    await settle();
+    expect(root.querySelector(".bone")).toBeNull();
+    expect(root.textContent).toContain("3:37:34 total");
+  });
+});
diff --git a/web-ext/features/playlist-runtime/index.tsx b/web-ext/features/playlist-runtime/index.tsx
new file mode 100644
index 00000000..f10dfdfc
--- /dev/null
+++ b/web-ext/features/playlist-runtime/index.tsx
@@ -0,0 +1,71 @@
+import type { Feature, Unmount } from "@/kernel/features";
+import { mount } from "@/kernel/dom/mount";
+import { setCapabilityStatus } from "@/kernel/dom/capabilities";
+import { adoptTextStyle } from "@/kernel/dom/adoptTextStyle";
+import { metadataTextIn, resolvePlaylistHeader, resolveWatchPlaylistPanel } from "@/youtube/playlist";
+import { isSystemPlaylist } from "@/youtube/route";
+import { getPlaylistRuntime, type PlaylistRuntime } from "./messages";
+import { RuntimeLine } from "./RuntimeLine";
+import { playlistRuntimeSettings } from "./settings";
+
+export interface PlaylistRuntimeDeps {
+  getRuntime(playlistId: string, refresh: boolean): Promise<PlaylistRuntime | null>;
+  isEnabled(): Promise<boolean>;
+}
+
+export function createPlaylistRuntime(deps: PlaylistRuntimeDeps): Feature {
+  return {
+    id: "playlist-runtime",
+    routes: ["playlist", "watch"],
+    async mount({ route }) {
+      if (route.name !== "playlist" && route.name !== "watch") return;
+      const { playlistId } = route;
+      if (!playlistId || isSystemPlaylist(playlistId) || !(await deps.isEnabled())) return;
+
+      if (route.name === "watch") {
+        const panel = await resolveWatchPlaylistPanel();
+        if (!panel.resolved) return;
+        return showRuntime("tppng-watch-playlist-runtime", panel.element, playlistId, false);
+      }
+      const header = await resolvePlaylistHeader();
+      void setCapabilityStatus("playlist.runtime", "playlist", header);
+      if (!header.resolved) return;
+      return showRuntime("tppng-playlist-runtime", header.element, playlistId, true);
+    },
+  };
+
+  // Returns as soon as the skeleton is up: features mount one after another,
+  // so waiting here would hold every later feature behind the network.
+  function showRuntime(id: string, container: Element, playlistId: string, refreshable: boolean): Unmount {
+    const { sample, separator } = metadataTextIn(container);
+    let mounted = true;
+    let shown: PlaylistRuntime | null = null;
+
+    const view = (runtime: PlaylistRuntime | null) => (
+      <RuntimeLine runtime={runtime} separator={separator} onRefresh={refreshable && runtime ? () => void load(true) : undefined} />
+    );
+    const line = mount(id, container, view(null));
+    adoptTextStyle(line.host, sample);
+    const remove = () => {
+      if (!mounted) return;
+      mounted = false;
+      line.unmount();
+    };
+
+    const load = async (refresh: boolean) => {
+      line.update(view(null));
+      const runtime = await deps.getRuntime(playlistId, refresh).catch(() => null);
+      if (!mounted) return;
+      shown = runtime ?? shown;
+      if (shown) line.update(view(shown));
+      else remove();
+    };
+    void load(false);
+    return remove;
+  }
+}
+
+export const playlistRuntime = createPlaylistRuntime({
+  getRuntime: (playlistId, refresh) => getPlaylistRuntime.send({ playlistId, refresh }),
+  isEnabled: async () => (await playlistRuntimeSettings.get()).enabled,
+});
diff --git a/web-ext/features/playlist-runtime/messages.ts b/web-ext/features/playlist-runtime/messages.ts
new file mode 100644
index 00000000..5a1865b1
--- /dev/null
+++ b/web-ext/features/playlist-runtime/messages.ts
@@ -0,0 +1,14 @@
+import { defineMessage } from "@/kernel/messaging";
+
+export interface PlaylistRuntime {
+  playlistId: string;
+  totalVideos: number;
+  totalRuntime: number;
+  averageRuntime: number;
+}
+
+// Answered by the background, which is the only surface allowed to call the
+// Toppings API from a YouTube page. `refresh` bypasses the cache.
+export const getPlaylistRuntime = defineMessage<{ playlistId: string; refresh?: boolean }, PlaylistRuntime | null>(
+  "playlist-runtime",
+);
diff --git a/web-ext/features/playlist-runtime/settings.ts b/web-ext/features/playlist-runtime/settings.ts
new file mode 100644
index 00000000..2c3411fb
--- /dev/null
+++ b/web-ext/features/playlist-runtime/settings.ts
@@ -0,0 +1,12 @@
+import { defineSettings } from "@/kernel/settings";
+
+export const playlistRuntimeSettings = defineSettings(
+  "playlist-runtime",
+  { enabled: true },
+  {
+    legacy: (store) => {
+      const legacy = (store.preferences as { playlist?: { isEnabled?: boolean } } | undefined)?.playlist;
+      return legacy?.isEnabled === undefined ? undefined : { enabled: legacy.isEnabled };
+    },
+  },
+);
diff --git a/web-ext/features/playlist-runtime/skeleton.ts b/web-ext/features/playlist-runtime/skeleton.ts
new file mode 100644
index 00000000..1dd6ea1c
--- /dev/null
+++ b/web-ext/features/playlist-runtime/skeleton.ts
@@ -0,0 +1,11 @@
+// A shimmering stand-in sized like the text it replaces, so nothing shifts
+// when the runtime arrives. Colours come from the surrounding text.
+export const skeletonStyle = `
+  .bone {
+    display: inline-block; height: 10px; border-radius: 5px; vertical-align: middle;
+    background: linear-gradient(90deg, currentColor 0%, currentColor 40%, transparent 50%, currentColor 60%, currentColor 100%);
+    background-size: 300% 100%; opacity: .18; animation: shimmer 1.4s ease-in-out infinite;
+  }
+  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
+  @media (prefers-reduced-motion: reduce) { .bone { animation: none; } }
+`;
diff --git a/web-ext/features/profiles/AudioButton.tsx b/web-ext/features/profiles/AudioButton.tsx
new file mode 100644
index 00000000..5a11447f
--- /dev/null
+++ b/web-ext/features/profiles/AudioButton.tsx
@@ -0,0 +1,30 @@
+import { credit } from "@/kernel/dom/credit";
+
+// Filled while Audio is on, outlined while off, like the segments button and
+// YouTube's own toggles.
+export function AudioButton({ active }: { active: boolean }) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        d="M12 4a8 8 0 0 0-8 8v5a2 2 0 0 0 2 2h1.5a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H6a6 6 0 0 1 12 0h-1.5a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1H18a2 2 0 0 0 2-2v-5a8 8 0 0 0-8-8z"
+        fill={active ? "white" : "none"}
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function audioButtonHost(): HTMLButtonElement {
+  const host = document.createElement("button");
+  host.id = "tppng-audio-button";
+  host.className = "ytp-button";
+  host.setAttribute("aria-label", "Audio mode");
+  return host;
+}
+
+export function setAudioButtonState(host: HTMLButtonElement, active: boolean): void {
+  host.setAttribute("aria-pressed", String(active));
+  host.title = credit(active ? "Audio mode on" : "Audio mode");
+}
diff --git a/web-ext/features/profiles/gearMenu.tsx b/web-ext/features/profiles/gearMenu.tsx
new file mode 100644
index 00000000..648a7594
--- /dev/null
+++ b/web-ext/features/profiles/gearMenu.tsx
@@ -0,0 +1,217 @@
+import { render } from "preact";
+import { playerOf, resolveSettingsButton, settingsMenu } from "@/youtube/player";
+import type { Profile } from "./profiles";
+import { getActiveProfile, getAllProfiles, setActiveProfileId } from "./store";
+
+const ROW_ID = "tppng-profile-row";
+const PANEL_ID = "tppng-profile-panel";
+// Room left for the player's control bar below an open menu.
+const CONTROLS_CLEARANCE = 120;
+const LAYERS_ICON = "M12 16.54l-7.37-5.73L3 12.07l9 7 9-7-1.63-1.27zM12 14l7.36-5.73L21 7l-9-7-9 7 1.63 1.27L12 14zm0-11.47L17.74 7 12 11.47 6.26 7 12 2.53z";
+
+export interface GearMenu {
+  refresh(): void;
+  unmount(): void;
+}
+
+// A Profile row in YouTube's settings menu, built from YouTube's own markup:
+// icon, label, and the current value, with YouTube drawing the chevron for
+// a row that opens a submenu.
+function ProfileRow({ name }: { name: string }) {
+  return (
+    <>
+      <div class="ytp-menuitem-icon">
+        <svg height="24" viewBox="0 0 24 24" width="24">
+          <path d={LAYERS_ICON} fill="#fff" />
+        </svg>
+      </div>
+      <div class="ytp-menuitem-label">Profile</div>
+      <div class="ytp-menuitem-content">{name}</div>
+    </>
+  );
+}
+
+// The submenu, shaped like YouTube's Quality list: its header with a back
+// button, then radio rows YouTube draws the checkmark on. Clicks stop here:
+// YouTube handles its menu's classes itself, and since it never opened this
+// submenu, its "back" would close the whole menu.
+function ProfilePanel({ profiles, activeId, onPick, onBack }: { profiles: readonly Profile[]; activeId: string | null; onPick: (id: string | null) => void; onBack: () => void }) {
+  const option = (id: string | null, name: string) => (
+    <div
+      class="ytp-menuitem"
+      role="menuitemradio"
+      aria-checked={activeId === id}
+      tabIndex={0}
+      onClick={(e) => {
+        e.stopPropagation();
+        onPick(id);
+      }}
+      onKeyDown={(e) => {
+        if (e.key !== "Enter" && e.key !== " ") return;
+        e.preventDefault();
+        onPick(id);
+      }}
+    >
+      <div class="ytp-menuitem-label">{name}</div>
+    </div>
+  );
+  return (
+    <>
+      <div class="ytp-panel-header">
+        <div class="ytp-panel-back-button-container">
+          <button
+            class="ytp-button ytp-panel-back-button"
+            aria-label="Back to previous menu"
+            onClick={(e) => {
+              e.stopPropagation();
+              onBack();
+            }}
+          />
+        </div>
+        <span class="ytp-panel-title" role="heading" aria-level={2}>
+          Profile
+        </span>
+      </div>
+      <div class="ytp-panel-menu" role="menu">
+        {option(null, "Default")}
+        {profiles.map((profile) => option(profile.id, profile.name))}
+      </div>
+    </>
+  );
+}
+
+// YouTube builds the menu on first open and may rebuild it, so the row is
+// (re)attached on each click of the gear button.
+export async function hookGearMenu(): Promise<GearMenu | undefined> {
+  const button = await resolveSettingsButton();
+  if (!button.resolved) return;
+  const gear = button.element as HTMLElement;
+  let closeSubmenu: (() => void) | null = null;
+  let watchedMenu: HTMLElement | null = null;
+
+  // YouTube reopens its menu on whichever panel is in it, so the main one goes
+  // back as soon as the menu hides.
+  const hidden = new MutationObserver(() => {
+    if (watchedMenu && getComputedStyle(watchedMenu).display === "none") closeSubmenu?.();
+  });
+
+  const drawRow = async () => {
+    const parts = settingsMenu(gear);
+    if (!parts) return;
+    if (watchedMenu !== parts.menu) {
+      hidden.disconnect();
+      hidden.observe(parts.menu, { attributes: true, attributeFilter: ["style", "class", "aria-hidden"] });
+      watchedMenu = parts.menu;
+    }
+    let row = parts.mainList.querySelector<HTMLElement>(`#${ROW_ID}`);
+    if (!row) {
+      row = document.createElement("div");
+      row.id = ROW_ID;
+      row.className = "ytp-menuitem";
+      row.setAttribute("role", "menuitem");
+      row.setAttribute("aria-haspopup", "true");
+      row.tabIndex = 0;
+      row.addEventListener("click", (e) => {
+        e.stopPropagation();
+        void openSubmenu();
+      });
+      row.addEventListener("keydown", (e) => {
+        if (e.key !== "Enter" && e.key !== " ") return;
+        e.preventDefault();
+        void openSubmenu();
+      });
+      parts.mainList.append(row);
+      render(<ProfileRow name={(await getActiveProfile())?.name ?? "Default"} />, row);
+      growToFit(parts.menu, parts.mainPanel, parts.mainList, gear);
+      return;
+    }
+    render(<ProfileRow name={(await getActiveProfile())?.name ?? "Default"} />, row);
+  };
+
+  const openSubmenu = async () => {
+    const parts = settingsMenu(gear);
+    if (!parts || closeSubmenu) return;
+    const { menu, mainPanel } = parts;
+    const [profiles, active] = await Promise.all([getAllProfiles(), getActiveProfile()]);
+    const saved = { menu: menu.getAttribute("style"), panel: mainPanel.getAttribute("style"), list: parts.mainList.getAttribute("style") };
+
+    const panel = document.createElement("div");
+    panel.id = PANEL_ID;
+    panel.className = "ytp-panel";
+    const close = () => {
+      closeSubmenu = null;
+      render(null, panel);
+      panel.replaceWith(mainPanel);
+      restoreStyle(menu, saved.menu);
+      restoreStyle(mainPanel, saved.panel);
+      restoreStyle(parts.mainList, saved.list);
+    };
+    const pick = async (id: string | null) => {
+      await setActiveProfileId(id);
+      close();
+      await drawRow();
+      (mainPanel.querySelector<HTMLElement>(`#${ROW_ID}`) ?? mainPanel).focus();
+    };
+    render(<ProfilePanel profiles={profiles} activeId={active?.id ?? null} onPick={(id) => void pick(id)} onBack={close} />, panel);
+    mainPanel.replaceWith(panel);
+    fitMenu(menu, panel, gear);
+    closeSubmenu = close;
+    panel.querySelector<HTMLElement>("[aria-checked=true]")?.focus();
+  };
+
+  const onGear = () => setTimeout(() => void drawRow(), 0);
+  gear.addEventListener("click", onGear);
+
+  return {
+    refresh: () => void drawRow(),
+    unmount() {
+      gear.removeEventListener("click", onGear);
+      hidden.disconnect();
+      closeSubmenu?.();
+      document.getElementById(ROW_ID)?.remove();
+    },
+  };
+}
+
+// YouTube sized the open menu before the row went in, so it would sit cut off
+// below the last row; the menu grows by what the row added, up to the room
+// the player leaves, as YouTube itself does when it opens with the row there.
+function growToFit(menu: HTMLElement, panel: HTMLElement, list: HTMLElement, gear: HTMLElement): void {
+  if (!list.style.height) return;
+  // The list is not clipped at its own height; the panel around it is.
+  const missing = list.scrollHeight - parseFloat(list.style.height);
+  if (missing <= 0) return;
+  const player = playerOf(gear) as HTMLElement;
+  const room = (player.clientHeight || window.innerHeight) - CONTROLS_CLEARANCE - menu.offsetHeight;
+  const extra = Math.min(missing, Math.max(room, 0));
+  for (const element of [list, panel, menu]) {
+    if (element.style.height) element.style.height = `${parseFloat(element.style.height) + extra}px`;
+  }
+}
+
+function restoreStyle(element: HTMLElement, style: string | null): void {
+  if (style === null) element.removeAttribute("style");
+  else element.setAttribute("style", style);
+}
+
+// YouTube sizes the menu to each panel with inline styles when it swaps
+// panels itself; a panel swapped in by hand has to do the same.
+function fitMenu(menu: HTMLElement, panel: HTMLElement, gear: HTMLElement): void {
+  const list = panel.querySelector<HTMLElement>(".ytp-panel-menu")!;
+  const header = panel.querySelector<HTMLElement>(".ytp-panel-header")!;
+  for (const element of [menu, panel, list]) {
+    element.style.width = "";
+    element.style.height = "";
+  }
+  menu.style.width = "max-content";
+  const width = Math.ceil(panel.getBoundingClientRect().width);
+  const player = playerOf(gear) as HTMLElement;
+  const room = (player.clientHeight || window.innerHeight) - CONTROLS_CLEARANCE - header.offsetHeight;
+  const listHeight = Math.min(list.scrollHeight, Math.max(room, 0));
+  list.style.height = `${listHeight}px`;
+  const height = header.offsetHeight + listHeight;
+  for (const element of [menu, panel]) {
+    element.style.width = `${width}px`;
+    element.style.height = `${height}px`;
+  }
+}
diff --git a/web-ext/features/profiles/importExport.test.ts b/web-ext/features/profiles/importExport.test.ts
new file mode 100644
index 00000000..0c6b2d53
--- /dev/null
+++ b/web-ext/features/profiles/importExport.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, spyOn, test } from "bun:test";
+import { exportProfile, parseProfileJson } from "./importExport";
+
+describe("parseProfileJson", () => {
+  test("accepts a bare name and primitives object", () => {
+    const result = parseProfileJson({ name: " Study ", primitives: { "watch.sidebar": { visible: false }, "home.thumbnails": { mode: "blur" } } });
+    expect(result).toEqual({ ok: true, name: "Study", primitives: { "watch.sidebar": { visible: false }, "home.thumbnails": { mode: "blur" } } });
+  });
+
+  test("skips unknown primitives and rejects bad values", () => {
+    expect(parseProfileJson({ name: "x", primitives: { "future.thing": { on: true } } })).toEqual({ ok: true, name: "x", primitives: {} });
+    expect(parseProfileJson({ name: "x", primitives: { "watch.layout": { value: "sideways" } } })).toMatchObject({ ok: false });
+  });
+
+  test("rejects missing name or malformed shapes", () => {
+    expect(parseProfileJson([])).toMatchObject({ ok: false });
+    expect(parseProfileJson({ primitives: {} })).toMatchObject({ ok: false });
+    expect(parseProfileJson({ name: "x", primitives: [] })).toMatchObject({ ok: false });
+  });
+});
+
+describe("exportProfile", () => {
+  test("keeps the download URL alive past the click", () => {
+    const create = spyOn(URL, "createObjectURL").mockReturnValue("blob:profile");
+    const revoke = spyOn(URL, "revokeObjectURL").mockImplementation(() => {});
+    const click = spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => {});
+    exportProfile({ id: "p", name: "Study", isPreset: false, createdAt: 0, primitives: {} });
+    expect(click).toHaveBeenCalledTimes(1);
+    expect(revoke).not.toHaveBeenCalled();
+    create.mockRestore();
+    revoke.mockRestore();
+    click.mockRestore();
+  });
+});
diff --git a/web-ext/features/profiles/importExport.ts b/web-ext/features/profiles/importExport.ts
new file mode 100644
index 00000000..ba340605
--- /dev/null
+++ b/web-ext/features/profiles/importExport.ts
@@ -0,0 +1,64 @@
+import { primitiveById } from "@/youtube/primitives";
+import type { Profile, ProfilePrimitiveConfig } from "./profiles";
+
+const SCHEMA = "https://toppings.enry.ch/profile-schema/v1.json";
+const MAX_NAME_LENGTH = 40;
+
+export function exportProfile(profile: Profile): void {
+  const json = JSON.stringify({ $schema: SCHEMA, name: profile.name, primitives: profile.primitives, exportedAt: new Date().toISOString() }, null, 2);
+  const url = URL.createObjectURL(new Blob([json], { type: "application/json" }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `toppings-profile-${slugify(profile.name)}.json`;
+  link.click();
+  // Firefox starts the download after click() returns, and revoking the URL
+  // in the same task cancels it.
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+export type ImportResult = { ok: true; name: string; primitives: ProfilePrimitiveConfig } | { ok: false; message: string };
+
+export async function importProfileFromFile(file: File): Promise<ImportResult> {
+  if (!file.name.endsWith(".json") && file.type !== "application/json") return { ok: false, message: "File must be a .json file." };
+  let text: string;
+  try {
+    text = await file.text();
+  } catch {
+    return { ok: false, message: "Could not read the file." };
+  }
+  try {
+    return parseProfileJson(JSON.parse(text));
+  } catch {
+    return { ok: false, message: "File is not valid JSON." };
+  }
+}
+
+// Accepts a full export or a bare { name, primitives } object, so a
+// hand-written config imports without the $schema wrapper. Unknown primitive
+// ids are skipped rather than rejected: a file from a newer version must still
+// import on an older one, minus what it does not know.
+export function parseProfileJson(data: unknown): ImportResult {
+  if (typeof data !== "object" || data === null || Array.isArray(data)) return { ok: false, message: "Expected a JSON object at the top level." };
+  const { name, primitives } = data as Record<string, unknown>;
+
+  if (typeof name !== "string" || !name.trim()) return { ok: false, message: 'Missing or empty "name" field.' };
+  if (name.trim().length > MAX_NAME_LENGTH) return { ok: false, message: `Profile name must be ${MAX_NAME_LENGTH} characters or fewer.` };
+  if (typeof primitives !== "object" || primitives === null || Array.isArray(primitives)) return { ok: false, message: '"primitives" must be an object.' };
+
+  const config: Record<string, unknown> = {};
+  const errors: string[] = [];
+  for (const [id, value] of Object.entries(primitives)) {
+    const primitive = primitiveById(id);
+    if (!primitive) continue;
+    const parsed = primitive.parse(value);
+    if (parsed === undefined) errors.push(`"${id}" has an invalid value`);
+    else config[id] = parsed;
+  }
+  if (errors.length) return { ok: false, message: `Invalid primitive values:\n${errors.slice(0, 5).join("\n")}` };
+
+  return { ok: true, name: name.trim(), primitives: config as ProfilePrimitiveConfig };
+}
+
+function slugify(text: string): string {
+  return text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, MAX_NAME_LENGTH);
+}
diff --git a/web-ext/features/profiles/index.test.ts b/web-ext/features/profiles/index.test.ts
new file mode 100644
index 00000000..bda5dfbe
--- /dev/null
+++ b/web-ext/features/profiles/index.test.ts
@@ -0,0 +1,196 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { profiles } from "./index";
+import { profilesSettings } from "./settings";
+import { createProfile, getActiveProfile, setActiveProfileId } from "./store";
+import { keybindings } from "@/kernel/keys";
+
+const watchPage = `
+  <div id="movie_player" class="html5-video-player">
+    <video></video>
+    <button class="ytp-settings-button"></button>
+    <div class="ytp-popup ytp-settings-menu" style="width: 303px; height: 305px;"><div class="ytp-popup-content"><div class="ytp-panel" style="width: 303px; height: 305px;"><div class="ytp-panel-menu" style="height: 305px;"><div class="ytp-menuitem">Quality</div></div></div></div></div>
+  </div>
+  <div id="secondary"></div>
+  <ytd-comments id="comments"></ytd-comments>
+  <ytd-guide-renderer><div id="sections"></div></ytd-guide-renderer>`;
+
+const watch = { name: "watch", videoId: "v", playlistId: null } as const;
+const home = { name: "home" } as const;
+const tick = () => new Promise((r) => setTimeout(r, 10));
+const sidebar = () => document.getElementById("secondary")!;
+const gearButton = () => document.querySelector<HTMLElement>(".ytp-settings-button")!;
+const popupContent = () => document.querySelector<HTMLElement>(".ytp-popup-content")!;
+const mainPanel = () => document.querySelector<HTMLElement>(".ytp-popup-content > .ytp-panel")!;
+const press = (key: string, init: KeyboardEventInit = {}) => document.body.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, ...init }));
+
+let unmount: (() => void) | undefined | void;
+const mountOn = async (route: typeof watch | typeof home) => {
+  unmount = await profiles.mount({ signal: new AbortController().signal, route });
+};
+
+beforeEach(async () => {
+  await chrome.storage.sync.clear();
+  await chrome.storage.local.clear();
+  document.body.innerHTML = watchPage;
+});
+afterEach(() => {
+  unmount?.();
+  unmount = undefined;
+  document.body.innerHTML = "";
+});
+
+describe("profiles", () => {
+  test("applies the active preset on its route and restores on unmount", async () => {
+    await setActiveProfileId("preset:focus");
+    await mountOn(watch);
+    expect(sidebar().style.display).toBe("none");
+    expect(document.getElementById("comments")!.style.display).toBe("none");
+    unmount?.();
+    unmount = undefined;
+    expect(sidebar().style.display).toBe("");
+  });
+
+  test("follows profile changes while mounted", async () => {
+    await mountOn(watch);
+    expect(sidebar().style.display).toBe("");
+    await setActiveProfileId("preset:focus");
+    await tick();
+    expect(sidebar().style.display).toBe("none");
+    await setActiveProfileId(null);
+    await tick();
+    expect(sidebar().style.display).toBe("");
+  });
+
+  test("custom profiles apply too", async () => {
+    const mine = await createProfile({ name: "Mine", primitives: { "watch.sidebar": { visible: false } } });
+    await setActiveProfileId(mine.id);
+    await mountOn(watch);
+    expect(sidebar().style.display).toBe("none");
+    expect(document.getElementById("comments")!.style.display).toBe("");
+  });
+
+  test("B switches to Audio and back to the profile that was on before", async () => {
+    await setActiveProfileId("preset:focus");
+    await mountOn(watch);
+    press("b");
+    await tick();
+    expect((await getActiveProfile())?.id).toBe("preset:audio");
+    press("b");
+    await tick();
+    expect((await getActiveProfile())?.id).toBe("preset:focus");
+  });
+
+  test("a custom profile's shortcut toggles it from Default", async () => {
+    const mine = await createProfile({ name: "Work", primitives: { "watch.sidebar": { visible: false } } });
+    await keybindings.set({ [`profiles.${mine.id}`]: "Shift+W" });
+    await mountOn(watch);
+    press("W", { shiftKey: true });
+    await tick();
+    expect((await getActiveProfile())?.id).toBe(mine.id);
+    expect(sidebar().style.display).toBe("none");
+    press("W", { shiftKey: true });
+    await tick();
+    expect(await getActiveProfile()).toBeNull();
+  });
+
+  test("the cycle key walks default, presets, then custom profiles", async () => {
+    await chrome.storage.sync.set({ "settings:keybindings": { "profiles.cycle": "P" } });
+    await createProfile({ name: "Mine", primitives: {} });
+    await mountOn(watch);
+    await tick();
+    for (const expected of ["preset:audio", "preset:focus"]) {
+      press("p");
+      await tick();
+      expect((await getActiveProfile())?.id).toBe(expected);
+    }
+    press("p");
+    await tick();
+    expect((await getActiveProfile())?.name).toBe("Mine");
+    press("p");
+    await tick();
+    expect(await getActiveProfile()).toBeNull();
+  });
+
+  test("the gear menu gets a native Profile row showing the active profile", async () => {
+    await profilesSettings.set({ gearMenu: true });
+    await setActiveProfileId("preset:focus");
+    await mountOn(watch);
+    gearButton().click();
+    await tick();
+    const row = document.getElementById("tppng-profile-row")!;
+    expect(row.getAttribute("aria-haspopup")).toBe("true");
+    expect(row.querySelector(".ytp-menuitem-icon svg")).not.toBeNull();
+    expect(row.querySelector(".ytp-menuitem-label")!.textContent).toBe("Profile");
+    expect(row.querySelector(".ytp-menuitem-content")!.textContent).toBe("Focus");
+  });
+
+  test("the Profile submenu takes the main panel's place, and picking goes back with the new name", async () => {
+    await profilesSettings.set({ gearMenu: true });
+    await mountOn(watch);
+    gearButton().click();
+    await tick();
+    const main = mainPanel();
+    document.getElementById("tppng-profile-row")!.click();
+    await tick();
+    const panel = document.getElementById("tppng-profile-panel")!;
+    expect(panel.parentElement).toBe(popupContent());
+    expect(main.isConnected).toBe(false);
+    expect(panel.querySelector(".ytp-panel-title")!.textContent).toBe("Profile");
+    const options = [...panel.querySelectorAll<HTMLElement>("[role=menuitemradio]")];
+    expect(options.map((o) => o.textContent)).toEqual(["Default", "Audio", "Focus"]);
+    expect(options[0].getAttribute("aria-checked")).toBe("true");
+
+    options[1].click();
+    await tick();
+    expect((await getActiveProfile())?.id).toBe("preset:audio");
+    expect(main.parentElement).toBe(popupContent());
+    expect(document.getElementById("tppng-profile-panel")).toBeNull();
+    expect(document.querySelector("#tppng-profile-row .ytp-menuitem-content")!.textContent).toBe("Audio");
+  });
+
+  test("back puts YouTube's panel back at the size YouTube gave it", async () => {
+    await profilesSettings.set({ gearMenu: true });
+    await mountOn(watch);
+    gearButton().click();
+    await tick();
+    document.getElementById("tppng-profile-row")!.click();
+    await tick();
+    document.querySelector<HTMLElement>("#tppng-profile-panel .ytp-panel-back-button")!.click();
+    expect(mainPanel().getAttribute("style")).toBe("width: 303px; height: 305px;");
+    expect(document.querySelector(".ytp-settings-menu")!.getAttribute("style")).toBe("width: 303px; height: 305px;");
+  });
+
+  test("closing the menu from the submenu leaves YouTube's main panel in it for next time", async () => {
+    await profilesSettings.set({ gearMenu: true });
+    await mountOn(watch);
+    gearButton().click();
+    await tick();
+    const main = mainPanel();
+    document.getElementById("tppng-profile-row")!.click();
+    await tick();
+    document.querySelector<HTMLElement>(".ytp-settings-menu")!.style.display = "none";
+    await tick();
+    expect(main.parentElement).toBe(popupContent());
+    expect(document.getElementById("tppng-profile-panel")).toBeNull();
+  });
+
+  test("unmounting takes the row out and leaves YouTube's panel in place", async () => {
+    await profilesSettings.set({ gearMenu: true });
+    await mountOn(watch);
+    gearButton().click();
+    await tick();
+    const main = mainPanel();
+    document.getElementById("tppng-profile-row")!.click();
+    await tick();
+    unmount?.();
+    unmount = undefined;
+    expect(main.parentElement).toBe(popupContent());
+    expect(document.getElementById("tppng-profile-row")).toBeNull();
+  });
+
+  test("home route leaves watch primitives alone", async () => {
+    await setActiveProfileId("preset:focus");
+    await mountOn(home);
+    expect(sidebar().style.display).toBe("");
+  });
+});
diff --git a/web-ext/features/profiles/index.tsx b/web-ext/features/profiles/index.tsx
new file mode 100644
index 00000000..119b6b07
--- /dev/null
+++ b/web-ext/features/profiles/index.tsx
@@ -0,0 +1,109 @@
+import type { Feature } from "@/kernel/features";
+import { bindKeys } from "@/kernel/keys";
+import { mountInline } from "@/kernel/dom/mount";
+import { runPrimitives, type PrimitiveRun } from "@/kernel/primitives";
+import { PRIMITIVES } from "@/youtube/primitives";
+import { resolveRightControls } from "@/youtube/player";
+import { showToast } from "@/kernel/dom/toast";
+import { AudioButton, audioButtonHost, setAudioButtonState } from "./AudioButton";
+import { hookGearMenu, type GearMenu } from "./gearMenu";
+import { profileToggleKeys, profilesKeys } from "./keys";
+import { BUILT_IN_PRESETS, PRESET_AUDIO } from "./profiles";
+import { profilesSettings } from "./settings";
+import { getActiveProfile, getAllProfiles, getCustomProfiles, setActiveProfileId, subscribeProfiles, toggleProfile } from "./store";
+
+export const profiles: Feature = {
+  id: "profiles",
+  routes: ["watch", "playlist", "shorts", "home", "search", "other"],
+  async mount({ route }) {
+    const settings = await profilesSettings.get();
+
+    let run: PrimitiveRun | undefined;
+    let stopped = false;
+    let audio: AudioToggle | undefined;
+    let audioActive = false;
+    const start = async () => {
+      const active = await getActiveProfile();
+      if (stopped) return;
+      run?.stop();
+      run = runPrimitives(PRIMITIVES, { ...active?.primitives }, route.name);
+      audioActive = active?.id === PRESET_AUDIO.id;
+      audio?.show(audioActive);
+    };
+    await start();
+
+    let unbindToggles = () => {};
+    const bindToggles = async () => {
+      const all = await getAllProfiles();
+      if (stopped) return;
+      unbindToggles();
+      unbindToggles = bindKeys(profileToggleKeys(all), Object.fromEntries(all.map((profile) => [profile.id, () => void switchProfile(profile.id)])));
+    };
+    await bindToggles();
+    let gear: GearMenu | undefined;
+    const unsubscribe = subscribeProfiles(() => {
+      void start();
+      void bindToggles();
+      gear?.refresh();
+    });
+
+
+    const unbindKeys = bindKeys(profilesKeys, { cycle: () => void cycleProfile() });
+    // Not awaited: the control bar can render late, and nothing else waits on it.
+    if (route.name === "watch" && settings.audioButton) {
+      void mountAudioToggle().then((toggle) => {
+        if (stopped) return toggle?.unmount();
+        audio = toggle;
+        audio?.show(audioActive);
+      });
+    }
+    gear = route.name === "watch" && settings.gearMenu ? await hookGearMenu() : undefined;
+
+    return () => {
+      stopped = true;
+      unsubscribe();
+      unbindKeys();
+      unbindToggles();
+      audio?.unmount();
+      gear?.unmount();
+      run?.stop();
+    };
+  },
+};
+
+async function switchProfile(id: string): Promise<void> {
+  const now = await toggleProfile(id);
+  showToast(`Profile: ${now?.name ?? "Default"}`);
+}
+
+interface AudioToggle {
+  show(active: boolean): void;
+  unmount(): void;
+}
+
+async function mountAudioToggle(): Promise<AudioToggle | undefined> {
+  const controls = await resolveRightControls();
+  if (!controls.resolved) return;
+  const host = audioButtonHost();
+  const button = mountInline(host, controls.element, <AudioButton active={false} />, "prepend");
+  host.addEventListener("click", () => void switchProfile(PRESET_AUDIO.id));
+  return {
+    show(active) {
+      setAudioButtonState(host, active);
+      button.update(<AudioButton active={active} />);
+    },
+    unmount: button.unmount,
+  };
+}
+
+async function cycleProfile(): Promise<void> {
+  const cycle: Array<{ id: string | null; name: string }> = [
+    { id: null, name: "Default" },
+    ...BUILT_IN_PRESETS,
+    ...(await getCustomProfiles()),
+  ];
+  const current = (await getActiveProfile())?.id ?? null;
+  const next = cycle[(cycle.findIndex((p) => p.id === current) + 1) % cycle.length];
+  await setActiveProfileId(next.id);
+  showToast(`Profile: ${next.name}`);
+}
diff --git a/web-ext/features/profiles/keys.ts b/web-ext/features/profiles/keys.ts
new file mode 100644
index 00000000..43549f53
--- /dev/null
+++ b/web-ext/features/profiles/keys.ts
@@ -0,0 +1,25 @@
+import { defineKeys, type KeyGroup } from "@/kernel/keys";
+import { PRESET_AUDIO, type Profile } from "./profiles";
+
+export const profilesKeys = defineKeys({
+  id: "profiles",
+  title: "Profiles",
+  keys: {
+    cycle: { label: "Cycle profiles", description: "Default, then each preset, then your own profiles.", defaultBinding: "" },
+  },
+});
+
+// One toggle per profile, keyed by its id so a binding survives a rename.
+// Audio keeps the B it had as audio mode in 3.x.
+export function profileToggleKeys(profiles: readonly Profile[]): KeyGroup {
+  return defineKeys({
+    id: profilesKeys.id,
+    title: profilesKeys.title,
+    keys: Object.fromEntries(
+      profiles.map((profile) => [
+        profile.id,
+        { label: profile.name, description: `Switch to ${profile.name}; press again to go back.`, defaultBinding: profile.id === PRESET_AUDIO.id ? "B" : "" },
+      ]),
+    ),
+  });
+}
diff --git a/web-ext/features/profiles/profiles.ts b/web-ext/features/profiles/profiles.ts
new file mode 100644
index 00000000..20f0b40e
--- /dev/null
+++ b/web-ext/features/profiles/profiles.ts
@@ -0,0 +1,54 @@
+import type { Layout, Thumbnails, Visibility, Visuals } from "@/youtube/primitives";
+
+export type { PlayerLayout, ThumbnailMode, VisualsMode } from "@/youtube/primitives";
+
+// Keyed by primitive id. An absent key means "leave YouTube alone", which is
+// not the same as a default value and is what lets profiles stay small.
+export interface ProfilePrimitiveConfig {
+  "watch.layout"?: Layout;
+  "watch.visuals"?: Visuals;
+  "watch.sidebar"?: Visibility;
+  "watch.comments"?: Visibility;
+  "watch.endCards"?: Visibility;
+  "home.thumbnails"?: Thumbnails;
+  "home.feed"?: Visibility;
+  "home.shorts"?: Visibility;
+  "search.thumbnails"?: Thumbnails;
+  "search.metadata"?: Visibility;
+  "search.shorts"?: Visibility;
+  "shorts.shelf"?: Visibility;
+}
+
+export interface Profile {
+  id: string;
+  name: string;
+  isPreset: boolean;
+  createdAt: number;
+  primitives: ProfilePrimitiveConfig;
+}
+
+// Presets are constants, never stored, so editing one here reaches existing
+// users on update with no migration; that is also why the UI cannot edit them.
+export const PRESET_AUDIO: Profile = {
+  id: "preset:audio",
+  name: "Audio",
+  isPreset: true,
+  createdAt: 0,
+  primitives: {
+    "watch.visuals": { value: "visualizer" },
+  },
+};
+
+export const PRESET_FOCUS: Profile = {
+  id: "preset:focus",
+  name: "Focus",
+  isPreset: true,
+  createdAt: 0,
+  primitives: {
+    "watch.sidebar": { visible: false },
+    "watch.comments": { visible: false },
+    "watch.endCards": { visible: false },
+  },
+};
+
+export const BUILT_IN_PRESETS: readonly Profile[] = [PRESET_AUDIO, PRESET_FOCUS];
diff --git a/web-ext/features/profiles/settings.ts b/web-ext/features/profiles/settings.ts
new file mode 100644
index 00000000..5f9e8c51
--- /dev/null
+++ b/web-ext/features/profiles/settings.ts
@@ -0,0 +1,21 @@
+import { defineSettings } from "@/kernel/settings";
+
+export interface ProfilesSettings {
+  // Extra places to switch profiles from; the popup always has a switcher.
+  gearMenu: boolean;
+  // A player button that toggles the Audio profile.
+  audioButton: boolean;
+}
+
+export const profilesSettings = defineSettings<ProfilesSettings>(
+  "profiles-surfaces",
+  { gearMenu: false, audioButton: true },
+  {
+    legacy: (store) => {
+      const ui = store.ui as { gearMenuEnabled?: boolean } | undefined;
+      const audioMode = (store.preferences as { watch?: { audioMode?: { isEnabled?: boolean } } } | undefined)?.watch?.audioMode;
+      if (!ui && !audioMode) return undefined;
+      return { gearMenu: ui?.gearMenuEnabled, audioButton: audioMode?.isEnabled };
+    },
+  },
+);
diff --git a/web-ext/features/profiles/store.ts b/web-ext/features/profiles/store.ts
new file mode 100644
index 00000000..3a7741a1
--- /dev/null
+++ b/web-ext/features/profiles/store.ts
@@ -0,0 +1,77 @@
+import { defineSettings } from "@/kernel/settings";
+import { CHROME_STORAGE_LOCAL_KEY } from "@/lib/storageKeys";
+import { BUILT_IN_PRESETS, type Profile } from "./profiles";
+
+interface ProfileStore {
+  // null runs on individual preferences rather than on a default profile.
+  activeProfileId: string | null;
+  // Custom profiles only; presets are constants.
+  profiles: Profile[];
+  // What a profile's shortcut returns to when pressed again.
+  previousProfileId: string | null;
+}
+
+export const profileStore = defineSettings<ProfileStore>(
+  "profiles",
+  { activeProfileId: null, profiles: [], previousProfileId: null },
+  {
+    area: "local",
+    legacy: (store) => store[CHROME_STORAGE_LOCAL_KEY.PROFILE_STORE] as Partial<ProfileStore> | undefined,
+  },
+);
+
+const byCreation = (profiles: Profile[]) => [...profiles].sort((a, b) => a.createdAt - b.createdAt);
+
+export async function getCustomProfiles(): Promise<Profile[]> {
+  return byCreation((await profileStore.get()).profiles);
+}
+
+export async function getAllProfiles(): Promise<Profile[]> {
+  return [...BUILT_IN_PRESETS, ...(await getCustomProfiles())];
+}
+
+export async function getProfileById(id: string): Promise<Profile | undefined> {
+  return BUILT_IN_PRESETS.find((p) => p.id === id) ?? (await getCustomProfiles()).find((p) => p.id === id);
+}
+
+export async function getActiveProfile(): Promise<Profile | null> {
+  const { activeProfileId } = await profileStore.get();
+  return activeProfileId ? ((await getProfileById(activeProfileId)) ?? null) : null;
+}
+
+export function setActiveProfileId(activeProfileId: string | null): Promise<void> {
+  return profileStore.set({ activeProfileId });
+}
+
+// A profile's shortcut switches to it, and pressing it again goes back to
+// whatever was active before, so Audio can be flipped on and off over Focus.
+export async function toggleProfile(id: string): Promise<Profile | null> {
+  const { activeProfileId, previousProfileId } = await profileStore.get();
+  const next = activeProfileId === id ? previousProfileId : id;
+  await profileStore.set({ activeProfileId: next, previousProfileId: activeProfileId === id ? null : activeProfileId });
+  return next ? ((await getProfileById(next)) ?? null) : null;
+}
+
+export async function createProfile(data: Pick<Profile, "name" | "primitives">): Promise<Profile> {
+  const profile: Profile = { ...data, id: crypto.randomUUID(), isPreset: false, createdAt: Date.now() };
+  const { profiles } = await profileStore.get();
+  await profileStore.set({ profiles: [...profiles, profile] });
+  return profile;
+}
+
+// A write targeting a preset is ignored rather than thrown, so the options
+// page can keep one edit path for every profile.
+export async function updateProfile(id: string, patch: Partial<Pick<Profile, "name" | "primitives">>): Promise<void> {
+  const { profiles } = await profileStore.get();
+  await profileStore.set({ profiles: profiles.map((p) => (p.id === id ? { ...p, ...patch } : p)) });
+}
+
+export async function deleteProfile(id: string): Promise<void> {
+  const { profiles, activeProfileId } = await profileStore.get();
+  await profileStore.set({
+    profiles: profiles.filter((p) => p.id !== id),
+    activeProfileId: activeProfileId === id ? null : activeProfileId,
+  });
+}
+
+export const subscribeProfiles = (listener: () => void) => profileStore.subscribe(listener);
diff --git a/web-ext/features/schedules/background.test.ts b/web-ext/features/schedules/background.test.ts
new file mode 100644
index 00000000..90ec25a9
--- /dev/null
+++ b/web-ext/features/schedules/background.test.ts
@@ -0,0 +1,94 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+import { appSettings } from "@/app/settings";
+import { profileStore, setActiveProfileId } from "@/features/profiles/store";
+import { skipInCharge, tick } from "./background";
+import { schedulesStore, type Schedule } from "./settings";
+import { scheduleState } from "./state";
+
+const badge = { text: "", title: "" };
+const alarms = new Map<string, { when?: number; periodInMinutes?: number }>();
+Object.assign(chrome, {
+  alarms: {
+    create: async (name: string, info: { when?: number; periodInMinutes?: number }) => void alarms.set(name, info),
+    get: async (name: string) => (alarms.has(name) ? { name, ...alarms.get(name) } : undefined),
+  },
+  action: {
+    setBadgeText: async ({ text }: { text: string }) => void (badge.text = text),
+    setBadgeBackgroundColor: async () => {},
+    setTitle: async ({ title }: { title: string }) => void (badge.title = title),
+  },
+});
+
+// 2026-09-28 is a Monday.
+const at = (hhmm: string, day = 28) => {
+  const [h, m] = hhmm.split(":").map(Number);
+  return new Date(2026, 8, day, h, m);
+};
+const work: Schedule = { id: "work", profileId: "preset:audio", enabled: true, rule: { kind: "time", days: [1, 2, 3, 4, 5], start: "09:00", end: "18:00" } };
+const active = async () => (await profileStore.get()).activeProfileId;
+
+beforeEach(async () => {
+  await chrome.storage.local.clear();
+  await chrome.storage.sync.clear();
+  await schedulesStore.set({ schedules: [work] });
+  await setActiveProfileId("preset:focus");
+});
+
+describe("schedule runner", () => {
+  test("switches on at the start and back to the earlier profile at the end", async () => {
+    await tick(at("09:00"));
+    expect(await active()).toBe("preset:audio");
+    expect((await scheduleState.get()).notice?.text).toBe("Schedule · Audio until 18:00");
+    expect(badge.text).toBe("A");
+    expect(badge.title).toBe("Toppings · Audio on by schedule until 18:00");
+    await tick(at("18:00"));
+    expect(await active()).toBe("preset:focus");
+    expect((await scheduleState.get()).notice?.text).toBe("Schedule ended · Focus");
+    expect(badge.text).toBe("");
+  });
+
+  test("a profile picked mid-window is left alone when the window ends", async () => {
+    await tick(at("09:00"));
+    await setActiveProfileId(null);
+    await tick(at("11:00"));
+    expect(await active()).toBeNull();
+    await tick(at("18:00"));
+    expect(await active()).toBeNull();
+  });
+
+  test("sets an alarm for the next change, so it lands on time rather than at the next minute's tick", async () => {
+    await tick(at("08:00"));
+    expect(alarms.get("schedules-change")?.when).toBe(at("08:55").getTime());
+    await tick(at("08:56"));
+    expect(alarms.get("schedules-change")?.when).toBe(at("09:00").getTime());
+  });
+
+  test("warns once ahead of a start, counting down on the badge", async () => {
+    await tick(at("08:57"));
+    const first = (await scheduleState.get()).notice;
+    expect(first?.text).toBe("Audio turns on at 09:00");
+    expect(badge.text).toBe("3m");
+    await tick(at("08:58"));
+    expect((await scheduleState.get()).notice).toEqual(first);
+    expect(badge.text).toBe("2m");
+    expect(await active()).toBe("preset:focus");
+  });
+
+  test("a skipped schedule hands back the profile and stays out until its window ends", async () => {
+    await tick(at("09:00"));
+    await skipInCharge(at("10:00"));
+    await tick(at("10:00"));
+    expect(await active()).toBe("preset:focus");
+    await tick(at("11:00"));
+    expect(await active()).toBe("preset:focus");
+    await tick(at("09:00", 29));
+    expect(await active()).toBe("preset:audio");
+  });
+
+  test("does nothing while Toppings is switched off", async () => {
+    await appSettings.set({ enabled: false });
+    await tick(at("09:00"));
+    expect(await active()).toBe("preset:focus");
+    expect(badge.text).toBe("");
+  });
+});
diff --git a/web-ext/features/schedules/background.ts b/web-ext/features/schedules/background.ts
new file mode 100644
index 00000000..662fa127
--- /dev/null
+++ b/web-ext/features/schedules/background.ts
@@ -0,0 +1,157 @@
+import { appSettings } from "@/app/settings";
+import { readPositionInBackground } from "@/lib/location";
+import { getProfileById, profileStore, setActiveProfileId } from "@/features/profiles/store";
+import { clock, currentEnd, isInWindow, nextChangeAt, placesHere, scheduleInCharge, upcomingChanges } from "./rules";
+import { schedulesStore, type Place, type Schedule } from "./settings";
+import { scheduleState, type ScheduleState } from "./state";
+import { skipSchedule } from "./messages";
+
+const TICK_ALARM = "schedules";
+const CHANGE_ALARM = "schedules-change";
+const LOCATION_ALARM = "schedules-location";
+const LOCATION_EVERY_MINUTES = 5;
+// A fix vaguer than this cannot tell one building from the next.
+const MAX_ACCURACY_METERS = 1000;
+const LEAD_MINUTES = 5;
+const BADGE_COLOR = "#c2531e";
+
+let ticking = Promise.resolve();
+
+export function runSchedules(): void {
+  // Created once: re-creating on every wake of the background would restart
+  // the countdown, and a background woken often would never see it fire.
+  void ensureAlarm(TICK_ALARM, 1);
+  void ensureAlarm(LOCATION_ALARM, LOCATION_EVERY_MINUTES);
+  chrome.alarms.onAlarm.addListener((alarm) => {
+    if (alarm.name === TICK_ALARM || alarm.name === CHANGE_ALARM) queueTick();
+    if (alarm.name === LOCATION_ALARM) void checkLocation();
+  });
+  schedulesStore.subscribe(() => {
+    queueTick();
+    void checkLocation();
+  });
+  appSettings.subscribe(queueTick);
+  skipSchedule.handle(async () => {
+    await skipInCharge(new Date());
+    await queueTick();
+  });
+  queueTick();
+  void checkLocation();
+}
+
+async function ensureAlarm(name: string, periodInMinutes: number): Promise<void> {
+  if (!(await chrome.alarms.get(name))) await chrome.alarms.create(name, { periodInMinutes });
+}
+
+// Only while a place schedule exists, so nobody else is ever asked where they are.
+async function checkLocation(): Promise<void> {
+  const { schedules, places } = await schedulesStore.get();
+  if (!schedules.some((schedule) => schedule.enabled && schedule.rule.kind === "place")) return;
+  try {
+    const here = await readPositionInBackground();
+    if (here.accuracyMeters > MAX_ACCURACY_METERS) throw new Error("Location too imprecise to tell places apart");
+    const { atPlaces } = await scheduleState.get();
+    await scheduleState.set({ atPlaces: placesHere(places, here, atPlaces), locationError: null });
+  } catch (error) {
+    await scheduleState.set({ locationError: error instanceof Error ? error.message : String(error) });
+  }
+  await queueTick();
+}
+
+// One tick at a time: each reads state, decides, then writes it back.
+function queueTick(): Promise<void> {
+  ticking = ticking.then(() => tick(new Date())).catch((error) => console.error("[toppings] schedules", error));
+  return ticking;
+}
+
+export async function skipInCharge(now: Date): Promise<void> {
+  const [{ schedules }, { inCharge }] = await Promise.all([schedulesStore.get(), scheduleState.get()]);
+  const schedule = schedules.find((s) => s.id === inCharge);
+  if (!schedule) return;
+  const until = schedule.rule.kind === "time" ? (currentEnd(schedule.rule, now)?.getTime() ?? null) : null;
+  await scheduleState.set({ skipped: { id: schedule.id, until } });
+}
+
+export async function tick(now: Date): Promise<void> {
+  const [app, { schedules, places }, state, { activeProfileId }] = await Promise.all([appSettings.get(), schedulesStore.get(), scheduleState.get(), profileStore.get()]);
+  if (!app.enabled) {
+    if (state.status) await scheduleState.set({ status: "" });
+    return showBadge("", "");
+  }
+
+  const byId = (id: string | null) => schedules.find((schedule) => schedule.id === id) ?? null;
+  const skippedSchedule = byId(state.skipped?.id ?? null);
+  const skipHolds = skippedSchedule && (state.skipped?.until != null ? now.getTime() < state.skipped.until : isInWindow(skippedSchedule, now, state.atPlaces));
+  const skipped = skipHolds ? skippedSchedule.id : null;
+  const current = byId(state.inCharge);
+  const next = scheduleInCharge(schedules, now, state.atPlaces, skipped);
+  const patch: Partial<ScheduleState> = { skipped: skipped ? state.skipped : null };
+  let active = activeProfileId;
+  let profileBefore = state.profileBefore;
+  const say = (text: string) => void (patch.notice = { id: now.getTime(), text });
+
+  if (state.inCharge && state.inCharge !== next?.id) {
+    // A profile the user picked mid-window stays; only the schedule's own is undone.
+    if (current && active === current.profileId) {
+      active = profileBefore;
+      say(`Schedule ended · ${await nameOf(active)}`);
+    }
+    profileBefore = null;
+  }
+  if (next && next.id !== state.inCharge) {
+    profileBefore = active;
+    active = next.profileId;
+    say(`Schedule · ${await nameOf(active)} ${until(next, now, places)}`);
+  }
+  patch.inCharge = next?.id ?? null;
+  patch.profileBefore = profileBefore;
+  if (active !== activeProfileId) await setActiveProfileId(active);
+
+  const upcoming = upcomingChanges(schedules, now, LEAD_MINUTES, next);
+  const announced = state.announced.filter((key) => Number(key.split("@")[1]) > now.getTime());
+  for (const change of upcoming) {
+    const key = `${change.schedule.id}:${change.change}@${change.at.getTime()}`;
+    if (announced.includes(key)) continue;
+    announced.push(key);
+    say(`${await nameOf(change.schedule.profileId)} turns ${change.change === "start" ? "on" : "off"} at ${clock(change.at)}`);
+  }
+  patch.announced = announced;
+
+  const soon = upcoming[0];
+  const status = soon
+    ? `${await nameOf(soon.schedule.profileId)} turns ${soon.change === "start" ? "on" : "off"} at ${clock(soon.at)}`
+    : next
+      ? `${await nameOf(next.profileId)} on by schedule ${until(next, now, places)}`
+      : "";
+  patch.status = status;
+  await scheduleState.set(patch);
+
+  // The one-minute tick is a safety net; this lands on the change itself.
+  const change = nextChangeAt(schedules, now, LEAD_MINUTES);
+  if (change) await chrome.alarms.create(CHANGE_ALARM, { when: change.getTime() });
+
+  const badge = soon ? `${Math.max(1, Math.ceil((soon.at.getTime() - now.getTime()) / 60_000))}m` : next ? (await nameOf(next.profileId)).charAt(0).toUpperCase() : "";
+  await showBadge(badge, status);
+}
+
+function until(schedule: Schedule, now: Date, places: readonly Place[]): string {
+  if (schedule.rule.kind === "time") {
+    const end = currentEnd(schedule.rule, now);
+    return end ? `until ${clock(end)}` : "";
+  }
+  const placeId = schedule.rule.placeId;
+  return `while at ${places.find((place) => place.id === placeId)?.name ?? "this place"}`;
+}
+
+async function nameOf(profileId: string | null): Promise<string> {
+  return profileId ? ((await getProfileById(profileId))?.name ?? "Default") : "Default";
+}
+
+async function showBadge(text: string, status: string): Promise<void> {
+  // Firefox still ships MV2, where the toolbar button is browserAction.
+  // @ts-expect-error chrome-types only declares MV3
+  const action: typeof chrome.action = chrome.action ?? chrome.browserAction;
+  await action.setBadgeText({ text });
+  await action.setBadgeBackgroundColor({ color: BADGE_COLOR });
+  await action.setTitle({ title: status ? `Toppings · ${status}` : "Toppings" });
+}
diff --git a/web-ext/features/schedules/index.ts b/web-ext/features/schedules/index.ts
new file mode 100644
index 00000000..84e0deed
--- /dev/null
+++ b/web-ext/features/schedules/index.ts
@@ -0,0 +1,22 @@
+import type { Feature } from "@/kernel/features";
+import { showToast } from "@/kernel/dom/toast";
+import { scheduleState } from "./state";
+
+const NOTICE_MS = 4000;
+
+// Tells whoever is watching that a schedule switched, or is about to, so a
+// profile that changes on its own is never a mystery. Only notices that
+// arrive while mounted are shown: an old one would be news about the past.
+export const scheduleNotices: Feature = {
+  id: "schedule-notices",
+  routes: ["watch", "playlist", "shorts", "home", "search", "other"],
+  mount() {
+    let seen: number | null = null;
+    void scheduleState.get().then((state) => (seen ??= state.notice?.id ?? null));
+    return scheduleState.subscribe(({ notice }) => {
+      if (!notice || notice.id === seen) return;
+      seen = notice.id;
+      if (document.visibilityState === "visible") showToast(notice.text, NOTICE_MS);
+    });
+  },
+};
diff --git a/web-ext/features/schedules/messages.ts b/web-ext/features/schedules/messages.ts
new file mode 100644
index 00000000..204df3b9
--- /dev/null
+++ b/web-ext/features/schedules/messages.ts
@@ -0,0 +1,4 @@
+import { defineMessage } from "@/kernel/messaging";
+
+// Only the background changes schedule state, so the popup asks it to.
+export const skipSchedule = defineMessage<void, void>("skip-schedule");
diff --git a/web-ext/features/schedules/rules.test.ts b/web-ext/features/schedules/rules.test.ts
new file mode 100644
index 00000000..4d3bbfb1
--- /dev/null
+++ b/web-ext/features/schedules/rules.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, test } from "bun:test";
+import { clock, currentEnd, isInWindow, nextChangeAt, nextStart, placesHere, scheduleInCharge, upcomingChanges } from "./rules";
+import type { Place, Schedule, TimeRule } from "./settings";
+
+// 2026-09-28 is a Monday; dates are local, like the rules.
+const on = (day: number, hhmm: string) => {
+  const [h, m] = hhmm.split(":").map(Number);
+  return new Date(2026, 8, day, h, m);
+};
+const weekdays: TimeRule = { kind: "time", days: [1, 2, 3, 4, 5], start: "09:00", end: "18:00" };
+const nights: TimeRule = { kind: "time", days: [5], start: "22:00", end: "02:00" };
+const schedule = (id: string, rule: Schedule["rule"], enabled = true): Schedule => ({ id, profileId: `profile-${id}`, rule, enabled });
+
+describe("time rules", () => {
+  test("a weekday window covers its hours on its days only", () => {
+    expect(isInWindow(schedule("w", weekdays), on(28, "09:00"), [])).toBe(true);
+    expect(isInWindow(schedule("w", weekdays), on(28, "17:59"), [])).toBe(true);
+    expect(isInWindow(schedule("w", weekdays), on(28, "18:00"), [])).toBe(false);
+    expect(isInWindow(schedule("w", weekdays), on(27, "12:00"), [])).toBe(false);
+  });
+
+  test("an overnight window belongs to the day it starts", () => {
+    expect(isInWindow(schedule("n", nights), on(25, "23:00"), [])).toBe(true);
+    expect(isInWindow(schedule("n", nights), on(26, "01:30"), [])).toBe(true);
+    expect(isInWindow(schedule("n", nights), on(26, "23:00"), [])).toBe(false);
+    expect(currentEnd(nights, on(25, "23:00"))).toEqual(on(26, "02:00"));
+  });
+
+  test("the next start skips to the next listed day", () => {
+    expect(nextStart(weekdays, on(26, "12:00"))).toEqual(on(28, "09:00"));
+    expect(nextStart(weekdays, on(28, "08:00"))).toEqual(on(28, "09:00"));
+    expect(nextStart(weekdays, on(28, "10:00"))).toEqual(on(29, "09:00"));
+  });
+
+  test("a disabled schedule is never in window", () => {
+    expect(isInWindow(schedule("w", weekdays, false), on(28, "10:00"), [])).toBe(false);
+  });
+});
+
+describe("which schedule is in charge", () => {
+  test("list order is priority, and a skipped schedule gives way until its window ends", () => {
+    const first = schedule("a", weekdays);
+    const second = schedule("b", { ...weekdays, start: "08:00" });
+    expect(scheduleInCharge([first, second], on(28, "10:00"), [], null)?.id).toBe("a");
+    expect(scheduleInCharge([first, second], on(28, "10:00"), [], "a")?.id).toBe("b");
+  });
+
+  test("a place schedule is in charge while there", () => {
+    const work = schedule("p", { kind: "place", placeId: "work" });
+    expect(scheduleInCharge([work], on(28, "10:00"), ["work"], null)?.id).toBe("p");
+    expect(scheduleInCharge([work], on(28, "10:00"), [], null)).toBeNull();
+  });
+});
+
+describe("heads-up", () => {
+  test("a start or end within the lead is announced", () => {
+    const work = schedule("w", weekdays);
+    expect(upcomingChanges([work], on(28, "08:56"), 5, null).map((c) => [c.change, clock(c.at)])).toEqual([["start", "09:00"]]);
+    expect(upcomingChanges([work], on(28, "08:50"), 5, null)).toEqual([]);
+    expect(upcomingChanges([work], on(28, "17:57"), 5, work).map((c) => [c.change, clock(c.at)])).toEqual([["end", "18:00"]]);
+  });
+});
+
+describe("next change", () => {
+  test("is the next heads-up, start or end, whichever comes first", () => {
+    const work = schedule("w", weekdays);
+    expect(nextChangeAt([work], on(28, "08:00"), 5)).toEqual(on(28, "08:55"));
+    expect(nextChangeAt([work], on(28, "08:56"), 5)).toEqual(on(28, "09:00"));
+    expect(nextChangeAt([work], on(28, "12:00"), 5)).toEqual(on(28, "17:55"));
+    expect(nextChangeAt([], on(28, "12:00"), 5)).toBeNull();
+  });
+});
+
+describe("places", () => {
+  const office: Place = { id: "work", name: "Work", latitude: 52.52, longitude: 13.405, radiusMeters: 200 };
+  test("inside the radius counts as there; leaving needs a margin past it", () => {
+    const near = { latitude: 52.5215, longitude: 13.405 };
+    const edge = { latitude: 52.5222, longitude: 13.405 };
+    expect(placesHere([office], near, [])).toEqual(["work"]);
+    expect(placesHere([office], edge, [])).toEqual([]);
+    expect(placesHere([office], edge, ["work"])).toEqual(["work"]);
+  });
+});
diff --git a/web-ext/features/schedules/rules.ts b/web-ext/features/schedules/rules.ts
new file mode 100644
index 00000000..ea58a057
--- /dev/null
+++ b/web-ext/features/schedules/rules.ts
@@ -0,0 +1,114 @@
+import type { Place, Schedule, TimeRule } from "./settings";
+
+const MINUTE = 60_000;
+const DAY = 24 * 60 * MINUTE;
+
+const minutesOf = (hhmm: string) => {
+  const [h, m] = hhmm.split(":").map(Number);
+  return h * 60 + m;
+};
+
+function at(day: Date, hhmm: string): Date {
+  const date = new Date(day);
+  date.setHours(0, minutesOf(hhmm), 0, 0);
+  return date;
+}
+
+const overnight = (rule: TimeRule) => minutesOf(rule.end) <= minutesOf(rule.start);
+
+// The window that contains now, if any, as [start, end).
+function windowAround(rule: TimeRule, now: Date): { start: Date; end: Date } | null {
+  for (const back of [0, 1]) {
+    const day = new Date(now.getTime() - back * DAY);
+    if (!rule.days.includes(day.getDay() as TimeRule["days"][number])) continue;
+    const start = at(day, rule.start);
+    const end = at(new Date(day.getTime() + (overnight(rule) ? DAY : 0)), rule.end);
+    if (now >= start && now < end) return { start, end };
+  }
+  return null;
+}
+
+export function nextStart(rule: TimeRule, now: Date): Date | null {
+  for (let ahead = 0; ahead <= 7; ahead++) {
+    const day = new Date(now.getTime() + ahead * DAY);
+    if (!rule.days.includes(day.getDay() as TimeRule["days"][number])) continue;
+    const start = at(day, rule.start);
+    if (start > now) return start;
+  }
+  return null;
+}
+
+export function currentEnd(rule: TimeRule, now: Date): Date | null {
+  return windowAround(rule, now)?.end ?? null;
+}
+
+export function distanceMeters(a: { latitude: number; longitude: number }, b: { latitude: number; longitude: number }): number {
+  const rad = (deg: number) => (deg * Math.PI) / 180;
+  const dLat = rad(b.latitude - a.latitude);
+  const dLon = rad(b.longitude - a.longitude);
+  const h = Math.sin(dLat / 2) ** 2 + Math.cos(rad(a.latitude)) * Math.cos(rad(b.latitude)) * Math.sin(dLon / 2) ** 2;
+  return 2 * 6_371_000 * Math.asin(Math.sqrt(h));
+}
+
+// Leaving takes a margin past the radius, so a position that wobbles at the
+// edge does not flip the profile back and forth.
+const LEAVE_MARGIN = 1.25;
+
+export function placesHere(places: readonly Place[], here: { latitude: number; longitude: number }, wereHere: readonly string[]): string[] {
+  return places
+    .filter((place) => {
+      const distance = distanceMeters(place, here);
+      return distance <= place.radiusMeters * (wereHere.includes(place.id) ? LEAVE_MARGIN : 1);
+    })
+    .map((place) => place.id);
+}
+
+export function isInWindow(schedule: Schedule, now: Date, atPlaces: readonly string[]): boolean {
+  if (!schedule.enabled) return false;
+  return schedule.rule.kind === "time" ? windowAround(schedule.rule, now) !== null : atPlaces.includes(schedule.rule.placeId);
+}
+
+// The first enabled schedule in window wins, so list order is priority.
+export function scheduleInCharge(schedules: readonly Schedule[], now: Date, atPlaces: readonly string[], skipped: string | null): Schedule | null {
+  return schedules.find((schedule) => schedule.id !== skipped && isInWindow(schedule, now, atPlaces)) ?? null;
+}
+
+export interface Upcoming {
+  schedule: Schedule;
+  change: "start" | "end";
+  at: Date;
+}
+
+// Time schedules that start or end within the lead, for the heads-up; places
+// cannot be foreseen.
+export function upcomingChanges(schedules: readonly Schedule[], now: Date, leadMinutes: number, inCharge: Schedule | null): Upcoming[] {
+  const horizon = new Date(now.getTime() + leadMinutes * MINUTE);
+  const changes: Upcoming[] = [];
+  for (const schedule of schedules) {
+    if (!schedule.enabled || schedule.rule.kind !== "time") continue;
+    if (schedule.id === inCharge?.id) {
+      const end = currentEnd(schedule.rule, now);
+      if (end && end <= horizon) changes.push({ schedule, change: "end", at: end });
+    } else if (!inCharge) {
+      const start = nextStart(schedule.rule, now);
+      if (start && start <= horizon) changes.push({ schedule, change: "start", at: start });
+    }
+  }
+  return changes;
+}
+
+// The next moment anything happens: a heads-up, a start or an end.
+export function nextChangeAt(schedules: readonly Schedule[], now: Date, leadMinutes: number): Date | null {
+  const lead = leadMinutes * MINUTE;
+  const moments: number[] = [];
+  for (const schedule of schedules) {
+    if (!schedule.enabled || schedule.rule.kind !== "time") continue;
+    const start = nextStart(schedule.rule, now);
+    const end = currentEnd(schedule.rule, now);
+    for (const moment of [start, end]) if (moment) moments.push(moment.getTime() - lead, moment.getTime());
+  }
+  const future = moments.filter((moment) => moment > now.getTime());
+  return future.length ? new Date(Math.min(...future)) : null;
+}
+
+export const clock = (date: Date) => `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
diff --git a/web-ext/features/schedules/settings.ts b/web-ext/features/schedules/settings.ts
new file mode 100644
index 00000000..d5c5f484
--- /dev/null
+++ b/web-ext/features/schedules/settings.ts
@@ -0,0 +1,40 @@
+import { defineSettings } from "@/kernel/settings";
+
+// 0 is Sunday, as in Date#getDay.
+export type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+// "HH:MM", 24-hour. A window whose end is not after its start runs overnight
+// and belongs to the day it starts on.
+export interface TimeRule {
+  kind: "time";
+  days: Weekday[];
+  start: string;
+  end: string;
+}
+
+export interface PlaceRule {
+  kind: "place";
+  placeId: string;
+}
+
+export interface Schedule {
+  id: string;
+  profileId: string;
+  rule: TimeRule | PlaceRule;
+  enabled: boolean;
+}
+
+export interface Place {
+  id: string;
+  name: string;
+  latitude: number;
+  longitude: number;
+  radiusMeters: number;
+}
+
+// Local, never synced: places are where the user lives and works.
+export const schedulesStore = defineSettings<{ schedules: Schedule[]; places: Place[] }>(
+  "schedules",
+  { schedules: [], places: [] },
+  { area: "local" },
+);
diff --git a/web-ext/features/schedules/state.ts b/web-ext/features/schedules/state.ts
new file mode 100644
index 00000000..7c477539
--- /dev/null
+++ b/web-ext/features/schedules/state.ts
@@ -0,0 +1,29 @@
+import { defineSettings } from "@/kernel/settings";
+
+export interface ScheduleNotice {
+  id: number;
+  text: string;
+}
+
+// Written only by the background runner; the popup and YouTube tabs read it.
+export interface ScheduleState {
+  inCharge: string | null;
+  // What the profile goes back to when the schedule in charge ends.
+  profileBefore: string | null;
+  // Skipped from the popup for the window it was in: until that window's end
+  // for a time schedule, or until leaving for a place (until is then null).
+  skipped: { id: string; until: number | null } | null;
+  atPlaces: string[];
+  // Why places could not be checked, for the options page and popup to say.
+  locationError: string | null;
+  announced: string[];
+  // A sentence for the user, shown once by the YouTube tab they are on.
+  notice: ScheduleNotice | null;
+  status: string;
+}
+
+export const scheduleState = defineSettings<ScheduleState>(
+  "schedule-state",
+  { inCharge: null, profileBefore: null, skipped: null, atPlaces: [], locationError: null, announced: [], notice: null, status: "" },
+  { area: "local" },
+);
diff --git a/web-ext/features/segments/Markers.test.ts b/web-ext/features/segments/Markers.test.ts
new file mode 100644
index 00000000..5f897a53
--- /dev/null
+++ b/web-ext/features/segments/Markers.test.ts
@@ -0,0 +1,122 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { h, render } from "preact";
+import { Markers } from "./Markers";
+import type { Segment } from "./types";
+
+const TRACK_WIDTH = 1000;
+const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+let container: HTMLElement;
+let errors: unknown[];
+const onError = (event: ErrorEvent) => errors.push(event.error);
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+  window.removeEventListener("error", onError);
+});
+
+// Stands in for the session: previews and merges come back as new props.
+function harness(initial: Segment[], duration = 100) {
+  container = document.createElement("div");
+  document.body.append(container);
+  errors = [];
+  window.addEventListener("error", onError);
+  const track = document.createElement("div");
+  track.getBoundingClientRect = () => new DOMRect(0, 0, TRACK_WIDTH, 4);
+  const state = { segments: initial, previews: [] as Segment[][], merges: [] as string[][] };
+  const draw = () =>
+    render(
+      h(Markers, {
+        segments: state.segments,
+        duration,
+        track,
+        onPreview: (segments) => {
+          state.previews.push(segments);
+          state.segments = segments;
+          draw();
+        },
+        onSeek: () => undefined,
+        onCommit: () => undefined,
+        onMerge: (keepId, removeId) => {
+          state.merges.push([keepId, removeId]);
+          const remove = state.segments.find((s) => s.id === removeId)!;
+          state.segments = state.segments.filter((s) => s !== remove).map((s) => (s.id === keepId ? { ...s, endTime: remove.endTime } : s));
+          draw();
+        },
+      }),
+      container,
+    );
+  draw();
+  const grab = (segmentIndex: number, role: "start" | "end") =>
+    container.querySelectorAll(".marker")[segmentIndex * 2 + (role === "start" ? 0 : 1)].querySelector(".grab")!;
+  const pointer = (target: Element, type: string, pct: number) =>
+    target.dispatchEvent(new PointerEvent(type, { clientX: (pct / 100) * TRACK_WIDTH, pointerId: 1, bubbles: true }));
+  return { state, grab, pointer };
+}
+
+const pair = (): Segment[] => [
+  { id: "a", startTime: 0, endTime: 40 },
+  { id: "b", startTime: 50, endTime: 100 },
+];
+
+describe("Markers", () => {
+  test("releasing before the hold elapses cancels the merge", async () => {
+    const { state, grab, pointer } = harness(pair());
+    const end = grab(0, "end");
+    pointer(end, "pointerdown", 40);
+    pointer(end, "pointermove", 49);
+    pointer(end, "pointerup", 49);
+    await wait(600);
+    expect(state.merges).toEqual([]);
+  });
+
+  test("a merge ends the drag, so the merged range survives further moves", async () => {
+    const { state, grab, pointer } = harness(pair());
+    const end = grab(0, "end");
+    pointer(end, "pointerdown", 40);
+    pointer(end, "pointermove", 49);
+    await wait(600);
+    expect(state.merges).toEqual([["a", "b"]]);
+    pointer(grab(0, "end"), "pointermove", 45);
+    expect(state.segments).toEqual([{ id: "a", startTime: 0, endTime: 100 }]);
+  });
+
+  test("merging away the segment being dragged by its start leaves nothing to trip on", async () => {
+    const { state, grab, pointer } = harness(pair());
+    const start = grab(1, "start");
+    pointer(start, "pointerdown", 50);
+    pointer(start, "pointermove", 40.5);
+    await wait(600);
+    expect(state.merges).toEqual([["a", "b"]]);
+    pointer(grab(0, "end"), "pointermove", 60);
+    expect(errors).toEqual([]);
+    expect(state.segments).toEqual([{ id: "a", startTime: 0, endTime: 100 }]);
+  });
+
+  test("unmounting cancels a pending merge", async () => {
+    const { state, grab, pointer } = harness(pair());
+    const end = grab(0, "end");
+    pointer(end, "pointerdown", 40);
+    pointer(end, "pointermove", 49);
+    render(null, container);
+    await wait(600);
+    expect(state.merges).toEqual([]);
+  });
+
+  test("a start marker never passes its own end, even inside a longer segment", () => {
+    const { state, grab, pointer } = harness(
+      [
+        { id: "a", startTime: 0, endTime: 100 },
+        { id: "b", startTime: 40, endTime: 50 },
+      ],
+      200,
+    );
+    const start = grab(1, "start");
+    pointer(start, "pointerdown", 20);
+    pointer(start, "pointermove", 22);
+    const b = state.segments.find((s) => s.id === "b")!;
+    expect(b.startTime).toBeLessThan(b.endTime);
+    expect(b.startTime).toBeGreaterThanOrEqual(0);
+  });
+});
diff --git a/web-ext/features/segments/Markers.tsx b/web-ext/features/segments/Markers.tsx
new file mode 100644
index 00000000..69a2d210
--- /dev/null
+++ b/web-ext/features/segments/Markers.tsx
@@ -0,0 +1,168 @@
+import { useEffect, useRef } from "preact/hooks";
+import { credit } from "@/kernel/dom/credit";
+import { colorForIndex } from "./format";
+import type { Segment, SegmentId } from "./types";
+
+type Role = "start" | "end";
+
+export interface MarkersProps {
+  segments: Segment[];
+  duration: number;
+  // The progress bar, for turning pointer positions into times.
+  track: HTMLElement;
+  onPreview: (segments: Segment[]) => void;
+  // Scrubbing a start marker follows it with the playhead.
+  onSeek: (time: number) => void;
+  onCommit: () => void;
+  onMerge: (keepId: SegmentId, removeId: SegmentId) => void;
+}
+
+const EPSILON_PCT = 0.2;
+const MERGE_THRESHOLD_PCT = 1.5;
+const MERGE_HOLD_MS = 500;
+
+// Mounted inside YouTube's progress bar, which stacks its progress lists at
+// 32, chapter marks at 40 and the playhead dot at 43: at 42 the markers sit
+// under the dot. Everything is drawn above the bar, never on it, so the bar
+// and its chapter gaps stay exactly as YouTube draws them.
+// No filters, strokes or transforms: at this size each one leaves the
+// shape soft once it is rasterised at a fractional position.
+const markerStyle = `
+  :host { position: absolute; inset: 0; z-index: 42; pointer-events: none; }
+  .rail { position: absolute; bottom: calc(100% + 3px); height: 2px; background: var(--seg); opacity: .7; }
+  .marker { position: absolute; bottom: 100%; width: 0; height: 0; color: var(--seg); }
+  .head { position: absolute; left: -6px; bottom: 3px; }
+  .head svg { display: block; }
+  .needle { position: absolute; left: -1px; bottom: 0; width: 2px; height: 3px; background: currentColor; }
+  .grab { position: absolute; left: -10px; width: 20px; bottom: -2px; height: 16px; cursor: ew-resize; touch-action: none; pointer-events: all; }
+  .marker:hover, .marker[data-dragging] { color: color-mix(in srgb, var(--seg) 75%, white); }
+  .marker[data-merging] .head, .marker[data-merging] .needle { animation: pulse .4s ease-in-out infinite alternate; }
+  @keyframes pulse { from { opacity: 1; } to { opacity: .35; } }
+`;
+
+// An editor's in or out point: a trapezoid pin standing on the timeline, its
+// needle on the exact cut.
+function Pin() {
+  return (
+    <>
+      <span class="head">
+        <svg width="12" height="8" viewBox="0 0 12 8">
+          <path d="M1 0H11A1 1 0 0 1 11.8 1.6L8 8H4L.2 1.6A1 1 0 0 1 1 0Z" fill="currentColor" />
+        </svg>
+      </span>
+      <span class="needle" />
+    </>
+  );
+}
+
+const byStart = (segments: Segment[]) => [...segments].sort((a, b) => a.startTime - b.startTime);
+
+export function Markers({ segments, duration, track, onPreview, onSeek, onCommit, onMerge }: MarkersProps) {
+  const drag = useRef<{ id: SegmentId; role: Role } | null>(null);
+  const merge = useRef<{ keepId: SegmentId; removeId: SegmentId; timer: ReturnType<typeof setTimeout> } | null>(null);
+  const sorted = byStart(segments);
+  const pct = (time: number) => (duration > 0 ? (time / duration) * 100 : 0);
+
+  const clearMerge = () => {
+    if (merge.current) clearTimeout(merge.current.timer);
+    merge.current = null;
+  };
+  useEffect(() => clearMerge, []);
+
+  // The segment's own bounds are applied last so they win over a neighbour
+  // that overlaps it.
+  const clamp = (raw: number, own: Segment, index: number, role: Role) => {
+    if (role === "start") {
+      const floor = sorted[index - 1] ? pct(sorted[index - 1].endTime) + EPSILON_PCT : 0;
+      return Math.max(0, Math.min(Math.max(raw, floor), pct(own.endTime) - EPSILON_PCT));
+    }
+    const ceiling = sorted[index + 1] ? pct(sorted[index + 1].startTime) - EPSILON_PCT : 100;
+    return Math.min(100, Math.max(Math.min(raw, ceiling), pct(own.startTime) + EPSILON_PCT));
+  };
+
+  // Holding a marker against its neighbour for a moment merges the two.
+  const watchMerge = (id: SegmentId, role: Role, at: number) => {
+    const index = sorted.findIndex((s) => s.id === id);
+    const neighbour = role === "end" ? sorted[index + 1] : sorted[index - 1];
+    const edge = neighbour ? pct(role === "end" ? neighbour.startTime : neighbour.endTime) : null;
+    const candidate = neighbour && edge !== null && Math.abs(at - edge) < MERGE_THRESHOLD_PCT
+      ? role === "end" ? { keepId: id, removeId: neighbour.id } : { keepId: neighbour.id, removeId: id }
+      : null;
+    if (!candidate) {
+      clearMerge();
+      return;
+    }
+    if (merge.current?.keepId === candidate.keepId && merge.current.removeId === candidate.removeId) return;
+    clearMerge();
+    merge.current = {
+      ...candidate,
+      timer: setTimeout(() => {
+        merge.current = null;
+        drag.current = null;
+        onMerge(candidate.keepId, candidate.removeId);
+      }, MERGE_HOLD_MS),
+    };
+  };
+
+  const onPointerDown = (e: PointerEvent, id: SegmentId, role: Role) => {
+    e.preventDefault();
+    e.stopPropagation();
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    drag.current = { id, role };
+  };
+
+  const onPointerMove = (e: PointerEvent) => {
+    if (!drag.current || !duration) return;
+    const { id, role } = drag.current;
+    const index = sorted.findIndex((s) => s.id === id);
+    if (index === -1) return;
+    const rect = track.getBoundingClientRect();
+    const at = clamp(((e.clientX - rect.left) / rect.width) * 100, sorted[index], index, role);
+    const time = (at / 100) * duration;
+    onPreview(segments.map((s) => (s.id === id ? { ...s, [role === "start" ? "startTime" : "endTime"]: time } : s)));
+    if (role === "start") onSeek(time);
+    watchMerge(id, role, at);
+  };
+
+  const onPointerUp = () => {
+    if (!drag.current) return;
+    drag.current = null;
+    clearMerge();
+    onCommit();
+  };
+
+  return (
+    <>
+      <style>{markerStyle}</style>
+      {sorted.map((segment, index) => (
+        <div
+          key={`${segment.id}-rail`}
+          class="rail"
+          style={{ "--seg": colorForIndex(index), left: `${pct(segment.startTime)}%`, width: `${pct(segment.endTime) - pct(segment.startTime)}%` }}
+        />
+      ))}
+      {sorted.flatMap((segment, index) =>
+        (["start", "end"] as const).map((role) => (
+          <div
+            key={`${segment.id}-${role}`}
+            class="marker"
+            data-role={role}
+            data-dragging={drag.current?.id === segment.id && drag.current.role === role ? "" : undefined}
+            data-merging={merge.current && (merge.current.keepId === segment.id || merge.current.removeId === segment.id) ? "" : undefined}
+            style={{ "--seg": colorForIndex(index), left: `${pct(role === "start" ? segment.startTime : segment.endTime)}%` }}
+          >
+            <Pin />
+            <span
+              class="grab"
+              title={credit(`Segment ${index + 1} ${role === "start" ? "in" : "out"} point, drag to adjust`)}
+              onPointerDown={(e) => onPointerDown(e, segment.id, role)}
+              onPointerMove={onPointerMove}
+              onPointerUp={onPointerUp}
+              onPointerCancel={onPointerUp}
+            />
+          </div>
+        )),
+      )}
+    </>
+  );
+}
diff --git a/web-ext/features/segments/SegmentButton.tsx b/web-ext/features/segments/SegmentButton.tsx
new file mode 100644
index 00000000..dfa9146d
--- /dev/null
+++ b/web-ext/features/segments/SegmentButton.tsx
@@ -0,0 +1,29 @@
+import { credit } from "@/kernel/dom/credit";
+
+// State is shown by fill, never by colour, the same way YouTube's own
+// control-bar toggles do it and the only cue that survives colour-blindness.
+export function SegmentButton({ active }: { active: boolean }) {
+  const bar = (x: number, width: number) => (
+    <rect x={x} y="6" width={width} height="12" rx="1.5" fill={active ? "white" : "none"} stroke={active ? "none" : "white"} stroke-width="1.5" />
+  );
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      {bar(2, 7)}
+      {bar(11, 7)}
+      {bar(20, 2)}
+    </svg>
+  );
+}
+
+export function segmentButtonHost(): HTMLButtonElement {
+  const host = document.createElement("button");
+  host.id = "tppng-segment-button";
+  host.className = "ytp-button";
+  host.setAttribute("aria-label", "Segments playback");
+  return host;
+}
+
+export function setSegmentButtonState(host: HTMLButtonElement, active: boolean, label: string | null): void {
+  host.setAttribute("aria-pressed", String(active));
+  host.title = credit(label ? `Segments: ${label}` : "Segments");
+}
diff --git a/web-ext/features/segments/engine.test.ts b/web-ext/features/segments/engine.test.ts
new file mode 100644
index 00000000..1e64564d
--- /dev/null
+++ b/web-ext/features/segments/engine.test.ts
@@ -0,0 +1,186 @@
+import { describe, expect, test } from "bun:test";
+import { SegmentEngine } from "./engine";
+import type { PlayStep, Segment, SegmentConfig } from "./types";
+
+function fakeVideo(duration = 100): HTMLVideoElement {
+  const video = document.createElement("video");
+  Object.defineProperty(video, "duration", { value: duration, configurable: true });
+  return video;
+}
+
+function config(segments: Segment[], sequence: Array<Partial<PlayStep> & { segmentIds: string[] }>): SegmentConfig {
+  return {
+    id: "c",
+    label: "Test",
+    segments,
+    sequence: sequence.map((step, i) => ({ id: `step${i}`, count: 0, playbackRate: null, perIterationRates: [], ...step })),
+    shortcutKey: "",
+    createdAt: 0,
+    updatedAt: 0,
+  };
+}
+
+// happy-dom never fires seeking, so tests play the browser's part.
+function playTo(video: HTMLVideoElement, time: number): void {
+  video.currentTime = time;
+  video.dispatchEvent(new Event("timeupdate"));
+}
+
+function seekTo(video: HTMLVideoElement, time: number): void {
+  video.currentTime = time;
+  video.dispatchEvent(new Event("seeking"));
+  video.dispatchEvent(new Event("timeupdate"));
+}
+
+describe("SegmentEngine", () => {
+  test("adjacent segments play through their step's count before the next step", () => {
+    const video = fakeVideo();
+    const engine = new SegmentEngine(
+      video,
+      config(
+        [
+          { id: "a", startTime: 0, endTime: 10 },
+          { id: "b", startTime: 10, endTime: 20 },
+          { id: "c", startTime: 30, endTime: 40 },
+        ],
+        [{ segmentIds: ["a", "b"], count: 2 }, { segmentIds: ["c"], count: 1 }],
+      ),
+    );
+    engine.start();
+    const visited: number[] = [];
+    for (let i = 0; i < 4; i++) {
+      playTo(video, video.currentTime + 10);
+      video.dispatchEvent(new Event("seeking"));
+      visited.push(video.currentTime);
+    }
+    expect(visited).toEqual([10, 0, 10, 30]);
+  });
+
+  test("a segment nested in another ends on its own end", () => {
+    const video = fakeVideo(200);
+    const engine = new SegmentEngine(
+      video,
+      config(
+        [
+          { id: "a", startTime: 0, endTime: 100 },
+          { id: "b", startTime: 40, endTime: 50 },
+        ],
+        [{ segmentIds: ["a", "b"] }],
+      ),
+    );
+    engine.start();
+    playTo(video, 100);
+    expect(video.currentTime).toBe(40);
+    playTo(video, 50);
+    expect(video.currentTime).toBe(0);
+  });
+
+  test("a user seek into another segment adopts it", () => {
+    const video = fakeVideo();
+    const engine = new SegmentEngine(
+      video,
+      config(
+        [
+          { id: "a", startTime: 0, endTime: 10 },
+          { id: "b", startTime: 50, endTime: 60 },
+        ],
+        [{ segmentIds: ["a"] }, { segmentIds: ["b"] }],
+      ),
+    );
+    engine.start();
+    seekTo(video, 55);
+    expect(video.currentTime).toBe(55);
+    expect(engine.getCurrentSegment()?.id).toBe("b");
+  });
+
+  test("editing a segment so the playhead falls outside it keeps that segment in view", () => {
+    const video = fakeVideo(200);
+    const segments = [
+      { id: "a", startTime: 0, endTime: 50 },
+      { id: "b", startTime: 100, endTime: 150 },
+    ];
+    const engine = new SegmentEngine(video, config(segments, [{ segmentIds: ["a", "b"] }]));
+    video.currentTime = 120;
+    engine.start();
+    engine.setConfig(config([segments[0], { ...segments[1], endTime: 110 }], [{ segmentIds: ["a", "b"] }]));
+    video.dispatchEvent(new Event("timeupdate"));
+    expect(video.currentTime).toBe(100);
+    expect(engine.getCurrentSegment()?.id).toBe("b");
+  });
+
+  test("a segment inside the last 0.3 s plays instead of seeking every tick", () => {
+    const video = fakeVideo();
+    const engine = new SegmentEngine(video, config([{ id: "a", startTime: 99.8, endTime: 100 }], [{ segmentIds: ["a"] }]));
+    engine.start();
+    expect(video.currentTime).toBe(99.8);
+    playTo(video, 99.9);
+    expect(video.currentTime).toBe(99.9);
+  });
+
+  test("a mid-roll ad in the same video is left alone, and segments resume after it", () => {
+    const video = fakeVideo();
+    let ad = false;
+    const engine = new SegmentEngine(video, config([{ id: "a", startTime: 40, endTime: 60 }], [{ segmentIds: ["a"], playbackRate: 0.5 }]), () => ad);
+    engine.start();
+    playTo(video, 45);
+    ad = true;
+    video.playbackRate = 1;
+    seekTo(video, 3);
+    playTo(video, 20);
+    expect(video.currentTime).toBe(20);
+    expect(video.playbackRate).toBe(1);
+    ad = false;
+    playTo(video, 45);
+    expect(video.currentTime).toBe(45);
+    expect(video.playbackRate).toBe(0.5);
+    playTo(video, 60);
+    expect(video.currentTime).toBe(40);
+  });
+
+  test("a segment starting past the video's end does not seek forever", async () => {
+    const video = fakeVideo(100);
+    let time = 0;
+    let seeks = 0;
+    // Browsers fire seeking for every seek, the engine's own included.
+    Object.defineProperty(video, "currentTime", {
+      configurable: true,
+      get: () => time,
+      set: (t: number) => {
+        time = t;
+        if (++seeks < 50) queueMicrotask(() => video.dispatchEvent(new Event("seeking")));
+      },
+    });
+    const engine = new SegmentEngine(video, config([{ id: "a", startTime: 120, endTime: 140 }], [{ segmentIds: ["a"] }]));
+    engine.start();
+    await new Promise((r) => setTimeout(r, 0));
+    expect(seeks).toBeLessThan(3);
+  });
+
+  test("scrubbing a segment outside the sequence leaves the playhead there", () => {
+    const video = fakeVideo(200);
+    const engine = new SegmentEngine(video, config([{ id: "a", startTime: 10, endTime: 20 }, { id: "b", startTime: 50, endTime: 60 }, { id: "loose", startTime: 30, endTime: 40 }], [{ segmentIds: ["a", "b"] }]));
+    engine.start();
+    seekTo(video, 32);
+    expect(video.currentTime).toBe(32);
+  });
+
+  test("stop leaves a rate the user chose alone", () => {
+    const video = fakeVideo();
+    const engine = new SegmentEngine(video, config([{ id: "a", startTime: 0, endTime: 50 }], [{ segmentIds: ["a"] }]));
+    engine.start();
+    video.playbackRate = 1.5;
+    playTo(video, 5);
+    engine.stop();
+    expect(video.playbackRate).toBe(1.5);
+  });
+
+  test("stop restores the rate the engine replaced", () => {
+    const video = fakeVideo();
+    const engine = new SegmentEngine(video, config([{ id: "a", startTime: 0, endTime: 50 }], [{ segmentIds: ["a"], playbackRate: 0.5 }]));
+    engine.start();
+    playTo(video, 5);
+    expect(video.playbackRate).toBe(0.5);
+    engine.stop();
+    expect(video.playbackRate).toBe(1);
+  });
+});
diff --git a/web-ext/features/segments/engine.ts b/web-ext/features/segments/engine.ts
new file mode 100644
index 00000000..a451a505
--- /dev/null
+++ b/web-ext/features/segments/engine.ts
@@ -0,0 +1,256 @@
+import type { Segment, SegmentConfig, PlayStep, SegmentId } from "./types";
+
+// Decides when to seek and at what rate, and nothing else: no storage, no UI,
+// no DOM beyond the video element. Keep it that way — the panel and markers
+// both drive this class, so anything stateful added here leaks into both.
+
+interface EngineState {
+  stepIndex: number;
+  iterationInStep: number;
+  segmentIndexInStep: number; // step.segmentIds is user-ordered and may repeat an id
+}
+
+function initialState(): EngineState {
+  return { stepIndex: 0, iterationInStep: 0, segmentIndexInStep: 0 };
+}
+
+export class SegmentEngine {
+  private video: HTMLVideoElement;
+  private config: SegmentConfig;
+  private state: EngineState = initialState();
+  private detach: (() => void) | null = null;
+  private originalRate: number | null = null;
+  private appliedRate: number | null = null;
+  private _active = false;
+  private isHeld: () => boolean;
+  // A segment outside the sequence that the user seeked into, being edited.
+  private scrubbing: Segment | null = null;
+
+  // isHeld pauses the engine while the video is not the content, as during a
+  // mid-roll ad, which YouTube plays in this same element on its own clock.
+  constructor(video: HTMLVideoElement, config: SegmentConfig, isHeld: () => boolean = () => false) {
+    this.video = video;
+    this.config = config;
+    this.isHeld = isHeld;
+  }
+
+  start(): void {
+    if (this._active) this.stop();
+    this.state = initialState();
+    this._active = true;
+    this.originalRate = this.video.playbackRate;
+
+    // Never seek when the playhead already sits inside a segment: enabling
+    // segments mid-playback should not jump the video out from under the user.
+    if (!this.adoptSegmentAt(this.video.currentTime)) this.seekToCurrentSegment();
+
+    const onTimeUpdate = () => this.onTimeUpdate();
+    const onSeeking = () => this.onSeeking();
+    this.video.addEventListener("timeupdate", onTimeUpdate);
+    this.video.addEventListener("seeking", onSeeking);
+    this.detach = () => {
+      this.video.removeEventListener("timeupdate", onTimeUpdate);
+      this.video.removeEventListener("seeking", onSeeking);
+    };
+  }
+
+  stop(): void {
+    this.detach?.();
+    this.detach = null;
+    // Only undo a rate the engine set and nobody has changed since, so a speed
+    // the user picked while segments ran survives turning them off.
+    if (this.originalRate !== null && this.appliedRate === this.video.playbackRate) {
+      this.video.playbackRate = this.originalRate;
+    }
+    this.originalRate = null;
+    this.appliedRate = null;
+    this._active = false;
+  }
+
+  isActive(): boolean {
+    return this._active;
+  }
+
+  // Reconciles rather than restarts so that dragging a marker, which swaps the
+  // config on every pointer move, does not restart playback on every frame.
+  setConfig(config: SegmentConfig): void {
+    this.config = config;
+    if (!this._active) {
+      this.state = initialState();
+      return;
+    }
+    // An edit that leaves the playhead outside the segment it was in restarts
+    // that segment, rather than the next tick advancing past what is being edited.
+    const current = this.resolveCurrentSegment();
+    const ct = this.video.currentTime;
+    if (current && ct >= current.startTime && ct <= current.endTime) return;
+    if (this.adoptSegmentAt(ct)) return;
+    if (!current) this.state = initialState();
+    this.seekToCurrentSegment();
+  }
+
+  getCurrentSegment(): Segment | null {
+    return this.resolveCurrentSegment();
+  }
+
+  getSegmentAt(currentTime: number): Segment | null {
+    const segs = this.config.segments;
+    if (segs.length === 0) return null;
+
+    const containing = segs.find(
+      (s) => currentTime >= s.startTime && currentTime <= s.endTime,
+    );
+    if (containing) return containing;
+
+    return segs.reduce((best, seg) => {
+      const mid = (seg.startTime + seg.endTime) / 2;
+      const bestMid = (best.startTime + best.endTime) / 2;
+      return Math.abs(currentTime - mid) < Math.abs(currentTime - bestMid)
+        ? seg
+        : best;
+    });
+  }
+
+  private onTimeUpdate(): void {
+    if (this.isHeld()) return;
+    if (this.scrubbing) {
+      const ct = this.video.currentTime;
+      if (ct >= this.scrubbing.startTime && ct < this.scrubbing.endTime) return;
+      this.scrubbing = null;
+    }
+    // A tick queued before a seek reports the new position before the seeking
+    // event has had a chance to adopt it.
+    if (this.video.seeking) return;
+    const seg = this.resolveCurrentSegment();
+    if (!seg) return;
+
+    const rate = this.getEffectiveRate();
+    if (rate !== null && Math.abs(this.video.playbackRate - rate) > 0.001) {
+      this.video.playbackRate = rate;
+      this.appliedRate = this.video.playbackRate;
+    }
+
+    const ct = this.video.currentTime;
+
+    // 0.3 s short of the true end: seeking into the unmuxed tail of a YouTube
+    // stream can stall playback rather than fire the next timeupdate. A segment
+    // lying wholly in that tail plays to its real end instead.
+    const tail = this.video.duration - 0.3;
+    const safeEnd = tail > seg.startTime ? Math.min(seg.endTime, tail) : seg.endTime;
+
+    if (ct >= safeEnd) {
+      this.advance();
+    } else if (ct < seg.startTime) {
+      this.seekToCurrentSegment();
+    }
+  }
+
+  // Only a seek adopts another segment: during playback, reaching the end of
+  // one segment is where an adjacent or enclosing one starts, and adopting it
+  // there would reset the step's count or loop it forever.
+  private onSeeking(): void {
+    if (this.isHeld()) return;
+    const ct = this.video.currentTime;
+    const contains = (s: Segment) => ct >= s.startTime && ct < s.endTime;
+    this.scrubbing = null;
+    const current = this.resolveCurrentSegment();
+    if (current && contains(current)) return;
+    if (this.adoptSegmentAt(ct)) return;
+    // A segment outside the sequence is one being edited; scrubbing it stays put.
+    this.scrubbing = this.config.segments.find(contains) ?? null;
+    if (this.scrubbing) return;
+    const ahead = [...this.config.segments].sort((a, b) => a.startTime - b.startTime).filter((s) => s.startTime >= ct);
+    for (const segment of ahead) {
+      // The engine's own seek toward a segment past the video's end lands short
+      // of it; seeking there again would never stop.
+      if (segment.id === current?.id) return;
+      if (this.adoptSegment(segment.id)) {
+        this.seekToCurrentSegment();
+        return;
+      }
+    }
+  }
+
+  private advance(): void {
+    const step = this.currentStep();
+    if (!step) return;
+
+    const nextSegIdx = this.state.segmentIndexInStep + 1;
+
+    if (nextSegIdx < step.segmentIds.length) {
+      this.state.segmentIndexInStep = nextSegIdx;
+      this.seekToCurrentSegment();
+      return;
+    }
+
+    const nextIteration = this.state.iterationInStep + 1;
+    this.state.segmentIndexInStep = 0;
+
+    // count 0 is the stored encoding for "loop forever".
+    if (step.count === 0 || nextIteration < step.count) {
+      this.state.iterationInStep = nextIteration;
+      this.seekToCurrentSegment();
+      return;
+    }
+
+    const nextStepIdx =
+      (this.state.stepIndex + 1) % this.config.sequence.length;
+    this.state.stepIndex = nextStepIdx;
+    this.state.iterationInStep = 0;
+    this.state.segmentIndexInStep = 0;
+    this.seekToCurrentSegment();
+  }
+
+  private seekToCurrentSegment(): void {
+    if (this.isHeld()) return;
+    const seg = this.resolveCurrentSegment();
+    if (seg && this.video.duration > 0) {
+      const seekTo = Math.max(0, Math.min(seg.startTime, this.video.duration));
+      this.video.currentTime = seekTo;
+    }
+  }
+
+  // Half-open, so a boundary shared by two segments belongs to the later one.
+  private adoptSegmentAt(time: number): boolean {
+    return this.config.segments.some((s) => time >= s.startTime && time < s.endTime && this.adoptSegment(s.id));
+  }
+
+  // The current step is tried first so moving within it keeps its iteration.
+  private adoptSegment(segId: SegmentId): boolean {
+    const { stepIndex, iterationInStep } = this.state;
+    const order = [stepIndex, ...this.config.sequence.map((_, i) => i).filter((i) => i !== stepIndex)];
+    for (const si of order) {
+      const segIdx = this.config.sequence[si]?.segmentIds.indexOf(segId) ?? -1;
+      if (segIdx !== -1) {
+        this.state = { stepIndex: si, iterationInStep: si === stepIndex ? iterationInStep : 0, segmentIndexInStep: segIdx };
+        return true;
+      }
+    }
+    return false;
+  }
+
+  private resolveCurrentSegment(): Segment | null {
+    const step = this.currentStep();
+    if (!step || step.segmentIds.length === 0) return null;
+    const segId = step.segmentIds[this.state.segmentIndexInStep];
+    return this.config.segments.find((s) => s.id === segId) ?? null;
+  }
+
+  private currentStep(): PlayStep | null {
+    return this.config.sequence[this.state.stepIndex] ?? null;
+  }
+
+  // null means "no override" — the caller leaves the user's rate untouched.
+  private getEffectiveRate(): number | null {
+    const step = this.currentStep();
+    if (!step) return null;
+    if (step.perIterationRates.length > 0) {
+      const idx = Math.min(
+        this.state.iterationInStep,
+        step.perIterationRates.length - 1,
+      );
+      return step.perIterationRates[idx];
+    }
+    return step.playbackRate;
+  }
+}
diff --git a/web-ext/features/segments/factories.ts b/web-ext/features/segments/factories.ts
new file mode 100644
index 00000000..8a5366f5
--- /dev/null
+++ b/web-ext/features/segments/factories.ts
@@ -0,0 +1,138 @@
+import type { Segment, SegmentConfig, PlayStep } from "./types";
+
+function randomId(): string {
+  return crypto.randomUUID();
+}
+
+export function createFreshConfig(videoDuration: number): SegmentConfig {
+  const segId = randomId();
+  const stepId = randomId();
+
+  const segment: Segment = {
+    id: segId,
+    startTime: 0,
+    endTime: videoDuration > 0 ? videoDuration : 0,
+  };
+
+  const step: PlayStep = {
+    id: stepId,
+    segmentIds: [segId],
+    count: 0,
+    playbackRate: null,
+    perIterationRates: [],
+  };
+
+  const now = Date.now();
+  return {
+    id: randomId(),
+    label: "Default",
+    segments: [segment],
+    sequence: [step],
+    shortcutKey: "",
+    createdAt: now,
+    updatedAt: now,
+  };
+}
+
+
+export function addSegmentToConfig(
+  config: SegmentConfig,
+  startTime: number,
+  endTime: number,
+  label?: string,
+): SegmentConfig {
+  const newSeg: Segment = { id: randomId(), startTime, endTime, label };
+
+  let newSequence: PlayStep[];
+  if (config.sequence.length === 0) {
+    const step: PlayStep = {
+      id: randomId(),
+      segmentIds: [newSeg.id],
+      count: 0,
+      playbackRate: null,
+      perIterationRates: [],
+    };
+    newSequence = [step];
+  } else {
+    // Lands in the first step by default; rearranging is left to the user.
+    newSequence = config.sequence.map((step, i) =>
+      i === 0 ? { ...step, segmentIds: [...step.segmentIds, newSeg.id] } : step,
+    );
+  }
+
+  return {
+    ...config,
+    segments: [...config.segments, newSeg],
+    sequence: newSequence,
+    updatedAt: Date.now(),
+  };
+}
+
+// Also drops any step left with no segments, so the sequence never contains a
+// step the engine would spin on forever.
+export function removeSegmentFromConfig(
+  config: SegmentConfig,
+  segmentId: string,
+): SegmentConfig {
+  const newSegments = config.segments.filter((s) => s.id !== segmentId);
+  const newSequence = config.sequence
+    .map((step) => ({
+      ...step,
+      segmentIds: step.segmentIds.filter((id) => id !== segmentId),
+    }))
+    .filter((step) => step.segmentIds.length > 0);
+
+  return {
+    ...config,
+    segments: newSegments,
+    sequence: newSequence,
+    updatedAt: Date.now(),
+  };
+}
+
+export function updateSegmentTimes(
+  config: SegmentConfig,
+  segmentId: string,
+  startTime: number,
+  endTime: number,
+): SegmentConfig {
+  return {
+    ...config,
+    segments: config.segments.map((s) =>
+      s.id === segmentId ? { ...s, startTime, endTime } : s,
+    ),
+    updatedAt: Date.now(),
+  };
+}
+
+export function generateConfigLabel(existingCount: number): string {
+  return `Segment Config ${existingCount + 1}`;
+}
+
+// Returns null when the split would leave either half under 0.1 s, which is the
+// same floor the markers enforce while dragging.
+export function splitSegmentAtTime(
+  config: SegmentConfig,
+  segmentId: string,
+  splitTime: number,
+): SegmentConfig | null {
+  const seg = config.segments.find((s) => s.id === segmentId);
+  if (!seg) return null;
+  if (splitTime <= seg.startTime + 0.1 || splitTime >= seg.endTime - 0.1) return null;
+
+  const newSegId = randomId();
+  const segA: Segment = { ...seg, endTime: splitTime };
+  const segB: Segment = { id: newSegId, startTime: splitTime, endTime: seg.endTime };
+
+  const newSegments = config.segments.map((s) => (s.id === segmentId ? segA : s)).concat(segB);
+
+  const newSequence = config.sequence.map((step) => {
+    const idx = step.segmentIds.indexOf(segmentId);
+    if (idx < 0) return step;
+    const ids = [...step.segmentIds];
+    ids.splice(idx + 1, 0, newSegId);
+    return { ...step, segmentIds: ids };
+  });
+
+  return { ...config, segments: newSegments, sequence: newSequence, updatedAt: Date.now() };
+}
diff --git a/web-ext/features/segments/format.ts b/web-ext/features/segments/format.ts
new file mode 100644
index 00000000..151b6d15
--- /dev/null
+++ b/web-ext/features/segments/format.ts
@@ -0,0 +1,7 @@
+// The first segment takes YouTube's own red (its playhead dot and played fill)
+// so a single loop reads as part of the player.
+const SEGMENT_COLORS = ["#ff0033", "#3ea6ff", "#f5c518", "#4caf50", "#ab47bc", "#00bcd4", "#ff9800"];
+
+export function colorForIndex(i: number): string {
+  return SEGMENT_COLORS[i % SEGMENT_COLORS.length];
+}
diff --git a/web-ext/features/segments/index.test.ts b/web-ext/features/segments/index.test.ts
new file mode 100644
index 00000000..82fc98c1
--- /dev/null
+++ b/web-ext/features/segments/index.test.ts
@@ -0,0 +1,160 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { createSegments } from "./index";
+import { memorySegmentStorage, openVideoSegments, type SegmentStorage } from "./store";
+import { createFreshConfig } from "./factories";
+
+const page = `
+  <div id="movie_player">
+    <video></video>
+    <div class="ytp-right-controls"><button class="ytp-settings-button"></button></div>
+    <div class="ytp-progress-bar-container"></div>
+  </div>
+  <div id="above-the-fold"><h1>Title</h1></div>`;
+
+const route = { name: "watch", videoId: "v1", playlistId: null } as const;
+const press = (key: string, init: KeyboardEventInit = {}) => document.body.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, ...init }));
+const tick = () => new Promise((r) => setTimeout(r, 10));
+const button = () => document.getElementById("tppng-segment-button")!;
+const panel = () => document.getElementById("tppng-segment-panel")!.shadowRoot!;
+const markers = () => document.getElementById("tppng-segment-markers")!.shadowRoot!.querySelectorAll(".marker");
+
+let storage: SegmentStorage;
+let unmount: (() => void) | undefined | void;
+
+beforeEach(async () => {
+  await chrome.storage.sync.clear();
+  storage = memorySegmentStorage();
+  document.body.innerHTML = page;
+  const video = document.querySelector("video")!;
+  Object.defineProperty(video, "duration", { value: 200, configurable: true });
+  Object.defineProperty(video, "readyState", { value: 1, configurable: true });
+});
+afterEach(() => {
+  unmount?.();
+  unmount = undefined;
+  document.body.innerHTML = "";
+});
+
+const mountOn = async () => {
+  unmount = await createSegments({ storage }).mount({ signal: new AbortController().signal, route });
+  await tick();
+};
+
+describe("segments", () => {
+  test("stays off, keys included, when switched off", async () => {
+    await chrome.storage.sync.set({ "settings:segments": { enabled: false } });
+    await mountOn();
+    press("z");
+    await tick();
+    expect(document.getElementById("tppng-segment-button")).toBeNull();
+    expect(document.getElementById("tppng-segment-panel")).toBeNull();
+  });
+
+  test("mounts a control-bar button, and the toggle key shows the panel and markers", async () => {
+    await mountOn();
+    expect(button().getAttribute("aria-pressed")).toBe("false");
+    expect(panel().querySelector(".panel")).toBeNull();
+
+    press("z");
+    await tick();
+    expect(button().getAttribute("aria-pressed")).toBe("true");
+    expect(panel().querySelector(".title")?.textContent).toBe("Segments");
+    expect(panel().querySelector(".range")?.textContent).toBe("0:00 → 3:20");
+    expect(markers()).toHaveLength(2);
+
+    press("z");
+    await tick();
+    expect(panel().querySelector(".panel")).toBeNull();
+    expect(markers()).toHaveLength(0);
+  });
+
+  test("the button toggles too, and the panel can add a segment at the playhead", async () => {
+    await mountOn();
+    button().click();
+    await tick();
+    document.querySelector("video")!.currentTime = 100;
+    [...panel().querySelectorAll("button")].find((b) => b.textContent === "+ Add Segment")!.click();
+    await tick();
+    expect([...panel().querySelectorAll(".range")].map((r) => r.textContent)).toEqual(["0:00 → 1:40", "1:40 → 3:20"]);
+    expect(markers()).toHaveLength(4);
+  });
+
+  test("adding a segment on a slate that fills the video splits it instead of nesting one inside", async () => {
+    await mountOn();
+    button().click();
+    await tick();
+    [...panel().querySelectorAll("button")].find((b) => b.textContent === "+ Add Segment")!.click();
+    await tick();
+    expect([...panel().querySelectorAll(".range")].map((r) => r.textContent)).toEqual(["0:00 → 1:40", "1:40 → 3:20"]);
+  });
+
+  test("the config name field keeps what is typed", async () => {
+    await mountOn();
+    button().click();
+    await tick();
+    [...panel().querySelectorAll("button")].find((b) => b.textContent === "Save ▾")!.click();
+    await tick();
+    [...panel().querySelectorAll("button")].find((b) => b.textContent === "Save as Named Config…")!.click();
+    await tick();
+    const input = panel().querySelector<HTMLInputElement>("input.text")!;
+    expect([input.selectionStart, input.selectionEnd]).toEqual([0, input.value.length]);
+    input.value = "Verse";
+    input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    await tick();
+    expect(input.selectionStart).toBe(input.selectionEnd);
+  });
+
+  test("auto-load waits out a pre-roll ad rather than clamping to its length", async () => {
+    const store = openVideoSegments(storage, "v1");
+    const config = { ...createFreshConfig(200), label: "Intro" };
+    await store.saveConfig(config);
+    await store.setDefaultConfig(config.id);
+    await chrome.storage.sync.set({ "settings:segments": { autoLoad: "default" } });
+    const player = document.getElementById("movie_player")!;
+    player.className = "html5-video-player ad-showing";
+    const video = document.querySelector("video")!;
+    Object.defineProperty(video, "duration", { value: 15, configurable: true });
+    await mountOn();
+    expect(button().getAttribute("aria-pressed")).toBe("false");
+
+    player.classList.remove("ad-showing");
+    Object.defineProperty(video, "duration", { value: 200, configurable: true });
+    video.dispatchEvent(new Event("timeupdate"));
+    await tick();
+    expect(button().getAttribute("aria-pressed")).toBe("true");
+    expect(panel().querySelector(".range")?.textContent).toBe("0:00 → 3:20");
+  });
+
+  test("auto-load restores the default config on mount", async () => {
+    const store = openVideoSegments(storage, "v1");
+    const config = { ...createFreshConfig(200), label: "Intro" };
+    await store.saveConfig(config);
+    await store.setDefaultConfig(config.id);
+    await chrome.storage.sync.set({ "settings:segments": { autoLoad: "default" } });
+    await mountOn();
+    expect(button().getAttribute("aria-pressed")).toBe("true");
+    expect(panel().querySelector(".chip")?.textContent).toContain("Intro");
+  });
+
+  test("a saved config's own shortcut loads it", async () => {
+    const store = openVideoSegments(storage, "v1");
+    await store.saveConfig({ ...createFreshConfig(200), label: "Solo", shortcutKey: "Ctrl+1" });
+    await mountOn();
+    press("1", { ctrlKey: true });
+    await tick();
+    expect(button().getAttribute("aria-pressed")).toBe("true");
+    expect(panel().querySelector(".chip")?.textContent).toContain("Solo");
+  });
+
+  test("unmount removes everything it added", async () => {
+    await mountOn();
+    press("z");
+    await tick();
+    unmount?.();
+    unmount = undefined;
+    expect(document.getElementById("tppng-segment-button")).toBeNull();
+    expect(document.getElementById("tppng-segment-panel")).toBeNull();
+    expect(document.getElementById("tppng-segment-markers")).toBeNull();
+    expect(document.querySelector<HTMLElement>(".ytp-progress-bar-container")!.style.overflow).toBe("");
+  });
+});
diff --git a/web-ext/features/segments/index.tsx b/web-ext/features/segments/index.tsx
new file mode 100644
index 00000000..582701b8
--- /dev/null
+++ b/web-ext/features/segments/index.tsx
@@ -0,0 +1,117 @@
+import type { Feature } from "@/kernel/features";
+import { bindKeys } from "@/kernel/keys";
+import { mount, mountInline } from "@/kernel/dom/mount";
+import { setCapabilityStatus } from "@/kernel/dom/capabilities";
+import { showToast } from "@/kernel/dom/toast";
+import { isTypingTarget, matchesBinding } from "@/kernel/keybinding";
+import { resolveBelowPlayer, resolveProgressBar, resolveRightControls, resolveVideo } from "@/youtube/player";
+import { Markers } from "./Markers";
+import { Panel } from "./panel/Panel";
+import { SegmentButton, segmentButtonHost, setSegmentButtonState } from "./SegmentButton";
+import { segmentsKeys } from "./keys";
+import { SegmentSession } from "./session";
+import { segmentsSettings } from "./settings";
+import { indexedDbSegmentStorage, openVideoSegments, type SegmentStorage } from "./store";
+
+export interface SegmentsDeps {
+  storage: SegmentStorage;
+}
+
+export function createSegments({ storage }: SegmentsDeps): Feature {
+  return {
+    id: "segments",
+    routes: ["watch"],
+    async mount({ route }) {
+      if (route.name !== "watch" || !route.videoId) return;
+      const settings = await segmentsSettings.get();
+      if (!settings.enabled) return;
+      const [player, controls, bar, below] = await Promise.all([resolveVideo(), resolveRightControls(), resolveProgressBar(), resolveBelowPlayer()]);
+      void setCapabilityStatus("watch.player", "watch", player);
+      void setCapabilityStatus("watch.rightControls", "watch", controls);
+      void setCapabilityStatus("watch.progressBar", "watch", bar);
+      if (!player.resolved) return;
+      const video = player.element as HTMLVideoElement;
+
+      const session = new SegmentSession({ video, store: openVideoSegments(storage, route.videoId), settings, toast: showToast });
+      await session.init();
+
+      const button = controls.resolved ? mountInline(segmentButtonHost(), controls.element, <SegmentButton active={false} />, "prepend") : undefined;
+      if (button) button.host.onclick = () => void session.toggle();
+      // The handles rest above the bar, which YouTube would otherwise clip.
+      const track = bar.element as HTMLElement | null;
+      if (track) track.style.overflow = "visible";
+      const markers = track ? mount("tppng-segment-markers", track, null) : undefined;
+      const panel = below.resolved ? mount("tppng-segment-panel", below.element, null, "prepend") : undefined;
+      const playhead = () => ({ time: video.currentTime, duration: video.duration || 0 });
+
+      const draw = () => {
+        const { active, config } = session.state;
+        if (button) {
+          button.update(<SegmentButton active={active} />);
+          setSegmentButtonState(button.host as HTMLButtonElement, active, config && config.label !== "Default" ? config.label : null);
+        }
+        markers?.update(
+          <Markers
+            segments={active && config ? config.segments : []}
+            duration={video.duration || 0}
+            track={track!}
+            onPreview={(segments) => session.preview(segments)}
+            onSeek={(time) => (video.currentTime = time)}
+            onCommit={() => session.commitPreview()}
+            onMerge={(keep, remove) => session.merge(keep, remove)}
+          />,
+        );
+        panel?.update(<Panel session={session} playhead={playhead} />);
+      };
+      const unsubscribe = session.subscribe(draw);
+      draw();
+
+      // Retried as playback goes on, because a pre-roll ad loads its own
+      // metadata into the video first and holds it until the ad is over.
+      const restore = () => {
+        if (!session.ready) return;
+        video.removeEventListener("loadedmetadata", restore);
+        video.removeEventListener("timeupdate", restore);
+        void session.restore();
+      };
+      video.addEventListener("loadedmetadata", restore);
+      video.addEventListener("timeupdate", restore);
+      restore();
+
+      const unbindKeys = bindKeys(segmentsKeys, {
+        toggle: () => void session.toggle(),
+        fresh: () => session.fresh(),
+        setStart: () => session.setStart(),
+        setEnd: () => session.setEnd(),
+        nudgeStartBackward: () => session.nudgeMarker("start", "backward"),
+        nudgeStartForward: () => session.nudgeMarker("start", "forward"),
+        nudgeEndBackward: () => session.nudgeMarker("end", "backward"),
+        nudgeEndForward: () => session.nudgeMarker("end", "forward"),
+        save: () => void session.save(),
+      });
+      // Saved configs carry their own shortcut keys, which are per video and so
+      // cannot live in the static key registry.
+      const onSavedShortcut = (event: KeyboardEvent) => {
+        if (isTypingTarget(event.target)) return;
+        const hit = session.state.saved.find((c) => c.shortcutKey && matchesBinding(event, c.shortcutKey));
+        if (hit) session.load(hit);
+      };
+      document.addEventListener("keydown", onSavedShortcut);
+
+      return () => {
+        document.removeEventListener("keydown", onSavedShortcut);
+        video.removeEventListener("loadedmetadata", restore);
+        video.removeEventListener("timeupdate", restore);
+        unbindKeys();
+        unsubscribe();
+        session.dispose();
+        button?.unmount();
+        markers?.unmount();
+        panel?.unmount();
+        if (track) track.style.overflow = "";
+      };
+    },
+  };
+}
+
+export const segments = createSegments({ storage: indexedDbSegmentStorage });
diff --git a/web-ext/features/segments/keys.ts b/web-ext/features/segments/keys.ts
new file mode 100644
index 00000000..b7969b80
--- /dev/null
+++ b/web-ext/features/segments/keys.ts
@@ -0,0 +1,17 @@
+import { defineKeys } from "@/kernel/keys";
+
+export const segmentsKeys = defineKeys({
+  id: "segments",
+  title: "Segments",
+  keys: {
+    toggle: { label: "Toggle segments", description: "Load the last-used segments, or turn them off.", defaultBinding: "Z" },
+    fresh: { label: "Fresh slate", description: "Start over with one segment spanning the video.", defaultBinding: "Shift+Z" },
+    setStart: { label: "Set segment start", description: "Move the current segment's start to the playhead.", defaultBinding: "Q" },
+    setEnd: { label: "Set segment end", description: "Move the current segment's end to the playhead.", defaultBinding: "E" },
+    nudgeStartBackward: { label: "Nudge start backward", defaultBinding: "Shift+Q" },
+    nudgeStartForward: { label: "Nudge start forward", defaultBinding: "" },
+    nudgeEndBackward: { label: "Nudge end backward", defaultBinding: "" },
+    nudgeEndForward: { label: "Nudge end forward", defaultBinding: "Shift+E" },
+    save: { label: "Save segments", description: "Save as this video's default, or clear the last-used slate when off.", defaultBinding: "" },
+  },
+});
diff --git a/web-ext/features/segments/panel/ConfigManager.tsx b/web-ext/features/segments/panel/ConfigManager.tsx
new file mode 100644
index 00000000..2ad7969f
--- /dev/null
+++ b/web-ext/features/segments/panel/ConfigManager.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import type { SegmentConfig } from "../types";
+
+export interface ConfigManagerProps {
+  current: SegmentConfig;
+  saved: SegmentConfig[];
+  defaultId: string | null;
+  onBack: () => void;
+  onLoad: (config: SegmentConfig) => void;
+  onRename: (configId: string, label: string) => void;
+  onShortcut: (configId: string, key: string) => void;
+  onSetDefault: (configId: string) => void;
+  onDelete: (configId: string) => void;
+}
+
+export function ConfigManager({ current, saved, defaultId, onBack, onLoad, onRename, onShortcut, onSetDefault, onDelete }: ConfigManagerProps) {
+  return (
+    <div>
+      <div class="row header">
+        <button class="btn" title="Back to editor" onClick={onBack}>← Back</button>
+        <span class="title">Saved Configs</span>
+      </div>
+      {saved.length === 0 ? (
+        <div class="empty" style="text-align:center;padding:16px">No saved configs yet. Use Save ▾ → Save as Named Config to create one.</div>
+      ) : (
+        <div class="stack">
+          {saved.map((config) => (
+            <SavedRow
+              key={config.id}
+              config={config}
+              isDefault={config.id === defaultId}
+              isLoaded={config.id === current.id}
+              onLoad={() => onLoad(config)}
+              onRename={(label) => onRename(config.id, label)}
+              onShortcut={(key) => onShortcut(config.id, key)}
+              onSetDefault={() => onSetDefault(config.id)}
+              onDelete={() => onDelete(config.id)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SavedRowProps {
+  config: SegmentConfig;
+  isDefault: boolean;
+  isLoaded: boolean;
+  onLoad: () => void;
+  onRename: (label: string) => void;
+  onShortcut: (key: string) => void;
+  onSetDefault: () => void;
+  onDelete: () => void;
+}
+
+function SavedRow({ config, isDefault, isLoaded, onLoad, onRename, onShortcut, onSetDefault, onDelete }: SavedRowProps) {
+  const [draft, setDraft] = useState<string | null>(null);
+  const draftInput = useRef<HTMLInputElement>(null);
+  const isRenaming = draft !== null;
+  useEffect(() => {
+    if (isRenaming) draftInput.current?.select();
+  }, [isRenaming]);
+
+  if (draft !== null) {
+    const commit = () => {
+      if (draft.trim()) onRename(draft.trim());
+      setDraft(null);
+    };
+    return (
+      <div class="row">
+        <input
+          class="input text"
+          value={draft}
+          ref={draftInput}
+          onInput={(e) => setDraft(e.currentTarget.value)}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter") commit();
+            if (e.key === "Escape") setDraft(null);
+          }}
+        />
+        <button class="btn accent" onClick={commit}>OK</button>
+        <button class="btn" onClick={() => setDraft(null)}>Cancel</button>
+      </div>
+    );
+  }
+
+  return (
+    <div class={`saved ${isLoaded ? "loaded" : ""}`}>
+      <button class="name" title="Load this config" onClick={onLoad}>{config.label}</button>
+      {isDefault && <span class="badge">default</span>}
+      <input
+        class="input short"
+        type="text"
+        value={config.shortcutKey}
+        placeholder="shortcut"
+        title="Keyboard shortcut to load this config (e.g. Ctrl+1)"
+        onBlur={(e) => onShortcut(e.currentTarget.value.trim())}
+        onKeyDown={(e) => e.stopPropagation()}
+      />
+      {!isDefault && <button class="btn tiny" title="Set as default config" onClick={onSetDefault}>★</button>}
+      <button class="btn tiny" title="Rename" onClick={() => setDraft(config.label)}>✎</button>
+      <button class="btn tiny" title="Delete config" onClick={onDelete}>✕</button>
+    </div>
+  );
+}
diff --git a/web-ext/features/segments/panel/Header.tsx b/web-ext/features/segments/panel/Header.tsx
new file mode 100644
index 00000000..abca09ac
--- /dev/null
+++ b/web-ext/features/segments/panel/Header.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { generateConfigLabel } from "../factories";
+import type { SegmentAutoLoadPin, SegmentConfig } from "../types";
+import { Menu } from "./Menu";
+
+export interface HeaderProps {
+  config: SegmentConfig;
+  saved: SegmentConfig[];
+  pin: SegmentAutoLoadPin;
+  collapsed: boolean;
+  onLoad: (config: SegmentConfig) => void;
+  onPin: (pin: SegmentAutoLoadPin) => void;
+  onSaveDefault: () => void;
+  onSaveNamed: (label: string) => void;
+  onManage: () => void;
+  onCollapse: () => void;
+}
+
+const PIN_OPTIONS: ReadonlyArray<[Exclude<SegmentAutoLoadPin, { configId: string }>, string, string]> = [
+  [null, "○", "Use global setting"],
+  ["off", "⊗", "Always off for this video"],
+  ["last-used", "↺", "Restore last-used"],
+  ["default", "★", "Restore default saved config"],
+];
+
+function describePin(pin: SegmentAutoLoadPin): { icon: string; title: string } {
+  const option = PIN_OPTIONS.find(([value]) => value === pin);
+  return option ? { icon: option[1], title: `Auto-load: ${option[2].toLowerCase()}` } : { icon: "📌", title: "Auto-load pin" };
+}
+
+export function Header({ config, saved, pin, collapsed, onLoad, onPin, onSaveDefault, onSaveNamed, onManage, onCollapse }: HeaderProps) {
+  const [naming, setNaming] = useState<string | null>(null);
+  const nameInput = useRef<HTMLInputElement>(null);
+  const isNaming = naming !== null;
+  useEffect(() => {
+    if (isNaming) nameInput.current?.select();
+  }, [isNaming]);
+  const pinInfo = describePin(pin);
+
+  return (
+    <>
+      <div class="row header">
+        <span class="title">Segments</span>
+        <Menu triggerClass="btn chip" title="Switch saved config" trigger={<>{config.label} <span style="font-size:10px;opacity:.7">▾</span></>}>
+          {(close) =>
+            saved.length === 0 ? (
+              <div class="empty">No saved configs</div>
+            ) : (
+              saved.map((s) => (
+                <button class={`item ${s.id === config.id ? "active" : ""}`} onClick={() => (close(), onLoad(s))}>
+                  {s.id === config.id ? "✓ " : ""}{s.label}
+                </button>
+              ))
+            )
+          }
+        </Menu>
+        <div class="grow" />
+        <Menu triggerClass={`btn tiny ${pin !== null ? "active" : ""}`} title={`${pinInfo.title} — click to change`} trigger={pinInfo.icon} align="right">
+          {(close) => (
+            <>
+              <div class="hint">Auto-load on page open</div>
+              {PIN_OPTIONS.map(([value, icon, label]) => (
+                <button class={`item ${pin === value ? "active" : ""}`} onClick={() => (close(), onPin(value))}>
+                  {icon} {label}
+                </button>
+              ))}
+              {saved.length > 0 && (
+                <div class="divider">
+                  {saved.map((s) => (
+                    <button class={`item muted ${typeof pin === "object" && pin?.configId === s.id ? "active" : ""}`} onClick={() => (close(), onPin({ configId: s.id }))}>
+                      📌 {s.label}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+        </Menu>
+        <Menu triggerClass="btn accent" title="Save options" trigger="Save ▾" align="right">
+          {(close) => (
+            <>
+              <button class="item" onClick={() => (close(), onSaveDefault())}>Save to Default Slot</button>
+              <button class="item" onClick={() => (close(), setNaming(generateConfigLabel(saved.length)))}>Save as Named Config…</button>
+            </>
+          )}
+        </Menu>
+        <button class="btn" title="Manage saved configs" onClick={onManage}>☰</button>
+        <button class="btn" title={collapsed ? "Expand panel" : "Collapse panel"} onClick={onCollapse}>{collapsed ? "+" : "−"}</button>
+      </div>
+      {naming !== null && (
+        <div class="row" style="padding:6px 0;margin-bottom:4px">
+          <input
+            class="input text"
+            value={naming}
+            placeholder="Config name…"
+            ref={nameInput}
+            onInput={(e) => setNaming(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+              if (e.key === "Enter") (onSaveNamed(naming), setNaming(null));
+              if (e.key === "Escape") setNaming(null);
+            }}
+          />
+          <button class="btn accent" onClick={() => (onSaveNamed(naming), setNaming(null))}>Save</button>
+          <button class="btn" onClick={() => setNaming(null)}>Cancel</button>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/web-ext/features/segments/panel/Menu.tsx b/web-ext/features/segments/panel/Menu.tsx
new file mode 100644
index 00000000..861d057f
--- /dev/null
+++ b/web-ext/features/segments/panel/Menu.tsx
@@ -0,0 +1,36 @@
+import type { ComponentChildren } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+
+export interface MenuProps {
+  trigger: ComponentChildren;
+  triggerClass?: string;
+  title?: string;
+  align?: "left" | "right";
+  children: ComponentChildren | ((close: () => void) => ComponentChildren);
+}
+
+// A dropdown that closes on any click outside it, including clicks on the page
+// beyond the shadow root, which composedPath still reports.
+export function Menu({ trigger, triggerClass = "btn", title, align = "left", children }: MenuProps) {
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e: Event) => {
+      if (!e.composedPath().includes(root.current!)) setOpen(false);
+    };
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, [open]);
+
+  const close = () => setOpen(false);
+  return (
+    <div class="dropdown" ref={root}>
+      <button class={triggerClass} title={title} onClick={() => setOpen((o) => !o)}>
+        {trigger}
+      </button>
+      {open && <div class={`menu ${align}`}>{typeof children === "function" ? children(close) : children}</div>}
+    </div>
+  );
+}
diff --git a/web-ext/features/segments/panel/Panel.tsx b/web-ext/features/segments/panel/Panel.tsx
new file mode 100644
index 00000000..f58560c3
--- /dev/null
+++ b/web-ext/features/segments/panel/Panel.tsx
@@ -0,0 +1,112 @@
+import { useState } from "preact/hooks";
+import { addSegmentToConfig, removeSegmentFromConfig, splitSegmentAtTime } from "../factories";
+import type { SegmentSession } from "../session";
+import type { PlayStep, Segment, SegmentConfig } from "../types";
+import { ConfigManager } from "./ConfigManager";
+import { Header } from "./Header";
+import { SegmentList } from "./SegmentList";
+import { SequenceEditor, type StepActions } from "./SequenceEditor";
+import { panelStyle } from "./styles";
+
+export interface PanelProps {
+  session: SegmentSession;
+  playhead: () => { time: number; duration: number };
+}
+
+// Splits the segment under the playhead when there is one, else appends a
+// short segment after the last, else halves the last: the markers clamp each
+// segment against its neighbours and assume none overlap.
+function addSegment(config: SegmentConfig, time: number, duration: number): SegmentConfig {
+  const sorted = [...config.segments].sort((a, b) => a.startTime - b.startTime);
+  const under = sorted.find((s) => time > s.startTime + 0.1 && time < s.endTime - 0.1);
+  const split = under ? splitSegmentAtTime(config, under.id, time) : null;
+  if (split) return split;
+  const last = sorted.reduce<Segment | undefined>((latest, s) => (latest && latest.endTime >= s.endTime ? latest : s), undefined);
+  const start = last ? last.endTime : 0;
+  if (last && duration - start < 1) return splitSegmentAtTime(config, last.id, (last.startTime + last.endTime) / 2) ?? config;
+  const end = Math.min(start + Math.min(30, (duration - start) * 0.5), duration);
+  return addSegmentToConfig(config, start, Math.min(duration, Math.max(start + 1, end)));
+}
+
+export function Panel({ session, playhead }: PanelProps) {
+  const { state } = session;
+  const [view, setView] = useState<"main" | "manage">("main");
+  const [collapsed, setCollapsed] = useState(false);
+  if (!state.active || !state.config) return <style>{panelStyle}</style>;
+  const config = state.config;
+
+  const updateStep = (stepId: string, change: (step: PlayStep) => PlayStep) =>
+    session.mutate((c) => ({ ...c, sequence: c.sequence.map((s) => (s.id === stepId ? change(s) : s)), updatedAt: Date.now() }));
+
+  const steps: StepActions = {
+    addStep: () => {
+      const first = config.segments[0]?.id;
+      if (!first) return;
+      session.mutate((c) => ({ ...c, sequence: [...c.sequence, { id: crypto.randomUUID(), segmentIds: [first], count: 1, playbackRate: null, perIterationRates: [] }], updatedAt: Date.now() }));
+    },
+    removeStep: (stepId) => session.mutate((c) => (c.sequence.length <= 1 ? c : { ...c, sequence: c.sequence.filter((s) => s.id !== stepId), updatedAt: Date.now() })),
+    addToStep: (stepId, segmentId) => updateStep(stepId, (s) => ({ ...s, segmentIds: [...s.segmentIds, segmentId] })),
+    removeFromStep: (stepId, index) => updateStep(stepId, (s) => (s.segmentIds.length <= 1 ? s : { ...s, segmentIds: s.segmentIds.filter((_, i) => i !== index) })),
+    reorder: (stepId, from, to) =>
+      updateStep(stepId, (s) => {
+        const ids = [...s.segmentIds];
+        const [moved] = ids.splice(from, 1);
+        ids.splice(to, 0, moved);
+        return { ...s, segmentIds: ids };
+      }),
+    setCount: (stepId, count) => updateStep(stepId, (s) => ({ ...s, count })),
+    setRate: (stepId, playbackRate) => updateStep(stepId, (s) => ({ ...s, playbackRate })),
+    setPerIterationRates: (stepId, perIterationRates) => updateStep(stepId, (s) => ({ ...s, perIterationRates })),
+  };
+
+  return (
+    <>
+      <style>{panelStyle}</style>
+      <div class="panel">
+        {view === "manage" ? (
+          <ConfigManager
+            current={config}
+            saved={state.saved}
+            defaultId={state.defaultId}
+            onBack={() => setView("main")}
+            onLoad={(c) => (setView("main"), session.load(c))}
+            onRename={(id, label) => void session.updateSaved(id, { label })}
+            onShortcut={(id, shortcutKey) => void session.updateSaved(id, { shortcutKey })}
+            onSetDefault={(id) => void session.setDefault(id)}
+            onDelete={(id) => void session.deleteSaved(id)}
+          />
+        ) : (
+          <>
+            <Header
+              config={config}
+              saved={state.saved}
+              pin={state.pin}
+              collapsed={collapsed}
+              onLoad={(c) => session.load(c)}
+              onPin={(pin) => void session.setPin(pin)}
+              onSaveDefault={() => void session.saveDefault()}
+              onSaveNamed={(label) => void session.saveNamed(label)}
+              onManage={() => setView("manage")}
+              onCollapse={() => setCollapsed((c) => !c)}
+            />
+            {!collapsed && (
+              <>
+                <SegmentList
+                  config={config}
+                  onAdd={() => {
+                    const { time, duration } = playhead();
+                    session.mutate((c) => addSegment(c, time, duration || 100));
+                  }}
+                  onRemove={(id) => session.mutate((c) => removeSegmentFromConfig(c, id))}
+                  onCount={steps.setCount}
+                  onRate={steps.setRate}
+                />
+                <SequenceEditor config={config} actions={steps} />
+              </>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/web-ext/features/segments/panel/SegmentList.tsx b/web-ext/features/segments/panel/SegmentList.tsx
new file mode 100644
index 00000000..084f026f
--- /dev/null
+++ b/web-ext/features/segments/panel/SegmentList.tsx
@@ -0,0 +1,56 @@
+import { formatClock } from "@/lib/duration";
+import { colorForIndex } from "../format";
+import type { SegmentConfig } from "../types";
+
+export interface SegmentListProps {
+  config: SegmentConfig;
+  onAdd: () => void;
+  onRemove: (segmentId: string) => void;
+  onCount: (stepId: string, count: number) => void;
+  onRate: (stepId: string, rate: number | null) => void;
+}
+
+export function SegmentList({ config, onAdd, onRemove, onCount, onRate }: SegmentListProps) {
+  const sorted = [...config.segments].sort((a, b) => a.startTime - b.startTime);
+  // Loop count and rate belong to steps; they are editable here only when
+  // there is a single step, where the mapping is unambiguous.
+  const step = config.sequence.length === 1 ? config.sequence[0] : null;
+
+  return (
+    <div class="stack">
+      {sorted.map((segment, index) => (
+        <div class="segment" key={segment.id} style={{ "--seg": colorForIndex(index) }}>
+          <span class="index">{index + 1}</span>
+          <span class="range">{formatClock(segment.startTime)} → {formatClock(segment.endTime)}</span>
+          {segment.label && <span class="note">{segment.label}</span>}
+          {step && (
+            <label class="field" title="Loop count (0 = infinite)">
+              ↺
+              <input class="input" type="number" min="0" step="1" value={step.count} onChange={(e) => onCount(step.id, Math.max(0, parseInt(e.currentTarget.value, 10) || 0))} />
+            </label>
+          )}
+          {step && (
+            <label class="field" title="Playback rate override (blank = keep current)">
+              ▶
+              <input
+                class="input"
+                type="number"
+                min="0.25"
+                max="16"
+                step="0.25"
+                placeholder="1×"
+                value={step.playbackRate ?? ""}
+                onChange={(e) => {
+                  const raw = e.currentTarget.value.trim();
+                  onRate(step.id, raw === "" ? null : parseFloat(raw));
+                }}
+              />
+            </label>
+          )}
+          <button class="btn tiny" title="Remove segment" disabled={config.segments.length <= 1} onClick={() => onRemove(segment.id)}>✕</button>
+        </div>
+      ))}
+      <button class="btn" style="align-self:flex-start;margin-top:4px" onClick={onAdd}>+ Add Segment</button>
+    </div>
+  );
+}
diff --git a/web-ext/features/segments/panel/SequenceEditor.tsx b/web-ext/features/segments/panel/SequenceEditor.tsx
new file mode 100644
index 00000000..d0943931
--- /dev/null
+++ b/web-ext/features/segments/panel/SequenceEditor.tsx
@@ -0,0 +1,120 @@
+import { useRef, useState } from "preact/hooks";
+import { formatClock } from "@/lib/duration";
+import { colorForIndex } from "../format";
+import type { PlayStep, SegmentConfig } from "../types";
+
+export interface StepActions {
+  addStep: () => void;
+  removeStep: (stepId: string) => void;
+  addToStep: (stepId: string, segmentId: string) => void;
+  removeFromStep: (stepId: string, index: number) => void;
+  reorder: (stepId: string, from: number, to: number) => void;
+  setCount: (stepId: string, count: number) => void;
+  setRate: (stepId: string, rate: number | null) => void;
+  setPerIterationRates: (stepId: string, rates: number[]) => void;
+}
+
+export function SequenceEditor({ config, actions }: { config: SegmentConfig; actions: StepActions }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div style="margin-top:6px">
+      <button class="btn disclosure" onClick={() => setOpen((o) => !o)}>{open ? "▼" : "▶"} Advanced Sequence</button>
+      {open && (
+        <div class="stack" style="margin-top:8px">
+          {config.sequence.map((step, i) => <StepRow key={step.id} config={config} step={step} index={i} actions={actions} />)}
+          <button class="btn" style="align-self:flex-start" onClick={actions.addStep}>+ Add Step</button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const parseRates = (text: string) => text.split(",").map((v) => parseFloat(v.trim())).filter((v) => !isNaN(v) && v > 0);
+
+function StepRow({ config, step, index, actions }: { config: SegmentConfig; step: PlayStep; index: number; actions: StepActions }) {
+  const sorted = [...config.segments].sort((a, b) => a.startTime - b.startTime);
+  const dragFrom = useRef<number | null>(null);
+  const [over, setOver] = useState<number | null>(null);
+
+  return (
+    <div class="step">
+      <div class="row">
+        <span class="name">Step {index + 1}</span>
+        <div class="chips">
+          {step.segmentIds.map((segmentId, chipIndex) => {
+            const segment = config.segments.find((s) => s.id === segmentId);
+            const position = segment ? sorted.indexOf(segment) : -1;
+            const label = position >= 0 ? `Seg ${position + 1}` : "?";
+            const range = segment ? ` (${formatClock(segment.startTime)}→${formatClock(segment.endTime)})` : "";
+            return (
+              <span
+                key={`${segmentId}-${chipIndex}`}
+                class="segchip"
+                style={{ "--seg": position >= 0 ? colorForIndex(position) : "#666" }}
+                draggable
+                data-over={over === chipIndex ? "" : undefined}
+                title={`${label}${range} — drag to reorder`}
+                onDragStart={(e) => {
+                  dragFrom.current = chipIndex;
+                  e.dataTransfer?.setData("text/plain", String(chipIndex));
+                }}
+                onDragOver={(e) => (e.preventDefault(), setOver(chipIndex))}
+                onDragLeave={() => setOver(null)}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  setOver(null);
+                  const from = dragFrom.current;
+                  dragFrom.current = null;
+                  if (from !== null && from !== chipIndex) actions.reorder(step.id, from, chipIndex);
+                }}
+              >
+                <span class="grip">⠿</span>
+                {label}
+                <button class="x" title="Remove from step" onClick={() => actions.removeFromStep(step.id, chipIndex)}>✕</button>
+              </span>
+            );
+          })}
+        </div>
+        <select
+          class="select"
+          value=""
+          onChange={(e) => {
+            if (e.currentTarget.value) actions.addToStep(step.id, e.currentTarget.value);
+            e.currentTarget.value = "";
+          }}
+        >
+          <option value="">+ Seg</option>
+          {sorted.map((s, i) => <option value={s.id}>Seg {i + 1}</option>)}
+        </select>
+        <button class="btn tiny" title="Remove step" disabled={config.sequence.length <= 1} onClick={() => actions.removeStep(step.id)}>✕</button>
+      </div>
+      <div class="row" style="gap:12px">
+        <label class="field" title="0 = infinite; 1+ = play N times">
+          Count
+          <input class="input" type="number" min="0" step="1" value={step.count} onChange={(e) => actions.setCount(step.id, Math.max(0, parseInt(e.currentTarget.value, 10) || 0))} />
+          <span style="font-size:10px;opacity:.5">(0=∞)</span>
+        </label>
+        <label class="field" title="Playback rate for this step (blank = no change)">
+          Rate
+          <input
+            class="input"
+            type="number"
+            min="0.25"
+            max="16"
+            step="0.25"
+            placeholder="default"
+            value={step.playbackRate ?? ""}
+            onChange={(e) => {
+              const raw = e.currentTarget.value.trim();
+              actions.setRate(step.id, raw === "" ? null : parseFloat(raw));
+            }}
+          />
+        </label>
+        <label class="field" title="Comma-separated rates per iteration; the last entry repeats.">
+          Per-iter
+          <input class="input short" type="text" placeholder="e.g. 1, 1.5" value={step.perIterationRates.join(", ")} onBlur={(e) => actions.setPerIterationRates(step.id, parseRates(e.currentTarget.value))} />
+        </label>
+      </div>
+    </div>
+  );
+}
diff --git a/web-ext/features/segments/panel/styles.ts b/web-ext/features/segments/panel/styles.ts
new file mode 100644
index 00000000..5e33d16a
--- /dev/null
+++ b/web-ext/features/segments/panel/styles.ts
@@ -0,0 +1,75 @@
+import { themeTokens } from "@/kernel/dom/theme";
+
+export const panelStyle = `
+  ${themeTokens}
+  :host { display: block; }
+  * { box-sizing: border-box; }
+  .panel {
+    margin: 8px 0 4px; padding: 12px 16px; border-radius: 12px;
+    background: var(--tp-raised); border: 1px solid var(--tp-outline); color: var(--tp-text);
+    font: 13px/1.4 var(--tp-font);
+  }
+  .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .header { margin-bottom: 10px; }
+  .title { font-weight: 700; letter-spacing: .01em; }
+  .grow { flex: 1; }
+  .stack { display: flex; flex-direction: column; gap: 6px; }
+  button, input, select { font: inherit; color: inherit; }
+  .btn {
+    cursor: pointer; border: 0; border-radius: 4px; padding: 3px 8px; font-size: 12px; line-height: 1.4;
+    background: transparent; color: var(--tp-text-2);
+  }
+  .btn:hover { background: var(--tp-additive); color: var(--tp-text); }
+  .btn.accent { background: var(--tp-accent); color: #fff; }
+  .btn.accent:hover { opacity: .9; }
+  .btn.chip { background: var(--tp-additive); color: var(--tp-text-2); padding: 2px 8px; }
+  .btn.active { color: var(--tp-accent); }
+  .btn.tiny { padding: 2px 5px; font-size: 11px; }
+  .input {
+    width: 42px; padding: 2px 4px; border-radius: 4px; text-align: right; font-size: 11px;
+    background: var(--tp-additive); border: 1px solid var(--tp-outline); color: var(--tp-text);
+  }
+  .input.text { width: auto; flex: 1; text-align: left; font-size: 12px; padding: 4px 8px; }
+  .input.short { width: 70px; text-align: left; }
+  .dropdown { position: relative; display: inline-block; }
+  .menu {
+    position: absolute; top: calc(100% + 4px); z-index: 9999; min-width: 170px; padding: 4px; border-radius: 8px;
+    background: var(--tp-menu); border: 1px solid var(--tp-outline); box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
+  }
+  .menu.left { left: 0; } .menu.right { right: 0; }
+  .menu .item {
+    display: block; width: 100%; text-align: left; cursor: pointer; border: 0; border-radius: 4px; padding: 7px 10px;
+    font-size: 12px; background: transparent; color: var(--tp-text);
+  }
+  .menu .item:hover { background: var(--tp-additive); }
+  .menu .item.active { color: var(--tp-accent); font-weight: 600; }
+  .menu .item.muted { color: var(--tp-text-2); font-size: 11px; }
+  .menu .hint { padding: 4px 10px 6px; font-size: 11px; color: var(--tp-text-2); border-bottom: 1px solid var(--tp-outline); margin-bottom: 4px; }
+  .menu .divider { border-top: 1px solid var(--tp-outline); margin-top: 4px; padding-top: 4px; }
+  .empty { padding: 8px 10px; font-size: 12px; color: var(--tp-text-2); font-style: italic; }
+  .segment {
+    display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px;
+    background: var(--tp-additive); border-left: 3px solid var(--seg);
+  }
+  .segment .index { color: var(--seg); font-weight: 700; min-width: 18px; font-size: 12px; }
+  .segment .range { flex: 1; font-variant-numeric: tabular-nums; font-size: 12px; }
+  .segment .note { font-size: 11px; color: var(--tp-text-2); font-style: italic; }
+  .field { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--tp-text-2); }
+  .step { padding: 8px 10px; border-radius: 8px; background: var(--tp-additive); display: flex; flex-direction: column; gap: 6px; }
+  .step .name { font-size: 11px; font-weight: 600; color: var(--tp-text-2); min-width: 44px; }
+  .chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
+  .segchip {
+    display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 8px; border-radius: 4px; font-size: 11px;
+    cursor: grab; user-select: none; background: color-mix(in srgb, var(--seg) 15%, transparent); border: 1px solid var(--seg);
+  }
+  .segchip[data-over] { outline: 2px solid var(--seg); }
+  .segchip .grip { opacity: .4; font-size: 9px; }
+  .segchip .x { background: none; border: 0; cursor: pointer; padding: 0; font-size: 10px; line-height: 1; opacity: .6; }
+  .select { padding: 2px 4px; border-radius: 4px; font-size: 11px; background: var(--tp-additive); border: 1px solid var(--tp-outline); }
+  .saved { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-radius: 8px; background: var(--tp-additive); border-left: 3px solid transparent; }
+  .saved.loaded { border-left-color: var(--tp-accent); background: color-mix(in srgb, var(--tp-accent) 10%, transparent); }
+  .saved .name { flex: 1; text-align: left; background: none; border: 0; cursor: pointer; padding: 0; font-size: 13px; }
+  .saved.loaded .name { font-weight: 700; }
+  .badge { font-size: 10px; color: var(--tp-accent); border: 1px solid var(--tp-accent); border-radius: 3px; padding: 1px 5px; }
+  .disclosure { width: 100%; text-align: left; padding: 4px 0; }
+`;
diff --git a/web-ext/features/segments/session.test.ts b/web-ext/features/segments/session.test.ts
new file mode 100644
index 00000000..7453b1bf
--- /dev/null
+++ b/web-ext/features/segments/session.test.ts
@@ -0,0 +1,180 @@
+import { beforeEach, describe, expect, spyOn, test } from "bun:test";
+import { createFreshConfig } from "./factories";
+import { SegmentSession } from "./session";
+import { memorySegmentStorage, openVideoSegments } from "./store";
+
+function fakeVideo(duration = 100): HTMLVideoElement {
+  const video = document.createElement("video");
+  Object.defineProperty(video, "duration", { value: duration, configurable: true });
+  Object.defineProperty(video, "readyState", { value: 1, configurable: true });
+  return video;
+}
+
+const settings = { enabled: true, autoLoad: "off" as const, nudgeBaseStep: 1, nudgeMultiplier: 2, nudgeMaxStep: 4 };
+let toasts: string[];
+let video: HTMLVideoElement;
+let store: ReturnType<typeof openVideoSegments>;
+let session: SegmentSession;
+
+beforeEach(async () => {
+  toasts = [];
+  video = fakeVideo();
+  store = openVideoSegments(memorySegmentStorage(), "v1");
+  session = new SegmentSession({ video, store, settings, toast: (m) => toasts.push(m) });
+  await session.init();
+});
+
+describe("SegmentSession", () => {
+  test("toggle starts a fresh slate, then remembers it as last used", async () => {
+    await session.toggle();
+    expect(session.state.active).toBe(true);
+    expect(session.state.config?.segments).toHaveLength(1);
+    expect(session.state.config?.segments[0].endTime).toBe(100);
+
+    session.deactivate();
+    expect(session.state.active).toBe(false);
+    expect((await store.getLastUsed())?.id).toBe(session.state.config?.id);
+  });
+
+  test("set start and end move the segment under the playhead", async () => {
+    await session.toggle();
+    video.currentTime = 20;
+    session.setStart();
+    video.currentTime = 60;
+    session.setEnd();
+    const [segment] = session.state.config!.segments;
+    expect(segment.startTime).toBe(20);
+    expect(segment.endTime).toBe(60);
+    expect((await store.getLastUsed())?.segments[0].endTime).toBe(60);
+  });
+
+  test("repeated nudges accelerate up to the maximum", async () => {
+    await session.toggle();
+    video.currentTime = 50;
+    session.setStart();
+    for (const _ of [1, 2, 3, 4]) session.nudgeMarker("start", "backward");
+    // 1 + 2 + 4 + 4 = 11 seconds back from 50
+    expect(session.state.config!.segments[0].startTime).toBe(39);
+    expect(video.currentTime).toBe(39);
+  });
+
+  test("named saves land in the saved list and become the active label", async () => {
+    await session.toggle();
+    await session.saveNamed("Chorus");
+    expect(session.state.saved.map((c) => c.label)).toEqual(["Chorus"]);
+    expect(session.state.config?.label).toBe("Chorus");
+    await session.saveDefault();
+    expect(session.state.defaultId).toBe(session.state.config!.id);
+  });
+
+  test("restore honours the global setting and a per-video pin", async () => {
+    const config = createFreshConfig(100);
+    await store.saveConfig({ ...config, label: "Pinned" });
+    await store.setDefaultConfig(config.id);
+    await session.restore();
+    expect(session.state.active).toBe(false);
+
+    const withDefault = new SegmentSession({ video, store, settings: { ...settings, autoLoad: "default" }, toast: (m) => toasts.push(m) });
+    await withDefault.restore();
+    expect(withDefault.state.config?.label).toBe("Pinned");
+    expect(toasts).toContain("↺ Segments restored");
+
+    await store.setPin("off");
+    const pinnedOff = new SegmentSession({ video, store, settings: { ...settings, autoLoad: "default" }, toast: () => undefined });
+    await pinnedOff.restore();
+    expect(pinnedOff.state.active).toBe(false);
+  });
+
+  test("merge joins two segments into one", async () => {
+    await session.toggle();
+    const a = session.state.config!.segments[0];
+    session.mutate((c) => ({
+      ...c,
+      segments: [{ ...a, endTime: 40 }, { id: "b", startTime: 40, endTime: 100 }],
+      sequence: [{ ...c.sequence[0], segmentIds: [a.id, "b"] }],
+    }));
+    session.merge(a.id, "b");
+    expect(session.state.config!.segments).toHaveLength(1);
+    expect(session.state.config!.segments[0].endTime).toBe(100);
+    expect(session.state.config!.sequence[0].segmentIds).toEqual([a.id]);
+  });
+
+  test("save as named keeps the config it was saved from", async () => {
+    await session.toggle();
+    await session.saveNamed("First");
+    await session.updateSaved(session.state.config!.id, { shortcutKey: "Ctrl+1" });
+    session.load(session.state.saved[0]);
+    video.currentTime = 20;
+    session.setStart();
+    await session.saveNamed("Second");
+    expect(session.state.saved.map((c) => c.label)).toEqual(["First", "Second"]);
+    expect(session.state.saved[0].segments[0].startTime).toBe(0);
+    expect(session.state.saved[1].segments[0].startTime).toBe(20);
+    expect(session.state.saved.map((c) => c.shortcutKey)).toEqual(["Ctrl+1", ""]);
+  });
+
+  test("nothing activates once disposed, even if storage answers later", async () => {
+    const config = createFreshConfig(100);
+    await store.saveConfig({ ...config, segments: [{ ...config.segments[0], startTime: 10, endTime: 20 }] });
+    await store.setDefaultConfig(config.id);
+    const restoring = new SegmentSession({ video, store, settings: { ...settings, autoLoad: "default" }, toast: (m) => toasts.push(m) });
+    video.currentTime = 50;
+    const pending = restoring.restore();
+    restoring.dispose();
+    await pending;
+    expect(restoring.state.active).toBe(false);
+    expect(video.currentTime).toBe(50);
+    expect(toasts).not.toContain("↺ Segments restored");
+
+    const toggling = new SegmentSession({ video, store, settings, toast: () => undefined });
+    const toggled = toggling.toggle();
+    toggling.dispose();
+    await toggled;
+    expect(toggling.state.active).toBe(false);
+  });
+
+  test("segments stay off until the video has a finite duration", async () => {
+    Object.defineProperty(video, "duration", { value: NaN, configurable: true });
+    await session.toggle();
+    session.fresh();
+    expect(session.state.active).toBe(false);
+    expect(await store.getLastUsed()).toBeNull();
+
+    Object.defineProperty(video, "duration", { value: Infinity, configurable: true });
+    await session.toggle();
+    expect(session.state.active).toBe(false);
+  });
+
+  test("segments stay off while an ad plays in the video", async () => {
+    const player = document.createElement("div");
+    player.className = "html5-video-player ad-showing";
+    player.append(video);
+    await session.toggle();
+    expect(session.state.active).toBe(false);
+    player.classList.remove("ad-showing");
+    await session.toggle();
+    expect(session.state.active).toBe(true);
+  });
+
+  test("toggle still starts a fresh slate when storage fails", async () => {
+    const failing = new SegmentSession({
+      video,
+      store: { ...store, getLastUsed: () => Promise.reject(new Error("blocked")) },
+      settings,
+      toast: () => undefined,
+    });
+    const logged = spyOn(console, "error").mockImplementation(() => undefined);
+    await failing.toggle();
+    expect(logged).toHaveBeenCalled();
+    logged.mockRestore();
+    expect(failing.state.active).toBe(true);
+  });
+
+  test("the save key clears the last-used slate while inactive", async () => {
+    await session.toggle();
+    session.deactivate();
+    expect(await store.getLastUsed()).not.toBeNull();
+    await session.save();
+    expect(await store.getLastUsed()).toBeNull();
+  });
+});
diff --git a/web-ext/features/segments/session.ts b/web-ext/features/segments/session.ts
new file mode 100644
index 00000000..f3a69563
--- /dev/null
+++ b/web-ext/features/segments/session.ts
@@ -0,0 +1,270 @@
+import { isAdShowing } from "@/youtube/player";
+import { SegmentEngine } from "./engine";
+import { createFreshConfig, removeSegmentFromConfig, updateSegmentTimes } from "./factories";
+import type { SegmentsSettings } from "./settings";
+import type { VideoSegments } from "./store";
+import type { Segment, SegmentAutoLoadPin, SegmentConfig, SegmentId } from "./types";
+
+export interface SessionState {
+  active: boolean;
+  config: SegmentConfig | null;
+  saved: SegmentConfig[];
+  defaultId: string | null;
+  pin: SegmentAutoLoadPin;
+}
+
+export interface SessionDeps {
+  video: HTMLVideoElement;
+  store: VideoSegments;
+  settings: SegmentsSettings;
+  toast: (message: string) => void;
+}
+
+type Marker = "start" | "end";
+type Direction = "forward" | "backward";
+
+const MIN_SEGMENT = 0.1;
+const NUDGE_RESET_GAP_MS = 600;
+const NOT_READY = "Segments need a loaded video, not an ad or a live stream";
+
+// Owns one video's segment state: what is loaded, whether it plays, and every
+// change to it. UI and keys call in; the session persists and notifies.
+export class SegmentSession {
+  state: SessionState = { active: false, config: null, saved: [], defaultId: null, pin: null };
+
+  private engine: SegmentEngine | null = null;
+  private disposed = false;
+  private listeners = new Set<() => void>();
+  private nudge = { marker: null as Marker | null, direction: null as Direction | null, step: 1, at: 0 };
+
+  constructor(private deps: SessionDeps) {}
+
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  // Storage failures degrade to "nothing saved" rather than a dead feature.
+  async init(): Promise<void> {
+    try {
+      await this.refreshSaved();
+    } catch (error) {
+      console.error("[toppings] segment storage unavailable", error);
+    }
+  }
+
+  // A pre-roll ad plays in the same <video>, so its duration is the ad's and
+  // any segment clamped or created against it would be cut to the ad's length.
+  get ready(): boolean {
+    return Number.isFinite(this.deps.video.duration) && this.deps.video.duration > 0 && !isAdShowing(this.deps.video);
+  }
+
+  async restore(): Promise<void> {
+    const config = await this.deps.store.autoLoadConfig(this.deps.settings.autoLoad);
+    if (config && this.activate(this.clampToDuration(config))) this.deps.toast("↺ Segments restored");
+  }
+
+  async toggle(): Promise<void> {
+    if (this.state.active) {
+      this.deactivate();
+      return;
+    }
+    if (!this.ready) {
+      this.deps.toast(NOT_READY);
+      return;
+    }
+    let lastUsed: SegmentConfig | null = null;
+    try {
+      lastUsed = await this.deps.store.getLastUsed();
+    } catch (error) {
+      console.error("[toppings] segment storage unavailable", error);
+    }
+    this.activate(lastUsed ? this.clampToDuration(lastUsed) : createFreshConfig(this.duration));
+  }
+
+  fresh(): void {
+    if (this.activate(createFreshConfig(this.duration))) this.deps.toast("Fresh segments slate");
+    else this.deps.toast(NOT_READY);
+  }
+
+  // Also refuses after dispose, since restore and toggle resume from storage
+  // reads that can finish after the user has navigated away.
+  activate(config: SegmentConfig): boolean {
+    if (this.disposed || !this.ready) return false;
+    this.engine?.stop();
+    this.engine = new SegmentEngine(this.deps.video, config, () => isAdShowing(this.deps.video));
+    this.engine.start();
+    this.set({ active: true, config });
+    return true;
+  }
+
+  deactivate(): void {
+    this.engine?.stop();
+    this.engine = null;
+    if (this.state.config) void this.deps.store.setLastUsed(this.state.config);
+    this.set({ active: false });
+  }
+
+  load(config: SegmentConfig): void {
+    this.deps.toast(this.activate(this.clampToDuration(config)) ? `Segments: ${config.label}` : NOT_READY);
+  }
+
+  mutate(update: (config: SegmentConfig) => SegmentConfig): void {
+    if (!this.state.config) return;
+    this.commit(update(this.state.config));
+  }
+
+  // Applied to the engine on every pointer move, persisted once the drag ends.
+  preview(segments: Segment[]): void {
+    if (!this.state.config) return;
+    const config = { ...this.state.config, segments, updatedAt: Date.now() };
+    this.engine?.setConfig(config);
+    this.set({ config });
+  }
+
+  commitPreview(): void {
+    if (this.state.config) void this.deps.store.setLastUsed(this.state.config);
+  }
+
+  merge(keepId: SegmentId, removeId: SegmentId): void {
+    const config = this.state.config;
+    const keep = config?.segments.find((s) => s.id === keepId);
+    const remove = config?.segments.find((s) => s.id === removeId);
+    if (!config || !keep || !remove) return;
+    this.commit(removeSegmentFromConfig(updateSegmentTimes(config, keepId, keep.startTime, remove.endTime), removeId));
+    this.deps.toast("Segments merged");
+  }
+
+  setStart(): void {
+    const segment = this.segmentAtPlayhead();
+    if (!segment) return;
+    const start = Math.max(0, Math.min(this.deps.video.currentTime, segment.endTime - MIN_SEGMENT));
+    this.mutate((c) => updateSegmentTimes(c, segment.id, start, segment.endTime));
+  }
+
+  setEnd(): void {
+    const segment = this.segmentAtPlayhead();
+    if (!segment) return;
+    const end = Math.max(segment.startTime + MIN_SEGMENT, Math.min(this.deps.video.currentTime, this.duration));
+    this.mutate((c) => updateSegmentTimes(c, segment.id, segment.startTime, end));
+  }
+
+  nudgeMarker(marker: Marker, direction: Direction): void {
+    const segment = this.segmentAtPlayhead();
+    if (!segment || !this.duration) return;
+    const step = this.nextNudgeStep(marker, direction);
+    const delta = direction === "forward" ? step : -step;
+    if (marker === "start") {
+      const start = Math.max(0, Math.min(segment.startTime + delta, segment.endTime - MIN_SEGMENT));
+      this.mutate((c) => updateSegmentTimes(c, segment.id, start, segment.endTime));
+      this.deps.video.currentTime = start;
+    } else {
+      const end = Math.max(segment.startTime + MIN_SEGMENT, Math.min(segment.endTime + delta, this.duration));
+      this.mutate((c) => updateSegmentTimes(c, segment.id, segment.startTime, end));
+    }
+  }
+
+  // The save key means "keep this" while active and "forget the slate" while off.
+  async save(): Promise<void> {
+    if (this.state.active && this.state.config) {
+      await this.saveDefault();
+      return;
+    }
+    await this.deps.store.setLastUsed(null);
+    this.deps.toast("Last-used segments cleared");
+  }
+
+  async saveDefault(): Promise<void> {
+    if (!this.state.config) return;
+    const config = { ...this.state.config, updatedAt: Date.now() };
+    await this.deps.store.saveConfig(config);
+    await this.deps.store.setDefaultConfig(config.id);
+    await this.refreshSaved();
+    this.set({ config });
+    this.deps.toast("Saved to default slot ✓");
+  }
+
+  async saveNamed(label: string): Promise<void> {
+    if (!this.state.config || !label.trim()) return;
+    const now = Date.now();
+    const config = { ...this.state.config, id: crypto.randomUUID(), label: label.trim(), shortcutKey: "", createdAt: now, updatedAt: now };
+    await this.deps.store.saveConfig(config);
+    await this.refreshSaved();
+    this.commit(config);
+    this.deps.toast(`Saved as "${config.label}" ✓`);
+  }
+
+  async setPin(pin: SegmentAutoLoadPin): Promise<void> {
+    await this.deps.store.setPin(pin);
+    this.set({ pin });
+  }
+
+  async updateSaved(configId: string, change: Partial<Pick<SegmentConfig, "label" | "shortcutKey">>): Promise<void> {
+    const saved = this.state.saved.find((c) => c.id === configId);
+    if (!saved) return;
+    await this.deps.store.saveConfig({ ...saved, ...change, updatedAt: Date.now() });
+    await this.refreshSaved();
+  }
+
+  async deleteSaved(configId: string): Promise<void> {
+    await this.deps.store.deleteConfig(configId);
+    await this.refreshSaved();
+  }
+
+  async setDefault(configId: string): Promise<void> {
+    await this.deps.store.setDefaultConfig(configId);
+    await this.refreshSaved();
+  }
+
+  dispose(): void {
+    this.disposed = true;
+    this.engine?.stop();
+    this.engine = null;
+    this.listeners.clear();
+  }
+
+  private get duration(): number {
+    return this.deps.video.duration || 0;
+  }
+
+  private segmentAtPlayhead(): Segment | null {
+    return this.state.active ? (this.engine?.getSegmentAt(this.deps.video.currentTime) ?? null) : null;
+  }
+
+  private commit(config: SegmentConfig): void {
+    this.engine?.setConfig(config);
+    this.set({ config });
+    void this.deps.store.setLastUsed(config);
+  }
+
+  private async refreshSaved(): Promise<void> {
+    const { configs, defaultConfigId, autoLoadPin } = await this.deps.store.data();
+    this.set({ saved: configs, defaultId: defaultConfigId, pin: autoLoadPin ?? null });
+  }
+
+  private set(patch: Partial<SessionState>): void {
+    this.state = { ...this.state, ...patch };
+    for (const listener of this.listeners) listener();
+  }
+
+  private nextNudgeStep(marker: Marker, direction: Direction): number {
+    const { nudgeBaseStep, nudgeMultiplier, nudgeMaxStep } = this.deps.settings;
+    const now = Date.now();
+    const repeated = this.nudge.marker === marker && this.nudge.direction === direction && now - this.nudge.at < NUDGE_RESET_GAP_MS;
+    const step = repeated ? Math.min(this.nudge.step * nudgeMultiplier, nudgeMaxStep) : nudgeBaseStep;
+    this.nudge = { marker, direction, step, at: now };
+    return step;
+  }
+
+  private clampToDuration(config: SegmentConfig): SegmentConfig {
+    const duration = this.duration;
+    if (!duration) return config;
+    return {
+      ...config,
+      segments: config.segments.map((s) => {
+        const startTime = Math.max(0, Math.min(s.startTime, duration - MIN_SEGMENT));
+        return { ...s, startTime, endTime: Math.max(startTime + MIN_SEGMENT, Math.min(s.endTime, duration)) };
+      }),
+    };
+  }
+}
diff --git a/web-ext/features/segments/settings.ts b/web-ext/features/segments/settings.ts
new file mode 100644
index 00000000..0c8e640e
--- /dev/null
+++ b/web-ext/features/segments/settings.ts
@@ -0,0 +1,38 @@
+import { defineSettings } from "@/kernel/settings";
+import type { AutoLoad } from "./store";
+
+export interface SegmentsSettings {
+  enabled: boolean;
+  autoLoad: AutoLoad;
+  // Repeated nudges in the same direction grow from base by multiplier up to max.
+  nudgeBaseStep: number;
+  nudgeMultiplier: number;
+  nudgeMaxStep: number;
+}
+
+interface LegacyWatch {
+  isEnabled?: boolean;
+  segments?: { autoLoad?: AutoLoad };
+  nudgeLoopSegment?: { baseStep?: string; multiplier?: string; maxStep?: string };
+}
+
+const number = (value: string | undefined) => (value === undefined ? undefined : Number(value));
+
+export const segmentsSettings = defineSettings<SegmentsSettings>(
+  "segments",
+  { enabled: true, autoLoad: "off", nudgeBaseStep: 1, nudgeMultiplier: 2, nudgeMaxStep: 16 },
+  {
+    legacy: (store) => {
+      const watch = (store.preferences as { watch?: LegacyWatch } | undefined)?.watch;
+      if (!watch) return undefined;
+      // The old watch-page switch covered segments as well as playback.
+      return {
+        enabled: watch.isEnabled,
+        autoLoad: watch.segments?.autoLoad,
+        nudgeBaseStep: number(watch.nudgeLoopSegment?.baseStep),
+        nudgeMultiplier: number(watch.nudgeLoopSegment?.multiplier),
+        nudgeMaxStep: number(watch.nudgeLoopSegment?.maxStep),
+      };
+    },
+  },
+);
diff --git a/web-ext/features/segments/store.ts b/web-ext/features/segments/store.ts
new file mode 100644
index 00000000..888cca2c
--- /dev/null
+++ b/web-ext/features/segments/store.ts
@@ -0,0 +1,122 @@
+import { withStore } from "@/lib/indexedDb";
+import { BROWSER_STORAGE_IDB_STORE } from "@/lib/storageKeys";
+import type { SegmentAutoLoadPin, SegmentConfig, VideoSegmentData } from "./types";
+
+export type AutoLoad = "off" | "last-used" | "default";
+
+// The persistence boundary, so the session can be driven by an in-memory
+// store in tests and by IndexedDB in the extension.
+export interface SegmentStorage {
+  read(videoId: string): Promise<VideoSegmentData | null>;
+  write(data: VideoSegmentData): Promise<void>;
+}
+
+interface LegacyLoopSegment {
+  videoId: string;
+  startTime: number;
+  endTime: number;
+  savedAt: number;
+}
+
+// A record from before segments replaced single loops is converted on first
+// read and written back, so the conversion happens once.
+async function readLegacyLoop(videoId: string): Promise<VideoSegmentData | null> {
+  let legacy: LegacyLoopSegment | undefined;
+  try {
+    legacy = await withStore<LegacyLoopSegment | undefined>(BROWSER_STORAGE_IDB_STORE.LOOP_SEGMENT, "readonly", (store) => store.get(videoId));
+  } catch {
+    return null;
+  }
+  if (!legacy) return null;
+  const segmentId = crypto.randomUUID();
+  const config: SegmentConfig = {
+    id: crypto.randomUUID(),
+    label: "Restored Loop",
+    segments: [{ id: segmentId, startTime: legacy.startTime, endTime: legacy.endTime }],
+    sequence: [{ id: crypto.randomUUID(), segmentIds: [segmentId], count: 0, playbackRate: null, perIterationRates: [] }],
+    shortcutKey: "",
+    createdAt: legacy.savedAt,
+    updatedAt: legacy.savedAt,
+  };
+  const data: VideoSegmentData = { videoId, lastUsed: config, configs: [], defaultConfigId: null, savedAt: legacy.savedAt };
+  await indexedDbSegmentStorage.write(data);
+  return data;
+}
+
+export const indexedDbSegmentStorage: SegmentStorage = {
+  async read(videoId) {
+    const existing = await withStore<VideoSegmentData | undefined>(BROWSER_STORAGE_IDB_STORE.SEGMENT_DATA, "readonly", (store) => store.get(videoId));
+    return existing ?? readLegacyLoop(videoId);
+  },
+  async write(data) {
+    await withStore(BROWSER_STORAGE_IDB_STORE.SEGMENT_DATA, "readwrite", (store) => store.put({ ...data, savedAt: Date.now() }));
+  },
+};
+
+export function memorySegmentStorage(): SegmentStorage {
+  const records = new Map<string, VideoSegmentData>();
+  return {
+    async read(videoId) {
+      return records.get(videoId) ?? null;
+    },
+    async write(data) {
+      records.set(data.videoId, data);
+    },
+  };
+}
+
+export interface VideoSegments {
+  data(): Promise<VideoSegmentData>;
+  getLastUsed(): Promise<SegmentConfig | null>;
+  setLastUsed(config: SegmentConfig | null): Promise<void>;
+  saveConfig(config: SegmentConfig): Promise<void>;
+  deleteConfig(configId: string): Promise<void>;
+  setDefaultConfig(configId: string | null): Promise<void>;
+  setPin(pin: SegmentAutoLoadPin): Promise<void>;
+  // null means "leave segments off"; callers must not substitute a fresh config.
+  autoLoadConfig(globalAutoLoad: AutoLoad): Promise<SegmentConfig | null>;
+}
+
+// Everything the feature stores about one video, with the per-video record
+// read and written as a unit.
+export function openVideoSegments(storage: SegmentStorage, videoId: string): VideoSegments {
+  const empty = (): VideoSegmentData => ({ videoId, lastUsed: null, configs: [], defaultConfigId: null, savedAt: 0 });
+  // Writes are read-modify-write, so they run one at a time, and a read waits
+  // for the writes queued before it; rapid edits then never clobber each other.
+  let queue: Promise<unknown> = Promise.resolve();
+  const data = async () => {
+    await queue;
+    return (await storage.read(videoId)) ?? empty();
+  };
+  const patch = (change: Partial<VideoSegmentData>) => {
+    const write = queue.then(async () => storage.write({ ...((await storage.read(videoId)) ?? empty()), ...change }));
+    queue = write.catch(() => undefined);
+    return write;
+  };
+
+  return {
+    data,
+    getLastUsed: async () => (await data()).lastUsed,
+    setLastUsed: (lastUsed) => patch({ lastUsed }),
+    async saveConfig(config) {
+      const { configs } = await data();
+      const known = configs.some((c) => c.id === config.id);
+      await patch({ configs: known ? configs.map((c) => (c.id === config.id ? config : c)) : [...configs, config] });
+    },
+    async deleteConfig(configId) {
+      const { configs, defaultConfigId } = await data();
+      await patch({ configs: configs.filter((c) => c.id !== configId), defaultConfigId: defaultConfigId === configId ? null : defaultConfigId });
+    },
+    setDefaultConfig: (defaultConfigId) => patch({ defaultConfigId }),
+    setPin: (autoLoadPin) => patch({ autoLoadPin }),
+    async autoLoadConfig(globalAutoLoad) {
+      const record = await data();
+      // A per-video pin outranks the global preference.
+      const effective = record.autoLoadPin ?? globalAutoLoad;
+      if (effective === "off") return null;
+      if (effective === "last-used") return record.lastUsed;
+      const wanted = effective === "default" ? record.defaultConfigId : effective.configId;
+      return record.configs.find((c) => c.id === wanted) ?? null;
+    },
+  };
+}
diff --git a/web-ext/features/segments/types.ts b/web-ext/features/segments/types.ts
new file mode 100644
index 00000000..6d330f9f
--- /dev/null
+++ b/web-ext/features/segments/types.ts
@@ -0,0 +1,50 @@
+export type SegmentId = string;
+export type StepId = string;
+export type ConfigId = string;
+
+export interface Segment {
+  id: SegmentId;
+  startTime: number; // seconds
+  endTime: number; // seconds
+  label?: string;
+}
+
+// Repeats in `segmentIds` are intentional and are the only way to express an
+// arrangement like "seg3 twice, then seg1" — there is no count-per-reference field.
+export interface PlayStep {
+  id: StepId;
+  segmentIds: SegmentId[];
+  count: number; // full cycles through segmentIds; 0 loops forever
+  playbackRate: number | null; // null keeps the video's current rate
+  perIterationRates: number[]; // per cycle; last entry repeats, empty falls back to playbackRate
+}
+
+// The engine wraps from the last step back to step 0, so a sequence loops
+// globally unless its final step sets count = 0 and loops on its own.
+export interface SegmentConfig {
+  id: ConfigId;
+  label: string; // auto-generated when the user leaves it blank
+  segments: Segment[];
+  sequence: PlayStep[];
+  shortcutKey: string; // "" = unbound, e.g. "Ctrl+1"
+  createdAt: number; // unix ms
+  updatedAt: number;
+}
+
+// null defers to the global preference; "off" actively suppresses auto-load for
+// this one video. The two are not interchangeable.
+export type SegmentAutoLoadPin =
+  | null
+  | "off"
+  | "last-used"
+  | "default"
+  | { configId: string };
+
+export interface VideoSegmentData {
+  videoId: string;
+  lastUsed: SegmentConfig | null; // volatile snapshot, written without an explicit save
+  configs: SegmentConfig[];
+  defaultConfigId: string | null;
+  autoLoadPin?: SegmentAutoLoadPin;
+  savedAt: number;
+}
diff --git a/web-ext/features/shorts/Controls.tsx b/web-ext/features/shorts/Controls.tsx
new file mode 100644
index 00000000..d334f44d
--- /dev/null
+++ b/web-ext/features/shorts/Controls.tsx
@@ -0,0 +1,32 @@
+import { credit } from "@/kernel/dom/credit";
+
+export interface ControlsProps {
+  autoScroll: boolean;
+  fastRate: number;
+  isFast: boolean;
+  onToggleAutoScroll: () => void;
+  onToggleRate: () => void;
+}
+
+// Two round buttons in the reel's action column, drawn like YouTube's own.
+const styles = `
+  .stack { display: flex; flex-direction: column; gap: 16px; align-items: center; margin-bottom: 16px; }
+  button { width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
+    background: rgba(255,255,255,0.1); color: #fff; font: 500 12px/1 "Roboto", "Arial", sans-serif; }
+  button:hover { background: rgba(255,255,255,0.2); }
+  button.on { background: rgba(255,255,255,0.3); }
+`;
+
+export function Controls({ autoScroll, fastRate, isFast, onToggleAutoScroll, onToggleRate }: ControlsProps) {
+  return (
+    <div class="stack">
+      <style>{styles}</style>
+      <button class={autoScroll ? "on" : ""} title={credit("Auto-scroll to the next Short")} aria-pressed={autoScroll} onClick={onToggleAutoScroll}>
+        Auto
+      </button>
+      <button class={isFast ? "on" : ""} title={credit("Toggle playback rate")} aria-pressed={isFast} onClick={onToggleRate}>
+        {fastRate}×
+      </button>
+    </div>
+  );
+}
diff --git a/web-ext/features/shorts/index.test.ts b/web-ext/features/shorts/index.test.ts
new file mode 100644
index 00000000..8df25ca2
--- /dev/null
+++ b/web-ext/features/shorts/index.test.ts
@@ -0,0 +1,121 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { shorts } from "./index";
+import { shortsSettings } from "./settings";
+
+// The older layout with is-active and #actions inside the renderer, and the
+// newer one with a reused renderer and an extracted action bar.
+const layouts = {
+  active: `<ytd-shorts><ytd-reel-video-renderer is-active><video></video><div id="actions"></div></ytd-reel-video-renderer>
+    <div id="navigation-button-down"><button aria-label="Next video"></button></div></ytd-shorts>`,
+  extracted: `<ytd-shorts><ytd-reel-video-renderer id="reel-video-renderer"><div id="shorts-player"><video></video></div></ytd-reel-video-renderer>
+    <div><reel-action-bar-view-model><like-button-view-model></like-button-view-model></reel-action-bar-view-model></div>
+    <div id="navigation-button-down"><button aria-label="Next video"></button></div></ytd-shorts>`,
+};
+const reel = layouts.active;
+
+const route = { name: "shorts", shortId: "s1" } as const;
+const press = (key: string) => document.body.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true }));
+const video = () => document.querySelector("video") as HTMLVideoElement;
+const controls = () => document.getElementById("tppng-shorts-controls")!.shadowRoot!;
+const panel = (target: string, visibility: "EXPANDED" | "HIDDEN") =>
+  `<ytd-engagement-panel-section-list-renderer target-id="${target}" visibility="ENGAGEMENT_PANEL_VISIBILITY_${visibility}"></ytd-engagement-panel-section-list-renderer>`;
+const countNextClicks = () => {
+  const clicks = { count: 0 };
+  document.querySelector("#navigation-button-down button")!.addEventListener("click", () => clicks.count++);
+  return clicks;
+};
+
+beforeEach(async () => {
+  await chrome.storage.sync.clear();
+  document.body.innerHTML = reel;
+  video().currentTime = 30;
+});
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("shorts", () => {
+  for (const [name, html] of Object.entries(layouts)) {
+    test(`puts the two controls in the action column (${name} layout)`, async () => {
+      document.body.innerHTML = html;
+      const unmount = await shorts.mount({ signal: new AbortController().signal, route });
+      const buttons = [...controls().querySelectorAll("button")].map((b) => b.textContent);
+      expect(buttons).toEqual(["Auto", "1.5×"]);
+      unmount?.();
+      expect(document.getElementById("tppng-shorts-controls")).toBeNull();
+    });
+  }
+
+  test("seek keys move the playhead by the configured amount", async () => {
+    await shortsSettings.set({ seekForward: 7 });
+    const unmount = await shorts.mount({ signal: new AbortController().signal, route });
+    press("d");
+    expect(video().currentTime).toBe(37);
+    press("a");
+    expect(video().currentTime).toBe(32);
+    unmount?.();
+  });
+
+  test("the rate key toggles between 1 and the configured rate", async () => {
+    await shortsSettings.set({ toggleRate: 2 });
+    const unmount = await shorts.mount({ signal: new AbortController().signal, route });
+    press("x");
+    expect(video().playbackRate).toBe(2);
+    press("x");
+    expect(video().playbackRate).toBe(1);
+    unmount?.();
+  });
+
+  test("advances to the next reel when one ends", async () => {
+    const next = countNextClicks();
+    const unmount = await shorts.mount({ signal: new AbortController().signal, route });
+    video().dispatchEvent(new Event("ended"));
+    expect(next.count).toBe(1);
+    unmount?.();
+  });
+
+  test("stays on the reel while a panel is open, behind a parked watch page's panels", async () => {
+    document.body.insertAdjacentHTML("afterbegin", `<ytd-watch-flexy hidden>${panel("PAmodern_transcript_view", "HIDDEN")}</ytd-watch-flexy>`);
+    document.querySelector("ytd-shorts")!.insertAdjacentHTML("beforeend", panel("engagement-panel-comments-section", "EXPANDED"));
+    const next = countNextClicks();
+    const unmount = await shorts.mount({ signal: new AbortController().signal, route });
+    video().dispatchEvent(new Event("ended"));
+    expect(next.count).toBe(0);
+    unmount?.();
+  });
+
+  test("ignores a panel left open on a parked watch page", async () => {
+    document.body.insertAdjacentHTML("afterbegin", `<ytd-watch-flexy hidden>${panel("engagement-panel-comments-section", "EXPANDED")}</ytd-watch-flexy>`);
+    const next = countNextClicks();
+    const unmount = await shorts.mount({ signal: new AbortController().signal, route });
+    video().dispatchEvent(new Event("ended"));
+    expect(next.count).toBe(1);
+    unmount?.();
+  });
+
+  test("advances in a narrow window, where YouTube hides the navigation buttons", async () => {
+    document.querySelector<HTMLElement>("#navigation-button-down")!.style.display = "none";
+    const next = countNextClicks();
+    const unmount = await shorts.mount({ signal: new AbortController().signal, route });
+    video().dispatchEvent(new Event("ended"));
+    expect(next.count).toBe(1);
+    unmount?.();
+  });
+
+  test("the Auto button turns auto-scroll off and persists it", async () => {
+    const unmount = await shorts.mount({ signal: new AbortController().signal, route });
+    controls().querySelector("button")!.click();
+    await new Promise((r) => setTimeout(r, 0));
+    expect((await shortsSettings.get()).autoScroll).toBe(false);
+    const next = countNextClicks();
+    video().dispatchEvent(new Event("ended"));
+    expect(next.count).toBe(0);
+    unmount?.();
+  });
+
+  test("does nothing when disabled", async () => {
+    await shortsSettings.set({ enabled: false });
+    await shorts.mount({ signal: new AbortController().signal, route });
+    expect(document.getElementById("tppng-shorts-controls")).toBeNull();
+  });
+});
diff --git a/web-ext/features/shorts/index.tsx b/web-ext/features/shorts/index.tsx
new file mode 100644
index 00000000..fcf739bd
--- /dev/null
+++ b/web-ext/features/shorts/index.tsx
@@ -0,0 +1,76 @@
+import type { Feature } from "@/kernel/features";
+import { bindKeys } from "@/kernel/keys";
+import { mount } from "@/kernel/dom/mount";
+import { setCapabilityStatus } from "@/kernel/dom/capabilities";
+import { isReelPanelOpen, nextReelButton, resolveReelActionBar, resolveReelVideo } from "@/youtube/shorts";
+import { Controls } from "./Controls";
+import { shortsKeys } from "./keys";
+import { shortsSettings } from "./settings";
+
+export const shorts: Feature = {
+  id: "shorts",
+  routes: ["shorts"],
+  async mount() {
+    const settings = await shortsSettings.get();
+    if (!settings.enabled) return;
+    const [player, actionBar] = await Promise.all([resolveReelVideo(), resolveReelActionBar()]);
+    void setCapabilityStatus("shorts.player", "shorts", player);
+    void setCapabilityStatus("shorts.actionBar", "shorts", actionBar);
+    if (!player.resolved || !actionBar.resolved) return;
+    const video = player.element as HTMLVideoElement;
+    const actions = actionBar.element;
+
+    let autoScroll = settings.autoScroll;
+
+    // YouTube loops a Short by default; the loop attribute comes back after
+    // playback starts, so it is stripped shortly after each "playing".
+    let unloop: ReturnType<typeof setTimeout> | undefined;
+    const onPlaying = () => {
+      clearTimeout(unloop);
+      if (autoScroll) unloop = setTimeout(() => video.removeAttribute("loop"), 400);
+    };
+    const onEnded = () => {
+      if (!autoScroll || isReelPanelOpen(video)) {
+        void video.play();
+        return;
+      }
+      nextReelButton(video)?.click();
+    };
+    video.addEventListener("playing", onPlaying);
+    video.addEventListener("ended", onEnded);
+    onPlaying();
+
+    const view = () => (
+      <Controls
+        autoScroll={autoScroll}
+        fastRate={settings.toggleRate}
+        isFast={video.playbackRate !== 1}
+        onToggleAutoScroll={() => {
+          autoScroll = !autoScroll;
+          void shortsSettings.set({ autoScroll });
+          controls.update(view());
+        }}
+        onToggleRate={toggleRate}
+      />
+    );
+    const toggleRate = () => {
+      video.playbackRate = video.playbackRate === 1 ? settings.toggleRate : 1;
+      controls.update(view());
+    };
+    const controls = mount("tppng-shorts-controls", actions, view(), "prepend");
+
+    const unbindKeys = bindKeys(shortsKeys, {
+      toggleRate,
+      seekBackward: () => (video.currentTime -= settings.seekBackward),
+      seekForward: () => (video.currentTime += settings.seekForward),
+    });
+
+    return () => {
+      unbindKeys();
+      controls.unmount();
+      clearTimeout(unloop);
+      video.removeEventListener("playing", onPlaying);
+      video.removeEventListener("ended", onEnded);
+    };
+  },
+};
diff --git a/web-ext/features/shorts/keys.ts b/web-ext/features/shorts/keys.ts
new file mode 100644
index 00000000..40896c3e
--- /dev/null
+++ b/web-ext/features/shorts/keys.ts
@@ -0,0 +1,11 @@
+import { defineKeys } from "@/kernel/keys";
+
+export const shortsKeys = defineKeys({
+  id: "shorts",
+  title: "Shorts",
+  keys: {
+    toggleRate: { label: "Toggle playback rate", defaultBinding: "X" },
+    seekBackward: { label: "Seek backward", defaultBinding: "A" },
+    seekForward: { label: "Seek forward", defaultBinding: "D" },
+  },
+});
diff --git a/web-ext/features/shorts/settings.ts b/web-ext/features/shorts/settings.ts
new file mode 100644
index 00000000..ad01c244
--- /dev/null
+++ b/web-ext/features/shorts/settings.ts
@@ -0,0 +1,37 @@
+import { defineSettings } from "@/kernel/settings";
+
+export interface ShortsSettings {
+  enabled: boolean;
+  autoScroll: boolean;
+  toggleRate: number;
+  seekBackward: number;
+  seekForward: number;
+}
+
+interface LegacyShorts {
+  isEnabled?: boolean;
+  reelAutoScroll?: { value?: boolean };
+  togglePlaybackRate?: { value?: string };
+  seekBackward?: { value?: string };
+  seekForward?: { value?: string };
+}
+
+const number = (value: string | undefined) => (value === undefined ? undefined : Number(value));
+
+export const shortsSettings = defineSettings<ShortsSettings>(
+  "shorts",
+  { enabled: true, autoScroll: true, toggleRate: 1.5, seekBackward: 5, seekForward: 5 },
+  {
+    legacy: (store) => {
+      const legacy = (store.preferences as { shorts?: LegacyShorts } | undefined)?.shorts;
+      if (!legacy) return undefined;
+      return {
+        enabled: legacy.isEnabled,
+        autoScroll: legacy.reelAutoScroll?.value,
+        toggleRate: number(legacy.togglePlaybackRate?.value),
+        seekBackward: number(legacy.seekBackward?.value),
+        seekForward: number(legacy.seekForward?.value),
+      };
+    },
+  },
+);
diff --git a/web-ext/index.d.ts b/web-ext/index.d.ts
deleted file mode 100644
index 512c0a71..00000000
--- a/web-ext/index.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module "*.png";
-declare module "*.jpg";
-declare module "*.jpeg";
-declare module "*.gif";
-declare module "*.svg";
diff --git a/web-ext/kernel/dom/adoptTextStyle.ts b/web-ext/kernel/dom/adoptTextStyle.ts
new file mode 100644
index 00000000..ce0917db
--- /dev/null
+++ b/web-ext/kernel/dom/adoptTextStyle.ts
@@ -0,0 +1,10 @@
+const TEXT_PROPERTIES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing", "color"];
+
+// Copies the type of a piece of YouTube's text onto a shadow host. These
+// properties inherit across the shadow boundary, so injected text reads
+// exactly like its neighbour in any layout, theme or tint.
+export function adoptTextStyle(host: HTMLElement, sample: Element | null): void {
+  if (!sample) return;
+  const style = getComputedStyle(sample);
+  for (const property of TEXT_PROPERTIES) host.style.setProperty(property, style.getPropertyValue(property));
+}
diff --git a/web-ext/kernel/dom/capabilities.test.ts b/web-ext/kernel/dom/capabilities.test.ts
new file mode 100644
index 00000000..7eaf3160
--- /dev/null
+++ b/web-ext/kernel/dom/capabilities.test.ts
@@ -0,0 +1,36 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+import { clearCapabilityCache, getAllCapabilityEntries, getCapabilityStatus, setCapabilityStatus } from "./capabilities";
+
+const found = { resolved: true, element: document.createElement("div"), strategyIndex: 1 } as const;
+const missing = { resolved: false, element: null, strategyIndex: null } as const;
+
+beforeEach(async () => {
+  await chrome.storage.local.clear();
+});
+
+describe("capability cache", () => {
+  test("statuses written by the content script are read back from extension storage", async () => {
+    await Promise.all([setCapabilityStatus("watch.player", "watch", found), setCapabilityStatus("watch.ratePanel", "watch", missing)]);
+    expect(await getCapabilityStatus("watch.player")).toBe("supported");
+    expect(await getCapabilityStatus("watch.ratePanel")).toBe("unsupported");
+    expect(await getCapabilityStatus("watch.sidebar")).toBe("untested");
+    expect((await getAllCapabilityEntries()).map((e) => e.primitiveId).sort()).toEqual(["watch.player", "watch.ratePanel"]);
+  });
+
+  test("an unchanged status is not rewritten", async () => {
+    await setCapabilityStatus("watch.player", "watch", found);
+    const key = "toppings:capability:watch.player";
+    const first = (await chrome.storage.local.get(key))[key];
+    await new Promise((r) => setTimeout(r, 5));
+    await setCapabilityStatus("watch.player", "watch", found);
+    expect((await chrome.storage.local.get(key))[key].lastCheckedAt).toBe(first.lastCheckedAt);
+  });
+
+  test("clearing removes only capability entries", async () => {
+    await chrome.storage.local.set({ other: 1 });
+    await setCapabilityStatus("watch.player", "watch", found);
+    await clearCapabilityCache();
+    expect(await getAllCapabilityEntries()).toEqual([]);
+    expect(await chrome.storage.local.get("other")).toEqual({ other: 1 });
+  });
+});
diff --git a/web-ext/kernel/dom/capabilities.ts b/web-ext/kernel/dom/capabilities.ts
new file mode 100644
index 00000000..77766720
--- /dev/null
+++ b/web-ext/kernel/dom/capabilities.ts
@@ -0,0 +1,71 @@
+import { EXTENSION_VERSION } from "@/lib/version";
+import { CHROME_STORAGE_LOCAL_KEY } from "@/lib/storageKeys";
+import type { PrimitiveResolution } from "./resolve";
+
+export type CapabilityStatus = "supported" | "unsupported" | "untested";
+
+export type PrimitiveScope =
+  | "watch"
+  | "home"
+  | "search"
+  | "shorts"
+  | "playlist";
+
+export interface CapabilityCacheEntry {
+  primitiveId: string; // e.g. "watch.sidebar"
+  scope: PrimitiveScope;
+  status: CapabilityStatus;
+  resolvedStrategyIndex: number | null;
+  lastCheckedAt: number; // unix ms
+  // Stamped so an upgrade that adds selector strategies invalidates the entry:
+  // a primitive recorded as unsupported may resolve under the new version.
+  extensionVersion: string;
+}
+
+// Kept in extension storage, not IndexedDB: content scripts write the cache,
+// and their IndexedDB belongs to youtube.com, out of reach of the options page
+// and background that read it. One key per primitive, so features recording
+// at the same moment never overwrite each other.
+const PREFIX = CHROME_STORAGE_LOCAL_KEY.CAPABILITY_PREFIX;
+
+export async function getCapabilityStatus(primitiveId: string): Promise<CapabilityStatus> {
+  const key = PREFIX + primitiveId;
+  const entry = (await chrome.storage.local.get(key))[key] as CapabilityCacheEntry | undefined;
+  if (!entry || entry.extensionVersion !== EXTENSION_VERSION) return "untested";
+  return entry.status;
+}
+
+export async function setCapabilityStatus(primitiveId: string, scope: PrimitiveScope, resolution: PrimitiveResolution): Promise<void> {
+  const entry: CapabilityCacheEntry = {
+    primitiveId,
+    scope,
+    status: resolution.resolved ? "supported" : "unsupported",
+    resolvedStrategyIndex: resolution.resolved ? resolution.strategyIndex : null,
+    lastCheckedAt: Date.now(),
+    extensionVersion: EXTENSION_VERSION,
+  };
+  // Swallowed: a content script outliving an extension reload can no longer
+  // reach storage, and a lost entry only costs a re-check on the next page.
+  // An unchanged entry is not rewritten, since each write wakes the background.
+  try {
+    const key = PREFIX + primitiveId;
+    const stored = (await chrome.storage.local.get(key))[key] as CapabilityCacheEntry | undefined;
+    const unchanged = stored?.status === entry.status && stored.resolvedStrategyIndex === entry.resolvedStrategyIndex && stored.extensionVersion === entry.extensionVersion;
+    if (!unchanged) await chrome.storage.local.set({ [key]: entry });
+  } catch {}
+}
+
+async function capabilityKeys(): Promise<string[]> {
+  return Object.keys(await chrome.storage.local.get()).filter((key) => key.startsWith(PREFIX));
+}
+
+export async function getAllCapabilityEntries(): Promise<CapabilityCacheEntry[]> {
+  const keys = await capabilityKeys();
+  if (keys.length === 0) return [];
+  return Object.values(await chrome.storage.local.get(keys)) as CapabilityCacheEntry[];
+}
+
+export async function clearCapabilityCache(): Promise<void> {
+  const keys = await capabilityKeys();
+  if (keys.length) await chrome.storage.local.remove(keys);
+}
diff --git a/web-ext/kernel/dom/credit.ts b/web-ext/kernel/dom/credit.ts
new file mode 100644
index 00000000..c367da8c
--- /dev/null
+++ b/web-ext/kernel/dom/credit.ts
@@ -0,0 +1,3 @@
+// Injected UI carries no Toppings logo so it reads as part of YouTube; the
+// credit lives in the hover tooltip instead.
+export const credit = (label: string) => `${label} · Toppings`;
diff --git a/web-ext/kernel/dom/featureReports.ts b/web-ext/kernel/dom/featureReports.ts
new file mode 100644
index 00000000..5ce364d2
--- /dev/null
+++ b/web-ext/kernel/dom/featureReports.ts
@@ -0,0 +1,58 @@
+// A report is the user saying "this primitive shows as unavailable". Reports
+// stay on the device; their only reader is the post-update check that marks
+// a reported primitive as recovered once it resolves again, so the options
+// page can say it started working.
+
+import { getCurrentVersion } from "@/lib/version";
+import { CHROME_STORAGE_LOCAL_KEY } from "@/lib/storageKeys";
+
+export interface FeatureReport {
+  primitiveId: string;
+  reportedAt: number;
+  reportedVersion: string;
+}
+
+export interface RecoveredFeature {
+  primitiveId: string;
+  recoveredAt: number;
+  dismissedAt: number | null;
+}
+
+const REPORTS = CHROME_STORAGE_LOCAL_KEY.FEATURE_REPORTS;
+const RECOVERED = CHROME_STORAGE_LOCAL_KEY.FEATURE_RECOVERED;
+
+async function readList<T>(key: string): Promise<T[]> {
+  const stored = (await chrome.storage.local.get(key))[key];
+  return Array.isArray(stored) ? (stored as T[]) : [];
+}
+
+const writeList = (key: string, list: unknown[]) => chrome.storage.local.set({ [key]: list });
+
+export const getFeatureReports = () => readList<FeatureReport>(REPORTS);
+
+export async function addFeatureReport(primitiveId: string): Promise<void> {
+  const reports = await getFeatureReports();
+  if (reports.some((r) => r.primitiveId === primitiveId)) return;
+  await writeList(REPORTS, [...reports, { primitiveId, reportedAt: Date.now(), reportedVersion: await getCurrentVersion() }]);
+}
+
+export async function removeFeatureReport(primitiveId: string): Promise<void> {
+  await writeList(REPORTS, (await getFeatureReports()).filter((r) => r.primitiveId !== primitiveId));
+}
+
+export const getRecoveredFeatures = () => readList<RecoveredFeature>(RECOVERED);
+
+export async function markRecovered(primitiveId: string): Promise<void> {
+  const existing = await getRecoveredFeatures();
+  if (existing.some((r) => r.primitiveId === primitiveId && r.dismissedAt === null)) return;
+  await writeList(RECOVERED, [...existing.filter((r) => r.primitiveId !== primitiveId), { primitiveId, recoveredAt: Date.now(), dismissedAt: null }]);
+}
+
+export async function dismissRecovered(primitiveId: string): Promise<void> {
+  const updated = (await getRecoveredFeatures()).map((r) => (r.primitiveId === primitiveId ? { ...r, dismissedAt: Date.now() } : r));
+  await writeList(RECOVERED, updated);
+}
+
+export async function getUndismissedRecovered(): Promise<RecoveredFeature[]> {
+  return (await getRecoveredFeatures()).filter((r) => r.dismissedAt === null);
+}
diff --git a/web-ext/kernel/dom/mount.test.ts b/web-ext/kernel/dom/mount.test.ts
new file mode 100644
index 00000000..bcedc49c
--- /dev/null
+++ b/web-ext/kernel/dom/mount.test.ts
@@ -0,0 +1,25 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { h } from "preact";
+import { mount } from "./mount";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("mount", () => {
+  test("replaces a host left behind by a reloaded extension", () => {
+    document.body.innerHTML = `<div id="tppng-x">stale</div>`;
+    const ui = mount("tppng-x", document.body, h("span", null, "fresh"));
+    expect(document.querySelectorAll("#tppng-x").length).toBe(1);
+    ui.unmount();
+  });
+
+  test("leaves another live mount's host alone, and each unmount removes its own", () => {
+    const live = mount("tppng-x", document.body, h("span", null, "live"));
+    const stale = mount("tppng-x", document.body, h("span", null, "stale"));
+    stale.unmount();
+    expect(document.getElementById("tppng-x")).toBe(live.host);
+    live.unmount();
+    expect(document.getElementById("tppng-x")).toBeNull();
+  });
+});
diff --git a/web-ext/kernel/dom/mount.ts b/web-ext/kernel/dom/mount.ts
new file mode 100644
index 00000000..ea0eba73
--- /dev/null
+++ b/web-ext/kernel/dom/mount.ts
@@ -0,0 +1,51 @@
+import { render, type ComponentChild } from "preact";
+
+export interface Mounted {
+  host: HTMLElement;
+  update(next: ComponentChild): void;
+  unmount(): void;
+}
+
+const liveHosts = new WeakSet<Element>();
+
+// A host with this id that nothing here owns was left by the content script of
+// an extension version since reloaded, and is replaced. One that is owned
+// belongs to another navigation's mount, which removes its own host when the
+// kernel undoes it; removing it here would take the live page's UI with it.
+function removeOrphan(id: string): void {
+  const existing = document.getElementById(id);
+  if (existing && !liveHosts.has(existing)) existing.remove();
+}
+
+function track(host: HTMLElement, render: (ui: ComponentChild) => void, parent: Element, position: "append" | "prepend"): Mounted {
+  liveHosts.add(host);
+  parent[position](host);
+  return {
+    host,
+    update: render,
+    unmount() {
+      render(null);
+      liveHosts.delete(host);
+      host.remove();
+    },
+  };
+}
+
+// Injected UI renders inside a shadow root, so YouTube's stylesheet and ours
+// cannot reach each other.
+export function mount(id: string, parent: Element, ui: ComponentChild, position: "append" | "prepend" = "append"): Mounted {
+  removeOrphan(id);
+  const host = document.createElement("div");
+  host.id = id;
+  const root = host.attachShadow({ mode: "open" });
+  render(ui, root);
+  return track(host, (next) => render(next, root), parent, position);
+}
+
+// For UI that should take YouTube's own styling (a .ytp-button, a menu row):
+// no shadow root, and the caller shapes the host element.
+export function mountInline(host: HTMLElement, parent: Element, ui: ComponentChild, position: "append" | "prepend" = "append"): Mounted {
+  if (host.id) removeOrphan(host.id);
+  render(ui, host);
+  return track(host, (next) => render(next, host), parent, position);
+}
diff --git a/web-ext/kernel/dom/resolve.test.ts b/web-ext/kernel/dom/resolve.test.ts
new file mode 100644
index 00000000..d4736e76
--- /dev/null
+++ b/web-ext/kernel/dom/resolve.test.ts
@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { resolveTarget } from "./resolve";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("resolveTarget", () => {
+  test("prefers the earliest strategy that matches", async () => {
+    document.body.innerHTML = `<div class="b"></div><div class="a"></div>`;
+    const found = await resolveTarget([".a", ".b"]);
+    expect(found.strategyIndex).toBe(0);
+  });
+
+  test("skips elements on a page YouTube has hidden", async () => {
+    document.body.innerHTML = `<ytd-browse hidden><div class="header" id="old"></div></ytd-browse><ytd-browse><div class="header" id="live"></div></ytd-browse>`;
+    const found = await resolveTarget([".header"]);
+    expect(found.element?.id).toBe("live");
+  });
+
+  test("skips elements under display: none", async () => {
+    document.body.innerHTML = `<div style="display: none"><div class="header" id="parked"></div></div><div class="header" id="shown"></div>`;
+    const found = await resolveTarget([".header"]);
+    expect(found.element?.id).toBe("shown");
+  });
+
+  test("waits for a live element to appear", async () => {
+    document.body.innerHTML = `<ytd-browse hidden><div class="header"></div></ytd-browse>`;
+    const pending = resolveTarget([".header"], { timeout: 1000 });
+    setTimeout(() => document.body.insertAdjacentHTML("beforeend", `<div class="header" id="late"></div>`), 20);
+    expect((await pending).element?.id).toBe("late");
+  });
+
+  test("resolves once a hidden page is shown again", async () => {
+    document.body.innerHTML = `<ytd-browse hidden id="page"><div class="header" id="back"></div></ytd-browse>`;
+    const pending = resolveTarget([".header"], { timeout: 1000 });
+    setTimeout(() => document.getElementById("page")!.removeAttribute("hidden"), 20);
+    expect((await pending).element?.id).toBe("back");
+  });
+
+  test("gives up after the timeout", async () => {
+    const found = await resolveTarget([".never"], { timeout: 30 });
+    expect(found.resolved).toBe(false);
+  });
+});
diff --git a/web-ext/kernel/dom/resolve.ts b/web-ext/kernel/dom/resolve.ts
new file mode 100644
index 00000000..6cb9ca0d
--- /dev/null
+++ b/web-ext/kernel/dom/resolve.ts
@@ -0,0 +1,69 @@
+export type PrimitiveResolution =
+  | { resolved: true; element: Element; strategyIndex: number }
+  | { resolved: false; element: null; strategyIndex: null };
+
+export type PrimitiveStrategy = string;
+
+export interface ResolveOptions {
+  timeout?: number;
+}
+
+const UNRESOLVED: PrimitiveResolution = { resolved: false, element: null, strategyIndex: null };
+
+// YouTube keeps the pages you navigated away from alive but hidden, and parks
+// unused layouts under display:none, so a selector can match a header or
+// player that is not on screen. Only rendered elements count.
+function isRendered(element: Element): boolean {
+  return !element.closest("[hidden]") && (element.checkVisibility?.() ?? true);
+}
+
+function findLive(strategies: readonly PrimitiveStrategy[]): PrimitiveResolution | null {
+  for (let i = 0; i < strategies.length; i++) {
+    for (const element of document.querySelectorAll(strategies[i])) {
+      if (isRendered(element)) return { resolved: true, element, strategyIndex: i };
+    }
+  }
+  return null;
+}
+
+// For looking inside a root that was itself resolved live. There YouTube hides
+// elements on purpose (a closed menu, buttons a narrow layout tucks away), and
+// those still count.
+export function findWithin(root: ParentNode, strategies: readonly PrimitiveStrategy[]): PrimitiveResolution {
+  for (let i = 0; i < strategies.length; i++) {
+    const element = root.querySelector(strategies[i]);
+    if (element) return { resolved: true, element, strategyIndex: i };
+  }
+  return UNRESOLVED;
+}
+
+// Strategies are ordered by preference, and the first to match a live element
+// wins. YouTube renders long after load, so this waits for the DOM to change
+// until something matches or the timeout passes. Callers record the result in
+// the capability cache, which is how the options page reports a broken one.
+export function resolveTarget(strategies: readonly PrimitiveStrategy[], { timeout = 10_000 }: ResolveOptions = {}): Promise<PrimitiveResolution> {
+  const found = findLive(strategies);
+  if (found || strategies.length === 0) return Promise.resolve(found ?? UNRESOLVED);
+
+  return new Promise((resolve) => {
+    let pending: ReturnType<typeof setTimeout> | undefined;
+    const finish = (resolution: PrimitiveResolution) => {
+      observer.disconnect();
+      clearTimeout(timer);
+      clearTimeout(pending);
+      resolve(resolution);
+    };
+    const check = () => {
+      pending = undefined;
+      const match = findLive(strategies);
+      if (match) finish(match);
+    };
+    // Batched on a timer rather than an animation frame, which never comes in
+    // a background tab and would leave a page opened there unresolved.
+    const observer = new MutationObserver(() => {
+      pending ??= setTimeout(check, 16);
+    });
+    observer.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["hidden", "class", "style"] });
+    const timer = setTimeout(() => finish(UNRESOLVED), timeout);
+  });
+}
diff --git a/web-ext/kernel/dom/theme.ts b/web-ext/kernel/dom/theme.ts
new file mode 100644
index 00000000..869eda6c
--- /dev/null
+++ b/web-ext/kernel/dom/theme.ts
@@ -0,0 +1,16 @@
+// In-page UI reads YouTube's own colour tokens, which inherit into shadow
+// roots as custom properties, so it follows the page's light or dark theme
+// without a theme of its own. Fallbacks are YouTube's dark values.
+export const themeTokens = `
+  :host {
+    --tp-bg: var(--yt-sys-color-baseline--base-background, #0f0f0f);
+    --tp-raised: var(--yt-sys-color-baseline--raised-background, #212121);
+    --tp-menu: var(--yt-sys-color-baseline--menu-background, #282828);
+    --tp-text: var(--yt-sys-color-baseline--text-primary, #f1f1f1);
+    --tp-text-2: var(--yt-sys-color-baseline--text-secondary, #aaa);
+    --tp-outline: var(--yt-sys-color-baseline--outline, rgba(255, 255, 255, .2));
+    --tp-additive: var(--yt-sys-color-baseline--additive-background, rgba(255, 255, 255, .1));
+    --tp-accent: var(--yt-sys-color-baseline--call-to-action, #3ea6ff);
+    --tp-font: "YouTube Sans", Roboto, Arial, sans-serif;
+  }
+`;
diff --git a/web-ext/kernel/dom/toast.tsx b/web-ext/kernel/dom/toast.tsx
new file mode 100644
index 00000000..f46ad639
--- /dev/null
+++ b/web-ext/kernel/dom/toast.tsx
@@ -0,0 +1,33 @@
+import { mount } from "./mount";
+
+const style = `
+  .toast {
+    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 2147483647;
+    padding: 8px 16px; border-radius: 8px; white-space: nowrap; pointer-events: none; user-select: none;
+    background: rgba(15, 15, 15, .88); backdrop-filter: blur(8px); color: #fff;
+    font: 500 13px/1.4 Roboto, system-ui, sans-serif; letter-spacing: .01em;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
+    opacity: 0; transition: opacity .15s ease;
+  }
+  .toast[data-visible] { opacity: 1; }
+`;
+
+let ui: ReturnType<typeof mount> | undefined;
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+function Toast({ message, visible }: { message: string; visible: boolean }) {
+  return (
+    <>
+      <style>{style}</style>
+      <div class="toast" data-visible={visible || undefined}>{message}</div>
+    </>
+  );
+}
+
+// One shared element: rapid calls replace the message rather than stacking.
+export function showToast(message: string, duration = 2000): void {
+  if (!ui || !ui.host.isConnected) ui = mount("tppng-toast", document.body, <Toast message={message} visible={false} />);
+  ui.update(<Toast message={message} visible />);
+  clearTimeout(timer);
+  timer = setTimeout(() => ui?.update(<Toast message={message} visible={false} />), duration);
+}
diff --git a/web-ext/kernel/dom/useCapabilities.ts b/web-ext/kernel/dom/useCapabilities.ts
new file mode 100644
index 00000000..8ac26e39
--- /dev/null
+++ b/web-ext/kernel/dom/useCapabilities.ts
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "preact/hooks";
+import {
+  getAllCapabilityEntries,
+  clearCapabilityCache,
+  type CapabilityCacheEntry,
+  type CapabilityStatus,
+} from "./capabilities";
+
+export type CapabilityMap = Map<string, CapabilityCacheEntry>;
+
+interface UseCapabilityCacheResult {
+  capabilities: CapabilityMap;
+  isLoading: boolean;
+  getStatus: (primitiveId: string) => CapabilityStatus;
+  rescan: () => Promise<void>;
+}
+
+// rescan only clears the cache — the actual re-probe happens on the next
+// YouTube navigation, so the UI cannot show fresh results immediately.
+export function useCapabilityCache(): UseCapabilityCacheResult {
+  const [capabilities, setCapabilities] = useState<CapabilityMap>(new Map());
+  const [isLoading, setIsLoading] = useState(true);
+
+  const load = async () => {
+    setIsLoading(true);
+    const entries = await getAllCapabilityEntries();
+    setCapabilities(new Map(entries.map((e) => [e.primitiveId, e])));
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  const getStatus = (primitiveId: string): CapabilityStatus => {
+    return capabilities.get(primitiveId)?.status ?? "untested";
+  };
+
+  const rescan = async () => {
+    await clearCapabilityCache();
+    await load();
+  };
+
+  return { capabilities, isLoading, getStatus, rescan };
+}
diff --git a/web-ext/kernel/features.test.ts b/web-ext/kernel/features.test.ts
new file mode 100644
index 00000000..da444e92
--- /dev/null
+++ b/web-ext/kernel/features.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, test } from "bun:test";
+import type { Route } from "@/youtube/route";
+import { bootFeatures, type Feature } from "./features";
+
+const watch: Route = { name: "watch", videoId: "v1", playlistId: null };
+const settle = () => new Promise((r) => setTimeout(r, 0));
+
+function navigator() {
+  let listener: (route: Route) => void = () => {};
+  return {
+    onNavigate: (l: (route: Route) => void) => (listener = l),
+    go: (route: Route) => listener(route),
+  };
+}
+
+describe("bootFeatures", () => {
+  test("a mount that finishes after the next navigation is undone", async () => {
+    const nav = navigator();
+    let release!: () => void;
+    let unmounts = 0;
+    const slow: Feature = { id: "slow", routes: ["watch"], mount: () => new Promise((r) => (release = () => r(() => unmounts++))) };
+    bootFeatures([slow], nav.onNavigate);
+
+    nav.go(watch);
+    await settle();
+    const stale = release;
+    nav.go({ name: "home" });
+    stale();
+    await settle();
+    expect(unmounts).toBe(1);
+  });
+
+  test("features mount without waiting for each other, and see the navigation end", async () => {
+    const nav = navigator();
+    let signal: AbortSignal | undefined;
+    let quickMounted = false;
+    const slow: Feature = { id: "slow", routes: ["watch"], mount: (ctx) => new Promise(() => void (signal = ctx.signal)) };
+    const quick: Feature = { id: "quick", routes: ["watch"], mount: () => void (quickMounted = true) };
+    bootFeatures([slow, quick], nav.onNavigate);
+
+    nav.go(watch);
+    await settle();
+    expect(quickMounted).toBe(true);
+    expect(signal?.aborted).toBe(false);
+    nav.go({ name: "home" });
+    expect(signal?.aborted).toBe(true);
+  });
+
+  test("stop unmounts everything and ignores later navigations", async () => {
+    const nav = navigator();
+    let mounts = 0;
+    let unmounts = 0;
+    const feature: Feature = { id: "f", routes: ["watch", "home"], mount: () => (mounts++, () => unmounts++) };
+    const booted = bootFeatures([feature], nav.onNavigate);
+    nav.go(watch);
+    await settle();
+    booted.stop();
+    expect(unmounts).toBe(1);
+    nav.go({ name: "home" });
+    booted.refresh();
+    await settle();
+    expect(mounts).toBe(1);
+  });
+
+  test("the previous route's features unmount on navigation", async () => {
+    const nav = navigator();
+    let unmounts = 0;
+    const feature: Feature = { id: "f", routes: ["watch"], mount: () => () => unmounts++ };
+    bootFeatures([feature], nav.onNavigate);
+    nav.go(watch);
+    await settle();
+    nav.go({ name: "home" });
+    await settle();
+    expect(unmounts).toBe(1);
+  });
+});
diff --git a/web-ext/kernel/features.ts b/web-ext/kernel/features.ts
new file mode 100644
index 00000000..915b1c4e
--- /dev/null
+++ b/web-ext/kernel/features.ts
@@ -0,0 +1,82 @@
+import type { Route, RouteName } from "@/youtube/route";
+
+export type Unmount = () => void;
+
+export interface FeatureContext {
+  route: Route;
+  // Aborted by the next navigation, for a mount with slow steps to stop early.
+  signal: AbortSignal;
+}
+
+// A feature declares where it runs and how to start and stop. The kernel
+// mounts it on every navigation that lands on one of its routes and unmounts
+// it on the next navigation, so features never have to be idempotent
+// against a page they did not start on.
+export interface Feature {
+  id: string;
+  routes: readonly RouteName[];
+  mount(ctx: FeatureContext): Promise<Unmount | void> | Unmount | void;
+}
+
+export interface BootOptions {
+  // Consulted on every navigation; false unmounts everything and mounts nothing.
+  enabled?: () => boolean;
+}
+
+export interface Booted {
+  // Re-runs the current route, e.g. after the enabled switch flips.
+  refresh(): void;
+  // Unmounts everything and ignores later navigations, for handing the page
+  // to a newer copy of the content script.
+  stop(): void;
+}
+
+export function bootFeatures(features: readonly Feature[], onNavigate: (listener: (route: Route) => void) => void, { enabled = () => true }: BootOptions = {}): Booted {
+  const mounted = new Map<string, Unmount>();
+  let navigation: AbortController | undefined;
+  let current: Route | undefined;
+  let stopped = false;
+
+  const navigate = async (route: Route) => {
+    if (stopped) return;
+    current = route;
+    navigation?.abort();
+    const own = (navigation = new AbortController());
+    for (const [id, unmount] of mounted) {
+      mounted.delete(id);
+      unmount();
+    }
+    if (!enabled() || stopped) return;
+    // Started together, so one feature waiting on the network or on an element
+    // that never renders holds up none of the others.
+    await Promise.all(
+      features
+        .filter((feature) => feature.routes.includes(route.name))
+        .map(async (feature) => {
+          try {
+            const unmount = await feature.mount({ route, signal: own.signal });
+            // A navigation that happened while mounting owns the page now.
+            if (own.signal.aborted) unmount?.();
+            else if (unmount) mounted.set(feature.id, unmount);
+          } catch (error) {
+            console.error(`[toppings] ${feature.id} failed to mount`, error);
+          }
+        }),
+    );
+  };
+
+  onNavigate((route) => void navigate(route));
+  return {
+    refresh() {
+      if (current) void navigate(current);
+    },
+    stop() {
+      stopped = true;
+      navigation?.abort();
+      for (const [id, unmount] of mounted) {
+        mounted.delete(id);
+        unmount();
+      }
+    },
+  };
+}
diff --git a/web-ext/kernel/keybinding.test.ts b/web-ext/kernel/keybinding.test.ts
new file mode 100644
index 00000000..82fd0f38
--- /dev/null
+++ b/web-ext/kernel/keybinding.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, test } from "bun:test";
+import { matchesBinding } from "./keybinding";
+
+const key = (k: string, init: KeyboardEventInit = {}) => new KeyboardEvent("keydown", { key: k, ...init });
+
+describe("matchesBinding", () => {
+  test("modifiers must match exactly", () => {
+    expect(matchesBinding(key("q", { shiftKey: true }), "Shift+Q")).toBe(true);
+    expect(matchesBinding(key("q", { shiftKey: true }), "Q")).toBe(false);
+  });
+
+  test("modifier names match regardless of case", () => {
+    expect(matchesBinding(key("1", { ctrlKey: true }), "ctrl+1")).toBe(true);
+    expect(matchesBinding(key("1"), "ctrl+1")).toBe(false);
+  });
+
+  test("an unknown modifier never matches", () => {
+    expect(matchesBinding(key("1"), "Hyper+1")).toBe(false);
+  });
+});
diff --git a/web-ext/kernel/keybinding.ts b/web-ext/kernel/keybinding.ts
new file mode 100644
index 00000000..55dc2f7a
--- /dev/null
+++ b/web-ext/kernel/keybinding.ts
@@ -0,0 +1,74 @@
+export const MODIFIER_KEYS = ["Ctrl", "Alt", "Shift", "Meta"] as const;
+export type ModifierKey = (typeof MODIFIER_KEYS)[number];
+
+const MODIFIER_KEY_VALUES = new Set([
+  "Control", "Alt", "Shift", "Meta",
+  "CapsLock", "NumLock", "ScrollLock",
+]);
+
+const MODIFIER_SYMBOLS: Record<ModifierKey, string> = {
+  Ctrl: "⌃",
+  Alt: "⌥",
+  Shift: "⇧",
+  Meta: "⌘",
+};
+
+export function formatBindingDisplay(combo: string): string {
+  if (!combo) return "";
+  return combo
+    .split("+")
+    .map((part) => MODIFIER_SYMBOLS[part as ModifierKey] ?? part)
+    .join("");
+}
+
+// null for a modifier-only or non-alphanumeric press, which callers treat as
+// "keep listening" rather than as a binding.
+export function recordBinding(e: KeyboardEvent): string | null {
+  if (MODIFIER_KEY_VALUES.has(e.key)) return null;
+  const baseKey = e.key.toUpperCase();
+  if (!/^[A-Z0-9]$/.test(baseKey)) return null;
+
+  const modState: Record<ModifierKey, boolean> = {
+    Ctrl: e.ctrlKey,
+    Alt: e.altKey,
+    Shift: e.shiftKey,
+    Meta: e.metaKey,
+  };
+  const parts: string[] = MODIFIER_KEYS.filter((m) => modState[m]);
+  parts.push(baseKey);
+
+  return parts.join("+");
+}
+
+// Modifiers must match exactly, so a binding of "Q" deliberately does not fire
+// while Shift is held — that combo belongs to "Shift+Q".
+export function matchesBinding(event: KeyboardEvent, binding: string): boolean {
+  if (!binding) return false;
+
+  const parts = binding.split("+");
+  const storedKey = parts[parts.length - 1].toUpperCase();
+  const mods = new Set(parts.slice(0, -1).map((name) => MODIFIER_KEYS.find((m) => m.toLowerCase() === name.toLowerCase())));
+  if (mods.has(undefined)) return false;
+
+  const modState: Record<ModifierKey, boolean> = {
+    Ctrl: event.ctrlKey,
+    Alt: event.altKey,
+    Shift: event.shiftKey,
+    Meta: event.metaKey,
+  };
+
+  return (
+    event.key.toUpperCase() === storedKey &&
+    MODIFIER_KEYS.every((m) => mods.has(m) === modState[m])
+  );
+}
+
+// A key typed into a field inside one of Toppings' shadow roots reaches the
+// document retargeted to the shadow host, so the field is found through the
+// roots' focus instead.
+export function isTypingTarget(target: EventTarget | null): boolean {
+  let el = target as HTMLElement | null;
+  while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement as HTMLElement;
+  if (!el) return false;
+  return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT" || el.isContentEditable;
+}
diff --git a/web-ext/kernel/keys.test.ts b/web-ext/kernel/keys.test.ts
new file mode 100644
index 00000000..ce37a957
--- /dev/null
+++ b/web-ext/kernel/keys.test.ts
@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+import { actionId, bindKeys, bindingOf, defineKeys, keybindings } from "./keys";
+
+const group = defineKeys({
+  id: "demo",
+  title: "Demo",
+  keys: {
+    go: { label: "Go", defaultBinding: "G" },
+    back: { label: "Back", defaultBinding: "Shift+B" },
+  },
+});
+
+const press = (key: string, init: KeyboardEventInit = {}, target: EventTarget = document.body) =>
+  target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, ...init }));
+
+beforeEach(async () => {
+  await chrome.storage.sync.clear();
+  document.body.innerHTML = "";
+});
+
+describe("key bindings", () => {
+  test("default bindings run their handler and nothing else", () => {
+    const ran: string[] = [];
+    const unbind = bindKeys(group, { go: () => ran.push("go"), back: () => ran.push("back") });
+    press("g");
+    press("b", { shiftKey: true });
+    press("b");
+    unbind();
+    expect(ran).toEqual(["go", "back"]);
+  });
+
+  test("unbound handlers no longer run", () => {
+    let count = 0;
+    const unbind = bindKeys(group, { go: () => count++, back: () => {} });
+    unbind();
+    press("g");
+    expect(count).toBe(0);
+  });
+
+  test("keys are ignored while typing", () => {
+    document.body.innerHTML = `<input id="i">`;
+    let count = 0;
+    const unbind = bindKeys(group, { go: () => count++, back: () => {} });
+    press("g", {}, document.getElementById("i")!);
+    unbind();
+    expect(count).toBe(0);
+  });
+
+  test("keys are ignored while typing in a field inside a shadow root", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const input = host.attachShadow({ mode: "open" }).appendChild(document.createElement("input"));
+    input.focus();
+    let count = 0;
+    const unbind = bindKeys(group, { go: () => count++, back: () => {} });
+    // Dispatched from the host, as a browser retargets it on leaving the shadow root.
+    press("g", {}, host);
+    unbind();
+    expect(count).toBe(0);
+  });
+
+  test("a stored binding overrides the default", async () => {
+    await keybindings.set({ [actionId(group, "go")]: "K" });
+    expect(bindingOf(group, "go", await keybindings.get())).toBe("K");
+    expect(bindingOf(group, "back", await keybindings.get())).toBe("Shift+B");
+  });
+});
diff --git a/web-ext/kernel/keys.ts b/web-ext/kernel/keys.ts
new file mode 100644
index 00000000..e5d295d3
--- /dev/null
+++ b/web-ext/kernel/keys.ts
@@ -0,0 +1,62 @@
+import { isTypingTarget, matchesBinding } from "./keybinding";
+import { defineSettings } from "./settings";
+
+export interface KeyDefinition {
+  label: string;
+  description?: string;
+  defaultBinding: string;
+}
+
+// A feature declares its actions once, statically, so the options page can
+// list them without mounting anything; handlers arrive at mount time.
+export interface KeyGroup<K extends string = string> {
+  id: string;
+  title: string;
+  keys: Record<K, KeyDefinition>;
+}
+
+// Only bindings the user changed are stored, by action id ("shorts.seekForward").
+export const keybindings = defineSettings<Record<string, string>>("keybindings", {});
+
+interface Binding {
+  group: KeyGroup;
+  key: string;
+  run: () => void;
+}
+
+let active: Binding[] = [];
+let stored: Record<string, string> = {};
+let installed = false;
+
+export function defineKeys<K extends string>(group: KeyGroup<K>): KeyGroup<K> {
+  return group;
+}
+
+export function actionId(group: KeyGroup, key: string): string {
+  return `${group.id}.${key}`;
+}
+
+export function bindingOf(group: KeyGroup, key: string, stored: Record<string, string>): string {
+  return stored[actionId(group, key)] ?? group.keys[key].defaultBinding;
+}
+
+function install(): void {
+  if (installed) return;
+  installed = true;
+  void keybindings.get().then((value) => (stored = value));
+  keybindings.subscribe((value) => (stored = value));
+  document.addEventListener("keydown", (event) => {
+    if (isTypingTarget(event.target)) return;
+    const hit = active.find((b) => matchesBinding(event, bindingOf(b.group, b.key, stored)));
+    hit?.run();
+  });
+}
+
+export function bindKeys<K extends string>(group: KeyGroup<K>, handlers: Record<K, () => void>): () => void {
+  install();
+  const added: Binding[] = (Object.keys(handlers) as K[]).map((key) => ({ group, key, run: handlers[key] }));
+  active.push(...added);
+  return () => {
+    active = active.filter((b) => !added.includes(b));
+  };
+}
diff --git a/web-ext/kernel/messaging.ts b/web-ext/kernel/messaging.ts
new file mode 100644
index 00000000..674a6808
--- /dev/null
+++ b/web-ext/kernel/messaging.ts
@@ -0,0 +1,53 @@
+// Typed request/response between a page and the background. Messages are
+// objects with a `kind`; the older string protocol on the same channel ignores
+// them, and this listener ignores strings.
+
+type Handler<Req, Res> = (request: Req, sender: chrome.runtime.MessageSender) => Promise<Res>;
+
+interface Envelope {
+  kind: string;
+  request: unknown;
+}
+
+const handlers = new Map<string, Handler<unknown, unknown>>();
+let listening = false;
+
+function listen(): void {
+  if (listening) return;
+  listening = true;
+  chrome.runtime.onMessage.addListener((message: unknown, sender, sendResponse) => {
+    if (typeof message !== "object" || message === null || !("kind" in message)) return false;
+    const handler = handlers.get((message as Envelope).kind);
+    if (!handler) return false;
+    handler((message as Envelope).request, sender).then(
+      (response) => sendResponse({ response }),
+      (error: unknown) => sendResponse({ error: String(error) }),
+    );
+    return true;
+  });
+}
+
+export interface Message<Req, Res> {
+  kind: string;
+  send(request: Req): Promise<Res>;
+  handle(handler: Handler<Req, Res>): void;
+}
+
+export function defineMessage<Req, Res>(kind: string): Message<Req, Res> {
+  return {
+    kind,
+    async send(request) {
+      const reply = (await chrome.runtime.sendMessage({ kind, request } satisfies Envelope)) as
+        | { response: Res }
+        | { error: string }
+        | undefined;
+      if (!reply) throw new Error(`no handler for ${kind}`);
+      if ("error" in reply) throw new Error(reply.error);
+      return reply.response;
+    },
+    handle(handler) {
+      handlers.set(kind, handler as Handler<unknown, unknown>);
+      listen();
+    },
+  };
+}
diff --git a/web-ext/kernel/primitives.test.ts b/web-ext/kernel/primitives.test.ts
new file mode 100644
index 00000000..b5097863
--- /dev/null
+++ b/web-ext/kernel/primitives.test.ts
@@ -0,0 +1,94 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { definePrimitive, runPrimitives } from "./primitives";
+
+const hide = definePrimitive<{ visible: boolean }>({
+  id: "watch.box",
+  label: "Box",
+  routes: ["watch"],
+  strategies: ["#missing", ".box"],
+  parse: () => undefined,
+  apply: (el, { visible }) => (el.style.display = visible ? "" : "none"),
+  reset: (el) => (el.style.display = ""),
+});
+
+const blur = definePrimitive<{ mode: string }>({
+  id: "home.thumbs",
+  label: "Thumbs",
+  routes: ["home"],
+  strategies: ["img"],
+  all: true,
+  parse: () => undefined,
+  apply: (el, { mode }) => (el.style.filter = mode === "blur" ? "blur(12px)" : ""),
+  reset: (el) => (el.style.filter = ""),
+});
+
+const frame = () => new Promise((r) => requestAnimationFrame(() => r(undefined)));
+const box = () => document.querySelector<HTMLElement>(".box")!;
+
+beforeEach(() => {
+  document.body.innerHTML = `<div class="box"></div><div class="other"></div>`;
+});
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("runPrimitives", () => {
+  test("applies on start and restores on stop", () => {
+    const run = runPrimitives([hide], { "watch.box": { visible: false } }, "watch");
+    expect(box().style.display).toBe("none");
+    run.stop();
+    expect(box().style.display).toBe("");
+  });
+
+  test("acts on the live page, not one YouTube keeps hidden after navigating away", () => {
+    document.body.innerHTML = `<ytd-browse hidden><div class="box" id="parked"></div></ytd-browse><div class="box" id="live"></div>`;
+    const run = runPrimitives([hide], { "watch.box": { visible: false } }, "watch");
+    expect(document.getElementById("parked")!.style.display).toBe("");
+    expect(document.getElementById("live")!.style.display).toBe("none");
+    run.stop();
+  });
+
+  test("ignores primitives for other routes and absent values", () => {
+    const run = runPrimitives([hide, blur], {}, "watch");
+    expect(box().style.display).toBe("");
+    run.stop();
+  });
+
+  test("keeps applying as the page re-renders", async () => {
+    document.body.innerHTML = `<img id="a">`;
+    const run = runPrimitives([blur], { "home.thumbs": { mode: "blur" } }, "home");
+    expect(document.getElementById("a")!.style.filter).toBe("blur(12px)");
+    const late = document.createElement("img");
+    late.id = "b";
+    document.body.append(late);
+    await frame();
+    await frame();
+    expect(late.style.filter).toBe("blur(12px)");
+    run.stop();
+    expect(late.style.filter).toBe("");
+  });
+
+  test("resets an element the selector no longer matches", async () => {
+    const run = runPrimitives([hide], { "watch.box": { visible: false } }, "watch");
+    const first = box();
+    first.className = "other";
+    const next = document.createElement("div");
+    next.className = "box";
+    document.body.append(next);
+    await frame();
+    await frame();
+    expect(first.style.display).toBe("");
+    expect(next.style.display).toBe("none");
+    run.stop();
+  });
+
+  test("set changes a value at runtime", () => {
+    const run = runPrimitives([hide], {}, "watch");
+    run.set("watch.box", { visible: false });
+    expect(box().style.display).toBe("none");
+    expect(run.get("watch.box")).toEqual({ visible: false });
+    run.set("watch.box", { visible: true });
+    expect(box().style.display).toBe("");
+    run.stop();
+  });
+});
diff --git a/web-ext/kernel/primitives.ts b/web-ext/kernel/primitives.ts
new file mode 100644
index 00000000..ef3f4f78
--- /dev/null
+++ b/web-ext/kernel/primitives.ts
@@ -0,0 +1,112 @@
+import type { RouteName } from "@/youtube/route";
+import { resolveTarget } from "./dom/resolve";
+import { setCapabilityStatus, type PrimitiveScope } from "./dom/capabilities";
+
+// A primitive is one knob on YouTube's page: what to find and how to set it
+// to a value. Apply must be idempotent, because it is re-run whenever the
+// page re-renders; reset must undo apply on the same element.
+export interface Primitive<V = unknown> {
+  id: string;
+  label: string;
+  routes: readonly RouteName[];
+  strategies: readonly string[];
+  // Every match rather than the first, for feeds that render many of a thing.
+  all?: boolean;
+  parse(value: unknown): V | undefined;
+  apply(element: HTMLElement, value: V): void;
+  reset(element: HTMLElement): void;
+}
+
+export function definePrimitive<V>(primitive: Primitive<V>): Primitive<V> {
+  return primitive;
+}
+
+export function scopeOf(primitive: Primitive): PrimitiveScope {
+  return primitive.id.split(".")[0] as PrimitiveScope;
+}
+
+export type PrimitiveValues = Record<string, unknown>;
+
+export interface PrimitiveRun {
+  get(id: string): unknown;
+  set(id: string, value: unknown): void;
+  stop(): void;
+}
+
+// Pages YouTube keeps alive after navigating away sit under a hidden
+// ancestor. Being on screen cannot be the test, since hiding is what many
+// primitives do.
+const onLivePage = (element: Element) => !element.closest("[hidden]");
+
+// Keeps a set of values applied to the page until stopped: YouTube re-renders
+// feeds as they scroll and moves the player between containers, so a single
+// pass would drift out of date within seconds.
+export function runPrimitives(primitives: readonly Primitive[], initial: PrimitiveValues, route: RouteName): PrimitiveRun {
+  const onRoute = primitives.filter((p) => p.routes.includes(route));
+  const values: PrimitiveValues = { ...initial };
+  const touched = new Map<Primitive, Set<HTMLElement>>(onRoute.map((p) => [p, new Set()]));
+  let stopped = false;
+  let frame: number | undefined;
+
+  const matches = (p: Primitive): HTMLElement[] => {
+    if (p.all) return [...document.querySelectorAll<HTMLElement>(p.strategies.join(", "))].filter(onLivePage);
+    for (const strategy of p.strategies) {
+      const element = [...document.querySelectorAll<HTMLElement>(strategy)].find(onLivePage);
+      if (element) return [element];
+    }
+    return [];
+  };
+
+  const apply = () => {
+    for (const p of onRoute) {
+      const value = values[p.id];
+      const seen = touched.get(p)!;
+      const current = value === undefined ? [] : matches(p);
+      for (const el of seen) {
+        if (!current.includes(el)) {
+          p.reset(el);
+          seen.delete(el);
+        }
+      }
+      for (const el of current) {
+        p.apply(el, value);
+        seen.add(el);
+      }
+    }
+  };
+
+  const schedule = () => {
+    if (frame !== undefined) return;
+    frame = requestAnimationFrame(() => {
+      frame = undefined;
+      if (!stopped) apply();
+    });
+  };
+
+  const observer = new MutationObserver(schedule);
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  for (const p of onRoute) {
+    if (values[p.id] === undefined) continue;
+    void resolveTarget(p.strategies).then((resolution) => {
+      void setCapabilityStatus(p.id, scopeOf(p), resolution);
+      if (!stopped) schedule();
+    });
+  }
+  apply();
+
+  return {
+    get: (id) => values[id],
+    set(id, value) {
+      values[id] = value;
+      apply();
+    },
+    stop() {
+      stopped = true;
+      if (frame !== undefined) cancelAnimationFrame(frame);
+      observer.disconnect();
+      for (const [p, seen] of touched) for (const el of seen) p.reset(el);
+      touched.clear();
+    },
+  };
+}
diff --git a/web-ext/kernel/settings.test.ts b/web-ext/kernel/settings.test.ts
new file mode 100644
index 00000000..a7fa4636
--- /dev/null
+++ b/web-ext/kernel/settings.test.ts
@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, test } from "bun:test";
+import { defineSettings, migrateSettings } from "./settings";
+
+const slice = defineSettings("demo", { enabled: true, size: 3 }, {
+  legacy: (store) => {
+    const legacy = store.preferences as { demo?: { isEnabled: boolean } } | undefined;
+    return legacy?.demo ? { enabled: legacy.demo.isEnabled } : undefined;
+  },
+});
+
+beforeEach(() => chrome.storage.sync.clear());
+
+describe("settings slice", () => {
+  test("reads defaults when nothing is stored", async () => {
+    expect(await slice.get()).toEqual({ enabled: true, size: 3 });
+  });
+
+  test("merges a partial patch and keeps other keys", async () => {
+    await slice.set({ size: 5 });
+    expect(await slice.get()).toEqual({ enabled: true, size: 5 });
+  });
+
+  test("fills in a setting added after the user's last write", async () => {
+    await chrome.storage.sync.set({ [slice.key]: { enabled: false } });
+    expect(await slice.get()).toEqual({ enabled: false, size: 3 });
+  });
+});
+
+describe("legacy migration", () => {
+  test("copies the old value once, then leaves the slice alone", async () => {
+    await chrome.storage.sync.set({ preferences: { demo: { isEnabled: false } } });
+    await migrateSettings([slice]);
+    expect(await slice.get()).toEqual({ enabled: false, size: 3 });
+
+    await slice.set({ enabled: true });
+    await migrateSettings([slice]);
+    expect((await slice.get()).enabled).toBe(true);
+  });
+
+  test("two writes in the same tick both land", async () => {
+    await Promise.all([slice.set({ enabled: false }), slice.set({ size: 9 })]);
+    expect(await slice.get()).toEqual({ enabled: false, size: 9 });
+  });
+
+  test("writes nothing when there is no legacy value", async () => {
+    await migrateSettings([slice]);
+    expect(await chrome.storage.sync.get()).toEqual({});
+  });
+});
diff --git a/web-ext/kernel/settings.ts b/web-ext/kernel/settings.ts
new file mode 100644
index 00000000..e8929196
--- /dev/null
+++ b/web-ext/kernel/settings.ts
@@ -0,0 +1,79 @@
+// Each feature owns one settings slice under its own storage key, so writing
+// one feature's settings can never touch another's. The slice is read with its
+// defaults merged in, which is also how a new setting reaches existing users.
+
+export type StorageArea = "sync" | "local";
+
+export interface SettingsOptions<T extends object> {
+  // Sync by default; local for data too large or too personal to roam.
+  area?: StorageArea;
+  legacy?: (store: Record<string, unknown>) => Partial<T> | undefined;
+}
+
+export interface Settings<T extends object> {
+  key: string;
+  area: StorageArea;
+  defaults: T;
+  get(): Promise<T>;
+  set(patch: Partial<T>): Promise<void>;
+  subscribe(listener: (value: T) => void): () => void;
+  legacy?: (store: Record<string, unknown>) => Partial<T> | undefined;
+}
+
+export function defineSettings<T extends object>(
+  id: string,
+  defaults: T,
+  { area = "sync", legacy }: SettingsOptions<T> = {},
+): Settings<T> {
+  const key = `settings:${id}`;
+  const storage = chrome.storage[area];
+  // Writes are merged into what is stored, so two made in the same tick would
+  // both merge into the same old value and one would be lost; they queue.
+  let writing = Promise.resolve();
+
+  const get = async (): Promise<T> => {
+    const stored = await storage.get(key);
+    return { ...defaults, ...(stored[key] as Partial<T> | undefined) };
+  };
+
+  return {
+    key,
+    area,
+    defaults,
+    legacy,
+    get,
+    set(patch) {
+      const write = writing.then(async () => {
+        const current = await get();
+        await storage.set({ [key]: { ...current, ...patch } });
+      });
+      writing = write.catch(() => {});
+      return write;
+    },
+    subscribe(listener) {
+      const onChanged = (changes: Record<string, chrome.storage.StorageChange>, changedArea: string) => {
+        if (changedArea !== area || !(key in changes)) return;
+        listener({ ...defaults, ...(changes[key].newValue as Partial<T> | undefined) });
+      };
+      chrome.storage.onChanged.addListener(onChanged);
+      return () => chrome.storage.onChanged.removeListener(onChanged);
+    },
+  };
+}
+
+// Runs once per slice: copies the value out of the pre-kernel store shape
+// when the slice has never been written.
+export async function migrateSettings(slices: Settings<object>[]): Promise<void> {
+  const stores = {
+    sync: (await chrome.storage.sync.get(undefined)) as Record<string, unknown>,
+    local: (await chrome.storage.local.get(undefined)) as Record<string, unknown>,
+  };
+  for (const slice of slices) {
+    const all = stores[slice.area];
+    if (!slice.legacy || slice.key in all) continue;
+    // A mapper may hand back undefined for fields the old store lacked; those
+    // must not shadow the defaults.
+    const value = Object.fromEntries(Object.entries(slice.legacy(all) ?? {}).filter(([, v]) => v !== undefined));
+    if (Object.keys(value).length) await chrome.storage[slice.area].set({ [slice.key]: { ...slice.defaults, ...value } });
+  }
+}
diff --git a/web-ext/kernel/useSettings.ts b/web-ext/kernel/useSettings.ts
new file mode 100644
index 00000000..ec0d720b
--- /dev/null
+++ b/web-ext/kernel/useSettings.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from "preact/hooks";
+import type { Settings } from "./settings";
+
+// Component binding for a settings slice, for the popup and options pages.
+export function useSettings<T extends object>(settings: Settings<T>): {
+  value: T;
+  update: (patch: Partial<T>) => void;
+} {
+  const [value, setValue] = useState<T>(settings.defaults);
+
+  useEffect(() => {
+    let live = true;
+    void settings.get().then((v) => live && setValue(v));
+    const unsubscribe = settings.subscribe(setValue);
+    return () => {
+      live = false;
+      unsubscribe();
+    };
+  }, [settings]);
+
+  return {
+    value,
+    update: (patch) => {
+      setValue((v) => ({ ...v, ...patch }));
+      void settings.set(patch);
+    },
+  };
+}
diff --git a/web-ext/lib/audioTap.ts b/web-ext/lib/audioTap.ts
new file mode 100644
index 00000000..671fac13
--- /dev/null
+++ b/web-ext/lib/audioTap.ts
@@ -0,0 +1,42 @@
+const FFT_SIZE = 512;
+const SMOOTHING = 0.82;
+
+let context: AudioContext | undefined;
+const analysers = new WeakMap<HTMLMediaElement, AnalyserNode>();
+const untappable = new WeakSet<HTMLMediaElement>();
+
+// Taking a media element's audio is one-way: after createMediaElementSource
+// it sounds only through this context, and only while the context runs. A new
+// context stays suspended until the page sees a user gesture, so the element
+// is taken only once the context is running, never leaving it silent; until
+// then this returns null.
+export function analyserFor(media: HTMLMediaElement): AnalyserNode | null {
+  const existing = analysers.get(media);
+  if (existing || untappable.has(media)) return existing ?? null;
+  context ??= createContext();
+  if (context.state !== "running") return null;
+  try {
+    const source = context.createMediaElementSource(media);
+    const analyser = context.createAnalyser();
+    analyser.fftSize = FFT_SIZE;
+    analyser.smoothingTimeConstant = SMOOTHING;
+    source.connect(context.destination);
+    source.connect(analyser);
+    analysers.set(media, analyser);
+    return analyser;
+  } catch {
+    // An element can be taken once per page, so after an extension reload the
+    // previous content script still holds it.
+    untappable.add(media);
+    return null;
+  }
+}
+
+function createContext(): AudioContext {
+  const created = new AudioContext();
+  const resume = () => void created.resume();
+  document.addEventListener("pointerdown", resume, { capture: true, once: true });
+  document.addEventListener("keydown", resume, { capture: true, once: true });
+  resume();
+  return created;
+}
diff --git a/web-ext/lib/brand.ts b/web-ext/lib/brand.ts
new file mode 100644
index 00000000..7d84eb4c
--- /dev/null
+++ b/web-ext/lib/brand.ts
@@ -0,0 +1,5 @@
+export const BRAND_METADATA = {
+  NAME: "Toppings",
+  TAGLINE: "Your YouTube, Your Way.",
+  ID: "toppings@enry.ch",
+} as const;
diff --git a/web-ext/lib/duration.ts b/web-ext/lib/duration.ts
new file mode 100644
index 00000000..c719547e
--- /dev/null
+++ b/web-ext/lib/duration.ts
@@ -0,0 +1,9 @@
+// YouTube's own clock format: 3:37:34, 21:45, 0:08.
+export function formatClock(seconds: number): string {
+  const s = Math.floor(seconds);
+  const m = Math.floor(s / 60);
+  const h = Math.floor(m / 60);
+  const ss = String(s % 60).padStart(2, "0");
+  const mm = String(m % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${mm}:${ss}` : `${m}:${ss}`;
+}
diff --git a/web-ext/lib/indexedDb.ts b/web-ext/lib/indexedDb.ts
new file mode 100644
index 00000000..acdd3e49
--- /dev/null
+++ b/web-ext/lib/indexedDb.ts
@@ -0,0 +1,90 @@
+import { BROWSER_STORAGE_IDB_STORE } from "./storageKeys";
+
+const DB_NAME = "toppings";
+
+/** Object stores the extension needs, with their key paths. */
+const REQUIRED_STORES: ReadonlyArray<readonly [string, string]> = [
+  [BROWSER_STORAGE_IDB_STORE.VIDEO_PREFERENCE, "videoId"],
+  [BROWSER_STORAGE_IDB_STORE.LOOP_SEGMENT, "videoId"],
+  [BROWSER_STORAGE_IDB_STORE.SEGMENT_DATA, "videoId"],
+];
+
+let dbPromise: Promise<IDBDatabase> | null = null;
+
+function upgradeDatabase(db: IDBDatabase): void {
+  for (const [name, keyPath] of REQUIRED_STORES) {
+    if (!db.objectStoreNames.contains(name)) {
+      db.createObjectStore(name, { keyPath });
+    }
+  }
+}
+
+/**
+ * Open the database. Omitting `version` adopts whatever version is already
+ * stored, so we can never request one lower than the browser holds — that
+ * fails with VersionError and takes every storage read down with it.
+ */
+function open(version?: number): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request =
+      version === undefined
+        ? indexedDB.open(DB_NAME)
+        : indexedDB.open(DB_NAME, version);
+
+    request.onerror = () =>
+      reject(request.error ?? new Error("IndexedDB open failed"));
+    request.onupgradeneeded = () => upgradeDatabase(request.result);
+    request.onsuccess = () => resolve(request.result);
+  });
+}
+
+export function openExtensionDatabase(): Promise<IDBDatabase> {
+  if (!dbPromise) {
+    dbPromise = (async () => {
+      const db = await open();
+
+      // A brand-new DB is created by the versionless open above (at version 1,
+      // running onupgradeneeded). An existing DB may predate a store we added
+      // since — bump the version once to create whatever is missing.
+      const missing = REQUIRED_STORES.some(
+        ([name]) => !db.objectStoreNames.contains(name),
+      );
+      if (!missing) return db;
+
+      const next = db.version + 1;
+      db.close();
+      return open(next);
+    })().catch((error) => {
+      dbPromise = null; // allow a later retry
+      throw error;
+    });
+  }
+
+  return dbPromise;
+}
+
+export async function withStore<T>(
+  storeName: string,
+  mode: IDBTransactionMode,
+  run: (store: IDBObjectStore) => IDBRequest<T> | Promise<T>,
+): Promise<T> {
+  const db = await openExtensionDatabase();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(storeName, mode);
+    const store = tx.objectStore(storeName);
+    const outcome = run(store);
+
+    const finish = (value: T) => {
+      tx.oncomplete = () => resolve(value);
+      tx.onerror = () => reject(tx.error ?? new Error("IndexedDB transaction failed"));
+    };
+
+    if (outcome instanceof IDBRequest) {
+      outcome.onsuccess = () => finish(outcome.result as T);
+      outcome.onerror = () =>
+        reject(outcome.error ?? new Error("IndexedDB request failed"));
+    } else {
+      outcome.then(finish).catch(reject);
+    }
+  });
+}
diff --git a/web-ext/lib/location.ts b/web-ext/lib/location.ts
new file mode 100644
index 00000000..c7fcd908
--- /dev/null
+++ b/web-ext/lib/location.ts
@@ -0,0 +1,42 @@
+import { defineMessage } from "@/kernel/messaging";
+
+export interface Position {
+  latitude: number;
+  longitude: number;
+  accuracyMeters: number;
+}
+
+const readLocation = defineMessage<void, Position>("read-location");
+
+// Pages ask the way websites do, so the browser shows its usual location
+// prompt; Toppings holds no location permission of its own.
+export function readPosition(): Promise<Position> {
+  return new Promise((resolve, reject) =>
+    navigator.geolocation.getCurrentPosition(
+      ({ coords }) => resolve({ latitude: coords.latitude, longitude: coords.longitude, accuracyMeters: coords.accuracy }),
+      (error) => reject(new Error(error.message || "Location unavailable")),
+      { timeout: 20_000, maximumAge: 60_000 },
+    ),
+  );
+}
+
+export function answerLocationRequests(): void {
+  readLocation.handle(() => readPosition());
+}
+
+// Chrome's background is a service worker without geolocation, so it asks an
+// offscreen document of the same origin, which inherits the answer the user
+// gave the options page. Firefox's background is a page and asks directly.
+export async function readPositionInBackground(): Promise<Position> {
+  if (process.env.BROWSER === "firefox") return readPosition();
+  const url = "offscreen/index.html";
+  const open = await chrome.runtime.getContexts({ contextTypes: ["OFFSCREEN_DOCUMENT"] });
+  if (open.length === 0) {
+    await chrome.offscreen.createDocument({ url, reasons: ["GEOLOCATION"], justification: "Checks whether you are at a place one of your schedules uses." });
+  }
+  try {
+    return await readLocation.send();
+  } finally {
+    await chrome.offscreen.closeDocument().catch(() => {});
+  }
+}
diff --git a/web-ext/lib/storageKeys.ts b/web-ext/lib/storageKeys.ts
new file mode 100644
index 00000000..e41f81c4
--- /dev/null
+++ b/web-ext/lib/storageKeys.ts
@@ -0,0 +1,16 @@
+export const CHROME_STORAGE_LOCAL_KEY = {
+  OPTIONS_SIDEBAR_COLLAPSED: "toppings:options_sidebar_collapsed",
+  PROFILE_STORE: "toppings:profile_store",
+  FEATURE_REPORTS: "toppings:feature_reports",
+  FEATURE_RECOVERED: "toppings:feature_recovered",
+  PLAYLIST_CACHE_PREFIX: "toppings:playlist_cache:",
+  CAPABILITY_PREFIX: "toppings:capability:",
+  // The name predates profiles; kept so an image chosen in 3.x still shows.
+  VISUALS_IMAGE: "toppings:audio_mode_global_custom_image",
+} as const;
+
+export const BROWSER_STORAGE_IDB_STORE = {
+  VIDEO_PREFERENCE: "video_preference",
+  LOOP_SEGMENT: "loop_segment",
+  SEGMENT_DATA: "segment_data",
+} as const;
diff --git a/web-ext/lib/urls.ts b/web-ext/lib/urls.ts
new file mode 100644
index 00000000..a7a8fdf0
--- /dev/null
+++ b/web-ext/lib/urls.ts
@@ -0,0 +1,14 @@
+export const URLS = {
+  HOMEPAGE: "https://toppings.enry.ch",
+  GREETINGS: "https://toppings.enry.ch/greetings",
+  FAREWELL: "https://toppings.enry.ch/farewell",
+  GITHUB_REPO: "https://github.com/enrych/toppings",
+  GITHUB_COMMITS_MAIN: "https://github.com/enrych/toppings/commits/main",
+  GITHUB_ISSUES: "https://github.com/enrych/toppings/issues",
+  GITHUB_RELEASES: "https://github.com/enrych/toppings/releases",
+  CHROME_WEBSTORE_TOPPINGS:
+    "https://chrome.google.com/webstore/detail/toppings/aemiblppibhggpgijajindcmmomboibl",
+  FIREFOX_AMO_TOPPINGS:
+    "https://addons.mozilla.org/en-US/firefox/addon/toppings/",
+  SPONSOR_ME: "https://darhkvoyd.me/sponsor",
+} as const;
diff --git a/web-ext/lib/useChromeStorageLocal.ts b/web-ext/lib/useChromeStorageLocal.ts
new file mode 100644
index 00000000..0e6e8485
--- /dev/null
+++ b/web-ext/lib/useChromeStorageLocal.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from "preact/hooks";
+
+// One local-area key as component state, for per-device UI preferences.
+export function useChromeStorageLocal<T>(key: string, fallback: T): [T, (value: T) => void] {
+  const [value, setValue] = useState<T>(fallback);
+
+  useEffect(() => {
+    void chrome.storage.local.get(key).then((result) => {
+      if (result[key] != null) setValue(result[key] as T);
+    });
+    const onChange = (changes: Record<string, chrome.storage.StorageChange>, area: string) => {
+      if (area === "local" && key in changes) setValue((changes[key].newValue as T | undefined) ?? fallback);
+    };
+    chrome.storage.onChanged.addListener(onChange);
+    return () => chrome.storage.onChanged.removeListener(onChange);
+  }, [key]);
+
+  return [value, (next) => void chrome.storage.local.set({ [key]: next })];
+}
diff --git a/web-ext/lib/version.ts b/web-ext/lib/version.ts
new file mode 100644
index 00000000..9e9113aa
--- /dev/null
+++ b/web-ext/lib/version.ts
@@ -0,0 +1,16 @@
+// Mirrored by `site.version` in website/lib/site.ts on a store release; a
+// pre-release like this one is not published, so the site keeps the last one.
+export const EXTENSION_VERSION = "4.0.0-alpha";
+
+// Browsers accept only dot-separated numbers as a manifest `version`, so a
+// pre-release suffix travels in `version_name` instead.
+export const MANIFEST_VERSION = EXTENSION_VERSION.split("-")[0];
+
+export async function getCurrentVersion(): Promise<string> {
+  try {
+    const manifest = chrome.runtime.getManifest();
+    return manifest.version_name ?? manifest.version;
+  } catch {
+    return "unknown";
+  }
+}
diff --git a/web-ext/lib/waveform.ts b/web-ext/lib/waveform.ts
new file mode 100644
index 00000000..3c089c6d
--- /dev/null
+++ b/web-ext/lib/waveform.ts
@@ -0,0 +1,100 @@
+import { analyserFor } from "./audioTap";
+
+const POINTS = 200;
+
+// Draws on the canvas until the returned stop is called: the waveform of what
+// the media plays, or an idle wave while its audio cannot be read yet.
+export function drawWaveform(canvas: HTMLCanvasElement, media: HTMLMediaElement): () => void {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return () => {};
+  let frame = 0;
+  let phase = 0;
+  let freq = new Uint8Array(0);
+  let time = new Uint8Array(0);
+
+  const draw = () => {
+    frame = requestAnimationFrame(draw);
+    const dpr = devicePixelRatio || 1;
+    const w = Math.round(canvas.clientWidth * dpr);
+    const h = Math.round(canvas.clientHeight * dpr);
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+    }
+    const centerY = h / 2;
+    ctx.fillStyle = "#000";
+    ctx.fillRect(0, 0, w, h);
+
+    const analyser = analyserFor(media);
+    if (analyser) {
+      if (freq.length !== analyser.frequencyBinCount) freq = new Uint8Array(analyser.frequencyBinCount);
+      if (time.length !== analyser.fftSize) time = new Uint8Array(analyser.fftSize);
+      analyser.getByteFrequencyData(freq);
+      analyser.getByteTimeDomainData(time);
+      strokeLive(ctx, w, h, centerY, dpr, freq, time);
+    } else {
+      phase += 0.015;
+      strokeIdle(ctx, w, h, centerY, dpr, phase);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(0, centerY);
+    ctx.lineTo(w, centerY);
+    ctx.strokeStyle = "rgba(255, 255, 255, 0.08)";
+    ctx.lineWidth = dpr;
+    ctx.stroke();
+  };
+  draw();
+  return () => cancelAnimationFrame(frame);
+}
+
+function strokeLive(ctx: CanvasRenderingContext2D, w: number, h: number, centerY: number, dpr: number, freq: Uint8Array, time: Uint8Array): void {
+  // Peak loudness over the lower spectrum, where most music's energy is,
+  // rather than the average over every bin, which the quiet high bins
+  // dilute; the square root keeps quiet passages visible.
+  const lowBins = Math.floor(freq.length * 0.6);
+  let peak = 0;
+  let sum = 0;
+  for (let i = 0; i < lowBins; i++) {
+    peak = Math.max(peak, freq[i]);
+    sum += freq[i];
+  }
+  const loudness = Math.sqrt((peak / 255) * 0.7 + (sum / lowBins / 255) * 0.3);
+  const amplitude = Math.max(0.05, loudness) * h * 0.45;
+
+  ctx.beginPath();
+  ctx.moveTo(0, centerY);
+  let previous = { x: 0, y: centerY };
+  for (let i = 0; i <= POINTS; i++) {
+    const t = i / POINTS;
+    const sample = (time[Math.floor(t * (time.length - 1))] - 128) / 128;
+    const envelope = Math.sin(t * Math.PI) ** 2 * (0.6 + 0.4 * Math.sin(t * Math.PI * 2));
+    const band = freq[Math.floor(t * (freq.length - 1))] / 255;
+    const point = {
+      x: t * w,
+      y: centerY + sample * amplitude * envelope + Math.sin(t * Math.PI * 8 + loudness * 20) * amplitude * 0.35 * envelope * band,
+    };
+    ctx.quadraticCurveTo(previous.x, previous.y, (previous.x + point.x) / 2, (previous.y + point.y) / 2);
+    previous = point;
+  }
+  ctx.lineTo(w, centerY);
+  ctx.strokeStyle = "#fff";
+  ctx.lineWidth = 2.5 * dpr;
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  ctx.stroke();
+}
+
+function strokeIdle(ctx: CanvasRenderingContext2D, w: number, h: number, centerY: number, dpr: number, phase: number): void {
+  ctx.beginPath();
+  ctx.moveTo(0, centerY);
+  for (let x = 0; x <= w; x += 2) {
+    const t = x / w;
+    const amplitude = h * 0.15 * Math.sin(t * Math.PI) ** 2;
+    ctx.lineTo(x, centerY + Math.sin(t * Math.PI * 8 + phase) * amplitude + Math.sin(t * Math.PI * 3 + phase * 0.7) * amplitude * 0.4);
+  }
+  ctx.strokeStyle = "rgba(255, 255, 255, 0.6)";
+  ctx.lineWidth = 2 * dpr;
+  ctx.lineJoin = "round";
+  ctx.stroke();
+}
diff --git a/web-ext/package.json b/web-ext/package.json
index 3f076628..0cb036d7 100644
--- a/web-ext/package.json
+++ b/web-ext/package.json
@@ -1,67 +1,31 @@
 {
-  "name": "Toppings",
-  "version": "3.0.3",
-  "description": "Your YouTube, Your Way.",
-  "private": "true",
+  "name": "web-ext",
+  "private": true,
   "type": "module",
+  "packageManager": "bun@1.3.14",
   "scripts": {
-    "dev": "webpack --watch --config ./scripts/build.js",
-    "dev:firefox": "webpack --watch --config ./scripts/build.js --env firefox",
-    "build": "webpack --config ./scripts/build.js --env production",
-    "build:firefox": "webpack --config ./scripts/build.js --env production firefox",
-    "release": "bun run build && bun scripts/release.js",
-    "release:firefox": "bun run build:firefox && bun scripts/release.js firefox",
-    "type-check": "tsc --noEmit",
-    "test": "bun run type-check"
+    "dev": "bun scripts/build.ts --watch",
+    "dev:firefox": "bun scripts/build.ts --watch --firefox",
+    "build": "bun scripts/build.ts --production",
+    "build:firefox": "bun scripts/build.ts --production --firefox",
+    "release": "bun run build && bun scripts/release.ts",
+    "release:firefox": "bun run build:firefox && bun scripts/release.ts --firefox",
+    "type-check": "tsc --noEmit && tsc --noEmit -p scripts && tsc --noEmit -p tsconfig.test.json",
+    "test": "bun test",
+    "check": "bun run type-check && bun test"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/enrych/toppings.git"
-  },
-  "author": "Enrych",
-  "license": "GPL-3.0",
-  "bugs": {
-    "url": "https://github.com/enrych/toppings/issues"
+  "dependencies": {
+    "preact": "^10.29.8"
   },
-  "homepage": "https://github.com/enrych/toppings#readme",
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/plugin-transform-react-jsx": "^7.24.7",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.7",
-    "@types/bun": "^1.0.5",
+    "@happy-dom/global-registrator": "^20.14.5",
+    "@types/bun": "^1.3.14",
     "@types/node": "^20.8.9",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.2.24",
-    "archiver": "^6.0.1",
     "autoprefixer": "^10.4.19",
-    "babel-loader": "^9.1.3",
     "chrome-types": "^0.1.231",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^7.1.2",
-    "dom-chef": "^5.1.1",
-    "fs-extra": "^11.2.0",
+    "happy-dom": "^20.14.5",
     "postcss": "^8.4.38",
-    "postcss-loader": "^8.1.1",
-    "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.4",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4"
-  },
-  "peerDependencies": {
-    "typescript": "^5.2.2"
-  },
-  "dependencies": {
-    "element-ready": "^7.0.0",
-    "immer": "^10.1.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.23.1"
-  },
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ]
+    "typescript": "^5"
+  }
 }
diff --git a/web-ext/scripts/build.js b/web-ext/scripts/build.js
deleted file mode 100644
index 6cdbad1d..00000000
--- a/web-ext/scripts/build.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-import tailwindcss from "tailwindcss";
-import autoprefixer from "autoprefixer";
-import CopyWebpackPlugin from "copy-webpack-plugin";
-import { CleanWebpackPlugin } from "clean-webpack-plugin";
-
-export default (env) => {
-  return {
-    target: "web",
-    mode: env.production ? "production" : "development",
-    devtool: env.production ? false : "cheap-module-source-map",
-    entry: {
-      background: "./src/background/index.ts",
-      content: ["./src/content_scripts/index.ts"],
-      popup: {
-        filename: "./popup/index.js",
-        import: "./src/popup/index.tsx",
-      },
-      options: {
-        filename: "./options/index.js",
-        import: "./src/options/index.tsx",
-      },
-    },
-    output: {
-      filename: "[name].js",
-      path: path.resolve("dist"),
-      clean: {
-        dry: true,
-      },
-      publicPath: "../",
-      assetModuleFilename: "assets/images/[hash][ext][query]",
-    },
-    module: {
-      rules: [
-        {
-          test: /\.css$/i,
-          use: [
-            "style-loader",
-            "css-loader",
-            {
-              loader: "postcss-loader",
-              options: {
-                postcssOptions: {
-                  plugins: [
-                    tailwindcss({
-                      corePlugins: {
-                        preflight: false,
-                      },
-                      content: ["./src/**/*.tsx"],
-                      prefix: "tw-",
-                    }),
-                    autoprefixer,
-                  ],
-                },
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(ts|tsx)$/,
-          exclude: /node_modules/,
-          use: {
-            loader: "babel-loader",
-            options: {
-              presets: [
-                "@babel/preset-env",
-                "@babel/preset-react",
-                "@babel/preset-typescript",
-              ],
-            },
-          },
-        },
-        {
-          test: /\.(png|jpe?g|gif|svg)$/i,
-          type: "asset/resource",
-        },
-      ],
-    },
-    plugins: [
-      new CleanWebpackPlugin(),
-      new CopyWebpackPlugin({
-        patterns: [
-          { from: "src/assets", to: "assets" },
-          { from: "src/options/index.html", to: "options" },
-          { from: "src/popup/index.html", to: "popup" },
-          { from: "src/_locales", to: "_locales" },
-          {
-            from: "src/manifest.json",
-            to: "manifest.json",
-            transform(content) {
-              const packageJson = JSON.parse(
-                fs.readFileSync("package.json", "utf-8"),
-              );
-              const manifest = JSON.parse(content.toString());
-              manifest.version = packageJson.version;
-
-              const isFirefox = env.firefox ? "firefox" : false;
-              if (isFirefox) {
-                manifest.manifest_version = 2;
-
-                manifest.background = {
-                  scripts: ["/background.js"],
-                  persistent: false,
-                };
-
-                manifest.permissions = [
-                  ...manifest.host_permissions,
-                  ...manifest.permissions,
-                ];
-                delete manifest.host_permissions;
-
-                manifest.browser_action = manifest.action;
-                delete manifest.action;
-
-                manifest.web_accessible_resources =
-                  manifest.web_accessible_resources.flatMap(
-                    (resource) => resource.resources,
-                  );
-
-                manifest.browser_specific_settings = {
-                  gecko: { id: "toppings@enry.ch" },
-                };
-              }
-              return JSON.stringify(manifest, null, 2);
-            },
-          },
-        ],
-      }),
-    ],
-    resolve: {
-      extensions: [".ts", ".tsx"],
-    },
-    optimization: {
-      minimize: false,
-    },
-  };
-};
diff --git a/web-ext/scripts/build.ts b/web-ext/scripts/build.ts
new file mode 100644
index 00000000..eeb4650d
--- /dev/null
+++ b/web-ext/scripts/build.ts
@@ -0,0 +1,148 @@
+import { cp, mkdir, rm, watch } from "node:fs/promises";
+import autoprefixer from "autoprefixer";
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
+import { BRAND_METADATA } from "../lib/brand";
+import { URLS } from "../lib/urls";
+import { EXTENSION_VERSION, MANIFEST_VERSION } from "../lib/version";
+import tailwindConfig from "../tailwind.config";
+
+const production = process.argv.includes("--production");
+const firefox = process.argv.includes("--firefox");
+const watching = process.argv.includes("--watch");
+
+// Overridable so a Chrome and a Firefox build can coexist on disk.
+const DIST = process.env.DIST ?? "dist";
+
+const scripts = [
+  { entry: "app/background/index.ts", out: "background" },
+  { entry: "app/content/index.ts", out: "content" },
+  { entry: "app/popup/index.tsx", out: "popup/index" },
+  { entry: "app/options/index.tsx", out: "options/index" },
+  { entry: "app/offscreen/index.ts", out: "offscreen/index" },
+];
+
+const styles = [
+  { entry: "app/popup/index.css", out: "popup/index.css" },
+  { entry: "app/options/index.css", out: "options/index.css" },
+];
+
+const copies = ["assets", "app/popup/index.html", "app/options/index.html", "app/offscreen/index.html"];
+
+async function bundleScripts() {
+  for (const { entry, out } of scripts) {
+    const result = await Bun.build({
+      entrypoints: [entry],
+      outdir: DIST,
+      naming: `${out}.[ext]`,
+      target: "browser",
+      format: "iife",
+      sourcemap: production ? "none" : "linked",
+      // Folds branches on process.env.BROWSER away, so a Firefox build does not
+      // carry Chrome-only API calls that AMO's linter flags.
+      minify: { syntax: true },
+      define: {
+        "process.env.BROWSER": JSON.stringify(firefox ? "firefox" : "chrome"),
+        "process.env.NODE_ENV": JSON.stringify(production ? "production" : "development"),
+        "process.env.TOPPINGS_API": JSON.stringify(process.env.TOPPINGS_API ?? "https://toppings.enry.ch/api"),
+        // Firefox's chrome.* namespace is callback-only under MV2 and returns
+        // undefined when called for a promise; its browser.* namespace is the
+        // same API with promises, which is how the code calls it.
+        ...(firefox && { chrome: "browser" }),
+      },
+    });
+    if (!result.success) {
+      for (const log of result.logs) console.error(String(log));
+      throw new Error(`bundling ${entry} failed`);
+    }
+  }
+}
+
+// Relative @imports are inlined here; the PostCSS pipeline below does not
+// resolve them, and a raw @import would point nowhere from dist/.
+async function inlineImports(css: string, from: string): Promise<string> {
+  const dir = from.slice(0, from.lastIndexOf("/"));
+  const imports = [...css.matchAll(/^@import "(\.[^"]+)";\n?/gm)];
+  for (const match of imports) {
+    const path = `${dir}/${match[1]}`;
+    css = css.replace(match[0], await inlineImports(await Bun.file(path).text(), path) + "\n");
+  }
+  return css;
+}
+
+async function buildStyles() {
+  const processor = postcss([tailwindcss(tailwindConfig), autoprefixer]);
+  for (const { entry, out } of styles) {
+    const css = await inlineImports(await Bun.file(entry).text(), entry);
+    const result = await processor.process(css, { from: entry, to: `${DIST}/${out}` });
+    await Bun.write(`${DIST}/${out}`, result.css);
+  }
+}
+
+async function copyStatic() {
+  for (const source of copies) {
+    const target = source.startsWith("app/") ? source.slice("app/".length) : source;
+    await cp(source, `${DIST}/${target}`, { recursive: true });
+  }
+}
+
+// app/manifest.json is the MV3 source of truth; Firefox still ships MV2, so
+// the differences are applied here rather than kept as a second manifest.
+async function writeManifest() {
+  const manifest = await Bun.file("app/manifest.json").json();
+  delete manifest.$schema;
+  manifest.version = MANIFEST_VERSION;
+  if (MANIFEST_VERSION !== EXTENSION_VERSION) manifest.version_name = EXTENSION_VERSION;
+  manifest.homepage_url = URLS.HOMEPAGE;
+
+  if (firefox) {
+    manifest.manifest_version = 2;
+    manifest.background = { scripts: ["/background.js"], persistent: false };
+    // Offscreen documents are Chrome's; Firefox's background page needs none.
+    manifest.permissions = [...manifest.host_permissions, ...manifest.permissions.filter((permission: string) => permission !== "offscreen")];
+    delete manifest.host_permissions;
+    manifest.browser_action = manifest.action;
+    delete manifest.action;
+    manifest.web_accessible_resources = manifest.web_accessible_resources.flatMap(
+      (resource: { resources: string[] }) => resource.resources,
+    );
+    // Mozilla requires declaring data that leaves the device, shown to the user
+    // at install. The playlist runtime sends the ID of the playlist being
+    // viewed to Toppings' server, which it counts as browsing activity.
+    manifest.browser_specific_settings = {
+      gecko: { id: BRAND_METADATA.ID, data_collection_permissions: { required: ["browsingActivity"] } },
+    };
+  }
+
+  await Bun.write(`${DIST}/manifest.json`, JSON.stringify(manifest, null, 2));
+}
+
+async function build() {
+  const started = performance.now();
+  await rm(DIST, { recursive: true, force: true });
+  await mkdir(DIST, { recursive: true });
+  await Promise.all([bundleScripts(), buildStyles(), copyStatic(), writeManifest()]);
+  console.log(
+    `built ${firefox ? "firefox" : "chrome"} ${production ? "production" : "development"} in ${Math.round(performance.now() - started)}ms`,
+  );
+}
+
+await build();
+
+if (watching) {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let building = Promise.resolve();
+  // Each build starts by deleting DIST, so one must not start under another.
+  const rebuild = () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      building = building.then(build).catch(console.error);
+    }, 150);
+  };
+  for (const dir of ["app", "assets", "features", "kernel", "lib", "ui", "youtube"]) {
+    (async () => {
+      for await (const _ of watch(dir, { recursive: true })) rebuild();
+    })();
+  }
+  console.log("watching for changes");
+}
diff --git a/web-ext/scripts/release.js b/web-ext/scripts/release.js
deleted file mode 100644
index ca2823b6..00000000
--- a/web-ext/scripts/release.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import path from "node:path";
-import archiver from "archiver";
-import chalk from "chalk";
-import fs from "fs-extra";
-
-const DIST_DIR = path.resolve("dist");
-const PACKAGE_FILE = path.resolve("package.json");
-const isFirefox = process.argv[2] === "firefox" ? "firefox" : "chrome";
-
-async function createArchive() {
-  try {
-    if (!fs.existsSync(DIST_DIR)) {
-      throw new Error(
-        `The 'dist' directory was not found at ${DIST_DIR}. Please ensure it exists before running this script.`,
-      );
-    }
-    if (!fs.existsSync(PACKAGE_FILE)) {
-      throw new Error(
-        `The 'package.json' file was not found at ${PACKAGE_FILE}. Please ensure it exists before running this script.`,
-      );
-    }
-
-    const packageJson = JSON.parse(fs.readFileSync(PACKAGE_FILE, "utf-8"));
-    const version = packageJson.version;
-    const filename = `toppings_v${version}_${isFirefox}.zip`;
-    const store = isFirefox ? "Mozilla Add-ons" : "Chrome Web Store";
-
-    const writeStream = fs.createWriteStream(filename);
-    const archive = archiver("zip", { zlib: { level: 9 } });
-    archive.pipe(writeStream);
-
-    writeStream.on("close", async () => {
-      console.clear();
-      const message = `
-      ┏---------------------------------┓
-      |                |
-      |   Release Version: ${version}        |
-      |                |
-      ┗---------------------------------┛
-
-      Congratulations! Toppings has been successfully bundled and prepare for a new release.
-      You can now upload the '${filename}' file to the ${store} and GitHub releases.
-      `;
-
-      console.log(chalk.yellow(message));
-      await fs.rm(DIST_DIR, { recursive: true });
-      process.exit(0);
-    });
-
-    archive.on("warning", (err) => {
-      if (err.code === "ENOENT") {
-        console.warn(err);
-      } else {
-        throw err;
-      }
-    });
-
-    archive.on("error", (err) => {
-      throw err;
-    });
-
-    // Add directory to archive
-    await archive.directory(DIST_DIR, false);
-
-    // Finalize archive and remove build folder
-    await archive.finalize();
-  } catch (err) {
-    console.error("Error creating archive:", err);
-  }
-}
-
-createArchive();
diff --git a/web-ext/scripts/release.ts b/web-ext/scripts/release.ts
new file mode 100644
index 00000000..a365b2c8
--- /dev/null
+++ b/web-ext/scripts/release.ts
@@ -0,0 +1,17 @@
+import { rm } from "node:fs/promises";
+import { join } from "node:path";
+import { EXTENSION_VERSION } from "../lib/version";
+
+const DIST = process.env.DIST ?? "dist";
+const browser = process.argv.includes("--firefox") ? "firefox" : "chrome";
+const filename = `toppings_v${EXTENSION_VERSION}_${browser}.zip`;
+const archive = join(import.meta.dir, "..", filename);
+
+// zip adds to an existing archive rather than replacing it, which would carry
+// files from an earlier build of the same version into the upload.
+await rm(archive, { force: true });
+const zip = Bun.spawn(["zip", "-qr", archive, "."], { cwd: DIST, stdout: "inherit", stderr: "inherit" });
+if ((await zip.exited) !== 0) throw new Error("zip failed");
+await rm(DIST, { recursive: true, force: true });
+
+console.log(`${filename} is ready for the ${browser === "firefox" ? "Mozilla Add-ons" : "Chrome Web Store"} upload.`);
diff --git a/web-ext/scripts/tsconfig.json b/web-ext/scripts/tsconfig.json
new file mode 100644
index 00000000..b177d36b
--- /dev/null
+++ b/web-ext/scripts/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["bun", "chrome-types"]
+  },
+  "include": ["./*.ts", "../tailwind.config.ts", "../lib/brand.ts", "../lib/urls.ts", "../lib/version.ts"]
+}
diff --git a/web-ext/src/_locales/en/messages.json b/web-ext/src/_locales/en/messages.json
deleted file mode 100644
index 8c161735..00000000
--- a/web-ext/src/_locales/en/messages.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "description": {
-    "message": "Your YouTube, Your Way.",
-    "description": "web-ext description"
-  },
-  "popupTitle": {
-    "message": "Quick Access",
-    "description": "web-ext action popup title"
-  }
-}
diff --git a/web-ext/src/assets/svg/apps.svg b/web-ext/src/assets/svg/apps.svg
deleted file mode 100644
index a6022d46..00000000
--- a/web-ext/src/assets/svg/apps.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.1" d="M14 17.5C14 16.0955 14 15.3933 14.3371 14.8889C14.483 14.6705 14.6705 14.483 14.8889 14.3371C15.3933 14 16.0955 14 17.5 14V14V14C18.9045 14 19.6067 14 20.1111 14.3371C20.3295 14.483 20.517 14.6705 20.6629 14.8889C21 15.3933 21 16.0955 21 17.5V17.5V17.5C21 18.9045 21 19.6067 20.6629 20.1111C20.517 20.3295 20.3295 20.517 20.1111 20.6629C19.6067 21 18.9045 21 17.5 21V21V21C16.0955 21 15.3933 21 14.8889 20.6629C14.6705 20.517 14.483 20.3295 14.3371 20.1111C14 19.6067 14 18.9045 14 17.5V17.5V17.5Z" fill="#323232"/><path opacity="0.1" d="M3 17.5C3 16.0955 3 15.3933 3.33706 14.8889C3.48298 14.6705 3.67048 14.483 3.88886 14.3371C4.39331 14 5.09554 14 6.5 14V14V14C7.90446 14 8.60669 14 9.11114 14.3371C9.32952 14.483 9.51702 14.6705 9.66294 14.8889C10 15.3933 10 16.0955 10 17.5V17.5V17.5C10 18.9045 10 19.6067 9.66294 20.1111C9.51702 20.3295 9.32952 20.517 9.11114 20.6629C8.60669 21 7.90446 21 6.5 21V21V21C5.09554 21 4.39331 21 3.88886 20.6629C3.67048 20.517 3.48298 20.3295 3.33706 20.1111C3 19.6067 3 18.9045 3 17.5V17.5V17.5Z" fill="#323232"/><path opacity="0.1" d="M3 6.5C3 5.09554 3 4.39331 3.33706 3.88886C3.48298 3.67048 3.67048 3.48298 3.88886 3.33706C4.39331 3 5.09554 3 6.5 3V3V3C7.90446 3 8.60669 3 9.11114 3.33706C9.32952 3.48298 9.51702 3.67048 9.66294 3.88886C10 4.39331 10 5.09554 10 6.5V6.5V6.5C10 7.90446 10 8.60669 9.66294 9.11114C9.51702 9.32952 9.32952 9.51702 9.11114 9.66294C8.60669 10 7.90446 10 6.5 10V10V10C5.09554 10 4.39331 10 3.88886 9.66294C3.67048 9.51702 3.48298 9.32952 3.33706 9.11114C3 8.60669 3 7.90446 3 6.5V6.5V6.5Z" fill="#323232"/><path d="M14 17.5C14 16.0955 14 15.3933 14.3371 14.8889C14.483 14.6705 14.6705 14.483 14.8889 14.3371C15.3933 14 16.0955 14 17.5 14V14V14C18.9045 14 19.6067 14 20.1111 14.3371C20.3295 14.483 20.517 14.6705 20.6629 14.8889C21 15.3933 21 16.0955 21 17.5V17.5V17.5C21 18.9045 21 19.6067 20.6629 20.1111C20.517 20.3295 20.3295 20.517 20.1111 20.6629C19.6067 21 18.9045 21 17.5 21V21V21C16.0955 21 15.3933 21 14.8889 20.6629C14.6705 20.517 14.483 20.3295 14.3371 20.1111C14 19.6067 14 18.9045 14 17.5V17.5V17.5Z" stroke="#fff" stroke-width="1"/><path d="M3 17.5C3 16.0955 3 15.3933 3.33706 14.8889C3.48298 14.6705 3.67048 14.483 3.88886 14.3371C4.39331 14 5.09554 14 6.5 14V14V14C7.90446 14 8.60669 14 9.11114 14.3371C9.32952 14.483 9.51702 14.6705 9.66294 14.8889C10 15.3933 10 16.0955 10 17.5V17.5V17.5C10 18.9045 10 19.6067 9.66294 20.1111C9.51702 20.3295 9.32952 20.517 9.11114 20.6629C8.60669 21 7.90446 21 6.5 21V21V21C5.09554 21 4.39331 21 3.88886 20.6629C3.67048 20.517 3.48298 20.3295 3.33706 20.1111C3 19.6067 3 18.9045 3 17.5V17.5V17.5Z" stroke="#fff" stroke-width="1"/><path d="M3 6.5C3 5.09554 3 4.39331 3.33706 3.88886C3.48298 3.67048 3.67048 3.48298 3.88886 3.33706C4.39331 3 5.09554 3 6.5 3V3V3C7.90446 3 8.60669 3 9.11114 3.33706C9.32952 3.48298 9.51702 3.67048 9.66294 3.88886C10 4.39331 10 5.09554 10 6.5V6.5V6.5C10 7.90446 10 8.60669 9.66294 9.11114C9.51702 9.32952 9.32952 9.51702 9.11114 9.66294C8.60669 10 7.90446 10 6.5 10V10V10C5.09554 10 4.39331 10 3.88886 9.66294C3.67048 9.51702 3.48298 9.32952 3.33706 9.11114C3 8.60669 3 7.90446 3 6.5V6.5V6.5Z" stroke="#fff" stroke-width="1"/><path d="M14 6.5H21" stroke="#fff" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.5 3V10" stroke="#fff" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
diff --git a/web-ext/src/assets/svg/arrowhead-left.svg b/web-ext/src/assets/svg/arrowhead-left.svg
deleted file mode 100644
index 710d493e..00000000
--- a/web-ext/src/assets/svg/arrowhead-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><svg fill="#fff" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M11.64 5.23a1 1 0 0 0-1.41.13l-5 6a1 1 0 0 0 0 1.27l4.83 6a1 1 0 0 0 .78.37 1 1 0 0 0 .78-1.63L7.29 12l4.48-5.37a1 1 0 0 0-.13-1.4z"/><path d="M14.29 12l4.48-5.37a1 1 0 0 0-1.54-1.28l-5 6a1 1 0 0 0 0 1.27l4.83 6a1 1 0 0 0 .78.37 1 1 0 0 0 .78-1.63z"/></svg>
diff --git a/web-ext/src/assets/svg/bell.svg b/web-ext/src/assets/svg/bell.svg
deleted file mode 100644
index 76622335..00000000
--- a/web-ext/src/assets/svg/bell.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path></svg>
diff --git a/web-ext/src/assets/svg/brackets.svg b/web-ext/src/assets/svg/brackets.svg
deleted file mode 100644
index b4ffff6d..00000000
--- a/web-ext/src/assets/svg/brackets.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
diff --git a/web-ext/src/assets/svg/bug_report.svg b/web-ext/src/assets/svg/bug_report.svg
deleted file mode 100644
index 494c4fef..00000000
--- a/web-ext/src/assets/svg/bug_report.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-200q66 0 113-47t47-113v-160q0-66-47-113t-113-47q-66 0-113 47t-47 113v160q0 66 47 113t113 47Zm-67.69-140h135.38v-40H412.31v40Zm0-160h135.38v-40H412.31v40ZM480-440Zm0 280q-54.23 0-99.73-26.62-45.5-26.61-72.89-73.38H200v-40h90.15q-9.15-29.23-9.65-59.62Q280-390 280-420h-80v-40h80q0-30.77-.27-61.15-.27-30.39 10.42-58.85H200v-40h107.38q14.77-26.08 36.5-46.46 21.74-20.39 49.35-33.08l-71.69-72.15 26.77-26.77L432.77-714q23.38-6.69 47-6.69 23.61 0 47 6.69l86.46-84.46L640-771.69l-72.15 72.15q27.61 12.69 48.8 32.96 21.2 20.27 35.97 46.58H760v40h-90.15q10.69 28.46 10.42 58.85Q680-490.77 680-460h80v40h-80q0 30-.5 60.38-.5 30.39-9.65 59.62H760v40H652.62q-27.39 46.77-72.89 73.38Q534.23-160 480-160Z"/></svg>
\ No newline at end of file
diff --git a/web-ext/src/assets/svg/burger-menu.svg b/web-ext/src/assets/svg/burger-menu.svg
deleted file mode 100644
index 52655f82..00000000
--- a/web-ext/src/assets/svg/burger-menu.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 18L20 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
-<path d="M4 12L20 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
-<path d="M4 6L20 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
-</svg>
diff --git a/web-ext/src/assets/svg/gear.svg b/web-ext/src/assets/svg/gear.svg
deleted file mode 100644
index f21a2b25..00000000
--- a/web-ext/src/assets/svg/gear.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg>
diff --git a/web-ext/src/assets/svg/heart.svg b/web-ext/src/assets/svg/heart.svg
deleted file mode 100644
index 0002ddab..00000000
--- a/web-ext/src/assets/svg/heart.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m480-173.85-30.31-27.38q-97.92-89.46-162-153.15-64.07-63.7-101.15-112.35-37.08-48.65-51.81-88.04Q120-594.15 120-634q0-76.31 51.85-128.15Q223.69-814 300-814q52.77 0 99 27t81 78.54Q514.77-760 561-787q46.23-27 99-27 76.31 0 128.15 51.85Q840-710.31 840-634q0 39.85-14.73 79.23-14.73 39.39-51.81 88.04-37.08 48.65-100.77 112.35Q609-290.69 510.31-201.23L480-173.85Zm0-54.15q96-86.77 158-148.65 62-61.89 98-107.39t50-80.61q14-35.12 14-69.35 0-60-40-100t-100-40q-47.77 0-88.15 27.27-40.39 27.27-72.31 82.11h-39.08q-32.69-55.61-72.69-82.5Q347.77-774 300-774q-59.23 0-99.62 40Q160-694 160-634q0 34.23 14 69.35 14 35.11 50 80.61t98 107q62 61.5 158 149.04Zm0-273Z"/></svg>
\ No newline at end of file
diff --git a/web-ext/src/assets/svg/help.svg b/web-ext/src/assets/svg/help.svg
deleted file mode 100644
index c4d04ba8..00000000
--- a/web-ext/src/assets/svg/help.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M481.12-270.77q13.26 0 22.38-9.16t9.12-22.42q0-13.27-9.16-22.38-9.16-9.12-22.43-9.12-13.26 0-22.38 9.16-9.11 9.16-9.11 22.43 0 13.26 9.16 22.38 9.16 9.11 22.42 9.11Zm-20.66-132.46h38.62q1.54-26.08 9.8-42.39 8.27-16.3 34.04-41.61 26.77-26.77 39.85-47.96 13.08-21.19 13.08-49.06 0-47.29-33.23-75.37-33.23-28.07-78.62-28.07-43.15 0-73.27 23.46-30.11 23.46-44.11 53.92l36.76 15.23q9.62-21.84 27.5-38.61 17.89-16.77 51.58-16.77 38.92 0 56.85 21.34 17.92 21.35 17.92 46.97 0 20.77-11.23 37.11-11.23 16.35-29.23 32.89-34.77 32.07-45.54 54.38-10.77 22.31-10.77 54.54ZM480.13-120q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
\ No newline at end of file
diff --git a/web-ext/src/assets/svg/home.svg b/web-ext/src/assets/svg/home.svg
deleted file mode 100644
index 9c659f8e..00000000
--- a/web-ext/src/assets/svg/home.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h147.69v-235.38h184.62V-200H720v-360L480-741.54 240-560v360Zm-40 40v-420l280-211.54L760-580v420H532.31v-235.38H427.69V-160H200Zm280-310.77Z"/></svg>
\ No newline at end of file
diff --git a/web-ext/src/background/context.ts b/web-ext/src/background/context.ts
deleted file mode 100644
index ca33fbcb..00000000
--- a/web-ext/src/background/context.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import {
-  LOCAL_SERVER_URL,
-  NODE_ENV,
-  PROD_SERVER_URL,
-  PATHNAME as YOUTUBE_PATHNAME,
-  WATCH_LATER_PLAYLIST_ID,
-  LIKED_VIDEOS_PLAYLIST_ID,
-  ERROR_MESSAGE,
-  YOUTUBE_SEARCH_PARAM,
-  HTTP_METHOD,
-  HTTP_ACCEPT,
-  HTTP_STATUS,
-} from "../constants/global.constants";
-import { getStorage, Storage } from "./store";
-
-const SERVER_BASE_URL =
-  process.env.NODE_ENV === NODE_ENV.DEVELOPMENT
-    ? LOCAL_SERVER_URL
-    : PROD_SERVER_URL;
-
-export type Context = WatchContext | PlaylistContext | ShortsContext | null;
-
-export interface BaseContext {
-  pathname: string;
-  payload: Record<string, any>;
-  store: Storage;
-}
-
-export type WatchContext = BaseContext & {
-  pathname: typeof YOUTUBE_PATHNAME.WATCH;
-  payload: WatchPayload;
-};
-
-export type WatchPayload = {
-  videoId: string | null;
-};
-
-export type PlaylistContext = BaseContext & {
-  pathname: typeof YOUTUBE_PATHNAME.PLAYLIST;
-  payload: ValidPlaylistPayload | InvalidPlaylistPayload;
-};
-
-export type ValidPlaylistPayload = {
-  playlistId: string;
-  averageRuntime: number;
-  totalRuntime: number;
-  totalVideos: number;
-};
-
-export type InvalidPlaylistPayload = {
-  playlistId:
-    | typeof WATCH_LATER_PLAYLIST_ID
-    | typeof LIKED_VIDEOS_PLAYLIST_ID
-    | string
-    | null;
-};
-
-export type PlaylistResponse = PlaylistContext;
-
-export type ShortsContext = BaseContext & {
-  pathname: typeof YOUTUBE_PATHNAME.SHORTS;
-  payload: ShortsPayload;
-};
-
-export type ShortsPayload = {
-  shortId: string | null;
-};
-
-export const getContext = async (rawURL: string): Promise<Context> => {
-  const url = new URL(rawURL);
-  const store = await getStorage();
-
-  if (!store) {
-    throw new Error(ERROR_MESSAGE.STORE_NOT_FOUND);
-  }
-
-  if (url.pathname.startsWith("/watch")) {
-    const videoId = url.searchParams.get(YOUTUBE_SEARCH_PARAM.VIDEO_ID);
-    if (!videoId) return null;
-
-    return {
-      pathname: YOUTUBE_PATHNAME.WATCH,
-      payload: { videoId },
-      store,
-    } as const;
-  } else if (url.pathname.startsWith("/playlist")) {
-    const playlistId = url.searchParams.get(YOUTUBE_SEARCH_PARAM.PLAYLIST_ID);
-
-    if (
-      !playlistId ||
-      playlistId === WATCH_LATER_PLAYLIST_ID ||
-      playlistId === LIKED_VIDEOS_PLAYLIST_ID
-    ) {
-      return {
-        pathname: YOUTUBE_PATHNAME.PLAYLIST,
-        payload: { playlistId },
-        store,
-      } as const;
-    }
-
-    try {
-      const response = await fetch(
-        `${SERVER_BASE_URL}/playlist/${playlistId}`,
-        {
-          method: HTTP_METHOD.GET,
-          headers: { Accept: HTTP_ACCEPT.JSON },
-        },
-      );
-
-      if (!response.ok) {
-        throw new Error(ERROR_MESSAGE.FAILED_FETCHING_PLAYLIST_DATA);
-      }
-
-      const body = (await response.json()) as PlaylistResponse;
-
-      return {
-        ...body,
-        store,
-      } as const;
-    } catch (error) {
-      console.error(ERROR_MESSAGE.FAILED_FETCHING_PLAYLIST_DATA, error);
-      return {
-        pathname: YOUTUBE_PATHNAME.PLAYLIST,
-        payload: { playlistId },
-        store,
-      } as const;
-    }
-  } else if (url.pathname.startsWith("/shorts")) {
-    const shortId = url.pathname.split("/")[2] || null;
-    return {
-      pathname: YOUTUBE_PATHNAME.SHORTS,
-      payload: { shortId },
-      store,
-    } as const;
-  }
-
-  return null;
-};
diff --git a/web-ext/src/background/index.ts b/web-ext/src/background/index.ts
deleted file mode 100644
index 80e14c52..00000000
--- a/web-ext/src/background/index.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { DEFAULT_STORE } from "./store";
-import { getContext } from "./context";
-import { dispatchContext } from "./utils/dispatchContext";
-import {
-  EVENT_TYPE,
-  INSTALL_REASON,
-  INSTALL_URL,
-  MESSAGE_TYPE,
-  NODE_ENV,
-  UNINSTALL_URL,
-} from "../constants/global.constants";
-
-// Handle Events
-chrome.runtime.onInstalled.addListener(onInitialize);
-chrome.runtime.onMessage.addListener(onConnected);
-chrome.webNavigation.onHistoryStateUpdated.addListener(onWebNavigation);
-
-type InitializeDetails = Parameters<
-  Parameters<typeof chrome.runtime.onInstalled.addListener>[0]
->[0];
-function onInitialize({ reason }: InitializeDetails): void {
-  if (reason === INSTALL_REASON.INSTALL || reason === INSTALL_REASON.UPDATE) {
-    if (process.env.NODE_ENV === NODE_ENV.PRODUCTION) {
-      void chrome.tabs.create({ url: INSTALL_URL });
-      void chrome.runtime.setUninstallURL(UNINSTALL_URL);
-    }
-    void chrome.storage.sync.set(DEFAULT_STORE);
-  }
-}
-
-type WebNavigationDetails = Parameters<
-  Parameters<typeof chrome.webNavigation.onCompleted.addListener>[0]
->[0];
-async function onWebNavigation(details: WebNavigationDetails) {
-  const tabId = details.tabId;
-
-  const ctx = await getContext(details.url);
-  if (!ctx?.store.isExtensionEnabled) return;
-  await dispatchContext(tabId, ctx);
-}
-
-function onConnected(
-  message: any,
-  sender: chrome.runtime.MessageSender,
-  sendResponse: (response: any) => void,
-) {
-  (async () => {
-    // This function handles the initial handshake between the content script and the background script.
-    const { type, payload } = JSON.parse(message);
-    if (type !== MESSAGE_TYPE.EVENT) return;
-
-    const event = payload;
-    if (event !== EVENT_TYPE.CONNECTED) return;
-
-    const tabId = sender.tab?.id;
-    if (!tabId) return;
-
-    const url = sender.url;
-    if (!url) return;
-
-    const ctx = await getContext(url);
-    if (!ctx?.store.isExtensionEnabled) return;
-
-    sendResponse(JSON.stringify({ type: "context", payload: ctx }));
-  })();
-
-  // Return true to indicate that sendResponse will be called asynchronously
-  return true;
-}
diff --git a/web-ext/src/background/store.ts b/web-ext/src/background/store.ts
deleted file mode 100644
index 08e829a0..00000000
--- a/web-ext/src/background/store.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-export const DEFAULT_STORE = {
-  isExtensionEnabled: true as boolean,
-  preferences: {
-    watch: {
-      isEnabled: true as boolean,
-      defaultPlaybackRate: {
-        value: "1.00" as string,
-      },
-      togglePlaybackRate: {
-        key: "X" as string,
-        value: "1.50" as string,
-      },
-      seekBackward: {
-        key: "A" as string,
-        value: "15.00" as string,
-      },
-      seekForward: {
-        key: "D" as string,
-        value: "15.00" as string,
-      },
-      increasePlaybackRate: {
-        key: "W" as string,
-        value: "0.25" as string,
-      },
-      decreasePlaybackRate: {
-        key: "S" as string,
-        value: "0.25" as string,
-      },
-      toggleLoopSegment: {
-        key: "Z" as string,
-      },
-      setLoopSegmentBegin: {
-        key: "Q" as string,
-      },
-      setLoopSegmentEnd: {
-        key: "E" as string,
-      },
-      // TODO: The Options page should save the values with toFixed(2) as part of saving
-      // validation so that content script doesn't have to bother about it.
-      customPlaybackRates: [
-        "0.25",
-        "0.50",
-        "0.75",
-        "1.00",
-        "1.25",
-        "1.50",
-        "1.75",
-        "2.00",
-        "2.25",
-        "2.50",
-      ] as Array<string>,
-    },
-    playlist: {
-      isEnabled: true as boolean,
-    },
-    shorts: {
-      isEnabled: true as boolean,
-      togglePlaybackRate: {
-        key: "X" as string,
-        value: "1.5" as string,
-      },
-      seekBackward: {
-        key: "A" as string,
-        value: "5.00" as string,
-      },
-      seekForward: {
-        key: "D" as string,
-        value: "5.00" as string,
-      },
-      reelAutoScroll: {
-        value: true as boolean,
-      },
-    },
-  },
-};
-
-export const getStorage = async (): Promise<Storage> => {
-  return new Promise((resolve) => {
-    chrome.storage.sync.get(undefined, (storage) => {
-      resolve(storage as Storage);
-    });
-  });
-};
-
-export type Storage = typeof DEFAULT_STORE;
diff --git a/web-ext/src/background/utils/dispatchContext.ts b/web-ext/src/background/utils/dispatchContext.ts
deleted file mode 100644
index 3bb3d792..00000000
--- a/web-ext/src/background/utils/dispatchContext.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Context } from "../context";
-
-/**
- * Dispatches the provided context to the specified tab using `chrome.tabs.sendMessage`.
- *
- * @param {number} tabId - The ID of the tab to send the message to.
- * @param {Context} ctx - The context to be sent to the tab.
- * @returns {Promise<void>} A promise that resolves when the message is sent.
- *
- * @remarks
- * - **Serialization in different browsers:**
- *   - **Firefox**: Uses the Structured Clone Algorithm.
- *   - **Chrome**: Currently uses JSON serialization, but may adopt the Structured Clone Algorithm in the future (Chrome issue 248548).
- *
- * - **Structured Clone Algorithm** (used by Firefox):
- *   - Supports a broader range of object types compared to JSON serialization.
- *
- * - **JSON Serialization** (used by Chrome):
- *   - Does not handle certain object types like DOM objects natively.
- *   - Objects with a `toJSON()` method (e.g., `URL`, `PerformanceEntry`) can be serialized with JSON, but they are still not structured cloneable.
- *
- * @note For extensions relying on `toJSON()`, use `JSON.stringify()` followed by `JSON.parse()` to ensure the message is structurally cloneable across browsers.
- */
-export const dispatchContext = async (
-  tabId: number,
-  ctx: Exclude<Context, null>,
-): Promise<void> => {
-  // For URL, To ensure the message is structurally cloneable across browsers.
-  const message = { type: "context", payload: ctx };
-  const serializedContext = JSON.stringify(message);
-  // sendMessage will throw "Error: Could not establish connection. Receiving end does not exist."
-  // if there is no content script loaded in the given tab. This error is
-  // noisy and mysterious (it usually doesn't have a valid line number), so we silence it.
-  return await chrome.tabs
-    .sendMessage(tabId, serializedContext)
-    .catch(() => {});
-};
diff --git a/web-ext/src/constants/global.constants.ts b/web-ext/src/constants/global.constants.ts
deleted file mode 100644
index 6a19a590..00000000
--- a/web-ext/src/constants/global.constants.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export const NODE_ENV = {
-  DEVELOPMENT: "development",
-  PRODUCTION: "production",
-} as const;
-
-export const PROD_SERVER_URL = "https://toppings.enry.ch";
-export const LOCAL_SERVER_URL = "http://localhost:8787";
-
-export const INSTALL_URL = "https://enrych.github.io/toppings/greetings";
-export const UNINSTALL_URL = "https://enrych.github.io/toppings/farewell";
-
-export const INSTALL_REASON = {
-  INSTALL: "install",
-  UPDATE: "update",
-} as const;
-
-export const WATCH_LATER_PLAYLIST_ID = "WL" as const;
-export const LIKED_VIDEOS_PLAYLIST_ID = "LL" as const;
-
-export const PATHNAME = {
-  WATCH: "watch",
-  PLAYLIST: "playlist",
-  SHORTS: "shorts",
-} as const;
-
-export const ERROR_MESSAGE = {
-  STORE_NOT_FOUND: "Extension store not found.",
-  FAILED_FETCHING_PLAYLIST_DATA: "Failed to fetch playlist data.",
-} as const;
-
-export const WARNING_MESSAGE = {
-  NO_HANDLER_FOUND: "No handler found",
-};
-
-export const YOUTUBE_SEARCH_PARAM = {
-  VIDEO_ID: "v",
-  PLAYLIST_ID: "list",
-} as const;
-
-export const HTTP_METHOD = {
-  GET: "GET",
-} as const;
-
-export const HTTP_ACCEPT = {
-  JSON: "application/json",
-} as const;
-
-export const HTTP_STATUS = {
-  NOT_FOUND: 404,
-} as const;
-
-export const MESSAGE_TYPE = {
-  EVENT: "event",
-  CONTEXT: "context",
-} as const;
-
-export const EVENT_TYPE = {
-  CONNECTED: "connected",
-} as const;
diff --git a/web-ext/src/content_scripts/components/LoopSegment.tsx b/web-ext/src/content_scripts/components/LoopSegment.tsx
deleted file mode 100644
index 1f6db6c2..00000000
--- a/web-ext/src/content_scripts/components/LoopSegment.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import React from "dom-chef";
-import elementReady from "element-ready";
-
-let isMarkerDragging: "start" | "end" | null = null;
-let video: HTMLVideoElement | null = null;
-let timeUpdateListener: ((event: Event) => void) | null = null;
-
-export const LoopSegmentButton = (
-  <button
-    className="ytp-button tw-text-center"
-    aria-pressed="false"
-    aria-label="Loop Segment of the video."
-    title="Loop Segment"
-    onClick={toggleLoopSegment}
-  >
-    <svg
-      viewBox="-9.6 -9.6 43.20 43.20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g>
-        <path
-          d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM17.19 15.94C17.15 16.03 17.1 16.11 17.03 16.18L15.34 17.87C15.19 18.02 15 18.09 14.81 18.09C14.62 18.09 14.43 18.02 14.28 17.87C13.99 17.58 13.99 17.1 14.28 16.81L14.69 16.4H9.1C7.8 16.4 6.75 15.34 6.75 14.05V12.28C6.75 11.87 7.09 11.53 7.5 11.53C7.91 11.53 8.25 11.87 8.25 12.28V14.05C8.25 14.52 8.63 14.9 9.1 14.9H14.69L14.28 14.49C13.99 14.2 13.99 13.72 14.28 13.43C14.57 13.14 15.05 13.14 15.34 13.43L17.03 15.12C17.1 15.19 17.15 15.27 17.19 15.36C17.27 15.55 17.27 15.76 17.19 15.94ZM17.25 11.72C17.25 12.13 16.91 12.47 16.5 12.47C16.09 12.47 15.75 12.13 15.75 11.72V9.95C15.75 9.48 15.37 9.1 14.9 9.1H9.31L9.72 9.5C10.01 9.79 10.01 10.27 9.72 10.56C9.57 10.71 9.38 10.78 9.19 10.78C9 10.78 8.81 10.71 8.66 10.56L6.97 8.87C6.9 8.8 6.85 8.72 6.81 8.63C6.73 8.45 6.73 8.24 6.81 8.06C6.85 7.97 6.9 7.88 6.97 7.81L8.66 6.12C8.95 5.83 9.43 5.83 9.72 6.12C10.01 6.41 10.01 6.89 9.72 7.18L9.31 7.59H14.9C16.2 7.59 17.25 8.65 17.25 9.94V11.72Z"
-          fill="#ffffff"
-        />
-      </g>
-    </svg>
-  </button>
-);
-
-export const LoopSegmentStartMarker = (
-  <div
-    id="start-marker"
-    className="tw-absolute tw-top-[-25px] tw-left-0 tw-hidden tw-cursor-pointer tw-w-0 tw-h-0 tw-border-solid tw-border-l-[10px] tw-border-l-transparent tw-border-r-[10px] tw-border-r-transparent tw-border-t-[20px] tw-border-t-[red] tw-transform -tw-translate-x-1/2 tw-z-[9999]"
-    onMouseDown={(e) => handleMarkerDrag(e, "start")}
-  />
-);
-
-export const LoopSegmentEndMarker = (
-  <div
-    id="end-marker"
-    className="tw-absolute tw-top-[-25px] tw-left-full tw-hidden tw-cursor-pointer tw-w-0 tw-h-0 tw-border-solid tw-border-l-[10px] tw-border-l-transparent tw-border-r-[10px] tw-border-r-transparent tw-border-t-[20px] tw-border-t-[red] tw-transform -tw-translate-x-1/2 tw-z-[9999]"
-    onMouseDown={(e) => handleMarkerDrag(e, "end")}
-  />
-);
-
-export async function setupLoopSegment() {
-  video = (await elementReady("video")) as HTMLVideoElement | null;
-  disableLoopSegment();
-  LoopSegmentButton.setAttribute("aria-pressed", "false");
-  LoopSegmentStartMarker.classList.add("tw-hidden");
-  LoopSegmentEndMarker.classList.add("tw-hidden");
-}
-
-export function toggleLoopSegment(_event?: React.MouseEvent) {
-  const isPressed = LoopSegmentButton.getAttribute("aria-pressed") ?? "false";
-  if (isPressed === "true") {
-    disableLoopSegment();
-    LoopSegmentButton.setAttribute("aria-pressed", "false");
-  } else {
-    enableLoopSegment();
-    LoopSegmentButton.setAttribute("aria-pressed", "true");
-  }
-  LoopSegmentStartMarker.classList.toggle("tw-hidden");
-  LoopSegmentEndMarker.classList.toggle("tw-hidden");
-}
-
-async function enableLoopSegment() {
-  if (!video) return;
-
-  timeUpdateListener = (_event: Event) => {
-    if (!video) return;
-    const currentTime = video.currentTime;
-    const loopStartTime = getTimeFromMarker("#start-marker") || 0;
-    let loopEndTime = getTimeFromMarker("#end-marker") || video.duration;
-
-    if (video.duration - loopEndTime <= 0.3) {
-      loopEndTime = video.duration - 0.3;
-    }
-
-    const isLoopSegmentEnabled =
-      LoopSegmentButton.getAttribute("aria-pressed") ?? "false";
-    if (currentTime > loopEndTime && isLoopSegmentEnabled === "true") {
-      video.currentTime = loopStartTime;
-    }
-  };
-
-  video.addEventListener("timeupdate", timeUpdateListener);
-  LoopSegmentStartMarker.style.left = "0%";
-  LoopSegmentEndMarker.style.left = "100%";
-}
-
-function disableLoopSegment() {
-  if (video && timeUpdateListener) {
-    video.removeEventListener("timeupdate", timeUpdateListener);
-    timeUpdateListener = null;
-  }
-}
-
-function getTimeFromMarker(markerSelector: "#start-marker" | "#end-marker") {
-  if (!video) return;
-
-  const duration = video.duration;
-  const marker = document.querySelector(markerSelector);
-  if (!marker) return;
-  const markerPositionPercentage = parseFloat(
-    (marker as HTMLDivElement).style.left,
-  );
-
-  return (markerPositionPercentage / 100) * duration;
-}
-
-function handleMarkerDrag(
-  e: React.MouseEvent,
-  markerType: "start" | "end" | null,
-) {
-  e.preventDefault();
-  isMarkerDragging = markerType;
-
-  document.addEventListener("mousemove", handleMouseMove);
-  document.addEventListener("mouseup", handleMouseUp);
-}
-
-function handleMouseMove(e: MouseEvent) {
-  if (!isMarkerDragging) return;
-
-  const progressBarContainer = document.querySelector(
-    ".ytp-progress-bar-container",
-  );
-  if (!progressBarContainer) return;
-  const progressBarRect = progressBarContainer.getBoundingClientRect();
-  const progressBarWidth = progressBarRect.width;
-
-  const xPosition = e.clientX - progressBarRect.left;
-  const newPosition = Math.max(0, Math.min(xPosition, progressBarWidth));
-  let newPercentage = (newPosition / progressBarWidth) * 100;
-
-  const startPercentage = parseFloat(LoopSegmentStartMarker.style.left);
-  const endPercentage = parseFloat(LoopSegmentEndMarker.style.left);
-
-  // Prevent markers from crossing each other
-  if (isMarkerDragging === "start" && newPercentage >= endPercentage) {
-    newPercentage = endPercentage - 0.1;
-  } else if (isMarkerDragging === "end" && newPercentage <= startPercentage) {
-    newPercentage = startPercentage + 0.1;
-  }
-
-  const marker = document.getElementById(`${isMarkerDragging}-marker`);
-  if (marker) {
-    marker.style.left = `${newPercentage}%`;
-  }
-  if (video && isMarkerDragging === "start") {
-    const loopStartTime = (newPercentage / 100) * video.duration;
-    video.currentTime = loopStartTime;
-  }
-}
-
-function handleMouseUp() {
-  if (isMarkerDragging) {
-    isMarkerDragging = null;
-    document.removeEventListener("mousemove", handleMouseMove);
-    document.removeEventListener("mouseup", handleMouseUp);
-  }
-}
-
-export function setLoopSegmentStart() {
-  if (!video) return;
-
-  const isLoopSegmentEnabled =
-    LoopSegmentButton.getAttribute("aria-pressed") === "true";
-
-  if (!isLoopSegmentEnabled) {
-    return;
-  }
-
-  const currentTime = video.currentTime;
-  const duration = video.duration;
-  const percentage = (currentTime / duration) * 100;
-
-  LoopSegmentStartMarker.style.left = `${percentage}%`;
-
-  // Ensure start marker does not cross the end marker
-  const endPercentage = parseFloat(LoopSegmentEndMarker.style.left);
-  if (percentage >= endPercentage) {
-    LoopSegmentStartMarker.style.left = `${endPercentage - 0.1}%`;
-  }
-}
-
-export function setLoopSegmentEnd() {
-  if (!video) return;
-
-  const isLoopSegmentEnabled =
-    LoopSegmentButton.getAttribute("aria-pressed") === "true";
-
-  if (!isLoopSegmentEnabled) {
-    return;
-  }
-
-  const currentTime = video.currentTime;
-  const duration = video.duration;
-  const percentage = (currentTime / duration) * 100;
-
-  LoopSegmentEndMarker.style.left = `${percentage}%`;
-
-  // Ensure end marker does not cross the start marker
-  const startPercentage = parseFloat(LoopSegmentStartMarker.style.left);
-  if (percentage <= startPercentage) {
-    LoopSegmentEndMarker.style.left = `${startPercentage + 0.1}%`;
-  }
-}
diff --git a/web-ext/src/content_scripts/index.css b/web-ext/src/content_scripts/index.css
deleted file mode 100644
index 0ae1ed21..00000000
--- a/web-ext/src/content_scripts/index.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@tailwind base;
-@tailwind utilities;
-
-#contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {
-  width: 10px !important;
-}
diff --git a/web-ext/src/content_scripts/index.ts b/web-ext/src/content_scripts/index.ts
deleted file mode 100644
index 398b3981..00000000
--- a/web-ext/src/content_scripts/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { Context } from "../background/context";
-import type { Storage } from "../background/store";
-
-import onPlaylistPage from "./pages/playlist";
-import onShortsPage from "./pages/shorts";
-import onWatchPage from "./pages/watch";
-import "./index.css";
-import {
-  EVENT_TYPE,
-  MESSAGE_TYPE,
-  WARNING_MESSAGE,
-} from "../constants/global.constants";
-
-const pageHandlers: Record<keyof Storage["preferences"], Function> = {
-  playlist: onPlaylistPage,
-  shorts: onShortsPage,
-  watch: onWatchPage,
-};
-
-function runApp(message: any): undefined {
-  (async () => {
-    const { type, payload } = JSON.parse(message);
-
-    if (type !== MESSAGE_TYPE.CONTEXT) return;
-    const ctx = payload as Exclude<Context, null>;
-
-    const { pathname, store } = ctx;
-    const handler = pageHandlers[pathname];
-
-    if (!handler) {
-      console.warn(WARNING_MESSAGE.NO_HANDLER_FOUND, pathname);
-      return;
-    }
-
-    const isEnabled = store.preferences[pathname].isEnabled;
-    if (!isEnabled) return;
-
-    await handler(ctx);
-  })();
-}
-
-// Handle Events
-chrome.runtime.sendMessage(
-  chrome.runtime.id,
-  JSON.stringify({ type: MESSAGE_TYPE.EVENT, payload: EVENT_TYPE.CONNECTED }),
-  {},
-  runApp,
-);
-chrome.runtime.onMessage.addListener(runApp);
diff --git a/web-ext/src/content_scripts/pages/playlist.tsx b/web-ext/src/content_scripts/pages/playlist.tsx
deleted file mode 100644
index 6d2b140c..00000000
--- a/web-ext/src/content_scripts/pages/playlist.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from "dom-chef";
-import elementReady from "element-ready";
-import {
-  InvalidPlaylistPayload,
-  PlaylistContext,
-  ValidPlaylistPayload,
-} from "../../background/context";
-
-const onPlaylistPage = async (ctx: PlaylistContext): Promise<void> => {
-  const { payload } = ctx;
-
-  const metadataActionBar = await elementReady(
-    "#page-manager ytd-browse > yt-page-header-renderer .yt-page-header-view-model__page-header-content yt-content-metadata-view-model",
-  );
-  if (!metadataActionBar) return;
-
-  let runtimeSection = document.querySelector("div#tppng-ytp-runtime-section");
-
-  const isValidPayload = (
-    p: ValidPlaylistPayload | InvalidPlaylistPayload,
-  ): p is ValidPlaylistPayload => "averageRuntime" in p && "totalRuntime" in p;
-
-  if (!runtimeSection) {
-    if (!isValidPayload(payload)) return; // skip if invalid or private playlist
-
-    const { averageRuntime, totalRuntime } = payload;
-
-    runtimeSection = (
-      <div
-        className="tw-mt-[2px] tw-box-border tw-h-fit tw-rounded-[8px] tw-bg-[rgba(101,101,101,0.4)] tw-backdrop-saturate-[180%] tw-backdrop-blur-[10px] tw-px-[15px] tw-py-[12px] tw-shadow-[0_4px_30px_rgba(0,0,0,0.1)] tw-transition-all tw-duration-300 tw-ease-in-out hover:tw-shadow-[0_4px_10px_rgba(0,0,0,0.15)]"
-        id="tppng-ytp-runtime-section"
-      >
-        <div className="tw-mb-[6px] tw-w-full tw-flex tw-items-center">
-          <img
-            src={chrome.runtime.getURL("assets/icons/icon128.png")}
-            className="tw-mx-[6px] tw-w-[24px]"
-            alt="Toppings Icon"
-          />
-          <h2 className="tw-mx-[6px] tw-text-[1.6rem] tw-font-extrabold tw-text-white tw-ml-[10px]">
-            Toppings
-          </h2>
-        </div>
-        <div className="tw-flex tw-flex-col tw-justify-evenly tw-items-start tw-pl-[10px] tw-text-[12px] tw-text-[#b9b8b8]">
-          <div>
-            <span>Average Runtime: </span>
-            <span id="tppng-ytp-average-runtime">
-              {formatRuntime(averageRuntime)}
-            </span>
-          </div>
-          <div>
-            <span>Total Runtime: </span>
-            <span id="tppng-ytp-total-runtime">
-              {formatRuntime(totalRuntime)}
-            </span>
-          </div>
-        </div>
-      </div>
-    );
-
-    metadataActionBar.append(runtimeSection);
-  } else {
-    if (!isValidPayload(payload)) {
-      runtimeSection.remove(); // remove section for private/invalid playlists
-      return;
-    }
-
-    const { averageRuntime, totalRuntime } = payload;
-    const averageRuntimeElement = document.getElementById(
-      "tppng-ytp-average-runtime",
-    );
-    const totalRuntimeElement = document.getElementById(
-      "tppng-ytp-total-runtime",
-    );
-
-    if (averageRuntimeElement && totalRuntimeElement) {
-      averageRuntimeElement.textContent = formatRuntime(averageRuntime);
-      totalRuntimeElement.textContent = formatRuntime(totalRuntime);
-    }
-  }
-};
-
-/**
- * Formats the runtime seconds into a human-readable string.
- *
- * @param {number} seconds - The seconds in the runtime.
- * @returns {string} - A formatted string representing the runtime.
- */
-function formatRuntime(seconds: number): string {
-  const days = Math.floor(seconds / 86400); // 1 day = 24 hours * 60 minutes * 60 seconds
-  const hours = Math.floor((seconds % 86400) / 3600);
-  const minutes = Math.floor((seconds % 3600) / 60);
-  const remainingSeconds = seconds % 60;
-
-  const parts = [];
-
-  if (days > 0) {
-    parts.push(`${days} day${days !== 1 ? "s" : ""}`);
-  }
-
-  if (hours > 0) {
-    parts.push(`${hours} hour${hours !== 1 ? "s" : ""}`);
-  }
-
-  if (minutes > 0) {
-    parts.push(`${minutes} minute${minutes !== 1 ? "s" : ""}`);
-  }
-
-  if (remainingSeconds > 0) {
-    parts.push(
-      `${remainingSeconds} second${remainingSeconds !== 1 ? "s" : ""}`,
-    );
-  }
-
-  if (parts.length === 0) {
-    parts.push("0 seconds");
-  }
-
-  return parts.join(", ");
-}
-
-export default onPlaylistPage;
diff --git a/web-ext/src/content_scripts/pages/shorts.tsx b/web-ext/src/content_scripts/pages/shorts.tsx
deleted file mode 100644
index 6f56e69d..00000000
--- a/web-ext/src/content_scripts/pages/shorts.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import React from "dom-chef";
-import elementReady from "element-ready";
-import type { Storage } from "../../background/store";
-import type { ShortsContext } from "../../background/context";
-
-let player: HTMLVideoElement | undefined;
-let preferences: Storage["preferences"]["shorts"] | undefined;
-
-const onShortsPage = async (ctx: ShortsContext) => {
-  const { store } = ctx;
-  preferences = store.preferences.shorts;
-  if (preferences === undefined) return;
-
-  player = await elementReady("ytd-reel-video-renderer[is-active] video", {
-    stopOnDomReady: false,
-  });
-  if (player === undefined) return;
-
-  const playerActions = player
-    .closest("ytd-reel-video-renderer[is-active]")
-    ?.querySelector("#actions");
-  if (!playerActions) return;
-
-  // Keyboard Shortcuts
-  document.body.removeEventListener("keydown", useShortcuts);
-  document.body.addEventListener("keydown", useShortcuts);
-
-  // Auto Scroll
-  setupAutoScroll();
-  player.removeEventListener("playing", setupAutoScroll);
-  player.addEventListener("playing", setupAutoScroll);
-  player.removeEventListener("ended", scrollToNextReel);
-  player.addEventListener("ended", scrollToNextReel);
-
-  const autoScrollButton = playerActions.querySelector("#tppng-auto-scroll");
-  if (!autoScrollButton) {
-    playerActions.prepend(AutoScrollButton);
-    if (!preferences.reelAutoScroll.value) {
-      AutoScrollButton.classList.add("tw-bg-white/10");
-      AutoScrollButton.classList.remove("tw-bg-white/20");
-    } else {
-      AutoScrollButton.classList.add("tw-bg-white/20");
-      AutoScrollButton.classList.remove("tw-bg-white/10");
-    }
-  }
-
-  // Toggle Playback Rate
-  const togglePlaybackRateButton = playerActions.querySelector(
-    "#tppng-toggle-playback-rate",
-  );
-  if (!togglePlaybackRateButton) {
-    playerActions.prepend(TogglePlaybackRateButton);
-    if (player.playbackRate === 1) {
-      TogglePlaybackRateButton.classList.add("tw-bg-white/10");
-      TogglePlaybackRateButton.classList.remove("tw-bg-white/20");
-    } else {
-      TogglePlaybackRateButton.classList.add("tw-bg-white/20");
-      TogglePlaybackRateButton.classList.remove("tw-bg-white/10");
-    }
-  }
-};
-
-function useShortcuts(event: KeyboardEvent) {
-  if (player === null || player === undefined) return;
-  if (preferences === undefined) return;
-  if (
-    event.target !== null &&
-    (event.target as HTMLElement).tagName !== "INPUT" &&
-    (event.target as HTMLElement).tagName !== "TEXTAREA" &&
-    !(event.target as HTMLElement).matches(
-      "#contenteditable-root.yt-formatted-string",
-    )
-  ) {
-    if (event.key === `${preferences.togglePlaybackRate.key.toLowerCase()}`) {
-      togglePlaybackRate();
-    } else if (event.key === `${preferences.seekBackward.key.toLowerCase()}`) {
-      player.currentTime -= +preferences.seekBackward.value;
-    } else if (event.key === `${preferences.seekForward.key.toLowerCase()}`) {
-      player.currentTime += +preferences.seekForward.value;
-    }
-  }
-}
-
-let setupTimeoutId: ReturnType<typeof setTimeout>;
-function setupAutoScroll() {
-  if (player === null || player === undefined) return;
-  if (!preferences?.reelAutoScroll.value) return;
-  clearTimeout(setupTimeoutId);
-  setupTimeoutId = setTimeout(() => {
-    player?.removeAttribute("loop");
-  }, 400);
-}
-
-function scrollToNextReel() {
-  if (player === null || player === undefined) return;
-  if (preferences === undefined) return;
-  if (!preferences.reelAutoScroll.value) {
-    player.play();
-    return;
-  }
-
-  const isCommentsExpanded = document
-    .querySelector("ytd-engagement-panel-section-list-renderer")
-    ?.getAttribute("visibility");
-  if (isCommentsExpanded === "ENGAGEMENT_PANEL_VISIBILITY_EXPANDED") {
-    player.play();
-    return;
-  }
-  const nextReelButton = document.querySelector(
-    "[aria-label='Next video']",
-  ) as HTMLButtonElement;
-
-  nextReelButton.click();
-}
-
-const AutoScrollButton = (
-  <button
-    id="#tppng-auto-scroll"
-    className="tw-mt-[16px] yt-spec-button-shape-next yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-l yt-spec-button-shape-next--icon-button tw-outline-none tw-border-none tw-font-medium tw-text-white"
-    onClick={enableAutoScroll}
-  >
-    Auto
-  </button>
-);
-
-const TogglePlaybackRateButton = (
-  <button
-    id="#tppng-toggle-playback-rate"
-    className="yt-spec-button-shape-next yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-l yt-spec-button-shape-next--icon-button tw-outline-none tw-border-none tw-font-medium tw-text-white"
-    onClick={togglePlaybackRate}
-  >
-    2x
-  </button>
-);
-
-function togglePlaybackRate() {
-  if (player === null || player === undefined) return;
-  player.playbackRate = player.playbackRate === 1 ? 2 : 1;
-  TogglePlaybackRateButton.classList.toggle("tw-bg-white/10");
-  TogglePlaybackRateButton.classList.toggle("tw-bg-white/20");
-}
-
-function enableAutoScroll() {
-  if (preferences === undefined) return;
-  preferences.reelAutoScroll.value = !preferences.reelAutoScroll.value;
-  AutoScrollButton.classList.toggle("tw-bg-white/10");
-  AutoScrollButton.classList.toggle("tw-bg-white/20");
-}
-
-export default onShortsPage;
diff --git a/web-ext/src/content_scripts/pages/watch.tsx b/web-ext/src/content_scripts/pages/watch.tsx
deleted file mode 100644
index 35d9b8eb..00000000
--- a/web-ext/src/content_scripts/pages/watch.tsx
+++ /dev/null
@@ -1,343 +0,0 @@
-import React from "dom-chef";
-import elementReady from "element-ready";
-import {
-  setupLoopSegment,
-  LoopSegmentButton,
-  LoopSegmentEndMarker,
-  LoopSegmentStartMarker,
-  toggleLoopSegment,
-  setLoopSegmentStart,
-  setLoopSegmentEnd,
-} from "../components/LoopSegment";
-import { WatchContext } from "../../background/context";
-import { Storage } from "../../background/store";
-
-let player: HTMLVideoElement | undefined;
-let playbackMenuButton: HTMLElement | undefined;
-let preferences: Storage["preferences"]["watch"] | undefined;
-
-const onWatchPage = async (ctx: WatchContext) => {
-  const { store } = ctx;
-  preferences = store.preferences.watch;
-  if (preferences === undefined) return;
-
-  player = await elementReady("video", {
-    stopOnDomReady: false,
-  });
-  if (player === null || player === undefined) return;
-
-  // Reset Player
-  player.playbackRate = parseFloat(preferences.defaultPlaybackRate.value);
-  const labels = document.querySelectorAll(".ytp-menuitem-label");
-  if (labels.length !== 0) {
-    for (const label of labels) {
-      if (label.textContent === "Playback speed") {
-        const playbackMenuButton = label.parentNode as HTMLElement;
-        playbackMenuButton.children[2].textContent =
-          player.playbackRate === 1
-            ? "Normal"
-            : `${Number(player.playbackRate.toFixed(2))}`;
-        break;
-      }
-    }
-  }
-
-  // Keyboard Shortcuts
-  document.removeEventListener("keydown", useShortcuts);
-  document.addEventListener("keydown", useShortcuts);
-
-  // Loop Segment
-  const rightControls = await elementReady("div.ytp-right-controls");
-  if (rightControls) {
-    rightControls.prepend(LoopSegmentButton);
-  }
-  const progressBar = await elementReady("div.ytp-progress-bar-container");
-  if (progressBar) {
-    await setupLoopSegment();
-    progressBar.append(LoopSegmentStartMarker, LoopSegmentEndMarker);
-  }
-
-  const playerSettingsButton = await elementReady("button.ytp-settings-button");
-  if (playerSettingsButton === undefined) return;
-  playerSettingsButton.removeEventListener("click", onSettingsMenu);
-  playerSettingsButton.addEventListener("click", onSettingsMenu);
-};
-
-const onSettingsMenu = async (): Promise<void> => {
-  if (player === null || player === undefined) return;
-
-  const menuItemLabels = await elementReady(".ytp-menuitem-label");
-  if (menuItemLabels === undefined) return;
-  const labels = document.querySelectorAll(".ytp-menuitem-label");
-  if (labels.length === 0) return;
-
-  for (const label of labels) {
-    if (label.textContent === "Playback speed") {
-      playbackMenuButton = label.parentNode as HTMLElement;
-      playbackMenuButton.children[2].textContent =
-        player.playbackRate === 1
-          ? "Normal"
-          : `${Number(player.playbackRate.toFixed(2))}`;
-
-      playbackMenuButton.removeEventListener("click", onPlaybackRateMenu);
-      playbackMenuButton.addEventListener("click", onPlaybackRateMenu);
-      break;
-    }
-  }
-};
-
-const onPlaybackRateMenu = async (): Promise<void> => {
-  if (player === undefined || player === null) return;
-
-  const playbackRatePanel = await elementReady(".ytp-panel-animate-forward");
-  if (playbackRatePanel === undefined) return;
-
-  // Disable Native Custom PlaybackRate Slider Option
-  const menuPanelOptions = playbackRatePanel.querySelector(
-    ".ytp-panel-options",
-  ) as HTMLElement | null;
-  if (menuPanelOptions) {
-    menuPanelOptions.style.display = "none";
-  }
-
-  replacePlaybackItems(playbackRatePanel);
-};
-
-const replacePlaybackItems = (playbackRatePanel: HTMLElement) => {
-  if (player === undefined || player === null) return;
-  if (preferences === undefined) return;
-
-  // Replace Native PlaybackRate Items
-  const panelMenu = playbackRatePanel.querySelector(".ytp-panel-menu");
-  if (panelMenu === null) return;
-
-  const currentRate = player.playbackRate.toFixed(2);
-  const isPresetRate = preferences.customPlaybackRates.some(
-    (rate) => rate === currentRate,
-  );
-
-  const playbackRateItems = preferences.customPlaybackRates.map(
-    (playbackRate) => {
-      const label = playbackRate === "1.00" ? "Normal" : Number(playbackRate);
-      const isAriaChecked = playbackRate === currentRate ? "true" : "false";
-
-      return (
-        <div
-          key={playbackRate}
-          className="ytp-menuitem tw-tppng-playback-item"
-          role="menuitemradio"
-          aria-checked={isAriaChecked}
-          tabIndex={0}
-          data-tppng-playback-rate={playbackRate}
-          onClick={(_event) => {
-            const panelBackButton = document.querySelector(
-              ".ytp-panel-back-button",
-            ) as HTMLElement | null;
-            if (panelBackButton !== null) {
-              panelBackButton.click();
-            }
-            setPlaybackRate(Number(playbackRate));
-          }}
-        >
-          <div className="ytp-menuitem-label">{label}</div>
-        </div>
-      );
-    },
-  );
-
-  const customPlaybackRateItem = (
-    <div
-      className="ytp-menuitem tw-tppng-playback-item"
-      id="tppng-playback-custom-item"
-      role="menuitemradio"
-      aria-checked={isPresetRate ? "false" : "true"}
-      tabIndex={0}
-      style={{ display: isPresetRate ? "none" : "" }}
-      onClick={(_event) => {
-        const panelBackButton = document.querySelector(
-          ".ytp-panel-back-button",
-        ) as HTMLElement | null;
-        if (panelBackButton !== null) {
-          panelBackButton.click();
-        }
-        setPlaybackRate(
-          Number(player!.getAttribute("data-tppng-playback-rate") ?? "1"),
-        );
-      }}
-    >
-      <div className="ytp-menuitem-label">
-        Custom (
-        {Number(
-          player!.getAttribute("data-tppng-playback-rate") ??
-            player!.playbackRate,
-        )}
-        )
-      </div>
-    </div>
-  );
-
-  panelMenu.replaceChildren(customPlaybackRateItem, ...playbackRateItems);
-};
-
-const useShortcuts = (event: KeyboardEvent): void => {
-  if (!player || !preferences) return;
-
-  const target = event.target as HTMLElement;
-  const tagName = target?.tagName;
-  const isNotEditable =
-    tagName !== "INPUT" &&
-    tagName !== "TEXTAREA" &&
-    !target.matches("#contenteditable-root.yt-formatted-string");
-
-  if (!isNotEditable) return;
-
-  const key = event.key.toLowerCase();
-
-  switch (key) {
-    case preferences.togglePlaybackRate.key.toLowerCase(): {
-      setPlaybackRate(
-        player.playbackRate !== 1
-          ? 1
-          : Number(preferences.togglePlaybackRate.value),
-      );
-      break;
-    }
-    case preferences.seekBackward.key.toLowerCase(): {
-      const value = Number(preferences.seekBackward.value);
-      player.currentTime -= value;
-      onDoubleTapSeek("back", value);
-      break;
-    }
-    case preferences.seekForward.key.toLowerCase(): {
-      const value = Number(preferences.seekForward.value);
-      player.currentTime += value;
-      onDoubleTapSeek("forward", value);
-      break;
-    }
-    case preferences.increasePlaybackRate.key.toLowerCase(): {
-      const value = Number(preferences.increasePlaybackRate.value);
-      const increasedPlaybackRate = Number(
-        (player.playbackRate + value).toFixed(2),
-      );
-      if (increasedPlaybackRate <= 16) {
-        setPlaybackRate(increasedPlaybackRate);
-      }
-      break;
-    }
-    case preferences.decreasePlaybackRate.key.toLowerCase(): {
-      const value = Number(preferences.decreasePlaybackRate.value);
-      const decreasedPlaybackRate = Number(
-        (player.playbackRate - value).toFixed(2),
-      );
-      if (decreasedPlaybackRate >= 0.0625) {
-        setPlaybackRate(decreasedPlaybackRate);
-      }
-      break;
-    }
-    case preferences.toggleLoopSegment.key.toLowerCase(): {
-      toggleLoopSegment();
-      break;
-    }
-    case preferences.setLoopSegmentBegin.key.toLowerCase(): {
-      setLoopSegmentStart();
-      break;
-    }
-    case preferences.setLoopSegmentEnd.key.toLowerCase(): {
-      setLoopSegmentEnd();
-      break;
-    }
-    default:
-      break;
-  }
-};
-
-let doubleTapSeekTimeout: ReturnType<typeof setTimeout>;
-const onDoubleTapSeek = (dataSide: "back" | "forward", time: number): void => {
-  const doubleTapSeekElement = document.querySelector(
-    ".ytp-doubletap-ui-legacy",
-  ) as HTMLElement | null;
-  if (doubleTapSeekElement !== null) {
-    doubleTapSeekElement.setAttribute("data-side", dataSide);
-    doubleTapSeekElement.style.display = "";
-    const doubleTapSeekLabel = doubleTapSeekElement.querySelector(
-      ".ytp-doubletap-tooltip-label",
-    ) as HTMLElement;
-    if (doubleTapSeekLabel !== null) {
-      doubleTapSeekLabel.textContent = `${time} seconds`;
-    }
-    const staticCircle = document.querySelector(
-      ".ytp-doubletap-static-circle",
-    ) as HTMLElement;
-    if (staticCircle !== null && dataSide === "back") {
-      staticCircle.style.top = "50%";
-      staticCircle.style.left = "10%";
-      staticCircle.style.width = "110px";
-      staticCircle.style.height = "110px";
-      staticCircle.style.transform = "translate(-14px, -40px)";
-    } else if (staticCircle !== null && dataSide === "forward") {
-      staticCircle.style.top = "50%";
-      staticCircle.style.left = "80%";
-      staticCircle.style.width = "110px";
-      staticCircle.style.height = "110px";
-      staticCircle.style.transform = "translate(-28px, -40px)";
-    }
-    clearTimeout(doubleTapSeekTimeout);
-    doubleTapSeekTimeout = setTimeout(() => {
-      (doubleTapSeekElement as HTMLElement).setAttribute("data-side", "null");
-      (doubleTapSeekElement as HTMLElement).style.display = "none";
-      const doubleTapLabel = (
-        doubleTapSeekElement as HTMLElement
-      ).querySelector(".ytp-doubletap-tooltip-label");
-      if (doubleTapLabel !== null) {
-        doubleTapLabel.textContent = "5 seconds";
-      }
-      staticCircle.style.cssText = "null";
-    }, 500);
-  }
-};
-
-const setPlaybackRate = (rate: number): void => {
-  if (player === null || player === undefined) return;
-
-  const prevPlaybackRate = player.playbackRate.toFixed(2);
-  const prevPlaybackMenuItem =
-    document.querySelector(
-      `.tppng-playback-item[data-tppng-playback-rate="${prevPlaybackRate}"]`,
-    ) || document.querySelector("#tppng-playback-custom-item");
-  if (prevPlaybackMenuItem) {
-    prevPlaybackMenuItem.ariaChecked = "false";
-  }
-
-  player.playbackRate = rate;
-
-  const nextPlaybackRate = player.playbackRate.toFixed(2);
-  const nextPlaybackMenuItem: HTMLElement | null =
-    document.querySelector(
-      `.tppng-playback-item[data-tppng-playback-rate="${nextPlaybackRate}"]`,
-    ) || document.querySelector("#tppng-playback-custom-item");
-  if (nextPlaybackMenuItem) {
-    nextPlaybackMenuItem.ariaChecked = "true";
-    if (nextPlaybackMenuItem.id === "tppng-playback-custom-item") {
-      player.setAttribute(
-        "data-tppng-playback-rate",
-        player.playbackRate.toFixed(2),
-      );
-      nextPlaybackMenuItem.style.display = "";
-      const customPlaybackItemLabel = document.querySelector(
-        "#tppng-playback-custom-item > .ytp-menuitem-label",
-      );
-      if (customPlaybackItemLabel) {
-        customPlaybackItemLabel.textContent = `Custom (${player.playbackRate})`;
-      }
-    }
-  }
-
-  if (playbackMenuButton !== null && playbackMenuButton !== undefined) {
-    playbackMenuButton.children[2].textContent =
-      player.playbackRate === 1
-        ? "Normal"
-        : `${Number(player.playbackRate.toFixed(2))}`;
-  }
-};
-
-export default onWatchPage;
diff --git a/web-ext/src/options/App.tsx b/web-ext/src/options/App.tsx
deleted file mode 100644
index 84c04eb2..00000000
--- a/web-ext/src/options/App.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { useState } from "react";
-import { Outlet, useLoaderData } from "react-router-dom";
-import Navbar from "./components/Navbar";
-import StoreContext from "./store";
-import { Storage } from "../background/store";
-
-function App() {
-  const loadedStore = useLoaderData() as Storage;
-  const [store, setStore] = useState<Storage>(loadedStore);
-
-  return (
-    <StoreContext.Provider value={{ store: store, setStore: setStore }}>
-      <div className="tw-min-h-screen tw-bg-[#0f0f10] tw-text-[#e7e7e4]">
-        <Navbar />
-        <div className="tw-py-6 tw-px-16 tw-overflow-y-auto tw-w-full">
-          <Outlet />
-        </div>
-      </div>
-    </StoreContext.Provider>
-  );
-}
-
-export default App;
diff --git a/web-ext/src/options/components/Card.tsx b/web-ext/src/options/components/Card.tsx
deleted file mode 100644
index d166791d..00000000
--- a/web-ext/src/options/components/Card.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { ReactNode } from "react";
-
-function Card({
-  title,
-  description,
-  children,
-}: {
-  title?: string;
-  description?: string;
-  children: ReactNode | ReactNode[];
-}) {
-  return (
-    <section className="tw-bg-[#18181b] tw-mb-6 tw-p-4 tw-rounded-lg tw-shadow-lg">
-      {(title || description) && (
-        <div className="tw-pt-4 tw-pl-4">
-          <h3 className="tw-text-4xl tw-text-white tw-font-bold">{title}</h3>
-          <p className="tw-text-gray-400 tw-text-sm">{description}</p>
-        </div>
-      )}
-      <div className="tw-flex tw-flex-col tw-items-start tw-justify-around tw-py-8 tw-gap-4">
-        {children}
-      </div>
-    </section>
-  );
-}
-
-export default Card;
diff --git a/web-ext/src/options/components/Input.tsx b/web-ext/src/options/components/Input.tsx
deleted file mode 100644
index d1a655d6..00000000
--- a/web-ext/src/options/components/Input.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import React from "react";
-import { ChangeEvent, useState, useEffect, useRef } from "react";
-import Tooltip from "./Tooltip";
-
-export default function InputBlock({
-  title,
-  description,
-  initialValue,
-  validator,
-  onChange,
-}: {
-  title: string;
-  description?: string;
-  initialValue: string;
-  validator: (value: string) => boolean;
-  onChange: (value: string) => void;
-}) {
-  const [value, setValue] = useState(initialValue);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isValid, setIsValid] = useState<boolean | null>(null);
-  const debounceTimer = useRef<NodeJS.Timeout | null>(null);
-
-  const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setValue(e.target.value);
-    setIsValid(null);
-    setIsLoading(true);
-
-    if (debounceTimer.current) {
-      clearTimeout(debounceTimer.current);
-    }
-
-    debounceTimer.current = setTimeout(() => {
-      const isValid = validator(e.target.value);
-      setIsLoading(false);
-      setIsValid(isValid);
-
-      if (isValid) {
-        onChange(e.target.value);
-        // Hide the validation SVG if valid
-        setTimeout(() => {
-          setIsValid(null);
-        }, 1500);
-      }
-    }, 750);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-      }
-    };
-  }, []);
-
-  return (
-    <div className="tw-font-sans tw-w-full tw-flex tw-flex-col tw-px-4 tw-py-1">
-      <div className="tw-flex tw-justify-between tw-items-center">
-        <div className="tw-flex tw-items-center tw-space-x-3">
-          <label className="tw-text-lg tw-font-medium tw-text-gray-100">
-            {title}
-          </label>
-          {description && (
-            <Tooltip text={description}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="tw-h-5 tw-w-5 tw-text-gray-400 tw-hover:text-gray-200 tw-transition-colors duration-200"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 16h-1v-4h-1m1-4h.01M12 18.5A6.5 6.5 0 1118.5 12A6.508 6.508 0 0112 18.5z"
-                />
-              </svg>
-            </Tooltip>
-          )}
-        </div>
-        <div className="tw-relative">
-          <input
-            type="text"
-            className="tw-p-2 tw-bg-black tw-text-white tw-text-center tw-rounded tw-border tw-border-gray-600/50 tw-focus:outline-none tw-focus:ring-2 tw-focus:ring-blue-500"
-            placeholder="Enter your preferences"
-            value={value}
-            onChange={onChangeHandler}
-          />
-          {isLoading && (
-            <svg
-              className="tw-absolute tw-top-[8px] -tw-right-6 tw-animate-spin tw-h-5 tw-w-5 tw-text-blue-500"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <circle
-                className="tw-opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                className="tw-opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291l-1.707-1.707A7.968 7.968 0 014 12H0c0 3.312 1.344 6.312 3.515 8.485l2.485-2.485z"
-              />
-            </svg>
-          )}
-          {isValid === true && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="tw-absolute tw-top-1/2 -tw-translate-y-1/2 -tw-right-6 tw-h-5 tw-w-5 tw-text-green-500"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          )}
-          {isValid === false && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="tw-absolute tw-top-1/2 -tw-translate-y-1/2 -tw-right-6 tw-h-5 tw-w-5 tw-text-red-500"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/web-ext/src/options/components/Keybinding.tsx b/web-ext/src/options/components/Keybinding.tsx
deleted file mode 100644
index deb7146d..00000000
--- a/web-ext/src/options/components/Keybinding.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from "react";
-import { KeyboardEvent, useState } from "react";
-import Tooltip from "./Tooltip";
-
-export default function KeybindingBlock({
-  title,
-  description,
-  keybinding,
-  onChange,
-}: {
-  title: string;
-  description?: string;
-  keybinding: string;
-  onChange: (key: string) => void;
-}) {
-  const [key, setKey] = useState(keybinding);
-  const recordKeyHandler = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (
-      (e.keyCode >= 48 && e.keyCode <= 57) || // Numbers 0-9
-      (e.keyCode >= 65 && e.keyCode <= 90) // Letters A-Z
-    ) {
-      e.preventDefault();
-      e.stopPropagation();
-      const key = String.fromCharCode(e.keyCode);
-      setKey(key);
-      onChange(key);
-    } else if (e.keyCode === 8 || e.keyCode === 27) {
-      const key = "";
-      setKey(key);
-      onChange(key);
-    }
-  };
-
-  const focusHandler = () => {
-    setKey("");
-  };
-
-  const blurHandler = () => {
-    setKey(keybinding);
-  };
-
-  return (
-    <div className="tw-font-sans tw-w-full tw-flex tw-justify-between tw-items-center tw-px-4 tw-py-1">
-      <div className="tw-flex tw-items-center tw-space-x-3">
-        <label className="tw-text-lg tw-font-medium tw-text-gray-100">
-          {title}
-        </label>
-        {description && (
-          <Tooltip text={description}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="tw-h-5 tw-w-5 tw-text-gray-400 hover:tw-text-gray-200 tw-transition-colors tw-duration-200"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M13 16h-1v-4h-1m1-4h.01M12 18.5A6.5 6.5 0 1118.5 12A6.508 6.508 0 0112 18.5z"
-              />
-            </svg>
-          </Tooltip>
-        )}
-      </div>
-      <input
-        type="text"
-        className="tw-p-2 tw-bg-black tw-text-white tw-text-center tw-rounded tw-border tw-border-gray-600/50 tw-focus:outline-none tw-focus:ring-2 tw-focus:ring-blue-500"
-        placeholder="Press a key"
-        value={key}
-        onKeyDown={recordKeyHandler}
-        onFocus={focusHandler}
-        onBlur={blurHandler}
-        readOnly
-      />
-    </div>
-  );
-}
diff --git a/web-ext/src/options/components/Navbar.tsx b/web-ext/src/options/components/Navbar.tsx
deleted file mode 100644
index 4bc530f7..00000000
--- a/web-ext/src/options/components/Navbar.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-export default function Navbar() {
-  const version = chrome.runtime.getManifest().version;
-
-  return (
-    <div className="tw-p-4 tw-bg-[#18181b] tw-shadow tw-h-full">
-      <div className="tw-flex tw-flex-col tw-items-left">
-        <h1 className="tw-text-2xl tw-font-bold">Toppings</h1>
-        <div className="tw-text-xs tw-text-gray-500">
-          v<span id="version">{version}</span>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/web-ext/src/options/components/Switch.tsx b/web-ext/src/options/components/Switch.tsx
deleted file mode 100644
index 2f0657fc..00000000
--- a/web-ext/src/options/components/Switch.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { ChangeEvent, useState } from "react";
-import Tooltip from "./Tooltip";
-
-export default function SwitchBlock({
-  title,
-  description,
-  isEnabled,
-  onToggle,
-}: {
-  title: string;
-  description?: string;
-  isEnabled: boolean;
-  onToggle: (isEnabled: boolean) => void;
-}) {
-  const [checked, setChecked] = useState(isEnabled);
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const isChecked = e.target.checked;
-    setChecked(isChecked);
-    onToggle(isChecked);
-  };
-  return (
-    <div className="tw-font-sans tw-w-full tw-flex tw-justify-between tw-items-center tw-px-4">
-      <div className="tw-flex tw-items-center tw-space-x-3">
-        <label className="tw-text-lg tw-font-medium tw-text-gray-100">
-          {title}
-        </label>
-        {description && (
-          <Tooltip text={description}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-5 w-5 text-gray-400 hover:text-gray-300 transition-colors duration-200"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M13 16h-1v-4h-1m1-4h.01M12 18.5A6.5 6.5 0 1118.5 12A6.508 6.508 0 0112 18.5z"
-              />
-            </svg>
-          </Tooltip>
-        )}
-      </div>
-      <label className="tw-relative tw-inline-flex tw-items-center tw-h-6 tw-rounded-full tw-w-11 tw-cursor-pointer">
-        <input
-          type="checkbox"
-          checked={checked}
-          onChange={handleChange}
-          className="tw-sr-only"
-        />
-        <div
-          className={`tw-block tw-w-full tw-h-full tw-rounded-full tw-transition-colors tw-duration-300 tw-ease-in-out ${
-            checked
-              ? "tw-bg-blue-500"
-              : "tw-bg-gray-600 tw-border tw-border-gray-400"
-          }`}
-        ></div>
-        <span
-          className={`tw-absolute tw-left-1 tw-top-1 tw-transform tw-transition-transform tw-duration-300 tw-ease-in-out ${
-            checked
-              ? "tw-translate-x-5 tw-bg-white"
-              : "tw-translate-x-0 tw-bg-gray-300"
-          } tw-inline-block tw-w-4 tw-h-4 tw-rounded-full`}
-        />
-      </label>
-    </div>
-  );
-}
diff --git a/web-ext/src/options/components/Tooltip.tsx b/web-ext/src/options/components/Tooltip.tsx
deleted file mode 100644
index 9e2c4efd..00000000
--- a/web-ext/src/options/components/Tooltip.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { ReactNode, useState } from "react";
-
-interface TooltipProps {
-  children: ReactNode;
-  text: string;
-}
-
-const Tooltip = ({ children, text }: TooltipProps) => {
-  const [visible, setVisible] = useState(false);
-
-  return (
-    <div className="tw-relative tw-flex tw-items-center">
-      <div
-        onMouseEnter={() => setVisible(true)}
-        onMouseLeave={() => setVisible(false)}
-        className="tw-cursor-pointer"
-      >
-        {children}
-      </div>
-      {visible && (
-        <div className="tw-absolute tw-left-full tw-ml-2 tw-w-40 tw-p-2 tw-text-xs tw-text-white tw-bg-black tw-rounded tw-shadow-lg tw-z-10">
-          {text}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Tooltip;
diff --git a/web-ext/src/options/index.css b/web-ext/src/options/index.css
deleted file mode 100644
index 135c24b0..00000000
--- a/web-ext/src/options/index.css
+++ /dev/null
@@ -1,443 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-*,
-::before,
-::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: theme("borderColor.DEFAULT", currentColor); /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: "";
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-html,
-:host {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -moz-tab-size: 4; /* 3 */
-  tab-size: 4; /* 3 */
-  font-family: theme(
-    "fontFamily.sans",
-    ui-sans-serif,
-    system-ui,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji"
-  ); /* 4 */
-  font-feature-settings: theme(
-    "fontFamily.sans[1].fontFeatureSettings",
-    normal
-  ); /* 5 */
-  font-variation-settings: theme(
-    "fontFamily.sans[1].fontVariationSettings",
-    normal
-  ); /* 6 */
-  -webkit-tap-highlight-color: transparent; /* 7 */
-}
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-body {
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: theme(
-    "fontFamily.mono",
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
-    monospace
-  ); /* 1 */
-  font-feature-settings: theme(
-    "fontFamily.mono[1].fontFeatureSettings",
-    normal
-  ); /* 2 */
-  font-variation-settings: theme(
-    "fontFamily.mono[1].fontVariationSettings",
-    normal
-  ); /* 3 */
-  font-size: 1em; /* 4 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  font-weight: inherit; /* 1 */
-  line-height: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
-  color: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-button,
-input:where([type="button"]),
-input:where([type="reset"]),
-input:where([type="submit"]) {
-  -webkit-appearance: button; /* 1 */
-  background-color: transparent; /* 2 */
-  background-image: none; /* 2 */
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Reset default styling for dialogs.
-*/
-dialog {
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1; /* 1 */
-  color: theme("colors.gray.400", #9ca3af); /* 2 */
-}
-
-/*
-Set the default cursor for buttons.
-*/
-
-button,
-[role="button"] {
-  cursor: pointer;
-}
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden]:where(:not([hidden="until-found"])) {
-  display: none;
-}
-
-:root {
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  ::-webkit-scrollbar {
-    width: 12px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: #18181b;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
-}
diff --git a/web-ext/src/options/index.tsx b/web-ext/src/options/index.tsx
deleted file mode 100644
index 2ed88af8..00000000
--- a/web-ext/src/options/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { createMemoryRouter, RouterProvider } from "react-router-dom";
-import App from "./App";
-import General from "./routes/General";
-import ErrorPage from "./routes/error-page";
-import "./index.css";
-import { getStorage } from "../background/store";
-
-const router = createMemoryRouter([
-  {
-    path: "/",
-    element: <App />,
-    loader: getStorage,
-    errorElement: <ErrorPage />,
-    children: [
-      {
-        path: "",
-        element: <General />,
-      },
-    ],
-  },
-]);
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <RouterProvider router={router} />
-  </React.StrictMode>,
-);
diff --git a/web-ext/src/options/routes/General.tsx b/web-ext/src/options/routes/General.tsx
deleted file mode 100644
index 004ed4ee..00000000
--- a/web-ext/src/options/routes/General.tsx
+++ /dev/null
@@ -1,428 +0,0 @@
-import React, { ChangeEvent } from "react";
-import { useContext } from "react";
-import { produce } from "immer";
-import StoreContext from "../store";
-import Card from "../components/Card";
-import Switch from "../components/Switch";
-import Keybinding from "../components/Keybinding";
-import Input from "../components/Input";
-
-export default function General() {
-  const { store, setStore } = useContext(StoreContext)!;
-
-  const setIsExtensionEnabled = (isEnabled: boolean) => {
-    const newConfig = produce(store, (draft) => {
-      draft.isExtensionEnabled = isEnabled;
-    });
-    setStore(newConfig);
-
-    const prefix = `${isEnabled ? "" : "disabled_"}`;
-    const browser = getBrowserEngine();
-
-    if (browser === "firefox") {
-      // @ts-ignore: Firefox uses `browserAction` instead of `action` in Manifest V2,
-      // but the TypeScript definitions for `chrome` do not account for this discrepancy.
-      chrome.browserAction.setIcon({
-        path: {
-          16: `/assets/icons/${prefix}icon16.png`,
-          32: `/assets/icons/${prefix}icon32.png`,
-          48: `/assets/icons/${prefix}icon48.png`,
-          128: `/assets/icons/${prefix}icon128.png`,
-        },
-      });
-      chrome.storage.sync.set(newConfig);
-    } else {
-      chrome.action.setIcon({
-        path: {
-          16: `/assets/icons/${prefix}icon16.png`,
-          32: `/assets/icons/${prefix}icon32.png`,
-          48: `/assets/icons/${prefix}icon48.png`,
-          128: `/assets/icons/${prefix}icon128.png`,
-        },
-      });
-      chrome.storage.sync.set(newConfig);
-    }
-  };
-
-  const getBrowserEngine = (): "firefox" | "chromium" => {
-    if (typeof navigator !== "undefined" && navigator.userAgent) {
-      if (navigator.userAgent.includes("Firefox")) {
-        return "firefox";
-      } else if (
-        navigator.userAgent.includes("Chrome") ||
-        navigator.userAgent.includes("Edg") ||
-        navigator.userAgent.includes("OPR") // Opera
-      ) {
-        return "chromium";
-      }
-    }
-    return "chromium"; // Default to Chromium for unknown cases
-  };
-
-  const setIsPageEnabled = (
-    pathname: keyof (typeof store)["preferences"],
-    isEnabled: boolean,
-  ) => {
-    const newConfig = produce(store, (draft) => {
-      draft.preferences[pathname].isEnabled = isEnabled;
-    });
-    setStore(newConfig);
-    chrome.storage.sync.set(newConfig);
-  };
-
-  const customPlaybackRatesValidator = (inValue: string) => {
-    const regex = /^(\d+(\.\d+)?)(\s*,\s*\d+(\.\d+)?)*$/;
-    const playbackRates = inValue.split(",").map((rate) => rate.trim());
-
-    if (!regex.test(inValue) || playbackRates.length <= 1) {
-      return false;
-    }
-
-    const rates = playbackRates.map(parseFloat);
-    if (
-      rates.includes(NaN) ||
-      !rates.includes(1) ||
-      rates.some((rate) => rate < 0.0625 || rate > 16)
-    ) {
-      return false;
-    }
-
-    return true;
-  };
-
-  const isValidNumeric = (inValue: string, min: number, max: number) => {
-    const value = +inValue;
-    if (isNaN(value) || value < min || value > max) {
-      return false;
-    }
-    return true;
-  };
-
-  return (
-    <>
-      <div className="tw-p-6">
-        <h1 className="tw-text-gray-300 tw-text-4xl tw-font-bold tw-mb-4">
-          General
-        </h1>
-        <h2 className="tw-text-gray-400 tw-text-[12px] tw-mb-8">
-          Manage your general settings and preferences
-        </h2>
-        <hr className="tw-mb-8 tw-border-gray-600/30" />
-        <Card>
-          <Switch
-            title="Enable Extension"
-            description="To enable/disable the extension globally."
-            isEnabled={store?.isExtensionEnabled}
-            onToggle={setIsExtensionEnabled}
-          />
-        </Card>
-      </div>
-      <div className="tw-p-6">
-        <h1 className="tw-text-gray-300 tw-text-4xl tw-font-bold tw-mb-4">
-          Pages
-        </h1>
-        <h2 className="tw-text-gray-400 tw-text-[12px] tw-mb-8">
-          Manage your page settings and preferences
-        </h2>
-        <hr className="tw-mb-8 tw-border-gray-600/30" />
-        <div className="tw-w-full">
-          <Card title="Playlist">
-            <Switch
-              title="Enable Playlist"
-              isEnabled={store.preferences.playlist.isEnabled}
-              onToggle={setIsPageEnabled.bind(null, "playlist")}
-            />
-          </Card>
-          <Card title="Shorts">
-            <Switch
-              title="Enable Shorts"
-              isEnabled={store.preferences.shorts.isEnabled}
-              onToggle={setIsPageEnabled.bind(null, "shorts")}
-            />
-            <Switch
-              title="Enable Auto Scroll"
-              isEnabled={store.preferences.shorts.reelAutoScroll.value}
-              onToggle={(isEnabled) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.shorts.reelAutoScroll.value = isEnabled;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Input
-              title="Toggle Playback Rate"
-              initialValue={store.preferences.shorts.togglePlaybackRate.value}
-              validator={(value) => {
-                return isValidNumeric(value, 0.0625, 16);
-              }}
-              onChange={(value) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.shorts.togglePlaybackRate.value = value;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Input
-              title="Seek Backward"
-              initialValue={store.preferences.shorts.seekBackward.value}
-              validator={(value) => {
-                return isValidNumeric(value, 0, Infinity);
-              }}
-              onChange={(value) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.shorts.seekBackward.value = value;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Input
-              title="Seek Forward"
-              initialValue={store.preferences.shorts.seekForward.value}
-              validator={(value) => {
-                return isValidNumeric(value, 0, Infinity);
-              }}
-              onChange={(value) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.shorts.seekForward.value = value;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Toggle Playback Rate Shortcut"
-              keybinding={store.preferences.shorts.togglePlaybackRate.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.shorts.togglePlaybackRate.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Seek Backward Shortcut"
-              keybinding={store.preferences.shorts.seekBackward.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.shorts.seekBackward.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Seek Forward Shortcut"
-              keybinding={store.preferences.shorts.seekForward.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.shorts.seekForward.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-          </Card>
-          <Card title="Watch">
-            <Switch
-              title="Enable Watch"
-              isEnabled={store.preferences.watch.isEnabled}
-              onToggle={setIsPageEnabled.bind(null, "watch")}
-            />
-            <Input
-              title="Custom Playback Rates"
-              initialValue={store.preferences.watch.customPlaybackRates.toString()}
-              validator={customPlaybackRatesValidator}
-              onChange={(value) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.customPlaybackRates = value
-                    .split(",")
-                    .map((playbackRate) =>
-                      Number(playbackRate.trim()).toFixed(2),
-                    );
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Input
-              title="Toggle Playback Rate"
-              initialValue={store.preferences.watch.togglePlaybackRate.value}
-              validator={(value) => {
-                return isValidNumeric(value, 0.0625, 16);
-              }}
-              onChange={(value) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.togglePlaybackRate.value = value;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Input
-              title="Default Playback Rate"
-              initialValue={store.preferences.watch.defaultPlaybackRate.value}
-              validator={(value) => {
-                return isValidNumeric(value, 0.0625, 16);
-              }}
-              onChange={(value) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.defaultPlaybackRate.value = value;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Input
-              title="Decrease Playback Rate"
-              initialValue={store.preferences.watch.decreasePlaybackRate.value}
-              validator={(value) => {
-                return isValidNumeric(value, 0, 16);
-              }}
-              onChange={(value) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.decreasePlaybackRate.value = value;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Input
-              title="Increase Playback Rate"
-              initialValue={store.preferences.watch.increasePlaybackRate.value}
-              validator={(value) => {
-                return isValidNumeric(value, 0, 16);
-              }}
-              onChange={(value) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.increasePlaybackRate.value = value;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Input
-              title="Seek Backward"
-              initialValue={store.preferences.watch.seekBackward.value}
-              validator={(value) => {
-                return isValidNumeric(value, 0, Infinity);
-              }}
-              onChange={(value) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.seekBackward.value = value;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Input
-              title="Seek Forward"
-              initialValue={store.preferences.watch.seekForward.value}
-              validator={(value) => {
-                return isValidNumeric(value, 0, Infinity);
-              }}
-              onChange={(value) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.seekForward.value = value;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Decrease Playback Rate Shortcut"
-              keybinding={store.preferences.watch.decreasePlaybackRate.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.decreasePlaybackRate.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Increase Playback Rate Shortcut"
-              keybinding={store.preferences.watch.increasePlaybackRate.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.increasePlaybackRate.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Seek Backward Shortcut"
-              keybinding={store.preferences.watch.seekBackward.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.seekBackward.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Seek Forward Shortcut"
-              keybinding={store.preferences.watch.seekForward.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.seekForward.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Toggle Loop Segment Shortcut"
-              keybinding={store.preferences.watch.toggleLoopSegment.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.toggleLoopSegment.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Set Loop Segment Begin Shortcut"
-              keybinding={store.preferences.watch.setLoopSegmentBegin.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.setLoopSegmentBegin.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Set Loop Segment End Shortcut"
-              keybinding={store.preferences.watch.setLoopSegmentEnd.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.setLoopSegmentEnd.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-            <Keybinding
-              title="Toggle Playback Rate Shortcut"
-              keybinding={store.preferences.watch.togglePlaybackRate.key}
-              onChange={(key) => {
-                const newConfig = produce(store, (draft) => {
-                  draft.preferences.watch.togglePlaybackRate.key = key;
-                });
-                setStore(newConfig);
-                chrome.storage.sync.set(newConfig);
-              }}
-            />
-          </Card>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/web-ext/src/options/routes/error-page.tsx b/web-ext/src/options/routes/error-page.tsx
deleted file mode 100644
index fe9e4d15..00000000
--- a/web-ext/src/options/routes/error-page.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import { useRouteError } from "react-router-dom";
-
-type RouteError = {
-  statusText?: string;
-  message?: string;
-};
-
-export default function ErrorPage() {
-  const error = useRouteError() as RouteError;
-  console.error(error);
-
-  const handleFileIssue = () => {
-    window.open("https://github.com/enrych/toppings/issues", "_blank");
-  };
-
-  return (
-    <div
-      id="error-page"
-      className="bg-[#0f0f10] text-[#e7e7e4] flex flex-col items-center justify-center min-h-screen"
-    >
-      <div className="tw-p-8 tw-rounded tw-shadow-md tw-text-center">
-        <h1 className="tw-text-4xl tw-font-bold tw-text-red-600 tw-mb-4">Oops!</h1>
-        <p className="tw-text-lg tw-mb-4">Sorry, an unexpected error has occurred.</p>
-        <p className="tw-text-sm tw-text-gray-500 tw-mb-4">
-          <i>{error.statusText || error.message}</i>
-        </p>
-        <p className="tw-text-sm tw-mb-4">
-          If you keep seeing this error, please{" "}
-          <button
-            onClick={handleFileIssue}
-            className="text-blue-600 underline focus:outline-none"
-          >
-            file an issue
-          </button>
-          .
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/web-ext/src/options/store.tsx b/web-ext/src/options/store.tsx
deleted file mode 100644
index e1d79fd8..00000000
--- a/web-ext/src/options/store.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import { Dispatch, SetStateAction } from "react";
-import { Storage } from "../background/store";
-
-const StoreContext = React.createContext<{
-  store: Storage;
-  setStore: Dispatch<SetStateAction<Storage>>;
-} | null>(null);
-
-export default StoreContext;
diff --git a/web-ext/src/popup/App.tsx b/web-ext/src/popup/App.tsx
deleted file mode 100644
index f12edde0..00000000
--- a/web-ext/src/popup/App.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import Navbar from "./components/Navbar";
-
-function App() {
-  return (
-    <div className="tw-w-[320px] tw-h-[480px] tw-bg-[#0f0f10] tw-text-[#e7e7e4]">
-      <div className="tw-h-[420px]">
-        <div className="tw-p-6 tw-h-full">
-          <h1 className="tw-text-gray-300 tw-text-4xl tw-font-bold tw-mb-4">
-            Welcome To Toppings!
-          </h1>
-          <h2 className="tw-text-gray-400 tw-text-[12px] tw-mb-8">
-            Your YouTube! Your Way!
-          </h2>
-
-          <hr className="tw-mb-8 tw-border-gray-600/30" />
-        </div>
-      </div>
-      <Navbar />
-    </div>
-  );
-}
-
-export default App;
diff --git a/web-ext/src/popup/components/Navbar.tsx b/web-ext/src/popup/components/Navbar.tsx
deleted file mode 100644
index bbf56172..00000000
--- a/web-ext/src/popup/components/Navbar.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-
-export default function Navbar() {
-  return (
-    <div
-      className={`tw-fixed tw-bottom-0 tw-left-0 tw-right-0 tw-p-[10px] tw-bg-[#18181b] tw-h-[60px] tw-w-full`}
-    >
-      <nav className="tw-w-full tw-flex tw-justify-evenly tw-items-center">
-        <a
-          href="#"
-          className="tw-flex tw-items-center tw-gap-2 tw-font-medium tw-text-foreground tw-hover:bg-[#3d3d43]/50 tw-px-3 tw-py-2 tw-rounded-md tw-cursor-pointer tw-bg-[#3d3d43]/50"
-          title="Dashboard"
-        >
-          <img src={chrome.runtime.getURL("assets/svg/home.svg")} alt="Home" />
-        </a>
-        <button
-          className="tw-flex tw-items-center tw-gap-2 tw-font-medium tw-text-foreground tw-hover:bg-[#3d3d43]/50 tw-px-3 tw-py-2 tw-rounded-md tw-cursor-pointer"
-          title="Bug Report"
-          onClick={() => {
-            window.open("https://www.github.com/enrych/toppings/issues");
-          }}
-        >
-          <img
-            src={chrome.runtime.getURL("assets/svg/bug_report.svg")}
-            alt="Bug Report"
-          />
-        </button>
-        <button
-          className="tw-flex tw-items-center tw-gap-2 tw-font-medium tw-text-foreground tw-hover:bg-[#3d3d43]/50 tw-px-3 tw-py-2 tw-rounded-md tw-cursor-pointer"
-          title="Sponsor"
-          onClick={() => {
-            window.open("https://darhkvoyd.me/sponsor");
-          }}
-        >
-          <img
-            src={chrome.runtime.getURL("assets/svg/heart.svg")}
-            alt="Sponsor"
-          />
-        </button>
-        <button
-          className="tw-flex tw-items-center tw-gap-2 tw-font-medium tw-text-foreground tw-hover:bg-[#3d3d43]/50 tw-px-3 tw-py-2 tw-rounded-md tw-cursor-pointer"
-          title="Open Preferences"
-          onClick={() => {
-            window.open(chrome.runtime.getURL("options/index.html"));
-          }}
-        >
-          <img
-            src={chrome.runtime.getURL("assets/svg/gear.svg")}
-            alt="Settings"
-          />
-        </button>
-      </nav>
-    </div>
-  );
-}
diff --git a/web-ext/src/popup/index.css b/web-ext/src/popup/index.css
deleted file mode 100644
index 135c24b0..00000000
--- a/web-ext/src/popup/index.css
+++ /dev/null
@@ -1,443 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-*,
-::before,
-::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: theme("borderColor.DEFAULT", currentColor); /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: "";
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-html,
-:host {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -moz-tab-size: 4; /* 3 */
-  tab-size: 4; /* 3 */
-  font-family: theme(
-    "fontFamily.sans",
-    ui-sans-serif,
-    system-ui,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji"
-  ); /* 4 */
-  font-feature-settings: theme(
-    "fontFamily.sans[1].fontFeatureSettings",
-    normal
-  ); /* 5 */
-  font-variation-settings: theme(
-    "fontFamily.sans[1].fontVariationSettings",
-    normal
-  ); /* 6 */
-  -webkit-tap-highlight-color: transparent; /* 7 */
-}
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-body {
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: theme(
-    "fontFamily.mono",
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
-    monospace
-  ); /* 1 */
-  font-feature-settings: theme(
-    "fontFamily.mono[1].fontFeatureSettings",
-    normal
-  ); /* 2 */
-  font-variation-settings: theme(
-    "fontFamily.mono[1].fontVariationSettings",
-    normal
-  ); /* 3 */
-  font-size: 1em; /* 4 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  font-weight: inherit; /* 1 */
-  line-height: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
-  color: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-button,
-input:where([type="button"]),
-input:where([type="reset"]),
-input:where([type="submit"]) {
-  -webkit-appearance: button; /* 1 */
-  background-color: transparent; /* 2 */
-  background-image: none; /* 2 */
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Reset default styling for dialogs.
-*/
-dialog {
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1; /* 1 */
-  color: theme("colors.gray.400", #9ca3af); /* 2 */
-}
-
-/*
-Set the default cursor for buttons.
-*/
-
-button,
-[role="button"] {
-  cursor: pointer;
-}
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden]:where(:not([hidden="until-found"])) {
-  display: none;
-}
-
-:root {
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  ::-webkit-scrollbar {
-    width: 12px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: #18181b;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
-}
diff --git a/web-ext/src/popup/index.tsx b/web-ext/src/popup/index.tsx
deleted file mode 100644
index 8b1ddb97..00000000
--- a/web-ext/src/popup/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./index.css";
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
diff --git a/web-ext/tailwind.config.ts b/web-ext/tailwind.config.ts
new file mode 100644
index 00000000..f9570079
--- /dev/null
+++ b/web-ext/tailwind.config.ts
@@ -0,0 +1,38 @@
+import type { Config } from "tailwindcss";
+
+// Prefixed and without preflight: the pages carry their own small reset and
+// the class names must never collide with YouTube's.
+export default {
+  content: ["./app/**/*.{ts,tsx}", "./ui/**/*.{ts,tsx}"],
+  prefix: "tw-",
+  corePlugins: { preflight: false },
+  darkMode: ["class", '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        bg: "var(--color-bg)",
+        surface: "var(--color-surface)",
+        "surface-2": "var(--color-surface-2)",
+        "surface-hover": "var(--color-surface-hover)",
+        fg: "var(--color-fg)",
+        "fg-muted": "var(--color-fg-muted)",
+        "fg-subtle": "var(--color-fg-subtle)",
+        "border-subtle": "var(--color-border-subtle)",
+        "border-default": "var(--color-border-default)",
+        "border-strong": "var(--color-border-strong)",
+        accent: "var(--color-accent)",
+        "accent-hover": "var(--color-accent-hover)",
+        "accent-fg": "var(--color-accent-fg)",
+        "danger-bg": "var(--color-danger-bg)",
+        "danger-fg": "var(--color-danger-fg)",
+        "success-bg": "var(--color-success-bg)",
+        "success-fg": "var(--color-success-fg)",
+        "info-bg": "var(--color-info-bg)",
+        "info-fg": "var(--color-info-fg)",
+        "warning-bg": "var(--color-warning-bg)",
+        "warning-fg": "var(--color-warning-fg)",
+      },
+      fontFamily: { sans: ["Instrument Sans", "system-ui", "sans-serif"], display: ["Gloock", "Georgia", "serif"] },
+    },
+  },
+} satisfies Config;
diff --git a/web-ext/test/setup.ts b/web-ext/test/setup.ts
new file mode 100644
index 00000000..8cb47a20
--- /dev/null
+++ b/web-ext/test/setup.ts
@@ -0,0 +1,66 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+GlobalRegistrator.register();
+
+// Browsers fire ratechange, as a queued task, whenever playbackRate changes;
+// happy-dom never does, and features follow the event rather than their own writes.
+const rate = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, "playbackRate")!;
+Object.defineProperty(HTMLMediaElement.prototype, "playbackRate", {
+  ...rate,
+  set(this: HTMLMediaElement, value: number) {
+    const changed = value !== rate.get!.call(this);
+    rate.set!.call(this, value);
+    if (changed) setTimeout(() => this.dispatchEvent(new Event("ratechange")), 0);
+  },
+});
+
+type ChangeListener = (changes: Record<string, { oldValue?: unknown; newValue?: unknown }>, area: string) => void;
+const listeners = new Set<ChangeListener>();
+
+// An in-memory stand-in for the parts of the extension API the kernel uses,
+// including change events so subscriptions behave as they do in the browser.
+function memoryArea(name: string) {
+  let data: Record<string, unknown> = {};
+  const notify = (next: Record<string, unknown>) => {
+    const keys = new Set([...Object.keys(data), ...Object.keys(next)]);
+    const changes = Object.fromEntries([...keys].filter((k) => data[k] !== next[k]).map((k) => [k, { oldValue: data[k], newValue: next[k] }]));
+    data = next;
+    if (Object.keys(changes).length) for (const listener of listeners) listener(changes, name);
+  };
+  return {
+    async get(keys?: string | string[] | null) {
+      if (keys == null) return { ...data };
+      const list = Array.isArray(keys) ? keys : [keys];
+      return Object.fromEntries(list.filter((k) => k in data).map((k) => [k, data[k]]));
+    },
+    async set(items: Record<string, unknown>) {
+      notify({ ...data, ...items });
+    },
+    async remove(keys: string | string[]) {
+      const next = { ...data };
+      for (const k of Array.isArray(keys) ? keys : [keys]) delete next[k];
+      notify(next);
+    },
+    async clear() {
+      notify({});
+    },
+  };
+}
+
+Object.assign(globalThis, {
+  chrome: {
+    storage: {
+      sync: memoryArea("sync"),
+      local: memoryArea("local"),
+      onChanged: {
+        addListener: (listener: ChangeListener) => listeners.add(listener),
+        removeListener: (listener: ChangeListener) => listeners.delete(listener),
+      },
+    },
+    runtime: {
+      getURL: (path: string) => `chrome-extension://test/${path}`,
+      onMessage: { addListener() {} },
+      sendMessage: async () => undefined,
+    },
+  },
+});
diff --git a/web-ext/tsconfig.json b/web-ext/tsconfig.json
index e7315331..96031010 100644
--- a/web-ext/tsconfig.json
+++ b/web-ext/tsconfig.json
@@ -1,24 +1,35 @@
 {
-	"compilerOptions": {
-		"jsx": "react-jsx",
-		"outDir": "./dist/",
-		"strict": true,
-		"lib": [
-			"esnext",
-			"dom",
-			"dom.iterable"
-		],
-		"module": "ES2020",
-		"target": "ES6",
-		"allowJs": true,
-		"moduleResolution": "node",
-		"noEmitOnError": true,
-		"types": [
-			"chrome-types",
-			"node",
-			"mocha",
-			"chai"
-		],
-		"allowSyntheticDefaultImports": true
-	}
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable"
+    ],
+    "module": "esnext",
+    "target": "es2022",
+    "moduleResolution": "bundler",
+    "noEmitOnError": true,
+    "types": [
+      "chrome-types",
+      "node"
+    ],
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "jsxImportSource": "preact",
+    "skipLibCheck": true
+  },
+  "exclude": [
+    "node_modules",
+    "dist",
+    "scripts",
+    "test",
+    "**/*.test.ts"
+  ]
 }
diff --git a/web-ext/tsconfig.test.json b/web-ext/tsconfig.test.json
new file mode 100644
index 00000000..4c786339
--- /dev/null
+++ b/web-ext/tsconfig.test.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["chrome-types", "node", "bun"]
+  },
+  "exclude": ["node_modules", "dist", "scripts"]
+}
diff --git a/web-ext/ui/base.css b/web-ext/ui/base.css
new file mode 100644
index 00000000..eac04bc4
--- /dev/null
+++ b/web-ext/ui/base.css
@@ -0,0 +1,102 @@
+@import "./theme.css";
+
+/* Bundled rather than fetched from Google Fonts, so opening the popup never
+   calls a third party. */
+@font-face {
+  font-family: Gloock;
+  src: url("/assets/fonts/gloock-400.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Instrument Sans";
+  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
+  font-weight: 400 600;
+  font-display: swap;
+}
+
+/* Tailwind runs without preflight because its utilities also land inside
+   YouTube's page, so extension pages carry this small reset of their own. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border: 0 solid var(--color-border-default);
+}
+
+html {
+  font-family: var(--font-sans);
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Set on body too: Chrome gives extension pages' body its own system font,
+   which would otherwise win over the one inherited from html. */
+body {
+  font-family: var(--font-sans);
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-fg);
+}
+
+h1, h2, h3, p {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+button, input, select {
+  font: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+}
+
+button, [role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+img, svg {
+  display: block;
+  vertical-align: middle;
+}
+
+[hidden] {
+  display: none;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-default);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-strong);
+}
diff --git a/web-ext/ui/feedback/Toast.tsx b/web-ext/ui/feedback/Toast.tsx
new file mode 100644
index 00000000..655e10a8
--- /dev/null
+++ b/web-ext/ui/feedback/Toast.tsx
@@ -0,0 +1,36 @@
+import Icon, { type IconName } from "../primitives/Icon";
+import IconButton from "../primitives/IconButton";
+
+export type ToastTone = "success" | "error" | "info";
+
+export interface ToastData {
+  id: string;
+  tone: ToastTone;
+  title: string;
+  description?: string;
+  duration?: number;
+}
+
+const ICON: Record<ToastTone, { name: IconName; color: string }> = {
+  success: { name: "check", color: "tw-text-success-fg" },
+  error: { name: "alert", color: "tw-text-danger-fg" },
+  info: { name: "info", color: "tw-text-info-fg" },
+};
+
+export default function Toast({ data, onDismiss }: { data: ToastData; onDismiss: (id: string) => void }) {
+  const icon = ICON[data.tone];
+  return (
+    <div role="status" class="tw-flex tw-items-start tw-gap-3 tw-p-3 tw-pr-2 tw-bg-surface-2 tw-rounded-lg tw-shadow-xl tw-min-w-[280px] tw-max-w-md tw-pointer-events-auto tw-animate-[slideInRight_220ms_ease-out]">
+      <div class={`tw-mt-0.5 ${icon.color}`}>
+        <Icon name={icon.name} size={18} />
+      </div>
+      <div class="tw-flex-1 tw-min-w-0">
+        <div class="tw-text-sm tw-text-fg">{data.title}</div>
+        {data.description && <div class="tw-text-xs tw-text-fg-muted tw-mt-0.5">{data.description}</div>}
+      </div>
+      <IconButton size="sm" aria-label="Dismiss notification" onClick={() => onDismiss(data.id)}>
+        <Icon name="x" size={14} />
+      </IconButton>
+    </div>
+  );
+}
diff --git a/web-ext/ui/feedback/ToastProvider.tsx b/web-ext/ui/feedback/ToastProvider.tsx
new file mode 100644
index 00000000..0a6b993d
--- /dev/null
+++ b/web-ext/ui/feedback/ToastProvider.tsx
@@ -0,0 +1,44 @@
+import { createContext, type ComponentChildren } from "preact";
+import { createPortal } from "preact/compat";
+import { useContext, useRef, useState } from "preact/hooks";
+import Toast, { type ToastData, type ToastTone } from "./Toast";
+
+interface ToastApi {
+  success: (title: string, description?: string) => void;
+  error: (title: string, description?: string) => void;
+  info: (title: string, description?: string) => void;
+}
+
+const ToastContext = createContext<ToastApi | null>(null);
+const DEFAULT_DURATION = 3500;
+
+export function ToastProvider({ children }: { children: ComponentChildren }) {
+  const [toasts, setToasts] = useState<ToastData[]>([]);
+  const counter = useRef(0);
+
+  const dismiss = (id: string) => setToasts((list) => list.filter((t) => t.id !== id));
+  const show = (tone: ToastTone) => (title: string, description?: string) => {
+    const id = `t${++counter.current}`;
+    setToasts((list) => [...list, { id, tone, title, description }]);
+    setTimeout(() => dismiss(id), DEFAULT_DURATION);
+  };
+  const api: ToastApi = { success: show("success"), error: show("error"), info: show("info") };
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      {createPortal(
+        <div class="tw-fixed tw-top-4 tw-right-4 tw-z-[10001] tw-flex tw-flex-col tw-gap-2 tw-pointer-events-none">
+          {toasts.map((t) => <Toast key={t.id} data={t} onDismiss={dismiss} />)}
+        </div>,
+        document.body,
+      )}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastApi {
+  const api = useContext(ToastContext);
+  if (!api) throw new Error("useToast must be used within a ToastProvider");
+  return api;
+}
diff --git a/web-ext/ui/form/Field.tsx b/web-ext/ui/form/Field.tsx
new file mode 100644
index 00000000..f97e95c6
--- /dev/null
+++ b/web-ext/ui/form/Field.tsx
@@ -0,0 +1,47 @@
+import type { ComponentChildren } from "preact";
+import { useId } from "preact/hooks";
+import Icon from "@/ui/primitives/Icon";
+import Tooltip from "@/ui/primitives/Tooltip";
+
+interface FieldProps {
+  label: string;
+  description?: string;
+  hint?: string;
+  error?: string;
+  htmlFor?: string;
+  children: ComponentChildren;
+}
+
+export default function Field({ label, description, hint, error, htmlFor, children }: FieldProps) {
+  const descriptionId = useId();
+  return (
+    <div class="tw-w-full tw-flex tw-flex-col tw-gap-1 tw-py-3">
+      <div class="tw-w-full tw-flex tw-justify-between tw-items-center tw-gap-4">
+        <div class="tw-flex tw-items-center tw-gap-2">
+          <label for={htmlFor} class="tw-text-[15px] tw-text-fg tw-leading-tight">
+            {label}
+          </label>
+          {description && (
+            <>
+              <Tooltip text={description}>
+                <button
+                  type="button"
+                  aria-label={`About ${label}`}
+                  aria-describedby={descriptionId}
+                  class="tw-inline-flex tw-rounded-full tw-cursor-default tw-text-fg-subtle hover:tw-text-fg-muted focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-accent"
+                >
+                  <Icon name="info" size={16} />
+                </button>
+              </Tooltip>
+              <span id={descriptionId} hidden>
+                {description}
+              </span>
+            </>
+          )}
+        </div>
+        <div class="tw-flex-shrink-0">{children}</div>
+      </div>
+      {(hint || error) && <div class={`tw-text-xs ${error ? "tw-text-danger-fg" : "tw-text-fg-subtle"}`}>{error || hint}</div>}
+    </div>
+  );
+}
diff --git a/web-ext/ui/form/Input.test.ts b/web-ext/ui/form/Input.test.ts
new file mode 100644
index 00000000..dd6a8f90
--- /dev/null
+++ b/web-ext/ui/form/Input.test.ts
@@ -0,0 +1,65 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { h, render } from "preact";
+import { act } from "preact/test-utils";
+import Input from "./Input";
+
+const root = document.createElement("div");
+document.body.append(root);
+
+let committed: string[] = [];
+
+const mount = () => {
+  act(() => {
+    render(
+      h(Input, {
+        label: "Seek forward",
+        initialValue: "5",
+        validator: (v: string) => Number(v) > 0,
+        onChange: (v: string) => committed.push(v),
+      }),
+      root,
+    );
+  });
+  return root.querySelector("input")!;
+};
+
+const type = (input: HTMLInputElement, value: string) =>
+  act(() => {
+    input.value = value;
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+
+const unmount = () => act(() => render(null, root));
+
+afterEach(() => {
+  unmount();
+  committed = [];
+});
+
+describe("Input", () => {
+  test("commits a valid value after the pause in typing", async () => {
+    type(mount(), "10");
+    expect(committed).toEqual([]);
+    await new Promise((r) => setTimeout(r, 550));
+    expect(committed).toEqual(["10"]);
+  });
+
+  test("an edit still pending when the page goes away is committed, not lost", () => {
+    type(mount(), "10");
+    unmount();
+    expect(committed).toEqual(["10"]);
+  });
+
+  test("an invalid pending edit is dropped on unmount", () => {
+    type(mount(), "-1");
+    unmount();
+    expect(committed).toEqual([]);
+  });
+
+  test("a committed edit is not committed again on unmount", async () => {
+    type(mount(), "10");
+    await new Promise((r) => setTimeout(r, 550));
+    unmount();
+    expect(committed).toEqual(["10"]);
+  });
+});
diff --git a/web-ext/ui/form/Input.tsx b/web-ext/ui/form/Input.tsx
new file mode 100644
index 00000000..47b32382
--- /dev/null
+++ b/web-ext/ui/form/Input.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useId, useRef, useState } from "preact/hooks";
+import Field from "./Field";
+import Icon from "@/ui/primitives/Icon";
+
+interface InputProps {
+  label: string;
+  description?: string;
+  hint?: string;
+  initialValue: string;
+  placeholder?: string;
+  validator?: (value: string) => boolean;
+  errorMessage?: string;
+  onChange: (value: string) => void;
+  widthClass?: string;
+}
+
+type Status = "idle" | "checking" | "valid" | "invalid";
+
+// Commits after a short pause in typing, and only when the value validates,
+// so storage never sees a half-typed number.
+export default function Input({ label, description, hint, initialValue, placeholder, validator, errorMessage, onChange, widthClass = "tw-w-44" }: InputProps) {
+  const id = useId();
+  const [value, setValue] = useState(initialValue);
+  const [status, setStatus] = useState<Status>("idle");
+  const timer = useRef<ReturnType<typeof setTimeout>>();
+  const pending = useRef<() => boolean>();
+
+  useEffect(() => setValue(initialValue), [initialValue]);
+  useEffect(() => () => {
+    clearTimeout(timer.current);
+    pending.current?.();
+  }, []);
+
+  const onInput = (next: string) => {
+    setValue(next);
+    clearTimeout(timer.current);
+    if (!validator) return onChange(next);
+    setStatus("checking");
+    const commit = () => {
+      pending.current = undefined;
+      if (!validator(next)) return false;
+      onChange(next);
+      return true;
+    };
+    pending.current = commit;
+    timer.current = setTimeout(() => {
+      if (!commit()) return setStatus("invalid");
+      setStatus("valid");
+      timer.current = setTimeout(() => setStatus("idle"), 1200);
+    }, 500);
+  };
+
+  return (
+    <Field label={label} description={description} hint={hint} htmlFor={id} error={status === "invalid" ? (errorMessage ?? "Invalid value") : undefined}>
+      <div class="tw-relative tw-inline-flex tw-items-center">
+        <input
+          id={id}
+          type="text"
+          class={`${widthClass} tw-h-9 tw-px-3 tw-rounded-lg tw-bg-surface-hover tw-text-fg tw-text-sm tw-border tw-border-transparent focus:tw-outline-none focus:tw-border-accent tw-transition-colors`}
+          placeholder={placeholder}
+          value={value}
+          onInput={(e) => onInput(e.currentTarget.value)}
+        />
+        {status !== "idle" && (
+          <span class="tw-absolute tw-right-2 tw-pointer-events-none">
+            {status === "checking" && <span class="tw-block tw-w-3.5 tw-h-3.5 tw-rounded-full tw-border-2 tw-border-fg-subtle tw-border-t-accent tw-animate-spin" />}
+            {status === "valid" && <Icon name="check" size={16} class="tw-text-success-fg" />}
+            {status === "invalid" && <Icon name="x" size={16} class="tw-text-danger-fg" />}
+          </span>
+        )}
+      </div>
+    </Field>
+  );
+}
diff --git a/web-ext/ui/form/Keybinding.test.ts b/web-ext/ui/form/Keybinding.test.ts
new file mode 100644
index 00000000..f1795b6f
--- /dev/null
+++ b/web-ext/ui/form/Keybinding.test.ts
@@ -0,0 +1,95 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { h, render } from "preact";
+import { act } from "preact/test-utils";
+import Keybinding from "./Keybinding";
+
+const root = document.createElement("div");
+document.body.append(root);
+
+let changes: string[] = [];
+let resets = 0;
+
+const mount = (props: { value?: string; resettable?: boolean } = {}) => {
+  act(() => {
+    render(
+      h(Keybinding, {
+        label: "Seek forward",
+        value: props.value ?? "L",
+        onChange: (key: string) => changes.push(key),
+        onReset: props.resettable ? () => resets++ : undefined,
+      }),
+      root,
+    );
+  });
+  return root.querySelector("input")!;
+};
+
+const press = (input: HTMLInputElement, key: string, init: KeyboardEventInit = {}) => {
+  const event = new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true, ...init });
+  act(() => {
+    input.dispatchEvent(event);
+  });
+  return event;
+};
+
+const focus = (input: HTMLInputElement) => act(() => input.focus());
+
+afterEach(() => {
+  act(() => render(null, root));
+  changes = [];
+  resets = 0;
+});
+
+describe("Keybinding", () => {
+  test("records a key pressed while focused", () => {
+    const input = mount();
+    focus(input);
+    expect(input.value).toBe("Press keys…");
+    press(input, "k", { shiftKey: true });
+    expect(changes).toEqual(["Shift+K"]);
+  });
+
+  test("lets Tab and Shift+Tab move focus instead of trapping it", () => {
+    const input = mount();
+    focus(input);
+    expect(press(input, "Tab").defaultPrevented).toBe(false);
+    expect(press(input, "Tab", { shiftKey: true }).defaultPrevented).toBe(false);
+    expect(changes).toEqual([]);
+  });
+
+  test("Escape cancels recording without touching the binding", () => {
+    const input = mount();
+    focus(input);
+    press(input, "Escape");
+    expect(changes).toEqual([]);
+    expect(input.value).toBe("L");
+    press(input, "j");
+    expect(changes).toEqual([]);
+  });
+
+  test("Enter starts recording again after a cancel", () => {
+    const input = mount();
+    focus(input);
+    press(input, "Escape");
+    press(input, "Enter");
+    expect(input.value).toBe("Press keys…");
+    press(input, "j");
+    expect(changes).toEqual(["J"]);
+  });
+
+  test("Backspace unsets the binding", () => {
+    const input = mount();
+    focus(input);
+    press(input, "Backspace");
+    expect(changes).toEqual([""]);
+  });
+
+  test("offers a reset only when there is an override to drop", () => {
+    mount();
+    expect(root.querySelector("button[title='Back to the default shortcut']")).toBeNull();
+    mount({ resettable: true });
+    const reset = root.querySelector<HTMLButtonElement>("button[title='Back to the default shortcut']")!;
+    act(() => reset.click());
+    expect(resets).toBe(1);
+  });
+});
diff --git a/web-ext/ui/form/Keybinding.tsx b/web-ext/ui/form/Keybinding.tsx
new file mode 100644
index 00000000..d841abe0
--- /dev/null
+++ b/web-ext/ui/form/Keybinding.tsx
@@ -0,0 +1,70 @@
+import { useId, useState } from "preact/hooks";
+import Field from "./Field";
+import Button from "@/ui/primitives/Button";
+import { formatBindingDisplay, recordBinding } from "@/kernel/keybinding";
+
+interface KeybindingProps {
+  label: string;
+  description?: string;
+  hint?: string;
+  value: string;
+  onChange: (key: string) => void;
+  onReset?: () => void;
+}
+
+export default function Keybinding({ label, description, hint, value, onChange, onReset }: KeybindingProps) {
+  const id = useId();
+  const [recording, setRecording] = useState(false);
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Tab") return;
+    if (!recording) {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      setRecording(true);
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.key === "Escape") {
+      setRecording(false);
+      return;
+    }
+    if (e.key === "Backspace") {
+      onChange("");
+      setRecording(false);
+      return;
+    }
+    // A modifier-only press keeps recording rather than committing.
+    const combo = recordBinding(e);
+    if (combo === null) return;
+    onChange(combo);
+    setRecording(false);
+  };
+
+  return (
+    <Field label={label} description={description} hint={hint} htmlFor={id}>
+      <div class="tw-flex tw-items-center tw-gap-2">
+        {onReset && (
+          <Button size="sm" variant="ghost" title="Back to the default shortcut" onClick={onReset}>
+            Reset
+          </Button>
+        )}
+        <input
+          id={id}
+          type="text"
+          readOnly
+          value={recording ? "Press keys…" : formatBindingDisplay(value) || "Unset"}
+          onFocus={() => setRecording(true)}
+          onClick={() => setRecording(true)}
+          onBlur={() => setRecording(false)}
+          onKeyDown={onKeyDown}
+          title={value || undefined}
+          class={`tw-w-32 tw-h-9 tw-px-3 tw-rounded-lg tw-text-sm tw-text-center tw-font-mono tw-cursor-pointer tw-border focus:tw-outline-none tw-transition-colors ${
+            recording ? "tw-border-accent tw-text-accent tw-bg-surface-hover" : "tw-border-transparent tw-bg-surface-hover tw-text-fg"
+          } ${!value && !recording ? "tw-text-fg-subtle" : ""}`}
+        />
+      </div>
+    </Field>
+  );
+}
diff --git a/web-ext/ui/form/Select.test.ts b/web-ext/ui/form/Select.test.ts
new file mode 100644
index 00000000..1229ceea
--- /dev/null
+++ b/web-ext/ui/form/Select.test.ts
@@ -0,0 +1,51 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { h, render } from "preact";
+import { act } from "preact/test-utils";
+import Select from "./Select";
+
+const root = document.createElement("div");
+document.body.append(root);
+
+const options = [
+  { value: "off", label: "Off" },
+  { value: "last-used", label: "Last used" },
+  { value: "default", label: "Default" },
+];
+
+let picked: string[] = [];
+
+const mount = (value: string) => {
+  act(() => {
+    render(h(Select<string>, { label: "Auto-load", value, options, onChange: (v: string) => picked.push(v) }), root);
+  });
+  return root.querySelector("button")!;
+};
+
+const press = (button: HTMLButtonElement, key: string) =>
+  act(() => {
+    button.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+  });
+
+afterEach(() => {
+  act(() => render(null, root));
+  picked = [];
+});
+
+describe("Select", () => {
+  test("Enter twice keeps the saved value that arrived after mount", () => {
+    mount("off");
+    const button = mount("default");
+    press(button, "Enter");
+    press(button, "Enter");
+    expect(picked).toEqual(["default"]);
+  });
+
+  test("arrows move from the current value when the list opens", () => {
+    mount("off");
+    const button = mount("last-used");
+    press(button, "ArrowDown");
+    press(button, "ArrowDown");
+    press(button, "Enter");
+    expect(picked).toEqual(["default"]);
+  });
+});
diff --git a/web-ext/ui/form/Select.tsx b/web-ext/ui/form/Select.tsx
new file mode 100644
index 00000000..d0eec0a8
--- /dev/null
+++ b/web-ext/ui/form/Select.tsx
@@ -0,0 +1,97 @@
+import { useEffect, useId, useRef, useState } from "preact/hooks";
+import Field from "./Field";
+import Icon from "@/ui/primitives/Icon";
+
+export interface SelectOption<T extends string> {
+  value: T;
+  label: string;
+  description?: string;
+}
+
+interface SelectProps<T extends string> {
+  label: string;
+  description?: string;
+  hint?: string;
+  value: T;
+  options: SelectOption<T>[];
+  onChange: (value: T) => void;
+}
+
+// A native <select> cannot be themed consistently across browsers.
+export default function Select<T extends string>({ label, description, hint, value, options, onChange }: SelectProps<T>) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(0);
+  const root = useRef<HTMLDivElement>(null);
+  const selected = options.find((o) => o.value === value);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (!root.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+
+  const show = () => {
+    setActive(Math.max(0, options.findIndex((o) => o.value === value)));
+    setOpen(true);
+  };
+
+  const pick = (next: T) => {
+    onChange(next);
+    setOpen(false);
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!open) return show();
+      setActive((i) => (i + (e.key === "ArrowDown" ? 1 : -1) + options.length) % options.length);
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (open) pick(options[active].value);
+      else show();
+    } else if (e.key === "Escape") setOpen(false);
+  };
+
+  return (
+    <Field label={label} description={description} hint={hint} htmlFor={id}>
+      <div class="tw-relative" ref={root}>
+        <button
+          id={id}
+          type="button"
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          onClick={() => (open ? setOpen(false) : show())}
+          onKeyDown={onKeyDown}
+          class="tw-h-9 tw-w-44 tw-flex tw-items-center tw-justify-between tw-gap-2 tw-px-3 tw-rounded-lg tw-bg-surface-hover tw-text-fg tw-text-sm hover:tw-bg-border-default focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-accent tw-transition-colors"
+        >
+          <span class="tw-truncate">{selected?.label ?? "Select…"}</span>
+          <Icon name="chevron-down" size={14} class={`tw-text-fg-muted tw-transition-transform ${open ? "tw-rotate-180" : ""}`} />
+        </button>
+        {open && (
+          <ul role="listbox" class="tw-absolute tw-right-0 tw-mt-1 tw-w-60 tw-max-h-72 tw-overflow-y-auto tw-bg-surface-2 tw-rounded-xl tw-shadow-xl tw-z-40 tw-py-2">
+            {options.map((opt, i) => (
+              <li
+                key={opt.value}
+                role="option"
+                aria-selected={opt.value === value}
+                onMouseEnter={() => setActive(i)}
+                onClick={() => pick(opt.value)}
+                class={`tw-px-4 tw-py-2 tw-cursor-pointer tw-flex tw-items-start tw-gap-3 ${i === active ? "tw-bg-surface-hover" : ""}`}
+              >
+                <span class="tw-w-4 tw-flex-shrink-0 tw-text-fg">{opt.value === value && <Icon name="check" size={16} />}</span>
+                <span class="tw-flex tw-flex-col">
+                  <span class="tw-text-sm tw-text-fg">{opt.label}</span>
+                  {opt.description && <span class="tw-text-xs tw-text-fg-muted">{opt.description}</span>}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </Field>
+  );
+}
diff --git a/web-ext/ui/form/Switch.tsx b/web-ext/ui/form/Switch.tsx
new file mode 100644
index 00000000..e87ce4e0
--- /dev/null
+++ b/web-ext/ui/form/Switch.tsx
@@ -0,0 +1,42 @@
+import { useId } from "preact/hooks";
+import Field from "./Field";
+
+interface SwitchProps {
+  label: string;
+  description?: string;
+  hint?: string;
+  isEnabled: boolean;
+  onToggle: (isEnabled: boolean) => void;
+}
+
+// YouTube's toggle: a track that tints to the accent with a white knob.
+export function Toggle({ on, onClick, id, label }: { on: boolean; onClick: () => void; id?: string; label?: string }) {
+  return (
+    <button
+      id={id}
+      type="button"
+      role="switch"
+      aria-checked={on}
+      aria-label={label}
+      onClick={onClick}
+      class="tw-relative tw-inline-flex tw-h-[14px] tw-w-[36px] tw-flex-shrink-0 tw-rounded-full tw-transition-colors tw-duration-150 focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-accent"
+      style={{ background: on ? "color-mix(in srgb, var(--color-accent) 50%, transparent)" : "var(--color-fg-subtle)" }}
+    >
+      <span
+        aria-hidden="true"
+        class={`tw-pointer-events-none tw-absolute tw-top-1/2 -tw-translate-y-1/2 tw-h-5 tw-w-5 tw-rounded-full tw-shadow-md tw-transition-transform tw-duration-150 ${
+          on ? "tw-bg-accent tw-translate-x-4" : "tw-bg-surface-2 tw-translate-x-0"
+        }`}
+      />
+    </button>
+  );
+}
+
+export default function Switch({ label, description, hint, isEnabled, onToggle }: SwitchProps) {
+  const id = useId();
+  return (
+    <Field label={label} description={description} hint={hint} htmlFor={id}>
+      <Toggle id={id} on={isEnabled} onClick={() => onToggle(!isEnabled)} />
+    </Field>
+  );
+}
diff --git a/web-ext/ui/layout/Card.tsx b/web-ext/ui/layout/Card.tsx
new file mode 100644
index 00000000..e72c4b34
--- /dev/null
+++ b/web-ext/ui/layout/Card.tsx
@@ -0,0 +1,9 @@
+import type { ComponentChildren } from "preact";
+
+export default function Card({ children, class: className = "" }: { children: ComponentChildren; class?: string }) {
+  return (
+    <div class={`tw-bg-surface tw-border tw-border-border-subtle tw-rounded-xl ${className}`}>
+      <div class="tw-px-5 tw-py-1 tw-divide-y tw-divide-border-subtle">{children}</div>
+    </div>
+  );
+}
diff --git a/web-ext/ui/layout/PageHeader.tsx b/web-ext/ui/layout/PageHeader.tsx
new file mode 100644
index 00000000..ce4f61ec
--- /dev/null
+++ b/web-ext/ui/layout/PageHeader.tsx
@@ -0,0 +1,8 @@
+export default function PageHeader({ title, description }: { title: string; description?: string }) {
+  return (
+    <div class="tw-mb-8">
+      <h1 class="tw-font-display tw-text-[34px] tw-leading-tight tw-text-fg">{title}</h1>
+      {description && <p class="tw-text-fg-muted tw-mt-1 tw-text-sm tw-max-w-2xl">{description}</p>}
+    </div>
+  );
+}
diff --git a/web-ext/ui/layout/Section.tsx b/web-ext/ui/layout/Section.tsx
new file mode 100644
index 00000000..83742ab0
--- /dev/null
+++ b/web-ext/ui/layout/Section.tsx
@@ -0,0 +1,24 @@
+import type { ComponentChildren } from "preact";
+
+interface SectionProps {
+  id?: string;
+  title: string;
+  description?: string;
+  actions?: ComponentChildren;
+  children: ComponentChildren;
+}
+
+export default function Section({ id, title, description, actions, children }: SectionProps) {
+  return (
+    <section id={id} class="tw-scroll-mt-6">
+      <div class="tw-flex tw-items-end tw-justify-between tw-gap-4 tw-mb-3">
+        <div>
+          <h2 class="tw-text-base tw-font-medium tw-text-fg">{title}</h2>
+          {description && <p class="tw-text-sm tw-text-fg-muted tw-mt-0.5">{description}</p>}
+        </div>
+        {actions}
+      </div>
+      {children}
+    </section>
+  );
+}
diff --git a/web-ext/ui/layout/SectionNav.tsx b/web-ext/ui/layout/SectionNav.tsx
new file mode 100644
index 00000000..fc6b8afb
--- /dev/null
+++ b/web-ext/ui/layout/SectionNav.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from "preact/hooks";
+
+export interface SectionNavItem {
+  id: string;
+  label: string;
+}
+
+// "On this page" links that follow the section nearest the top as you scroll.
+export default function SectionNav({ items }: { items: readonly SectionNavItem[] }) {
+  const [activeId, setActiveId] = useState<string | null>(items[0]?.id ?? null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => Math.abs(a.boundingClientRect.top) - Math.abs(b.boundingClientRect.top));
+        if (visible.length) setActiveId(visible[0].target.id);
+      },
+      { rootMargin: "-20% 0px -60% 0px", threshold: [0, 0.25, 0.5, 0.75, 1] },
+    );
+    for (const item of items) {
+      const el = document.getElementById(item.id);
+      if (el) observer.observe(el);
+    }
+    return () => observer.disconnect();
+  }, [items]);
+
+  return (
+    <nav aria-label="On this page" class="tw-flex tw-flex-col tw-gap-0.5">
+      <div class="tw-text-[11px] tw-uppercase tw-tracking-wider tw-text-fg-subtle tw-font-medium tw-px-3 tw-mb-1">On this page</div>
+      {items.map((item) => (
+        <a
+          key={item.id}
+          href={`#${item.id}`}
+          onClick={(e) => {
+            e.preventDefault();
+            document.getElementById(item.id)?.scrollIntoView({ behavior: "smooth" });
+            setActiveId(item.id);
+          }}
+          class={`tw-px-3 tw-py-1.5 tw-text-sm tw-rounded-lg tw-transition-colors ${activeId === item.id ? "tw-text-fg tw-bg-surface-hover" : "tw-text-fg-muted hover:tw-text-fg hover:tw-bg-surface-hover"}`}
+        >
+          {item.label}
+        </a>
+      ))}
+    </nav>
+  );
+}
diff --git a/web-ext/ui/primitives/Button.tsx b/web-ext/ui/primitives/Button.tsx
new file mode 100644
index 00000000..5d7e5b51
--- /dev/null
+++ b/web-ext/ui/primitives/Button.tsx
@@ -0,0 +1,42 @@
+import type { ComponentChildren } from "preact";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md";
+
+// Pill buttons, filled or tonal, as YouTube draws its own.
+const VARIANT: Record<ButtonVariant, string> = {
+  primary: "tw-bg-fg tw-text-bg hover:tw-opacity-90",
+  secondary: "tw-bg-surface-hover tw-text-fg hover:tw-bg-border-default",
+  ghost: "tw-text-fg-muted hover:tw-bg-surface-hover hover:tw-text-fg",
+  danger: "tw-bg-danger-bg tw-text-danger-fg hover:tw-opacity-90",
+};
+
+const SIZE: Record<ButtonSize, string> = {
+  sm: "tw-h-8 tw-px-3 tw-text-[13px]",
+  md: "tw-h-9 tw-px-4 tw-text-sm",
+};
+
+export interface ButtonProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  icon?: ComponentChildren;
+  class?: string;
+  id?: string;
+  title?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  children?: ComponentChildren;
+}
+
+export default function Button({ variant = "secondary", size = "md", icon, class: className = "", children, ...rest }: ButtonProps) {
+  return (
+    <button
+      type="button"
+      class={`tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-rounded-full tw-font-medium tw-whitespace-nowrap tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-accent disabled:tw-opacity-40 disabled:tw-cursor-not-allowed ${VARIANT[variant]} ${SIZE[size]} ${className}`}
+      {...rest}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}
diff --git a/web-ext/ui/primitives/Icon.tsx b/web-ext/ui/primitives/Icon.tsx
new file mode 100644
index 00000000..dfb49254
--- /dev/null
+++ b/web-ext/ui/primitives/Icon.tsx
@@ -0,0 +1,69 @@
+import type { JSX } from "preact";
+
+export type IconName =
+  | "info"
+  | "check"
+  | "x"
+  | "watch"
+  | "shorts"
+  | "playlist"
+  | "keyboard"
+  | "general"
+  | "search"
+  | "alert"
+  | "external"
+  | "chevron-down"
+  | "chevron-right"
+  | "chevron-left"
+  | "profiles"
+  | "bug"
+  | "heart"
+  | "settings";
+
+const PATHS: Record<IconName, string> = {
+  info: "M13 16h-1v-4h-1m1-4h.01M12 18.5A6.5 6.5 0 1118.5 12A6.508 6.508 0 0112 18.5z",
+  check: "M5 13l4 4L19 7",
+  x: "M6 18L18 6M6 6l12 12",
+  watch: "M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z",
+  shorts: "M17.77 10.32l-1.2-.5L18 9.06c1.84-.96 2.53-3.23 1.56-5.06s-3.24-2.53-5.07-1.56L6 6.94c-1.29.68-2.07 2.04-2 3.49.07 1.42.93 2.67 2.22 3.25.03.01 1.2.5 1.2.5L6 14.93c-1.83.97-2.53 3.24-1.56 5.07.97 1.83 3.24 2.53 5.07 1.56l8.5-4.5c1.29-.68 2.06-2.04 1.99-3.49-.07-1.42-.94-2.68-2.23-3.25zM10 14.65v-5.3L15 12l-5 2.65z",
+  playlist: "M22 7H2v1h20V7zm-9 5H2v-1h11v1zm0 4H2v-1h11v1zm2 3v-8l7 4-7 4z",
+  keyboard: "M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z",
+  general: "M3 5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm4 0v14h10V5H7zm2 3h6v2H9V8zm0 4h6v2H9v-2z",
+  search: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L20.49 19zM10 14a4 4 0 110-8 4 4 0 010 8z",
+  alert: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
+  external: "M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zm5 16H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7z",
+  "chevron-down": "M6 9l6 6 6-6",
+  "chevron-right": "M9 6l6 6-6 6",
+  "chevron-left": "M15 18l-6-6 6-6",
+  profiles: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z",
+  bug: "M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5s-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z",
+  heart: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z",
+  settings: "M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z",
+};
+
+const STROKED = new Set<IconName>(["info", "check", "x", "chevron-down", "chevron-right", "chevron-left"]);
+
+interface IconProps extends Omit<JSX.SVGAttributes<SVGSVGElement>, "size"> {
+  name: IconName;
+  size?: number;
+}
+
+export default function Icon({ name, size = 20, ...rest }: IconProps) {
+  const stroked = STROKED.has(name);
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={stroked ? "none" : "currentColor"}
+      stroke={stroked ? "currentColor" : "none"}
+      stroke-width={stroked ? 2 : 0}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      {...rest}
+    >
+      <path d={PATHS[name]} />
+    </svg>
+  );
+}
diff --git a/web-ext/ui/primitives/IconButton.tsx b/web-ext/ui/primitives/IconButton.tsx
new file mode 100644
index 00000000..86f431f1
--- /dev/null
+++ b/web-ext/ui/primitives/IconButton.tsx
@@ -0,0 +1,23 @@
+import type { ComponentChildren } from "preact";
+
+export interface IconButtonProps {
+  "aria-label": string;
+  size?: "sm" | "md";
+  class?: string;
+  title?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  children?: ComponentChildren;
+}
+
+export default function IconButton({ size = "md", class: className = "", children, ...rest }: IconButtonProps) {
+  return (
+    <button
+      type="button"
+      class={`tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-text-fg-muted tw-transition-colors hover:tw-bg-surface-hover hover:tw-text-fg focus-visible:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-accent disabled:tw-opacity-40 ${size === "sm" ? "tw-w-8 tw-h-8" : "tw-w-10 tw-h-10"} ${className}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/web-ext/ui/primitives/Tooltip.tsx b/web-ext/ui/primitives/Tooltip.tsx
new file mode 100644
index 00000000..7689789a
--- /dev/null
+++ b/web-ext/ui/primitives/Tooltip.tsx
@@ -0,0 +1,69 @@
+import type { ComponentChildren } from "preact";
+import { createPortal } from "preact/compat";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+
+interface TooltipProps {
+  children: ComponentChildren;
+  text: string;
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+const TRANSFORM = {
+  right: "translateY(-50%)",
+  left: "translate(-100%, -50%)",
+  top: "translate(-50%, -100%)",
+  bottom: "translateX(-50%)",
+};
+
+export default function Tooltip({ children, text, side = "right" }: TooltipProps) {
+  const [visible, setVisible] = useState(false);
+  const [at, setAt] = useState<{ top: number; left: number } | null>(null);
+  const trigger = useRef<HTMLSpanElement>(null);
+
+  useLayoutEffect(() => {
+    if (!visible || !trigger.current) return;
+    const place = () => {
+      const r = trigger.current!.getBoundingClientRect();
+      const gap = 8;
+      setAt(
+        side === "right" ? { top: r.top + r.height / 2, left: r.right + gap }
+        : side === "left" ? { top: r.top + r.height / 2, left: r.left - gap }
+        : side === "top" ? { top: r.top - gap, left: r.left + r.width / 2 }
+        : { top: r.bottom + gap, left: r.left + r.width / 2 },
+      );
+    };
+    place();
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    return () => {
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [visible, side, text]);
+
+  return (
+    <span
+      ref={trigger}
+      class="tw-relative tw-inline-flex tw-items-center"
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      // focus and blur do not bubble, so a focusable child would never open it.
+      onFocusIn={() => setVisible(true)}
+      onFocusOut={() => setVisible(false)}
+      // A click that changes the DOM under the cursor never fires mouseleave.
+      onClick={() => setVisible(false)}
+    >
+      {children}
+      {visible && at && createPortal(
+        <span
+          role="tooltip"
+          style={{ position: "fixed", top: at.top, left: at.left, transform: TRANSFORM[side] }}
+          class="tw-w-max tw-max-w-[14rem] tw-px-2 tw-py-1.5 tw-text-xs tw-leading-snug tw-text-bg tw-bg-fg tw-rounded tw-shadow-xl tw-z-[10002] tw-pointer-events-none"
+        >
+          {text}
+        </span>,
+        document.body,
+      )}
+    </span>
+  );
+}
diff --git a/web-ext/ui/theme.css b/web-ext/ui/theme.css
new file mode 100644
index 00000000..c87dc7bd
--- /dev/null
+++ b/web-ext/ui/theme.css
@@ -0,0 +1,81 @@
+/* Toppings' own look, shared with the website: ink, bone and ember, with
+   Gloock for display and Instrument Sans for everything else. Only what
+   Toppings draws inside YouTube takes YouTube's palette. */
+:root,
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --color-bg: #0b0b0c;
+  --color-surface: #141415;
+  --color-surface-2: #1b1b1d;
+  --color-surface-hover: rgba(234, 229, 216, 0.06);
+
+  --color-fg: #eae5d8;
+  --color-fg-muted: rgba(234, 229, 216, 0.62);
+  --color-fg-subtle: rgba(234, 229, 216, 0.38);
+
+  --color-border-subtle: rgba(234, 229, 216, 0.08);
+  --color-border-default: rgba(234, 229, 216, 0.12);
+  --color-border-strong: rgba(234, 229, 216, 0.22);
+
+  --color-accent: #ea7b2c;
+  --color-accent-hover: #c2531e;
+  --color-accent-fg: #0b0b0c;
+
+  --color-danger-bg: rgba(255, 77, 79, 0.14);
+  --color-danger-fg: #ff8a7a;
+  --color-success-bg: rgba(46, 160, 67, 0.14);
+  --color-success-fg: #7fd99a;
+  --color-info-bg: rgba(234, 123, 44, 0.12);
+  --color-info-fg: #ea7b2c;
+  --color-warning-bg: rgba(255, 196, 0, 0.14);
+  --color-warning-fg: #ffd457;
+
+  --font-sans: "Instrument Sans", system-ui, sans-serif;
+  --font-display: Gloock, Georgia, serif;
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+
+  --color-bg: #faf7f0;
+  --color-surface: #ffffff;
+  --color-surface-2: #f3eee3;
+  --color-surface-hover: rgba(11, 11, 12, 0.05);
+
+  --color-fg: #0b0b0c;
+  --color-fg-muted: rgba(11, 11, 12, 0.66);
+  --color-fg-subtle: rgba(11, 11, 12, 0.45);
+
+  --color-border-subtle: rgba(11, 11, 12, 0.08);
+  --color-border-default: rgba(11, 11, 12, 0.12);
+  --color-border-strong: rgba(11, 11, 12, 0.2);
+
+  --color-accent: #c2531e;
+  --color-accent-hover: #a5461a;
+  --color-accent-fg: #ffffff;
+
+  --color-danger-bg: rgba(204, 0, 0, 0.08);
+  --color-danger-fg: #b3261e;
+  --color-success-bg: rgba(46, 160, 67, 0.1);
+  --color-success-fg: #1b7f37;
+  --color-info-bg: rgba(194, 83, 30, 0.08);
+  --color-info-fg: #c2531e;
+  --color-warning-bg: rgba(179, 122, 0, 0.1);
+  --color-warning-fg: #8a5a00;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes pulseAccent {
+  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); }
+  50% { box-shadow: 0 0 0 6px transparent; }
+}
diff --git a/web-ext/ui/useTheme.ts b/web-ext/ui/useTheme.ts
new file mode 100644
index 00000000..00af0114
--- /dev/null
+++ b/web-ext/ui/useTheme.ts
@@ -0,0 +1,24 @@
+import { useEffect } from "preact/hooks";
+import { useSettings } from "@/kernel/useSettings";
+import { appSettings, type ThemePreference } from "@/app/settings";
+
+export type { ThemePreference };
+
+const resolve = (pref: ThemePreference): "dark" | "light" =>
+  pref === "system" ? (window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark") : pref;
+
+// Stamps the resolved theme on <html>, which is where the CSS tokens key off.
+export function useTheme() {
+  const { value, update } = useSettings(appSettings);
+
+  useEffect(() => {
+    const apply = () => document.documentElement.setAttribute("data-theme", resolve(value.theme));
+    apply();
+    if (value.theme !== "system") return;
+    const media = window.matchMedia("(prefers-color-scheme: light)");
+    media.addEventListener("change", apply);
+    return () => media.removeEventListener("change", apply);
+  }, [value.theme]);
+
+  return { theme: value.theme, setTheme: (theme: ThemePreference) => update({ theme }) };
+}
diff --git a/web-ext/youtube/cover.test.ts b/web-ext/youtube/cover.test.ts
new file mode 100644
index 00000000..cfd02473
--- /dev/null
+++ b/web-ext/youtube/cover.test.ts
@@ -0,0 +1,66 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { watchVisuals } from "./primitives";
+import { CHROME_STORAGE_LOCAL_KEY } from "@/lib/storageKeys";
+
+const player = () => document.getElementById("movie_player")!;
+const covers = () => [...player().children].filter((child) => child.tagName === "DIV" && (child as HTMLElement).style.zIndex === "17") as HTMLElement[];
+const tick = () => new Promise((r) => setTimeout(r, 0));
+
+beforeEach(async () => {
+  await chrome.storage.local.clear();
+  document.body.innerHTML = `<div id="movie_player" class="html5-video-player"><div class="html5-video-container"><video></video></div><div class="ytp-chrome-bottom"></div></div>`;
+});
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("watch.visuals", () => {
+  test("covers the picture below the controls, letting clicks through", () => {
+    watchVisuals.apply(player(), { value: "black" });
+    expect(covers()).toHaveLength(1);
+    expect(covers()[0].style.pointerEvents).toBe("none");
+    expect(player().querySelector("video")).not.toBeNull();
+  });
+
+  test("re-applying the same screen keeps one cover, and the video screen removes it", () => {
+    watchVisuals.apply(player(), { value: "visualizer" });
+    watchVisuals.apply(player(), { value: "visualizer" });
+    expect(covers()).toHaveLength(1);
+    watchVisuals.apply(player(), { value: "video" });
+    expect(covers()).toHaveLength(0);
+  });
+
+  test("a cover left by an earlier copy of the script is replaced, not stacked", () => {
+    const stale = document.createElement("div");
+    stale.setAttribute("data-tppng-cover", "");
+    player().append(stale);
+    watchVisuals.apply(player(), { value: "black" });
+    expect(player().querySelectorAll("[data-tppng-cover]")).toHaveLength(1);
+    expect(stale.isConnected).toBe(false);
+  });
+
+  test("reset removes the cover", () => {
+    watchVisuals.apply(player(), { value: "black" });
+    watchVisuals.reset(player());
+    expect(covers()).toHaveLength(0);
+  });
+
+  test("the custom screen shows the stored image", async () => {
+    await chrome.storage.local.set({ [CHROME_STORAGE_LOCAL_KEY.VISUALS_IMAGE]: "data:image/png;base64,AAAA" });
+    watchVisuals.apply(player(), { value: "custom" });
+    await tick();
+    expect(covers()[0].style.backgroundImage).toContain("data:image/png;base64,AAAA");
+  });
+
+  test("a newly chosen image replaces the one on a covered player", async () => {
+    watchVisuals.apply(player(), { value: "custom" });
+    await chrome.storage.local.set({ [CHROME_STORAGE_LOCAL_KEY.VISUALS_IMAGE]: "data:image/png;base64,BBBB" });
+    await tick();
+    expect(covers()[0].style.backgroundImage).toContain("BBBB");
+  });
+
+  test("accepts only known screens", () => {
+    expect(watchVisuals.parse({ value: "visualizer" })).toEqual({ value: "visualizer" });
+    expect(watchVisuals.parse({ value: "sparkles" })).toBeUndefined();
+  });
+});
diff --git a/web-ext/youtube/cover.ts b/web-ext/youtube/cover.ts
new file mode 100644
index 00000000..f75c0f56
--- /dev/null
+++ b/web-ext/youtube/cover.ts
@@ -0,0 +1,78 @@
+import { drawWaveform } from "@/lib/waveform";
+import { CHROME_STORAGE_LOCAL_KEY } from "@/lib/storageKeys";
+
+export type CoverMode = "black" | "visualizer" | "custom";
+
+// Above the picture (z-index 10), the scrubbing frame preview (16) and the
+// pre-play thumbnail; below the spinner (18) and the controls (59), so the
+// player stays fully usable while the video cannot be seen.
+const COVER_Z_INDEX = "17";
+const COVER_ATTRIBUTE = "data-tppng-cover";
+
+interface Cover {
+  mode: CoverMode;
+  element: HTMLElement;
+  stop?: () => void;
+}
+
+const IMAGE_KEY = CHROME_STORAGE_LOCAL_KEY.VISUALS_IMAGE;
+
+const covers = new WeakMap<HTMLElement, Cover>();
+const imageCovers = new Set<HTMLElement>();
+let watchingImage = false;
+let imageChanges = 0;
+
+// Idempotent, since primitives re-apply whenever the page re-renders.
+export function showCover(player: HTMLElement, mode: CoverMode): void {
+  const current = covers.get(player);
+  if (current?.mode === mode && current.element.isConnected) return;
+  removeCover(player);
+
+  const element = document.createElement("div");
+  element.setAttribute(COVER_ATTRIBUTE, "");
+  Object.assign(element.style, { position: "absolute", inset: "0", zIndex: COVER_Z_INDEX, background: "#000 center / cover no-repeat", pointerEvents: "none" });
+  player.append(element);
+  const cover: Cover = { mode, element };
+  covers.set(player, cover);
+
+  const video = player.querySelector("video");
+  if (mode === "visualizer" && video) {
+    const canvas = element.appendChild(document.createElement("canvas"));
+    Object.assign(canvas.style, { display: "block", width: "100%", height: "100%" });
+    cover.stop = drawWaveform(canvas, video);
+  }
+  if (mode === "custom") {
+    imageCovers.add(element);
+    watchImage();
+    // A read that returns after the image changed would repaint the old one.
+    const changesSeen = imageChanges;
+    void chrome.storage.local.get(IMAGE_KEY).then((stored) => {
+      if (imageChanges === changesSeen) paintImage(element, stored[IMAGE_KEY]);
+    });
+  }
+}
+
+export function removeCover(player: HTMLElement): void {
+  const cover = covers.get(player);
+  cover?.stop?.();
+  if (cover) imageCovers.delete(cover.element);
+  covers.delete(player);
+  // Also any left by a content script an update cut off, frozen mid-frame.
+  for (const stale of player.querySelectorAll(`:scope > [${COVER_ATTRIBUTE}]`)) stale.remove();
+}
+
+function paintImage(element: HTMLElement, image: unknown): void {
+  element.style.backgroundImage = typeof image === "string" ? `url("${image}")` : "";
+}
+
+// An image picked in the options page shows on a player that is already
+// covered, rather than only after the next navigation.
+function watchImage(): void {
+  if (watchingImage) return;
+  watchingImage = true;
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area !== "local" || !(IMAGE_KEY in changes)) return;
+    imageChanges++;
+    for (const element of imageCovers) paintImage(element, changes[IMAGE_KEY].newValue);
+  });
+}
diff --git a/web-ext/youtube/player.ts b/web-ext/youtube/player.ts
new file mode 100644
index 00000000..96970266
--- /dev/null
+++ b/web-ext/youtube/player.ts
@@ -0,0 +1,106 @@
+import { findWithin, resolveTarget, type PrimitiveResolution } from "@/kernel/dom/resolve";
+
+// Matched by its icon: the row has no id, and its label is in the viewer's
+// language.
+const SPEED_ROW_STRATEGIES = [`.ytp-settings-menu .ytp-panel-menu > .ytp-menuitem:has(path[d^="M12 1c1.44 0 2.87.28 4.21.83"])`] as const;
+const SPEED_ROW_ENGLISH_LABEL = "Playback speed";
+
+const normalLabels = new WeakMap<Element, string>();
+
+export function resolveVideo(): Promise<PrimitiveResolution> {
+  return resolveTarget(["#movie_player video", "video.html5-main-video"]);
+}
+
+export function resolveMoviePlayer(): Promise<PrimitiveResolution> {
+  return resolveTarget(["#movie_player"]);
+}
+
+export function resolveSettingsButton(): Promise<PrimitiveResolution> {
+  return resolveTarget(["button.ytp-settings-button"]);
+}
+
+export function resolveRightControls(): Promise<PrimitiveResolution> {
+  return resolveTarget(["div.ytp-right-controls"]);
+}
+
+// The bar itself, not its container: it is the stacking context YouTube
+// layers its progress fill, chapter marks and playhead dot in.
+export function resolveProgressBar(): Promise<PrimitiveResolution> {
+  return resolveTarget(["div.ytp-progress-bar-container div.ytp-progress-bar", "div.ytp-progress-bar-container"]);
+}
+
+// Where a panel goes to sit under the player, above the title.
+export function resolveBelowPlayer(): Promise<PrimitiveResolution> {
+  return resolveTarget(["#above-the-fold", "ytd-watch-flexy #below", "#secondary-inner", "#columns"]);
+}
+
+// The slider-and-chips panel YouTube opens for "Playback speed".
+export function resolveRatePanel(): Promise<PrimitiveResolution> {
+  return resolveTarget([".ytp-settings-menu .ytp-variable-speed-panel-content"]);
+}
+
+// The player a control belongs to. Its settings menu stays in the page while
+// closed, so lookups inside it do not require anything to be on screen.
+export function playerOf(control: Element): ParentNode {
+  return control.closest(".html5-video-player") ?? document;
+}
+
+// The English label keeps English players working if YouTube swaps the icon.
+export function findSpeedRow(inPlayer: Element): PrimitiveResolution {
+  const player = playerOf(inPlayer);
+  const byIcon = findWithin(player, SPEED_ROW_STRATEGIES);
+  if (byIcon.resolved) return byIcon;
+  for (const label of player.querySelectorAll(".ytp-settings-menu .ytp-menuitem-label")) {
+    if (label.textContent === SPEED_ROW_ENGLISH_LABEL && label.parentElement) {
+      return { resolved: true, element: label.parentElement, strategyIndex: SPEED_ROW_STRATEGIES.length };
+    }
+  }
+  return byIcon;
+}
+
+// YouTube words 1x in the viewer's language ("Normal", "Standard") and every
+// other rate as a bare number, so the word is kept from YouTube's own label.
+export function showRateInSpeedRow(row: Element, rate: number): void {
+  const value = row.querySelector(".ytp-menuitem-content");
+  if (!value) return;
+  const shown = value.textContent ?? "";
+  if (shown && !/\p{Nd}/u.test(shown)) normalLabels.set(row, shown);
+  value.textContent = rate === 1 ? (normalLabels.get(row) ?? "1") : String(Number(rate.toFixed(4)));
+}
+
+export function ratePanelChips(panel: Element): HTMLElement | null {
+  return panel.querySelector(".ytp-variable-speed-panel-chips");
+}
+
+// YouTube only redraws its panel from its own state, which a rate set
+// straight on the <video> never reaches.
+export function syncRatePanel(panel: Element, rate: number): void {
+  for (const text of panel.querySelectorAll(".ytp-variable-speed-panel-display span, .ytp-speedslider-text")) text.textContent = `${rate.toFixed(2)}x`;
+  const slider = panel.querySelector<HTMLInputElement>(".ytp-speedslider");
+  if (!slider) return;
+  if (Number(slider.max) < rate) slider.max = String(rate);
+  if (Number(slider.min) > rate) slider.min = String(rate);
+  slider.value = String(rate);
+  slider.setAttribute("aria-valuemin", slider.min);
+  slider.setAttribute("aria-valuemax", slider.max);
+  slider.setAttribute("aria-valuenow", String(rate));
+  slider.setAttribute("aria-valuetext", rate.toFixed(2));
+  // The filled part of the track is drawn from this, not from the value.
+  const filled = (rate - Number(slider.min)) / (Number(slider.max) - Number(slider.min));
+  slider.style.setProperty("--yt-slider-shape-gradient-percent", `${Math.min(1, Math.max(0, filled)) * 100}%`);
+}
+
+// Ads play in the content's own <video>; YouTube marks the player meanwhile.
+export function isAdShowing(video: Element): boolean {
+  return video.closest(".html5-video-player")?.classList.contains("ad-showing") ?? false;
+}
+
+// YouTube shows one panel at a time in the menu's content, swapping a
+// submenu's panel in for the main one and back.
+export function settingsMenu(inPlayer: Element): { menu: HTMLElement; content: HTMLElement; mainPanel: HTMLElement; mainList: HTMLElement } | null {
+  const menu = findWithin(playerOf(inPlayer), [".ytp-settings-menu"]).element as HTMLElement | null;
+  const content = menu?.querySelector<HTMLElement>(".ytp-popup-content");
+  const mainPanel = content?.querySelector<HTMLElement>(":scope > .ytp-panel");
+  const mainList = mainPanel?.querySelector<HTMLElement>(".ytp-panel-menu");
+  return menu && content && mainPanel && mainList ? { menu, content, mainPanel, mainList } : null;
+}
diff --git a/web-ext/youtube/playlist.ts b/web-ext/youtube/playlist.ts
new file mode 100644
index 00000000..a50af171
--- /dev/null
+++ b/web-ext/youtube/playlist.ts
@@ -0,0 +1,42 @@
+import { resolveTarget, type PrimitiveResolution } from "@/kernel/dom/resolve";
+
+// Scoped to the playlist page: YouTube keeps the page you came from alive but
+// hidden, and a channel page carries a yt-page-header-renderer of its own.
+// Course playlists get a header card, whose "10 videos · Last updated" block
+// is the first strategy; regular playlists get the page header, whose
+// "Playlist · 34 videos · views" block is the second; the rest are fallbacks.
+const PLAYLIST_PAGE = "ytd-browse[page-subtype='playlist']";
+const HEADER_STRATEGIES = [
+  `${PLAYLIST_PAGE} ytd-playlist-header-renderer .metadata-text-wrapper`,
+  `${PLAYLIST_PAGE} yt-page-header-renderer yt-content-metadata-view-model`,
+  `${PLAYLIST_PAGE} ytd-playlist-header-renderer .metadata-action-bar`,
+  `${PLAYLIST_PAGE} ytd-playlist-sidebar-primary-info-renderer #stats`,
+  `${PLAYLIST_PAGE} yt-page-header-renderer`,
+  `${PLAYLIST_PAGE} ytd-playlist-header-renderer`,
+];
+
+// The title block of the playlist panel beside the player on a watch page:
+// playlist name, then the "channel · 2/10" line.
+const WATCH_PANEL_STRATEGIES = [
+  "#secondary ytd-playlist-panel-renderer #header-description",
+  "ytd-playlist-panel-renderer #header-description",
+  "ytd-playlist-panel-renderer #header-contents",
+  "ytd-playlist-panel-renderer #header",
+] as const;
+
+export function resolvePlaylistHeader(): Promise<PrimitiveResolution> {
+  return resolveTarget(HEADER_STRATEGIES);
+}
+
+export function resolveWatchPlaylistPanel(): Promise<PrimitiveResolution> {
+  return resolveTarget(WATCH_PANEL_STRATEGIES);
+}
+
+// YouTube's own metadata text in a header or panel, to copy the type from,
+// and the separator it puts between items there. The course card and the
+// watch panel space their items instead of separating them, hence null.
+export function metadataTextIn(container: Element): { sample: Element | null; separator: string | null } {
+  const samples = container.querySelectorAll(".ytContentMetadataViewModelMetadataText, .byline-item, #publisher-container .publisher, #stats yt-formatted-string");
+  const separator = container.querySelector(".ytContentMetadataViewModelDelimiter")?.textContent?.trim() || null;
+  return { sample: samples[samples.length - 1] ?? null, separator };
+}
diff --git a/web-ext/youtube/primitives.ts b/web-ext/youtube/primitives.ts
new file mode 100644
index 00000000..b7c0c00b
--- /dev/null
+++ b/web-ext/youtube/primitives.ts
@@ -0,0 +1,197 @@
+import { definePrimitive, type Primitive } from "@/kernel/primitives";
+import { removeCover, showCover } from "./cover";
+
+export type Visibility = { visible: boolean };
+export type ThumbnailMode = "show" | "hide" | "blur";
+export type Thumbnails = { mode: ThumbnailMode };
+export type PlayerLayout = "default" | "no-video";
+export type Layout = { value: PlayerLayout };
+export type VisualsMode = "video" | "black" | "visualizer" | "custom";
+export type Visuals = { value: VisualsMode };
+
+const VISUALS_MODES: readonly VisualsMode[] = ["video", "black", "visualizer", "custom"];
+
+const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === "object" && value !== null;
+
+const visibility = {
+  parse: (value: unknown): Visibility | undefined =>
+    isRecord(value) && typeof value.visible === "boolean" ? { visible: value.visible } : undefined,
+  apply: (el: HTMLElement, { visible }: Visibility) => {
+    el.style.display = visible ? "" : "none";
+  },
+  reset: (el: HTMLElement) => {
+    el.style.display = "";
+  },
+};
+
+const thumbnails = {
+  parse: (value: unknown): Thumbnails | undefined =>
+    isRecord(value) && (value.mode === "show" || value.mode === "hide" || value.mode === "blur") ? { mode: value.mode } : undefined,
+  apply: (el: HTMLElement, { mode }: Thumbnails) => {
+    el.style.filter = mode === "blur" ? "blur(12px)" : "";
+    el.style.visibility = mode === "hide" ? "hidden" : "";
+  },
+  reset: (el: HTMLElement) => {
+    el.style.filter = "";
+    el.style.visibility = "";
+  },
+};
+
+export const watchLayout = definePrimitive<Layout>({
+  id: "watch.layout",
+  label: "Player layout",
+  routes: ["watch"],
+  // The container is found by what it holds because theater mode moves the
+  // player between containers. It is collapsed rather than the <video>
+  // hidden: a display:none video can count as not playing, while a
+  // zero-height container keeps playback and audio untouched.
+  strategies: ["#full-bleed-container:has(#movie_player)", "#player-container-outer:has(#movie_player)", "#player-container:has(#movie_player)"],
+  parse: (value) => (isRecord(value) && (value.value === "default" || value.value === "no-video") ? { value: value.value } : undefined),
+  apply(el, { value }) {
+    const collapsed = value === "no-video";
+    el.style.height = collapsed ? "0" : "";
+    el.style.minHeight = collapsed ? "0" : "";
+    el.style.overflow = collapsed ? "hidden" : "";
+  },
+  reset(el) {
+    el.style.height = "";
+    el.style.minHeight = "";
+    el.style.overflow = "";
+  },
+});
+
+// What fills the video's place: the video itself, or a cover over it that
+// leaves the player's controls, progress bar and audio untouched.
+export const watchVisuals = definePrimitive<Visuals>({
+  id: "watch.visuals",
+  label: "Video screen",
+  routes: ["watch"],
+  strategies: ["#movie_player", ".html5-video-player"],
+  parse: (value) => (isRecord(value) && VISUALS_MODES.includes(value.value as VisualsMode) ? { value: value.value as VisualsMode } : undefined),
+  apply(el, { value }) {
+    if (value === "video") removeCover(el);
+    else showCover(el, value);
+  },
+  reset: removeCover,
+});
+
+export const watchSidebar = definePrimitive<Visibility>({
+  id: "watch.sidebar",
+  label: "Recommendations sidebar",
+  routes: ["watch"],
+  strategies: ["#secondary", "ytd-watch-next-secondary-results-renderer", "#related", "ytd-watch-flexy #secondary-inner"],
+  ...visibility,
+});
+
+export const watchComments = definePrimitive<Visibility>({
+  id: "watch.comments",
+  label: "Comments",
+  routes: ["watch"],
+  strategies: ["ytd-comments#comments", "#comments", "ytd-item-section-renderer #contents ytd-comments", "ytd-watch-flexy #comments"],
+  ...visibility,
+});
+
+export const watchEndCards = definePrimitive<Visibility>({
+  id: "watch.endCards",
+  label: "End cards",
+  routes: ["watch"],
+  // The container, not the cards: YouTube adds cards mid-video.
+  strategies: [".ytp-ce-element", ".ytp-endscreen-element", ".html5-endscreen", ".ytp-player-content .ytp-ce-element"],
+  all: true,
+  ...visibility,
+});
+
+export const homeThumbnails = definePrimitive<Thumbnails>({
+  id: "home.thumbnails",
+  label: "Home thumbnails",
+  routes: ["home"],
+  strategies: [
+    "ytd-rich-grid-renderer ytd-rich-item-renderer ytd-thumbnail img",
+    "ytd-rich-grid-renderer ytd-rich-item-renderer yt-thumbnail-view-model img",
+    "ytd-rich-grid-renderer ytd-rich-item-renderer img#img",
+  ],
+  all: true,
+  ...thumbnails,
+});
+
+export const homeFeed = definePrimitive<Visibility>({
+  id: "home.feed",
+  label: "Home feed",
+  routes: ["home"],
+  strategies: ["ytd-rich-grid-renderer", "ytd-browse[page-subtype='home'] ytd-rich-grid-renderer", "#contents.ytd-rich-grid-renderer"],
+  ...visibility,
+});
+
+export const homeShorts = definePrimitive<Visibility>({
+  id: "home.shorts",
+  label: "Home Shorts shelf",
+  routes: ["home"],
+  strategies: [
+    "ytd-rich-section-renderer:has(ytd-rich-shelf-renderer[is-shorts])",
+    "ytd-rich-section-renderer:has(ytm-shorts-lockup-view-model)",
+    "ytd-rich-shelf-renderer[is-shorts]",
+    "ytd-reel-shelf-renderer",
+  ],
+  all: true,
+  ...visibility,
+});
+
+export const searchThumbnails = definePrimitive<Thumbnails>({
+  id: "search.thumbnails",
+  label: "Search thumbnails",
+  routes: ["search"],
+  strategies: ["ytd-search ytd-video-renderer ytd-thumbnail img", "ytd-search ytd-video-renderer yt-thumbnail-view-model img", "ytd-search yt-lockup-view-model yt-thumbnail-view-model img"],
+  all: true,
+  ...thumbnails,
+});
+
+export const searchMetadata = definePrimitive<Visibility>({
+  id: "search.metadata",
+  label: "Search result metadata",
+  routes: ["search"],
+  strategies: ["ytd-search ytd-video-renderer #metadata-line", "ytd-search ytd-video-renderer .ytd-video-meta-block", "#contents.ytd-section-list-renderer ytd-video-renderer #metadata-line"],
+  all: true,
+  ...visibility,
+});
+
+export const searchShorts = definePrimitive<Visibility>({
+  id: "search.shorts",
+  label: "Shorts in search",
+  routes: ["search"],
+  strategies: ["ytd-search grid-shelf-view-model:has(ytm-shorts-lockup-view-model)", "ytd-search ytd-reel-shelf-renderer", "ytd-search ytd-shelf-renderer:has(ytd-reel-item-renderer)"],
+  all: true,
+  ...visibility,
+});
+
+export const shortsShelf = definePrimitive<Visibility>({
+  id: "shorts.shelf",
+  label: "Shorts shelf everywhere",
+  routes: ["home", "search", "other"],
+  strategies: [
+    "ytd-rich-section-renderer:has(ytd-rich-shelf-renderer[is-shorts])",
+    "ytd-rich-section-renderer:has(ytm-shorts-lockup-view-model)",
+    "grid-shelf-view-model:has(ytm-shorts-lockup-view-model)",
+    "ytd-reel-shelf-renderer",
+    "ytd-rich-shelf-renderer[is-shorts]",
+    "ytd-shelf-renderer:has(ytd-reel-item-renderer)",
+  ],
+  all: true,
+  ...visibility,
+});
+
+export const PRIMITIVES: readonly Primitive[] = [
+  watchLayout,
+  watchVisuals,
+  watchSidebar,
+  watchComments,
+  watchEndCards,
+  homeThumbnails,
+  homeFeed,
+  homeShorts,
+  searchThumbnails,
+  searchMetadata,
+  searchShorts,
+  shortsShelf,
+] as Primitive[];
+
+export const primitiveById = (id: string): Primitive | undefined => PRIMITIVES.find((p) => p.id === id);
diff --git a/web-ext/youtube/route.test.ts b/web-ext/youtube/route.test.ts
new file mode 100644
index 00000000..a6457912
--- /dev/null
+++ b/web-ext/youtube/route.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test";
+import { routeFor } from "./route";
+
+const at = (path: string) => routeFor(new URL(`https://www.youtube.com${path}`));
+
+describe("routeFor", () => {
+  test("watch pages carry the video id", () => {
+    expect(at("/watch?v=abc123")).toEqual({ name: "watch", videoId: "abc123", playlistId: null });
+    expect(at("/watch?v=abc123&list=PL1")).toMatchObject({ playlistId: "PL1" });
+  });
+
+  test("playlists distinguish YouTube's own lists", () => {
+    expect(at("/playlist?list=PL1")).toEqual({ name: "playlist", playlistId: "PL1", system: false });
+    expect(at("/playlist?list=WL")).toEqual({ name: "playlist", playlistId: "WL", system: true });
+    expect(at("/playlist?list=LL")).toMatchObject({ system: true });
+    expect(at("/playlist?list=RDdQw4w9WgXcQ")).toMatchObject({ system: true });
+  });
+
+  test("shorts carry the short id", () => {
+    expect(at("/shorts/xyz")).toEqual({ name: "shorts", shortId: "xyz" });
+  });
+
+  test("home, search and everything else", () => {
+    expect(at("/").name).toBe("home");
+    expect(at("/results?search_query=q").name).toBe("search");
+    expect(at("/@channel").name).toBe("other");
+  });
+});
diff --git a/web-ext/youtube/route.ts b/web-ext/youtube/route.ts
new file mode 100644
index 00000000..f282d8a3
--- /dev/null
+++ b/web-ext/youtube/route.ts
@@ -0,0 +1,51 @@
+import { YOUTUBE_QUERY_PARAM, YOUTUBE_SYSTEM_PLAYLIST_ID, YOUTUBE_URL_PATH } from "./urls";
+
+export type RouteName = "watch" | "playlist" | "shorts" | "home" | "search" | "other";
+
+export type Route =
+  | { name: "watch"; videoId: string | null; playlistId: string | null }
+  | { name: "playlist"; playlistId: string | null; system: boolean }
+  | { name: "shorts"; shortId: string | null }
+  | { name: "home" }
+  | { name: "search" }
+  | { name: "other" };
+
+export function routeFor(url: URL): Route {
+  const { pathname, searchParams } = url;
+  if (pathname.startsWith(YOUTUBE_URL_PATH.WATCH)) {
+    return {
+      name: "watch",
+      videoId: searchParams.get(YOUTUBE_QUERY_PARAM.VIDEO_ID),
+      playlistId: searchParams.get(YOUTUBE_QUERY_PARAM.PLAYLIST_ID),
+    };
+  }
+  if (pathname.startsWith(YOUTUBE_URL_PATH.PLAYLIST)) {
+    const playlistId = searchParams.get(YOUTUBE_QUERY_PARAM.PLAYLIST_ID);
+    return { name: "playlist", playlistId, system: isSystemPlaylist(playlistId) };
+  }
+  if (pathname.startsWith(YOUTUBE_URL_PATH.SHORTS)) {
+    return { name: "shorts", shortId: pathname.split("/")[2] || null };
+  }
+  if (pathname === "/") return { name: "home" };
+  if (pathname.startsWith("/results")) return { name: "search" };
+  return { name: "other" };
+}
+
+// Watch Later and Liked belong to the viewer and mixes (RD…) are generated per
+// viewer, so none of them is a list anyone else, like the Data API, can read.
+export function isSystemPlaylist(playlistId: string | null): boolean {
+  return (
+    playlistId === YOUTUBE_SYSTEM_PLAYLIST_ID.WATCH_LATER ||
+    playlistId === YOUTUBE_SYSTEM_PLAYLIST_ID.LIKED ||
+    !!playlistId?.startsWith(YOUTUBE_SYSTEM_PLAYLIST_ID.MIX_PREFIX)
+  );
+}
+
+// YouTube is a single-page app; it announces each completed navigation with
+// this event, which is why the content script needs no help from the
+// background to know where it is.
+export function onNavigate(listener: (route: Route) => void): void {
+  const notify = () => listener(routeFor(new URL(location.href)));
+  document.addEventListener("yt-navigate-finish", notify);
+  notify();
+}
diff --git a/web-ext/youtube/shorts.ts b/web-ext/youtube/shorts.ts
new file mode 100644
index 00000000..1452c087
--- /dev/null
+++ b/web-ext/youtube/shorts.ts
@@ -0,0 +1,45 @@
+import { findWithin, resolveTarget, type PrimitiveResolution } from "@/kernel/dom/resolve";
+
+// YouTube reuses one reel renderer for every Short in the newer layout and
+// extracts the action bar next to it; the older layout marked the visible
+// reel with is-active and kept #actions inside it.
+const VIDEO_STRATEGIES = [
+  "ytd-reel-video-renderer[is-active] video",
+  "#shorts-player video",
+  "ytd-reel-video-renderer video",
+] as const;
+
+const ACTION_BAR_STRATEGIES = [
+  "reel-action-bar-view-model",
+  "ytd-reel-video-renderer[is-active] #actions",
+  "ytd-reel-video-renderer #actions",
+] as const;
+
+// The button's label is localised; its container's id is not.
+const NEXT_REEL_STRATEGIES = ["#navigation-button-down button"] as const;
+
+const OPEN_PANEL_STRATEGIES = ["ytd-engagement-panel-section-list-renderer[visibility='ENGAGEMENT_PANEL_VISIBILITY_EXPANDED']"] as const;
+
+export function resolveReelVideo(): Promise<PrimitiveResolution> {
+  return resolveTarget(VIDEO_STRATEGIES);
+}
+
+export function resolveReelActionBar(): Promise<PrimitiveResolution> {
+  return resolveTarget(ACTION_BAR_STRATEGIES);
+}
+
+// A watch page left in the background keeps its own engagement panels, so
+// reel controls are looked up in the Shorts page the playing reel is on.
+function shortsPageOf(reel: Element): ParentNode {
+  return reel.closest("ytd-shorts") ?? document;
+}
+
+export function nextReelButton(reel: Element): HTMLButtonElement | null {
+  return findWithin(shortsPageOf(reel), NEXT_REEL_STRATEGIES).element as HTMLButtonElement | null;
+}
+
+// Advancing would close an open comments, description or audio panel under
+// the user.
+export function isReelPanelOpen(reel: Element): boolean {
+  return findWithin(shortsPageOf(reel), OPEN_PANEL_STRATEGIES).resolved;
+}
diff --git a/web-ext/youtube/urls.ts b/web-ext/youtube/urls.ts
new file mode 100644
index 00000000..daad7ca5
--- /dev/null
+++ b/web-ext/youtube/urls.ts
@@ -0,0 +1,18 @@
+export const YOUTUBE_HOSTNAME_SUFFIX = "youtube.com";
+
+export const YOUTUBE_URL_PATH = {
+  WATCH: "/watch",
+  PLAYLIST: "/playlist",
+  SHORTS: "/shorts",
+} as const;
+
+export const YOUTUBE_QUERY_PARAM = {
+  VIDEO_ID: "v",
+  PLAYLIST_ID: "list",
+} as const;
+
+export const YOUTUBE_SYSTEM_PLAYLIST_ID = {
+  WATCH_LATER: "WL",
+  LIKED: "LL",
+  MIX_PREFIX: "RD",
+} as const;
diff --git a/website/AGENTS.md b/website/AGENTS.md
index 456d6dec..cbd42425 100644
--- a/website/AGENTS.md
+++ b/website/AGENTS.md
@@ -22,7 +22,7 @@ Marketing site and docs for Toppings. Read the root `AGENTS.md` first; its rules
 ## Content
 
 - `lib/site.ts` is the single source for copy that appears in more than one place: URLs, version, features, default shortcuts. Page-only copy stays in the page.
-- `site.version` mirrors `web-ext/data/version.ts` and the default shortcuts mirror `web-ext/data/store.ts`. Update them on release; nothing imports across packages.
+- `site.version` mirrors `web-ext/lib/version.ts`. The default shortcuts mirror the key registries in `web-ext/features/*/keys.ts`, and the seek amounts mirror each feature's `settings.ts`. Update them on release; nothing imports across packages.
 - `/greetings` and `/farewell` are opened by the extension on install and uninstall. Keep those routes.
 
 ## Home page
diff --git a/website/app/docs/changelog/releases.ts b/website/app/docs/changelog/releases.ts
index 833d53f5..eda9b689 100644
--- a/website/app/docs/changelog/releases.ts
+++ b/website/app/docs/changelog/releases.ts
@@ -17,6 +17,10 @@ export const releases: readonly {
       { kind: "new", text: "Z loads the last-used setup or turns segments off; Shift+Z starts a fresh slate." },
       { kind: "new", text: "Drag two adjacent markers together to merge segments." },
       { kind: "new", text: "A control panel under the video for segments, loop counts and rates." },
+      { kind: "polish", text: "Audio mode is now the Audio preset. B and the headphones button in the player still turn it on and off, and any profile can cover the video with black, the visualizer or your own image while keeping the controls." },
+      { kind: "new", text: "Every profile can have its own shortcut; pressing it again goes back to the profile you had before." },
+      { kind: "new", text: "Schedules turn a profile on by time of day or while you're at a saved place, with a toolbar badge and a heads-up before each change." },
+      { kind: "polish", text: "Per-video audio-mode pins and the visualizer sensitivity setting are gone." },
     ],
   },
   {
diff --git a/website/app/docs/faq/faq.ts b/website/app/docs/faq/faq.ts
index 79688f23..070455f6 100644
--- a/website/app/docs/faq/faq.ts
+++ b/website/app/docs/faq/faq.ts
@@ -2,7 +2,9 @@ export const faq: readonly { q: string; a: readonly string[] }[] = [
   {
     q: "Does Toppings collect any data?",
     a: [
-      "No. There are no analytics, no telemetry and no accounts. The extension asks for two permissions: youtube.com, so it can add controls to the player, and storage, so your settings survive restarts.",
+      "No. There are no analytics, no telemetry and no accounts. The extension asks for youtube.com, so it can add controls to the player; storage, so your settings survive restarts; alarms, so schedules can switch profiles on time; and scripting, so an update reaches YouTube tabs you already have open. Chrome also lists offscreen, a hidden page used only to check your location for a place schedule.",
+      "Toppings never asks for your location up front. If you add a place schedule, your browser asks the way a website would, and the places you save stay on your device.",
+      "One feature talks to our server. Playlist runtime sends the playlist's ID to toppings.enry.ch/api, which looks up the video durations YouTube's page doesn't show. Nothing else leaves your browser.",
       "The source is on GitHub under GPL-3.0 if you'd rather check than trust.",
     ],
   },
@@ -13,9 +15,9 @@ export const faq: readonly { q: string; a: readonly string[] }[] = [
     ],
   },
   {
-    q: "How does Audio mode work?",
+    q: "How do I listen without the video?",
     a: [
-      "It hides the video and keeps the audio. The visible area becomes a black screen, a waveform visualizer, or an image of your choosing. Timeline, chapters, speed and shortcuts keep working.",
+      "Press B, click the headphones button beside the player's controls, or pick Audio in the popup. It covers the video with a waveform that moves with the sound, while the controls, progress bar and seeking keep working. Press B again to go back to what you had before.",
     ],
   },
   {
@@ -33,10 +35,17 @@ export const faq: readonly { q: string; a: readonly string[] }[] = [
   {
     q: "What are profiles?",
     a: [
-      "Named bundles of YouTube settings: sidebar, comments, end cards, Shorts shelf, feed thumbnails and more. Two presets ship, Audio and Focus. Create your own, then switch from the popup, a shortcut, or the player's gear menu.",
+      "Named bundles of YouTube settings: sidebar, comments, end cards, Shorts shelf, feed thumbnails and more. Two presets ship, Audio and Focus. Create your own, then switch from the popup, the player's gear menu, or a shortcut; every profile can have its own.",
       "Each custom profile can be exported to a JSON file and imported elsewhere. Imports are validated, so a bad file can't corrupt your settings.",
     ],
   },
+  {
+    q: "Can a profile turn on by itself?",
+    a: [
+      "Yes, with a schedule: during set hours on chosen days, or while you're at a place you saved. When it ends, you get back the profile you had before. If you switch profiles yourself in the middle, your choice stands until the schedule ends.",
+      "While a schedule is in charge, the toolbar icon shows the profile's first letter; five minutes before a change it counts down instead, and YouTube tabs show a short note. You can skip a schedule for the rest of its window from the popup.",
+    ],
+  },
   {
     q: "Is Toppings available on mobile?",
     a: [
diff --git a/website/app/docs/page.tsx b/website/app/docs/page.tsx
index a85c3ce9..8e6f86b0 100644
--- a/website/app/docs/page.tsx
+++ b/website/app/docs/page.tsx
@@ -42,7 +42,7 @@ export default function Install() {
           list.
         </li>
         <li>
-          Open any video and press <code>B</code> for Audio mode. Settings live in the options page:
+          Open any video. The controls sit next to YouTube&apos;s own; the Audio and Focus presets are in the popup. Settings live in the options page:
           right-click the toolbar icon → <em>Options</em>.
         </li>
       </ol>
diff --git a/website/app/greetings/page.tsx b/website/app/greetings/page.tsx
index efa86687..3ac12e8d 100644
--- a/website/app/greetings/page.tsx
+++ b/website/app/greetings/page.tsx
@@ -12,7 +12,7 @@ export default function Greetings() {
           You&apos;re all <em>set</em>.
         </>
       }
-      body="Open any YouTube video and press B. Everything else is in the docs."
+      body="Open any YouTube video. The controls sit next to YouTube's own, and the presets are in the popup."
       cta={{ label: "Read the docs", href: "/docs" }}
     />
   );
diff --git a/website/app/home.css b/website/app/home.css
index 19bfb3b5..c3eeb45c 100644
--- a/website/app/home.css
+++ b/website/app/home.css
@@ -28,9 +28,9 @@
   background: var(--ink);
 }
 
-/* Legibility veil sits under the lamp so the ember light reads as the top-most
-   layer. It pools softly behind the headline glyphs instead of walling off the
-   left half, so the watch page stays recognisable under the type. */
+/* Legibility veil: it pools softly behind the headline glyphs instead of
+   walling off the left half, so the watch page stays recognisable under the
+   type. */
 .scrim {
   background:
     radial-gradient(58% 52% at 26% 40%, rgba(11, 11, 12, 0.82), transparent 100%),
diff --git a/website/lib/site.ts b/website/lib/site.ts
index d4353789..77471af8 100644
--- a/website/lib/site.ts
+++ b/website/lib/site.ts
@@ -2,7 +2,7 @@ export const site = {
   name: "Toppings",
   tagline: "Your YouTube, your way.",
   description:
-    "A free, open-source browser extension for YouTube. Audio mode, loop segments, custom playback speeds, one-key seeking. No accounts, no trackers.",
+    "A free, open-source browser extension for YouTube. Profiles, loop segments, custom playback speeds, one-key seeking. No accounts, no trackers.",
   version: "3.0.3",
   license: "GPL-3.0",
   url: "https://toppings.enry.ch",
@@ -19,9 +19,9 @@ export const site = {
 
 export const features = [
   {
-    name: "Audio mode",
+    name: "Profiles",
     blurb:
-      "Hide the video and keep the audio. Black screen, visualizer, or your own image.",
+      "Presets that reshape YouTube in one switch. Audio covers the video with a waveform and keeps the controls; Focus hides the sidebar, comments and end cards. Make your own.",
   },
   {
     name: "Loop segments",
@@ -30,7 +30,7 @@ export const features = [
   },
   {
     name: "Custom playback rates",
-    blurb: "Speeds YouTube doesn't offer, from 0.0625× to 16×, on the native menu.",
+    blurb: "Speeds YouTube doesn't offer, from 0.0625× to 16×, right in the player's speed panel.",
   },
   {
     name: "Toggle playback rate",
@@ -61,7 +61,6 @@ export const shortcuts: readonly { group: string; rows: readonly Shortcut[] }[]
     {
       group: "Watch page",
       rows: [
-        { keys: ["B"], name: "Audio mode", blurb: "Hide the video, keep the audio" },
         { keys: ["Z"], name: "Segments", blurb: "Load the last-used segments, or turn them off" },
         { keys: ["Shift", "Z"], name: "Fresh slate", blurb: "One segment spanning the whole video, looping" },
         { keys: ["Q"], name: "Segment in", blurb: "Pin the active segment's start to now" },