diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa822cb1..5cd2a984 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,16 @@ edit the release notes and re-run the generator.
 
 Upgrading, pinning a version and rolling back: [docs/self-hosting.md](docs/self-hosting.md#upgrading).
 
+## 0.109.1 — 2026-10-23
+
+### New
+
+- Development: the frontend is one folder per page (its page, rail, store and definition), with the layers held by lint and the shared /watch page held apart by a contract test; the header knows no page, and the feed and Plex each keep their own saved views.
+
+### Fixed
+
+- Saved views: a view you applied and then changed is still active after a visit to another page, in the feed and in Plex.
+
 ## 0.109.0 — 2026-10-21
 
 ### New
diff --git a/CLAUDE.md b/CLAUDE.md
index ae1732bf..223ce247 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -73,14 +73,22 @@ only along a declared edge and writes them only through that unit's service; cor
 `queries`. **Fence-held, with no exemptions** (`backend/tests/test_unit_fences.py`) — as far as an AST sees: what it
 cannot (an ORM write on another unit's loaded row, SQL in `text()`, a commit by `begin()`) is review's to catch, listed in
 [`backend/app/README.md`](backend/app/README.md) with the conventions.
-Frontend: `main.tsx` provider tree → `App.tsx` shell (a shared `/watch` link boots from its own
-entry, `watch.html` → `watchMain.tsx`, held app-free by a contract test) → `moduleRegistry` route-chunks → module
-components → the **platform layer `components/ui/`** (domain-free primitives: the popover engine and
-its menus, `Modal`/`Overlay`, `Button`/`form`, `DataTable`/`VirtualGrid`, `QueryState`, …). That
-boundary is one-way and **lint-enforced**, not just described: a platform component may not import a
-feature component or a domain API slice, and one layer down `lib/` may not import from `components/` at
-all, not even a type (`no-restricted-imports` in `eslint.config.js`, with its own test). A new generic
-component goes in `ui/`; see [`frontend/src/components/ui/README.md`](frontend/src/components/ui/README.md).
+Frontend, by folder under `src/`: `main.tsx` provider tree → `shell/` (`App`, header, nav rail, palette,
+boot; a shared `/watch` link boots from its own entry, `watch.html` → `watchMain.tsx` → `watch/`, held
+app-free by a contract test) → **`modules/<page>/`** (one folder per page: the page, its rail, its store, its tests,
+and its `module.ts` definition — label, icon, gate, the lazy page and rail, its store — collected in nav order by
+`features/navigation/moduleRegistry`, which also mounts every store at the root; a new page is its folder, its id in
+`lib/urlState` and its entry there, plus its panel in `lib/panelLayout` if it has a rail) →
+**`features/<name>/`** (what several pages share: video cards, filters, downloads, the player, navigation) → the
+**platform layer `components/ui/`** (domain-free primitives: the popover engine and its menus, `Modal`/`Overlay`,
+`Button`/`form`, `DataTable`/`VirtualGrid`, `QueryState`,
+…) → `lib/`. The direction is one-way and **lint-enforced**, not just described (`local/layers`, with
+its own test): an import only goes down; another module is reached only through its **`index.ts`** (its
+public face — the stores, mounted at the root and read app-wide, which `features/` may read too) or
+lazily by `import()`; a platform component may not import a domain API slice, and `lib/` nothing above
+it, not even a type. A lazily imported page, rail or dialog that a static import drags onto the boot
+path fails the build (`chunkGuard.ts`). A new generic component goes in `ui/`; see
+[`frontend/src/components/ui/README.md`](frontend/src/components/ui/README.md).
 Data via react-query (`qk` factory), the signed-in account's `localStorage` (`storage.ts`), and server
 prefs; API through `lib/api/*` slices over `core.req<T>`.
 
@@ -107,6 +115,9 @@ CQRS, a repository/DI framework, a router library, a generic CRUD-router factory
 | FE keyboard shortcut                 | a row in `lib/keymap.ts` + `dispatch()`                                                                                                                                                                                                       | a private `keydown` listener with its own key literals                                                                                                                                      |
 | FE list/grid keys                    | `NavGrid`/`keyboardNav` + `navItemAttrs` + `data-nav-open`                                                                                                                                                                                    | a private arrow-key / roving-tabindex handler                                                                                                                                               |
 | FE view push (history)               | `rememberNavPosition()` right before `history.pushState`                                                                                                                                                                                      | a push that forgets: Back strands focus on `<body>`                                                                                                                                         |
+| FE a page's header content           | the page renders it into the floating header itself (`PageHeader`, `ui/PageShell`)                                                                                                                                                            | a `page === …` branch in the shell's header, or a bridge carrying a page's state up to it                                                                                                   |
+| FE module store                      | its definition's `Store` (`module.ts`), mounted at the root by `ModuleStores`; it reads no other module's store (contract-held)                                                                                                               | a provider hand-nested in `main.tsx`                                                                                                                                                        |
+| FE saved views                       | the module's own store from `features/filters` (`createSavedViewsStore` + `useSavedViewsStore`)                                                                                                                                               | one store switched by the active page — every visit elsewhere reset it                                                                                                                      |
 | FE static label / button-like link   | `Badge` (flat, no edge) · `LinkButton` / `IconLink`                                                                                                                                                                                           | a glass pill that reads as a chip; an `<a>` hand-painted like a button                                                                                                                      |
 | FE loading/empty/error               | `QueryState` / `StateMessage`                                                                                                                                                                                                                 | ad-hoc conditionals                                                                                                                                                                         |
 | FE failed write                      | `meta.failTitle`, else `notifyActionError(err, title)`; a YouTube write action (subscribe, sync, …): `notifyYouTubeActionError` — a 403 offers Connect                                                                                        | a bare `catch {}` or `notify()` with no error attached                                                                                                                                      |
diff --git a/VERSION b/VERSION
index 8b27ad70..ced503bc 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.109.0
+0.109.1
diff --git a/docs/DESIGN.md b/docs/DESIGN.md
index 8ea9f4c0..05543621 100644
--- a/docs/DESIGN.md
+++ b/docs/DESIGN.md
@@ -275,7 +275,9 @@ Also in force:
 - **Page chrome (B4):** a page's tabs and filters sit in ONE sticky band of the page colour, with the fade
   under it (below). Below ~600px of height the filter row folds into one "Filters · n" button. Every page has
   a visually hidden `h1`; the nav rail and the browser tab title are the visible identity. [WCAG 2.4.6]
-  Built as: the band is `PageShell`'s toolbar slot (`PageToolbar`), above the one scroller. The band
+  Built as: the band is `PageShell`'s toolbar slot (`PageToolbar`), above the one scroller; the floating
+  header over it is its header slot (`PageHeader`: the page's own pills, the palette's Jump-to pill where a
+  page has none, `PageHeaderDefault`). The band
   holds controls only: an intro paragraph scrolls with the content (in the band it ate three lines of a
   short window). The fold is `useFilterFold` + `FilterFoldButton`: the same row
   shown or hidden in place, never copied into a popover. The hidden `h1` is `PageShell`'s `title`; a
diff --git a/docs/development.md b/docs/development.md
index 842f3cef..0bb8d445 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -36,6 +36,32 @@ The dev server also serves the **design lab** at `http://localhost:5173/design-l
 decisions and the chosen patterns, rendered with the app's real CSS. It never reaches a production build
 (see [`DESIGN.md`](DESIGN.md)).
 
+## Adding a page
+
+A frontend page is one folder, `frontend/src/modules/<id>/` (the layering is in
+[`CLAUDE.md`](../CLAUDE.md) § Architecture shape):
+
+1. The page itself, default-exported, and anything only it uses. Header content (a search box, a toggle) the
+   page renders into the floating header itself through `PageHeader`; the shell knows no page.
+2. `module.ts`: its `ModuleDef` (`lib/moduleDef.ts`): id, label keys, icon, an optional `gate`, the page as a
+   `lazyWithPreload(() => import(…))`, and optionally a rail and a `Store`. Of its own folder it imports statically
+   only its store (a `…Provider` / `…Store` file); the page and the rail load lazily.
+3. `index.ts`, the module's public face: the definition, and only what other folders must read (its store's
+   hooks). Another folder reaches the module through this file or not at all.
+4. The id in `lib/urlState`'s `PAGES`, and the definition in `features/navigation/moduleRegistry.ts`, in
+   nav-rail order. The rail, the palette, the `g` chords, the tab title and the root's stores all read from there.
+5. Its strings in both locales (`src/i18n/locales`).
+6. A page with a side rail also names its panel below the module, in `lib/` (rails share one layout
+   and collapse machinery, which lib may not learn from a module): the `PanelId` and its default group
+   order, storage and pref keys in `lib/panelLayout.ts`, its collapse flag in `lib/useRail.ts`
+   (`COLLAPSE`), and those keys in `lib/storage.ts`. The rail calls `useRail("<id>")` and hands what it
+   returns to `ui/FilterRail`; tsc names each table still missing the new id.
+
+What holds it: `moduleRegistry.contract.test.ts` (every id defined once, from its own folder, lazily),
+`moduleStores.contract.test.tsx` (no store reads another module), the `local/layers` lint rule (imports only go
+down, a module only through its face) and `chunkGuard` in the build (no lazy page on the boot path), plus the
+i18n parity test.
+
 ## The gate
 
 A change is done when this is green, from the repo root:
@@ -105,7 +131,7 @@ npm run lint          # eslint (typed rules included; warnings fail)
 npm run format:check  # prettier
 npm run knip          # unused files/exports/deps
 npm run test          # vitest (incl. the compiler and gate-register contracts)
-npx vite build        # the production bundle (devOnlyGuard fails it on dev-only code)
+npx vite build        # the production bundle (devOnlyGuard fails it on dev-only code, chunkGuard on a lazy page loaded at boot)
 npm audit --omit=dev --audit-level=high   # what ships to the browser, at high or above
 ```
 
diff --git a/docs/gates.md b/docs/gates.md
index effe4bcc..b0e23f5f 100644
--- a/docs/gates.md
+++ b/docs/gates.md
@@ -61,7 +61,8 @@ them itself (`no-undef`, `no-redeclare`, `no-dupe-keys`, …), nor the formattin
 | src tests · ui tests · lib tests | `local/literal-a11y-text`, `local/input-primitive`, `local/surface-role`, `local/glyph-link` — off | A test renders throwaway markup (a raw input as a focus target, an untranslated label) that is not product UI. `local/button-primitive` stays on: in a test file (and in a control primitive) it only refuses a raw `<button disabled>`, which drops focus there as anywhere. | — |
 | design-lab | `local/literal-a11y-text` — off | The dev-only design lab (never in the bundle — devOnlyGuard fails the build if it is) holds the owner's working copy, not product copy. | — |
 | e2e | `react-hooks/*`, `react-refresh/*`, `local/*`, `no-console`, `no-restricted-globals`, `no-restricted-properties`, `no-restricted-syntax` — not applied | Playwright specs drive a browser from Node: no React, no product UI, and they print to the console on purpose. They get the base + typed rules + the playwright rules. | — |
-| ts configs | `react-hooks/*`, `react-refresh/*`, `local/*`, `no-console`, `no-restricted-globals`, `no-restricted-properties`, `no-restricted-syntax` — not applied | The build configs (vite, vitest, playwright, reactPlugin, devOnlyGuard) run in Node at build time. | — |
+| ts configs · tool tests | `react-hooks/*`, `react-refresh/*`, `local/*`, `no-console`, `no-restricted-globals`, `no-restricted-properties`, `no-restricted-syntax` — not applied | The build configs (vite, vitest, playwright, reactPlugin, devOnlyGuard, chunkGuard) run in Node at build time. Their unit tests beside them (`tool tests`: `chunkGuard.test.ts`) are linted the same way, plus `vitest/no-focused-tests` and `vitest/no-disabled-tests`, since vitest runs them. | — |
+| src root tests · design-lab | `local/layers` — not applied (inside the rule: its `free` check, which the effective config cannot show) | The app-wide tests at `src/` root exercise a behaviour across modules (a write failure reported the same way in Plex and Files, the playlist editors' failures), so they render module-private components directly; the dev-only design lab shows every component. Neither ships. Every other layer, test or not, is held. | 3 imports of module-private files (`PlaylistEditFailures.dom.test.tsx` → `modules/plex/PlexPlaylistView`; `WriteFailureReporting.dom.test.tsx` → `modules/plex/PlexCollectionEditor`, `modules/files/UploadDialog`); design-lab 0 |
 | js configs | `@typescript-eslint/*`, `react-hooks/*`, `react-refresh/*`, `local/*`, `no-console`, `no-restricted-globals`, `no-restricted-properties`, `no-restricted-syntax`, `no-var`, `prefer-const`, `prefer-rest-params`, `prefer-spread`, `no-array-constructor`, `no-unused-expressions` — not applied | `eslint.config.js` and `postcss.config.js`: plain-JS build config, linted with `js.configs.recommended` only. | — |
 | repo scripts | `scripts/*.mjs` — not in the eslint or prettier lane; `js.configs.recommended` + Prettier via `src/lib/repoScripts.contract.test.ts` | They sit at the repo root, and an ESLint config cannot reach past its own directory. The contract test lints and format-checks them from the repo root, to the same bar as the `js configs` row; no typed rules, as they are in no tsc project. | 0 lint hits; 2 files reformatted (E32 review) |
 | everywhere | ignored paths: `dist`, `node_modules`, `playwright-report`, `test-results`, `e2e/.auth` | Build output, installed packages, test artefacts, a live Playwright session. Generated, not written. | — |
@@ -114,7 +115,7 @@ project checks needs a row.
 | CVE gate | HIGH/CRITICAL with a fix available only | `--ignore-unfixed` + `--severity HIGH,CRITICAL`: a finding with no fix cannot be acted on by an upgrade; it shows in the scan output. A fixable one fails the publish, and the only way past it is `.trivyignore.yaml`. | 0 open (E32 S1) |
 | npm audit | `--omit=dev --audit-level=high` | What ships to the browser, at high or above. The dev toolchain's advisories were burned down by hand in E32 S1 (18 → 0). | 0 |
 | knip | `entry` — one file added | Not a narrowing: knip's Vite plugin reads entries from index.html only, so the shared link's page (`watch.html` → `src/watchMain.tsx`) is named here, or the lane reports that whole entry unused. It adds files to the lane, never takes any out. | 1 entry |
-| React Compiler | the functions it skips, pinned | `components/compilerCoverage.contract.test.ts` — the list may only shrink. End state: only VirtualGrid (TanStack Virtual, an IncompatibleLibrary) remains. | 93 (E32 S1) → 29 (E32 S3) → 1, VirtualGrid (E32 S4) |
+| React Compiler | the functions it skips, pinned | `src/compilerCoverage.contract.test.ts` — the list may only shrink. End state: only VirtualGrid (TanStack Virtual, an IncompatibleLibrary) remains. | 93 (E32 S1) → 29 (E32 S3) → 1, VirtualGrid (E32 S4) |
 
 ## Accepted findings
 
diff --git a/frontend/chunkGuard.test.ts b/frontend/chunkGuard.test.ts
new file mode 100644
index 00000000..675363e1
--- /dev/null
+++ b/frontend/chunkGuard.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { bootLeaks, type ChunkLike } from "./chunkGuard";
+
+const APP = "/r/src/shell/App.tsx";
+const chunk = (fileName: string, moduleIds: string[], imports: string[] = [], isEntry = false) =>
+  ({ fileName, moduleIds, imports, isEntry }) satisfies ChunkLike;
+
+describe("a lazily imported module", () => {
+  const lazy = new Set([APP, "/r/src/modules/plex/PlexBrowse.tsx"]);
+
+  it("is a leak in the entry chunk, in a chunk the entry imports, or in the App chunk", () => {
+    const P = "/r/src/modules/plex/PlexBrowse.tsx";
+    for (const chunks of [
+      [chunk("index.js", ["/r/src/main.tsx", P], [], true)],
+      [chunk("index.js", ["/r/src/main.tsx"], ["shared.js"], true), chunk("shared.js", [P])],
+      [chunk("index.js", ["/r/src/main.tsx"], [], true), chunk("App.js", [APP, P])],
+      [
+        chunk("index.js", ["/r/src/main.tsx"], [], true),
+        chunk("App.js", [APP], ["s.js"]),
+        chunk("s.js", [P]),
+      ],
+    ])
+      expect(bootLeaks(chunks, lazy, "src/shell/App.tsx")).toEqual([
+        `${P} (${chunks[chunks.length - 1]!.fileName})`,
+      ]);
+  });
+
+  it("is not a leak in its own chunk, or in one only another lazy chunk loads — and App itself is lazy by design", () => {
+    const chunks = [
+      chunk("index.js", ["/r/src/main.tsx"], ["react.js"], true),
+      chunk("react.js", ["/r/node_modules/react/index.js"]),
+      chunk("App.js", [APP], ["react.js"]),
+      chunk("PlexBrowse.js", ["/r/src/modules/plex/PlexBrowse.tsx"], ["react.js"]),
+    ];
+    expect(bootLeaks(chunks, lazy, "src/shell/App.tsx")).toEqual([]);
+  });
+
+  it("is checked on Windows paths too", () => {
+    const win = "D:\\r\\src\\modules\\plex\\PlexBrowse.tsx";
+    const chunks = [chunk("index.js", ["D:\\r\\src\\main.tsx", win], [], true)];
+    expect(bootLeaks(chunks, new Set([win]), "src/shell/App.tsx")).toHaveLength(1);
+  });
+});
diff --git a/frontend/chunkGuard.ts b/frontend/chunkGuard.ts
new file mode 100644
index 00000000..102b4b93
--- /dev/null
+++ b/frontend/chunkGuard.ts
@@ -0,0 +1,73 @@
+import type { Plugin } from "vite";
+
+// A lazily imported page, rail, dialog or player must stay out of the chunks loaded at boot. A page
+// is imported with import()/lazy() so it is fetched only when it is opened, and Rollup honours that
+// only while nothing on the boot path imports the same module statically: one static import — a
+// module's index.ts re-exporting it is the easy way — and the module joins a boot chunk, the import()
+// becomes a no-op, and nothing says so. That rule used to be a hope; this makes it a build failure,
+// naming each module and the boot chunk it landed in. The boot path is the entry chunks and what they
+// import, plus the shell (App, itself loaded lazily but fetched at boot alongside the identity probe)
+// and what it imports.
+const SHELL = "src/shell/App.tsx";
+
+export interface ChunkLike {
+  fileName: string;
+  isEntry: boolean;
+  /** The chunks this one imports statically. */
+  imports: string[];
+  moduleIds: string[];
+}
+
+const posix = (id: string) => id.split("\\").join("/");
+
+/** Every lazily imported module (`lazy`: module ids) that sits in a boot chunk, as "id (chunk)". The
+ *  shell's own module (`shell`, a path under the project) is exempt: it is lazy so that the public
+ *  pages never load it, and its chunk is the shell. */
+export function bootLeaks(chunks: ChunkLike[], lazy: Set<string>, shell: string): string[] {
+  const byName = new Map(chunks.map((c) => [c.fileName, c]));
+  const isShell = (id: string) => posix(id).endsWith(`/${shell}`);
+  const boot = new Set<ChunkLike>();
+  const visit = (c: ChunkLike | undefined) => {
+    if (!c || boot.has(c)) return;
+    boot.add(c);
+    c.imports.forEach((name) => visit(byName.get(name)));
+  };
+  chunks.filter((c) => c.isEntry || c.moduleIds.some(isShell)).forEach(visit);
+  const leaks: string[] = [];
+  for (const c of boot)
+    for (const id of c.moduleIds)
+      if (lazy.has(id) && !isShell(id)) leaks.push(`${posix(id)} (${c.fileName})`);
+  return leaks.sort();
+}
+
+export function chunkGuard(): Plugin {
+  return {
+    name: "siftlode-chunk-guard",
+    apply: "build",
+    generateBundle(_options, bundle) {
+      const lazy = new Set(
+        [...this.getModuleIds()].filter(
+          (id) => (this.getModuleInfo(id)?.dynamicImporters.length ?? 0) > 0,
+        ),
+      );
+      const chunks: ChunkLike[] = Object.values(bundle).flatMap((o) =>
+        o.type === "chunk"
+          ? [
+              {
+                fileName: o.fileName,
+                isEntry: o.isEntry,
+                imports: o.imports,
+                moduleIds: o.moduleIds,
+              },
+            ]
+          : [],
+      );
+      const leaks = bootLeaks(chunks, lazy, SHELL);
+      if (leaks.length)
+        this.error(
+          `lazily imported, yet loaded at boot: ${leaks.join(", ")}. ` +
+            "Something on the boot path imports it statically (an index.ts re-export?): import it lazily there too, or not at all.",
+        );
+    },
+  };
+}
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index 39420b27..c54c2b96 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -7,6 +7,8 @@ import globals from "globals";
 import eslintComments from "@eslint-community/eslint-plugin-eslint-comments";
 import vitest from "@vitest/eslint-plugin";
 import playwright from "eslint-plugin-playwright";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 
 // Flat config (ESLint 9). Deliberately NARROW: the high-value rules here are react-hooks' (the
 // hook rules and the React Compiler's diagnostics). The 33 inline `exhaustive-deps` suppressions this
@@ -99,7 +101,8 @@ const localeFormat = {
     // is a clock face with its own 12/24h switch, not a date.
     const formats = /\/src\/lib\/(format|plexPlayerPrefs)\.ts$/.test(path);
     const collates = /\/src\/lib\/collate\.ts$/.test(path);
-    const component = /\/src\/components\//.test(path);
+    // Every folder that holds components (CLAUDE.md "Architecture shape"), not lib/ below them.
+    const component = /\/src\/(components|shell|modules|features|watch)\//.test(path);
     const importedFromI18n = (node) => {
       for (let scope = context.sourceCode.getScope(node); scope; scope = scope.upper) {
         const v = scope.set.get(node.name);
@@ -418,8 +421,105 @@ const glyphLink = {
     };
   },
 };
+// The app's layers (CLAUDE.md "Architecture shape"), bottom up: lib/ → components/ui/ → features/ →
+// modules/ → shell/. An import may go down, never up — with one door: a module's index.ts, its public
+// face, which features/ may read too (the module stores are mounted at the root and read app-wide).
+// Anything else of ANOTHER module is reached through that face, or lazily by import(), which is a
+// chunk boundary and so the way a page is opened. Measured on the import, resolved to its file, so
+// every spelling of a path is the same path. lib/ and ui/ keep their own `no-restricted-imports`
+// blocks below; this rule adds the folders above them.
+const SRC_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), "src");
+const RANK = { lib: 0, ui: 1, features: 2, modules: 3, shell: 4 };
+function placeOf(abs) {
+  const rel = path.relative(SRC_DIR, abs).split(path.sep).join("/");
+  if (rel.startsWith("..")) return null;
+  const parts = rel.replace(/\.(tsx?|jsx?)$/, "").split("/");
+  const [top, unit] = parts;
+  if (top === "lib") return { layer: "lib" };
+  if (top === "components") return unit === "ui" ? { layer: "ui" } : { layer: "other" };
+  if (top === "features" || top === "modules") {
+    // `modules/plex` and `modules/plex/index` are the unit's public face.
+    const face = parts.length === 2 || (parts.length === 3 && parts[2] === "index");
+    return { layer: top, unit, face };
+  }
+  if (top === "shell") return { layer: "shell" };
+  // main.tsx, watch/, i18n/, content/, design-lab/, the app-wide tests at the root. The two entries —
+  // the app's main.tsx and the shared /watch page (watch/ + watchMain.tsx) — sit above every layer.
+  const root = parts.length === 1;
+  const entry = top === "watch" || (root && (top === "main" || top === "watchMain"));
+  return { layer: "other", top: root ? "root" : top, entry };
+}
+const layers = {
+  meta: {
+    type: "problem",
+    messages: {
+      up: "{{from}} sits below {{to}}: it may not import from it (`{{spec}}`). Move the shared piece down, or take it as a prop.",
+      face: "`{{spec}}` is one of {{unit}}'s own files: reach another unit through its index.ts (its public face), or lazily with import().",
+      entry:
+        "`{{spec}}` is an entry (the app's main.tsx or the shared /watch page): no layer imports one, or the app and the /watch page stop being separable.",
+    },
+  },
+  create(context) {
+    const file = context.filename;
+    const from = placeOf(file);
+    // The dev-only lab and the app-wide tests at the root look at everything on purpose.
+    const free =
+      !from ||
+      (from.layer === "other" && from.top === "design-lab") ||
+      (from.layer === "other" && from.top === "root" && /\.test(kit)?\.|\.testkit\./.test(file));
+    const check = (node, spec, lazy) => {
+      if (free || typeof spec !== "string" || !spec.startsWith(".")) return;
+      const to = placeOf(path.resolve(path.dirname(file), spec));
+      if (!to) return;
+      if (to.layer === "other") {
+        if (to.entry && from.layer !== "other")
+          context.report({ node, messageId: "entry", data: { spec } });
+        return;
+      }
+      const fromRank = from.layer === "other" ? 5 : RANK[from.layer];
+      if (
+        to.layer === "shell" &&
+        from.layer !== "shell" &&
+        !(from.layer === "other" && from.top === "root")
+      )
+        return context.report({
+          node,
+          messageId: "up",
+          data: { from: from.layer, to: "shell", spec },
+        });
+      const door = to.layer === "modules" && (to.face || lazy) && from.layer === "features";
+      if (RANK[to.layer] > fromRank && !door)
+        return context.report({
+          node,
+          messageId: "up",
+          data: { from: from.layer, to: to.layer, spec },
+        });
+      const sameUnit = to.layer === from.layer && to.unit === from.unit;
+      if (to.layer === "modules" && !sameUnit && !to.face && !lazy)
+        context.report({ node, messageId: "face", data: { spec, unit: `modules/${to.unit}` } });
+    };
+    return {
+      ImportDeclaration: (n) => check(n.source, n.source.value, false),
+      ExportNamedDeclaration: (n) => n.source && check(n.source, n.source.value, false),
+      ExportAllDeclaration: (n) => check(n.source, n.source.value, false),
+      ImportExpression: (n) => {
+        // A template literal with nothing substituted is a plain path to TypeScript and Rollup too.
+        const s = n.source;
+        if (s.type === "Literal") check(s, s.value, true);
+        else if (s.type === "TemplateLiteral" && s.expressions.length === 0)
+          check(s, s.quasis[0].value.cooked, true);
+      },
+      TSImportType: (n) => {
+        const lit = n.argument?.literal ?? n.argument;
+        if (lit?.type === "Literal") check(lit, lit.value, false);
+      },
+    };
+  },
+};
+
 const localRules = {
   rules: {
+    layers,
     "glyph-link": glyphLink,
     "sortable-a11y": sortableA11y,
     "jsx-comment-text": jsxCommentText,
@@ -536,7 +636,7 @@ export default tseslint.config(
       // function the compiler skips over a suppression is caught by the coverage contract below.
       // `todo` does NOT see every such shape — a conditional, a loop
       // or an optional call inside a try skips the function with no lint hit at all — so the full
-      // per-function picture is components/compilerCoverage.contract.test.ts.
+      // per-function picture is src/compilerCoverage.contract.test.ts.
       "react-hooks/todo": "error",
       "react-hooks/memo-dependencies": "error",
       "react-hooks/invariant": "error",
@@ -566,6 +666,7 @@ export default tseslint.config(
       "local/literal-a11y-text": "error",
       "local/glyph-link": "error",
       "local/sortable-a11y": "error",
+      "local/layers": "error",
       "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
       // tsc already enforces these under strict + noUnusedLocals/Parameters — let it own them so a
       // finding is reported once, by one tool, and this config stays about hooks + refresh safety.
@@ -760,7 +861,14 @@ export default tseslint.config(
     // Outside src: the e2e suite and the TypeScript build-tool configs went unlinted — the
     // flat config named only src/**, so `eslint .` skipped them without a word. The same base and
     // typed rules as the app; Node globals, since none of it runs in the browser.
-    files: ["e2e/**/*.ts", "*.config.ts", "reactPlugin.ts", "devOnlyGuard.ts"],
+    files: [
+      "e2e/**/*.ts",
+      "*.config.ts",
+      "reactPlugin.ts",
+      "devOnlyGuard.ts",
+      "chunkGuard.ts",
+      "chunkGuard.test.ts",
+    ],
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     languageOptions: {
       ecmaVersion: 2022,
@@ -775,6 +883,16 @@ export default tseslint.config(
       "no-undef": "off",
     },
   },
+  {
+    // The unit tests of the build tools beside them (chunkGuard's): vitest runs them, so a stray
+    // `.only` / `.skip` there is the same silent skip as in src.
+    files: ["*.test.ts"],
+    plugins: { vitest },
+    rules: {
+      "vitest/no-focused-tests": "error",
+      "vitest/no-disabled-tests": "error",
+    },
+  },
   {
     files: ["e2e/**/*.ts"],
     plugins: { playwright },
diff --git a/frontend/reactPlugin.ts b/frontend/reactPlugin.ts
index a85a2219..cfdbfae9 100644
--- a/frontend/reactPlugin.ts
+++ b/frontend/reactPlugin.ts
@@ -15,7 +15,7 @@ import reactCompiler from "babel-plugin-react-compiler";
 // there is no logger here, so a skipped component still works and simply re-renders everything under
 // it. This comment used to say "its rules are also linted"; it was false while `react-hooks/refs` was
 // off, and 95 functions sat uncompiled behind it. What actually holds the line now is
-// src/components/compilerCoverage.contract.test.ts, which runs THIS compiler over the shipped source
+// src/compilerCoverage.contract.test.ts, which runs THIS compiler over the shipped source
 // and fails on any skip not on its list; the react-hooks lint rules are the early warning. None of
 // them is off (three run at the preset's warn, which `--max-warnings 0` fails — docs/gates.md), but
 // three of the compiler's diagnostics cannot report under the installed plugin (eslint.config.js
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
deleted file mode 100644
index c0d3709c..00000000
--- a/frontend/src/App.tsx
+++ /dev/null
@@ -1,499 +0,0 @@
-import { lazy, Suspense, useEffect, useRef, useState } from "react";
-import { qk } from "./lib/queryKeys";
-import { saveLanguage } from "./lib/saveLanguage";
-import { useTranslation } from "react-i18next";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { api, setUnauthorizedHandler, type Me } from "./lib/api";
-import { notifyActionError } from "./lib/actionErrors";
-import { setLanguage, type LangCode } from "./i18n";
-import { clearParams } from "./lib/urlState";
-import { reloadAfterRefusal } from "./lib/entryUrl";
-import { useAccountSwitchNotice } from "./lib/useAccountSwitchNotice";
-import {
-  PREF_KEY,
-  saveLayoutLocal,
-  seedLayout,
-  type PanelId,
-  type PanelLayout,
-} from "./lib/panelLayout";
-import { notify, removeByMetaKind } from "./lib/notifications";
-import { LS } from "./lib/storage";
-import { usePref } from "./lib/usePref";
-import { useVerifyEntry } from "./lib/useVerifyEntry";
-import { useNavigation, useNavigationActions } from "./components/navigationContext";
-import { useFeedFilters, useFeedFiltersActions } from "./components/feedFiltersContext";
-import { useFeedView, useFeedViewActions } from "./components/feedViewContext";
-import { moduleOrder } from "./lib/modules";
-import { PAGE_CONTENT, PAGE_RAIL, preloadPages } from "./components/moduleRegistry";
-import { lazyWithPreload } from "./lib/lazyWithPreload";
-import { LoadingState } from "./components/ui/QueryState";
-// Persistent shell — always mounted, so eagerly imported.
-import Welcome from "./components/Welcome";
-import SetupWizard from "./components/SetupWizard";
-import Header from "./components/Header";
-import NavSidebar from "./components/NavSidebar";
-import BackToTop from "./components/ui/BackToTop";
-import PageShell from "./components/ui/PageShell";
-import { SkipLink } from "./components/ui/SkipLink";
-import { pageTitleKey } from "./lib/pageMeta";
-import DebugRecorder from "./components/DebugRecorder";
-import Toaster from "./components/ui/Toaster";
-import KeyboardHelp from "./components/ui/KeyboardHelp";
-import AppCommandPalette from "./components/AppCommandPalette";
-import DownloadIntake from "./components/DownloadIntake";
-import DownloadTray from "./components/DownloadTray";
-import { useGlobalKeymap } from "./lib/keymap";
-import ErrorDialog from "./components/ErrorDialog";
-import VersionBanner from "./components/VersionBanner";
-import VerifyBanner from "./components/VerifyBanner";
-import { focusAccessRequestsTab } from "./lib/adminUsersTab";
-import { focusSettingsTab } from "./lib/settingsTab";
-// The built app version, NOT imported from releaseNotes — importing anything from that module
-// pulls the release-notes loader into the eager App chunk and defeats the lazy ReleaseNotes
-// split. FRONTEND_VERSION equals the newest release note's version by release convention (both bump together).
-import { FRONTEND_VERSION } from "./lib/version";
-import { applyDiagnostics } from "./lib/diagnostics";
-
-// The page modules (and their side rails) are code-split per route via the module registry
-// (components/moduleRegistry). App keeps only the persistent-shell chunks + the channel page and the
-// two modals, which sit outside the registry-driven content column.
-const ChannelPage = lazyWithPreload(() => import("./components/ChannelPage"));
-const About = lazy(() => import("./components/About"));
-const ReleaseNotes = lazy(() => import("./components/ReleaseNotes"));
-
-export default function App() {
-  const { t, i18n } = useTranslation();
-  const { page, channelView, ytSearch } = useNavigation();
-  const { setPage, enterYtSearch } = useNavigationActions();
-  // An emailed verification link is confirmed HERE, above the signed-in/signed-out branch below, so
-  // it works in a browser that already holds a session. It used to be handled inside Welcome, which
-  // that branch never renders when signed in — the token was silently dropped. Signed out, the
-  // outcome goes to the auth card's banners; signed in, to the top-of-app bar.
-  const verifyEntry = useVerifyEntry();
-  // The global feed filters live in FeedFiltersProvider (per-account persistence + the account-load
-  // effect + share-link capture all moved there). App reads them to hand to <Feed> and to the
-  // handlers that mutate the feed view (onShowInFeed, tag-click, the feed scrollKey).
-  const filters = useFeedFilters();
-  const { setFilters } = useFeedFiltersActions();
-  // The feed's view mode (card/row/tile density) lives in FeedViewProvider — server-synced, shared
-  // by the feed page and the channel page. App reads it only to hand to <Feed>/<ChannelPage>.
-  const view = useFeedView();
-  const { setView } = useFeedViewActions();
-  const queryClient = useQueryClient();
-  // Per-panel "customize" layouts (order/collapsed/hidden of each side panel's group cards),
-  // persisted per-account. One record so feed/plex/playlists share the same mechanism. Seeded from
-  // the account's server preferences — BootGate mounts App only once `me` is cached — so a layout
-  // changed on another device is right on the first paint; the local copy covers a key the server
-  // has never stored.
-  const [panelLayouts, setPanelLayouts] = useState<Record<PanelId, PanelLayout>>(() => {
-    const prefs = queryClient.getQueryData<Me | null>(qk.me())?.preferences;
-    return {
-      feed: seedLayout("feed", prefs),
-      plex: seedLayout("plex", prefs),
-      playlists: seedLayout("playlists", prefs),
-      files: seedLayout("files", prefs),
-    };
-  });
-  const [aboutOpen, setAboutOpen] = useState(false);
-  const [notesOpen, setNotesOpen] = useState(false);
-  const [notesHighlight, setNotesHighlight] = useState<string | undefined>(undefined);
-
-  function openReleaseNotes(highlight?: string) {
-    setNotesHighlight(highlight);
-    setNotesOpen(true);
-  }
-
-  function setPanelLayout(panel: PanelId, next: PanelLayout) {
-    setPanelLayouts((prev) => ({ ...prev, [panel]: next }));
-    saveLayoutLocal(panel, next);
-    api
-      .savePrefs({ [PREF_KEY[panel]]: next })
-      .catch((e: unknown) => notifyActionError(e, t("errors.writeFailed.prefs")));
-  }
-
-  // Collapse state for the two full-height panels (left nav + filter sidebar). Persisted to the
-  // user's preferences (via usePref) so it follows the account across devices, seeded from the `me`
-  // cache at mount; the localStorage mirror covers an account whose server prefs never stored it.
-  // Default unpinned (tab + hover-expand overlay); accounts that explicitly pin keep their choice.
-  const [filterCollapsed, setFilterCollapsed] = usePref<boolean>("filterCollapsed", true, {
-    localKey: LS.filterCollapsed,
-    parse: Boolean,
-  });
-  // The Playlists rail has its own collapse flag (it's a list/navigator, not filters).
-  const [playlistsCollapsed, setPlaylistsCollapsed] = usePref<boolean>("playlistsCollapsed", true, {
-    localKey: LS.playlistsCollapsed,
-    parse: Boolean,
-  });
-  // The Files rail is the library's folder list — how you move around it, not a filter you set once —
-  // so it starts pinned open (the owner's mockup), and has its own flag.
-  const [filesCollapsed, setFilesCollapsed] = usePref<boolean>("filesCollapsed", false, {
-    localKey: LS.filesCollapsed,
-    parse: Boolean,
-  });
-  const railCollapse = {
-    filter: [filterCollapsed, setFilterCollapsed],
-    playlists: [playlistsCollapsed, setPlaylistsCollapsed],
-    files: [filesCollapsed, setFilesCollapsed],
-  } as const;
-  // (The feed filters + page/channel now LIVE in the address bar — FeedFiltersProvider and
-  // NavigationProvider read them on load and keep them mirrored — so there's no query to strip here.)
-
-  // Passive observers (enabled:false) of the setup-status and `me` queries BootGate fetches, polls
-  // and waits for: App mounts only once both have answered, so their caches are always populated here.
-  const setupQuery = useQuery({
-    queryKey: qk.setupStatus(),
-    queryFn: api.setupStatus,
-    enabled: false,
-  });
-  const needsSetup = setupQuery.data?.configured === false;
-  const meQuery = useQuery({ queryKey: qk.me(), queryFn: api.me, enabled: false });
-  // The signed-in account, or null/undefined while signed out. Hoisted here because half a dozen
-  // effects below depend on it, and a dep list is only honest if it names the value the body reads.
-  const me = meQuery.data;
-
-  // The `global` key scope: `h` opens the cheat sheet, Mod+K the jump-to palette, Shift+W jumps to
-  // Home ("mit nézzek?"). Bound only once signed in, because that is where the overlays are mounted
-  // (bottom of this tree) and where the modules exist at all — see useGlobalKeymap on why binding it
-  // above the signed-out branch is worse than not binding it.
-  // A global key can fire while an overlay is open; `setPage` closes every overlay before it pushes,
-  // so Shift+W over the player lands on Home with the player closed — also when Home is already the
-  // page underneath (owner decision 2026-09-09: the key always ends with the answer on screen).
-  // The `page` scope rides the same binding: the `g` chords jump to a module, but only to one this
-  // account can reach (the nav rail's own list, plus Settings, which is not in the rail's order).
-  useGlobalKeymap(!!me, setPage, me ? [...moduleOrder(me), "settings"] : []);
-
-  // The account's consented diagnostics level, applied to this tab's log: raised, the log is
-  // kept in more detail and streamed to the server until the level lapses. A debug session that is
-  // recording raises it for its own run and tags what it keeps. A lapse (its own timer, or the
-  // server saying it is off) refetches `me`, so Settings and the recorder show what is in force.
-  // Re-running this on every `me` refetch is FREE and therefore the deps are the honest ones:
-  // applyDiagnostics computes an effective-level key and returns early when it has not moved
-  // (lib/diagnostics.ts), so an unchanged level is a no-op. It does refresh the `lapsed` callback
-  // before that early return, which is the half we WANT re-run. The old dep list picked out four
-  // primitive fields to dodge the fresh object identity a refetch produces; that is the checker's
-  // job to verify, not a comment's to assert, and it silently missed any other field the module
-  // may come to read.
-  const diagnostics = me?.diagnostics;
-  const debugSession = me?.debug_session;
-  useEffect(() => {
-    applyDiagnostics(
-      diagnostics,
-      debugSession,
-      () => void queryClient.invalidateQueries({ queryKey: qk.me() }),
-    );
-  }, [diagnostics, debugSession, queryClient]);
-
-  // Fetch the code of every module this account can open — and the channel page — once the first page
-  // is on screen, so a module's first visit renders at once instead of flashing the chunk fallback.
-  // Idle-scheduled so it never competes with the first page's own requests (Safari has no
-  // requestIdleCallback, hence the timer).
-  // Depending on the whole `me` rather than its id is both honest and MORE correct: the module set
-  // is derived from `me` through each module's own gate (lib/modules moduleOrder), so a permission
-  // change — an admin grant, a Plex server appearing — alters it without the id moving, and the old
-  // `[me.id]` dep never re-preloaded for those. Re-running costs nothing: `preload()` is idempotent
-  // (lazyWithPreload memoises the pending promise), so a refetch that changes nothing fetches
-  // nothing; only the idle callback is re-scheduled.
-  useEffect(() => {
-    if (!me) return;
-    const run = () => {
-      preloadPages([...moduleOrder(me), "settings"]);
-      ChannelPage.preload().catch(() => {});
-    };
-    const idle = window.requestIdleCallback as typeof window.requestIdleCallback | undefined;
-    if (idle) {
-      const id = idle(run, { timeout: 3000 });
-      return () => window.cancelIdleCallback(id);
-    }
-    const id = window.setTimeout(run, 1000);
-    return () => window.clearTimeout(id);
-  }, [me]);
-
-  // Measure the scrollbar's gutter width once and publish it as --sbw, so the floating header and the
-  // toolbar band can pad their right edge to line up with the scrolled cards (the app scroller reserves
-  // that gutter via scrollbar-gutter: stable). It's a device constant, so a one-shot mount measure is enough.
-  useEffect(() => {
-    const probe = document.createElement("div");
-    probe.style.cssText =
-      "position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;scrollbar-gutter:stable";
-    document.body.appendChild(probe);
-    const w = probe.offsetWidth - probe.clientWidth;
-    document.body.removeChild(probe);
-    document.documentElement.style.setProperty("--sbw", `${w}px`);
-  }, []);
-
-  // Once signed in, drop any leftover ONE-TIME query params from the pre-login flow (?access, ?verify,
-  // ?reset) — but NOT the nav/filter params, which the logged-in app now reads from and keeps in the
-  // URL. Gated on auth so the logged-out Welcome page still reads its params first.
-  // Keyed on "is there a session at all", which is the whole condition the body tests. Re-running
-  // on an account switch was never the point — by then the params are already gone and a second
-  // clearParams is a no-op.
-  const signedIn = !!me;
-  useEffect(() => {
-    if (signedIn) clearParams("access", "verify", "reset");
-  }, [signedIn]);
-
-  // A sign-in as someone else that the server refused, or a reload as another account: say so, once.
-  useAccountSwitchNotice(signedIn);
-
-  // Any request that 401s means the session ended server-side. If we were signed in (cached
-  // `me` is a user object), reload to the login page at once (also covers any click that hits
-  // the API). Guarded on a cached user so a stray 401 while logged out (cached `me` is null)
-  // can't loop the public landing. A tab showing another account than the one signed in now
-  // reloads as that one instead, and says why (`reloadAfterRefusal`).
-  useEffect(() => {
-    setUnauthorizedHandler((err) => {
-      if (!queryClient.getQueryData(qk.me())) return;
-      queryClient.clear();
-      reloadAfterRefusal(err);
-    });
-    return () => setUnauthorizedHandler(null);
-  }, [queryClient]);
-
-  // Returning from an in-app Google link/upgrade round-trip (auth.py redirects to ?link=…).
-  // Surface the outcome, refresh `me` (can_read/can_write/has_google may have flipped), land on
-  // Settings → Account so the new state is visible, then strip the param for a clean URL.
-  // "Exactly once per mount" is now ENFORCED by the ref rather than asserted by an empty dep list:
-  // `t` changes identity on a language switch, so the honest dep list would otherwise re-fire the
-  // toast when the user changes language. (The old `[]` got away with it only because clearParams
-  // had already removed the param — an invariant held by a side effect two lines further down.)
-  const linkAnswered = useRef(false);
-  const { refetch: refetchMe } = meQuery;
-  useEffect(() => {
-    if (linkAnswered.current) return;
-    const result = new URLSearchParams(window.location.search).get("link");
-    if (!result) return;
-    linkAnswered.current = true;
-    if (result === "ok") {
-      notify({ level: "success", message: t("settings.account.googleLink.linked") });
-      void refetchMe();
-      focusSettingsTab("account");
-      setPage("settings");
-    } else {
-      const key = result === "conflict" || result === "mismatch" ? result : "error";
-      notify({ level: "error", message: t(`settings.account.googleLink.${key}`) });
-    }
-    clearParams("link");
-  }, [t, setPage, refetchMe]);
-
-  // A Google OAuth flow started while already signed in (signing in as someone else, or a Google
-  // connect) was cancelled at Google's consent screen. The backend only emits this for a live session, so a
-  // neutral toast is the right feedback — the pre-auth login banner would never render here.
-  // Same one-shot shape as the `?link=` handler above, same reason for the ref.
-  const oauthAnswered = useRef(false);
-  useEffect(() => {
-    if (oauthAnswered.current) return;
-    if (new URLSearchParams(window.location.search).get("oauth") !== "cancelled") return;
-    oauthAnswered.current = true;
-    notify({ level: "info", message: t("settings.account.googleCancelled") });
-    clearParams("oauth");
-  }, [t]);
-
-  // Deep-link from the "new access request" admin email (?admin=access-requests) → jump straight to
-  // the admin Users → Access requests view. Snapshot the param up front (read once at mount); act once
-  // `me` is known, and only for an admin (others just land on their default page).
-  const [adminDeepLink] = useState(() => new URLSearchParams(window.location.search).get("admin"));
-  // Ref-guarded like the two above, and here it closes a real hole rather than only satisfying the
-  // checker: the snapshot lives for the whole session, so with honest deps a later role change —
-  // or any `me` refetch, under the old id-only key — would yank the user to Users long after the
-  // deep link was answered.
-  const adminDeepLinkAnswered = useRef(false);
-  useEffect(() => {
-    if (adminDeepLinkAnswered.current) return;
-    if (adminDeepLink !== "access-requests" || !me) return;
-    adminDeepLinkAnswered.current = true;
-    if (me.role === "admin") {
-      focusAccessRequestsTab();
-      setPage("users");
-    }
-    clearParams("admin");
-  }, [adminDeepLink, me, setPage]);
-
-  // Nudge admins when access requests are waiting (in lieu of a server-push bell). Keyed on the
-  // pending COUNT so it re-resolves the moment an approval/denial changes it — not only on a
-  // fresh load (which is why the notice used to linger until F5 after an approval).
-  // Honest deps, and `t` among them is a fix rather than a concession: the nudge is a persisted
-  // toast whose text is translated at issue time, so a language switch must re-issue it. It did not
-  // before — the notice stayed in the old language until the count changed.
-  const role = me?.role;
-  const pendingInvites = me?.pending_invites ?? 0;
-  const pendingActivations = me?.pending_activations ?? 0;
-  useEffect(() => {
-    if (role !== "admin") return;
-    // Keep a single, current nudge: drop any prior one (persisted copies reload as dismissed
-    // history, so they'd otherwise pile up one-per-reload) before re-issuing the live notice.
-    removeByMetaKind("access-requests");
-    // Both kinds of "someone is waiting on you": a request needing a decision, and a sign-up whose
-    // address was approved before they registered. The second used to produce NO signal at all —
-    // nothing lands in the queue for it — which is how the 2026-09-03 registrant went unnoticed.
-    const pending = pendingInvites + pendingActivations;
-    if (pending > 0) {
-      notify({
-        level: "warning",
-        title: t("common.accessRequestsTitle"),
-        message: t("common.accessRequestsMessage", { count: pending }),
-        // Durable inbox link (survives reload, unlike a live action callback); the toast also
-        // gets a click via the action.
-        meta: { kind: "access-requests" },
-        action: {
-          label: t("common.accessRequestsReview"),
-          onClick: () => {
-            focusAccessRequestsTab();
-            // Clicked inside whatever overlay hosts the toast; setPage closes it before pushing.
-            setPage("users");
-          },
-        },
-      });
-    }
-  }, [role, pendingInvites, pendingActivations, t, setPage]);
-
-  // Language is edited outside the Settings page (sidebar/login), so it stays instant.
-  function changeLanguage(code: LangCode) {
-    setLanguage(code);
-    // Also from the signed-out login page, where the save 401s — `req` marks that as handled, so
-    // the reporter stays quiet there.
-    saveLanguage(queryClient, code).catch((e: unknown) =>
-      notifyActionError(e, t("errors.writeFailed.prefs")),
-    );
-  }
-
-  // First-run: a fresh instance is in setup mode (all other routes are locked) → show the wizard.
-  if (needsSetup) return <SetupWizard />;
-  // /api/me answers 200 always (null body = logged out), and BootGate has already handled a failed
-  // probe — so no data here means "not signed in" → the public landing.
-  if (!me) return <Welcome verify={verifyEntry} />;
-
-  // Shown while a page's chunk is still on its way: only if its visit beats the preload above (or the
-  // preload failed), and like every loading state it stays invisible for a load that is quick anyway.
-  const pageFallback = <LoadingState className="flex-1 justify-center" />;
-
-  // Scroll restore/reset key for the shared normal-page scroller (see PageScroller): the same
-  // page/feed-filters returns you to where you were (bug 1); a changed feed filter is a new key, so
-  // the fresh result set starts at the top (bug 3). `q` is normalised out so typing in the search
-  // box doesn't reset the scroll on every keystroke; the live-YouTube sub-view gets its own key.
-  const normalScrollKey =
-    page !== "feed"
-      ? `page:${page}`
-      : ytSearch != null
-        ? `yt:${ytSearch}`
-        : `feed:${JSON.stringify({ ...filters, q: "" })}`;
-
-  // The module registry drives the render from `page` alone — no per-page chrome conditionals. A page
-  // the account can't reach never gets here: the navigation state already moved it to the feed
-  // (`reachablePage`). A channel page overlays the content column, so no side rail shows behind it.
-  const { Component: PageContent, maxWidth } = PAGE_CONTENT[page];
-  const railDef = channelView ? undefined : PAGE_RAIL[page];
-
-  return (
-    <div className="h-dvh flex text-fg">
-      <SkipLink label={t("nav.skipToContent")} />
-      <NavSidebar
-        me={me!}
-        onOpenAbout={() => setAboutOpen(true)}
-        onChangeLanguage={changeLanguage}
-        language={i18n.language as LangCode}
-      />
-      {/* The active page's side rail (feed filters / plex filters / playlists list), if it has one.
-          A floating collapsible column beside the nav rail; hidden while a channel page overlays the
-          content. feed + plex share the filter-rail collapse flag, playlists and files have their own. */}
-      {railDef && (
-        <Suspense fallback={null}>
-          <railDef.Rail
-            layout={panelLayouts[railDef.panelId]}
-            setLayout={(l) => setPanelLayout(railDef.panelId, l)}
-            collapsed={railCollapse[railDef.collapse][0]}
-            onToggleCollapse={() => {
-              const [collapsed, setCollapsed] = railCollapse[railDef.collapse];
-              setCollapsed(!collapsed);
-            }}
-          />
-        </Suspense>
-      )}
-      {/* `@container/appmain`: the floating header + its search box adapt to THIS column's width
-          (which shrinks when the filter sidebar is open), not the viewport — a viewport breakpoint
-          can't see the sidebar-driven narrowing. NB: `container-type: inline-size` implies
-          `contain: layout`, making this column a containing block for `position: fixed` descendants
-          too — safe today because floating-ui menus render via FloatingPortal (to document.body) and
-          the toasts below are absolute; keep any new fixed overlay inside here body-portalled. */}
-      <div className="@container/appmain relative flex-1 min-w-0 flex flex-col">
-        {channelView ? (
-          <PageShell scrollKey={`channel:${channelView.id}`}>
-            <Suspense fallback={pageFallback}>
-              <ChannelPage
-                key={channelView.id}
-                channelId={channelView.id}
-                initialName={channelView.name}
-                me={me!}
-                view={view}
-                setView={setView}
-                onShowInFeed={() => {
-                  // Keep the rest of the feed's filters — the point is "this channel, the way I
-                  // normally read": unwatched, my tags, my date window.
-                  // ADD to the picked set, don't replace it: channels OR together now, so arriving
-                  // from a second channel page should widen the feed, not silently drop the first.
-                  // Deduped — clicking it again for a channel already picked is a no-op.
-                  setFilters({
-                    ...filters,
-                    channelIds: [...new Set([...filters.channelIds, channelView.id])],
-                  });
-                  // setPage already leaves an open channel page and pushes a clean history entry.
-                  // Calling closeChannel() first ran history.back(), whose popstate landed AFTER this
-                  // and restored whatever page the channel had been opened from.
-                  setPage("feed");
-                }}
-              />
-            </Suspense>
-          </PageShell>
-        ) : (
-          <PageShell
-            title={t(pageTitleKey(page))}
-            scrollKey={normalScrollKey}
-            maxWidth={maxWidth}
-            header={<Header me={me!} onYtSearch={enterYtSearch} />}
-            banners={
-              <>
-                <VerifyBanner entry={verifyEntry} />
-                <VersionBanner onOpen={() => openReleaseNotes(FRONTEND_VERSION)} />
-              </>
-            }
-          >
-            <Suspense fallback={pageFallback}>
-              <PageContent />
-            </Suspense>
-          </PageShell>
-        )}
-        {/* Toasts rise from the bottom-left, by the notification bell in the nav rail.
-            Anchored inside the content column so they clear the sidebar automatically
-            (collapsed or expanded) without tracking its width. */}
-        <Toaster />
-        {/* The running downloads, bottom-right in the same column (the toasts keep the left). */}
-        <DownloadTray />
-      </div>
-      {/* The two app-wide overlays: the keyboard cheat sheet (`h`) and the jump-to palette (Mod+K).
-          Mounted once, outside the page area, so every surface answers "what can I press here" and
-          "take me to X" the same way. Their keys are bound by useGlobalKeymap above. */}
-      <KeyboardHelp />
-      <AppCommandPalette />
-      {/* The one download dialog: the Files link box, a link pasted onto any page, the palette. */}
-      <DownloadIntake />
-      {/* The debug recorder: its start dialog, and its pill docked under the toasts. */}
-      {me && <DebugRecorder />}
-      <Suspense fallback={null}>
-        {aboutOpen && (
-          <About
-            onClose={() => setAboutOpen(false)}
-            onOpenReleaseNotes={() => {
-              setAboutOpen(false);
-              openReleaseNotes();
-            }}
-          />
-        )}
-        {notesOpen && (
-          <ReleaseNotes onClose={() => setNotesOpen(false)} highlight={notesHighlight} />
-        )}
-      </Suspense>
-      <ErrorDialog />
-      {/* Re-binds to the active page's scroll container on navigation (page or channel change). */}
-      <BackToTop dep={channelView ? `chan:${channelView.id}` : page} />
-    </div>
-  );
-}
diff --git a/frontend/src/components/PlaylistEditFailures.dom.test.tsx b/frontend/src/PlaylistEditFailures.dom.test.tsx
similarity index 95%
rename from frontend/src/components/PlaylistEditFailures.dom.test.tsx
rename to frontend/src/PlaylistEditFailures.dom.test.tsx
index 0a5605c6..8a2f42be 100644
--- a/frontend/src/components/PlaylistEditFailures.dom.test.tsx
+++ b/frontend/src/PlaylistEditFailures.dom.test.tsx
@@ -20,20 +20,20 @@ vi.mock("react-i18next", async (importOriginal) => {
     }),
   };
 });
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("./components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
 const { notify } = vi.hoisted(() => ({
   notify: vi.fn((_n: { level: string; message: string }) => 0),
 }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("./lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./lib/notifications")>()),
   notify,
 }));
 
-import PlexPlaylistView from "./PlexPlaylistView";
-import AddToPlaylist, { AddToPlaylistAt } from "./AddToPlaylist";
-import PlexPlaylistAdd from "./PlexPlaylistAdd";
-import TagManager from "./TagManager";
-import { api, HttpError, type PlexCard } from "../lib/api";
+import PlexPlaylistView from "./modules/plex/PlexPlaylistView";
+import AddToPlaylist, { AddToPlaylistAt } from "./features/video/AddToPlaylist";
+import PlexPlaylistAdd from "./features/plexCards/PlexPlaylistAdd";
+import TagManager from "./features/channel/TagManager";
+import { api, HttpError, type PlexCard } from "./lib/api";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/WriteFailureReporting.dom.test.tsx b/frontend/src/WriteFailureReporting.dom.test.tsx
similarity index 93%
rename from frontend/src/components/WriteFailureReporting.dom.test.tsx
rename to frontend/src/WriteFailureReporting.dom.test.tsx
index 1037abf7..abffcd22 100644
--- a/frontend/src/components/WriteFailureReporting.dom.test.tsx
+++ b/frontend/src/WriteFailureReporting.dom.test.tsx
@@ -17,19 +17,19 @@ vi.mock("react-i18next", async (importOriginal) => {
     useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
   };
 });
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("./components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
 const { notify } = vi.hoisted(() => ({
   notify: vi.fn((_n: { level: string; title?: string; message: string }) => 0),
 }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("./lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./lib/notifications")>()),
   notify,
 }));
 
-import PlexCollectionEditor from "./PlexCollectionEditor";
-import UploadDialog from "./UploadDialog";
-import DownloadDialog from "./DownloadDialog";
-import { api, HttpError } from "../lib/api";
+import PlexCollectionEditor from "./modules/plex/PlexCollectionEditor";
+import UploadDialog from "./modules/files/UploadDialog";
+import DownloadDialog from "./features/downloads/DownloadDialog";
+import { api, HttpError } from "./lib/api";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/compilerCoverage.contract.test.ts b/frontend/src/compilerCoverage.contract.test.ts
similarity index 96%
rename from frontend/src/components/compilerCoverage.contract.test.ts
rename to frontend/src/compilerCoverage.contract.test.ts
index 9c30c0fb..9d63722e 100644
--- a/frontend/src/components/compilerCoverage.contract.test.ts
+++ b/frontend/src/compilerCoverage.contract.test.ts
@@ -26,15 +26,15 @@ const KNOWN_SKIPS: CompileReport["skipped"] = {
 // The files a regression hurt most: compiled, and they must stay so (a positive check too, so a
 // harness that compiled nothing could not pass as "no skips").
 const MUST_COMPILE: Record<string, string[]> = {
-  "components/Channels.tsx": ["Channels"],
+  "modules/channels/Channels.tsx": ["Channels"],
   "components/ui/DataTable.tsx": ["DataTable"],
   // Under every button and every popover in the app.
   "components/ui/FocusSafeButton.tsx": ["FocusSafeButton"],
   "components/ui/anchoredPopoverHooks.ts": ["useAnchoredPopover"],
   "components/ui/AnchoredPopover.tsx": ["PopoverSurfaceInner"],
   // The two players — the largest components here, and the last to compile.
-  "components/PlexPlayer.tsx": ["PlexPlayer"],
-  "components/PlayerModal.tsx": ["PlayerModal"],
+  "modules/plex/PlexPlayer.tsx": ["PlexPlayer"],
+  "features/player/PlayerModal.tsx": ["PlayerModal"],
   "lib/playerModalHooks.ts": ["useYtProgress"],
 };
 
diff --git a/frontend/src/components/compilerSkips.testkit.ts b/frontend/src/compilerSkips.testkit.ts
similarity index 99%
rename from frontend/src/components/compilerSkips.testkit.ts
rename to frontend/src/compilerSkips.testkit.ts
index d42731e3..7d9d982b 100644
--- a/frontend/src/components/compilerSkips.testkit.ts
+++ b/frontend/src/compilerSkips.testkit.ts
@@ -7,7 +7,7 @@ import reactCompiler from "babel-plugin-react-compiler";
 // word (`panicThreshold` is "none" and the build has no logger), so this is the only place a skip is
 // visible at all. Used by compilerCoverage.contract.test.ts.
 
-const SRC = new URL("../", import.meta.url);
+const SRC = new URL("./", import.meta.url);
 
 /** Every file the production build compiles: src, minus tests and test kits. */
 export function shippedSources(): string[] {
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
deleted file mode 100644
index d9f0c154..00000000
--- a/frontend/src/components/Header.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { forwardRef, type ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import { YouTubeIcon } from "../lib/brandIcons";
-import type { Me } from "../lib/api";
-import SearchBar from "./SearchBar";
-import { useFiles, useFilesActions } from "./filesContext";
-import PlexSearchBox from "./PlexSearchBox";
-import PlexScopeToggle from "./PlexScopeToggle";
-import PlexViewToggle from "./PlexViewToggle";
-import FeedScopeToggle from "./FeedScopeToggle";
-import SyncStatus from "./SyncStatus";
-import { useNavigation } from "./navigationContext";
-import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
-import { usePlaylists, usePlaylistsActions } from "./playlistsContext";
-import { useChannels, useChannelsActions } from "./channelsContext";
-import { PaletteLauncher } from "./PaletteLauncher";
-
-// The floating top header: a row of glass pills over the content — the module's SearchBar where it
-// has one, and the per-user sync chip at the right end.
-// `forwardRef` so PageShell can attach a ref to the header's root box and measure its real (possibly
-// wrapped) height — that measurement + the `--hdr-h` content pad it drives live in PageShell, which
-// owns both the header slot and the padded content wrapper.
-const Header = forwardRef<
-  HTMLDivElement,
-  {
-    me: Me;
-    // Trigger a live YouTube search for the current term (feed only).
-    onYtSearch: (q: string) => void;
-  }
->(function Header({ me, onYtSearch }, ref) {
-  const { t } = useTranslation();
-  const { page } = useNavigation();
-  const filters = useFeedFilters();
-  const { setFilters } = useFeedFiltersActions();
-  // Each module's search term lives in its own provider (shared with that module's rail/content):
-  // playlists name filter, Plex search term, channels name filter. The channel sync chip's
-  // "go to full history" jump is a ChannelsProvider action.
-  const { search: playlistsSearch } = usePlaylists();
-  const { setSearch: setPlaylistsSearch } = usePlaylistsActions();
-  const { search: channelsSearch } = useChannels();
-  const { search: filesSearch } = useFiles();
-  const { setSearch: setFilesSearch } = useFilesActions();
-  const { setSearch: setChannelsSearch, goToFullHistory: onGoToFullHistory } = useChannelsActions();
-  // Drop input focus on Go/Enter for the live-filter modules (feed's Go escalates to YouTube).
-  const blur = () => (document.activeElement as HTMLElement | null)?.blur?.();
-
-  // Per-page SearchBar wiring — null for modules without a search.
-  // A page without a search field still gets the palette's entry (PaletteLauncher).
-  let search: ReactNode = <PaletteLauncher />;
-  if (page === "feed") {
-    const trimmed = filters.q.trim();
-    search = (
-      <SearchBar
-        value={filters.q}
-        placeholder={t("header.searchPlaceholder")}
-        onChange={(q) => {
-          // When a search first appears, rank the feed by relevance — set atomically with the
-          // query (race-free vs. per-keystroke updates). Only overrides the default "newest"
-          // sort; a custom sort the user chose is left alone. Cleared in Feed.
-          const startSearch = !filters.q.trim() && !!q.trim() && filters.sort === "newest";
-          setFilters({ ...filters, q, ...(startSearch ? { sort: "relevance" } : {}) });
-        }}
-        onGo={() => onYtSearch(trimmed)}
-        goLabel={t("header.searchYoutube")}
-        goTitle={t(
-          me.search_source === "api" ? "header.searchYoutubeTipApi" : "header.searchYoutubeTip",
-        )}
-        goIcon={<YouTubeIcon className="w-4 h-4" />}
-        goDisabled={!trimmed}
-      />
-    );
-  } else if (page === "plex" && me.plex_enabled) {
-    search = <PlexSearchBox />;
-  } else if (page === "channels") {
-    search = (
-      <SearchBar
-        value={channelsSearch}
-        placeholder={t("channels.searchPlaceholder")}
-        onChange={setChannelsSearch}
-        onGo={blur}
-      />
-    );
-  } else if (page === "files") {
-    search = (
-      <SearchBar
-        value={filesSearch}
-        placeholder={t("files.searchPlaceholder")}
-        onChange={setFilesSearch}
-        onGo={blur}
-      />
-    );
-  } else if (page === "playlists") {
-    search = (
-      <SearchBar
-        value={playlistsSearch}
-        placeholder={t("playlists.searchPlaceholder")}
-        onChange={setPlaylistsSearch}
-        onGo={blur}
-      />
-    );
-  }
-
-  return (
-    // Absolutely positioned within the (relative) content column, so its left edge tracks the
-    // actual left zone: it sits just inside the content, reclaiming the space when the nav rail is
-    // slim and/or no filter sidebar is present — no hard-coded offset.
-    <div
-      ref={ref}
-      // left-4 / right = 1rem + the scrollbar gutter defines the full content column; max-w-[--content-mw]
-      // + mx-auto then centres the header band on the SAME width the page's content uses, so on a max-width
-      // page (Plex/Channels/Playlists) the band lines up with the centred grid, not the whole column. `none`
-      // (feed) = full width. Matches the toolbar band below it. `justify-center` then centres the search-box
-      // group (search + scope toggle / sync chip) within that band, so the box sits centred over the cards
-      // once the column is wider than the box's max-w — not hugged to the left edge.
-      className="pointer-events-none absolute top-3 left-4 right-[calc(1rem+var(--sbw))] mx-auto max-w-[var(--content-mw,none)] z-chrome flex flex-wrap items-center justify-center gap-x-3 gap-y-2"
-    >
-      {search}
-      {/* Mine/Library scope sits right of the feed search box — relocated here from the filter sidebar
-          so the primary "what am I browsing" control is always in reach (mirrors Plex's scope toggle). */}
-      {page === "feed" && <FeedScopeToggle />}
-      {/* Library scope (movie/show/both) sits right of the search box on Plex — relocated here from
-          the filter sidebar so the primary "what am I browsing" control is always in reach. The
-          Discover ⟷ Browse toggle sits right beside it (driven via the PlexViewBridge). */}
-      {page === "plex" && me.plex_enabled && <PlexScopeToggle />}
-      {page === "plex" && me.plex_enabled && <PlexViewToggle />}
-      {/* Per-user sync status — it used to cost the nav rail a whole block. It sits with the other
-          pills rather than pinned to the far right: on a wide window that just strands it. Only on
-          the two modules it says anything about: the feed those subscriptions fill, and the manager
-          where you curate them. It's noise on Plex (a different source entirely), playlists, etc. */}
-      {(page === "feed" || page === "channels") && (
-        <SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={onGoToFullHistory} />
-      )}
-    </div>
-  );
-});
-
-export default Header;
diff --git a/frontend/src/components/PlexViewBridge.tsx b/frontend/src/components/PlexViewBridge.tsx
deleted file mode 100644
index a10a787c..00000000
--- a/frontend/src/components/PlexViewBridge.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useState, type ReactNode } from "react";
-import {
-  PlexViewPublishContext,
-  PlexViewReadContext,
-  type PlexViewControls,
-} from "./plexViewContext";
-
-// A one-way bridge so the always-mounted Header can host the Plex Discover ⟷ Browse toggle even though
-// the sub-view state lives in (and is owned by) the plex-only PlexBrowse. PlexBrowse PUBLISHES its
-// current top-level view + opener here (on mount and on view change) and clears it on unmount; the
-// Header READS it to render the toggle beside the library-scope pill.
-//
-// Why a bridge and not a global sub-view provider: PlexBrowse's `useHistorySubview` REMOUNTS every time
-// you enter the plex page, re-seeding the view from history (a page switch clears ?v + drops _sub, so
-// each plex entry starts at the Discover root). Lifting that hook to an always-mounted provider would
-// lose the remount and let the view go stale across navigation. Keeping it in PlexBrowse preserves the
-// reseed; the bridge only mirrors the small slice the header needs.
-//
-// The contexts + hooks live in plexViewContext.ts.
-
-export function PlexViewBridge({ children }: { children: ReactNode }) {
-  const [controls, setControls] = useState<PlexViewControls | null>(null);
-  return (
-    <PlexViewPublishContext.Provider value={setControls}>
-      <PlexViewReadContext.Provider value={controls}>{children}</PlexViewReadContext.Provider>
-    </PlexViewPublishContext.Provider>
-  );
-}
diff --git a/frontend/src/components/SavedViewsProvider.tsx b/frontend/src/components/SavedViewsProvider.tsx
deleted file mode 100644
index 8e63a4ad..00000000
--- a/frontend/src/components/SavedViewsProvider.tsx
+++ /dev/null
@@ -1,264 +0,0 @@
-import { useEffect, useEffectEvent, useMemo, useRef, useState, type ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
-import {
-  api,
-  coercePlexFilters,
-  plexFiltersSignature,
-  type FeedFilters,
-  type PlexFilters,
-  type SavedView,
-} from "../lib/api";
-import { filtersToParams, hasFilterParams } from "../lib/urlState";
-import { pickDefaultToSeed, preferSticky } from "../lib/savedViews";
-import { notifyActionError } from "../lib/actionErrors";
-import { LS, ownKey } from "../lib/storage";
-import { useConfirm } from "./confirmContext";
-import { useNavigation } from "./navigationContext";
-import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
-import { usePlex, usePlexActions } from "./plexContext";
-import {
-  asFilters,
-  SavedViewsCtx,
-  type SavedViewsContext,
-  type ViewSource,
-} from "./savedViewsContext";
-
-// Saved "smart views" now serve TWO modules — the feed and Plex — keyed by `source`. This one provider
-// switches which module it operates on by the active page (both filter providers are global, so it can
-// read either), so the shared UI (popover / modal / chip) works on the feed page against feed views and
-// on the plex page against plex views without a second provider or an App-layout change.
-//
-// The context, its value type and the hook live in savedViewsContext.ts.
-
-// The per-source wiring the generic logic runs on: the live filters, how to apply a view's, a stable
-// signature for matching, coercion, and what to strip before saving (the feed's transient shuffle seed).
-interface ViewConfig {
-  source: ViewSource;
-  filters: Record<string, unknown>;
-  setFilters: (f: Record<string, unknown>) => void;
-  keyOf: (f: Record<string, unknown>) => string;
-  asFilters: (raw: Record<string, unknown>) => Record<string, unknown>;
-  stripForSave: (f: Record<string, unknown>) => Record<string, unknown>;
-  /** Whether this module is a genuinely fresh start the starred default may seed on first load: no
-   *  stored filters for the active account, and — feed only — no URL filter override. */
-  canSeedDefault: () => boolean;
-}
-
-const feedKeyOf = (f: Record<string, unknown>) =>
-  filtersToParams(asFilters(f as unknown as FeedFilters)).toString();
-const plexKeyOf = (f: Record<string, unknown>) => plexFiltersSignature(coercePlexFilters(f));
-
-// True once this account has its own persisted filters for `lsKey` — the signal that the last
-// view / manual tweaks (not the default) should win. Account unknown or localStorage unavailable →
-// report "stored" so a default never seeds blind over an indeterminate state.
-function storedFiltersPresent(lsKey: string): boolean {
-  const key = ownKey(lsKey);
-  if (!key) return true;
-  try {
-    return localStorage.getItem(key) != null;
-  } catch {
-    return true;
-  }
-}
-// Feed also yields to a URL that carries filter params (a shared/bookmarked view).
-function feedCanSeedDefault(): boolean {
-  if (hasFilterParams(new URLSearchParams(window.location.search))) return false;
-  return !storedFiltersPresent(LS.filters);
-}
-// Plex views are facets-only, so LS.plexFilters is the "has the user set this module's filters" key.
-function plexCanSeedDefault(): boolean {
-  return !storedFiltersPresent(LS.plexFilters);
-}
-
-export function SavedViewsProvider({ children }: { children: ReactNode }) {
-  const { t } = useTranslation();
-  const qc = useQueryClient();
-  const confirm = useConfirm();
-  const { page } = useNavigation();
-
-  // Both filter providers are global — read both, then use the one the active page owns.
-  const feedFilters = useFeedFilters();
-  const { setFilters: setFeedFilters } = useFeedFiltersActions();
-  const { filters: plexFilters } = usePlex();
-  const { setFilters: setPlexFilters } = usePlexActions();
-
-  const cfg: ViewConfig = useMemo(() => {
-    if (page === "plex") {
-      return {
-        source: "plex",
-        filters: plexFilters as unknown as Record<string, unknown>,
-        setFilters: (f) => setPlexFilters(f as unknown as PlexFilters),
-        keyOf: plexKeyOf,
-        asFilters: (raw) => coercePlexFilters(raw) as unknown as Record<string, unknown>,
-        stripForSave: (f) => f, // Plex has no transient field to drop
-        canSeedDefault: plexCanSeedDefault,
-      };
-    }
-    return {
-      source: "feed",
-      filters: feedFilters as unknown as Record<string, unknown>,
-      setFilters: (f) => setFeedFilters(f as unknown as FeedFilters),
-      keyOf: feedKeyOf,
-      asFilters: (raw) =>
-        asFilters(raw as unknown as FeedFilters) as unknown as Record<string, unknown>,
-      // Strip the transient shuffle seed so a saved "shuffle" view re-rolls fresh on apply.
-      stripForSave: (f) => {
-        const { seed: _seed, ...rest } = f;
-        return rest;
-      },
-      canSeedDefault: feedCanSeedDefault,
-    };
-  }, [page, feedFilters, plexFilters, setFeedFilters, setPlexFilters]);
-
-  const source = cfg.source;
-  // Passive observer of the account BootGate fetches: the providers mount for a signed-out tab too
-  // (the public landing), and saved views are per-account, so asking for "nobody's" views only logs
-  // a 401 on the landing page. Enabled once a signed-in account is cached.
-  const { data: me } = useQuery({ queryKey: qk.me(), queryFn: api.me, enabled: false });
-  const viewsQuery = useQuery({
-    queryKey: qk.savedViews(source),
-    queryFn: () => api.savedViews(source),
-    enabled: !!me,
-  });
-  const views = useMemo(() => viewsQuery.data ?? [], [viewsQuery.data]);
-
-  const [stickyId, setStickyId] = useState<number | null>(null);
-  const [modalOpen, setModalOpen] = useState(false);
-
-  // Switching modules (feed ⟷ plex) starts fresh: a feed view can't be the sticky/active one on plex,
-  // and a feed modal shouldn't linger open on plex. Adjusted DURING RENDER against the previous
-  // source rather than from an effect, so the first plex render never commits carrying the feed's
-  // sticky id — which is exactly long enough for a stale view chip to paint.
-  const [prevSource, setPrevSource] = useState(source);
-  if (prevSource !== source) {
-    setPrevSource(source);
-    setStickyId(null);
-    setModalOpen(false);
-  }
-
-  // The ONE default-application path for both modules. On the views query's FIRST resolve for a
-  // source, seed the starred default view's filters — but only into a genuinely fresh module (no
-  // stored filters, no URL override; see cfg.canSeedDefault). Applying via cfg.setFilters persists
-  // it, so it happens once and the normal last-view-wins path takes over, exactly as the storage
-  // semantics document. This replaced the feed-only localStorage mirror that raced FeedFiltersProvider's
-  // login effect (on a fresh browser the feed could seed DEFAULT_FILTERS and never re-apply until a
-  // reload) — and it gives Plex the default it previously never applied at all. Per-source guard so a
-  // 60s background refetch never re-seeds over the filters you're editing. canSeedDefault() reads the
-  // account's stored-filters key, which is always readable here: BootGate hands the browser's local
-  // state to the account (claimLocalData) before this provider mounts.
-  const seededRef = useRef<Set<ViewSource>>(new Set());
-  // `cfg` re-memoizes on every filter edit, so it is read through an effect event: the seed must
-  // fire on the views query's first resolve for a source and never again, which `seededRef`
-  // enforces. Listing cfg would re-arm nothing (the guard still holds) but would re-run the effect
-  // on every keystroke in the filter bar.
-  const latestCfg = useEffectEvent(() => cfg);
-  useEffect(() => {
-    const data = viewsQuery.data;
-    if (!data || seededRef.current.has(source)) return;
-    seededRef.current.add(source);
-    const c = latestCfg();
-    const def = pickDefaultToSeed(data, c.canSeedDefault());
-    // The name follows by itself: `preferSticky` picks the starred default among same-filter views.
-    if (def) c.setFilters(c.asFilters(def.filters));
-  }, [viewsQuery.data, source]);
-
-  const currentKey = cfg.keyOf(cfg.filters);
-  const activeView = useMemo(
-    () =>
-      preferSticky(
-        views.filter((v) => cfg.keyOf(v.filters) === currentKey),
-        stickyId,
-      ),
-    [views, currentKey, stickyId, cfg],
-  );
-  // The sticky id follows whichever view is active — also adjusted during render. It converges by
-  // construction: preferSticky returns the sticky match when there is one, so the very write below
-  // makes its own condition false on the next pass.
-  if (activeView && activeView.id !== stickyId) setStickyId(activeView.id);
-
-  const stickyView = useMemo(
-    () => (stickyId == null ? null : (views.find((v) => v.id === stickyId) ?? null)),
-    [views, stickyId],
-  );
-  const displayView = activeView ?? stickyView;
-  const isDirty = displayView != null && activeView == null;
-
-  const refresh = () => void qc.invalidateQueries({ queryKey: qk.savedViews(source) });
-  async function runViewMutation(fn: () => Promise<unknown>, failMsg: string): Promise<boolean> {
-    let ok = true;
-    try {
-      await fn();
-    } catch (e) {
-      notifyActionError(e, failMsg);
-      ok = false;
-    }
-    refresh();
-    return ok;
-  }
-
-  const value: SavedViewsContext = {
-    source,
-    views,
-    loading: viewsQuery.isLoading,
-    activeViewId: activeView?.id ?? null,
-    displayView,
-    isDirty,
-    modalOpen,
-    openModal: () => setModalOpen(true),
-    closeModal: () => setModalOpen(false),
-    apply: (v) => {
-      cfg.setFilters(cfg.asFilters(v.filters));
-      setStickyId(v.id);
-    },
-    clearActive: () => setStickyId(null),
-    create: async (name) => {
-      const clean = name.trim();
-      if (!clean) return false;
-      return runViewMutation(
-        () => api.createView(clean, cfg.stripForSave(cfg.filters), source),
-        t("views.actionFailed"),
-      );
-    },
-    rename: async (id, name) => {
-      const next = name.trim();
-      if (!next) return false;
-      return runViewMutation(() => api.updateView(id, { name: next }), t("views.actionFailed"));
-    },
-    updateFilters: (id, filters) =>
-      runViewMutation(() => api.updateView(id, { filters }), t("views.actionFailed")),
-    saveCurrent: async (id) => {
-      const filters = cfg.stripForSave(cfg.filters);
-      const ok = await runViewMutation(
-        () => api.updateView(id, { filters }),
-        t("views.actionFailed"),
-      );
-      return ok ? filters : null;
-    },
-    toggleDefault: (v) =>
-      runViewMutation(
-        () => api.updateView(v.id, { is_default: !v.is_default }),
-        t("views.actionFailed"),
-      ).then(() => undefined),
-    remove: async (v) => {
-      const ok = await confirm({
-        message: t("views.deleteConfirm", { name: v.name }),
-        confirmLabel: t("views.delete"),
-        danger: true,
-      });
-      if (!ok) return false;
-      if (stickyId === v.id) setStickyId(null);
-      return runViewMutation(() => api.deleteView(v.id), t("views.actionFailed"));
-    },
-    reorder: async (nextIds) => {
-      qc.setQueryData<SavedView[]>(
-        qk.savedViews(source),
-        nextIds.map((id) => views.find((v) => v.id === id)!).filter(Boolean),
-      );
-      await runViewMutation(() => api.reorderViews(nextIds), t("views.reorderFailed"));
-    },
-  };
-
-  return <SavedViewsCtx.Provider value={value}>{children}</SavedViewsCtx.Provider>;
-}
diff --git a/frontend/src/components/legal/LegalLayout.tsx b/frontend/src/components/legal/LegalLayout.tsx
index 6fdb4b15..26892c2d 100644
--- a/frontend/src/components/legal/LegalLayout.tsx
+++ b/frontend/src/components/legal/LegalLayout.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
 import { setLanguage, type LangCode } from "../../i18n";
 import { formatDate } from "../../lib/format";
 import { send } from "../../lib/http";
-import LanguageSwitcher from "../LanguageSwitcher";
+import LanguageSwitcher from "../ui/LanguageSwitcher";
 import { SURFACE } from "../ui/surfaces";
 
 // The day the text last changed materially — bump it with every edit of either body.
diff --git a/frontend/src/components/moduleRegistry.tsx b/frontend/src/components/moduleRegistry.tsx
deleted file mode 100644
index 63d46ef5..00000000
--- a/frontend/src/components/moduleRegistry.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import type { ComponentType } from "react";
-import { lazyWithPreload, type PreloadableComponent } from "../lib/lazyWithPreload";
-import type { Page } from "../lib/urlState";
-import type { PanelId, PanelLayout } from "../lib/panelLayout";
-import Sidebar from "./Sidebar";
-import PlaylistsRail from "./PlaylistsRail";
-import { Feed, FeedPage } from "./modulePages";
-
-// The RENDER half of the module registry: which component (and side rail) each page renders. The
-// metadata half — nav order, label, icon, gate — lives in lib/modules.ts (imported by NavSidebar /
-// Header / App's gate check). Together they let App drive the whole shell from `page` alone, with no
-// `page === X` chrome conditionals.
-//
-// Every content entry is a PROP-FREE component: it reads `me` from useMe() and its module-local state
-// from the scoped providers, so App renders `<Content />` uniformly. The two that need per-render
-// wiring get a thin wrapper in modulePages (FeedPage supplies the GLOBAL feed scope; the channel page
-// threads its own isolated scope to <Feed> directly — see the scope note in FeedFiltersProvider).
-
-// Route-level code splitting: each page is its own lazy chunk (admin-only pages never reach
-// non-admins; the logged-out landing pulls only the shell). Rendered inside App's <Suspense>. Each
-// one is preloadable: App fetches the chunks of every page the account can reach once the first page
-// is on screen (preloadPages below), so switching modules never shows the chunk fallback.
-const Home = lazyWithPreload(() => import("./Home"));
-const Channels = lazyWithPreload(() => import("./Channels"));
-const Playlists = lazyWithPreload(() => import("./Playlists"));
-const PlexBrowse = lazyWithPreload(() => import("./PlexBrowse"));
-const PlexSidebar = lazyWithPreload(() => import("./PlexSidebar"));
-const NotificationsPanel = lazyWithPreload(() => import("./NotificationsPanel"));
-const Files = lazyWithPreload(() => import("./Files"));
-const FilesRail = lazyWithPreload(() => import("./FilesRail"));
-const Stats = lazyWithPreload(() => import("./Stats"));
-const Scheduler = lazyWithPreload(() => import("./Scheduler"));
-const ConfigPanel = lazyWithPreload(() => import("./ConfigPanel"));
-const AdminUsers = lazyWithPreload(() => import("./AdminUsers"));
-const Activity = lazyWithPreload(() => import("./Activity"));
-const SettingsPanel = lazyWithPreload(() => import("./SettingsPanel"));
-
-export type PageDef = {
-  // Prop-free by construction: reads `me` + module state from hooks/providers. Preloadable by type, so
-  // a new page cannot silently opt out of preloadPages.
-  Component: PreloadableComponent<object>;
-  // The content column's max width. The header + toolbar centre on this same width (via --content-mw)
-  // so the floating chrome lines up with the centred content instead of spanning the whole column.
-  // MUST match the max-w the page's own content wrapper uses. Omit for a full-width page (feed).
-  maxWidth?: string;
-};
-
-// page id → the component App renders in the content column (+ its shell chrome config).
-export const PAGE_CONTENT: Record<Page, PageDef> = {
-  home: { Component: Home, maxWidth: "80rem" },
-  // The two wrappers preload the lazy chunk they render.
-  feed: { Component: Object.assign(FeedPage, { preload: Feed.preload }) },
-  channels: { Component: Channels, maxWidth: "96rem" },
-  playlists: { Component: Playlists, maxWidth: "64rem" },
-  plex: { Component: PlexBrowse, maxWidth: "100rem" },
-  notifications: { Component: NotificationsPanel, maxWidth: "48rem" },
-  files: { Component: Files, maxWidth: "80rem" },
-  stats: { Component: Stats },
-  scheduler: { Component: Scheduler },
-  config: { Component: ConfigPanel },
-  users: { Component: AdminUsers, maxWidth: "48rem" },
-  activity: { Component: Activity },
-  settings: { Component: SettingsPanel },
-};
-
-// The uniform side-rail contract — shell layout/collapse only; the rail reads its module state from
-// its provider and `me` from useMe().
-type RailProps = {
-  layout: PanelLayout;
-  setLayout: (l: PanelLayout) => void;
-  collapsed: boolean;
-  onToggleCollapse: () => void;
-};
-
-// Which collapse flag a rail uses (feed + plex share the filter rail's flag; playlists and files
-// have their own).
-type RailCollapseKey = "filter" | "playlists" | "files";
-
-export type RailDef = {
-  Rail: ComponentType<RailProps>;
-  // The persisted panel-layout record this rail edits (App owns the panelLayouts map).
-  panelId: PanelId;
-  collapse: RailCollapseKey;
-};
-
-// page id → its side rail (only the pages that have one). App renders it in the rail slot.
-export const PAGE_RAIL: Partial<Record<Page, RailDef>> = {
-  feed: { Rail: Sidebar, panelId: "feed", collapse: "filter" },
-  plex: { Rail: PlexSidebar, panelId: "plex", collapse: "filter" },
-  playlists: { Rail: PlaylistsRail, panelId: "playlists", collapse: "playlists" },
-  files: { Rail: FilesRail, panelId: "files", collapse: "files" },
-};
-
-/** Fetch the code of these pages and of their side rails now, ahead of their first visit. Errors are
- *  swallowed: a chunk that fails to preload is simply fetched (and its failure surfaced) on visit. */
-export function preloadPages(pages: Page[]): void {
-  for (const p of pages) {
-    PAGE_CONTENT[p].Component.preload().catch(() => {});
-    const rail = PAGE_RAIL[p]?.Rail as Partial<PreloadableComponent<RailProps>> | undefined;
-    rail?.preload?.().catch(() => {});
-  }
-}
diff --git a/frontend/src/components/plexViewContext.ts b/frontend/src/components/plexViewContext.ts
deleted file mode 100644
index 434e452c..00000000
--- a/frontend/src/components/plexViewContext.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createContext, useContext } from "react";
-import { type Sub } from "./plexSubUrl";
-
-// The read + publish sides of the Plex view bridge (see PlexViewBridge for why it is a bridge), split
-// out of that file so it exports only components (Fast Refresh).
-export type PlexViewControls = {
-  kind: Sub["kind"]; // the current top-level plex view — the header controls derive their state from it
-  open: (v: Sub) => void;
-};
-
-export const PlexViewReadContext = createContext<PlexViewControls | null>(null);
-export const PlexViewPublishContext = createContext<(c: PlexViewControls | null) => void>(() => {});
-
-export const usePlexViewControls = () => useContext(PlexViewReadContext);
-export const usePublishPlexView = () => useContext(PlexViewPublishContext);
diff --git a/frontend/src/components/prefsContext.ts b/frontend/src/components/prefsContext.ts
deleted file mode 100644
index 4849aa05..00000000
--- a/frontend/src/components/prefsContext.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createContext, useContext } from "react";
-import { DEFAULT_THEME } from "../lib/theme";
-import { getNotifSettings } from "../lib/notifications";
-import type { PrefsController } from "./SettingsPanel";
-
-// The Settings-page preferences context + hook, split out of PrefsProvider so that file exports only
-// components (Fast Refresh).
-
-export const PrefsContext = createContext<PrefsController>({
-  theme: DEFAULT_THEME,
-  setTheme: () => {},
-  perf: false,
-  setPerf: () => {},
-  hints: true,
-  setHints: () => {},
-  railLabels: false,
-  setRailLabels: () => {},
-  notif: getNotifSettings(),
-  setNotif: () => {},
-  saveState: "idle",
-});
-
-export function usePrefs(): PrefsController {
-  return useContext(PrefsContext);
-}
diff --git a/frontend/src/components/ConfirmProvider.tsx b/frontend/src/components/ui/ConfirmProvider.tsx
similarity index 96%
rename from frontend/src/components/ConfirmProvider.tsx
rename to frontend/src/components/ui/ConfirmProvider.tsx
index fb58a293..9017af91 100644
--- a/frontend/src/components/ConfirmProvider.tsx
+++ b/frontend/src/components/ui/ConfirmProvider.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import Modal, { ModalFooter } from "./ui/Modal";
-import { Button } from "./ui/Button";
+import Modal, { ModalFooter } from "./Modal";
+import { Button } from "./Button";
 import { ChoiceContext, type ChoiceFn, type ChoiceOptions } from "./confirmContext";
 
 // The dialog behind useConfirm()/useChoice() (see confirmContext.ts for the hooks and their contract).
diff --git a/frontend/src/components/FilterRail.tsx b/frontend/src/components/ui/FilterRail.tsx
similarity index 79%
rename from frontend/src/components/FilterRail.tsx
rename to frontend/src/components/ui/FilterRail.tsx
index a0d6e241..f5c1cc77 100644
--- a/frontend/src/components/FilterRail.tsx
+++ b/frontend/src/components/ui/FilterRail.tsx
@@ -1,18 +1,18 @@
 import { useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { defaultLayout, type PanelId, type PanelLayout } from "../lib/panelLayout";
-import SidePanel from "./ui/SidePanel";
-import PanelGroups, { type PanelItem } from "./ui/PanelGroups";
+import { type PanelLayout } from "../../lib/panelLayout";
+import SidePanel from "./SidePanel";
+import PanelGroups, { type PanelItem } from "./PanelGroups";
 
 // The shared filter-rail shell, extracted from the three rails that all render the same SidePanel
 // chrome around a PanelGroups body: the feed Sidebar, the PlexSidebar, and the PlaylistsRail. It owns
 // the customize (reorder/hide) `editing` state and the fixed title-bar wiring (edit toggle, reset to
 // the layout default, edit hint); each rail supplies only what actually differs — its identity
 // (title/icon), the active-filter count + Clear-all action, its `items`, and any content below the
-// groups (`children`, e.g. the feed's tag manager). `kind` is the PanelId (also the layout key), so
-// `children` defaults to nothing for the rails that need none.
+// groups (`children`, e.g. the feed's tag manager; nothing for the rails that need none). What Reset
+// goes back to is the rail's (`onResetLayout`, from lib/useRail), so this shell names no page.
 export default function FilterRail({
-  kind,
+  onResetLayout,
   title,
   icon,
   count,
@@ -28,7 +28,8 @@ export default function FilterRail({
   titleActionLabel,
   children,
 }: {
-  kind: PanelId;
+  /** Puts the groups back in the rail's default order (lib/useRail's `onResetLayout`). */
+  onResetLayout: () => void;
   title: string;
   icon: ReactNode;
   count?: number;
@@ -56,7 +57,7 @@ export default function FilterRail({
       onToggleCollapse={onToggleCollapse}
       editing={editing}
       onToggleEditing={() => setEditing((e) => !e)}
-      onReset={() => setLayout(defaultLayout(kind))}
+      onReset={onResetLayout}
       editHint={t("sidebar.editHint")}
       actions={actions}
       iconExpanded={iconExpanded}
diff --git a/frontend/src/components/LanguageSwitcher.tsx b/frontend/src/components/ui/LanguageSwitcher.tsx
similarity index 90%
rename from frontend/src/components/LanguageSwitcher.tsx
rename to frontend/src/components/ui/LanguageSwitcher.tsx
index 2a848c25..9704afa8 100644
--- a/frontend/src/components/LanguageSwitcher.tsx
+++ b/frontend/src/components/ui/LanguageSwitcher.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
 import { Globe } from "lucide-react";
-import { MenuCheck } from "./ui/MenuCheck";
-import { LANGUAGES, type LangCode } from "../i18n";
-import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { Pressable } from "./ui/Pressable";
-import { RAIL_GLYPH, RAIL_ROW } from "./ui/NavRail";
-import { SURFACE } from "./ui/surfaces";
+import { MenuCheck } from "./MenuCheck";
+import { LANGUAGES, type LangCode } from "../../i18n";
+import { PopoverItem, PopoverSurface } from "./AnchoredPopover";
+import { useAnchoredPopover } from "./anchoredPopoverHooks";
+import { Pressable } from "./Pressable";
+import { RAIL_GLYPH, RAIL_ROW } from "./NavRail";
+import { SURFACE } from "./surfaces";
 
 // Compact language picker (globe + current code). Presentational: the parent decides what
 // changing the language does (set it; persist server-side when signed in).
diff --git a/frontend/src/components/ui/NavRail.dom.test.tsx b/frontend/src/components/ui/NavRail.dom.test.tsx
index 7c71e99c..cd99d259 100644
--- a/frontend/src/components/ui/NavRail.dom.test.tsx
+++ b/frontend/src/components/ui/NavRail.dom.test.tsx
@@ -119,7 +119,7 @@ describe("NavRailAction", () => {
   });
 
   it("the nav rail holds no toolbar icon button", () => {
-    const src = readFileSync(resolve(__dirname, "../NavSidebar.tsx"), "utf8");
+    const src = readFileSync(resolve(__dirname, "../../shell/NavSidebar.tsx"), "utf8");
     expect(src).not.toMatch(/<IconButton[\s>]/);
   });
 });
diff --git a/frontend/src/components/ui/PageShell.header.dom.test.tsx b/frontend/src/components/ui/PageShell.header.dom.test.tsx
new file mode 100644
index 00000000..3e484d6e
--- /dev/null
+++ b/frontend/src/components/ui/PageShell.header.dom.test.tsx
@@ -0,0 +1,176 @@
+// @vitest-environment jsdom
+//
+// The floating header knows no page: a page fills it through PageHeader (a portal into the header's
+// root box), and the shell's PageHeaderDefault shows only while no page does. These pin the slot's
+// three promises: the page's pills land IN the header, the default steps aside for them and comes
+// back when the next page has none, and a shell without a header (the channel page) renders the
+// page's pills nowhere.
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render, cleanup, screen } from "@testing-library/react";
+import PageShell, { PageHeader, PageHeaderDefault } from "./PageShell";
+
+vi.mock("./PageScroller", () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+beforeEach(() => {
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe() {}
+      disconnect() {}
+    },
+  );
+});
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+const hdr = <div data-testid="hdr" />;
+const fallback = (
+  <PageHeaderDefault>
+    <span>default</span>
+  </PageHeaderDefault>
+);
+
+describe("the header slot", () => {
+  it("puts a page's pills inside the header box", () => {
+    render(
+      <PageShell header={hdr}>
+        <PageHeader>
+          <span>search</span>
+        </PageHeader>
+      </PageShell>,
+    );
+    expect(screen.getByTestId("hdr").textContent).toBe("search");
+  });
+
+  it("shows the default on a page with no header of its own", () => {
+    render(<PageShell header={hdr}>{fallback}</PageShell>);
+    expect(screen.getByTestId("hdr").textContent).toBe("default");
+  });
+
+  it("hides the default while a page fills the header, and brings it back on the next page", () => {
+    const page = (own: boolean) => (
+      <PageShell header={hdr}>
+        {own && (
+          <PageHeader>
+            <span>search</span>
+          </PageHeader>
+        )}
+        {fallback}
+      </PageShell>
+    );
+    const { rerender } = render(page(true));
+    expect(screen.getByTestId("hdr").textContent).toBe("search");
+    rerender(page(false));
+    expect(screen.getByTestId("hdr").textContent).toBe("default");
+    rerender(page(true));
+    expect(screen.getByTestId("hdr").textContent).toBe("search");
+  });
+
+  it("keeps the default hidden while one of two PageHeaders on a page remains", () => {
+    const page = (both: boolean) => (
+      <PageShell header={hdr}>
+        <PageHeader>
+          <span>search</span>
+        </PageHeader>
+        {both && (
+          <PageHeader>
+            <span>toggle</span>
+          </PageHeader>
+        )}
+        {fallback}
+      </PageShell>
+    );
+    const { rerender } = render(page(true));
+    rerender(page(false));
+    expect(screen.getByTestId("hdr").textContent).toBe("search");
+  });
+
+  it("pads the content by the filled header before paint, not when the observer catches up", () => {
+    // jsdom does no layout: the header's height here is one 40px row per pill in it. The observer
+    // never fires in this test, so only a measurement made as the pills arrive can see them.
+    const height = (el: HTMLElement) => 40 * el.childElementCount;
+    const page = (own: boolean) => (
+      <PageShell header={hdr}>
+        {own && (
+          <PageHeader>
+            <span>search</span>
+            <span>scope</span>
+          </PageHeader>
+        )}
+        {fallback}
+      </PageShell>
+    );
+    const { rerender, container } = render(<PageShell header={hdr}>{null}</PageShell>);
+    Object.defineProperty(screen.getByTestId("hdr"), "offsetHeight", {
+      get() {
+        return height(this as HTMLElement);
+      },
+      configurable: true,
+    });
+    const pad = () =>
+      (container.querySelector('[class*="pt-(--hdr-h)"]') as HTMLElement).style.getPropertyValue(
+        "--hdr-h",
+      );
+    rerender(page(false));
+    expect(pad()).toBe("44px"); // the default alone: one row
+    rerender(page(true));
+    expect(pad()).toBe("84px"); // the page's two pills, the default gone
+  });
+
+  it("re-measures when one page's pills replace another's in the same commit", () => {
+    // Feed → Playlists: the leaving page's claim and the arriving page's land in one commit, so the
+    // number of claims never changes — the pad must follow the new pills all the same.
+    const height = (el: HTMLElement) => 40 * el.childElementCount;
+    const Feed = () => (
+      <PageHeader>
+        <span>search</span>
+        <span>scope</span>
+      </PageHeader>
+    );
+    const Playlists = () => (
+      <PageHeader>
+        <span>search</span>
+      </PageHeader>
+    );
+    const page = (which: "feed" | "playlists") => (
+      <PageShell header={hdr}>
+        {which === "feed" ? <Feed /> : <Playlists />}
+        {fallback}
+      </PageShell>
+    );
+    const { rerender, container } = render(<PageShell header={hdr}>{null}</PageShell>);
+    Object.defineProperty(screen.getByTestId("hdr"), "offsetHeight", {
+      get() {
+        return height(this as HTMLElement);
+      },
+      configurable: true,
+    });
+    const pad = () =>
+      (container.querySelector('[class*="pt-(--hdr-h)"]') as HTMLElement).style.getPropertyValue(
+        "--hdr-h",
+      );
+    rerender(page("feed"));
+    expect(pad()).toBe("84px");
+    rerender(page("playlists"));
+    expect(pad()).toBe("44px");
+    rerender(page("feed"));
+    expect(pad()).toBe("84px");
+  });
+
+  it("renders a page's pills nowhere in a shell without a header", () => {
+    render(
+      <PageShell>
+        <PageHeader>
+          <span>search</span>
+        </PageHeader>
+        {fallback}
+      </PageShell>,
+    );
+    expect(screen.queryByText("search")).toBeNull();
+    expect(screen.queryByText("default")).toBeNull();
+  });
+});
diff --git a/frontend/src/components/ui/PageShell.tsx b/frontend/src/components/ui/PageShell.tsx
index fca644c2..ab9c358d 100644
--- a/frontend/src/components/ui/PageShell.tsx
+++ b/frontend/src/components/ui/PageShell.tsx
@@ -13,6 +13,7 @@ import {
 import { createPortal } from "react-dom";
 import PageScroller from "./PageScroller";
 import { PageToolbarSlot } from "./pageToolbarSlot";
+import { PageHeaderSlot } from "./pageHeaderSlot";
 import { PageHeadingProvider } from "./pageHeading";
 import { PageMenuSlot, type PageMenuOpener } from "./pageMenuSlot";
 import { isBackgroundPoint } from "../../lib/backgroundTarget";
@@ -29,6 +30,31 @@ export function PageToolbar({ children }: { children: ReactNode }) {
   return slot ? createPortal(children, slot) : null;
 }
 
+// A page renders its controls in the floating header (its search box, scope toggles, sync chip)
+// through this, the same way as PageToolbar: a portal, so the controls stay in the page's own React
+// subtree and reach its state directly (Plex's toggles drive the sub-view that lives in PlexBrowse).
+// The header itself knows no page. Claiming the header hides the shell's default (PageHeaderDefault).
+export function PageHeader({ children }: { children: ReactNode }) {
+  const slot = useContext(PageHeaderSlot);
+  const claim = slot?.claim;
+  useLayoutEffect(() => claim?.(), [claim]);
+  return slot?.target ? createPortal(children, slot.target) : null;
+}
+
+// What the header shows on a page that renders no PageHeader of its own (the palette's entry). App
+// renders it beside the page, inside the page's Suspense, so a page still loading shows no default
+// that its own controls would replace a moment later.
+export function PageHeaderDefault({ children }: { children: ReactNode }) {
+  const slot = useContext(PageHeaderSlot);
+  const shown = !!slot?.target && !slot.claimed;
+  const showDefault = slot?.showDefault;
+  useLayoutEffect(() => {
+    showDefault?.(shown);
+    return () => showDefault?.(false);
+  }, [shown, showDefault]);
+  return shown && slot?.target ? createPortal(children, slot.target) : null;
+}
+
 // The page shell: the fixed chrome around a single scrollable content region. It formalizes "what
 // is fixed vs what scrolls" per module, so the chrome App used to hand-assemble around every page
 // (a floating Header + a top-padded wrapper + PageScroller, plus the channel page's separate
@@ -38,6 +64,7 @@ export function PageToolbar({ children }: { children: ReactNode }) {
 //  - `header`  — floats (absolute, height `var(--hdr-h)`) over the content column; the wrapper pads
 //                its top by that height so nothing hides under it. Omit it (channel page) → no pad
 //                and no fixed top band, so the module's own banner can scroll from the very top.
+//                The header is an empty band: the page fills it through PageHeader.
 //  - `title`   — the page's name as a visually hidden `h1` (B4): the nav rail and the tab title are
 //                the visible identity, and a screen reader still lands on a named page. A view that
 //                shows its own title renders it through `PageHeading`, and this one steps aside.
@@ -123,6 +150,29 @@ export default function PageShell({
   // the measurement to the live node re-runs it every time the header mounts/unmounts, so it stays correct.
   const [headerEl, setHeaderEl] = useState<HTMLDivElement | null>(null);
   const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);
+  // How many PageHeaders fill the header right now: a count, not a flag, so of two on one page the one
+  // that leaves releases only its own claim.
+  const [headerClaims, setHeaderClaims] = useState(0);
+  // Bumped by every claim and every release. The count alone cannot say the pills changed: when one
+  // page's PageHeader replaces another's in one commit (feed → playlists), the release and the claim
+  // net to the same count, and the measurement below would not re-run.
+  const [headerGeneration, setHeaderGeneration] = useState(0);
+  const claimHeader = useCallback(() => {
+    setHeaderClaims((n) => n + 1);
+    setHeaderGeneration((g) => g + 1);
+    return () => {
+      setHeaderClaims((n) => n - 1);
+      setHeaderGeneration((g) => g + 1);
+    };
+  }, []);
+  // Whether the shell's default is in the header (PageHeaderDefault reports it).
+  const [defaultShown, setDefaultShown] = useState(false);
+  // The pills arrive by portal AFTER this shell mounted (with the page's chunk), so the first measurement
+  // saw an empty header; the ResizeObserver catches up only a frame or more later, and until then the
+  // content sat under the pills (the feed toolbar jumped 55px on a tablet). So the measurement also re-runs
+  // here, before paint, whenever what fills the header changes (a claim made or released, the default
+  // shown or gone); the observer still covers a change within a page's own pills (Plex's view switch
+  // appearing).
   useLayoutEffect(() => {
     if (!headerEl || !contentEl) {
       // No header (channel page) → drop any stale pad so a leftover value can't linger.
@@ -136,7 +186,13 @@ export default function PageShell({
     const ro = new ResizeObserver(apply);
     ro.observe(headerEl);
     return () => ro.disconnect();
-  }, [headerEl, contentEl]);
+  }, [headerEl, contentEl, headerGeneration, defaultShown]);
+  const headerSlot = {
+    target: headerEl,
+    claimed: headerClaims > 0,
+    claim: claimHeader,
+    showDefault: setDefaultShown,
+  };
   // How many views below render their own page `h1` right now (see ./pageHeading).
   const [ownHeadings, setOwnHeadings] = useState(0);
   const registerOwnHeading = useCallback(() => {
@@ -173,26 +229,28 @@ export default function PageShell({
     : header;
   return (
     <PageToolbarSlot.Provider value={toolbarSlot}>
-      <PageMenuSlot.Provider value={registerPageMenu}>
-        <PageHeadingProvider value={registerOwnHeading}>
-          {measuredHeader}
-          <div
-            ref={setContentEl}
-            className={`flex-1 min-w-0 min-h-0 flex flex-col ${header ? "pt-(--hdr-h)" : ""}`}
-            onPointerDown={(e) => {
-              lastPointer.current = e.pointerType;
-            }}
-            onContextMenu={onContextMenu}
-          >
-            {title && ownHeadings === 0 && <h1 className="sr-only">{title}</h1>}
-            {banners}
-            {/* pr-[--sbw]: the toolbar band isn't the scroller, so without this it would run the
+      <PageHeaderSlot.Provider value={headerSlot}>
+        <PageMenuSlot.Provider value={registerPageMenu}>
+          <PageHeadingProvider value={registerOwnHeading}>
+            {measuredHeader}
+            <div
+              ref={setContentEl}
+              className={`flex-1 min-w-0 min-h-0 flex flex-col ${header ? "pt-(--hdr-h)" : ""}`}
+              onPointerDown={(e) => {
+                lastPointer.current = e.pointerType;
+              }}
+              onContextMenu={onContextMenu}
+            >
+              {title && ownHeadings === 0 && <h1 className="sr-only">{title}</h1>}
+              {banners}
+              {/* pr-[--sbw]: the toolbar band isn't the scroller, so without this it would run the
               scrollbar-gutter's width past the scrolled cards on the right. Pad it back to card width. */}
-            <div ref={setToolbarSlot} className="shrink-0 pr-[var(--sbw)]" />
-            <PageScroller scrollKey={scrollKey}>{children}</PageScroller>
-          </div>
-        </PageHeadingProvider>
-      </PageMenuSlot.Provider>
+              <div ref={setToolbarSlot} className="shrink-0 pr-[var(--sbw)]" />
+              <PageScroller scrollKey={scrollKey}>{children}</PageScroller>
+            </div>
+          </PageHeadingProvider>
+        </PageMenuSlot.Provider>
+      </PageHeaderSlot.Provider>
     </PageToolbarSlot.Provider>
   );
 }
diff --git a/frontend/src/components/ui/README.md b/frontend/src/components/ui/README.md
index b92cf515..2253e6a0 100644
--- a/frontend/src/components/ui/README.md
+++ b/frontend/src/components/ui/README.md
@@ -1,7 +1,7 @@
 # `components/ui/` — the platform layer
 
 Everything in this directory is a **platform component**: generic, reusable, and **domain-free**.
-Everything in `components/` above it is a **module component**: it knows about videos, channels,
+Everything above it — `features/`, `modules/` and `shell/` under `src/` — knows about videos, channels,
 playlists, Plex or downloads.
 
 That boundary is the whole point of this directory. Before E10 S1 these 33 modules sat flat among
@@ -18,9 +18,9 @@ A component belongs here **iff its props and imports name no domain concept**. I
 - generic helpers from `lib/` (`layerStack`, `history`, `columnSort`, `useScrollFade`, …),
 - i18n, React, and third-party UI libraries.
 
-It may **not** import a feature component (`../Feed`) or a domain API slice (`lib/api/*`). This is
-enforced by `no-restricted-imports` in `eslint.config.js` — not by this README, which is only the
-explanation. If a primitive needs domain data, take it as a prop or a render-prop and let the module
+It may **not** import anything from `features/`, `modules/` or `shell/`, or a domain API slice
+(`lib/api/*`). This is enforced in `eslint.config.js` (`no-restricted-imports` and `local/layers`) — not
+by this README, which is only the explanation. If a primitive needs domain data, take it as a prop or a render-prop and let the module
 supply it. The same goes for its words: a primitive translates only from the platform i18n
 namespaces (`common`, `errors`, `datatable`, `keys`, `palette`, `sidebar`, `notifications`, `time` —
 `uiI18n.contract.test.ts`); what a value means where it is used arrives as a prop (`PriorityStepper`'s
@@ -35,13 +35,13 @@ Counter-examples, deliberately NOT here: `PosterTile` (knows about Plex montage
 
 ## What lives here
 
-| area                   | components                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| overlays & anchoring   | `AnchoredPopover` + `anchoredPopoverHooks` (the popover engine: arrows, typeahead, Escape, anchor-flip), `ActionMenu`, `MembershipMenu` (the body of a "which sets is it in" menu: checkbox rows + a field naming a new set), `ContextMenu` + `useContextMenu` (the SAME menu, opened by right-click / long-press / Shift+F10 / a row's `MoreButton` "…" via `buttonProps`; `anchor` for a panel a row opens; `PageMenu` for a page's background menu), `Modal` (+ `ModalFooter`; `initialFocus` by purpose, C4), `Overlay`, `SidePanel`, `Tooltip`, `Toaster` (+ `toastLevels`, `overlayOrder`; `lib/toastDock` docks one control under the stack, in every host), `CommandPalette`, `KeyboardHelp`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| actions & inputs       | `Button`, `IconButton`, `Pressable` (`selectable` when its text is a title or a name), `Chip` + `chipStyles`, `DragHandle` + `OrderButtons` / `useOrderItems` (the non-drag reorder, WCAG 2.5.7) (one per button family, docs/DESIGN.md; a raw `<button>` or a bare `FocusSafeButton` outside the control primitives — eslint `BUTTON_PRIMITIVES` — is a lint error), `Input` + `fieldStyles`, `RenameField` (a name typed in place of the name: Enter or blur saves, Escape cancels; the caller hands the keyboard back), `Meter` (how full something is against a limit — one danger line for every place showing the same measure), `TimecodeField` + `useTimecodeField` / `TimecodeError` (a cut's time typed in: the draft, held by the caller, until Enter or blur takes it, then the value as it landed; unreadable stays once offered, marked invalid, and the caller places the line saying how to type one in its flow, outside a label; a draft goes when the value moves under it), `NativeControls`, `MenuCheck` (the drawn check of a menu row or a whole-row checkbox button; its tick is the `chosen` colour, which `media-marks` turns amber on the player chrome), `mediaChrome` (`MEDIA_CHOSEN`, a chosen tab or toggle on the chrome), `SelectTrigger` (the field family; a raw `<input>` is a lint error), `useReturnFocus`, `surfaces` (the B5 glass roles; a bare glass class is a lint error), `Badge` (a static label), `LinkButton` / `IconLink` (a link wearing the button face) over `buttonStyles`, `Skeleton` (B8 first loads, through `LoadingState shape`), `NavRail` (B7; `NavRailGroup` folds a set of rare pages into one row with a panel), `form`, `DraftSaveBar`, `Combobox`, `FilterSelect`, `SegmentedToggle`, `SortControl`, `ColumnSortControl`, `PriorityStepper`, `UndoToolbar` |
-| data display           | `DataTable` (+ `progressiveRows`: a long page mounts in steps), `tableHeader` + `tableAlign`, `HiddenFilterCue` (names a filter whose column is off screen), `Pager` + `pagerContent`, `VirtualGrid` + `gridColumns` (the column/width maths, incl. the ultrawide `maxCols` cap), `readAhead`, `Carousel`, `MediaCard` + `mediaCardStyles` (the one media card, docs/DESIGN.md "Media card") + `MediaPreview` / `useMediaPreview` (its mouse-rest preview), `NavGrid` (a plain grid, list or table body the keyboard walks — `DataTable`, `VirtualGrid` and `Carousel` take `keyboardNav`), `RemoteImage` (every network picture: no Referer, retries past the negative cache, a fallback instead of the broken-image mark — a bare `<img>` is linted out), `Avatar`, `CountBadge`, `ItemCount`, `FilterChipGroup`, `RelativeTime` ("3d ago" with the exact minute on hover, docs/DESIGN.md "Copy"), `ClampedText` (a long text clamped to a few lines; More / Less only when it is cut), `StatTiles` + `StatTile` / `StatBars` (number tiles, a breakdown as horizontal bars), `RangeTrack` + `RulerTicks` (a time track over a window of a media item: regions, slider ends the arrows step, a playhead, a background slot — the editor's cuts, the players' clip panel), `CropFrame` (a crop frame over a picture, on the picture and not its bars: drag, edges, corners, the arrows; the editor's crop, the players' clip crop)                                                                                                                                                                                                                                                                                                                                                                                         |
-| page & panel structure | `PageShell` + `pageToolbarSlot` + `pageHeading`, `PageScroller`, `Headings` (`PageHeading`, `SectionLabel`), `SkipLink` + `landmarks`, `FilterFold` (B4), `scrollFold` (`useScrollFold`: a fixed header that folds once its content scrolls), `PanelGroup`, `PanelGroups`, `Tabs`, `BackToTop`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| state & messaging      | `QueryState`, `Banner`, `InlineNotice`, `CrashBoundary`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| area                   | components                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| overlays & anchoring   | `AnchoredPopover` + `anchoredPopoverHooks` (the popover engine: arrows, typeahead, Escape, anchor-flip), `ActionMenu`, `MembershipMenu` (the body of a "which sets is it in" menu: checkbox rows + a field naming a new set), `ContextMenu` + `useContextMenu` (the SAME menu, opened by right-click / long-press / Shift+F10 / a row's `MoreButton` "…" via `buttonProps`; `anchor` for a panel a row opens; `PageMenu` for a page's background menu), `Modal` (+ `ModalFooter`; `initialFocus` by purpose, C4), `Overlay`, `SidePanel`, `Tooltip`, `Toaster` (+ `toastLevels`, `overlayOrder`; `lib/toastDock` docks one control under the stack, in every host), `CommandPalette`, `KeyboardHelp`, `ConfirmProvider` + `confirmContext` (`useConfirm` / `useChoice`: the app's promise-based confirm, mounted once at the root; a decision with more than two outcomes is one `useChoice`, never two chained confirms), `dialogFocus` (the focus half of the dialog contract: `Modal`'s, and the wizard's own shell), `menuGroups` (one menu from its groups, a rule only between non-empty ones), `pageMenuSlot` + `pageMenuItems` (a page's background menu, mirroring its own toolbar)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| actions & inputs       | `Button`, `IconButton`, `Pressable` (`selectable` when its text is a title or a name), `Chip` + `chipStyles`, `DragHandle` + `OrderButtons` / `useOrderItems` (the non-drag reorder, WCAG 2.5.7) (one per button family, docs/DESIGN.md; a raw `<button>` or a bare `FocusSafeButton` outside the control primitives — eslint `BUTTON_PRIMITIVES` — is a lint error), `Input` + `fieldStyles`, `RenameField` (a name typed in place of the name: Enter or blur saves, Escape cancels; the caller hands the keyboard back), `Meter` (how full something is against a limit — one danger line for every place showing the same measure), `TimecodeField` + `useTimecodeField` / `TimecodeError` (a cut's time typed in: the draft, held by the caller, until Enter or blur takes it, then the value as it landed; unreadable stays once offered, marked invalid, and the caller places the line saying how to type one in its flow, outside a label; a draft goes when the value moves under it), `NativeControls`, `MenuCheck` (the drawn check of a menu row or a whole-row checkbox button; its tick is the `chosen` colour, which `media-marks` turns amber on the player chrome), `mediaChrome` (`MEDIA_CHOSEN`, a chosen tab or toggle on the chrome), `SelectTrigger` (the field family; a raw `<input>` is a lint error), `useReturnFocus`, `surfaces` (the B5 glass roles; a bare glass class is a lint error), `Badge` (a static label), `LinkButton` / `IconLink` (a link wearing the button face) over `buttonStyles`, `Skeleton` (B8 first loads, through `LoadingState shape`), `NavRail` (B7; `NavRailGroup` folds a set of rare pages into one row with a panel), `form`, `DraftSaveBar`, `Combobox`, `FilterSelect`, `SegmentedToggle`, `SortControl`, `ColumnSortControl`, `PriorityStepper`, `UndoToolbar`, `ViewSwitcher` (a list's display modes behind one toolbar icon), `copyItems` (`useCopyItems`: the "Copy title" / "Copy link" rows every object's menu ends with) + `useCopyFeedback` (a Copy button's "Copied" moment), `MatchToggle` (a multi-value filter's any/all switch), `LanguageSwitcher` (presentational: the caller decides what a change does), `sortableA11y` (what a screen reader hears during a keyboard reorder) |
+| data display           | `DataTable` (+ `progressiveRows`: a long page mounts in steps), `tableHeader` + `tableAlign`, `HiddenFilterCue` (names a filter whose column is off screen), `Pager` + `pagerContent`, `VirtualGrid` + `gridColumns` (the column/width maths, incl. the ultrawide `maxCols` cap), `readAhead`, `Carousel`, `MediaCard` + `mediaCardStyles` (the one media card, docs/DESIGN.md "Media card") + `MediaPreview` / `useMediaPreview` (its mouse-rest preview), `NavGrid` (a plain grid, list or table body the keyboard walks — `DataTable`, `VirtualGrid` and `Carousel` take `keyboardNav`), `RemoteImage` (every network picture: no Referer, retries past the negative cache, a fallback instead of the broken-image mark — a bare `<img>` is linted out), `Avatar`, `CountBadge`, `ItemCount`, `FilterChipGroup`, `RelativeTime` ("3d ago" with the exact minute on hover, docs/DESIGN.md "Copy"), `ClampedText` (a long text clamped to a few lines; More / Less only when it is cut), `StatTiles` + `StatTile` / `StatBars` (number tiles, a breakdown as horizontal bars), `RangeTrack` + `trackPosition` + `RulerTicks` (a time track over a window of a media item: regions, slider ends the arrows step, a playhead, a background slot — the editor's cuts, the players' clip panel), `CropFrame` (a crop frame over a picture, on the picture and not its bars: drag, edges, corners, the arrows; the editor's crop, the players' clip crop), `reveal` (a card's hover chrome: hover or keyboard focus on a mouse, never on touch)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| page & panel structure | `PageShell` + `pageToolbarSlot` + `pageHeaderSlot` (`PageHeader`: a page fills the floating header) + `pageHeading`, `PageScroller`, `Headings` (`PageHeading`, `SectionLabel`), `SkipLink` + `landmarks`, `FilterFold` (B4), `scrollFold` (`useScrollFold`: a fixed header that folds once its content scrolls), `PanelGroup`, `PanelGroups`, `Tabs` + `tabPanel`, `BackToTop` + `backToTopState` (PageScroller keeps the page's end clear of it), `FilterRail` (the filter-rail shell a rail fills with its groups: title bar, customize, reset), `stickyTop` (a sticky header at the scroller's top turns its top fade off)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| state & messaging      | `QueryState`, `Banner`, `InlineNotice`, `CrashBoundary`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 
 ## The size contract (E10 S1c)
 
diff --git a/frontend/src/components/ui/Toaster.hosts.test.ts b/frontend/src/components/ui/Toaster.hosts.test.ts
index c2d866de..fd1cc2f3 100644
--- a/frontend/src/components/ui/Toaster.hosts.test.ts
+++ b/frontend/src/components/ui/Toaster.hosts.test.ts
@@ -18,12 +18,12 @@ import { readSources } from "../../lib/rawSources.testkit";
 // BOTH patterns: `../**/*.tsx` from this directory does not match the siblings in `ui/` itself, so
 // ui/Modal.tsx — the overlay behind every dialog in the app — was never checked by this guard at all
 // (found by a later review).
-const sources = readSources(__dirname, ["../**/*.tsx", "./*.tsx"]);
+const sources = readSources(__dirname, ["../../**/*.tsx", "!../../design-lab/**"]);
 
 // Overlays with nothing a toast could be about: a lazy chunk's black placeholder while the player
 // loads, and the signed-out landing page's screenshot zoom (the app's Toaster is not even mounted
 // there — App renders Welcome instead of the shell).
-const EXEMPT = new Set(["../PlexBrowse.tsx", "../Welcome.tsx"]);
+const EXEMPT = new Set(["../../modules/plex/PlexBrowse.tsx", "../../shell/Welcome.tsx"]);
 
 /** Every class string in the file (quoted or templated), including multi-line ones. */
 const classStrings = (src: string): string[] =>
@@ -67,9 +67,9 @@ describe("full-screen overlays host their own toasts", () => {
     expect(paths).toEqual(
       expect.arrayContaining([
         "./Modal.tsx",
-        "../PlayerModal.tsx",
-        "../PlexPlayer.tsx",
-        "../OnboardingWizard.tsx",
+        "../../features/player/PlayerModal.tsx",
+        "../../modules/plex/PlexPlayer.tsx",
+        "../../features/wizard/OnboardingWizard.tsx",
       ]),
     );
   });
diff --git a/frontend/src/components/ViewSwitcher.tsx b/frontend/src/components/ui/ViewSwitcher.tsx
similarity index 93%
rename from frontend/src/components/ViewSwitcher.tsx
rename to frontend/src/components/ui/ViewSwitcher.tsx
index 710bf418..9473b87b 100644
--- a/frontend/src/components/ViewSwitcher.tsx
+++ b/frontend/src/components/ui/ViewSwitcher.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { type LucideIcon } from "lucide-react";
 import clsx from "clsx";
-import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { MenuCheck } from "./ui/MenuCheck";
-import { SelectTrigger } from "./ui/SelectTrigger";
-import { SURFACE } from "./ui/surfaces";
+import { PopoverItem, PopoverSurface } from "./AnchoredPopover";
+import { useAnchoredPopover } from "./anchoredPopoverHooks";
+import { MenuCheck } from "./MenuCheck";
+import { SelectTrigger } from "./SelectTrigger";
+import { SURFACE } from "./surfaces";
 
 export interface ViewOption<T extends string> {
   id: T;
diff --git a/frontend/src/components/confirmContext.ts b/frontend/src/components/ui/confirmContext.ts
similarity index 100%
rename from frontend/src/components/confirmContext.ts
rename to frontend/src/components/ui/confirmContext.ts
diff --git a/frontend/src/components/copyItems.tsx b/frontend/src/components/ui/copyItems.tsx
similarity index 87%
rename from frontend/src/components/copyItems.tsx
rename to frontend/src/components/ui/copyItems.tsx
index d46d6b9b..87ce7819 100644
--- a/frontend/src/components/copyItems.tsx
+++ b/frontend/src/components/ui/copyItems.tsx
@@ -1,16 +1,17 @@
 import { useTranslation } from "react-i18next";
 import { Copy, Link2 } from "lucide-react";
 
-import { copyText } from "../lib/clipboard";
-import { notify } from "../lib/notifications";
-import { type ActionMenuItem } from "./ui/ActionMenu";
+import { copyText } from "../../lib/clipboard";
+import { notify } from "../../lib/notifications";
+import { type ActionMenuItem } from "./ActionMenu";
 
 // "Copy title" and "Copy link", the two rows every object's menu ends its middle group with
 // (DESIGN.md C1, "Text stays selectable"): on touch the long-press belongs to the context menu, so the text a
 // finger cannot select is copied from here. One builder, so every object says it the same way and
 // the clipboard write always runs inside the gesture (`inGesture`, which Safari insists on).
 //
-// A feature file, not `ui/`: it speaks the app's notifications.
+// Domain-free: it speaks through lib/notifications, the platform's toast service, so any module's menu
+// can end with it.
 
 type Named = "title" | "name";
 
diff --git a/frontend/src/components/ui/hiddenFilterCue.contract.test.ts b/frontend/src/components/ui/hiddenFilterCue.contract.test.ts
index 9c8d5df8..60b98eee 100644
--- a/frontend/src/components/ui/hiddenFilterCue.contract.test.ts
+++ b/frontend/src/components/ui/hiddenFilterCue.contract.test.ts
@@ -6,9 +6,9 @@ import { describe, expect, it } from "vitest";
 // or have no header at all. Each renders the hidden-filter cue, so no filter narrows its rows unseen.
 describe("every view that filters rows by column", () => {
   it("renders the hidden-filter cue", () => {
-    const root = new URL("../", import.meta.url);
+    const root = new URL("../../", import.meta.url);
     const sites = readdirSync(root, { recursive: true, encoding: "utf8" })
-      .filter((f) => f.endsWith(".tsx") && !f.includes(".test."))
+      .filter((f) => f.endsWith(".tsx") && !f.includes(".test.") && !f.startsWith("design-lab"))
       .map((f) => [f, readFileSync(new URL(f.replace(/\\/g, "/"), root), "utf8")] as const)
       .filter(([, src]) => /filterRows\(/.test(src));
     expect(sites.length).toBeGreaterThanOrEqual(3);
diff --git a/frontend/src/components/ui/menuCheck.contract.test.ts b/frontend/src/components/ui/menuCheck.contract.test.ts
index 86095712..0a782f11 100644
--- a/frontend/src/components/ui/menuCheck.contract.test.ts
+++ b/frontend/src/components/ui/menuCheck.contract.test.ts
@@ -1,7 +1,8 @@
 import { readdirSync, readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 
-const root = new URL("../", import.meta.url);
+// The whole app source (shell, modules, features, ui): the checkable menus live in all of them.
+const root = new URL("../../", import.meta.url);
 const sources = () =>
   readdirSync(root, { recursive: true, encoding: "utf8" })
     .filter((f) => f.endsWith(".tsx") && !f.includes(".test."))
diff --git a/frontend/src/components/ui/pageHeaderSlot.ts b/frontend/src/components/ui/pageHeaderSlot.ts
new file mode 100644
index 00000000..6b15cb84
--- /dev/null
+++ b/frontend/src/components/ui/pageHeaderSlot.ts
@@ -0,0 +1,17 @@
+import { createContext } from "react";
+
+// The floating header's slot (see PageHeader in PageShell): the node a page portals its header
+// controls into, whether a page has claimed it, and how a page claims it. The value is null with no
+// shell and the target null in a shell without a header (the channel page): a page renders its header
+// nowhere there. Its own
+// module so PageShell exports only components (Fast Refresh).
+export type PageHeaderSlotValue = {
+  target: HTMLElement | null;
+  claimed: boolean;
+  /** Claim the header for this page's controls; the returned function releases it. */
+  claim: () => () => void;
+  /** The default (PageHeaderDefault) reports whether it is in the header, so PageShell re-measures. */
+  showDefault: (shown: boolean) => void;
+};
+
+export const PageHeaderSlot = createContext<PageHeaderSlotValue | null>(null);
diff --git a/frontend/src/components/ui/pageMenuScope.contract.test.ts b/frontend/src/components/ui/pageMenuScope.contract.test.ts
index b900d7f3..528961e4 100644
--- a/frontend/src/components/ui/pageMenuScope.contract.test.ts
+++ b/frontend/src/components/ui/pageMenuScope.contract.test.ts
@@ -7,9 +7,9 @@ import { readSources } from "../../lib/rawSources.testkit";
 // stats, users, downloads) keep the browser's menu. A page that starts rendering one fails here until
 // that decision is taken again.
 const files = readSources(__dirname, [
-  "../**/*.tsx",
-  "!../**/*.test.*",
-  "!../design-lab/**",
+  "../../**/*.tsx",
+  "!../../**/*.test.*",
+  "!../../design-lab/**",
   "!./**",
 ]) as Record<string, string>;
 
@@ -17,14 +17,14 @@ describe("the pages with a background menu", () => {
   it("are the five the owner chose", () => {
     const users = Object.entries(files)
       .filter(([, code]) => /<PageMenu\b|\busePageMenu\(/.test(code))
-      .map(([path]) => path.replace(/^\.\.\//, ""))
+      .map(([path]) => path.replace(/^(\.\.\/)+/, ""))
       .sort();
     expect(users).toEqual([
-      "Channels.tsx",
-      "Feed.tsx",
-      "NotificationsPanel.tsx",
-      "Playlists.tsx",
-      "PlexBrowse.tsx",
+      "modules/channels/Channels.tsx",
+      "modules/feed/Feed.tsx",
+      "modules/notifications/NotificationsPanel.tsx",
+      "modules/playlists/Playlists.tsx",
+      "modules/plex/PlexBrowse.tsx",
     ]);
   });
 });
diff --git a/frontend/src/components/ui/pressableSelectable.contract.test.ts b/frontend/src/components/ui/pressableSelectable.contract.test.ts
index e0c2e500..270093b9 100644
--- a/frontend/src/components/ui/pressableSelectable.contract.test.ts
+++ b/frontend/src/components/ui/pressableSelectable.contract.test.ts
@@ -10,66 +10,74 @@ import { readSources } from "../../lib/rawSources.testkit";
 // someone decides.
 
 const files = readSources(__dirname, [
-  "../**/*.tsx",
-  "!../**/*.test.*",
-  "!../design-lab/**",
+  "../../**/*.tsx",
+  "!../../**/*.test.*",
+  "!../../design-lab/**",
 ]) as Record<string, string>;
 
 /** file → [how many plain Pressables, why they are not titles]. */
 const PLAIN: Record<string, [number, string]> = {
-  "ApiTokens.tsx": [
+  "modules/settings/ApiTokens.tsx": [
     1,
     "a token kind's tile in the new-token dialog (an option: its text is its label)",
   ],
-  "DownloadTray.tsx": [
+  "features/downloads/DownloadTray.tsx": [
     2,
     "the folded pill (its summary is its label); a failure's reason, which opens its details",
   ],
-  "FileCard.tsx": [1, "a card's picture (named by aria-label; its title is the caption)"],
-  "FilesRail.tsx": [2, "the load-error retry; the New-folder command"],
-  "Home.tsx": [
+  "modules/files/FileCard.tsx": [
+    1,
+    "a card's picture (named by aria-label; its title is the caption)",
+  ],
+  "modules/files/FilesRail.tsx": [2, "the load-error retry; the New-folder command"],
+  "modules/home/Home.tsx": [
     2,
     "the hero's picture and a shelf tile's picture (each named by aria-label; its title sits outside)",
   ],
-  "LanguageSwitcher.tsx": [1, "an option row"],
-  "NavSidebar.tsx": [3, "the account trigger and its menu rows"],
-  "PaletteLauncher.tsx": [2, "launcher controls"],
-  "PlaylistsRail.tsx": [1, "the load-error retry"],
-  "PlexCollectionEditor.tsx": [1, "a checkbox row in a picker"],
-  "PlexInfo.tsx": [1, "the rating filter (a number)"],
-  "PlexPlayerSettings.tsx": [1, "the clock's date-style options"],
-  "PlexPlaylistAdd.tsx": [1, "a checkbox row in a picker"],
-  "PlexPlaylistView.tsx": [1, "a show's poster stack (aria-hidden)"],
-  "PlexSearchBox.tsx": [1, "a listbox option"],
-  "plexCards.tsx": [1, "a card's picture (named by aria-label; its title is the caption)"],
-  "Scheduler.tsx": [1, "the interval editor trigger"],
-  "SettingsPanel.tsx": [1, "a colour swatch"],
-  "SyncStatus.tsx": [1, "the status pill trigger"],
-  "TagManager.tsx": [1, "a suggestion in a picker"],
-  "UploadDialog.tsx": [1, "the drop zone"],
-  "VideoEditor.tsx": [2, "timeline glyphs"],
-  "Welcome.tsx": [1, "a screenshot (zoom)"],
-  "playlistColumns.tsx": [1, "the thumbnail"],
-  "plexDetailUi.tsx": [2, "a switch row and the poster"],
-  "plexViews.tsx": [1, "the rating filter (a number)"],
-  "ui/ActionMenu.tsx": [1, "a menu row"],
-  "ui/BackToTop.tsx": [1, "a control"],
-  "ui/CommandPalette.tsx": [1, "a command row"],
-  "ui/NavRail.tsx": [
+  "components/ui/LanguageSwitcher.tsx": [1, "an option row"],
+  "shell/NavSidebar.tsx": [3, "the account trigger and its menu rows"],
+  "features/header/PaletteLauncher.tsx": [2, "launcher controls"],
+  "modules/playlists/PlaylistsRail.tsx": [1, "the load-error retry"],
+  "modules/plex/PlexCollectionEditor.tsx": [1, "a checkbox row in a picker"],
+  "modules/plex/PlexInfo.tsx": [1, "the rating filter (a number)"],
+  "modules/plex/PlexPlayerSettings.tsx": [1, "the clock's date-style options"],
+  "features/plexCards/PlexPlaylistAdd.tsx": [1, "a checkbox row in a picker"],
+  "modules/plex/PlexPlaylistView.tsx": [1, "a show's poster stack (aria-hidden)"],
+  "modules/plex/PlexSearchBox.tsx": [1, "a listbox option"],
+  "features/plexCards/plexCards.tsx": [
+    1,
+    "a card's picture (named by aria-label; its title is the caption)",
+  ],
+  "modules/scheduler/Scheduler.tsx": [1, "the interval editor trigger"],
+  "modules/settings/SettingsPanel.tsx": [1, "a colour swatch"],
+  "modules/channels/SyncStatus.tsx": [1, "the status pill trigger"],
+  "features/channel/TagManager.tsx": [1, "a suggestion in a picker"],
+  "modules/files/UploadDialog.tsx": [1, "the drop zone"],
+  "modules/files/VideoEditor.tsx": [2, "timeline glyphs"],
+  "shell/Welcome.tsx": [1, "a screenshot (zoom)"],
+  "modules/playlists/playlistColumns.tsx": [1, "the thumbnail"],
+  "modules/plex/plexDetailUi.tsx": [2, "a switch row and the poster"],
+  "modules/plex/plexViews.tsx": [1, "the rating filter (a number)"],
+  "components/ui/ActionMenu.tsx": [1, "a menu row"],
+  "components/ui/BackToTop.tsx": [1, "a control"],
+  "components/ui/CommandPalette.tsx": [1, "a command row"],
+  "components/ui/NavRail.tsx": [
     2,
     "the action rows (About, Sign out) and the group row that opens its panel; a page row is a link",
   ],
-  "ui/PanelGroup.tsx": [2, "a group's collapse toggle and its label"],
-  "ui/SidePanel.tsx": [2, "panel controls"],
-  "ui/tableHeader.tsx": [1, "a column's sort header"],
+  "components/ui/PanelGroup.tsx": [2, "a group's collapse toggle and its label"],
+  "components/ui/SidePanel.tsx": [2, "panel controls"],
+  "components/ui/tableHeader.tsx": [1, "a column's sort header"],
 };
 
 function scan(): { plain: Record<string, number>; selectable: number } {
   const plain: Record<string, number> = {};
   let selectable = 0;
   for (const [path, code] of Object.entries(files)) {
-    // Glob keys are relative to this folder: `./x.tsx` is ui/, `../x.tsx` is components/.
-    const rel = path.startsWith("./") ? `ui/${path.slice(2)}` : path.replace(/^\.\.\//, "");
+    // Glob keys are relative to this folder (`./x.tsx` is ui/); the table keys them from src/.
+    const rel = path.startsWith("./")
+      ? `components/ui/${path.slice(2)}`
+      : path.replace(/^(\.\.\/)+/, "");
     for (const m of code.matchAll(/<Pressable\b/g)) {
       if (/\sselectable\b(?!=)/.test(openingTag(code, m.index))) selectable++;
       else plain[rel] = (plain[rel] ?? 0) + 1;
diff --git a/frontend/src/components/useCopyFeedback.dom.test.ts b/frontend/src/components/ui/useCopyFeedback.dom.test.ts
similarity index 94%
rename from frontend/src/components/useCopyFeedback.dom.test.ts
rename to frontend/src/components/ui/useCopyFeedback.dom.test.ts
index c2be1ee7..830bb4f9 100644
--- a/frontend/src/components/useCopyFeedback.dom.test.ts
+++ b/frontend/src/components/ui/useCopyFeedback.dom.test.ts
@@ -10,8 +10,8 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
 }));
-vi.mock("../lib/clipboard", () => ({ copyText: h.copyText }));
-vi.mock("../lib/notifications", () => ({ notify: h.notify }));
+vi.mock("../../lib/clipboard", () => ({ copyText: h.copyText }));
+vi.mock("../../lib/notifications", () => ({ notify: h.notify }));
 
 import { useCopyFeedback } from "./useCopyFeedback";
 
diff --git a/frontend/src/components/useCopyFeedback.ts b/frontend/src/components/ui/useCopyFeedback.ts
similarity index 94%
rename from frontend/src/components/useCopyFeedback.ts
rename to frontend/src/components/ui/useCopyFeedback.ts
index 6e05f60e..9c12c0a4 100644
--- a/frontend/src/components/useCopyFeedback.ts
+++ b/frontend/src/components/ui/useCopyFeedback.ts
@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { copyText } from "../lib/clipboard";
-import { notify } from "../lib/notifications";
+import { copyText } from "../../lib/clipboard";
+import { notify } from "../../lib/notifications";
 
 // How long a Copy button reads "Copied" after it worked.
 const COPIED_MS = 2000;
diff --git a/frontend/src/content/release-notes/en.json b/frontend/src/content/release-notes/en.json
index 63d9c405..f46b9860 100644
--- a/frontend/src/content/release-notes/en.json
+++ b/frontend/src/content/release-notes/en.json
@@ -1,4 +1,14 @@
 [
+  {
+    "version": "0.109.1",
+    "date": "2026-10-23",
+    "new": [
+      "Development: the frontend is one folder per page (its page, rail, store and definition), with the layers held by lint and the shared /watch page held apart by a contract test; the header knows no page, and the feed and Plex each keep their own saved views."
+    ],
+    "fixed": [
+      "Saved views: a view you applied and then changed is still active after a visit to another page, in the feed and in Plex."
+    ]
+  },
   {
     "version": "0.109.0",
     "date": "2026-10-21",
diff --git a/frontend/src/content/release-notes/hu.json b/frontend/src/content/release-notes/hu.json
index f49baa38..b7388b72 100644
--- a/frontend/src/content/release-notes/hu.json
+++ b/frontend/src/content/release-notes/hu.json
@@ -1,4 +1,14 @@
 [
+  {
+    "version": "0.109.1",
+    "date": "2026-10-23",
+    "new": [
+      "Fejlesztés: a frontend oldalanként egy mappa (az oldal, a sávja, a store-ja és a definíciója), a rétegeket lint őrzi, a megosztott /watch oldalt pedig contract teszt tartja külön; a fejléc nem ismer oldalt, a feednek és a Plexnek saját mentett nézetei vannak."
+    ],
+    "fixed": [
+      "Mentett nézetek: egy alkalmazott, majd módosított nézet egy másik oldal meglátogatása után is aktív marad, a feedben és a Plexben is."
+    ]
+  },
   {
     "version": "0.109.0",
     "date": "2026-10-21",
diff --git a/frontend/src/components/ChannelAbout.tsx b/frontend/src/features/channel/ChannelAbout.tsx
similarity index 95%
rename from frontend/src/components/ChannelAbout.tsx
rename to frontend/src/features/channel/ChannelAbout.tsx
index 1508cf72..c38f70e0 100644
--- a/frontend/src/components/ChannelAbout.tsx
+++ b/frontend/src/features/channel/ChannelAbout.tsx
@@ -1,9 +1,9 @@
 import { useTranslation } from "react-i18next";
 import { ExternalLink } from "lucide-react";
-import type { ChannelDetail } from "../lib/api";
-import { linkify } from "../lib/linkify";
-import { Badge } from "./ui/Badge";
-import { languageName, regionName, vocab } from "../lib/vocab";
+import type { ChannelDetail } from "../../lib/api";
+import { linkify } from "../../lib/linkify";
+import { Badge } from "../../components/ui/Badge";
+import { languageName, regionName, vocab } from "../../lib/vocab";
 
 // --- About-tab metadata helpers (shared by the channel page and the manager's About overlay) ---
 // YouTube keywords are ONE space-separated string with multi-word tags quoted: gaming "let's play".
diff --git a/frontend/src/components/ChannelTags.editor.dom.test.tsx b/frontend/src/features/channel/ChannelTags.editor.dom.test.tsx
similarity index 98%
rename from frontend/src/components/ChannelTags.editor.dom.test.tsx
rename to frontend/src/features/channel/ChannelTags.editor.dom.test.tsx
index 00b908b3..115c7220 100644
--- a/frontend/src/components/ChannelTags.editor.dom.test.tsx
+++ b/frontend/src/features/channel/ChannelTags.editor.dom.test.tsx
@@ -16,7 +16,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import { ChannelTagsControl } from "./ChannelTags";
-import { api } from "../lib/api";
+import { api } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/ChannelTags.suggest.dom.test.tsx b/frontend/src/features/channel/ChannelTags.suggest.dom.test.tsx
similarity index 98%
rename from frontend/src/components/ChannelTags.suggest.dom.test.tsx
rename to frontend/src/features/channel/ChannelTags.suggest.dom.test.tsx
index 7449ab23..9be0af7e 100644
--- a/frontend/src/components/ChannelTags.suggest.dom.test.tsx
+++ b/frontend/src/features/channel/ChannelTags.suggest.dom.test.tsx
@@ -22,7 +22,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import { ChannelTagsControl, type SuggestedTag } from "./ChannelTags";
-import type { Tag } from "../lib/api";
+import type { Tag } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/ChannelTags.tsx b/frontend/src/features/channel/ChannelTags.tsx
similarity index 96%
rename from frontend/src/components/ChannelTags.tsx
rename to frontend/src/features/channel/ChannelTags.tsx
index 6df99b54..0b2721ee 100644
--- a/frontend/src/components/ChannelTags.tsx
+++ b/frontend/src/features/channel/ChannelTags.tsx
@@ -1,16 +1,16 @@
 import { useRef, useState } from "react";
 import { Plus, Sparkles } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { type Tag } from "../lib/api";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { fitChipsWithPill } from "../lib/chipOverflow";
-import { chipLaneClass, useChipOverflowFit } from "../lib/useChipOverflowFit";
-import { Chip, DismissibleChip } from "./ui/Chip";
-import { chipClass } from "./ui/chipStyles";
-import { MembershipMenu } from "./ui/MembershipMenu";
-import { useTags } from "../lib/useTags";
-import { SURFACE } from "./ui/surfaces";
+import { type Tag } from "../../lib/api";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { fitChipsWithPill } from "../../lib/chipOverflow";
+import { chipLaneClass, useChipOverflowFit } from "../../lib/useChipOverflowFit";
+import { Chip, DismissibleChip } from "../../components/ui/Chip";
+import { chipClass } from "../../components/ui/chipStyles";
+import { MembershipMenu } from "../../components/ui/MembershipMenu";
+import { useTags } from "../../lib/useTags";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // The channel tag surface, shared by the channel manager (table + cards) and the channel detail
 // page. Built on the popover platform. Two design goals it fixes over the old inline TagsCell:
diff --git a/frontend/src/components/TagManager.tsx b/frontend/src/features/channel/TagManager.tsx
similarity index 90%
rename from frontend/src/components/TagManager.tsx
rename to frontend/src/features/channel/TagManager.tsx
index 15915ee1..f93309a6 100644
--- a/frontend/src/components/TagManager.tsx
+++ b/frontend/src/features/channel/TagManager.tsx
@@ -1,22 +1,22 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { Plus, Trash2 } from "lucide-react";
-import { api, type Tag } from "../lib/api";
-import { notify } from "../lib/notifications";
-import { notifyActionError } from "../lib/actionErrors";
-import { useScrollFade } from "../lib/useScrollFade";
-import { Button } from "./ui/Button";
-import Modal from "./ui/Modal";
-import { useConfirm } from "./confirmContext";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { IconButton } from "./ui/IconButton";
-import { Pressable } from "./ui/Pressable";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
-import { useTags } from "../lib/useTags";
+import { api, type Tag } from "../../lib/api";
+import { notify } from "../../lib/notifications";
+import { notifyActionError } from "../../lib/actionErrors";
+import { useScrollFade } from "../../lib/useScrollFade";
+import { Button } from "../../components/ui/Button";
+import Modal from "../../components/ui/Modal";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { IconButton } from "../../components/ui/IconButton";
+import { Pressable } from "../../components/ui/Pressable";
+import { Input } from "../../components/ui/Input";
+import { SURFACE } from "../../components/ui/surfaces";
+import { useTags } from "../../lib/useTags";
 
 // One editable row: rename in place (commit on Enter/blur), delete with a confirm, and a
 // hover popover on the count listing the tagged channels (each a link that focuses it in the
diff --git a/frontend/src/components/comfortPin.dom.test.ts b/frontend/src/features/comfort/comfortPin.dom.test.ts
similarity index 98%
rename from frontend/src/components/comfortPin.dom.test.ts
rename to frontend/src/features/comfort/comfortPin.dom.test.ts
index 79e8f7fc..19100de1 100644
--- a/frontend/src/components/comfortPin.dom.test.ts
+++ b/frontend/src/features/comfort/comfortPin.dom.test.ts
@@ -8,7 +8,7 @@
 // disabled state shows an enabled row that no-ops.
 import { describe, it, expect } from "vitest";
 import { pinTargetForCard, shelfMoveTarget } from "./comfortPin";
-import type { DiscoverCard } from "../lib/api";
+import type { DiscoverCard } from "../../lib/api";
 
 const card = (over: Partial<DiscoverCard>): DiscoverCard =>
   ({
diff --git a/frontend/src/components/comfortPin.langSwitch.dom.test.tsx b/frontend/src/features/comfort/comfortPin.langSwitch.dom.test.tsx
similarity index 95%
rename from frontend/src/components/comfortPin.langSwitch.dom.test.tsx
rename to frontend/src/features/comfort/comfortPin.langSwitch.dom.test.tsx
index 568eadba..91389638 100644
--- a/frontend/src/components/comfortPin.langSwitch.dom.test.tsx
+++ b/frontend/src/features/comfort/comfortPin.langSwitch.dom.test.tsx
@@ -8,8 +8,8 @@ import { describe, it, expect, afterEach, vi } from "vitest";
 import type { ReactNode } from "react";
 import { renderHook, act, waitFor, cleanup } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { setLanguage } from "../i18n";
-import { api } from "../lib/api";
+import { setLanguage } from "../../i18n";
+import { api } from "../../lib/api";
 import { useComfortPin } from "./comfortPin";
 
 // Unmount BEFORE the language goes back: a mounted reader re-renders on the switch, and under a loaded
diff --git a/frontend/src/components/comfortPin.tsx b/frontend/src/features/comfort/comfortPin.tsx
similarity index 96%
rename from frontend/src/components/comfortPin.tsx
rename to frontend/src/features/comfort/comfortPin.tsx
index ce522587..1ecef7ec 100644
--- a/frontend/src/components/comfortPin.tsx
+++ b/frontend/src/features/comfort/comfortPin.tsx
@@ -3,12 +3,12 @@ import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Loader2, Pin, PinOff } from "lucide-react";
 
-import { plexLang } from "../i18n";
-import { api, type DiscoverCard, type PinKind } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { notify } from "../lib/notifications";
-import { qk } from "../lib/queryKeys";
-import { type ActionMenuItem } from "./ui/ActionMenu";
+import { plexLang } from "../../i18n";
+import { api, type DiscoverCard, type PinKind } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { notify } from "../../lib/notifications";
+import { qk } from "../../lib/queryKeys";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
 
 // "put this on my comfort shelf", from wherever you happen to be looking at the thing.
 //
diff --git a/frontend/src/components/DebugRecorder.dom.test.tsx b/frontend/src/features/diagnostics/DebugRecorder.dom.test.tsx
similarity index 95%
rename from frontend/src/components/DebugRecorder.dom.test.tsx
rename to frontend/src/features/diagnostics/DebugRecorder.dom.test.tsx
index 7043659b..5d928c22 100644
--- a/frontend/src/components/DebugRecorder.dom.test.tsx
+++ b/frontend/src/features/diagnostics/DebugRecorder.dom.test.tsx
@@ -10,8 +10,8 @@ import { useState } from "react";
 import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import type { DebugSession, Me } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import type { DebugSession, Me } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -58,8 +58,8 @@ const { order, session, startDebugSession, stopDebugSession, hold, past } = vi.h
   });
   return { order, session, startDebugSession, stopDebugSession, hold, past };
 });
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
@@ -70,8 +70,8 @@ vi.mock("../lib/api", async (importOriginal) => {
     },
   };
 });
-vi.mock("../lib/diagnostics", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/diagnostics")>();
+vi.mock("../../lib/diagnostics", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/diagnostics")>();
   return {
     ...actual,
     flushNow: () => {
@@ -82,16 +82,21 @@ vi.mock("../lib/diagnostics", async (importOriginal) => {
 });
 
 import DebugRecorder, { RecorderSettings } from "./DebugRecorder";
-import Modal from "./ui/Modal";
-import Toaster from "./ui/Toaster";
+import Modal from "../../components/ui/Modal";
+import Toaster from "../../components/ui/Toaster";
 import {
   closeComposer,
   openRecorderStart,
   setStepPrompt,
   useComposerSession,
-} from "../lib/debugRecorder";
-import { anyBlockingLayer, anyBlockingLayerAbove, pushLayer, removeLayer } from "../lib/layerStack";
-import { events } from "../lib/log";
+} from "../../lib/debugRecorder";
+import {
+  anyBlockingLayer,
+  anyBlockingLayerAbove,
+  pushLayer,
+  removeLayer,
+} from "../../lib/layerStack";
+import { events } from "../../lib/log";
 
 beforeEach(() => {
   order.length = 0;
diff --git a/frontend/src/components/DebugRecorder.tsx b/frontend/src/features/diagnostics/DebugRecorder.tsx
similarity index 95%
rename from frontend/src/components/DebugRecorder.tsx
rename to frontend/src/features/diagnostics/DebugRecorder.tsx
index abfeb44d..91e1033f 100644
--- a/frontend/src/components/DebugRecorder.tsx
+++ b/frontend/src/features/diagnostics/DebugRecorder.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Camera, Flag, Square } from "lucide-react";
 
-import { api, type DebugSession, type DebugSessionLevel } from "../lib/api";
-import { canCaptureTab } from "../lib/captureTab";
+import { api, type DebugSession, type DebugSessionLevel } from "../../lib/api";
+import { canCaptureTab } from "../../lib/captureTab";
 import {
   closeRecorderStart,
   onSessionChangeElsewhere,
@@ -15,21 +15,21 @@ import {
   useRecorderStartOpen,
   useStepCount,
   useStepPrompt,
-} from "../lib/debugRecorder";
-import { formatDateTimeSec, formatDuration } from "../lib/format";
-import { useLayer } from "../lib/layerStack";
-import { notify } from "../lib/notifications";
-import { qk } from "../lib/queryKeys";
-import { dockUnderToasts } from "../lib/toastDock";
-import { useMe } from "../lib/useMe";
-import { Button } from "./ui/Button";
-import Modal, { ModalFooter } from "./ui/Modal";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import SegmentedToggle from "./ui/SegmentedToggle";
+} from "../../lib/debugRecorder";
+import { formatDateTimeSec, formatDuration } from "../../lib/format";
+import { useLayer } from "../../lib/layerStack";
+import { notify } from "../../lib/notifications";
+import { qk } from "../../lib/queryKeys";
+import { dockUnderToasts } from "../../lib/toastDock";
+import { useMe } from "../../lib/useMe";
+import { Button } from "../../components/ui/Button";
+import Modal, { ModalFooter } from "../../components/ui/Modal";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
 import IssueComposer from "./IssueComposer";
 import { useDebugRecording } from "./useDebugRecording";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
+import { Input } from "../../components/ui/Input";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // The debug recorder: Start → reproduce → Stop.
 //
diff --git a/frontend/src/components/HistoryRow.tsx b/frontend/src/features/diagnostics/HistoryRow.tsx
similarity index 94%
rename from frontend/src/components/HistoryRow.tsx
rename to frontend/src/features/diagnostics/HistoryRow.tsx
index bf19aa8b..52b583cb 100644
--- a/frontend/src/components/HistoryRow.tsx
+++ b/frontend/src/features/diagnostics/HistoryRow.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 
-import { navItemAttrs } from "../lib/listNav";
-import { Pressable } from "./ui/Pressable";
+import { navItemAttrs } from "../../lib/listNav";
+import { Pressable } from "../../components/ui/Pressable";
 
 // One dense row of a history list — a background run, an admin action, a log line (./LogLine draws
 // its lines through this): its cells on one line, and the row opens in place to its details. One frame
diff --git a/frontend/src/components/IssueComposer.dom.test.tsx b/frontend/src/features/diagnostics/IssueComposer.dom.test.tsx
similarity index 99%
rename from frontend/src/components/IssueComposer.dom.test.tsx
rename to frontend/src/features/diagnostics/IssueComposer.dom.test.tsx
index 02d9fbfd..563b02d8 100644
--- a/frontend/src/components/IssueComposer.dom.test.tsx
+++ b/frontend/src/features/diagnostics/IssueComposer.dom.test.tsx
@@ -8,8 +8,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import type { DebugDraft, DebugSession, ServerLogRow } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import type { DebugDraft, DebugSession, ServerLogRow } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -38,8 +38,8 @@ const api = vi.hoisted(() => ({
   // The server's half-failure: the issue is committed, then an upload dies and the call 422s.
   failSendAfterCreate: false,
 }));
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
diff --git a/frontend/src/components/IssueComposer.tsx b/frontend/src/features/diagnostics/IssueComposer.tsx
similarity index 96%
rename from frontend/src/components/IssueComposer.tsx
rename to frontend/src/features/diagnostics/IssueComposer.tsx
index b10c3ec2..ff7a1024 100644
--- a/frontend/src/components/IssueComposer.tsx
+++ b/frontend/src/features/diagnostics/IssueComposer.tsx
@@ -3,11 +3,11 @@ import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ExternalLink, FileText, Plus, Server, X } from "lucide-react";
 
-import { api, type DebugScreenshot, type DebugSession, type ServerLogRow } from "../lib/api";
-import { closeComposer } from "../lib/debugRecorder";
-import { formatBytes, formatDateTimeSec, formatUnit } from "../lib/format";
-import { notify } from "../lib/notifications";
-import { useMe } from "../lib/useMe";
+import { api, type DebugScreenshot, type DebugSession, type ServerLogRow } from "../../lib/api";
+import { closeComposer } from "../../lib/debugRecorder";
+import { formatBytes, formatDateTimeSec, formatUnit } from "../../lib/format";
+import { notify } from "../../lib/notifications";
+import { useMe } from "../../lib/useMe";
 import {
   draftSteps,
   environment,
@@ -15,21 +15,21 @@ import {
   type DraftForm,
   type DraftStep,
   type IssueText,
-} from "../lib/issueDraft";
-import { moduleDef } from "../lib/modules";
-import type { Page } from "../lib/urlState";
-import { qk } from "../lib/queryKeys";
-import { focusIsUnclaimed } from "../lib/useFocusKeeper";
+} from "../../lib/issueDraft";
+import { moduleDef } from "../navigation/moduleRegistry";
+import type { Page } from "../../lib/urlState";
+import { qk } from "../../lib/queryKeys";
+import { focusIsUnclaimed } from "../../lib/useFocusKeeper";
 import { LEVEL_TAG, logClock } from "./logLineParts";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import Modal, { ModalFooter } from "./ui/Modal";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import SegmentedToggle from "./ui/SegmentedToggle";
-import { Textarea, Input } from "./ui/Input";
-import { Checkbox } from "./ui/NativeControls";
-import { SURFACE } from "./ui/surfaces";
-import RemoteImage from "./ui/RemoteImage";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import Modal, { ModalFooter } from "../../components/ui/Modal";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
+import { Textarea, Input } from "../../components/ui/Input";
+import { Checkbox } from "../../components/ui/NativeControls";
+import { SURFACE } from "../../components/ui/surfaces";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // The issue composer: one dialog — the draft on the left (title, description, the
 // steps drafted from the session, the environment), what goes with it on the right (the two logs,
diff --git a/frontend/src/components/LogLine.tsx b/frontend/src/features/diagnostics/LogLine.tsx
similarity index 97%
rename from frontend/src/components/LogLine.tsx
rename to frontend/src/features/diagnostics/LogLine.tsx
index 33b3c9ba..a6cf4712 100644
--- a/frontend/src/components/LogLine.tsx
+++ b/frontend/src/features/diagnostics/LogLine.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-import type { Level } from "../lib/log";
+import type { Level } from "../../lib/log";
 import HistoryRow from "./HistoryRow";
 import { LEVEL_TAG, logClock } from "./logLineParts";
 
diff --git a/frontend/src/components/logLineParts.ts b/frontend/src/features/diagnostics/logLineParts.ts
similarity index 95%
rename from frontend/src/components/logLineParts.ts
rename to frontend/src/features/diagnostics/logLineParts.ts
index e2a8f7b6..571e7a6d 100644
--- a/frontend/src/components/logLineParts.ts
+++ b/frontend/src/features/diagnostics/logLineParts.ts
@@ -1,4 +1,4 @@
-import type { Level } from "../lib/log";
+import type { Level } from "../../lib/log";
 
 // What a log line is drawn with — the level tags and the clock — shared by LogLine (both log
 // viewers) and the issue composer's review list, so a level reads the same everywhere. Apart from
diff --git a/frontend/src/components/useDebugRecording.ts b/frontend/src/features/diagnostics/useDebugRecording.ts
similarity index 91%
rename from frontend/src/components/useDebugRecording.ts
rename to frontend/src/features/diagnostics/useDebugRecording.ts
index 071ffcc1..c0a2b914 100644
--- a/frontend/src/components/useDebugRecording.ts
+++ b/frontend/src/features/diagnostics/useDebugRecording.ts
@@ -2,21 +2,21 @@ import { useCallback } from "react";
 import { useIsMutating, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 
-import { api, type DebugSession, type DebugSessionLevel } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { captureTab } from "../lib/captureTab";
+import { api, type DebugSession, type DebugSessionLevel } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { captureTab } from "../../lib/captureTab";
 import {
   announceSessionChange,
   closeRecorderStart,
   nextStep,
   openComposer,
   setStepPrompt,
-} from "../lib/debugRecorder";
-import { flushNow, liveSession } from "../lib/diagnostics";
-import { log } from "../lib/log";
-import { notify } from "../lib/notifications";
-import { qk } from "../lib/queryKeys";
-import { updateMeCache, useMe } from "../lib/useMe";
+} from "../../lib/debugRecorder";
+import { flushNow, liveSession } from "../../lib/diagnostics";
+import { log } from "../../lib/log";
+import { notify } from "../../lib/notifications";
+import { qk } from "../../lib/queryKeys";
+import { updateMeCache, useMe } from "../../lib/useMe";
 
 /** The debug recording's actions, shared by everything that drives it: the pill, Settings →
  *  Diagnosztika and the command palette. The session itself is `me.debug_session` — the server's
diff --git a/frontend/src/components/DownloadButton.tsx b/frontend/src/features/downloads/DownloadButton.tsx
similarity index 93%
rename from frontend/src/components/DownloadButton.tsx
rename to frontend/src/features/downloads/DownloadButton.tsx
index f68d5f38..a2cbc10f 100644
--- a/frontend/src/components/DownloadButton.tsx
+++ b/frontend/src/features/downloads/DownloadButton.tsx
@@ -1,5 +1,5 @@
 import { lazy, Suspense, useState } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
 import { Download } from "lucide-react";
@@ -7,8 +7,8 @@ import clsx from "clsx";
 // Lazy: the download dialog (+ its profile editor) loads only when a card's download button is
 // clicked, so it never ships in the feed chunk for the majority who just browse.
 const DownloadDialog = lazy(() => import("./DownloadDialog"));
-import { api } from "../lib/api";
-import { IconButton } from "./ui/IconButton";
+import { api } from "../../lib/api";
+import { IconButton } from "../../components/ui/IconButton";
 
 // Self-contained download affordance for a video card / the player. Reflects the video's current state from
 // the shared per-user download index (one polled query shared across every card).
diff --git a/frontend/src/components/DownloadDialog.dom.test.tsx b/frontend/src/features/downloads/DownloadDialog.dom.test.tsx
similarity index 91%
rename from frontend/src/components/DownloadDialog.dom.test.tsx
rename to frontend/src/features/downloads/DownloadDialog.dom.test.tsx
index 119e2100..27991fd3 100644
--- a/frontend/src/components/DownloadDialog.dom.test.tsx
+++ b/frontend/src/features/downloads/DownloadDialog.dom.test.tsx
@@ -7,7 +7,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
-import { api, type DownloadProfile } from "../lib/api";
+import { api, type DownloadProfile } from "../../lib/api";
 
 const h = vi.hoisted(() => ({
   prefs: new Map<string, unknown>(),
@@ -19,7 +19,7 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
 }));
-vi.mock("../lib/usePref", () => ({
+vi.mock("../../lib/usePref", () => ({
   usePref: <T,>(key: string, initial: T) => {
     const [value, setValue] = useState<T>(() =>
       h.prefs.has(key) ? (h.prefs.get(key) as T) : initial,
@@ -33,11 +33,11 @@ vi.mock("../lib/usePref", () => ({
     ];
   },
 }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify: h.notify,
 }));
-vi.mock("../lib/downloadQueue", () => ({ showInTray: h.showInTray }));
+vi.mock("../../lib/downloadQueue", () => ({ showInTray: h.showInTray }));
 
 import DownloadDialog from "./DownloadDialog";
 
diff --git a/frontend/src/components/DownloadDialog.tsx b/frontend/src/features/downloads/DownloadDialog.tsx
similarity index 84%
rename from frontend/src/components/DownloadDialog.tsx
rename to frontend/src/features/downloads/DownloadDialog.tsx
index 4b7e7d2b..c680672d 100644
--- a/frontend/src/components/DownloadDialog.tsx
+++ b/frontend/src/features/downloads/DownloadDialog.tsx
@@ -1,22 +1,22 @@
 import { lazy, Suspense, useState } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import Modal, { ModalFooter } from "./ui/Modal";
-import { Button } from "./ui/Button";
-import { api } from "../lib/api";
-import { invalidateDownloads } from "../lib/downloads";
+import Modal, { ModalFooter } from "../../components/ui/Modal";
+import { Button } from "../../components/ui/Button";
+import { api } from "../../lib/api";
+import { invalidateDownloads } from "../../lib/downloads";
 
 // Lazy: the full profile editor only opens from the dialog's "manage presets" affordance.
-const ProfileEditor = lazy(() => import("./ProfileEditor"));
-import { notify } from "../lib/notifications";
-import { notifyActionError } from "../lib/actionErrors";
-import { showInTray } from "../lib/downloadQueue";
-import { profileName } from "../lib/vocab";
-import { LS } from "../lib/storage";
-import { usePref } from "../lib/usePref";
-import FilterSelect from "./ui/FilterSelect";
-import { Input } from "./ui/Input";
+const ProfileEditor = lazy(() => import("../../modules/settings/ProfileEditor"));
+import { notify } from "../../lib/notifications";
+import { notifyActionError } from "../../lib/actionErrors";
+import { showInTray } from "../../lib/downloadQueue";
+import { profileName } from "../../lib/vocab";
+import { LS } from "../../lib/storage";
+import { usePref } from "../../lib/usePref";
+import FilterSelect from "../../components/ui/FilterSelect";
+import { Input } from "../../components/ui/Input";
 
 // Preset picker shown when the user hits Download on a card / in the player, or brings a link (the
 // Files link box, a paste anywhere). Enqueues via the API; its notice's "View" opens the tray on it.
diff --git a/frontend/src/components/DownloadIntake.tsx b/frontend/src/features/downloads/DownloadIntake.tsx
similarity index 97%
rename from frontend/src/components/DownloadIntake.tsx
rename to frontend/src/features/downloads/DownloadIntake.tsx
index 4297c9ae..abccd2b0 100644
--- a/frontend/src/components/DownloadIntake.tsx
+++ b/frontend/src/features/downloads/DownloadIntake.tsx
@@ -5,7 +5,7 @@ import {
   pasteIsForThePage,
   requestDownload,
   usePendingDownload,
-} from "../lib/downloadIntake";
+} from "../../lib/downloadIntake";
 
 const DownloadDialog = lazy(() => import("./DownloadDialog"));
 
diff --git a/frontend/src/components/DownloadTray.dom.test.tsx b/frontend/src/features/downloads/DownloadTray.dom.test.tsx
similarity index 94%
rename from frontend/src/components/DownloadTray.dom.test.tsx
rename to frontend/src/features/downloads/DownloadTray.dom.test.tsx
index b9775866..69096443 100644
--- a/frontend/src/components/DownloadTray.dom.test.tsx
+++ b/frontend/src/features/downloads/DownloadTray.dom.test.tsx
@@ -8,7 +8,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
-import { api, type QueueJob } from "../lib/api";
+import { api, type QueueJob } from "../../lib/api";
 
 const h = vi.hoisted(() => ({
   jobs: [] as unknown[],
@@ -28,7 +28,7 @@ vi.mock("react-i18next", async (importOriginal) => ({
       `${Array.isArray(key) ? key[0] : key}${o?.count !== undefined ? `:${o.count}` : ""}${o?.title ? `:${o.title}` : ""}`,
   }),
 }));
-vi.mock("../lib/useLiveQuery", () => ({
+vi.mock("../../lib/useLiveQuery", () => ({
   useLiveQuery: (_key: unknown, _fn: unknown, opts: { intervalMs: (d: unknown) => number }) => (
     (h.intervalMs = opts.intervalMs),
     {
@@ -42,7 +42,7 @@ vi.mock("../lib/useLiveQuery", () => ({
 }));
 // The prefs as state over a map that outlives a mount — a reload, as far as the tray can tell. How
 // usePref stores them is its own business (usePref.dom.test).
-vi.mock("../lib/usePref", () => ({
+vi.mock("../../lib/usePref", () => ({
   usePref: <T,>(key: string, initial: T) => {
     const [value, setValue] = useState<T>(() =>
       h.prefs.has(key) ? (h.prefs.get(key) as T) : initial,
@@ -56,21 +56,23 @@ vi.mock("../lib/usePref", () => ({
     ];
   },
 }));
-vi.mock("./filesContext", () => ({ useFilesActions: () => ({ openFile: h.openFile }) }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
-vi.mock("../lib/downloads", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/downloads")>()),
+vi.mock("../../modules/files/filesContext", () => ({
+  useFilesActions: () => ({ openFile: h.openFile }),
+}));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("../../lib/downloads", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/downloads")>()),
   quickShareLink: h.share,
 }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify: h.notify,
 }));
 
 import DownloadTray from "./DownloadTray";
-import { noteQueue, resetQueueWatch, showInTray } from "../lib/downloadQueue";
-import { pushLayer, removeLayer } from "../lib/layerStack";
-import { qk } from "../lib/queryKeys";
+import { noteQueue, resetQueueWatch, showInTray } from "../../lib/downloadQueue";
+import { pushLayer, removeLayer } from "../../lib/layerStack";
+import { qk } from "../../lib/queryKeys";
 
 beforeEach(() => {
   resetQueueWatch();
diff --git a/frontend/src/components/DownloadTray.menu.dom.test.tsx b/frontend/src/features/downloads/DownloadTray.menu.dom.test.tsx
similarity index 95%
rename from frontend/src/components/DownloadTray.menu.dom.test.tsx
rename to frontend/src/features/downloads/DownloadTray.menu.dom.test.tsx
index a28411e3..7b1caecd 100644
--- a/frontend/src/components/DownloadTray.menu.dom.test.tsx
+++ b/frontend/src/features/downloads/DownloadTray.menu.dom.test.tsx
@@ -10,8 +10,8 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
-import { api, type DownloadJob } from "../lib/api";
-import { menuGroups } from "./ui/menuGroups";
+import { api, type DownloadJob } from "../../lib/api";
+import { menuGroups } from "../../components/ui/menuGroups";
 
 const mocks = vi.hoisted(() => ({
   jobs: [] as unknown[],
@@ -28,8 +28,8 @@ vi.mock("react-i18next", async (importOriginal) => {
     useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
   };
 });
-vi.mock("./confirmContext", () => ({ useConfirm: () => mocks.confirm }));
-vi.mock("../lib/useLiveQuery", () => ({
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => mocks.confirm }));
+vi.mock("../../lib/useLiveQuery", () => ({
   useLiveQuery: (key: readonly unknown[]) => ({
     data: key[0] === "downloads" ? mocks.jobs : undefined,
     isError: false,
@@ -37,10 +37,12 @@ vi.mock("../lib/useLiveQuery", () => ({
     refetch: vi.fn(),
   }),
 }));
-vi.mock("../lib/usePref", () => ({
+vi.mock("../../lib/usePref", () => ({
   usePref: <T,>(_key: string, initial: T) => useState<T>(initial),
 }));
-vi.mock("./filesContext", () => ({ useFilesActions: () => ({ openFile: vi.fn() }) }));
+vi.mock("../../modules/files/filesContext", () => ({
+  useFilesActions: () => ({ openFile: vi.fn() }),
+}));
 
 globalThis.ResizeObserver ??= class {
   observe() {}
diff --git a/frontend/src/components/DownloadTray.tsx b/frontend/src/features/downloads/DownloadTray.tsx
similarity index 92%
rename from frontend/src/components/DownloadTray.tsx
rename to frontend/src/features/downloads/DownloadTray.tsx
index bee55acc..c7c80331 100644
--- a/frontend/src/components/DownloadTray.tsx
+++ b/frontend/src/features/downloads/DownloadTray.tsx
@@ -13,9 +13,9 @@ import {
   RotateCw,
   X,
 } from "lucide-react";
-import type { QueueJob } from "../lib/api";
-import { invalidateDownloads, quickShareLink } from "../lib/downloads";
-import { failCopyKeys, failTitleKey } from "../lib/downloadFailure";
+import type { QueueJob } from "../../lib/api";
+import { invalidateDownloads, quickShareLink } from "../../lib/downloads";
+import { failCopyKeys, failTitleKey } from "../../lib/downloadFailure";
 import {
   IN_FLIGHT,
   DOWNLOAD_PHASES,
@@ -27,31 +27,31 @@ import {
   useFinished,
   useRevealing,
   useUnannounced,
-} from "../lib/downloadQueue";
-import { anyBlockingLayer } from "../lib/layerStack";
-import { focusNavItem, navItemAttrs } from "../lib/listNav";
-import { notify } from "../lib/notifications";
-import { qk } from "../lib/queryKeys";
-import { LS } from "../lib/storage";
-import { useLiveQuery } from "../lib/useLiveQuery";
-import { usePref } from "../lib/usePref";
+} from "../../lib/downloadQueue";
+import { anyBlockingLayer } from "../../lib/layerStack";
+import { focusNavItem, navItemAttrs } from "../../lib/listNav";
+import { notify } from "../../lib/notifications";
+import { qk } from "../../lib/queryKeys";
+import { LS } from "../../lib/storage";
+import { useLiveQuery } from "../../lib/useLiveQuery";
+import { usePref } from "../../lib/usePref";
 import { ErrorModal } from "./downloadModals";
 import { jobTitle } from "./downloadTitle";
-import { sourceLabel } from "./fileFolders";
-import { useFilesActions } from "./filesContext";
+import { useFilesActions } from "../../modules/files";
+import { sourceLabel } from "../folders/fileFolders";
 import { useDownloadActions } from "./useDownloadActions";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { setCornerLift } from "./ui/backToTopState";
-import { Button } from "./ui/Button";
-import { ContextMenu } from "./ui/ContextMenu";
-import { IconButton } from "./ui/IconButton";
-import { menuGroups } from "./ui/menuGroups";
-import { MoreButton } from "./ui/MoreButton";
-import NavGrid from "./ui/NavGrid";
-import { Pressable } from "./ui/Pressable";
-import { CONTENT_ID } from "./ui/landmarks";
-import { SURFACE } from "./ui/surfaces";
-import { useContextMenu } from "./ui/useContextMenu";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { setCornerLift } from "../../components/ui/backToTopState";
+import { Button } from "../../components/ui/Button";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { IconButton } from "../../components/ui/IconButton";
+import { menuGroups } from "../../components/ui/menuGroups";
+import { MoreButton } from "../../components/ui/MoreButton";
+import NavGrid from "../../components/ui/NavGrid";
+import { Pressable } from "../../components/ui/Pressable";
+import { CONTENT_ID } from "../../components/ui/landmarks";
+import { SURFACE } from "../../components/ui/surfaces";
+import { useContextMenu } from "../../components/ui/useContextMenu";
 
 // The running downloads, app-wide (DESIGN.md "Running downloads"): a tray in the bottom-right corner,
 // up only while something waits, runs or failed — and what finished in this tab, "Done · Open",
diff --git a/frontend/src/components/downloadModals.error.dom.test.tsx b/frontend/src/features/downloads/downloadModals.error.dom.test.tsx
similarity index 96%
rename from frontend/src/components/downloadModals.error.dom.test.tsx
rename to frontend/src/features/downloads/downloadModals.error.dom.test.tsx
index 91873dce..20654c66 100644
--- a/frontend/src/components/downloadModals.error.dom.test.tsx
+++ b/frontend/src/features/downloads/downloadModals.error.dom.test.tsx
@@ -4,7 +4,7 @@
 // downloader did not understand (an update on the server cures it). Never for an unclassified one.
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import type { DownloadJob } from "../lib/api";
+import type { DownloadJob } from "../../lib/api";
 import { ErrorModal } from "./downloadModals";
 
 vi.mock("react-i18next", async (importOriginal) => ({
diff --git a/frontend/src/components/downloadModals.tsx b/frontend/src/features/downloads/downloadModals.tsx
similarity index 94%
rename from frontend/src/components/downloadModals.tsx
rename to frontend/src/features/downloads/downloadModals.tsx
index 5f901257..97deb656 100644
--- a/frontend/src/components/downloadModals.tsx
+++ b/frontend/src/features/downloads/downloadModals.tsx
@@ -1,14 +1,14 @@
 import { useState } from "react";
-import { invalidateDownloads } from "../lib/downloads";
+import { invalidateDownloads } from "../../lib/downloads";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Plus, Trash2 } from "lucide-react";
-import Modal, { ModalFooter } from "./ui/Modal";
-import { api, type DownloadJob } from "../lib/api";
-import { Button } from "./ui/Button";
+import Modal, { ModalFooter } from "../../components/ui/Modal";
+import { api, type DownloadJob } from "../../lib/api";
+import { Button } from "../../components/ui/Button";
 import { IconBtn } from "./downloadRow";
-import { failCopyKeys, failTitleKey } from "../lib/downloadFailure";
-import { Input } from "./ui/Input";
+import { failCopyKeys, failTitleKey } from "../../lib/downloadFailure";
+import { Input } from "../../components/ui/Input";
 
 // Per-item user modals (self-contained, prop-driven): a library file's details (Files) and a failed
 // download's reasons (the tray).
diff --git a/frontend/src/components/downloadRow.dom.test.tsx b/frontend/src/features/downloads/downloadRow.dom.test.tsx
similarity index 98%
rename from frontend/src/components/downloadRow.dom.test.tsx
rename to frontend/src/features/downloads/downloadRow.dom.test.tsx
index f7b17dec..47e7b335 100644
--- a/frontend/src/components/downloadRow.dom.test.tsx
+++ b/frontend/src/features/downloads/downloadRow.dom.test.tsx
@@ -14,7 +14,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import { JobThumb } from "./downloadRow";
-import type { DownloadJob } from "../lib/api";
+import type { DownloadJob } from "../../lib/api";
 
 const baseJob: DownloadJob = {
   id: 1,
diff --git a/frontend/src/components/downloadRow.tsx b/frontend/src/features/downloads/downloadRow.tsx
similarity index 95%
rename from frontend/src/components/downloadRow.tsx
rename to frontend/src/features/downloads/downloadRow.tsx
index b9969c2f..97685ec7 100644
--- a/frontend/src/components/downloadRow.tsx
+++ b/frontend/src/features/downloads/downloadRow.tsx
@@ -2,11 +2,11 @@ import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { File, Film, Music } from "lucide-react";
 import clsx from "clsx";
-import { DOWNLOAD_PHASES } from "../lib/downloadQueue";
-import { api, type DownloadJob } from "../lib/api";
-import { IconButton } from "./ui/IconButton";
-import { MediaProgress } from "./ui/MediaCard";
-import RemoteImage from "./ui/RemoteImage";
+import { DOWNLOAD_PHASES } from "../../lib/downloadQueue";
+import { api, type DownloadJob } from "../../lib/api";
+import { IconButton } from "../../components/ui/IconButton";
+import { MediaProgress } from "../../components/ui/MediaCard";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // The small shared primitives of a download (status pill, icon button, the job's picture), all purely
 // prop-driven: the admin Storage tab shows the status, the Files list and grid the picture, the
diff --git a/frontend/src/components/downloadTitle.ts b/frontend/src/features/downloads/downloadTitle.ts
similarity index 94%
rename from frontend/src/components/downloadTitle.ts
rename to frontend/src/features/downloads/downloadTitle.ts
index df212595..0246725f 100644
--- a/frontend/src/components/downloadTitle.ts
+++ b/frontend/src/features/downloads/downloadTitle.ts
@@ -1,4 +1,4 @@
-import type { DownloadJob } from "../lib/api";
+import type { DownloadJob } from "../../lib/api";
 
 // A download job's display title (a user rename wins over the extracted asset title), shared by the
 // tray, the Files list, the admin Storage tab and the library player.
diff --git a/frontend/src/components/useDownloadActions.tsx b/frontend/src/features/downloads/useDownloadActions.tsx
similarity index 91%
rename from frontend/src/components/useDownloadActions.tsx
rename to frontend/src/features/downloads/useDownloadActions.tsx
index c7e62e56..436f3b95 100644
--- a/frontend/src/components/useDownloadActions.tsx
+++ b/frontend/src/features/downloads/useDownloadActions.tsx
@@ -1,14 +1,14 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { Ban, Pause, Play, RefreshCw } from "lucide-react";
-import { api, type DownloadJob, type DownloadJobKind } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { invalidateDownloads } from "../lib/downloads";
-import { useConfirm } from "./confirmContext";
-import { useCopyItems } from "./copyItems";
+import { api, type DownloadJob, type DownloadJobKind } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { invalidateDownloads } from "../../lib/downloads";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { useCopyItems } from "../../components/ui/copyItems";
 import { jobTitle } from "./downloadTitle";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { menuGroups } from "./ui/menuGroups";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { menuGroups } from "../../components/ui/menuGroups";
 
 // A queued download's ONE action list: the row's "…", its right-click, long-press and Shift+F10. The
 // row keeps its primary action (pause / resume / retry) and its state (the error and its details) in
diff --git a/frontend/src/components/ActiveFilterChips.tsx b/frontend/src/features/filters/ActiveFilterChips.tsx
similarity index 92%
rename from frontend/src/components/ActiveFilterChips.tsx
rename to frontend/src/features/filters/ActiveFilterChips.tsx
index 15aeb6b7..34e203e5 100644
--- a/frontend/src/components/ActiveFilterChips.tsx
+++ b/frontend/src/features/filters/ActiveFilterChips.tsx
@@ -1,16 +1,16 @@
 import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Filter, X } from "lucide-react";
-import type { ActiveFilter } from "../lib/useActiveFilters";
-import { decideChipLayout } from "../lib/chipOverflow";
-import { chipLaneClass, useChipOverflowFit } from "../lib/useChipOverflowFit";
-import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { Button } from "./ui/Button";
-import { Chip } from "./ui/Chip";
-import { chipClass } from "./ui/chipStyles";
-import { ChipLabelPending } from "./ui/Skeleton";
-import { SURFACE } from "./ui/surfaces";
+import type { ActiveFilter } from "../../lib/useActiveFilters";
+import { decideChipLayout } from "../../lib/chipOverflow";
+import { chipLaneClass, useChipOverflowFit } from "../../lib/useChipOverflowFit";
+import { PopoverItem, PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { Button } from "../../components/ui/Button";
+import { Chip } from "../../components/ui/Chip";
+import { chipClass } from "../../components/ui/chipStyles";
+import { ChipLabelPending } from "../../components/ui/Skeleton";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // The applied-filter row above the feed: every narrowing currently in force, each removable on its
 // own. It exists because the filter panel now sits collapsed as a tab — without this you'd have to
diff --git a/frontend/src/components/PersonalViewsModal.dom.test.tsx b/frontend/src/features/filters/PersonalViewsModal.dom.test.tsx
similarity index 97%
rename from frontend/src/components/PersonalViewsModal.dom.test.tsx
rename to frontend/src/features/filters/PersonalViewsModal.dom.test.tsx
index fa944ae5..9447e587 100644
--- a/frontend/src/components/PersonalViewsModal.dom.test.tsx
+++ b/frontend/src/features/filters/PersonalViewsModal.dom.test.tsx
@@ -63,7 +63,8 @@ const CTX = {
   toggleDefault: vi.fn(async () => {}),
 };
 
-vi.mock("./savedViewsContext", () => ({
+vi.mock("./savedViewsContext", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./savedViewsContext")>()),
   useSavedViews: () => ({
     ...CTX,
     activeViewId: h.activeViewId,
@@ -80,8 +81,8 @@ vi.mock("./savedViewsContext", () => ({
 }));
 
 import PersonalViewsModal from "./PersonalViewsModal";
-import { api } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 function mount() {
   const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
diff --git a/frontend/src/components/PersonalViewsModal.tsx b/frontend/src/features/filters/PersonalViewsModal.tsx
similarity index 93%
rename from frontend/src/components/PersonalViewsModal.tsx
rename to frontend/src/features/filters/PersonalViewsModal.tsx
index 8976ee66..25a4aa52 100644
--- a/frontend/src/components/PersonalViewsModal.tsx
+++ b/frontend/src/features/filters/PersonalViewsModal.tsx
@@ -17,28 +17,33 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { coercePlexFilters, type FeedFilters, type PlexFilters, type SavedView } from "../lib/api";
-import Modal from "./ui/Modal";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
+import {
+  coercePlexFilters,
+  type FeedFilters,
+  type PlexFilters,
+  type SavedView,
+} from "../../lib/api";
+import Modal from "../../components/ui/Modal";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
 import { useSavedViews, asFilters } from "./savedViewsContext";
-import { useActiveFilters } from "../lib/useActiveFilters";
-import { buildPlexActiveFilters } from "./usePlexActiveFilters";
-import { useUndoable } from "../lib/useUndoable";
-import UndoToolbar from "./ui/UndoToolbar";
-import { useSortableA11y, useSortableItem } from "./ui/sortableA11y";
-import { DragHandle } from "./ui/DragHandle";
-import { OrderButtons } from "./ui/OrderButtons";
-import { Pressable } from "./ui/Pressable";
-import { DismissibleChip } from "./ui/Chip";
-import { Input } from "./ui/Input";
+import { useActiveFilters } from "../../lib/useActiveFilters";
+import { buildPlexActiveFilters } from "../../lib/plexActiveFilters";
+import { useUndoable } from "../../lib/useUndoable";
+import UndoToolbar from "../../components/ui/UndoToolbar";
+import { useSortableA11y, useSortableItem } from "../../components/ui/sortableA11y";
+import { DragHandle } from "../../components/ui/DragHandle";
+import { OrderButtons } from "../../components/ui/OrderButtons";
+import { Pressable } from "../../components/ui/Pressable";
+import { DismissibleChip } from "../../components/ui/Chip";
+import { Input } from "../../components/ui/Input";
 
 // Master–detail manager for saved ("personal") views: the left column lists the views (drag to
 // reorder, or the selected one's order buttons on the right) plus a "save the current filters" input;
 // the right column shows the selected view's name (renamable), its captured filters as REMOVABLE
 // chips (pruning writes back to the stored view, undoable), its default flag, its place in the order,
 // apply, save-current, and delete. Opened from the filter panel's title or the saved-views popover;
-// all mutations flow through SavedViewsProvider.
+// all mutations flow through the module's saved-views store (useSavedViewsStore).
 function ViewRow({
   view,
   selected,
diff --git a/frontend/src/components/SavedViewsPopover.dom.test.tsx b/frontend/src/features/filters/SavedViewsPopover.dom.test.tsx
similarity index 100%
rename from frontend/src/components/SavedViewsPopover.dom.test.tsx
rename to frontend/src/features/filters/SavedViewsPopover.dom.test.tsx
diff --git a/frontend/src/components/SavedViewsPopover.tsx b/frontend/src/features/filters/SavedViewsPopover.tsx
similarity index 89%
rename from frontend/src/components/SavedViewsPopover.tsx
rename to frontend/src/features/filters/SavedViewsPopover.tsx
index 0ba58e3c..24d8aec5 100644
--- a/frontend/src/components/SavedViewsPopover.tsx
+++ b/frontend/src/features/filters/SavedViewsPopover.tsx
@@ -1,13 +1,13 @@
 import { useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Settings2 } from "lucide-react";
-import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
-import { closeThenAct, useAnchoredPopover } from "./ui/anchoredPopoverHooks";
+import { PopoverItem, PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { closeThenAct, useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
 import { useSavedViews } from "./savedViewsContext";
-import { IconButton } from "./ui/IconButton";
-import { MenuCheck } from "./ui/MenuCheck";
-import { SURFACE } from "./ui/surfaces";
-import { SelectTrigger } from "./ui/SelectTrigger";
+import { IconButton } from "../../components/ui/IconButton";
+import { MenuCheck } from "../../components/ui/MenuCheck";
+import { SURFACE } from "../../components/ui/surfaces";
+import { SelectTrigger } from "../../components/ui/SelectTrigger";
 
 // The saved-views quick-picker. The filter-panel header's icon (and the toolbar's view chip) use it as
 // their trigger: click → a popover list of the user's saved views (apply on click, the active one
diff --git a/frontend/src/components/SelectedViewChip.tsx b/frontend/src/features/filters/SelectedViewChip.tsx
similarity index 100%
rename from frontend/src/components/SelectedViewChip.tsx
rename to frontend/src/features/filters/SelectedViewChip.tsx
diff --git a/frontend/src/components/savedViewsContext.ts b/frontend/src/features/filters/savedViewsContext.ts
similarity index 58%
rename from frontend/src/components/savedViewsContext.ts
rename to frontend/src/features/filters/savedViewsContext.ts
index b3fc74d7..0d875c2d 100644
--- a/frontend/src/components/savedViewsContext.ts
+++ b/frontend/src/features/filters/savedViewsContext.ts
@@ -1,8 +1,11 @@
 import { createContext, useContext } from "react";
-import { coerceTagModes, coerceUntagged, type FeedFilters, type SavedView } from "../lib/api";
+import { coerceTagModes, coerceUntagged, type FeedFilters, type SavedView } from "../../lib/api";
 
-// The saved-views context + hook (and the feed blob coercion its consumers share), split out of
-// SavedViewsProvider so that file exports only components (Fast Refresh).
+// The saved-views contexts + hooks (and the feed blob coercion their consumers share). Each module that
+// has saved views (the feed, Plex) owns a store of them (useSavedViewsStore) under its own context, made
+// by `createSavedViewsStore`. The shared UI here (popover, chip, modal) reads `useSavedViews()`: the
+// views of the module whose page or rail it sits in, which that page or rail hands down with
+// `SavedViewsScope`.
 
 // A saved view's `filters` is an opaque JSON blob from the DB; coerce it to the module's shape before it
 // reaches app state or a serializer (an older build's dropped field just falls away — NOT a migration).
@@ -41,10 +44,25 @@ export interface SavedViewsContext {
   reorder: (nextIds: number[]) => Promise<void>;
 }
 
-export const SavedViewsCtx = createContext<SavedViewsContext | null>(null);
+// One module's store: the context its provider fills and the hook its own code (and the shell) reads.
+export function createSavedViewsStore(owner: string) {
+  const Ctx = createContext<SavedViewsContext | null>(null);
+  Ctx.displayName = `${owner}SavedViews`;
+  function useModuleSavedViews(): SavedViewsContext {
+    const ctx = useContext(Ctx);
+    if (!ctx) throw new Error(`${owner}'s saved views are read outside its store`);
+    return ctx;
+  }
+  return { Provider: Ctx.Provider, useViews: useModuleSavedViews };
+}
+
+// The scope the shared UI reads: the views of the module it is rendered for
+// (`<SavedViewsScope value={useFeedSavedViews()}>`).
+const SavedViewsScopeCtx = createContext<SavedViewsContext | null>(null);
+export const SavedViewsScope = SavedViewsScopeCtx.Provider;
 
 export function useSavedViews(): SavedViewsContext {
-  const ctx = useContext(SavedViewsCtx);
-  if (!ctx) throw new Error("useSavedViews must be used within a SavedViewsProvider");
+  const ctx = useContext(SavedViewsScopeCtx);
+  if (!ctx) throw new Error("useSavedViews must be used within a SavedViewsScope");
   return ctx;
 }
diff --git a/frontend/src/features/filters/useSavedViewsStore.ts b/frontend/src/features/filters/useSavedViewsStore.ts
new file mode 100644
index 00000000..cc599934
--- /dev/null
+++ b/frontend/src/features/filters/useSavedViewsStore.ts
@@ -0,0 +1,190 @@
+import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { qk } from "../../lib/queryKeys";
+import { api, type SavedView } from "../../lib/api";
+import { pickDefaultToSeed, preferSticky } from "../../lib/savedViews";
+import { notifyActionError } from "../../lib/actionErrors";
+import { ownKey } from "../../lib/storage";
+import { useConfirm } from "../../components/ui/confirmContext";
+import type { SavedViewsContext, ViewSource } from "./savedViewsContext";
+
+// Saved "smart views" serve two modules — the feed and Plex — and each owns one store of them in its
+// own folder, built on this hook. The two never switch into each other: a visit to Plex leaves the
+// feed's active view where it was.
+
+// The per-module wiring the generic logic runs on: the live filters, how to apply a view's, a stable
+// signature for matching, coercion, and what to strip before saving (the feed's transient shuffle seed).
+export interface SavedViewsConfig {
+  source: ViewSource;
+  filters: Record<string, unknown>;
+  setFilters: (f: Record<string, unknown>) => void;
+  keyOf: (f: Record<string, unknown>) => string;
+  asFilters: (raw: Record<string, unknown>) => Record<string, unknown>;
+  stripForSave: (f: Record<string, unknown>) => Record<string, unknown>;
+  /** Whether this module is a genuinely fresh start the starred default may seed on first load: no
+   *  stored filters for the active account, and — feed only — no URL filter override. */
+  canSeedDefault: () => boolean;
+  /** Whether to ask for the views now (a signed-in account is required on top of this). */
+  enabled: boolean;
+  /** Whether the module's page is the one on screen. Its manage modal belongs to that visit: leaving
+   *  the page closes it, so it does not reopen by itself on the way back. */
+  onScreen: boolean;
+}
+
+// True once this account has its own persisted filters for `lsKey` — the signal that the last
+// view / manual tweaks (not the default) should win. Account unknown or localStorage unavailable →
+// report "stored" so a default never seeds blind over an indeterminate state.
+export function storedFiltersPresent(lsKey: string): boolean {
+  const key = ownKey(lsKey);
+  if (!key) return true;
+  try {
+    return localStorage.getItem(key) != null;
+  } catch {
+    return true;
+  }
+}
+
+export function useSavedViewsStore(cfg: SavedViewsConfig): SavedViewsContext {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const confirm = useConfirm();
+
+  const source = cfg.source;
+  // Passive observer of the account BootGate fetches: the providers mount for a signed-out tab too
+  // (the public landing), and saved views are per-account, so asking for "nobody's" views only logs
+  // a 401 on the landing page. Enabled once a signed-in account is cached.
+  const { data: me } = useQuery({ queryKey: qk.me(), queryFn: api.me, enabled: false });
+  const viewsQuery = useQuery({
+    queryKey: qk.savedViews(source),
+    queryFn: () => api.savedViews(source),
+    enabled: !!me && cfg.enabled,
+  });
+  const views = useMemo(() => viewsQuery.data ?? [], [viewsQuery.data]);
+
+  const [stickyId, setStickyId] = useState<number | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  // Adjusted during render, not from an effect, so the frame after leaving never commits it open.
+  if (modalOpen && !cfg.onScreen) setModalOpen(false);
+
+  // The ONE default-application path for both modules. On the views query's FIRST resolve, seed the
+  // starred default view's filters — but only into a genuinely fresh module (no stored filters, no URL
+  // override; see cfg.canSeedDefault). Applying via cfg.setFilters persists it, so it happens once and
+  // the normal last-view-wins path takes over, exactly as the storage semantics document. This replaced
+  // the feed-only localStorage mirror that raced FeedFiltersProvider's login effect (on a fresh browser
+  // the feed could seed DEFAULT_FILTERS and never re-apply until a reload) — and it gives Plex the
+  // default it previously never applied at all. One-shot, so a background refetch never re-seeds over
+  // the filters you're editing. canSeedDefault() reads the account's stored-filters key, which is always
+  // readable here: BootGate hands the browser's local state to the account (claimLocalData) before
+  // this store mounts.
+  const seededRef = useRef(false);
+  // `cfg` changes on every filter edit, so it is read through an effect event: the seed must fire on
+  // the views query's first resolve and never again, which `seededRef` enforces. Listing cfg would
+  // re-arm nothing (the guard still holds) but would re-run the effect on every keystroke.
+  const latestCfg = useEffectEvent(() => cfg);
+  useEffect(() => {
+    const data = viewsQuery.data;
+    if (!data || seededRef.current) return;
+    seededRef.current = true;
+    const c = latestCfg();
+    const def = pickDefaultToSeed(data, c.canSeedDefault());
+    // The name follows by itself: `preferSticky` picks the starred default among same-filter views.
+    if (def) c.setFilters(c.asFilters(def.filters));
+  }, [viewsQuery.data]);
+
+  const currentKey = cfg.keyOf(cfg.filters);
+  const activeView = useMemo(
+    () =>
+      preferSticky(
+        views.filter((v) => cfg.keyOf(v.filters) === currentKey),
+        stickyId,
+      ),
+    [views, currentKey, stickyId, cfg],
+  );
+  // The sticky id follows whichever view is active — also adjusted during render. It converges by
+  // construction: preferSticky returns the sticky match when there is one, so the very write below
+  // makes its own condition false on the next pass.
+  if (activeView && activeView.id !== stickyId) setStickyId(activeView.id);
+
+  const stickyView = useMemo(
+    () => (stickyId == null ? null : (views.find((v) => v.id === stickyId) ?? null)),
+    [views, stickyId],
+  );
+  const displayView = activeView ?? stickyView;
+  const isDirty = displayView != null && activeView == null;
+
+  const refresh = () => void qc.invalidateQueries({ queryKey: qk.savedViews(source) });
+  async function runViewMutation(fn: () => Promise<unknown>, failMsg: string): Promise<boolean> {
+    let ok = true;
+    try {
+      await fn();
+    } catch (e) {
+      notifyActionError(e, failMsg);
+      ok = false;
+    }
+    refresh();
+    return ok;
+  }
+
+  return {
+    source,
+    views,
+    loading: viewsQuery.isLoading,
+    activeViewId: activeView?.id ?? null,
+    displayView,
+    isDirty,
+    modalOpen,
+    openModal: () => setModalOpen(true),
+    closeModal: () => setModalOpen(false),
+    apply: (v) => {
+      cfg.setFilters(cfg.asFilters(v.filters));
+      setStickyId(v.id);
+    },
+    clearActive: () => setStickyId(null),
+    create: async (name) => {
+      const clean = name.trim();
+      if (!clean) return false;
+      return runViewMutation(
+        () => api.createView(clean, cfg.stripForSave(cfg.filters), source),
+        t("views.actionFailed"),
+      );
+    },
+    rename: async (id, name) => {
+      const next = name.trim();
+      if (!next) return false;
+      return runViewMutation(() => api.updateView(id, { name: next }), t("views.actionFailed"));
+    },
+    updateFilters: (id, filters) =>
+      runViewMutation(() => api.updateView(id, { filters }), t("views.actionFailed")),
+    saveCurrent: async (id) => {
+      const filters = cfg.stripForSave(cfg.filters);
+      const ok = await runViewMutation(
+        () => api.updateView(id, { filters }),
+        t("views.actionFailed"),
+      );
+      return ok ? filters : null;
+    },
+    toggleDefault: (v) =>
+      runViewMutation(
+        () => api.updateView(v.id, { is_default: !v.is_default }),
+        t("views.actionFailed"),
+      ).then(() => undefined),
+    remove: async (v) => {
+      const ok = await confirm({
+        message: t("views.deleteConfirm", { name: v.name }),
+        confirmLabel: t("views.delete"),
+        danger: true,
+      });
+      if (!ok) return false;
+      if (stickyId === v.id) setStickyId(null);
+      return runViewMutation(() => api.deleteView(v.id), t("views.actionFailed"));
+    },
+    reorder: async (nextIds) => {
+      qc.setQueryData<SavedView[]>(
+        qk.savedViews(source),
+        nextIds.map((id) => views.find((v) => v.id === id)!).filter(Boolean),
+      );
+      await runViewMutation(() => api.reorderViews(nextIds), t("views.reorderFailed"));
+    },
+  };
+}
diff --git a/frontend/src/components/fileFolders.tsx b/frontend/src/features/folders/fileFolders.tsx
similarity index 94%
rename from frontend/src/components/fileFolders.tsx
rename to frontend/src/features/folders/fileFolders.tsx
index 4705e9d5..0971a474 100644
--- a/frontend/src/components/fileFolders.tsx
+++ b/frontend/src/features/folders/fileFolders.tsx
@@ -1,6 +1,6 @@
 import { Film, Folder, Globe, Server, Upload, type LucideIcon } from "lucide-react";
-import { YouTubeIcon } from "../lib/brandIcons";
-import type { FileFolder } from "../lib/api";
+import { YouTubeIcon } from "../../lib/brandIcons";
+import type { FileFolder } from "../../lib/api";
 
 // A library folder's and a file's origin, named and drawn. The backend sends a source folder's KEY
 // (`youtube`, `plex`, `upload`, `site:<host>`, see backend downloads/folders.py) and leaves
diff --git a/frontend/src/components/PaletteLauncher.tsx b/frontend/src/features/header/PaletteLauncher.tsx
similarity index 93%
rename from frontend/src/components/PaletteLauncher.tsx
rename to frontend/src/features/header/PaletteLauncher.tsx
index b486e42a..a6c4e804 100644
--- a/frontend/src/components/PaletteLauncher.tsx
+++ b/frontend/src/features/header/PaletteLauncher.tsx
@@ -1,10 +1,10 @@
 import { useTranslation } from "react-i18next";
 import { Command } from "lucide-react";
 
-import { SHORTCUTS, formatChord, openPalette } from "../lib/keymap";
-import { Pressable } from "./ui/Pressable";
+import { SHORTCUTS, formatChord, openPalette } from "../../lib/keymap";
+import { Pressable } from "../../components/ui/Pressable";
 import clsx from "clsx";
-import { fieldClass } from "./ui/fieldStyles";
+import { fieldClass } from "../../components/ui/fieldStyles";
 
 // The visible way into the command palette (and, from there, the shortcut sheet). Ctrl/Cmd+K and
 // `h` had no entry point anywhere but a palette row — the one in-app pointer to the cheat sheet sat
diff --git a/frontend/src/components/SearchBar.dom.test.tsx b/frontend/src/features/header/SearchBar.dom.test.tsx
similarity index 100%
rename from frontend/src/components/SearchBar.dom.test.tsx
rename to frontend/src/features/header/SearchBar.dom.test.tsx
diff --git a/frontend/src/components/SearchBar.keys.dom.test.tsx b/frontend/src/features/header/SearchBar.keys.dom.test.tsx
similarity index 95%
rename from frontend/src/components/SearchBar.keys.dom.test.tsx
rename to frontend/src/features/header/SearchBar.keys.dom.test.tsx
index 1a1b5914..6b88743b 100644
--- a/frontend/src/components/SearchBar.keys.dom.test.tsx
+++ b/frontend/src/features/header/SearchBar.keys.dom.test.tsx
@@ -5,9 +5,9 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, render, screen } from "@testing-library/react";
 import SearchBar from "./SearchBar";
-import KeyboardHelp from "./ui/KeyboardHelp";
-import { closeKeyboardHelp, toggleKeyboardHelp } from "../lib/keymap";
-import { pushLayer, removeLayer } from "../lib/layerStack";
+import KeyboardHelp from "../../components/ui/KeyboardHelp";
+import { closeKeyboardHelp, toggleKeyboardHelp } from "../../lib/keymap";
+import { pushLayer, removeLayer } from "../../lib/layerStack";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/features/header/SearchBar.tsx
similarity index 95%
rename from frontend/src/components/SearchBar.tsx
rename to frontend/src/features/header/SearchBar.tsx
index c617b389..3a295325 100644
--- a/frontend/src/components/SearchBar.tsx
+++ b/frontend/src/features/header/SearchBar.tsx
@@ -8,12 +8,12 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { Search, X } from "lucide-react";
-import { useSearchFocusKey } from "../lib/keymap";
+import { useSearchFocusKey } from "../../lib/keymap";
 import { PaletteKeycap } from "./PaletteLauncher";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { InnerInput } from "./ui/Input";
-import { fieldClass } from "./ui/fieldStyles";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { InnerInput } from "../../components/ui/Input";
+import { fieldClass } from "../../components/ui/fieldStyles";
 
 // The floating search pill in the top header. One component for every module that searches
 // (feed, Plex, channels, playlists): a 40px glass pill with the A4 field edge (the page's one hero
diff --git a/frontend/src/features/header/blurActive.ts b/frontend/src/features/header/blurActive.ts
new file mode 100644
index 00000000..4f164d94
--- /dev/null
+++ b/frontend/src/features/header/blurActive.ts
@@ -0,0 +1,3 @@
+// A live-filter search box's Go: the list already filters as you type, so Go/Enter only drops the
+// input's focus (the feed's Go is different: it escalates to a YouTube search).
+export const blurActive = () => (document.activeElement as HTMLElement | null)?.blur?.();
diff --git a/frontend/src/features/navigation/ModuleStores.tsx b/frontend/src/features/navigation/ModuleStores.tsx
new file mode 100644
index 00000000..7df118cc
--- /dev/null
+++ b/frontend/src/features/navigation/ModuleStores.tsx
@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import { MODULE_STORES } from "./moduleRegistry";
+
+// Every module's store, mounted once at the root for the whole session, composed from the registry
+// instead of nested by hand: a new module's store is its definition's `Store` and nothing here. They sit
+// at the root and not inside their pages because they are read from outside them (the palette, the
+// notifications, the download tray steering Files) and hold in-memory state — search terms, the Plex
+// jump target, the Files focus — that has to outlive a visit to another page.
+export function ModuleStores({ children }: { children: ReactNode }) {
+  return MODULE_STORES.reduceRight<ReactNode>((inner, Store) => <Store>{inner}</Store>, children);
+}
diff --git a/frontend/src/components/NavigationProvider.dom.test.tsx b/frontend/src/features/navigation/NavigationProvider.dom.test.tsx
similarity index 98%
rename from frontend/src/components/NavigationProvider.dom.test.tsx
rename to frontend/src/features/navigation/NavigationProvider.dom.test.tsx
index 61b6b5ea..55684824 100644
--- a/frontend/src/components/NavigationProvider.dom.test.tsx
+++ b/frontend/src/features/navigation/NavigationProvider.dom.test.tsx
@@ -27,12 +27,12 @@ vi.mock("react-i18next", async (importOriginal) => {
 
 import { NavigationProvider } from "./NavigationProvider";
 import { useNavigation, useNavigationActions } from "./navigationContext";
-import { useBackToClose } from "../lib/history";
-import { PageHeading } from "./ui/Headings";
+import { useBackToClose } from "../../lib/history";
+import { PageHeading } from "../../components/ui/Headings";
 
-import { qk } from "../lib/queryKeys";
-import { claimLocalData, getAccountRaw, LS, setAccountRaw } from "../lib/storage";
-import { api } from "../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { claimLocalData, getAccountRaw, LS, setAccountRaw } from "../../lib/storage";
+import { api } from "../../lib/api";
 import { PAGE_KEY } from "./navigationInit";
 
 /** The Navigation API's view of the tab: `below` = whether each entry under the current one belongs
diff --git a/frontend/src/components/NavigationProvider.tsx b/frontend/src/features/navigation/NavigationProvider.tsx
similarity index 97%
rename from frontend/src/components/NavigationProvider.tsx
rename to frontend/src/features/navigation/NavigationProvider.tsx
index 8075b0ab..37909d56 100644
--- a/frontend/src/components/NavigationProvider.tsx
+++ b/frontend/src/features/navigation/NavigationProvider.tsx
@@ -1,20 +1,19 @@
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
-import { useLatest } from "../lib/useLatest";
+import { useLatest } from "../../lib/useLatest";
 import { useTranslation } from "react-i18next";
-import { useMe } from "../lib/useMe";
-import { resolvePage, retiredParams, urlWithParams, type Page } from "../lib/urlState";
-import { ACTIVITY_KEYS } from "../lib/activityUrlState";
-import { pageTitleKey } from "../lib/pageMeta";
-import { useDocumentObjectTitle } from "../lib/documentTitle";
-import { getAccountRaw, setAccountRaw } from "../lib/storage";
+import { useMe } from "../../lib/useMe";
+import { resolvePage, retiredParams, urlWithParams, type Page } from "../../lib/urlState";
+import { ACTIVITY_KEYS } from "../../lib/activityUrlState";
+import { useDocumentObjectTitle } from "../../lib/documentTitle";
+import { getAccountRaw, setAccountRaw } from "../../lib/storage";
 import {
   backStaysInDocument,
   closeOverlaysThenNavigate,
   nextNavId,
   notifyNav,
   rememberNavPosition,
-} from "../lib/history";
-import { reachablePage } from "../lib/modules";
+} from "../../lib/history";
+import { pageTitleKey, reachablePage } from "./moduleRegistry";
 import {
   channelViewFrom,
   loadInitialPage,
@@ -23,7 +22,7 @@ import {
   START_ON_HOME_PREF,
   type ChannelView,
 } from "./navigationInit";
-import { usePref } from "../lib/usePref";
+import { usePref } from "../../lib/usePref";
 import {
   NavigationActionsContext,
   NavigationStateContext,
diff --git a/frontend/src/features/navigation/moduleRegistry.contract.test.ts b/frontend/src/features/navigation/moduleRegistry.contract.test.ts
new file mode 100644
index 00000000..9087a952
--- /dev/null
+++ b/frontend/src/features/navigation/moduleRegistry.contract.test.ts
@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+//
+// The registry reaches the modules' faces, whose stores read the browser (i18n, localStorage).
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import { PAGES } from "../../lib/urlState";
+import { REGISTERED_PAGES, moduleDef } from "./moduleRegistry";
+
+// The registry is the one place a page is listed, so it has to hold every page id the address bar
+// accepts and nothing else: a page id with no definition would throw in the nav rail at the first
+// render, and a definition with no id could never be navigated to.
+const SRC = resolve(dirname(fileURLToPath(import.meta.url)), "../..");
+
+describe("the module registry", () => {
+  it("defines every page id exactly once", () => {
+    expect([...REGISTERED_PAGES].sort()).toEqual([...PAGES].sort());
+    expect(new Set(REGISTERED_PAGES).size).toBe(REGISTERED_PAGES.length);
+  });
+
+  it.each([...PAGES])("takes %s's definition from that module's own folder", (page) => {
+    // The definition's id names its page, and it lives at modules/<page>/module.ts — so a page is one
+    // folder, and a copied definition with a stale id cannot pass as another page's.
+    expect(moduleDef(page).id).toBe(page);
+    const source = readFileSync(resolve(SRC, `modules/${page}/module.ts`), "utf8");
+    expect(source).toContain(`id: "${page}",`);
+  });
+
+  it.each([...PAGES])("loads %s's page (and rail) lazily", (page) => {
+    // A static import of the page in its definition would put it on the boot path for every
+    // account; the chunk guard fails the build on that too, this says which module did it. The one
+    // static import a definition may make of its own folder is its store (a `…Provider` / `…Store`
+    // file): that is root-mounted, on the boot path by design.
+    const source = readFileSync(resolve(SRC, `modules/${page}/module.ts`), "utf8");
+    expect(source).not.toMatch(/^import [^;]* from "\.\/(?!\w+(?:Provider|Store)")/m);
+  });
+});
diff --git a/frontend/src/features/navigation/moduleRegistry.ts b/frontend/src/features/navigation/moduleRegistry.ts
new file mode 100644
index 00000000..2f557273
--- /dev/null
+++ b/frontend/src/features/navigation/moduleRegistry.ts
@@ -0,0 +1,102 @@
+import type { Me } from "../../lib/api";
+import type { Page } from "../../lib/urlState";
+import type { ModuleDef } from "../../lib/moduleDef";
+import { homeModule } from "../../modules/home";
+import { feedModule } from "../../modules/feed";
+import { channelsModule } from "../../modules/channels";
+import { playlistsModule } from "../../modules/playlists";
+import { plexModule } from "../../modules/plex";
+import { notificationsModule } from "../../modules/notifications";
+import { filesModule } from "../../modules/files";
+import { statsModule } from "../../modules/stats";
+import { schedulerModule } from "../../modules/scheduler";
+import { configModule } from "../../modules/config";
+import { usersModule } from "../../modules/users";
+import { activityModule } from "../../modules/activity";
+import { settingsModule } from "../../modules/settings";
+
+// ── The module registry ───────────────────────────────────────────────────────────────────────
+// Every page, as each module defines itself (its folder's module.ts), in one ordered list: the nav
+// rail, the palette, the `g` chords, the tab title, the reachable set and the shell's render all read
+// from here, so a new or newly gated module shows up everywhere at once. Each definition's page and
+// rail are lazy imports, so listing them here pulls no page into the boot chunk (chunkGuard holds it).
+//
+// Ordered in nav-rail order — this array IS the sequence the rail and the palette list. Home leads: it
+// is the landing (see navigationInit.loadInitialPage). The feed takes the YouTube mark its own toolbar
+// already uses, so it and Home sit apart by shape and not just by position.
+const MODULES: readonly ModuleDef[] = [
+  homeModule,
+  feedModule,
+  channelsModule,
+  playlistsModule,
+  plexModule,
+  notificationsModule,
+  filesModule,
+  statsModule,
+  schedulerModule,
+  configModule,
+  usersModule,
+  activityModule,
+];
+
+// Settings is reachable (its own rail button, a `g` chord) but is not a primary module in the ordered
+// nav list, so it lives beside the array rather than in it.
+const ALL: readonly ModuleDef[] = [...MODULES, settingsModule];
+
+// Every Page has a definition: the registry contract test pins this list against lib/urlState's ids.
+export const REGISTERED_PAGES: readonly Page[] = ALL.map((m) => m.id);
+
+const BY_ID = Object.fromEntries(ALL.map((m) => [m.id, m])) as Record<Page, ModuleDef>;
+
+// Look up a module's definition by page id (every Page is covered, incl. settings).
+export function moduleDef(id: Page): ModuleDef {
+  return BY_ID[id];
+}
+
+// The i18n key for each module's SHORT display name, and its rail label.
+export const moduleLabelKey = Object.fromEntries(ALL.map((m) => [m.id, m.labelKey])) as Record<
+  Page,
+  string
+>;
+export const moduleRailKey = Object.fromEntries(ALL.map((m) => [m.id, m.railKey])) as Record<
+  Page,
+  string
+>;
+
+// Admin/system modules — rendered in their own section (below a divider) in the nav rail.
+export const SYSTEM_PAGES: readonly Page[] = MODULES.filter((m) => m.system).map((m) => m.id);
+
+// The ordered list of primary module pages available to THIS user, in nav-rail order. Availability
+// is derived from the account via each module's `gate`, so the reachable set changes with the
+// account state, not the UI.
+export function moduleOrder(me: Me): Page[] {
+  return MODULES.filter((m) => !m.gate || m.gate(me)).map((m) => m.id);
+}
+
+/** The page this account is shown for `page`: itself when its gate lets the account in, else the
+ *  feed (a link to an admin page, a Back onto one, an admin role taken away mid-session). Signed
+ *  out, no page renders, so nothing is moved. */
+export function reachablePage(page: Page, me: Me | null | undefined): Page {
+  const gate = moduleDef(page).gate;
+  return !me || !gate || gate(me) ? page : "feed";
+}
+
+// The i18n key for a page's human title (the browser tab): a module's optional `titleKey` is the
+// longer, descriptive one (e.g. "Channel manager"), falling back to its short nav `labelKey`.
+export function pageTitleKey(page: Page): string {
+  const def = moduleDef(page);
+  return def.titleKey ?? def.labelKey;
+}
+
+/** Fetch the code of these pages and of their side rails now, ahead of their first visit. Errors are
+ *  swallowed: a chunk that fails to preload is simply fetched (and its failure surfaced) on visit. */
+export function preloadPages(pages: Page[]): void {
+  for (const p of pages) {
+    const def = moduleDef(p);
+    def.Page.preload().catch(() => {});
+    def.Rail?.preload().catch(() => {});
+  }
+}
+
+// The modules' stores (lib/moduleDef `Store`), in registry order: ModuleStores mounts them at the root.
+export const MODULE_STORES = ALL.flatMap((m) => (m.Store ? [m.Store] : []));
diff --git a/frontend/src/features/navigation/moduleStores.contract.test.tsx b/frontend/src/features/navigation/moduleStores.contract.test.tsx
new file mode 100644
index 00000000..85e59062
--- /dev/null
+++ b/frontend/src/features/navigation/moduleStores.contract.test.tsx
@@ -0,0 +1,90 @@
+// @vitest-environment jsdom
+//
+// The modules' stores are mounted at the root by ModuleStores, composed from the registry in its order
+// (lib/moduleDef `Store`). Two things make that safe, and this pins both: every store a reader needs is
+// in the composition (a missing one throws in its first reader — the palette, the notifications, a
+// rail), and no store reads another module's store, so the order they happen to nest in can never
+// leave one outside a provider it depends on.
+import { readFileSync, existsSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ModuleStores } from "./ModuleStores";
+import { REGISTERED_PAGES, moduleDef } from "./moduleRegistry";
+import { useFeedFilters, useFeedSavedViews } from "../../modules/feed";
+import { usePlex, usePlexSavedViews } from "../../modules/plex";
+import { useChannelsActions } from "../../modules/channels";
+import { useFilesActions } from "../../modules/files";
+import { usePlaylistsActions } from "../../modules/playlists";
+
+vi.mock("react-i18next", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-i18next")>()),
+  useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }),
+}));
+
+const SRC = resolve(dirname(fileURLToPath(import.meta.url)), "../..");
+
+// Each store's read side, as the app's readers reach it (the module faces).
+function Readers() {
+  useFeedFilters();
+  useFeedSavedViews();
+  usePlex();
+  usePlexSavedViews();
+  useChannelsActions();
+  useFilesActions();
+  usePlaylistsActions();
+  return <p>all stores in reach</p>;
+}
+
+// The static (value) imports of a source file, resolved to files under src/. Type-only imports and
+// lazy `import()` are not edges a store's render depends on.
+function staticImports(file: string): string[] {
+  const text = readFileSync(file, "utf8");
+  const out: string[] = [];
+  for (const m of text.matchAll(/^import (?!type )[^;]*? from "(\.[^"]+)";/gms)) {
+    const base = resolve(dirname(file), m[1]!);
+    const path = [base + ".ts", base + ".tsx", base + "/index.ts", base + "/index.tsx", base].find(
+      (p) => /\.tsx?$/.test(p) && existsSync(p),
+    );
+    if (path) out.push(path);
+  }
+  return out;
+}
+
+// Every file a module's definition statically pulls in — its store and what the store imports.
+function closure(start: string): Set<string> {
+  const seen = new Set<string>();
+  const todo = [start];
+  while (todo.length) {
+    const f = todo.pop()!;
+    if (seen.has(f)) continue;
+    seen.add(f);
+    todo.push(...staticImports(f));
+  }
+  return seen;
+}
+
+describe("the module stores", () => {
+  it("are all in reach under ModuleStores", () => {
+    const qc = new QueryClient();
+    const { getByText } = render(
+      <QueryClientProvider client={qc}>
+        <ModuleStores>
+          <Readers />
+        </ModuleStores>
+      </QueryClientProvider>,
+    );
+    expect(getByText("all stores in reach")).toBeTruthy();
+  });
+
+  const withStore = REGISTERED_PAGES.filter((p) => moduleDef(p).Store);
+  it.each(withStore)("%s's store reads no other module", (page) => {
+    const own = resolve(SRC, "modules", page).split("\\").join("/") + "/";
+    const others = [...closure(resolve(SRC, `modules/${page}/module.ts`))]
+      .map((f) => f.split("\\").join("/"))
+      .filter((f) => f.includes("/src/modules/") && !f.startsWith(own));
+    expect(others).toEqual([]);
+  });
+});
diff --git a/frontend/src/components/navigation.dom.test.ts b/frontend/src/features/navigation/navigation.dom.test.ts
similarity index 96%
rename from frontend/src/components/navigation.dom.test.ts
rename to frontend/src/features/navigation/navigation.dom.test.ts
index 721adbe7..4470b574 100644
--- a/frontend/src/components/navigation.dom.test.ts
+++ b/frontend/src/features/navigation/navigation.dom.test.ts
@@ -11,13 +11,13 @@
 import { describe, it, expect, beforeEach, vi } from "vitest";
 
 const { stored } = vi.hoisted(() => ({ stored: {} as Record<string, string | null> }));
-vi.mock("../lib/storage", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/storage")>();
+vi.mock("../../lib/storage", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/storage")>();
   return { ...actual, getAccountRaw: (k: string) => stored[k] ?? null };
 });
 
 import { loadInitialPage, channelViewFrom } from "./navigationInit";
-import { LS } from "../lib/storage";
+import { LS } from "../../lib/storage";
 
 const setUrl = (search: string) => window.history.replaceState(null, "", search || "/");
 
diff --git a/frontend/src/components/navigationContext.ts b/frontend/src/features/navigation/navigationContext.ts
similarity index 98%
rename from frontend/src/components/navigationContext.ts
rename to frontend/src/features/navigation/navigationContext.ts
index 5c3b1684..b033ae96 100644
--- a/frontend/src/components/navigationContext.ts
+++ b/frontend/src/features/navigation/navigationContext.ts
@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-import type { Page } from "../lib/urlState";
+import type { Page } from "../../lib/urlState";
 import type { ChannelView } from "./navigationInit";
 
 // The navigation contexts + their hooks, split out of NavigationProvider so that file exports only
diff --git a/frontend/src/components/navigationInit.ts b/frontend/src/features/navigation/navigationInit.ts
similarity index 95%
rename from frontend/src/components/navigationInit.ts
rename to frontend/src/features/navigation/navigationInit.ts
index d820940e..6473857c 100644
--- a/frontend/src/components/navigationInit.ts
+++ b/frontend/src/features/navigation/navigationInit.ts
@@ -2,9 +2,9 @@
 // provider file keeps react-refresh happy (component-only exports). `loadInitialPage` picks the landing
 // module from a bookmark's params; `channelViewFrom` is the shared _chan/?chan resolver behind BOTH the
 // channelView seed and the onPop handler.
-import { hasFilterParams, readPage, resolvePage, type Page } from "../lib/urlState";
-import { getAccountRaw, LS } from "../lib/storage";
-import type { UsePrefOptions } from "../lib/usePref";
+import { hasFilterParams, readPage, resolvePage, type Page } from "../../lib/urlState";
+import { getAccountRaw, LS } from "../../lib/storage";
+import type { UsePrefOptions } from "../../lib/usePref";
 
 export const PAGE_KEY = LS.page;
 /** The landing preference — start on Home, or on the module left open — an account preference
diff --git a/frontend/src/lib/pageMeta.test.ts b/frontend/src/features/navigation/pageTitleKey.test.ts
similarity index 73%
rename from frontend/src/lib/pageMeta.test.ts
rename to frontend/src/features/navigation/pageTitleKey.test.ts
index cb402f3c..e3318b8f 100644
--- a/frontend/src/lib/pageMeta.test.ts
+++ b/frontend/src/features/navigation/pageTitleKey.test.ts
@@ -1,8 +1,11 @@
+// @vitest-environment jsdom
+//
+// The registry reaches the modules' faces, whose stores read the browser (i18n, localStorage).
 import { describe, expect, it } from "vitest";
-import { pageTitleKey } from "./pageMeta";
-import type { Page } from "./urlState";
+import { pageTitleKey } from "./moduleRegistry";
+import type { Page } from "../../lib/urlState";
 
-// pageTitleKey now derives from the ModuleDef registry (titleKey ?? labelKey). These are the exact
+// pageTitleKey derives from the module registry (titleKey ?? labelKey). These are the exact
 // browser-tab title keys the old hand-written switch produced — pin every page so a future labelKey
 // rename (or a dropped titleKey) can't silently change a tab title.
 const EXPECTED: Record<Page, string> = {
diff --git a/frontend/src/components/ClipPanel.dom.test.tsx b/frontend/src/features/player/ClipPanel.dom.test.tsx
similarity index 94%
rename from frontend/src/components/ClipPanel.dom.test.tsx
rename to frontend/src/features/player/ClipPanel.dom.test.tsx
index 0665b4cb..5fd20636 100644
--- a/frontend/src/components/ClipPanel.dom.test.tsx
+++ b/frontend/src/features/player/ClipPanel.dom.test.tsx
@@ -7,8 +7,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
-import type { ClipRequest } from "../lib/api";
-import type { ClipRange } from "../lib/clipRange";
+import type { ClipRequest } from "../../lib/api";
+import type { ClipRange } from "../../lib/clipRange";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -16,20 +16,20 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 const enqueueClip = vi.fn<(body: ClipRequest) => Promise<unknown>>();
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return { ...actual, api: { ...actual.api, enqueueClip: (b: ClipRequest) => enqueueClip(b) } };
 });
 const notify = vi.fn();
-vi.mock("../lib/notifications", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/notifications")>();
+vi.mock("../../lib/notifications", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/notifications")>();
   return { ...actual, notify: (n: unknown) => notify(n) };
 });
 const showInTray = vi.fn();
-vi.mock("../lib/downloadQueue", () => ({ showInTray: (id: number) => showInTray(id) }));
+vi.mock("../../lib/downloadQueue", () => ({ showInTray: (id: number) => showInTray(id) }));
 const notifyActionError = vi.fn();
-vi.mock("../lib/actionErrors", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/actionErrors")>();
+vi.mock("../../lib/actionErrors", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/actionErrors")>();
   return { ...actual, notifyActionError: (e: unknown, t: string) => notifyActionError(e, t) };
 });
 
diff --git a/frontend/src/components/ClipPanel.tsx b/frontend/src/features/player/ClipPanel.tsx
similarity index 93%
rename from frontend/src/components/ClipPanel.tsx
rename to frontend/src/features/player/ClipPanel.tsx
index f92194be..9e1ee6cd 100644
--- a/frontend/src/components/ClipPanel.tsx
+++ b/frontend/src/features/player/ClipPanel.tsx
@@ -2,24 +2,24 @@ import { useEffect, useEffectEvent, useId, useRef, useState, type SubmitEvent }
 import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import { Crop, Crosshair, Maximize, Minus, Plus, Repeat, Scissors, X } from "lucide-react";
-import { api, type ClipRequest } from "../lib/api";
-import { DISPLAY_NAME_MAX } from "../lib/api/downloads";
-import { invalidateDownloads } from "../lib/downloads";
-import { notify } from "../lib/notifications";
-import { notifyActionError } from "../lib/actionErrors";
-import { showInTray } from "../lib/downloadQueue";
-import { log } from "../lib/log";
-import { formatTimecode } from "../lib/timecode";
-import { handleBounds, markIn, markOut, zoomWindow, type ClipRange } from "../lib/clipRange";
-import { fitRatio, fracRatio, WHOLE, type Frac } from "../lib/cropGeometry";
-import { RangeTrack, RulerTicks, type RangeWindow } from "./ui/RangeTrack";
-import { CropFrame } from "./ui/CropFrame";
-import SegmentedToggle from "./ui/SegmentedToggle";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { Input } from "./ui/Input";
-import { TimecodeError, TimecodeField } from "./ui/TimecodeField";
-import { useTimecodeField, type TimecodeDraft } from "./ui/useTimecodeField";
+import { api, type ClipRequest } from "../../lib/api";
+import { DISPLAY_NAME_MAX } from "../../lib/api/downloads";
+import { invalidateDownloads } from "../../lib/downloads";
+import { notify } from "../../lib/notifications";
+import { notifyActionError } from "../../lib/actionErrors";
+import { showInTray } from "../../lib/downloadQueue";
+import { log } from "../../lib/log";
+import { formatTimecode } from "../../lib/timecode";
+import { handleBounds, markIn, markOut, zoomWindow, type ClipRange } from "../../lib/clipRange";
+import { fitRatio, fracRatio, WHOLE, type Frac } from "../../lib/cropGeometry";
+import { RangeTrack, RulerTicks, type RangeWindow } from "../../components/ui/RangeTrack";
+import { CropFrame } from "../../components/ui/CropFrame";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { Input } from "../../components/ui/Input";
+import { TimecodeError, TimecodeField } from "../../components/ui/TimecodeField";
+import { useTimecodeField, type TimecodeDraft } from "../../components/ui/useTimecodeField";
 
 // The clip panel: marks a range of what is playing and cuts it into a download of its own. It lives
 // IN the player (the YouTube card under the video, the Plex player's control band), so the video
diff --git a/frontend/src/components/PlayerModal.dom.test.tsx b/frontend/src/features/player/PlayerModal.dom.test.tsx
similarity index 98%
rename from frontend/src/components/PlayerModal.dom.test.tsx
rename to frontend/src/features/player/PlayerModal.dom.test.tsx
index 40d61133..701cecc0 100644
--- a/frontend/src/components/PlayerModal.dom.test.tsx
+++ b/frontend/src/features/player/PlayerModal.dom.test.tsx
@@ -23,16 +23,18 @@ vi.mock("react-i18next", async (importOriginal) => {
     }),
   };
 });
-vi.mock("./navigationContext", () => ({ useNavigationActions: () => ({ openChannel: vi.fn() }) }));
+vi.mock("../navigation/navigationContext", () => ({
+  useNavigationActions: () => ({ openChannel: vi.fn() }),
+}));
 // Their own queries and popovers are not what is under test here.
-vi.mock("./AddToPlaylist", () => ({ default: () => null }));
-vi.mock("./DownloadButton", () => ({ default: () => null }));
+vi.mock("../video/AddToPlaylist", () => ({ default: () => null }));
+vi.mock("../downloads/DownloadButton", () => ({ default: () => null }));
 
 import PlayerModal from "./PlayerModal";
-import { ConfirmProvider } from "./ConfirmProvider";
-import { useConfirm } from "./confirmContext";
-import { api, type Video } from "../lib/api";
-import { clearAll, notify } from "../lib/notifications";
+import { ConfirmProvider } from "../../components/ui/ConfirmProvider";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { api, type Video } from "../../lib/api";
+import { clearAll, notify } from "../../lib/notifications";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/PlayerModal.tsx b/frontend/src/features/player/PlayerModal.tsx
similarity index 97%
rename from frontend/src/components/PlayerModal.tsx
rename to frontend/src/features/player/PlayerModal.tsx
index da8dcd8d..b0afdd7c 100644
--- a/frontend/src/components/PlayerModal.tsx
+++ b/frontend/src/features/player/PlayerModal.tsx
@@ -10,12 +10,12 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { createPortal } from "react-dom";
-import { useNavigationActions } from "./navigationContext";
+import { useNavigationActions } from "../navigation/navigationContext";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
-import { usePref } from "../lib/usePref";
+import { qk } from "../../lib/queryKeys";
+import { usePref } from "../../lib/usePref";
 import { PlayerDescription, PlayerTransportControls } from "./playerModalControls";
-import { AUTO_MODES, LOOP_MODES, type AutoMode, type LoopMode } from "../lib/playerModes";
+import { AUTO_MODES, LOOP_MODES, type AutoMode, type LoopMode } from "../../lib/playerModes";
 import {
   AlertTriangle,
   ArrowLeft,
@@ -37,52 +37,52 @@ import {
   VolumeX,
   X,
 } from "lucide-react";
-import Avatar from "./ui/Avatar";
-import { useLatest, useStableCallback } from "../lib/useLatest";
-import AddToPlaylist from "./AddToPlaylist";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
+import Avatar from "../../components/ui/Avatar";
+import { useLatest, useStableCallback } from "../../lib/useLatest";
+import AddToPlaylist from "../video/AddToPlaylist";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
 import {
   pushLayer,
   removeLayer,
   anyBlockingLayerAbove,
   anyLayerAbove,
   escapeHandled,
-} from "../lib/layerStack";
-import { trapTab, useDialogChrome } from "./ui/dialogFocus";
-import DownloadButton from "./DownloadButton";
+} from "../../lib/layerStack";
+import { trapTab, useDialogChrome } from "../../components/ui/dialogFocus";
+import DownloadButton from "../downloads/DownloadButton";
 import ClipPanel, { ClipCropFrame, type ClipCrop } from "./ClipPanel";
-import { markInAt, markOutAt, openAt, type ClipRange } from "../lib/clipRange";
-import { api, type Video, type VideoStatus } from "../lib/api";
-import type { YTPlayer } from "../lib/youtube";
+import { markInAt, markOutAt, openAt, type ClipRange } from "../../lib/clipRange";
+import { api, type Video, type VideoStatus } from "../../lib/api";
+import type { YTPlayer } from "../../lib/youtube";
 import {
   channelYouTubeUrl,
   formatDate,
   formatDuration,
   formatCompact,
   relativeTime,
-} from "../lib/format";
-import { canFullscreenElements, fullscreenElement } from "../lib/fullscreen";
-import { dispatch, isActivationTarget, useKeyScope } from "../lib/keymap";
-import { useBackToClose } from "../lib/history";
-import ChannelNameLink from "./ChannelNameLink";
-import Toaster from "./ui/Toaster";
-import { useOverlayOrder } from "./ui/overlayOrder";
-import { afterRemoval } from "../lib/playerQueue";
+} from "../../lib/format";
+import { canFullscreenElements, fullscreenElement } from "../../lib/fullscreen";
+import { dispatch, isActivationTarget, useKeyScope } from "../../lib/keymap";
+import { useBackToClose } from "../../lib/history";
+import ChannelNameLink from "../video/ChannelNameLink";
+import Toaster from "../../components/ui/Toaster";
+import { useOverlayOrder } from "../../components/ui/overlayOrder";
+import { afterRemoval } from "../../lib/playerQueue";
 import {
   useNativeControlsYield,
   useYtBigView,
   useYtProgress,
   useYtVolume,
   YT_API_LOAD_FAILED,
-} from "../lib/playerModalHooks";
-import { useScrollFade } from "../lib/useScrollFade";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { SURFACE } from "./ui/surfaces";
-import { IconLink, LinkButton } from "./ui/LinkButton";
-import { SectionLabel } from "./ui/Headings";
-import { useMediaQuery } from "../lib/useMediaQuery";
+} from "../../lib/playerModalHooks";
+import { useScrollFade } from "../../lib/useScrollFade";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { SURFACE } from "../../components/ui/surfaces";
+import { IconLink, LinkButton } from "../../components/ui/LinkButton";
+import { SectionLabel } from "../../components/ui/Headings";
+import { useMediaQuery } from "../../lib/useMediaQuery";
 
 // Experiment (branch experiment/inline-player): play the video in-app via the
 // YouTube IFrame Player API (not a bare embed) so we can read playback position
diff --git a/frontend/src/components/descriptionLinks.dom.test.tsx b/frontend/src/features/player/descriptionLinks.dom.test.tsx
similarity index 100%
rename from frontend/src/components/descriptionLinks.dom.test.tsx
rename to frontend/src/features/player/descriptionLinks.dom.test.tsx
diff --git a/frontend/src/components/descriptionLinks.tsx b/frontend/src/features/player/descriptionLinks.tsx
similarity index 99%
rename from frontend/src/components/descriptionLinks.tsx
rename to frontend/src/features/player/descriptionLinks.tsx
index 31973922..b22ce848 100644
--- a/frontend/src/components/descriptionLinks.tsx
+++ b/frontend/src/features/player/descriptionLinks.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { TFunction } from "i18next";
-import { Pressable } from "./ui/Pressable";
+import { Pressable } from "../../components/ui/Pressable";
 
 // Turn a video description into clickable nodes:
 //  - bare timestamps (mm:ss / hh:mm:ss) → seek the inline player
diff --git a/frontend/src/components/playerModalControls.tsx b/frontend/src/features/player/playerModalControls.tsx
similarity index 95%
rename from frontend/src/components/playerModalControls.tsx
rename to frontend/src/features/player/playerModalControls.tsx
index 1ad217ab..3dba6a2c 100644
--- a/frontend/src/components/playerModalControls.tsx
+++ b/frontend/src/features/player/playerModalControls.tsx
@@ -1,11 +1,11 @@
 import type { CSSProperties, Ref } from "react";
 import { useTranslation } from "react-i18next";
 import { Repeat, Repeat1, Shuffle, SkipBack, SkipForward } from "lucide-react";
-import type { VideoDetail } from "../lib/api";
-import type { AutoMode, LoopMode } from "../lib/playerModes";
-import { Button } from "./ui/Button";
-import { StateMessage } from "./ui/QueryState";
-import { ClampedText } from "./ui/ClampedText";
+import type { VideoDetail } from "../../lib/api";
+import type { AutoMode, LoopMode } from "../../lib/playerModes";
+import { Button } from "../../components/ui/Button";
+import { StateMessage } from "../../components/ui/QueryState";
+import { ClampedText } from "../../components/ui/ClampedText";
 import { renderDescription } from "./descriptionLinks";
 
 // Presentational controls for the YouTube modal player (PlayerModal), split out of the god component —
diff --git a/frontend/src/components/PlexCollectionAdd.tsx b/frontend/src/features/plexCards/PlexCollectionAdd.tsx
similarity index 91%
rename from frontend/src/components/PlexCollectionAdd.tsx
rename to frontend/src/features/plexCards/PlexCollectionAdd.tsx
index 1ace05cb..992a527f 100644
--- a/frontend/src/components/PlexCollectionAdd.tsx
+++ b/frontend/src/features/plexCards/PlexCollectionAdd.tsx
@@ -1,13 +1,13 @@
 import { useLayoutEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
-import { api, HttpError, type PlexCollection } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { MembershipMenu } from "./ui/MembershipMenu";
-import { SURFACE } from "./ui/surfaces";
+import { qk } from "../../lib/queryKeys";
+import { api, HttpError, type PlexCollection } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { MembershipMenu } from "../../components/ui/MembershipMenu";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // "Add to collection…" from a movie or show card's menu: a panel beside the card that ticks the title
 // into or out of its library's manual collections, and names a new one — created with this title in
diff --git a/frontend/src/components/PlexPlaylistAdd.tsx b/frontend/src/features/plexCards/PlexPlaylistAdd.tsx
similarity index 92%
rename from frontend/src/components/PlexPlaylistAdd.tsx
rename to frontend/src/features/plexCards/PlexPlaylistAdd.tsx
index f9a2ebc6..c7b49d73 100644
--- a/frontend/src/components/PlexPlaylistAdd.tsx
+++ b/frontend/src/features/plexCards/PlexPlaylistAdd.tsx
@@ -1,17 +1,17 @@
 import { useState } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Plus } from "lucide-react";
-import { MenuCheck } from "./ui/MenuCheck";
-import { api, type PlexPlaylist } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { useScrollFade } from "../lib/useScrollFade";
-import { Button } from "./ui/Button";
-import Modal from "./ui/Modal";
-import { Pressable } from "./ui/Pressable";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
+import { MenuCheck } from "../../components/ui/MenuCheck";
+import { api, type PlexPlaylist } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { useScrollFade } from "../../lib/useScrollFade";
+import { Button } from "../../components/ui/Button";
+import Modal from "../../components/ui/Modal";
+import { Pressable } from "../../components/ui/Pressable";
+import { Input } from "../../components/ui/Input";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // What we're adding: a single leaf (movie/episode) or a whole group (a season or an entire show, as a
 // set of episode rating_keys). Groups get a tri-state (none / some / all) per playlist.
diff --git a/frontend/src/components/plexCards.dom.test.tsx b/frontend/src/features/plexCards/plexCards.dom.test.tsx
similarity index 99%
rename from frontend/src/components/plexCards.dom.test.tsx
rename to frontend/src/features/plexCards/plexCards.dom.test.tsx
index a2a1cc7f..d5216126 100644
--- a/frontend/src/components/plexCards.dom.test.tsx
+++ b/frontend/src/features/plexCards/plexCards.dom.test.tsx
@@ -22,8 +22,8 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import { PlexPosterCard, SeasonCard, EpisodeCard } from "./plexCards";
-import { iconButtonClass } from "./ui/buttonStyles";
-import { api, type PlexCard, type PlexSeasonDetail } from "../lib/api";
+import { iconButtonClass } from "../../components/ui/buttonStyles";
+import { api, type PlexCard, type PlexSeasonDetail } from "../../lib/api";
 
 // A show card asks the server which episode it would play once its preview is up: a query client.
 const render = (ui: ReactElement) =>
diff --git a/frontend/src/components/plexCards.lang.dom.test.tsx b/frontend/src/features/plexCards/plexCards.lang.dom.test.tsx
similarity index 97%
rename from frontend/src/components/plexCards.lang.dom.test.tsx
rename to frontend/src/features/plexCards/plexCards.lang.dom.test.tsx
index 219603ed..62d7fc95 100644
--- a/frontend/src/components/plexCards.lang.dom.test.tsx
+++ b/frontend/src/features/plexCards/plexCards.lang.dom.test.tsx
@@ -17,7 +17,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import { PlexPosterCard, SeasonCard } from "./plexCards";
-import type { PlexCard, PlexSeasonDetail } from "../lib/api";
+import type { PlexCard, PlexSeasonDetail } from "../../lib/api";
 
 // A show card asks the server which episode it would play once its preview is up: a query client.
 const render = (ui: ReactElement) =>
diff --git a/frontend/src/components/plexCards.langSwitch.dom.test.tsx b/frontend/src/features/plexCards/plexCards.langSwitch.dom.test.tsx
similarity index 94%
rename from frontend/src/components/plexCards.langSwitch.dom.test.tsx
rename to frontend/src/features/plexCards/plexCards.langSwitch.dom.test.tsx
index f493d87e..d3280069 100644
--- a/frontend/src/components/plexCards.langSwitch.dom.test.tsx
+++ b/frontend/src/features/plexCards/plexCards.langSwitch.dom.test.tsx
@@ -7,9 +7,9 @@ import { describe, it, expect, afterEach, vi } from "vitest";
 import { render as rtlRender, screen, cleanup, act } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactElement } from "react";
-import { setLanguage } from "../i18n";
+import { setLanguage } from "../../i18n";
 import { PlexPosterCard } from "./plexCards";
-import type { PlexCard } from "../lib/api";
+import type { PlexCard } from "../../lib/api";
 
 // A show card asks the server which episode it would play once its preview is up: a query client.
 const render = (ui: ReactElement) =>
diff --git a/frontend/src/components/plexCards.tsx b/frontend/src/features/plexCards/plexCards.tsx
similarity index 95%
rename from frontend/src/components/plexCards.tsx
rename to frontend/src/features/plexCards/plexCards.tsx
index 7286c885..0127f0df 100644
--- a/frontend/src/components/plexCards.tsx
+++ b/frontend/src/features/plexCards/plexCards.tsx
@@ -3,21 +3,21 @@ import { CheckCircle2, Circle, Info, ListPlus, Star } from "lucide-react";
 import clsx from "clsx";
 import { type ReactNode, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { api } from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { plexLang } from "../i18n";
-import { formatDecimal, formatRuntime } from "../lib/format";
-import { Carousel } from "./ui/Carousel";
-import type { PlexCard, PlexCastMember, PlexFilters, PlexSeasonDetail } from "../lib/api";
-import { episodeLine, episodeName, episodeNumbers, seasonTitle } from "../lib/plexDetail";
-import { navItemAttrs } from "../lib/listNav";
-import { endsTextSelection, movedPastSlop } from "../lib/textSelection";
+import { api } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { plexLang } from "../../i18n";
+import { formatDecimal, formatRuntime } from "../../lib/format";
+import { Carousel } from "../../components/ui/Carousel";
+import type { PlexCard, PlexCastMember, PlexFilters, PlexSeasonDetail } from "../../lib/api";
+import { episodeLine, episodeName, episodeNumbers, seasonTitle } from "../../lib/plexDetail";
+import { navItemAttrs } from "../../lib/listNav";
+import { endsTextSelection, movedPastSlop } from "../../lib/textSelection";
 import { plexAddLabelKey, plexStarted } from "./usePlexCardActions";
-import { IconButton } from "./ui/IconButton";
-import { MoreButton } from "./ui/MoreButton";
-import { Pressable } from "./ui/Pressable";
-import { HOVER_YIELD } from "./ui/reveal";
-import { MediaResumeButtons } from "./MediaResumeButtons";
+import { IconButton } from "../../components/ui/IconButton";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { Pressable } from "../../components/ui/Pressable";
+import { HOVER_YIELD } from "../../components/ui/reveal";
+import { MediaResumeButtons } from "../video/MediaResumeButtons";
 import {
   MEDIA_BADGE,
   MEDIA_BAR,
@@ -27,13 +27,13 @@ import {
   MEDIA_PICTURE,
   mediaPictureBox,
   mediaTitleClass,
-} from "./ui/mediaCardStyles";
-import { MediaCard, MediaProgress, MediaPlayGlyph } from "./ui/MediaCard";
-import { MediaPreview } from "./ui/MediaPreview";
-import { useMediaPreview } from "./ui/useMediaPreview";
-import { SURFACE } from "./ui/surfaces";
-import { cardImage } from "../lib/plexImage";
-import RemoteImage from "./ui/RemoteImage";
+} from "../../components/ui/mediaCardStyles";
+import { MediaCard, MediaProgress, MediaPlayGlyph } from "../../components/ui/MediaCard";
+import { MediaPreview } from "../../components/ui/MediaPreview";
+import { useMediaPreview } from "../../components/ui/useMediaPreview";
+import { SURFACE } from "../../components/ui/surfaces";
+import { cardImage } from "../../lib/plexImage";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // Presentational Plex cards + strips, split out of PlexBrowse (prop-driven, no shared state; the one
 // read is a show card asking which episode it would play, once its preview is up). Rendered by the
diff --git a/frontend/src/components/usePlexCardActions.tsx b/frontend/src/features/plexCards/usePlexCardActions.tsx
similarity index 96%
rename from frontend/src/components/usePlexCardActions.tsx
rename to frontend/src/features/plexCards/usePlexCardActions.tsx
index 88d19b13..c32284a5 100644
--- a/frontend/src/components/usePlexCardActions.tsx
+++ b/frontend/src/features/plexCards/usePlexCardActions.tsx
@@ -3,13 +3,13 @@ import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import { Check, Info, Layers, ListPlus, Play, SkipBack, Tv2, Undo2 } from "lucide-react";
 
-import { type PlexCard } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { type PlexCard } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 import PlexCollectionAddAt, { type PlexCollectionTarget } from "./PlexCollectionAdd";
-import { pinPlex, useComfortPin } from "./comfortPin";
-import { useCopyItems } from "./copyItems";
+import { pinPlex, useComfortPin } from "../comfort/comfortPin";
+import { useCopyItems } from "../../components/ui/copyItems";
 import PlexPlaylistAdd, { type PlexAddTarget } from "./PlexPlaylistAdd";
-import { type ActionMenuItem } from "./ui/ActionMenu";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
 
 // A Plex title's ONE action list (docs/DESIGN.md "Action placement"): the right-click, the
 // long-press, Shift+F10 and the card's "…" open a menu built here, so every poster grid and rail
diff --git a/frontend/src/components/PrefsProvider.dom.test.tsx b/frontend/src/features/prefs/PrefsProvider.dom.test.tsx
similarity index 95%
rename from frontend/src/components/PrefsProvider.dom.test.tsx
rename to frontend/src/features/prefs/PrefsProvider.dom.test.tsx
index 4c5d6d5d..e4c2c8c2 100644
--- a/frontend/src/components/PrefsProvider.dom.test.tsx
+++ b/frontend/src/features/prefs/PrefsProvider.dom.test.tsx
@@ -10,9 +10,9 @@ import { act, cleanup, render } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { PrefsProvider } from "./PrefsProvider";
 import { usePrefs } from "./prefsContext";
-import { api } from "../lib/api";
-import { claimLocalData, LS } from "../lib/storage";
-import { qk } from "../lib/queryKeys";
+import { api } from "../../lib/api";
+import { claimLocalData, LS } from "../../lib/storage";
+import { qk } from "../../lib/queryKeys";
 
 const seen: { perf: boolean; hints: boolean }[] = [];
 const controls: ReturnType<typeof usePrefs>[] = [];
diff --git a/frontend/src/components/PrefsProvider.tsx b/frontend/src/features/prefs/PrefsProvider.tsx
similarity index 93%
rename from frontend/src/components/PrefsProvider.tsx
rename to frontend/src/features/prefs/PrefsProvider.tsx
index 2b374c8d..9abc6331 100644
--- a/frontend/src/components/PrefsProvider.tsx
+++ b/frontend/src/features/prefs/PrefsProvider.tsx
@@ -7,21 +7,24 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useQueryClient } from "@tanstack/react-query";
-import { api, type Me } from "../lib/api";
+import { api, type Me } from "../../lib/api";
 import {
   applyTheme,
   loadLocalTheme,
   normalizeTheme,
   saveLocalTheme,
   type ThemePrefs,
-} from "../lib/theme";
-import { configureNotifications, getNotifSettings, type NotifSettings } from "../lib/notifications";
-import { hintsEnabled, setHintsEnabled } from "../lib/hints";
-import { getAccountRaw, LS, setAccountRaw } from "../lib/storage";
-import type { PrefsController } from "./SettingsPanel";
-import { PrefsContext } from "./prefsContext";
+} from "../../lib/theme";
+import {
+  configureNotifications,
+  getNotifSettings,
+  type NotifSettings,
+} from "../../lib/notifications";
+import { hintsEnabled, setHintsEnabled } from "../../lib/hints";
+import { getAccountRaw, LS, setAccountRaw } from "../../lib/storage";
+import { PrefsContext, type PrefsController } from "./prefsContext";
 
 const PERF_KEY = LS.perfMode;
 
diff --git a/frontend/src/features/prefs/prefsContext.ts b/frontend/src/features/prefs/prefsContext.ts
new file mode 100644
index 00000000..8f9c13ee
--- /dev/null
+++ b/frontend/src/features/prefs/prefsContext.ts
@@ -0,0 +1,43 @@
+import { createContext, useContext } from "react";
+import { DEFAULT_THEME, type ThemePrefs } from "../../lib/theme";
+import { getNotifSettings, type NotifSettings } from "../../lib/notifications";
+import type { SaveState } from "../../components/ui/DraftSaveBar";
+
+// The Settings-page preferences context + hook, split out of PrefsProvider so that file exports only
+// components (Fast Refresh).
+
+// The Settings page edits server-persisted preferences. Each change applies locally for instant
+// preview AND auto-saves (debounced) — no draft, no Save button; a small indicator flashes the
+// outcome. PrefsProvider owns the state + the save; this controller is how the page reads/writes it.
+// It lives with the store rather than with the page, so the store does not depend on its page.
+export interface PrefsController {
+  theme: ThemePrefs;
+  setTheme: (t: ThemePrefs) => void;
+  perf: boolean;
+  setPerf: (v: boolean) => void;
+  hints: boolean;
+  setHints: (v: boolean) => void;
+  railLabels: boolean;
+  setRailLabels: (v: boolean) => void;
+  notif: NotifSettings;
+  setNotif: (n: NotifSettings) => void;
+  saveState: SaveState;
+}
+
+export const PrefsContext = createContext<PrefsController>({
+  theme: DEFAULT_THEME,
+  setTheme: () => {},
+  perf: false,
+  setPerf: () => {},
+  hints: true,
+  setHints: () => {},
+  railLabels: false,
+  setRailLabels: () => {},
+  notif: getNotifSettings(),
+  setNotif: () => {},
+  saveState: "idle",
+});
+
+export function usePrefs(): PrefsController {
+  return useContext(PrefsContext);
+}
diff --git a/frontend/src/components/AddToPlaylist.tsx b/frontend/src/features/video/AddToPlaylist.tsx
similarity index 90%
rename from frontend/src/components/AddToPlaylist.tsx
rename to frontend/src/features/video/AddToPlaylist.tsx
index 8ad527a0..7f88b1e0 100644
--- a/frontend/src/components/AddToPlaylist.tsx
+++ b/frontend/src/features/video/AddToPlaylist.tsx
@@ -1,17 +1,17 @@
 import { useLayoutEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { ListPlus } from "lucide-react";
-import { YouTubeIcon } from "../lib/brandIcons";
-import { api, type Playlist } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { playlistName } from "../lib/playlistName";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { IconButton } from "./ui/IconButton";
-import { MembershipMenu } from "./ui/MembershipMenu";
-import { SURFACE } from "./ui/surfaces";
+import { YouTubeIcon } from "../../lib/brandIcons";
+import { api, type Playlist } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { playlistName } from "../../lib/playlistName";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { IconButton } from "../../components/ui/IconButton";
+import { MembershipMenu } from "../../components/ui/MembershipMenu";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // A small anchored menu for toggling a video's membership in the user's playlists, with inline
 // "new playlist" creation. Its body is the shared MembershipMenu (as the channel tag editor's).
diff --git a/frontend/src/components/ChannelNameLink.dom.test.tsx b/frontend/src/features/video/ChannelNameLink.dom.test.tsx
similarity index 100%
rename from frontend/src/components/ChannelNameLink.dom.test.tsx
rename to frontend/src/features/video/ChannelNameLink.dom.test.tsx
diff --git a/frontend/src/components/ChannelNameLink.tsx b/frontend/src/features/video/ChannelNameLink.tsx
similarity index 95%
rename from frontend/src/components/ChannelNameLink.tsx
rename to frontend/src/features/video/ChannelNameLink.tsx
index 2be89068..1d129e5e 100644
--- a/frontend/src/components/ChannelNameLink.tsx
+++ b/frontend/src/features/video/ChannelNameLink.tsx
@@ -1,7 +1,7 @@
 import { forwardRef, type AnchorHTMLAttributes } from "react";
 import { useTranslation } from "react-i18next";
-import { isPlainLeftClick } from "../lib/nav";
-import { urlWithParams } from "../lib/urlState";
+import { isPlainLeftClick } from "../../lib/nav";
+import { urlWithParams } from "../../lib/urlState";
 
 // A channel name that is a REAL link. The player showed it as a `<button>`, so the browser's own
 // gestures did nothing on it: middle-click and Ctrl/Cmd-click opened no tab, on a thing that looks
diff --git a/frontend/src/components/MediaResumeButtons.tsx b/frontend/src/features/video/MediaResumeButtons.tsx
similarity index 94%
rename from frontend/src/components/MediaResumeButtons.tsx
rename to frontend/src/features/video/MediaResumeButtons.tsx
index ed4e3a9f..fa84eda5 100644
--- a/frontend/src/components/MediaResumeButtons.tsx
+++ b/frontend/src/features/video/MediaResumeButtons.tsx
@@ -1,8 +1,8 @@
 import type { MouseEvent } from "react";
 import { useTranslation } from "react-i18next";
 import { Play, RotateCcw } from "lucide-react";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
 
 // The started card's hover pair (DESIGN "Players", C5: restarting lives on the card): Continue in the
 // accent, Restart dark translucent. ONE component for the YouTube card and the Plex cards, so the one
diff --git a/frontend/src/components/VideoCard.actions.dom.test.tsx b/frontend/src/features/video/VideoCard.actions.dom.test.tsx
similarity index 97%
rename from frontend/src/components/VideoCard.actions.dom.test.tsx
rename to frontend/src/features/video/VideoCard.actions.dom.test.tsx
index 8170e57f..08fc5393 100644
--- a/frontend/src/components/VideoCard.actions.dom.test.tsx
+++ b/frontend/src/features/video/VideoCard.actions.dom.test.tsx
@@ -13,13 +13,13 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./navigationContext", () => ({
+vi.mock("../navigation/navigationContext", () => ({
   useNavigationActions: () => ({ openChannel: vi.fn() }),
 }));
 
 import VideoCard from "./VideoCard";
-import type { Video } from "../lib/api";
-import { FEED_VIEW_SPEC, type FeedView } from "../lib/feedView";
+import type { Video } from "../../lib/api";
+import { FEED_VIEW_SPEC, type FeedView } from "../../lib/feedView";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/VideoCard.channel.dom.test.tsx b/frontend/src/features/video/VideoCard.channel.dom.test.tsx
similarity index 96%
rename from frontend/src/components/VideoCard.channel.dom.test.tsx
rename to frontend/src/features/video/VideoCard.channel.dom.test.tsx
index c4b80eda..ed081f6f 100644
--- a/frontend/src/components/VideoCard.channel.dom.test.tsx
+++ b/frontend/src/features/video/VideoCard.channel.dom.test.tsx
@@ -14,12 +14,12 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./navigationContext", () => ({
+vi.mock("../navigation/navigationContext", () => ({
   useNavigationActions: () => ({ openChannel: h.openChannel }),
 }));
 
 import VideoCard from "./VideoCard";
-import type { Video } from "../lib/api";
+import type { Video } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/VideoCard.nav.dom.test.tsx b/frontend/src/features/video/VideoCard.nav.dom.test.tsx
similarity index 96%
rename from frontend/src/components/VideoCard.nav.dom.test.tsx
rename to frontend/src/features/video/VideoCard.nav.dom.test.tsx
index 5caab5fd..3ce00e31 100644
--- a/frontend/src/components/VideoCard.nav.dom.test.tsx
+++ b/frontend/src/features/video/VideoCard.nav.dom.test.tsx
@@ -11,13 +11,13 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./navigationContext", () => ({
+vi.mock("../navigation/navigationContext", () => ({
   useNavigationActions: () => ({ openChannel: vi.fn() }),
 }));
 
 import VideoCard from "./VideoCard";
-import type { Video } from "../lib/api";
-import type { FeedView } from "../lib/feedView";
+import type { Video } from "../../lib/api";
+import type { FeedView } from "../../lib/feedView";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/features/video/VideoCard.tsx
similarity index 97%
rename from frontend/src/components/VideoCard.tsx
rename to frontend/src/features/video/VideoCard.tsx
index efd139ed..5d235783 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/features/video/VideoCard.tsx
@@ -1,6 +1,6 @@
 import { memo, useEffect, useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigationActions } from "./navigationContext";
+import { useNavigationActions } from "../navigation/navigationContext";
 import {
   Bookmark,
   Check,
@@ -11,26 +11,26 @@ import {
   // Aliased: `Video` is this app's own domain type (lib/api), and it wins the name.
   Video as VideoIcon,
 } from "lucide-react";
-import Avatar from "./ui/Avatar";
+import Avatar from "../../components/ui/Avatar";
 import AddToPlaylist from "./AddToPlaylist";
-import { navItemAttrs } from "../lib/listNav";
+import { navItemAttrs } from "../../lib/listNav";
 import clsx from "clsx";
-import type { Video, VideoStatus } from "../lib/api";
-import { FEED_VIEW_SPEC, type FeedView } from "../lib/feedView";
+import type { Video, VideoStatus } from "../../lib/api";
+import { FEED_VIEW_SPEC, type FeedView } from "../../lib/feedView";
 import {
   formatDate,
   formatDuration,
   formatNumber,
   formatCompact,
   relativeTime,
-} from "../lib/format";
-import { isPlainLeftClick } from "../lib/nav";
-import { endsTextSelection } from "../lib/textSelection";
+} from "../../lib/format";
+import { isPlainLeftClick } from "../../lib/nav";
+import { endsTextSelection } from "../../lib/textSelection";
 import ChannelNameLink from "./ChannelNameLink";
-import { IconButton } from "./ui/IconButton";
-import { SURFACE } from "./ui/surfaces";
-import { MoreButton } from "./ui/MoreButton";
-import { HOVER_REVEAL, HOVER_YIELD } from "./ui/reveal";
+import { IconButton } from "../../components/ui/IconButton";
+import { SURFACE } from "../../components/ui/surfaces";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { HOVER_REVEAL, HOVER_YIELD } from "../../components/ui/reveal";
 import {
   MEDIA_BADGE,
   MEDIA_BAR,
@@ -39,11 +39,11 @@ import {
   MEDIA_IMG,
   MEDIA_PICTURE,
   mediaTitleClass,
-} from "./ui/mediaCardStyles";
-import { MediaCard, MediaProgress } from "./ui/MediaCard";
+} from "../../components/ui/mediaCardStyles";
+import { MediaCard, MediaProgress } from "../../components/ui/MediaCard";
 import { MediaResumeButtons } from "./MediaResumeButtons";
-import { RelativeTime } from "./ui/RelativeTime";
-import RemoteImage from "./ui/RemoteImage";
+import { RelativeTime } from "../../components/ui/RelativeTime";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 /** The "…" that opens the video's action list, and whether its menu is the open one. */
 type More = { props: Record<string, unknown>; open: boolean };
diff --git a/frontend/src/components/VideoFollowUp.tsx b/frontend/src/features/video/VideoFollowUp.tsx
similarity index 91%
rename from frontend/src/components/VideoFollowUp.tsx
rename to frontend/src/features/video/VideoFollowUp.tsx
index da6e38b5..4fac5e5e 100644
--- a/frontend/src/components/VideoFollowUp.tsx
+++ b/frontend/src/features/video/VideoFollowUp.tsx
@@ -1,11 +1,11 @@
 import { lazy, Suspense } from "react";
-import { type Video } from "../lib/api";
+import { type Video } from "../../lib/api";
 import { AddToPlaylistAt } from "./AddToPlaylist";
 import VideoDetailsAt from "./VideoInfoCard";
 
 // Lazy for the same reason DownloadButton's is: the dialog and its profile editor load only when
 // someone downloads, not with every feed.
-const DownloadDialog = lazy(() => import("./DownloadDialog"));
+const DownloadDialog = lazy(() => import("../downloads/DownloadDialog"));
 
 /** What a video menu row opened that outlives the menu: a panel anchored where the menu came from
  *  (the playlists, the details) or the download dialog. */
diff --git a/frontend/src/components/VideoInfoCard.dom.test.tsx b/frontend/src/features/video/VideoInfoCard.dom.test.tsx
similarity index 98%
rename from frontend/src/components/VideoInfoCard.dom.test.tsx
rename to frontend/src/features/video/VideoInfoCard.dom.test.tsx
index bb97b84c..46336ac1 100644
--- a/frontend/src/components/VideoInfoCard.dom.test.tsx
+++ b/frontend/src/features/video/VideoInfoCard.dom.test.tsx
@@ -21,7 +21,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 const videoDetail = vi.fn();
 const channelDetail = vi.fn();
 const tags = vi.fn();
-vi.mock("../lib/api", () => ({
+vi.mock("../../lib/api", () => ({
   api: {
     videoDetail: (...a: unknown[]) => videoDetail(...a),
     channelDetail: (...a: unknown[]) => channelDetail(...a),
@@ -30,7 +30,7 @@ vi.mock("../lib/api", () => ({
 }));
 
 import VideoDetailsAt from "./VideoInfoCard";
-import type { Video } from "../lib/api";
+import type { Video } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/VideoInfoCard.tsx b/frontend/src/features/video/VideoInfoCard.tsx
similarity index 88%
rename from frontend/src/components/VideoInfoCard.tsx
rename to frontend/src/features/video/VideoInfoCard.tsx
index ad6e3d04..a6a00815 100644
--- a/frontend/src/components/VideoInfoCard.tsx
+++ b/frontend/src/features/video/VideoInfoCard.tsx
@@ -1,16 +1,16 @@
 import { useLayoutEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
-import { api, type Video } from "../lib/api";
-import { formatDate, formatDuration, formatCompact } from "../lib/format";
-import { linkify } from "../lib/linkify";
-import Avatar from "./ui/Avatar";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { SURFACE } from "./ui/surfaces";
-import { Badge } from "./ui/Badge";
-import { useTags } from "../lib/useTags";
+import { qk } from "../../lib/queryKeys";
+import { api, type Video } from "../../lib/api";
+import { formatDate, formatDuration, formatCompact } from "../../lib/format";
+import { linkify } from "../../lib/linkify";
+import Avatar from "../../components/ui/Avatar";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { SURFACE } from "../../components/ui/surfaces";
+import { Badge } from "../../components/ui/Badge";
+import { useTags } from "../../lib/useTags";
 
 // A video's details: full (un-clamped) title, channel, views·duration·date, a
 // description snippet, and the channel's tags. It moved from a hover ⓘ on the thumbnail into
diff --git a/frontend/src/components/mediaPicture.contract.test.ts b/frontend/src/features/video/mediaPicture.contract.test.ts
similarity index 93%
rename from frontend/src/components/mediaPicture.contract.test.ts
rename to frontend/src/features/video/mediaPicture.contract.test.ts
index 3b587c69..86b3bf20 100644
--- a/frontend/src/components/mediaPicture.contract.test.ts
+++ b/frontend/src/features/video/mediaPicture.contract.test.ts
@@ -2,7 +2,7 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 
 import videoCard from "./VideoCard.tsx?raw";
-import { HOVER_REVEAL, HOVER_YIELD } from "./ui/reveal";
+import { HOVER_REVEAL, HOVER_YIELD } from "../../components/ui/reveal";
 
 import {
   MEDIA_BAR,
@@ -10,7 +10,7 @@ import {
   MEDIA_PICTURE_CONTAINER,
   MEDIA_RESUME_LAYER,
   mediaPictureBox,
-} from "./ui/mediaCardStyles";
+} from "../../components/ui/mediaCardStyles";
 
 // Measured: at text size 1.3 a 242px feed thumbnail put the 63px Play 13px into the 37px hover
 // row (the Play and the row grow with the root font, the picture's height does not). A narrow picture
@@ -41,7 +41,7 @@ describe("a media picture", () => {
   });
 });
 
-const indexCss = readFileSync(new URL("../index.css", import.meta.url), "utf8");
+const indexCss = readFileSync(new URL("../../index.css", import.meta.url), "utf8");
 
 // Back from a channel page hands the card its focus again, after a mouse trip: with `focus-within`
 // its hover row stayed up under no pointer until a reload (owner). The chrome answers the pointer and
diff --git a/frontend/src/components/useVideoActions.dom.test.tsx b/frontend/src/features/video/useVideoActions.dom.test.tsx
similarity index 95%
rename from frontend/src/components/useVideoActions.dom.test.tsx
rename to frontend/src/features/video/useVideoActions.dom.test.tsx
index 016038bc..d32bf903 100644
--- a/frontend/src/components/useVideoActions.dom.test.tsx
+++ b/frontend/src/features/video/useVideoActions.dom.test.tsx
@@ -12,13 +12,15 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (k: string) => k }),
 }));
-vi.mock("./navigationContext", () => ({ useNavigationActions: () => ({ openChannel: vi.fn() }) }));
-vi.mock("./comfortPin", () => ({
+vi.mock("../navigation/navigationContext", () => ({
+  useNavigationActions: () => ({ openChannel: vi.fn() }),
+}));
+vi.mock("../comfort/comfortPin", () => ({
   pinVideo: vi.fn(),
   useComfortPin: () => ({ item: () => [] }),
 }));
 
-import { api, type Video } from "../lib/api";
+import { api, type Video } from "../../lib/api";
 import { useVideoActions } from "./useVideoActions";
 
 afterEach(() => {
diff --git a/frontend/src/components/useVideoActions.tsx b/frontend/src/features/video/useVideoActions.tsx
similarity index 94%
rename from frontend/src/components/useVideoActions.tsx
rename to frontend/src/features/video/useVideoActions.tsx
index e5db796e..cd5533d9 100644
--- a/frontend/src/components/useVideoActions.tsx
+++ b/frontend/src/features/video/useVideoActions.tsx
@@ -19,13 +19,13 @@ import {
   Undo2,
 } from "lucide-react";
 
-import { api, type Video, type VideoStatus } from "../lib/api";
-import { isResettable } from "../lib/api/feed";
-import { qk } from "../lib/queryKeys";
-import { pinVideo, useComfortPin } from "./comfortPin";
-import { useCopyItems } from "./copyItems";
-import { useNavigationActions } from "./navigationContext";
-import { type ActionMenuItem } from "./ui/ActionMenu";
+import { api, type Video, type VideoStatus } from "../../lib/api";
+import { isResettable } from "../../lib/api/feed";
+import { qk } from "../../lib/queryKeys";
+import { pinVideo, useComfortPin } from "../comfort/comfortPin";
+import { useCopyItems } from "../../components/ui/copyItems";
+import { useNavigationActions } from "../navigation/navigationContext";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
 import { VideoFollowUp, type VideoFollowUpState } from "./VideoFollowUp";
 
 // A video's ONE action list (docs/DESIGN.md "Action placement"). The right-click, the
diff --git a/frontend/src/components/OnboardingWizard.dialog.dom.test.tsx b/frontend/src/features/wizard/OnboardingWizard.dialog.dom.test.tsx
similarity index 97%
rename from frontend/src/components/OnboardingWizard.dialog.dom.test.tsx
rename to frontend/src/features/wizard/OnboardingWizard.dialog.dom.test.tsx
index 290a9a0c..8528354e 100644
--- a/frontend/src/components/OnboardingWizard.dialog.dom.test.tsx
+++ b/frontend/src/features/wizard/OnboardingWizard.dialog.dom.test.tsx
@@ -19,11 +19,11 @@ vi.mock("react-i18next", async (importOriginal) => {
     Trans: ({ i18nKey }: { i18nKey: string }) => i18nKey,
   };
 });
-vi.mock("../lib/onboarding", () => ({ beginGrant: vi.fn(), endOnboarding: vi.fn() }));
+vi.mock("../../lib/onboarding", () => ({ beginGrant: vi.fn(), endOnboarding: vi.fn() }));
 
 import OnboardingWizard from "./OnboardingWizard";
-import { api, type Me } from "../lib/api";
-import { clearAll, notify } from "../lib/notifications";
+import { api, type Me } from "../../lib/api";
+import { clearAll, notify } from "../../lib/notifications";
 
 const me = { id: 1, email: "a@b", can_read: false, can_write: false } as unknown as Me;
 
diff --git a/frontend/src/components/OnboardingWizard.escape.dom.test.tsx b/frontend/src/features/wizard/OnboardingWizard.escape.dom.test.tsx
similarity index 92%
rename from frontend/src/components/OnboardingWizard.escape.dom.test.tsx
rename to frontend/src/features/wizard/OnboardingWizard.escape.dom.test.tsx
index 0f911461..db5b668f 100644
--- a/frontend/src/components/OnboardingWizard.escape.dom.test.tsx
+++ b/frontend/src/features/wizard/OnboardingWizard.escape.dom.test.tsx
@@ -16,11 +16,11 @@ vi.mock("react-i18next", async (importOriginal) => {
     Trans: ({ i18nKey }: { i18nKey: string }) => i18nKey,
   };
 });
-vi.mock("../lib/onboarding", () => ({ beginGrant: vi.fn(), endOnboarding: vi.fn() }));
+vi.mock("../../lib/onboarding", () => ({ beginGrant: vi.fn(), endOnboarding: vi.fn() }));
 
 import OnboardingWizard from "./OnboardingWizard";
-import Modal from "./ui/Modal";
-import { api, type Me } from "../lib/api";
+import Modal from "../../components/ui/Modal";
+import { api, type Me } from "../../lib/api";
 
 const me = { id: 1, email: "a@b", can_read: false, can_write: false } as unknown as Me;
 
diff --git a/frontend/src/components/OnboardingWizard.tsx b/frontend/src/features/wizard/OnboardingWizard.tsx
similarity index 95%
rename from frontend/src/components/OnboardingWizard.tsx
rename to frontend/src/features/wizard/OnboardingWizard.tsx
index bb369336..69eecb1d 100644
--- a/frontend/src/components/OnboardingWizard.tsx
+++ b/frontend/src/features/wizard/OnboardingWizard.tsx
@@ -1,19 +1,19 @@
 import { useEffect, useId, useRef } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { AlertTriangle, Check, Loader2, RefreshCw, ShieldCheck, X } from "lucide-react";
-import { YouTubeIcon } from "../lib/brandIcons";
-import { api, type Me } from "../lib/api";
-import { beginGrant, endOnboarding } from "../lib/onboarding";
-import { Button } from "./ui/Button";
-import Overlay from "./ui/Overlay";
-import Toaster from "./ui/Toaster";
-import { useOverlayOrder } from "./ui/overlayOrder";
-import { useLayer } from "../lib/layerStack";
-import { trapTab, useDialogChrome } from "./ui/dialogFocus";
-import { IconButton } from "./ui/IconButton";
-import { SURFACE } from "./ui/surfaces";
+import { YouTubeIcon } from "../../lib/brandIcons";
+import { api, type Me } from "../../lib/api";
+import { beginGrant, endOnboarding } from "../../lib/onboarding";
+import { Button } from "../../components/ui/Button";
+import Overlay from "../../components/ui/Overlay";
+import Toaster from "../../components/ui/Toaster";
+import { useOverlayOrder } from "../../components/ui/overlayOrder";
+import { useLayer } from "../../lib/layerStack";
+import { trapTab, useDialogChrome } from "../../components/ui/dialogFocus";
+import { IconButton } from "../../components/ui/IconButton";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // A first-login wizard that walks the user through granting YouTube access one scope at a
 // time, each with a plain explanation and an up-front heads-up about Google's "unverified
diff --git a/frontend/src/components/WizardProvider.dom.test.tsx b/frontend/src/features/wizard/WizardProvider.dom.test.tsx
similarity index 95%
rename from frontend/src/components/WizardProvider.dom.test.tsx
rename to frontend/src/features/wizard/WizardProvider.dom.test.tsx
index 20661845..ee6a6c88 100644
--- a/frontend/src/components/WizardProvider.dom.test.tsx
+++ b/frontend/src/features/wizard/WizardProvider.dom.test.tsx
@@ -14,9 +14,9 @@ vi.mock("./OnboardingWizard", () => ({
 }));
 
 import { WizardProvider } from "./WizardProvider";
-import { api } from "../lib/api";
-import { claimLocalData, LS } from "../lib/storage";
-import { qk } from "../lib/queryKeys";
+import { api } from "../../lib/api";
+import { claimLocalData, LS } from "../../lib/storage";
+import { qk } from "../../lib/queryKeys";
 
 let save: ReturnType<typeof vi.spyOn>;
 function mount(preferences: Record<string, unknown>) {
diff --git a/frontend/src/components/WizardProvider.tsx b/frontend/src/features/wizard/WizardProvider.tsx
similarity index 95%
rename from frontend/src/components/WizardProvider.tsx
rename to frontend/src/features/wizard/WizardProvider.tsx
index 00c9045e..8834aeef 100644
--- a/frontend/src/components/WizardProvider.tsx
+++ b/frontend/src/features/wizard/WizardProvider.tsx
@@ -1,13 +1,13 @@
 import { lazy, Suspense, useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useQuery } from "@tanstack/react-query";
-import { api } from "../lib/api";
+import { api } from "../../lib/api";
 import {
   ONBOARDING_DISMISSED_OPTIONS,
   ONBOARDING_DISMISSED_PREF,
   shouldAutoOpenOnboarding,
-} from "../lib/onboarding";
-import { prefValue, usePref } from "../lib/usePref";
+} from "../../lib/onboarding";
+import { prefValue, usePref } from "../../lib/usePref";
 import { WizardActionsContext, type WizardActions } from "./wizardContext";
 
 const OnboardingWizard = lazy(() => import("./OnboardingWizard"));
diff --git a/frontend/src/components/wizardContext.ts b/frontend/src/features/wizard/wizardContext.ts
similarity index 100%
rename from frontend/src/components/wizardContext.ts
rename to frontend/src/features/wizard/wizardContext.ts
diff --git a/frontend/src/lib/downloadIntake.ts b/frontend/src/lib/downloadIntake.ts
index 5d48bc79..045676f1 100644
--- a/frontend/src/lib/downloadIntake.ts
+++ b/frontend/src/lib/downloadIntake.ts
@@ -4,7 +4,7 @@ import { createStore } from "./store";
 
 // Downloading a link is an action you start anywhere: the Files page's link box, a link pasted onto
 // any page, the command palette. They all hand the link to ONE app-wide download dialog
-// (components/DownloadIntake), so none of them mounts a dialog of its own.
+// (features/downloads/DownloadIntake), so none of them mounts a dialog of its own.
 
 const pending = createStore<string | null>(null);
 
diff --git a/frontend/src/lib/focusSafe.contract.test.ts b/frontend/src/lib/focusSafe.contract.test.ts
index c00a9588..4fcf2c10 100644
--- a/frontend/src/lib/focusSafe.contract.test.ts
+++ b/frontend/src/lib/focusSafe.contract.test.ts
@@ -26,7 +26,7 @@ describe("a raw button that can be disabled", () => {
   it("is refused inside a control primitive and in a test too", async () => {
     expect(await hits(DISABLED, "src/components/ui/Button.tsx")).toBe(1);
     // an existing test file: the project service admits only lintProbe.testkit's probe names
-    expect(await hits(DISABLED, "src/components/Feed.countStale.dom.test.tsx")).toBe(1);
+    expect(await hits(DISABLED, "src/modules/feed/Feed.countStale.dom.test.tsx")).toBe(1);
   });
 
   it("leaves a raw button with no disabled, and the two native-disabled owners, alone", async () => {
diff --git a/frontend/src/lib/gates.contract.test.ts b/frontend/src/lib/gates.contract.test.ts
index 0676c44d..7bb1994b 100644
--- a/frontend/src/lib/gates.contract.test.ts
+++ b/frontend/src/lib/gates.contract.test.ts
@@ -133,7 +133,12 @@ type Snapshot = {
 
 /** The register scope a code file belongs to, by its path (relative to frontend/). */
 function scopeOf(file: string): string {
-  if (!file.includes("/")) return /[.][mc]?js$/.test(file) ? "js configs" : "ts configs";
+  if (!file.includes("/"))
+    return /[.][mc]?js$/.test(file)
+      ? "js configs"
+      : /[.]test[.]ts$/.test(file)
+        ? "tool tests"
+        : "ts configs";
   if (file.startsWith("e2e/")) return "e2e";
   if (file.startsWith("src/design-lab/")) return "design-lab";
   // the network owners (NETWORK_OWNERS in eslint.config.js)
@@ -471,6 +476,8 @@ describe("the gate register (docs/gates.md)", () => {
       "vitest.config.ts",
       "reactPlugin.ts",
       "devOnlyGuard.ts",
+      "chunkGuard.ts",
+      "chunkGuard.test.ts",
       "playwright.config.ts",
       "postcss.config.js",
     ],
@@ -488,6 +495,14 @@ describe("the gate register (docs/gates.md)", () => {
     }
     expect(missingFrom(found)).toEqual([]);
   });
+  it("puts no file in two projects", () => {
+    // A src file the config project also lists builds into that project's output, and the app
+    // project (which references it) then refuses the source (TS6305) — but only on a clean
+    // build: a local run reuses the referenced project's cached output and stays green, so only
+    // the Docker image build said so.
+    const node = jsonc("frontend/tsconfig.node.json").include as string[];
+    expect(node.filter((f) => f === "src" || f.startsWith("src/"))).toEqual([]);
+  });
   it("type-checks every config file at the frontend root, or lists it", () => {
     const checked = new Set(INCLUDE["frontend/tsconfig.node.json"]);
     const roots = readdirSync(FRONTEND).filter((f) => /[.](ts|js|mjs|cjs)$/.test(f));
diff --git a/frontend/src/lib/gates.snapshot.json b/frontend/src/lib/gates.snapshot.json
index f6a147c5..7d42f338 100644
--- a/frontend/src/lib/gates.snapshot.json
+++ b/frontend/src/lib/gates.snapshot.json
@@ -35,6 +35,7 @@
         "local/glyph-link",
         "local/input-primitive",
         "local/jsx-comment-text",
+        "local/layers",
         "local/literal-a11y-text",
         "local/locale-format",
         "local/sortable-a11y",
@@ -117,6 +118,7 @@
         "local/glyph-link",
         "local/input-primitive",
         "local/jsx-comment-text",
+        "local/layers",
         "local/literal-a11y-text",
         "local/locale-format",
         "local/sortable-a11y",
@@ -642,6 +644,7 @@
         "local/glyph-link": [2],
         "local/input-primitive": [2],
         "local/jsx-comment-text": [2],
+        "local/layers": [2],
         "local/literal-a11y-text": [2],
         "local/locale-format": [2],
         "local/sortable-a11y": [2],
@@ -1041,6 +1044,67 @@
       },
       "settings": null
     },
+    "tool tests": {
+      "languageOptions": {
+        "ecmaVersion": 2022,
+        "globals": "82 names, sha1 29467d490e30",
+        "parser": "typescript-eslint/parser",
+        "parserOptions": { "projectService": true, "tsconfigRootDir": "." },
+        "sourceType": "module"
+      },
+      "linterOptions": { "reportUnusedDisableDirectives": 2 },
+      "notApplied": [
+        "local/button-primitive",
+        "local/glyph-link",
+        "local/input-primitive",
+        "local/jsx-comment-text",
+        "local/layers",
+        "local/literal-a11y-text",
+        "local/locale-format",
+        "local/sortable-a11y",
+        "local/surface-role",
+        "no-console",
+        "no-restricted-globals",
+        "no-restricted-properties",
+        "no-restricted-syntax",
+        "react-hooks/capitalized-calls",
+        "react-hooks/component-hook-factories",
+        "react-hooks/config",
+        "react-hooks/error-boundaries",
+        "react-hooks/exhaustive-deps",
+        "react-hooks/gating",
+        "react-hooks/globals",
+        "react-hooks/hooks",
+        "react-hooks/immutability",
+        "react-hooks/incompatible-library",
+        "react-hooks/invariant",
+        "react-hooks/memo-dependencies",
+        "react-hooks/no-deriving-state-in-effects",
+        "react-hooks/preserve-manual-memoization",
+        "react-hooks/purity",
+        "react-hooks/refs",
+        "react-hooks/rules-of-hooks",
+        "react-hooks/set-state-in-effect",
+        "react-hooks/set-state-in-render",
+        "react-hooks/static-components",
+        "react-hooks/syntax",
+        "react-hooks/todo",
+        "react-hooks/unsupported-syntax",
+        "react-hooks/use-memo",
+        "react-hooks/void-use-memo",
+        "react-refresh/only-export-components"
+      ],
+      "plugins": ["@", "@eslint-community/eslint-comments", "@typescript-eslint", "vitest"],
+      "rules": {
+        "@typescript-eslint/no-unused-expressions": [
+          2,
+          { "allowShortCircuit": false, "allowTaggedTemplates": false, "allowTernary": false }
+        ],
+        "vitest/no-disabled-tests": [2],
+        "vitest/no-focused-tests": [2, { "fixable": true }]
+      },
+      "settings": null
+    },
     "ts configs": {
       "languageOptions": {
         "ecmaVersion": 2022,
@@ -1055,6 +1119,7 @@
         "local/glyph-link",
         "local/input-primitive",
         "local/jsx-comment-text",
+        "local/layers",
         "local/literal-a11y-text",
         "local/locale-format",
         "local/sortable-a11y",
@@ -1283,7 +1348,7 @@
       "export default defineConfig({",
       "  plugins: [reactWithCompiler()],",
       "  test: {",
-      "    include: [\"src/**/*.test.{ts,tsx}\"],",
+      "    include: [\"src/**/*.test.{ts,tsx}\", \"*.test.ts\"],",
       "    environment: \"node\",",
       "    coverage: {",
       "      provider: \"v8\",",
diff --git a/frontend/src/lib/headings.contract.test.ts b/frontend/src/lib/headings.contract.test.ts
index f9084dd0..24f65c63 100644
--- a/frontend/src/lib/headings.contract.test.ts
+++ b/frontend/src/lib/headings.contract.test.ts
@@ -19,8 +19,8 @@ function sources(): Array<[string, string]> {
 
 // Pages that render OUTSIDE the app shell own their h1 (no shell, no hidden page name).
 const STANDALONE = new Set([
-  "components/Welcome.tsx",
-  "components/WatchPage.tsx",
+  "shell/Welcome.tsx",
+  "watch/WatchPage.tsx",
   "components/legal/LegalLayout.tsx",
   "design-lab/DesignLab.tsx",
   // The shell's hidden h1 and the primitive itself.
diff --git a/frontend/src/lib/layers.contract.test.ts b/frontend/src/lib/layers.contract.test.ts
new file mode 100644
index 00000000..1c50e1d6
--- /dev/null
+++ b/frontend/src/lib/layers.contract.test.ts
@@ -0,0 +1,120 @@
+import { describe, expect, it } from "vitest";
+
+import { eslint } from "./lintProbe.testkit";
+
+// The layer rule (local/layers in eslint.config.js) is what makes the folders a structure rather
+// than a filing habit: lib/ → components/ui/ → features/ → modules/ → shell/, an import only goes
+// down, and a module's own files are reached from outside only through its index.ts or lazily. A
+// rule that matched nothing would look exactly like a clean codebase, so each edge is probed here.
+async function refused(source: string, filePath: string): Promise<string[]> {
+  const [result] = await eslint.lintText(source, { filePath });
+  return (result?.messages ?? []).filter((m) => m.ruleId === "local/layers").map((m) => m.message);
+}
+const imp = (...specs: string[]) =>
+  specs.map((s, i) => `import x${i} from "${s}";\n`).join("") +
+  `export default [${specs.map((_, i) => `x${i}`).join(", ")}];\n`;
+
+const IN_FEED = "src/modules/feed/__probe.tsx";
+const IN_FEATURE = "src/features/video/__probe.tsx";
+
+describe("a module", () => {
+  it("reaches another module only through its index.ts", async () => {
+    expect(await refused(imp("../plex/PlexBrowse"), IN_FEED)).toHaveLength(1);
+    expect(await refused(imp("../plex", "../plex/index"), IN_FEED)).toEqual([]);
+  });
+
+  it("by every spelling: a type, a re-export, a type-only import", async () => {
+    const src =
+      'import type { P } from "../plex/plexContext";\n' +
+      'export { usePlex } from "../plex/plexContext";\n' +
+      'export * from "../channels/channelsContext";\n' +
+      "export type Q = P;\n";
+    expect(await refused(src, IN_FEED)).toHaveLength(3);
+  });
+
+  it("may open another module's page lazily, and use its own files and anything below", async () => {
+    const src =
+      'const P = () => import("../plex/PlexBrowse");\n' +
+      'import F from "./Feed";\nimport V from "../../features/video/VideoCard";\n' +
+      'import B from "../../components/ui/Button";\nimport { qk } from "../../lib/queryKeys";\n' +
+      "export default [P, F, V, B, qk];\n";
+    expect(await refused(src, IN_FEED)).toEqual([]);
+  });
+
+  it("never imports the shell", async () => {
+    expect(await refused(imp("../../shell/Header"), IN_FEED)).toHaveLength(1);
+  });
+});
+
+describe("a feature", () => {
+  it("reads a module only through its face, and never the shell", async () => {
+    expect(await refused(imp("../../modules/plex"), IN_FEATURE)).toEqual([]);
+    const up = await refused(imp("../../modules/plex/plexContext", "../../shell/App"), IN_FEATURE);
+    expect(up).toHaveLength(2);
+    expect(up.every((m) => m.includes("sits below"))).toBe(true);
+  });
+
+  it("uses other features freely", async () => {
+    expect(await refused(imp("../player/ClipPanel", "../filters/SearchBar"), IN_FEATURE)).toEqual(
+      [],
+    );
+  });
+});
+
+describe("the platform and lib layers", () => {
+  it("import nothing above them — not even a module's face", async () => {
+    const ui = await refused(
+      imp("../../features/video/VideoCard", "../../modules/feed", "../../shell/App"),
+      "src/components/ui/__layers_probe.tsx",
+    );
+    expect(ui).toHaveLength(3);
+    const lib = await refused(
+      imp("../features/navigation/navigationContext", "../modules/feed", "../shell/App"),
+      "src/lib/__layers_probe.ts",
+    );
+    expect(lib).toHaveLength(3);
+  });
+});
+
+describe("the entries", () => {
+  // main.tsx and the /watch page (watch/, its own entry) sit above every layer: no layer imports
+  // them, or the app and the shared page would stop being separable.
+  it("are imported by no layer", async () => {
+    const lib =
+      imp("../watch/WatchPage") + 'import type { T } from "../main";\nexport type U = T;\n';
+    expect(await refused(lib, "src/lib/__layers_probe.ts")).toHaveLength(2);
+    expect(
+      await refused(imp("../../watch/WatchPage"), "src/components/ui/__layers_probe.tsx"),
+    ).toHaveLength(1);
+    expect(await refused(imp("../../watch/watchStrings"), IN_FEATURE)).toHaveLength(1);
+    expect(await refused(imp("../../watch/WatchPage"), IN_FEED)).toHaveLength(1);
+    expect(await refused(imp("../watch/WatchPage"), "src/shell/__layers_probe.tsx")).toHaveLength(
+      1,
+    );
+  });
+
+  it("while the /watch entry itself imports its page", async () => {
+    expect(await refused(imp("./watch/WatchPage"), "src/__layers_probe.tsx")).toEqual([]);
+  });
+});
+
+describe("an import()", () => {
+  it("is the same path in backticks", async () => {
+    const src = "export const L = () => import(`../modules/feed/Feed`);\n";
+    expect(await refused(src, "src/lib/__layers_probe.ts")).toHaveLength(1);
+  });
+});
+
+describe("the shell and the entry", () => {
+  it("reach a module through its face, or lazily", async () => {
+    const src =
+      imp("../modules/feed/Feed", "../modules/feed") +
+      'export const L = () => import("../modules/feed/Feed");\n';
+    expect(await refused(src, "src/shell/__layers_probe.tsx")).toHaveLength(1);
+  });
+
+  it("only the root entry mounts the shell", async () => {
+    expect(await refused(imp("./shell/App"), "src/__layers_probe.tsx")).toEqual([]);
+    expect(await refused(imp("./modules/feed/Feed"), "src/__layers_probe.tsx")).toHaveLength(1);
+  });
+});
diff --git a/frontend/src/lib/lazyWithPreload.ts b/frontend/src/lib/lazyWithPreload.ts
index fd7da657..c31906ed 100644
--- a/frontend/src/lib/lazyWithPreload.ts
+++ b/frontend/src/lib/lazyWithPreload.ts
@@ -41,3 +41,14 @@ export function lazyWithPreload<P extends object>(
   }
   return Object.assign(Preloadable, { preload });
 }
+
+/** A lazy page that resolves only once `alongside` (its side rail) has loaded too. The rail renders in
+ *  its own Suspense beside the page, and a pinned rail sits in the page's flow: arriving after the page,
+ *  it would shove the page's content sideways on its first visit. Loaded together, the rail is already
+ *  there (it renders synchronously once loaded) when the page commits. */
+export function lazyWithPreloadAlongside<P extends object>(
+  factory: () => Promise<{ default: ComponentType<P> }>,
+  alongside: PreloadableComponent<object>,
+): PreloadableComponent<P> {
+  return lazyWithPreload(() => Promise.all([factory(), alongside.preload()]).then(([m]) => m));
+}
diff --git a/frontend/src/lib/lazyWithPreloadAlongside.test.ts b/frontend/src/lib/lazyWithPreloadAlongside.test.ts
new file mode 100644
index 00000000..4334d6fb
--- /dev/null
+++ b/frontend/src/lib/lazyWithPreloadAlongside.test.ts
@@ -0,0 +1,29 @@
+// A page whose rail sits in its flow must not be ready before the rail: the rail would then appear a
+// moment after the page and shove its content sideways.
+import { describe, expect, it } from "vitest";
+import type { ComponentType } from "react";
+import { lazyWithPreload, lazyWithPreloadAlongside } from "./lazyWithPreload";
+
+const component = (() => null) as ComponentType<object>;
+
+describe("lazyWithPreloadAlongside", () => {
+  it("is ready only once its rail has loaded too", async () => {
+    let releaseRail = () => {};
+    const rail = lazyWithPreload(
+      () =>
+        new Promise<{ default: ComponentType<object> }>((resolve) => {
+          releaseRail = () => resolve({ default: component });
+        }),
+    );
+    const page = lazyWithPreloadAlongside(async () => ({ default: component }), rail);
+    let pageReady = false;
+    const loading = page.preload().then(() => {
+      pageReady = true;
+    });
+    await new Promise((r) => setTimeout(r, 0));
+    expect(pageReady).toBe(false); // its own code is in, its rail's is not
+    releaseRail();
+    await loading;
+    expect(pageReady).toBe(true);
+  });
+});
diff --git a/frontend/src/lib/lintProbe.testkit.ts b/frontend/src/lib/lintProbe.testkit.ts
index 40b433cc..3d38cd2c 100644
--- a/frontend/src/lib/lintProbe.testkit.ts
+++ b/frontend/src/lib/lintProbe.testkit.ts
@@ -15,8 +15,11 @@ const FRONTEND = fileURLToPath(new URL("../../", import.meta.url));
 // file no tsconfig includes, so those names are let into TypeScript's default project here — the
 // probe still runs the real config, typed rules included, rather than a copy with them switched off.
 const PROBE_FILES = [
+  "src/__*probe.tsx",
   "src/*/__*probe.ts",
   "src/*/__*probe.tsx",
+  // a file inside one module or feature (src/modules/feed/…), for the layer rule
+  "src/*/*/__*probe.tsx",
   "src/components/ui/__*probe.tsx",
   "src/lib/api/__*probe.ts",
   "src/components/Button.tsx",
diff --git a/frontend/src/lib/localeFormat.contract.test.ts b/frontend/src/lib/localeFormat.contract.test.ts
index 807f8cf8..ad592faa 100644
--- a/frontend/src/lib/localeFormat.contract.test.ts
+++ b/frontend/src/lib/localeFormat.contract.test.ts
@@ -58,6 +58,14 @@ describe("the language in a component", () => {
     expect(await hits(next)).toBe(1);
   });
 
+  it("is refused in every folder that holds components, not just components/", async () => {
+    // The rule once matched `/src/components/` only; when the feature code moved out into the shell,
+    // the modules and the features it silently stopped applying to all of them.
+    const src = 'import i18n from "../i18n";\nexport const L = () => <b>{i18n.language}</b>;\n';
+    for (const dir of ["shell", "modules", "features", "watch"])
+      expect(await hits(src, `src/${dir}/__probe.tsx`), dir).toBe(1);
+  });
+
   it("is taken from useTranslation, and the singleton stays usable outside components", async () => {
     const hook =
       'import { useTranslation } from "react-i18next";\n' +
diff --git a/frontend/src/lib/moduleDef.ts b/frontend/src/lib/moduleDef.ts
new file mode 100644
index 00000000..207924d7
--- /dev/null
+++ b/frontend/src/lib/moduleDef.ts
@@ -0,0 +1,47 @@
+import type { ComponentType, ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import type { Me } from "./api";
+import type { Page } from "./urlState";
+import type { PreloadableComponent } from "./lazyWithPreload";
+
+// What a module says about itself: one definition per page, in its own folder (`modules/<page>/module.ts`,
+// handed out through its index.ts), collected in nav order by features/navigation/moduleRegistry. A new
+// page is its folder, its id in lib/urlState, and one line in that registry.
+export type ModuleDef = {
+  id: Page;
+  // i18n key for the SHORT display name — the label the nav rail and the palette show.
+  labelKey: string;
+  // The SHORT name under the icon when the user turns the rail labels on (B7): the rail is 3.75rem
+  // wide with labels or without, so it has to fit there ("Alerts", "Listák"). The full `labelKey`
+  // stays the tooltip and the accessible name.
+  railKey: string;
+  // i18n key for the LONGER, descriptive browser-tab title (e.g. "Channel manager" vs the rail's
+  // "Channels"). Absent → the tab title falls back to `labelKey`. Read via `pageTitleKey`.
+  titleKey?: string;
+  icon: LucideIcon;
+  // Admin/system modules render in their own section (below a divider) in the nav rail.
+  system?: boolean;
+  // Carries a live unread/active count in the rail (the number itself is computed in NavSidebar,
+  // which owns the polling queries; this only flags which modules have one).
+  hasBadge?: boolean;
+  // Availability for THIS account, derived from language-independent account state (plex toggle,
+  // admin role). Absent = always available. Drives the reachable set: the rail, the palette, the
+  // `g` chords, and which page a link may land on.
+  gate?: (me: Me) => boolean;
+  // The page itself: lazy, its own chunk, fetched on the first visit or by the idle preload. Prop-free:
+  // it reads `me` and its module's state from hooks.
+  Page: PreloadableComponent<object>;
+  // Its side rail, if it has one: lazy like the page, and prop-free (its layout and collapse flag are
+  // its own, lib/useRail).
+  Rail?: PreloadableComponent<object>;
+  // The content column's max width. The header + toolbar centre on this same width (via --content-mw)
+  // so the floating chrome lines up with the centred content instead of spanning the whole column.
+  // MUST match the max-w the page's own content wrapper uses. Omit for a full-width page (feed).
+  maxWidth?: string;
+  // The module's store, if it has one: the state its page, its rail and its readers elsewhere (the
+  // palette, the notifications, the header search) share. Mounted at the root for the whole session
+  // (features/navigation/ModuleStores), so what it holds in memory survives a visit to another page.
+  // Static, unlike the page: it is on the boot path by design. It reads no other module's store, so
+  // the order the stores nest in does not matter (moduleStores.contract.test).
+  Store?: ComponentType<{ children: ReactNode }>;
+};
diff --git a/frontend/src/lib/modules.ts b/frontend/src/lib/modules.ts
deleted file mode 100644
index 2e1d43de..00000000
--- a/frontend/src/lib/modules.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import {
-  Activity,
-  BarChart3,
-  Bell,
-  Clapperboard,
-  Home,
-  ListVideo,
-  ScrollText,
-  FolderOpen,
-  Settings,
-  SlidersHorizontal,
-  Tv,
-  Users,
-  type LucideIcon,
-} from "lucide-react";
-import { YouTubeIcon } from "./brandIcons";
-import type { Me } from "./api";
-import type { Page } from "./urlState";
-
-// ── The module registry ───────────────────────────────────────────────────────────────────────
-// One ordered source of truth for every navigable module: its nav label, icon, admin/system
-// placement, whether it carries a live badge, and its availability gate. The nav rail, the header's
-// ◀/▶ stepper, and (as the registry grows) the page render all read from here, so a new or newly
-// gated module shows up everywhere at once — nothing hard-codes the sequence or duplicates the icon.
-export type ModuleDef = {
-  id: Page;
-  // i18n key for the SHORT display name — the same label the nav rail and the header pill show.
-  labelKey: string;
-  // The SHORT name under the icon when the user turns the rail labels on (B7): the rail is 3.75rem
-  // wide with labels or without, so it has to fit there ("Alerts", "Listák"). The full `labelKey`
-  // stays the tooltip and the accessible name.
-  railKey: string;
-  // i18n key for the LONGER, descriptive browser-tab title (e.g. "Channel manager" vs the rail's
-  // "Channels"). Absent → the tab title falls back to `labelKey`. Read via `pageTitleKey`.
-  titleKey?: string;
-  icon: LucideIcon;
-  // Admin/system modules render in their own section (below a divider) in the nav rail.
-  system?: boolean;
-  // Carries a live unread/active count in the rail (the number itself is computed in NavSidebar,
-  // which owns the polling queries; this only flags which modules have one).
-  hasBadge?: boolean;
-  // Availability for THIS account, derived from language-independent account state (plex toggle,
-  // admin role). Absent = always available. Drives both the reachable module
-  // set (nav + stepper) and, later, the render gate.
-  gate?: (me: Me) => boolean;
-};
-
-const isAdmin = (me: Me) => me.role === "admin";
-
-// Ordered in nav-rail order — this array IS the sequence the rail and the stepper walk.
-const MODULES: readonly ModuleDef[] = [
-  // Home leads: it is the landing (see navigationInit.loadInitialPage), and the module order IS the
-  // nav order and the header stepper's sequence. The feed takes the YouTube mark its own toolbar
-  // already uses, so the two are apart by shape and not just by position.
-  {
-    id: "home",
-    labelKey: "home.navLabel",
-    railKey: "nav.rail.home",
-    titleKey: "home.title",
-    icon: Home,
-  },
-  { id: "feed", labelKey: "header.account.feed", railKey: "nav.rail.feed", icon: YouTubeIcon },
-  {
-    id: "channels",
-    labelKey: "header.account.channels",
-    railKey: "nav.rail.channels",
-    titleKey: "header.channelManager",
-    icon: Tv,
-  },
-  {
-    id: "playlists",
-    labelKey: "header.account.playlists",
-    railKey: "nav.rail.playlists",
-    icon: ListVideo,
-  },
-  {
-    id: "plex",
-    labelKey: "plex.navLabel",
-    railKey: "nav.rail.plex",
-    icon: Clapperboard,
-    gate: (me) => me.plex_enabled,
-  },
-  {
-    id: "notifications",
-    labelKey: "inbox.navLabel",
-    railKey: "nav.rail.notifications",
-    icon: Bell,
-    hasBadge: true,
-  },
-  {
-    id: "files",
-    labelKey: "files.navLabel",
-    railKey: "nav.rail.files",
-    icon: FolderOpen,
-  },
-  {
-    id: "stats",
-    labelKey: "header.account.stats",
-    railKey: "nav.rail.stats",
-    titleKey: "header.usageStats",
-    icon: BarChart3,
-  },
-  {
-    id: "scheduler",
-    labelKey: "header.account.scheduler",
-    railKey: "nav.rail.scheduler",
-    titleKey: "header.scheduler",
-    icon: Activity,
-    system: true,
-    gate: isAdmin,
-  },
-  {
-    id: "config",
-    labelKey: "header.account.config",
-    railKey: "nav.rail.config",
-    titleKey: "header.configuration",
-    icon: SlidersHorizontal,
-    system: true,
-    gate: isAdmin,
-  },
-  {
-    id: "users",
-    labelKey: "header.account.users",
-    railKey: "nav.rail.users",
-    titleKey: "header.users",
-    icon: Users,
-    system: true,
-    gate: isAdmin,
-  },
-  {
-    id: "activity",
-    labelKey: "header.account.activity",
-    railKey: "nav.rail.activity",
-    titleKey: "activity.title",
-    icon: ScrollText,
-    system: true,
-    gate: isAdmin,
-  },
-];
-
-// Settings is reachable (its own rail button + the ◀/▶ wrap target) but is not a primary module in
-// the ordered nav list, so it lives beside the array rather than in it.
-const SETTINGS_MODULE: ModuleDef = {
-  id: "settings",
-  labelKey: "header.account.settings",
-  railKey: "nav.rail.settings",
-  titleKey: "settings.title",
-  icon: Settings,
-};
-
-// Registering a NEW Page means adding it to MODULES (or SETTINGS_MODULE) above — that's the single
-// place. If a Page is left unregistered, moduleDef()/moduleLabelKey[] return undefined and NavSidebar
-// throws on `.icon`; the coverage isn't compiler-enforced here because the ordered array can't also
-// be an exhaustive Page map, so treat the array as the checklist when the Page union grows.
-const BY_ID = Object.fromEntries([...MODULES, SETTINGS_MODULE].map((m) => [m.id, m])) as Record<
-  Page,
-  ModuleDef
->;
-
-// Look up a module's definition by page id (every Page is covered, incl. settings).
-export function moduleDef(id: Page): ModuleDef {
-  return BY_ID[id];
-}
-
-// The i18n key for each module's SHORT display name. Single source so the nav rail and the header's
-// ModuleName pill always read identically (the longer, descriptive `pageTitleKey` names are kept
-// only for the browser tab title).
-export const moduleLabelKey: Record<Page, string> = Object.fromEntries(
-  [...MODULES, SETTINGS_MODULE].map((m) => [m.id, m.labelKey]),
-) as Record<Page, string>;
-
-export const moduleRailKey: Record<Page, string> = Object.fromEntries(
-  [...MODULES, SETTINGS_MODULE].map((m) => [m.id, m.railKey]),
-) as Record<Page, string>;
-
-// Admin/system modules — rendered in their own section (below a divider) in the nav rail.
-export const SYSTEM_PAGES: readonly Page[] = MODULES.filter((m) => m.system).map((m) => m.id);
-
-// The ordered list of primary module pages available to THIS user, in nav-rail order. Single
-// source of truth for both the nav rail (NavSidebar) and the header's ◀/▶ module stepper, so a
-// new module (or a newly-gated one) shows up in both at once. Availability is derived from the
-// account via each module's `gate`, so the reachable set changes with the account state, not the UI.
-export function moduleOrder(me: Me): Page[] {
-  return MODULES.filter((m) => !m.gate || m.gate(me)).map((m) => m.id);
-}
-
-/** The page this account is shown for `page`: itself when its gate lets the account in, else the
- *  feed (a link to an admin page, a Back onto one, an admin role taken away mid-session). Signed
- *  out, no page renders, so nothing is moved. */
-export function reachablePage(page: Page, me: Me | null | undefined): Page {
-  const gate = moduleDef(page).gate;
-  return !me || !gate || gate(me) ? page : "feed";
-}
diff --git a/frontend/src/lib/navPosition.wiring.contract.test.ts b/frontend/src/lib/navPosition.wiring.contract.test.ts
index 88ea95fe..1854d26d 100644
--- a/frontend/src/lib/navPosition.wiring.contract.test.ts
+++ b/frontend/src/lib/navPosition.wiring.contract.test.ts
@@ -28,7 +28,7 @@ function offenders(): { hits: string[]; pushes: number } {
   const hits: string[] = [];
   let pushes = 0;
   for (const [path, code] of Object.entries(files)) {
-    // Glob keys are relative to this file: `./x.ts` is lib, `../components/x.tsx` is a sibling folder.
+    // Glob keys are relative to this file: `./x.ts` is lib, `../modules/feed/x.tsx` a sibling folder.
     const rel = path.startsWith("./") ? `lib/${path.slice(2)}` : path.replace(/^\.\.\//, "");
     const lines = code.split("\n");
     lines.forEach((line, i) => {
diff --git a/frontend/src/lib/navRing.contract.test.ts b/frontend/src/lib/navRing.contract.test.ts
index d143831e..c0045948 100644
--- a/frontend/src/lib/navRing.contract.test.ts
+++ b/frontend/src/lib/navRing.contract.test.ts
@@ -39,8 +39,8 @@ it("index.css draws an inset item's ring inside, after the outside rule", () =>
 const src = (p: string) => readFileSync(new URL(p, import.meta.url), "utf8");
 // The history rows (runs, admin actions) and the log lines share one frame, HistoryRow.
 it.each([
-  ["../components/HistoryRow.tsx", /navItemAttrs\(navIndex, [^)]*\{ inset: true \}\)/],
-  ["../components/LogLine.tsx", /<HistoryRow\s/],
+  ["../features/diagnostics/HistoryRow.tsx", /navItemAttrs\(navIndex, [^)]*\{ inset: true \}\)/],
+  ["../features/diagnostics/LogLine.tsx", /<HistoryRow\s/],
 ])("%s asks for the inside ring", (file, re) => {
   expect(src(file)).toMatch(re);
 });
diff --git a/frontend/src/lib/nextPage.wiring.contract.test.ts b/frontend/src/lib/nextPage.wiring.contract.test.ts
index 962c3fd4..e11e4379 100644
--- a/frontend/src/lib/nextPage.wiring.contract.test.ts
+++ b/frontend/src/lib/nextPage.wiring.contract.test.ts
@@ -5,7 +5,7 @@ import { readSources } from "./rawSources.testkit";
 // settles. A read-ahead that only checks `isFetchingNextPage` calls during a background
 // refetch, joins it through NEXT_PAGE and loads no page: the grid stalls at its loaded end until the
 // reader scrolls the range. The jsdom virtualizer measures nothing, so the wiring is pinned in source.
-const files = readSources(__dirname, ["../components/**/*.tsx", "!../components/**/*.test.tsx"]);
+const files = readSources(__dirname, ["../**/*.tsx", "!../**/*.test.tsx", "!../design-lab/**"]);
 const source = (name: string) => {
   const hit = Object.entries(files).find(([path]) => path.endsWith(`/${name}`));
   if (!hit) throw new Error(`no ${name}`);
@@ -43,11 +43,11 @@ describe("an infinite list's read-ahead", () => {
 // NEXT_PAGE it would join the refetch and load nothing. NEXT_PAGE is only for the read-aheads, so a
 // click site that goes back to it fails here (the YouTube "Load more" was once missed).
 describe("a click that loads the next page", () => {
-  const READ_AHEADS = new Set(["ui/VirtualGrid.tsx", "PlexBrowse.tsx"]);
+  const READ_AHEADS = new Set(["components/ui/VirtualGrid.tsx", "modules/plex/PlexBrowse.tsx"]);
   it("uses nextPageOnClick; NEXT_PAGE only in the read-aheads", () => {
     const users = Object.entries(files)
       .filter(([, src]) => /fetchNextPage\(NEXT_PAGE\)/.test(src as string))
-      .map(([path]) => path.replace("../components/", ""));
+      .map(([path]) => path.replace(/^\.\.\//, ""));
     expect(users.sort()).toEqual([...READ_AHEADS].sort());
     for (const [file, sites] of [
       ["AdminLogs.tsx", 2],
diff --git a/frontend/src/lib/pageMeta.ts b/frontend/src/lib/pageMeta.ts
deleted file mode 100644
index ae531e57..00000000
--- a/frontend/src/lib/pageMeta.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { Page } from "./urlState";
-import { moduleDef } from "./modules";
-
-// The i18n key for a page's human title — shared by the top-bar header and the browser tab title so
-// the two never drift. Derived from the single ModuleDef registry (modules.ts): a module's optional
-// `titleKey` is the longer, descriptive tab title (e.g. "Channel manager"), falling back to its
-// short nav `labelKey` when the two are the same. Registering a new Page is then one touch (add it
-// to MODULES) instead of also editing a switch here.
-export function pageTitleKey(page: Page): string {
-  const def = moduleDef(page);
-  return def.titleKey ?? def.labelKey;
-}
diff --git a/frontend/src/lib/playerModes.ts b/frontend/src/lib/playerModes.ts
index 78b78cfc..03c202d8 100644
--- a/frontend/src/lib/playerModes.ts
+++ b/frontend/src/lib/playerModes.ts
@@ -3,7 +3,7 @@
 // wraps the list at its ends ("all"), or neither ("off"). Both apply to any queued player (feed or
 // playlist).
 //
-// Here rather than in `components/playerModalControls` because `lib/playerModalHooks` reads them
+// Here rather than in `features/player/playerModalControls` because `lib/playerModalHooks` reads them
 // too, and `lib/` may not import from `components/` (lint-enforced, see eslint.config.js).
 export type AutoMode = "off" | "next" | "prev" | "random";
 export type LoopMode = "off" | "one" | "all";
diff --git a/frontend/src/components/usePlexActiveFilters.ts b/frontend/src/lib/plexActiveFilters.ts
similarity index 66%
rename from frontend/src/components/usePlexActiveFilters.ts
rename to frontend/src/lib/plexActiveFilters.ts
index 23c0876c..4bf461fb 100644
--- a/frontend/src/components/usePlexActiveFilters.ts
+++ b/frontend/src/lib/plexActiveFilters.ts
@@ -1,43 +1,14 @@
-import { useTranslation } from "react-i18next";
-import { vocabI18nKey } from "../lib/vocab";
-import { type ActiveFilter } from "../lib/useActiveFilters";
-import { EMPTY_PLEX_FILTERS, type PlexFilters } from "../lib/api";
-import { PLEX_SORT_FALLBACK } from "../lib/plexSort";
-import { usePlex, usePlexActions } from "./plexContext";
-import { usePlexCollectionTitles } from "../lib/usePlexCollectionTitles";
+import { vocabI18nKey } from "./vocab";
+import { type ActiveFilter } from "./useActiveFilters";
+import { type PlexFilters } from "./api";
 
-// Plex's analogue of useActiveFilters: turns the shared Plex state (expanded filters + watch-state)
-// into the source-agnostic ActiveFilter[] the shared ActiveFilterChips renders above the grid.
-// Plex thereby gets the same at-a-glance "what's narrowing this" row — with per-chip removal — that
-// the feed has, instead of the narrowing being visible only inside the collapsed sidebar. Labels reuse
-// the existing plex.* i18n keys; multi-value dimensions (genres, people, ratings) emit one chip each so
-// removing one keeps the rest (same shape as the feed's tag/channel chips). Sort is NOT a chip here —
-// it's an always-visible control above the grid, like the feed. Lives here, not in lib, because
-// it reads the Plex provider (lib stays provider-free, like useActiveFilters).
 type TFn = (key: string, options?: Record<string, unknown>) => string;
 
-export function usePlexActiveFilters(): ActiveFilter[] {
-  const { show, filters } = usePlex();
-  const { setShow, setFilters } = usePlexActions();
-  const { t } = useTranslation();
-  const patch = (p: Partial<PlexFilters>) => setFilters({ ...filters, ...p });
-  // A link opened cold knows the collection ids but not their names — resolve the missing ones for
-  // display (see usePlexCollectionTitles for why they are NOT written back into the filter state).
-  const collections = usePlexCollectionTitles(filters.collections, filters.collectionTitles);
-  return buildPlexActiveFilters(
-    filters,
-    show,
-    patch,
-    setShow,
-    t,
-    collections.titles,
-    collections.pending,
-  );
-}
-
-// The pure builder behind the hook: turns a Plex filter set + watch-state into the source-agnostic
-// ActiveFilter[]. Extracted so the saved-views manager can DESCRIBE an arbitrary view's captured
-// filters (with no-op removes) — the labels stay in one place, no duplication with the live chip row.
+// The pure builder behind Plex's chip row (modules/plex usePlexActiveFilters): turns a Plex filter
+// set + watch-state into the source-agnostic ActiveFilter[]. Apart from the hook so the saved-views
+// manager (features/filters) can DESCRIBE an arbitrary view's captured filters (with no-op removes)
+// without reaching into the Plex module — the labels stay in one place, no duplication with the live
+// chip row. Store-free, like its feed twin useActiveFilters.
 export function buildPlexActiveFilters(
   filters: PlexFilters,
   show: string,
@@ -155,17 +126,6 @@ export function buildPlexActiveFilters(
   return out;
 }
 
-// The one "reset every Plex narrowing" callback, shared by the sidebar's Clear-filters and the chip
-// row's Clear-all so the two can't drift: expanded filters + watch-state + sort all go back to default.
-export function usePlexClearFilters(): () => void {
-  const { setShow, setSort, setFilters } = usePlexActions();
-  return () => {
-    setFilters(EMPTY_PLEX_FILTERS);
-    setShow("all");
-    setSort(PLEX_SORT_FALLBACK);
-  };
-}
-
 // One chip per selected collection, named by the resolved titles (a placeholder while a link's titles
 // load), else by the ones the state carries, else the generic word.
 function collectionChips(
diff --git a/frontend/src/lib/plexImage.contract.test.ts b/frontend/src/lib/plexImage.contract.test.ts
index 7bd308af..6d1355e8 100644
--- a/frontend/src/lib/plexImage.contract.test.ts
+++ b/frontend/src/lib/plexImage.contract.test.ts
@@ -53,9 +53,11 @@ it("names each backdrop cut by the width the proxy cuts it at", () => {
 // among the attributes and whatever its variable is called: the first cut of this test read only a
 // leading `src={…thumb…}` and missed two of the three sites it was written for.
 const plexFiles = readSources(__dirname, [
-  "../components/{Plex,plex}*.tsx",
-  "../components/{Home,PosterTile,UpNextCard}.tsx",
-  "!../components/**/*.test.tsx",
+  "../modules/plex/{Plex,plex}*.tsx",
+  "../features/plexCards/{Plex,plex}*.tsx",
+  "../modules/home/Home.tsx",
+  "../modules/plex/{PosterTile,UpNextCard}.tsx",
+  "!../**/*.test.tsx",
 ]);
 const ALLOWED = new Set([
   "plexCards.tsx pic.src", // cardImage's own src (srcSet/sizes beside it): the card cut
diff --git a/frontend/src/lib/savedViews.ts b/frontend/src/lib/savedViews.ts
index eaafc7c7..6619a678 100644
--- a/frontend/src/lib/savedViews.ts
+++ b/frontend/src/lib/savedViews.ts
@@ -1,5 +1,5 @@
-// Pure selection helpers for saved ("personal") views, split out of SavedViewsProvider so the
-// tie-break logic is unit-testable without mounting the provider (its React Query / context deps).
+// Pure selection helpers for saved ("personal") views, split out of useSavedViewsStore so the
+// tie-break logic is unit-testable without mounting a store (its React Query / context deps).
 
 /** Among the views whose filters match the live filters, pick the one to treat as active: prefer the
  *  explicitly-applied ("sticky") view when several capture identical filters, so apply(B) isn't
@@ -23,7 +23,7 @@ export function preferSticky<T extends { id: number; is_default?: boolean }>(
  *  account and — feed only — no URL filter override); otherwise the last-session/URL/manual filters
  *  win, exactly as they do after any edit. First `is_default` wins if somehow several are flagged, so
  *  the choice is deterministic. This is the single default-application path for BOTH the feed and Plex
- *  (SavedViewsProvider drives it on the views query's first resolve) — it replaced the feed-only
+ *  (useSavedViewsStore drives it on the views query's first resolve) — it replaced the feed-only
  *  localStorage mirror that raced the login effect and left Plex with no default at all. */
 export function pickDefaultToSeed<T extends { is_default: boolean }>(
   views: T[],
diff --git a/frontend/src/lib/subscriptionCache.test.ts b/frontend/src/lib/subscriptionCache.test.ts
index 0a3a7ff0..ff9f6109 100644
--- a/frontend/src/lib/subscriptionCache.test.ts
+++ b/frontend/src/lib/subscriptionCache.test.ts
@@ -24,9 +24,10 @@ describe("a subscription change", () => {
   });
 
   it("is refreshed through that one function wherever it is made", () => {
-    const root = new URL("../components/", import.meta.url);
-    const sites = readdirSync(root)
-      .filter((f) => f.endsWith(".tsx") && !f.includes(".test."))
+    const root = new URL("../", import.meta.url);
+    const sites = readdirSync(root, { recursive: true, encoding: "utf8" })
+      .map((f) => f.split("\\").join("/"))
+      .filter((f) => f.endsWith(".tsx") && !f.includes(".test.") && !f.startsWith("design-lab/"))
       .map((f) => [f, readFileSync(new URL(f, root), "utf8")] as const)
       .filter(([, src]) => /api\.(un)?subscribeChannel\(/.test(src));
     expect(sites.length).toBeGreaterThanOrEqual(3);
diff --git a/frontend/src/components/tagChipNames.dom.test.tsx b/frontend/src/lib/tagChipNames.dom.test.tsx
similarity index 94%
rename from frontend/src/components/tagChipNames.dom.test.tsx
rename to frontend/src/lib/tagChipNames.dom.test.tsx
index a31a5b33..3cc16799 100644
--- a/frontend/src/components/tagChipNames.dom.test.tsx
+++ b/frontend/src/lib/tagChipNames.dom.test.tsx
@@ -7,8 +7,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { cleanup, renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createElement, type ReactNode } from "react";
-import { api, type FeedFilters, type Tag } from "../lib/api";
-import { clearedFilters, useActiveFilters } from "../lib/useActiveFilters";
+import { api, type FeedFilters, type Tag } from "./api";
+import { clearedFilters, useActiveFilters } from "./useActiveFilters";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
diff --git a/frontend/src/lib/theme.contract.test.ts b/frontend/src/lib/theme.contract.test.ts
index 69473822..f5796030 100644
--- a/frontend/src/lib/theme.contract.test.ts
+++ b/frontend/src/lib/theme.contract.test.ts
@@ -108,7 +108,7 @@ describe("the media colours", () => {
     );
     expect(native).not.toMatch(/\baccent-accent\b/);
     expect(native.match(/\baccent-chosen\b/g)).toHaveLength(2);
-    const plex = readFileSync(new URL("../components/PlexPlayer.tsx", import.meta.url), "utf8");
+    const plex = readFileSync(new URL("../modules/plex/PlexPlayer.tsx", import.meta.url), "utf8");
     // No accent fill at all on the Plex player: its progress bar's played part is white and its head
     // the media amber — a marked place, like the intro / credits markers and the clip's playhead.
     expect(plex).not.toMatch(/\bbg-accent\b/);
@@ -117,7 +117,7 @@ describe("the media colours", () => {
     // The player's own components are chrome throughout: nothing chosen there is the accent's text
     // (a light theme's accent is dark on it — Slate 2.84:1).
     for (const f of ["PlexPlayer.tsx", "PlexPlayerSettings.tsx", "UpNextCard.tsx"]) {
-      const src = readFileSync(new URL(`../components/${f}`, import.meta.url), "utf8");
+      const src = readFileSync(new URL(`../modules/plex/${f}`, import.meta.url), "utf8");
       expect(src, f).not.toMatch(/\btext-accent\b/);
     }
     // A class string that paints the chrome carries the media marks (media-scope re-points them
@@ -183,7 +183,7 @@ it("a tonal fill under text is an opaque tint", () => {
   const sites = [
     "components/ui/Badge.tsx",
     "components/ui/ItemCount.tsx",
-    "components/FilesRail.tsx",
+    "modules/files/FilesRail.tsx",
   ];
   const offenders = sites.flatMap((f) => {
     const src = readFileSync(new URL(`../${f}`, import.meta.url), "utf8");
diff --git a/frontend/src/lib/uiReadme.contract.test.ts b/frontend/src/lib/uiReadme.contract.test.ts
new file mode 100644
index 00000000..c8811663
--- /dev/null
+++ b/frontend/src/lib/uiReadme.contract.test.ts
@@ -0,0 +1,20 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+// components/ui/README.md is how the platform layer is found: "reuse before build" only works if a
+// primitive is listed where the next author looks. A dozen files had slipped in unlisted, so every
+// source file in the directory must be named there, in backticks, by its file name.
+const UI = resolve(dirname(fileURLToPath(import.meta.url)), "../components/ui");
+
+describe("the platform layer's README", () => {
+  it("names every file in components/ui", () => {
+    const readme = readFileSync(resolve(UI, "README.md"), "utf8");
+    const unlisted = readdirSync(UI)
+      .filter((f) => /\.tsx?$/.test(f) && !/\.test\.tsx?$/.test(f) && !f.endsWith(".testkit.ts"))
+      .map((f) => f.replace(/\.tsx?$/, ""))
+      .filter((name) => !readme.includes("`" + name + "`"));
+    expect(unlisted).toEqual([]);
+  });
+});
diff --git a/frontend/src/lib/urlState.ts b/frontend/src/lib/urlState.ts
index 1b99624d..486ad5e9 100644
--- a/frontend/src/lib/urlState.ts
+++ b/frontend/src/lib/urlState.ts
@@ -118,7 +118,7 @@ export function hasFilterParams(params: URLSearchParams): boolean {
 // The single source of truth for valid page ids; `Page` and the runtime validator both
 // derive from it, so adding a page is a one-line change (no parallel allowlists to keep in
 // sync). "feed" is the default/fallback.
-const PAGES = [
+export const PAGES = [
   "home",
   "feed",
   "channels",
diff --git a/frontend/src/lib/useRail.dom.test.tsx b/frontend/src/lib/useRail.dom.test.tsx
new file mode 100644
index 00000000..998a5ce0
--- /dev/null
+++ b/frontend/src/lib/useRail.dom.test.tsx
@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+//
+// A rail mounts anew on each visit to its page and seeds its layout from the `me` cache. When the shell
+// held the layout, a change lived on in its state; now the rail must leave the change where its next
+// mount looks, or a visit to another page and back brings the server's older layout back.
+import { describe, expect, it, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+import { api } from "./api";
+import { qk } from "./queryKeys";
+import { usePanelLayout } from "./useRail";
+
+vi.mock("react-i18next", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-i18next")>()),
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+const OLD = {
+  order: ["year", "date", "channel", "tags", "language", "topic"],
+  collapsed: {},
+  hidden: {},
+};
+const NEW = {
+  order: ["tags", "date", "year", "channel", "language", "topic"],
+  collapsed: {},
+  hidden: {},
+};
+
+describe("a rail's layout", () => {
+  it("is the changed one on the next visit, not the server's older copy", () => {
+    vi.spyOn(api, "savePrefs").mockResolvedValue(undefined as never);
+    const qc = new QueryClient();
+    qc.setQueryData(qk.me(), { id: 1, preferences: { sidebarLayout: OLD } });
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={qc}>{children}</QueryClientProvider>
+    );
+    const first = renderHook(() => usePanelLayout("feed"), { wrapper });
+    expect(first.result.current[0].order).toEqual(OLD.order);
+    act(() => first.result.current[1](NEW));
+    first.unmount();
+    const next = renderHook(() => usePanelLayout("feed"), { wrapper });
+    expect(next.result.current[0].order).toEqual(NEW.order);
+    expect(api.savePrefs).toHaveBeenCalledWith({ sidebarLayout: NEW });
+  });
+});
diff --git a/frontend/src/lib/useRail.ts b/frontend/src/lib/useRail.ts
new file mode 100644
index 00000000..58299e7a
--- /dev/null
+++ b/frontend/src/lib/useRail.ts
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { api, type Me } from "./api";
+import { qk } from "./queryKeys";
+import { notifyActionError } from "./actionErrors";
+import { LS } from "./storage";
+import { usePref } from "./usePref";
+import { updateMeCache } from "./useMe";
+import {
+  defaultLayout,
+  PREF_KEY,
+  saveLayoutLocal,
+  seedLayout,
+  type PanelId,
+  type PanelLayout,
+} from "./panelLayout";
+
+// A side rail's own state: its group cards' layout and whether it is collapsed. Each rail reads it
+// here rather than being handed it, so the shell only places the rail.
+//
+// The rail mounts anew on every visit to its page, so the layout seeds from the `me` cache each time:
+// a change is written there too (as usePref does), or the next visit would seed the layout from before
+// it. The server keeps the copy that follows the account, this browser a local one for an account
+// whose server copy has none.
+export function usePanelLayout(panel: PanelId): [PanelLayout, (next: PanelLayout) => void] {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const [layout, setState] = useState(() =>
+    seedLayout(panel, qc.getQueryData<Me | null>(qk.me())?.preferences),
+  );
+  const setLayout = (next: PanelLayout) => {
+    setState(next);
+    saveLayoutLocal(panel, next);
+    updateMeCache(qc, (m) => ({
+      ...m,
+      preferences: { ...m.preferences, [PREF_KEY[panel]]: next },
+    }));
+    api
+      .savePrefs({ [PREF_KEY[panel]]: next })
+      .catch((e: unknown) => notifyActionError(e, t("errors.writeFailed.prefs")));
+  };
+  return [layout, setLayout];
+}
+
+// Which collapse flag a rail uses: the feed and Plex share the filter rail's, the playlists and the
+// files rails have their own. Default unpinned (a tab that expands on hover) — except the files rail,
+// which is how you move around the library rather than a filter you set once, so it starts pinned.
+const COLLAPSE = {
+  feed: {
+    key: "filterCollapsed",
+    initial: true,
+    opts: { localKey: LS.filterCollapsed, parse: Boolean },
+  },
+  plex: {
+    key: "filterCollapsed",
+    initial: true,
+    opts: { localKey: LS.filterCollapsed, parse: Boolean },
+  },
+  playlists: {
+    key: "playlistsCollapsed",
+    initial: true,
+    opts: { localKey: LS.playlistsCollapsed, parse: Boolean },
+  },
+  files: {
+    key: "filesCollapsed",
+    initial: false,
+    opts: { localKey: LS.filesCollapsed, parse: Boolean },
+  },
+} as const;
+
+/** What a rail hands its FilterRail: the layout and the collapse flag, each with its setter, and the
+ *  reset to the rail's default layout. */
+export function useRail(panel: PanelId) {
+  const [layout, setLayout] = usePanelLayout(panel);
+  const c = COLLAPSE[panel];
+  const [collapsed, setCollapsed] = usePref<boolean>(c.key, c.initial, c.opts);
+  return {
+    layout,
+    setLayout,
+    onResetLayout: () => setLayout(defaultLayout(panel)),
+    collapsed,
+    onToggleCollapse: () => setCollapsed(!collapsed),
+  };
+}
diff --git a/frontend/src/components/listNav.wiring.contract.test.ts b/frontend/src/listNav.wiring.contract.test.ts
similarity index 96%
rename from frontend/src/components/listNav.wiring.contract.test.ts
rename to frontend/src/listNav.wiring.contract.test.ts
index a80d94d7..1f7ffe3a 100644
--- a/frontend/src/components/listNav.wiring.contract.test.ts
+++ b/frontend/src/listNav.wiring.contract.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { readSources } from "../lib/rawSources.testkit";
+import { readSources } from "./lib/rawSources.testkit";
 
 // Every rail and every card of a card list is walkable by the keyboard (lib/listNav). Two
 // opt-in halves, both checked here, because either one missing silently leaves the keyboard out —
@@ -76,12 +76,12 @@ export function inList(code: string, pos: number): boolean {
 const has = (tag: Tag, prop: string) => new RegExp(`\\s${prop}\\b`).test(tag.text);
 
 function offenders(): { hits: string[]; tags: number; exempted: Set<string> } {
-  const files = readSources(__dirname, "./**/*.tsx");
+  const files = readSources(__dirname, ["./**/*.tsx", "!./design-lab/**"]);
   const hits: string[] = [];
   const exempted = new Set<string>();
   let tags = 0;
   for (const [rel, source] of Object.entries(files)) {
-    const path = rel.replace(/^\.\//, "components/");
+    const path = rel.replace(/^\.\//, "");
     if (/\.test\.tsx$/.test(path)) continue;
     const code = stripComments(String(source));
     const report = (id: string, why: string) => {
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 4ebc9efc..8a439655 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,20 +3,13 @@ import { createRoot } from "react-dom/client";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { createQueryClient } from "./lib/queryClient";
 import { FloatingTree } from "@floating-ui/react";
-import ErrorBoundary from "./components/ErrorBoundary";
-import { ConfirmProvider } from "./components/ConfirmProvider";
-import BootGate, { BootScreen } from "./components/BootGate";
-import { NavigationProvider } from "./components/NavigationProvider";
-import { FeedFiltersProvider } from "./components/FeedFiltersProvider";
-import { SavedViewsProvider } from "./components/SavedViewsProvider";
-import { PlaylistsProvider } from "./components/PlaylistsProvider";
-import { FilesProvider } from "./components/FilesProvider";
-import { PlexProvider } from "./components/PlexProvider";
-import { PlexViewBridge } from "./components/PlexViewBridge";
-import { ChannelsProvider } from "./components/ChannelsProvider";
-import { FeedViewProvider } from "./components/FeedViewProvider";
-import { PrefsProvider } from "./components/PrefsProvider";
-import { WizardProvider } from "./components/WizardProvider";
+import ErrorBoundary from "./shell/ErrorBoundary";
+import { ConfirmProvider } from "./components/ui/ConfirmProvider";
+import BootGate, { BootScreen } from "./shell/BootGate";
+import { NavigationProvider } from "./features/navigation/NavigationProvider";
+import { ModuleStores } from "./features/navigation/ModuleStores";
+import { PrefsProvider } from "./features/prefs/PrefsProvider";
+import { WizardProvider } from "./features/wizard/WizardProvider";
 import "./i18n";
 import "./index.css";
 import "flag-icons/css/flag-icons.min.css";
@@ -36,7 +29,7 @@ installStaleBuildReload();
 // full-page navigation (plain <a href>), so a simple pathname switch is enough — no router needed.
 // A public /watch link is not here at all: it has its own HTML entry (watch.html → watchMain.tsx),
 // so the friend it was sent to never loads this file's providers, i18n or CSS imports.
-const App = lazyWithPreload(() => import("./App"));
+const App = lazyWithPreload(() => import("./shell/App"));
 const PrivacyPolicy = lazy(() => import("./components/legal/PrivacyPolicy"));
 const Terms = lazy(() => import("./components/legal/Terms"));
 // The design lab: the living style guide, rendered with the app's real CSS so a design decision
@@ -80,33 +73,17 @@ const root =
               seeds per-account state in its initializer (see BootGate). */}
           <BootGate>
             <NavigationProvider>
-              <FeedFiltersProvider>
-                <PlaylistsProvider>
-                  <FilesProvider>
-                    <PlexProvider>
-                      <PlexViewBridge>
-                        {/* SavedViewsProvider sits below BOTH filter providers so it can switch its
-                        source (feed ⟷ plex) by the active page and read the right live filters. */}
-                        <SavedViewsProvider>
-                          <ChannelsProvider>
-                            <FeedViewProvider>
-                              <PrefsProvider>
-                                <WizardProvider>
-                                  {/* The same quiet screen as the gate's, so a chunk that is still
-                                  loading when the gate opens continues it instead of blanking. */}
-                                  <Suspense fallback={<BootScreen />}>
-                                    <App />
-                                  </Suspense>
-                                </WizardProvider>
-                              </PrefsProvider>
-                            </FeedViewProvider>
-                          </ChannelsProvider>
-                        </SavedViewsProvider>
-                      </PlexViewBridge>
-                    </PlexProvider>
-                  </FilesProvider>
-                </PlaylistsProvider>
-              </FeedFiltersProvider>
+              <ModuleStores>
+                <PrefsProvider>
+                  <WizardProvider>
+                    {/* The same quiet screen as the gate's, so a chunk that is still
+                        loading when the gate opens continues it instead of blanking. */}
+                    <Suspense fallback={<BootScreen />}>
+                      <App />
+                    </Suspense>
+                  </WizardProvider>
+                </PrefsProvider>
+              </ModuleStores>
             </NavigationProvider>
           </BootGate>
         </ConfirmProvider>
diff --git a/frontend/src/components/Activity.dom.test.tsx b/frontend/src/modules/activity/Activity.dom.test.tsx
similarity index 98%
rename from frontend/src/components/Activity.dom.test.tsx
rename to frontend/src/modules/activity/Activity.dom.test.tsx
index 53c2d1f3..e2883d37 100644
--- a/frontend/src/components/Activity.dom.test.tsx
+++ b/frontend/src/modules/activity/Activity.dom.test.tsx
@@ -9,7 +9,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import type { AuditQuery, AuditRow, HistoryPage, LogQuery, RunQuery, RunRow } from "../lib/api";
+import type { AuditQuery, AuditRow, HistoryPage, LogQuery, RunQuery, RunRow } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -25,8 +25,8 @@ const logsMock = vi.fn<(q: LogQuery, before: string | null) => Promise<unknown>>
 const quotaMock = vi.fn<(since: string, user: string | null) => Promise<unknown>>();
 const runFacetsMock = vi.fn<() => Promise<unknown>>();
 const usersMock = vi.fn<() => Promise<unknown>>();
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
@@ -45,10 +45,10 @@ vi.mock("../lib/api", async (importOriginal) => {
   };
 });
 
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import Activity from "./Activity";
-import { ChoiceContext } from "./confirmContext";
-import { PageToolbarSlot } from "./ui/pageToolbarSlot";
+import { ChoiceContext } from "../../components/ui/confirmContext";
+import { PageToolbarSlot } from "../../components/ui/pageToolbarSlot";
 
 // The filter bar lives in the toolbar, which portals into the shell's band: give it one.
 const slot = document.body.appendChild(document.createElement("div"));
diff --git a/frontend/src/components/Activity.tsx b/frontend/src/modules/activity/Activity.tsx
similarity index 90%
rename from frontend/src/components/Activity.tsx
rename to frontend/src/modules/activity/Activity.tsx
index 8db4fa7f..1d400474 100644
--- a/frontend/src/components/Activity.tsx
+++ b/frontend/src/modules/activity/Activity.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
 import { Search } from "lucide-react";
 
-import { api } from "../lib/api";
+import { api } from "../../lib/api";
 import {
   ACTIVITY_TABS,
   ACTIVITY_WINDOWS,
@@ -13,30 +13,30 @@ import {
   type ActivityTab,
   type ActivityUrlState,
   type ActivityWindow,
-} from "../lib/activityUrlState";
-import { nextNavId, notifyNav, rememberNavPosition } from "../lib/history";
+} from "../../lib/activityUrlState";
+import { nextNavId, notifyNav, rememberNavPosition } from "../../lib/history";
 import {
   DEFAULT_LOGS_STATE,
   logsParamsToState,
   logsParamUpdates,
   type LogsUrlState,
-} from "../lib/logsUrlState";
-import { qk } from "../lib/queryKeys";
-import { useDebounced } from "../lib/useDebounced";
-import { urlWithParams } from "../lib/urlState";
-import { useUrlMirror } from "../lib/useUrlMirror";
+} from "../../lib/logsUrlState";
+import { qk } from "../../lib/queryKeys";
+import { useDebounced } from "../../lib/useDebounced";
+import { urlWithParams } from "../../lib/urlState";
+import { useUrlMirror } from "../../lib/useUrlMirror";
 import ActivityAudit from "./ActivityAudit";
 import ActivityQuota from "./ActivityQuota";
 import ActivityRuns from "./ActivityRuns";
 import AdminLogs, { type LogPivot } from "./AdminLogs";
-import FilterChipGroup from "./ui/FilterChipGroup";
-import FilterSelect from "./ui/FilterSelect";
-import { InnerInput } from "./ui/Input";
-import { fieldClass } from "./ui/fieldStyles";
-import { PageToolbar } from "./ui/PageShell";
-import { StateMessage } from "./ui/QueryState";
-import Tabs from "./ui/Tabs";
-import { useTabPanel } from "./ui/tabPanel";
+import FilterChipGroup from "../../components/ui/FilterChipGroup";
+import FilterSelect from "../../components/ui/FilterSelect";
+import { InnerInput } from "../../components/ui/Input";
+import { fieldClass } from "../../components/ui/fieldStyles";
+import { PageToolbar } from "../../components/ui/PageShell";
+import { StateMessage } from "../../components/ui/QueryState";
+import Tabs from "../../components/ui/Tabs";
+import { useTabPanel } from "../../components/ui/tabPanel";
 
 // Activity ("Napló"): what happened, in one place — the background runs, the admins' actions, the
 // server's log and the quota spend, each its own table on the server, read here as four tabs under
diff --git a/frontend/src/components/ActivityAudit.tsx b/frontend/src/modules/activity/ActivityAudit.tsx
similarity index 89%
rename from frontend/src/components/ActivityAudit.tsx
rename to frontend/src/modules/activity/ActivityAudit.tsx
index dfdd46b0..942687a2 100644
--- a/frontend/src/components/ActivityAudit.tsx
+++ b/frontend/src/modules/activity/ActivityAudit.tsx
@@ -3,22 +3,22 @@ import { useTranslation } from "react-i18next";
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Trash2 } from "lucide-react";
 
-import { api, type AuditQuery, type AuditRow } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { sinceOf } from "../lib/activityUrlState";
-import { auditActionLabel, auditText } from "../lib/auditText";
-import { formatDateTimeSec } from "../lib/format";
-import { notify } from "../lib/notifications";
-import { qk } from "../lib/queryKeys";
-import { useHistoryList } from "../lib/useHistoryList";
+import { api, type AuditQuery, type AuditRow } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { sinceOf } from "../../lib/activityUrlState";
+import { auditActionLabel, auditText } from "../../lib/auditText";
+import { formatDateTimeSec } from "../../lib/format";
+import { notify } from "../../lib/notifications";
+import { qk } from "../../lib/queryKeys";
+import { useHistoryList } from "../../lib/useHistoryList";
 import type { Shared } from "./ActivityRuns";
-import { useConfirm } from "./confirmContext";
-import { StateMessage } from "./ui/QueryState";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { StateMessage } from "../../components/ui/QueryState";
 import HistoryList from "./HistoryList";
-import HistoryRow from "./HistoryRow";
-import { RelativeTime } from "./ui/RelativeTime";
-import { Button } from "./ui/Button";
-import FilterSelect from "./ui/FilterSelect";
+import HistoryRow from "../../features/diagnostics/HistoryRow";
+import { RelativeTime } from "../../components/ui/RelativeTime";
+import { Button } from "../../components/ui/Button";
+import FilterSelect from "../../components/ui/FilterSelect";
 
 // Activity → Admin actions: the append-only who/what/when trail, newest first, filtered on the
 // server. A row opens to its before/after and to the lines its request logged. Clear stays here,
diff --git a/frontend/src/components/ActivityQuota.tsx b/frontend/src/modules/activity/ActivityQuota.tsx
similarity index 93%
rename from frontend/src/components/ActivityQuota.tsx
rename to frontend/src/modules/activity/ActivityQuota.tsx
index 7c601a8f..c5adad49 100644
--- a/frontend/src/components/ActivityQuota.tsx
+++ b/frontend/src/modules/activity/ActivityQuota.tsx
@@ -2,14 +2,14 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
-import { api, type AdminQuotaRow } from "../lib/api";
-import { sinceOf } from "../lib/activityUrlState";
-import { formatNumber, quotaActionLabel } from "../lib/format";
-import { qk } from "../lib/queryKeys";
+import { api, type AdminQuotaRow } from "../../lib/api";
+import { sinceOf } from "../../lib/activityUrlState";
+import { formatNumber, quotaActionLabel } from "../../lib/format";
+import { qk } from "../../lib/queryKeys";
 import type { Shared } from "./ActivityRuns";
-import { Pressable } from "./ui/Pressable";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { SURFACE } from "./ui/surfaces";
+import { Pressable } from "../../components/ui/Pressable";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // Activity → Quota: the shared YouTube API budget's spend over the page's time range — per day
 // (Pacific days, as the budget resets), then per account, each opening to its actions. The
diff --git a/frontend/src/components/ActivityRuns.tsx b/frontend/src/modules/activity/ActivityRuns.tsx
similarity index 94%
rename from frontend/src/components/ActivityRuns.tsx
rename to frontend/src/modules/activity/ActivityRuns.tsx
index 8407c8ff..2ec0a7ac 100644
--- a/frontend/src/components/ActivityRuns.tsx
+++ b/frontend/src/modules/activity/ActivityRuns.tsx
@@ -2,25 +2,25 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
-import { api, type LogFacet, type RunQuery, type RunRow } from "../lib/api";
+import { api, type LogFacet, type RunQuery, type RunRow } from "../../lib/api";
 import {
   RUN_STATUSES,
   sinceOf,
   type ActivityUrlState,
   type RunStatusFilter,
-} from "../lib/activityUrlState";
-import { formatDateTimeSec, formatNumber, formatRuntime } from "../lib/format";
-import { jobFailureText, jobResultText, parseSummary } from "../lib/jobResult";
-import { qk } from "../lib/queryKeys";
-import { useHistoryList } from "../lib/useHistoryList";
+} from "../../lib/activityUrlState";
+import { formatDateTimeSec, formatNumber, formatRuntime } from "../../lib/format";
+import { jobFailureText, jobResultText, parseSummary } from "../../lib/jobResult";
+import { qk } from "../../lib/queryKeys";
+import { useHistoryList } from "../../lib/useHistoryList";
 import HistoryList from "./HistoryList";
-import HistoryRow from "./HistoryRow";
-import { StateMessage } from "./ui/QueryState";
-import { RelativeTime } from "./ui/RelativeTime";
+import HistoryRow from "../../features/diagnostics/HistoryRow";
+import { StateMessage } from "../../components/ui/QueryState";
+import { RelativeTime } from "../../components/ui/RelativeTime";
 import { StatusDot } from "./RunStatusDot";
-import { Button } from "./ui/Button";
-import FilterChipGroup from "./ui/FilterChipGroup";
-import FilterSelect from "./ui/FilterSelect";
+import { Button } from "../../components/ui/Button";
+import FilterChipGroup from "../../components/ui/FilterChipGroup";
+import FilterSelect from "../../components/ui/FilterSelect";
 
 // Activity → Runs: every background run, newest first — the scheduled ones, an admin's "run now", a
 // user's work on one channel. A row opens to who started it, when, what it returned or why it
diff --git a/frontend/src/components/AdminLogs.dom.test.tsx b/frontend/src/modules/activity/AdminLogs.dom.test.tsx
similarity index 98%
rename from frontend/src/components/AdminLogs.dom.test.tsx
rename to frontend/src/modules/activity/AdminLogs.dom.test.tsx
index 01580322..7fb63b09 100644
--- a/frontend/src/components/AdminLogs.dom.test.tsx
+++ b/frontend/src/modules/activity/AdminLogs.dom.test.tsx
@@ -10,7 +10,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import type { LogFacets, LogPage, LogQuery, ServerLogRow } from "../lib/api";
+import type { LogFacets, LogPage, LogQuery, ServerLogRow } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -26,8 +26,8 @@ vi.mock("react-i18next", async (importOriginal) => {
 
 const logsMock = vi.fn<(query: LogQuery, before: string | null) => Promise<LogPage>>();
 const facetsMock = vi.fn<(query: LogQuery) => Promise<LogFacets>>();
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
@@ -40,7 +40,7 @@ vi.mock("../lib/api", async (importOriginal) => {
 });
 
 const copied: string[] = [];
-vi.mock("../lib/clipboard", () => ({
+vi.mock("../../lib/clipboard", () => ({
   copyText: (text: string) => {
     copied.push(text);
     return Promise.resolve(true);
@@ -48,7 +48,7 @@ vi.mock("../lib/clipboard", () => ({
 }));
 
 import Activity from "./Activity";
-import { PageToolbarSlot } from "./ui/pageToolbarSlot";
+import { PageToolbarSlot } from "../../components/ui/pageToolbarSlot";
 
 // The filter bar lives in the toolbar, which portals into the shell's band: give it one.
 const slot = document.body.appendChild(document.createElement("div"));
diff --git a/frontend/src/components/AdminLogs.tsx b/frontend/src/modules/activity/AdminLogs.tsx
similarity index 94%
rename from frontend/src/components/AdminLogs.tsx
rename to frontend/src/modules/activity/AdminLogs.tsx
index 763212ba..17ffe65e 100644
--- a/frontend/src/components/AdminLogs.tsx
+++ b/frontend/src/modules/activity/AdminLogs.tsx
@@ -8,24 +8,24 @@ import {
 } from "@tanstack/react-query";
 import { Copy, Radio } from "lucide-react";
 
-import { api, type LogFacet, type LogQuery, type ServerLogRow } from "../lib/api";
-import { copyText } from "../lib/clipboard";
-import { formatDateTimeSec } from "../lib/format";
-import { nextPageOnClick } from "../lib/nextPage";
-import { LEVEL_GROUPS, type LevelGroup } from "../lib/log";
-import { sinceOf } from "../lib/activityUrlState";
-import { logsParamsToState, logsParamUpdates, type LogsUrlState } from "../lib/logsUrlState";
-import { notify } from "../lib/notifications";
-import { qk } from "../lib/queryKeys";
-import { useUrlMirror } from "../lib/useUrlMirror";
+import { api, type LogFacet, type LogQuery, type ServerLogRow } from "../../lib/api";
+import { copyText } from "../../lib/clipboard";
+import { formatDateTimeSec } from "../../lib/format";
+import { nextPageOnClick } from "../../lib/nextPage";
+import { LEVEL_GROUPS, type LevelGroup } from "../../lib/log";
+import { sinceOf } from "../../lib/activityUrlState";
+import { logsParamsToState, logsParamUpdates, type LogsUrlState } from "../../lib/logsUrlState";
+import { notify } from "../../lib/notifications";
+import { qk } from "../../lib/queryKeys";
+import { useUrlMirror } from "../../lib/useUrlMirror";
 import { HistoryFrame } from "./HistoryList";
-import LogLine from "./LogLine";
-import { Button } from "./ui/Button";
-import FilterChipGroup from "./ui/FilterChipGroup";
-import FilterSelect from "./ui/FilterSelect";
-import { FilterFoldButton } from "./ui/FilterFold";
-import { useFilterFold } from "../lib/useFilterFold";
-import { DismissibleChip } from "./ui/Chip";
+import LogLine from "../../features/diagnostics/LogLine";
+import { Button } from "../../components/ui/Button";
+import FilterChipGroup from "../../components/ui/FilterChipGroup";
+import FilterSelect from "../../components/ui/FilterSelect";
+import { FilterFoldButton } from "../../components/ui/FilterFold";
+import { useFilterFold } from "../../lib/useFilterFold";
+import { DismissibleChip } from "../../components/ui/Chip";
 import type { Shared } from "./ActivityRuns";
 
 // Activity → Server log: the server's stored log (`log_events`). One list, newest first; a line
diff --git a/frontend/src/components/HistoryList.tsx b/frontend/src/modules/activity/HistoryList.tsx
similarity index 93%
rename from frontend/src/components/HistoryList.tsx
rename to frontend/src/modules/activity/HistoryList.tsx
index a0e66b49..8cc8f0b8 100644
--- a/frontend/src/components/HistoryList.tsx
+++ b/frontend/src/modules/activity/HistoryList.tsx
@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
-import { nextPageOnClick } from "../lib/nextPage";
-import type { HistoryList as HistoryListState } from "../lib/useHistoryList";
-import NavGrid from "./ui/NavGrid";
-import { Button } from "./ui/Button";
-import { LoadingState, StateMessage } from "./ui/QueryState";
+import { nextPageOnClick } from "../../lib/nextPage";
+import type { HistoryList as HistoryListState } from "../../lib/useHistoryList";
+import NavGrid from "../../components/ui/NavGrid";
+import { Button } from "../../components/ui/Button";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
 
 // The frame of a history list on the activity page — the runs, the admin actions, the server log:
 // its own bar (if any), the rows or the honest state instead of them (a failed read is an error with a
diff --git a/frontend/src/components/RunStatusDot.tsx b/frontend/src/modules/activity/RunStatusDot.tsx
similarity index 100%
rename from frontend/src/components/RunStatusDot.tsx
rename to frontend/src/modules/activity/RunStatusDot.tsx
diff --git a/frontend/src/modules/activity/index.ts b/frontend/src/modules/activity/index.ts
new file mode 100644
index 00000000..4f3bdcbe
--- /dev/null
+++ b/frontend/src/modules/activity/index.ts
@@ -0,0 +1,3 @@
+// The activity page's public face: what another unit may use of it.
+export { StatusDot, type DotKey } from "./RunStatusDot";
+export { activityModule } from "./module";
diff --git a/frontend/src/modules/activity/module.ts b/frontend/src/modules/activity/module.ts
new file mode 100644
index 00000000..9eb2347a
--- /dev/null
+++ b/frontend/src/modules/activity/module.ts
@@ -0,0 +1,15 @@
+import { ScrollText } from "lucide-react";
+import { lazyWithPreload } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page loads lazily.
+export const activityModule: ModuleDef = {
+  id: "activity",
+  labelKey: "header.account.activity",
+  railKey: "nav.rail.activity",
+  titleKey: "activity.title",
+  icon: ScrollText,
+  system: true,
+  gate: (me) => me.role === "admin",
+  Page: lazyWithPreload(() => import("./Activity")),
+};
diff --git a/frontend/src/components/AboutCell.tsx b/frontend/src/modules/channels/AboutCell.tsx
similarity index 89%
rename from frontend/src/components/AboutCell.tsx
rename to frontend/src/modules/channels/AboutCell.tsx
index 915600bc..955bdc57 100644
--- a/frontend/src/components/AboutCell.tsx
+++ b/frontend/src/modules/channels/AboutCell.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
-import { api } from "../lib/api";
-import ChannelAboutContent from "./ChannelAbout";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { SURFACE } from "./ui/surfaces";
+import { qk } from "../../lib/queryKeys";
+import { api } from "../../lib/api";
+import ChannelAboutContent from "../../features/channel/ChannelAbout";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { SURFACE } from "../../components/ui/surfaces";
 
 /**
  * A channel-description cell: one truncated line in the table, revealing the FULL channel "About"
diff --git a/frontend/src/components/ChannelDiscovery.tsx b/frontend/src/modules/channels/ChannelDiscovery.tsx
similarity index 89%
rename from frontend/src/components/ChannelDiscovery.tsx
rename to frontend/src/modules/channels/ChannelDiscovery.tsx
index a76990dd..a8fdb44c 100644
--- a/frontend/src/components/ChannelDiscovery.tsx
+++ b/frontend/src/modules/channels/ChannelDiscovery.tsx
@@ -1,30 +1,30 @@
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
-import { invalidateSubscription } from "../lib/subscriptionCache";
+import { qk } from "../../lib/queryKeys";
+import { invalidateSubscription } from "../../lib/subscriptionCache";
 import { UserPlus } from "lucide-react";
-import { api, type DiscoveredChannel } from "../lib/api";
-import { LS, ownKey } from "../lib/storage";
-import { formatCountOrDash } from "../lib/format";
-import { hydrateSort, sortRows, type SortState } from "../lib/columnSort";
-import { usePref } from "../lib/usePref";
-import { useCardPager } from "../lib/useCardPager";
+import { api, type DiscoveredChannel } from "../../lib/api";
+import { LS, ownKey } from "../../lib/storage";
+import { formatCountOrDash } from "../../lib/format";
+import { hydrateSort, sortRows, type SortState } from "../../lib/columnSort";
+import { usePref } from "../../lib/usePref";
+import { useCardPager } from "../../lib/useCardPager";
 import { subsColumn } from "./channelColumns";
-import { notify } from "../lib/notifications";
-import { notifyYouTubeActionError } from "../lib/youtubeErrors";
-import Tooltip from "./ui/Tooltip";
+import { notify } from "../../lib/notifications";
+import { notifyYouTubeActionError } from "../../lib/youtubeErrors";
+import Tooltip from "../../components/ui/Tooltip";
 import ChannelLink from "./ChannelLink";
 import AboutCell from "./AboutCell";
-import DataTable, { type Column } from "./ui/DataTable";
+import DataTable, { type Column } from "../../components/ui/DataTable";
 import ChannelLayoutGrid from "./ChannelLayoutGrid";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import ColumnSortControl from "./ui/ColumnSortControl";
-import Pager from "./ui/Pager";
-import { PageToolbar } from "./ui/PageShell";
-import { useConfirm } from "./confirmContext";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import ColumnSortControl from "../../components/ui/ColumnSortControl";
+import Pager from "../../components/ui/Pager";
+import { PageToolbar } from "../../components/ui/PageShell";
+import { useConfirm } from "../../components/ui/confirmContext";
 import { useChannelLayout } from "./channelsContext";
-import { Button } from "./ui/Button";
+import { Button } from "../../components/ui/Button";
 
 // The Channel manager's "Discovery" tab: channels that turn up in the user's playlists but
 // that they don't subscribe to. Subscribing here only creates the subscription + enriches
diff --git a/frontend/src/components/ChannelLayoutGrid.dom.test.tsx b/frontend/src/modules/channels/ChannelLayoutGrid.dom.test.tsx
similarity index 93%
rename from frontend/src/components/ChannelLayoutGrid.dom.test.tsx
rename to frontend/src/modules/channels/ChannelLayoutGrid.dom.test.tsx
index 58e32a05..e78b7676 100644
--- a/frontend/src/components/ChannelLayoutGrid.dom.test.tsx
+++ b/frontend/src/modules/channels/ChannelLayoutGrid.dom.test.tsx
@@ -7,14 +7,14 @@
 import { Fragment, useRef } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, render } from "@testing-library/react";
-import type { VirtualGridProps } from "./ui/VirtualGrid";
+import type { VirtualGridProps } from "../../components/ui/VirtualGrid";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
   return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
 });
-vi.mock("./ui/VirtualGrid", async () => {
-  const { useListNav } = await import("../lib/listNav");
+vi.mock("../../components/ui/VirtualGrid", async () => {
+  const { useListNav } = await import("../../lib/listNav");
   return {
     default: function GridStandIn({
       items,
@@ -37,7 +37,7 @@ vi.mock("./ui/VirtualGrid", async () => {
 
 import ChannelLayoutGrid from "./ChannelLayoutGrid";
 import ChannelLink from "./ChannelLink";
-import { type Column } from "./ui/DataTable";
+import { type Column } from "../../components/ui/DataTable";
 
 afterEach(cleanup);
 
diff --git a/frontend/src/components/ChannelLayoutGrid.tsx b/frontend/src/modules/channels/ChannelLayoutGrid.tsx
similarity index 93%
rename from frontend/src/components/ChannelLayoutGrid.tsx
rename to frontend/src/modules/channels/ChannelLayoutGrid.tsx
index be8e3aae..bcef924e 100644
--- a/frontend/src/components/ChannelLayoutGrid.tsx
+++ b/frontend/src/modules/channels/ChannelLayoutGrid.tsx
@@ -1,10 +1,10 @@
 import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
-import { type Column } from "./ui/DataTable";
-import VirtualGrid from "./ui/VirtualGrid";
-import { CHANNEL_LAYOUT_SPEC } from "../lib/channelLayout";
-import { navItemAttrs } from "../lib/listNav";
-import { SURFACE } from "./ui/surfaces";
+import { type Column } from "../../components/ui/DataTable";
+import VirtualGrid from "../../components/ui/VirtualGrid";
+import { CHANNEL_LAYOUT_SPEC } from "../../lib/channelLayout";
+import { navItemAttrs } from "../../lib/listNav";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // The channel manager's `cards` layout, built by reusing the SAME `Column<T>` render closures
 // the DataTable draws — so the subscribed and discovery tables (which have different columns) both get
diff --git a/frontend/src/components/ChannelLink.tsx b/frontend/src/modules/channels/ChannelLink.tsx
similarity index 91%
rename from frontend/src/components/ChannelLink.tsx
rename to frontend/src/modules/channels/ChannelLink.tsx
index 3e0d1ca5..6236a59e 100644
--- a/frontend/src/components/ChannelLink.tsx
+++ b/frontend/src/modules/channels/ChannelLink.tsx
@@ -1,9 +1,9 @@
 import { useTranslation } from "react-i18next";
 import { ExternalLink } from "lucide-react";
-import Avatar from "./ui/Avatar";
-import { channelYouTubeUrl } from "../lib/format";
-import { Pressable } from "./ui/Pressable";
-import { IconLink } from "./ui/LinkButton";
+import Avatar from "../../components/ui/Avatar";
+import { channelYouTubeUrl } from "../../lib/format";
+import { Pressable } from "../../components/ui/Pressable";
+import { IconLink } from "../../components/ui/LinkButton";
 
 // Avatar + channel name + "open on YouTube" link, shared by the Channel manager and the
 // discovery list (and anywhere else that lists a channel). When `onView` is given the name
diff --git a/frontend/src/components/ChannelStatsPopover.dom.test.tsx b/frontend/src/modules/channels/ChannelStatsPopover.dom.test.tsx
similarity index 97%
rename from frontend/src/components/ChannelStatsPopover.dom.test.tsx
rename to frontend/src/modules/channels/ChannelStatsPopover.dom.test.tsx
index 70791df2..ec5f9840 100644
--- a/frontend/src/components/ChannelStatsPopover.dom.test.tsx
+++ b/frontend/src/modules/channels/ChannelStatsPopover.dom.test.tsx
@@ -21,8 +21,8 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import ChannelStatsPopover from "./ChannelStatsPopover";
-import { type MyStatus } from "../lib/api";
-import { formatEta, formatNumber } from "../lib/format";
+import { type MyStatus } from "../../lib/api";
+import { formatEta, formatNumber } from "../../lib/format";
 import type { TFunction } from "i18next";
 
 beforeAll(() => {
diff --git a/frontend/src/components/ChannelStatsPopover.tsx b/frontend/src/modules/channels/ChannelStatsPopover.tsx
similarity index 90%
rename from frontend/src/components/ChannelStatsPopover.tsx
rename to frontend/src/modules/channels/ChannelStatsPopover.tsx
index f0f26b10..3515b885 100644
--- a/frontend/src/components/ChannelStatsPopover.tsx
+++ b/frontend/src/modules/channels/ChannelStatsPopover.tsx
@@ -10,12 +10,12 @@ import {
   type LucideIcon,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { type MyStatus } from "../lib/api";
-import { formatEta, formatNumber } from "../lib/format";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { Button } from "./ui/Button";
-import { SURFACE } from "./ui/surfaces";
+import { type MyStatus } from "../../lib/api";
+import { formatEta, formatNumber } from "../../lib/format";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { Button } from "../../components/ui/Button";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // The channel-manager catalog stats, collapsed from a crowded inline row into a compact "Stats" chip
 // that reveals the numbers on hover (reuses the AnchoredPopover hover mode). One row per stat, each
diff --git a/frontend/src/components/Channels.tsx b/frontend/src/modules/channels/Channels.tsx
similarity index 92%
rename from frontend/src/components/Channels.tsx
rename to frontend/src/modules/channels/Channels.tsx
index fa56abc4..a1ee78a0 100644
--- a/frontend/src/components/Channels.tsx
+++ b/frontend/src/modules/channels/Channels.tsx
@@ -9,63 +9,67 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { createStore, type Store } from "../lib/store";
-import { qk } from "../lib/queryKeys";
+import { createStore, type Store } from "../../lib/store";
+import { qk } from "../../lib/queryKeys";
 import { Ban, Eye, EyeOff, History, LayoutGrid, Pencil, RefreshCw, Table, X } from "lucide-react";
 import ExcludedChannelList from "./ExcludedChannelList";
-import { api, NO_TAG_SENTINEL, type ManagedChannel } from "../lib/api";
+import { api, NO_TAG_SENTINEL, type ManagedChannel } from "../../lib/api";
 import { Sparkles } from "lucide-react";
-import { notifyYouTubeActionError } from "../lib/youtubeErrors";
-import { LS, ownKey } from "../lib/storage";
+import { notifyYouTubeActionError } from "../../lib/youtubeErrors";
+import { LS, ownKey } from "../../lib/storage";
 import { buildChannelColumns, applySyncFilter, tagFilterChips } from "./channelColumns";
-import { notify } from "../lib/notifications";
-import { Badge } from "./ui/Badge";
-import { Button } from "./ui/Button";
-import Tooltip from "./ui/Tooltip";
-import DataTable from "./ui/DataTable";
-import Tabs, { type TabDef } from "./ui/Tabs";
-import { useTabPanel } from "./ui/tabPanel";
+import { notify } from "../../lib/notifications";
+import { Badge } from "../../components/ui/Badge";
+import { Button } from "../../components/ui/Button";
+import Tooltip from "../../components/ui/Tooltip";
+import DataTable from "../../components/ui/DataTable";
+import Tabs, { type TabDef } from "../../components/ui/Tabs";
+import { useTabPanel } from "../../components/ui/tabPanel";
 import ChannelLayoutGrid from "./ChannelLayoutGrid";
-import { pinChannel, useComfortPin } from "./comfortPin";
-import { ContextMenu } from "./ui/ContextMenu";
-import { MoreButton } from "./ui/MoreButton";
+import { pinChannel, useComfortPin } from "../../features/comfort/comfortPin";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { MoreButton } from "../../components/ui/MoreButton";
 import { useChannelActions } from "./useChannelActions";
-import { useContextMenu } from "./ui/useContextMenu";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { useChannelTagActions } from "../lib/useChannelTagActions";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { useChannelTagActions } from "../../lib/useChannelTagActions";
 import { useTagSuggestions } from "./useTagSuggestions";
-import { useChannelPriority } from "../lib/useChannelPriority";
-import { placeByPriority } from "../lib/channelOrder";
-import { focusNavItem } from "../lib/listNav";
-import ViewSwitcher, { type ViewOption } from "./ViewSwitcher";
-import ColumnSortControl from "./ui/ColumnSortControl";
-import FilterChipGroup from "./ui/FilterChipGroup";
+import { useChannelPriority } from "../../lib/useChannelPriority";
+import { placeByPriority } from "../../lib/channelOrder";
+import { focusNavItem } from "../../lib/listNav";
+import ViewSwitcher, { type ViewOption } from "../../components/ui/ViewSwitcher";
+import ColumnSortControl from "../../components/ui/ColumnSortControl";
+import FilterChipGroup from "../../components/ui/FilterChipGroup";
 import TagFilterChips from "./TagFilterChips";
-import ActionMenu, { type ActionMenuItem } from "./ui/ActionMenu";
+import ActionMenu, { type ActionMenuItem } from "../../components/ui/ActionMenu";
 import ChannelStatsPopover from "./ChannelStatsPopover";
-import Pager from "./ui/Pager";
-import { CHANNEL_LAYOUTS, type ChannelLayout } from "../lib/channelLayout";
-import { sortRows } from "../lib/columnSort";
-import { filterRows, isActive } from "../lib/tableColumns";
-import { useFilterFold } from "../lib/useFilterFold";
-import { FilterFoldButton } from "./ui/FilterFold";
-import { HiddenFilterCue } from "./ui/HiddenFilterCue";
-import { useCardPager } from "../lib/useCardPager";
-import { PageToolbar } from "./ui/PageShell";
-import { PageMenu } from "./ui/PageMenu";
-import { menuGroups } from "./ui/menuGroups";
-import { choiceSubmenu, sortSubmenu } from "./ui/pageMenuItems";
-import { optionsFromColumns } from "../lib/sortOptions";
+import Pager from "../../components/ui/Pager";
+import { CHANNEL_LAYOUTS, type ChannelLayout } from "../../lib/channelLayout";
+import { sortRows } from "../../lib/columnSort";
+import { filterRows, isActive } from "../../lib/tableColumns";
+import { useFilterFold } from "../../lib/useFilterFold";
+import { FilterFoldButton } from "../../components/ui/FilterFold";
+import { HiddenFilterCue } from "../../components/ui/HiddenFilterCue";
+import { useCardPager } from "../../lib/useCardPager";
+import { PageToolbar } from "../../components/ui/PageShell";
+import { PageMenu } from "../../components/ui/PageMenu";
+import { menuGroups } from "../../components/ui/menuGroups";
+import { choiceSubmenu, sortSubmenu } from "../../components/ui/pageMenuItems";
+import { optionsFromColumns } from "../../lib/sortOptions";
 import ChannelDiscovery from "./ChannelDiscovery";
-import TagManager from "./TagManager";
-import { useChannelLayout, useChannels, useChannelsActions } from "./channelsContext";
-import { useNavigationActions } from "./navigationContext";
-import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
-import { useWizard } from "./wizardContext";
-import { useMe } from "../lib/useMe";
-import { useTags } from "../lib/useTags";
-
-export type ChannelsView = "subscribed" | "discovery" | "hidden" | "blocked";
+import TagManager from "../../features/channel/TagManager";
+import {
+  useChannelLayout,
+  useChannels,
+  useChannelsActions,
+  type ChannelsView,
+} from "./channelsContext";
+import { useNavigationActions } from "../../features/navigation/navigationContext";
+import { useFeedFilters, useFeedFiltersActions } from "../feed";
+import { useWizard } from "../../features/wizard/wizardContext";
+import { useMe } from "../../lib/useMe";
+import { useTags } from "../../lib/useTags";
+import ChannelsHeader from "./ChannelsHeader";
 
 // The tag filter has its own chip row above the list, so the hidden-filter cue does not name it again.
 const SURFACED_FILTERS = ["tags"];
@@ -687,6 +691,7 @@ export default function Channels() {
 
   return (
     <>
+      <ChannelsHeader />
       {pageMenuItems.length > 0 && (
         <PageMenu ariaLabel={t("common.pageMenu")} items={pageMenuItems} />
       )}
diff --git a/frontend/src/modules/channels/ChannelsHeader.tsx b/frontend/src/modules/channels/ChannelsHeader.tsx
new file mode 100644
index 00000000..1225b93d
--- /dev/null
+++ b/frontend/src/modules/channels/ChannelsHeader.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from "react-i18next";
+import { useMe } from "../../lib/useMe";
+import { PageHeader } from "../../components/ui/PageShell";
+import SearchBar from "../../features/header/SearchBar";
+import { blurActive } from "../../features/header/blurActive";
+import { useChannels, useChannelsActions } from "./channelsContext";
+import SyncStatus from "./SyncStatus";
+
+// The channel manager's pills in the floating header: the name filter and the per-user sync chip.
+export default function ChannelsHeader() {
+  const { t } = useTranslation();
+  const me = useMe();
+  const { search } = useChannels();
+  const { setSearch, goToFullHistory } = useChannelsActions();
+  return (
+    <PageHeader>
+      <SearchBar
+        value={search}
+        placeholder={t("channels.searchPlaceholder")}
+        onChange={setSearch}
+        onGo={blurActive}
+      />
+      <SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={goToFullHistory} />
+    </PageHeader>
+  );
+}
diff --git a/frontend/src/components/ChannelsProvider.dom.test.tsx b/frontend/src/modules/channels/ChannelsProvider.dom.test.tsx
similarity index 98%
rename from frontend/src/components/ChannelsProvider.dom.test.tsx
rename to frontend/src/modules/channels/ChannelsProvider.dom.test.tsx
index c4463e6a..764a7ad9 100644
--- a/frontend/src/components/ChannelsProvider.dom.test.tsx
+++ b/frontend/src/modules/channels/ChannelsProvider.dom.test.tsx
@@ -12,16 +12,16 @@ import { describe, it, expect, beforeEach, vi } from "vitest";
 import { renderHook, act, render as renderRoot } from "@testing-library/react";
 import { useEffect, useEffectEvent, type ReactNode } from "react";
 
-vi.mock("./navigationContext", () => ({
+vi.mock("../../features/navigation/navigationContext", () => ({
   useNavigation: () => ({ page: "channels" }),
   useNavigationActions: () => ({ setPage: vi.fn() }),
 }));
 
 import { ChannelsProvider } from "./ChannelsProvider";
 import { useChannelLayout, useChannels, useChannelsActions } from "./channelsContext";
-import { claimLocalData } from "../lib/storage";
+import { claimLocalData } from "../../lib/storage";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 
 let qc = new QueryClient();
 const wrapper = ({ children }: { children: ReactNode }) => (
diff --git a/frontend/src/components/ChannelsProvider.tsx b/frontend/src/modules/channels/ChannelsProvider.tsx
similarity index 94%
rename from frontend/src/components/ChannelsProvider.tsx
rename to frontend/src/modules/channels/ChannelsProvider.tsx
index a0c99813..0bfc05d1 100644
--- a/frontend/src/components/ChannelsProvider.tsx
+++ b/frontend/src/modules/channels/ChannelsProvider.tsx
@@ -7,30 +7,30 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import { getAccountRaw, LS, useAccountPersistedState } from "../lib/storage";
-import { parseChannelLayout } from "../lib/channelLayout";
-import { hydrateSort } from "../lib/columnSort";
-import { useLatest } from "../lib/useLatest";
-import { useSortState } from "../lib/useSortState";
-import { usePref } from "../lib/usePref";
-import { useFilterState } from "../lib/useFilterState";
-import { useUrlMirror } from "../lib/useUrlMirror";
-import { rememberNavPosition } from "../lib/history";
+import { getAccountRaw, LS, useAccountPersistedState } from "../../lib/storage";
+import { parseChannelLayout } from "../../lib/channelLayout";
+import { hydrateSort } from "../../lib/columnSort";
+import { useLatest } from "../../lib/useLatest";
+import { useSortState } from "../../lib/useSortState";
+import { usePref } from "../../lib/usePref";
+import { useFilterState } from "../../lib/useFilterState";
+import { useUrlMirror } from "../../lib/useUrlMirror";
+import { rememberNavPosition } from "../../lib/history";
 import {
   channelsParamsToState,
   channelsParamUpdates,
   hasChannelsParams,
   type ChannelsUrlState,
-} from "../lib/channelsUrlState";
-import type { FilterMap } from "../lib/tableColumns";
-import { useNavigation, useNavigationActions } from "./navigationContext";
-import type { ChannelsView } from "./Channels";
+} from "../../lib/channelsUrlState";
+import type { FilterMap } from "../../lib/tableColumns";
+import { useNavigation, useNavigationActions } from "../../features/navigation/navigationContext";
 import {
   ChannelLayoutContext,
   ChannelsActionsContext,
   ChannelsStateContext,
   type ChannelsActions,
   type ChannelsState,
+  type ChannelsView,
 } from "./channelsContext";
 
 // Owns the Channels module's shared local state — the rail-less manager's name filter, column-filter
diff --git a/frontend/src/components/ExcludedChannelList.dom.test.tsx b/frontend/src/modules/channels/ExcludedChannelList.dom.test.tsx
similarity index 100%
rename from frontend/src/components/ExcludedChannelList.dom.test.tsx
rename to frontend/src/modules/channels/ExcludedChannelList.dom.test.tsx
diff --git a/frontend/src/components/ExcludedChannelList.tsx b/frontend/src/modules/channels/ExcludedChannelList.tsx
similarity index 88%
rename from frontend/src/components/ExcludedChannelList.tsx
rename to frontend/src/modules/channels/ExcludedChannelList.tsx
index 2a075d8e..8033e909 100644
--- a/frontend/src/components/ExcludedChannelList.tsx
+++ b/frontend/src/modules/channels/ExcludedChannelList.tsx
@@ -1,10 +1,10 @@
 import { type ReactNode } from "react";
 import ChannelLink from "./ChannelLink";
-import NavGrid from "./ui/NavGrid";
-import { navItemAttrs } from "../lib/listNav";
-import { Button } from "./ui/Button";
-import { SURFACE } from "./ui/surfaces";
-import { SectionLabel } from "./ui/Headings";
+import NavGrid from "../../components/ui/NavGrid";
+import { navItemAttrs } from "../../lib/listNav";
+import { Button } from "../../components/ui/Button";
+import { SURFACE } from "../../components/ui/surfaces";
+import { SectionLabel } from "../../components/ui/Headings";
 
 // The presentation shared by the channel manager's "excluded channel" tabs — Hidden and Blocked.
 // A responsive grid of proper channel cards (avatar + name + open-on-YouTube, via ChannelLink) each
diff --git a/frontend/src/components/SyncStatus.tsx b/frontend/src/modules/channels/SyncStatus.tsx
similarity index 92%
rename from frontend/src/components/SyncStatus.tsx
rename to frontend/src/modules/channels/SyncStatus.tsx
index d3efc4a7..810b011d 100644
--- a/frontend/src/components/SyncStatus.tsx
+++ b/frontend/src/modules/channels/SyncStatus.tsx
@@ -1,17 +1,17 @@
 import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { CheckCircle2, Clock, Database, History, Loader2, Pause, Play } from "lucide-react";
-import { api, type MyStatus } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { formatCompact } from "../lib/format";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { Pressable } from "./ui/Pressable";
-import { SURFACE } from "./ui/surfaces";
+import { api, type MyStatus } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { formatCompact } from "../../lib/format";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { Pressable } from "../../components/ui/Pressable";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // Per-user status (not the global catalog): shows the number of videos available to *this*
 // user, how many of *their* channels are still being fetched, and how many lack full
diff --git a/frontend/src/components/TagFilterChips.dom.test.tsx b/frontend/src/modules/channels/TagFilterChips.dom.test.tsx
similarity index 96%
rename from frontend/src/components/TagFilterChips.dom.test.tsx
rename to frontend/src/modules/channels/TagFilterChips.dom.test.tsx
index cd2513fe..198fe12c 100644
--- a/frontend/src/components/TagFilterChips.dom.test.tsx
+++ b/frontend/src/modules/channels/TagFilterChips.dom.test.tsx
@@ -24,8 +24,8 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 const fit = { visible: 1 };
-vi.mock("../lib/useChipOverflowFit", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/useChipOverflowFit")>();
+vi.mock("../../lib/useChipOverflowFit", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/useChipOverflowFit")>();
   return { ...actual, useChipOverflowFit: () => fit.visible };
 });
 
diff --git a/frontend/src/components/TagFilterChips.tsx b/frontend/src/modules/channels/TagFilterChips.tsx
similarity index 91%
rename from frontend/src/components/TagFilterChips.tsx
rename to frontend/src/modules/channels/TagFilterChips.tsx
index 50ed62ff..9eb2ea4a 100644
--- a/frontend/src/components/TagFilterChips.tsx
+++ b/frontend/src/modules/channels/TagFilterChips.tsx
@@ -1,13 +1,13 @@
 import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { fitChipsWithPill } from "../lib/chipOverflow";
-import { chipLaneClass, useChipOverflowFit } from "../lib/useChipOverflowFit";
-import { Chip } from "./ui/Chip";
-import { chipClass } from "./ui/chipStyles";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { SURFACE } from "./ui/surfaces";
-import { ChipLabelPending } from "./ui/Skeleton";
+import { fitChipsWithPill } from "../../lib/chipOverflow";
+import { chipLaneClass, useChipOverflowFit } from "../../lib/useChipOverflowFit";
+import { Chip } from "../../components/ui/Chip";
+import { chipClass } from "../../components/ui/chipStyles";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { SURFACE } from "../../components/ui/surfaces";
+import { ChipLabelPending } from "../../components/ui/Skeleton";
 
 // A single-line row of toggle filter chips that collapses its overflow into a trailing "+N" pill whose
 // popover holds the rest (still toggleable) — the same compression the feed's applied-filter row uses
diff --git a/frontend/src/components/channelCells.tsx b/frontend/src/modules/channels/channelCells.tsx
similarity index 88%
rename from frontend/src/components/channelCells.tsx
rename to frontend/src/modules/channels/channelCells.tsx
index 8e5dd932..4f45190a 100644
--- a/frontend/src/components/channelCells.tsx
+++ b/frontend/src/modules/channels/channelCells.tsx
@@ -1,8 +1,8 @@
 import { useTranslation } from "react-i18next";
 import { Check } from "lucide-react";
-import type { ManagedChannel } from "../lib/api";
-import { formatNumber } from "../lib/format";
-import Tooltip from "./ui/Tooltip";
+import type { ManagedChannel } from "../../lib/api";
+import { formatNumber } from "../../lib/format";
+import Tooltip from "../../components/ui/Tooltip";
 import { isFullySynced } from "./channelSync";
 
 // The Channels-manager cells that are components in their own right (they read i18n), split out of
diff --git a/frontend/src/components/channelColumns.dom.test.tsx b/frontend/src/modules/channels/channelColumns.dom.test.tsx
similarity index 99%
rename from frontend/src/components/channelColumns.dom.test.tsx
rename to frontend/src/modules/channels/channelColumns.dom.test.tsx
index 81e668e4..a6ebbd23 100644
--- a/frontend/src/components/channelColumns.dom.test.tsx
+++ b/frontend/src/modules/channels/channelColumns.dom.test.tsx
@@ -11,7 +11,7 @@ import {
   tagFilterChips,
   tagsColumnTest,
 } from "./channelColumns";
-import { NO_TAG_SENTINEL, type ManagedChannel, type Tag } from "../lib/api";
+import { NO_TAG_SENTINEL, type ManagedChannel, type Tag } from "../../lib/api";
 import type { TFunction } from "i18next";
 
 const ch = (over: Partial<ManagedChannel>): ManagedChannel => ({
diff --git a/frontend/src/components/channelColumns.tsx b/frontend/src/modules/channels/channelColumns.tsx
similarity index 95%
rename from frontend/src/components/channelColumns.tsx
rename to frontend/src/modules/channels/channelColumns.tsx
index 0aa9b8f5..499f3ee3 100644
--- a/frontend/src/components/channelColumns.tsx
+++ b/frontend/src/modules/channels/channelColumns.tsx
@@ -1,16 +1,16 @@
 import type { ComponentProps, ReactNode } from "react";
 import type { TFunction } from "i18next";
-import { NO_TAG_SENTINEL, type ManagedChannel, type Tag } from "../lib/api";
-import { tagPickLabel, type TagList } from "../lib/tagPicks";
-import { formatCountOrDash, formatTotalHours } from "../lib/format";
-import type { Column } from "./ui/DataTable";
-import { PriorityStepper } from "./ui/PriorityStepper";
+import { NO_TAG_SENTINEL, type ManagedChannel, type Tag } from "../../lib/api";
+import { tagPickLabel, type TagList } from "../../lib/tagPicks";
+import { formatCountOrDash, formatTotalHours } from "../../lib/format";
+import type { Column } from "../../components/ui/DataTable";
+import { PriorityStepper } from "../../components/ui/PriorityStepper";
 import ChannelLink from "./ChannelLink";
 import AboutCell from "./AboutCell";
-import { ChannelTagsControl, type SuggestedTag } from "./ChannelTags";
+import { ChannelTagsControl, type SuggestedTag } from "../../features/channel/ChannelTags";
 import { StoredCell } from "./channelCells";
 import { isFullySynced } from "./channelSync";
-import { RelativeTime } from "./ui/RelativeTime";
+import { RelativeTime } from "../../components/ui/RelativeTime";
 import type { FilterChip } from "./TagFilterChips";
 
 /** The shared "subscribers" DataTable column (right-aligned, sortable, em-dash for null) — identical
diff --git a/frontend/src/components/channelSync.ts b/frontend/src/modules/channels/channelSync.ts
similarity index 85%
rename from frontend/src/components/channelSync.ts
rename to frontend/src/modules/channels/channelSync.ts
index fc1eb86c..f1250c41 100644
--- a/frontend/src/components/channelSync.ts
+++ b/frontend/src/modules/channels/channelSync.ts
@@ -1,4 +1,4 @@
-import type { ManagedChannel } from "../lib/api";
+import type { ManagedChannel } from "../../lib/api";
 
 // A channel is "fully synced" when its recent uploads AND full back-catalogue are both in — the
 // predicate the retired Sync column used, now surfaced as a ✓ charm on the Stored count and driven
diff --git a/frontend/src/components/channelsContext.ts b/frontend/src/modules/channels/channelsContext.ts
similarity index 92%
rename from frontend/src/components/channelsContext.ts
rename to frontend/src/modules/channels/channelsContext.ts
index 99f49cd0..47828f36 100644
--- a/frontend/src/components/channelsContext.ts
+++ b/frontend/src/modules/channels/channelsContext.ts
@@ -1,12 +1,14 @@
 import { createContext, useContext } from "react";
-import type { ChannelLayout } from "../lib/channelLayout";
-import type { SortState } from "../lib/columnSort";
-import type { FilterMap } from "../lib/tableColumns";
-import type { ChannelsView } from "./Channels";
+import type { ChannelLayout } from "../../lib/channelLayout";
+import type { SortState } from "../../lib/columnSort";
+import type { FilterMap } from "../../lib/tableColumns";
 
 // The Channels module's contexts + hooks, split out of ChannelsProvider so that file exports only
 // components (Fast Refresh). The provider owns the state; this is the read side every consumer imports.
 
+// The manager's tabs.
+export type ChannelsView = "subscribed" | "discovery" | "hidden" | "blocked";
+
 export type ChannelsState = {
   search: string;
   // The subscribed table's column filters, lifted out of DataTable so the top status chips, the Sync
diff --git a/frontend/src/components/channelsTagRow.contract.test.ts b/frontend/src/modules/channels/channelsTagRow.contract.test.ts
similarity index 100%
rename from frontend/src/components/channelsTagRow.contract.test.ts
rename to frontend/src/modules/channels/channelsTagRow.contract.test.ts
diff --git a/frontend/src/modules/channels/index.ts b/frontend/src/modules/channels/index.ts
new file mode 100644
index 00000000..6fe2f689
--- /dev/null
+++ b/frontend/src/modules/channels/index.ts
@@ -0,0 +1,5 @@
+// The channel manager's public face: its store, mounted at the root and read app-wide, and the sync
+// chip, which the feed's header shows too.
+export { useChannelsActions } from "./channelsContext";
+export { default as SyncStatus } from "./SyncStatus";
+export { channelsModule } from "./module";
diff --git a/frontend/src/modules/channels/module.ts b/frontend/src/modules/channels/module.ts
new file mode 100644
index 00000000..7e798c40
--- /dev/null
+++ b/frontend/src/modules/channels/module.ts
@@ -0,0 +1,16 @@
+import { Tv } from "lucide-react";
+import { lazyWithPreload } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+import { ChannelsProvider } from "./ChannelsProvider";
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page loads lazily.
+export const channelsModule: ModuleDef = {
+  id: "channels",
+  labelKey: "header.account.channels",
+  railKey: "nav.rail.channels",
+  titleKey: "header.channelManager",
+  icon: Tv,
+  Page: lazyWithPreload(() => import("./Channels")),
+  maxWidth: "96rem",
+  Store: ChannelsProvider,
+};
diff --git a/frontend/src/components/useChannelActions.dom.test.tsx b/frontend/src/modules/channels/useChannelActions.dom.test.tsx
similarity index 95%
rename from frontend/src/components/useChannelActions.dom.test.tsx
rename to frontend/src/modules/channels/useChannelActions.dom.test.tsx
index 52c7d4db..879b167e 100644
--- a/frontend/src/components/useChannelActions.dom.test.tsx
+++ b/frontend/src/modules/channels/useChannelActions.dom.test.tsx
@@ -23,16 +23,16 @@ vi.mock("react-i18next", async (importOriginal) => {
     useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
   };
 });
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify: (...a: unknown[]) => h.notify(...a),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => h.confirm }));
-vi.mock("../lib/useMe", () => ({ useMe: () => ({ role: h.role, can_write: h.canWrite }) }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => h.confirm }));
+vi.mock("../../lib/useMe", () => ({ useMe: () => ({ role: h.role, can_write: h.canWrite }) }));
 
 import { useChannelActions } from "./useChannelActions";
-import { api, type ManagedChannel, type Tag } from "../lib/api";
-import type { ActionMenuItem } from "./ui/ActionMenu";
+import { api, type ManagedChannel, type Tag } from "../../lib/api";
+import type { ActionMenuItem } from "../../components/ui/ActionMenu";
 
 afterEach(() => {
   cleanup();
diff --git a/frontend/src/components/useChannelActions.tsx b/frontend/src/modules/channels/useChannelActions.tsx
similarity index 92%
rename from frontend/src/components/useChannelActions.tsx
rename to frontend/src/modules/channels/useChannelActions.tsx
index 32b2f4dd..8bc2fad7 100644
--- a/frontend/src/components/useChannelActions.tsx
+++ b/frontend/src/modules/channels/useChannelActions.tsx
@@ -1,18 +1,18 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { ArrowUpDown, EyeOff, ExternalLink, History, Tags, Tv, UserMinus } from "lucide-react";
-import { qk } from "../lib/queryKeys";
-import { invalidateSubscription } from "../lib/subscriptionCache";
-import { api, type ManagedChannel, type Tag } from "../lib/api";
-import { priorityChoices } from "../lib/channelOrder";
-import { compareText } from "../lib/collate";
-import { channelYouTubeUrl } from "../lib/format";
-import { notify } from "../lib/notifications";
-import { notifyYouTubeActionError } from "../lib/youtubeErrors";
-import { useMe } from "../lib/useMe";
-import { useConfirm } from "./confirmContext";
-import { useCopyItems } from "./copyItems";
-import { type ActionMenuItem } from "./ui/ActionMenu";
+import { qk } from "../../lib/queryKeys";
+import { invalidateSubscription } from "../../lib/subscriptionCache";
+import { api, type ManagedChannel, type Tag } from "../../lib/api";
+import { priorityChoices } from "../../lib/channelOrder";
+import { compareText } from "../../lib/collate";
+import { channelYouTubeUrl } from "../../lib/format";
+import { notify } from "../../lib/notifications";
+import { notifyYouTubeActionError } from "../../lib/youtubeErrors";
+import { useMe } from "../../lib/useMe";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { useCopyItems } from "../../components/ui/copyItems";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
 
 // A subscribed channel's ONE action list: the manager row's "…", its right-click, long-press
 // and Shift+F10, in the table and in the card layout alike. The row keeps what the reader looks at
diff --git a/frontend/src/components/useTagSuggestions.dom.test.tsx b/frontend/src/modules/channels/useTagSuggestions.dom.test.tsx
similarity index 96%
rename from frontend/src/components/useTagSuggestions.dom.test.tsx
rename to frontend/src/modules/channels/useTagSuggestions.dom.test.tsx
index 2ddafc61..74470aef 100644
--- a/frontend/src/components/useTagSuggestions.dom.test.tsx
+++ b/frontend/src/modules/channels/useTagSuggestions.dom.test.tsx
@@ -20,13 +20,13 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 // The confirm dialog's answer is controllable per test (the bulk-accept path gates on it).
 const confirmState = vi.hoisted(() => ({ result: true }));
-vi.mock("./confirmContext", () => ({
+vi.mock("../../components/ui/confirmContext", () => ({
   useConfirm: () => () => Promise.resolve(confirmState.result),
 }));
 
-import { api, type Tag } from "../lib/api";
-import type { TagSuggestions } from "../lib/api/tags";
-import { qk } from "../lib/queryKeys";
+import { api, type Tag } from "../../lib/api";
+import type { TagSuggestions } from "../../lib/api/tags";
+import { qk } from "../../lib/queryKeys";
 import { useTagSuggestions } from "./useTagSuggestions";
 
 const tag = (id: number, name: string): Tag => ({
diff --git a/frontend/src/components/useTagSuggestions.ts b/frontend/src/modules/channels/useTagSuggestions.ts
similarity index 94%
rename from frontend/src/components/useTagSuggestions.ts
rename to frontend/src/modules/channels/useTagSuggestions.ts
index 0433fce0..bec733d4 100644
--- a/frontend/src/components/useTagSuggestions.ts
+++ b/frontend/src/modules/channels/useTagSuggestions.ts
@@ -1,10 +1,10 @@
 import { useMemo, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
-import { api, type Tag, type TagSuggestions } from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { useConfirm } from "./confirmContext";
-import type { SuggestedTag } from "./ChannelTags";
+import { api, type Tag, type TagSuggestions } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { useConfirm } from "../../components/ui/confirmContext";
+import type { SuggestedTag } from "../../features/channel/ChannelTags";
 
 // A tag suggestion at/above this score is "high confidence" — the only ones the header's bulk
 // "accept all" acts on. Mirrors AUTOAPPLY_THRESHOLD in backend app/sync/tagsuggest.py (kept in
diff --git a/frontend/src/components/ConfigPanel.choice.dom.test.tsx b/frontend/src/modules/config/ConfigPanel.choice.dom.test.tsx
similarity index 95%
rename from frontend/src/components/ConfigPanel.choice.dom.test.tsx
rename to frontend/src/modules/config/ConfigPanel.choice.dom.test.tsx
index cc7b8ff1..5465a3ff 100644
--- a/frontend/src/components/ConfigPanel.choice.dom.test.tsx
+++ b/frontend/src/modules/config/ConfigPanel.choice.dom.test.tsx
@@ -11,7 +11,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import type { ConfigItem } from "../lib/api";
+import type { ConfigItem } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -57,8 +57,8 @@ const CHOICE_LABELS: Record<string, string> = Object.fromEntries(
 const setConfig = vi.fn((_key: string, _value: unknown) => Promise.resolve({}));
 const resetConfig = vi.fn((_key: string) => Promise.resolve({}));
 
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
@@ -80,7 +80,7 @@ vi.mock("../lib/api", async (importOriginal) => {
     },
   };
 });
-vi.mock("../lib/useMe", () => ({ useMe: () => ({ email_configured: true }) }));
+vi.mock("../../lib/useMe", () => ({ useMe: () => ({ email_configured: true }) }));
 
 import ConfigPanel from "./ConfigPanel";
 
diff --git a/frontend/src/components/ConfigPanel.field.dom.test.tsx b/frontend/src/modules/config/ConfigPanel.field.dom.test.tsx
similarity index 93%
rename from frontend/src/components/ConfigPanel.field.dom.test.tsx
rename to frontend/src/modules/config/ConfigPanel.field.dom.test.tsx
index 1033e738..ab2dab18 100644
--- a/frontend/src/components/ConfigPanel.field.dom.test.tsx
+++ b/frontend/src/modules/config/ConfigPanel.field.dom.test.tsx
@@ -11,7 +11,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import type { ConfigItem } from "../lib/api";
+import type { ConfigItem } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -35,8 +35,8 @@ const text = (key: string): ConfigItem => ({
   default: "",
 });
 
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
@@ -52,7 +52,7 @@ vi.mock("../lib/api", async (importOriginal) => {
     },
   };
 });
-vi.mock("../lib/useMe", () => ({ useMe: () => ({ email_configured: true }) }));
+vi.mock("../../lib/useMe", () => ({ useMe: () => ({ email_configured: true }) }));
 
 import ConfigPanel from "./ConfigPanel";
 
diff --git a/frontend/src/components/ConfigPanel.sections.dom.test.tsx b/frontend/src/modules/config/ConfigPanel.sections.dom.test.tsx
similarity index 91%
rename from frontend/src/components/ConfigPanel.sections.dom.test.tsx
rename to frontend/src/modules/config/ConfigPanel.sections.dom.test.tsx
index fe33b577..d8129571 100644
--- a/frontend/src/components/ConfigPanel.sections.dom.test.tsx
+++ b/frontend/src/modules/config/ConfigPanel.sections.dom.test.tsx
@@ -6,7 +6,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import type { ConfigItem } from "../lib/api";
+import type { ConfigItem } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -30,8 +30,8 @@ const text = (key: string, group: string): ConfigItem => ({
   default: "",
 });
 
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
@@ -48,7 +48,7 @@ vi.mock("../lib/api", async (importOriginal) => {
     },
   };
 });
-vi.mock("../lib/useMe", () => ({ useMe: () => ({ email_configured: true }) }));
+vi.mock("../../lib/useMe", () => ({ useMe: () => ({ email_configured: true }) }));
 
 import ConfigPanel from "./ConfigPanel";
 
diff --git a/frontend/src/components/ConfigPanel.tsx b/frontend/src/modules/config/ConfigPanel.tsx
similarity index 94%
rename from frontend/src/components/ConfigPanel.tsx
rename to frontend/src/modules/config/ConfigPanel.tsx
index 9465f400..151a4d1e 100644
--- a/frontend/src/components/ConfigPanel.tsx
+++ b/frontend/src/modules/config/ConfigPanel.tsx
@@ -1,26 +1,26 @@
 import { useId, useMemo, useState } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Plug, RotateCcw, Send } from "lucide-react";
-import { api, type ConfigItem, type PlexTestResult } from "../lib/api";
-import { notify } from "../lib/notifications";
-import Tooltip from "./ui/Tooltip";
-import InlineNotice from "./ui/InlineNotice";
-import { useMe } from "../lib/useMe";
-import Tabs from "./ui/Tabs";
-import { useTabPanel } from "./ui/tabPanel";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { Switch } from "./ui/form";
-import SegmentedToggle from "./ui/SegmentedToggle";
-import FilterSelect from "./ui/FilterSelect";
-import { DraftSaveBar, type SaveState } from "./ui/DraftSaveBar";
-import { LS, useTabPersistedState } from "../lib/storage";
-import { notifyActionError } from "../lib/actionErrors";
-import { Button } from "./ui/Button";
-import { CheckRow } from "./ui/NativeControls";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
+import { api, type ConfigItem, type PlexTestResult } from "../../lib/api";
+import { notify } from "../../lib/notifications";
+import Tooltip from "../../components/ui/Tooltip";
+import InlineNotice from "../../components/ui/InlineNotice";
+import { useMe } from "../../lib/useMe";
+import Tabs from "../../components/ui/Tabs";
+import { useTabPanel } from "../../components/ui/tabPanel";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { Switch } from "../../components/ui/form";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
+import FilterSelect from "../../components/ui/FilterSelect";
+import { DraftSaveBar, type SaveState } from "../../components/ui/DraftSaveBar";
+import { LS, useTabPersistedState } from "../../lib/storage";
+import { notifyActionError } from "../../lib/actionErrors";
+import { Button } from "../../components/ui/Button";
+import { CheckRow } from "../../components/ui/NativeControls";
+import { Input } from "../../components/ui/Input";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // Admin Configuration page: edit DB-overridable operational settings (registry-driven from the
 // backend — adding a key there makes it appear here automatically). Edits are drafted and
diff --git a/frontend/src/modules/config/index.ts b/frontend/src/modules/config/index.ts
new file mode 100644
index 00000000..e16f7e77
--- /dev/null
+++ b/frontend/src/modules/config/index.ts
@@ -0,0 +1,2 @@
+// The config page's public face: how the shell and the navigation know it.
+export { configModule } from "./module";
diff --git a/frontend/src/modules/config/module.ts b/frontend/src/modules/config/module.ts
new file mode 100644
index 00000000..705322a4
--- /dev/null
+++ b/frontend/src/modules/config/module.ts
@@ -0,0 +1,15 @@
+import { SlidersHorizontal } from "lucide-react";
+import { lazyWithPreload } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page loads lazily.
+export const configModule: ModuleDef = {
+  id: "config",
+  labelKey: "header.account.config",
+  railKey: "nav.rail.config",
+  titleKey: "header.configuration",
+  icon: SlidersHorizontal,
+  system: true,
+  gate: (me) => me.role === "admin",
+  Page: lazyWithPreload(() => import("./ConfigPanel")),
+};
diff --git a/frontend/src/components/ChannelPage.backfill.dom.test.tsx b/frontend/src/modules/feed/ChannelPage.backfill.dom.test.tsx
similarity index 90%
rename from frontend/src/components/ChannelPage.backfill.dom.test.tsx
rename to frontend/src/modules/feed/ChannelPage.backfill.dom.test.tsx
index 8f060b47..8271d516 100644
--- a/frontend/src/components/ChannelPage.backfill.dom.test.tsx
+++ b/frontend/src/modules/feed/ChannelPage.backfill.dom.test.tsx
@@ -16,19 +16,20 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./navigationContext", () => ({
+vi.mock("../../features/navigation/navigationContext", () => ({
   useNavigationActions: () => ({ closeChannel: vi.fn(), openChannel: vi.fn() }),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
 vi.mock("./feedFiltersContext", () => ({
   useFeedFilters: () => ({ includeNormal: true, includeShorts: false, includeLive: false }),
+  useFeedFiltersActions: () => ({ setFilters: () => {} }),
 }));
 vi.mock("./Feed", () => ({ default: () => null }));
-vi.mock("./ChannelAbout", () => ({ default: () => null }));
+vi.mock("../../features/channel/ChannelAbout", () => ({ default: () => null }));
 
 import ChannelPage from "./ChannelPage";
-import { api, type ChannelDetail, type FeedFilters, type Me } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, type ChannelDetail, type FeedFilters, type Me } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 beforeAll(() => {
   class Stub {
@@ -71,9 +72,6 @@ describe("ChannelPage — the grid follows a running backfill", () => {
           channelId={CH}
           initialName="LEMMiNO"
           me={{ id: 1, can_write: true } as unknown as Me}
-          view="cards"
-          setView={() => {}}
-          onShowInFeed={() => {}}
         />
       </QueryClientProvider>,
     );
diff --git a/frontend/src/components/ChannelPage.banner.dom.test.tsx b/frontend/src/modules/feed/ChannelPage.banner.dom.test.tsx
similarity index 85%
rename from frontend/src/components/ChannelPage.banner.dom.test.tsx
rename to frontend/src/modules/feed/ChannelPage.banner.dom.test.tsx
index 5d886379..b719bf5b 100644
--- a/frontend/src/components/ChannelPage.banner.dom.test.tsx
+++ b/frontend/src/modules/feed/ChannelPage.banner.dom.test.tsx
@@ -14,23 +14,24 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./navigationContext", () => ({
+vi.mock("../../features/navigation/navigationContext", () => ({
   useNavigationActions: () => ({ closeChannel: vi.fn(), openChannel: vi.fn() }),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
 vi.mock("./feedFiltersContext", () => ({
   useFeedFilters: () => ({ includeNormal: true, includeShorts: false, includeLive: false }),
+  useFeedFiltersActions: () => ({ setFilters: () => {} }),
 }));
 vi.mock("./Feed", () => ({ default: () => null }));
-vi.mock("./ChannelAbout", () => ({ default: () => null }));
+vi.mock("../../features/channel/ChannelAbout", () => ({ default: () => null }));
 // The page's chrome portals into the shell's fixed toolbar band, which this test has no shell for.
-vi.mock("./ui/PageShell", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("./ui/PageShell")>()),
+vi.mock("../../components/ui/PageShell", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../components/ui/PageShell")>()),
   PageToolbar: ({ children }: { children?: ReactNode }) => <>{children}</>,
 }));
 
 import ChannelPage from "./ChannelPage";
-import { api, type ChannelDetail, type Me } from "../lib/api";
+import { api, type ChannelDetail, type Me } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
@@ -73,9 +74,6 @@ describe("ChannelPage — the banner", () => {
           channelId={CH}
           initialName="StarTalk"
           me={{ id: 1, can_write: true } as unknown as Me}
-          view="cards"
-          setView={() => {}}
-          onShowInFeed={() => {}}
         />
       </QueryClientProvider>,
     );
diff --git a/frontend/src/components/ChannelPage.busyFocus.dom.test.tsx b/frontend/src/modules/feed/ChannelPage.busyFocus.dom.test.tsx
similarity index 90%
rename from frontend/src/components/ChannelPage.busyFocus.dom.test.tsx
rename to frontend/src/modules/feed/ChannelPage.busyFocus.dom.test.tsx
index b0ee918e..8bfa6d59 100644
--- a/frontend/src/components/ChannelPage.busyFocus.dom.test.tsx
+++ b/frontend/src/modules/feed/ChannelPage.busyFocus.dom.test.tsx
@@ -14,23 +14,24 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./navigationContext", () => ({
+vi.mock("../../features/navigation/navigationContext", () => ({
   useNavigationActions: () => ({ closeChannel: vi.fn(), openChannel: vi.fn() }),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
 vi.mock("./feedFiltersContext", () => ({
   useFeedFilters: () => ({ includeNormal: true, includeShorts: false, includeLive: false }),
+  useFeedFiltersActions: () => ({ setFilters: () => {} }),
 }));
 vi.mock("./Feed", () => ({ default: () => null }));
-vi.mock("./ChannelAbout", () => ({ default: () => null }));
+vi.mock("../../features/channel/ChannelAbout", () => ({ default: () => null }));
 // The page's chrome portals into the shell's fixed toolbar band, which this test has no shell for.
-vi.mock("./ui/PageShell", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("./ui/PageShell")>()),
+vi.mock("../../components/ui/PageShell", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../components/ui/PageShell")>()),
   PageToolbar: ({ children }: { children?: ReactNode }) => <>{children}</>,
 }));
 
 import ChannelPage from "./ChannelPage";
-import { api, type ChannelDetail, type Me } from "../lib/api";
+import { api, type ChannelDetail, type Me } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
@@ -80,9 +81,6 @@ describe("ChannelPage — a busy toggle keeps the keyboard", () => {
             channelId={CH}
             initialName="LEMMiNO"
             me={{ id: 1, can_write: true } as unknown as Me}
-            view="cards"
-            setView={() => {}}
-            onShowInFeed={() => {}}
           />
         </QueryClientProvider>,
       );
@@ -127,9 +125,6 @@ describe("ChannelPage — the banner", () => {
           channelId={CH}
           initialName="LEMMiNO"
           me={{ id: 1, can_write: true } as unknown as Me}
-          view="cards"
-          setView={() => {}}
-          onShowInFeed={() => {}}
         />
       </QueryClientProvider>,
     );
diff --git a/frontend/src/components/ChannelPage.fold.dom.test.tsx b/frontend/src/modules/feed/ChannelPage.fold.dom.test.tsx
similarity index 88%
rename from frontend/src/components/ChannelPage.fold.dom.test.tsx
rename to frontend/src/modules/feed/ChannelPage.fold.dom.test.tsx
index c79d4f29..1d423216 100644
--- a/frontend/src/components/ChannelPage.fold.dom.test.tsx
+++ b/frontend/src/modules/feed/ChannelPage.fold.dom.test.tsx
@@ -13,23 +13,24 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./navigationContext", () => ({
+vi.mock("../../features/navigation/navigationContext", () => ({
   useNavigationActions: () => ({ closeChannel: vi.fn(), openChannel: vi.fn() }),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
 vi.mock("./feedFiltersContext", () => ({
   useFeedFilters: () => ({ includeNormal: true, includeShorts: false, includeLive: false }),
+  useFeedFiltersActions: () => ({ setFilters: () => {} }),
 }));
 vi.mock("./Feed", () => ({ default: () => null }));
-vi.mock("./ChannelAbout", () => ({ default: () => null }));
-vi.mock("./ui/PageShell", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("./ui/PageShell")>()),
+vi.mock("../../features/channel/ChannelAbout", () => ({ default: () => null }));
+vi.mock("../../components/ui/PageShell", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../components/ui/PageShell")>()),
   PageToolbar: ({ children }: { children?: ReactNode }) => <>{children}</>,
 }));
 
 import ChannelPage from "./ChannelPage";
-import { CONTENT_ID } from "./ui/landmarks";
-import { api, type ChannelDetail, type Me } from "../lib/api";
+import { CONTENT_ID } from "../../components/ui/landmarks";
+import { api, type ChannelDetail, type Me } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
@@ -91,9 +92,6 @@ async function renderPage() {
         channelId={CH}
         initialName="StarTalk"
         me={{ id: 1, can_write: true } as unknown as Me}
-        view="cards"
-        setView={() => {}}
-        onShowInFeed={() => {}}
       />
     </QueryClientProvider>,
   );
diff --git a/frontend/src/components/ChannelPage.tsx b/frontend/src/modules/feed/ChannelPage.tsx
similarity index 92%
rename from frontend/src/components/ChannelPage.tsx
rename to frontend/src/modules/feed/ChannelPage.tsx
index 9a61acca..0551865d 100644
--- a/frontend/src/components/ChannelPage.tsx
+++ b/frontend/src/modules/feed/ChannelPage.tsx
@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useLiveQuery } from "../lib/useLiveQuery";
-import { channelDetailPollMs, useBackfillFeedRefresh } from "../lib/channelDetailPoll";
-import { qk } from "../lib/queryKeys";
-import { invalidateSubscription } from "../lib/subscriptionCache";
-import { useNavigationActions } from "./navigationContext";
-import { PriorityStepper } from "./ui/PriorityStepper";
-import { useChannelPriority } from "../lib/useChannelPriority";
+import { useLiveQuery } from "../../lib/useLiveQuery";
+import { channelDetailPollMs, useBackfillFeedRefresh } from "../../lib/channelDetailPoll";
+import { qk } from "../../lib/queryKeys";
+import { invalidateSubscription } from "../../lib/subscriptionCache";
+import { useNavigationActions } from "../../features/navigation/navigationContext";
+import { PriorityStepper } from "../../components/ui/PriorityStepper";
+import { useChannelPriority } from "../../lib/useChannelPriority";
 import {
   ArrowLeft,
   Ban,
@@ -21,33 +21,40 @@ import {
   RefreshCw,
   SlidersHorizontal,
 } from "lucide-react";
-import Avatar from "./ui/Avatar";
-import Tabs from "./ui/Tabs";
-import { useTabPanel } from "./ui/tabPanel";
-import { useScrollFold } from "./ui/scrollFold";
+import Avatar from "../../components/ui/Avatar";
+import Tabs from "../../components/ui/Tabs";
+import { useTabPanel } from "../../components/ui/tabPanel";
+import { useScrollFold } from "../../components/ui/scrollFold";
 import Feed from "./Feed";
-import ChannelAboutContent from "./ChannelAbout";
-import { PageToolbar } from "./ui/PageShell";
-import { PageToolbarSlot } from "./ui/pageToolbarSlot";
+import ChannelAboutContent from "../../features/channel/ChannelAbout";
+import { PageToolbar } from "../../components/ui/PageShell";
+import { PageToolbarSlot } from "../../components/ui/pageToolbarSlot";
 import { useFeedFilters } from "./feedFiltersContext";
+import { useFeedView, useFeedViewActions } from "./feedViewContext";
+import { useShowChannelInFeed } from "./useFeedPageHooks";
 import { SHOW_IDS } from "./feedFiltersInit";
-import { usePref } from "../lib/usePref";
-import { LS } from "../lib/storage";
-import { useConfirm } from "./confirmContext";
-import { notify } from "../lib/notifications";
-import { notifyYouTubeActionError } from "../lib/youtubeErrors";
-import { notifyActionError } from "../lib/actionErrors";
-import { api, DEFAULT_TAG_MODES, type FeedFilters, type Me, type ChannelDetail } from "../lib/api";
-import type { FeedView } from "../lib/feedView";
-import { channelYouTubeUrl, formatDate, formatCompact } from "../lib/format";
-import { ChannelTagsControl } from "./ChannelTags";
-import { useChannelTagActions } from "../lib/useChannelTagActions";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { IconLink } from "./ui/LinkButton";
-import { PageHeading } from "./ui/Headings";
-import { useTags } from "../lib/useTags";
-import RemoteImage from "./ui/RemoteImage";
+import { usePref } from "../../lib/usePref";
+import { LS } from "../../lib/storage";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { notify } from "../../lib/notifications";
+import { notifyYouTubeActionError } from "../../lib/youtubeErrors";
+import { notifyActionError } from "../../lib/actionErrors";
+import {
+  api,
+  DEFAULT_TAG_MODES,
+  type FeedFilters,
+  type Me,
+  type ChannelDetail,
+} from "../../lib/api";
+import { channelYouTubeUrl, formatDate, formatCompact } from "../../lib/format";
+import { ChannelTagsControl } from "../../features/channel/ChannelTags";
+import { useChannelTagActions } from "../../lib/useChannelTagActions";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { IconLink } from "../../components/ui/LinkButton";
+import { PageHeading } from "../../components/ui/Headings";
+import { useTags } from "../../lib/useTags";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // A dedicated channel page: an "About"-style header (banner, avatar, stats, subscribe) over the
 // channel's videos (the catalog filtered to this channel). For an un-subscribed channel it
@@ -58,21 +65,10 @@ export default function ChannelPage({
   channelId,
   initialName,
   me,
-  view,
-  setView,
-  onShowInFeed,
 }: {
   channelId: string;
   initialName?: string;
   me: Me;
-  // The feed's view pref, passed straight through to the Feed this page renders — so its
-  // toolbar carries the same switcher and a change here is the same account-wide choice.
-  view: FeedView;
-  setView: (v: FeedView) => void;
-  // Narrow the real feed to this channel and go there. Offered only for a channel you're
-  // subscribed to: the feed defaults to scope "my", so filtering it to a channel you don't
-  // follow would just land you on an empty page.
-  onShowInFeed: () => void;
 }) {
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
@@ -84,6 +80,14 @@ export default function ChannelPage({
   // shorts / live-upcoming) is a genuine preference, not part of "this channel's catalog" — so we
   // inherit it instead of forcing Live/Upcoming on. The channel toolbar can still toggle these.
   const globalFilters = useFeedFilters();
+  // The feed's view pref, handed straight to the Feed this page renders — so its toolbar carries the
+  // same switcher and a change here is the same account-wide choice.
+  const view = useFeedView();
+  const { setView } = useFeedViewActions();
+  // Narrow the real feed to this channel and go there. Offered only for a channel you're subscribed
+  // to: the feed defaults to scope "my", so filtering it to a channel you don't follow would just
+  // land you on an empty page.
+  const onShowInFeed = useShowChannelInFeed(channelId);
   const [tab, setTab] = useState<"videos" | "about">("videos");
   const panel = useTabPanel();
   // The whole channel chrome (banner, identity, tabs, toolbar) is fixed: it portals into the shell's
diff --git a/frontend/src/components/ChannelPage.watchState.dom.test.tsx b/frontend/src/modules/feed/ChannelPage.watchState.dom.test.tsx
similarity index 84%
rename from frontend/src/components/ChannelPage.watchState.dom.test.tsx
rename to frontend/src/modules/feed/ChannelPage.watchState.dom.test.tsx
index 7cda2ba6..1d866030 100644
--- a/frontend/src/components/ChannelPage.watchState.dom.test.tsx
+++ b/frontend/src/modules/feed/ChannelPage.watchState.dom.test.tsx
@@ -6,18 +6,19 @@ import type { ReactNode } from "react";
 import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
 import { render, cleanup, act } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import type { FeedFilters } from "../lib/api";
+import type { FeedFilters } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./navigationContext", () => ({
+vi.mock("../../features/navigation/navigationContext", () => ({
   useNavigationActions: () => ({ closeChannel: vi.fn(), openChannel: vi.fn() }),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
 vi.mock("./feedFiltersContext", () => ({
   useFeedFilters: () => ({ includeNormal: true, includeShorts: false, includeLive: false }),
+  useFeedFiltersActions: () => ({ setFilters: () => {} }),
 }));
 const feed = vi.hoisted(() => ({
   last: null as null | { filters: FeedFilters; setFilters: (f: FeedFilters) => void },
@@ -28,15 +29,15 @@ vi.mock("./Feed", () => ({
     return null;
   },
 }));
-vi.mock("./ChannelAbout", () => ({ default: () => null }));
-vi.mock("./ui/PageShell", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("./ui/PageShell")>()),
+vi.mock("../../features/channel/ChannelAbout", () => ({ default: () => null }));
+vi.mock("../../components/ui/PageShell", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../components/ui/PageShell")>()),
   PageToolbar: ({ children }: { children?: ReactNode }) => <>{children}</>,
 }));
 
 import ChannelPage from "./ChannelPage";
-import { api, type ChannelDetail, type Me } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, type ChannelDetail, type Me } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 beforeAll(() => {
   class Stub {
@@ -75,9 +76,6 @@ function mount(preferences: Record<string, unknown> = {}) {
         channelId={CH}
         initialName="StarTalk"
         me={{ id: 1, can_write: true, can_read: true } as unknown as Me}
-        view="cards"
-        setView={() => {}}
-        onShowInFeed={() => {}}
       />
     </QueryClientProvider>,
   );
diff --git a/frontend/src/components/ChannelPicker.tsx b/frontend/src/modules/feed/ChannelPicker.tsx
similarity index 90%
rename from frontend/src/components/ChannelPicker.tsx
rename to frontend/src/modules/feed/ChannelPicker.tsx
index 619fb7fe..158b23d5 100644
--- a/frontend/src/components/ChannelPicker.tsx
+++ b/frontend/src/modules/feed/ChannelPicker.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
-import type { FeedFilters } from "../lib/api";
-import { useChannelNames } from "../lib/useChannelNames";
-import Combobox, { type ComboboxOption } from "./ui/Combobox";
+import type { FeedFilters } from "../../lib/api";
+import { useChannelNames } from "../../lib/useChannelNames";
+import Combobox, { type ComboboxOption } from "../../components/ui/Combobox";
 
 // Pick channels to narrow the feed to — several OR together, so every other filter then applies
 // across all of them. Until this existed the filter was settable only via a shared "?channel=" link:
diff --git a/frontend/src/components/DateFilterSelect.dom.test.tsx b/frontend/src/modules/feed/DateFilterSelect.dom.test.tsx
similarity index 97%
rename from frontend/src/components/DateFilterSelect.dom.test.tsx
rename to frontend/src/modules/feed/DateFilterSelect.dom.test.tsx
index 4ae6c37e..d907b929 100644
--- a/frontend/src/components/DateFilterSelect.dom.test.tsx
+++ b/frontend/src/modules/feed/DateFilterSelect.dom.test.tsx
@@ -14,7 +14,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import DateFilterSelect from "./DateFilterSelect";
-import { type FeedFilters } from "../lib/api";
+import { type FeedFilters } from "../../lib/api";
 
 afterEach(cleanup);
 
diff --git a/frontend/src/components/DateFilterSelect.tsx b/frontend/src/modules/feed/DateFilterSelect.tsx
similarity index 93%
rename from frontend/src/components/DateFilterSelect.tsx
rename to frontend/src/modules/feed/DateFilterSelect.tsx
index cb93375c..5f7979e8 100644
--- a/frontend/src/components/DateFilterSelect.tsx
+++ b/frontend/src/modules/feed/DateFilterSelect.tsx
@@ -1,21 +1,21 @@
 import { useLayoutEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { CalendarDays } from "lucide-react";
-import { MenuCheck } from "./ui/MenuCheck";
-import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { type FeedFilters } from "../lib/api";
+import { MenuCheck } from "../../components/ui/MenuCheck";
+import { PopoverItem, PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { type FeedFilters } from "../../lib/api";
 import {
   deriveDateKey,
   isCommittableDay,
   selectDateChip,
   type DatePreset,
-} from "../lib/dateFilter";
-import { formatDate } from "../lib/format";
-import { Button } from "./ui/Button";
-import { SelectTrigger } from "./ui/SelectTrigger";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
+} from "../../lib/dateFilter";
+import { formatDate } from "../../lib/format";
+import { Button } from "../../components/ui/Button";
+import { SelectTrigger } from "../../components/ui/SelectTrigger";
+import { Input } from "../../components/ui/Input";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // The feed rail's "Upload date" control: a single-select dropdown (the SortControl/FilterSelect pill,
 // but full-width for the rail) over "Any time" + the day presets + a "Custom range". Picking Custom
diff --git a/frontend/src/components/Feed.countStale.dom.test.tsx b/frontend/src/modules/feed/Feed.countStale.dom.test.tsx
similarity index 90%
rename from frontend/src/components/Feed.countStale.dom.test.tsx
rename to frontend/src/modules/feed/Feed.countStale.dom.test.tsx
index 4c952366..df1b2d08 100644
--- a/frontend/src/components/Feed.countStale.dom.test.tsx
+++ b/frontend/src/modules/feed/Feed.countStale.dom.test.tsx
@@ -11,16 +11,18 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./wizardContext", () => ({ useWizard: () => ({ openWizard: vi.fn() }) }));
+vi.mock("../../features/wizard/wizardContext", () => ({
+  useWizard: () => ({ openWizard: vi.fn() }),
+}));
 vi.mock("./VirtualFeed", () => ({ default: () => null }));
-vi.mock("./SelectedViewChip", () => ({ default: () => null }));
-vi.mock("./ActiveFilterChips", () => ({ default: () => null }));
+vi.mock("../../features/filters/SelectedViewChip", () => ({ default: () => null }));
+vi.mock("../../features/filters/ActiveFilterChips", () => ({ default: () => null }));
 
 import Feed from "./Feed";
-import { api, DEFAULT_TAG_MODES, type FeedFilters } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, DEFAULT_TAG_MODES, type FeedFilters } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 import type { ReactElement } from "react";
-import { PageToolbarSlot } from "./ui/pageToolbarSlot";
+import { PageToolbarSlot } from "../../components/ui/pageToolbarSlot";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/Feed.nextPageFailed.dom.test.tsx b/frontend/src/modules/feed/Feed.nextPageFailed.dom.test.tsx
similarity index 90%
rename from frontend/src/components/Feed.nextPageFailed.dom.test.tsx
rename to frontend/src/modules/feed/Feed.nextPageFailed.dom.test.tsx
index 969dede4..92949385 100644
--- a/frontend/src/components/Feed.nextPageFailed.dom.test.tsx
+++ b/frontend/src/modules/feed/Feed.nextPageFailed.dom.test.tsx
@@ -13,7 +13,9 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./wizardContext", () => ({ useWizard: () => ({ openWizard: vi.fn() }) }));
+vi.mock("../../features/wizard/wizardContext", () => ({
+  useWizard: () => ({ openWizard: vi.fn() }),
+}));
 vi.mock("./VirtualFeed", () => ({
   default: ({
     hasNextPage,
@@ -28,12 +30,12 @@ vi.mock("./VirtualFeed", () => ({
     </div>
   ),
 }));
-vi.mock("./SelectedViewChip", () => ({ default: () => null }));
-vi.mock("./ActiveFilterChips", () => ({ default: () => null }));
+vi.mock("../../features/filters/SelectedViewChip", () => ({ default: () => null }));
+vi.mock("../../features/filters/ActiveFilterChips", () => ({ default: () => null }));
 
 import Feed from "./Feed";
-import { api, DEFAULT_TAG_MODES, type FeedFilters } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, DEFAULT_TAG_MODES, type FeedFilters } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/Feed.overrides.dom.test.tsx b/frontend/src/modules/feed/Feed.overrides.dom.test.tsx
similarity index 97%
rename from frontend/src/components/Feed.overrides.dom.test.tsx
rename to frontend/src/modules/feed/Feed.overrides.dom.test.tsx
index c858fe7b..c32e589f 100644
--- a/frontend/src/components/Feed.overrides.dom.test.tsx
+++ b/frontend/src/modules/feed/Feed.overrides.dom.test.tsx
@@ -13,7 +13,9 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./wizardContext", () => ({ useWizard: () => ({ openWizard: vi.fn() }) }));
+vi.mock("../../features/wizard/wizardContext", () => ({
+  useWizard: () => ({ openWizard: vi.fn() }),
+}));
 vi.mock("./VirtualFeed", () => ({
   default: ({
     items,
@@ -38,8 +40,8 @@ vi.mock("./VirtualFeed", () => ({
 }));
 
 import Feed from "./Feed";
-import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/Feed.playerSession.dom.test.tsx b/frontend/src/modules/feed/Feed.playerSession.dom.test.tsx
similarity index 96%
rename from frontend/src/components/Feed.playerSession.dom.test.tsx
rename to frontend/src/modules/feed/Feed.playerSession.dom.test.tsx
index 6dc404f7..bd4b1172 100644
--- a/frontend/src/components/Feed.playerSession.dom.test.tsx
+++ b/frontend/src/modules/feed/Feed.playerSession.dom.test.tsx
@@ -13,7 +13,9 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./wizardContext", () => ({ useWizard: () => ({ openWizard: vi.fn() }) }));
+vi.mock("../../features/wizard/wizardContext", () => ({
+  useWizard: () => ({ openWizard: vi.fn() }),
+}));
 // What the grid was handed for its card menu's channel-filter row.
 const grid: { channelFilter?: { ids: string[]; set: (ids: string[]) => void } } = {};
 vi.mock("./VirtualFeed", () => ({
@@ -45,9 +47,9 @@ const player = vi.hoisted(() => ({
   watchOnUnmount: false,
   flush: null as Promise<unknown> | null,
 }));
-vi.mock("./PlayerModal", async () => {
+vi.mock("../../features/player/PlayerModal", async () => {
   const { useEffect } = await import("react");
-  const { trackProgressFlush } = await import("../lib/progressCache");
+  const { trackProgressFlush } = await import("../../lib/progressCache");
   return {
     default: function Player({
       video,
@@ -76,9 +78,9 @@ vi.mock("./PlayerModal", async () => {
 });
 
 import Feed from "./Feed";
-import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { patchCachedProgress } from "../lib/progressCache";
+import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { patchCachedProgress } from "../../lib/progressCache";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/Feed.reset.dom.test.tsx b/frontend/src/modules/feed/Feed.reset.dom.test.tsx
similarity index 95%
rename from frontend/src/components/Feed.reset.dom.test.tsx
rename to frontend/src/modules/feed/Feed.reset.dom.test.tsx
index cf3815f5..ad8f21d1 100644
--- a/frontend/src/components/Feed.reset.dom.test.tsx
+++ b/frontend/src/modules/feed/Feed.reset.dom.test.tsx
@@ -12,7 +12,9 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./wizardContext", () => ({ useWizard: () => ({ openWizard: vi.fn() }) }));
+vi.mock("../../features/wizard/wizardContext", () => ({
+  useWizard: () => ({ openWizard: vi.fn() }),
+}));
 vi.mock("./VirtualFeed", () => ({
   default: ({
     items,
@@ -33,9 +35,9 @@ vi.mock("./VirtualFeed", () => ({
 }));
 
 import Feed from "./Feed";
-import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { patchCachedProgress } from "../lib/progressCache";
+import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { patchCachedProgress } from "../../lib/progressCache";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/Feed.tsx b/frontend/src/modules/feed/Feed.tsx
similarity index 95%
rename from frontend/src/components/Feed.tsx
rename to frontend/src/modules/feed/Feed.tsx
index 709768fe..0c0ba019 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/modules/feed/Feed.tsx
@@ -6,8 +6,8 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
-import { nextPageOnClick } from "../lib/nextPage";
+import { qk } from "../../lib/queryKeys";
+import { nextPageOnClick } from "../../lib/nextPage";
 import {
   ArrowLeft,
   Columns2,
@@ -21,13 +21,13 @@ import {
   Trash2,
   type LucideIcon,
 } from "lucide-react";
-import { YouTubeIcon } from "../lib/brandIcons";
-import { api, HttpError, type FeedFilters, type Video, type VideoStatus } from "../lib/api";
-import i18n from "../i18n";
-import { notifyActionError } from "../lib/actionErrors";
-import { notify, resolveVideo } from "../lib/notifications";
-import { useDebounced } from "../lib/useDebounced";
-import { patchCachedProgress, progressFlushes } from "../lib/progressCache";
+import { YouTubeIcon } from "../../lib/brandIcons";
+import { api, HttpError, type FeedFilters, type Video, type VideoStatus } from "../../lib/api";
+import i18n from "../../i18n";
+import { notifyActionError } from "../../lib/actionErrors";
+import { notify, resolveVideo } from "../../lib/notifications";
+import { useDebounced } from "../../lib/useDebounced";
+import { patchCachedProgress, progressFlushes } from "../../lib/progressCache";
 import {
   buildSort,
   feedSortOptions,
@@ -36,32 +36,32 @@ import {
   sortYtResults,
   YT_SORT_KEYS,
   type SortKey,
-} from "../lib/feedSort";
-import { type SortOption, type SortState } from "../lib/columnSort";
-import { usePref } from "../lib/usePref";
+} from "../../lib/feedSort";
+import { type SortOption, type SortState } from "../../lib/columnSort";
+import { usePref } from "../../lib/usePref";
 import { SHOW_IDS } from "./feedFiltersInit";
-import { FEED_VIEWS, type FeedView } from "../lib/feedView";
-import { clearedFilters, useActiveFilters } from "../lib/useActiveFilters";
-import ActiveFilterChips from "./ActiveFilterChips";
-import SelectedViewChip from "./SelectedViewChip";
-import { Button } from "./ui/Button";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { PageToolbar } from "./ui/PageShell";
-import { PageMenu } from "./ui/PageMenu";
-import { menuGroups } from "./ui/menuGroups";
-import { choiceSubmenu, multiSubmenu, sortSubmenu } from "./ui/pageMenuItems";
-import { useWizard } from "./wizardContext";
-import SortControl from "./ui/SortControl";
-import FilterSelect from "./ui/FilterSelect";
-import ItemCount from "./ui/ItemCount";
-import { FilterFoldButton } from "./ui/FilterFold";
-import { useFilterFold } from "../lib/useFilterFold";
-import ViewSwitcher from "./ViewSwitcher";
+import { FEED_VIEWS, type FeedView } from "../../lib/feedView";
+import { clearedFilters, useActiveFilters } from "../../lib/useActiveFilters";
+import ActiveFilterChips from "../../features/filters/ActiveFilterChips";
+import SelectedViewChip from "../../features/filters/SelectedViewChip";
+import { Button } from "../../components/ui/Button";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { PageToolbar } from "../../components/ui/PageShell";
+import { PageMenu } from "../../components/ui/PageMenu";
+import { menuGroups } from "../../components/ui/menuGroups";
+import { choiceSubmenu, multiSubmenu, sortSubmenu } from "../../components/ui/pageMenuItems";
+import { useWizard } from "../../features/wizard/wizardContext";
+import SortControl from "../../components/ui/SortControl";
+import FilterSelect from "../../components/ui/FilterSelect";
+import ItemCount from "../../components/ui/ItemCount";
+import { FilterFoldButton } from "../../components/ui/FilterFold";
+import { useFilterFold } from "../../lib/useFilterFold";
+import ViewSwitcher from "../../components/ui/ViewSwitcher";
 import VirtualFeed from "./VirtualFeed";
-import SegmentedToggle from "./ui/SegmentedToggle";
-import { IconButton } from "./ui/IconButton";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
+import { IconButton } from "../../components/ui/IconButton";
 // Lazy: the in-app YouTube player (IFrame API) loads only when a video is first opened.
-const PlayerModal = lazy(() => import("./PlayerModal"));
+const PlayerModal = lazy(() => import("../../features/player/PlayerModal"));
 
 const PAGE = 60;
 
diff --git a/frontend/src/components/Feed.ytsort.dom.test.tsx b/frontend/src/modules/feed/Feed.ytsort.dom.test.tsx
similarity index 95%
rename from frontend/src/components/Feed.ytsort.dom.test.tsx
rename to frontend/src/modules/feed/Feed.ytsort.dom.test.tsx
index c0c51518..c44e7788 100644
--- a/frontend/src/components/Feed.ytsort.dom.test.tsx
+++ b/frontend/src/modules/feed/Feed.ytsort.dom.test.tsx
@@ -15,7 +15,9 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
-vi.mock("./wizardContext", () => ({ useWizard: () => ({ openWizard: vi.fn() }) }));
+vi.mock("../../features/wizard/wizardContext", () => ({
+  useWizard: () => ({ openWizard: vi.fn() }),
+}));
 vi.mock("./VirtualFeed", () => ({
   default: ({ items }: { items: { id: string; title: string }[] }) => (
     <ol aria-label="results">
@@ -27,8 +29,8 @@ vi.mock("./VirtualFeed", () => ({
 }));
 
 import Feed from "./Feed";
-import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, DEFAULT_TAG_MODES, type FeedFilters, type Video } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/FeedFiltersProvider.dom.test.ts b/frontend/src/modules/feed/FeedFiltersProvider.dom.test.ts
similarity index 96%
rename from frontend/src/components/FeedFiltersProvider.dom.test.ts
rename to frontend/src/modules/feed/FeedFiltersProvider.dom.test.ts
index 3112301f..18e9068c 100644
--- a/frontend/src/components/FeedFiltersProvider.dom.test.ts
+++ b/frontend/src/modules/feed/FeedFiltersProvider.dom.test.ts
@@ -5,7 +5,7 @@
 // the saved-view and URL paths do — so an upgrading user's topic any/all match isn't silently lost.
 import { describe, it, expect, beforeEach } from "vitest";
 import { loadAccountFilters } from "./feedFiltersInit";
-import { claimLocalData, LS } from "../lib/storage";
+import { claimLocalData, LS } from "../../lib/storage";
 
 beforeEach(() => {
   localStorage.clear();
diff --git a/frontend/src/components/FeedFiltersProvider.seed.dom.test.tsx b/frontend/src/modules/feed/FeedFiltersProvider.seed.dom.test.tsx
similarity index 88%
rename from frontend/src/components/FeedFiltersProvider.seed.dom.test.tsx
rename to frontend/src/modules/feed/FeedFiltersProvider.seed.dom.test.tsx
index 32477f4a..a29d29e1 100644
--- a/frontend/src/components/FeedFiltersProvider.seed.dom.test.tsx
+++ b/frontend/src/modules/feed/FeedFiltersProvider.seed.dom.test.tsx
@@ -5,12 +5,12 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { cleanup, render } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { NavigationProvider } from "./NavigationProvider";
+import { NavigationProvider } from "../../features/navigation/NavigationProvider";
 import { FeedFiltersProvider } from "./FeedFiltersProvider";
 import { useFeedFilters } from "./feedFiltersContext";
-import { qk } from "../lib/queryKeys";
-import type { Me } from "../lib/api";
-import { claimLocalData } from "../lib/storage";
+import { qk } from "../../lib/queryKeys";
+import type { Me } from "../../lib/api";
+import { claimLocalData } from "../../lib/storage";
 
 const scopes: string[] = [];
 function Probe() {
diff --git a/frontend/src/components/FeedFiltersProvider.tsx b/frontend/src/modules/feed/FeedFiltersProvider.tsx
similarity index 93%
rename from frontend/src/components/FeedFiltersProvider.tsx
rename to frontend/src/modules/feed/FeedFiltersProvider.tsx
index 26bdc399..a4a0a6c8 100644
--- a/frontend/src/components/FeedFiltersProvider.tsx
+++ b/frontend/src/modules/feed/FeedFiltersProvider.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
-import { type FeedFilters } from "../lib/api";
-import { filterParamUpdates, hasFilterParams, paramsToFilters } from "../lib/urlState";
-import { useUrlMirror } from "../lib/useUrlMirror";
-import { ownKey, writeJSON } from "../lib/storage";
-import { logFilterChange } from "../lib/filterLog";
-import { useNavigation } from "./navigationContext";
+import { type FeedFilters } from "../../lib/api";
+import { filterParamUpdates, hasFilterParams, paramsToFilters } from "../../lib/urlState";
+import { useUrlMirror } from "../../lib/useUrlMirror";
+import { ownKey, writeJSON } from "../../lib/storage";
+import { logFilterChange } from "../../lib/filterLog";
+import { useNavigation } from "../../features/navigation/navigationContext";
 import {
   FeedFiltersActionsContext,
   FeedFiltersStateContext,
diff --git a/frontend/src/components/Header.searchTip.dom.test.tsx b/frontend/src/modules/feed/FeedHeader.searchTip.dom.test.tsx
similarity index 57%
rename from frontend/src/components/Header.searchTip.dom.test.tsx
rename to frontend/src/modules/feed/FeedHeader.searchTip.dom.test.tsx
index 64def281..86d95344 100644
--- a/frontend/src/components/Header.searchTip.dom.test.tsx
+++ b/frontend/src/modules/feed/FeedHeader.searchTip.dom.test.tsx
@@ -5,34 +5,52 @@
 // website's own endpoint) spends none — so the owner avoided a free search for months.
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, screen, cleanup } from "@testing-library/react";
+import type { Me } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }),
 }));
-vi.mock("./navigationContext", () => ({ useNavigation: () => ({ page: "feed" }) }));
+let me = {} as Me;
+vi.mock("../../lib/useMe", () => ({ useMe: () => me }));
+vi.mock("../../features/navigation/navigationContext", () => ({
+  useNavigationActions: () => ({ enterYtSearch: vi.fn() }),
+}));
 vi.mock("./feedFiltersContext", () => ({
   useFeedFilters: () => ({ q: "cats", sort: "newest" }),
   useFeedFiltersActions: () => ({ setFilters: vi.fn() }),
 }));
-vi.mock("./playlistsContext", () => ({
-  usePlaylists: () => ({ search: "" }),
-  usePlaylistsActions: () => ({ setSearch: vi.fn() }),
+vi.mock("../channels", () => ({
+  useChannelsActions: () => ({ goToFullHistory: vi.fn() }),
+  SyncStatus: () => null,
 }));
-vi.mock("./channelsContext", () => ({
-  useChannels: () => ({ search: "" }),
-  useChannelsActions: () => ({ setSearch: vi.fn(), goToFullHistory: vi.fn() }),
+vi.mock("./FeedScopeToggle", () => ({ default: () => null }));
+vi.mock("../../components/ui/PageScroller", () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }));
-vi.mock("./SyncStatus", () => ({ default: () => null }));
 
-import Header from "./Header";
-import type { Me } from "../lib/api";
+import FeedHeader from "./FeedHeader";
+import PageShell from "../../components/ui/PageShell";
 
-afterEach(cleanup);
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
 
 function tipFor(source: Me["search_source"]): string | null {
-  const me = { plex_enabled: false, search_source: source } as Me;
-  render(<Header me={me} onYtSearch={() => {}} />);
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe() {}
+      disconnect() {}
+    },
+  );
+  me = { search_source: source, role: "user" } as Me;
+  render(
+    <PageShell header={<div />}>
+      <FeedHeader />
+    </PageShell>,
+  );
   return screen.getByRole("button", { name: /header\.searchYoutube$/ }).getAttribute("title");
 }
 
diff --git a/frontend/src/modules/feed/FeedHeader.tsx b/frontend/src/modules/feed/FeedHeader.tsx
new file mode 100644
index 00000000..3bfc7134
--- /dev/null
+++ b/frontend/src/modules/feed/FeedHeader.tsx
@@ -0,0 +1,51 @@
+import { useTranslation } from "react-i18next";
+import { YouTubeIcon } from "../../lib/brandIcons";
+import { useMe } from "../../lib/useMe";
+import { PageHeader } from "../../components/ui/PageShell";
+import SearchBar from "../../features/header/SearchBar";
+import { useNavigationActions } from "../../features/navigation/navigationContext";
+import { SyncStatus, useChannelsActions } from "../channels";
+import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
+import FeedScopeToggle from "./FeedScopeToggle";
+
+// The feed's pills in the floating header: the search box (whose Go runs a live YouTube search for
+// the term), the Mine/Library scope, and the per-user sync chip.
+export default function FeedHeader() {
+  const { t } = useTranslation();
+  const me = useMe();
+  const filters = useFeedFilters();
+  const { setFilters } = useFeedFiltersActions();
+  const { enterYtSearch } = useNavigationActions();
+  const { goToFullHistory } = useChannelsActions();
+  const trimmed = filters.q.trim();
+  return (
+    <PageHeader>
+      <SearchBar
+        value={filters.q}
+        placeholder={t("header.searchPlaceholder")}
+        onChange={(q) => {
+          // When a search first appears, rank the feed by relevance — set atomically with the
+          // query (race-free vs. per-keystroke updates). Only overrides the default "newest"
+          // sort; a custom sort the user chose is left alone. Cleared in Feed.
+          const startSearch = !filters.q.trim() && !!q.trim() && filters.sort === "newest";
+          setFilters({ ...filters, q, ...(startSearch ? { sort: "relevance" } : {}) });
+        }}
+        onGo={() => enterYtSearch(trimmed)}
+        goLabel={t("header.searchYoutube")}
+        goTitle={t(
+          me.search_source === "api" ? "header.searchYoutubeTipApi" : "header.searchYoutubeTip",
+        )}
+        goIcon={<YouTubeIcon className="w-4 h-4" />}
+        goDisabled={!trimmed}
+      />
+      {/* Mine/Library scope sits right of the search box — relocated here from the filter sidebar so
+          the primary "what am I browsing" control is always in reach (mirrors Plex's scope toggle). */}
+      <FeedScopeToggle />
+      {/* Per-user sync status — it used to cost the nav rail a whole block. It sits with the other
+          pills rather than pinned to the far right: on a wide window that just strands it. Only on
+          the two pages it says anything about: the feed those subscriptions fill, and the manager
+          where you curate them. */}
+      <SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={goToFullHistory} />
+    </PageHeader>
+  );
+}
diff --git a/frontend/src/components/modulePages.tsx b/frontend/src/modules/feed/FeedPage.tsx
similarity index 58%
rename from frontend/src/components/modulePages.tsx
rename to frontend/src/modules/feed/FeedPage.tsx
index 693809fe..fb1340f8 100644
--- a/frontend/src/components/modulePages.tsx
+++ b/frontend/src/modules/feed/FeedPage.tsx
@@ -1,19 +1,17 @@
-import { lazyWithPreload } from "../lib/lazyWithPreload";
-import { useMe } from "../lib/useMe";
+import { useMe } from "../../lib/useMe";
 import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
 import { useFeedView, useFeedViewActions } from "./feedViewContext";
-import { useNavigation, useNavigationActions } from "./navigationContext";
-import PersonalViewsModal from "./PersonalViewsModal";
-import { useSavedViews } from "./savedViewsContext";
+import { useNavigation, useNavigationActions } from "../../features/navigation/navigationContext";
+import PersonalViewsModal from "../../features/filters/PersonalViewsModal";
+import { SavedViewsScope } from "../../features/filters/savedViewsContext";
+import { useFeedSavedViews } from "./feedSavedViews";
+import FeedHeader from "./FeedHeader";
+import Feed from "./Feed";
 
-// The two module-registry pages that need per-render wiring (see moduleRegistry), split out of it so
-// that file exports only data and this one only components (Fast Refresh). Their lazy chunks are
-// exported alongside so the registry can attach each chunk's preload to the wrapper that renders it.
-export const Feed = lazyWithPreload(() => import("./Feed"));
-
-// The GLOBAL feed page: wires <Feed> to the app-wide feed filters / view / live-search. (The channel
+// The GLOBAL feed page: wires <Feed> to the app-wide feed filters / view / live-search, and fills the
+// header (the channel page's feed has no header). (The channel
 // page renders <Feed> itself with its own channel-scoped filters, so those two never share state.)
-export function FeedPage() {
+export default function FeedPage() {
   const me = useMe();
   const filters = useFeedFilters();
   const { setFilters } = useFeedFiltersActions();
@@ -24,9 +22,11 @@ export function FeedPage() {
   // The Personal Views modal lives at the feed-page level (always mounted while on the feed, unmounts
   // on navigation) rather than inside the collapsible filter rail — otherwise opening it from the
   // always-visible toolbar view chip while the rail is unpinned would render nothing and latch open.
-  const { modalOpen } = useSavedViews();
+  // The feed's saved views reach the shared views UI under this page (the chip, the modal) by the scope.
+  const savedViews = useFeedSavedViews();
   return (
-    <>
+    <SavedViewsScope value={savedViews}>
+      <FeedHeader />
       <Feed
         filters={filters}
         setFilters={setFilters}
@@ -37,7 +37,7 @@ export function FeedPage() {
         onYtSearch={enterYtSearch}
         onExitYtSearch={exitYtSearch}
       />
-      {modalOpen && <PersonalViewsModal />}
-    </>
+      {savedViews.modalOpen && <PersonalViewsModal />}
+    </SavedViewsScope>
   );
 }
diff --git a/frontend/src/components/SavedViewsProvider.dom.test.tsx b/frontend/src/modules/feed/FeedSavedViewsProvider.dom.test.tsx
similarity index 53%
rename from frontend/src/components/SavedViewsProvider.dom.test.tsx
rename to frontend/src/modules/feed/FeedSavedViewsProvider.dom.test.tsx
index 5bfe0a2b..24b7f4eb 100644
--- a/frontend/src/components/SavedViewsProvider.dom.test.tsx
+++ b/frontend/src/modules/feed/FeedSavedViewsProvider.dom.test.tsx
@@ -1,52 +1,55 @@
 // @vitest-environment jsdom
 //
-// The single default-application path. On the saved-views query's FIRST resolve, SavedViewsProvider
-// seeds the starred default view's filters into a genuinely fresh module (no stored filters), for BOTH
-// the feed and Plex — but leaves them alone once the account has its own stored filters. This is the
-// fix for the old feed-only LS mirror that raced FeedFiltersProvider's login effect and never applied a
-// Plex default at all. The sub-providers are mocked so we can assert exactly which setFilters is called;
-// api.savedViews is stubbed and driven through a real QueryClient.
+// The feed's saved views. The single default-application path: on the views query's FIRST resolve, the
+// starred default view's filters seed a genuinely fresh feed (no stored filters, no URL filter override)
+// — and are left alone once the account has its own stored filters. This is the fix for the old
+// feed-only LS mirror that raced FeedFiltersProvider's login effect. And the store is the feed's own: a
+// visit to another page leaves its active view where it was. The feed filters are mocked so we can
+// assert exactly which setFilters is called; api.savedViews is stubbed and driven through a real
+// QueryClient.
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, waitFor, cleanup, act } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+const BASE = {
+  tags: [],
+  channelIds: [],
+  tagModes: { language: "or", topic: "or", other: "or" },
+  q: "",
+  sort: "newest",
+  scope: "my",
+  includeNormal: true,
+  includeShorts: false,
+  includeLive: false,
+  show: "unwatched",
+};
 
 const h = vi.hoisted(() => ({
-  page: "feed" as "feed" | "plex",
+  page: "feed" as string,
+  filters: {} as Record<string, unknown>,
   setFeedFilters: vi.fn(),
-  setPlexFilters: vi.fn(),
 }));
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
   return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
 });
-vi.mock("./navigationContext", () => ({ useNavigation: () => ({ page: h.page }) }));
+vi.mock("../../features/navigation/navigationContext", () => ({
+  useNavigation: () => ({ page: h.page }),
+}));
 vi.mock("./feedFiltersContext", () => ({
-  useFeedFilters: () => ({
-    tags: [],
-    channelIds: [],
-    tagModes: { language: "or", topic: "or", other: "or" },
-    q: "",
-    sort: "newest",
-    scope: "my",
-    includeNormal: true,
-    includeShorts: false,
-    includeLive: false,
-    show: "unwatched",
-  }),
+  useFeedFilters: () => h.filters,
   useFeedFiltersActions: () => ({ setFilters: h.setFeedFilters }),
 }));
-vi.mock("./plexContext", () => ({
-  usePlex: () => ({ filters: {} }),
-  usePlexActions: () => ({ setFilters: h.setPlexFilters }),
-}));
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
 
-import { SavedViewsProvider } from "./SavedViewsProvider";
-import { useSavedViews } from "./savedViewsContext";
-import { api, type SavedView } from "../lib/api";
-import { claimLocalData, LS } from "../lib/storage";
-import { qk } from "../lib/queryKeys";
+import { FeedSavedViewsProvider } from "./FeedSavedViewsProvider";
+import { useFeedSavedViews } from "./feedSavedViews";
+import { api, type SavedView } from "../../lib/api";
+import { claimLocalData, LS } from "../../lib/storage";
+import { qk } from "../../lib/queryKeys";
+import type { SavedViewsContext } from "../../features/filters/savedViewsContext";
 
 const ID = 7;
 const view = (over: Partial<SavedView>): SavedView => ({
@@ -58,11 +61,17 @@ const view = (over: Partial<SavedView>): SavedView => ({
   ...over,
 });
 
+// The store as the last commit left it, for the cases that drive it directly.
+let latest: SavedViewsContext | null = null;
+const keep = (store: SavedViewsContext) => {
+  latest = store;
+};
 function Probe() {
-  const { loading, views } = useSavedViews();
+  const store = useFeedSavedViews();
+  useEffect(() => keep(store));
   return (
-    <div data-testid="loading" data-count={views.length}>
-      {String(loading)}
+    <div data-testid="loading" data-count={store.views.length}>
+      {String(store.loading)}
     </div>
   );
 }
@@ -74,41 +83,46 @@ function signedInClient() {
   return qc;
 }
 
+function tree(qc: QueryClient) {
+  return (
+    <QueryClientProvider client={qc}>
+      <FeedSavedViewsProvider>
+        <Probe />
+      </FeedSavedViewsProvider>
+    </QueryClientProvider>
+  );
+}
+
 async function mountResolved(views: SavedView[]) {
   // Fresh array + object copies per call, like a real fetch — so a refetch changes viewsQuery.data's
-  // identity and re-runs the seed effect (which is what makes the per-source guard actually load-bearing
+  // identity and re-runs the seed effect (which is what makes the one-shot guard actually load-bearing
   // in the re-seed test; a shared reference would skip the effect and hide a missing guard).
   vi.spyOn(api, "savedViews").mockImplementation(async () => views.map((v) => ({ ...v })));
   const qc = signedInClient();
-  render(
-    <QueryClientProvider client={qc}>
-      <SavedViewsProvider>
-        <Probe />
-      </SavedViewsProvider>
-    </QueryClientProvider>,
-  );
+  const r = render(tree(qc));
   // Wait for the query to resolve so the first-resolve effect has run.
   await waitFor(() => expect(screen.getByTestId("loading").textContent).toBe("false"));
-  return qc;
+  return { qc, rerender: () => r.rerender(tree(qc)) };
 }
 
 beforeEach(() => {
   localStorage.clear();
   claimLocalData(ID);
-  // Reset the URL: feedCanSeedDefault reads window.location.search, and a stale ?sort= from a prior
-  // case would suppress seeding in the others.
+  // Reset the URL: the seed check reads window.location.search, and a stale ?sort= from a prior case
+  // would suppress seeding in the others.
   window.history.replaceState({}, "", "/");
   h.page = "feed";
+  h.filters = { ...BASE };
   h.setFeedFilters.mockClear();
-  h.setPlexFilters.mockClear();
+  latest = null;
 });
 afterEach(() => {
   cleanup();
   vi.restoreAllMocks();
 });
 
-describe("SavedViewsProvider — default-view seeding on first resolve", () => {
-  it("feed: seeds the starred default into a fresh module (no stored filters)", async () => {
+describe("the feed's saved views — default-view seeding on first resolve", () => {
+  it("seeds the starred default into a fresh feed (no stored filters)", async () => {
     await mountResolved([
       view({ id: 2, is_default: true, filters: { scope: "all", show: "watched" } }),
     ]);
@@ -116,20 +130,20 @@ describe("SavedViewsProvider — default-view seeding on first resolve", () => {
     expect(h.setFeedFilters.mock.calls[0]![0]).toMatchObject({ scope: "all", show: "watched" });
   });
 
-  it("feed: does NOT seed when the account already has stored filters", async () => {
+  it("does NOT seed when the account already has stored filters", async () => {
     localStorage.setItem(LS.filters, JSON.stringify({ scope: "my" }));
     await mountResolved([view({ id: 2, is_default: true, filters: { scope: "all" } })]);
     expect(h.setFeedFilters).not.toHaveBeenCalled();
   });
 
-  it("feed: does NOT seed when no view is starred as default", async () => {
+  it("does NOT seed when no view is starred as default", async () => {
     await mountResolved([view({ id: 2, is_default: false, filters: { scope: "all" } })]);
     expect(h.setFeedFilters).not.toHaveBeenCalled();
   });
 
-  it("feed: does NOT seed when the URL carries filter params (a shared/bookmarked view wins)", async () => {
+  it("does NOT seed when the feed's URL carries filter params (a shared/bookmarked view wins)", async () => {
     // A link like ?sort=oldest is an explicit filter the user arrived on; the starred default must not
-    // stomp it. feedCanSeedDefault() bails on hasFilterParams — plex ignores the URL, so this is feed-only.
+    // stomp it.
     window.history.replaceState({}, "", "/?sort=oldest");
     await mountResolved([
       view({ id: 2, is_default: true, filters: { scope: "all", show: "watched" } }),
@@ -137,7 +151,16 @@ describe("SavedViewsProvider — default-view seeding on first resolve", () => {
     expect(h.setFeedFilters).not.toHaveBeenCalled();
   });
 
-  it("does NOT re-seed on a background refetch that returns a changed list (per-source one-shot guard)", async () => {
+  it("seeds when another page's URL carries those params: they are that page's, not a feed link", async () => {
+    // Booting onto Plex with its ?sort= used to hold the feed's default back: the feed's views were
+    // only asked for once you left Plex, by when the URL was the feed's own.
+    h.page = "plex";
+    window.history.replaceState({}, "", "/?page=plex&sort=oldest");
+    await mountResolved([view({ id: 2, is_default: true, filters: { scope: "all" } })]);
+    expect(h.setFeedFilters).toHaveBeenCalledTimes(1);
+  });
+
+  it("does NOT re-seed on a background refetch that returns a changed list (one-shot guard)", async () => {
     // The 60s refetch re-resolves the query; when it returns a CHANGED list (e.g. the user just added a
     // view elsewhere) react-query hands down a new reference and the seed effect re-runs. seededRef must
     // stop it re-applying the default over filters the user has since edited. (An identical refetch is
@@ -149,13 +172,7 @@ describe("SavedViewsProvider — default-view seeding on first resolve", () => {
       return calls === 1 ? [def] : [def, view({ id: 9, name: "added-later" })];
     });
     const qc = signedInClient();
-    render(
-      <QueryClientProvider client={qc}>
-        <SavedViewsProvider>
-          <Probe />
-        </SavedViewsProvider>
-      </QueryClientProvider>,
-    );
+    render(tree(qc));
     await waitFor(() => expect(screen.getByTestId("loading").textContent).toBe("false"));
     expect(h.setFeedFilters).toHaveBeenCalledTimes(1);
     await act(async () => {
@@ -166,34 +183,42 @@ describe("SavedViewsProvider — default-view seeding on first resolve", () => {
     await waitFor(() => expect(screen.getByTestId("loading").dataset.count).toBe("2"));
     expect(h.setFeedFilters).toHaveBeenCalledTimes(1);
   });
+});
 
-  it("plex: seeds the starred default into a fresh module (parity with the feed)", async () => {
+describe("the feed's saved views — a visit to another page", () => {
+  it("keeps the view you applied, edited since, when you come back from Plex", async () => {
+    const { rerender } = await mountResolved([view({ id: 4, name: "mine", filters: { ...BASE } })]);
+    act(() => latest!.apply(latest!.views[0]!));
+    h.filters = { ...BASE, show: "all" }; // an edit since: the view is now shown as changed
+    rerender();
+    expect(latest!.displayView?.id).toBe(4);
+    expect(latest!.isDirty).toBe(true);
     h.page = "plex";
-    await mountResolved([view({ id: 3, is_default: true, filters: { genres: ["Action"] } })]);
-    expect(h.setPlexFilters).toHaveBeenCalledTimes(1);
-    expect(h.setPlexFilters.mock.calls[0]![0]).toMatchObject({ genres: ["Action"] });
+    rerender();
+    h.page = "feed";
+    rerender();
+    expect(latest!.displayView?.id).toBe(4);
+    expect(latest!.isDirty).toBe(true);
   });
 
-  it("plex: does NOT seed when plex filters are already stored", async () => {
-    h.page = "plex";
-    localStorage.setItem(LS.plexFilters, JSON.stringify({ genres: ["Comedy"] }));
-    await mountResolved([view({ id: 3, is_default: true, filters: { genres: ["Action"] } })]);
-    expect(h.setPlexFilters).not.toHaveBeenCalled();
+  it("closes its manage modal when you leave the feed, so it does not reopen on the way back", async () => {
+    const { rerender } = await mountResolved([]);
+    act(() => latest!.openModal());
+    expect(latest!.modalOpen).toBe(true);
+    h.page = "home";
+    rerender();
+    h.page = "feed";
+    rerender();
+    expect(latest!.modalOpen).toBe(false);
   });
 });
 
-describe("SavedViewsProvider — signed-out tab", () => {
+describe("the feed's saved views — signed-out tab", () => {
   it("does NOT ask for saved views while no account is signed in (the landing logged a 401)", async () => {
     const spy = vi.spyOn(api, "savedViews").mockResolvedValue([]);
     const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
     qc.setQueryData(qk.me(), null); // BootGate's "nobody"
-    render(
-      <QueryClientProvider client={qc}>
-        <SavedViewsProvider>
-          <Probe />
-        </SavedViewsProvider>
-      </QueryClientProvider>,
-    );
+    render(tree(qc));
     // Let any fetch the mount would start get going before asserting it never happened.
     await act(async () => {
       await new Promise((r) => setTimeout(r, 20));
diff --git a/frontend/src/modules/feed/FeedSavedViewsProvider.tsx b/frontend/src/modules/feed/FeedSavedViewsProvider.tsx
new file mode 100644
index 00000000..e3588810
--- /dev/null
+++ b/frontend/src/modules/feed/FeedSavedViewsProvider.tsx
@@ -0,0 +1,49 @@
+import { useMemo, type ReactNode } from "react";
+import type { FeedFilters } from "../../lib/api";
+import { filtersToParams, hasFilterParams } from "../../lib/urlState";
+import { LS } from "../../lib/storage";
+import { useNavigation } from "../../features/navigation/navigationContext";
+import { asFilters } from "../../features/filters/savedViewsContext";
+import {
+  storedFiltersPresent,
+  useSavedViewsStore,
+  type SavedViewsConfig,
+} from "../../features/filters/useSavedViewsStore";
+import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
+import { FeedSavedViewsContextProvider } from "./feedSavedViews";
+
+const keyOf = (f: Record<string, unknown>) =>
+  filtersToParams(asFilters(f as unknown as FeedFilters)).toString();
+
+// The feed's saved views, over the feed's live filters (useSavedViewsStore holds the logic).
+export function FeedSavedViewsProvider({ children }: { children: ReactNode }) {
+  const { page } = useNavigation();
+  const filters = useFeedFilters();
+  const { setFilters } = useFeedFiltersActions();
+  const onScreen = page === "feed";
+  const cfg: SavedViewsConfig = useMemo(
+    () => ({
+      source: "feed",
+      filters: filters as unknown as Record<string, unknown>,
+      setFilters: (f) => setFilters(f as unknown as FeedFilters),
+      keyOf,
+      asFilters: (raw) =>
+        asFilters(raw as unknown as FeedFilters) as unknown as Record<string, unknown>,
+      // Strip the transient shuffle seed so a saved "shuffle" view re-rolls fresh on apply.
+      stripForSave: (f) => {
+        const { seed: _seed, ...rest } = f;
+        return rest;
+      },
+      // The feed also yields to a URL that carries filter params (a shared/bookmarked view) — which
+      // only the feed's own page can carry: on any other page those params are that page's.
+      canSeedDefault: () =>
+        !(onScreen && hasFilterParams(new URLSearchParams(window.location.search))) &&
+        !storedFiltersPresent(LS.filters),
+      enabled: true,
+      onScreen,
+    }),
+    [filters, setFilters, onScreen],
+  );
+  const value = useSavedViewsStore(cfg);
+  return <FeedSavedViewsContextProvider value={value}>{children}</FeedSavedViewsContextProvider>;
+}
diff --git a/frontend/src/components/FeedScopeToggle.tsx b/frontend/src/modules/feed/FeedScopeToggle.tsx
similarity index 95%
rename from frontend/src/components/FeedScopeToggle.tsx
rename to frontend/src/modules/feed/FeedScopeToggle.tsx
index 9b2b3de3..055945e6 100644
--- a/frontend/src/components/FeedScopeToggle.tsx
+++ b/frontend/src/modules/feed/FeedScopeToggle.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { Library, User } from "lucide-react";
-import SegmentedToggle from "./ui/SegmentedToggle";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
 import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
 
 // The feed's Mine/Library scope, relocated from the filter sidebar to sit just right of the header
diff --git a/frontend/src/modules/feed/FeedStore.tsx b/frontend/src/modules/feed/FeedStore.tsx
new file mode 100644
index 00000000..419c4525
--- /dev/null
+++ b/frontend/src/modules/feed/FeedStore.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { FeedFiltersProvider } from "./FeedFiltersProvider";
+import { FeedViewProvider } from "./FeedViewProvider";
+import { FeedSavedViewsProvider } from "./FeedSavedViewsProvider";
+
+// The feed module's store, mounted at the root (features/navigation/ModuleStores): its filters, its view
+// (the card or row layout) and its saved views over those filters.
+export function FeedStore({ children }: { children: ReactNode }) {
+  return (
+    <FeedFiltersProvider>
+      <FeedViewProvider>
+        <FeedSavedViewsProvider>{children}</FeedSavedViewsProvider>
+      </FeedViewProvider>
+    </FeedFiltersProvider>
+  );
+}
diff --git a/frontend/src/components/FeedViewProvider.tsx b/frontend/src/modules/feed/FeedViewProvider.tsx
similarity index 90%
rename from frontend/src/components/FeedViewProvider.tsx
rename to frontend/src/modules/feed/FeedViewProvider.tsx
index 2c864c76..29247789 100644
--- a/frontend/src/components/FeedViewProvider.tsx
+++ b/frontend/src/modules/feed/FeedViewProvider.tsx
@@ -1,7 +1,7 @@
 import { useMemo, type ReactNode } from "react";
-import { parseFeedView, type FeedView } from "../lib/feedView";
-import { LS } from "../lib/storage";
-import { usePref } from "../lib/usePref";
+import { parseFeedView, type FeedView } from "../../lib/feedView";
+import { LS } from "../../lib/storage";
+import { usePref } from "../../lib/usePref";
 import {
   FeedViewActionsContext,
   FeedViewStateContext,
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/modules/feed/Sidebar.tsx
similarity index 76%
rename from frontend/src/components/Sidebar.tsx
rename to frontend/src/modules/feed/Sidebar.tsx
index 007b6a51..0adaf30a 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/modules/feed/Sidebar.tsx
@@ -1,28 +1,30 @@
 import { type ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { SlidersHorizontal } from "lucide-react";
-import { api, NO_TAG_SENTINEL, type FeedFilters, type Tag, type TagCategory } from "../lib/api";
-import { defaultLayout, type PanelLayout } from "../lib/panelLayout";
-import { useDebounced } from "../lib/useDebounced";
-import { useActiveFilters } from "../lib/useActiveFilters";
-import TagManager from "./TagManager";
-import SavedViewsPopover from "./SavedViewsPopover";
-import { useSavedViews } from "./savedViewsContext";
-import FilterRail from "./FilterRail";
-import { type PanelItem } from "./ui/PanelGroups";
-import { type MediaSourceKind } from "../lib/mediaSource";
+import { api, NO_TAG_SENTINEL, type FeedFilters, type Tag, type TagCategory } from "../../lib/api";
+import { defaultLayout } from "../../lib/panelLayout";
+import { useDebounced } from "../../lib/useDebounced";
+import { useActiveFilters } from "../../lib/useActiveFilters";
+import TagManager from "../../features/channel/TagManager";
+import SavedViewsPopover from "../../features/filters/SavedViewsPopover";
+import { SavedViewsScope } from "../../features/filters/savedViewsContext";
+import { useFeedSavedViews } from "./feedSavedViews";
+import FilterRail from "../../components/ui/FilterRail";
+import { type PanelItem } from "../../components/ui/PanelGroups";
+import { type MediaSourceKind } from "../../lib/mediaSource";
 import ChannelPicker from "./ChannelPicker";
 import { facetOption } from "./facetOption";
 import DateFilterSelect from "./DateFilterSelect";
 import YearFilter from "./YearFilter";
-import Combobox from "./ui/Combobox";
-import MatchToggle from "./ui/MatchToggle";
+import Combobox from "../../components/ui/Combobox";
+import MatchToggle from "../../components/ui/MatchToggle";
 import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
-import { useChannelsActions } from "./channelsContext";
-import { useTags } from "../lib/useTags";
-import { compareText } from "../lib/collate";
+import { useChannelsActions } from "../channels";
+import { useTags } from "../../lib/useTags";
+import { compareText } from "../../lib/collate";
+import { useRail } from "../../lib/useRail";
 
 // Filter ids; display labels resolved at render time via t("sidebar.sort.<id>") etc.
 const DATE_PRESETS: { days: number; key: string }[] = [
@@ -37,20 +39,13 @@ const DATE_PRESETS: { days: number; key: string }[] = [
   { days: 1825, key: "5years" },
 ];
 
-export default function Sidebar({
-  layout,
-  setLayout,
-  collapsed,
-  onToggleCollapse,
-}: {
-  layout: PanelLayout;
-  setLayout: (l: PanelLayout) => void;
-  collapsed: boolean;
-  onToggleCollapse: () => void;
-}) {
+export default function Sidebar() {
+  // Its layout and collapse flag are its own (lib/useRail), so the shell only places it.
+  const { layout, setLayout, onResetLayout, collapsed, onToggleCollapse } = useRail("feed");
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
-  const { openModal } = useSavedViews();
+  // The feed's saved views, handed to the shared views UI in this rail through the scope below.
+  const savedViews = useFeedSavedViews();
   const filters = useFeedFilters();
   const { setFilters } = useFeedFiltersActions();
   // "Focus this channel in the manager" (from the tag manager here) lives in ChannelsProvider.
@@ -88,8 +83,8 @@ export default function Sidebar({
   const topics = tags.filter((t) => t.category === "topic");
   const userTags = tags.filter((t) => !t.system);
   const [tagManagerOpen, setTagManagerOpen] = useState(false);
-  // This rail's media source (the feed). Names the abstraction the feed and Plex rails share; drives
-  // the panel layout key. `FilterRail` owns the customize `editing` state now.
+  // This rail's media source (the feed). Names the abstraction the feed and Plex rails share; picks
+  // the default group order below. `FilterRail` owns the customize `editing` state.
   const source: MediaSourceKind = "feed";
 
   // The language/topic/tags sections all write into the one `filters.tags` list, so each combobox owns
@@ -230,31 +225,33 @@ export default function Sidebar({
     }));
 
   return (
-    <FilterRail
-      kind={source}
-      title={t("sidebar.filters")}
-      icon={<SlidersHorizontal className="w-4 h-4" />}
-      count={activeCount}
-      collapsed={collapsed}
-      onToggleCollapse={onToggleCollapse}
-      layout={layout}
-      setLayout={setLayout}
-      items={items}
-      // The feed widgets are simple label + control rows, not collapsible islands.
-      collapsible={false}
-      // Saved ("personal") views: the header icon opens a quick-pick popover, the title opens the
-      // full manager modal. Feed rail only.
-      iconExpanded={
-        source === "feed" ? (
-          <SavedViewsPopover trigger={<SlidersHorizontal className="w-4 h-4" />} />
-        ) : undefined
-      }
-      onTitleClick={source === "feed" ? openModal : undefined}
-      titleActionLabel={source === "feed" ? t("views.manageTitle") : undefined}
-    >
-      {tagManagerOpen && (
-        <TagManager onClose={() => setTagManagerOpen(false)} onFocusChannel={onFocusChannel} />
-      )}
-    </FilterRail>
+    <SavedViewsScope value={savedViews}>
+      <FilterRail
+        onResetLayout={onResetLayout}
+        title={t("sidebar.filters")}
+        icon={<SlidersHorizontal className="w-4 h-4" />}
+        count={activeCount}
+        collapsed={collapsed}
+        onToggleCollapse={onToggleCollapse}
+        layout={layout}
+        setLayout={setLayout}
+        items={items}
+        // The feed widgets are simple label + control rows, not collapsible islands.
+        collapsible={false}
+        // Saved ("personal") views: the header icon opens a quick-pick popover, the title opens the
+        // full manager modal. Feed rail only.
+        iconExpanded={
+          source === "feed" ? (
+            <SavedViewsPopover trigger={<SlidersHorizontal className="w-4 h-4" />} />
+          ) : undefined
+        }
+        onTitleClick={source === "feed" ? savedViews.openModal : undefined}
+        titleActionLabel={source === "feed" ? t("views.manageTitle") : undefined}
+      >
+        {tagManagerOpen && (
+          <TagManager onClose={() => setTagManagerOpen(false)} onFocusChannel={onFocusChannel} />
+        )}
+      </FilterRail>
+    </SavedViewsScope>
   );
 }
diff --git a/frontend/src/components/VideoMenu.dom.test.tsx b/frontend/src/modules/feed/VideoMenu.dom.test.tsx
similarity index 94%
rename from frontend/src/components/VideoMenu.dom.test.tsx
rename to frontend/src/modules/feed/VideoMenu.dom.test.tsx
index 75c2c62f..99dd2ac8 100644
--- a/frontend/src/components/VideoMenu.dom.test.tsx
+++ b/frontend/src/modules/feed/VideoMenu.dom.test.tsx
@@ -8,7 +8,7 @@ import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { FloatingTree } from "@floating-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import type { Video } from "../lib/api";
+import type { Video } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -17,8 +17,8 @@ vi.mock("react-i18next", async (importOriginal) => {
     useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
   };
 });
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
@@ -30,11 +30,11 @@ vi.mock("../lib/api", async (importOriginal) => {
   };
 });
 const copyText = vi.fn((_: string) => Promise.resolve(true));
-vi.mock("../lib/clipboard", () => ({ copyText: (s: string) => copyText(s) }));
+vi.mock("../../lib/clipboard", () => ({ copyText: (s: string) => copyText(s) }));
 
 import { VideoMenu } from "./VideoMenu";
-import { MoreButton } from "./ui/MoreButton";
-import { useContextMenu } from "./ui/useContextMenu";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { useContextMenu } from "../../components/ui/useContextMenu";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/VideoMenu.tsx b/frontend/src/modules/feed/VideoMenu.tsx
similarity index 72%
rename from frontend/src/components/VideoMenu.tsx
rename to frontend/src/modules/feed/VideoMenu.tsx
index 1c9a5877..f72a9c65 100644
--- a/frontend/src/components/VideoMenu.tsx
+++ b/frontend/src/modules/feed/VideoMenu.tsx
@@ -1,8 +1,8 @@
 import { useTranslation } from "react-i18next";
-import { type Video } from "../lib/api";
-import { ContextMenu } from "./ui/ContextMenu";
-import { type ContextMenuController } from "./ui/useContextMenu";
-import { useVideoActions, type VideoActionHandlers } from "./useVideoActions";
+import { type Video } from "../../lib/api";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { type ContextMenuController } from "../../components/ui/useContextMenu";
+import { useVideoActions, type VideoActionHandlers } from "../../features/video/useVideoActions";
 
 /** A video list's one menu (the feed grid and a channel page): every trigger — right-click,
  *  long-press, Shift+F10 and each card's "…" — opens it with the video's whole action list. Render
diff --git a/frontend/src/components/VirtualFeed.tsx b/frontend/src/modules/feed/VirtualFeed.tsx
similarity index 89%
rename from frontend/src/components/VirtualFeed.tsx
rename to frontend/src/modules/feed/VirtualFeed.tsx
index 7a864913..1c5fe0c3 100644
--- a/frontend/src/components/VirtualFeed.tsx
+++ b/frontend/src/modules/feed/VirtualFeed.tsx
@@ -1,11 +1,11 @@
-import type { Video, VideoStatus } from "../lib/api";
-import { FEED_VIEW_SPEC, type FeedView } from "../lib/feedView";
-import type { NEXT_PAGE } from "../lib/nextPage";
-import VideoCard from "./VideoCard";
+import type { Video, VideoStatus } from "../../lib/api";
+import { FEED_VIEW_SPEC, type FeedView } from "../../lib/feedView";
+import type { NEXT_PAGE } from "../../lib/nextPage";
+import VideoCard from "../../features/video/VideoCard";
 import { VideoMenu } from "./VideoMenu";
-import type { VideoActionHandlers } from "./useVideoActions";
-import { useContextMenu } from "./ui/useContextMenu";
-import VirtualGrid from "./ui/VirtualGrid";
+import type { VideoActionHandlers } from "../../features/video/useVideoActions";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import VirtualGrid from "../../components/ui/VirtualGrid";
 
 // Estimated row heights before measurement; real heights are measured per-row so these only affect
 // the very first paint and the scrollbar's initial guess. Taken from measuring each mode in the
diff --git a/frontend/src/components/YearFilter.tsx b/frontend/src/modules/feed/YearFilter.tsx
similarity index 92%
rename from frontend/src/components/YearFilter.tsx
rename to frontend/src/modules/feed/YearFilter.tsx
index e2344063..555662da 100644
--- a/frontend/src/components/YearFilter.tsx
+++ b/frontend/src/modules/feed/YearFilter.tsx
@@ -2,16 +2,16 @@ import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { ChevronDown } from "lucide-react";
-import { MenuCheck } from "./ui/MenuCheck";
-import { qk } from "../lib/queryKeys";
-import { api, type FeedFilters, type YearCount } from "../lib/api";
-import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { Chip } from "./ui/Chip";
-import { Button } from "./ui/Button";
-import CountBadge from "./ui/CountBadge";
-import { useDebounced } from "../lib/useDebounced";
-import { SURFACE } from "./ui/surfaces";
+import { MenuCheck } from "../../components/ui/MenuCheck";
+import { qk } from "../../lib/queryKeys";
+import { api, type FeedFilters, type YearCount } from "../../lib/api";
+import { PopoverItem, PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { Chip } from "../../components/ui/Chip";
+import { Button } from "../../components/ui/Button";
+import CountBadge from "../../components/ui/CountBadge";
+import { useDebounced } from "../../lib/useDebounced";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // The feed rail's "Year" control: quick chips for the most recent years plus a
 // "More…" popover listing ALL years with per-year counts, sortable by year or count. Selecting a year
diff --git a/frontend/src/components/channelChipNames.dom.test.tsx b/frontend/src/modules/feed/channelChipNames.dom.test.tsx
similarity index 94%
rename from frontend/src/components/channelChipNames.dom.test.tsx
rename to frontend/src/modules/feed/channelChipNames.dom.test.tsx
index edec7852..7dd97ff1 100644
--- a/frontend/src/components/channelChipNames.dom.test.tsx
+++ b/frontend/src/modules/feed/channelChipNames.dom.test.tsx
@@ -7,10 +7,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, render, renderHook, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createElement, type ReactNode } from "react";
-import { api, type FeedFilters, type ManagedChannel } from "../lib/api";
-import { claimLocalData, LS } from "../lib/storage";
-import { clearedFilters, useActiveFilters } from "../lib/useActiveFilters";
-import ActiveFilterChips from "./ActiveFilterChips";
+import { api, type FeedFilters, type ManagedChannel } from "../../lib/api";
+import { claimLocalData, LS } from "../../lib/storage";
+import { clearedFilters, useActiveFilters } from "../../lib/useActiveFilters";
+import ActiveFilterChips from "../../features/filters/ActiveFilterChips";
 import ChannelPicker from "./ChannelPicker";
 
 vi.mock("react-i18next", async (importOriginal) => {
diff --git a/frontend/src/components/facetOption.test.ts b/frontend/src/modules/feed/facetOption.test.ts
similarity index 94%
rename from frontend/src/components/facetOption.test.ts
rename to frontend/src/modules/feed/facetOption.test.ts
index 4090730f..16a3a7a4 100644
--- a/frontend/src/components/facetOption.test.ts
+++ b/frontend/src/modules/feed/facetOption.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import type { Tag } from "../lib/api";
+import type { Tag } from "../../lib/api";
 import { facetOption } from "./facetOption";
 
 const music = { id: 7, name: "Music", category: "topic", channel_count: 238 } as Tag;
diff --git a/frontend/src/components/facetOption.ts b/frontend/src/modules/feed/facetOption.ts
similarity index 82%
rename from frontend/src/components/facetOption.ts
rename to frontend/src/modules/feed/facetOption.ts
index ec2586c7..91c8480b 100644
--- a/frontend/src/components/facetOption.ts
+++ b/frontend/src/modules/feed/facetOption.ts
@@ -1,5 +1,5 @@
-import type { Tag } from "../lib/api";
-import type { ComboboxOption } from "./ui/Combobox";
+import type { Tag } from "../../lib/api";
+import type { ComboboxOption } from "../../components/ui/Combobox";
 
 // A tag as a filter row: its count is the CURRENT filter's (the summary's facets), or none at all while
 // the facets load or after they failed. The rail printed the tag's whole-library count in that gap, as
diff --git a/frontend/src/components/feedFiltersContext.ts b/frontend/src/modules/feed/feedFiltersContext.ts
similarity index 95%
rename from frontend/src/components/feedFiltersContext.ts
rename to frontend/src/modules/feed/feedFiltersContext.ts
index fafc6bb7..942a5532 100644
--- a/frontend/src/components/feedFiltersContext.ts
+++ b/frontend/src/modules/feed/feedFiltersContext.ts
@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-import type { FeedFilters } from "../lib/api";
+import type { FeedFilters } from "../../lib/api";
 import { DEFAULT_FILTERS } from "./feedFiltersInit";
 
 // The feed-filter contexts + hooks, split out of FeedFiltersProvider so that file exports only
diff --git a/frontend/src/components/feedFiltersInit.ts b/frontend/src/modules/feed/feedFiltersInit.ts
similarity index 91%
rename from frontend/src/components/feedFiltersInit.ts
rename to frontend/src/modules/feed/feedFiltersInit.ts
index 7aa97198..c203c476 100644
--- a/frontend/src/components/feedFiltersInit.ts
+++ b/frontend/src/modules/feed/feedFiltersInit.ts
@@ -1,5 +1,5 @@
-import { coerceTagModes, coerceUntagged, DEFAULT_TAG_MODES, type FeedFilters } from "../lib/api";
-import { LS, ownKey, readJSON } from "../lib/storage";
+import { coerceTagModes, coerceUntagged, DEFAULT_TAG_MODES, type FeedFilters } from "../../lib/api";
+import { LS, ownKey, readJSON } from "../../lib/storage";
 
 // The feed filters' defaults and the per-account localStorage seed, split out of FeedFiltersProvider
 // (like navigationInit / playlistsInit) so that file exports only components (Fast Refresh).
@@ -29,7 +29,7 @@ export function loadAccountFilters(): FeedFilters {
   // Your last-applied filters win, so a reload keeps whatever view you're on (a saved view you
   // picked, or manual tweaks) — setFilters persists them under LS.filters on every change. A starred
   // default view seeds a fresh account that has never stored filters, but that is applied ONCE by
-  // SavedViewsProvider on its views query's first resolve (which then persists here like any edit) —
+  // FeedSavedViewsProvider on its views query's first resolve (which then persists here like any edit) —
   // not read from a mirror on this synchronous path, which used to race that resolve. So here we only
   // ever read the account's own stored filters, else fall back to DEFAULT_FILTERS.
   const fKey = ownKey(FILTERS_KEY);
diff --git a/frontend/src/modules/feed/feedSavedViews.ts b/frontend/src/modules/feed/feedSavedViews.ts
new file mode 100644
index 00000000..dea02a35
--- /dev/null
+++ b/frontend/src/modules/feed/feedSavedViews.ts
@@ -0,0 +1,7 @@
+import { createSavedViewsStore } from "../../features/filters/savedViewsContext";
+
+// The feed's saved views: filled by FeedSavedViewsProvider, read by the feed's page and rail (which hand
+// them to the shared views UI) and by the palette.
+const store = createSavedViewsStore("Feed");
+export const FeedSavedViewsContextProvider = store.Provider;
+export const useFeedSavedViews = store.useViews;
diff --git a/frontend/src/components/feedViewContext.ts b/frontend/src/modules/feed/feedViewContext.ts
similarity index 92%
rename from frontend/src/components/feedViewContext.ts
rename to frontend/src/modules/feed/feedViewContext.ts
index 5a934e38..d258d88c 100644
--- a/frontend/src/components/feedViewContext.ts
+++ b/frontend/src/modules/feed/feedViewContext.ts
@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-import type { FeedView } from "../lib/feedView";
+import type { FeedView } from "../../lib/feedView";
 
 // The feed view-mode contexts + hooks, split out of FeedViewProvider so that file exports only
 // components (Fast Refresh).
diff --git a/frontend/src/modules/feed/index.ts b/frontend/src/modules/feed/index.ts
new file mode 100644
index 00000000..567155c9
--- /dev/null
+++ b/frontend/src/modules/feed/index.ts
@@ -0,0 +1,6 @@
+// The feed's public face: its stores (filters, saved views), mounted at the root and read app-wide,
+// and the feed page's scroll key, which the shell's scroller restores by.
+export { useFeedSavedViews } from "./feedSavedViews";
+export { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
+export { useFeedScrollKey } from "./useFeedPageHooks";
+export { ChannelPage, feedModule } from "./module";
diff --git a/frontend/src/modules/feed/module.ts b/frontend/src/modules/feed/module.ts
new file mode 100644
index 00000000..51f7a162
--- /dev/null
+++ b/frontend/src/modules/feed/module.ts
@@ -0,0 +1,22 @@
+import { YouTubeIcon } from "../../lib/brandIcons";
+import { lazyWithPreload, lazyWithPreloadAlongside } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+import { FeedStore } from "./FeedStore";
+
+// The rail loads with the page (lazyWithPreloadAlongside), so it never arrives after it.
+const Rail = lazyWithPreload(() => import("./Sidebar"));
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page and rail load lazily.
+export const feedModule: ModuleDef = {
+  id: "feed",
+  labelKey: "header.account.feed",
+  railKey: "nav.rail.feed",
+  icon: YouTubeIcon,
+  Rail,
+  Page: lazyWithPreloadAlongside(() => import("./FeedPage"), Rail),
+  Store: FeedStore,
+};
+
+// The channel page: a feed scoped to one channel, opened over any page (App renders it in place of the
+// page). Lazy like a page, and preloaded with them.
+export const ChannelPage = lazyWithPreload(() => import("./ChannelPage"));
diff --git a/frontend/src/modules/feed/useFeedPageHooks.dom.test.tsx b/frontend/src/modules/feed/useFeedPageHooks.dom.test.tsx
new file mode 100644
index 00000000..294cba4e
--- /dev/null
+++ b/frontend/src/modules/feed/useFeedPageHooks.dom.test.tsx
@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+//
+// The feed's two page hooks the shell used to hand-build: the channel page's "Show in feed" (adds the
+// channel to the picked set and opens the feed) and the feed page's scroll key.
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+
+const h = vi.hoisted(() => ({
+  filters: { channelIds: [] as string[], q: "", show: "unwatched" } as Record<string, unknown>,
+  ytSearch: null as string | null,
+  setFilters: vi.fn(),
+  setPage: vi.fn(),
+}));
+
+vi.mock("../../features/navigation/navigationContext", () => ({
+  useNavigation: () => ({ ytSearch: h.ytSearch }),
+  useNavigationActions: () => ({ setPage: h.setPage }),
+}));
+vi.mock("./feedFiltersContext", () => ({
+  useFeedFilters: () => h.filters,
+  useFeedFiltersActions: () => ({ setFilters: h.setFilters }),
+}));
+
+import { useFeedScrollKey, useShowChannelInFeed } from "./useFeedPageHooks";
+
+beforeEach(() => {
+  h.filters = { channelIds: ["a"], q: "", show: "unwatched" };
+  h.ytSearch = null;
+  h.setFilters.mockClear();
+  h.setPage.mockClear();
+});
+
+describe("Show in feed", () => {
+  it("adds the channel to the picked ones, keeps the other filters, and opens the feed", () => {
+    renderHook(() => useShowChannelInFeed("b")).result.current();
+    expect(h.setFilters).toHaveBeenCalledWith({
+      channelIds: ["a", "b"],
+      q: "",
+      show: "unwatched",
+    });
+    expect(h.setPage).toHaveBeenCalledWith("feed");
+  });
+
+  it("changes nothing in the set for a channel already picked", () => {
+    renderHook(() => useShowChannelInFeed("a")).result.current();
+    expect(h.setFilters.mock.calls[0]![0]).toMatchObject({ channelIds: ["a"] });
+  });
+});
+
+describe("the feed's scroll key", () => {
+  it("follows the filters but not the search text", () => {
+    const first = renderHook(() => useFeedScrollKey()).result.current;
+    h.filters = { ...h.filters, q: "typing" };
+    expect(renderHook(() => useFeedScrollKey()).result.current).toBe(first);
+    h.filters = { ...h.filters, show: "all" };
+    expect(renderHook(() => useFeedScrollKey()).result.current).not.toBe(first);
+  });
+
+  it("is the live search's own while it is open", () => {
+    h.ytSearch = "cats";
+    expect(renderHook(() => useFeedScrollKey()).result.current).toBe("yt:cats");
+  });
+});
diff --git a/frontend/src/modules/feed/useFeedPageHooks.ts b/frontend/src/modules/feed/useFeedPageHooks.ts
new file mode 100644
index 00000000..8bed251f
--- /dev/null
+++ b/frontend/src/modules/feed/useFeedPageHooks.ts
@@ -0,0 +1,30 @@
+import { useNavigation, useNavigationActions } from "../../features/navigation/navigationContext";
+import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
+
+// "Show in feed" on a channel page: narrow the real feed to this channel and go there. The rest of
+// the feed's filters stay — the point is "this channel, the way I normally read": unwatched, my tags,
+// my date window. The channel is ADDED to the picked set, not swapped in: channels OR together, so
+// arriving from a second channel page widens the feed instead of silently dropping the first; picking
+// one already in the set changes nothing.
+export function useShowChannelInFeed(channelId: string): () => void {
+  const filters = useFeedFilters();
+  const { setFilters } = useFeedFiltersActions();
+  const { setPage } = useNavigationActions();
+  return () => {
+    setFilters({ ...filters, channelIds: [...new Set([...filters.channelIds, channelId])] });
+    // setPage already leaves an open channel page and pushes a clean history entry. Calling
+    // closeChannel() first ran history.back(), whose popstate landed AFTER this and restored whatever
+    // page the channel had been opened from.
+    setPage("feed");
+  };
+}
+
+// The feed page's scroll restore/reset key (see PageScroller): the same feed filters return you to
+// where you were; a changed filter is a new key, so the fresh result set starts at the top. `q` is
+// normalised out so typing in the search box doesn't reset the scroll on every keystroke; the
+// live-YouTube sub-view gets its own key.
+export function useFeedScrollKey(): string {
+  const filters = useFeedFilters();
+  const { ytSearch } = useNavigation();
+  return ytSearch != null ? `yt:${ytSearch}` : `feed:${JSON.stringify({ ...filters, q: "" })}`;
+}
diff --git a/frontend/src/components/FileCard.tsx b/frontend/src/modules/files/FileCard.tsx
similarity index 88%
rename from frontend/src/components/FileCard.tsx
rename to frontend/src/modules/files/FileCard.tsx
index aaceae90..73a20ecb 100644
--- a/frontend/src/components/FileCard.tsx
+++ b/frontend/src/modules/files/FileCard.tsx
@@ -1,12 +1,12 @@
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Scissors } from "lucide-react";
-import type { LibraryFile } from "../lib/api";
-import { navItemAttrs } from "../lib/listNav";
-import { JobThumb } from "./downloadRow";
-import { jobTitle } from "./downloadTitle";
+import type { LibraryFile } from "../../lib/api";
+import { navItemAttrs } from "../../lib/listNav";
+import { JobThumb } from "../../features/downloads/downloadRow";
+import { jobTitle } from "../../features/downloads/downloadTitle";
 import { PhoneBadge, RetentionBadge, SourceBadge } from "./fileBadges";
-import { MediaCard, MediaPlayGlyph } from "./ui/MediaCard";
+import { MediaCard, MediaPlayGlyph } from "../../components/ui/MediaCard";
 import {
   MEDIA_BADGE,
   MEDIA_BAR,
@@ -14,9 +14,9 @@ import {
   MEDIA_PICTURE,
   mediaPictureBox,
   mediaTitleClass,
-} from "./ui/mediaCardStyles";
-import { MoreButton } from "./ui/MoreButton";
-import { Pressable } from "./ui/Pressable";
+} from "../../components/ui/mediaCardStyles";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { Pressable } from "../../components/ui/Pressable";
 
 // A library file in the Files grid: the one media card (ui/MediaCard) — its picture plays it (a file
 // that is not media: opens it in the viewer), the title under it, then where it came from and what
diff --git a/frontend/src/components/FilePreview.dom.test.tsx b/frontend/src/modules/files/FilePreview.dom.test.tsx
similarity index 98%
rename from frontend/src/components/FilePreview.dom.test.tsx
rename to frontend/src/modules/files/FilePreview.dom.test.tsx
index 1f87fed4..11ca2843 100644
--- a/frontend/src/components/FilePreview.dom.test.tsx
+++ b/frontend/src/modules/files/FilePreview.dom.test.tsx
@@ -6,7 +6,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { api, HttpError, type LibraryFile } from "../lib/api";
+import { api, HttpError, type LibraryFile } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -21,7 +21,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import FilePreview from "./FilePreview";
-import { pushLayer, removeLayer } from "../lib/layerStack";
+import { pushLayer, removeLayer } from "../../lib/layerStack";
 
 const file = (id: number, preview: string | null, extra: Record<string, unknown> = {}) =>
   ({
diff --git a/frontend/src/components/FilePreview.tsx b/frontend/src/modules/files/FilePreview.tsx
similarity index 92%
rename from frontend/src/components/FilePreview.tsx
rename to frontend/src/modules/files/FilePreview.tsx
index 92c44434..603cce12 100644
--- a/frontend/src/components/FilePreview.tsx
+++ b/frontend/src/modules/files/FilePreview.tsx
@@ -9,21 +9,21 @@ import {
   FileQuestion,
   WrapText,
 } from "lucide-react";
-import { api, HttpError, type FilePreviewKind, type LibraryFile } from "../lib/api";
-import { formatBytes } from "../lib/format";
-import { dispatch, useKeyScope } from "../lib/keymap";
-import { useLayer } from "../lib/layerStack";
-import { qk } from "../lib/queryKeys";
-import { jobTitle } from "./downloadTitle";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { ContextMenu } from "./ui/ContextMenu";
-import { IconButton } from "./ui/IconButton";
-import { IconLink, LinkButton } from "./ui/LinkButton";
-import Modal from "./ui/Modal";
-import { MoreButton } from "./ui/MoreButton";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { useContextMenu } from "./ui/useContextMenu";
-import RemoteImage from "./ui/RemoteImage";
+import { api, HttpError, type FilePreviewKind, type LibraryFile } from "../../lib/api";
+import { formatBytes } from "../../lib/format";
+import { dispatch, useKeyScope } from "../../lib/keymap";
+import { useLayer } from "../../lib/layerStack";
+import { qk } from "../../lib/queryKeys";
+import { jobTitle } from "../../features/downloads/downloadTitle";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { IconButton } from "../../components/ui/IconButton";
+import { IconLink, LinkButton } from "../../components/ui/LinkButton";
+import Modal from "../../components/ui/Modal";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // The Files viewer (DESIGN.md "Files preview"): the library's files that are not media, one at a time,
 // in the shared dialog shell. What a file shows is the server's call (`asset.preview`,
diff --git a/frontend/src/components/Files.menu.dom.test.tsx b/frontend/src/modules/files/Files.menu.dom.test.tsx
similarity index 98%
rename from frontend/src/components/Files.menu.dom.test.tsx
rename to frontend/src/modules/files/Files.menu.dom.test.tsx
index 277ae036..a0640840 100644
--- a/frontend/src/components/Files.menu.dom.test.tsx
+++ b/frontend/src/modules/files/Files.menu.dom.test.tsx
@@ -18,8 +18,8 @@ import {
   waitFor,
 } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { api, type FileFolder, type LibraryFile } from "../lib/api";
-import { formatDateTime } from "../lib/format";
+import { api, type FileFolder, type LibraryFile } from "../../lib/api";
+import { formatDateTime } from "../../lib/format";
 import {
   ALL_FILES,
   FilesActionsContext,
@@ -43,8 +43,8 @@ const mocks = vi.hoisted(() => ({
   foldersFailed: false,
   notify: vi.fn(),
 }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify: mocks.notify,
 }));
 
@@ -69,8 +69,8 @@ vi.mock("./LibraryPlayer", () => ({
     >{`playing ${job.id}${fromStart ? " from the start" : ""}`}</div>
   ),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => mocks.confirm }));
-vi.mock("../lib/useLiveQuery", () => ({
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => mocks.confirm }));
+vi.mock("../../lib/useLiveQuery", () => ({
   useLiveQuery: (key: readonly unknown[], _fn: unknown, opts?: { enabled?: boolean }) => {
     if (opts?.enabled === false) return { data: undefined, isError: false, isLoading: false };
     mocks.keys.push(key);
@@ -109,14 +109,14 @@ vi.mock("../lib/useLiveQuery", () => ({
     };
   },
 }));
-vi.mock("./ui/PageShell", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("./ui/PageShell")>()),
+vi.mock("../../components/ui/PageShell", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../components/ui/PageShell")>()),
   PageToolbar: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }));
 
 import Files from "./Files";
-import { FILES_LIST_CAP, type QueueJob } from "../lib/api";
-import { noteQueue, resetQueueWatch, useFinished } from "../lib/downloadQueue";
+import { FILES_LIST_CAP, type QueueJob } from "../../lib/api";
+import { noteQueue, resetQueueWatch, useFinished } from "../../lib/downloadQueue";
 
 // The page loads its dialogs lazily, and the first test to open one would pay for transforming the
 // chunk inside its own 1 s wait for the dialog — over that on a busy machine. Loaded once, up front.
diff --git a/frontend/src/components/Files.tsx b/frontend/src/modules/files/Files.tsx
similarity index 94%
rename from frontend/src/components/Files.tsx
rename to frontend/src/modules/files/Files.tsx
index 44888bb7..e34f6b52 100644
--- a/frontend/src/components/Files.tsx
+++ b/frontend/src/modules/files/Files.tsx
@@ -9,45 +9,46 @@ import {
   type FileListParams,
   type FileSort,
   type LibraryFile,
-} from "../lib/api";
-import { type SortState, sortRows } from "../lib/columnSort";
-import { libraryRowActions, sharedRowActions } from "../lib/downloadActions";
-import { formatBytes, formatDateTime, relativeTime } from "../lib/format";
-import { focusNavItem } from "../lib/listNav";
-import { notify } from "../lib/notifications";
-import { qk } from "../lib/queryKeys";
-import { LS, ownKey } from "../lib/storage";
-import { useCardPager } from "../lib/useCardPager";
-import { useDebounced } from "../lib/useDebounced";
-import { useLiveQuery } from "../lib/useLiveQuery";
-import { usePref } from "../lib/usePref";
-import { JobThumb } from "./downloadRow";
-import { MetaEditModal } from "./downloadModals";
-import { jobTitle } from "./downloadTitle";
+} from "../../lib/api";
+import { type SortState, sortRows } from "../../lib/columnSort";
+import { libraryRowActions, sharedRowActions } from "../../lib/downloadActions";
+import { formatBytes, formatDateTime, relativeTime } from "../../lib/format";
+import { focusNavItem } from "../../lib/listNav";
+import { notify } from "../../lib/notifications";
+import { qk } from "../../lib/queryKeys";
+import { LS, ownKey } from "../../lib/storage";
+import { useCardPager } from "../../lib/useCardPager";
+import { useDebounced } from "../../lib/useDebounced";
+import { useLiveQuery } from "../../lib/useLiveQuery";
+import { usePref } from "../../lib/usePref";
+import { JobThumb } from "../../features/downloads/downloadRow";
+import { MetaEditModal } from "../../features/downloads/downloadModals";
+import { jobTitle } from "../../features/downloads/downloadTitle";
 import { FileCard } from "./FileCard";
 import { PhoneBadge, RetentionBadge, SourceBadge } from "./fileBadges";
-import { folderLabel, takesUploads } from "./fileFolders";
+import { folderLabel, takesUploads } from "../../features/folders/fileFolders";
 import { ALL_FILES, useFiles, useFilesActions, viewParam, type FilesView } from "./filesContext";
 import { useFileActions } from "./useFileActions";
 import { useFolderActions } from "./useFolderActions";
-import { RenameField } from "./ui/RenameField";
-import ViewSwitcher, { type ViewOption } from "./ViewSwitcher";
-import { Badge } from "./ui/Badge";
-import { Button } from "./ui/Button";
-import ColumnSortControl from "./ui/ColumnSortControl";
-import { ContextMenu } from "./ui/ContextMenu";
-import DataTable, { type Column } from "./ui/DataTable";
-import { IconButton } from "./ui/IconButton";
-import { IconLink } from "./ui/LinkButton";
-import { MoreButton } from "./ui/MoreButton";
-import NavGrid from "./ui/NavGrid";
-import Overlay from "./ui/Overlay";
-import { PageToolbar } from "./ui/PageShell";
+import { RenameField } from "../../components/ui/RenameField";
+import ViewSwitcher, { type ViewOption } from "../../components/ui/ViewSwitcher";
+import { Badge } from "../../components/ui/Badge";
+import { Button } from "../../components/ui/Button";
+import ColumnSortControl from "../../components/ui/ColumnSortControl";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import DataTable, { type Column } from "../../components/ui/DataTable";
+import { IconButton } from "../../components/ui/IconButton";
+import { IconLink } from "../../components/ui/LinkButton";
+import { MoreButton } from "../../components/ui/MoreButton";
+import NavGrid from "../../components/ui/NavGrid";
+import Overlay from "../../components/ui/Overlay";
+import { PageToolbar } from "../../components/ui/PageShell";
 import { LinkBox } from "./LinkBox";
-import Pager from "./ui/Pager";
-import { Pressable } from "./ui/Pressable";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { useContextMenu } from "./ui/useContextMenu";
+import Pager from "../../components/ui/Pager";
+import { Pressable } from "../../components/ui/Pressable";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import FilesHeader from "./FilesHeader";
 // Lazy: these open on demand, so they stay out of the Files chunk until used (the video editor in
 // particular is heavy — filmstrip + scrubber).
 const UploadDialog = lazy(() => import("./UploadDialog"));
@@ -654,6 +655,7 @@ export default function Files() {
 
   return (
     <>
+      <FilesHeader />
       <PageToolbar>
         <div className="mx-auto flex w-full max-w-7xl flex-wrap items-center gap-x-3 gap-y-2 px-4 pt-2 pb-2">
           {renamingFolder && open?.kind === "own" ? (
diff --git a/frontend/src/modules/files/FilesHeader.tsx b/frontend/src/modules/files/FilesHeader.tsx
new file mode 100644
index 00000000..f55f3f56
--- /dev/null
+++ b/frontend/src/modules/files/FilesHeader.tsx
@@ -0,0 +1,22 @@
+import { useTranslation } from "react-i18next";
+import { PageHeader } from "../../components/ui/PageShell";
+import SearchBar from "../../features/header/SearchBar";
+import { blurActive } from "../../features/header/blurActive";
+import { useFiles, useFilesActions } from "./filesContext";
+
+// The files library's pill in the floating header: its name filter.
+export default function FilesHeader() {
+  const { t } = useTranslation();
+  const { search } = useFiles();
+  const { setSearch } = useFilesActions();
+  return (
+    <PageHeader>
+      <SearchBar
+        value={search}
+        placeholder={t("files.searchPlaceholder")}
+        onChange={setSearch}
+        onGo={blurActive}
+      />
+    </PageHeader>
+  );
+}
diff --git a/frontend/src/components/FilesProvider.dom.test.tsx b/frontend/src/modules/files/FilesProvider.dom.test.tsx
similarity index 96%
rename from frontend/src/components/FilesProvider.dom.test.tsx
rename to frontend/src/modules/files/FilesProvider.dom.test.tsx
index 03827042..0eab9c6e 100644
--- a/frontend/src/components/FilesProvider.dom.test.tsx
+++ b/frontend/src/modules/files/FilesProvider.dom.test.tsx
@@ -9,14 +9,14 @@ import { act, renderHook } from "@testing-library/react";
 import type { ReactNode } from "react";
 
 const nav = vi.hoisted(() => ({ page: "files", setPage: vi.fn() }));
-vi.mock("./navigationContext", () => ({
+vi.mock("../../features/navigation/navigationContext", () => ({
   useNavigation: () => ({ page: nav.page }),
   useNavigationActions: () => ({ setPage: nav.setPage }),
 }));
 
 import { FilesProvider } from "./FilesProvider";
 import { ALL_FILES, useFiles, useFilesActions } from "./filesContext";
-import { claimLocalData } from "../lib/storage";
+import { claimLocalData } from "../../lib/storage";
 
 const wrapper = ({ children }: { children: ReactNode }) => (
   <FilesProvider>{children}</FilesProvider>
diff --git a/frontend/src/components/FilesProvider.tsx b/frontend/src/modules/files/FilesProvider.tsx
similarity index 95%
rename from frontend/src/components/FilesProvider.tsx
rename to frontend/src/modules/files/FilesProvider.tsx
index e2144549..26251199 100644
--- a/frontend/src/components/FilesProvider.tsx
+++ b/frontend/src/modules/files/FilesProvider.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState, type ReactNode } from "react";
-import { LS, getAccountRaw, setAccountRaw } from "../lib/storage";
-import { useUrlMirror } from "../lib/useUrlMirror";
-import { useNavigation, useNavigationActions } from "./navigationContext";
+import { LS, getAccountRaw, setAccountRaw } from "../../lib/storage";
+import { useUrlMirror } from "../../lib/useUrlMirror";
+import { useNavigation, useNavigationActions } from "../../features/navigation/navigationContext";
 import {
   ALL_FILES,
   FilesActionsContext,
diff --git a/frontend/src/components/FilesRail.dom.test.tsx b/frontend/src/modules/files/FilesRail.dom.test.tsx
similarity index 94%
rename from frontend/src/components/FilesRail.dom.test.tsx
rename to frontend/src/modules/files/FilesRail.dom.test.tsx
index c767fe25..c6e35c15 100644
--- a/frontend/src/components/FilesRail.dom.test.tsx
+++ b/frontend/src/modules/files/FilesRail.dom.test.tsx
@@ -9,12 +9,21 @@ import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-libra
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 
+// The rail's own state, pinned open: these tests are about what it lists, not how it folds.
+vi.mock("../../lib/useRail", () => ({
+  useRail: () => ({
+    layout: { order: ["library", "sources", "own"], collapsed: {}, hidden: {} },
+    setLayout: () => {},
+    collapsed: false,
+    onToggleCollapse: () => {},
+  }),
+}));
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
   return { ...actual, useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }) };
 });
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => false }));
-vi.mock("./FilterRail", () => ({
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => false }));
+vi.mock("../../components/ui/FilterRail", () => ({
   default: ({
     items,
     children,
@@ -32,8 +41,7 @@ vi.mock("./FilterRail", () => ({
 }));
 
 import FilesRail from "./FilesRail";
-import { api, type FileFolder } from "../lib/api";
-import { defaultLayout } from "../lib/panelLayout";
+import { api, type FileFolder } from "../../lib/api";
 
 // The share dialog is a lazy chunk, and the test that opens it would pay for transforming it inside
 // its own wait for the dialog — over that on a busy machine. Loaded once, up front.
@@ -79,12 +87,7 @@ async function mount(folders: FileFolder[] = [YT, OWN]) {
   vi.spyOn(api, "filesUsage").mockResolvedValue({ unlimited: true, footprint_bytes: 0 } as never);
   render(
     <QueryClientProvider client={new QueryClient()}>
-      <FilesRail
-        layout={defaultLayout("files")}
-        setLayout={vi.fn()}
-        collapsed={false}
-        onToggleCollapse={vi.fn()}
-      />
+      <FilesRail />
     </QueryClientProvider>,
   );
   await screen.findByText("files.folder.new");
@@ -194,12 +197,7 @@ describe("FilesRail · what it says when a part is empty or missing", () => {
       <QueryClientProvider
         client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}
       >
-        <FilesRail
-          layout={defaultLayout("files")}
-          setLayout={vi.fn()}
-          collapsed={false}
-          onToggleCollapse={vi.fn()}
-        />
+        <FilesRail />
       </QueryClientProvider>,
     );
     expect(await screen.findByText("files.usage.failed")).toBeTruthy();
diff --git a/frontend/src/components/FilesRail.tsx b/frontend/src/modules/files/FilesRail.tsx
similarity index 90%
rename from frontend/src/components/FilesRail.tsx
rename to frontend/src/modules/files/FilesRail.tsx
index 79471ae9..a3039a0a 100644
--- a/frontend/src/components/FilesRail.tsx
+++ b/frontend/src/modules/files/FilesRail.tsx
@@ -1,24 +1,24 @@
 import { useEffect, useRef, useState } from "react";
-import { Meter } from "./ui/Meter";
+import { Meter } from "../../components/ui/Meter";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { FolderOpen, FolderPlus, HardDrive, Link2, Users } from "lucide-react";
-import { api, type FileFolder } from "../lib/api";
-import { compareText } from "../lib/collate";
-import { formatBytes } from "../lib/format";
-import { type PanelLayout } from "../lib/panelLayout";
-import { qk } from "../lib/queryKeys";
-import { useLiveQuery } from "../lib/useLiveQuery";
-import FilterRail from "./FilterRail";
-import { folderIcon, folderLabel } from "./fileFolders";
+import { api, type FileFolder } from "../../lib/api";
+import { compareText } from "../../lib/collate";
+import { formatBytes } from "../../lib/format";
+import { qk } from "../../lib/queryKeys";
+import { useLiveQuery } from "../../lib/useLiveQuery";
+import FilterRail from "../../components/ui/FilterRail";
+import { folderIcon, folderLabel } from "../../features/folders/fileFolders";
 import { sameView, useFiles, useFilesActions, type FilesView } from "./filesContext";
-import { RenameField } from "./ui/RenameField";
+import { RenameField } from "../../components/ui/RenameField";
 import { useFolderActions } from "./useFolderActions";
-import { ContextMenu } from "./ui/ContextMenu";
-import { Pressable } from "./ui/Pressable";
-import { type PanelItem } from "./ui/PanelGroups";
-import { useContextMenu } from "./ui/useContextMenu";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { Pressable } from "../../components/ui/Pressable";
+import { type PanelItem } from "../../components/ui/PanelGroups";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { useRail } from "../../lib/useRail";
 
 // The Files module's left rail: the library's places — every file, the ones shared with me, the
 // source folders the library fills by itself, the user's own folders — and the storage meter. Lifted
@@ -111,17 +111,9 @@ function StorageMeter() {
   );
 }
 
-export default function FilesRail({
-  layout,
-  setLayout,
-  collapsed,
-  onToggleCollapse,
-}: {
-  layout: PanelLayout;
-  setLayout: (l: PanelLayout) => void;
-  collapsed: boolean;
-  onToggleCollapse: () => void;
-}) {
+export default function FilesRail() {
+  // Its layout and collapse flag are its own (lib/useRail), so the shell only places it.
+  const { layout, setLayout, onResetLayout, collapsed, onToggleCollapse } = useRail("files");
   const { t, i18n } = useTranslation();
   const { view } = useFiles();
   const foldersQ = useQuery({ queryKey: qk.fileFolders(), queryFn: api.fileFolders });
@@ -263,7 +255,7 @@ export default function FilesRail({
 
   return (
     <FilterRail
-      kind="files"
+      onResetLayout={onResetLayout}
       title={t("files.navLabel")}
       icon={<FolderOpen className="w-4 h-4" />}
       collapsed={collapsed}
diff --git a/frontend/src/components/LibraryPlayer.dom.test.tsx b/frontend/src/modules/files/LibraryPlayer.dom.test.tsx
similarity index 97%
rename from frontend/src/components/LibraryPlayer.dom.test.tsx
rename to frontend/src/modules/files/LibraryPlayer.dom.test.tsx
index 11d0f918..6a9d1d8a 100644
--- a/frontend/src/components/LibraryPlayer.dom.test.tsx
+++ b/frontend/src/modules/files/LibraryPlayer.dom.test.tsx
@@ -14,11 +14,11 @@ vi.mock("react-i18next", async (importOriginal) => {
   return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
 });
 const expose = vi.hoisted(() => vi.fn());
-vi.mock("../lib/browserBackgroundPlay", () => ({ exposeVideoToBackgroundPlay: expose }));
+vi.mock("../../lib/browserBackgroundPlay", () => ({ exposeVideoToBackgroundPlay: expose }));
 
 import LibraryPlayer from "./LibraryPlayer";
-import { api, type DownloadJob } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, type DownloadJob } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 const baseJob: DownloadJob = {
   id: 7,
diff --git a/frontend/src/components/LibraryPlayer.tsx b/frontend/src/modules/files/LibraryPlayer.tsx
similarity index 90%
rename from frontend/src/components/LibraryPlayer.tsx
rename to frontend/src/modules/files/LibraryPlayer.tsx
index e22319ea..04084520 100644
--- a/frontend/src/components/LibraryPlayer.tsx
+++ b/frontend/src/modules/files/LibraryPlayer.tsx
@@ -1,16 +1,16 @@
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
-import Modal from "./ui/Modal";
-import { api, type DownloadJob } from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { jobTitle } from "./downloadTitle";
-import { exposeVideoToBackgroundPlay } from "../lib/browserBackgroundPlay";
-import { useMediaLogRef } from "../lib/mediaLog";
-import { useMediaSession } from "../lib/mediaSession";
-import { useMediaKeys } from "../lib/mediaKeys";
-import { keptPosition, useResume } from "../lib/resume";
-import RemoteImage from "./ui/RemoteImage";
+import Modal from "../../components/ui/Modal";
+import { api, type DownloadJob } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { jobTitle } from "../../features/downloads/downloadTitle";
+import { exposeVideoToBackgroundPlay } from "../../lib/browserBackgroundPlay";
+import { useMediaLogRef } from "../../lib/mediaLog";
+import { useMediaSession } from "../../lib/mediaSession";
+import { useMediaKeys } from "../../lib/mediaKeys";
+import { keptPosition, useResume } from "../../lib/resume";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // In-app player for a completed library item. We do NOT reuse PlayerModal (a cross-origin
 // YouTube IFrame shell) or PlexPlayer (a Plex HLS/session shell): both are bound to their own domain
diff --git a/frontend/src/components/DownloadIntake.dom.test.tsx b/frontend/src/modules/files/LinkBox.intake.dom.test.tsx
similarity index 94%
rename from frontend/src/components/DownloadIntake.dom.test.tsx
rename to frontend/src/modules/files/LinkBox.intake.dom.test.tsx
index 1ec1c64f..eee518a1 100644
--- a/frontend/src/components/DownloadIntake.dom.test.tsx
+++ b/frontend/src/modules/files/LinkBox.intake.dom.test.tsx
@@ -11,7 +11,7 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
 }));
-vi.mock("./DownloadDialog", () => ({
+vi.mock("../../features/downloads/DownloadDialog", () => ({
   default: ({ source, onClose }: { source: string; onClose: () => void }) => (
     <div role="dialog" aria-label="download">
       {source}
@@ -20,11 +20,11 @@ vi.mock("./DownloadDialog", () => ({
   ),
 }));
 
-import DownloadIntake from "./DownloadIntake";
+import DownloadIntake from "../../features/downloads/DownloadIntake";
 import { LinkBox } from "./LinkBox";
-import { clearPendingDownload, requestLinkBox } from "../lib/downloadIntake";
-import { ensureNavId } from "../lib/history";
-import { pushLayer, removeLayer } from "../lib/layerStack";
+import { clearPendingDownload, requestLinkBox } from "../../lib/downloadIntake";
+import { ensureNavId } from "../../lib/history";
+import { pushLayer, removeLayer } from "../../lib/layerStack";
 
 afterEach(() => {
   cleanup();
diff --git a/frontend/src/components/LinkBox.tsx b/frontend/src/modules/files/LinkBox.tsx
similarity index 94%
rename from frontend/src/components/LinkBox.tsx
rename to frontend/src/modules/files/LinkBox.tsx
index 5a49cb17..1beaacd1 100644
--- a/frontend/src/components/LinkBox.tsx
+++ b/frontend/src/modules/files/LinkBox.tsx
@@ -6,10 +6,10 @@ import {
   requestDownload,
   takeLinkBox,
   useLinkBoxRequest,
-} from "../lib/downloadIntake";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { Input } from "./ui/Input";
+} from "../../lib/downloadIntake";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { Input } from "../../components/ui/Input";
 
 /** The clipboard's text, or null where the browser refuses. Outside the component: the React
  *  Compiler cannot lower an optional call inside a try yet, and skipped the whole page for it. */
diff --git a/frontend/src/components/ShareDialog.dom.test.tsx b/frontend/src/modules/files/ShareDialog.dom.test.tsx
similarity index 97%
rename from frontend/src/components/ShareDialog.dom.test.tsx
rename to frontend/src/modules/files/ShareDialog.dom.test.tsx
index 793a9e7c..37530a6c 100644
--- a/frontend/src/components/ShareDialog.dom.test.tsx
+++ b/frontend/src/modules/files/ShareDialog.dom.test.tsx
@@ -15,7 +15,7 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }),
 }));
-vi.mock("./ui/Modal", () => ({
+vi.mock("../../components/ui/Modal", () => ({
   default: ({ title, children }: { title: string; children: ReactNode }) => (
     <div>
       <h2>{title}</h2>
@@ -23,7 +23,7 @@ vi.mock("./ui/Modal", () => ({
     </div>
   ),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => h.confirm }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => h.confirm }));
 const h = vi.hoisted(() => ({
   confirm: false,
   revokeDownloadLink: vi.fn(),
@@ -32,7 +32,7 @@ const h = vi.hoisted(() => ({
   createFolderLink: vi.fn(),
   createDownloadLink: vi.fn(),
 }));
-vi.mock("../lib/api", () => ({
+vi.mock("../../lib/api", () => ({
   api: {
     shareRecipients: async () => [],
     folderLinks: h.folderLinks,
@@ -66,7 +66,7 @@ vi.mock("../lib/api", () => ({
 }));
 
 import ShareDialog from "./ShareDialog";
-import type { DownloadJob } from "../lib/api";
+import type { DownloadJob } from "../../lib/api";
 
 afterEach(cleanup);
 beforeEach(() => {
diff --git a/frontend/src/components/ShareDialog.tsx b/frontend/src/modules/files/ShareDialog.tsx
similarity index 94%
rename from frontend/src/components/ShareDialog.tsx
rename to frontend/src/modules/files/ShareDialog.tsx
index 5b4cf0f7..7b6335fd 100644
--- a/frontend/src/components/ShareDialog.tsx
+++ b/frontend/src/modules/files/ShareDialog.tsx
@@ -1,23 +1,29 @@
 import { useEffect, useRef, useState } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Check, Copy, Link2, Lock, Trash2, UserPlus, Eye } from "lucide-react";
-import Modal from "./ui/Modal";
-import { useConfirm } from "./confirmContext";
-import { notify } from "../lib/notifications";
-import { notifyActionError } from "../lib/actionErrors";
-import { formatDate } from "../lib/format";
-import { api, type DownloadJob, type ShareLink, type ShareRecipient } from "../lib/api";
-import { fetchLinks, invalidateLinks, linksKey, makeLink, type LinkTarget } from "../lib/downloads";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { Input, InnerInput } from "./ui/Input";
-import { CheckRow } from "./ui/NativeControls";
-import { SURFACE } from "./ui/surfaces";
+import Modal from "../../components/ui/Modal";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { notify } from "../../lib/notifications";
+import { notifyActionError } from "../../lib/actionErrors";
+import { formatDate } from "../../lib/format";
+import { api, type DownloadJob, type ShareLink, type ShareRecipient } from "../../lib/api";
+import {
+  fetchLinks,
+  invalidateLinks,
+  linksKey,
+  makeLink,
+  type LinkTarget,
+} from "../../lib/downloads";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { Input, InnerInput } from "../../components/ui/Input";
+import { CheckRow } from "../../components/ui/NativeControls";
+import { SURFACE } from "../../components/ui/surfaces";
 import UserPicker from "./UserPicker";
-import { useCopyFeedback } from "./useCopyFeedback";
-import { LoadingState, StateMessage } from "./ui/QueryState";
+import { useCopyFeedback } from "../../components/ui/useCopyFeedback";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
 const EXPIRY_DAYS = [null, 1, 7, 30] as const;
 
 // --- share with a registered user (ACL) -----------------------------------------------------
diff --git a/frontend/src/components/UploadDialog.dom.test.tsx b/frontend/src/modules/files/UploadDialog.dom.test.tsx
similarity index 97%
rename from frontend/src/components/UploadDialog.dom.test.tsx
rename to frontend/src/modules/files/UploadDialog.dom.test.tsx
index ef1762fa..abff6ffa 100644
--- a/frontend/src/components/UploadDialog.dom.test.tsx
+++ b/frontend/src/modules/files/UploadDialog.dom.test.tsx
@@ -28,16 +28,16 @@ vi.mock("react-i18next", async (importOriginal) => {
     useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
   };
 });
-vi.mock("../lib/api", () => ({
+vi.mock("../../lib/api", () => ({
   api: { uploadFile: h.uploadFile, filesUsage: h.filesUsage },
 }));
-vi.mock("../lib/downloads", () => ({ invalidateDownloads: vi.fn() }));
+vi.mock("../../lib/downloads", () => ({ invalidateDownloads: vi.fn() }));
 // The rest of the module stays real: the dialog is a ui/Modal, which hosts its own toasts.
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify: h.notify,
 }));
-vi.mock("../lib/downloadQueue", () => ({
+vi.mock("../../lib/downloadQueue", () => ({
   showInTray: h.showInTray,
   uploadStarted: h.uploadStarted,
   uploadEnded: h.uploadEnded,
diff --git a/frontend/src/components/UploadDialog.tsx b/frontend/src/modules/files/UploadDialog.tsx
similarity index 94%
rename from frontend/src/components/UploadDialog.tsx
rename to frontend/src/modules/files/UploadDialog.tsx
index a9ce514d..d1e81fc1 100644
--- a/frontend/src/components/UploadDialog.tsx
+++ b/frontend/src/modules/files/UploadDialog.tsx
@@ -2,21 +2,21 @@ import { useEffect, useId, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { UploadCloud, File as FileIcon } from "lucide-react";
-import Modal, { ModalFooter } from "./ui/Modal";
-import { Button } from "./ui/Button";
-import { api } from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { isAborted } from "../lib/api/core";
-import { notifyActionError } from "../lib/actionErrors";
-import { invalidateDownloads } from "../lib/downloads";
-import { notify } from "../lib/notifications";
-import { showInTray, uploadEnded, uploadStarted } from "../lib/downloadQueue";
-import type { DownloadJob } from "../lib/api";
+import Modal, { ModalFooter } from "../../components/ui/Modal";
+import { Button } from "../../components/ui/Button";
+import { api } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { isAborted } from "../../lib/api/core";
+import { notifyActionError } from "../../lib/actionErrors";
+import { invalidateDownloads } from "../../lib/downloads";
+import { notify } from "../../lib/notifications";
+import { showInTray, uploadEnded, uploadStarted } from "../../lib/downloadQueue";
+import type { DownloadJob } from "../../lib/api";
 import { useFilesActions } from "./filesContext";
-import { formatBytes } from "../lib/format";
-import { DISPLAY_NAME_MAX } from "../lib/api/downloads";
-import { Pressable } from "./ui/Pressable";
-import { Input } from "./ui/Input";
+import { formatBytes } from "../../lib/format";
+import { DISPLAY_NAME_MAX } from "../../lib/api/downloads";
+import { Pressable } from "../../components/ui/Pressable";
+import { Input } from "../../components/ui/Input";
 
 // Local-file ingest. A general upload — ANY file type, no format list: media
 // (video/audio) joins the library with the full function set, a generic file is download-only. The
diff --git a/frontend/src/components/UserPicker.tsx b/frontend/src/modules/files/UserPicker.tsx
similarity index 97%
rename from frontend/src/components/UserPicker.tsx
rename to frontend/src/modules/files/UserPicker.tsx
index 3d4589f6..7c2b1b56 100644
--- a/frontend/src/components/UserPicker.tsx
+++ b/frontend/src/modules/files/UserPicker.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import Combobox from "./ui/Combobox";
+import Combobox from "../../components/ui/Combobox";
 
 // Pick one registered user by name or email: the download quota's "any user" picker and the share
 // dialog's recipient. Both used to hand-roll an input over an absolute list that only a mouse could
diff --git a/frontend/src/components/VideoEditor.partial.dom.test.tsx b/frontend/src/modules/files/VideoEditor.partial.dom.test.tsx
similarity index 97%
rename from frontend/src/components/VideoEditor.partial.dom.test.tsx
rename to frontend/src/modules/files/VideoEditor.partial.dom.test.tsx
index 5ea98ab4..e694fd7c 100644
--- a/frontend/src/components/VideoEditor.partial.dom.test.tsx
+++ b/frontend/src/modules/files/VideoEditor.partial.dom.test.tsx
@@ -14,14 +14,14 @@ vi.mock("react-i18next", async (importOriginal) => ({
   useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
 }));
 const { notify } = vi.hoisted(() => ({ notify: vi.fn() }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify,
 }));
 
 import VideoEditor from "./VideoEditor";
-import { api, HttpError, type DownloadJob } from "../lib/api";
-import { markReported } from "../lib/api/core";
+import { api, HttpError, type DownloadJob } from "../../lib/api";
+import { markReported } from "../../lib/api/core";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/VideoEditor.tsx b/frontend/src/modules/files/VideoEditor.tsx
similarity index 95%
rename from frontend/src/components/VideoEditor.tsx
rename to frontend/src/modules/files/VideoEditor.tsx
index a52bac94..b42441c2 100644
--- a/frontend/src/components/VideoEditor.tsx
+++ b/frontend/src/modules/files/VideoEditor.tsx
@@ -1,27 +1,27 @@
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { invalidateDownloads } from "../lib/downloads";
-import { qk } from "../lib/queryKeys";
+import { invalidateDownloads } from "../../lib/downloads";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Crop, Eye, EyeOff, Pause, Play, Scissors, SplitSquareHorizontal, X } from "lucide-react";
 import clsx from "clsx";
-import Modal, { ModalFooter } from "./ui/Modal";
-import { notify } from "../lib/notifications";
-import { api, type DownloadJob, type EditSpec } from "../lib/api";
-import { cropToSourcePx, type Frac } from "../lib/cropGeometry";
-import { CropFrame } from "./ui/CropFrame";
-import { Button } from "./ui/Button";
-import { failureReason, notifyActionError } from "../lib/actionErrors";
-import { markReported } from "../lib/api/core";
-import { IconButton } from "./ui/IconButton";
-import { Pressable } from "./ui/Pressable";
-import { Input } from "./ui/Input";
-import { TimecodeError, TimecodeField } from "./ui/TimecodeField";
-import { useTimecodeField } from "./ui/useTimecodeField";
-import { SURFACE } from "./ui/surfaces";
-import { RangeTrack } from "./ui/RangeTrack";
-import { trackLeft } from "./ui/trackPosition";
-import { formatTimecode } from "../lib/timecode";
+import Modal, { ModalFooter } from "../../components/ui/Modal";
+import { notify } from "../../lib/notifications";
+import { api, type DownloadJob, type EditSpec } from "../../lib/api";
+import { cropToSourcePx, type Frac } from "../../lib/cropGeometry";
+import { CropFrame } from "../../components/ui/CropFrame";
+import { Button } from "../../components/ui/Button";
+import { failureReason, notifyActionError } from "../../lib/actionErrors";
+import { markReported } from "../../lib/api/core";
+import { IconButton } from "../../components/ui/IconButton";
+import { Pressable } from "../../components/ui/Pressable";
+import { Input } from "../../components/ui/Input";
+import { TimecodeError, TimecodeField } from "../../components/ui/TimecodeField";
+import { useTimecodeField } from "../../components/ui/useTimecodeField";
+import { SURFACE } from "../../components/ui/surfaces";
+import { RangeTrack } from "../../components/ui/RangeTrack";
+import { trackLeft } from "../../components/ui/trackPosition";
+import { formatTimecode } from "../../lib/timecode";
 
 type Seg = { id: number; start: number; end: number; keep: boolean };
 
diff --git a/frontend/src/components/fileBadges.tsx b/frontend/src/modules/files/fileBadges.tsx
similarity index 91%
rename from frontend/src/components/fileBadges.tsx
rename to frontend/src/modules/files/fileBadges.tsx
index a831e977..17364ab3 100644
--- a/frontend/src/components/fileBadges.tsx
+++ b/frontend/src/modules/files/fileBadges.tsx
@@ -1,10 +1,10 @@
 import { createElement } from "react";
 import { useTranslation } from "react-i18next";
 import { Clock, Pin, Smartphone } from "lucide-react";
-import type { LibraryFile } from "../lib/api";
-import { formatDateTime } from "../lib/format";
-import { sourceIcon, sourceLabel } from "./fileFolders";
-import { Badge } from "./ui/Badge";
+import type { LibraryFile } from "../../lib/api";
+import { formatDateTime } from "../../lib/format";
+import { sourceIcon, sourceLabel } from "../../features/folders/fileFolders";
+import { Badge } from "../../components/ui/Badge";
 
 // What a library file says about itself — where it came from, whether a phone plays it, how long it
 // stays — drawn once for both paints of the list: the table's columns and the grid's cards.
diff --git a/frontend/src/components/filesContext.ts b/frontend/src/modules/files/filesContext.ts
similarity index 100%
rename from frontend/src/components/filesContext.ts
rename to frontend/src/modules/files/filesContext.ts
diff --git a/frontend/src/modules/files/index.ts b/frontend/src/modules/files/index.ts
new file mode 100644
index 00000000..11f424e1
--- /dev/null
+++ b/frontend/src/modules/files/index.ts
@@ -0,0 +1,3 @@
+// The Files page's public face: its store, mounted at the root and read app-wide.
+export { useFilesActions } from "./filesContext";
+export { filesModule } from "./module";
diff --git a/frontend/src/modules/files/module.ts b/frontend/src/modules/files/module.ts
new file mode 100644
index 00000000..4c3d798a
--- /dev/null
+++ b/frontend/src/modules/files/module.ts
@@ -0,0 +1,19 @@
+import { FolderOpen } from "lucide-react";
+import { lazyWithPreload, lazyWithPreloadAlongside } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+import { FilesProvider } from "./FilesProvider";
+
+// The rail loads with the page (lazyWithPreloadAlongside), so it never arrives after it.
+const Rail = lazyWithPreload(() => import("./FilesRail"));
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page and rail load lazily.
+export const filesModule: ModuleDef = {
+  id: "files",
+  labelKey: "files.navLabel",
+  railKey: "nav.rail.files",
+  icon: FolderOpen,
+  Rail,
+  Page: lazyWithPreloadAlongside(() => import("./Files"), Rail),
+  maxWidth: "80rem",
+  Store: FilesProvider,
+};
diff --git a/frontend/src/components/useFileActions.tsx b/frontend/src/modules/files/useFileActions.tsx
similarity index 94%
rename from frontend/src/components/useFileActions.tsx
rename to frontend/src/modules/files/useFileActions.tsx
index 0dbd6e70..dddb3446 100644
--- a/frontend/src/components/useFileActions.tsx
+++ b/frontend/src/modules/files/useFileActions.tsx
@@ -17,17 +17,17 @@ import {
   SkipBack,
   Trash2,
 } from "lucide-react";
-import { api, type DownloadJobKind, type FileFolder, type LibraryFile } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { invalidateDownloads, quickShareLink } from "../lib/downloads";
-import { forgetFinished } from "../lib/downloadQueue";
-import { libraryRowActions, sharedRowActions } from "../lib/downloadActions";
-import { useConfirm } from "./confirmContext";
-import { useCopyItems } from "./copyItems";
-import { jobTitle } from "./downloadTitle";
-import { folderLabel } from "./fileFolders";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { menuGroups } from "./ui/menuGroups";
+import { api, type DownloadJobKind, type FileFolder, type LibraryFile } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { invalidateDownloads, quickShareLink } from "../../lib/downloads";
+import { forgetFinished } from "../../lib/downloadQueue";
+import { libraryRowActions, sharedRowActions } from "../../lib/downloadActions";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { useCopyItems } from "../../components/ui/copyItems";
+import { jobTitle } from "../../features/downloads/downloadTitle";
+import { folderLabel } from "../../features/folders/fileFolders";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { menuGroups } from "../../components/ui/menuGroups";
 
 // The Files rows' ONE menu, and the actions the rows show as icons (the same ones, so a row's every
 // action is reachable by right click — DESIGN.md "Library list columns"). My own files and the ones
diff --git a/frontend/src/components/useFolderActions.tsx b/frontend/src/modules/files/useFolderActions.tsx
similarity index 92%
rename from frontend/src/components/useFolderActions.tsx
rename to frontend/src/modules/files/useFolderActions.tsx
index 5cc33d85..33833de9 100644
--- a/frontend/src/components/useFolderActions.tsx
+++ b/frontend/src/modules/files/useFolderActions.tsx
@@ -2,13 +2,13 @@ import { lazy, Suspense, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { Clock, Link, Pencil, Share2, Trash2 } from "lucide-react";
-import { api, type FileFolder, type FolderPatch } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { invalidateDownloads, quickShareLink } from "../lib/downloads";
-import { useConfirm } from "./confirmContext";
-import { folderLabel } from "./fileFolders";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { menuGroups } from "./ui/menuGroups";
+import { api, type FileFolder, type FolderPatch } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { invalidateDownloads, quickShareLink } from "../../lib/downloads";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { folderLabel } from "../../features/folders/fileFolders";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { menuGroups } from "../../components/ui/menuGroups";
 
 // A library folder's ONE menu — the rail entry's right click and the Files page's "…" beside an open
 // folder's name. An own folder is shared by link (its link opens whatever is in it), renamed (inline,
diff --git a/frontend/src/components/Home.dom.test.tsx b/frontend/src/modules/home/Home.dom.test.tsx
similarity index 99%
rename from frontend/src/components/Home.dom.test.tsx
rename to frontend/src/modules/home/Home.dom.test.tsx
index 1f94ae45..21c1f925 100644
--- a/frontend/src/components/Home.dom.test.tsx
+++ b/frontend/src/modules/home/Home.dom.test.tsx
@@ -9,12 +9,12 @@
 //     identical card straight back and the button looks dead.
 // i18n is key-passthrough; the api is mocked so queries resolve synchronously. The rails live inside
 // a Carousel (useHScroll → ResizeObserver), stubbed for jsdom.
-import { setLanguage } from "../i18n";
+import { setLanguage } from "../../i18n";
 import { StrictMode } from "react";
 import { describe, it, expect, afterEach, beforeAll, beforeEach, vi } from "vitest";
 import { act, render, screen, fireEvent, cleanup, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 
 beforeAll(() => {
   class Stub {
@@ -45,7 +45,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 
 const discover = vi.fn();
 const discoverPick = vi.fn();
-vi.mock("../lib/api", () => ({
+vi.mock("../../lib/api", () => ({
   api: {
     discover: (...a: unknown[]) => discover(...a),
     discoverPick: (...a: unknown[]) => discoverPick(...a),
@@ -63,15 +63,15 @@ vi.mock("../lib/api", () => ({
 // WHAT is handed over is: the jump target decides both what plays and where Back goes.
 const setPage = vi.fn();
 const setJumpTo = vi.fn();
-vi.mock("./navigationContext", () => ({
+vi.mock("../../features/navigation/navigationContext", () => ({
   useNavigationActions: () => ({ setPage: (p: string) => setPage(p) }),
 }));
-vi.mock("./plexContext", () => ({
+vi.mock("../plex/plexContext", () => ({
   usePlexActions: () => ({ setJumpTo: (t: unknown) => setJumpTo(t) }),
 }));
 
 import Home from "./Home";
-import { requestSurprise, takeSurprise } from "../lib/homeIntent";
+import { requestSurprise, takeSurprise } from "../../lib/homeIntent";
 
 function ytCard(id: string, title: string, extra: Record<string, unknown> = {}) {
   return {
diff --git a/frontend/src/components/Home.pin.dom.test.tsx b/frontend/src/modules/home/Home.pin.dom.test.tsx
similarity index 98%
rename from frontend/src/components/Home.pin.dom.test.tsx
rename to frontend/src/modules/home/Home.pin.dom.test.tsx
index bcb78a04..898a5f68 100644
--- a/frontend/src/components/Home.pin.dom.test.tsx
+++ b/frontend/src/modules/home/Home.pin.dom.test.tsx
@@ -46,7 +46,7 @@ const comfortPins = vi.fn();
 const addComfortPin = vi.fn();
 const removeComfortPin = vi.fn();
 const reorderComfortPins = vi.fn();
-vi.mock("../lib/api", () => ({
+vi.mock("../../lib/api", () => ({
   api: {
     discover: (...a: unknown[]) => discover(...a),
     discoverPick: () => new Promise(() => {}),
@@ -66,13 +66,13 @@ vi.mock("../lib/api", () => ({
 }));
 
 const openChannel = vi.fn();
-vi.mock("./navigationContext", () => ({
+vi.mock("../../features/navigation/navigationContext", () => ({
   useNavigationActions: () => ({
     setPage: vi.fn(),
     openChannel: (...a: unknown[]) => openChannel(...a),
   }),
 }));
-vi.mock("./plexContext", () => ({ usePlexActions: () => ({ setJumpTo: vi.fn() }) }));
+vi.mock("../plex/plexContext", () => ({ usePlexActions: () => ({ setJumpTo: vi.fn() }) }));
 
 import Home from "./Home";
 
diff --git a/frontend/src/components/Home.tsx b/frontend/src/modules/home/Home.tsx
similarity index 96%
rename from frontend/src/components/Home.tsx
rename to frontend/src/modules/home/Home.tsx
index 44a53f2b..89309d64 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/modules/home/Home.tsx
@@ -13,8 +13,8 @@ import {
   SkipBack,
   Star,
 } from "lucide-react";
-import { qk } from "../lib/queryKeys";
-import { plexLang } from "../i18n";
+import { qk } from "../../lib/queryKeys";
+import { plexLang } from "../../i18n";
 import {
   api,
   DISCOVER_BUDGETS,
@@ -27,41 +27,46 @@ import {
   type PlexCard,
   type Video,
   type VideoStatus,
-} from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { takeSurprise, useSurpriseRequest } from "../lib/homeIntent";
+} from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { takeSurprise, useSurpriseRequest } from "../../lib/homeIntent";
 import {
   formatCompact,
   formatDecimal,
   formatDuration,
   formatRuntime,
   relativeTime,
-} from "../lib/format";
-import { toggleWatchState } from "../lib/plexWatch";
-import { useComfortPin, pinTargetForCard, shelfMoveTarget, type ShelfMove } from "./comfortPin";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { Button } from "./ui/Button";
-import { Carousel } from "./ui/Carousel";
-import { ContextMenu } from "./ui/ContextMenu";
-import { useContextMenu, useItemTriggers } from "./ui/useContextMenu";
-import SegmentedToggle from "./ui/SegmentedToggle";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import VideoCard, { VideoHoverActions } from "./VideoCard";
-import { useVideoActions } from "./useVideoActions";
-import { usePlexCardActions } from "./usePlexCardActions";
-import { PlexHoverBar, PlexPosterCard } from "./plexCards";
-import { usePlaylistsActions } from "./playlistsContext";
-import { useNavigationActions } from "./navigationContext";
-import { usePlexActions } from "./plexContext";
-import { navItemAttrs } from "../lib/listNav";
-import { Pressable } from "./ui/Pressable";
-import { SURFACE } from "./ui/surfaces";
+} from "../../lib/format";
+import { toggleWatchState } from "../../lib/plexWatch";
+import {
+  useComfortPin,
+  pinTargetForCard,
+  shelfMoveTarget,
+  type ShelfMove,
+} from "../../features/comfort/comfortPin";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { Button } from "../../components/ui/Button";
+import { Carousel } from "../../components/ui/Carousel";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { useContextMenu, useItemTriggers } from "../../components/ui/useContextMenu";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import VideoCard, { VideoHoverActions } from "../../features/video/VideoCard";
+import { useVideoActions } from "../../features/video/useVideoActions";
+import { usePlexCardActions } from "../../features/plexCards/usePlexCardActions";
+import { PlexHoverBar, PlexPosterCard } from "../../features/plexCards/plexCards";
+import { usePlaylistsActions } from "../playlists";
+import { useNavigationActions } from "../../features/navigation/navigationContext";
+import { usePlexActions } from "../plex";
+import { navItemAttrs } from "../../lib/listNav";
+import { Pressable } from "../../components/ui/Pressable";
+import { SURFACE } from "../../components/ui/surfaces";
 import clsx from "clsx";
-import { IconButton } from "./ui/IconButton";
-import { MoreButton } from "./ui/MoreButton";
-import { HOVER_YIELD } from "./ui/reveal";
-import { MediaResumeButtons } from "./MediaResumeButtons";
-import { MediaCard, MediaPlayGlyph } from "./ui/MediaCard";
+import { IconButton } from "../../components/ui/IconButton";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { HOVER_YIELD } from "../../components/ui/reveal";
+import { MediaResumeButtons } from "../../features/video/MediaResumeButtons";
+import { MediaCard, MediaPlayGlyph } from "../../components/ui/MediaCard";
 import {
   MEDIA_BAR,
   MEDIA_BADGE,
@@ -71,8 +76,8 @@ import {
   MEDIA_PICTURE,
   mediaPictureBox,
   mediaTitleClass,
-} from "./ui/mediaCardStyles";
-import RemoteImage from "./ui/RemoteImage";
+} from "../../components/ui/mediaCardStyles";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // The Home surface — "Mit nézzek most?".
 //
@@ -89,7 +94,7 @@ import RemoteImage from "./ui/RemoteImage";
 // in the app and `PosterTile`'s art is hardcoded to a Plex image URL.
 
 // Lazy, exactly as the feed does it: the YouTube IFrame player loads only once something is played.
-const PlayerModal = lazy(() => import("./PlayerModal"));
+const PlayerModal = lazy(() => import("../../features/player/PlayerModal"));
 
 // From the api slice's own list, not a second copy: `readonly DiscoverBudget[]` accepts any
 // SUBSET, so a band added server-side and to `DISCOVER_BUDGETS` typechecked green while this row
diff --git a/frontend/src/modules/home/index.ts b/frontend/src/modules/home/index.ts
new file mode 100644
index 00000000..e9e067e2
--- /dev/null
+++ b/frontend/src/modules/home/index.ts
@@ -0,0 +1,2 @@
+// The home page's public face: how the shell and the navigation know it.
+export { homeModule } from "./module";
diff --git a/frontend/src/modules/home/module.ts b/frontend/src/modules/home/module.ts
new file mode 100644
index 00000000..cc6c0450
--- /dev/null
+++ b/frontend/src/modules/home/module.ts
@@ -0,0 +1,14 @@
+import { Home } from "lucide-react";
+import { lazyWithPreload } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page loads lazily.
+export const homeModule: ModuleDef = {
+  id: "home",
+  labelKey: "home.navLabel",
+  railKey: "nav.rail.home",
+  titleKey: "home.title",
+  icon: Home,
+  Page: lazyWithPreload(() => import("./Home")),
+  maxWidth: "80rem",
+};
diff --git a/frontend/src/components/NotificationsPanel.menu.dom.test.tsx b/frontend/src/modules/notifications/NotificationsPanel.menu.dom.test.tsx
similarity index 93%
rename from frontend/src/components/NotificationsPanel.menu.dom.test.tsx
rename to frontend/src/modules/notifications/NotificationsPanel.menu.dom.test.tsx
index 6aacb9af..28360123 100644
--- a/frontend/src/components/NotificationsPanel.menu.dom.test.tsx
+++ b/frontend/src/modules/notifications/NotificationsPanel.menu.dom.test.tsx
@@ -8,8 +8,8 @@
 import { afterEach, describe, expect, it, onTestFinished, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { api, type AppNotification } from "../lib/api";
-import type { Notification as ClientNotif } from "../lib/notifications";
+import { api, type AppNotification } from "../../lib/api";
+import type { Notification as ClientNotif } from "../../lib/notifications";
 
 const h = vi.hoisted(() => ({
   server: [] as unknown[],
@@ -27,8 +27,8 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => h.confirm }));
-vi.mock("../lib/useLiveQuery", () => ({
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => h.confirm }));
+vi.mock("../../lib/useLiveQuery", () => ({
   useLiveQuery: () => ({
     data: { items: h.server, total: h.server.length },
     isError: false,
@@ -36,8 +36,8 @@ vi.mock("../lib/useLiveQuery", () => ({
     refetch: vi.fn(),
   }),
 }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   subscribe: () => () => {},
   getNotifications: () => h.client,
   getUnreadCount: () => 0,
@@ -45,11 +45,15 @@ vi.mock("../lib/notifications", async (importOriginal) => ({
   remove: (id: number) => h.remove(id),
   clearAll: () => h.clearAll(),
 }));
-vi.mock("../lib/settingsTab", () => ({ focusSettingsTab: h.focusSettingsTab }));
-vi.mock("./navigationContext", () => ({ useNavigationActions: () => ({ setPage: h.setPage }) }));
-vi.mock("./filesContext", () => ({ useFilesActions: () => ({ openFile: h.openFile }) }));
-vi.mock("./channelsContext", () => ({ useChannelsActions: () => ({ focusChannel: vi.fn() }) }));
-vi.mock("./feedFiltersContext", () => ({
+vi.mock("../../lib/settingsTab", () => ({ focusSettingsTab: h.focusSettingsTab }));
+vi.mock("../../features/navigation/navigationContext", () => ({
+  useNavigationActions: () => ({ setPage: h.setPage }),
+}));
+vi.mock("../files/filesContext", () => ({ useFilesActions: () => ({ openFile: h.openFile }) }));
+vi.mock("../channels/channelsContext", () => ({
+  useChannelsActions: () => ({ focusChannel: vi.fn() }),
+}));
+vi.mock("../feed/feedFiltersContext", () => ({
   // Every narrowing a feed can carry (the year, the custom range, the length, the
   // content types and the scope survived "Find in feed" and could still hide the video).
   useFeedFilters: () => ({
@@ -74,13 +78,13 @@ vi.mock("./feedFiltersContext", () => ({
   }),
   useFeedFiltersActions: () => ({ setFilters: h.setFilters }),
 }));
-vi.mock("./ui/PageShell", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("./ui/PageShell")>()),
+vi.mock("../../components/ui/PageShell", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../components/ui/PageShell")>()),
   PageToolbar: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }));
 
 import NotificationsPanel from "./NotificationsPanel";
-import PageShell from "./ui/PageShell";
+import PageShell from "../../components/ui/PageShell";
 
 afterEach(() => {
   cleanup();
diff --git a/frontend/src/components/NotificationsPanel.tsx b/frontend/src/modules/notifications/NotificationsPanel.tsx
similarity index 93%
rename from frontend/src/components/NotificationsPanel.tsx
rename to frontend/src/modules/notifications/NotificationsPanel.tsx
index 98f19f26..4b220755 100644
--- a/frontend/src/components/NotificationsPanel.tsx
+++ b/frontend/src/modules/notifications/NotificationsPanel.tsx
@@ -2,7 +2,7 @@ import { useEffect, useSyncExternalStore, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import {
   Activity,
   Bell,
@@ -19,12 +19,12 @@ import {
   UserPlus,
   X,
 } from "lucide-react";
-import { api, type AppNotification } from "../lib/api";
-import { jobRunText } from "../lib/jobResult";
-import { notifyActionError } from "../lib/actionErrors";
-import { useLiveQuery } from "../lib/useLiveQuery";
-import { focusAccessRequestsTab } from "../lib/adminUsersTab";
-import { focusSettingsTab } from "../lib/settingsTab";
+import { api, type AppNotification } from "../../lib/api";
+import { jobRunText } from "../../lib/jobResult";
+import { notifyActionError } from "../../lib/actionErrors";
+import { useLiveQuery } from "../../lib/useLiveQuery";
+import { focusAccessRequestsTab } from "../../lib/adminUsersTab";
+import { focusSettingsTab } from "../../lib/settingsTab";
 import {
   clearAll as clearClient,
   dismiss as dismissClient,
@@ -38,30 +38,30 @@ import {
   type ChannelSubscribedMeta,
   type VideoHiddenMeta,
   type VideoWatchedMeta,
-} from "../lib/notifications";
-import { channelYouTubeUrl, formatDate } from "../lib/format";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { LEVEL_STYLE } from "./ui/toastLevels";
-import { PageToolbar } from "./ui/PageShell";
-import { PageMenu } from "./ui/PageMenu";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { useNavigationActions } from "./navigationContext";
-import { useFilesActions } from "./filesContext";
-import { useChannelsActions } from "./channelsContext";
-import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
-import { SURFACE } from "./ui/surfaces";
-import { SectionLabel } from "./ui/Headings";
-import NavGrid from "./ui/NavGrid";
-import { navItemAttrs } from "../lib/listNav";
-import { useContextMenu, type ContextMenuController } from "./ui/useContextMenu";
-import { ContextMenu } from "./ui/ContextMenu";
-import { MoreButton } from "./ui/MoreButton";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { menuGroups } from "./ui/menuGroups";
-import { HOVER_REVEAL } from "./ui/reveal";
-import { useConfirm } from "./confirmContext";
-import { RelativeTime } from "./ui/RelativeTime";
+} from "../../lib/notifications";
+import { channelYouTubeUrl, formatDate } from "../../lib/format";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { LEVEL_STYLE } from "../../components/ui/toastLevels";
+import { PageToolbar } from "../../components/ui/PageShell";
+import { PageMenu } from "../../components/ui/PageMenu";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { useNavigationActions } from "../../features/navigation/navigationContext";
+import { useFilesActions } from "../files";
+import { useChannelsActions } from "../channels";
+import { useFeedFilters, useFeedFiltersActions } from "../feed";
+import { SURFACE } from "../../components/ui/surfaces";
+import { SectionLabel } from "../../components/ui/Headings";
+import NavGrid from "../../components/ui/NavGrid";
+import { navItemAttrs } from "../../lib/listNav";
+import { useContextMenu, type ContextMenuController } from "../../components/ui/useContextMenu";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { menuGroups } from "../../components/ui/menuGroups";
+import { HOVER_REVEAL } from "../../components/ui/reveal";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { RelativeTime } from "../../components/ui/RelativeTime";
 
 // The single notification center. "System" = durable, server-backed notifications (inbox
 // phase 1). "Activity" = the client-side transient events (action confirmations, errors, with
diff --git a/frontend/src/modules/notifications/index.ts b/frontend/src/modules/notifications/index.ts
new file mode 100644
index 00000000..23d8f2d2
--- /dev/null
+++ b/frontend/src/modules/notifications/index.ts
@@ -0,0 +1,2 @@
+// The notifications page's public face: how the shell and the navigation know it.
+export { notificationsModule } from "./module";
diff --git a/frontend/src/modules/notifications/module.ts b/frontend/src/modules/notifications/module.ts
new file mode 100644
index 00000000..bd3072e1
--- /dev/null
+++ b/frontend/src/modules/notifications/module.ts
@@ -0,0 +1,14 @@
+import { Bell } from "lucide-react";
+import { lazyWithPreload } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page loads lazily.
+export const notificationsModule: ModuleDef = {
+  id: "notifications",
+  labelKey: "inbox.navLabel",
+  railKey: "nav.rail.notifications",
+  icon: Bell,
+  hasBadge: true,
+  Page: lazyWithPreload(() => import("./NotificationsPanel")),
+  maxWidth: "48rem",
+};
diff --git a/frontend/src/components/PlaylistLimitsHint.dom.test.tsx b/frontend/src/modules/playlists/PlaylistLimitsHint.dom.test.tsx
similarity index 100%
rename from frontend/src/components/PlaylistLimitsHint.dom.test.tsx
rename to frontend/src/modules/playlists/PlaylistLimitsHint.dom.test.tsx
diff --git a/frontend/src/components/PlaylistLimitsHint.tsx b/frontend/src/modules/playlists/PlaylistLimitsHint.tsx
similarity index 88%
rename from frontend/src/components/PlaylistLimitsHint.tsx
rename to frontend/src/modules/playlists/PlaylistLimitsHint.tsx
index 44261c40..7a826dd0 100644
--- a/frontend/src/components/PlaylistLimitsHint.tsx
+++ b/frontend/src/modules/playlists/PlaylistLimitsHint.tsx
@@ -2,10 +2,10 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Info } from "lucide-react";
 
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { Button } from "./ui/Button";
-import { SURFACE } from "./ui/surfaces";
+import { PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { Button } from "../../components/ui/Button";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // The playlists module shows fewer lists than youtube.com does, and without a word about it that
 // reads as Siftlode being broken (the owner's ask, 2026-09-03: say it is YouTube's API, up front).
diff --git a/frontend/src/components/Playlists.dom.test.tsx b/frontend/src/modules/playlists/Playlists.dom.test.tsx
similarity index 95%
rename from frontend/src/components/Playlists.dom.test.tsx
rename to frontend/src/modules/playlists/Playlists.dom.test.tsx
index 9f5dfb59..5ec27bd5 100644
--- a/frontend/src/components/Playlists.dom.test.tsx
+++ b/frontend/src/modules/playlists/Playlists.dom.test.tsx
@@ -12,6 +12,8 @@ const h = vi.hoisted(() => ({
   notify: vi.fn(),
   confirm: vi.fn(async () => true),
   selectedId: 1 as number | null,
+  // Who reads the selection, so a test's change re-renders them the way the real store does.
+  selectionReaders: new Set<() => void>(),
   mounted: false,
   mounts: 0,
   player: null as null | {
@@ -32,12 +34,25 @@ vi.mock("react-i18next", async (importOriginal) => {
     }),
   };
 });
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify: (...a: unknown[]) => h.notify(...a),
 }));
-vi.mock("./playlistsContext", () => ({ usePlaylists: () => ({ selectedId: h.selectedId }) }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => h.confirm }));
+vi.mock("./playlistsContext", async () => {
+  const { useSyncExternalStore } = await import("react");
+  const subscribe = (read: () => void) => {
+    h.selectionReaders.add(read);
+    return () => void h.selectionReaders.delete(read);
+  };
+  return {
+    usePlaylists: () => ({
+      selectedId: useSyncExternalStore(subscribe, () => h.selectedId),
+      search: "",
+    }),
+    usePlaylistsActions: () => ({ setSearch: () => {} }),
+  };
+});
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => h.confirm }));
 // The list's own menu is usePlaylistActions' (pinned in its own test); here its rename row, which
 // opens THIS page's title field, and its two destructive rows as that hook marks them (danger).
 vi.mock("./usePlaylistActions", () => ({
@@ -51,7 +66,7 @@ vi.mock("./usePlaylistActions", () => ({
     ],
   }),
 }));
-vi.mock("./PlayerModal", async () => {
+vi.mock("../../features/player/PlayerModal", async () => {
   const { useEffect } = await import("react");
   return {
     default: function PlayerStandIn(props: NonNullable<typeof h.player>) {
@@ -69,11 +84,11 @@ vi.mock("./PlayerModal", async () => {
 });
 
 import Playlists from "./Playlists";
-import { PageToolbarSlot } from "./ui/pageToolbarSlot";
-import { PageMenuSlot, type PageMenuOpener } from "./ui/pageMenuSlot";
-import { api, HttpError, type Video } from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { patchCachedProgress } from "../lib/progressCache";
+import { PageToolbarSlot } from "../../components/ui/pageToolbarSlot";
+import { PageMenuSlot, type PageMenuOpener } from "../../components/ui/pageMenuSlot";
+import { api, HttpError, type Video } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { patchCachedProgress } from "../../lib/progressCache";
 
 beforeAll(() => {
   class Stub {
@@ -143,7 +158,14 @@ function mount(
   );
   const tree = () => (strictOverCache ? <StrictMode>{page()}</StrictMode> : page());
   const view = render(tree());
-  return { rerender: () => view.rerender(tree()) };
+  // A changed `h.selectedId` reaches the page as a store change, not as a re-render from the top: the
+  // page's own parts re-render because they read the selection, as in the app.
+  return {
+    rerender: () => {
+      act(() => h.selectionReaders.forEach((read) => read()));
+      view.rerender(tree());
+    },
+  };
 }
 
 const play = async (title: string) =>
diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/modules/playlists/Playlists.tsx
similarity index 94%
rename from frontend/src/components/Playlists.tsx
rename to frontend/src/modules/playlists/Playlists.tsx
index b3ae78be..3f15ad6a 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/modules/playlists/Playlists.tsx
@@ -1,8 +1,8 @@
 import { lazy, Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { useLatest, useStableCallback } from "../lib/useLatest";
+import { useLatest, useStableCallback } from "../../lib/useLatest";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import {
   DndContext,
   KeyboardSensor,
@@ -20,54 +20,55 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Check, FolderInput, History, ListPlus, Play, X } from "lucide-react";
-import { YouTubeIcon } from "../lib/brandIcons";
-import { api, type Playlist, type PlaylistDetail, type Video } from "../lib/api";
-import { notify } from "../lib/notifications";
-import { notifyActionError } from "../lib/actionErrors";
-import { notifyYouTubeActionError } from "../lib/youtubeErrors";
-import { playlistName } from "../lib/playlistName";
-import { reinsertAt } from "../lib/reinsert";
-import { useUndoable } from "../lib/useUndoable";
-import { cycleSort, type SortState } from "../lib/columnSort";
-import { formatRuntime } from "../lib/format";
-import { applyView, sameOrder } from "../lib/playlistView";
-const PlayerModal = lazy(() => import("./PlayerModal"));
-import { Button } from "./ui/Button";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { useComfortPin, pinPlaylist, pinVideo } from "./comfortPin";
-import { ContextMenu } from "./ui/ContextMenu";
-import { useContextMenu } from "./ui/useContextMenu";
-import { usePageMenu } from "./ui/pageMenuSlot";
-import { menuGroups } from "./ui/menuGroups";
-import UndoToolbar from "./ui/UndoToolbar";
-import NavGrid from "./ui/NavGrid";
-import { PageToolbar } from "./ui/PageShell";
+import { YouTubeIcon } from "../../lib/brandIcons";
+import { api, type Playlist, type PlaylistDetail, type Video } from "../../lib/api";
+import { notify } from "../../lib/notifications";
+import { notifyActionError } from "../../lib/actionErrors";
+import { notifyYouTubeActionError } from "../../lib/youtubeErrors";
+import { playlistName } from "../../lib/playlistName";
+import { reinsertAt } from "../../lib/reinsert";
+import { useUndoable } from "../../lib/useUndoable";
+import { cycleSort, type SortState } from "../../lib/columnSort";
+import { formatRuntime } from "../../lib/format";
+import { applyView, sameOrder } from "../../lib/playlistView";
+const PlayerModal = lazy(() => import("../../features/player/PlayerModal"));
+import { Button } from "../../components/ui/Button";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { useComfortPin, pinPlaylist, pinVideo } from "../../features/comfort/comfortPin";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { usePageMenu } from "../../components/ui/pageMenuSlot";
+import { menuGroups } from "../../components/ui/menuGroups";
+import UndoToolbar from "../../components/ui/UndoToolbar";
+import NavGrid from "../../components/ui/NavGrid";
+import { PageToolbar } from "../../components/ui/PageShell";
 import { usePlaylistActions } from "./usePlaylistActions";
 import { usePlaylists } from "./playlistsContext";
-import { usePref } from "../lib/usePref";
-import { navItemAttrs } from "../lib/listNav";
-import { ColumnHead } from "./ui/tableHeader";
-import { alignClass } from "./ui/tableAlign";
+import { usePref } from "../../lib/usePref";
+import { navItemAttrs } from "../../lib/listNav";
+import { ColumnHead } from "../../components/ui/tableHeader";
+import { alignClass } from "../../components/ui/tableAlign";
 import {
   columnHideClass,
   filterRows,
   isActive,
   type Column,
   type FilterMap,
-} from "../lib/tableColumns";
+} from "../../lib/tableColumns";
 import { GRIP_KEY, playlistColumns } from "./playlistColumns";
-import { useSortableA11y, useSortableItem } from "./ui/sortableA11y";
-import { DragHandle } from "./ui/DragHandle";
-import { useOrderItems } from "./ui/useOrderItems";
-import { Input } from "./ui/Input";
-import { CheckRow } from "./ui/NativeControls";
-import { useReturnFocus } from "./ui/useReturnFocus";
-import { MoreButton } from "./ui/MoreButton";
-import { HiddenFilterCue } from "./ui/HiddenFilterCue";
-import { PageHeading } from "./ui/Headings";
-import { useCopyItems } from "./copyItems";
-import RemoteImage from "./ui/RemoteImage";
+import { useSortableA11y, useSortableItem } from "../../components/ui/sortableA11y";
+import { DragHandle } from "../../components/ui/DragHandle";
+import { useOrderItems } from "../../components/ui/useOrderItems";
+import { Input } from "../../components/ui/Input";
+import { CheckRow } from "../../components/ui/NativeControls";
+import { useReturnFocus } from "../../components/ui/useReturnFocus";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { HiddenFilterCue } from "../../components/ui/HiddenFilterCue";
+import { PageHeading } from "../../components/ui/Headings";
+import { useCopyItems } from "../../components/ui/copyItems";
+import RemoteImage from "../../components/ui/RemoteImage";
+import PlaylistsHeader from "./PlaylistsHeader";
 
 // The playlist detail is a HYBRID table: real sortable/filterable column headers over a
 // body that is still a drag-reorderable @dnd-kit list.
@@ -160,7 +161,18 @@ function Row({
   );
 }
 
+// The page: its header pill, and the selected playlist's detail (whose loading and empty states
+// return early, so the header sits outside it).
 export default function Playlists() {
+  return (
+    <>
+      <PlaylistsHeader />
+      <PlaylistDetail />
+    </>
+  );
+}
+
+function PlaylistDetail() {
   // The selected playlist lives in PlaylistsProvider, shared with the PlaylistsRail (which owns the
   // list + its rail controls). This detail pane reacts to the selection.
   const { selectedId } = usePlaylists();
diff --git a/frontend/src/modules/playlists/PlaylistsHeader.tsx b/frontend/src/modules/playlists/PlaylistsHeader.tsx
new file mode 100644
index 00000000..a57e6bbd
--- /dev/null
+++ b/frontend/src/modules/playlists/PlaylistsHeader.tsx
@@ -0,0 +1,22 @@
+import { useTranslation } from "react-i18next";
+import { PageHeader } from "../../components/ui/PageShell";
+import SearchBar from "../../features/header/SearchBar";
+import { blurActive } from "../../features/header/blurActive";
+import { usePlaylists, usePlaylistsActions } from "./playlistsContext";
+
+// The playlists page's pill in the floating header: the rail's name filter.
+export default function PlaylistsHeader() {
+  const { t } = useTranslation();
+  const { search } = usePlaylists();
+  const { setSearch } = usePlaylistsActions();
+  return (
+    <PageHeader>
+      <SearchBar
+        value={search}
+        placeholder={t("playlists.searchPlaceholder")}
+        onChange={setSearch}
+        onGo={blurActive}
+      />
+    </PageHeader>
+  );
+}
diff --git a/frontend/src/components/PlaylistsProvider.tsx b/frontend/src/modules/playlists/PlaylistsProvider.tsx
similarity index 92%
rename from frontend/src/components/PlaylistsProvider.tsx
rename to frontend/src/modules/playlists/PlaylistsProvider.tsx
index 16581ff7..31277fe6 100644
--- a/frontend/src/components/PlaylistsProvider.tsx
+++ b/frontend/src/modules/playlists/PlaylistsProvider.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState, type ReactNode } from "react";
-import { LS, setAccountRaw } from "../lib/storage";
-import { useUrlMirror } from "../lib/useUrlMirror";
-import { useNavigation } from "./navigationContext";
+import { LS, setAccountRaw } from "../../lib/storage";
+import { useUrlMirror } from "../../lib/useUrlMirror";
+import { useNavigation } from "../../features/navigation/navigationContext";
 import { readSelectedId } from "./playlistsInit";
 import {
   PlaylistsActionsContext,
diff --git a/frontend/src/components/PlaylistsRail.rename.dom.test.tsx b/frontend/src/modules/playlists/PlaylistsRail.rename.dom.test.tsx
similarity index 89%
rename from frontend/src/components/PlaylistsRail.rename.dom.test.tsx
rename to frontend/src/modules/playlists/PlaylistsRail.rename.dom.test.tsx
index 45a0366e..ff2e5f38 100644
--- a/frontend/src/components/PlaylistsRail.rename.dom.test.tsx
+++ b/frontend/src/modules/playlists/PlaylistsRail.rename.dom.test.tsx
@@ -10,6 +10,15 @@ import { FloatingTree } from "@floating-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 
+// The rail's own state, pinned open: these tests are about what it lists, not how it folds.
+vi.mock("../../lib/useRail", () => ({
+  useRail: () => ({
+    layout: { order: ["manage", "list"], collapsed: {}, hidden: {} },
+    setLayout: () => {},
+    collapsed: false,
+    onToggleCollapse: () => {},
+  }),
+}));
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
   return { ...actual, useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }) };
@@ -18,20 +27,20 @@ vi.mock("./playlistsContext", () => ({
   usePlaylists: () => ({ search: "", selectedId: 1 }),
   usePlaylistsActions: () => ({ setSelectedId: vi.fn() }),
 }));
-vi.mock("../lib/useMe", () => ({ useMe: () => ({ can_write: true }) }));
-vi.mock("./comfortPin", () => ({
+vi.mock("../../lib/useMe", () => ({ useMe: () => ({ can_write: true }) }));
+vi.mock("../../features/comfort/comfortPin", () => ({
   useComfortPin: () => ({ item: () => [] }),
   pinPlaylist: (id: number) => id,
 }));
 // The real usePlaylistActions builds the menu (the rename row is its first); only the dialogs are
 // stubbed, and the write is watched at the API.
-vi.mock("./confirmContext", () => ({
+vi.mock("../../components/ui/confirmContext", () => ({
   useChoice: () => async () => null,
   useConfirm: () => async () => false,
 }));
 const rename = vi.fn(async () => ({}) as never);
 // The SidePanel/PanelGroups chrome is not what is under test: render the rail's bodies directly.
-vi.mock("./FilterRail", () => ({
+vi.mock("../../components/ui/FilterRail", () => ({
   default: ({ items }: { items: { id: string; body: ReactNode }[] }) => (
     <>
       {items.map((i) => (
@@ -42,7 +51,7 @@ vi.mock("./FilterRail", () => ({
 }));
 
 import PlaylistsRail from "./PlaylistsRail";
-import { api, type Playlist } from "../lib/api";
+import { api, type Playlist } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
@@ -82,12 +91,7 @@ async function openRename() {
   render(
     <QueryClientProvider client={qc}>
       <FloatingTree>
-        <PlaylistsRail
-          layout={{} as never}
-          setLayout={() => {}}
-          collapsed={false}
-          onToggleCollapse={() => {}}
-        />
+        <PlaylistsRail />
       </FloatingTree>
     </QueryClientProvider>,
   );
@@ -130,12 +134,7 @@ describe("PlaylistsRail · the row's '…'", () => {
     render(
       <QueryClientProvider client={qc}>
         <FloatingTree>
-          <PlaylistsRail
-            layout={{} as never}
-            setLayout={() => {}}
-            collapsed={false}
-            onToggleCollapse={() => {}}
-          />
+          <PlaylistsRail />
         </FloatingTree>
       </QueryClientProvider>,
     );
diff --git a/frontend/src/components/PlaylistsRail.tsx b/frontend/src/modules/playlists/PlaylistsRail.tsx
similarity index 90%
rename from frontend/src/components/PlaylistsRail.tsx
rename to frontend/src/modules/playlists/PlaylistsRail.tsx
index 7da03317..c6b21521 100644
--- a/frontend/src/components/PlaylistsRail.tsx
+++ b/frontend/src/modules/playlists/PlaylistsRail.tsx
@@ -1,36 +1,36 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { ListVideo, Pin, Plus, RefreshCw } from "lucide-react";
-import { YouTubeIcon } from "../lib/brandIcons";
-import { api, type Playlist } from "../lib/api";
-import { compareText } from "../lib/collate";
-import { formatRuntime } from "../lib/format";
-import { notify } from "../lib/notifications";
-import { notifyYouTubeActionError } from "../lib/youtubeErrors";
-import { LS } from "../lib/storage";
-import { usePref } from "../lib/usePref";
-import { type PanelLayout } from "../lib/panelLayout";
-import FilterRail from "./FilterRail";
-import { Button } from "./ui/Button";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { useComfortPin, pinPlaylist } from "./comfortPin";
-import { ContextMenu } from "./ui/ContextMenu";
-import { useContextMenu } from "./ui/useContextMenu";
-import { type PanelItem } from "./ui/PanelGroups";
-import SortControl from "./ui/SortControl";
-import { type SortOption } from "../lib/columnSort";
+import { YouTubeIcon } from "../../lib/brandIcons";
+import { api, type Playlist } from "../../lib/api";
+import { compareText } from "../../lib/collate";
+import { formatRuntime } from "../../lib/format";
+import { notify } from "../../lib/notifications";
+import { notifyYouTubeActionError } from "../../lib/youtubeErrors";
+import { LS } from "../../lib/storage";
+import { usePref } from "../../lib/usePref";
+import FilterRail from "../../components/ui/FilterRail";
+import { Button } from "../../components/ui/Button";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { useComfortPin, pinPlaylist } from "../../features/comfort/comfortPin";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { type PanelItem } from "../../components/ui/PanelGroups";
+import SortControl from "../../components/ui/SortControl";
+import { type SortOption } from "../../lib/columnSort";
 import { usePlaylists, usePlaylistsActions } from "./playlistsContext";
-import { useMe } from "../lib/useMe";
-import { playlistName } from "../lib/playlistName";
+import { useMe } from "../../lib/useMe";
+import { playlistName } from "../../lib/playlistName";
 import { usePlaylistActions } from "./usePlaylistActions";
 import PlaylistLimitsHint from "./PlaylistLimitsHint";
-import { IconButton } from "./ui/IconButton";
-import { Pressable } from "./ui/Pressable";
-import { Input } from "./ui/Input";
-import { MoreButton } from "./ui/MoreButton";
-import RemoteImage from "./ui/RemoteImage";
+import { IconButton } from "../../components/ui/IconButton";
+import { Pressable } from "../../components/ui/Pressable";
+import { Input } from "../../components/ui/Input";
+import { MoreButton } from "../../components/ui/MoreButton";
+import RemoteImage from "../../components/ui/RemoteImage";
+import { useRail } from "../../lib/useRail";
 
 type PlSort = {
   key: "custom" | "name" | "count" | "duration" | "recent";
@@ -47,17 +47,9 @@ const ROW_BASE = "w-full flex items-center gap-2.5 p-2 rounded-lg border transit
 // shared SidePanel with the same collapse-to-tab behavior. It owns the list query + its own rail
 // controls (sort / new / sync); the selected playlist is App state so the module's detail pane
 // (Playlists.tsx) reacts to it. Grouped into two islands: "manage" and the playlist list.
-export default function PlaylistsRail({
-  layout,
-  setLayout,
-  collapsed,
-  onToggleCollapse,
-}: {
-  layout: PanelLayout;
-  setLayout: (l: PanelLayout) => void;
-  collapsed: boolean;
-  onToggleCollapse: () => void;
-}) {
+export default function PlaylistsRail() {
+  // Its layout and collapse flag are its own (lib/useRail), so the shell only places it.
+  const { layout, setLayout, onResetLayout, collapsed, onToggleCollapse } = useRail("playlists");
   const canWrite = useMe().can_write;
   // The name filter + the selected playlist live in PlaylistsProvider (shared with the header search
   // box and the Playlists detail pane); this rail owns the list query + its own controls.
@@ -399,7 +391,7 @@ export default function PlaylistsRail({
 
   return (
     <FilterRail
-      kind="playlists"
+      onResetLayout={onResetLayout}
       title={t("playlists.title")}
       icon={<ListVideo className="w-4 h-4" />}
       collapsed={collapsed}
diff --git a/frontend/src/modules/playlists/index.ts b/frontend/src/modules/playlists/index.ts
new file mode 100644
index 00000000..2a988f81
--- /dev/null
+++ b/frontend/src/modules/playlists/index.ts
@@ -0,0 +1,3 @@
+// The playlists page's public face: its store, mounted at the root and read app-wide.
+export { usePlaylistsActions } from "./playlistsContext";
+export { playlistsModule } from "./module";
diff --git a/frontend/src/modules/playlists/module.ts b/frontend/src/modules/playlists/module.ts
new file mode 100644
index 00000000..4fba72dd
--- /dev/null
+++ b/frontend/src/modules/playlists/module.ts
@@ -0,0 +1,19 @@
+import { ListVideo } from "lucide-react";
+import { lazyWithPreload, lazyWithPreloadAlongside } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+import { PlaylistsProvider } from "./PlaylistsProvider";
+
+// The rail loads with the page (lazyWithPreloadAlongside), so it never arrives after it.
+const Rail = lazyWithPreload(() => import("./PlaylistsRail"));
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page and rail load lazily.
+export const playlistsModule: ModuleDef = {
+  id: "playlists",
+  labelKey: "header.account.playlists",
+  railKey: "nav.rail.playlists",
+  icon: ListVideo,
+  Rail,
+  Page: lazyWithPreloadAlongside(() => import("./Playlists"), Rail),
+  maxWidth: "64rem",
+  Store: PlaylistsProvider,
+};
diff --git a/frontend/src/components/playlistColumns.tsx b/frontend/src/modules/playlists/playlistColumns.tsx
similarity index 96%
rename from frontend/src/components/playlistColumns.tsx
rename to frontend/src/modules/playlists/playlistColumns.tsx
index 92de5133..acfe5b2b 100644
--- a/frontend/src/components/playlistColumns.tsx
+++ b/frontend/src/modules/playlists/playlistColumns.tsx
@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
 import { Play } from "lucide-react";
 import type { TFunction } from "i18next";
-import type { Video } from "../lib/api";
-import { formatDuration } from "../lib/format";
-import type { Column } from "../lib/tableColumns";
-import { Pressable } from "./ui/Pressable";
-import RemoteImage from "./ui/RemoteImage";
+import type { Video } from "../../lib/api";
+import { formatDuration } from "../../lib/format";
+import type { Column } from "../../lib/tableColumns";
+import { Pressable } from "../../components/ui/Pressable";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // Column definitions for the playlist detail table, in their own file like `channelColumns.tsx`.
 //
diff --git a/frontend/src/components/playlistsContext.ts b/frontend/src/modules/playlists/playlistsContext.ts
similarity index 100%
rename from frontend/src/components/playlistsContext.ts
rename to frontend/src/modules/playlists/playlistsContext.ts
diff --git a/frontend/src/components/playlistsInit.test.ts b/frontend/src/modules/playlists/playlistsInit.test.ts
similarity index 93%
rename from frontend/src/components/playlistsInit.test.ts
rename to frontend/src/modules/playlists/playlistsInit.test.ts
index c197999d..d8ffa216 100644
--- a/frontend/src/components/playlistsInit.test.ts
+++ b/frontend/src/modules/playlists/playlistsInit.test.ts
@@ -6,8 +6,8 @@
 import { describe, it, expect, beforeEach, vi } from "vitest";
 
 const { stored } = vi.hoisted(() => ({ stored: { v: null as string | null } }));
-vi.mock("../lib/storage", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/storage")>();
+vi.mock("../../lib/storage", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/storage")>();
   return { ...actual, getAccountRaw: () => stored.v };
 });
 
diff --git a/frontend/src/components/playlistsInit.ts b/frontend/src/modules/playlists/playlistsInit.ts
similarity index 86%
rename from frontend/src/components/playlistsInit.ts
rename to frontend/src/modules/playlists/playlistsInit.ts
index 9ff88506..dd6ec737 100644
--- a/frontend/src/components/playlistsInit.ts
+++ b/frontend/src/modules/playlists/playlistsInit.ts
@@ -1,5 +1,5 @@
-import { getAccountRaw, LS } from "../lib/storage";
-import { parsePositiveIntId } from "../lib/parseId";
+import { getAccountRaw, LS } from "../../lib/storage";
+import { parsePositiveIntId } from "../../lib/parseId";
 
 // The Playlists module's selected-id seed, split out of PlaylistsProvider so its ?pl guard is
 // unit-testable and the provider stays react-refresh-clean (component-only exports).
diff --git a/frontend/src/components/usePlaylistActions.dom.test.tsx b/frontend/src/modules/playlists/usePlaylistActions.dom.test.tsx
similarity index 95%
rename from frontend/src/components/usePlaylistActions.dom.test.tsx
rename to frontend/src/modules/playlists/usePlaylistActions.dom.test.tsx
index 91034958..ce75c3f2 100644
--- a/frontend/src/components/usePlaylistActions.dom.test.tsx
+++ b/frontend/src/modules/playlists/usePlaylistActions.dom.test.tsx
@@ -14,12 +14,12 @@ vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
   return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
 });
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify: (...a: unknown[]) => h.notify(...a),
 }));
-vi.mock("../lib/errorDialog", () => ({ reportError: (...a: unknown[]) => h.reportError(...a) }));
-vi.mock("./confirmContext", () => ({
+vi.mock("../../lib/errorDialog", () => ({ reportError: (...a: unknown[]) => h.reportError(...a) }));
+vi.mock("../../components/ui/confirmContext", () => ({
   useChoice: () => async () => "both",
   useConfirm: () => async () => true,
 }));
@@ -27,10 +27,10 @@ vi.mock("./playlistsContext", () => ({
   usePlaylists: () => ({ selectedId: null }),
   usePlaylistsActions: () => ({ setSelectedId: () => {} }),
 }));
-vi.mock("../lib/useMe", () => ({ useMe: () => ({ can_write: h.canWrite }) }));
+vi.mock("../../lib/useMe", () => ({ useMe: () => ({ can_write: h.canWrite }) }));
 
 import { usePlaylistActions } from "./usePlaylistActions";
-import { HttpError, api } from "../lib/api";
+import { HttpError, api } from "../../lib/api";
 
 type Menuable = Parameters<ReturnType<typeof usePlaylistActions>["items"]>[0];
 
diff --git a/frontend/src/components/usePlaylistActions.tsx b/frontend/src/modules/playlists/usePlaylistActions.tsx
similarity index 94%
rename from frontend/src/components/usePlaylistActions.tsx
rename to frontend/src/modules/playlists/usePlaylistActions.tsx
index 2e90866e..38c95858 100644
--- a/frontend/src/components/usePlaylistActions.tsx
+++ b/frontend/src/modules/playlists/usePlaylistActions.tsx
@@ -1,19 +1,19 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { ExternalLink, Pencil, RotateCcw, Trash2, Upload } from "lucide-react";
-import { YouTubeIcon } from "../lib/brandIcons";
-import { qk } from "../lib/queryKeys";
-import { api, type Playlist } from "../lib/api";
-import { notify } from "../lib/notifications";
-import { notifyActionError } from "../lib/actionErrors";
-import { notifyYouTubeActionError } from "../lib/youtubeErrors";
-import { playlistName } from "../lib/playlistName";
-import { useChoice, useConfirm } from "./confirmContext";
+import { YouTubeIcon } from "../../lib/brandIcons";
+import { qk } from "../../lib/queryKeys";
+import { api, type Playlist } from "../../lib/api";
+import { notify } from "../../lib/notifications";
+import { notifyActionError } from "../../lib/actionErrors";
+import { notifyYouTubeActionError } from "../../lib/youtubeErrors";
+import { playlistName } from "../../lib/playlistName";
+import { useChoice, useConfirm } from "../../components/ui/confirmContext";
 import { usePlaylists, usePlaylistsActions } from "./playlistsContext";
-import { useMe } from "../lib/useMe";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { createStore } from "../lib/store";
-import { useCopyItems } from "./copyItems";
+import { useMe } from "../../lib/useMe";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { createStore } from "../../lib/store";
+import { useCopyItems } from "../../components/ui/copyItems";
 
 // A playlist's ONE action list and the mutations behind it. Two entry points open it — the
 // rail row (right-click, long-press, its "…") and the list page header's "…" — so it lives here,
diff --git a/frontend/src/components/PlexBrowse.playShow.dom.test.tsx b/frontend/src/modules/plex/PlexBrowse.playShow.dom.test.tsx
similarity index 92%
rename from frontend/src/components/PlexBrowse.playShow.dom.test.tsx
rename to frontend/src/modules/plex/PlexBrowse.playShow.dom.test.tsx
index 211c3374..18af5433 100644
--- a/frontend/src/components/PlexBrowse.playShow.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexBrowse.playShow.dom.test.tsx
@@ -24,8 +24,14 @@ vi.mock("./plexViews", async (importOriginal) => ({
   PlexInfoView: ({ id }: { id: string }) => <div>info page {id}</div>,
 }));
 
+// The page hands Plex's saved views to its chip row; none are saved here.
+vi.mock("./plexSavedViews", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./plexSavedViews")>()),
+  usePlexSavedViews: () => ({ views: [], displayView: null, isDirty: false, activeViewId: null }),
+}));
+
 import PlexBrowse from "./PlexBrowse";
-import { api, type PlexCard } from "../lib/api";
+import { api, type PlexCard } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/PlexBrowse.tsx b/frontend/src/modules/plex/PlexBrowse.tsx
similarity index 92%
rename from frontend/src/components/PlexBrowse.tsx
rename to frontend/src/modules/plex/PlexBrowse.tsx
index d154d2fe..28dabe9e 100644
--- a/frontend/src/components/PlexBrowse.tsx
+++ b/frontend/src/modules/plex/PlexBrowse.tsx
@@ -8,11 +8,11 @@ import {
   type InfiniteData,
 } from "@tanstack/react-query";
 import { User, X } from "lucide-react";
-import { qk } from "../lib/queryKeys";
-import { mayReadAhead, NEXT_PAGE, nextPageOnClick } from "../lib/nextPage";
-import { healPlexField } from "../lib/plexSearch";
-import { healPlexSort, plexSortOptions, PLEX_SORT_FALLBACK } from "../lib/plexSort";
-import type { SortState } from "../lib/columnSort";
+import { qk } from "../../lib/queryKeys";
+import { mayReadAhead, NEXT_PAGE, nextPageOnClick } from "../../lib/nextPage";
+import { healPlexField } from "../../lib/plexSearch";
+import { healPlexSort, plexSortOptions, PLEX_SORT_FALLBACK } from "../../lib/plexSort";
+import type { SortState } from "../../lib/columnSort";
 import {
   api,
   EMPTY_PLEX_FILTERS,
@@ -20,42 +20,44 @@ import {
   type PlexCard,
   type PlexFilters,
   type PlexUnifiedResult,
-} from "../lib/api";
-import { plexLang } from "../i18n";
-import { useDebounced } from "../lib/useDebounced";
-import { useHistorySubview } from "../lib/history";
+} from "../../lib/api";
+import { plexLang } from "../../i18n";
+import { useDebounced } from "../../lib/useDebounced";
+import { useHistorySubview } from "../../lib/history";
 import { PLEX_SUB_URL, type Sub } from "./plexSubUrl";
-import { toggleWatchState } from "../lib/plexWatch";
+import { toggleWatchState } from "../../lib/plexWatch";
 import { usePlayShow } from "./usePlayShow";
-import SortControl from "./ui/SortControl";
-import FilterSelect from "./ui/FilterSelect";
+import SortControl from "../../components/ui/SortControl";
+import FilterSelect from "../../components/ui/FilterSelect";
 import PlexDiscover from "./PlexDiscover";
 import { PlexCollectionsBrowse, PlexPlaylistsBrowse } from "./plexBrowseLists";
-import { PageToolbar } from "./ui/PageShell";
-import { PageMenu } from "./ui/PageMenu";
-import { menuGroups } from "./ui/menuGroups";
-import { choiceSubmenu, sortSubmenu } from "./ui/pageMenuItems";
-import ActiveFilterChips from "./ActiveFilterChips";
-import SelectedViewChip from "./SelectedViewChip";
-import ItemCount from "./ui/ItemCount";
-import { FilterFoldButton } from "./ui/FilterFold";
-import { useFilterFold } from "../lib/useFilterFold";
-import { StateMessage } from "./ui/QueryState";
+import { PageToolbar } from "../../components/ui/PageShell";
+import { PageMenu } from "../../components/ui/PageMenu";
+import { menuGroups } from "../../components/ui/menuGroups";
+import { choiceSubmenu, sortSubmenu } from "../../components/ui/pageMenuItems";
+import ActiveFilterChips from "../../features/filters/ActiveFilterChips";
+import SelectedViewChip from "../../features/filters/SelectedViewChip";
+import { SavedViewsScope } from "../../features/filters/savedViewsContext";
+import { usePlexSavedViews } from "./plexSavedViews";
+import ItemCount from "../../components/ui/ItemCount";
+import { FilterFoldButton } from "../../components/ui/FilterFold";
+import { useFilterFold } from "../../lib/useFilterFold";
+import { StateMessage } from "../../components/ui/QueryState";
 import { usePlexActiveFilters, usePlexClearFilters } from "./usePlexActiveFilters";
 import { usePlex, usePlexActions } from "./plexContext";
-import { usePublishPlexView } from "./plexViewContext";
-import { EpisodeCard, PlexPosterCard } from "./plexCards";
+import PlexHeader from "./PlexHeader";
+import { EpisodeCard, PlexPosterCard } from "../../features/plexCards/plexCards";
 import { PlexMenu } from "./PlexMenu";
-import { useContextMenu } from "./ui/useContextMenu";
-import { usePlexCardActions } from "./usePlexCardActions";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { usePlexCardActions } from "../../features/plexCards/usePlexCardActions";
 import { PlexInfoView, PlexPersonView, PlexSeasonView, PlexShowView } from "./plexViews";
-import { dispatch, useKeyScope } from "../lib/keymap";
-import NavGrid from "./ui/NavGrid";
-import { Chip } from "./ui/Chip";
-import { IconButton } from "./ui/IconButton";
-import { Pressable } from "./ui/Pressable";
-import { SURFACE } from "./ui/surfaces";
-import RemoteImage from "./ui/RemoteImage";
+import { dispatch, useKeyScope } from "../../lib/keymap";
+import NavGrid from "../../components/ui/NavGrid";
+import { Chip } from "../../components/ui/Chip";
+import { IconButton } from "../../components/ui/IconButton";
+import { Pressable } from "../../components/ui/Pressable";
+import { SURFACE } from "../../components/ui/surfaces";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // Lazy: the rich player (pulls in hls.js) loads only when something is first played.
 const PlexPlayer = lazy(() => import("./PlexPlayer"));
@@ -64,7 +66,7 @@ const PlexCollectionView = lazy(() => import("./PlexCollectionView"));
 
 // The Plex module's content area: browse/search the mirrored library as poster cards, drill from a
 // show into seasons/episodes. Library scope / watch-state / sort live in the left PlexSidebar; the
-// search term comes from the shared top Header search box (q). A show drill-down rides history
+// search term comes from its header search box (q, PlexHeader). A show drill-down rides history
 // (useHistorySubview) so browser Back returns to the grid. Rendered by App for page==="plex" (its own
 // nav module). The cards/strips live in plexCards; the sub-view branches in plexViews.
 
@@ -96,6 +98,22 @@ const BACKABLE_VIEWS: readonly string[] = [
 ];
 
 export default function PlexBrowse() {
+  // Discover is the landing; the flat grid is the "Browse all" secondary view. The sub-view lives
+  // here, above both the header and the view, because the header's toggles drive it. It rides
+  // history, and entering the plex page mounts this anew, so each entry reseeds it (a page switch
+  // clears ?v and drops _sub: every plex entry starts at the Discover root).
+  const sub = useHistorySubview<Sub>({ kind: "discover" }, PLEX_SUB_URL);
+  // Plex's saved views reach the shared views UI under this page (the chip) by the scope.
+  const savedViews = usePlexSavedViews();
+  return (
+    <SavedViewsScope value={savedViews}>
+      <PlexHeader view={{ kind: sub.view.kind, open: sub.open }} />
+      <PlexBrowseView sub={sub} />
+    </SavedViewsScope>
+  );
+}
+
+function PlexBrowseView({ sub }: { sub: ReturnType<typeof useHistorySubview<Sub>> }) {
   const { t, i18n } = useTranslation();
   const qc = useQueryClient();
   // Scope / watch-state / sort / filters live in PlexProvider (edited mainly from PlexSidebar); the
@@ -122,19 +140,7 @@ export default function PlexBrowse() {
   const sortOptions = plexSortOptions(scope, (k) => t(`plex.sort.${k}`), lang);
   // Same idiom for the search scope-pill: a movie-only scope can't hold the Episode field.
   const fieldState = healPlexField(field, scope);
-  // Discover is the landing; the flat grid is the "Browse all" secondary view. A header search
-  // or an added filter is a browse intent → flip to the grid (below); an explicit toggle returns.
-  const sub = useHistorySubview<Sub>({ kind: "discover" }, PLEX_SUB_URL);
-
-  // Publish the top-level view (discover vs grid) + opener to the header's Discover/Browse toggle via
-  // the bridge; clear it on unmount so the toggle disappears when you leave the plex page. `sub.open`
-  // is referentially stable (lib/history memoises it), so naming it costs nothing and the dep list is
-  // the honest one: the toggle is republished when the view KIND changes, and on nothing else.
-  const publishView = usePublishPlexView();
-  useLayoutEffect(() => {
-    publishView({ kind: sub.view.kind, open: sub.open });
-    return () => publishView(null);
-  }, [sub.view.kind, sub.open, publishView]);
+  // A header search is a browse intent → flip to the grid (below); an explicit toggle returns.
 
   // Sidebar asked to open a playlist → push it as a subview (browser Back returns to the grid), then
   // clear the signal so it doesn't re-open.
diff --git a/frontend/src/components/PlexCollectionEditor.tsx b/frontend/src/modules/plex/PlexCollectionEditor.tsx
similarity index 93%
rename from frontend/src/components/PlexCollectionEditor.tsx
rename to frontend/src/modules/plex/PlexCollectionEditor.tsx
index 3533a13d..5aae15e9 100644
--- a/frontend/src/components/PlexCollectionEditor.tsx
+++ b/frontend/src/modules/plex/PlexCollectionEditor.tsx
@@ -1,18 +1,18 @@
 import { useMemo, useState } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Plus } from "lucide-react";
-import { MenuCheck } from "./ui/MenuCheck";
-import { api } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { useScrollFade } from "../lib/useScrollFade";
-import { Button } from "./ui/Button";
-import Modal from "./ui/Modal";
-import { useConfirm } from "./confirmContext";
-import { Pressable } from "./ui/Pressable";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
+import { MenuCheck } from "../../components/ui/MenuCheck";
+import { api } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { useScrollFade } from "../../lib/useScrollFade";
+import { Button } from "../../components/ui/Button";
+import Modal from "../../components/ui/Modal";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { Pressable } from "../../components/ui/Pressable";
+import { Input } from "../../components/ui/Input";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // Admin-only "manage this movie's collections" dialog. Lists the library's EDITABLE
 // collections with an in/out toggle (add/remove the movie, written back to Plex), plus a field to
diff --git a/frontend/src/components/PlexCollectionView.dom.test.tsx b/frontend/src/modules/plex/PlexCollectionView.dom.test.tsx
similarity index 97%
rename from frontend/src/components/PlexCollectionView.dom.test.tsx
rename to frontend/src/modules/plex/PlexCollectionView.dom.test.tsx
index 7d72d5c4..9b6f2892 100644
--- a/frontend/src/components/PlexCollectionView.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexCollectionView.dom.test.tsx
@@ -5,7 +5,7 @@
 // expanded (lazily, on click) into its episodes in season→episode order; a show that expands to zero
 // episodes must NOT silently no-op but surface the `playEmpty` info notice. api.plexCollection /
 // api.plexShow are stubbed so the queries resolve synchronously; notify is spied to assert the notice.
-import { setLanguage } from "../i18n";
+import { setLanguage } from "../../i18n";
 import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
 import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -34,12 +34,12 @@ vi.mock("react-i18next", async (importOriginal) => {
     useTranslation: () => ({ i18n: real, t: (key: string) => key }),
   };
 });
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
 
 // Spy notify without dropping the module's other exports (the render subtree uses them).
 const h = vi.hoisted(() => ({ notify: vi.fn() }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify: (...a: unknown[]) => h.notify(...a),
 }));
 
@@ -50,7 +50,7 @@ import {
   type PlexCard,
   type PlexCollectionDetail,
   type PlexShowDetail,
-} from "../lib/api";
+} from "../../lib/api";
 
 afterEach(() => {
   cleanup();
diff --git a/frontend/src/components/PlexCollectionView.tsx b/frontend/src/modules/plex/PlexCollectionView.tsx
similarity index 92%
rename from frontend/src/components/PlexCollectionView.tsx
rename to frontend/src/modules/plex/PlexCollectionView.tsx
index 1358d65a..0fe9c233 100644
--- a/frontend/src/components/PlexCollectionView.tsx
+++ b/frontend/src/modules/plex/PlexCollectionView.tsx
@@ -1,37 +1,37 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { vocab } from "../lib/vocab";
+import { vocab } from "../../lib/vocab";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Play, Shuffle, Pencil, Trash2, Plus, X, Lock, Check, Search } from "lucide-react";
-import { qk } from "../lib/queryKeys";
-import { plexLang } from "../i18n";
-import { api, isIntrinsicReadOnly, type PlexCard, type PlexCollectionDetail } from "../lib/api";
-import { formatRuntime } from "../lib/format";
-import { notifyActionError } from "../lib/actionErrors";
-import { notify } from "../lib/notifications";
-import { showEpisodeKeys } from "../lib/plexQueue";
-import { healPlexSort, plexSortOptions } from "../lib/plexSort";
-import { usePref } from "../lib/usePref";
-import SortControl from "./ui/SortControl";
-import { type SortState } from "../lib/columnSort";
-import { useConfirm } from "./confirmContext";
+import { qk } from "../../lib/queryKeys";
+import { plexLang } from "../../i18n";
+import { api, isIntrinsicReadOnly, type PlexCard, type PlexCollectionDetail } from "../../lib/api";
+import { formatRuntime } from "../../lib/format";
+import { notifyActionError } from "../../lib/actionErrors";
+import { notify } from "../../lib/notifications";
+import { showEpisodeKeys } from "../../lib/plexQueue";
+import { healPlexSort, plexSortOptions } from "../../lib/plexSort";
+import { usePref } from "../../lib/usePref";
+import SortControl from "../../components/ui/SortControl";
+import { type SortState } from "../../lib/columnSort";
+import { useConfirm } from "../../components/ui/confirmContext";
 import { BackBtn, ActionBtn, DetailHero } from "./plexDetailUi";
-import { PlexPosterCard } from "./plexCards";
+import { PlexPosterCard } from "../../features/plexCards/plexCards";
 import { PlexMenu } from "./PlexMenu";
-import { useContextMenu } from "./ui/useContextMenu";
-import { usePlexCardActions } from "./usePlexCardActions";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { usePlexCardActions } from "../../features/plexCards/usePlexCardActions";
 import PlexLibraryPicker from "./PlexLibraryPicker";
-import { toggleWatchState } from "../lib/plexWatch";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import NavGrid from "./ui/NavGrid";
-import { Button } from "./ui/Button";
-import { ClampedText } from "./ui/ClampedText";
-import { IconButton } from "./ui/IconButton";
-import { Input } from "./ui/Input";
-import { useReturnFocus } from "./ui/useReturnFocus";
-import { SURFACE } from "./ui/surfaces";
-import { Badge } from "./ui/Badge";
-import { PageHeading } from "./ui/Headings";
+import { toggleWatchState } from "../../lib/plexWatch";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import NavGrid from "../../components/ui/NavGrid";
+import { Button } from "../../components/ui/Button";
+import { ClampedText } from "../../components/ui/ClampedText";
+import { IconButton } from "../../components/ui/IconButton";
+import { Input } from "../../components/ui/Input";
+import { useReturnFocus } from "../../components/ui/useReturnFocus";
+import { SURFACE } from "../../components/ui/surfaces";
+import { Badge } from "../../components/ui/Badge";
+import { PageHeading } from "../../components/ui/Headings";
 
 // The Collection info page (ask B): a hero (art/title/cert/year-range/count/runtime/summary) + the
 // ordered member grid, a Play-all / Shuffle over the playable leaves, and — for a NON-external,
diff --git a/frontend/src/components/PlexDiscover.dom.test.tsx b/frontend/src/modules/plex/PlexDiscover.dom.test.tsx
similarity index 99%
rename from frontend/src/components/PlexDiscover.dom.test.tsx
rename to frontend/src/modules/plex/PlexDiscover.dom.test.tsx
index 1e4fe2f4..fdc257cc 100644
--- a/frontend/src/components/PlexDiscover.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexDiscover.dom.test.tsx
@@ -37,7 +37,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 const plexDiscover = vi.fn();
 const plexSurprise = vi.fn();
 const plexSetState = vi.fn((..._a: unknown[]) => Promise.resolve());
-vi.mock("../lib/api", () => ({
+vi.mock("../../lib/api", () => ({
   api: {
     plexDiscover: (...a: unknown[]) => plexDiscover(...a),
     plexSurprise: (...a: unknown[]) => plexSurprise(...a),
@@ -57,8 +57,8 @@ vi.mock("../lib/api", () => ({
 }));
 
 import PlexDiscover from "./PlexDiscover";
-import { qk } from "../lib/queryKeys";
-import type { PlexCard } from "../lib/api";
+import { qk } from "../../lib/queryKeys";
+import type { PlexCard } from "../../lib/api";
 
 afterEach(() => {
   cleanup();
diff --git a/frontend/src/components/PlexDiscover.tsx b/frontend/src/modules/plex/PlexDiscover.tsx
similarity index 94%
rename from frontend/src/components/PlexDiscover.tsx
rename to frontend/src/modules/plex/PlexDiscover.tsx
index 520abc4d..ecbab1d4 100644
--- a/frontend/src/components/PlexDiscover.tsx
+++ b/frontend/src/modules/plex/PlexDiscover.tsx
@@ -2,20 +2,20 @@ import { useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { RotateCcw } from "lucide-react";
-import { qk } from "../lib/queryKeys";
-import { api, type PlexCard, type PlexDiscover as PlexDiscoverData } from "../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { api, type PlexCard, type PlexDiscover as PlexDiscoverData } from "../../lib/api";
 import PosterTile from "./PosterTile";
-import { plexLang } from "../i18n";
-import { toggleWatchState } from "../lib/plexWatch";
+import { plexLang } from "../../i18n";
+import { toggleWatchState } from "../../lib/plexWatch";
 import { usePlex } from "./plexContext";
-import { Carousel } from "./ui/Carousel";
-import { PlexPosterCard } from "./plexCards";
+import { Carousel } from "../../components/ui/Carousel";
+import { PlexPosterCard } from "../../features/plexCards/plexCards";
 import { PlexMenu } from "./PlexMenu";
-import { useContextMenu } from "./ui/useContextMenu";
-import { usePlexCardActions } from "./usePlexCardActions";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import NavGrid from "./ui/NavGrid";
-import { IconButton } from "./ui/IconButton";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { usePlexCardActions } from "../../features/plexCards/usePlexCardActions";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import NavGrid from "../../components/ui/NavGrid";
+import { IconButton } from "../../components/ui/IconButton";
 
 // The Plex "Discover" landing: a stack of horizontal Carousel rails served from ONE
 // /api/plex/discover call — Continue watching, Recently added, Browse by genre (tiles), Because you
diff --git a/frontend/src/modules/plex/PlexHeader.tsx b/frontend/src/modules/plex/PlexHeader.tsx
new file mode 100644
index 00000000..bf3bfc70
--- /dev/null
+++ b/frontend/src/modules/plex/PlexHeader.tsx
@@ -0,0 +1,19 @@
+import { PageHeader } from "../../components/ui/PageShell";
+import PlexSearchBox from "./PlexSearchBox";
+import PlexScopeToggle from "./PlexScopeToggle";
+import PlexViewToggle from "./PlexViewToggle";
+import type { PlexViewControls } from "./plexSubUrl";
+
+// Plex's pills in the floating header: the search box, then the library scope (movie/show/both, plus
+// the playlists/collections surfaces) and the Discover ⟷ Browse switch — relocated here from the
+// filter sidebar so the primary "what am I browsing" controls are always in reach. Both toggles drive
+// PlexBrowse's sub-view, which PlexBrowse hands down as `view`.
+export default function PlexHeader({ view }: { view: PlexViewControls }) {
+  return (
+    <PageHeader>
+      <PlexSearchBox />
+      <PlexScopeToggle view={view} />
+      <PlexViewToggle view={view} />
+    </PageHeader>
+  );
+}
diff --git a/frontend/src/components/PlexInfo.dom.test.tsx b/frontend/src/modules/plex/PlexInfo.dom.test.tsx
similarity index 99%
rename from frontend/src/components/PlexInfo.dom.test.tsx
rename to frontend/src/modules/plex/PlexInfo.dom.test.tsx
index 5b10d258..eb2a9f0e 100644
--- a/frontend/src/components/PlexInfo.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexInfo.dom.test.tsx
@@ -28,7 +28,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 
 import PlexInfo from "./PlexInfo";
 import { CREW_SHOWN } from "./plexDetailAside";
-import type { PlexItemDetail } from "../lib/api";
+import type { PlexItemDetail } from "../../lib/api";
 
 afterEach(cleanup);
 
diff --git a/frontend/src/components/PlexInfo.tsx b/frontend/src/modules/plex/PlexInfo.tsx
similarity index 96%
rename from frontend/src/components/PlexInfo.tsx
rename to frontend/src/modules/plex/PlexInfo.tsx
index 934b7efd..70f7c5da 100644
--- a/frontend/src/components/PlexInfo.tsx
+++ b/frontend/src/modules/plex/PlexInfo.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import { Check, ExternalLink, FolderPlus, ListPlus, Play, RotateCcw, Star, X } from "lucide-react";
-import { api, type PlexCard, type PlexFilters, type PlexItemDetail } from "../lib/api";
-import { formatCompact, formatDecimal, formatRuntime } from "../lib/format";
-import { notifyActionError } from "../lib/actionErrors";
+import { api, type PlexCard, type PlexFilters, type PlexItemDetail } from "../../lib/api";
+import { formatCompact, formatDecimal, formatRuntime } from "../../lib/format";
+import { notifyActionError } from "../../lib/actionErrors";
 import { DetailCustomizeMenu, Filterable, PrefToggle } from "./plexDetailUi";
 import { DetailAside, DetailAsideToggles, DetailKeywords } from "./plexDetailAside";
 import {
@@ -17,25 +17,25 @@ import {
   useCrossfadeBackdrop,
   useDetailAside,
   useDetailPrefs,
-} from "../lib/plexDetail";
-import { Carousel } from "./ui/Carousel";
+} from "../../lib/plexDetail";
+import { Carousel } from "../../components/ui/Carousel";
 import PlexCollectionEditor from "./PlexCollectionEditor";
-import PlexPlaylistAdd from "./PlexPlaylistAdd";
+import PlexPlaylistAdd from "../../features/plexCards/PlexPlaylistAdd";
 import { PLAYABLE_TINT, playableClass } from "./plexPlayable";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { Pressable } from "./ui/Pressable";
-import { SURFACE } from "./ui/surfaces";
-import { Badge } from "./ui/Badge";
-import { IconLink } from "./ui/LinkButton";
-import { PageHeading } from "./ui/Headings";
-import { CastRow, PlexPosterCard } from "./plexCards";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { Pressable } from "../../components/ui/Pressable";
+import { SURFACE } from "../../components/ui/surfaces";
+import { Badge } from "../../components/ui/Badge";
+import { IconLink } from "../../components/ui/LinkButton";
+import { PageHeading } from "../../components/ui/Headings";
+import { CastRow, PlexPosterCard } from "../../features/plexCards/plexCards";
 import { PlexMenu } from "./PlexMenu";
-import { useContextMenu } from "./ui/useContextMenu";
-import { usePlexCardActions } from "./usePlexCardActions";
-import { toggleWatchState } from "../lib/plexWatch";
-import { vocab } from "../lib/vocab";
-import RemoteImage from "./ui/RemoteImage";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { usePlexCardActions } from "../../features/plexCards/usePlexCardActions";
+import { toggleWatchState } from "../../lib/plexWatch";
+import { vocab } from "../../lib/vocab";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // The rich "media info" surface for a Plex item — poster/art, IMDb score + link, content rating,
 // genres, director, cast (with photos), summary. Reused in TWO places: a full-page view opened from
diff --git a/frontend/src/components/PlexLibraryPicker.dom.test.tsx b/frontend/src/modules/plex/PlexLibraryPicker.dom.test.tsx
similarity index 95%
rename from frontend/src/components/PlexLibraryPicker.dom.test.tsx
rename to frontend/src/modules/plex/PlexLibraryPicker.dom.test.tsx
index 4d6887b3..cbf5a4a8 100644
--- a/frontend/src/components/PlexLibraryPicker.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexLibraryPicker.dom.test.tsx
@@ -17,11 +17,11 @@ vi.mock("react-i18next", async (importOriginal) => {
   return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
 });
 // Identity debounce so a passed term is reflected immediately.
-vi.mock("../lib/useDebounced", () => ({ useDebounced: (v: unknown) => v }));
+vi.mock("../../lib/useDebounced", () => ({ useDebounced: (v: unknown) => v }));
 
 // api.plexLibrary stub — returns whatever the current test queued.
 const plexLibrary = vi.fn();
-vi.mock("../lib/api", () => ({ api: { plexLibrary: (...a: unknown[]) => plexLibrary(...a) } }));
+vi.mock("../../lib/api", () => ({ api: { plexLibrary: (...a: unknown[]) => plexLibrary(...a) } }));
 
 import PlexLibraryPicker from "./PlexLibraryPicker";
 
diff --git a/frontend/src/components/PlexLibraryPicker.tsx b/frontend/src/modules/plex/PlexLibraryPicker.tsx
similarity index 88%
rename from frontend/src/components/PlexLibraryPicker.tsx
rename to frontend/src/modules/plex/PlexLibraryPicker.tsx
index 3cf06368..57866939 100644
--- a/frontend/src/components/PlexLibraryPicker.tsx
+++ b/frontend/src/modules/plex/PlexLibraryPicker.tsx
@@ -1,12 +1,12 @@
 import { type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
-import { api, type PlexCard } from "../lib/api";
-import { useDebounced } from "../lib/useDebounced";
-import { LoadingState } from "./ui/QueryState";
-import { cardImage } from "../lib/plexImage";
-import RemoteImage from "./ui/RemoteImage";
+import { qk } from "../../lib/queryKeys";
+import { api, type PlexCard } from "../../lib/api";
+import { useDebounced } from "../../lib/useDebounced";
+import { LoadingState } from "../../components/ui/QueryState";
+import { cardImage } from "../../lib/plexImage";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // A debounced library search-and-pick list, shared by the "Add title" panel (PlexCollectionView) and
 // the "New collection" first-title panel (plexBrowseLists) — both search the library the same way and
diff --git a/frontend/src/components/PlexMenu.dom.test.tsx b/frontend/src/modules/plex/PlexMenu.dom.test.tsx
similarity index 97%
rename from frontend/src/components/PlexMenu.dom.test.tsx
rename to frontend/src/modules/plex/PlexMenu.dom.test.tsx
index 8062a6c8..289023df 100644
--- a/frontend/src/components/PlexMenu.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexMenu.dom.test.tsx
@@ -8,8 +8,8 @@ import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { FloatingTree } from "@floating-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import { api, HttpError, type PlexCard, type PlexCollection } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, HttpError, type PlexCard, type PlexCollection } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -18,8 +18,8 @@ vi.mock("react-i18next", async (importOriginal) => {
     useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
   };
 });
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
@@ -30,12 +30,15 @@ vi.mock("../lib/api", async (importOriginal) => {
   };
 });
 const copyText = vi.fn((_: string) => Promise.resolve(true));
-vi.mock("../lib/clipboard", () => ({ copyText: (s: string) => copyText(s) }));
+vi.mock("../../lib/clipboard", () => ({ copyText: (s: string) => copyText(s) }));
 
 import { PlexMenu } from "./PlexMenu";
-import { PlexPosterCard } from "./plexCards";
-import { useContextMenu } from "./ui/useContextMenu";
-import { usePlexCardActions, type PlexActionHandlers } from "./usePlexCardActions";
+import { PlexPosterCard } from "../../features/plexCards/plexCards";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import {
+  usePlexCardActions,
+  type PlexActionHandlers,
+} from "../../features/plexCards/usePlexCardActions";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/PlexMenu.tsx b/frontend/src/modules/plex/PlexMenu.tsx
similarity index 75%
rename from frontend/src/components/PlexMenu.tsx
rename to frontend/src/modules/plex/PlexMenu.tsx
index f9b74592..ada85320 100644
--- a/frontend/src/components/PlexMenu.tsx
+++ b/frontend/src/modules/plex/PlexMenu.tsx
@@ -1,9 +1,9 @@
 import { useTranslation } from "react-i18next";
-import { type PlexCard } from "../lib/api";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { ContextMenu } from "./ui/ContextMenu";
-import { type ContextMenuController } from "./ui/useContextMenu";
-import { type PlexCardActions } from "./usePlexCardActions";
+import { type PlexCard } from "../../lib/api";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { type ContextMenuController } from "../../components/ui/useContextMenu";
+import { type PlexCardActions } from "../../features/plexCards/usePlexCardActions";
 
 /** A Plex poster list's one menu: every trigger — right-click, long-press, Shift+F10 and each card's
  *  "…" — opens it with the title's whole action list (`usePlexCardActions`, held by the list because
diff --git a/frontend/src/components/PlexPersonView.dom.test.tsx b/frontend/src/modules/plex/PlexPersonView.dom.test.tsx
similarity index 98%
rename from frontend/src/components/PlexPersonView.dom.test.tsx
rename to frontend/src/modules/plex/PlexPersonView.dom.test.tsx
index b6e2acb0..2282f206 100644
--- a/frontend/src/components/PlexPersonView.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPersonView.dom.test.tsx
@@ -5,7 +5,7 @@
 // filter gesture only when no onOpenPerson is wired) and PlexPersonView's render (headshot/name hero,
 // the Movies/Shows sections, and the "filter library by this person" action). i18n is key-passthrough
 // and the api is mocked so the query resolves synchronously in the test.
-import { setLanguage } from "../i18n";
+import { setLanguage } from "../../i18n";
 import { describe, it, expect, afterEach, beforeAll, vi } from "vitest";
 import { act, render, screen, fireEvent, cleanup, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -35,7 +35,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 
 const plexPerson = vi.fn();
 const plexSetState = vi.fn((..._a: unknown[]) => Promise.resolve());
-vi.mock("../lib/api", () => ({
+vi.mock("../../lib/api", () => ({
   api: {
     plexPerson: (...a: unknown[]) => plexPerson(...a),
     plexSetState: (...a: unknown[]) => plexSetState(...a),
@@ -44,7 +44,7 @@ vi.mock("../lib/api", () => ({
   plexFilterCount: () => 0,
 }));
 
-import { CastStrip } from "./plexCards";
+import { CastStrip } from "../../features/plexCards/plexCards";
 import { PlexPersonView } from "./plexViews";
 
 afterEach(cleanup);
diff --git a/frontend/src/components/PlexPlayer.backspace.dom.test.tsx b/frontend/src/modules/plex/PlexPlayer.backspace.dom.test.tsx
similarity index 96%
rename from frontend/src/components/PlexPlayer.backspace.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlayer.backspace.dom.test.tsx
index 3ec0d3a0..daf714ee 100644
--- a/frontend/src/components/PlexPlayer.backspace.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlayer.backspace.dom.test.tsx
@@ -16,8 +16,8 @@ vi.mock("react-i18next", async (importOriginal) => ({
 }));
 
 import PlexPlayer from "./PlexPlayer";
-import { api, type PlexItemDetail } from "../lib/api";
-import { pushLayer, removeLayer } from "../lib/layerStack";
+import { api, type PlexItemDetail } from "../../lib/api";
+import { pushLayer, removeLayer } from "../../lib/layerStack";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/PlexPlayer.controls.dom.test.tsx b/frontend/src/modules/plex/PlexPlayer.controls.dom.test.tsx
similarity index 99%
rename from frontend/src/components/PlexPlayer.controls.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlayer.controls.dom.test.tsx
index b065c2c9..8e39e5ef 100644
--- a/frontend/src/components/PlexPlayer.controls.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlayer.controls.dom.test.tsx
@@ -22,9 +22,9 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import PlexPlayer from "./PlexPlayer";
-import { api, type PlexItemDetail } from "../lib/api";
-import { pushLayer, removeLayer } from "../lib/layerStack";
-import { claimLocalData } from "../lib/storage";
+import { api, type PlexItemDetail } from "../../lib/api";
+import { pushLayer, removeLayer } from "../../lib/layerStack";
+import { claimLocalData } from "../../lib/storage";
 
 type Media = HTMLMediaElement & { _t?: number; _paused?: boolean };
 
diff --git a/frontend/src/components/PlexPlayer.hls.dom.test.tsx b/frontend/src/modules/plex/PlexPlayer.hls.dom.test.tsx
similarity index 99%
rename from frontend/src/components/PlexPlayer.hls.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlayer.hls.dom.test.tsx
index fb99335f..117ad31d 100644
--- a/frontend/src/components/PlexPlayer.hls.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlayer.hls.dom.test.tsx
@@ -49,8 +49,8 @@ vi.mock("hls.js", async (importOriginal) => {
 
 import Hls from "hls.js";
 import PlexPlayer from "./PlexPlayer";
-import { api, type PlexItemDetail } from "../lib/api";
-import { claimLocalData } from "../lib/storage";
+import { api, type PlexItemDetail } from "../../lib/api";
+import { claimLocalData } from "../../lib/storage";
 
 type Media = HTMLMediaElement & { _t?: number };
 
diff --git a/frontend/src/components/PlexPlayer.panels.dom.test.tsx b/frontend/src/modules/plex/PlexPlayer.panels.dom.test.tsx
similarity index 99%
rename from frontend/src/components/PlexPlayer.panels.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlayer.panels.dom.test.tsx
index 0ab73f67..d797bc3d 100644
--- a/frontend/src/components/PlexPlayer.panels.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlayer.panels.dom.test.tsx
@@ -15,7 +15,7 @@ vi.mock("react-i18next", async (importOriginal) => ({
 }));
 
 import PlexPlayer from "./PlexPlayer";
-import { api, type PlexItemDetail } from "../lib/api";
+import { api, type PlexItemDetail } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/PlexPlayer.session.dom.test.tsx b/frontend/src/modules/plex/PlexPlayer.session.dom.test.tsx
similarity index 99%
rename from frontend/src/components/PlexPlayer.session.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlayer.session.dom.test.tsx
index 8ab3085d..40fa3418 100644
--- a/frontend/src/components/PlexPlayer.session.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlayer.session.dom.test.tsx
@@ -18,10 +18,10 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import PlexPlayer from "./PlexPlayer";
-import { api, HttpError, type PlexItemDetail } from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { notify } from "../lib/notifications";
-import { claimLocalData } from "../lib/storage";
+import { api, HttpError, type PlexItemDetail } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { notify } from "../../lib/notifications";
+import { claimLocalData } from "../../lib/storage";
 
 type Media = HTMLMediaElement & { _t?: number };
 
diff --git a/frontend/src/components/PlexPlayer.strictmode.dom.test.tsx b/frontend/src/modules/plex/PlexPlayer.strictmode.dom.test.tsx
similarity index 96%
rename from frontend/src/components/PlexPlayer.strictmode.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlayer.strictmode.dom.test.tsx
index 36316903..2d8e164a 100644
--- a/frontend/src/components/PlexPlayer.strictmode.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlayer.strictmode.dom.test.tsx
@@ -22,10 +22,10 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 const expose = vi.hoisted(() => vi.fn());
-vi.mock("../lib/browserBackgroundPlay", () => ({ exposeVideoToBackgroundPlay: expose }));
+vi.mock("../../lib/browserBackgroundPlay", () => ({ exposeVideoToBackgroundPlay: expose }));
 
 import PlexPlayer from "./PlexPlayer";
-import { api, type PlexItemDetail } from "../lib/api";
+import { api, type PlexItemDetail } from "../../lib/api";
 
 const played: string[] = [];
 
diff --git a/frontend/src/components/PlexPlayer.tabtrap.dom.test.tsx b/frontend/src/modules/plex/PlexPlayer.tabtrap.dom.test.tsx
similarity index 98%
rename from frontend/src/components/PlexPlayer.tabtrap.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlayer.tabtrap.dom.test.tsx
index ee30a18d..a2460e03 100644
--- a/frontend/src/components/PlexPlayer.tabtrap.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlayer.tabtrap.dom.test.tsx
@@ -17,8 +17,8 @@ vi.mock("react-i18next", async (importOriginal) => ({
 }));
 
 import PlexPlayer from "./PlexPlayer";
-import { api, type PlexItemDetail } from "../lib/api";
-import { pushLayer, removeLayer } from "../lib/layerStack";
+import { api, type PlexItemDetail } from "../../lib/api";
+import { pushLayer, removeLayer } from "../../lib/layerStack";
 
 beforeAll(() => {
   // A browser that can fullscreen an element, as every desktop one can: the row's last control is
diff --git a/frontend/src/components/PlexPlayer.tsx b/frontend/src/modules/plex/PlexPlayer.tsx
similarity index 97%
rename from frontend/src/components/PlexPlayer.tsx
rename to frontend/src/modules/plex/PlexPlayer.tsx
index c751e82d..e77157f2 100644
--- a/frontend/src/components/PlexPlayer.tsx
+++ b/frontend/src/modules/plex/PlexPlayer.tsx
@@ -8,12 +8,12 @@ import {
   useState,
   useSyncExternalStore,
 } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
-import { plexLang } from "../i18n";
-import { exposeVideoToBackgroundPlay } from "../lib/browserBackgroundPlay";
-import { useFocusKeeper } from "../lib/useFocusKeeper";
+import { plexLang } from "../../i18n";
+import { exposeVideoToBackgroundPlay } from "../../lib/browserBackgroundPlay";
+import { useFocusKeeper } from "../../lib/useFocusKeeper";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   ArrowLeft,
@@ -36,10 +36,10 @@ import {
   Volume2,
   VolumeX,
 } from "lucide-react";
-import { api, HttpError, type PlexTrackNaming } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { useLatest } from "../lib/useLatest";
-import { seekableEndOf } from "../lib/seekableEnd";
+import { api, HttpError, type PlexTrackNaming } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { useLatest } from "../../lib/useLatest";
+import { seekableEndOf } from "../../lib/seekableEnd";
 import {
   audioOrdForLang,
   clockParts,
@@ -47,22 +47,22 @@ import {
   fmt,
   subOrdForLang,
   type PlexPlayerPrefs,
-} from "../lib/plexPlayerPrefs";
+} from "../../lib/plexPlayerPrefs";
 import { Ctrl, PanelHead } from "./plexPlayerControls";
-import ClipPanel, { ClipCropFrame, type ClipCrop } from "./ClipPanel";
-import { markInAt, markOutAt, openAt, type ClipRange } from "../lib/clipRange";
+import ClipPanel, { ClipCropFrame, type ClipCrop } from "../../features/player/ClipPanel";
+import { markInAt, markOutAt, openAt, type ClipRange } from "../../lib/clipRange";
 import { PlexPlayerSettings } from "./PlexPlayerSettings";
 import { PlexStatsOverlay } from "./PlexStatsOverlay";
-import { createFragMeter } from "../lib/plexStats";
-import { episodeLine } from "../lib/plexDetail";
-import { HlsEngine } from "../lib/hlsEngine";
-import { createHlsPort } from "../lib/hlsPort";
-import { enabled, log } from "../lib/log";
-import { logMediaElement } from "../lib/mediaLog";
-import { useMediaSession } from "../lib/mediaSession";
+import { createFragMeter } from "../../lib/plexStats";
+import { episodeLine } from "../../lib/plexDetail";
+import { HlsEngine } from "../../lib/hlsEngine";
+import { createHlsPort } from "../../lib/hlsPort";
+import { enabled, log } from "../../lib/log";
+import { logMediaElement } from "../../lib/mediaLog";
+import { useMediaSession } from "../../lib/mediaSession";
 import { UpNextCard } from "./UpNextCard";
-import Toaster from "./ui/Toaster";
-import { useOverlayOrder } from "./ui/overlayOrder";
+import Toaster from "../../components/ui/Toaster";
+import { useOverlayOrder } from "../../components/ui/overlayOrder";
 import {
   useAutoSkip,
   useControlsVisibility,
@@ -71,8 +71,8 @@ import {
   usePlexProgress,
   usePlexTracks,
   useWallClock,
-} from "../lib/plexPlayerHooks";
-import { canFullscreenElements, fullscreenElement } from "../lib/fullscreen";
+} from "../../lib/plexPlayerHooks";
+import { canFullscreenElements, fullscreenElement } from "../../lib/fullscreen";
 import {
   dispatch,
   isActivationTarget,
@@ -81,28 +81,28 @@ import {
   useHelpConditions,
   useKeyboardHelpOpen,
   useKeyScope,
-} from "../lib/keymap";
-import { LS, useAccountPersistedObject } from "../lib/storage";
-import { useDismiss } from "../lib/useDismiss";
-import { useScrollFade } from "../lib/useScrollFade";
-import { useBackToClose } from "../lib/history";
+} from "../../lib/keymap";
+import { LS, useAccountPersistedObject } from "../../lib/storage";
+import { useDismiss } from "../../lib/useDismiss";
+import { useScrollFade } from "../../lib/useScrollFade";
+import { useBackToClose } from "../../lib/history";
 import PlexSubtitles from "./PlexSubtitles";
-import { lockBodyScroll, trapTab } from "./ui/dialogFocus";
+import { lockBodyScroll, trapTab } from "../../components/ui/dialogFocus";
 import {
   pushLayer,
   removeLayer,
   anyLayerAbove,
   anyBlockingLayerAbove,
   escapeHandled,
-} from "../lib/layerStack";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { MenuCheck } from "./ui/MenuCheck";
-import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
-import { closeThenAct, useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { Slider } from "./ui/NativeControls";
-import { formatUnit } from "../lib/format";
-import { trackLabel } from "../lib/vocab";
+} from "../../lib/layerStack";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { MenuCheck } from "../../components/ui/MenuCheck";
+import { PopoverItem, PopoverSurface } from "../../components/ui/AnchoredPopover";
+import { closeThenAct, useAnchoredPopover } from "../../components/ui/anchoredPopoverHooks";
+import { Slider } from "../../components/ui/NativeControls";
+import { formatUnit } from "../../lib/format";
+import { trackLabel } from "../../lib/vocab";
 
 // The rich info overlay (poster/cast/ratings) reuses the same component as the card's info page.
 const PlexInfo = lazy(() => import("./PlexInfo"));
diff --git a/frontend/src/components/PlexPlayerSettings.dom.test.tsx b/frontend/src/modules/plex/PlexPlayerSettings.dom.test.tsx
similarity index 97%
rename from frontend/src/components/PlexPlayerSettings.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlayerSettings.dom.test.tsx
index 339a2abb..2b083906 100644
--- a/frontend/src/components/PlexPlayerSettings.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlayerSettings.dom.test.tsx
@@ -14,7 +14,7 @@ vi.mock("react-i18next", async (importOriginal) => ({
 }));
 
 import { PlexPlayerSettings } from "./PlexPlayerSettings";
-import { DEFAULT_PREFS, type PlexPlayerPrefs } from "../lib/plexPlayerPrefs";
+import { DEFAULT_PREFS, type PlexPlayerPrefs } from "../../lib/plexPlayerPrefs";
 
 afterEach(cleanup);
 
diff --git a/frontend/src/components/PlexPlayerSettings.tsx b/frontend/src/modules/plex/PlexPlayerSettings.tsx
similarity index 96%
rename from frontend/src/components/PlexPlayerSettings.tsx
rename to frontend/src/modules/plex/PlexPlayerSettings.tsx
index d7f9a585..514ab7f1 100644
--- a/frontend/src/components/PlexPlayerSettings.tsx
+++ b/frontend/src/modules/plex/PlexPlayerSettings.tsx
@@ -2,12 +2,12 @@ import { useLayoutEffect, type RefObject } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Slider, Toggle } from "./plexPlayerControls";
-import { clockParts, type PlexPlayerPrefs } from "../lib/plexPlayerPrefs";
-import { Pressable } from "./ui/Pressable";
-import { ColorInput, CheckRow } from "./ui/NativeControls";
-import Tabs from "./ui/Tabs";
-import { useTabPanel } from "./ui/tabPanel";
-import { MEDIA_CHOSEN } from "./ui/mediaChrome";
+import { clockParts, type PlexPlayerPrefs } from "../../lib/plexPlayerPrefs";
+import { Pressable } from "../../components/ui/Pressable";
+import { ColorInput, CheckRow } from "../../components/ui/NativeControls";
+import Tabs from "../../components/ui/Tabs";
+import { useTabPanel } from "../../components/ui/tabPanel";
+import { MEDIA_CHOSEN } from "../../components/ui/mediaChrome";
 
 type SettingsTab = "sync" | "playback" | "subtitle" | "clock";
 
diff --git a/frontend/src/components/PlexPlaylistReorder.dom.test.tsx b/frontend/src/modules/plex/PlexPlaylistReorder.dom.test.tsx
similarity index 98%
rename from frontend/src/components/PlexPlaylistReorder.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlaylistReorder.dom.test.tsx
index afba7ccc..028587a7 100644
--- a/frontend/src/components/PlexPlaylistReorder.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlaylistReorder.dom.test.tsx
@@ -40,8 +40,8 @@ vi.mock("@dnd-kit/core", async (importOriginal) => {
 });
 
 import PlexPlaylistView from "./PlexPlaylistView";
-import { api, type PlexCard } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, type PlexCard } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/PlexPlaylistView.header.dom.test.tsx b/frontend/src/modules/plex/PlexPlaylistView.header.dom.test.tsx
similarity index 98%
rename from frontend/src/components/PlexPlaylistView.header.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlaylistView.header.dom.test.tsx
index a197a913..196bb874 100644
--- a/frontend/src/components/PlexPlaylistView.header.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlaylistView.header.dom.test.tsx
@@ -14,7 +14,7 @@ vi.mock("react-i18next", async (importOriginal) => ({
 }));
 
 import PlexPlaylistView from "./PlexPlaylistView";
-import { api, type PlexCard } from "../lib/api";
+import { api, type PlexCard } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/PlexPlaylistView.menu.dom.test.tsx b/frontend/src/modules/plex/PlexPlaylistView.menu.dom.test.tsx
similarity index 97%
rename from frontend/src/components/PlexPlaylistView.menu.dom.test.tsx
rename to frontend/src/modules/plex/PlexPlaylistView.menu.dom.test.tsx
index caa6a4a1..5341dd5c 100644
--- a/frontend/src/components/PlexPlaylistView.menu.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexPlaylistView.menu.dom.test.tsx
@@ -4,7 +4,7 @@
 // beside them, a right-click, a long-press, Shift+F10) instead of a red X at rest; removing needs no
 // confirm, since the toast's Undo puts the rows back; `j`/`k` walk the visible rows and Delete takes
 // out the one the keyboard is on; the playlist's rename and delete sit in the header's "…".
-import { setLanguage } from "../i18n";
+import { setLanguage } from "../../i18n";
 import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
 import { render, cleanup, screen, fireEvent, waitFor, act } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -20,15 +20,15 @@ vi.mock("react-i18next", async (importOriginal) => {
   };
 });
 const h = vi.hoisted(() => ({ notify: vi.fn(), confirm: vi.fn(async () => true) }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify: (...a: unknown[]) => h.notify(...a),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => h.confirm }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => h.confirm }));
 
 import PlexPlaylistView from "./PlexPlaylistView";
-import { api, type PlexCard } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, type PlexCard } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/PlexPlaylistView.tsx b/frontend/src/modules/plex/PlexPlaylistView.tsx
similarity index 94%
rename from frontend/src/components/PlexPlaylistView.tsx
rename to frontend/src/modules/plex/PlexPlaylistView.tsx
index 37400c88..def9d9b2 100644
--- a/frontend/src/components/PlexPlaylistView.tsx
+++ b/frontend/src/modules/plex/PlexPlaylistView.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useRef, useState, type ReactNode } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import {
@@ -22,42 +22,42 @@ import {
   Rows3,
   Trash2,
 } from "lucide-react";
-import { api, HttpError, type PlexCard } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { navItemAttrs, useListNav } from "../lib/listNav";
-import { toggleWatchState } from "../lib/plexWatch";
-import { formatRuntime } from "../lib/format";
-import { LS } from "../lib/storage";
-import { usePref } from "../lib/usePref";
-import { useConfirm } from "./confirmContext";
-import { Button } from "./ui/Button";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import ViewSwitcher, { type ViewOption } from "./ViewSwitcher";
-import { IconButton } from "./ui/IconButton";
-import { MoreButton } from "./ui/MoreButton";
-import { ContextMenu } from "./ui/ContextMenu";
-import { useContextMenu } from "./ui/useContextMenu";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { useCopyItems } from "./copyItems";
-import { usePlexCardActions } from "./usePlexCardActions";
-import { Pressable } from "./ui/Pressable";
-import { DragHandle } from "./ui/DragHandle";
-import { useOrderItems } from "./ui/useOrderItems";
+import { api, HttpError, type PlexCard } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { navItemAttrs, useListNav } from "../../lib/listNav";
+import { toggleWatchState } from "../../lib/plexWatch";
+import { formatRuntime } from "../../lib/format";
+import { LS } from "../../lib/storage";
+import { usePref } from "../../lib/usePref";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { Button } from "../../components/ui/Button";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import ViewSwitcher, { type ViewOption } from "../../components/ui/ViewSwitcher";
+import { IconButton } from "../../components/ui/IconButton";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { useCopyItems } from "../../components/ui/copyItems";
+import { usePlexCardActions } from "../../features/plexCards/usePlexCardActions";
+import { Pressable } from "../../components/ui/Pressable";
+import { DragHandle } from "../../components/ui/DragHandle";
+import { useOrderItems } from "../../components/ui/useOrderItems";
 import { usePlexPlaylistEdits } from "./usePlexPlaylistEdits";
 import {
   sameListCollision,
   sameListKeyboardCoordinates,
   useSortableA11y,
   useSortableItem,
-} from "./ui/sortableA11y";
-import { Input } from "./ui/Input";
-import { useReturnFocus } from "./ui/useReturnFocus";
-import { SURFACE } from "./ui/surfaces";
-import { PageHeading } from "./ui/Headings";
-import { MEDIA_BADGE } from "./ui/mediaCardStyles";
-import { seasonTitle } from "../lib/plexDetail";
-import { cardImage } from "../lib/plexImage";
-import RemoteImage from "./ui/RemoteImage";
+} from "../../components/ui/sortableA11y";
+import { Input } from "../../components/ui/Input";
+import { useReturnFocus } from "../../components/ui/useReturnFocus";
+import { SURFACE } from "../../components/ui/surfaces";
+import { PageHeading } from "../../components/ui/Headings";
+import { MEDIA_BADGE } from "../../components/ui/mediaCardStyles";
+import { seasonTitle } from "../../lib/plexDetail";
+import { cardImage } from "../../lib/plexImage";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // A playlist's items, grouped for readability: movies stay standalone, while a run of episodes from the
 // same show collapses into a season/show group so a whole series doesn't sprawl into an endless flat
diff --git a/frontend/src/components/PlexProvider.dom.test.tsx b/frontend/src/modules/plex/PlexProvider.dom.test.tsx
similarity index 85%
rename from frontend/src/components/PlexProvider.dom.test.tsx
rename to frontend/src/modules/plex/PlexProvider.dom.test.tsx
index f69d16b0..702bf7e8 100644
--- a/frontend/src/components/PlexProvider.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexProvider.dom.test.tsx
@@ -2,14 +2,14 @@
 //
 // A shared Plex link is persisted to the account, but only the dimensions it CARRIES. The bug it
 // replaced: a link with only a scope also wrote the (empty) default filters, and a stored Plex filters
-// value at all is what tells SavedViewsProvider the account has picked filters — so the account's
+// value at all is what tells PlexSavedViewsProvider the account has picked filters — so the account's
 // default saved view was never applied again.
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { render, cleanup } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { NavigationProvider } from "./NavigationProvider";
+import { NavigationProvider } from "../../features/navigation/NavigationProvider";
 import { PlexProvider } from "./PlexProvider";
-import { claimLocalData } from "../lib/storage";
+import { claimLocalData } from "../../lib/storage";
 
 function mount() {
   render(
diff --git a/frontend/src/components/PlexProvider.tsx b/frontend/src/modules/plex/PlexProvider.tsx
similarity index 94%
rename from frontend/src/components/PlexProvider.tsx
rename to frontend/src/modules/plex/PlexProvider.tsx
index 4a5502a3..6afe3f76 100644
--- a/frontend/src/components/PlexProvider.tsx
+++ b/frontend/src/modules/plex/PlexProvider.tsx
@@ -1,18 +1,18 @@
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
-import { coercePlexFilters, EMPTY_PLEX_FILTERS, type PlexFilters } from "../lib/api";
-import { parseSortState, type SortState } from "../lib/columnSort";
-import { parsePlexField, type PlexSearchField } from "../lib/plexSearch";
-import { PLEX_SORT_FALLBACK } from "../lib/plexSort";
+import { coercePlexFilters, EMPTY_PLEX_FILTERS, type PlexFilters } from "../../lib/api";
+import { parseSortState, type SortState } from "../../lib/columnSort";
+import { parsePlexField, type PlexSearchField } from "../../lib/plexSearch";
+import { PLEX_SORT_FALLBACK } from "../../lib/plexSort";
 import {
   hasPlexParams,
   plexParamsToState,
   plexParamUpdates,
   type PlexUrlState,
-} from "../lib/plexUrlState";
-import { getAccountRaw, LS, setAccountRaw } from "../lib/storage";
-import { logFilterChange } from "../lib/filterLog";
-import { useUrlMirror } from "../lib/useUrlMirror";
-import { useNavigation } from "./navigationContext";
+} from "../../lib/plexUrlState";
+import { getAccountRaw, LS, setAccountRaw } from "../../lib/storage";
+import { logFilterChange } from "../../lib/filterLog";
+import { useUrlMirror } from "../../lib/useUrlMirror";
+import { useNavigation } from "../../features/navigation/navigationContext";
 import {
   PlexActionsContext,
   PlexStateContext,
@@ -142,7 +142,7 @@ export function PlexProvider({ children }: { children: ReactNode }) {
   // Persist a shared link's view to the account once, so it wins over the stored view and survives a
   // later plain reload. Mirrors FeedFiltersProvider's initialHadUrlFilters branch. Only the dimensions
   // the link CARRIED are written: an omitted one already reads from storage, and writing its default
-  // would not be a no-op — a stored Plex filters value at all is what tells SavedViewsProvider the
+  // would not be a no-op — a stored Plex filters value at all is what tells PlexSavedViewsProvider the
   // account has picked filters, so the account's default saved view would never be applied again.
   useEffect(() => {
     if (!urlSeed) return;
diff --git a/frontend/src/modules/plex/PlexSavedViewsProvider.dom.test.tsx b/frontend/src/modules/plex/PlexSavedViewsProvider.dom.test.tsx
new file mode 100644
index 00000000..d29f84ca
--- /dev/null
+++ b/frontend/src/modules/plex/PlexSavedViewsProvider.dom.test.tsx
@@ -0,0 +1,134 @@
+// @vitest-environment jsdom
+//
+// Plex's saved views: the same default-view seed as the feed's (parity — Plex once never applied its
+// default at all), asked for only while the Plex page is on screen, and an applied view kept across a
+// visit to another page (the store is Plex's own, mounted at the root). Plex's filters are mocked so we
+// can assert exactly which setFilters is called; api.savedViews is stubbed and driven through a real
+// QueryClient.
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor, cleanup, act } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+const h = vi.hoisted(() => ({
+  page: "plex" as string,
+  filters: {} as Record<string, unknown>,
+  setPlexFilters: vi.fn(),
+}));
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
+});
+vi.mock("../../features/navigation/navigationContext", () => ({
+  useNavigation: () => ({ page: h.page }),
+}));
+vi.mock("./plexContext", () => ({
+  usePlex: () => ({ filters: h.filters }),
+  usePlexActions: () => ({ setFilters: h.setPlexFilters }),
+}));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
+
+import { PlexSavedViewsProvider } from "./PlexSavedViewsProvider";
+import { usePlexSavedViews } from "./plexSavedViews";
+import { api, type SavedView } from "../../lib/api";
+import { claimLocalData, LS } from "../../lib/storage";
+import { qk } from "../../lib/queryKeys";
+import type { SavedViewsContext } from "../../features/filters/savedViewsContext";
+
+const ID = 7;
+const view = (over: Partial<SavedView>): SavedView => ({
+  id: 1,
+  name: "v",
+  filters: {},
+  position: 0,
+  is_default: false,
+  ...over,
+});
+
+// The store as the last commit left it, for the case that drives it directly.
+let latest: SavedViewsContext | null = null;
+const keep = (store: SavedViewsContext) => {
+  latest = store;
+};
+function Probe() {
+  const store = usePlexSavedViews();
+  useEffect(() => keep(store));
+  return <div data-testid="loading">{String(store.loading)}</div>;
+}
+
+function mount(views: SavedView[]) {
+  const spy = vi
+    .spyOn(api, "savedViews")
+    .mockImplementation(async () => views.map((v) => ({ ...v })));
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  qc.setQueryData(qk.me(), { id: ID, preferences: {} });
+  const tree = () => (
+    <QueryClientProvider client={qc}>
+      <PlexSavedViewsProvider>
+        <Probe />
+      </PlexSavedViewsProvider>
+    </QueryClientProvider>
+  );
+  const r = render(tree());
+  return { spy, rerender: () => r.rerender(tree()) };
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  claimLocalData(ID);
+  h.page = "plex";
+  h.filters = {};
+  h.setPlexFilters.mockClear();
+  latest = null;
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("Plex's saved views", () => {
+  it("seeds the starred default into a fresh Plex (parity with the feed)", async () => {
+    mount([view({ id: 3, is_default: true, filters: { genres: ["Action"] } })]);
+    await waitFor(() => expect(screen.getByTestId("loading").textContent).toBe("false"));
+    expect(h.setPlexFilters).toHaveBeenCalledTimes(1);
+    expect(h.setPlexFilters.mock.calls[0]![0]).toMatchObject({ genres: ["Action"] });
+  });
+
+  it("does NOT seed when Plex filters are already stored", async () => {
+    localStorage.setItem(LS.plexFilters, JSON.stringify({ genres: ["Comedy"] }));
+    mount([view({ id: 3, is_default: true, filters: { genres: ["Action"] } })]);
+    await waitFor(() => expect(screen.getByTestId("loading").textContent).toBe("false"));
+    expect(h.setPlexFilters).not.toHaveBeenCalled();
+  });
+
+  it("asks for nothing until the Plex page is on screen", async () => {
+    h.page = "feed";
+    const { spy, rerender } = mount([]);
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 20));
+    });
+    expect(spy).not.toHaveBeenCalled();
+    h.page = "plex";
+    rerender();
+    await waitFor(() => expect(spy).toHaveBeenCalledWith("plex"));
+  });
+
+  it("keeps the view you applied, edited since, when you come back from another page", async () => {
+    const { rerender } = mount([
+      view({ id: 5, name: "comedies", filters: { genres: ["Comedy"] } }),
+    ]);
+    await waitFor(() => expect(screen.getByTestId("loading").textContent).toBe("false"));
+    act(() => latest!.apply(latest!.views[0]!));
+    h.filters = { genres: ["Comedy", "Drama"] }; // an edit since: the view is now shown as changed
+    rerender();
+    expect(latest!.displayView?.id).toBe(5);
+    expect(latest!.isDirty).toBe(true);
+    h.page = "home";
+    rerender();
+    h.page = "plex";
+    rerender();
+    expect(latest!.displayView?.id).toBe(5);
+    expect(latest!.isDirty).toBe(true);
+  });
+});
diff --git a/frontend/src/modules/plex/PlexSavedViewsProvider.tsx b/frontend/src/modules/plex/PlexSavedViewsProvider.tsx
new file mode 100644
index 00000000..83acd1f6
--- /dev/null
+++ b/frontend/src/modules/plex/PlexSavedViewsProvider.tsx
@@ -0,0 +1,45 @@
+import { useMemo, type ReactNode } from "react";
+import { coercePlexFilters, plexFiltersSignature, type PlexFilters } from "../../lib/api";
+import { LS } from "../../lib/storage";
+import { useNavigation } from "../../features/navigation/navigationContext";
+import {
+  storedFiltersPresent,
+  useSavedViewsStore,
+  type SavedViewsConfig,
+} from "../../features/filters/useSavedViewsStore";
+import { usePlex, usePlexActions } from "./plexContext";
+import { PlexSavedViewsContextProvider } from "./plexSavedViews";
+
+const keyOf = (f: Record<string, unknown>) => plexFiltersSignature(coercePlexFilters(f));
+const asFilters = (raw: Record<string, unknown>) =>
+  coercePlexFilters(raw) as unknown as Record<string, unknown>;
+// Plex has no transient field to drop before saving.
+const stripForSave = (f: Record<string, unknown>) => f;
+// Plex views are facets-only, so LS.plexFilters is the "has the user set this module's filters" key.
+const canSeedDefault = () => !storedFiltersPresent(LS.plexFilters);
+
+// Plex's saved views, over Plex's live filters (useSavedViewsStore holds the logic). Asked for only while
+// the Plex page is on screen, so an account that never opens Plex never fetches them, and the starred
+// default seeds on the first visit.
+export function PlexSavedViewsProvider({ children }: { children: ReactNode }) {
+  const { page } = useNavigation();
+  const { filters } = usePlex();
+  const { setFilters } = usePlexActions();
+  const onScreen = page === "plex";
+  const cfg: SavedViewsConfig = useMemo(
+    () => ({
+      source: "plex",
+      filters: filters as unknown as Record<string, unknown>,
+      setFilters: (f) => setFilters(f as unknown as PlexFilters),
+      keyOf,
+      asFilters,
+      stripForSave,
+      canSeedDefault,
+      enabled: onScreen,
+      onScreen,
+    }),
+    [filters, setFilters, onScreen],
+  );
+  const value = useSavedViewsStore(cfg);
+  return <PlexSavedViewsContextProvider value={value}>{children}</PlexSavedViewsContextProvider>;
+}
diff --git a/frontend/src/components/PlexScopeToggle.dom.test.tsx b/frontend/src/modules/plex/PlexScopeToggle.dom.test.tsx
similarity index 83%
rename from frontend/src/components/PlexScopeToggle.dom.test.tsx
rename to frontend/src/modules/plex/PlexScopeToggle.dom.test.tsx
index dd257551..58c30a26 100644
--- a/frontend/src/components/PlexScopeToggle.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexScopeToggle.dom.test.tsx
@@ -2,8 +2,8 @@
 //
 // Contract of the header library-scope pill (scopes + browse modes): it renders the
 // three library scopes PLUS the Playlist/Collection browse-mode entries, marks the active one, writes a
-// picked scope to the provider, and drives the playlists/collections views through the PlexViewBridge.
-// i18n is key-passthrough and both the provider and the bridge are mocked; SegmentedToggle is a plain
+// picked scope to the provider, and drives the playlists/collections views through the `view` it is handed.
+// i18n is key-passthrough and the provider is mocked; SegmentedToggle is a plain
 // button group (no floating-ui), so no observer stubs are needed.
 import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
 import { render, screen, fireEvent, cleanup } from "@testing-library/react";
@@ -20,13 +20,11 @@ vi.mock("./plexContext", () => ({
   usePlexActions: () => ({ setScope }),
 }));
 
-// The bridge: a controllable current view kind + an open spy.
-const controls = { kind: "discover" as string, open: vi.fn() };
-vi.mock("./plexViewContext", () => ({
-  usePlexViewControls: () => controls,
-}));
+// The sub-view: a controllable current view kind + an open spy.
+const controls = { kind: "discover" as PlexViewControls["kind"], open: vi.fn() };
 
 import PlexScopeToggle from "./PlexScopeToggle";
+import type { PlexViewControls } from "./plexSubUrl";
 
 beforeEach(() => {
   plexState.scope = "both";
@@ -48,7 +46,7 @@ const pressed = () =>
 describe("PlexScopeToggle", () => {
   it("renders the three scopes plus the two browse modes, the current scope pressed", () => {
     plexState.scope = "movie";
-    render(<PlexScopeToggle />);
+    render(<PlexScopeToggle view={controls} />);
     expect(labels()).toEqual([
       "plex.filter.scopeOpt.both",
       "plex.filter.scopeOpt.movie",
@@ -60,14 +58,14 @@ describe("PlexScopeToggle", () => {
   });
 
   it("writes a picked scope back to the provider (no view switch when already on a title view)", () => {
-    render(<PlexScopeToggle />);
+    render(<PlexScopeToggle view={controls} />);
     fireEvent.click(screen.getByRole("button", { name: "plex.filter.scopeOpt.show" }));
     expect(setScope).toHaveBeenCalledWith("show");
     expect(controls.open).not.toHaveBeenCalled();
   });
 
   it("opens the playlists view (not a scope change) for the Playlist mode", () => {
-    render(<PlexScopeToggle />);
+    render(<PlexScopeToggle view={controls} />);
     fireEvent.click(screen.getByRole("button", { name: "plex.filter.scopeOpt.playlists" }));
     expect(controls.open).toHaveBeenCalledWith({ kind: "playlists" });
     expect(setScope).not.toHaveBeenCalled();
@@ -75,13 +73,13 @@ describe("PlexScopeToggle", () => {
 
   it("marks the Collection mode active when the current view is collections", () => {
     controls.kind = "collections";
-    render(<PlexScopeToggle />);
+    render(<PlexScopeToggle view={controls} />);
     expect(pressed()).toEqual(["plex.filter.scopeOpt.collections"]);
   });
 
   it("returns to the title grid when a scope is picked from a browse mode", () => {
     controls.kind = "playlists";
-    render(<PlexScopeToggle />);
+    render(<PlexScopeToggle view={controls} />);
     fireEvent.click(screen.getByRole("button", { name: "plex.filter.scopeOpt.movie" }));
     expect(setScope).toHaveBeenCalledWith("movie");
     expect(controls.open).toHaveBeenCalledWith({ kind: "grid" });
diff --git a/frontend/src/components/PlexScopeToggle.tsx b/frontend/src/modules/plex/PlexScopeToggle.tsx
similarity index 76%
rename from frontend/src/components/PlexScopeToggle.tsx
rename to frontend/src/modules/plex/PlexScopeToggle.tsx
index 3eb72121..1a637bc4 100644
--- a/frontend/src/components/PlexScopeToggle.tsx
+++ b/frontend/src/modules/plex/PlexScopeToggle.tsx
@@ -1,34 +1,33 @@
 import { useTranslation } from "react-i18next";
-import SegmentedToggle from "./ui/SegmentedToggle";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
 import { usePlex, usePlexActions } from "./plexContext";
-import { usePlexViewControls } from "./plexViewContext";
+import type { PlexViewControls } from "./plexSubUrl";
 
 // The Plex "browse target" as a compact header control next to the search box: the three library
 // scopes (both | movie | show, which browse TITLES) plus two extra entry points — Playlist and
 // Collection — that switch the content area to a grid of the user's playlists / of the collections.
 // The scopes read/write the shared provider state (so scope stays in sync everywhere); the two extra
-// modes drive PlexBrowse's sub-view through the PlexViewBridge. Picking a scope while in a
+// modes drive PlexBrowse's sub-view (`view`, from PlexHeader). Picking a scope while in a
 // playlists/collections surface returns to the title grid at that scope.
 const SCOPES = ["both", "movie", "show"] as const;
 
-export default function PlexScopeToggle() {
+export default function PlexScopeToggle({ view: ctl }: { view: PlexViewControls }) {
   const { t } = useTranslation();
   const { scope } = usePlex();
   const { setScope } = usePlexActions();
-  const ctl = usePlexViewControls();
-  const inPlaylists = ctl?.kind === "playlists";
-  const inCollections = ctl?.kind === "collections";
+  const inPlaylists = ctl.kind === "playlists";
+  const inCollections = ctl.kind === "collections";
   // The active segment: the browse-mode when in one, else the library scope.
   const value = inPlaylists ? "playlists" : inCollections ? "collections" : scope;
 
   const onChange = (v: string) => {
     if (v === "playlists" || v === "collections") {
-      ctl?.open({ kind: v });
+      ctl.open({ kind: v });
       return;
     }
     setScope(v);
     // Leaving the playlists/collections surface for a title scope → show the title grid.
-    if (inPlaylists || inCollections) ctl?.open({ kind: "grid" });
+    if (inPlaylists || inCollections) ctl.open({ kind: "grid" });
   };
 
   return (
diff --git a/frontend/src/components/PlexSearchBox.dom.test.tsx b/frontend/src/modules/plex/PlexSearchBox.dom.test.tsx
similarity index 97%
rename from frontend/src/components/PlexSearchBox.dom.test.tsx
rename to frontend/src/modules/plex/PlexSearchBox.dom.test.tsx
index 822a29bf..b3de975a 100644
--- a/frontend/src/components/PlexSearchBox.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexSearchBox.dom.test.tsx
@@ -16,7 +16,7 @@ vi.mock("react-i18next", async (importOriginal) => {
   return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
 });
 // Identity debounce so a typed value is reflected immediately.
-vi.mock("../lib/useDebounced", () => ({ useDebounced: (v: unknown) => v }));
+vi.mock("../../lib/useDebounced", () => ({ useDebounced: (v: unknown) => v }));
 
 // Controllable provider — PlexSearchBox reads q/scope/field and calls setQ/setField/setJumpTo.
 const plexState = { scope: "both", field: "all", q: "" } as {
@@ -39,7 +39,7 @@ vi.mock("./plexContext", () => ({
 
 // api.plexLibrary stub — returns whatever the current test queued.
 const plexLibrary = vi.fn();
-vi.mock("../lib/api", () => ({ api: { plexLibrary: (...a: unknown[]) => plexLibrary(...a) } }));
+vi.mock("../../lib/api", () => ({ api: { plexLibrary: (...a: unknown[]) => plexLibrary(...a) } }));
 
 import PlexSearchBox from "./PlexSearchBox";
 
diff --git a/frontend/src/components/PlexSearchBox.tsx b/frontend/src/modules/plex/PlexSearchBox.tsx
similarity index 91%
rename from frontend/src/components/PlexSearchBox.tsx
rename to frontend/src/modules/plex/PlexSearchBox.tsx
index 54ece91a..d931e264 100644
--- a/frontend/src/components/PlexSearchBox.tsx
+++ b/frontend/src/modules/plex/PlexSearchBox.tsx
@@ -2,22 +2,22 @@ import { useEffect, useId, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
 import { ChevronDown, Film, Tv } from "lucide-react";
-import SearchBar from "./SearchBar";
-import ActionMenu from "./ui/ActionMenu";
+import SearchBar from "../../features/header/SearchBar";
+import ActionMenu from "../../components/ui/ActionMenu";
 import { usePlex, usePlexActions } from "./plexContext";
-import { api } from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { useDebounced } from "../lib/useDebounced";
-import { availablePlexFields, healPlexField, plexFieldLabelKey } from "../lib/plexSearch";
-import { Pressable } from "./ui/Pressable";
-import { SURFACE } from "./ui/surfaces";
-import { ROVING_HIGHLIGHT } from "./ui/AnchoredPopover";
-import { cardImage } from "../lib/plexImage";
-import RemoteImage from "./ui/RemoteImage";
+import { api } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { useDebounced } from "../../lib/useDebounced";
+import { availablePlexFields, healPlexField, plexFieldLabelKey } from "../../lib/plexSearch";
+import { Pressable } from "../../components/ui/Pressable";
+import { SURFACE } from "../../components/ui/surfaces";
+import { ROVING_HIGHLIGHT } from "../../components/ui/AnchoredPopover";
+import { cardImage } from "../../lib/plexImage";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // The Plex header search box: the shared SearchBar enriched with the search scope-pill (a
 // GitHub-style field selector inside the box) and an instant typeahead of the top matches attached
-// below it. Kept out of the generic SearchBar (and out of Header) so all Plex-specific wiring —
+// below it. Kept out of the generic SearchBar (and out of the shell's header) so all Plex-specific wiring —
 // provider state, the suggest query, the jump-to hand-off — lives in one place. Everything reuses
 // existing platform pieces: ActionMenu (the pill), the /api/plex/library endpoint (limit=10 for the
 // typeahead), and the provider's jumpTo hand-off (typeahead → PlexBrowse subview).
diff --git a/frontend/src/components/PlexSidebar.picker.dom.test.tsx b/frontend/src/modules/plex/PlexSidebar.picker.dom.test.tsx
similarity index 98%
rename from frontend/src/components/PlexSidebar.picker.dom.test.tsx
rename to frontend/src/modules/plex/PlexSidebar.picker.dom.test.tsx
index 8c4c90be..39befcd6 100644
--- a/frontend/src/components/PlexSidebar.picker.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexSidebar.picker.dom.test.tsx
@@ -24,7 +24,7 @@ vi.mock("./plexContext", () => ({
 }));
 
 import { PlaylistPicker } from "./PlexSidebar";
-import { api } from "../lib/api";
+import { api } from "../../lib/api";
 
 beforeAll(() => {
   class Stub {
diff --git a/frontend/src/components/PlexSidebar.tsx b/frontend/src/modules/plex/PlexSidebar.tsx
similarity index 91%
rename from frontend/src/components/PlexSidebar.tsx
rename to frontend/src/modules/plex/PlexSidebar.tsx
index 8279c1e7..f6890a23 100644
--- a/frontend/src/components/PlexSidebar.tsx
+++ b/frontend/src/modules/plex/PlexSidebar.tsx
@@ -1,40 +1,33 @@
 import { useState } from "react";
-import { qk } from "../lib/queryKeys";
-import { usePlexCollectionTitles } from "../lib/usePlexCollectionTitles";
+import { qk } from "../../lib/queryKeys";
+import { usePlexCollectionTitles } from "../../lib/usePlexCollectionTitles";
 import { useTranslation } from "react-i18next";
-import { vocab } from "../lib/vocab";
-import { plexLang } from "../i18n";
+import { vocab } from "../../lib/vocab";
+import { plexLang } from "../../i18n";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { ListMusic, Plus, SlidersHorizontal } from "lucide-react";
-import { api, plexFilterCount, type PlexFilters } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { type PanelLayout } from "../lib/panelLayout";
-import { type MediaSourceKind } from "../lib/mediaSource";
-import { useDebounced } from "../lib/useDebounced";
-import FilterRail from "./FilterRail";
-import { type PanelItem } from "./ui/PanelGroups";
-import MatchToggle from "./ui/MatchToggle";
-import FilterChipGroup from "./ui/FilterChipGroup";
-import Combobox, { type ComboboxOption } from "./ui/Combobox";
-import SavedViewsPopover from "./SavedViewsPopover";
-import PersonalViewsModal from "./PersonalViewsModal";
-import { useSavedViews } from "./savedViewsContext";
+import { api, plexFilterCount, type PlexFilters } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { useDebounced } from "../../lib/useDebounced";
+import FilterRail from "../../components/ui/FilterRail";
+import { type PanelItem } from "../../components/ui/PanelGroups";
+import MatchToggle from "../../components/ui/MatchToggle";
+import FilterChipGroup from "../../components/ui/FilterChipGroup";
+import Combobox, { type ComboboxOption } from "../../components/ui/Combobox";
+import SavedViewsPopover from "../../features/filters/SavedViewsPopover";
+import PersonalViewsModal from "../../features/filters/PersonalViewsModal";
+import { SavedViewsScope } from "../../features/filters/savedViewsContext";
+import { usePlexSavedViews } from "./plexSavedViews";
 import { usePlex, usePlexActions } from "./plexContext";
-import { DismissibleChip } from "./ui/Chip";
-import { Input } from "./ui/Input";
+import { DismissibleChip } from "../../components/ui/Chip";
+import { Input } from "../../components/ui/Input";
+import { useRail } from "../../lib/useRail";
 
 // The Plex module's left filter column — now the shared floating SidePanel with its filter groups
 // as reorderable "islands" (same system as the feed rail). Movie libraries get the full metadata
-// set; shows keep library + sort. State is owned by App (per-account persisted); facets come from
+// set; shows keep library + sort. The filter state lives in PlexProvider; facets come from
 // the backend so the panel only offers what the library actually contains.
 
-type Props = {
-  layout: PanelLayout;
-  setLayout: (l: PanelLayout) => void;
-  collapsed: boolean;
-  onToggleCollapse: () => void;
-};
-
 const RATING_STEPS = [5, 6, 7, 8, 9];
 const ADDED_OPTS = ["24h", "1w", "1m", "6m", "1y"] as const;
 const DURATION_BUCKETS: { key: string; min: number | null; max: number | null }[] = [
@@ -43,7 +36,9 @@ const DURATION_BUCKETS: { key: string; min: number | null; max: number | null }[
   { key: "long", min: 120 * 60, max: null },
 ];
 
-export default function PlexSidebar({ layout, setLayout, collapsed, onToggleCollapse }: Props) {
+export default function PlexSidebar() {
+  // Its layout and collapse flag are its own (lib/useRail), so the shell only places it.
+  const { layout, setLayout, onResetLayout, collapsed, onToggleCollapse } = useRail("plex");
   const { t, i18n } = useTranslation();
   // Scope / watch-state / sort / expanded filters live in PlexProvider (shared with PlexBrowse and
   // the header search box); this rail is the primary editor of them. Opening a playlist is a
@@ -52,10 +47,9 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
   const { setFilters } = usePlexActions();
   // Personal ("saved") views for the Plex module: the rail header icon opens a quick-pick popover, the
   // title opens the full manager modal (same shared components as the feed).
-  const { openModal, modalOpen } = useSavedViews();
-  // This rail's media source (the Plex library) — names the abstraction the feed and Plex rails
-  // share; drives the panel layout key. `FilterRail` owns the customize `editing` state now.
-  const source: MediaSourceKind = "plex";
+  // They reach the shared views UI in this rail through the scope below.
+  const savedViews = usePlexSavedViews();
+  const { openModal, modalOpen } = savedViews;
   // Titles are display-only (chip labels) — keep them OUT of the facet query key so renaming/relabelling
   // never refetches. collectionMode stays IN the key: any/all changes the result set.
   const { collectionTitles: _cts, ...facetKey } = filters;
@@ -298,9 +292,9 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
   ];
 
   return (
-    <>
+    <SavedViewsScope value={savedViews}>
       <FilterRail
-        kind={source}
+        onResetLayout={onResetLayout}
         title={t("sidebar.filters")}
         icon={<SlidersHorizontal className="w-4 h-4" />}
         count={activeCount}
@@ -313,14 +307,14 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
         // feed rail). The rail's own "Clear all" is dropped too — the chip row above the grid owns it.
         collapsible={false}
         // Saved ("personal") views: header icon → quick-pick popover, title → the manager modal.
-        // Same shared components as the feed rail (SavedViewsProvider switches source).
+        // The same shared components as the feed rail, over Plex's own views.
         iconExpanded={<SavedViewsPopover trigger={<SlidersHorizontal className="w-4 h-4" />} />}
         onTitleClick={openModal}
         titleActionLabel={t("views.manageTitle")}
       />
       {/* The manager modal lives here (rail is always mounted on plex); Modal portals to <body>. */}
       {modalOpen && <PersonalViewsModal />}
-    </>
+    </SavedViewsScope>
   );
 }
 
diff --git a/frontend/src/components/PlexStatsOverlay.tsx b/frontend/src/modules/plex/PlexStatsOverlay.tsx
similarity index 97%
rename from frontend/src/components/PlexStatsOverlay.tsx
rename to frontend/src/modules/plex/PlexStatsOverlay.tsx
index 8256a6c5..e9d20da3 100644
--- a/frontend/src/components/PlexStatsOverlay.tsx
+++ b/frontend/src/modules/plex/PlexStatsOverlay.tsx
@@ -1,9 +1,9 @@
 import { type RefObject, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
-import type { HlsEngine } from "../lib/hlsEngine";
-import { buildStatRows, type FragMeter, type StatRow } from "../lib/plexStats";
-import { IconButton } from "./ui/IconButton";
+import type { HlsEngine } from "../../lib/hlsEngine";
+import { buildStatRows, type FragMeter, type StatRow } from "../../lib/plexStats";
+import { IconButton } from "../../components/ui/IconButton";
 
 // "Stats for nerds" debug overlay. Samples the live HTML5 <video> + hls.js state once a second
 // and renders the active mode, resolution, codec/bitrate, dropped frames, buffer, hls level and session
diff --git a/frontend/src/modules/plex/PlexStore.tsx b/frontend/src/modules/plex/PlexStore.tsx
new file mode 100644
index 00000000..c757e37c
--- /dev/null
+++ b/frontend/src/modules/plex/PlexStore.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { PlexProvider } from "./PlexProvider";
+import { PlexSavedViewsProvider } from "./PlexSavedViewsProvider";
+
+// The Plex module's store, mounted at the root (features/navigation/ModuleStores): its browse state, and
+// its saved views over that state's filters.
+export function PlexStore({ children }: { children: ReactNode }) {
+  return (
+    <PlexProvider>
+      <PlexSavedViewsProvider>{children}</PlexSavedViewsProvider>
+    </PlexProvider>
+  );
+}
diff --git a/frontend/src/components/PlexSubtitles.dom.test.tsx b/frontend/src/modules/plex/PlexSubtitles.dom.test.tsx
similarity index 100%
rename from frontend/src/components/PlexSubtitles.dom.test.tsx
rename to frontend/src/modules/plex/PlexSubtitles.dom.test.tsx
diff --git a/frontend/src/components/PlexSubtitles.tsx b/frontend/src/modules/plex/PlexSubtitles.tsx
similarity index 98%
rename from frontend/src/components/PlexSubtitles.tsx
rename to frontend/src/modules/plex/PlexSubtitles.tsx
index 750eadb3..030163b3 100644
--- a/frontend/src/components/PlexSubtitles.tsx
+++ b/frontend/src/modules/plex/PlexSubtitles.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
-import { subShadow } from "../lib/plexPlayerPrefs";
-import { ownTextTracks } from "../lib/plexSubTracks";
+import { subShadow } from "../../lib/plexPlayerPrefs";
+import { ownTextTracks } from "../../lib/plexSubTracks";
 
 // The Plex player's subtitles, drawn by us instead of the browser. The track stays mounted (hls.js and
 // the VTT fetch need it) but `hidden`: the browser parses the cues and reports the active ones, and
diff --git a/frontend/src/components/PlexViewToggle.dom.test.tsx b/frontend/src/modules/plex/PlexViewToggle.dom.test.tsx
similarity index 81%
rename from frontend/src/components/PlexViewToggle.dom.test.tsx
rename to frontend/src/modules/plex/PlexViewToggle.dom.test.tsx
index 802fa0ad..a7e13084 100644
--- a/frontend/src/components/PlexViewToggle.dom.test.tsx
+++ b/frontend/src/modules/plex/PlexViewToggle.dom.test.tsx
@@ -3,7 +3,7 @@
 // Contract of the header Discover ⟷ Browse toggle. The floating header wrapper is pointer-events-none,
 // so the toggle MUST re-enable pointer events on its root or it is click-dead (the bug this test guards
 // against). Also: it only renders on the two title-browse views, marks the active one, and drives
-// PlexBrowse's sub-view through the bridge. i18n is key-passthrough; the bridge is mocked.
+// PlexBrowse's sub-view through the `view` it is handed. i18n is key-passthrough.
 import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
 import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 
@@ -12,12 +12,10 @@ vi.mock("react-i18next", async (importOriginal) => {
   return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
 });
 
-const controls = { kind: "discover" as string, open: vi.fn() };
-vi.mock("./plexViewContext", () => ({
-  usePlexViewControls: () => controls,
-}));
+const controls = { kind: "discover" as PlexViewControls["kind"], open: vi.fn() };
 
 import PlexViewToggle from "./PlexViewToggle";
+import type { PlexViewControls } from "./plexSubUrl";
 
 beforeEach(() => {
   controls.kind = "discover";
@@ -27,13 +25,13 @@ afterEach(cleanup);
 
 describe("PlexViewToggle", () => {
   it("re-enables pointer events on its root (the header wrapper is pointer-events-none)", () => {
-    const { container } = render(<PlexViewToggle />);
+    const { container } = render(<PlexViewToggle view={controls} />);
     // Without this class the whole toggle is click-dead inside the pointer-events-none header.
     expect(container.querySelector(".pointer-events-auto")).not.toBeNull();
   });
 
   it("renders the two options with the current view pressed", () => {
-    render(<PlexViewToggle />);
+    render(<PlexViewToggle view={controls} />);
     const btns = [
       ...screen.getByRole("group", { name: "plex.view.label" }).querySelectorAll("button"),
     ];
@@ -45,21 +43,21 @@ describe("PlexViewToggle", () => {
   });
 
   it("opens the grid view when Browse is picked", () => {
-    render(<PlexViewToggle />);
+    render(<PlexViewToggle view={controls} />);
     fireEvent.click(screen.getByRole("button", { name: "plex.view.browse" }));
     expect(controls.open).toHaveBeenCalledWith({ kind: "grid" });
   });
 
   it("opens the discover view when Discover is picked from the grid", () => {
     controls.kind = "grid";
-    render(<PlexViewToggle />);
+    render(<PlexViewToggle view={controls} />);
     fireEvent.click(screen.getByRole("button", { name: "plex.discover.tab" }));
     expect(controls.open).toHaveBeenCalledWith({ kind: "discover" });
   });
 
   it("renders nothing on a deeper view (no Discover/Browse choice there)", () => {
     controls.kind = "playlists";
-    const { container } = render(<PlexViewToggle />);
+    const { container } = render(<PlexViewToggle view={controls} />);
     expect(container.firstChild).toBeNull();
   });
 });
diff --git a/frontend/src/components/PlexViewToggle.tsx b/frontend/src/modules/plex/PlexViewToggle.tsx
similarity index 75%
rename from frontend/src/components/PlexViewToggle.tsx
rename to frontend/src/modules/plex/PlexViewToggle.tsx
index 0743d827..9da0d1fc 100644
--- a/frontend/src/components/PlexViewToggle.tsx
+++ b/frontend/src/modules/plex/PlexViewToggle.tsx
@@ -1,16 +1,15 @@
 import { useTranslation } from "react-i18next";
-import SegmentedToggle from "./ui/SegmentedToggle";
-import { usePlexViewControls } from "./plexViewContext";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
+import type { PlexViewControls } from "./plexSubUrl";
 
 // The Discover ⟷ Browse switch, hosted in the header next to the library-scope pill (All/Movies/Shows).
-// It reflects + drives PlexBrowse's top-level sub-view through the PlexViewBridge, and hides itself on
+// It reflects + drives PlexBrowse's top-level sub-view (`view`, from PlexHeader), and hides itself on
 // the deeper views (a show/info/person page has no Discover/Browse choice).
-export default function PlexViewToggle() {
+export default function PlexViewToggle({ view: ctl }: { view: PlexViewControls }) {
   const { t } = useTranslation();
-  const ctl = usePlexViewControls();
   // Only the two title-browse views host the Discover/Browse choice; deeper views (show/info/person/…)
   // and the playlists/collections browse surfaces hide it.
-  if (!ctl || (ctl.kind !== "discover" && ctl.kind !== "grid")) return null;
+  if (ctl.kind !== "discover" && ctl.kind !== "grid") return null;
   // The floating header wrapper is pointer-events-none (so clicks fall through its empty area to the
   // content below); every interactive child must re-enable pointer events or it is click-dead — the
   // sibling PlexScopeToggle does the same.
diff --git a/frontend/src/components/PosterTile.tsx b/frontend/src/modules/plex/PosterTile.tsx
similarity index 89%
rename from frontend/src/components/PosterTile.tsx
rename to frontend/src/modules/plex/PosterTile.tsx
index 14d54fd9..f553d871 100644
--- a/frontend/src/components/PosterTile.tsx
+++ b/frontend/src/modules/plex/PosterTile.tsx
@@ -1,10 +1,10 @@
 import { type ReactNode } from "react";
-import { hueOf, hueTileGradient } from "../lib/hueTile";
-import { navItemAttrs } from "../lib/listNav";
-import { MEDIA_IMG } from "./ui/mediaCardStyles";
-import { Pressable } from "./ui/Pressable";
-import { cardImage } from "../lib/plexImage";
-import RemoteImage from "./ui/RemoteImage";
+import { hueOf, hueTileGradient } from "../../lib/hueTile";
+import { navItemAttrs } from "../../lib/listNav";
+import { MEDIA_IMG } from "../../components/ui/mediaCardStyles";
+import { Pressable } from "../../components/ui/Pressable";
+import { cardImage } from "../../lib/plexImage";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // A browse tile split in two: the TOP half shows up to 2 montage posters (from /api/plex/image/{key}),
 // the BOTTOM half is a solid colour-hash band that carries the label — so the text is always readable
diff --git a/frontend/src/components/UpNextCard.dom.test.tsx b/frontend/src/modules/plex/UpNextCard.dom.test.tsx
similarity index 95%
rename from frontend/src/components/UpNextCard.dom.test.tsx
rename to frontend/src/modules/plex/UpNextCard.dom.test.tsx
index 0de4ed02..3924277a 100644
--- a/frontend/src/components/UpNextCard.dom.test.tsx
+++ b/frontend/src/modules/plex/UpNextCard.dom.test.tsx
@@ -3,7 +3,7 @@
 // The up-next end-card's core behaviour: the countdown that auto-advances at ~10s (the whole
 // point — it REPLACED the old instant jump, so a regression that fires early or never is exactly the
 // bug to guard), the "Play now"/Cancel controls, and the episode heading's null season/episode
-// fallback. i18n is key-passthrough; `../lib/api` is mocked so no network runs; the countdown uses
+// fallback. i18n is key-passthrough; `../../lib/api` is mocked so no network runs; the countdown uses
 // performance.now, which vitest's fake timers advance alongside setInterval.
 import { describe, it, expect, afterEach, vi } from "vitest";
 import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
@@ -17,12 +17,12 @@ vi.mock("react-i18next", async (importOriginal) => {
   };
 });
 
-vi.mock("../lib/api", () => ({
+vi.mock("../../lib/api", () => ({
   api: { plexItem: vi.fn(), plexImageUrl: () => "/img" },
 }));
 
 import { UpNextCard } from "./UpNextCard";
-import { api } from "../lib/api";
+import { api } from "../../lib/api";
 
 afterEach(() => {
   cleanup();
diff --git a/frontend/src/components/UpNextCard.tsx b/frontend/src/modules/plex/UpNextCard.tsx
similarity index 92%
rename from frontend/src/components/UpNextCard.tsx
rename to frontend/src/modules/plex/UpNextCard.tsx
index 87649081..8815de2a 100644
--- a/frontend/src/components/UpNextCard.tsx
+++ b/frontend/src/modules/plex/UpNextCard.tsx
@@ -2,14 +2,14 @@ import { useEffect, useEffectEvent, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { Play, X } from "lucide-react";
-import { api } from "../lib/api";
-import { plexLang } from "../i18n";
-import { qk } from "../lib/queryKeys";
-import { cardImage } from "../lib/plexImage";
-import { episodeNumbers } from "../lib/plexDetail";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import RemoteImage from "./ui/RemoteImage";
+import { api } from "../../lib/api";
+import { plexLang } from "../../i18n";
+import { qk } from "../../lib/queryKeys";
+import { cardImage } from "../../lib/plexImage";
+import { episodeNumbers } from "../../lib/plexDetail";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // Up-next / end-card. Shown at episode end when a next item exists and the pref is on, INSTEAD
 // of the old instant jump — so binge stays under the viewer's control. Counts down ~10s then
diff --git a/frontend/src/modules/plex/index.ts b/frontend/src/modules/plex/index.ts
new file mode 100644
index 00000000..88fa4d78
--- /dev/null
+++ b/frontend/src/modules/plex/index.ts
@@ -0,0 +1,4 @@
+// The Plex module's public face: its store, mounted at the root and read app-wide.
+export { usePlexSavedViews } from "./plexSavedViews";
+export { usePlex, usePlexActions } from "./plexContext";
+export { plexModule } from "./module";
diff --git a/frontend/src/modules/plex/module.ts b/frontend/src/modules/plex/module.ts
new file mode 100644
index 00000000..4d2f9b70
--- /dev/null
+++ b/frontend/src/modules/plex/module.ts
@@ -0,0 +1,20 @@
+import { Clapperboard } from "lucide-react";
+import { lazyWithPreload, lazyWithPreloadAlongside } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+import { PlexStore } from "./PlexStore";
+
+// The rail loads with the page (lazyWithPreloadAlongside), so it never arrives after it.
+const Rail = lazyWithPreload(() => import("./PlexSidebar"));
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page and rail load lazily.
+export const plexModule: ModuleDef = {
+  id: "plex",
+  labelKey: "plex.navLabel",
+  railKey: "nav.rail.plex",
+  icon: Clapperboard,
+  gate: (me) => me.plex_enabled,
+  Rail,
+  Page: lazyWithPreloadAlongside(() => import("./PlexBrowse"), Rail),
+  maxWidth: "100rem",
+  Store: PlexStore,
+};
diff --git a/frontend/src/components/plexBrowseLists.tsx b/frontend/src/modules/plex/plexBrowseLists.tsx
similarity index 93%
rename from frontend/src/components/plexBrowseLists.tsx
rename to frontend/src/modules/plex/plexBrowseLists.tsx
index 68d25f65..16c91c1a 100644
--- a/frontend/src/components/plexBrowseLists.tsx
+++ b/frontend/src/modules/plex/plexBrowseLists.tsx
@@ -3,19 +3,19 @@ import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Check, ListMusic, Lock, Plus, Search, X } from "lucide-react";
-import { qk } from "../lib/queryKeys";
-import { api, isIntrinsicReadOnly, type PlexCard, type PlexCollection } from "../lib/api";
-import { formatRuntime } from "../lib/format";
-import { notifyActionError } from "../lib/actionErrors";
-import { useDebounced } from "../lib/useDebounced";
-import { LoadingState, StateMessage } from "./ui/QueryState";
+import { qk } from "../../lib/queryKeys";
+import { api, isIntrinsicReadOnly, type PlexCard, type PlexCollection } from "../../lib/api";
+import { formatRuntime } from "../../lib/format";
+import { notifyActionError } from "../../lib/actionErrors";
+import { useDebounced } from "../../lib/useDebounced";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
 import PosterTile from "./PosterTile";
 import PlexLibraryPicker from "./PlexLibraryPicker";
-import NavGrid from "./ui/NavGrid";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
+import NavGrid from "../../components/ui/NavGrid";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { Input } from "../../components/ui/Input";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // A collection tile's sub-line: item count · total runtime (each dropped when unknown, e.g. show-only
 // collections have no movie runtime).
diff --git a/frontend/src/components/plexContext.ts b/frontend/src/modules/plex/plexContext.ts
similarity index 92%
rename from frontend/src/components/plexContext.ts
rename to frontend/src/modules/plex/plexContext.ts
index 1166f08b..19f8a58e 100644
--- a/frontend/src/components/plexContext.ts
+++ b/frontend/src/modules/plex/plexContext.ts
@@ -1,8 +1,8 @@
 import { createContext, useContext } from "react";
-import { EMPTY_PLEX_FILTERS, type PlexFilters } from "../lib/api";
-import type { SortState } from "../lib/columnSort";
-import type { PlexSearchField } from "../lib/plexSearch";
-import { PLEX_SORT_FALLBACK } from "../lib/plexSort";
+import { EMPTY_PLEX_FILTERS, type PlexFilters } from "../../lib/api";
+import type { SortState } from "../../lib/columnSort";
+import type { PlexSearchField } from "../../lib/plexSearch";
+import { PLEX_SORT_FALLBACK } from "../../lib/plexSort";
 
 // The Plex module's contexts + hooks, split out of PlexProvider so that file exports only components
 // (Fast Refresh).
diff --git a/frontend/src/components/plexDetailAside.tsx b/frontend/src/modules/plex/plexDetailAside.tsx
similarity index 96%
rename from frontend/src/components/plexDetailAside.tsx
rename to frontend/src/modules/plex/plexDetailAside.tsx
index 359a8994..3e0fcd57 100644
--- a/frontend/src/components/plexDetailAside.tsx
+++ b/frontend/src/modules/plex/plexDetailAside.tsx
@@ -1,12 +1,12 @@
 import { useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import type { PlexFilters } from "../lib/api";
-import { formatMoney, formatRuntime } from "../lib/format";
-import type { AsideSection, DetailAsideState, DetailFacts } from "../lib/plexDetail";
-import { regionName, vocab } from "../lib/vocab";
+import type { PlexFilters } from "../../lib/api";
+import { formatMoney, formatRuntime } from "../../lib/format";
+import type { AsideSection, DetailAsideState, DetailFacts } from "../../lib/plexDetail";
+import { regionName, vocab } from "../../lib/vocab";
 import { Filterable, PrefToggle } from "./plexDetailUi";
-import { Button } from "./ui/Button";
-import { Pressable } from "./ui/Pressable";
+import { Button } from "../../components/ui/Button";
+import { Pressable } from "../../components/ui/Pressable";
 
 // The detail pages' second column (the owner's pick "A"): the TMDB facts and key crew of a movie or
 // a show beside its description, inside the hero — as the person page sets its known-for rail beside
diff --git a/frontend/src/components/plexDetailUi.tsx b/frontend/src/modules/plex/plexDetailUi.tsx
similarity index 95%
rename from frontend/src/components/plexDetailUi.tsx
rename to frontend/src/modules/plex/plexDetailUi.tsx
index e4cc3da8..8ec2d9fe 100644
--- a/frontend/src/components/plexDetailUi.tsx
+++ b/frontend/src/modules/plex/plexDetailUi.tsx
@@ -8,15 +8,15 @@ import {
   SlidersHorizontal,
   type LucideIcon,
 } from "lucide-react";
-import { useDismiss } from "../lib/useDismiss";
-import { DETAIL_POSTER } from "../lib/plexDetail";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import { Pressable } from "./ui/Pressable";
-import { SURFACE } from "./ui/surfaces";
-import { Badge } from "./ui/Badge";
-import { Chip } from "./ui/Chip";
-import RemoteImage from "./ui/RemoteImage";
+import { useDismiss } from "../../lib/useDismiss";
+import { DETAIL_POSTER } from "../../lib/plexDetail";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import { Pressable } from "../../components/ui/Pressable";
+import { SURFACE } from "../../components/ui/surfaces";
+import { Badge } from "../../components/ui/Badge";
+import { Chip } from "../../components/ui/Chip";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // Shared "detail page" UI reused by the movie info page (PlexInfo) and the series show/season pages,
 // so they look consistent (the standing glassy/HTPC brief): the faint fixed art backdrop, the two
diff --git a/frontend/src/components/plexPlayable.ts b/frontend/src/modules/plex/plexPlayable.ts
similarity index 100%
rename from frontend/src/components/plexPlayable.ts
rename to frontend/src/modules/plex/plexPlayable.ts
diff --git a/frontend/src/components/plexPlayerControls.tsx b/frontend/src/modules/plex/plexPlayerControls.tsx
similarity index 95%
rename from frontend/src/components/plexPlayerControls.tsx
rename to frontend/src/modules/plex/plexPlayerControls.tsx
index 8b9a755f..cf441c11 100644
--- a/frontend/src/components/plexPlayerControls.tsx
+++ b/frontend/src/modules/plex/plexPlayerControls.tsx
@@ -1,9 +1,9 @@
 import { type ReactNode, type Ref } from "react";
 import { useTranslation } from "react-i18next";
 import { RotateCcw } from "lucide-react";
-import { IconButton } from "./ui/IconButton";
-import { Slider as Range, CheckRow } from "./ui/NativeControls";
-import { formatDecimal, formatUnit } from "../lib/format";
+import { IconButton } from "../../components/ui/IconButton";
+import { Slider as Range, CheckRow } from "../../components/ui/NativeControls";
+import { formatDecimal, formatUnit } from "../../lib/format";
 
 // --- settings-panel building blocks ------------------------------------------------------------
 export function PanelHead({ children }: { children: ReactNode }) {
diff --git a/frontend/src/modules/plex/plexSavedViews.ts b/frontend/src/modules/plex/plexSavedViews.ts
new file mode 100644
index 00000000..9aca5f5e
--- /dev/null
+++ b/frontend/src/modules/plex/plexSavedViews.ts
@@ -0,0 +1,7 @@
+import { createSavedViewsStore } from "../../features/filters/savedViewsContext";
+
+// Plex's saved views: filled by PlexSavedViewsProvider, read by the Plex page and rail (which hand them
+// to the shared views UI) and by the palette.
+const store = createSavedViewsStore("Plex");
+export const PlexSavedViewsContextProvider = store.Provider;
+export const usePlexSavedViews = store.useViews;
diff --git a/frontend/src/components/plexShow.aside.dom.test.tsx b/frontend/src/modules/plex/plexShow.aside.dom.test.tsx
similarity index 99%
rename from frontend/src/components/plexShow.aside.dom.test.tsx
rename to frontend/src/modules/plex/plexShow.aside.dom.test.tsx
index 4d6425b2..795e02d6 100644
--- a/frontend/src/components/plexShow.aside.dom.test.tsx
+++ b/frontend/src/modules/plex/plexShow.aside.dom.test.tsx
@@ -55,7 +55,7 @@ const detail = {
   related: [],
 };
 
-vi.mock("../lib/api", () => ({
+vi.mock("../../lib/api", () => ({
   api: {
     plexShow: () => Promise.resolve(detail),
     updatePrefs: () => Promise.resolve({}),
diff --git a/frontend/src/components/plexSubUrl.test.ts b/frontend/src/modules/plex/plexSubUrl.test.ts
similarity index 100%
rename from frontend/src/components/plexSubUrl.test.ts
rename to frontend/src/modules/plex/plexSubUrl.test.ts
diff --git a/frontend/src/components/plexSubUrl.ts b/frontend/src/modules/plex/plexSubUrl.ts
similarity index 91%
rename from frontend/src/components/plexSubUrl.ts
rename to frontend/src/modules/plex/plexSubUrl.ts
index 52a9d9e2..b05bddfc 100644
--- a/frontend/src/components/plexSubUrl.ts
+++ b/frontend/src/modules/plex/plexSubUrl.ts
@@ -1,9 +1,16 @@
-import type { SubviewUrl } from "../lib/history";
-import { parsePositiveIntId } from "../lib/parseId";
+import type { SubviewUrl } from "../../lib/history";
+import { parsePositiveIntId } from "../../lib/parseId";
 
 // The Plex module's sub-view union and its address-bar mirror, extracted from PlexBrowse so the
 // encode/decode round-trip (and its guards) can be unit-tested without pulling the whole component
 // (and its lazy hls.js player) into the test graph.
+// What the header's toggles get of PlexBrowse's sub-view: the current top-level view (they derive
+// their state from it) and the opener (they drive it).
+export type PlexViewControls = {
+  kind: Sub["kind"];
+  open: (v: Sub) => void;
+};
+
 export type Sub =
   | { kind: "discover" }
   | { kind: "grid" }
diff --git a/frontend/src/components/plexViews.restart.dom.test.tsx b/frontend/src/modules/plex/plexViews.restart.dom.test.tsx
similarity index 99%
rename from frontend/src/components/plexViews.restart.dom.test.tsx
rename to frontend/src/modules/plex/plexViews.restart.dom.test.tsx
index ea08038d..ec919aaf 100644
--- a/frontend/src/components/plexViews.restart.dom.test.tsx
+++ b/frontend/src/modules/plex/plexViews.restart.dom.test.tsx
@@ -84,7 +84,7 @@ const detail = {
   related: [],
 };
 
-vi.mock("../lib/api", () => ({
+vi.mock("../../lib/api", () => ({
   api: {
     plexShow: () => Promise.resolve(detail),
     plexSetState: () => Promise.resolve(),
diff --git a/frontend/src/components/plexViews.tsx b/frontend/src/modules/plex/plexViews.tsx
similarity index 95%
rename from frontend/src/components/plexViews.tsx
rename to frontend/src/modules/plex/plexViews.tsx
index fd9b4269..ea84d7ec 100644
--- a/frontend/src/components/plexViews.tsx
+++ b/frontend/src/modules/plex/plexViews.tsx
@@ -13,19 +13,19 @@ import {
   Undo2,
   User,
 } from "lucide-react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import {
   api,
   type PlexCard,
   type PlexFilters,
   type PlexPersonDetail,
   type PlexSeasonDetail,
-} from "../lib/api";
-import { plexLang } from "../i18n";
-import { pickRatingBadge } from "../lib/plexRating";
-import { notifyActionError } from "../lib/actionErrors";
-import { toggleWatchState } from "../lib/plexWatch";
-import { showEpisodeKeys } from "../lib/plexQueue";
+} from "../../lib/api";
+import { plexLang } from "../../i18n";
+import { pickRatingBadge } from "../../lib/plexRating";
+import { notifyActionError } from "../../lib/actionErrors";
+import { toggleWatchState } from "../../lib/plexWatch";
+import { showEpisodeKeys } from "../../lib/plexQueue";
 import {
   ActionBtn,
   BackBtn,
@@ -42,27 +42,33 @@ import {
   useCrossfadeBackdrop,
   useDetailPrefs,
   useDetailAside,
-} from "../lib/plexDetail";
-import { CastStrip, EpisodeCard, PlexPosterCard, RelatedStrip, SeasonCard } from "./plexCards";
+} from "../../lib/plexDetail";
+import {
+  CastStrip,
+  EpisodeCard,
+  PlexPosterCard,
+  RelatedStrip,
+  SeasonCard,
+} from "../../features/plexCards/plexCards";
 import { PlexMenu } from "./PlexMenu";
-import { usePlexCardActions } from "./usePlexCardActions";
-import { useCopyItems } from "./copyItems";
-import { ContextMenu } from "./ui/ContextMenu";
-import { useContextMenu } from "./ui/useContextMenu";
-import { Button } from "./ui/Button";
-import { ClampedText } from "./ui/ClampedText";
-import { Carousel } from "./ui/Carousel";
-import PlexPlaylistAdd, { type PlexAddTarget } from "./PlexPlaylistAdd";
+import { usePlexCardActions } from "../../features/plexCards/usePlexCardActions";
+import { useCopyItems } from "../../components/ui/copyItems";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { Button } from "../../components/ui/Button";
+import { ClampedText } from "../../components/ui/ClampedText";
+import { Carousel } from "../../components/ui/Carousel";
+import PlexPlaylistAdd, { type PlexAddTarget } from "../../features/plexCards/PlexPlaylistAdd";
 import PlexCollectionEditor from "./PlexCollectionEditor";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import NavGrid from "./ui/NavGrid";
-import { Chip } from "./ui/Chip";
-import { Pressable } from "./ui/Pressable";
-import { SURFACE } from "./ui/surfaces";
-import { PageHeading } from "./ui/Headings";
-import { vocab } from "../lib/vocab";
-import { formatDate, formatDecimal } from "../lib/format";
-import RemoteImage from "./ui/RemoteImage";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import NavGrid from "../../components/ui/NavGrid";
+import { Chip } from "../../components/ui/Chip";
+import { Pressable } from "../../components/ui/Pressable";
+import { SURFACE } from "../../components/ui/surfaces";
+import { PageHeading } from "../../components/ui/Headings";
+import { vocab } from "../../lib/vocab";
+import { formatDate, formatDecimal } from "../../lib/format";
+import RemoteImage from "../../components/ui/RemoteImage";
 
 // The Plex sub-router's view branches, split out of PlexBrowse. Each is invoked by PlexBrowse with
 // shell callbacks as props (onBack/onPlay/onFilter/…) — no view reaches back into the shell's state,
diff --git a/frontend/src/components/usePlayShow.dom.test.tsx b/frontend/src/modules/plex/usePlayShow.dom.test.tsx
similarity index 96%
rename from frontend/src/components/usePlayShow.dom.test.tsx
rename to frontend/src/modules/plex/usePlayShow.dom.test.tsx
index fd96bcf0..9eec49d3 100644
--- a/frontend/src/components/usePlayShow.dom.test.tsx
+++ b/frontend/src/modules/plex/usePlayShow.dom.test.tsx
@@ -8,14 +8,14 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 
 const notified = vi.hoisted(() => vi.fn());
-vi.mock("../lib/actionErrors", () => ({ notifyActionError: notified }));
+vi.mock("../../lib/actionErrors", () => ({ notifyActionError: notified }));
 vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (k: string) => k, i18n: { language: "hu" } }),
 }));
 
-import { api, type PlexCard } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, type PlexCard } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 import { usePlayShow } from "./usePlayShow";
 
 afterEach(() => {
diff --git a/frontend/src/components/usePlayShow.ts b/frontend/src/modules/plex/usePlayShow.ts
similarity index 88%
rename from frontend/src/components/usePlayShow.ts
rename to frontend/src/modules/plex/usePlayShow.ts
index df7eb2f7..8efadd59 100644
--- a/frontend/src/components/usePlayShow.ts
+++ b/frontend/src/modules/plex/usePlayShow.ts
@@ -1,11 +1,11 @@
 import { useEffect, useRef } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
-import { api, type PlexCard } from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { notifyActionError } from "../lib/actionErrors";
-import { plexLang } from "../i18n";
-import { useLatest } from "../lib/useLatest";
+import { api, type PlexCard } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { notifyActionError } from "../../lib/actionErrors";
+import { plexLang } from "../../i18n";
+import { useLatest } from "../../lib/useLatest";
 
 /** A show's card plays like any card: the episode in progress, else the first unwatched, else the
  *  first (`/show/{id}/next`). Asked fresh on the click, since the card's preview may hold an answer
diff --git a/frontend/src/components/usePlexActiveFilters.dom.test.tsx b/frontend/src/modules/plex/usePlexActiveFilters.dom.test.tsx
similarity index 98%
rename from frontend/src/components/usePlexActiveFilters.dom.test.tsx
rename to frontend/src/modules/plex/usePlexActiveFilters.dom.test.tsx
index 14ea758f..f84e3c08 100644
--- a/frontend/src/components/usePlexActiveFilters.dom.test.tsx
+++ b/frontend/src/modules/plex/usePlexActiveFilters.dom.test.tsx
@@ -8,7 +8,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { renderHook } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createElement, type ReactNode } from "react";
-import { api, EMPTY_PLEX_FILTERS } from "../lib/api";
+import { api, EMPTY_PLEX_FILTERS } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -38,7 +38,7 @@ vi.mock("./plexContext", () => ({
 }));
 
 import { usePlexActiveFilters } from "./usePlexActiveFilters";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 
 // The hook resolves collection titles it does not already have through react-query, so it needs a
 // client. "B" has no title in the state, so the hook DOES ask for it — stubbed here, so no test issues
diff --git a/frontend/src/modules/plex/usePlexActiveFilters.ts b/frontend/src/modules/plex/usePlexActiveFilters.ts
new file mode 100644
index 00000000..5b95a192
--- /dev/null
+++ b/frontend/src/modules/plex/usePlexActiveFilters.ts
@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next";
+import { type ActiveFilter } from "../../lib/useActiveFilters";
+import { buildPlexActiveFilters } from "../../lib/plexActiveFilters";
+import { EMPTY_PLEX_FILTERS, type PlexFilters } from "../../lib/api";
+import { PLEX_SORT_FALLBACK } from "../../lib/plexSort";
+import { usePlex, usePlexActions } from "./plexContext";
+import { usePlexCollectionTitles } from "../../lib/usePlexCollectionTitles";
+
+// Plex's analogue of useActiveFilters: turns the shared Plex state (expanded filters + watch-state)
+// into the source-agnostic ActiveFilter[] the shared ActiveFilterChips renders above the grid.
+// Plex thereby gets the same at-a-glance "what's narrowing this" row — with per-chip removal — that
+// the feed has, instead of the narrowing being visible only inside the collapsed sidebar. Labels reuse
+// the existing plex.* i18n keys; multi-value dimensions (genres, people, ratings) emit one chip each so
+// removing one keeps the rest (same shape as the feed's tag/channel chips). Sort is NOT a chip here —
+// it's an always-visible control above the grid, like the feed. The hook lives here because it reads
+// the Plex store; the pure builder it calls is lib/plexActiveFilters (lib stays store-free).
+export function usePlexActiveFilters(): ActiveFilter[] {
+  const { show, filters } = usePlex();
+  const { setShow, setFilters } = usePlexActions();
+  const { t } = useTranslation();
+  const patch = (p: Partial<PlexFilters>) => setFilters({ ...filters, ...p });
+  // A link opened cold knows the collection ids but not their names — resolve the missing ones for
+  // display (see usePlexCollectionTitles for why they are NOT written back into the filter state).
+  const collections = usePlexCollectionTitles(filters.collections, filters.collectionTitles);
+  return buildPlexActiveFilters(
+    filters,
+    show,
+    patch,
+    setShow,
+    t,
+    collections.titles,
+    collections.pending,
+  );
+}
+
+// The one "reset every Plex narrowing" callback, shared by the sidebar's Clear-filters and the chip
+// row's Clear-all so the two can't drift: expanded filters + watch-state + sort all go back to default.
+export function usePlexClearFilters(): () => void {
+  const { setShow, setSort, setFilters } = usePlexActions();
+  return () => {
+    setFilters(EMPTY_PLEX_FILTERS);
+    setShow("all");
+    setSort(PLEX_SORT_FALLBACK);
+  };
+}
diff --git a/frontend/src/components/usePlexPlaylistEdits.dom.test.tsx b/frontend/src/modules/plex/usePlexPlaylistEdits.dom.test.tsx
similarity index 97%
rename from frontend/src/components/usePlexPlaylistEdits.dom.test.tsx
rename to frontend/src/modules/plex/usePlexPlaylistEdits.dom.test.tsx
index 046c09e3..ebdd3b24 100644
--- a/frontend/src/components/usePlexPlaylistEdits.dom.test.tsx
+++ b/frontend/src/modules/plex/usePlexPlaylistEdits.dom.test.tsx
@@ -18,14 +18,14 @@ const { notify } = vi.hoisted(() => ({
     (_n: { level: string; message: string; action?: { label: string; onClick: () => void } }) => 0,
   ),
 }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify,
 }));
 
 import { usePlexPlaylistEdits } from "./usePlexPlaylistEdits";
-import { api, type PlexCard } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, type PlexCard } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 afterEach(() => {
   cleanup();
diff --git a/frontend/src/components/usePlexPlaylistEdits.ts b/frontend/src/modules/plex/usePlexPlaylistEdits.ts
similarity index 95%
rename from frontend/src/components/usePlexPlaylistEdits.ts
rename to frontend/src/modules/plex/usePlexPlaylistEdits.ts
index 6c8a70f8..a80d3209 100644
--- a/frontend/src/components/usePlexPlaylistEdits.ts
+++ b/frontend/src/modules/plex/usePlexPlaylistEdits.ts
@@ -2,12 +2,12 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { plexLang } from "../i18n";
-import { api, type PlexCard } from "../lib/api";
-import { notifyActionError } from "../lib/actionErrors";
-import { notify } from "../lib/notifications";
-import { qk } from "../lib/queryKeys";
-import { reinsertAt } from "../lib/reinsert";
+import { plexLang } from "../../i18n";
+import { api, type PlexCard } from "../../lib/api";
+import { notifyActionError } from "../../lib/actionErrors";
+import { notify } from "../../lib/notifications";
+import { qk } from "../../lib/queryKeys";
+import { reinsertAt } from "../../lib/reinsert";
 
 /** A Plex playlist's items and the two writes that edit them in place — a reorder and a removal.
  *  Split from `PlexPlaylistView` so the failure paths are reachable from a test: the reorder is
diff --git a/frontend/src/components/Scheduler.dom.test.tsx b/frontend/src/modules/scheduler/Scheduler.dom.test.tsx
similarity index 99%
rename from frontend/src/components/Scheduler.dom.test.tsx
rename to frontend/src/modules/scheduler/Scheduler.dom.test.tsx
index 6f875298..6c668dce 100644
--- a/frontend/src/components/Scheduler.dom.test.tsx
+++ b/frontend/src/modules/scheduler/Scheduler.dom.test.tsx
@@ -15,9 +15,9 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import Scheduler from "./Scheduler";
-import { NavigationActionsContext } from "./navigationContext";
-import { api, type RunBrief, type SchedulerAdHoc, type SchedulerStatus } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { NavigationActionsContext } from "../../features/navigation/navigationContext";
+import { api, type RunBrief, type SchedulerAdHoc, type SchedulerStatus } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 const status = (over: Partial<SchedulerStatus> = {}): SchedulerStatus => ({
   running_here: true,
diff --git a/frontend/src/components/Scheduler.menu.dom.test.tsx b/frontend/src/modules/scheduler/Scheduler.menu.dom.test.tsx
similarity index 96%
rename from frontend/src/components/Scheduler.menu.dom.test.tsx
rename to frontend/src/modules/scheduler/Scheduler.menu.dom.test.tsx
index fbf38e8f..55fca140 100644
--- a/frontend/src/components/Scheduler.menu.dom.test.tsx
+++ b/frontend/src/modules/scheduler/Scheduler.menu.dom.test.tsx
@@ -11,10 +11,10 @@ vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
   return { ...actual, useTranslation: () => ({ i18n: { language: "en" }, t: (k: string) => k }) };
 });
-vi.mock("./confirmContext", () => ({ useConfirm: () => h.confirm }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => h.confirm }));
 
 import Scheduler from "./Scheduler";
-import { api, type SchedulerStatus } from "../lib/api";
+import { api, type SchedulerStatus } from "../../lib/api";
 
 const status = (over: Partial<SchedulerStatus> = {}): SchedulerStatus => ({
   running_here: true,
diff --git a/frontend/src/components/Scheduler.tsx b/frontend/src/modules/scheduler/Scheduler.tsx
similarity index 95%
rename from frontend/src/components/Scheduler.tsx
rename to frontend/src/modules/scheduler/Scheduler.tsx
index e4d501cf..8da7744a 100644
--- a/frontend/src/components/Scheduler.tsx
+++ b/frontend/src/modules/scheduler/Scheduler.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useId, useRef, useState } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -25,28 +25,28 @@ import {
   type SchedulerAdHoc,
   type SchedulerJob,
   type SchedulerStatus,
-} from "../lib/api";
-import { useLiveQuery } from "../lib/useLiveQuery";
-import { Button } from "./ui/Button";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { useConfirm } from "./confirmContext";
-import { formatDateTime, formatNumber, formatUnit, relativeTime } from "../lib/format";
-import { notify } from "../lib/notifications";
-import Tooltip from "./ui/Tooltip";
-import { notifyActionError } from "../lib/actionErrors";
-import { IconButton } from "./ui/IconButton";
-import { Pressable } from "./ui/Pressable";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
-import { SectionLabel } from "./ui/Headings";
-import { useContextMenu } from "./ui/useContextMenu";
-import { ContextMenu } from "./ui/ContextMenu";
-import { MoreButton } from "./ui/MoreButton";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { jobFailureText, jobResultText } from "../lib/jobResult";
-import { StatusDot, type DotKey } from "./RunStatusDot";
-import { useNavigationActions } from "./navigationContext";
-import { urlWithParams } from "../lib/urlState";
+} from "../../lib/api";
+import { useLiveQuery } from "../../lib/useLiveQuery";
+import { Button } from "../../components/ui/Button";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { formatDateTime, formatNumber, formatUnit, relativeTime } from "../../lib/format";
+import { notify } from "../../lib/notifications";
+import Tooltip from "../../components/ui/Tooltip";
+import { notifyActionError } from "../../lib/actionErrors";
+import { IconButton } from "../../components/ui/IconButton";
+import { Pressable } from "../../components/ui/Pressable";
+import { Input } from "../../components/ui/Input";
+import { SURFACE } from "../../components/ui/surfaces";
+import { SectionLabel } from "../../components/ui/Headings";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { jobFailureText, jobResultText } from "../../lib/jobResult";
+import { StatusDot, type DotKey } from "../activity";
+import { useNavigationActions } from "../../features/navigation/navigationContext";
+import { urlWithParams } from "../../lib/urlState";
 
 const POLL_MS = 4000;
 // While any job is running, poll faster so short scheduled runs aren't missed between ticks.
diff --git a/frontend/src/modules/scheduler/index.ts b/frontend/src/modules/scheduler/index.ts
new file mode 100644
index 00000000..2cf30995
--- /dev/null
+++ b/frontend/src/modules/scheduler/index.ts
@@ -0,0 +1,2 @@
+// The scheduler page's public face: how the shell and the navigation know it.
+export { schedulerModule } from "./module";
diff --git a/frontend/src/modules/scheduler/module.ts b/frontend/src/modules/scheduler/module.ts
new file mode 100644
index 00000000..0511a3cc
--- /dev/null
+++ b/frontend/src/modules/scheduler/module.ts
@@ -0,0 +1,15 @@
+import { Activity } from "lucide-react";
+import { lazyWithPreload } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page loads lazily.
+export const schedulerModule: ModuleDef = {
+  id: "scheduler",
+  labelKey: "header.account.scheduler",
+  railKey: "nav.rail.scheduler",
+  titleKey: "header.scheduler",
+  icon: Activity,
+  system: true,
+  gate: (me) => me.role === "admin",
+  Page: lazyWithPreload(() => import("./Scheduler")),
+};
diff --git a/frontend/src/components/ApiTokens.dom.test.tsx b/frontend/src/modules/settings/ApiTokens.dom.test.tsx
similarity index 97%
rename from frontend/src/components/ApiTokens.dom.test.tsx
rename to frontend/src/modules/settings/ApiTokens.dom.test.tsx
index 566fac04..707b6ade 100644
--- a/frontend/src/components/ApiTokens.dom.test.tsx
+++ b/frontend/src/modules/settings/ApiTokens.dom.test.tsx
@@ -8,7 +8,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { api, type ApiToken, type FileFolder } from "../lib/api";
+import { api, type ApiToken, type FileFolder } from "../../lib/api";
 
 const mocks = vi.hoisted(() => ({ confirm: vi.fn(async (_o?: unknown) => true) }));
 vi.mock("react-i18next", async (importOriginal) => ({
@@ -19,8 +19,8 @@ vi.mock("react-i18next", async (importOriginal) => ({
       o && Object.keys(o).length ? `${key}(${Object.values(o).join(",")})` : key,
   }),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => mocks.confirm }));
-vi.mock("../lib/clipboard", () => ({ copyText: vi.fn(async () => true) }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => mocks.confirm }));
+vi.mock("../../lib/clipboard", () => ({ copyText: vi.fn(async () => true) }));
 
 import ApiTokens from "./ApiTokens";
 
diff --git a/frontend/src/components/ApiTokens.tsx b/frontend/src/modules/settings/ApiTokens.tsx
similarity index 92%
rename from frontend/src/components/ApiTokens.tsx
rename to frontend/src/modules/settings/ApiTokens.tsx
index 628a4344..7b629e90 100644
--- a/frontend/src/components/ApiTokens.tsx
+++ b/frontend/src/modules/settings/ApiTokens.tsx
@@ -12,30 +12,30 @@ import {
   type FileFolder,
   type TokenGrant,
   type TokenRight,
-} from "../lib/api";
-import { qk } from "../lib/queryKeys";
-import { compareText } from "../lib/collate";
-import { formatDate } from "../lib/format";
-import { navItemAttrs } from "../lib/listNav";
-import { useConfirm } from "./confirmContext";
-import { folderIcon, folderLabel, takesUploads } from "./fileFolders";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { Badge } from "./ui/Badge";
-import { Button } from "./ui/Button";
-import { Chip } from "./ui/Chip";
-import { ContextMenu } from "./ui/ContextMenu";
-import InlineNotice from "./ui/InlineNotice";
-import { Input } from "./ui/Input";
-import Modal, { ModalFooter } from "./ui/Modal";
-import { MoreButton } from "./ui/MoreButton";
-import NavGrid from "./ui/NavGrid";
-import { Pressable } from "./ui/Pressable";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { RelativeTime } from "./ui/RelativeTime";
-import SegmentedToggle from "./ui/SegmentedToggle";
-import { SURFACE } from "./ui/surfaces";
-import { useContextMenu } from "./ui/useContextMenu";
-import { useCopyFeedback } from "./useCopyFeedback";
+} from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
+import { compareText } from "../../lib/collate";
+import { formatDate } from "../../lib/format";
+import { navItemAttrs } from "../../lib/listNav";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { folderIcon, folderLabel, takesUploads } from "../../features/folders/fileFolders";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { Badge } from "../../components/ui/Badge";
+import { Button } from "../../components/ui/Button";
+import { Chip } from "../../components/ui/Chip";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import InlineNotice from "../../components/ui/InlineNotice";
+import { Input } from "../../components/ui/Input";
+import Modal, { ModalFooter } from "../../components/ui/Modal";
+import { MoreButton } from "../../components/ui/MoreButton";
+import NavGrid from "../../components/ui/NavGrid";
+import { Pressable } from "../../components/ui/Pressable";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { RelativeTime } from "../../components/ui/RelativeTime";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
+import { SURFACE } from "../../components/ui/surfaces";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { useCopyFeedback } from "../../components/ui/useCopyFeedback";
 
 // Settings → API tokens: a machine's key to the user's Files library (docs/DESIGN.md decision log,
 // "API tokens"). A row per token in three lines — what it is, what it opens, when it was used and
diff --git a/frontend/src/components/DiagnosticsSettings.dom.test.tsx b/frontend/src/modules/settings/DiagnosticsSettings.dom.test.tsx
similarity index 98%
rename from frontend/src/components/DiagnosticsSettings.dom.test.tsx
rename to frontend/src/modules/settings/DiagnosticsSettings.dom.test.tsx
index 2d8cab16..0b666c01 100644
--- a/frontend/src/components/DiagnosticsSettings.dom.test.tsx
+++ b/frontend/src/modules/settings/DiagnosticsSettings.dom.test.tsx
@@ -8,8 +8,8 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import type { DiagnosticsLevel, DiagnosticsState, Me } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import type { DiagnosticsLevel, DiagnosticsState, Me } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -41,8 +41,8 @@ const setLevel = vi.fn(
       },
     }),
 );
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: { ...actual.api, setDiagnosticsLevel: (l: DiagnosticsLevel) => setLevel(l) },
diff --git a/frontend/src/components/DiagnosticsSettings.tsx b/frontend/src/modules/settings/DiagnosticsSettings.tsx
similarity index 93%
rename from frontend/src/components/DiagnosticsSettings.tsx
rename to frontend/src/modules/settings/DiagnosticsSettings.tsx
index d6e1ac63..a9c0f025 100644
--- a/frontend/src/components/DiagnosticsSettings.tsx
+++ b/frontend/src/modules/settings/DiagnosticsSettings.tsx
@@ -2,16 +2,16 @@ import { useEffect, useRef, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 
-import { api, type DiagnosticsLevel } from "../lib/api";
-import { levelInForce } from "../lib/diagnostics";
-import { focusIsUnclaimed } from "../lib/useFocusKeeper";
-import { updateMeCache, useMe } from "../lib/useMe";
-import { Button } from "./ui/Button";
-import SegmentedToggle from "./ui/SegmentedToggle";
-import { Section, SettingRow } from "./ui/form";
+import { api, type DiagnosticsLevel } from "../../lib/api";
+import { levelInForce } from "../../lib/diagnostics";
+import { focusIsUnclaimed } from "../../lib/useFocusKeeper";
+import { updateMeCache, useMe } from "../../lib/useMe";
+import { Button } from "../../components/ui/Button";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
+import { Section, SettingRow } from "../../components/ui/form";
 import MyLogViewer from "./MyLogViewer";
-import { RecorderSettings } from "./DebugRecorder";
-import { formatUnit } from "../lib/format";
+import { RecorderSettings } from "../../features/diagnostics/DebugRecorder";
+import { formatUnit } from "../../lib/format";
 
 const LEVELS: readonly DiagnosticsLevel[] = ["INFO", "DEBUG", "TRACE"];
 
diff --git a/frontend/src/components/MyLogViewer.dom.test.tsx b/frontend/src/modules/settings/MyLogViewer.dom.test.tsx
similarity index 97%
rename from frontend/src/components/MyLogViewer.dom.test.tsx
rename to frontend/src/modules/settings/MyLogViewer.dom.test.tsx
index 316a5026..d9772099 100644
--- a/frontend/src/components/MyLogViewer.dom.test.tsx
+++ b/frontend/src/modules/settings/MyLogViewer.dom.test.tsx
@@ -5,7 +5,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
 
-import { clear, log, setLevel } from "../lib/log";
+import { clear, log, setLevel } from "../../lib/log";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -18,7 +18,7 @@ vi.mock("react-i18next", async (importOriginal) => {
   };
 });
 const copied: string[] = [];
-vi.mock("../lib/clipboard", () => ({
+vi.mock("../../lib/clipboard", () => ({
   copyText: (text: string) => {
     copied.push(text);
     return Promise.resolve(true);
diff --git a/frontend/src/components/MyLogViewer.tsx b/frontend/src/modules/settings/MyLogViewer.tsx
similarity index 94%
rename from frontend/src/components/MyLogViewer.tsx
rename to frontend/src/modules/settings/MyLogViewer.tsx
index 60033068..b906c9c7 100644
--- a/frontend/src/components/MyLogViewer.tsx
+++ b/frontend/src/modules/settings/MyLogViewer.tsx
@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Copy, Search } from "lucide-react";
 
-import { copyText } from "../lib/clipboard";
+import { copyText } from "../../lib/clipboard";
 import {
   clear,
   events,
@@ -11,14 +11,14 @@ import {
   subscribe,
   type LevelGroup as Filter,
   type LogEvent,
-} from "../lib/log";
-import { notify } from "../lib/notifications";
-import LogLine from "./LogLine";
-import NavGrid from "./ui/NavGrid";
-import { Button } from "./ui/Button";
-import FilterChipGroup from "./ui/FilterChipGroup";
-import { InnerInput } from "./ui/Input";
-import { fieldClass } from "./ui/fieldStyles";
+} from "../../lib/log";
+import { notify } from "../../lib/notifications";
+import LogLine from "../../features/diagnostics/LogLine";
+import NavGrid from "../../components/ui/NavGrid";
+import { Button } from "../../components/ui/Button";
+import FilterChipGroup from "../../components/ui/FilterChipGroup";
+import { InnerInput } from "../../components/ui/Input";
+import { fieldClass } from "../../components/ui/fieldStyles";
 
 // Rows rendered at once. The ring holds up to 2000 events; drawing all of them on every new event
 // would make the settings page the slowest thing in the app while it is watching the app.
diff --git a/frontend/src/components/ProfileEditor.dom.test.tsx b/frontend/src/modules/settings/ProfileEditor.dom.test.tsx
similarity index 97%
rename from frontend/src/components/ProfileEditor.dom.test.tsx
rename to frontend/src/modules/settings/ProfileEditor.dom.test.tsx
index 710a6b50..8281d1c5 100644
--- a/frontend/src/components/ProfileEditor.dom.test.tsx
+++ b/frontend/src/modules/settings/ProfileEditor.dom.test.tsx
@@ -7,7 +7,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { api, type DownloadProfile } from "../lib/api";
+import { api, type DownloadProfile } from "../../lib/api";
 
 const mocks = vi.hoisted(() => ({ confirm: vi.fn(async (_o?: unknown) => true) }));
 
@@ -15,7 +15,7 @@ vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => mocks.confirm }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => mocks.confirm }));
 
 import { DownloadFormats } from "./ProfileEditor";
 
diff --git a/frontend/src/components/ProfileEditor.tsx b/frontend/src/modules/settings/ProfileEditor.tsx
similarity index 93%
rename from frontend/src/components/ProfileEditor.tsx
rename to frontend/src/modules/settings/ProfileEditor.tsx
index e84ec870..ceacf91d 100644
--- a/frontend/src/components/ProfileEditor.tsx
+++ b/frontend/src/modules/settings/ProfileEditor.tsx
@@ -1,25 +1,25 @@
 import { useEffect, useId, useRef, useState } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { CopyPlus, Lock, Pencil, Plus, Trash2 } from "lucide-react";
-import Modal from "./ui/Modal";
-import { useConfirm } from "./confirmContext";
-import { api, type DownloadProfile, type DownloadSpec } from "../lib/api";
-import { profileName } from "../lib/vocab";
-import { Button } from "./ui/Button";
-import SegmentedToggle from "./ui/SegmentedToggle";
-import FilterSelect from "./ui/FilterSelect";
-import { CheckRow } from "./ui/NativeControls";
-import { Input } from "./ui/Input";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { ContextMenu } from "./ui/ContextMenu";
-import DataTable, { type Column } from "./ui/DataTable";
-import { menuGroups } from "./ui/menuGroups";
-import { MoreButton } from "./ui/MoreButton";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { useContextMenu } from "./ui/useContextMenu";
+import Modal from "../../components/ui/Modal";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { api, type DownloadProfile, type DownloadSpec } from "../../lib/api";
+import { profileName } from "../../lib/vocab";
+import { Button } from "../../components/ui/Button";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
+import FilterSelect from "../../components/ui/FilterSelect";
+import { CheckRow } from "../../components/ui/NativeControls";
+import { Input } from "../../components/ui/Input";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import DataTable, { type Column } from "../../components/ui/DataTable";
+import { menuGroups } from "../../components/ui/menuGroups";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { useContextMenu } from "../../components/ui/useContextMenu";
 
 const HEIGHTS = [null, 2160, 1440, 1080, 720, 480, 360];
 
diff --git a/frontend/src/components/SettingsPanel.account.dom.test.tsx b/frontend/src/modules/settings/SettingsPanel.account.dom.test.tsx
similarity index 90%
rename from frontend/src/components/SettingsPanel.account.dom.test.tsx
rename to frontend/src/modules/settings/SettingsPanel.account.dom.test.tsx
index 8448b1a4..b015b664 100644
--- a/frontend/src/components/SettingsPanel.account.dom.test.tsx
+++ b/frontend/src/modules/settings/SettingsPanel.account.dom.test.tsx
@@ -5,7 +5,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render, screen } from "@testing-library/react";
 
-import type { Me } from "../lib/api";
+import type { Me } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -18,8 +18,8 @@ vi.mock("react-i18next", async (importOriginal) => {
     }),
   };
 });
-vi.mock("../lib/format", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/format")>();
+vi.mock("../../lib/format", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/format")>();
   return { ...actual, formatDateTime: (iso: string) => `at ${iso}` };
 });
 
diff --git a/frontend/src/components/SettingsPanel.downloadAuth.dom.test.tsx b/frontend/src/modules/settings/SettingsPanel.downloadAuth.dom.test.tsx
similarity index 90%
rename from frontend/src/components/SettingsPanel.downloadAuth.dom.test.tsx
rename to frontend/src/modules/settings/SettingsPanel.downloadAuth.dom.test.tsx
index 022c8d51..01227c2f 100644
--- a/frontend/src/components/SettingsPanel.downloadAuth.dom.test.tsx
+++ b/frontend/src/modules/settings/SettingsPanel.downloadAuth.dom.test.tsx
@@ -21,13 +21,19 @@ vi.mock("react-i18next", async (importOriginal) => {
     useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
   };
 });
-vi.mock("../lib/api", () => ({ api: h }));
+// Partial: the module graph reaches the feed's store, which reads its defaults here.
+vi.mock("../../lib/api", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/api")>()),
+  api: h,
+}));
 // Partial mock: SettingsPanel's module graph (PrefsProvider) also pulls getNotifSettings from here.
-vi.mock("../lib/notifications", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/notifications")>();
+vi.mock("../../lib/notifications", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/notifications")>();
   return { ...actual, notify: vi.fn() };
 });
-vi.mock("./confirmContext", () => ({ useConfirm: () => vi.fn(async () => true) }));
+vi.mock("../../components/ui/confirmContext", () => ({
+  useConfirm: () => vi.fn(async () => true),
+}));
 
 import { DownloadAuth } from "./SettingsPanel";
 
diff --git a/frontend/src/components/SettingsPanel.downloads.dom.test.tsx b/frontend/src/modules/settings/SettingsPanel.downloads.dom.test.tsx
similarity index 77%
rename from frontend/src/components/SettingsPanel.downloads.dom.test.tsx
rename to frontend/src/modules/settings/SettingsPanel.downloads.dom.test.tsx
index 6b63579f..73890684 100644
--- a/frontend/src/components/SettingsPanel.downloads.dom.test.tsx
+++ b/frontend/src/modules/settings/SettingsPanel.downloads.dom.test.tsx
@@ -6,23 +6,27 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
-import { api } from "../lib/api";
+import { api } from "../../lib/api";
 
 vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ i18n: { language: "en" }, t: (key: string) => key }),
 }));
-vi.mock("../lib/storage", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/storage")>()),
+vi.mock("../../lib/storage", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/storage")>()),
   // Opened on the Downloads tab: Appearance, the default, needs the whole prefs provider.
   useTabPersistedState: () => useState("downloads"),
 }));
-vi.mock("../lib/useMe", () => ({
+vi.mock("../../lib/useMe", () => ({
   useMe: () => ({ id: 1, role: "user", email: "a@b.c", google_enabled: false }),
 }));
-vi.mock("./prefsContext", () => ({ usePrefs: () => ({ saveState: "idle" }) }));
-vi.mock("./wizardContext", () => ({ useWizard: () => ({ openWizard: vi.fn() }) }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => vi.fn(async () => true) }));
+vi.mock("../../features/prefs/prefsContext", () => ({ usePrefs: () => ({ saveState: "idle" }) }));
+vi.mock("../../features/wizard/wizardContext", () => ({
+  useWizard: () => ({ openWizard: vi.fn() }),
+}));
+vi.mock("../../components/ui/confirmContext", () => ({
+  useConfirm: () => vi.fn(async () => true),
+}));
 
 import SettingsPanel from "./SettingsPanel";
 
diff --git a/frontend/src/components/SettingsPanel.signIn.dom.test.tsx b/frontend/src/modules/settings/SettingsPanel.signIn.dom.test.tsx
similarity index 84%
rename from frontend/src/components/SettingsPanel.signIn.dom.test.tsx
rename to frontend/src/modules/settings/SettingsPanel.signIn.dom.test.tsx
index fa9fc99f..d54c4104 100644
--- a/frontend/src/components/SettingsPanel.signIn.dom.test.tsx
+++ b/frontend/src/modules/settings/SettingsPanel.signIn.dom.test.tsx
@@ -6,8 +6,8 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import type { Me } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import type { Me } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 const h = vi.hoisted(() => ({
   logoutOthers: vi.fn(async () => ({ ok: true })),
@@ -21,15 +21,17 @@ vi.mock("react-i18next", async (importOriginal) => {
     useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
   };
 });
-vi.mock("../lib/api", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/api")>()),
+vi.mock("../../lib/api", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/api")>()),
   api: h,
 }));
-vi.mock("../lib/notifications", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/notifications")>();
+vi.mock("../../lib/notifications", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/notifications")>();
   return { ...actual, notify: vi.fn() };
 });
-vi.mock("./confirmContext", () => ({ useConfirm: () => vi.fn(async () => true) }));
+vi.mock("../../components/ui/confirmContext", () => ({
+  useConfirm: () => vi.fn(async () => true),
+}));
 
 import { SignInMethods } from "./SettingsPanel";
 
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/modules/settings/SettingsPanel.tsx
similarity index 93%
rename from frontend/src/components/SettingsPanel.tsx
rename to frontend/src/modules/settings/SettingsPanel.tsx
index 9af687f1..a4ef2711 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/modules/settings/SettingsPanel.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import { connectGoogle } from "../lib/googleConnect";
-import { qk } from "../lib/queryKeys";
-import { formatDate, formatDateTime, formatUnit } from "../lib/format";
+import { connectGoogle } from "../../lib/googleConnect";
+import { qk } from "../../lib/queryKeys";
+import { formatDate, formatDateTime, formatUnit } from "../../lib/format";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -19,51 +19,35 @@ import {
 import { DownloadFormats } from "./ProfileEditor";
 import DiagnosticsSettings from "./DiagnosticsSettings";
 import ApiTokens from "./ApiTokens";
-import { type SettingsTabId } from "../lib/settingsTab";
-import { SCHEMES, type Scheme, type ThemePrefs } from "../lib/theme";
-import { api, HttpError, type Me } from "../lib/api";
-import { displayName, roleKey } from "../lib/api/account";
-import { notifyActionError } from "../lib/actionErrors";
-import { LS, useTabPersistedState } from "../lib/storage";
-import Avatar from "./ui/Avatar";
-import { notify, type NotifSettings } from "../lib/notifications";
-import Tooltip from "./ui/Tooltip";
-import { Section, SwitchRow } from "./ui/form";
-import { Badge } from "./ui/Badge";
-import { Button } from "./ui/Button";
-import { type SaveState } from "./ui/DraftSaveBar";
-import { useConfirm } from "./confirmContext";
-import { StateMessage } from "./ui/QueryState";
-import { useWizard } from "./wizardContext";
-import { START_ON_HOME_OPTIONS, START_ON_HOME_PREF } from "./navigationInit";
-import { usePref } from "../lib/usePref";
-import { usePrefs } from "./prefsContext";
-import Tabs from "./ui/Tabs";
-import { useTabPanel } from "./ui/tabPanel";
-import { useMe } from "../lib/useMe";
-import { Pressable } from "./ui/Pressable";
-import { Slider } from "./ui/NativeControls";
-import { Input, Textarea } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
-
-// The Settings page edits server-persisted preferences. Each change applies locally for instant
-// preview AND auto-saves (debounced) — no draft, no Save button; a small indicator flashes the
-// outcome. PrefsProvider owns the state + the save; this controller
-// is how the panel reads/writes it.
-export type PrefsSaveState = SaveState;
-export interface PrefsController {
-  theme: ThemePrefs;
-  setTheme: (t: ThemePrefs) => void;
-  perf: boolean;
-  setPerf: (v: boolean) => void;
-  hints: boolean;
-  setHints: (v: boolean) => void;
-  railLabels: boolean;
-  setRailLabels: (v: boolean) => void;
-  notif: NotifSettings;
-  setNotif: (n: NotifSettings) => void;
-  saveState: PrefsSaveState;
-}
+import { type SettingsTabId } from "../../lib/settingsTab";
+import { SCHEMES, type Scheme } from "../../lib/theme";
+import { api, HttpError, type Me } from "../../lib/api";
+import { displayName, roleKey } from "../../lib/api/account";
+import { notifyActionError } from "../../lib/actionErrors";
+import { LS, useTabPersistedState } from "../../lib/storage";
+import Avatar from "../../components/ui/Avatar";
+import { notify, type NotifSettings } from "../../lib/notifications";
+import Tooltip from "../../components/ui/Tooltip";
+import { Section, SwitchRow } from "../../components/ui/form";
+import { Badge } from "../../components/ui/Badge";
+import { Button } from "../../components/ui/Button";
+import { type SaveState } from "../../components/ui/DraftSaveBar";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { StateMessage } from "../../components/ui/QueryState";
+import { useWizard } from "../../features/wizard/wizardContext";
+import {
+  START_ON_HOME_OPTIONS,
+  START_ON_HOME_PREF,
+} from "../../features/navigation/navigationInit";
+import { usePref } from "../../lib/usePref";
+import { usePrefs, type PrefsController } from "../../features/prefs/prefsContext";
+import Tabs from "../../components/ui/Tabs";
+import { useTabPanel } from "../../components/ui/tabPanel";
+import { useMe } from "../../lib/useMe";
+import { Pressable } from "../../components/ui/Pressable";
+import { Slider } from "../../components/ui/NativeControls";
+import { Input, Textarea } from "../../components/ui/Input";
+import { SURFACE } from "../../components/ui/surfaces";
 
 type TabId = SettingsTabId;
 const TABS: { id: TabId; icon: typeof Monitor }[] = [
@@ -76,8 +60,8 @@ const TABS: { id: TabId; icon: typeof Monitor }[] = [
 ];
 
 // Settings as a page (Design B): rendered in the main content area, not an overlay. It keeps
-// the frosted `.glass` surface so it still refracts the ambient backdrop. The page title is
-// shown by the Header; the tab rail stays as in-page sub-navigation.
+// the frosted `.glass` surface so it still refracts the ambient backdrop. The page's identity is
+// the nav rail and the tab title; the tab rail stays as in-page sub-navigation.
 export default function SettingsPanel() {
   const me = useMe();
   const { t } = useTranslation();
@@ -135,7 +119,7 @@ export default function SettingsPanel() {
 
 // A small transient indicator of the auto-save outcome. Renders nothing while idle; it sits at the
 // bottom of the settings card and fades after a success (the state resets to "idle" in App).
-function SaveIndicator({ state }: { state: PrefsSaveState }) {
+function SaveIndicator({ state }: { state: SaveState }) {
   const { t } = useTranslation();
   if (state === "idle") return null;
   return (
diff --git a/frontend/src/modules/settings/index.ts b/frontend/src/modules/settings/index.ts
new file mode 100644
index 00000000..d149109e
--- /dev/null
+++ b/frontend/src/modules/settings/index.ts
@@ -0,0 +1,2 @@
+// The settings page's public face: how the shell and the navigation know it.
+export { settingsModule } from "./module";
diff --git a/frontend/src/modules/settings/module.ts b/frontend/src/modules/settings/module.ts
new file mode 100644
index 00000000..551920fc
--- /dev/null
+++ b/frontend/src/modules/settings/module.ts
@@ -0,0 +1,13 @@
+import { Settings } from "lucide-react";
+import { lazyWithPreload } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page loads lazily.
+export const settingsModule: ModuleDef = {
+  id: "settings",
+  labelKey: "header.account.settings",
+  railKey: "nav.rail.settings",
+  titleKey: "settings.title",
+  icon: Settings,
+  Page: lazyWithPreload(() => import("./SettingsPanel")),
+};
diff --git a/frontend/src/components/Stats.tsx b/frontend/src/modules/stats/Stats.tsx
similarity index 89%
rename from frontend/src/components/Stats.tsx
rename to frontend/src/modules/stats/Stats.tsx
index 79dd7daf..17cdd932 100644
--- a/frontend/src/components/Stats.tsx
+++ b/frontend/src/modules/stats/Stats.tsx
@@ -1,19 +1,19 @@
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { History, RefreshCw } from "lucide-react";
-import { api } from "../lib/api";
-import { formatEta, formatNumber, quotaActionLabel } from "../lib/format";
-import { notify } from "../lib/notifications";
-import { notifyYouTubeActionError } from "../lib/youtubeErrors";
-import { useWizard } from "./wizardContext";
-import Tooltip from "./ui/Tooltip";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { Section } from "./ui/form";
-import { SectionLabel } from "./ui/Headings";
-import { StatBars, StatTile, StatTiles } from "./ui/StatTiles";
-import { notifyActionError } from "../lib/actionErrors";
-import { Button } from "./ui/Button";
+import { api } from "../../lib/api";
+import { formatEta, formatNumber, quotaActionLabel } from "../../lib/format";
+import { notify } from "../../lib/notifications";
+import { notifyYouTubeActionError } from "../../lib/youtubeErrors";
+import { useWizard } from "../../features/wizard/wizardContext";
+import Tooltip from "../../components/ui/Tooltip";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { Section } from "../../components/ui/form";
+import { SectionLabel } from "../../components/ui/Headings";
+import { StatBars, StatTile, StatTiles } from "../../components/ui/StatTiles";
+import { notifyActionError } from "../../lib/actionErrors";
+import { Button } from "../../components/ui/Button";
 
 // Usage & stats page: your sync status, your own API usage and the manual sync actions (they used to
 // live in Settings → Sync; they moved here so Settings stays config-only). The instance-wide quota
diff --git a/frontend/src/modules/stats/index.ts b/frontend/src/modules/stats/index.ts
new file mode 100644
index 00000000..15c8803d
--- /dev/null
+++ b/frontend/src/modules/stats/index.ts
@@ -0,0 +1,2 @@
+// The stats page's public face: how the shell and the navigation know it.
+export { statsModule } from "./module";
diff --git a/frontend/src/modules/stats/module.ts b/frontend/src/modules/stats/module.ts
new file mode 100644
index 00000000..08e70a6b
--- /dev/null
+++ b/frontend/src/modules/stats/module.ts
@@ -0,0 +1,13 @@
+import { BarChart3 } from "lucide-react";
+import { lazyWithPreload } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page loads lazily.
+export const statsModule: ModuleDef = {
+  id: "stats",
+  labelKey: "header.account.stats",
+  railKey: "nav.rail.stats",
+  titleKey: "header.usageStats",
+  icon: BarChart3,
+  Page: lazyWithPreload(() => import("./Stats")),
+};
diff --git a/frontend/src/components/AccountPanel.tsx b/frontend/src/modules/users/AccountPanel.tsx
similarity index 92%
rename from frontend/src/components/AccountPanel.tsx
rename to frontend/src/modules/users/AccountPanel.tsx
index ee27580b..4fe459e7 100644
--- a/frontend/src/components/AccountPanel.tsx
+++ b/frontend/src/modules/users/AccountPanel.tsx
@@ -2,20 +2,20 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Check, Clock, Copy, Globe, KeyRound, LogIn, Mail, Send, ShieldAlert } from "lucide-react";
-import Modal from "./ui/Modal";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { api } from "../lib/api";
-import { displayName } from "../lib/api/account";
-import { qk } from "../lib/queryKeys";
-import { notify } from "../lib/notifications";
-import { notifyActionError } from "../lib/actionErrors";
-import { formatDateTime } from "../lib/format";
-import { invalidateUserAccess } from "../lib/adminUsers";
-import type { AdminUserAccess, AdminUserRow } from "../lib/api/admin";
-import { Button } from "./ui/Button";
-import { SURFACE } from "./ui/surfaces";
-import { SectionLabel } from "./ui/Headings";
-import { useCopyFeedback } from "./useCopyFeedback";
+import Modal from "../../components/ui/Modal";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { api } from "../../lib/api";
+import { displayName } from "../../lib/api/account";
+import { qk } from "../../lib/queryKeys";
+import { notify } from "../../lib/notifications";
+import { notifyActionError } from "../../lib/actionErrors";
+import { formatDateTime } from "../../lib/format";
+import { invalidateUserAccess } from "../../lib/adminUsers";
+import type { AdminUserAccess, AdminUserRow } from "../../lib/api/admin";
+import { Button } from "../../components/ui/Button";
+import { SURFACE } from "../../components/ui/surfaces";
+import { SectionLabel } from "../../components/ui/Headings";
+import { useCopyFeedback } from "../../components/ui/useCopyFeedback";
 
 // The admin's answer to "why can this person not get in?", and the place every recovery action for
 // one account lives.
diff --git a/frontend/src/components/AdminUsers.dom.test.tsx b/frontend/src/modules/users/AdminUsers.dom.test.tsx
similarity index 92%
rename from frontend/src/components/AdminUsers.dom.test.tsx
rename to frontend/src/modules/users/AdminUsers.dom.test.tsx
index 7dc77a69..bb8b449f 100644
--- a/frontend/src/components/AdminUsers.dom.test.tsx
+++ b/frontend/src/modules/users/AdminUsers.dom.test.tsx
@@ -15,7 +15,7 @@ vi.mock("react-i18next", async (importOriginal) => {
     useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
   };
 });
-vi.mock("../lib/useMe", () => ({
+vi.mock("../../lib/useMe", () => ({
   useMe: () => ({
     id: 1,
     email: "admin@x",
@@ -24,20 +24,20 @@ vi.mock("../lib/useMe", () => ({
     pending_activations: 0,
   }),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => async () => true }));
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => async () => true }));
 const { notify } = vi.hoisted(() => ({
   notify: vi.fn((_n: { level: string; message: string }) => 0),
 }));
-vi.mock("../lib/notifications", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/notifications")>()),
+vi.mock("../../lib/notifications", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/notifications")>()),
   notify,
 }));
-vi.mock("../lib/errorDialog", () => ({ reportError: vi.fn() }));
+vi.mock("../../lib/errorDialog", () => ({ reportError: vi.fn() }));
 
 import AdminUsers from "./AdminUsers";
-import { api, type AdminUserRow } from "../lib/api";
-import { relativeTime } from "../lib/format";
-import i18n from "../i18n";
+import { api, type AdminUserRow } from "../../lib/api";
+import { relativeTime } from "../../lib/format";
+import i18n from "../../i18n";
 
 const row = {
   id: 2,
@@ -185,7 +185,7 @@ describe("a user action that fails", () => {
     mount();
     vi.spyOn(globalThis, "fetch").mockResolvedValue(answer(409, "Cannot demote the last admin"));
     await chooseInRowMenu("users.roles.makeAdmin");
-    const { reportError } = await import("../lib/errorDialog");
+    const { reportError } = await import("../../lib/errorDialog");
     await waitFor(() => expect(reportError).toHaveBeenCalled());
     expect(notify.mock.calls.filter(([n]) => n.level === "error")).toEqual([]);
   });
diff --git a/frontend/src/components/AdminUsers.tsx b/frontend/src/modules/users/AdminUsers.tsx
similarity index 95%
rename from frontend/src/components/AdminUsers.tsx
rename to frontend/src/modules/users/AdminUsers.tsx
index 6e38265d..812e8343 100644
--- a/frontend/src/components/AdminUsers.tsx
+++ b/frontend/src/modules/users/AdminUsers.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { qk } from "../lib/queryKeys";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -22,36 +22,36 @@ import {
   type Invite,
   type Me,
   type PendingAccessRow,
-} from "../lib/api";
-import { displayName } from "../lib/api/account";
-import { notify } from "../lib/notifications";
-import { formatDateTime, relativeTime } from "../lib/format";
-import { invalidateUserAccess } from "../lib/adminUsers";
-import { ADMIN_USERS_TAB_KEY } from "../lib/adminUsersTab";
-import { Badge } from "./ui/Badge";
-import { Button } from "./ui/Button";
-import { IconButton } from "./ui/IconButton";
-import Tooltip from "./ui/Tooltip";
-import InlineNotice from "./ui/InlineNotice";
-import { Section } from "./ui/form";
-import SegmentedToggle from "./ui/SegmentedToggle";
-import { LANGUAGES, type LangCode } from "../i18n";
-import { LoadingState, StateMessage } from "./ui/QueryState";
+} from "../../lib/api";
+import { displayName } from "../../lib/api/account";
+import { notify } from "../../lib/notifications";
+import { formatDateTime, relativeTime } from "../../lib/format";
+import { invalidateUserAccess } from "../../lib/adminUsers";
+import { ADMIN_USERS_TAB_KEY } from "../../lib/adminUsersTab";
+import { Badge } from "../../components/ui/Badge";
+import { Button } from "../../components/ui/Button";
+import { IconButton } from "../../components/ui/IconButton";
+import Tooltip from "../../components/ui/Tooltip";
+import InlineNotice from "../../components/ui/InlineNotice";
+import { Section } from "../../components/ui/form";
+import SegmentedToggle from "../../components/ui/SegmentedToggle";
+import { LANGUAGES, type LangCode } from "../../i18n";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
 import AccountPanel from "./AccountPanel";
-import { useConfirm } from "./confirmContext";
-import Tabs from "./ui/Tabs";
-import { useTabPanel } from "./ui/tabPanel";
-import { useTabPersistedState } from "../lib/storage";
-import { PageToolbar } from "./ui/PageShell";
-import { useMe } from "../lib/useMe";
-import { notifyActionError, notifyKnownFailure } from "../lib/actionErrors";
-import { Pressable } from "./ui/Pressable";
-import { useContextMenu } from "./ui/useContextMenu";
-import { ContextMenu } from "./ui/ContextMenu";
-import { MoreButton } from "./ui/MoreButton";
-import type { ActionMenuItem } from "./ui/ActionMenu";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
+import { useConfirm } from "../../components/ui/confirmContext";
+import Tabs from "../../components/ui/Tabs";
+import { useTabPanel } from "../../components/ui/tabPanel";
+import { useTabPersistedState } from "../../lib/storage";
+import { PageToolbar } from "../../components/ui/PageShell";
+import { useMe } from "../../lib/useMe";
+import { notifyActionError, notifyKnownFailure } from "../../lib/actionErrors";
+import { Pressable } from "../../components/ui/Pressable";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import { MoreButton } from "../../components/ui/MoreButton";
+import type { ActionMenuItem } from "../../components/ui/ActionMenu";
+import { Input } from "../../components/ui/Input";
+import { SURFACE } from "../../components/ui/surfaces";
 import { StorageTab } from "./downloadAdmin";
 
 // Admin-only user & access management: roles, access requests (the Invite whitelist), and the
diff --git a/frontend/src/components/accountPanel.dom.test.tsx b/frontend/src/modules/users/accountPanel.dom.test.tsx
similarity index 94%
rename from frontend/src/components/accountPanel.dom.test.tsx
rename to frontend/src/modules/users/accountPanel.dom.test.tsx
index 55151e6a..d1307d02 100644
--- a/frontend/src/components/accountPanel.dom.test.tsx
+++ b/frontend/src/modules/users/accountPanel.dom.test.tsx
@@ -23,8 +23,8 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 const notifyMock = vi.fn();
-vi.mock("../lib/notifications", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/notifications")>();
+vi.mock("../../lib/notifications", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/notifications")>();
   return { ...actual, notify: (...a: unknown[]) => notifyMock(...a) };
 });
 
@@ -45,12 +45,12 @@ const apiMock = {
   resendUserVerification: vi.fn(),
   activateUser: vi.fn(),
 };
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return { ...actual, api: apiMock };
 });
 
-const { HttpError } = await import("../lib/api");
+const { HttpError } = await import("../../lib/api");
 const AccountPanel = (await import("./AccountPanel")).default;
 
 const user = {
diff --git a/frontend/src/components/adminInvites.dom.test.tsx b/frontend/src/modules/users/adminInvites.dom.test.tsx
similarity index 95%
rename from frontend/src/components/adminInvites.dom.test.tsx
rename to frontend/src/modules/users/adminInvites.dom.test.tsx
index a0134b2e..abc7f8a5 100644
--- a/frontend/src/components/adminInvites.dom.test.tsx
+++ b/frontend/src/modules/users/adminInvites.dom.test.tsx
@@ -10,7 +10,7 @@
 import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
 import { render, screen, cleanup, waitFor, fireEvent } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { formatDateTime } from "../lib/format";
+import { formatDateTime } from "../../lib/format";
 
 vi.mock("react-i18next", async (importOriginal) => {
   const actual = await importOriginal<typeof import("react-i18next")>();
@@ -33,13 +33,13 @@ type ConfirmOpts = {
   danger?: boolean;
 };
 const confirmMock = vi.fn(async (_opts: ConfirmOpts) => true);
-vi.mock("./confirmContext", () => ({
+vi.mock("../../components/ui/confirmContext", () => ({
   useConfirm: () => confirmMock,
 }));
 
 const notifyMock = vi.fn();
-vi.mock("../lib/notifications", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/notifications")>();
+vi.mock("../../lib/notifications", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/notifications")>();
   return { ...actual, notify: (...a: unknown[]) => notifyMock(...a) };
 });
 
@@ -50,21 +50,21 @@ const meMock = {
   id: 1,
   role: "admin",
 };
-vi.mock("../lib/useMe", () => ({ useMe: () => meMock }));
+vi.mock("../../lib/useMe", () => ({ useMe: () => meMock }));
 
 // The tab strip is rendered into an app-level toolbar slot that does not exist here, so pin the
 // active tab directly — this file is about the Access-requests panel, not the tab chrome.
-vi.mock("./ui/Tabs", () => ({ default: () => null }));
-vi.mock("../lib/storage", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/storage")>()),
+vi.mock("../../components/ui/Tabs", () => ({ default: () => null }));
+vi.mock("../../lib/storage", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/storage")>()),
   useTabPersistedState: () => ["access", () => {}],
 }));
 
 const listMock = vi.fn();
 const deleteMock = vi.fn();
 const inviteMock = vi.fn();
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
@@ -79,7 +79,7 @@ vi.mock("../lib/api", async (importOriginal) => {
   };
 });
 
-import { HttpError } from "../lib/api";
+import { HttpError } from "../../lib/api";
 import AdminUsers from "./AdminUsers";
 
 const invite = (over: Partial<Record<string, unknown>> = {}) => ({
diff --git a/frontend/src/components/adminPendingAccess.dom.test.tsx b/frontend/src/modules/users/adminPendingAccess.dom.test.tsx
similarity index 91%
rename from frontend/src/components/adminPendingAccess.dom.test.tsx
rename to frontend/src/modules/users/adminPendingAccess.dom.test.tsx
index c4110d7e..a733adfc 100644
--- a/frontend/src/components/adminPendingAccess.dom.test.tsx
+++ b/frontend/src/modules/users/adminPendingAccess.dom.test.tsx
@@ -25,13 +25,13 @@ vi.mock("react-i18next", async (importOriginal) => {
   };
 });
 
-vi.mock("./confirmContext", () => ({
+vi.mock("../../components/ui/confirmContext", () => ({
   useConfirm: () => vi.fn(async () => true),
 }));
 
 const notifyMock = vi.fn();
-vi.mock("../lib/notifications", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/notifications")>();
+vi.mock("../../lib/notifications", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/notifications")>();
   return { ...actual, notify: (...a: unknown[]) => notifyMock(...a) };
 });
 
@@ -42,20 +42,20 @@ const meMock = {
   id: 1,
   role: "admin",
 };
-vi.mock("../lib/useMe", () => ({ useMe: () => meMock }));
+vi.mock("../../lib/useMe", () => ({ useMe: () => meMock }));
 
 // The tab strip renders into an app-level toolbar slot that does not exist here; pin the tab.
-vi.mock("./ui/Tabs", () => ({ default: () => null }));
-vi.mock("../lib/storage", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("../lib/storage")>()),
+vi.mock("../../components/ui/Tabs", () => ({ default: () => null }));
+vi.mock("../../lib/storage", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../lib/storage")>()),
   useTabPersistedState: () => ["access", () => {}],
 }));
 
 const pendingMock = vi.fn();
 const activateMock = vi.fn();
 const resendMock = vi.fn();
-vi.mock("../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("../lib/api")>();
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../lib/api")>();
   return {
     ...actual,
     api: {
@@ -155,7 +155,7 @@ describe("the stuck sign-ups section", () => {
   });
 
   it("says the mail was never sent when the instance has no SMTP", async () => {
-    const { HttpError } = await import("../lib/api");
+    const { HttpError } = await import("../../lib/api");
     pendingMock.mockResolvedValue([row({ email_verified: false })]);
     resendMock.mockRejectedValue(
       new HttpError(409, "errors.admin.email_off", { code: "resend", reason: "email_off" }),
diff --git a/frontend/src/components/downloadAdmin.dom.test.tsx b/frontend/src/modules/users/downloadAdmin.dom.test.tsx
similarity index 99%
rename from frontend/src/components/downloadAdmin.dom.test.tsx
rename to frontend/src/modules/users/downloadAdmin.dom.test.tsx
index a7eb6553..2a8fc01d 100644
--- a/frontend/src/components/downloadAdmin.dom.test.tsx
+++ b/frontend/src/modules/users/downloadAdmin.dom.test.tsx
@@ -7,7 +7,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
-import { api } from "../lib/api";
+import { api } from "../../lib/api";
 import { QuotaModal } from "./downloadAdmin";
 
 vi.mock("react-i18next", async (importOriginal) => {
diff --git a/frontend/src/components/downloadAdmin.storage.dom.test.tsx b/frontend/src/modules/users/downloadAdmin.storage.dom.test.tsx
similarity index 95%
rename from frontend/src/components/downloadAdmin.storage.dom.test.tsx
rename to frontend/src/modules/users/downloadAdmin.storage.dom.test.tsx
index 61d862c5..574abc6e 100644
--- a/frontend/src/components/downloadAdmin.storage.dom.test.tsx
+++ b/frontend/src/modules/users/downloadAdmin.storage.dom.test.tsx
@@ -7,8 +7,8 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { api, type AdminStorage, type DownloadJob } from "../lib/api";
-import { qk } from "../lib/queryKeys";
+import { api, type AdminStorage, type DownloadJob } from "../../lib/api";
+import { qk } from "../../lib/queryKeys";
 
 const mocks = vi.hoisted(() => ({
   storage: undefined as unknown,
@@ -24,8 +24,8 @@ vi.mock("react-i18next", async (importOriginal) => ({
       `${key}${o?.size ? `:${o.size}` : ""}${o?.email ? `:${o.email}` : ""}`,
   }),
 }));
-vi.mock("./confirmContext", () => ({ useConfirm: () => mocks.confirm }));
-vi.mock("../lib/useLiveQuery", () => ({
+vi.mock("../../components/ui/confirmContext", () => ({ useConfirm: () => mocks.confirm }));
+vi.mock("../../lib/useLiveQuery", () => ({
   useLiveQuery: (key: readonly unknown[]) => ({
     data: key[0] === qk.adminStorage()[0] ? mocks.storage : mocks.jobs,
     isError: false,
diff --git a/frontend/src/components/downloadAdmin.tsx b/frontend/src/modules/users/downloadAdmin.tsx
similarity index 91%
rename from frontend/src/components/downloadAdmin.tsx
rename to frontend/src/modules/users/downloadAdmin.tsx
index a6059384..be12ad8b 100644
--- a/frontend/src/components/downloadAdmin.tsx
+++ b/frontend/src/modules/users/downloadAdmin.tsx
@@ -1,29 +1,29 @@
 import { useState } from "react";
-import { Meter } from "./ui/Meter";
-import { qk } from "../lib/queryKeys";
+import { Meter } from "../../components/ui/Meter";
+import { qk } from "../../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ExternalLink, RotateCcw, Settings2 } from "lucide-react";
-import Modal, { ModalFooter } from "./ui/Modal";
-import { useLiveQuery } from "../lib/useLiveQuery";
-import { api, type AdminStorageUser, type DownloadJob } from "../lib/api";
-import { formatBytes } from "../lib/format";
-import { Button } from "./ui/Button";
-import { StatusPill } from "./downloadRow";
-import { jobTitle } from "./downloadTitle";
-import { useConfirm } from "./confirmContext";
-import { useCopyItems } from "./copyItems";
-import { type ActionMenuItem } from "./ui/ActionMenu";
-import { ContextMenu } from "./ui/ContextMenu";
-import DataTable, { type Column } from "./ui/DataTable";
-import { Section } from "./ui/form";
-import { menuGroups } from "./ui/menuGroups";
-import { MoreButton } from "./ui/MoreButton";
-import { useContextMenu } from "./ui/useContextMenu";
-import { Input } from "./ui/Input";
-import { CheckRow } from "./ui/NativeControls";
-import { LoadingState, StateMessage } from "./ui/QueryState";
-import { SURFACE } from "./ui/surfaces";
+import Modal, { ModalFooter } from "../../components/ui/Modal";
+import { useLiveQuery } from "../../lib/useLiveQuery";
+import { api, type AdminStorageUser, type DownloadJob } from "../../lib/api";
+import { formatBytes } from "../../lib/format";
+import { Button } from "../../components/ui/Button";
+import { StatusPill } from "../../features/downloads/downloadRow";
+import { jobTitle } from "../../features/downloads/downloadTitle";
+import { useConfirm } from "../../components/ui/confirmContext";
+import { useCopyItems } from "../../components/ui/copyItems";
+import { type ActionMenuItem } from "../../components/ui/ActionMenu";
+import { ContextMenu } from "../../components/ui/ContextMenu";
+import DataTable, { type Column } from "../../components/ui/DataTable";
+import { Section } from "../../components/ui/form";
+import { menuGroups } from "../../components/ui/menuGroups";
+import { MoreButton } from "../../components/ui/MoreButton";
+import { useContextMenu } from "../../components/ui/useContextMenu";
+import { Input } from "../../components/ui/Input";
+import { CheckRow } from "../../components/ui/NativeControls";
+import { LoadingState, StateMessage } from "../../components/ui/QueryState";
+import { SURFACE } from "../../components/ui/surfaces";
 
 // The admin Users page's "Storage" tab: the disk in three numbers, every user's footprint against
 // their own limit (the quota editor), and every user's downloads. Both lists are tables with aligned
diff --git a/frontend/src/modules/users/index.ts b/frontend/src/modules/users/index.ts
new file mode 100644
index 00000000..29c87bbb
--- /dev/null
+++ b/frontend/src/modules/users/index.ts
@@ -0,0 +1,2 @@
+// The users page's public face: how the shell and the navigation know it.
+export { usersModule } from "./module";
diff --git a/frontend/src/modules/users/module.ts b/frontend/src/modules/users/module.ts
new file mode 100644
index 00000000..1585f72c
--- /dev/null
+++ b/frontend/src/modules/users/module.ts
@@ -0,0 +1,16 @@
+import { Users } from "lucide-react";
+import { lazyWithPreload } from "../../lib/lazyWithPreload";
+import type { ModuleDef } from "../../lib/moduleDef";
+
+// This page as the shell and the navigation know it (lib/moduleDef). Its page loads lazily.
+export const usersModule: ModuleDef = {
+  id: "users",
+  labelKey: "header.account.users",
+  railKey: "nav.rail.users",
+  titleKey: "header.users",
+  icon: Users,
+  system: true,
+  gate: (me) => me.role === "admin",
+  Page: lazyWithPreload(() => import("./AdminUsers")),
+  maxWidth: "48rem",
+};
diff --git a/frontend/src/components/About.tsx b/frontend/src/shell/About.tsx
similarity index 96%
rename from frontend/src/components/About.tsx
rename to frontend/src/shell/About.tsx
index e925985e..1b73accf 100644
--- a/frontend/src/components/About.tsx
+++ b/frontend/src/shell/About.tsx
@@ -5,8 +5,8 @@ import { Info, Sparkles } from "lucide-react";
 import { api } from "../lib/api";
 import { FRONTEND_VERSION, FRONTEND_SHA, FRONTEND_BUILD_DATE } from "../lib/version";
 import { formatDateTime } from "../lib/format";
-import { Button } from "./ui/Button";
-import Modal from "./ui/Modal";
+import { Button } from "../components/ui/Button";
+import Modal from "../components/ui/Modal";
 
 function fmtDate(d: string | null | undefined, lang: string): string {
   if (!d) return "—";
diff --git a/frontend/src/shell/App.tsx b/frontend/src/shell/App.tsx
new file mode 100644
index 00000000..b3cbd6de
--- /dev/null
+++ b/frontend/src/shell/App.tsx
@@ -0,0 +1,211 @@
+import { lazy, Suspense, useState } from "react";
+import { qk } from "../lib/queryKeys";
+import { saveLanguage } from "../lib/saveLanguage";
+import { useTranslation } from "react-i18next";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { api } from "../lib/api";
+import { notifyActionError } from "../lib/actionErrors";
+import { setLanguage, type LangCode } from "../i18n";
+import { useShellSession } from "./useShellSession";
+import { useEntryParams } from "./useEntryParams";
+import { useAccessRequestsNudge } from "./useAccessRequestsNudge";
+import { useVerifyEntry } from "../lib/useVerifyEntry";
+import { useNavigation, useNavigationActions } from "../features/navigation/navigationContext";
+import { useFeedScrollKey, ChannelPage } from "../modules/feed";
+import { moduleDef, pageTitleKey } from "../features/navigation/moduleRegistry";
+import { LoadingState } from "../components/ui/QueryState";
+// Persistent shell — always mounted, so eagerly imported.
+import Welcome from "./Welcome";
+import SetupWizard from "./SetupWizard";
+import Header from "./Header";
+import NavSidebar from "./NavSidebar";
+import BackToTop from "../components/ui/BackToTop";
+import PageShell, { PageHeaderDefault } from "../components/ui/PageShell";
+import { PaletteLauncher } from "../features/header/PaletteLauncher";
+import { SkipLink } from "../components/ui/SkipLink";
+import DebugRecorder from "../features/diagnostics/DebugRecorder";
+import Toaster from "../components/ui/Toaster";
+import KeyboardHelp from "../components/ui/KeyboardHelp";
+import AppCommandPalette from "./AppCommandPalette";
+import DownloadIntake from "../features/downloads/DownloadIntake";
+import DownloadTray from "../features/downloads/DownloadTray";
+import ErrorDialog from "./ErrorDialog";
+import VersionBanner from "./VersionBanner";
+import VerifyBanner from "./VerifyBanner";
+// The built app version, NOT imported from releaseNotes — importing anything from that module
+// pulls the release-notes loader into the eager App chunk and defeats the lazy ReleaseNotes
+// split. FRONTEND_VERSION equals the newest release note's version by release convention (both bump together).
+import { FRONTEND_VERSION } from "../lib/version";
+
+// The page modules (and their side rails) are code-split per route: each module's definition imports
+// them lazily (features/navigation/moduleRegistry), and so does the feed's for the channel page. App
+// keeps only the persistent-shell chunks and the two modals.
+const About = lazy(() => import("./About"));
+const ReleaseNotes = lazy(() => import("./ReleaseNotes"));
+
+export default function App() {
+  const { t, i18n } = useTranslation();
+  const { page, channelView } = useNavigation();
+  const { setPage } = useNavigationActions();
+  // An emailed verification link is confirmed HERE, above the signed-in/signed-out branch below, so
+  // it works in a browser that already holds a session. It used to be handled inside Welcome, which
+  // that branch never renders when signed in — the token was silently dropped. Signed out, the
+  // outcome goes to the auth card's banners; signed in, to the top-of-app bar.
+  const verifyEntry = useVerifyEntry();
+  // The feed page restores its scroll by its own key (its filters, the live search); read always,
+  // used only while the feed is the page.
+  const feedScrollKey = useFeedScrollKey();
+  const queryClient = useQueryClient();
+  const [aboutOpen, setAboutOpen] = useState(false);
+  const [notesOpen, setNotesOpen] = useState(false);
+  const [notesHighlight, setNotesHighlight] = useState<string | undefined>(undefined);
+
+  function openReleaseNotes(highlight?: string) {
+    setNotesHighlight(highlight);
+    setNotesOpen(true);
+  }
+
+  // (The feed filters + page/channel now LIVE in the address bar — FeedFiltersProvider and
+  // NavigationProvider read them on load and keep them mirrored — so there's no query to strip here.)
+
+  // Passive observers (enabled:false) of the setup-status and `me` queries BootGate fetches, polls
+  // and waits for: App mounts only once both have answered, so their caches are always populated here.
+  const setupQuery = useQuery({
+    queryKey: qk.setupStatus(),
+    queryFn: api.setupStatus,
+    enabled: false,
+  });
+  const needsSetup = setupQuery.data?.configured === false;
+  const meQuery = useQuery({ queryKey: qk.me(), queryFn: api.me, enabled: false });
+  // The signed-in account, or null/undefined while signed out. Hoisted here because half a dozen
+  // effects below depend on it, and a dep list is only honest if it names the value the body reads.
+  const me = meQuery.data;
+
+  // What runs for the session (keys, diagnostics, preloading, the 401 handler), what the entry URL
+  // asks for once, and the admin's waiting-requests nudge: each its own shell hook, so App is layout.
+  useShellSession(me, setPage);
+  useEntryParams(me, meQuery.refetch, setPage);
+  useAccessRequestsNudge(me, setPage);
+
+  // Language is edited outside the Settings page (sidebar/login), so it stays instant.
+  function changeLanguage(code: LangCode) {
+    setLanguage(code);
+    // Also from the signed-out login page, where the save 401s — `req` marks that as handled, so
+    // the reporter stays quiet there.
+    saveLanguage(queryClient, code).catch((e: unknown) =>
+      notifyActionError(e, t("errors.writeFailed.prefs")),
+    );
+  }
+
+  // First-run: a fresh instance is in setup mode (all other routes are locked) → show the wizard.
+  if (needsSetup) return <SetupWizard />;
+  // /api/me answers 200 always (null body = logged out), and BootGate has already handled a failed
+  // probe — so no data here means "not signed in" → the public landing.
+  if (!me) return <Welcome verify={verifyEntry} />;
+
+  // Shown while a page's chunk is still on its way: only if its visit beats the preload above (or the
+  // preload failed), and like every loading state it stays invisible for a load that is quick anyway.
+  const pageFallback = <LoadingState className="flex-1 justify-center" />;
+
+  // Scroll restore/reset key for the shared normal-page scroller (see PageScroller): the same page
+  // returns you to where you were; the feed keys it by its filters (useFeedScrollKey).
+  const normalScrollKey = page === "feed" ? feedScrollKey : `page:${page}`;
+
+  // The module registry drives the render from `page` alone — no per-page chrome conditionals. A page
+  // the account can't reach never gets here: the navigation state already moved it to the feed
+  // (`reachablePage`). A channel page overlays the content column, so no side rail shows behind it.
+  const { Page: PageContent, Rail, maxWidth } = moduleDef(page);
+  const PageRail = channelView ? undefined : Rail;
+
+  return (
+    <div className="h-dvh flex text-fg">
+      <SkipLink label={t("nav.skipToContent")} />
+      <NavSidebar
+        me={me!}
+        onOpenAbout={() => setAboutOpen(true)}
+        onChangeLanguage={changeLanguage}
+        language={i18n.language as LangCode}
+      />
+      {/* The active page's side rail (feed filters / plex filters / playlists list), if it has one.
+          A floating collapsible column beside the nav rail; hidden while a channel page overlays the
+          content. It holds its own layout and collapse flag (lib/useRail). */}
+      {PageRail && (
+        <Suspense fallback={null}>
+          <PageRail />
+        </Suspense>
+      )}
+      {/* `@container/appmain`: the floating header + its search box adapt to THIS column's width
+          (which shrinks when the filter sidebar is open), not the viewport — a viewport breakpoint
+          can't see the sidebar-driven narrowing. NB: `container-type: inline-size` implies
+          `contain: layout`, making this column a containing block for `position: fixed` descendants
+          too — safe today because floating-ui menus render via FloatingPortal (to document.body) and
+          the toasts below are absolute; keep any new fixed overlay inside here body-portalled. */}
+      <div className="@container/appmain relative flex-1 min-w-0 flex flex-col">
+        {channelView ? (
+          <PageShell scrollKey={`channel:${channelView.id}`}>
+            <Suspense fallback={pageFallback}>
+              <ChannelPage
+                key={channelView.id}
+                channelId={channelView.id}
+                initialName={channelView.name}
+                me={me!}
+              />
+            </Suspense>
+          </PageShell>
+        ) : (
+          <PageShell
+            title={t(pageTitleKey(page))}
+            scrollKey={normalScrollKey}
+            maxWidth={maxWidth}
+            header={<Header />}
+            banners={
+              <>
+                <VerifyBanner entry={verifyEntry} />
+                <VersionBanner onOpen={() => openReleaseNotes(FRONTEND_VERSION)} />
+              </>
+            }
+          >
+            <Suspense fallback={pageFallback}>
+              <PageContent />
+              <PageHeaderDefault>
+                <PaletteLauncher />
+              </PageHeaderDefault>
+            </Suspense>
+          </PageShell>
+        )}
+        {/* Toasts rise from the bottom-left, by the notification bell in the nav rail.
+            Anchored inside the content column so they clear the sidebar automatically
+            (collapsed or expanded) without tracking its width. */}
+        <Toaster />
+        {/* The running downloads, bottom-right in the same column (the toasts keep the left). */}
+        <DownloadTray />
+      </div>
+      {/* The two app-wide overlays: the keyboard cheat sheet (`h`) and the jump-to palette (Mod+K).
+          Mounted once, outside the page area, so every surface answers "what can I press here" and
+          "take me to X" the same way. Their keys are bound by useGlobalKeymap above. */}
+      <KeyboardHelp />
+      <AppCommandPalette />
+      {/* The one download dialog: the Files link box, a link pasted onto any page, the palette. */}
+      <DownloadIntake />
+      {/* The debug recorder: its start dialog, and its pill docked under the toasts. */}
+      {me && <DebugRecorder />}
+      <Suspense fallback={null}>
+        {aboutOpen && (
+          <About
+            onClose={() => setAboutOpen(false)}
+            onOpenReleaseNotes={() => {
+              setAboutOpen(false);
+              openReleaseNotes();
+            }}
+          />
+        )}
+        {notesOpen && (
+          <ReleaseNotes onClose={() => setNotesOpen(false)} highlight={notesHighlight} />
+        )}
+      </Suspense>
+      <ErrorDialog />
+      {/* Re-binds to the active page's scroll container on navigation (page or channel change). */}
+      <BackToTop dep={channelView ? `chan:${channelView.id}` : page} />
+    </div>
+  );
+}
diff --git a/frontend/src/components/AppCommandPalette.dom.test.tsx b/frontend/src/shell/AppCommandPalette.dom.test.tsx
similarity index 78%
rename from frontend/src/components/AppCommandPalette.dom.test.tsx
rename to frontend/src/shell/AppCommandPalette.dom.test.tsx
index 0a88376e..62dd4b01 100644
--- a/frontend/src/components/AppCommandPalette.dom.test.tsx
+++ b/frontend/src/shell/AppCommandPalette.dom.test.tsx
@@ -8,7 +8,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 import { render, cleanup, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import type { CommandGroup } from "./ui/CommandPalette";
+import type { CommandGroup } from "../components/ui/CommandPalette";
 
 vi.mock("react-i18next", async (importOriginal) => ({
   // The rest of the module too: the recorder's actions reach `i18n/index`, which needs it.
@@ -17,7 +17,7 @@ vi.mock("react-i18next", async (importOriginal) => ({
 }));
 
 let groups: CommandGroup[] = [];
-vi.mock("./ui/CommandPalette", () => ({
+vi.mock("../components/ui/CommandPalette", () => ({
   default: (props: { groups: CommandGroup[] }) => {
     groups = props.groups;
     return null;
@@ -26,7 +26,9 @@ vi.mock("./ui/CommandPalette", () => ({
 
 const channels = vi.fn();
 const playlists = vi.fn();
-vi.mock("../lib/api", () => ({
+// Partial: the module registry the palette lists reaches the feed's store, which reads its defaults here.
+vi.mock("../lib/api", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../lib/api")>()),
   api: {
     channels: (...a: unknown[]) => channels(...a),
     playlists: (...a: unknown[]) => playlists(...a),
@@ -41,24 +43,37 @@ vi.mock("../lib/keymap", () => ({
   toggleKeyboardHelp: vi.fn(),
 }));
 
+// Each module's saved views, and the page the palette opens over.
+const views = {
+  feed: [] as { id: number; name: string }[],
+  plex: [] as { id: number; name: string }[],
+};
+const nav = { page: "feed" };
+
 const calls: string[] = [];
 const setPage = vi.fn((page: string, then?: () => void) => {
   calls.push(`setPage:${page}`);
   then?.();
 });
-vi.mock("./navigationContext", () => ({
+vi.mock("../features/navigation/navigationContext", () => ({
+  useNavigation: () => ({ page: nav.page }),
   useNavigationActions: () => ({ setPage, openChannel: vi.fn() }),
 }));
-vi.mock("./playlistsContext", () => ({
+vi.mock("../modules/playlists/playlistsContext", () => ({
   usePlaylistsActions: () => ({
     setSelectedId: (id: number) => calls.push(`select:${id}`),
   }),
 }));
-vi.mock("./prefsContext", () => ({
+vi.mock("../features/prefs/prefsContext", () => ({
   usePrefs: () => ({ theme: { scheme: "default" }, setTheme: vi.fn() }),
 }));
-vi.mock("./savedViewsContext", () => ({
-  useSavedViews: () => ({ views: [], apply: vi.fn() }),
+vi.mock("../modules/feed/feedSavedViews", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  useFeedSavedViews: () => ({ views: views.feed, apply: vi.fn() }),
+}));
+vi.mock("../modules/plex/plexSavedViews", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  usePlexSavedViews: () => ({ views: views.plex, apply: vi.fn() }),
 }));
 const requestSurprise = vi.fn();
 vi.mock("../lib/homeIntent", () => ({ requestSurprise: () => requestSurprise() }));
@@ -94,6 +109,9 @@ beforeEach(() => {
   requestSurprise.mockClear();
   channels.mockReset().mockResolvedValue([]);
   playlists.mockReset().mockResolvedValue([]);
+  views.feed = [];
+  views.plex = [];
+  nav.page = "feed";
 });
 afterEach(cleanup);
 
@@ -112,6 +130,18 @@ describe("AppCommandPalette", () => {
     expect(ids("modules")).toContain("page:config");
   });
 
+  it("offers Plex's saved views over the Plex page, and the feed's over any other", () => {
+    views.feed = [{ id: 1, name: "feed view" }];
+    views.plex = [{ id: 2, name: "plex view" }];
+    nav.page = "plex";
+    mount();
+    expect(ids("views")).toEqual(["view:2"]);
+    cleanup();
+    nav.page = "home";
+    mount();
+    expect(ids("views")).toEqual(["view:1"]);
+  });
+
   it("leaves out the channels the user has hidden", async () => {
     channels.mockResolvedValue([
       { id: "UC1", title: "Shown", handle: "@shown", hidden: false },
diff --git a/frontend/src/components/AppCommandPalette.tsx b/frontend/src/shell/AppCommandPalette.tsx
similarity index 89%
rename from frontend/src/components/AppCommandPalette.tsx
rename to frontend/src/shell/AppCommandPalette.tsx
index 0e98b081..2e57e0c3 100644
--- a/frontend/src/components/AppCommandPalette.tsx
+++ b/frontend/src/shell/AppCommandPalette.tsx
@@ -12,21 +12,22 @@ import {
   Square,
   Tv,
 } from "lucide-react";
-import CommandPalette, { type CommandGroup } from "./ui/CommandPalette";
+import CommandPalette, { type CommandGroup } from "../components/ui/CommandPalette";
 import { api } from "../lib/api";
 import { qk } from "../lib/queryKeys";
 import { useMe } from "../lib/useMe";
-import { moduleDef, moduleOrder } from "../lib/modules";
+import { moduleDef, moduleOrder } from "../features/navigation/moduleRegistry";
 import { SCHEMES, type Scheme } from "../lib/theme";
 import { closePalette, toggleKeyboardHelp, usePaletteOpen } from "../lib/keymap";
 import { requestSurprise } from "../lib/homeIntent";
 import { requestLinkBox } from "../lib/downloadIntake";
 import { openRecorderStart } from "../lib/debugRecorder";
-import { useDebugRecording } from "./useDebugRecording";
-import { useNavigationActions } from "./navigationContext";
-import { usePlaylistsActions } from "./playlistsContext";
-import { usePrefs } from "./prefsContext";
-import { useSavedViews } from "./savedViewsContext";
+import { useDebugRecording } from "../features/diagnostics/useDebugRecording";
+import { useNavigation, useNavigationActions } from "../features/navigation/navigationContext";
+import { useFeedSavedViews } from "../modules/feed";
+import { usePlaylistsActions } from "../modules/playlists";
+import { usePlexSavedViews } from "../modules/plex";
+import { usePrefs } from "../features/prefs/prefsContext";
 
 // What Ctrl/Cmd+K can reach. The generic list/filter/keyboard shell is `ui/CommandPalette`; this is
 // the domain half — the layer boundary says a primitive may not import `lib/api` or a module.
@@ -37,8 +38,8 @@ import { useSavedViews } from "./savedViewsContext";
 // the Channels page already gives it, and one mistyped Enter is a worse failure than the walk it
 // would have saved.
 //
-// Saved views come from whichever module owns the current SavedViewsProvider source (feed on the
-// feed, Plex on Plex), i.e. exactly the views that are applicable where you stand.
+// Saved views are Plex's on the Plex page and the feed's everywhere else, i.e. the views that are
+// applicable where you stand.
 export default function AppCommandPalette() {
   const { t } = useTranslation();
   const open = usePaletteOpen();
@@ -46,7 +47,10 @@ export default function AppCommandPalette() {
   const { setPage, openChannel } = useNavigationActions();
   const { setSelectedId } = usePlaylistsActions();
   const { theme, setTheme } = usePrefs();
-  const savedViews = useSavedViews();
+  const { page } = useNavigation();
+  const feedViews = useFeedSavedViews();
+  const plexViews = usePlexSavedViews();
+  const savedViews = page === "plex" ? plexViews : feedViews;
   const { session: recordingSession, stop: stopRecording, markStep } = useDebugRecording();
   const stopMutate = stopRecording.mutate;
 
diff --git a/frontend/src/components/BootGate.dom.test.tsx b/frontend/src/shell/BootGate.dom.test.tsx
similarity index 98%
rename from frontend/src/components/BootGate.dom.test.tsx
rename to frontend/src/shell/BootGate.dom.test.tsx
index ad93b2e1..556c952e 100644
--- a/frontend/src/components/BootGate.dom.test.tsx
+++ b/frontend/src/shell/BootGate.dom.test.tsx
@@ -13,8 +13,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import BootGate from "./BootGate";
-import { NavigationProvider } from "./NavigationProvider";
-import { useNavigation } from "./navigationContext";
+import { NavigationProvider } from "../features/navigation/NavigationProvider";
+import { useNavigation } from "../features/navigation/navigationContext";
 import { api, type Me } from "../lib/api";
 import { qk } from "../lib/queryKeys";
 import i18n from "../i18n";
diff --git a/frontend/src/components/BootGate.tsx b/frontend/src/shell/BootGate.tsx
similarity index 99%
rename from frontend/src/components/BootGate.tsx
rename to frontend/src/shell/BootGate.tsx
index 165edcf1..59dabcc5 100644
--- a/frontend/src/components/BootGate.tsx
+++ b/frontend/src/shell/BootGate.tsx
@@ -7,7 +7,7 @@ import { claimLocalData } from "../lib/storage";
 import { saveLanguage } from "../lib/saveLanguage";
 import { qk } from "../lib/queryKeys";
 import i18n, { isSupported, setLanguage } from "../i18n";
-import { LoadingState, StateMessage } from "./ui/QueryState";
+import { LoadingState, StateMessage } from "../components/ui/QueryState";
 
 // The boot sequence, in ONE place: nothing of the app renders until this tab knows WHO it is.
 //
diff --git a/frontend/src/components/ErrorBoundary.message.dom.test.tsx b/frontend/src/shell/ErrorBoundary.message.dom.test.tsx
similarity index 100%
rename from frontend/src/components/ErrorBoundary.message.dom.test.tsx
rename to frontend/src/shell/ErrorBoundary.message.dom.test.tsx
diff --git a/frontend/src/components/ErrorBoundary.staleBuild.dom.test.tsx b/frontend/src/shell/ErrorBoundary.staleBuild.dom.test.tsx
similarity index 100%
rename from frontend/src/components/ErrorBoundary.staleBuild.dom.test.tsx
rename to frontend/src/shell/ErrorBoundary.staleBuild.dom.test.tsx
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/shell/ErrorBoundary.tsx
similarity index 92%
rename from frontend/src/components/ErrorBoundary.tsx
rename to frontend/src/shell/ErrorBoundary.tsx
index ede7e369..2a68684f 100644
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/shell/ErrorBoundary.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import i18n from "../i18n";
 import { notify } from "../lib/notifications";
-import { CrashBoundary, type CrashCopy } from "./ui/CrashBoundary";
+import { CrashBoundary, type CrashCopy } from "../components/ui/CrashBoundary";
 
 const copy = (): CrashCopy => ({
   title: i18n.t("errors.boundary.title"),
diff --git a/frontend/src/components/ErrorDialog.tsx b/frontend/src/shell/ErrorDialog.tsx
similarity index 86%
rename from frontend/src/components/ErrorDialog.tsx
rename to frontend/src/shell/ErrorDialog.tsx
index a2ea67d8..af8755c6 100644
--- a/frontend/src/components/ErrorDialog.tsx
+++ b/frontend/src/shell/ErrorDialog.tsx
@@ -1,8 +1,8 @@
 import { useSyncExternalStore } from "react";
 import { useTranslation } from "react-i18next";
 import { dismissError, getError, subscribeError } from "../lib/errorDialog";
-import Modal, { ModalFooter } from "./ui/Modal";
-import { Button } from "./ui/Button";
+import Modal, { ModalFooter } from "../components/ui/Modal";
+import { Button } from "../components/ui/Button";
 
 // Renders the current app error (if any) as a modal the user must acknowledge.
 export default function ErrorDialog() {
diff --git a/frontend/src/components/PaletteLauncher.dom.test.tsx b/frontend/src/shell/Header.palette.dom.test.tsx
similarity index 59%
rename from frontend/src/components/PaletteLauncher.dom.test.tsx
rename to frontend/src/shell/Header.palette.dom.test.tsx
index 928060b2..33ac1214 100644
--- a/frontend/src/components/PaletteLauncher.dom.test.tsx
+++ b/frontend/src/shell/Header.palette.dom.test.tsx
@@ -1,72 +1,80 @@
 // @vitest-environment jsdom
 //
 // Ctrl/Cmd+K had no visible entry point (debt burn B28). The owner's pick: a key cap in the header's
-// search field, and a "Jump to…" pill in its place on a page that has no search field.
-import { describe, it, expect, vi, afterEach } from "vitest";
+// search field, and a "Jump to…" pill in its place on a page that has no search field. The shell
+// composes it the way App does: the page's own pills (a search box here) through PageHeader, and the
+// pill as the header's default.
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
 import { render, screen, fireEvent, cleanup, act } from "@testing-library/react";
 
 vi.mock("react-i18next", async (importOriginal) => ({
   ...(await importOriginal<typeof import("react-i18next")>()),
   useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }),
 }));
-
-let page = "home";
-vi.mock("./navigationContext", () => ({ useNavigation: () => ({ page }) }));
-vi.mock("./feedFiltersContext", () => ({
-  useFeedFilters: () => ({ q: "", sort: "newest" }),
-  useFeedFiltersActions: () => ({ setFilters: vi.fn() }),
+vi.mock("../components/ui/PageScroller", () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }));
-vi.mock("./playlistsContext", () => ({
-  usePlaylists: () => ({ search: "" }),
-  usePlaylistsActions: () => ({ setSearch: vi.fn() }),
-}));
-vi.mock("./channelsContext", () => ({
-  useChannels: () => ({ search: "" }),
-  useChannelsActions: () => ({ setSearch: vi.fn(), goToFullHistory: vi.fn() }),
-}));
-vi.mock("./SyncStatus", () => ({ default: () => null }));
 
 import Header from "./Header";
+import PageShell, { PageHeader, PageHeaderDefault } from "../components/ui/PageShell";
+import SearchBar from "../features/header/SearchBar";
+import { PaletteLauncher } from "../features/header/PaletteLauncher";
 import { closePalette, usePaletteOpen } from "../lib/keymap";
-import type { Me } from "../lib/api";
 
+beforeEach(() => {
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe() {}
+      disconnect() {}
+    },
+  );
+});
 afterEach(() => {
   cleanup();
+  vi.unstubAllGlobals();
   act(() => closePalette());
 });
 
-function mount() {
+function mount(withSearch: boolean) {
   let open = false;
   function Probe() {
     open = usePaletteOpen();
     return null;
   }
   render(
-    <>
-      <Header me={{ plex_enabled: false } as Me} onYtSearch={() => {}} />
+    <PageShell header={<Header />}>
+      {withSearch && (
+        <PageHeader>
+          <SearchBar value="" placeholder="search" onChange={() => {}} onGo={() => {}} />
+        </PageHeader>
+      )}
+      <PageHeaderDefault>
+        <PaletteLauncher />
+      </PageHeaderDefault>
       <Probe />
-    </>,
+    </PageShell>,
   );
   return () => open;
 }
 
 describe("the command palette's visible entry", () => {
   it("is a key cap inside the search field, naming the chord the palette row binds", () => {
-    page = "feed";
-    const isOpen = mount();
+    const isOpen = mount(true);
     const cap = screen.getByRole("button", { name: /^palette\.open \((Ctrl|⌘) K\)$/ });
     // Label in Name: the name carries what the cap shows, so "click Ctrl K" finds it.
     expect(cap.getAttribute("aria-label")).toContain(cap.textContent);
     // …and a tooltip equal to that name, so a screen reader does not read it again as a description.
     expect(cap.getAttribute("title")).toBe(cap.getAttribute("aria-label"));
     expect(screen.getByRole("textbox")).toBeTruthy();
+    // The search field takes the pill's place: one entry, not two.
+    expect(screen.queryByRole("button", { name: /^palette\.title/ })).toBeNull();
     fireEvent.click(cap);
     expect(isOpen()).toBe(true);
   });
 
   it("is a Jump-to pill on a page with no search field", () => {
-    page = "home";
-    const isOpen = mount();
+    const isOpen = mount(false);
     expect(screen.queryByRole("textbox")).toBeNull();
     // Named by what it shows ("Jump to…" and its key cap), not by a label that replaced it.
     const pill = screen.getByRole("button", { name: /^palette\.title ?(Ctrl|⌘) K$/ });
diff --git a/frontend/src/shell/Header.tsx b/frontend/src/shell/Header.tsx
new file mode 100644
index 00000000..e589fe45
--- /dev/null
+++ b/frontend/src/shell/Header.tsx
@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+
+// The floating top header: a row of glass pills over the content. It is an empty band that knows no
+// page: each page renders its own pills into it (ui/PageShell's PageHeader: the search box, a scope
+// toggle, the sync chip), and a page with none gets the shell's default, the palette's entry.
+// `forwardRef` so PageShell can attach a ref to the header's root box: that box is the slot the pages
+// portal into, and PageShell measures its real (possibly wrapped) height — that measurement + the
+// `--hdr-h` content pad it drives live in PageShell, which owns both the header slot and the padded
+// content wrapper.
+const Header = forwardRef<HTMLDivElement>(function Header(_props, ref) {
+  return (
+    // Absolutely positioned within the (relative) content column, so its left edge tracks the
+    // actual left zone: it sits just inside the content, reclaiming the space when the nav rail is
+    // slim and/or no filter sidebar is present — no hard-coded offset.
+    <div
+      ref={ref}
+      // left-4 / right = 1rem + the scrollbar gutter defines the full content column; max-w-[--content-mw]
+      // + mx-auto then centres the header band on the SAME width the page's content uses, so on a max-width
+      // page (Plex/Channels/Playlists) the band lines up with the centred grid, not the whole column. `none`
+      // (feed) = full width. Matches the toolbar band below it. `justify-center` then centres the search-box
+      // group (search + scope toggle / sync chip) within that band, so the box sits centred over the cards
+      // once the column is wider than the box's max-w — not hugged to the left edge.
+      // pointer-events-none lets a click on the band's empty area fall through to the content below, so
+      // every pill a page renders here re-enables pointer events itself.
+      className="pointer-events-none absolute top-3 left-4 right-[calc(1rem+var(--sbw))] mx-auto max-w-[var(--content-mw,none)] z-chrome flex flex-wrap items-center justify-center gap-x-3 gap-y-2"
+    />
+  );
+});
+
+export default Header;
diff --git a/frontend/src/components/NavSidebar.account.dom.test.tsx b/frontend/src/shell/NavSidebar.account.dom.test.tsx
similarity index 96%
rename from frontend/src/components/NavSidebar.account.dom.test.tsx
rename to frontend/src/shell/NavSidebar.account.dom.test.tsx
index 6c241225..b3dc6e92 100644
--- a/frontend/src/components/NavSidebar.account.dom.test.tsx
+++ b/frontend/src/shell/NavSidebar.account.dom.test.tsx
@@ -11,11 +11,11 @@ import { api, HttpError, type Me } from "../lib/api";
 import * as actionErrors from "../lib/actionErrors";
 import NavSidebar from "./NavSidebar";
 
-vi.mock("./navigationContext", () => ({
+vi.mock("../features/navigation/navigationContext", () => ({
   useNavigation: () => ({ page: "feed" }),
   useNavigationActions: () => ({ setPage: vi.fn() }),
 }));
-vi.mock("./prefsContext", () => ({ usePrefs: () => ({ railLabels: false }) }));
+vi.mock("../features/prefs/prefsContext", () => ({ usePrefs: () => ({ railLabels: false }) }));
 
 const me = (over: Partial<Me> = {}) =>
   ({
diff --git a/frontend/src/components/NavSidebar.tsx b/frontend/src/shell/NavSidebar.tsx
similarity index 93%
rename from frontend/src/components/NavSidebar.tsx
rename to frontend/src/shell/NavSidebar.tsx
index 6e4b7454..3ec1da14 100644
--- a/frontend/src/components/NavSidebar.tsx
+++ b/frontend/src/shell/NavSidebar.tsx
@@ -1,7 +1,7 @@
 import { useState, useSyncExternalStore } from "react";
 import { qk } from "../lib/queryKeys";
 import { useTranslation } from "react-i18next";
-import { useNavigation, useNavigationActions } from "./navigationContext";
+import { useNavigation, useNavigationActions } from "../features/navigation/navigationContext";
 import { ArrowLeftRight, Info, LogOut, Settings, Shield, type LucideIcon } from "lucide-react";
 import { api, type Me } from "../lib/api";
 import { displayName, roleKey } from "../lib/api/account";
@@ -14,15 +14,15 @@ import {
   moduleOrder,
   moduleRailKey,
   SYSTEM_PAGES,
-} from "../lib/modules";
+} from "../features/navigation/moduleRegistry";
 import { useScrollFade } from "../lib/useScrollFade";
 import { type LangCode } from "../i18n";
-import AvatarImg from "./ui/Avatar";
-import LanguageSwitcher from "./LanguageSwitcher";
-import { PopoverSurface } from "./ui/AnchoredPopover";
-import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { Pressable } from "./ui/Pressable";
-import { SURFACE } from "./ui/surfaces";
+import AvatarImg from "../components/ui/Avatar";
+import LanguageSwitcher from "../components/ui/LanguageSwitcher";
+import { PopoverSurface } from "../components/ui/AnchoredPopover";
+import { useAnchoredPopover } from "../components/ui/anchoredPopoverHooks";
+import { Pressable } from "../components/ui/Pressable";
+import { SURFACE } from "../components/ui/surfaces";
 import {
   NavRail,
   NavRailAction,
@@ -31,8 +31,8 @@ import {
   NavRailItem,
   NavRailList,
   RAIL_ROW,
-} from "./ui/NavRail";
-import { usePrefs } from "./prefsContext";
+} from "../components/ui/NavRail";
+import { usePrefs } from "../features/prefs/prefsContext";
 import { pageHref } from "../lib/nav";
 import { notifyActionError } from "../lib/actionErrors";
 
@@ -103,8 +103,8 @@ export default function NavSidebar({
 
   type NavItem = { page: Page; icon: LucideIcon; label: string; badge?: number };
   // Per-page presentation (icon/label/badge). WHICH pages appear and in what order — and each
-  // module's icon + label — come from the shared module registry (the same source the header's
-  // ◀/▶ stepper uses), so the two never drift and a new/gated module updates both at once. The
+  // module's icon + label — come from the shared module registry (the same source the command
+  // palette's module group uses), so the two never drift and a new/gated module updates both at once. The
   // badge NUMBERS are the only nav-only concern (they need the live polling queries above).
   const BADGE: Partial<Record<Page, number>> = {
     notifications: unread,
diff --git a/frontend/src/components/ReleaseNotes.tsx b/frontend/src/shell/ReleaseNotes.tsx
similarity index 96%
rename from frontend/src/components/ReleaseNotes.tsx
rename to frontend/src/shell/ReleaseNotes.tsx
index eba8a55c..18142389 100644
--- a/frontend/src/components/ReleaseNotes.tsx
+++ b/frontend/src/shell/ReleaseNotes.tsx
@@ -5,9 +5,9 @@ import { Bug, Sparkles } from "lucide-react";
 import { loadReleaseNotes, notesLang, visibleNotes } from "../lib/releaseNotes";
 import { qk } from "../lib/queryKeys";
 import { formatDate } from "../lib/format";
-import { Button } from "./ui/Button";
-import Modal from "./ui/Modal";
-import { LoadingState, StateMessage } from "./ui/QueryState";
+import { Button } from "../components/ui/Button";
+import Modal from "../components/ui/Modal";
+import { LoadingState, StateMessage } from "../components/ui/QueryState";
 
 // The release date in the UI language — `toLocaleDateString(undefined, …)` formats in the BROWSER's
 // locale, which put Hungarian-shaped dates in an English release-notes list. Unparseable input falls
diff --git a/frontend/src/components/SetupWizard.tsx b/frontend/src/shell/SetupWizard.tsx
similarity index 98%
rename from frontend/src/components/SetupWizard.tsx
rename to frontend/src/shell/SetupWizard.tsx
index 03f01ba8..a38a2b5a 100644
--- a/frontend/src/components/SetupWizard.tsx
+++ b/frontend/src/shell/SetupWizard.tsx
@@ -3,10 +3,10 @@ import { useTranslation } from "react-i18next";
 import { Check, ChevronLeft, ChevronRight, Loader2, Send } from "lucide-react";
 import { api, HttpError } from "../lib/api";
 import { setLanguage, type LangCode } from "../i18n";
-import LanguageSwitcher from "./LanguageSwitcher";
-import { Button } from "./ui/Button";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
+import LanguageSwitcher from "../components/ui/LanguageSwitcher";
+import { Button } from "../components/ui/Button";
+import { Input } from "../components/ui/Input";
+import { SURFACE } from "../components/ui/surfaces";
 
 // First-run install wizard. Shown by App.tsx while the instance is unconfigured. The one-time
 // setup token comes from the URL the app printed to the container logs (?token=…); every step
diff --git a/frontend/src/components/VerifyBanner.tsx b/frontend/src/shell/VerifyBanner.tsx
similarity index 98%
rename from frontend/src/components/VerifyBanner.tsx
rename to frontend/src/shell/VerifyBanner.tsx
index 77c1f45c..f1eb87f3 100644
--- a/frontend/src/components/VerifyBanner.tsx
+++ b/frontend/src/shell/VerifyBanner.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { CheckCircle2, AlertTriangle } from "lucide-react";
-import Banner from "./ui/Banner";
+import Banner from "../components/ui/Banner";
 import type { VerifyEntry } from "../lib/useVerifyEntry";
 
 // The top-of-app outcome of an emailed verification link opened in a browser that ALREADY holds a
diff --git a/frontend/src/components/VersionBanner.dom.test.tsx b/frontend/src/shell/VersionBanner.dom.test.tsx
similarity index 100%
rename from frontend/src/components/VersionBanner.dom.test.tsx
rename to frontend/src/shell/VersionBanner.dom.test.tsx
diff --git a/frontend/src/components/VersionBanner.tsx b/frontend/src/shell/VersionBanner.tsx
similarity index 96%
rename from frontend/src/components/VersionBanner.tsx
rename to frontend/src/shell/VersionBanner.tsx
index bcd31653..357ac2c5 100644
--- a/frontend/src/components/VersionBanner.tsx
+++ b/frontend/src/shell/VersionBanner.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import { Sparkles } from "lucide-react";
 import { FRONTEND_VERSION, SEEN_VERSION_OPTIONS, SEEN_VERSION_PREF } from "../lib/version";
 import { usePref } from "../lib/usePref";
-import Banner from "./ui/Banner";
+import Banner from "../components/ui/Banner";
 
 // Eye-catching, dismissible bar shown once after the running build's version changes
 // (compares the baked frontend version to the last one the user acknowledged).
diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/shell/Welcome.tsx
similarity index 98%
rename from frontend/src/components/Welcome.tsx
rename to frontend/src/shell/Welcome.tsx
index 46f3540b..46ea1d61 100644
--- a/frontend/src/components/Welcome.tsx
+++ b/frontend/src/shell/Welcome.tsx
@@ -27,19 +27,19 @@ const REPO_URL = "https://git.b1fr0st.eu/peter/siftlode";
 import { api, deadResetLink, loginBlocked, type LoginBlocked } from "../lib/api";
 import { HttpError } from "../lib/api";
 import { setLanguage, type LangCode } from "../i18n";
-import LanguageSwitcher from "./LanguageSwitcher";
-import { Button } from "./ui/Button";
-import { trapTab, useDialogChrome } from "./ui/dialogFocus";
+import LanguageSwitcher from "../components/ui/LanguageSwitcher";
+import { Button } from "../components/ui/Button";
+import { trapTab, useDialogChrome } from "../components/ui/dialogFocus";
 import { anyBlockingLayerAbove, pushLayer, removeLayer, takeEscape } from "../lib/layerStack";
 import { entryHash, entrySearch } from "../lib/entryUrl";
 import type { VerifyEntry } from "../lib/useVerifyEntry";
 import { MODE_URL, type Mode } from "./welcomeMode";
-import { IconButton } from "./ui/IconButton";
-import { Pressable } from "./ui/Pressable";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
-import { LinkButton } from "./ui/LinkButton";
-import RemoteImage from "./ui/RemoteImage";
+import { IconButton } from "../components/ui/IconButton";
+import { Pressable } from "../components/ui/Pressable";
+import { Input } from "../components/ui/Input";
+import { SURFACE } from "../components/ui/surfaces";
+import { LinkButton } from "../components/ui/LinkButton";
+import RemoteImage from "../components/ui/RemoteImage";
 
 const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
 const PASSWORD_MIN = 10;
diff --git a/frontend/src/components/authCardStates.dom.test.tsx b/frontend/src/shell/authCardStates.dom.test.tsx
similarity index 100%
rename from frontend/src/components/authCardStates.dom.test.tsx
rename to frontend/src/shell/authCardStates.dom.test.tsx
diff --git a/frontend/src/components/clientLogWiring.dom.test.tsx b/frontend/src/shell/clientLogWiring.dom.test.tsx
similarity index 100%
rename from frontend/src/components/clientLogWiring.dom.test.tsx
rename to frontend/src/shell/clientLogWiring.dom.test.tsx
diff --git a/frontend/src/components/formAlerts.dom.test.tsx b/frontend/src/shell/formAlerts.dom.test.tsx
similarity index 100%
rename from frontend/src/components/formAlerts.dom.test.tsx
rename to frontend/src/shell/formAlerts.dom.test.tsx
diff --git a/frontend/src/shell/useAccessRequestsNudge.ts b/frontend/src/shell/useAccessRequestsNudge.ts
new file mode 100644
index 00000000..b9853960
--- /dev/null
+++ b/frontend/src/shell/useAccessRequestsNudge.ts
@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import type { Me } from "../lib/api";
+import type { Page } from "../lib/urlState";
+import { notify, removeByMetaKind } from "../lib/notifications";
+import { focusAccessRequestsTab } from "../lib/adminUsersTab";
+
+type SetPage = (next: Page, then?: () => void) => void;
+
+export function useAccessRequestsNudge(me: Me | null | undefined, setPage: SetPage): void {
+  const { t } = useTranslation();
+  // Nudge admins when access requests are waiting (in lieu of a server-push bell). Keyed on the
+  // pending COUNT so it re-resolves the moment an approval/denial changes it — not only on a
+  // fresh load (which is why the notice used to linger until F5 after an approval).
+  // Honest deps, and `t` among them is a fix rather than a concession: the nudge is a persisted
+  // toast whose text is translated at issue time, so a language switch must re-issue it. It did not
+  // before — the notice stayed in the old language until the count changed.
+  const role = me?.role;
+  const pendingInvites = me?.pending_invites ?? 0;
+  const pendingActivations = me?.pending_activations ?? 0;
+  useEffect(() => {
+    if (role !== "admin") return;
+    // Keep a single, current nudge: drop any prior one (persisted copies reload as dismissed
+    // history, so they'd otherwise pile up one-per-reload) before re-issuing the live notice.
+    removeByMetaKind("access-requests");
+    // Both kinds of "someone is waiting on you": a request needing a decision, and a sign-up whose
+    // address was approved before they registered. The second used to produce NO signal at all —
+    // nothing lands in the queue for it — which is how the 2026-09-03 registrant went unnoticed.
+    const pending = pendingInvites + pendingActivations;
+    if (pending > 0) {
+      notify({
+        level: "warning",
+        title: t("common.accessRequestsTitle"),
+        message: t("common.accessRequestsMessage", { count: pending }),
+        // Durable inbox link (survives reload, unlike a live action callback); the toast also
+        // gets a click via the action.
+        meta: { kind: "access-requests" },
+        action: {
+          label: t("common.accessRequestsReview"),
+          onClick: () => {
+            focusAccessRequestsTab();
+            // Clicked inside whatever overlay hosts the toast; setPage closes it before pushing.
+            setPage("users");
+          },
+        },
+      });
+    }
+  }, [role, pendingInvites, pendingActivations, t, setPage]);
+}
diff --git a/frontend/src/shell/useEntryParams.ts b/frontend/src/shell/useEntryParams.ts
new file mode 100644
index 00000000..cea9aa53
--- /dev/null
+++ b/frontend/src/shell/useEntryParams.ts
@@ -0,0 +1,92 @@
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { Me } from "../lib/api";
+import { clearParams, type Page } from "../lib/urlState";
+import { useAccountSwitchNotice } from "../lib/useAccountSwitchNotice";
+import { notify } from "../lib/notifications";
+import { focusAccessRequestsTab } from "../lib/adminUsersTab";
+import { focusSettingsTab } from "../lib/settingsTab";
+
+type SetPage = (next: Page, then?: () => void) => void;
+
+// What the address bar the app was entered with asks for, answered once: the pre-login params dropped,
+// a refused account switch told, the outcome of a Google link or a cancelled Google sign-in, and the
+// admin email's deep link to the access requests.
+export function useEntryParams(
+  me: Me | null | undefined,
+  refetchMe: () => unknown,
+  setPage: SetPage,
+): void {
+  const { t } = useTranslation();
+  // Once signed in, drop any leftover ONE-TIME query params from the pre-login flow (?access, ?verify,
+  // ?reset) — but NOT the nav/filter params, which the logged-in app now reads from and keeps in the
+  // URL. Gated on auth so the logged-out Welcome page still reads its params first.
+  // Keyed on "is there a session at all", which is the whole condition the body tests. Re-running
+  // on an account switch was never the point — by then the params are already gone and a second
+  // clearParams is a no-op.
+  const signedIn = !!me;
+  useEffect(() => {
+    if (signedIn) clearParams("access", "verify", "reset");
+  }, [signedIn]);
+
+  // A sign-in as someone else that the server refused, or a reload as another account: say so, once.
+  useAccountSwitchNotice(signedIn);
+
+  // Returning from an in-app Google link/upgrade round-trip (auth.py redirects to ?link=…).
+  // Surface the outcome, refresh `me` (can_read/can_write/has_google may have flipped), land on
+  // Settings → Account so the new state is visible, then strip the param for a clean URL.
+  // "Exactly once per mount" is now ENFORCED by the ref rather than asserted by an empty dep list:
+  // `t` changes identity on a language switch, so the honest dep list would otherwise re-fire the
+  // toast when the user changes language. (The old `[]` got away with it only because clearParams
+  // had already removed the param — an invariant held by a side effect two lines further down.)
+  const linkAnswered = useRef(false);
+  useEffect(() => {
+    if (linkAnswered.current) return;
+    const result = new URLSearchParams(window.location.search).get("link");
+    if (!result) return;
+    linkAnswered.current = true;
+    if (result === "ok") {
+      notify({ level: "success", message: t("settings.account.googleLink.linked") });
+      void refetchMe();
+      focusSettingsTab("account");
+      setPage("settings");
+    } else {
+      const key = result === "conflict" || result === "mismatch" ? result : "error";
+      notify({ level: "error", message: t(`settings.account.googleLink.${key}`) });
+    }
+    clearParams("link");
+  }, [t, setPage, refetchMe]);
+
+  // A Google OAuth flow started while already signed in (signing in as someone else, or a Google
+  // connect) was cancelled at Google's consent screen. The backend only emits this for a live session, so a
+  // neutral toast is the right feedback — the pre-auth login banner would never render here.
+  // Same one-shot shape as the `?link=` handler above, same reason for the ref.
+  const oauthAnswered = useRef(false);
+  useEffect(() => {
+    if (oauthAnswered.current) return;
+    if (new URLSearchParams(window.location.search).get("oauth") !== "cancelled") return;
+    oauthAnswered.current = true;
+    notify({ level: "info", message: t("settings.account.googleCancelled") });
+    clearParams("oauth");
+  }, [t]);
+
+  // Deep-link from the "new access request" admin email (?admin=access-requests) → jump straight to
+  // the admin Users → Access requests view. Snapshot the param up front (read once at mount); act once
+  // `me` is known, and only for an admin (others just land on their default page).
+  const [adminDeepLink] = useState(() => new URLSearchParams(window.location.search).get("admin"));
+  // Ref-guarded like the two above, and here it closes a real hole rather than only satisfying the
+  // checker: the snapshot lives for the whole session, so with honest deps a later role change —
+  // or any `me` refetch, under the old id-only key — would yank the user to Users long after the
+  // deep link was answered.
+  const adminDeepLinkAnswered = useRef(false);
+  useEffect(() => {
+    if (adminDeepLinkAnswered.current) return;
+    if (adminDeepLink !== "access-requests" || !me) return;
+    adminDeepLinkAnswered.current = true;
+    if (me.role === "admin") {
+      focusAccessRequestsTab();
+      setPage("users");
+    }
+    clearParams("admin");
+  }, [adminDeepLink, me, setPage]);
+}
diff --git a/frontend/src/shell/useShellSession.ts b/frontend/src/shell/useShellSession.ts
new file mode 100644
index 00000000..41e4fece
--- /dev/null
+++ b/frontend/src/shell/useShellSession.ts
@@ -0,0 +1,103 @@
+import { useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { setUnauthorizedHandler, type Me } from "../lib/api";
+import { qk } from "../lib/queryKeys";
+import { reloadAfterRefusal } from "../lib/entryUrl";
+import { applyDiagnostics } from "../lib/diagnostics";
+import { useGlobalKeymap } from "../lib/keymap";
+import type { Page } from "../lib/urlState";
+import { moduleOrder, preloadPages } from "../features/navigation/moduleRegistry";
+import { ChannelPage } from "../modules/feed";
+
+type SetPage = (next: Page, then?: () => void) => void;
+
+// What the signed-in shell keeps running for the session: the global keys, the diagnostics level, the
+// idle preload of every reachable page, the scrollbar gutter's width, and the handler for a session
+// that ended server-side. Called by App above its signed-out branch, so `me` may be null here.
+export function useShellSession(me: Me | null | undefined, setPage: SetPage): void {
+  const queryClient = useQueryClient();
+
+  // The `global` key scope: `h` opens the cheat sheet, Mod+K the jump-to palette, Shift+W jumps to
+  // Home ("mit nézzek?"). Bound only once signed in, because that is where the overlays are mounted
+  // (bottom of this tree) and where the modules exist at all — see useGlobalKeymap on why binding it
+  // above the signed-out branch is worse than not binding it.
+  // A global key can fire while an overlay is open; `setPage` closes every overlay before it pushes,
+  // so Shift+W over the player lands on Home with the player closed — also when Home is already the
+  // page underneath (owner decision 2026-09-09: the key always ends with the answer on screen).
+  // The `page` scope rides the same binding: the `g` chords jump to a module, but only to one this
+  // account can reach (the nav rail's own list, plus Settings, which is not in the rail's order).
+  useGlobalKeymap(!!me, setPage, me ? [...moduleOrder(me), "settings"] : []);
+
+  // The account's consented diagnostics level, applied to this tab's log: raised, the log is
+  // kept in more detail and streamed to the server until the level lapses. A debug session that is
+  // recording raises it for its own run and tags what it keeps. A lapse (its own timer, or the
+  // server saying it is off) refetches `me`, so Settings and the recorder show what is in force.
+  // Re-running this on every `me` refetch is FREE and therefore the deps are the honest ones:
+  // applyDiagnostics computes an effective-level key and returns early when it has not moved
+  // (lib/diagnostics.ts), so an unchanged level is a no-op. It does refresh the `lapsed` callback
+  // before that early return, which is the half we WANT re-run. The old dep list picked out four
+  // primitive fields to dodge the fresh object identity a refetch produces; that is the checker's
+  // job to verify, not a comment's to assert, and it silently missed any other field the module
+  // may come to read.
+  const diagnostics = me?.diagnostics;
+  const debugSession = me?.debug_session;
+  useEffect(() => {
+    applyDiagnostics(
+      diagnostics,
+      debugSession,
+      () => void queryClient.invalidateQueries({ queryKey: qk.me() }),
+    );
+  }, [diagnostics, debugSession, queryClient]);
+
+  // Fetch the code of every module this account can open — and the channel page — once the first page
+  // is on screen, so a module's first visit renders at once instead of flashing the chunk fallback.
+  // Idle-scheduled so it never competes with the first page's own requests (Safari has no
+  // requestIdleCallback, hence the timer).
+  // Depending on the whole `me` rather than its id is both honest and MORE correct: the module set
+  // is derived from `me` through each module's own gate (moduleOrder), so a permission
+  // change — an admin grant, a Plex server appearing — alters it without the id moving, and the old
+  // `[me.id]` dep never re-preloaded for those. Re-running costs nothing: `preload()` is idempotent
+  // (lazyWithPreload memoises the pending promise), so a refetch that changes nothing fetches
+  // nothing; only the idle callback is re-scheduled.
+  useEffect(() => {
+    if (!me) return;
+    const run = () => {
+      preloadPages([...moduleOrder(me), "settings"]);
+      ChannelPage.preload().catch(() => {});
+    };
+    const idle = window.requestIdleCallback as typeof window.requestIdleCallback | undefined;
+    if (idle) {
+      const id = idle(run, { timeout: 3000 });
+      return () => window.cancelIdleCallback(id);
+    }
+    const id = window.setTimeout(run, 1000);
+    return () => window.clearTimeout(id);
+  }, [me]);
+
+  // Measure the scrollbar's gutter width once and publish it as --sbw, so the floating header and the
+  // toolbar band can pad their right edge to line up with the scrolled cards (the app scroller reserves
+  // that gutter via scrollbar-gutter: stable). It's a device constant, so a one-shot mount measure is enough.
+  useEffect(() => {
+    const probe = document.createElement("div");
+    probe.style.cssText =
+      "position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;scrollbar-gutter:stable";
+    document.body.appendChild(probe);
+    const w = probe.offsetWidth - probe.clientWidth;
+    document.body.removeChild(probe);
+    document.documentElement.style.setProperty("--sbw", `${w}px`);
+  }, []);
+
+  // Any request that 401s means the session ended server-side. If we were signed in (cached
+  // `me` is a user object), reload to the login page at once (also covers any click that hits
+  // the API). Guarded on a cached user so a stray 401 while logged out (cached `me` is null)
+  // can't loop the public landing. A tab showing another account than the one signed in now
+  // reloads as that one instead, and says why (`reloadAfterRefusal`).
+  useEffect(() => {
+    setUnauthorizedHandler((err) => {
+      if (!queryClient.getQueryData(qk.me())) return;
+      queryClient.clear();
+      reloadAfterRefusal(err);
+    });
+    return () => setUnauthorizedHandler(null);
+  }, [queryClient]);
+}
diff --git a/frontend/src/components/welcomeMode.dom.test.ts b/frontend/src/shell/welcomeMode.dom.test.ts
similarity index 100%
rename from frontend/src/components/welcomeMode.dom.test.ts
rename to frontend/src/shell/welcomeMode.dom.test.ts
diff --git a/frontend/src/components/welcomeMode.render.dom.test.tsx b/frontend/src/shell/welcomeMode.render.dom.test.tsx
similarity index 100%
rename from frontend/src/components/welcomeMode.render.dom.test.tsx
rename to frontend/src/shell/welcomeMode.render.dom.test.tsx
diff --git a/frontend/src/components/welcomeMode.ts b/frontend/src/shell/welcomeMode.ts
similarity index 100%
rename from frontend/src/components/welcomeMode.ts
rename to frontend/src/shell/welcomeMode.ts
diff --git a/frontend/src/components/WatchPage.dom.test.tsx b/frontend/src/watch/WatchPage.dom.test.tsx
similarity index 100%
rename from frontend/src/components/WatchPage.dom.test.tsx
rename to frontend/src/watch/WatchPage.dom.test.tsx
diff --git a/frontend/src/components/WatchPage.tsx b/frontend/src/watch/WatchPage.tsx
similarity index 97%
rename from frontend/src/components/WatchPage.tsx
rename to frontend/src/watch/WatchPage.tsx
index fdce4191..5ed050e4 100644
--- a/frontend/src/components/WatchPage.tsx
+++ b/frontend/src/watch/WatchPage.tsx
@@ -11,11 +11,11 @@ import {
   PlayCircle,
   Repeat,
 } from "lucide-react";
-import { Button } from "./ui/Button";
-import { Chip } from "./ui/Chip";
-import { Pressable } from "./ui/Pressable";
-import RemoteImage from "./ui/RemoteImage";
-import { MEDIA_BADGE } from "./ui/mediaCardStyles";
+import { Button } from "../components/ui/Button";
+import { Chip } from "../components/ui/Chip";
+import { Pressable } from "../components/ui/Pressable";
+import RemoteImage from "../components/ui/RemoteImage";
+import { MEDIA_BADGE } from "../components/ui/mediaCardStyles";
 import { formatBytes, formatDuration } from "../lib/format";
 import { exposeVideoToBackgroundPlay } from "../lib/browserBackgroundPlay";
 import { useMediaSession } from "../lib/mediaSession";
@@ -23,9 +23,9 @@ import { useMediaKeys } from "../lib/mediaKeys";
 import { linkPoint, saveLinkPoint, useResume } from "../lib/resume";
 import { LS, readJSON, writeJSON } from "../lib/storage";
 import { send } from "../lib/http";
-import { Input } from "./ui/Input";
-import { SURFACE } from "./ui/surfaces";
-import { IconLink, LinkButton } from "./ui/LinkButton";
+import { Input } from "../components/ui/Input";
+import { SURFACE } from "../components/ui/surfaces";
+import { IconLink, LinkButton } from "../components/ui/LinkButton";
 import { T, lang } from "./watchStrings";
 
 // Standalone, login-free page for a shared /watch/<token> link: one file, or a folder's list of them.
diff --git a/frontend/src/components/watchStrings.dom.test.ts b/frontend/src/watch/watchStrings.dom.test.ts
similarity index 100%
rename from frontend/src/components/watchStrings.dom.test.ts
rename to frontend/src/watch/watchStrings.dom.test.ts
diff --git a/frontend/src/components/watchStrings.ts b/frontend/src/watch/watchStrings.ts
similarity index 100%
rename from frontend/src/components/watchStrings.ts
rename to frontend/src/watch/watchStrings.ts
diff --git a/frontend/src/watchEntry.contract.test.ts b/frontend/src/watchEntry.contract.test.ts
index d3bcc14c..add314b3 100644
--- a/frontend/src/watchEntry.contract.test.ts
+++ b/frontend/src/watchEntry.contract.test.ts
@@ -18,13 +18,19 @@ const FORBIDDEN: Record<string, string> = {
   i18next: "the app's i18n runtime",
   "react-i18next": "the app's i18n runtime",
   "@tanstack/react-query": "the app's data layer",
-  "src/App.tsx": "the app shell",
   "src/main.tsx": "the app's entry",
   "src/lib/notifications.ts": "the app's notification center",
   "src/lib/logHooks.ts": "the app's client-log wiring",
   "flag-icons": "the app's flag sprites",
   [DYNAMIC]: "an import() of a computed path — no walk can say what it loads",
 };
+// …and the app's layers above the platform, by folder, so a file moved or added inside one is still
+// forbidden (a single path to the shell's App went stale when App moved).
+const FORBIDDEN_DIRS: Record<string, string> = {
+  "src/shell/": "the app shell",
+  "src/modules/": "an app page",
+  "src/features/": "the app's shared features",
+};
 
 function resolveSpec(from: string, spec: string): string | null {
   if (spec === DYNAMIC) return DYNAMIC;
@@ -96,10 +102,13 @@ function chain(seen: Map<string, string | null>, mod: string): string {
 describe("the /watch entry", () => {
   it("loads nothing the app alone may load", () => {
     const seen = reach(join(SRC, "watchMain.tsx"));
-    expect(seen.has("src/components/WatchPage.tsx")).toBe(true); // the walk is reading the entry
+    expect(seen.has("src/watch/WatchPage.tsx")).toBe(true); // the walk is reading the entry
     const leaks = Object.keys(FORBIDDEN)
       .filter((mod) => seen.has(mod))
       .map((mod) => `${FORBIDDEN[mod]}: ${chain(seen, mod)}`);
+    for (const mod of seen.keys())
+      for (const [dir, what] of Object.entries(FORBIDDEN_DIRS))
+        if (mod.startsWith(dir)) leaks.push(`${what}: ${chain(seen, mod)}`);
     expect(leaks).toEqual([]);
   });
 
@@ -109,6 +118,7 @@ describe("the /watch entry", () => {
     const app = reach(join(SRC, "main.tsx"));
     expect(app.has("src/i18n/index.ts")).toBe(true);
     expect(app.has("src/components/legal/Terms.tsx")).toBe(true);
+    expect([...app.keys()].some((m) => m.startsWith("src/shell/"))).toBe(true);
   });
 
   it("serves the same head as the app's page, so the server's OG block lands the same way", () => {
diff --git a/frontend/src/watchMain.tsx b/frontend/src/watchMain.tsx
index 018a6674..33821e9c 100644
--- a/frontend/src/watchMain.tsx
+++ b/frontend/src/watchMain.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { CrashBoundary } from "./components/ui/CrashBoundary";
-import WatchPage from "./components/WatchPage";
-import { T } from "./components/watchStrings";
+import WatchPage from "./watch/WatchPage";
+import { T } from "./watch/watchStrings";
 import "./index.css";
 import { installStaleBuildReload } from "./lib/staleBuild";
 
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
index adceb04f..918fabb1 100644
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -43,6 +43,8 @@
     "vitest.config.ts",
     "reactPlugin.ts",
     "devOnlyGuard.ts",
+    "chunkGuard.ts",
+    "chunkGuard.test.ts",
     "playwright.config.ts",
     "postcss.config.js"
   ]
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 04fcfd6a..db44f90f 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -2,6 +2,7 @@ import { ServerResponse } from "node:http";
 import { defineConfig, type Plugin, type ProxyOptions } from "vite";
 import { reactWithCompiler } from "./reactPlugin";
 import { devOnlyGuard } from "./devOnlyGuard";
+import { chunkGuard } from "./chunkGuard";
 
 // During `vite dev` (host with Node), proxy API calls to the backend container.
 // Use 127.0.0.1 (not "localhost") so Node doesn't resolve to IPv6 ::1, which the
@@ -54,7 +55,7 @@ const watchEntry = (): Plugin => ({
 });
 
 export default defineConfig({
-  plugins: [reactWithCompiler(), devOnlyGuard(), watchEntry()],
+  plugins: [reactWithCompiler(), devOnlyGuard(), chunkGuard(), watchEntry()],
   server: { port: 5173, proxy },
   build: { outDir: "dist", rollupOptions: { input: ["index.html", "watch.html"] } },
 });
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index 3af2749f..fa1e7347 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -17,7 +17,8 @@ export default defineConfig({
   test: {
     // .tsx included on purpose: a test file the glob misses does not fail, it is simply never
     // collected, and the gate still prints green.
-    include: ["src/**/*.test.{ts,tsx}"],
+    // …and the build plugins' own tests beside them at the frontend root (chunkGuard).
+    include: ["src/**/*.test.{ts,tsx}", "*.test.ts"],
     environment: "node",
     // A coverage REPORT on demand (`npm run test -- --coverage`), never enforced and not in the gate:
     // "every regression test seen red" is the bar, not a percentage.