diff --git a/cmd/prairie/main.go b/cmd/prairie/main.go
index dfe0db8f7..fa0df7772 100644
--- a/cmd/prairie/main.go
+++ b/cmd/prairie/main.go
@@ -1180,7 +1180,13 @@ func main() {
 		s.SetLiteraryWorkLinker(literaryWorkService)
 		s.SetEbookEnrichmentQueue(ebooks.NewEnrichmentQueue(deps.DB))
 		deps.Scanner = s
-		deps.ProbeEnsurer = scanner.NewPlaybackProbeEnsurer(fileRepo, ffprobePath, cfg.Playback.FFmpegPath, 10*time.Second)
+		probeEnsurer := scanner.NewPlaybackProbeEnsurer(fileRepo, ffprobePath, cfg.Playback.FFmpegPath, 10*time.Second)
+		// Probe repair and the copy-safety scan follow playback.ffmpeg_path
+		// without a restart; the scanner's own ffprobe path above still does not.
+		configWatcher.OnChange(func(_, updated *config.Config) {
+			probeEnsurer.SetFFmpegPath(updated.Playback.FFmpegPath)
+		})
+		deps.ProbeEnsurer = probeEnsurer
 		slog.Info("scanner initialized")
 	}
 
diff --git a/contracts/settings/v1/conformance.json b/contracts/settings/v1/conformance.json
index 63fb19d7b..bcf2146e1 100644
--- a/contracts/settings/v1/conformance.json
+++ b/contracts/settings/v1/conformance.json
@@ -1,6 +1,6 @@
 {
   "fixture_version": 1,
-  "manifest_revision": 7,
+  "manifest_revision": 8,
   "description": "Cross-platform conformance cases for settings resolution. Every case runs against the shipped manifest in this directory: definitions are referenced by key, never restated, so an expectation can only be satisfied by resolving the real contract. Each platform's resolver (Go in internal/settingsresolve, TypeScript in web/src/lib/settingsResolve.ts, Kotlin and Swift in the client repos) runs every case through a hand-written runner; a runner must fail on any fixture field it does not know, because schema drift in the fixture itself is drift. A case's constraint_bindings attach a constraint to a copy of a real definition so constraint semantics stay testable even while no shipped definition carries that constraint kind. In expected entries, constrained:true requires stored_value and constraint_kind to be present, and stored_value may be null to mean the authored value was JSON null.",
   "cases": [
     {
@@ -733,6 +733,149 @@
           "source": "default"
         }
       ]
+    },
+    {
+      "name": "card_overlays_enabled_profile_opt_out",
+      "description": "A profile that turned its own overlay badges off resolves false at profile scope; the server-wide default is not part of settings resolution.",
+      "keys": ["ui.card_overlays_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [
+        {
+          "key": "ui.card_overlays_enabled",
+          "scope": "profile",
+          "profile_id": "p1",
+          "value": false
+        }
+      ],
+      "expected": [
+        {
+          "key": "ui.card_overlays_enabled",
+          "value": false,
+          "source": "profile"
+        }
+      ]
+    },
+    {
+      "name": "card_overlays_enabled_profile_opt_in",
+      "description": "A profile that turned its own overlay badges on resolves true at profile scope, which is what lets it override a server-wide default of off.",
+      "keys": ["ui.card_overlays_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [
+        {
+          "key": "ui.card_overlays_enabled",
+          "scope": "profile",
+          "profile_id": "p1",
+          "value": true
+        }
+      ],
+      "expected": [
+        {
+          "key": "ui.card_overlays_enabled",
+          "value": true,
+          "source": "profile"
+        }
+      ]
+    },
+    {
+      "name": "card_overlays_absent_express_no_preference",
+      "description": "Nothing stored resolves both card-overlay keys to null with source \"default\", which is what lets the server-wide admin defaults apply.",
+      "keys": ["ui.card_overlays", "ui.card_overlays_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [],
+      "expected": [
+        {
+          "key": "ui.card_overlays",
+          "value": null,
+          "source": "default"
+        },
+        {
+          "key": "ui.card_overlays_enabled",
+          "value": null,
+          "source": "default"
+        }
+      ]
+    },
+    {
+      "name": "card_quick_actions_profile_choice_wins",
+      "description": "A profile that picked favorites-only shortcuts resolves at profile scope instead of falling through to the server-wide default.",
+      "keys": ["ui.card_quick_actions"],
+      "context": { "profile_id": "p1" },
+      "stored": [
+        {
+          "key": "ui.card_quick_actions",
+          "scope": "profile",
+          "profile_id": "p1",
+          "value": "favorites"
+        }
+      ],
+      "expected": [
+        {
+          "key": "ui.card_quick_actions",
+          "value": "favorites",
+          "source": "profile"
+        }
+      ]
+    },
+    {
+      "name": "card_quick_actions_enabled_profile_opt_out",
+      "description": "A profile that turned its own quick actions off resolves false at profile scope; the server-wide default is not part of settings resolution.",
+      "keys": ["ui.card_quick_actions_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [
+        {
+          "key": "ui.card_quick_actions_enabled",
+          "scope": "profile",
+          "profile_id": "p1",
+          "value": false
+        }
+      ],
+      "expected": [
+        {
+          "key": "ui.card_quick_actions_enabled",
+          "value": false,
+          "source": "profile"
+        }
+      ]
+    },
+    {
+      "name": "card_quick_actions_enabled_profile_opt_in",
+      "description": "A profile that turned its own quick actions on resolves true at profile scope, which is what lets it override a server-wide default of off.",
+      "keys": ["ui.card_quick_actions_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [
+        {
+          "key": "ui.card_quick_actions_enabled",
+          "scope": "profile",
+          "profile_id": "p1",
+          "value": true
+        }
+      ],
+      "expected": [
+        {
+          "key": "ui.card_quick_actions_enabled",
+          "value": true,
+          "source": "profile"
+        }
+      ]
+    },
+    {
+      "name": "card_quick_actions_absent_express_no_preference",
+      "description": "Nothing stored resolves both quick-action keys to null with source \"default\", which is what lets the server-wide admin defaults apply.",
+      "keys": ["ui.card_quick_actions", "ui.card_quick_actions_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [],
+      "expected": [
+        {
+          "key": "ui.card_quick_actions",
+          "value": null,
+          "source": "default"
+        },
+        {
+          "key": "ui.card_quick_actions_enabled",
+          "value": null,
+          "source": "default"
+        }
+      ]
     }
   ]
 }
diff --git a/contracts/settings/v1/manifest.json b/contracts/settings/v1/manifest.json
index c79d66841..6509c8dcc 100644
--- a/contracts/settings/v1/manifest.json
+++ b/contracts/settings/v1/manifest.json
@@ -1,6 +1,6 @@
 {
   "api_version": 1,
-  "revision": 7,
+  "revision": 8,
   "option_sets": {
     "playback_audio_languages": {
       "type": "language_tag",
@@ -828,7 +828,60 @@
       "category": "appearance",
       "label": "Poster badges",
       "description": "Which badges appear on poster cards, and where.",
-      "notes": "Registered from the legacy unprefixed key card_overlays, which reached the server only through the unknown-key extension bag — stored as an arbitrary string with no validation. null means the user has expressed no preference, which is what lets the server-wide admin default in the overlay-config endpoint apply; writing a resolved-but-unchosen value would silently pin them. The admin default and the enabled kill switch stay in server_settings and are not user settings."
+      "notes": "Registered from the legacy unprefixed key card_overlays, which reached the server only through the unknown-key extension bag — stored as an arbitrary string with no validation. null means the user has expressed no preference, which is what lets the server-wide admin default in the overlay-config endpoint apply; writing a resolved-but-unchosen value would silently pin them. The server-wide default configuration stays in server_settings and is not a user setting. This key describes which badges to show, not whether to show them — that is ui.card_overlays_enabled."
+    },
+    {
+      "key": "ui.card_overlays_enabled",
+      "introduced_in": 8,
+      "persistence": "remote",
+      "allowed_scopes": ["profile"],
+      "resolution_order": ["profile", "default"],
+      "value_schema": { "type": "boolean", "nullable": true },
+      "default_value": null,
+      "platforms": ["web"],
+      "category": "appearance",
+      "label": "Card overlays enabled",
+      "description": "Show overlay badges on media cards.",
+      "recommended_control": "switch",
+      "notes": "null means the profile has not chosen whether overlay badges are enabled, so the server-wide default from the overlay-config endpoint applies. An explicit profile choice overrides the server-wide default in either direction."
+    },
+    {
+      "key": "ui.card_quick_actions",
+      "introduced_in": 8,
+      "persistence": "remote",
+      "allowed_scopes": ["profile"],
+      "resolution_order": ["profile", "default"],
+      "value_schema": {
+        "type": "enum",
+        "nullable": true,
+        "values": [
+          { "value": "both", "label": "Both" },
+          { "value": "favorites", "label": "Favorites only" },
+          { "value": "watched", "label": "Watch indicator only" }
+        ]
+      },
+      "default_value": null,
+      "platforms": ["web"],
+      "category": "appearance",
+      "label": "Card quick actions",
+      "description": "Which favorite and watched shortcuts appear on media cards.",
+      "recommended_control": "select",
+      "notes": "null means the user has not chosen a mode, so the server-wide default from the overlay-config endpoint applies. The mode applies whenever quick actions are effectively enabled for the profile."
+    },
+    {
+      "key": "ui.card_quick_actions_enabled",
+      "introduced_in": 8,
+      "persistence": "remote",
+      "allowed_scopes": ["profile"],
+      "resolution_order": ["profile", "default"],
+      "value_schema": { "type": "boolean", "nullable": true },
+      "default_value": null,
+      "platforms": ["web"],
+      "category": "appearance",
+      "label": "Card quick actions enabled",
+      "description": "Show the selected favorite and watched shortcuts on media cards.",
+      "recommended_control": "switch",
+      "notes": "null means the profile has not chosen whether quick actions are enabled, so the server-wide default from the overlay-config endpoint applies. An explicit profile choice overrides the server-wide default in either direction."
     },
     {
       "key": "ui.next_up_mode",
diff --git a/docs/admin-api.md b/docs/admin-api.md
index f29fb8b46..0683b56c6 100644
--- a/docs/admin-api.md
+++ b/docs/admin-api.md
@@ -1,14 +1,91 @@
 # Admin API
 
+<<<<<<< HEAD
 Server-administration endpoints under `/api/v1/admin`. Every route here requires
 an authenticated account with the server-wide `admin` role — the same
 authorization as `/api/v1/admin/sessions` — and none of them are part of the
 client-facing contract that third-party apps build against.
+=======
+Server-administration endpoints under `/api/v1/admin`. Every `/api/v1/admin`
+route requires an authenticated account with the server-wide `admin` role — the
+same authorization as `/api/v1/admin/sessions` — and none of them are part of
+the client-facing contract that third-party apps build against. A few
+deliberately public reads outside `/api/v1/admin` (marked `public` in the route
+tables) are documented beside the admin writes they pair with.
+>>>>>>> cursor/sync-silo-server-d673
 
 This document is new and covers only the routes listed below. The rest of the
 admin surface predates it and is currently documented by the code and by the
 design documents under `docs/design/`.
 
+<<<<<<< HEAD
+=======
+## Branding assets
+
+Uploadable images white-label the server: the sidebar wordmark, the square
+mark (collapsed sidebar and installed PWA), optional light-theme variants of
+both, the browser favicon, and the login background. Each is stored in the public S3 bucket and referenced from a
+`server_settings` row, so uploads return `503 unavailable` until
+`s3.public_bucket` is configured.
+
+| Route                                         | Auth   | Purpose                                                              |
+| --------------------------------------------- | ------ | -------------------------------------------------------------------- |
+| `POST /api/v1/admin/branding/assets/{kind}`   | admin  | Upload (multipart, field name `file`). Replaces whatever is stored.  |
+| `DELETE /api/v1/admin/branding/assets/{kind}` | admin  | Clear the asset. `204`, and clearing an unset asset is not an error. |
+| `GET /api/v1/branding/assets/{kind}`          | public | Serve the stored bytes. Content-addressed, so `immutable` cached.    |
+| `GET /api/v1/theme/branding`                  | public | Current branding, including each asset URL (omitted when unset).     |
+
+Public reads are deliberately unauthenticated: branding has to apply on the
+login page, before anyone has a session.
+
+`{kind}` is one of `wordmark`, `wordmark_light`, `mark`, `mark_light`, `favicon`, `login_bg` — the light variants follow their base kind's processing. Uploads are
+processed per kind — the numbers below are the contract the admin UI quotes back
+to the operator, and they live in `internal/branding/assets.go`:
+
+| Kind       | Accepts             | Max upload | Stored as                                                                                                     |
+| ---------- | ------------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `wordmark` | PNG, JPEG, WebP     | 8 MB       | WebP, aspect preserved, capped at 640px wide. Narrower art is not enlarged.                                   |
+| `mark`     | PNG, JPEG, WebP     | 8 MB       | WebP, center-cropped to a square, then forced to exactly 512×512 (smaller art is upscaled).                   |
+| `favicon`  | PNG, WebP, ICO, SVG | 1 MB       | Byte-for-byte as uploaded, so `.ico` and `.svg` keep working in browsers that will not render a WebP favicon. |
+| `login_bg` | PNG, JPEG, WebP     | 12 MB      | WebP, aspect preserved, capped at 2560px wide. Clients display it cover-cropped.                              |
+
+There is one stored variant per kind, not a responsive set: the PWA manifest
+advertises the single 512px mark at both 192×192 and 512×512, and native clients
+read the same URLs as the web app. Recommend source art at or above the stored
+size — anything larger is downscaled, anything smaller is either left small
+(wordmark, login background) or upscaled (mark).
+
+Failure modes: `400 bad_request` for an unknown kind, a missing `file` field, or
+a content type the kind does not accept; `413 too_large` past the cap;
+`503 unavailable` when asset storage is not configured.
+
+Uploaded SVG favicons are admin-controlled but served from the app origin, so
+every asset response carries `X-Content-Type-Options: nosniff` and a sandboxing
+`Content-Security-Policy` — a directly-navigated SVG cannot run script in the
+viewer's session.
+
+## Server status and restarts
+
+Some settings are only read at startup. Two routes carry that contract:
+
+| Route | Auth | Purpose |
+|---|---|---|
+| `GET /api/v1/admin/server/status` | admin | Process start time and pending-restart state. |
+| `GET /api/v1/admin/settings/restart-keys` | admin | The compiled registry of setting keys that only take effect after a restart (`internal/config/restart_keys.go`). |
+
+`GET /api/v1/admin/server/status` response:
+
+| Field | Type | Meaning |
+|---|---|---|
+| `started_at` | RFC3339 string | When this process started. |
+| `restart_required` | bool | A restart-required change was saved. Latches true for the life of the process; a real restart clears it by starting a new process. |
+| `restart_required_at` | RFC3339 string | When the flag first latched. Omitted until then. |
+| `restart_required_reason` | string | The reason of the **last** restart-required save only — later saves overwrite it. |
+| `restart_required_reasons` | string[] | Every distinct reason since boot, first-seen order. Settings saves record one `setting:<key>` entry per restart-required key, so a client can scope a pending restart to the subsystem it belongs to. |
+| `restart_mark_count` | int | Increments on every restart-required save. Because the boolean latches, this counter is the only signal that a **new** requirement arrived — the admin UI re-arms its dismissed restart banner on it. |
+| `restart_requested`, `restart_requested_at` | bool, RFC3339 string | An in-app restart was requested, and when. |
+
+>>>>>>> cursor/sync-silo-server-d673
 ## `GET /api/v1/admin/stream-telemetry/parity`
 
 Returns the merged stream-telemetry view beside the two legacy live-session
@@ -32,6 +109,7 @@ Always `200 OK`. "Nothing to compare" is expressed in the body rather than as an
 error status, because an empty report with a success status would read as
 agreement.
 
+<<<<<<< HEAD
 | Field | Type | Meaning |
 |---|---|---|
 | `enabled` | bool | Stream telemetry is running in this process. |
@@ -76,6 +154,52 @@ Each entry in `sources`:
 | `mismatches` | object[] | Per-session field disagreements, capped. |
 | `mismatches_truncated` | int | How many the cap dropped. |
 | `fields_absent` | object | Per field, sessions both sides know where one side carries no value. A gap in a projection, not a disagreement. |
+=======
+| Field     | Type   | Meaning                                                                              |
+| --------- | ------ | ------------------------------------------------------------------------------------ |
+| `enabled` | bool   | Stream telemetry is running in this process.                                         |
+| `reason`  | string | Present when there is nothing to compare (telemetry disabled, or no view built yet). |
+| `view`    | object | State of the merged view the comparison was built from.                              |
+| `sources` | array  | One report per legacy projection. Empty when `enabled` is false.                     |
+
+`view`:
+
+| Field                                 | Type             | Meaning                                                                                                                                                                                            |
+| ------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `available`                           | bool             | A merged view exists.                                                                                                                                                                              |
+| `built_at`                            | RFC3339 string   | When it was built. Omitted if never.                                                                                                                                                               |
+| `age_ms`, `stale`                     | int, bool        | Age of the cached view, and whether it exceeded the TTL.                                                                                                                                           |
+| `build_took_ms`                       | int              | Cost of the last rebuild.                                                                                                                                                                          |
+| `refreshes`, `failures`, `last_error` | int, int, string | Cache counters since process start.                                                                                                                                                                |
+| `complete`                            | bool             | No publisher was stale, degraded or truncated.                                                                                                                                                     |
+| `incomplete_reasons`                  | string[]         | Why `complete` is false — e.g. `missing_publisher`, `publisher_truncated`, `decode_errors`, `truncated`.                                                                                           |
+| `missing_publishers`                  | string[]         | Publisher ids present in the roster but with no usable snapshot.                                                                                                                                   |
+| `clock_skew_suspected`                | bool             | A publisher stamped a time in the future. A clock running _behind_ is indistinguishable from a stalled publisher in one sample; compare `publishers` sequence across two reads to tell them apart. |
+| `publishers`                          | string[]         | `<publisher-id>=<state>`, where state is `fresh`, `degraded`, `stale` or `departed`.                                                                                                               |
+| `session_count`, `transfer_count`     | int              | Sizes of the merged view.                                                                                                                                                                          |
+
+Each entry in `sources`:
+
+| Field       | Type     | Meaning                                      |
+| ----------- | -------- | -------------------------------------------- |
+| `source`    | string   | `playback_sessions_sync` or `node_sessions`. |
+| `available` | bool     | The projection could be read.                |
+| `error`     | string   | Why it could not.                            |
+| `notes`     | string[] | Caveats that apply to this comparison.       |
+| `report`    | object   | The diff, when available.                    |
+
+`report`:
+
+| Field                                               | Type     | Meaning                                                                                                                          |
+| --------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `telemetry_count`, `legacy_count`, `in_both`        | int      | Session counts on each side and their intersection.                                                                              |
+| `agrees`                                            | bool     | Same session set, and no field both sides express disagrees. Read `fields_absent` before treating this as clearance to cut over. |
+| `telemetry_only`, `legacy_only`                     | string[] | Session ids present on one side only, capped.                                                                                    |
+| `telemetry_only_truncated`, `legacy_only_truncated` | int      | How many ids the cap dropped.                                                                                                    |
+| `mismatches`                                        | object[] | Per-session field disagreements, capped.                                                                                         |
+| `mismatches_truncated`                              | int      | How many the cap dropped.                                                                                                        |
+| `fields_absent`                                     | object   | Per field, sessions both sides know where one side carries no value. A gap in a projection, not a disagreement.                  |
+>>>>>>> cursor/sync-silo-server-d673
 
 A single report samples three independently updated stores, so one-sided
 differences are normal and are not on their own evidence of a defect. Repeated
diff --git a/docs/architecture/admin-settings-ux.md b/docs/architecture/admin-settings-ux.md
new file mode 100644
index 000000000..947628cc7
--- /dev/null
+++ b/docs/architecture/admin-settings-ux.md
@@ -0,0 +1,159 @@
+# Admin settings UX
+
+Admin settings are organized by admin intent ("I want subtitles to download
+automatically"), not by subsystem. `/admin/settings` is the **Overview**:
+server health across the top and one live card per settings group. Twelve
+standalone pages hang off it: General, Storage & Database, Appearance,
+Security & Access, Library & Metadata, Playback, Downloads, Subtitles &
+Metadata, Watch Providers, AI Services, Notifications, and Compatibility. The
+global admin sidebar has one Settings destination; the Overview owns the
+settings information architecture. Old `?tab=` URLs and retired page ids from
+earlier layouts (including `integrations`, now split into Subtitles & Metadata,
+Watch Providers, and AI Services) redirect to the page that absorbed them
+rather than 404ing.
+`⌘K` (`AdminSectionCommandDialog`) is mounted in `AdminLayout` so search works
+from every admin page, not just the Dashboard.
+
+## Visual system
+
+One page is on screen at a time, and each thing on screen carries one signal.
+The admin settings detail view deliberately mirrors the user settings page
+(`SettingsLayout`): one `surface-panel-lg` shell with a `SideNavItem` rail on
+the left and the page content on the right, so the two settings surfaces read
+as the same product. The Overview stays the category directory: it explains
+each group's scope, and every category has its own `/admin/settings/:page`
+route. The rail (`SettingsPageRail`, rendered by the settings shell) lists
+every settings page with the open one marked; an All settings link above the
+shell leads back to the directory. The rail is desktop-only — on smaller
+screens the Overview is the directory, exactly as on the user side. The
+Overview shows a health tile only for a tile in `warn` or `off`. The
+**Setup & health** section explains that it holds recommendations and
+configuration problems; an empty checklist reads "No action needed" and
+names the conditions that will appear there. Below it is one card per
+settings group. Each card explains the group's scope and names the sections
+inside it. Live state stays in the health area instead of reducing a
+multi-provider group to one misleading summary.
+
+A category page opens with `SettingsPageHeader`: the title, and page actions
+if it has any. No breadcrumb, no lede, no status strip. Below it, settings
+are hairline-ruled rows inside `FieldGroup`s — thin wrappers over the shared
+`SettingsGroup` panel the user settings pages use — one panel per group,
+never per field. The Advanced tier stays inline as one disclosure row per
+group. A row can carry its `server_settings` key as a mono caption under the
+label (`SettingField`'s `settingKey`) so an admin can match the UI to the
+API and environment overrides, and a violet dot marks unsaved edits on the
+row and on the group heading (`dirty`, driven from `form.isDirty`). A
+description under a field label is the exception, not the rule: one short
+sentence, and only when the label alone is ambiguous. Units live beside the
+control (`SettingField`'s `unit`), not in the label. When every field in a
+group needs a restart, the group says so once (`FieldGroup restartAll`) and
+the fields inside drop their chips. Provider credentials are `ProviderTile`s
+that expand in place to Test before saving; their border is neutral in every
+state and the state is a dot plus a word in the header. Provider setup lives on
+a provider page (Subtitles & Metadata, Watch Providers), not on the page that
+owns the feature: Library & Metadata decides *whether* Silo looks for intro and
+credits markers, while *which provider answers, in what order, and on what
+terms* is a tile beside the subtitle and metadata providers, with a cross-link
+each way. A tile only reads "Connected" when the provider could actually serve
+a request — its configuration saved and the provider switched on — so an
+installed plugin whose API key was never entered reads "Needs setup". Staged edits raise
+one floating save pill (`SaveBar`) and arm the shell's unsaved-changes prompt;
+the restart prompt is a single `RestartBanner` (`web/src/components/admin/`)
+rendered by the admin shell (`AdminLayout`), never per page. A restart is owed
+by the server, not by the page that asked for it, so the banner sits in the
+flow at the top of the content column on *every* admin page — dashboard,
+users, tasks, settings — and follows the admin around until they restart or
+dismiss it.
+
+## Three tiers, and how to pick one for a new setting
+
+Every admin setting is one of:
+
+- **Essential** — shown by default, no disclosure needed. Target at most ~8
+  essential controls per page above the fold. A setting is Essential only if a
+  household admin on a single-node install would plausibly need it without
+  being told to look for it (on/off toggles for a whole feature, the handful
+  of values that make the feature usable at all).
+- **Advanced** — correct but not essential; collapsed by default behind one
+  `AdvancedSection` disclosure per page (or per `FieldGroup` on a dense page).
+  Open state persists in `localStorage` and auto-expands when a dirty or
+  invalid field lives inside it. Tuning knobs, alternate backends,
+  and anything whose default is good enough that most admins never touch it
+  belong here.
+- **Hidden** — no UI at all, on any page. The setting is still a normal
+  `server_settings` row: readable and writable through the admin settings API
+  and environment configuration exactly as before this reorganization. Use
+  Hidden for legacy key families kept for compatibility, settings that only
+  make sense with expert knowledge of the codebase, or values better derived
+  automatically (e.g. from node pool capacity) than hand-set.
+
+The tier is a UI-only decision. It must never change a key's validation,
+default resolution, or API visibility — moving a setting to Hidden is
+reversible by adding UI back, not by a data migration.
+
+## Shared primitives
+
+Reuse these instead of adding a bespoke variant per page:
+
+- `SettingField` / `FieldGroup` / `SaveBar` (`web/src/pages/admin-settings/`)
+  and `useSettingsForm` (`web/src/hooks/`) — the one save model. Every page
+  batches edits and commits them through one `SaveBar` with Discard; provider
+  credentials are the only exception, and only because they need
+  Test-before-commit, which is `ProviderTile` rather than a bespoke card per
+  provider.
+- `UnsavedChangesGuard` (`web/src/components/`) plus `useReportUnsavedChanges`
+  (`web/src/hooks/useUnsavedChanges.ts`) — the one unsaved-edits prompt. A form
+  only reports that it is dirty; the settings shell mounts the guard once and
+  blocks router navigation (rail, back link, admin sidebar, browser back) with
+  a confirmation. `useSettingsForm` keeps a `beforeunload` listener for tab
+  close and reload, which the router never sees. Blocking is `useBlocker`,
+  which is why `App.tsx` mounts a data router (`createBrowserRouter` +
+  `RouterProvider`) — a page must never grow its own prompt, its own blocker,
+  or its own draft store.
+- `SettingsPageHeader` (`web/src/components/settings/`) — the one way a
+  section names itself. Live state belongs on the Overview, not repeated as a
+  strip on every page.
+- `SettingsPageRail` (`web/src/components/settings/`) — the one sibling nav,
+  rendered once by the settings shell from `ADMIN_SETTINGS_NAV` using the
+  shared `SideNavSection`/`SideNavItem` primitives. Pages never render their
+  own nav or add entries directly to the rail.
+- `SettingsGroup` (`web/src/components/settings/`) — the one settings panel,
+  shared with the user settings pages; admin pages reach it through the
+  `FieldGroup` wrapper, which layers on the restart-all line, the
+  unsaved-edits dot, and the restart context.
+- `AdvancedSection` — the one collapsible-disclosure primitive for the
+  Advanced tier. Do not add another `<details>`, another bespoke collapsible
+  component, or a per-page expand/collapse toggle.
+- `SecretField` — the one credential control: an always-editable password
+  input whose masked placeholder stands in for the saved value. Typing stages
+  a replacement; emptying the input keeps the saved secret, so no ordinary save
+  erases one by accident. Clearing is always a deliberate act, and every
+  surface has exactly one way to do it: either a page-level action (Disconnect,
+  Clear credentials) or, where the page has none, the field's own opt-in
+  `onClear`/`cleared` affordance, which stages the empty write for the save bar
+  and can be taken back with "Keep saved value" or Discard.
+- `LimitField` — the one "Unlimited" checkbox pattern, replacing "0 = unlimited"
+  hint text conventions.
+- A restart badge on `SettingField` itself, sourced from
+  `config.RestartRequired` (`internal/config/restart_keys.go`), not hand-copied
+  into hint text or inferred by a page-local heuristic. `RestartRequired` is
+  the single source of truth for which keys need a process restart to take
+  effect; a new field's badge must read that function (directly, or via a
+  manifest/meta endpoint built on top of it) rather than duplicating its
+  judgment.
+
+## Deferred out of this reorganization
+
+These were identified during the review but deliberately left for later work,
+not folded into this pass:
+
+- Key renames (e.g. un-namespaced `allow_4k_transcode`,
+  `enable_transcode_throttle`, `transcode_throttle_seconds` moving under
+  `playback.*`).
+- Introducing `server.public_url` as one canonical public URL that
+  `jellyfin_compat.public_url` and friends would derive from.
+- Deleting the legacy `s3.operational_*` rows that a past migration copied and
+  never removed.
+
+Each still applies via its existing key and behavior; only the UI
+reorganization and tiering in this document shipped now.
diff --git a/docs/architecture/email.md b/docs/architecture/email.md
index 16fc9dd3c..b0d655255 100644
--- a/docs/architecture/email.md
+++ b/docs/architecture/email.md
@@ -38,7 +38,7 @@ low):
 | `email.from_address`  | —          | required                                           |
 | `email.from_name`     | `Prairie`  |                                                    |
 
-Admin UI: Admin Settings → Connections → Email, including a synchronous test
+Admin UI: Admin Settings → Notifications → Email, including a synchronous test
 send (`POST /api/v1/admin/email/test`).
 
 ## Adding a consumer
diff --git a/internal/api/handlers/admin.go b/internal/api/handlers/admin.go
index 4c0d483e0..7e385fd95 100644
--- a/internal/api/handlers/admin.go
+++ b/internal/api/handlers/admin.go
@@ -140,6 +140,13 @@ type AdminHandler struct {
 	OnServerSettingUpdated       func(ctx context.Context, key, value string)
 	RestartStatus                *ServerRestartStatusTracker
 	CatalogSearchStatus          catalog.CatalogSearchStatusProvider
+	// PublicStorageConfigured reports whether the public object-storage client
+	// is active in this process — the same condition that gates branding asset
+	// uploads (branding.Service.HasStorage) and the metadata image cacher, both
+	// of which are only wired when the public S3 client exists. A nil func
+	// means "not configured". See publicBucketConfigured for the full rule,
+	// which also accepts a bucket that is saved but not live yet.
+	PublicStorageConfigured func() bool
 }
 
 // NewAdminHandler creates a new AdminHandler backed by the given
@@ -1619,6 +1626,22 @@ func (h *AdminHandler) HandleGetEffectiveSettings(w http.ResponseWriter, r *http
 	writeJSON(w, http.StatusOK, effective)
 }
 
+type restartKeysResponse struct {
+	Keys     []string `json:"keys"`
+	Prefixes []string `json:"prefixes"`
+}
+
+// HandleGetRestartKeys handles GET /admin/settings/restart-keys. The registry
+// is compiled into the binary (internal/config), so the response only changes
+// across deploys; the admin UI caches it and uses it to badge the fields whose
+// saved value waits on a restart.
+func (h *AdminHandler) HandleGetRestartKeys(w http.ResponseWriter, _ *http.Request) {
+	writeJSON(w, http.StatusOK, restartKeysResponse{
+		Keys:     config.RestartRequiredKeys(),
+		Prefixes: config.RestartRequiredPrefixes(),
+	})
+}
+
 type sensitiveStatusResponse struct {
 	Configured   []string `json:"configured"`
 	ManagedByEnv []string `json:"managed_by_env,omitempty"`
@@ -1675,8 +1698,10 @@ func (h *AdminHandler) HandleGetSensitiveStatus(w http.ResponseWriter, r *http.R
 type adminSettingResponse struct {
 	Key   string `json:"key"`
 	Value string `json:"value"`
-	// RestartRequired reports whether the saved value only takes effect
-	// after a server restart (set on update responses only).
+	// RestartRequired reports whether the value only takes effect after a
+	// server restart. It is populated from the compiled restart-key registry
+	// on read responses as well as on updates, so the admin UI never has to
+	// hand-copy the list into hint text.
 	RestartRequired bool `json:"restart_required,omitempty"`
 }
 
@@ -2196,7 +2221,11 @@ func (h *AdminHandler) HandleGetSetting(w http.ResponseWriter, r *http.Request)
 	}
 
 	if value, ok := h.BootstrapSensitiveValues[key]; ok && value != "" {
-		writeJSON(w, http.StatusOK, adminSettingResponse{Key: key, Value: value})
+		writeJSON(w, http.StatusOK, adminSettingResponse{
+			Key:             key,
+			Value:           value,
+			RestartRequired: config.RestartRequired(key),
+		})
 		return
 	}
 
@@ -2210,7 +2239,11 @@ func (h *AdminHandler) HandleGetSetting(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
-	writeJSON(w, http.StatusOK, adminSettingResponse{Key: key, Value: value})
+	writeJSON(w, http.StatusOK, adminSettingResponse{
+		Key:             key,
+		Value:           value,
+		RestartRequired: config.RestartRequired(key),
+	})
 }
 
 type updateSettingRequest struct {
@@ -2227,7 +2260,107 @@ type updateSettingsResponse struct {
 	RestartRequiredKeys []string          `json:"restart_required_keys,omitempty"`
 }
 
-func (h *AdminHandler) normalizeBatchSetting(ctx context.Context, key, value string) (string, string, error) {
+// settingMetadataCacheImages copies provider artwork into the public bucket, so
+// it cannot be turned on without one. settingPublicBucketLegacy is the
+// pre-rename alias config.db_loader still falls back to.
+const (
+	settingMetadataCacheImages = "metadata.cache_images"
+	settingPublicBucket        = "s3.public_bucket"
+	settingPublicBucketLegacy  = "s3.operational_bucket"
+)
+
+// errCodeStorageUnavailable is the API error code for a setting that needs
+// object storage this deployment has not configured.
+const errCodeStorageUnavailable = "storage_unavailable"
+
+// errPublicStorageUnavailable is returned when a write would leave
+// metadata.cache_images enabled with no public bucket anywhere: the image cacher
+// is wired off the public S3 client, so caching could never start.
+var errPublicStorageUnavailable = errors.New(
+	"S3 image caching requires a configured public storage bucket: metadata.cache_images cannot be " +
+		"enabled while s3.public_bucket is empty (Infrastructure \u2192 Public storage)")
+
+// publicBucketConfigured reports whether a public object-storage bucket exists
+// from the server's point of view. A bucket that is only saved counts: an admin
+// editing an inactive-but-saved deployment is one restart away. Only the live
+// client proves caching starts immediately, so the UI still badges the pending
+// restart — but the API must not block a legitimate save.
+//
+// This is the single-key endpoint's view: it writes one setting against
+// whatever is already stored. The batch endpoint uses
+// prospectivePublicBucketConfigured instead, because a bucket written or
+// cleared by the same request has not reached the store yet.
+func (h *AdminHandler) publicBucketConfigured(ctx context.Context) bool {
+	if h == nil {
+		return false
+	}
+	if h.PublicStorageConfigured != nil && h.PublicStorageConfigured() {
+		return true
+	}
+	for _, key := range []string{settingPublicBucket, settingPublicBucketLegacy} {
+		if h.BootstrapSensitiveConfigured[key] &&
+			strings.TrimSpace(h.BootstrapSensitiveValues[key]) != "" {
+			return true
+		}
+		if h.SettingsRepo == nil {
+			continue
+		}
+		if stored, err := h.SettingsRepo.Get(ctx, key); err == nil && strings.TrimSpace(stored) != "" {
+			return true
+		}
+	}
+	return false
+}
+
+// prospectivePublicBucketConfigured reports whether the settings a batch is
+// about to persist still describe a public bucket. effective is the stored
+// state overlaid with the batch and the environment and run through
+// config.EffectiveAdminSettings, so the legacy s3.operational_bucket fallback
+// LoadFromDB applies is already folded into settingPublicBucket; changed is the
+// batch itself.
+//
+// A bucket key the batch does not mention leaves the live public client as
+// evidence, because the bucket may come from a source the settings store cannot
+// see. An explicitly empty bucket in the batch is a clear, not an absence: the
+// live client only reflects what this process booted with, so it cannot vouch
+// for storage the saved settings no longer describe.
+func (h *AdminHandler) prospectivePublicBucketConfigured(effective, changed map[string]string) bool {
+	if h == nil {
+		return false
+	}
+	if strings.TrimSpace(effective[settingPublicBucket]) != "" {
+		return true
+	}
+	for _, key := range []string{settingPublicBucket, settingPublicBucketLegacy} {
+		if _, cleared := changed[key]; cleared {
+			return false
+		}
+	}
+	return h.PublicStorageConfigured != nil && h.PublicStorageConfigured()
+}
+
+// validateProspectiveImageCaching rejects a batch whose final state leaves image
+// caching enabled with nowhere to write. Both directions matter: enabling
+// caching while clearing the bucket in the same request, and clearing the bucket
+// while stored settings already have caching on. Either way the image cacher
+// cannot start after the next restart.
+func (h *AdminHandler) validateProspectiveImageCaching(effective, changed map[string]string) error {
+	// ParseBool matches config.LoadFromDB, which reads the stored value the same
+	// way; anything it rejects is not a deployment running with caching on.
+	enabled, _ := strconv.ParseBool(strings.TrimSpace(effective[settingMetadataCacheImages]))
+	if !enabled {
+		return nil
+	}
+	if h.prospectivePublicBucketConfigured(effective, changed) {
+		return nil
+	}
+	return errPublicStorageUnavailable
+}
+
+func (h *AdminHandler) normalizeBatchSetting(
+	ctx context.Context,
+	key, value string,
+) (string, string, error) {
 	if strings.HasPrefix(key, "ratelimit.") {
 		return "", "bad_request", fmt.Errorf("%s is managed by /admin/rate-limits/config", key)
 	}
@@ -2251,7 +2384,7 @@ func (h *AdminHandler) normalizeBatchSetting(ctx context.Context, key, value str
 	case diagnostics.KeyUploadsEnabled:
 		if normalized == "true" {
 			if err = h.validateDiagnosticsUploadsEnabled(ctx); err != nil {
-				return "", "storage_unavailable", err
+				return "", errCodeStorageUnavailable, err
 			}
 		}
 	case diagnostics.KeyMaxBundleBytes,
@@ -2494,6 +2627,7 @@ func (h *AdminHandler) HandleUpdateSettings(w http.ResponseWriter, r *http.Reque
 		after            map[string]string
 		effectiveChanges map[string]bool
 		validationErr    error
+		validationCode   string
 	)
 	err := updateServerSettingsAtomically(r.Context(), h.SettingsRepo,
 		func(stored map[string]string) (map[string]string, error) {
@@ -2502,13 +2636,22 @@ func (h *AdminHandler) HandleUpdateSettings(w http.ResponseWriter, r *http.Reque
 				prospective[key] = value
 			}
 			activeProspective := h.activeAdminSettings(prospective)
+			before := h.effectiveAdminSettings(stored)
+			after = h.effectiveAdminSettings(prospective)
+			// Cross-field checks run against the complete prospective state, so a
+			// value the batch clears is gone even when the store still has it and
+			// the current process is still running on it.
+			if err := h.validateProspectiveImageCaching(after, normalized); err != nil {
+				validationErr = err
+				validationCode = errCodeStorageUnavailable
+				return nil, err
+			}
 			validationSnapshot := adminSettingsValidationSnapshot(activeProspective, normalized)
 			if err := validateProspectiveAdminSettings(validationSnapshot, h.RedisBootstrapAvailable); err != nil {
 				validationErr = err
+				validationCode = "invalid_settings"
 				return nil, err
 			}
-			before := h.effectiveAdminSettings(stored)
-			after = h.effectiveAdminSettings(prospective)
 			writes := make(map[string]string, len(normalized))
 			effectiveChanges = make(map[string]bool, len(normalized))
 			for key, value := range normalized {
@@ -2523,7 +2666,7 @@ func (h *AdminHandler) HandleUpdateSettings(w http.ResponseWriter, r *http.Reque
 			return writes, nil
 		})
 	if validationErr != nil {
-		writeError(w, http.StatusBadRequest, "invalid_settings", validationErr.Error())
+		writeError(w, http.StatusBadRequest, validationCode, validationErr.Error())
 		return
 	}
 	if err != nil {
@@ -2551,8 +2694,11 @@ func (h *AdminHandler) HandleUpdateSettings(w http.ResponseWriter, r *http.Reque
 			restartKeys = append(restartKeys, key)
 		}
 	}
-	if len(restartKeys) > 0 {
-		h.markServerRestartRequired("server_settings")
+	// Per-key reasons ("setting:<key>") so the admin UI can scope a pending
+	// restart to the subsystem the key belongs to instead of warning on every
+	// tile for any settings save.
+	for _, restartKey := range restartKeys {
+		h.markServerRestartRequired("setting:" + restartKey)
 	}
 	writeJSON(w, http.StatusOK, updateSettingsResponse{
 		Values:              responseValues,
@@ -2648,6 +2794,11 @@ func (h *AdminHandler) HandleUpdateSetting(w http.ResponseWriter, r *http.Reques
 			return
 		}
 		req.Value = strconv.FormatBool(enabled)
+	case settingMetadataCacheImages:
+		if req.Value == "true" && !h.publicBucketConfigured(r.Context()) {
+			writeError(w, http.StatusBadRequest, errCodeStorageUnavailable, errPublicStorageUnavailable.Error())
+			return
+		}
 	case diagnostics.KeyUploadsEnabled:
 		enabled, err := strconv.ParseBool(strings.TrimSpace(req.Value))
 		if err != nil {
@@ -2657,7 +2808,7 @@ func (h *AdminHandler) HandleUpdateSetting(w http.ResponseWriter, r *http.Reques
 		req.Value = strconv.FormatBool(enabled)
 		if enabled {
 			if err := h.validateDiagnosticsUploadsEnabled(r.Context()); err != nil {
-				writeError(w, http.StatusBadRequest, "storage_unavailable", err.Error())
+				writeError(w, http.StatusBadRequest, errCodeStorageUnavailable, err.Error())
 				return
 			}
 		}
@@ -2830,6 +2981,7 @@ func (h *AdminHandler) HandleUpdateSetting(w http.ResponseWriter, r *http.Reques
 		after            map[string]string
 		effectiveChanged bool
 		validationErr    error
+		validationCode   string
 	)
 	err := updateServerSettingsAtomically(r.Context(), h.SettingsRepo,
 		func(stored map[string]string) (map[string]string, error) {
@@ -2838,14 +2990,28 @@ func (h *AdminHandler) HandleUpdateSetting(w http.ResponseWriter, r *http.Reques
 			// This legacy route can only change one key, so enforcing every
 			// cross-field invariant would make paired settings impossible to
 			// establish or clear one write at a time. Per-key validation above
-			// remains strict; Redis transport is the one durable prerequisite
-			// that may not be broken by a single-key write.
+			// remains strict; the durable prerequisites are the exception — a
+			// single-key write may not break them.
 			if key == "redis.url" {
 				if err := config.ValidateRedisRateLimitTransport(
 					h.activeAdminSettings(prospective),
 					h.RedisBootstrapAvailable,
 				); err != nil {
 					validationErr = err
+					validationCode = "invalid_settings"
+					return nil, err
+				}
+			}
+			// Image caching's bucket is the other durable prerequisite: clearing
+			// it here while metadata.cache_images is stored on would leave the
+			// cacher unable to start after restart. Disable caching first.
+			if key == settingPublicBucket || key == settingPublicBucketLegacy {
+				if err := h.validateProspectiveImageCaching(
+					h.effectiveAdminSettings(prospective),
+					map[string]string{key: req.Value},
+				); err != nil {
+					validationErr = err
+					validationCode = errCodeStorageUnavailable
 					return nil, err
 				}
 			}
@@ -2859,7 +3025,7 @@ func (h *AdminHandler) HandleUpdateSetting(w http.ResponseWriter, r *http.Reques
 			return nil, nil
 		})
 	if validationErr != nil {
-		writeError(w, http.StatusBadRequest, "invalid_settings", validationErr.Error())
+		writeError(w, http.StatusBadRequest, validationCode, validationErr.Error())
 		return
 	}
 	if err != nil {
@@ -2877,7 +3043,7 @@ func (h *AdminHandler) HandleUpdateSetting(w http.ResponseWriter, r *http.Reques
 	}
 	restartRequired := effectiveChanged && config.RestartRequired(key)
 	if restartRequired {
-		h.markServerRestartRequired("server_settings")
+		h.markServerRestartRequired("setting:" + key)
 	}
 	if sensitiveSettingKeys[key] {
 		writeJSON(w, http.StatusOK, adminSettingResponse{Key: key, RestartRequired: restartRequired})
diff --git a/internal/api/handlers/admin_cache_images_setting_test.go b/internal/api/handlers/admin_cache_images_setting_test.go
new file mode 100644
index 000000000..2d9f3eab0
--- /dev/null
+++ b/internal/api/handlers/admin_cache_images_setting_test.go
@@ -0,0 +1,319 @@
+package handlers
+
+import (
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"github.com/go-chi/chi/v5"
+)
+
+// metadata.cache_images copies provider artwork into the public bucket, so both
+// write paths reject enabling it when no public bucket exists anywhere. A saved
+// but not-yet-active bucket counts: the setup wizard configures the bucket and
+// enables caching in one batch, and the UI badges the pending restart.
+
+func cacheImagesHandler(settings *fakeServerSettingsStore, storage bool) *AdminHandler {
+	h := &AdminHandler{SettingsRepo: settings}
+	if storage {
+		h.PublicStorageConfigured = func() bool { return true }
+	}
+	return h
+}
+
+func updateCacheImagesBatch(h *AdminHandler, values string) *httptest.ResponseRecorder {
+	rec := httptest.NewRecorder()
+	h.HandleUpdateSettings(rec, httptest.NewRequest(
+		http.MethodPut,
+		"/admin/settings",
+		strings.NewReader(`{"values":{`+values+`}}`),
+	))
+	return rec
+}
+
+func updateSingleSetting(h *AdminHandler, key, value string) *httptest.ResponseRecorder {
+	router := chi.NewRouter()
+	router.Put("/admin/settings/{key}", h.HandleUpdateSetting)
+	rec := httptest.NewRecorder()
+	router.ServeHTTP(rec, httptest.NewRequest(
+		http.MethodPut,
+		"/admin/settings/"+key,
+		strings.NewReader(`{"value":"`+value+`"}`),
+	))
+	return rec
+}
+
+func updateCacheImagesSingle(h *AdminHandler, value string) *httptest.ResponseRecorder {
+	return updateSingleSetting(h, "metadata.cache_images", value)
+}
+
+func assertStorageUnavailable(t *testing.T, rec *httptest.ResponseRecorder) {
+	t.Helper()
+	if rec.Code != http.StatusBadRequest {
+		t.Fatalf("status = %d, want %d; body=%s", rec.Code, http.StatusBadRequest, rec.Body.String())
+	}
+	var body errorResponse
+	if err := json.NewDecoder(rec.Body).Decode(&body); err != nil {
+		t.Fatalf("decode response: %v", err)
+	}
+	if body.Error != "storage_unavailable" {
+		t.Fatalf("error code = %q, want storage_unavailable; body=%#v", body.Error, body)
+	}
+	if !strings.Contains(body.Message, "S3 image caching requires a configured public storage bucket") {
+		t.Fatalf("error message = %q", body.Message)
+	}
+}
+
+func TestCacheImagesEnableRequiresPublicBucket(t *testing.T) {
+	const cacheImagesTrue = `"metadata.cache_images":"true"`
+
+	t.Run("batch with active storage", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, true), cacheImagesTrue)
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["metadata.cache_images"] != "true" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	t.Run("batch with saved bucket but inactive store", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{"s3.public_bucket": "silo-public"}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, false), cacheImagesTrue)
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["metadata.cache_images"] != "true" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	// The setup wizard writes both in one request, before any restart.
+	t.Run("batch configuring the bucket in the same request", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, false),
+			cacheImagesTrue+`,"s3.public_endpoint":"https://s3.example.com","s3.public_bucket":"silo-public"`)
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["metadata.cache_images"] != "true" ||
+			settings.values["s3.public_bucket"] != "silo-public" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	// The batch is validated inside the settings transaction, so it reads the
+	// stored values but must not write any of them.
+	t.Run("batch with no bucket anywhere", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, false), cacheImagesTrue)
+		assertStorageUnavailable(t, rec)
+		if settings.setManyCalls != 0 || settings.setCalls != 0 {
+			t.Fatalf("write attempted: setMany=%d set=%d", settings.setManyCalls, settings.setCalls)
+		}
+		if _, stored := settings.values["metadata.cache_images"]; stored {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	// Clearing the bucket in the same batch must not count as configuring one.
+	t.Run("batch clearing the bucket while enabling", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, false),
+			cacheImagesTrue+`,"s3.public_bucket":""`)
+		assertStorageUnavailable(t, rec)
+	})
+
+	// The batch persists atomically, so a bucket it clears is gone even though
+	// the store — and the process still running on it — have one right now.
+	t.Run("batch clearing a stored bucket while enabling", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{"s3.public_bucket": "silo-public"}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, true),
+			cacheImagesTrue+`,"s3.public_bucket":""`)
+		assertStorageUnavailable(t, rec)
+		if settings.setManyCalls != 0 || settings.setCalls != 0 {
+			t.Fatalf("write attempted: setMany=%d set=%d", settings.setManyCalls, settings.setCalls)
+		}
+		if settings.values["s3.public_bucket"] != "silo-public" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	// The dual: caching is already on and the batch never resubmits it, so only
+	// the complete prospective state catches the storage disappearing.
+	t.Run("batch clearing the bucket while caching stays on", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{
+			"metadata.cache_images": "true",
+			"s3.public_bucket":      "silo-public",
+		}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, true), `"s3.public_bucket":""`)
+		assertStorageUnavailable(t, rec)
+		if settings.values["s3.public_bucket"] != "silo-public" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	t.Run("batch clearing the public endpoint and bucket while caching stays on", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{
+			"metadata.cache_images": "true",
+			"s3.public_endpoint":    "https://s3.example.com",
+			"s3.public_bucket":      "silo-public",
+		}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, true),
+			`"s3.public_endpoint":"","s3.public_bucket":""`)
+		assertStorageUnavailable(t, rec)
+		if settings.values["s3.public_bucket"] != "silo-public" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	// Turning caching off in the same batch is the documented way out.
+	t.Run("batch disabling caching while clearing the bucket", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{
+			"metadata.cache_images": "true",
+			"s3.public_endpoint":    "https://s3.example.com",
+			"s3.public_bucket":      "silo-public",
+		}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, true),
+			`"metadata.cache_images":"false","s3.public_endpoint":"","s3.public_bucket":""`)
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["metadata.cache_images"] != "false" ||
+			settings.values["s3.public_bucket"] != "" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	// LoadFromDB falls back to the pre-rename bucket key, so clearing only the
+	// canonical one still leaves the cacher a bucket.
+	t.Run("batch clearing the bucket while the legacy bucket remains", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{
+			"metadata.cache_images": "true",
+			"s3.public_endpoint":    "https://s3.example.com",
+			"s3.public_bucket":      "silo-public",
+			"s3.operational_bucket": "silo-legacy",
+		}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, true), `"s3.public_bucket":""`)
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["s3.public_bucket"] != "" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	t.Run("batch disable with no bucket", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{"metadata.cache_images": "true"}}
+		rec := updateCacheImagesBatch(cacheImagesHandler(settings, false), `"metadata.cache_images":"false"`)
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["metadata.cache_images"] != "false" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	t.Run("single with active storage", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{}}
+		rec := updateCacheImagesSingle(cacheImagesHandler(settings, true), "true")
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["metadata.cache_images"] != "true" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	t.Run("single with saved bucket but inactive store", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{"s3.public_bucket": "silo-public"}}
+		rec := updateCacheImagesSingle(cacheImagesHandler(settings, false), "true")
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["metadata.cache_images"] != "true" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	t.Run("single with an environment-supplied bucket", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{}}
+		h := cacheImagesHandler(settings, false)
+		h.BootstrapSensitiveConfigured = map[string]bool{"s3.public_bucket": true}
+		h.BootstrapSensitiveValues = map[string]string{"s3.public_bucket": "silo-public"}
+		rec := updateCacheImagesSingle(h, "true")
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["metadata.cache_images"] != "true" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	t.Run("single with no bucket anywhere", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{}}
+		rec := updateCacheImagesSingle(cacheImagesHandler(settings, false), "true")
+		assertStorageUnavailable(t, rec)
+		if settings.setCalls != 0 {
+			t.Fatalf("Set calls = %d, want 0", settings.setCalls)
+		}
+		if _, stored := settings.values["metadata.cache_images"]; stored {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	t.Run("single disable with no bucket", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{"metadata.cache_images": "true"}}
+		rec := updateCacheImagesSingle(cacheImagesHandler(settings, false), "false")
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["metadata.cache_images"] != "false" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	// The legacy single-key route must hold the same line as the batch:
+	// clearing the bucket while caching is stored on strands the cacher.
+	t.Run("single bucket clear while caching is on", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{
+			"metadata.cache_images": "true",
+			"s3.public_bucket":      "silo-public",
+		}}
+		rec := updateSingleSetting(cacheImagesHandler(settings, true), "s3.public_bucket", "")
+		assertStorageUnavailable(t, rec)
+		if settings.values["s3.public_bucket"] != "silo-public" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	t.Run("single bucket clear while caching is off", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{
+			"s3.public_bucket": "silo-public",
+		}}
+		rec := updateSingleSetting(cacheImagesHandler(settings, false), "s3.public_bucket", "")
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["s3.public_bucket"] != "" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+
+	t.Run("single bucket change to a new value while caching is on", func(t *testing.T) {
+		settings := &fakeServerSettingsStore{values: map[string]string{
+			"metadata.cache_images": "true",
+			"s3.public_bucket":      "silo-public",
+		}}
+		rec := updateSingleSetting(cacheImagesHandler(settings, false), "s3.public_bucket", "silo-art")
+		if rec.Code != http.StatusOK {
+			t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+		}
+		if settings.values["s3.public_bucket"] != "silo-art" {
+			t.Fatalf("stored values = %#v", settings.values)
+		}
+	})
+}
diff --git a/internal/api/handlers/admin_restart_keys_test.go b/internal/api/handlers/admin_restart_keys_test.go
new file mode 100644
index 000000000..d24e25297
--- /dev/null
+++ b/internal/api/handlers/admin_restart_keys_test.go
@@ -0,0 +1,61 @@
+package handlers
+
+import (
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"slices"
+	"sort"
+	"testing"
+
+	"github.com/prairie-server/prairie-server/internal/config"
+)
+
+// The admin UI badges restart-required fields from this endpoint, so it has to
+// report the compiled registry verbatim — both exact keys and whole namespaces.
+func TestHandleGetRestartKeys(t *testing.T) {
+	handler := &AdminHandler{}
+	rec := httptest.NewRecorder()
+
+	handler.HandleGetRestartKeys(rec, httptest.NewRequest(http.MethodGet, "/admin/settings/restart-keys", nil))
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status = %d, want %d", rec.Code, http.StatusOK)
+	}
+	var body struct {
+		Keys     []string `json:"keys"`
+		Prefixes []string `json:"prefixes"`
+	}
+	if err := json.Unmarshal(rec.Body.Bytes(), &body); err != nil {
+		t.Fatalf("decode: %v", err)
+	}
+
+	if !slices.Equal(body.Keys, config.RestartRequiredKeys()) {
+		t.Errorf("keys = %v, want %v", body.Keys, config.RestartRequiredKeys())
+	}
+	if !slices.Equal(body.Prefixes, config.RestartRequiredPrefixes()) {
+		t.Errorf("prefixes = %v, want %v", body.Prefixes, config.RestartRequiredPrefixes())
+	}
+	if !sort.StringsAreSorted(body.Keys) {
+		t.Errorf("keys are not sorted: %v", body.Keys)
+	}
+
+	// Spot-check both matching modes so a registry refactor that drops one of
+	// them fails here rather than silently un-badging the UI.
+	if !slices.Contains(body.Keys, "auth.jwt_secret") {
+		t.Errorf("keys missing auth.jwt_secret: %v", body.Keys)
+	}
+	if !slices.Contains(body.Prefixes, "database.") {
+		t.Errorf("prefixes missing database.: %v", body.Prefixes)
+	}
+	for _, key := range body.Keys {
+		if !config.RestartRequired(key) {
+			t.Errorf("reported key %q is not restart-required", key)
+		}
+	}
+	for _, prefix := range body.Prefixes {
+		if !config.RestartRequired(prefix + "example") {
+			t.Errorf("reported prefix %q does not mark its namespace restart-required", prefix)
+		}
+	}
+}
diff --git a/internal/api/handlers/admin_server_status.go b/internal/api/handlers/admin_server_status.go
index ed18ffc8a..30e085d3d 100644
--- a/internal/api/handlers/admin_server_status.go
+++ b/internal/api/handlers/admin_server_status.go
@@ -2,6 +2,7 @@ package handlers
 
 import (
 	"net/http"
+	"slices"
 	"time"
 
 	"github.com/prairie-server/prairie-server/internal/jellycompat"
@@ -12,14 +13,32 @@ type adminServerStatusResponse struct {
 	RestartRequired       bool       `json:"restart_required"`
 	RestartRequiredAt     *time.Time `json:"restart_required_at,omitempty"`
 	RestartRequiredReason string     `json:"restart_required_reason,omitempty"`
-	RestartRequested      bool       `json:"restart_requested"`
-	RestartRequestedAt    *time.Time `json:"restart_requested_at,omitempty"`
+	// RestartRequiredReasons accumulates every distinct reason marked since
+	// boot ("setting:<key>" entries for settings saves), so a client can scope
+	// a pending restart to the subsystem it belongs to. The singular field
+	// above only remembers the last save.
+	RestartRequiredReasons []string `json:"restart_required_reasons,omitempty"`
+	// RestartMarkCount increments on every restart-required save. The boolean
+	// above latches for the process lifetime, so this is the client's only
+	// signal that a NEW requirement arrived after one was dismissed.
+	RestartMarkCount   int        `json:"restart_mark_count"`
+	RestartRequested   bool       `json:"restart_requested"`
+	RestartRequestedAt *time.Time `json:"restart_requested_at,omitempty"`
 }
 
 // HandleGetServerStatus handles GET /admin/server/status.
 func (h *AdminHandler) HandleGetServerStatus(w http.ResponseWriter, r *http.Request) {
 	snapshot := h.RestartStatus.Snapshot()
-	resp := adminServerStatusResponse(snapshot)
+	resp := adminServerStatusResponse{
+		StartedAt:              snapshot.StartedAt,
+		RestartRequired:        snapshot.RestartRequired,
+		RestartRequiredAt:      snapshot.RestartRequiredAt,
+		RestartRequiredReason:  snapshot.RestartRequiredReason,
+		RestartRequiredReasons: snapshot.RestartReasons,
+		RestartMarkCount:       snapshot.RestartMarkCount,
+		RestartRequested:       snapshot.RestartRequested,
+		RestartRequestedAt:     snapshot.RestartRequestedAt,
+	}
 
 	if h.SettingsRepo != nil {
 		settings, err := h.SettingsRepo.GetAll(r.Context())
@@ -32,6 +51,12 @@ func (h *AdminHandler) HandleGetServerStatus(w http.ResponseWriter, r *http.Requ
 			if resp.RestartRequiredReason == "" {
 				resp.RestartRequiredReason = "jellyfin_compat"
 			}
+			// This requirement is derived here rather than marked on the
+			// tracker, so the accumulated list has to gain it too — a client
+			// scoping restarts by reason would otherwise never see it.
+			if !slices.Contains(resp.RestartRequiredReasons, "jellyfin_compat") {
+				resp.RestartRequiredReasons = append(resp.RestartRequiredReasons, "jellyfin_compat")
+			}
 		}
 	}
 
diff --git a/internal/api/handlers/admin_settings_checks_test.go b/internal/api/handlers/admin_settings_checks_test.go
index 7b96d3a67..75552f64d 100644
--- a/internal/api/handlers/admin_settings_checks_test.go
+++ b/internal/api/handlers/admin_settings_checks_test.go
@@ -1813,3 +1813,80 @@ func withChiParam(r *http.Request, key, value string) *http.Request {
 	routeCtx.URLParams.Add(key, value)
 	return r.WithContext(context.WithValue(r.Context(), chi.RouteCtxKey, routeCtx))
 }
+
+func TestAdminGetSettingReportsRestartRequired(t *testing.T) {
+	const restartKey = "scanner.max_concurrent_libraries"
+	const liveKey = "server.log_level"
+
+	handler := &AdminHandler{
+		SettingsRepo: &fakeServerSettingsStore{values: map[string]string{
+			restartKey: "4",
+			liveKey:    "debug",
+		}},
+		BootstrapSensitiveValues: map[string]string{
+			"playback.ffmpeg_path": "/opt/ffmpeg",
+		},
+	}
+
+	for _, tc := range []struct {
+		name            string
+		key             string
+		wantValue       string
+		wantRestart     bool
+		wantRestartSeen bool
+	}{
+		{
+			name:            "stored restart-required key",
+			key:             restartKey,
+			wantValue:       "4",
+			wantRestart:     true,
+			wantRestartSeen: true,
+		},
+		{
+			name:      "stored hot-reloading key omits the flag",
+			key:       liveKey,
+			wantValue: "debug",
+		},
+		{
+			name:            "bootstrap value",
+			key:             "playback.ffmpeg_path",
+			wantValue:       "/opt/ffmpeg",
+			wantRestart:     true,
+			wantRestartSeen: true,
+		},
+	} {
+		t.Run(tc.name, func(t *testing.T) {
+			if config.RestartRequired(tc.key) != tc.wantRestart {
+				t.Fatalf("test fixture drifted: config.RestartRequired(%q) = %v", tc.key, !tc.wantRestart)
+			}
+
+			req := httptest.NewRequest(http.MethodGet, "/admin/settings/"+tc.key, nil)
+			req = withChiParam(req, "key", tc.key)
+			rec := httptest.NewRecorder()
+
+			handler.HandleGetSetting(rec, req)
+
+			if rec.Code != http.StatusOK {
+				t.Fatalf("status = %d, want 200; body=%s", rec.Code, rec.Body.String())
+			}
+			var payload struct {
+				Key             string `json:"key"`
+				Value           string `json:"value"`
+				RestartRequired bool   `json:"restart_required"`
+			}
+			if err := json.Unmarshal(rec.Body.Bytes(), &payload); err != nil {
+				t.Fatalf("decode response: %v", err)
+			}
+			if payload.Key != tc.key || payload.Value != tc.wantValue {
+				t.Fatalf("payload = %+v, want key %q value %q", payload, tc.key, tc.wantValue)
+			}
+			if payload.RestartRequired != tc.wantRestart {
+				t.Fatalf("restart_required = %v, want %v", payload.RestartRequired, tc.wantRestart)
+			}
+			// omitempty must keep the flag off the wire for live keys.
+			if seen := strings.Contains(rec.Body.String(), "restart_required"); seen != tc.wantRestartSeen {
+				t.Fatalf("restart_required present = %v, want %v; body=%s", seen, tc.wantRestartSeen, rec.Body.String())
+			}
+		})
+	}
+}
diff --git a/internal/api/handlers/rate_limits.go b/internal/api/handlers/rate_limits.go
index ce0389f4c..6ed92c43e 100644
--- a/internal/api/handlers/rate_limits.go
+++ b/internal/api/handlers/rate_limits.go
@@ -46,6 +46,11 @@ type rateLimitConfigResponse struct {
 	// ActiveBackend is the backend the running limiter actually uses, which
 	// can differ from Backend until the server restarts.
 	ActiveBackend string `json:"active_backend,omitempty"`
+	// RedisAvailable reports whether the Redis backend can be selected at all,
+	// using the same rule the save path enforces. Sentinel and REDIS_URL
+	// deployments have no persisted redis.url row, so admins cannot derive
+	// this client-side.
+	RedisAvailable bool `json:"redis_available"`
 }
 
 type tierConfigResponse struct {
@@ -83,13 +88,17 @@ type authEndpointConfigRequest struct {
 
 // HandleGetConfig handles GET /admin/rate-limits/config.
 func (h *RateLimitHandler) HandleGetConfig(w http.ResponseWriter, r *http.Request) {
-	cfg, err := ratelimit.LoadConfig(r.Context(), h.store)
+	// One read serves the rate values, the stored backend, and the
+	// Redis-availability bit, so no field of the response can straddle two
+	// snapshots of the settings table.
+	values, err := h.store.GetAll(r.Context())
 	if err != nil {
 		writeError(w, http.StatusInternalServerError, "internal_error", "Failed to load rate limit config")
 		return
 	}
+	cfg := ratelimit.ConfigFromSettings(values)
 
-	backend, _ := h.store.Get(r.Context(), "ratelimit.backend")
+	backend := values["ratelimit.backend"]
 	if backend == "" {
 		backend = "memory"
 	}
@@ -104,6 +113,7 @@ func (h *RateLimitHandler) HandleGetConfig(w http.ResponseWriter, r *http.Reques
 		IPBurst:            cfg.IPBurst,
 		AuthEndpoints:      make(map[string]authEndpointConfigResponse),
 		Active:             h.mw != nil,
+		RedisAvailable:     redisConfiguredSettings(values, h.redisBootstrapAvailable),
 	}
 	if h.mw != nil {
 		resp.ActiveBackend = h.mw.ActiveBackend()
diff --git a/internal/api/handlers/rate_limits_test.go b/internal/api/handlers/rate_limits_test.go
index 8f212b949..d63862a49 100644
--- a/internal/api/handlers/rate_limits_test.go
+++ b/internal/api/handlers/rate_limits_test.go
@@ -175,6 +175,48 @@ func TestRateLimitHandlerWithoutRunningLimiter(t *testing.T) {
 	}
 }
 
+func TestRateLimitHandlerReportsRedisAvailability(t *testing.T) {
+	// GET must answer with the same rule the save path enforces, so the UI can
+	// disable the Redis option instead of failing the admin at save time.
+	tests := []struct {
+		name             string
+		values           map[string]string
+		bootstrapAvail   bool
+		wantRedisEnabled bool
+	}{
+		{name: "nothing configured"},
+		{
+			name:   "malformed persisted url",
+			values: map[string]string{"redis.url": "not-a-url"},
+		},
+		{
+			name:             "canonical persisted url",
+			values:           map[string]string{"redis.url": "redis://cache.example.invalid:6379"},
+			wantRedisEnabled: true,
+		},
+		{
+			name:             "bootstrap redis despite stale persisted url",
+			values:           map[string]string{"redis.url": " redis://cache.example.invalid:6379 "},
+			bootstrapAvail:   true,
+			wantRedisEnabled: true,
+		},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.name, func(t *testing.T) {
+			store := newFakeRateLimitStore()
+			for key, value := range tc.values {
+				store.values[key] = value
+			}
+			h := NewRateLimitHandler(store, nil, nil, NewServerRestartStatusTracker(), tc.bootstrapAvail)
+
+			if got := getRateLimitConfig(t, h).RedisAvailable; got != tc.wantRedisEnabled {
+				t.Errorf("GET redis_available = %v, want %v", got, tc.wantRedisEnabled)
+			}
+		})
+	}
+}
+
 func TestRateLimitHandlerUsesLatestCommittedSettingsAfterAtomicWrite(t *testing.T) {
 	baseStore := newFakeRateLimitStore()
 	baseStore.values["ratelimit.enabled"] = "false"
diff --git a/internal/api/handlers/server_restart_status.go b/internal/api/handlers/server_restart_status.go
index 8be7b359d..e1ed2b558 100644
--- a/internal/api/handlers/server_restart_status.go
+++ b/internal/api/handlers/server_restart_status.go
@@ -1,6 +1,7 @@
 package handlers
 
 import (
+	"slices"
 	"strings"
 	"sync"
 	"time"
@@ -15,8 +16,18 @@ type ServerRestartStatusTracker struct {
 	restartRequired       bool
 	restartRequiredAt     time.Time
 	restartRequiredReason string
-	restartRequested      bool
-	restartRequestedAt    time.Time
+	// restartMarkCount increments on every MarkRequired call. restartRequired
+	// latches true for the life of the process, so this counter is the only
+	// signal that a NEW restart-required save happened — the admin UI keys its
+	// banner re-arm (after "Later") on it.
+	restartMarkCount int
+	// restartReasons accumulates every distinct reason marked since boot, in
+	// first-seen order. The single restartRequiredReason only remembers the
+	// LAST save, so a tile scoped to one subsystem cannot trust it: an
+	// unrelated later save overwrites it. The full set can be scoped.
+	restartReasons     []string
+	restartRequested   bool
+	restartRequestedAt time.Time
 }
 
 type ServerRestartStatusSnapshot struct {
@@ -24,6 +35,8 @@ type ServerRestartStatusSnapshot struct {
 	RestartRequired       bool
 	RestartRequiredAt     *time.Time
 	RestartRequiredReason string
+	RestartReasons        []string
+	RestartMarkCount      int
 	RestartRequested      bool
 	RestartRequestedAt    *time.Time
 }
@@ -49,8 +62,12 @@ func (s *ServerRestartStatusTracker) MarkRequired(reason string) {
 		s.restartRequired = true
 		s.restartRequiredAt = now
 	}
+	s.restartMarkCount++
 	if reason != "" {
 		s.restartRequiredReason = reason
+		if !slices.Contains(s.restartReasons, reason) {
+			s.restartReasons = append(s.restartReasons, reason)
+		}
 	}
 }
 
@@ -96,6 +113,8 @@ func (s *ServerRestartStatusTracker) Snapshot() ServerRestartStatusSnapshot {
 		RestartRequired:       s.restartRequired,
 		RestartRequiredAt:     restartRequiredAt,
 		RestartRequiredReason: s.restartRequiredReason,
+		RestartReasons:        slices.Clone(s.restartReasons),
+		RestartMarkCount:      s.restartMarkCount,
 		RestartRequested:      s.restartRequested,
 		RestartRequestedAt:    restartRequestedAt,
 	}
diff --git a/internal/api/handlers/server_restart_status_test.go b/internal/api/handlers/server_restart_status_test.go
new file mode 100644
index 000000000..823dc6576
--- /dev/null
+++ b/internal/api/handlers/server_restart_status_test.go
@@ -0,0 +1,29 @@
+package handlers
+
+import "testing"
+
+// The restart-required boolean latches for the life of the process, so the
+// mark count is the only signal the admin UI has that a NEW restart-required
+// save happened after the banner was dismissed.
+func TestServerRestartStatusMarkCount(t *testing.T) {
+	tracker := NewServerRestartStatusTracker()
+
+	if got := tracker.Snapshot().RestartMarkCount; got != 0 {
+		t.Fatalf("RestartMarkCount = %d before any mark, want 0", got)
+	}
+
+	tracker.MarkRequired("ratelimit_backend")
+	tracker.MarkRequired("ratelimit_backend") // same reason still counts: it is a new save
+	tracker.MarkRequired("")
+
+	snapshot := tracker.Snapshot()
+	if snapshot.RestartMarkCount != 3 {
+		t.Fatalf("RestartMarkCount = %d after three marks, want 3", snapshot.RestartMarkCount)
+	}
+	if !snapshot.RestartRequired {
+		t.Fatal("RestartRequired = false after marks, want true")
+	}
+	if snapshot.RestartRequiredReason != "ratelimit_backend" {
+		t.Fatalf("RestartRequiredReason = %q, want the last non-empty reason", snapshot.RestartRequiredReason)
+	}
+}
diff --git a/internal/api/handlers/settings_overlay_config_test.go b/internal/api/handlers/settings_overlay_config_test.go
new file mode 100644
index 000000000..2a5d2bb6f
--- /dev/null
+++ b/internal/api/handlers/settings_overlay_config_test.go
@@ -0,0 +1,51 @@
+package handlers
+
+import (
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+)
+
+func readOverlayConfig(t *testing.T, handler *SettingsHandler) overlayConfigResponse {
+	t.Helper()
+	recorder := httptest.NewRecorder()
+	handler.HandleGetOverlayConfig(
+		recorder,
+		httptest.NewRequest(http.MethodGet, "/settings/overlay-config", nil),
+	)
+	if recorder.Code != http.StatusOK {
+		t.Fatalf("status = %d, want 200; body=%s", recorder.Code, recorder.Body.String())
+	}
+	var response overlayConfigResponse
+	if err := json.NewDecoder(recorder.Body).Decode(&response); err != nil {
+		t.Fatalf("decode response: %v", err)
+	}
+	return response
+}
+
+func TestGetOverlayConfigDefaults(t *testing.T) {
+	response := readOverlayConfig(t, NewSettingsHandler(nil))
+	if !response.Enabled {
+		t.Fatal("overlays enabled = false, want true")
+	}
+	if response.Defaults != "" {
+		t.Fatalf("defaults = %q, want empty", response.Defaults)
+	}
+}
+
+func TestGetOverlayConfigReflectsAdminDefaults(t *testing.T) {
+	handler := NewSettingsHandler(nil)
+	handler.SetServerSettings(&fakeServerSettingsStore{values: map[string]string{
+		"overlays.enabled":       "false",
+		"defaults.card_overlays": `{"preset":"classic"}`,
+	}})
+
+	response := readOverlayConfig(t, handler)
+	if response.Enabled {
+		t.Fatal("overlays enabled = true, want false")
+	}
+	if response.Defaults != `{"preset":"classic"}` {
+		t.Fatalf("defaults = %q", response.Defaults)
+	}
+}
diff --git a/internal/api/router.go b/internal/api/router.go
index 08cdd965b..f3920e75a 100644
--- a/internal/api/router.go
+++ b/internal/api/router.go
@@ -1197,6 +1197,11 @@ func NewRouter(deps Dependencies) chi.Router {
 		adminHandler.RestartStatus = restartStatus
 		adminHandler.CatalogSearchStatus = catalogSearchService
 		adminHandler.DiagnosticsStore = diagnosticsStore
+		// Same source branding asset uploads and the metadata image cacher use:
+		// the public S3 client only exists when a public bucket is configured,
+		// and both features are wired off it.
+		publicAssetStore := deps.S3Public
+		adminHandler.PublicStorageConfigured = func() bool { return publicAssetStore != nil }
 		if settingsRepo != nil {
 			adminHandler.SettingsRepo = settingsRepo
 		}
@@ -1567,19 +1572,12 @@ func NewRouter(deps Dependencies) chi.Router {
 				client: tmdb.NewClient(apiKey, 40),
 			}
 		}
-		traktClientID := ""
-		if settingsRepo != nil {
-			ctx := deps.AppContext
-			if ctx == nil {
-				ctx = context.Background()
-			}
-			if value, err := settingsRepo.Get(ctx, "watchsync.trakt.client_id"); err == nil {
-				traktClientID = value
-			}
-		}
 		if libraryCollectionService.TraktCollections == nil {
+			// The client ID is resolved per call rather than captured here, so
+			// saving new Trakt credentials applies without a server restart.
 			libraryCollectionService.TraktCollections = &traktCollectionAdapter{
-				client: metatrakt.NewClient(traktClientID, 5),
+				client:   metatrakt.NewClient("", 5),
+				settings: settingsRepo,
 			}
 		}
 		if libraryCollectionService.TraktTokenResolver == nil && deps.DB != nil && settingsRepo != nil {
@@ -3026,6 +3024,7 @@ func NewRouter(deps Dependencies) chi.Router {
 							r.Post("/jellyfin-compat/web/update", adminHandler.HandleUpdateJellyfinCompatWeb)
 							r.Post("/jellyfin-compat/web/remove", adminHandler.HandleRemoveJellyfinCompatWeb)
 							r.Get("/settings/sensitive-status", adminHandler.HandleGetSensitiveStatus)
+							r.Get("/settings/restart-keys", adminHandler.HandleGetRestartKeys)
 							r.Post("/settings/check/{kind}", adminHandler.HandleCheckSettingsConnection)
 							if sectionSettingsHandler != nil {
 								r.Get("/settings/sections", sectionSettingsHandler.HandleGet)
@@ -3742,11 +3741,33 @@ func (a *tmdbDiscoverAdapter) Discover(ctx context.Context, mediaType string, pa
 	return entries, nil
 }
 
+// traktClientIDSettingKey holds the Trakt app client ID. It is deliberately
+// not in config.restartRequiredKeys: the adapter re-reads it before every
+// upstream call, so a saved change converges without a restart.
+const traktClientIDSettingKey = "watchsync.trakt.client_id"
+
 type traktCollectionAdapter struct {
 	client *metatrakt.Client
+	// settings is the live source of the app client ID. Nil only where no
+	// settings store exists (tests), where the client ID stays empty and the
+	// upstream call fails the same way it always did.
+	settings catalog.SettingsStore
+}
+
+// refreshClientID pushes the currently saved app client ID onto the shared
+// client. A read failure leaves the last known value in place: failing the
+// request at Trakt is more useful than failing it here on a transient DB blip.
+func (a *traktCollectionAdapter) refreshClientID(ctx context.Context) {
+	if a.settings == nil {
+		return
+	}
+	if clientID, err := a.settings.Get(ctx, traktClientIDSettingKey); err == nil {
+		a.client.SetClientID(clientID)
+	}
 }
 
 func (a *traktCollectionAdapter) GetCollectionPreset(ctx context.Context, preset, mediaType string, limit int, accessToken string) ([]catalog.TraktCollectionEntry, error) {
+	a.refreshClientID(ctx)
 	results, err := a.client.GetCollectionPreset(ctx, preset, mediaType, limit, accessToken)
 	if err != nil {
 		return nil, err
@@ -3768,6 +3789,7 @@ func (a *traktCollectionAdapter) GetCollectionPreset(ctx context.Context, preset
 }
 
 func (a *traktCollectionAdapter) GetUserList(ctx context.Context, user, list string, limit int, accessToken string) ([]catalog.TraktCollectionEntry, error) {
+	a.refreshClientID(ctx)
 	results, err := a.client.GetUserList(ctx, user, list, limit, accessToken)
 	if err != nil {
 		return nil, err
diff --git a/internal/api/testdata/media_routes.txt b/internal/api/testdata/media_routes.txt
index 39c0431ac..907783a99 100644
--- a/internal/api/testdata/media_routes.txt
+++ b/internal/api/testdata/media_routes.txt
@@ -143,6 +143,7 @@ GET /api/v1/admin/settings	non-media
 PUT /api/v1/admin/settings	non-media
 POST /api/v1/admin/settings/check/{kind}	non-media
 GET /api/v1/admin/settings/effective	non-media
+GET /api/v1/admin/settings/restart-keys	non-media
 GET /api/v1/admin/settings/sections	non-media
 PUT /api/v1/admin/settings/sections	non-media
 GET /api/v1/admin/settings/sensitive-status	non-media
diff --git a/internal/chapterthumbs/service.go b/internal/chapterthumbs/service.go
index 03cb34ea4..ea9ad6425 100644
--- a/internal/chapterthumbs/service.go
+++ b/internal/chapterthumbs/service.go
@@ -37,6 +37,14 @@ const (
 	chapterThumbnailHDRPolicyDisabled      = "disabled"
 	chapterThumbnailHDRPolicyBestEffort    = "best_effort"
 	chapterThumbnailSoftwareToneMapSetting = "playback.chapter_thumbnail_software_tone_map_enabled"
+
+	// Hardware acceleration is read per extraction from these keys, not frozen
+	// at startup, so an admin change applies to the next chapter thumbnail.
+	// playbackHWAccelDefault mirrors the config loader's default for an unset
+	// row (internal/config/admin_settings.go).
+	playbackHWAccelSetting  = "playback.hw_accel"
+	playbackHWDeviceSetting = "playback.hw_device"
+	playbackHWAccelDefault  = "auto"
 )
 
 var chapterThumbnailRetrySchedule = []time.Duration{
@@ -94,16 +102,28 @@ type ChapterThumbnailRequest struct {
 }
 
 type Service struct {
-	fileRepo        FileRepository
-	folderRepo      FolderRepository
-	probeEnsurer    ProbeEnsurer
-	settings        SettingsReader
-	store           ObjectStore
-	notifier        ThumbnailNotifier
-	ffmpegPath      string
-	hwAccel         string
-	hwDevice        string
-	hwResolveOnce   sync.Once
+	fileRepo     FileRepository
+	folderRepo   FolderRepository
+	probeEnsurer ProbeEnsurer
+	settings     SettingsReader
+	store        ObjectStore
+	notifier     ThumbnailNotifier
+	ffmpegPath   string
+	// hwAccel and hwDevice hold the playback.hw_accel / playback.hw_device
+	// values captured when the service was built. They are only the fallback:
+	// resolveHWConfig re-reads both settings per extraction so an admin who
+	// changes hardware acceleration does not have to restart the server for
+	// chapter-thumbnail extraction to follow.
+	hwAccel  string
+	hwDevice string
+
+	// hwMu guards the resolved-accelerator memo below. Resolving "auto" execs
+	// an FFmpeg capability probe and logs the verdict, so the result is cached
+	// against the configured value that produced it and recomputed only when
+	// that value actually changes.
+	hwMu            sync.Mutex
+	hwResolved      bool
+	hwResolvedFrom  string
 	resolvedHWAccel string
 
 	notifyNormal        chan struct{}
@@ -207,7 +227,9 @@ func (s *Service) Start(ctx context.Context) {
 		return
 	}
 
-	resolvedAccel, resolvedDevice := s.resolveHWConfig()
+	// Logged for the boot record only: both values are re-read per extraction,
+	// so a later settings change is honored without a restart.
+	resolvedAccel, resolvedDevice := s.resolveHWConfig(ctx)
 	slog.InfoContext(ctx,
 		"chapter thumbnail service started", "component", "chapterthumbs",
 		"workers",
@@ -650,7 +672,7 @@ func (s *Service) extractFrameLocal(
 	toneMap bool,
 	allowSoftwareToneMap bool,
 ) ([]byte, string, error) {
-	resolvedAccel, resolvedDevice := s.resolveHWConfig()
+	resolvedAccel, resolvedDevice := s.resolveHWConfig(ctx)
 	return ExtractFrame(ctx, FrameExtractOptions{
 		InputPath:            inputPath,
 		SeekSeconds:          seekSeconds,
@@ -663,13 +685,62 @@ func (s *Service) extractFrameLocal(
 	})
 }
 
-func (s *Service) resolveHWConfig() (string, string) {
-	s.hwResolveOnce.Do(func() {
-		s.resolvedHWAccel = playback.ResolveHWAccelWithFFmpeg(s.hwAccel, s.ffmpegPath)
-	})
+// resolveHWConfig returns the accelerator and device this extraction should
+// use. Both come from the live settings repo rather than from a value frozen at
+// startup, which is what lets playback.hw_accel / playback.hw_device take
+// effect without a server restart.
+func (s *Service) resolveHWConfig(ctx context.Context) (string, string) {
+	configuredAccel, configuredDevice := s.configuredHWConfig(ctx)
+
+	s.hwMu.Lock()
+	defer s.hwMu.Unlock()
+	if !s.hwResolved || s.hwResolvedFrom != configuredAccel {
+		s.resolvedHWAccel = playback.ResolveHWAccelWithFFmpeg(configuredAccel, s.ffmpegPath)
+		s.hwResolvedFrom = configuredAccel
+		s.hwResolved = true
+	}
 	// The configured device value passes through raw: ExtractFrame resolves it
 	// (multi-device balancing, empty-value auto-detection) per extraction.
-	return s.resolvedHWAccel, s.hwDevice
+	return s.resolvedHWAccel, configuredDevice
+}
+
+// configuredHWConfig reads playback.hw_accel / playback.hw_device from the
+// settings repo, mirroring how the config loader defaults them. A settings repo
+// that is absent (test doubles) or failing falls back to the values captured at
+// construction, so a database blip keeps the boot configuration instead of
+// silently dropping extraction to software.
+func (s *Service) configuredHWConfig(ctx context.Context) (string, string) {
+	if s == nil {
+		return "", ""
+	}
+	accel := s.hwAccel
+	if value, ok := s.readSetting(ctx, playbackHWAccelSetting); ok {
+		accel = value
+		if accel == "" {
+			accel = playbackHWAccelDefault
+		}
+	}
+	device := s.hwDevice
+	if value, ok := s.readSetting(ctx, playbackHWDeviceSetting); ok {
+		// An empty device is a meaningful value ("auto-detect one"), so unlike
+		// the accelerator it is not replaced by a default.
+		device = value
+	}
+	return accel, device
+}
+
+// readSetting reports the trimmed setting value and whether the settings repo
+// answered at all. The second result is what lets callers tell "configured
+// empty" apart from "could not read".
+func (s *Service) readSetting(ctx context.Context, key string) (string, bool) {
+	if s == nil || s.settings == nil {
+		return "", false
+	}
+	value, err := s.settings.Get(ctx, key)
+	if err != nil {
+		return "", false
+	}
+	return strings.TrimSpace(value), true
 }
 
 func (s *Service) chapterThumbnailExecutionMode(ctx context.Context) string {
diff --git a/internal/chapterthumbs/service_test.go b/internal/chapterthumbs/service_test.go
index c2bceeb4b..062db2f05 100644
--- a/internal/chapterthumbs/service_test.go
+++ b/internal/chapterthumbs/service_test.go
@@ -874,3 +874,64 @@ func TestExtractFrameResolvesMultiDeviceListToOneDevice(t *testing.T) {
 		t.Fatalf("ffmpeg args missing a resolved device:\n%s", joined)
 	}
 }
+
+// failingSettingsReader stands in for a settings repo that cannot answer, so
+// the fallback path can be told apart from a configured-empty value.
+type failingSettingsReader struct{}
+
+func (failingSettingsReader) Get(_ context.Context, _ string) (string, error) {
+	return "", errors.New("settings unavailable")
+}
+
+// TestResolveHWConfigFollowsLiveSettings is the regression guard for the
+// restart-required conversion: hardware acceleration is read from the settings
+// repo per extraction, so an admin changing playback.hw_accel or
+// playback.hw_device does not have to restart the server for chapter
+// thumbnails to follow.
+func TestResolveHWConfigFollowsLiveSettings(t *testing.T) {
+	values := map[string]string{
+		"playback.hw_accel":  "vaapi",
+		"playback.hw_device": "/dev/dri/renderD128",
+	}
+	service := &Service{
+		// Deliberately different from the settings rows: the boot values must
+		// not win over the live configuration.
+		hwAccel:  "none",
+		hwDevice: "/dev/dri/renderD200",
+		settings: testSettingsReader{values: values},
+	}
+
+	accel, device := service.resolveHWConfig(context.Background())
+	if accel != "vaapi" || device != "/dev/dri/renderD128" {
+		t.Fatalf("resolveHWConfig() = (%q, %q), want (vaapi, /dev/dri/renderD128)", accel, device)
+	}
+
+	values["playback.hw_accel"] = "qsv"
+	values["playback.hw_device"] = "/dev/dri/renderD129"
+
+	accel, device = service.resolveHWConfig(context.Background())
+	if accel != "qsv" || device != "/dev/dri/renderD129" {
+		t.Fatalf("resolveHWConfig() after settings change = (%q, %q), want (qsv, /dev/dri/renderD129)", accel, device)
+	}
+
+	// An emptied device row means "auto-detect", not "keep the previous one".
+	values["playback.hw_device"] = ""
+	if _, device = service.resolveHWConfig(context.Background()); device != "" {
+		t.Fatalf("resolveHWConfig() device after clearing = %q, want empty", device)
+	}
+}
+
+// TestResolveHWConfigFallsBackWhenSettingsUnavailable keeps a database blip
+// from silently switching extraction off the configured accelerator.
+func TestResolveHWConfigFallsBackWhenSettingsUnavailable(t *testing.T) {
+	service := &Service{
+		hwAccel:  "vaapi",
+		hwDevice: "/dev/dri/renderD128",
+		settings: failingSettingsReader{},
+	}
+
+	accel, device := service.resolveHWConfig(context.Background())
+	if accel != "vaapi" || device != "/dev/dri/renderD128" {
+		t.Fatalf("resolveHWConfig() = (%q, %q), want the boot values", accel, device)
+	}
+}
diff --git a/internal/config/admin_settings.go b/internal/config/admin_settings.go
index 5798ac0c3..84dc000e9 100644
--- a/internal/config/admin_settings.go
+++ b/internal/config/admin_settings.go
@@ -43,6 +43,10 @@ const ArtworkStorageReconcileCheckpointKey = "s3.public_storage_reconcile_checkp
 // readers that own each setting. The UI must never invent a second set of
 // defaults: an untouched form should describe the behavior the server is
 // actually running.
+// Setting keys and default values are a data table; naming each repeated
+// literal would bury what the table says.
+//
+//nolint:goconst
 var adminSettingDefaults = map[string]string{
 	"auth.access_token_expiry":  "8h",
 	"auth.refresh_token_expiry": "30d",
@@ -53,23 +57,30 @@ var adminSettingDefaults = map[string]string{
 	"clientip.trusted_proxies":  "10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16, 127.0.0.0/8, ::1/128",
 	"theme.catalog_url":         DefaultThemeCatalogURL,
 
-	"database.max_connections": "20",
-	"s3.public_path_style":     "true",
-	"s3.public_url_auth":       "presigned",
-	"s3.public_token_param":    "verify",
-	"s3.public_token_ttl":      "10800",
-	"s3.private_path_style":    "true",
-	"s3.user_db_path_style":    "true",
-	"userdb.backend":           "postgres",
-	"userdb.pool_max_open":     "500",
-	"userdb.idle_timeout":      "12h",
-
-	"scanner.workers":       "8",
-	"matcher.workers":       "8",
-	"matcher.batch_size":    "500",
-	"metadata.cache_images": "false",
-	"markers.mode":          "local",
-	"markers.lazy_playback": "false",
+	"database.max_connections":   "20",
+	"s3.public_path_style":       "true",
+	"s3.public_url_auth":         "presigned",
+	"s3.public_token_param":      "verify",
+	"s3.public_token_ttl":        "10800",
+	"s3.private_path_style":      "true",
+	"s3.metadata_presign_expiry": "4h",
+	"s3.user_db_path_style":      "true",
+	"userdb.backend":             "postgres",
+	"userdb.pool_max_open":       "500",
+	"userdb.idle_timeout":        "12h",
+
+	"scanner.workers":                      "8",
+	"scanner.max_concurrent_libraries":     "1",
+	"scanner.max_concurrent_scoped":        "2",
+	"scanner.file_removal_grace":           "24h",
+	"scanner.empty_trash_after_scan":       "true",
+	"matcher.workers":                      "8",
+	"matcher.batch_size":                   "500",
+	"matcher.enable_tv_series_root_queue":  "true",
+	"matcher.enable_tv_series_group_queue": "false",
+	"metadata.cache_images":                "false",
+	"markers.mode":                         "local",
+	"markers.lazy_playback":                "false",
 
 	"playback.ffmpeg_path":                     "",
 	playbackTranscodeDirSettingKey:             DefaultTranscodeDir,
@@ -101,6 +112,8 @@ var adminSettingDefaults = map[string]string{
 	"jellyfin_compat.playback_session_ttl":    "6h",
 
 	"recommendations.enabled":                    "false",
+	"recommendations.embedding_provider":         "ollama",
+	"recommendations.embeddings_job_timeout":     "24h",
 	"recommendations.embedding_base_url":         "http://ollama:11434",
 	"recommendations.embedding_model":            "all-minilm",
 	"recommendations.embeddings_cron":            "0 3 * * *",
@@ -119,6 +132,7 @@ var adminSettingDefaults = map[string]string{
 	"subtitle_ai.batch_size":              "40",
 	"subtitle_ai.context_neighbors":       "2",
 	"subtitle_ai.asr_chunk_seconds":       "600",
+	"subtitle_ai.live_asr_chunk_seconds":  "30",
 	"subtitle_ai.transcribe_quota_jobs":   "0",
 	"subtitle_ai.transcribe_quota_period": "day",
 	"metadata_ai.enabled":                 "false",
@@ -134,6 +148,8 @@ var adminSettingDefaults = map[string]string{
 	"download.max_concurrent_prepares": "2",
 	"download.artifact_max_bytes":      "0",
 
+	"policy.editor_enabled":                 "false",
+	"policy.eval_timeout_ms":                "25",
 	"policy.decision_log_verbosity":         "digest",
 	"policy.decision_log_scope_sample_rate": "50",
 	"policy.decision_log_retention_days":    "14",
@@ -173,6 +189,7 @@ var adminSettingDefaults = map[string]string{
 	"taskmanager.history_retention_days": "30",
 	"taskmanager.history_keep_per_task":  "1000",
 
+	"opslog.capture_level":            "info",
 	"opslog.retention_days":           "7",
 	"opslog.cleanup_interval_minutes": "15",
 	"opslog.max_rows":                 "1000000",
@@ -302,6 +319,8 @@ func NormalizeAdminSetting(key, raw string) (string, error) {
 		"jellyfin_compat.enabled", "jellyfin_compat.web_enabled", "recommendations.enabled",
 		"subtitle_ai.enabled", "subtitle_ai.transcribe_enabled", "metadata_ai.enabled",
 		"download.enabled", "download.transcode_enabled", "email.enabled", "signup.enabled",
+		"scanner.empty_trash_after_scan", "matcher.enable_tv_series_root_queue",
+		"matcher.enable_tv_series_group_queue", "policy.editor_enabled",
 		"overlays.enabled", "notifications.release_events_enabled", "notifications.fanout_enabled",
 		"notifications.ui_enabled", "notifications.webhooks_enabled",
 		"notifications.webhooks.allow_private_destinations", "notifications.email_enabled",
@@ -317,7 +336,8 @@ func NormalizeAdminSetting(key, raw string) (string, error) {
 		return normalizeAdminInt(key, value, 1, 10000)
 	case "userdb.pool_max_open":
 		return normalizeAdminInt(key, value, 1, 100000)
-	case "scanner.workers", "matcher.workers":
+	case "scanner.workers", "matcher.workers",
+		"scanner.max_concurrent_libraries", "scanner.max_concurrent_scoped":
 		return normalizeAdminInt(key, value, 1, 1024)
 	case "matcher.batch_size":
 		return normalizeAdminInt(key, value, 1, 100000)
@@ -337,6 +357,10 @@ func NormalizeAdminSetting(key, raw string) (string, error) {
 		return normalizeAdminInt(key, value, 0, 100)
 	case "subtitle_ai.asr_chunk_seconds":
 		return normalizeAdminInt(key, value, 60, 600)
+	case "subtitle_ai.live_asr_chunk_seconds":
+		// 15s is the transcriber's hard floor (clampASRChunkSeconds); accepting
+		// less would store a value the runtime silently raises.
+		return normalizeAdminInt(key, value, 15, 600)
 	case "subtitle_ai.transcribe_quota_jobs":
 		return normalizeAdminInt(key, value, 0, math.MaxInt32)
 	case "download.server_bandwidth_mbps", "download.user_bandwidth_mbps":
@@ -346,6 +370,8 @@ func NormalizeAdminSetting(key, raw string) (string, error) {
 		return normalizeAdminInt64(key, value, 0, math.MaxInt64)
 	case "policy.decision_log_scope_sample_rate", "policy.decision_log_retention_days":
 		return normalizeAdminInt(key, value, 1, math.MaxInt32)
+	case "policy.eval_timeout_ms":
+		return normalizeAdminInt(key, value, 1, 60000)
 	case "email.smtp_port":
 		return normalizeAdminInt(key, value, 1, 65535)
 	case "notifications.fanout.settle_seconds":
@@ -391,11 +417,24 @@ func NormalizeAdminSetting(key, raw string) (string, error) {
 
 	case "auth.access_token_expiry", "auth.refresh_token_expiry", "userdb.idle_timeout",
 		"download.period_duration", "jellyfin_compat.session_ttl",
-		"jellyfin_compat.playback_session_ttl":
+		"jellyfin_compat.playback_session_ttl", "s3.metadata_presign_expiry",
+		"recommendations.embeddings_job_timeout":
 		return normalizeAdminDuration(key, value)
+	case "scanner.file_removal_grace":
+		// The scanner deliberately tolerates a zero or negative grace as
+		// "remove missing files immediately" (LoadFromDB warns and clamps to
+		// zero), so only require a parseable duration here.
+		if _, err := parseDuration(value); err != nil {
+			return "", fmt.Errorf("%s must be a duration", key)
+		}
+		return value, nil
 
 	case "server.log_level":
 		return normalizeAdminEnum(key, value, "debug", "info", "warn", "error")
+	case "opslog.capture_level":
+		// "warning" is accepted because the startup reader in cmd/silo treats
+		// it as an alias for "warn".
+		return normalizeAdminEnum(key, value, "debug", "info", "warn", "warning", "error")
 	case "userdb.backend":
 		return normalizeAdminEnum(key, value, "postgres", "sqlite")
 	case "playback.hw_accel":
diff --git a/internal/config/admin_settings_test.go b/internal/config/admin_settings_test.go
index 65d01124d..ba184da4c 100644
--- a/internal/config/admin_settings_test.go
+++ b/internal/config/admin_settings_test.go
@@ -241,6 +241,18 @@ func TestNormalizeAdminSettingRejectsInvalidValues(t *testing.T) {
 		{key: "theme.catalog_url", value: "http://raw.githubusercontent.com/Prairie-Server/silo-themes/main/catalog.json"},
 		{key: "theme.catalog_url", value: "https://example.com/catalog.json"},
 		{key: "redis.url", value: "not-a-url"},
+		{key: "scanner.max_concurrent_libraries", value: "0"},
+		{key: "scanner.max_concurrent_scoped", value: "-1"},
+		{key: "scanner.empty_trash_after_scan", value: "sometimes"},
+		{key: "scanner.file_removal_grace", value: "a while"},
+		{key: "matcher.enable_tv_series_root_queue", value: "yes please"},
+		{key: "matcher.enable_tv_series_group_queue", value: "yes please"},
+		{key: "policy.editor_enabled", value: "maybe"},
+		{key: "policy.eval_timeout_ms", value: "0"},
+		{key: "subtitle_ai.live_asr_chunk_seconds", value: "0"},
+		{key: "opslog.capture_level", value: "chatty"},
+		{key: "s3.metadata_presign_expiry", value: "0s"},
+		{key: "recommendations.embeddings_job_timeout", value: "soon"},
 	}
 	for _, tc := range tests {
 		t.Run(tc.key, func(t *testing.T) {
@@ -324,3 +336,59 @@ func TestNormalizeAdminSettingCanonicalizesRedisURL(t *testing.T) {
 		t.Fatalf("normalized Redis URL = %q", got)
 	}
 }
+
+// TestNormalizeAdminSettingKeepsPermissiveScannerGrace locks the loader's
+// documented behavior: a zero or negative grace means "remove missing files
+// immediately", so the admin API must not reject it.
+func TestNormalizeAdminSettingKeepsPermissiveScannerGrace(t *testing.T) {
+	for _, value := range []string{"0s", "-1h", "72h"} {
+		got, err := NormalizeAdminSetting("scanner.file_removal_grace", "  "+value+"  ")
+		if err != nil {
+			t.Fatalf("NormalizeAdminSetting(scanner.file_removal_grace, %q): %v", value, err)
+		}
+		if got != value {
+			t.Fatalf("normalized grace = %q, want %q", got, value)
+		}
+	}
+}
+
+// TestOpslogCaptureLevelAcceptsWarningAlias mirrors the startup reader in
+// cmd/silo, which treats "warning" as "warn".
+func TestOpslogCaptureLevelAcceptsWarningAlias(t *testing.T) {
+	got, err := NormalizeAdminSetting("opslog.capture_level", "WARNING")
+	if err != nil {
+		t.Fatal(err)
+	}
+	if got != "warning" {
+		t.Fatalf("normalized capture level = %q, want warning", got)
+	}
+}
+
+// TestHiddenTierDefaultsAreExposed guards the keys that have no admin UI: the
+// API must still report the value the server is actually running.
+func TestHiddenTierDefaultsAreExposed(t *testing.T) {
+	effective := EffectiveAdminSettings(nil)
+	want := map[string]string{
+		"recommendations.embedding_provider":     "ollama",
+		"recommendations.embeddings_job_timeout": "24h",
+		"policy.editor_enabled":                  "false",
+		"policy.eval_timeout_ms":                 "25",
+		"subtitle_ai.live_asr_chunk_seconds":     "30",
+		"scanner.max_concurrent_libraries":       "1",
+		"scanner.max_concurrent_scoped":          "2",
+		"scanner.file_removal_grace":             "24h",
+		"scanner.empty_trash_after_scan":         "true",
+		"matcher.enable_tv_series_root_queue":    "true",
+		"matcher.enable_tv_series_group_queue":   "false",
+		"opslog.capture_level":                   "info",
+		"s3.metadata_presign_expiry":             "4h",
+	}
+	for key, value := range want {
+		if got := effective[key]; got != value {
+			t.Errorf("effective[%q] = %q, want %q", key, got, value)
+		}
+		if _, err := NormalizeAdminSetting(key, value); err != nil {
+			t.Errorf("default for %q is rejected by NormalizeAdminSetting: %v", key, err)
+		}
+	}
+}
diff --git a/internal/config/artifact_dir_test.go b/internal/config/artifact_dir_test.go
new file mode 100644
index 000000000..746465df5
--- /dev/null
+++ b/internal/config/artifact_dir_test.go
@@ -0,0 +1,31 @@
+package config
+
+import "testing"
+
+func TestEffectiveDownloadArtifactDir(t *testing.T) {
+	cases := []struct {
+		name         string
+		artifactDir  string
+		transcodeDir string
+		want         string
+	}{
+		{"explicit artifact dir wins", "/mnt/downloads", "/mnt/fast/transcode", "/mnt/downloads"},
+		{"both blank uses the default transcode dir", "", "", "/tmp/silo-download-artifacts"},
+		{"sibling of a custom transcode dir", "", "/mnt/fast/transcode", "/mnt/fast/silo-download-artifacts"},
+		// A trailing slash must not nest the artifact root inside the
+		// transcode dir: the orphaned-transcode sweep deletes non-active
+		// subdirectories of the transcode root, so nesting is data loss.
+		{"trailing slash still yields the sibling", "", "/mnt/fast/transcode/", "/mnt/fast/silo-download-artifacts"},
+		{"root transcode dir", "", "/", "/silo-download-artifacts"},
+		{"repeated separators are cleaned", "", "/mnt//fast/transcode", "/mnt/fast/silo-download-artifacts"},
+	}
+
+	for _, tc := range cases {
+		t.Run(tc.name, func(t *testing.T) {
+			if got := EffectiveDownloadArtifactDir(tc.artifactDir, tc.transcodeDir); got != tc.want {
+				t.Fatalf("EffectiveDownloadArtifactDir(%q, %q) = %q, want %q",
+					tc.artifactDir, tc.transcodeDir, got, tc.want)
+			}
+		})
+	}
+}
diff --git a/internal/config/config.go b/internal/config/config.go
index 15028e387..779248963 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -495,7 +495,11 @@ func EffectiveDownloadArtifactDir(artifactDir, transcodeDir string) string {
 	if transcodeDir == "" {
 		transcodeDir = DefaultTranscodeDir
 	}
-	return filepath.Join(filepath.Dir(transcodeDir), "silo-download-artifacts")
+	// Clean first: with a trailing slash, filepath.Dir("/srv/transcode/") is
+	// "/srv/transcode", which would nest the artifact root INSIDE the transcode
+	// dir — where the orphaned-transcode sweep deletes non-active
+	// subdirectories, i.e. it would delete prepared downloads.
+	return filepath.Join(filepath.Dir(filepath.Clean(transcodeDir)), "silo-download-artifacts")
 }
 
 const DefaultJellyfinCompatEmulatedServerVersion = "10.12.0"
diff --git a/internal/config/restart_keys.go b/internal/config/restart_keys.go
index d519d9fdc..17eb3e96c 100644
--- a/internal/config/restart_keys.go
+++ b/internal/config/restart_keys.go
@@ -1,6 +1,9 @@
 package config
 
-import "strings"
+import (
+	"sort"
+	"strings"
+)
 
 // restartRequiredKeys lists server_settings keys whose values are captured at
 // process startup (listeners, connection pools, HTTP clients, worker pools)
@@ -30,12 +33,21 @@ var restartRequiredKeys = map[string]bool{
 	"ratelimit.enabled": true,
 	"ratelimit.backend": true,
 
-	// Playback transcode infrastructure. The playback/stream handlers read
-	// ffmpeg path and hwaccel live (new transcode sessions), but several
-	// startup-built consumers still freeze them (scanner ffprobe, chapter
-	// thumbnails, audiobook enricher) — keep restart-required until those
-	// convert. transcode_dir is also captured by dedicated transcode nodes for
-	// session and prepared-download storage. A configured download.artifact_dir is
+	// Playback transcode infrastructure. The native playback/stream handlers,
+	// the transcode nodes, and the download artifact managers read ffmpeg path
+	// and hwaccel live (new transcode sessions), and chapter-thumbnail
+	// extraction and the playback probe ensurer now do too.
+	//
+	// What still freezes them is the jellycompat playback handler: it captures
+	// FFmpegPath/HWAccel and the boot *config.Config (for hw_device) when the
+	// compat router is built, so a Jellyfin-client transcode keeps the boot
+	// values until restart. ffmpeg_path has three more startup-frozen consumers
+	// in cmd/silo/main.go — the intro-marker analyzer, the scanner's own ffprobe
+	// path, and the audiobook enricher. Keep these restart-required until those
+	// convert; converting them is what lets the badge go away.
+	//
+	// transcode_dir is also captured by dedicated transcode nodes for session
+	// and prepared-download storage. A configured download.artifact_dir is
 	// likewise captured by both API and transcode-node artifact managers. The
 	// chapter-thumbnail worker pool is sized at construction.
 	"playback.ffmpeg_path":               true,
@@ -55,12 +67,11 @@ var restartRequiredKeys = map[string]bool{
 	"matcher.enable_tv_series_root_queue":  true,
 	"matcher.enable_tv_series_group_queue": true,
 
-	// External API clients built once at startup.
+	// External API clients built once at startup. watchsync.trakt.client_id is
+	// deliberately absent: the collection adapter re-reads it from the settings
+	// repo before each upstream call (atomic setter on the shared client), and
+	// the watch-sync OAuth flows always read both credentials live.
 	"tmdb.api_key": true,
-	// The Trakt collection browser captures its public client ID when the
-	// router is built. Watch-sync flows read both credentials live, but a
-	// restart is still required for the collection adapter to converge.
-	"watchsync.trakt.client_id": true,
 
 	// Compat listeners and session stores.
 	"audiobookshelf_compat.enabled": true,
@@ -119,3 +130,28 @@ func RestartRequired(key string) bool {
 	}
 	return false
 }
+
+// RestartRequiredKeys returns the sorted list of exact server_settings keys
+// that require a restart. The admin UI reads this over
+// GET /admin/settings/restart-keys to render its restart badges, so it must
+// stay a copy: callers must not be able to mutate the registry.
+func RestartRequiredKeys() []string {
+	keys := make([]string, 0, len(restartRequiredKeys))
+	for key, required := range restartRequiredKeys {
+		if required {
+			keys = append(keys, key)
+		}
+	}
+	sort.Strings(keys)
+	return keys
+}
+
+// RestartRequiredPrefixes returns the sorted list of key prefixes whose whole
+// namespace requires a restart. Pair it with RestartRequiredKeys: a key needs a
+// restart when it is listed exactly or carries one of these prefixes.
+func RestartRequiredPrefixes() []string {
+	prefixes := make([]string, len(restartRequiredPrefixes))
+	copy(prefixes, restartRequiredPrefixes)
+	sort.Strings(prefixes)
+	return prefixes
+}
diff --git a/internal/config/restart_keys_test.go b/internal/config/restart_keys_test.go
index a81b773ad..4924bca4f 100644
--- a/internal/config/restart_keys_test.go
+++ b/internal/config/restart_keys_test.go
@@ -58,3 +58,36 @@ func TestRestartRequired(t *testing.T) {
 		}
 	}
 }
+
+// The exported accessors feed the admin API, so they must agree with
+// RestartRequired, stay sorted, and hand out copies rather than the registry.
+func TestRestartRequiredAccessors(t *testing.T) {
+	keys := RestartRequiredKeys()
+	if len(keys) != len(restartRequiredKeys) {
+		t.Fatalf("RestartRequiredKeys() returned %d keys, want %d", len(keys), len(restartRequiredKeys))
+	}
+	for i, key := range keys {
+		if i > 0 && keys[i-1] >= key {
+			t.Fatalf("RestartRequiredKeys() is not sorted at %d: %v", i, keys)
+		}
+		if !RestartRequired(key) {
+			t.Errorf("RestartRequiredKeys() reported %q, which RestartRequired rejects", key)
+		}
+	}
+
+	prefixes := RestartRequiredPrefixes()
+	if len(prefixes) != len(restartRequiredPrefixes) {
+		t.Fatalf("RestartRequiredPrefixes() returned %d prefixes, want %d", len(prefixes), len(restartRequiredPrefixes))
+	}
+	for _, prefix := range prefixes {
+		if !RestartRequired(prefix + "anything") {
+			t.Errorf("RestartRequiredPrefixes() reported %q, which RestartRequired rejects", prefix)
+		}
+	}
+
+	// Mutating a returned slice must not corrupt the registry.
+	prefixes[0] = "mutated."
+	if RestartRequiredPrefixes()[0] == "mutated." {
+		t.Error("RestartRequiredPrefixes() exposes the package-level slice")
+	}
+}
diff --git a/internal/jellycompat/playback_scrobble_test.go b/internal/jellycompat/playback_scrobble_test.go
index 4816abd55..71eca17ca 100644
--- a/internal/jellycompat/playback_scrobble_test.go
+++ b/internal/jellycompat/playback_scrobble_test.go
@@ -32,6 +32,11 @@ type channelCompatWatchScrobbler struct {
 	failStops  int
 }
 
+type terminalReleaseObservingStore struct {
+	CompatPlaybackStore
+	releases chan struct{}
+}
+
 type failingCompatWatchScrobbler struct {
 	stopCalls atomic.Int32
 }
@@ -199,6 +204,17 @@ func (s *channelCompatWatchScrobbler) ScrobbleStopConfirmed(ctx context.Context,
 	return s.ScrobbleStop(ctx, event)
 }
 
+func (s *terminalReleaseObservingStore) ReleaseTerminalClaim(
+	id string,
+	compatToken string,
+	claimUntil time.Time,
+	claimVersion int64,
+	fallbackSent bool,
+) {
+	s.CompatPlaybackStore.ReleaseTerminalClaim(id, compatToken, claimUntil, claimVersion, fallbackSent)
+	s.releases <- struct{}{}
+}
+
 func (s *recordingCompatWatchScrobbler) ScrobbleStart(_ context.Context, event watchsync.ScrobbleEvent) error {
 	s.calls = append(s.calls, compatScrobbleCall{action: "start", event: event})
 	return nil
@@ -601,6 +617,11 @@ func TestActiveEncodingsFallbackAllowsLaterAuthoritativeStop(t *testing.T) {
 		},
 	}}
 	h, store := newActiveEncodingsHandler(mgr)
+	releases := make(chan struct{}, 2)
+	h.playbackStore = &terminalReleaseObservingStore{
+		CompatPlaybackStore: store,
+		releases:            releases,
+	}
 	scrobbler := &channelCompatWatchScrobbler{stopEvents: make(chan watchsync.ScrobbleEvent, 2)}
 	h.WatchScrobbler = scrobbler
 	h.terminalFallbackDelay = 10 * time.Millisecond
@@ -631,6 +652,11 @@ func TestActiveEncodingsFallbackAllowsLaterAuthoritativeStop(t *testing.T) {
 	case <-time.After(time.Second):
 		t.Fatal("timed out waiting for ActiveEncodings terminal fallback")
 	}
+	select {
+	case <-releases:
+	case <-time.After(time.Second):
+		t.Fatal("timed out waiting for fallback delivery lease release")
+	}
 	terminal, ok := store.GetFinalizable("play-1", "token-1")
 	if !ok || !terminal.TerminalFallbackSent || terminal.TerminalAuthoritative {
 		t.Fatalf("fallback terminal state = ok=%v session=%+v", ok, terminal)
diff --git a/internal/metadata/trakt/client.go b/internal/metadata/trakt/client.go
index 242e242bb..d5a5c5c4e 100644
--- a/internal/metadata/trakt/client.go
+++ b/internal/metadata/trakt/client.go
@@ -10,6 +10,7 @@ import (
 	"net/url"
 	"strconv"
 	"strings"
+	"sync/atomic"
 	"time"
 
 	"golang.org/x/time/rate"
@@ -28,22 +29,44 @@ const (
 // Client is an HTTP client for Trakt collection/discovery feeds.
 type Client struct {
 	httpClient *http.Client
-	clientID   string
-	baseURL    string
-	limiter    *rate.Limiter
+	// clientID is swapped atomically so a saved credential change reaches a
+	// long-lived client without rebuilding it — and therefore without a
+	// server restart. See SetClientID.
+	clientID atomic.Pointer[string]
+	baseURL  string
+	limiter  *rate.Limiter
 }
 
-// NewClient creates a Trakt client. clientID is required by Trakt for API calls.
+// NewClient creates a Trakt client. clientID is required by Trakt for API
+// calls, but may be empty here when the caller keeps it current through
+// SetClientID.
 func NewClient(clientID string, rateLimit int) *Client {
 	if rateLimit <= 0 {
 		rateLimit = defaultCollectionRateLimit
 	}
-	return &Client{
+	c := &Client{
 		httpClient: &http.Client{Timeout: 20 * time.Second},
-		clientID:   strings.TrimSpace(clientID),
 		baseURL:    defaultBaseURL,
 		limiter:    rate.NewLimiter(rate.Limit(rateLimit), rateLimit),
 	}
+	c.SetClientID(clientID)
+	return c
+}
+
+// SetClientID replaces the app client ID sent on subsequent requests. Safe to
+// call while requests are in flight, which is what lets a new
+// watchsync.trakt.client_id apply without restarting the server.
+func (c *Client) SetClientID(clientID string) {
+	trimmed := strings.TrimSpace(clientID)
+	c.clientID.Store(&trimmed)
+}
+
+// ClientID returns the app client ID currently in use.
+func (c *Client) ClientID() string {
+	if current := c.clientID.Load(); current != nil {
+		return *current
+	}
+	return ""
 }
 
 // SetBaseURL overrides the API base URL. Used by tests.
@@ -223,7 +246,10 @@ func (c *Client) getMediaList(ctx context.Context, path, mediaType, accessToken
 }
 
 func (c *Client) doGet(ctx context.Context, path string, accessToken string, dest any) error {
-	if strings.TrimSpace(c.clientID) == "" {
+	// Read once so every retry of this request uses one client ID even if a
+	// credential change lands mid-flight.
+	clientID := c.ClientID()
+	if clientID == "" {
 		return errors.New("trakt: client id is required")
 	}
 	if err := c.limiter.Wait(ctx); err != nil {
@@ -239,7 +265,7 @@ func (c *Client) doGet(ctx context.Context, path string, accessToken string, des
 		req.Header.Set("Content-Type", "application/json")
 		req.Header.Set("Accept", "application/json")
 		req.Header.Set("trakt-api-version", traktAPIVersion)
-		req.Header.Set("trakt-api-key", c.clientID)
+		req.Header.Set("trakt-api-key", clientID)
 		if strings.TrimSpace(accessToken) != "" {
 			req.Header.Set("Authorization", "Bearer "+strings.TrimSpace(accessToken))
 		}
diff --git a/internal/metadata/trakt/client_test.go b/internal/metadata/trakt/client_test.go
index b055bcbca..fc3198358 100644
--- a/internal/metadata/trakt/client_test.go
+++ b/internal/metadata/trakt/client_test.go
@@ -118,6 +118,35 @@ func TestGetCollectionPresetRetriesRateLimit(t *testing.T) {
 	}
 }
 
+// A saved credential change has to reach a client that was built at startup;
+// this is what lets watchsync.trakt.client_id stay out of the restart registry.
+func TestSetClientIDAppliesToLaterRequests(t *testing.T) {
+	var gotAPIKey string
+	server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		gotAPIKey = r.Header.Get("trakt-api-key")
+		writeJSON(t, w, []map[string]any{})
+	}))
+	defer server.Close()
+
+	client := NewClient("", 1000)
+	client.SetBaseURL(server.URL)
+
+	if _, err := client.GetCollectionPreset(context.Background(), "popular", "movie", 1, ""); err == nil {
+		t.Fatal("expected an error while no client id is configured")
+	}
+
+	client.SetClientID("  rotated-client-id  ")
+	if got := client.ClientID(); got != "rotated-client-id" {
+		t.Fatalf("ClientID() = %q, want trimmed rotated-client-id", got)
+	}
+	if _, err := client.GetCollectionPreset(context.Background(), "popular", "movie", 1, ""); err != nil {
+		t.Fatalf("GetCollectionPreset after SetClientID: %v", err)
+	}
+	if gotAPIKey != "rotated-client-id" {
+		t.Fatalf("trakt-api-key = %q, want rotated-client-id", gotAPIKey)
+	}
+}
+
 func writeJSON(t *testing.T, w http.ResponseWriter, v any) {
 	t.Helper()
 	w.Header().Set("Content-Type", "application/json")
diff --git a/internal/scanner/probe_repair.go b/internal/scanner/probe_repair.go
index d2e9ec15b..ec727d8c3 100644
--- a/internal/scanner/probe_repair.go
+++ b/internal/scanner/probe_repair.go
@@ -7,6 +7,7 @@ import (
 	"strconv"
 	"strings"
 	"sync"
+	"sync/atomic"
 	"time"
 
 	"golang.org/x/sync/singleflight"
@@ -130,9 +131,14 @@ type playbackProbeFileRepository interface {
 // PlaybackProbeEnsurer repairs missing playback-critical probe metadata on
 // demand by running a local ffprobe and persisting the result.
 type PlaybackProbeEnsurer struct {
-	fileRepo    playbackProbeFileRepository
+	fileRepo playbackProbeFileRepository
+	// ffprobePath and ffmpegPath are the binaries captured when the ensurer was
+	// built. They are the fallback only: livePaths, once SetFFmpegPath has been
+	// called, supersedes them so a changed playback.ffmpeg_path reaches probe
+	// repair and the copy-safety scan without a server restart.
 	ffprobePath string
 	ffmpegPath  string
+	livePaths   atomic.Pointer[probeBinaries]
 	timeout     time.Duration
 	// probeFile is the ffprobe entry point; nil means the package's ProbeFile.
 	// Tests substitute it to drive the coalescing behavior deterministically.
@@ -195,6 +201,42 @@ func NewPlaybackProbeEnsurer(fileRepo *FileRepository, ffprobePath, ffmpegPath s
 	return e
 }
 
+// probeBinaries is the pair of executables a probe run needs. They move
+// together because both are derived from the single playback.ffmpeg_path
+// setting.
+type probeBinaries struct {
+	ffprobePath string
+	ffmpegPath  string
+}
+
+// SetFFmpegPath points probe repair and the copy-safety scan at a different
+// FFmpeg install. Wiring it to the config watcher is what lets a changed
+// playback.ffmpeg_path take effect without restarting the server. An in-flight
+// probe keeps the binary it started with; the next one picks up the new path.
+func (e *PlaybackProbeEnsurer) SetFFmpegPath(ffmpegPath string) {
+	if e == nil {
+		return
+	}
+	ffmpegPath = strings.TrimSpace(ffmpegPath)
+	e.livePaths.Store(&probeBinaries{
+		ffprobePath: FFprobePathFromFFmpeg(ffmpegPath),
+		ffmpegPath:  ffmpegPath,
+	})
+}
+
+// binaries returns the executables this probe run should use: the live
+// configuration when one has been installed, otherwise the pair captured at
+// construction.
+func (e *PlaybackProbeEnsurer) binaries() probeBinaries {
+	if e == nil {
+		return probeBinaries{}
+	}
+	if live := e.livePaths.Load(); live != nil {
+		return *live
+	}
+	return probeBinaries{ffprobePath: e.ffprobePath, ffmpegPath: e.ffmpegPath}
+}
+
 // Ensure repairs playback-critical probe metadata and resolves the H.264
 // copy-safety verdict. Use it where a play is being prepared — the planner
 // consumes the verdict to decide whether a video stream-copy is safe.
@@ -250,7 +292,7 @@ func (e *PlaybackProbeEnsurer) EnsureCopySafetyCached(ctx context.Context, file
 // real work for this file: an H.264 video whose verdict is neither cached nor
 // persisted, on a server that has an ffmpeg to scan with.
 func (e *PlaybackProbeEnsurer) NeedsCopySafetyScan(file *models.MediaFile) bool {
-	if e == nil || strings.TrimSpace(e.ffmpegPath) == "" || !needsCopySafetyProbe(file) {
+	if e == nil || strings.TrimSpace(e.binaries().ffmpegPath) == "" || !needsCopySafetyProbe(file) {
 		return false
 	}
 	_, known := e.knownCopySafetyVerdict(file)
@@ -270,10 +312,11 @@ func (e *PlaybackProbeEnsurer) ScanCopySafety(ctx context.Context, file *models.
 	if e == nil || file == nil {
 		return false, false, nil
 	}
-	if strings.TrimSpace(e.ffmpegPath) == "" {
+	ffmpegPath := strings.TrimSpace(e.binaries().ffmpegPath)
+	if ffmpegPath == "" {
 		return false, false, errCopySafetyScanUnavailable
 	}
-	return e.scanAndPersistCopySafety(ctx, file)
+	return e.scanAndPersistCopySafety(ctx, file, ffmpegPath)
 }
 
 // KnownCopySafetyVerdict answers the copy-safety question for a file without
@@ -326,8 +369,11 @@ func (e *PlaybackProbeEnsurer) ensureProbeRepair(ctx context.Context, file *mode
 	}
 
 	current := file
-	if NeedsCriticalProbeRepair(file) && strings.TrimSpace(e.ffprobePath) != "" {
-		repaired, err := e.ensureCriticalProbe(ctx, file)
+	// One snapshot per repair: the guard and the ffprobe run must see the same
+	// binaries, or a SetFFmpegPath between them hands probeFile an empty path.
+	ffprobePath := strings.TrimSpace(e.binaries().ffprobePath)
+	if NeedsCriticalProbeRepair(file) && ffprobePath != "" {
+		repaired, err := e.ensureCriticalProbe(ctx, file, ffprobePath)
 		if err != nil {
 			return file, err
 		}
@@ -349,7 +395,7 @@ func (e *PlaybackProbeEnsurer) ensureProbeRepair(ctx context.Context, file *mode
 // cancellation while waiting. Inside the flight the row is re-read first, so a
 // caller holding a stale snapshot of an already-repaired file spawns no ffprobe
 // at all.
-func (e *PlaybackProbeEnsurer) ensureCriticalProbe(ctx context.Context, file *models.MediaFile) (*models.MediaFile, error) {
+func (e *PlaybackProbeEnsurer) ensureCriticalProbe(ctx context.Context, file *models.MediaFile, ffprobePath string) (*models.MediaFile, error) {
 	sharedCtx := context.WithoutCancel(ctx)
 	revisionKey := tonemap.RevisionForFile(file).Fingerprint()
 	resultCh := e.probeRepair.DoChan(revisionKey, func() (any, error) {
@@ -387,7 +433,7 @@ func (e *PlaybackProbeEnsurer) ensureCriticalProbe(ctx context.Context, file *mo
 		if probeFile == nil {
 			probeFile = ProbeFile
 		}
-		probe, err := probeFile(probeCtx, e.ffprobePath, current.FilePath)
+		probe, err := probeFile(probeCtx, ffprobePath, current.FilePath)
 		if err != nil || probe == nil {
 			return nil, err
 		}
@@ -416,7 +462,8 @@ func (e *PlaybackProbeEnsurer) ensureCriticalProbe(ctx context.Context, file *mo
 // media_files row, and only then runs the bitstream scan — so a restart no
 // longer re-reads the opening seconds of every browsed H.264 file.
 func (e *PlaybackProbeEnsurer) ensureCopySafety(ctx context.Context, file *models.MediaFile) (*models.MediaFile, error) {
-	if !needsCopySafetyProbe(file) || strings.TrimSpace(e.ffmpegPath) == "" {
+	ffmpegPath := strings.TrimSpace(e.binaries().ffmpegPath)
+	if !needsCopySafetyProbe(file) || ffmpegPath == "" {
 		return file, nil
 	}
 
@@ -425,7 +472,7 @@ func (e *PlaybackProbeEnsurer) ensureCopySafety(ctx context.Context, file *model
 		return fileWithMultiplePPS(file, multi), nil
 	}
 
-	multi, stale, err := e.scanAndPersistCopySafety(ctx, file)
+	multi, stale, err := e.scanAndPersistCopySafety(ctx, file, ffmpegPath)
 	if err != nil {
 		// Unknown safety must not fail open to the video-copy path this probe is
 		// intended to guard. Leave MultiplePPS unset and do not cache or persist
@@ -490,7 +537,7 @@ func copySafetyFlightKey(file *models.MediaFile) string {
 // A write refused as stale is neither memoized nor reported as a verdict: the
 // row has moved to a generation this scan never read, and both the memo and any
 // downstream notification would be facts about bytes nobody is serving.
-func (e *PlaybackProbeEnsurer) scanAndPersistCopySafety(ctx context.Context, file *models.MediaFile) (bool, bool, error) {
+func (e *PlaybackProbeEnsurer) scanAndPersistCopySafety(ctx context.Context, file *models.MediaFile, ffmpegPath string) (bool, bool, error) {
 	fileID := file.ID
 	filePath := file.FilePath
 	fileSize := file.FileSize
@@ -502,7 +549,7 @@ func (e *PlaybackProbeEnsurer) scanAndPersistCopySafety(ctx context.Context, fil
 			timeout = 30 * time.Second
 		}
 		scanCtx, cancel := context.WithTimeout(ctx, timeout)
-		multi, err := DetectMultiplePPSH264(scanCtx, e.ffmpegPath, filePath)
+		multi, err := DetectMultiplePPSH264(scanCtx, ffmpegPath, filePath)
 		cancel()
 		if err != nil {
 			return copySafetyOutcome{}, err
diff --git a/internal/scanner/probe_repair_copy_safety_cached_test.go b/internal/scanner/probe_repair_copy_safety_cached_test.go
index 5a90d9a2c..e1e568a2d 100644
--- a/internal/scanner/probe_repair_copy_safety_cached_test.go
+++ b/internal/scanner/probe_repair_copy_safety_cached_test.go
@@ -2,6 +2,7 @@ package scanner
 
 import (
 	"context"
+	"errors"
 	"path/filepath"
 	"testing"
 	"time"
@@ -213,3 +214,45 @@ func TestVideoCopySafetyUnknownIgnoresAudioOnlyFiles(t *testing.T) {
 		t.Fatal("VideoCopySafetyUnknown() = true for an audio-only file, want false")
 	}
 }
+
+// SetFFmpegPath is what makes playback.ffmpeg_path take effect without a
+// server restart: the ensurer is built with the path captured at boot, and a
+// later config change has to reach both the probe and the copy-safety scan.
+func TestSetFFmpegPathOverridesBootPaths(t *testing.T) {
+	ensurer := NewPlaybackProbeEnsurer(nil, "boot-ffprobe", "boot-ffmpeg", time.Second)
+
+	if got := ensurer.binaries(); got.ffmpegPath != "boot-ffmpeg" || got.ffprobePath != "boot-ffprobe" {
+		t.Fatalf("binaries() before reload = %+v, want the boot pair", got)
+	}
+
+	ensurer.SetFFmpegPath("/opt/jellyfin-ffmpeg/ffmpeg")
+
+	got := ensurer.binaries()
+	if got.ffmpegPath != "/opt/jellyfin-ffmpeg/ffmpeg" {
+		t.Fatalf("binaries().ffmpegPath = %q, want the reloaded path", got.ffmpegPath)
+	}
+	if want := filepath.Join("/opt/jellyfin-ffmpeg", "ffprobe"); got.ffprobePath != want {
+		t.Fatalf("binaries().ffprobePath = %q, want %q derived from the reloaded ffmpeg", got.ffprobePath, want)
+	}
+}
+
+// A reload that blanks the FFmpeg path disables the copy-safety scan, the same
+// as booting without one — the verdict stays unknown instead of being guessed.
+func TestSetFFmpegPathEmptyDisablesCopySafetyScan(t *testing.T) {
+	ffmpegPath, _ := fakeFFmpeg(t, conflictingPPSAnnexB, 0)
+	ensurer := NewPlaybackProbeEnsurer(nil, "ffprobe", ffmpegPath, time.Second)
+	file := copySafetyTestFile(time.Date(2026, time.March, 4, 5, 6, 7, 0, time.UTC))
+
+	if !ensurer.NeedsCopySafetyScan(file) {
+		t.Fatal("NeedsCopySafetyScan() = false with a configured ffmpeg, want true")
+	}
+
+	ensurer.SetFFmpegPath("")
+
+	if ensurer.NeedsCopySafetyScan(file) {
+		t.Fatal("NeedsCopySafetyScan() = true after the path was cleared, want false")
+	}
+	if _, _, err := ensurer.ScanCopySafety(context.Background(), file); !errors.Is(err, errCopySafetyScanUnavailable) {
+		t.Fatalf("ScanCopySafety() error = %v, want errCopySafetyScanUnavailable", err)
+	}
+}
diff --git a/internal/settingskeys/keys.go b/internal/settingskeys/keys.go
index 670049707..f21ad8d5f 100644
--- a/internal/settingskeys/keys.go
+++ b/internal/settingskeys/keys.go
@@ -9,7 +9,7 @@
 package settingskeys
 
 // Revision is the manifest revision these bindings were generated from.
-const Revision = 7
+const Revision = 8
 
 // Setting keys, one constant per definition.
 const (
@@ -91,8 +91,14 @@ const (
 	SubtitleMatchesDevice = "subtitle.matches_device"
 	// Poster badges
 	UiCardOverlays = "ui.card_overlays"
+	// Card overlays enabled
+	UiCardOverlaysEnabled = "ui.card_overlays_enabled"
 	// Media cards
 	UiCardPresentation = "ui.card_presentation"
+	// Card quick actions
+	UiCardQuickActions = "ui.card_quick_actions"
+	// Card quick actions enabled
+	UiCardQuickActionsEnabled = "ui.card_quick_actions_enabled"
 	// Custom CSS
 	UiCustomCss = "ui.custom_css"
 	// Custom theme variables
@@ -156,7 +162,10 @@ var Remote = []string{
 	PlayerVideoGravity,
 	SearchMediaScope,
 	UiCardOverlays,
+	UiCardOverlaysEnabled,
 	UiCardPresentation,
+	UiCardQuickActions,
+	UiCardQuickActionsEnabled,
 	UiCustomCss,
 	UiCustomThemeVars,
 	UiDateFormat,
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 3ea930534..dcb262c4e 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -7,7 +7,9 @@ import {
   type ReactNode,
 } from "react";
 import {
-  BrowserRouter,
+  createBrowserRouter,
+  createRoutesFromElements,
+  Outlet,
   Routes,
   Route,
   Navigate,
@@ -16,6 +18,10 @@ import {
   useParams,
   useSearchParams,
 } from "react-router";
+// The DOM build of the provider is the same component with `ReactDOM.flushSync`
+// wired in, which is what lets a view-transition navigation apply its state
+// inside `startViewTransition`. Links across the app opt into view transitions.
+import { RouterProvider } from "react-router/dom";
 import { QueryClientProvider, useQueryClient } from "@tanstack/react-query";
 import { queryClient } from "@/lib/query-client";
 import { AuthProvider, useAuth } from "@/hooks/useAuth";
@@ -59,20 +65,33 @@ import {
   buildQueryCatalogHref,
   buildUserCollectionCatalogHref,
 } from "@/pages/catalogSearchParams";
+import { buildLegacyAutoscanRedirectTarget } from "@/pages/autoscanSearchParams";
 import { buildLegacyWebhookSyncRedirectTarget } from "@/lib/webhookSync";
 import { toast } from "sonner";
 import { prewarmCodecDetection } from "@/player/hooks/useCodecDetection";
+import {
+  prefetchRouteChunks,
+  type RouteChunkImport,
+} from "@/lib/routeChunkPrefetch";
+
+// Hot routes keep their import factory in a named binding so the idle warm-up
+// below can pull the chunk before the user navigates. See HOT_ROUTE_CHUNKS.
+const importLibraryPage = () => import("@/pages/LibraryPage");
+const importItemDetail = () => import("@/pages/ItemDetail/index");
+const importPersonDetail = () => import("@/pages/PersonDetail");
+const importCollections = () => import("@/pages/Collections");
+const importRecommendations = () => import("@/pages/Recommendations");
 
 const AdminLayout = lazy(() => import("@/components/AdminLayout"));
 const OAuthComplete = lazy(() => import("@/pages/OAuthComplete"));
 const ActivateDevice = lazy(() => import("@/pages/ActivateDevice"));
 const SetupWizard = lazy(() => import("@/pages/SetupWizard"));
 const Profiles = lazy(() => import("@/pages/Profiles"));
-const LibraryPage = lazy(() => import("@/pages/LibraryPage"));
-const ItemDetail = lazy(() => import("@/pages/ItemDetail/index"));
+const LibraryPage = lazy(importLibraryPage);
+const ItemDetail = lazy(importItemDetail);
 const EbookReader = lazy(() => import("@/pages/EbookReader"));
-const PersonDetail = lazy(() => import("@/pages/PersonDetail"));
-const Collections = lazy(() => import("@/pages/Collections"));
+const PersonDetail = lazy(importPersonDetail);
+const Collections = lazy(importCollections);
 const CollectionEditor = lazy(() => import("@/pages/CollectionEditor"));
 const Notifications = lazy(() => import("@/pages/Notifications"));
 const DeviceSettings = lazy(() => import("@/pages/settings/DeviceSettings"));
@@ -89,7 +108,6 @@ const AdminDiagnostics = lazy(() => import("@/pages/AdminDiagnostics"));
 const AdminAccessGroups = lazy(() => import("@/pages/AdminAccessGroups"));
 const AdminUsers = lazy(() => import("@/pages/AdminUsers"));
 const AdminRequests = lazy(() => import("@/pages/AdminRequests"));
-const AdminAutoscan = lazy(() => import("@/pages/AdminAutoscan"));
 const AdminDevices = lazy(() => import("@/pages/AdminDevices"));
 const AdminLibraries = lazy(() => import("@/pages/AdminLibraries"));
 const AdminSettingsLayout = lazy(
@@ -115,7 +133,7 @@ const AdminRecommendations = lazy(() => import("@/pages/AdminRecommendations"));
 const AdminPolicyLayout = lazy(
   () => import("@/pages/admin-policy/AdminPolicyLayout"),
 );
-const Recommendations = lazy(() => import("@/pages/Recommendations"));
+const Recommendations = lazy(importRecommendations);
 const RecommendationsSection = lazy(
   () => import("@/pages/RecommendationsSection"),
 );
@@ -171,7 +189,26 @@ const WatchTogetherRoomPage = lazy(
 const WatchRoute = lazy(() => import("@/pages/WatchRoute"));
 const ProfileCustomizeHome = lazy(() => import("@/pages/ProfileCustomizeHome"));
 
-/** Scrolls to top on pathname change (custom replacement for ScrollRestoration which requires data router). */
+/**
+ * Routes a browsing session reaches within the first few interactions. Home
+ * links straight into item details, the sidebar into libraries, and item pages
+ * into people and recommendations, so paying their chunk cost while the app is
+ * idle is cheaper than paying it inside a navigation.
+ */
+const HOT_ROUTE_CHUNKS: readonly RouteChunkImport[] = [
+  importItemDetail,
+  importLibraryPage,
+  importPersonDetail,
+  importRecommendations,
+  importCollections,
+];
+
+/**
+ * Scrolls to top on pathname change. Kept in place of react-router's
+ * `<ScrollRestoration>`, which the data router would now allow: that one
+ * restores the previous offset on back/forward, while every page here expects
+ * to open at the top.
+ */
 function useScrollRestoration() {
   const { pathname } = useLocation();
   useEffect(() => {
@@ -415,6 +452,16 @@ function LegacyWebhookSyncRedirect() {
   return <Navigate to={buildLegacyWebhookSyncRedirectTarget(search)} replace />;
 }
 
+/**
+ * `/admin/autoscan` → the Autoscan tab on Libraries. The old query has to be
+ * translated, not dropped: the panel's own view moved from `tab` to `view`
+ * because `tab` now names the Libraries tab hosting it.
+ */
+function LegacyAutoscanRedirect() {
+  const { search } = useLocation();
+  return <Navigate to={buildLegacyAutoscanRedirectTarget(search)} replace />;
+}
+
 function LegacyPersonalCatalogRedirect({
   source,
 }: {
@@ -524,7 +571,8 @@ function AppRoutes() {
                     element={<AdminCollectionEditor />}
                   />
                   <Route path="requests" element={<AdminRequests />} />
-                  <Route path="autoscan" element={<AdminAutoscan />} />
+                  {/* Autoscan is a tab on Libraries now; keep old links working. */}
+                  <Route path="autoscan" element={<LegacyAutoscanRedirect />} />
                   <Route path="history" element={<AdminPlaybackHistory />} />
                   <Route
                     path="marker-history"
@@ -545,7 +593,7 @@ function AppRoutes() {
                   <Route path="nodes" element={<AdminNodes />} />
                   <Route path="sections" element={<AdminSections />} />
                   <Route path="plugins" element={<AdminPlugins />} />
-                  <Route path="settings" element={<AdminSettingsLayout />} />
+                  <Route path="settings/*" element={<AdminSettingsLayout />} />
                   <Route path="policy" element={<AdminPolicyLayout />} />
                   <Route
                     path="recommendations"
@@ -819,41 +867,89 @@ function PlaybackCapabilityPrewarmer() {
   return null;
 }
 
-export default function App() {
+/** Warms the hot route chunks once the first screen has settled. */
+function RouteChunkPrewarmer() {
+  const { user } = useAuth();
+  const isAuthenticated = Boolean(user);
+  useEffect(() => {
+    // Nothing behind these routes is reachable while signed out, and the login
+    // screen is exactly where bandwidth should stay free for the first paint.
+    if (!isAuthenticated) return;
+    return prefetchRouteChunks(HOT_ROUTE_CHUNKS);
+  }, [isAuthenticated]);
+  return null;
+}
+
+/**
+ * Everything that used to sit directly inside `<BrowserRouter>`: providers,
+ * app-wide chrome, and the routed page tree behind one Suspense boundary.
+ *
+ * `RouterProvider` takes no children, so this is the data router's single root
+ * layout route. Nothing was hoisted above the router: ErrorBoundary,
+ * RealtimeEventsProvider and WatchPlaybackProvider all read the location or
+ * navigate, and the providers that need nothing from the router sit above those
+ * in the chain — so splitting the stack would reorder providers for no gain.
+ * The element below is created once at module scope, so React skips
+ * re-rendering this subtree on navigation exactly as it did when the tree hung
+ * off `<BrowserRouter>`.
+ */
+function AppShell() {
   return (
-    <BrowserRouter>
-      <AuthProvider>
-        <QueryClientProvider client={queryClient}>
-          <ErrorBoundary>
-            <BrandingProvider>
-              <ThemeProvider>
-                <CustomThemeProvider>
-                  <DateTimeFormatProvider>
-                    <WatchPlaybackProvider>
-                      <AudiobookPlaybackProvider>
-                        <RealtimeEventsProvider>
-                          <PlaybackCapabilityPrewarmer />
-                          <RealtimeEventChannels />
-                          <ScrollRestorationManager />
-                          <RouteAnnouncer />
-                          <QueryCacheManager />
-                          <AppChrome />
-                          <Suspense fallback={<RouteLoading />}>
-                            <ReactiveAppRoutes />
-                          </Suspense>
-                          <WatchPlaybackHost />
-                          <WatchPlaybackBar />
-                          <Toaster />
-                        </RealtimeEventsProvider>
-                      </AudiobookPlaybackProvider>
-                    </WatchPlaybackProvider>
-                  </DateTimeFormatProvider>
-                </CustomThemeProvider>
-              </ThemeProvider>
-            </BrandingProvider>
-          </ErrorBoundary>
-        </QueryClientProvider>
-      </AuthProvider>
-    </BrowserRouter>
+    <AuthProvider>
+      <QueryClientProvider client={queryClient}>
+        <ErrorBoundary>
+          <BrandingProvider>
+            <ThemeProvider>
+              <CustomThemeProvider>
+                <DateTimeFormatProvider>
+                  <WatchPlaybackProvider>
+                    <AudiobookPlaybackProvider>
+                      <RealtimeEventsProvider>
+                        <PlaybackCapabilityPrewarmer />
+                        <RouteChunkPrewarmer />
+                        <RealtimeEventChannels />
+                        <ScrollRestorationManager />
+                        <RouteAnnouncer />
+                        <QueryCacheManager />
+                        <AppChrome />
+                        <Suspense fallback={<RouteLoading />}>
+                          <Outlet />
+                        </Suspense>
+                        <WatchPlaybackHost />
+                        <WatchPlaybackBar />
+                        <Toaster />
+                      </RealtimeEventsProvider>
+                    </AudiobookPlaybackProvider>
+                  </WatchPlaybackProvider>
+                </DateTimeFormatProvider>
+              </CustomThemeProvider>
+            </ThemeProvider>
+          </BrandingProvider>
+        </ErrorBoundary>
+      </QueryClientProvider>
+    </AuthProvider>
   );
 }
+
+/**
+ * A data router is what makes navigation blockable (`useBlocker`, used by
+ * `UnsavedChangesGuard` to protect staged settings edits) — that is the whole
+ * reason for `createBrowserRouter` here. The route tree itself stays
+ * declarative below the root: the splat child hands off to `<Routes>`, whose
+ * descendant routes match from `/` because a splat contributes nothing to the
+ * pathname base.
+ */
+const appRoutes = createRoutesFromElements(
+  <Route element={<AppShell />}>
+    <Route path="*" element={<ReactiveAppRoutes />} />
+  </Route>,
+);
+
+export default function App() {
+  // Per-App-instance rather than a module-scope singleton: a router captures
+  // the current history the moment it is built, and tests render App more than
+  // once against different entries.
+  const [router] = useState(() => createBrowserRouter(appRoutes));
+
+  return <RouterProvider router={router} />;
+}
diff --git a/web/src/api/types.ts b/web/src/api/types.ts
index 743ef7370..409b1f583 100644
--- a/web/src/api/types.ts
+++ b/web/src/api/types.ts
@@ -4621,6 +4621,12 @@ export interface RateLimitConfig {
   active?: boolean;
   /** Backend the running limiter uses; may differ from `backend` until restart. */
   active_backend?: string;
+  /**
+   * Whether the Redis backend can be selected at all (GET responses only).
+   * Sentinel and REDIS_URL deployments have no stored `redis.url`, so only the
+   * server can answer this.
+   */
+  redis_available?: boolean;
 }
 
 export interface RateLimitUpdateResponse {
@@ -4650,6 +4656,14 @@ export interface AdminServerStatus {
   restart_required: boolean;
   restart_required_at?: string;
   restart_required_reason?: string;
+  /**
+   * Every distinct reason marked since boot ("setting:<key>" for settings
+   * saves), so pending restarts can be scoped per subsystem. The singular
+   * field only remembers the last save.
+   */
+  restart_required_reasons?: string[];
+  /** Increments on every restart-required save; re-arms the dismissed banner. */
+  restart_mark_count?: number;
   restart_requested: boolean;
   restart_requested_at?: string;
 }
diff --git a/web/src/app.css b/web/src/app.css
index bf3c2ffd0..3c31df2ff 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -734,6 +734,7 @@
   }
   html[data-high-contrast="true"] .surface-panel-subtle,
   html[data-high-contrast="true"] .surface-panel,
+  html[data-high-contrast="true"] .surface-panel-raised,
   html[data-high-contrast="true"] .glass,
   html[data-high-contrast="true"] .glass-subtle {
     border-color: color-mix(in srgb, var(--border) 88%, white 12%);
@@ -1425,6 +1426,17 @@
     transform: translateY(-4px);
   }
 
+  /* Home/library pages can contain hundreds of cards across off-screen rows.
+     Let supporting engines skip layout and paint for those rows until they
+     approach the viewport. Browsers without content-visibility ignore this
+     and keep the existing rendering path. MediaCarousel sets the placeholder
+     height from carouselIntrinsicHeight(), which owns the per-card-size
+     values alongside the card widths they derive from. */
+  .media-carousel {
+    content-visibility: auto;
+    contain-intrinsic-size: auto var(--carousel-intrinsic-h, 23rem);
+  }
+
   /* Card actions stay hidden at rest so touch devices get clean artwork; a
      long press opens the action sheet instead. Keyboard focus and an open
      menu reveal them on every device so keyboard and assistive-tech users
@@ -1444,7 +1456,13 @@
      phone cannot uncover the controls. This deliberately uses a direct :hover
      selector: Tailwind's group-hover variant is limited to the primary
      pointer's (hover: hover) result, which can exclude Windows hybrid devices
-     even while an attached mouse is actively hovering the card. */
+     even while an attached mouse is actively hovering the card.
+
+     Card actions sit at z-20 in the card wrapper's stacking context while the
+     overlay-badge layer sits at z-10 inside the artwork box, so a visible
+     action always covers the badges in that corner. Badges anchor flush in the
+     corners and never reserve room for the actions; the overlay layer is
+     pointer-events-none, so covered badges cannot steal an action's clicks. */
   @media (any-hover: hover) and (any-pointer: fine) {
     .group\/media:hover .media-card-hover-dim {
       background-color: rgb(0 0 0 / 0.3);
@@ -1955,6 +1973,17 @@
     box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
   }
 
+  /* One surface step above a surface-panel shell. Settings groups sit on
+     this so they read as defined panels inside the shell — in light themes
+     the shell and --surface are near-identical, so the raised fill plus the
+     hairline are what keep group boundaries visible. */
+  .surface-panel-raised {
+    background: color-mix(in srgb, var(--surface-raised) 65%, transparent);
+    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+    border-radius: 1.7rem;
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
+  }
+
   /* Panel chrome only once there is a sidebar to enclose. Below this the
      settings detail view is already a stack of surface-panel groups, and a
      panel around them would nest a card in a card. */
diff --git a/web/src/components/AdminLayout.test.tsx b/web/src/components/AdminLayout.test.tsx
new file mode 100644
index 000000000..bdcf6f2bb
--- /dev/null
+++ b/web/src/components/AdminLayout.test.tsx
@@ -0,0 +1,150 @@
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createMemoryRouter, RouterProvider } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  useAdminServerStatus: vi.fn(),
+}));
+
+vi.mock("@/hooks/queries/admin/settings", () => ({
+  useAdminServerStatus: () => mocks.useAdminServerStatus(),
+}));
+vi.mock("@/hooks/queries/admin/plugins", () => ({
+  useAdminPluginInstallations: () => ({ data: undefined }),
+}));
+vi.mock("@/hooks/queries/admin/policy", () => ({
+  usePolicyCapability: () => ({ data: undefined }),
+}));
+vi.mock("@/components/AdminSidebar", () => ({ default: () => null }));
+vi.mock("@/components/AdminSectionCommandDialog", () => ({
+  AdminSectionCommandDialog: () => null,
+}));
+vi.mock("@/components/ServerActivity", () => ({ default: () => null }));
+vi.mock("@/playback/watchPlaybackContext", () => ({
+  useWatchPlaybackController: () => ({ isBackgroundBarVisible: false }),
+}));
+vi.mock("@/pages/audiobooks/player/audiobookPlaybackContext", () => ({
+  useAudiobookPlaybackController: () => null,
+}));
+
+import AdminLayout from "./AdminLayout";
+
+// The dashboard and the users page stand in for "any admin page that is not
+// settings" — the shell is the only thing that renders the restart prompt, so
+// both must show it.
+function renderAdmin(initialPath = "/admin") {
+  const router = createMemoryRouter(
+    [
+      {
+        path: "/admin",
+        element: <AdminLayout />,
+        children: [
+          { index: true, element: <h1>Admin dashboard</h1> },
+          { path: "users", element: <h1>Admin users</h1> },
+        ],
+      },
+    ],
+    { initialEntries: [initialPath] },
+  );
+
+  return { router, ...render(<RouterProvider router={router} />) };
+}
+
+beforeEach(() => {
+  mocks.useAdminServerStatus.mockReturnValue({
+    data: { restart_required: true },
+  });
+  vi.stubGlobal("matchMedia", (query: string) => ({
+    matches: query === "(min-width: 64rem)",
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+describe("AdminLayout search shortcut hint", () => {
+  function stubUserAgent(value: string) {
+    vi.spyOn(window.navigator, "userAgent", "get").mockReturnValue(value);
+  }
+
+  // The dialog opens on Cmd or Ctrl, so the advertised hint has to name the key
+  // this keyboard actually has — a hardcoded ⌘ is a dead instruction on Windows
+  // and Linux, which is most self-hosters.
+  it("names Ctrl off Apple platforms", () => {
+    stubUserAgent(
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
+    );
+    renderAdmin();
+
+    const [search] = screen.getAllByRole("button", {
+      name: "Search admin sections",
+    });
+    expect(search).toHaveAttribute("title", "Search admin sections (Ctrl K)");
+    expect(screen.getByText("Ctrl K")).toBeInTheDocument();
+    expect(screen.queryByText(/⌘/)).not.toBeInTheDocument();
+  });
+
+  it("names the command glyph on Apple platforms", () => {
+    stubUserAgent(
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15",
+    );
+    renderAdmin();
+
+    const [search] = screen.getAllByRole("button", {
+      name: "Search admin sections",
+    });
+    expect(search).toHaveAttribute("title", "Search admin sections (⌘ K)");
+    expect(screen.getByText("⌘ K")).toBeInTheDocument();
+  });
+});
+
+describe("AdminLayout restart banner", () => {
+  it("stays quiet while no restart is owed", () => {
+    mocks.useAdminServerStatus.mockReturnValue({
+      data: { restart_required: false },
+    });
+    renderAdmin();
+
+    expect(
+      screen.getByRole("heading", { name: "Admin dashboard" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("Restart required")).not.toBeInTheDocument();
+  });
+
+  it("prompts on a page outside settings, above the routed page", () => {
+    renderAdmin("/admin/users");
+
+    const banner = screen.getByRole("status");
+    const page = screen.getByRole("heading", { name: "Admin users" });
+
+    expect(banner).toHaveTextContent("Restart required");
+    // Node.DOCUMENT_POSITION_FOLLOWING: the page comes after the banner.
+    expect(
+      banner.compareDocumentPosition(page) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it("keeps a dismissal across admin navigation", async () => {
+    const { router } = renderAdmin();
+
+    await userEvent.click(screen.getByRole("button", { name: "Later" }));
+    expect(screen.queryByText("Restart required")).not.toBeInTheDocument();
+
+    // The shell owns the banner, so moving between admin pages neither
+    // resurrects the prompt nor loses the admin's "Later".
+    await act(async () => {
+      await router.navigate("/admin/users");
+    });
+
+    expect(
+      screen.getByRole("heading", { name: "Admin users" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("Restart required")).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/components/AdminLayout.tsx b/web/src/components/AdminLayout.tsx
index c8f992978..7b5c868f7 100644
--- a/web/src/components/AdminLayout.tsx
+++ b/web/src/components/AdminLayout.tsx
@@ -1,7 +1,9 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Outlet, useLocation } from "react-router";
 import AdminSidebar from "@/components/AdminSidebar";
+import { AdminSectionCommandDialog } from "@/components/AdminSectionCommandDialog";
 import ServerActivity from "@/components/ServerActivity";
+import { RestartBanner } from "@/components/admin/RestartBanner";
 import {
   Sheet,
   SheetClose,
@@ -11,8 +13,14 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";
+import { useAdminPluginInstallations } from "@/hooks/queries/admin/plugins";
+import { usePolicyCapability } from "@/hooks/queries/admin/policy";
+import { useAdminServerStatus } from "@/hooks/queries/admin/settings";
+import { buildAdminCommandNavSections } from "@/lib/adminNavigation";
 import { resolveAdminDocumentTitle } from "@/lib/documentTitle";
-import { Menu, X } from "lucide-react";
+import { searchShortcutLabel } from "@/lib/keyboardShortcut";
+import { cn } from "@/lib/utils";
+import { Menu, Search, X } from "lucide-react";
 import { useWatchPlaybackController } from "@/playback/watchPlaybackContext";
 import { useAudiobookPlaybackController } from "@/pages/audiobooks/player/audiobookPlaybackContext";
 
@@ -20,7 +28,25 @@ const ADMIN_DESKTOP_MEDIA_QUERY = "(min-width: 64rem)";
 
 export default function AdminLayout() {
   const [mobileOpen, setMobileOpen] = useState(false);
+  const [commandOpen, setCommandOpen] = useState(false);
   const location = useLocation();
+  const { data: adminInstallations } = useAdminPluginInstallations();
+  const policyCapability = usePolicyCapability();
+  // The one restart prompt for the admin area. Read here, not in a page: a
+  // restart is owed by the server, not by the page that happened to ask for
+  // it, so the prompt has to survive navigating away from settings. The query
+  // is shared and cached, so the settings overview reading the same status
+  // costs nothing extra.
+  const { data: serverStatus } = useAdminServerStatus();
+  // Mounted here rather than on the dashboard so Cmd+K reaches every admin
+  // page, which is what the pages that advertise the shortcut assume.
+  const adminSearchSections = useMemo(
+    () =>
+      buildAdminCommandNavSections(adminInstallations, {
+        policyEditorAvailable: policyCapability.data?.editor_available === true,
+      }),
+    [adminInstallations, policyCapability.data?.editor_available],
+  );
   const { isBackgroundBarVisible } = useWatchPlaybackController();
   const audiobookPlayback = useAudiobookPlaybackController();
   const hasBackgroundBar =
@@ -48,6 +74,11 @@ export default function AdminLayout() {
 
   return (
     <div className="bg-background relative min-h-[100dvh] overflow-x-hidden">
+      <AdminSectionCommandDialog
+        sections={adminSearchSections}
+        open={commandOpen}
+        onOpenChange={setCommandOpen}
+      />
       <a
         href="#main-content"
         className="focus:bg-background focus:text-foreground focus:ring-ring sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-lg focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:ring-2 focus:outline-none"
@@ -86,7 +117,13 @@ export default function AdminLayout() {
               </div>
             </div>
           </div>
-          <ServerActivity className="h-11 w-11" />
+          <div className="flex items-center gap-1">
+            <AdminSearchButton
+              onClick={() => setCommandOpen(true)}
+              className="h-11 w-11"
+            />
+            <ServerActivity className="h-11 w-11" />
+          </div>
         </div>
 
         {/* Mobile sidebar drawer */}
@@ -119,8 +156,9 @@ export default function AdminLayout() {
         </SheetContent>
       </Sheet>
 
-      {/* Desktop activity indicator */}
-      <div className="fixed top-5 right-5 z-40 hidden lg:block">
+      {/* Desktop header controls */}
+      <div className="fixed top-5 right-5 z-40 hidden items-center gap-2 lg:flex">
+        <AdminSearchButton onClick={() => setCommandOpen(true)} showShortcut />
         <ServerActivity />
       </div>
 
@@ -132,9 +170,58 @@ export default function AdminLayout() {
         }`}
       >
         <div className="admin-shell">
+          {/* Above the routed page and inside the content column, so every
+              admin page carries the prompt and none of them can be covered by
+              it. `lg:mt-7` clears the fixed Search/activity controls in the
+              top-right corner (top-5, h-9 → they end 3.5rem down), which would
+              otherwise float over the banner's buttons. */}
+          <RestartBanner
+            restartRequired={serverStatus?.restart_required}
+            restartSignal={serverStatus?.restart_mark_count}
+            className="lg:mt-7"
+          />
           <Outlet />
         </div>
       </main>
     </div>
   );
 }
+
+function AdminSearchButton({
+  onClick,
+  className,
+  showShortcut = false,
+}: {
+  onClick: () => void;
+  className?: string;
+  showShortcut?: boolean;
+}) {
+  // Advertised, not hardcoded: the dialog opens on either modifier, so the hint
+  // has to name the one this keyboard actually has.
+  const shortcut = searchShortcutLabel();
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="Search admin sections"
+      title={`Search admin sections (${shortcut})`}
+      className={cn(
+        "text-muted-foreground hover:text-foreground hover:bg-accent/60 focus-visible:ring-ring/60 border-border/70 bg-surface/70 flex h-9 items-center justify-center gap-2 rounded-xl border px-2.5 transition-colors focus-visible:ring-[3px] focus-visible:outline-none",
+        className,
+      )}
+    >
+      <Search className="h-4 w-4" aria-hidden="true" />
+      {showShortcut ? (
+        <>
+          <span className="hidden text-[13px] font-medium xl:inline">
+            Search
+          </span>
+          <kbd className="border-border/70 pointer-events-none rounded border px-1.5 py-0.5 font-mono text-[10px] whitespace-nowrap select-none">
+            {shortcut}
+          </kbd>
+        </>
+      ) : null}
+    </button>
+  );
+}
diff --git a/web/src/components/AdminSectionCommandDialog.test.tsx b/web/src/components/AdminSectionCommandDialog.test.tsx
index 599ee0be2..efc86b6b9 100644
--- a/web/src/components/AdminSectionCommandDialog.test.tsx
+++ b/web/src/components/AdminSectionCommandDialog.test.tsx
@@ -79,21 +79,25 @@ describe("AdminSectionCommandDialog", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("searches individual admin setting labels from the dashboard dialog", async () => {
+  it("searches individual admin setting labels from the admin dialog", async () => {
     renderDialog();
 
     const searchBox = await openDialog();
-    await userEvent.type(searchBox, "pool max open");
+    await userEvent.type(searchBox, "maximum postgres connections");
 
     expect(
-      screen.getByRole("option", { name: /Database/ }),
+      screen.getByRole("option", { name: /Storage & Database/ }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Maximum Postgres connections"),
     ).toBeInTheDocument();
-    expect(screen.getByText("Pool Max Open")).toBeInTheDocument();
 
-    await userEvent.click(screen.getByRole("option", { name: /Database/ }));
+    await userEvent.click(
+      screen.getByRole("option", { name: /Storage & Database/ }),
+    );
 
     expect(screen.getByLabelText("Current path")).toHaveTextContent(
-      "/admin/settings?tab=database",
+      "/admin/settings/infrastructure",
     );
   });
 
@@ -136,7 +140,9 @@ describe("AdminSectionCommandDialog", () => {
 
     const searchBox = await openDialog();
     await userEvent.type(searchBox, "logs");
-    await userEvent.click(screen.getByRole("option", { name: /Logs/ }));
+    await userEvent.click(
+      screen.getByRole("option", { name: /^LogsServer log stream/ }),
+    );
 
     expect(screen.getByLabelText("Current path")).toHaveTextContent(
       "/admin/logs",
diff --git a/web/src/components/AdminSectionCommandDialog.tsx b/web/src/components/AdminSectionCommandDialog.tsx
index 70d43444e..7f4d6381a 100644
--- a/web/src/components/AdminSectionCommandDialog.tsx
+++ b/web/src/components/AdminSectionCommandDialog.tsx
@@ -20,12 +20,26 @@ import { cn } from "@/lib/utils";
 
 interface AdminSectionCommandDialogProps {
   sections: readonly AdminNavGroup[];
+  /** Controlled open state, so a visible search button can open the palette. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 export function AdminSectionCommandDialog({
   sections,
+  open: openProp,
+  onOpenChange,
 }: AdminSectionCommandDialogProps) {
-  const [open, setOpen] = useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = openProp ?? uncontrolledOpen;
+  const isControlled = openProp !== undefined;
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange],
+  );
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -64,12 +78,12 @@ export function AdminSectionCommandDialog({
     setOpen(false);
     setQuery("");
     setSelectedIndex(0);
-  }, []);
+  }, [setOpen]);
 
   const openDialog = useCallback(() => {
     setOpen(true);
     focusSearch();
-  }, [focusSearch]);
+  }, [focusSearch, setOpen]);
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
@@ -94,7 +108,7 @@ export function AdminSectionCommandDialog({
         void navigateToPluginRoute(item.href);
         return;
       }
-      void navigate(item.href);
+      navigate(item.href);
     },
     [closeDialog, navigate],
   );
diff --git a/web/src/components/AdminSidebar.test.tsx b/web/src/components/AdminSidebar.test.tsx
index ce3826057..ab92f405e 100644
--- a/web/src/components/AdminSidebar.test.tsx
+++ b/web/src/components/AdminSidebar.test.tsx
@@ -87,12 +87,21 @@ describe("AdminSidebar", () => {
       "Content",
       "Automation",
       "Users",
+      "Settings",
       "System",
     ]) {
       expect(markup).toContain(`>${section}<`);
     }
   });
 
+  it("keeps settings as one sidebar destination", () => {
+    const markup = renderSidebar();
+    const settingsLinks = markup.match(/href="\/admin\/settings[^"]*"/g) ?? [];
+
+    expect(settingsLinks).toEqual(['href="/admin/settings"']);
+    expect(markup).not.toContain("/admin/settings?tab=");
+  });
+
   it("renders as an embedded rail inside the mobile drawer", () => {
     const markup = renderSidebar(true);
 
diff --git a/web/src/components/AppSidebar.test.tsx b/web/src/components/AppSidebar.test.tsx
index 2ef45a33d..f97a5e665 100644
--- a/web/src/components/AppSidebar.test.tsx
+++ b/web/src/components/AppSidebar.test.tsx
@@ -151,15 +151,12 @@ vi.mock("@/hooks/useTheme", () => ({
     previewTheme: vi.fn(),
     resetPreviewTheme: vi.fn(),
   }),
+  isKeyboardFocus: () => false,
   // PrairieBrand reads the appearance through the optional hook; null keeps it on
   // the dark built-in assets, matching the sidebar's own surface.
   useOptionalTheme: () => null,
 }));
 
-vi.mock("@/components/ThemeSwitcher", () => ({
-  default: () => <div>Theme switcher</div>,
-}));
-
 vi.mock("@/components/ui/avatar", () => ({
   Avatar: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   AvatarFallback: ({ children }: { children: ReactNode }) => (
diff --git a/web/src/components/AppSidebar.tsx b/web/src/components/AppSidebar.tsx
index d66ab7270..b174309d7 100644
--- a/web/src/components/AppSidebar.tsx
+++ b/web/src/components/AppSidebar.tsx
@@ -71,7 +71,7 @@ import {
   Send,
   Bell,
 } from "lucide-react";
-import { useTheme } from "@/hooks/useTheme";
+import { isKeyboardFocus, useTheme } from "@/hooks/useTheme";
 import { CURATED_THEME_IDS, THEMES } from "@/lib/themes";
 import { cn } from "@/lib/utils";
 import { useUICustomization } from "@/hooks/useUICustomization";
@@ -1169,7 +1169,13 @@ export default function AppSidebar({
                         }}
                         onMouseEnter={() => previewTheme(id)}
                         onMouseLeave={resetPreviewTheme}
-                        onFocus={() => previewTheme(id)}
+                        // Radix focuses whichever item the pointer is over, so
+                        // an unconditional focus preview would bypass the hover
+                        // intent delay. Keyboard focus only.
+                        onFocus={(event) => {
+                          if (isKeyboardFocus(event.currentTarget))
+                            previewTheme(id);
+                        }}
                         onBlur={resetPreviewTheme}
                         aria-label={def.label}
                         title={def.label}
diff --git a/web/src/components/CollectionTemplateGallery/MDBListBrowser.tsx b/web/src/components/CollectionTemplateGallery/MDBListBrowser.tsx
index 9eb223aa2..44b0a37e3 100644
--- a/web/src/components/CollectionTemplateGallery/MDBListBrowser.tsx
+++ b/web/src/components/CollectionTemplateGallery/MDBListBrowser.tsx
@@ -10,7 +10,6 @@ import {
   useMDBListTop,
 } from "@/hooks/queries/userCollectionImports";
 
-import { Search } from "lucide-react";
 interface Props {
   onPick: (list: MDBListListSummary, jsonURL: string) => void;
 }
@@ -33,8 +32,10 @@ export function MDBListBrowser({ onPick }: Props) {
         <p className="text-muted-foreground">
           MDBList list search isn&rsquo;t available — an admin needs to add an
           MDBList API key under{" "}
-          <span className="font-medium">Settings → Integrations</span>. You can
-          still paste a list URL below.
+          <span className="font-medium">
+            Settings → Subtitles &amp; Metadata
+          </span>
+          . You can still paste a list URL below.
         </p>
       </div>
     );
@@ -66,7 +67,6 @@ export function MDBListBrowser({ onPick }: Props) {
             setShowTop(true);
           }}
         >
-          <Search />
           Top lists
         </Button>
       </div>
diff --git a/web/src/components/ContinueWatchingCard.restart.test.tsx b/web/src/components/ContinueWatchingCard.restart.test.tsx
index 39cc83bc3..b4637f3de 100644
--- a/web/src/components/ContinueWatchingCard.restart.test.tsx
+++ b/web/src/components/ContinueWatchingCard.restart.test.tsx
@@ -51,6 +51,7 @@ describe("ContinueWatchingCard restart eligibility", () => {
               backdrop_thumbhash: "",
               logo_url: "",
             }}
+            quickActionMode="both"
           />
         </MemoryRouter>
       </QueryClientProvider>,
diff --git a/web/src/components/ContinueWatchingCard.test.tsx b/web/src/components/ContinueWatchingCard.test.tsx
index 6350df146..aa9b674f3 100644
--- a/web/src/components/ContinueWatchingCard.test.tsx
+++ b/web/src/components/ContinueWatchingCard.test.tsx
@@ -62,6 +62,7 @@ describe("ContinueWatchingCard", () => {
               backdrop_thumbhash: "",
               logo_url: "",
             }}
+            quickActionMode="both"
           />
         </MemoryRouter>
       </QueryClientProvider>,
@@ -105,6 +106,7 @@ describe("ContinueWatchingCard", () => {
                 in_watchlist: false,
               },
             }}
+            quickActionMode="both"
           />
         </MemoryRouter>
       </QueryClientProvider>,
@@ -142,6 +144,7 @@ describe("ContinueWatchingCard", () => {
               backdrop_thumbhash: "",
               logo_url: "",
             }}
+            quickActionMode="both"
           />
         </MemoryRouter>
       </QueryClientProvider>,
@@ -181,6 +184,7 @@ describe("ContinueWatchingCard", () => {
                 in_watchlist: false,
               },
             }}
+            quickActionMode="both"
           />
         </MemoryRouter>
       </QueryClientProvider>,
@@ -217,6 +221,7 @@ describe("ContinueWatchingCard", () => {
               logo_url: "",
             }}
             libraryId={12}
+            quickActionMode="both"
           />
         </MemoryRouter>
       </QueryClientProvider>,
@@ -287,6 +292,7 @@ describe("ContinueWatchingCard", () => {
               completed: false,
               updated_at: "2026-03-07T00:00:00Z",
             }}
+            quickActionMode="both"
           />
         </MemoryRouter>
       </QueryClientProvider>,
@@ -330,6 +336,7 @@ describe("ContinueWatchingCard", () => {
               backdrop_thumbhash: "",
               logo_url: "",
             }}
+            quickActionMode="both"
           />
         </MemoryRouter>
       </QueryClientProvider>,
@@ -371,6 +378,7 @@ describe("ContinueWatchingCard", () => {
               logo_url: "",
             }}
             libraryId={7}
+            quickActionMode="both"
           />
         </MemoryRouter>
       </QueryClientProvider>,
diff --git a/web/src/components/ContinueWatchingCard.tsx b/web/src/components/ContinueWatchingCard.tsx
index 27deed1aa..9392e50c5 100644
--- a/web/src/components/ContinueWatchingCard.tsx
+++ b/web/src/components/ContinueWatchingCard.tsx
@@ -27,6 +27,7 @@ import {
 import { useUICustomization } from "@/hooks/useUICustomization";
 import { carouselCardWidthClasses } from "@/lib/uiCustomization";
 import CardPlayOverlay from "@/components/CardPlayOverlay";
+import type { CardQuickActionMode } from "@/lib/cardQuickActions";
 
 type ContinueWatchingCardProps = (
   | {
@@ -41,6 +42,7 @@ type ContinueWatchingCardProps = (
     }
 ) & {
   overlayPrefs?: CardOverlayPrefs | null;
+  quickActionMode?: CardQuickActionMode;
   libraryId?: number;
   variant?: "wide" | "poster";
 };
@@ -137,6 +139,8 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
       ? (card.positionSeconds / card.durationSeconds) * 100
       : 0;
   const hasPartialProgress = progressPercent > 0 && progressPercent < 100;
+  // Drives both the bar itself and the overlay row's clearance above it.
+  const showProgressBar = !isNextUp && progressPercent > 0;
   const hasEpisodeMeta =
     card.seasonNumber != null && card.episodeNumber != null;
   // A manga chapter is an ebook item that carries its owning series; the card
@@ -310,6 +314,7 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
                   data={overlayDataFromSectionItem(props.sectionItem)}
                   prefs={props.overlayPrefs}
                   variant={variant}
+                  hasProgressBar={showProgressBar}
                 />
               )}
 
@@ -318,7 +323,7 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
 
             {/* Progress bar — inset pill so a full bar doesn't read as a
                 stray edge along the artwork */}
-            {!isNextUp && progressPercent > 0 && (
+            {showProgressBar && (
               <div className="absolute inset-x-2.5 bottom-2 h-[3px] overflow-hidden rounded-full bg-black/40">
                 <div
                   className="h-full rounded-full transition-all duration-300"
@@ -374,6 +379,7 @@ export default function ContinueWatchingCard(props: ContinueWatchingCardProps) {
           showFavoriteShortcut={false}
           dismissAction={dismissAction}
           hasPartialProgress={hasPartialProgress}
+          quickActionMode={props.quickActionMode ?? "none"}
           longPressRef={cardRef}
           itemTitle={heading}
         />
diff --git a/web/src/components/EpisodeRow.tsx b/web/src/components/EpisodeRow.tsx
index b7ef4e9b4..f74126239 100644
--- a/web/src/components/EpisodeRow.tsx
+++ b/web/src/components/EpisodeRow.tsx
@@ -74,6 +74,7 @@ export default function EpisodeRow({
             data={overlayDataFromEpisodeListItem(episode)}
             prefs={overlayPrefs}
             variant="wide"
+            hasProgressBar={hasProgress}
           />
         )}
         {hasProgress && (
diff --git a/web/src/components/ItemCard.test.tsx b/web/src/components/ItemCard.test.tsx
index f18a7a365..b4fdc84f1 100644
--- a/web/src/components/ItemCard.test.tsx
+++ b/web/src/components/ItemCard.test.tsx
@@ -106,6 +106,17 @@ describe("ItemCard SortMeta", () => {
     );
   });
 
+  it("passes the resolved profile quick-action mode to the menu", () => {
+    renderCard({
+      item: { ...baseItem, content_id: "movie-1", type: "movie" },
+      quickActionMode: "favorites",
+    });
+
+    expect(mocks.mediaItemMenu).toHaveBeenCalledWith(
+      expect.objectContaining({ quickActionMode: "favorites" }),
+    );
+  });
+
   it("renders the series last air date when sorted by last_air_date", () => {
     const markup = renderCard({
       sortField: "last_air_date",
diff --git a/web/src/components/ItemCard.tsx b/web/src/components/ItemCard.tsx
index c0c42683c..92a598c26 100644
--- a/web/src/components/ItemCard.tsx
+++ b/web/src/components/ItemCard.tsx
@@ -19,6 +19,7 @@ import { formatBitrate } from "@/lib/mediaFormat";
 import { useUICustomization } from "@/hooks/useUICustomization";
 import { buildItemHref } from "@/lib/mediaNavigation";
 import CardPlayOverlay from "@/components/CardPlayOverlay";
+import type { CardQuickActionMode } from "@/lib/cardQuickActions";
 
 const DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
 
@@ -208,6 +209,7 @@ export default function ItemCard({
   libraryId,
   sortField,
   overlayPrefs,
+  quickActionMode = "none",
   narrowPosterActions = false,
   selectionMode = false,
   selected = false,
@@ -217,6 +219,7 @@ export default function ItemCard({
   libraryId?: number;
   sortField?: string;
   overlayPrefs?: CardOverlayPrefs | null;
+  quickActionMode?: CardQuickActionMode;
   narrowPosterActions?: boolean;
   selectionMode?: boolean;
   selected?: boolean;
@@ -373,6 +376,7 @@ export default function ItemCard({
           userState={item.user_state}
           variant="poster"
           narrowPosterActions={narrowPosterActions}
+          quickActionMode={quickActionMode}
           longPressRef={cardRef}
           itemTitle={displayTitle}
         />
diff --git a/web/src/components/ItemGrid.tsx b/web/src/components/ItemGrid.tsx
index 4346bd170..c455ef35c 100644
--- a/web/src/components/ItemGrid.tsx
+++ b/web/src/components/ItemGrid.tsx
@@ -50,7 +50,7 @@ export default function ItemGrid(props: ItemGridProps) {
     selectedIds,
     onToggleSelect,
   } = props;
-  const { prefs: overlayPrefs } = useOverlayPrefs();
+  const { prefs: overlayPrefs, quickActionMode } = useOverlayPrefs();
   const { cardPresentation } = useUICustomization();
   const gridGap = cardPresentation.poster_size === "large" ? 16 : 12;
   const gridClasses = cardGridClasses(cardPresentation.poster_size);
@@ -180,6 +180,7 @@ export default function ItemGrid(props: ItemGridProps) {
                         libraryId={libraryId}
                         sortField={sortField}
                         overlayPrefs={overlayPrefs}
+                        quickActionMode={quickActionMode}
                         narrowPosterActions={narrowPosterActions}
                         selectionMode={selectionMode}
                         selected={selectedIds?.has(item.content_id) ?? false}
diff --git a/web/src/components/Layout.test.tsx b/web/src/components/Layout.test.tsx
index 6fa31793a..319158c34 100644
--- a/web/src/components/Layout.test.tsx
+++ b/web/src/components/Layout.test.tsx
@@ -9,6 +9,7 @@ const mocks = vi.hoisted(() => ({
   location: { pathname: "/", search: "", key: "home" },
   navigate: vi.fn(),
   prefetchQuery: vi.fn(),
+  getQueryData: vi.fn(),
   renderSurface: true,
   beginResult: undefined as boolean | undefined,
   profile: {
@@ -33,7 +34,10 @@ vi.mock("@tanstack/react-query", async () => {
   );
   return {
     ...actual,
-    useQueryClient: () => ({ prefetchQuery: mocks.prefetchQuery }),
+    useQueryClient: () => ({
+      prefetchQuery: mocks.prefetchQuery,
+      getQueryData: mocks.getQueryData,
+    }),
   };
 });
 
@@ -145,6 +149,7 @@ beforeEach(() => {
   mocks.location = { pathname: "/", search: "", key: "home" };
   mocks.navigate.mockReset();
   mocks.prefetchQuery.mockReset();
+  mocks.getQueryData.mockReset();
   mocks.renderSurface = true;
   mocks.beginResult = undefined;
   mocks.profile = {
@@ -276,6 +281,32 @@ describe("Layout detail reveal", () => {
     ).toHaveTextContent("true");
   });
 
+  it("reveals immediately when the item detail is already cached", () => {
+    mocks.getQueryData.mockImplementation((queryKey: unknown) =>
+      JSON.stringify(queryKey) ===
+      JSON.stringify(catalogKeys.itemDetail("movie-1", undefined))
+        ? { content_id: "movie-1" }
+        : undefined,
+    );
+    const view = renderLayout();
+    setRoute("/item/movie-1", "item");
+
+    act(() =>
+      view.rerender(
+        <MemoryRouter>
+          <Layout>
+            <Harness />
+          </Layout>
+        </MemoryRouter>,
+      ),
+    );
+
+    expect(
+      screen.getByRole("status", { name: "details-ready" }),
+    ).toHaveTextContent("true");
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
   it("reveals as soon as the surface settles", () => {
     const view = renderLayout();
     setRoute("/item/movie-1", "item");
diff --git a/web/src/components/Layout.tsx b/web/src/components/Layout.tsx
index 12db38539..d1e3a5f41 100644
--- a/web/src/components/Layout.tsx
+++ b/web/src/components/Layout.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQueryClient, type QueryClient } from "@tanstack/react-query";
 import { Menu, Search } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
@@ -64,6 +64,7 @@ export default function Layout({ children }: LayoutProps) {
   const isHomePath = location.pathname === "/";
   const isLibraryRoute = location.pathname.startsWith("/library/");
   const isItemRoute = location.pathname.startsWith("/item/");
+  const itemRouteLocation = `${location.pathname}${location.search}`;
   // Breakpoint changes naturally cause other layout renders; navigation only
   // needs the viewport value at the moment it is attempted.
   const hasDesktopSidebar = window.matchMedia("(min-width: 64rem)").matches;
@@ -136,6 +137,15 @@ export default function Layout({ children }: LayoutProps) {
   // can never leave the item route on its lightweight shell indefinitely.
   useEffect(() => {
     if (!isItemRoute || !pendingLocationKey) return;
+
+    // The gate stages the collapse so the detail skeleton is not what animates
+    // into view. A prefetched detail has no skeleton to hide, so waiting for
+    // the sidebar would only delay a page that is already ready to paint.
+    if (hasCachedItemDetail(queryClient, itemRouteLocation)) {
+      revealItemDetails(pendingLocationKey);
+      return;
+    }
+
     const startedAt = Date.now();
     let timer: number;
     let cancelled = false;
@@ -168,7 +178,13 @@ export default function Layout({ children }: LayoutProps) {
       cancelled = true;
       window.clearTimeout(timer);
     };
-  }, [isItemRoute, pendingLocationKey, revealItemDetails]);
+  }, [
+    isItemRoute,
+    itemRouteLocation,
+    pendingLocationKey,
+    queryClient,
+    revealItemDetails,
+  ]);
 
   const handleSidebarTransitionEnd = useCallback(
     (event: ReactTransitionEvent<HTMLDivElement>) => {
@@ -365,3 +381,24 @@ export default function Layout({ children }: LayoutProps) {
     </SidebarItemNavigationProvider>
   );
 }
+
+/**
+ * Reports whether the detail for the item route currently being entered is
+ * already in the query cache — either prefetched by `beginItemNavigation` or
+ * left behind by an earlier visit.
+ */
+function hasCachedItemDetail(
+  queryClient: QueryClient,
+  itemRouteLocation: string,
+): boolean {
+  const target = parseItemNavigationHref(
+    itemRouteLocation,
+    window.location.origin,
+  );
+  if (!target) return false;
+  return (
+    queryClient.getQueryData(
+      catalogKeys.itemDetail(target.contentId, target.libraryId),
+    ) !== undefined
+  );
+}
diff --git a/web/src/components/MediaCarousel.tsx b/web/src/components/MediaCarousel.tsx
index ffe7df2e9..f0755862a 100644
--- a/web/src/components/MediaCarousel.tsx
+++ b/web/src/components/MediaCarousel.tsx
@@ -1,9 +1,11 @@
 import { Children } from "react";
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { Link } from "react-router";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useCarouselEmbla } from "@/hooks/useCarouselEmbla";
+import { useUICustomization } from "@/hooks/useUICustomization";
+import { carouselIntrinsicHeight } from "@/lib/uiCustomization";
 
 interface MediaCarouselProps {
   title: string;
@@ -38,6 +40,7 @@ export default function MediaCarousel({
 }: MediaCarouselProps) {
   const { emblaRef, canScrollPrev, canScrollNext, scrollPrev, scrollNext } =
     useCarouselEmbla();
+  const { cardPresentation } = useUICustomization();
   // Page-edge padding is opt-out so the carousel can also be embedded in an
   // already-padded container without double-padding the header and cards.
   const headerPadX = edgePadding ? " px-4 sm:px-6 lg:px-10 xl:px-12" : "";
@@ -54,7 +57,16 @@ export default function MediaCarousel({
     : Children.toArray(children);
 
   return (
-    <section className="section-row group/carousel relative isolate">
+    <section
+      className="section-row media-carousel group/carousel relative isolate"
+      style={
+        {
+          "--carousel-intrinsic-h": carouselIntrinsicHeight(
+            cardPresentation.poster_size,
+          ),
+        } as CSSProperties
+      }
+    >
       <div className={`mb-5 flex items-end justify-between gap-4${headerPadX}`}>
         <div className="flex items-center gap-2">
           {titleHref ? (
diff --git a/web/src/components/MediaItemMenu.test.tsx b/web/src/components/MediaItemMenu.test.tsx
index 13c53192c..475617c0e 100644
--- a/web/src/components/MediaItemMenu.test.tsx
+++ b/web/src/components/MediaItemMenu.test.tsx
@@ -430,6 +430,7 @@ describe("MediaItemMenu trigger visibility", () => {
     expect(className).not.toContain("opacity-");
     expect(className).not.toContain("group-hover");
     expect(className).not.toContain("group-focus-within");
+    expect(className).not.toContain("backdrop-blur");
     expect(className).toContain("focus-visible:ring-2");
     expect(className).toContain("size-6");
     expect(className).toContain("sm:size-8");
@@ -443,6 +444,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -467,6 +469,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -491,6 +494,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -516,6 +520,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -536,6 +541,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -568,6 +574,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -611,6 +618,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -632,6 +640,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -680,6 +689,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="wide"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -694,6 +704,7 @@ describe("MediaItemMenu trigger visibility", () => {
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="wide"
           showWatchedShortcut
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -709,6 +720,7 @@ describe("MediaItemMenu trigger visibility", () => {
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
           narrowPosterActions
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -733,6 +745,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -749,6 +762,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="episode"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -763,6 +777,7 @@ describe("MediaItemMenu trigger visibility", () => {
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
           showWatchedShortcut
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -770,6 +785,44 @@ describe("MediaItemMenu trigger visibility", () => {
     expect(screen.getByRole("button", { name: "Mark Watched" })).toBeTruthy();
   });
 
+  it("shows only the quick actions selected by the resolved profile mode", () => {
+    const userState = {
+      played: false,
+      is_favorite: false,
+      in_watchlist: false,
+    };
+    const renderMenu = (quickActionMode: "favorites" | "watched" | "none") => (
+      <MemoryRouter>
+        <MediaItemMenu
+          contentId="movie-1"
+          mediaType="movie"
+          userState={userState}
+          variant="poster"
+          quickActionMode={quickActionMode}
+        />
+      </MemoryRouter>
+    );
+    const { rerender } = render(renderMenu("favorites"));
+
+    expect(
+      screen.getByRole("button", { name: "Add to favorites" }),
+    ).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Mark Watched" })).toBeNull();
+
+    rerender(renderMenu("watched"));
+    expect(
+      screen.queryByRole("button", { name: "Add to favorites" }),
+    ).toBeNull();
+    expect(screen.getByRole("button", { name: "Mark Watched" })).toBeTruthy();
+
+    rerender(renderMenu("none"));
+    expect(
+      screen.queryByRole("button", { name: "Add to favorites" }),
+    ).toBeNull();
+    expect(screen.queryByRole("button", { name: "Mark Watched" })).toBeNull();
+    expect(screen.getByRole("button", { name: "More actions" })).toBeTruthy();
+  });
+
   it("uses matching action icons and sizes the menu to its longest entry", async () => {
     mocks.authState = { user: { role: "admin" } };
     render(
@@ -780,6 +833,7 @@ describe("MediaItemMenu trigger visibility", () => {
           userState={{ played: true, is_favorite: true, in_watchlist: false }}
           variant="poster"
           dismissAction={{ itemId: "movie-1", surface: "continue_watching" }}
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -827,6 +881,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -861,6 +916,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -896,6 +952,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -935,6 +992,7 @@ describe("MediaItemMenu trigger visibility", () => {
           variant="wide"
           showCollectionActions={false}
           showWatchedShortcut
+          quickActionMode="both"
         />
       </MemoryRouter>
     );
@@ -958,6 +1016,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -999,6 +1058,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -1032,6 +1092,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -1057,6 +1118,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: true, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -1085,6 +1147,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: true, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -1113,6 +1176,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -1134,6 +1198,7 @@ describe("MediaItemMenu trigger visibility", () => {
           mediaType="movie"
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="wide"
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -1150,6 +1215,7 @@ describe("MediaItemMenu trigger visibility", () => {
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
           showCollectionActions={false}
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -1168,6 +1234,7 @@ describe("MediaItemMenu trigger visibility", () => {
           userState={{ played: false, is_favorite: false, in_watchlist: false }}
           variant="poster"
           showFavoriteShortcut={false}
+          quickActionMode="both"
         />
       </MemoryRouter>,
     );
@@ -1205,6 +1272,7 @@ describe("MediaItemMenu long-press action sheet", () => {
             variant="poster"
             longPressRef={cardRef}
             itemTitle="Apex"
+            quickActionMode="both"
           />
         </div>
       </MemoryRouter>
@@ -1332,4 +1400,32 @@ describe("MediaItemMenu long-press action sheet", () => {
     expect(mocks.toggleWatched).toHaveBeenCalledWith(true);
     expect(screen.queryByRole("dialog")).toBeNull();
   });
+
+  it("keeps long press while omitting desktop-only shortcut trees on coarse-pointer devices", () => {
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn(() => ({
+        matches: false,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      })),
+    );
+
+    render(<LongPressCard />);
+
+    expect(screen.queryByRole("button", { name: "Mark Watched" })).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Add to favorites" }),
+    ).toBeNull();
+    expect(screen.getByRole("button", { name: "More actions" })).toBeTruthy();
+
+    pressCard();
+    holdPastLongPress();
+
+    expect(
+      within(screen.getByRole("dialog")).getByRole("button", {
+        name: "Mark Watched",
+      }),
+    ).toBeTruthy();
+  });
 });
diff --git a/web/src/components/MediaItemMenu.tsx b/web/src/components/MediaItemMenu.tsx
index d600d6766..26a351cbf 100644
--- a/web/src/components/MediaItemMenu.tsx
+++ b/web/src/components/MediaItemMenu.tsx
@@ -64,6 +64,7 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet";
 import { useLongPress } from "@/hooks/useLongPress";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 import { cn } from "@/lib/utils";
 import { useWatchPlaybackController } from "@/playback/watchPlaybackContext";
 import { buildMediaPlayHref } from "@/lib/mediaNavigation";
@@ -75,9 +76,22 @@ import {
 } from "@/components/mediaItemMenuTrigger";
 import { useUICustomization } from "@/hooks/useUICustomization";
 import { MediaActionIcon } from "@/components/mediaActionIcons";
+import {
+  showsFavoriteQuickAction,
+  showsWatchedQuickAction,
+  type CardQuickActionMode,
+} from "@/lib/cardQuickActions";
 
 type MediaItemType = ItemDetail["type"];
 
+const FINE_POINTER_QUERY = "(any-hover: hover) and (any-pointer: fine)";
+
+function useHasFinePointer() {
+  // Preserve the established quick actions in SSR, tests, and older browsers
+  // without matchMedia. Touch-capable modern browsers report this accurately.
+  return useMediaQuery(FINE_POINTER_QUERY, true);
+}
+
 type MediaItemMenuEntry =
   | {
       kind: "action";
@@ -127,6 +141,8 @@ interface MediaItemMenuProps {
   showWatchedShortcut?: boolean;
   /** Uses smaller poster controls on narrow catalog cards. */
   narrowPosterActions?: boolean;
+  /** Which watched/favorite shortcuts appear outside the overflow menu. */
+  quickActionMode?: CardQuickActionMode;
   /** Card root whose long press opens the touch action sheet. */
   longPressRef?: RefObject<HTMLElement | null>;
   /** Heading for the touch action sheet. */
@@ -713,6 +729,7 @@ export default function MediaItemMenu({
   hasPartialProgress = false,
   showWatchedShortcut = false,
   narrowPosterActions = false,
+  quickActionMode = "none",
   longPressRef,
   itemTitle,
 }: MediaItemMenuProps) {
@@ -726,6 +743,7 @@ export default function MediaItemMenu({
   const canCurateMetadata =
     profileIsResolved && canCurateMetadataForUser(user, currentProfile);
   const { cardPresentation } = useUICustomization();
+  const hasFinePointer = useHasFinePointer();
   const [currentUserState, setCurrentUserState] = useState(userState);
   const lastSyncedUserStateRef = useRef(userState);
   const [refreshDialogOpen, setRefreshDialogOpen] = useState(false);
@@ -734,6 +752,12 @@ export default function MediaItemMenu({
     null,
   );
   const [actionSheetOpen, setActionSheetOpen] = useState(false);
+  // A card that has never opened one of these surfaces mounts nothing — a home
+  // page holds hundreds of cards. Once opened, the overlay stays mounted so
+  // closing runs its exit animation and restores focus instead of vanishing.
+  const [actionSheetMounted, setActionSheetMounted] = useState(false);
+  const [refreshDialogMounted, setRefreshDialogMounted] = useState(false);
+  const [filesDialogMounted, setFilesDialogMounted] = useState(false);
   const menuTriggerRef = useRef<HTMLButtonElement>(null);
   const lastMenuInteractionRef = useRef<"keyboard" | "pointer" | null>(null);
   const pointerClosedMenuRef = useRef(false);
@@ -787,12 +811,17 @@ export default function MediaItemMenu({
     dismissLabel,
   });
   useLongPress(longPressRef, {
-    onLongPress: () => setActionSheetOpen(true),
+    onLongPress: () => {
+      setActionSheetMounted(true);
+      setActionSheetOpen(true);
+    },
     enabled: model.length > 0,
   });
   const showPosterFavorite =
+    hasFinePointer &&
     variant === "poster" &&
     showFavoriteShortcut &&
+    showsFavoriteQuickAction(quickActionMode) &&
     model.some(
       (entry) => entry.kind === "action" && entry.key === "toggleFavorite",
     );
@@ -802,6 +831,8 @@ export default function MediaItemMenu({
   const rootPosterSupportsWatchedShortcut =
     variant === "poster" && (mediaType === "movie" || mediaType === "series");
   const showWatchedQuickAction =
+    hasFinePointer &&
+    showsWatchedQuickAction(quickActionMode) &&
     hasWatchedAction &&
     (rootPosterSupportsWatchedShortcut || showWatchedShortcut);
   const posterActionDensity: PosterActionDensity =
@@ -897,6 +928,7 @@ export default function MediaItemMenu({
         return;
       }
       case "viewDetails": {
+        setFilesDialogMounted(true);
         setFilesDialogOpen(true);
         return;
       }
@@ -912,6 +944,7 @@ export default function MediaItemMenu({
         return;
       }
       case "refreshMetadata": {
+        setRefreshDialogMounted(true);
         setRefreshDialogOpen(true);
         return;
       }
@@ -1085,25 +1118,29 @@ export default function MediaItemMenu({
           </DropdownMenu>
         )}
       </div>
-      <MediaItemActionSheet
-        open={actionSheetOpen}
-        onOpenChange={setActionSheetOpen}
-        title={itemTitle}
-        entries={model}
-        userState={currentUserState}
-        isPending={isPending}
-        isRefreshing={refreshMetadataMutation.isPending}
-        onSelectAction={(actionKey) => {
-          setActionSheetOpen(false);
-          void handleAction(actionKey);
-        }}
-      />
-      <RefreshMetadataDialog
-        open={refreshDialogOpen}
-        onOpenChange={setRefreshDialogOpen}
-        onConfirm={handleRefreshConfirm}
-        isPending={refreshMetadataMutation.isPending}
-      />
+      {actionSheetMounted && (
+        <MediaItemActionSheet
+          open={actionSheetOpen}
+          onOpenChange={setActionSheetOpen}
+          title={itemTitle}
+          entries={model}
+          userState={currentUserState}
+          isPending={isPending}
+          isRefreshing={refreshMetadataMutation.isPending}
+          onSelectAction={(actionKey) => {
+            setActionSheetOpen(false);
+            void handleAction(actionKey);
+          }}
+        />
+      )}
+      {refreshDialogMounted && (
+        <RefreshMetadataDialog
+          open={refreshDialogOpen}
+          onOpenChange={setRefreshDialogOpen}
+          onConfirm={handleRefreshConfirm}
+          isPending={refreshMetadataMutation.isPending}
+        />
+      )}
       {metadataAction && (
         <MetadataActionDialogHost
           action={metadataAction}
@@ -1112,7 +1149,7 @@ export default function MediaItemMenu({
           onClose={() => setMetadataAction(null)}
         />
       )}
-      {mediaType === "manga" && (
+      {mediaType === "manga" && filesDialogMounted && (
         <MangaFilesDialog
           contentId={contentId}
           open={filesDialogOpen}
diff --git a/web/src/components/NowListeningHero.tsx b/web/src/components/NowListeningHero.tsx
index 1a62a1229..4fcafa044 100644
--- a/web/src/components/NowListeningHero.tsx
+++ b/web/src/components/NowListeningHero.tsx
@@ -50,7 +50,7 @@ export default function NowListeningHero({
 }: NowListeningHeroProps) {
   const deck = section.items[0];
   const rest = section.items.slice(1);
-  const { prefs: overlayPrefs } = useOverlayPrefs();
+  const { prefs: overlayPrefs, quickActionMode } = useOverlayPrefs();
   const audiobookPlayback = useAudiobookPlaybackController();
   // The section payload has no chapters or credits; the item detail fills in
   // author/narrator, chapter marks, and the files needed for one-click resume.
@@ -284,6 +284,7 @@ export default function NowListeningHero({
               sectionItem={item}
               libraryId={libraryId}
               overlayPrefs={overlayPrefs}
+              quickActionMode={quickActionMode}
               variant="poster"
             />
           ))}
diff --git a/web/src/components/RealtimeEventsProvider.tsx b/web/src/components/RealtimeEventsProvider.tsx
index dd3953bf4..abae2ff79 100644
--- a/web/src/components/RealtimeEventsProvider.tsx
+++ b/web/src/components/RealtimeEventsProvider.tsx
@@ -29,7 +29,13 @@ import {
   type RealtimeConnectionState,
   type RealtimeEventsContextValue,
 } from "@/components/realtimeEventsContext";
-import { invalidateCatalogState } from "@/components/realtimeCatalogInvalidation";
+import {
+  createCatalogInvalidationScheduler,
+  invalidateCatalogState,
+  scheduleProgressHomeRefresh,
+  userStateChangeAffectsSectionMembership,
+} from "@/components/realtimeCatalogInvalidation";
+import { bumpHomeRefreshSignal } from "@/pages/homeSurfaceRefresh";
 import { useAuth } from "@/hooks/useAuth";
 import { useIsActingAdmin } from "@/hooks/useIsActingAdmin";
 import { usePageActivity } from "@/hooks/usePageActivity";
@@ -37,6 +43,7 @@ import {
   adminKeys,
   historyImportKeys,
   libraryKeys,
+  sectionKeys,
 } from "@/hooks/queries/keys";
 import {
   scheduleMediaSurfaceInvalidation,
@@ -73,10 +80,6 @@ const CATALOG_ITEM_CHANGED_EVENTS = new Set([
   "library.item_added",
   "metadata.updated",
 ]);
-const SCOPED_CATALOG_LIBRARY_EVENTS = new Set([
-  "catalog.library.changed",
-  "library.changed",
-]);
 const DASHBOARD_QUERY_KEYS = [
   adminKeys.stats(),
   adminKeys.sessions(),
@@ -309,6 +312,14 @@ function catalogEventLibraryID(data: unknown) {
     : undefined;
 }
 
+function catalogEventContentID(data: unknown) {
+  if (!data || typeof data !== "object" || !("content_id" in data)) {
+    return undefined;
+  }
+  const value = (data as { content_id?: unknown }).content_id;
+  return typeof value === "string" && value ? value : undefined;
+}
+
 function handleJobSideEffects(
   queryClient: QueryClient,
   job: AdminJob,
@@ -512,6 +523,18 @@ function handleUserStateEvent(
         }
       : { skipSimilarItems: true },
   );
+  // Resetting home's load queue re-runs every section fetch. Membership
+  // changes do it immediately; progress ticks coalesce into one trailing
+  // refresh per window so an open home still catches another client's
+  // playback without a per-tick storm. Mark the home sections stale before
+  // an immediate reset because the surface invalidation above is debounced.
+  if (userStateChangeAffectsSectionMembership(payload.change)) {
+    void queryClient
+      .invalidateQueries({ queryKey: sectionKeys.home(), refetchType: "none" })
+      .then(() => bumpHomeRefreshSignal(queryClient));
+  } else {
+    scheduleProgressHomeRefresh(queryClient);
+  }
   void queryClient.invalidateQueries({
     queryKey: adminKeys.stats(),
     refetchType: allowDashboardRefetch ? "active" : "none",
@@ -531,6 +554,10 @@ export function RealtimeEventsProvider({ children }: { children: ReactNode }) {
     !isDashboardRoute || pageActivity.canPollDashboard;
   const [connectionState, setConnectionState] =
     useState<RealtimeConnectionState>("connecting");
+  const catalogInvalidation = useMemo(
+    () => createCatalogInvalidationScheduler(queryClient),
+    [queryClient],
+  );
   const reconnectTimerRef = useRef<number | undefined>(undefined);
   const profileRebindAttemptsRef = useRef(0);
   const nextReconnectDelayRef = useRef<number | null>(null);
@@ -556,6 +583,8 @@ export function RealtimeEventsProvider({ children }: { children: ReactNode }) {
   canApplyRealtimeUpdatesRef.current = pageActivity.canApplyRealtimeUpdates;
   allowDashboardRealtimeUpdatesRef.current = allowDashboardRealtimeUpdates;
 
+  useEffect(() => () => catalogInvalidation.cancel(), [catalogInvalidation]);
+
   const settleWaiterRef = useRef<(job: AdminJob) => void>(() => {});
   settleWaiterRef.current = (job: AdminJob) => {
     const waiter = waitersRef.current.get(job.id);
@@ -758,33 +787,17 @@ export function RealtimeEventsProvider({ children }: { children: ReactNode }) {
     switch (message.channel) {
       case "catalog":
         {
-          const eventLibraryID = catalogEventLibraryID(message.data);
-          if (CATALOG_ITEM_CHANGED_EVENTS.has(message.event)) {
-            invalidateCatalogState(queryClient, {
-              itemId:
-                typeof message.data === "object" &&
-                message.data &&
-                "content_id" in message.data
-                  ? (message.data as { content_id?: string }).content_id
-                  : undefined,
-              libraryId: eventLibraryID,
-              allowDashboardRefetch: allowDashboardRealtimeUpdatesRef.current,
-              includeLibraryLists: false,
-            });
-          } else if (
-            SCOPED_CATALOG_LIBRARY_EVENTS.has(message.event) &&
-            eventLibraryID
-          ) {
-            invalidateCatalogState(queryClient, {
-              libraryId: eventLibraryID,
-              allowDashboardRefetch: allowDashboardRealtimeUpdatesRef.current,
-            });
-          } else {
-            invalidateCatalogState(queryClient, {
-              libraryId: eventLibraryID,
-              allowDashboardRefetch: allowDashboardRealtimeUpdatesRef.current,
-            });
-          }
+          const isItemChange = CATALOG_ITEM_CHANGED_EVENTS.has(message.event);
+          catalogInvalidation.schedule({
+            itemId: isItemChange
+              ? catalogEventContentID(message.data)
+              : undefined,
+            libraryId: catalogEventLibraryID(message.data),
+            allowDashboardRefetch: allowDashboardRealtimeUpdatesRef.current,
+            // An item changing inside a library does not change the set of
+            // libraries, so the admin library lists stay untouched.
+            includeLibraryLists: !isItemChange,
+          });
         }
         break;
       case "jobs":
@@ -864,11 +877,6 @@ export function RealtimeEventsProvider({ children }: { children: ReactNode }) {
     });
   }, [authenticatedUserID, pageActivity.canApplyRealtimeUpdates, queryClient]);
 
-  const handleSnapshotRef = useRef(handleSnapshot);
-  handleSnapshotRef.current = handleSnapshot;
-  const handleEventRef = useRef(handleEvent);
-  handleEventRef.current = handleEvent;
-
   useEffect(() => {
     if (!authenticatedUserID || !pageActivity.canApplyRealtimeUpdates) {
       setConnectionState("disconnected");
@@ -877,8 +885,6 @@ export function RealtimeEventsProvider({ children }: { children: ReactNode }) {
 
     let closedByEffect = false;
     let activeSocket: WebSocket | null = null;
-    // Capture once; waiters are mutated in place for the lifetime of this provider.
-    const waiters = waitersRef.current;
 
     const clearReconnect = () => {
       if (reconnectTimerRef.current !== undefined) {
@@ -993,10 +999,10 @@ export function RealtimeEventsProvider({ children }: { children: ReactNode }) {
             return;
           }
           case "snapshot":
-            handleSnapshotRef.current(message);
+            handleSnapshot(message);
             return;
           case "event":
-            handleEventRef.current(message);
+            handleEvent(message);
             return;
           case "error":
             return;
@@ -1029,7 +1035,7 @@ export function RealtimeEventsProvider({ children }: { children: ReactNode }) {
     return () => {
       closedByEffect = true;
       clearReconnect();
-      for (const [jobId, waiter] of waiters) {
+      for (const [jobId, waiter] of waitersRef.current) {
         window.clearTimeout(waiter.timeoutId);
         waiter.reject(
           new Error(
@@ -1037,7 +1043,7 @@ export function RealtimeEventsProvider({ children }: { children: ReactNode }) {
           ),
         );
       }
-      waiters.clear();
+      waitersRef.current.clear();
       const socket = activeSocket;
       if (socket && socketRef.current === socket) {
         socketRef.current = null;
diff --git a/web/src/components/SectionItemCard.test.tsx b/web/src/components/SectionItemCard.test.tsx
index fd2745abf..28c25d4e4 100644
--- a/web/src/components/SectionItemCard.test.tsx
+++ b/web/src/components/SectionItemCard.test.tsx
@@ -24,10 +24,6 @@ vi.mock("@/components/overlays/CardOverlays", () => ({
   default: () => null,
 }));
 
-vi.mock("@/hooks/useOverlayPrefs", () => ({
-  useOverlayPrefs: () => ({ prefs: null }),
-}));
-
 describe("SectionItemCard", () => {
   it("encodes item links while preserving library context", () => {
     const markup = renderToStaticMarkup(
diff --git a/web/src/components/SectionItemCard.tsx b/web/src/components/SectionItemCard.tsx
index cdc5edeee..170fcf6fb 100644
--- a/web/src/components/SectionItemCard.tsx
+++ b/web/src/components/SectionItemCard.tsx
@@ -1,13 +1,14 @@
 import { useRef } from "react";
 import { useImageLoaded } from "@/hooks/useImageLoaded";
-import { ArtworkImage } from "@/components/ArtworkImage";
-import { POSTER_WIDTHS } from "@/lib/artworkUrl";
 import ViewTransitionLink from "@/components/ViewTransitionLink";
 import MediaItemMenu from "@/components/MediaItemMenu";
 import CardOverlays from "@/components/overlays/CardOverlays";
 import { decodeThumbhash } from "@/lib/thumbhash";
-import { useOverlayPrefs } from "@/hooks/useOverlayPrefs";
-import { overlayDataFromSectionItem } from "@/lib/overlays";
+import {
+  overlayDataFromSectionItem,
+  type CardOverlayPrefs,
+} from "@/lib/overlays";
+import type { CardQuickActionMode } from "@/lib/cardQuickActions";
 import { buildEpisodeCardLabels } from "@/lib/episodeCardLabels";
 import {
   formatUpcomingDate,
@@ -24,18 +25,21 @@ import CardPlayOverlay from "@/components/CardPlayOverlay";
 interface SectionItemCardProps {
   item: SectionItem;
   libraryId?: number;
+  overlayPrefs?: CardOverlayPrefs | null;
+  quickActionMode?: CardQuickActionMode;
 }
 
 export default function SectionItemCard({
   item,
   libraryId,
+  overlayPrefs = null,
+  quickActionMode = "none",
 }: SectionItemCardProps) {
   const { loaded, onLoad } = useImageLoaded(item.poster_url);
   const thumbhashUrl = item.poster_thumbhash
     ? decodeThumbhash(item.poster_thumbhash)
     : "";
   const itemHref = buildItemHref({ contentId: item.content_id, libraryId });
-  const { prefs: overlayPrefs } = useOverlayPrefs();
   const upcomingEvent = item.upcoming_event;
   const subtitle = upcomingEvent ? formatUpcomingSubtitle(upcomingEvent) : "";
   const airDateLabel = upcomingEvent
@@ -77,13 +81,9 @@ export default function SectionItemCard({
             }
           >
             {item.poster_url ? (
-              <ArtworkImage
+              <img
                 src={item.poster_url}
-                avifSrc={item.poster_avif_url}
-                pngSrc={item.poster_png_url}
                 alt={item.title}
-                widths={POSTER_WIDTHS}
-                sizes="(max-width: 640px) 42vw, (max-width: 1024px) 18vw, 160px"
                 className={`h-full w-full object-cover transition-opacity duration-300 ${loaded ? "opacity-100" : "opacity-0"}`}
                 loading="lazy"
                 onLoad={onLoad}
@@ -137,6 +137,7 @@ export default function SectionItemCard({
           libraryId={libraryId}
           userState={item.user_state}
           variant="poster"
+          quickActionMode={quickActionMode}
           longPressRef={cardRef}
           itemTitle={displayTitle}
         />
diff --git a/web/src/components/SectionRow.tsx b/web/src/components/SectionRow.tsx
index f8f45cf5f..4fb0a9a4e 100644
--- a/web/src/components/SectionRow.tsx
+++ b/web/src/components/SectionRow.tsx
@@ -57,7 +57,7 @@ function SectionPinButton({
 export default function SectionRow({ section, libraryId }: SectionRowProps) {
   const navigate = useViewTransitionNavigate();
   const browseSupported = isSectionBrowseSupported(section.section_type);
-  const { prefs: overlayPrefs } = useOverlayPrefs();
+  const { prefs: overlayPrefs, quickActionMode } = useOverlayPrefs();
   const { cardPresentation } = useUICustomization();
   const posterWidthClasses = carouselCardWidthClasses(
     cardPresentation.poster_size,
@@ -130,6 +130,7 @@ export default function SectionRow({ section, libraryId }: SectionRowProps) {
                 sectionItem={item}
                 libraryId={libraryId}
                 overlayPrefs={overlayPrefs}
+                quickActionMode={quickActionMode}
                 variant={cardVariant}
               />
             ));
@@ -140,7 +141,12 @@ export default function SectionRow({ section, libraryId }: SectionRowProps) {
               className={posterWidthClasses}
               role="listitem"
             >
-              <SectionItemCard item={item} libraryId={libraryId} />
+              <SectionItemCard
+                item={item}
+                libraryId={libraryId}
+                overlayPrefs={overlayPrefs}
+                quickActionMode={quickActionMode}
+              />
             </div>
           ))}
     </MediaCarousel>
diff --git a/web/src/components/ThemeSwitcher.tsx b/web/src/components/ThemeSwitcher.tsx
deleted file mode 100644
index dd7a05724..000000000
--- a/web/src/components/ThemeSwitcher.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useTheme } from "@/hooks/useTheme";
-import { CURATED_THEME_IDS, THEMES } from "@/lib/themes";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { Check } from "lucide-react";
-
-export default function ThemeSwitcher() {
-  const { theme, setTheme, previewTheme, resetPreviewTheme } = useTheme();
-
-  return (
-    <div className="grid gap-1.5">
-      {CURATED_THEME_IDS.map((id) => {
-        const def = THEMES[id];
-        const isActive = theme === id;
-        return (
-          <DropdownMenuItem
-            key={id}
-            onClick={() => setTheme(id)}
-            onFocus={() => previewTheme(id)}
-            onBlur={resetPreviewTheme}
-            onMouseEnter={() => previewTheme(id)}
-            onMouseLeave={resetPreviewTheme}
-            className={`rounded-xl border px-2.5 py-2.5 ${isActive ? "border-primary/35 bg-accent/70" : "border-transparent bg-transparent"} flex items-start gap-3`}
-          >
-            <div
-              className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border"
-              style={{
-                backgroundColor: def.previewBg,
-                borderColor: isActive
-                  ? def.previewAccent
-                  : "color-mix(in srgb, var(--border) 70%, transparent)",
-              }}
-            >
-              <div className="flex items-center gap-1.5">
-                <div
-                  className="h-3 w-3 rounded-full"
-                  style={{ backgroundColor: def.previewAccent }}
-                />
-                <div className="h-3 w-1.5 rounded-full bg-white/60" />
-              </div>
-            </div>
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center gap-2">
-                <span className="truncate text-sm font-medium">
-                  {def.label}
-                </span>
-                {isActive && (
-                  <Check className="text-primary h-4 w-4 shrink-0" />
-                )}
-              </div>
-              {def.description ? (
-                <p className="text-muted-foreground mt-0.5 line-clamp-2 text-xs leading-relaxed">
-                  {def.description}
-                </p>
-              ) : null}
-            </div>
-          </DropdownMenuItem>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/web/src/components/UnsavedChangesGuard.test.tsx b/web/src/components/UnsavedChangesGuard.test.tsx
new file mode 100644
index 000000000..2e2e7c215
--- /dev/null
+++ b/web/src/components/UnsavedChangesGuard.test.tsx
@@ -0,0 +1,152 @@
+// @vitest-environment jsdom
+
+import { useState } from "react";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createMemoryRouter, Link, RouterProvider } from "react-router";
+import { describe, expect, it } from "vitest";
+
+import { useReportUnsavedChanges } from "@/hooks/useUnsavedChanges";
+
+import { UnsavedChangesGuard } from "./UnsavedChangesGuard";
+
+// Radix marks the rest of the page inert while a modal dialog is open, which
+// jsdom reports as pointer-events: none on everything below <body>.
+const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+function DraftPage() {
+  const [draft, setDraft] = useState("");
+  useReportUnsavedChanges(draft !== "");
+
+  return (
+    <div>
+      <h1>Draft page</h1>
+      <label>
+        Server name
+        <input
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+        />
+      </label>
+      <Link to="/other">Other page</Link>
+      <Link to="/draft?tab=advanced">Same page, other tab</Link>
+    </div>
+  );
+}
+
+function renderGuard(initialEntries: string[] = ["/draft"]) {
+  const router = createMemoryRouter(
+    [
+      {
+        path: "/draft",
+        element: (
+          <>
+            <UnsavedChangesGuard />
+            <DraftPage />
+          </>
+        ),
+      },
+      { path: "/other", element: <h1>Other page</h1> },
+    ],
+    { initialEntries },
+  );
+
+  return { router, ...render(<RouterProvider router={router} />) };
+}
+
+describe("UnsavedChangesGuard", () => {
+  it("lets a clean page navigate away without asking", async () => {
+    renderGuard();
+
+    await user.click(screen.getByRole("link", { name: "Other page" }));
+
+    expect(
+      screen.getByRole("heading", { name: "Other page" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument();
+  });
+
+  it("keeps the page and its edits when the prompt is cancelled", async () => {
+    renderGuard();
+
+    const field = screen.getByLabelText("Server name");
+    await user.type(field, "Casa");
+    await user.click(screen.getByRole("link", { name: "Other page" }));
+
+    expect(
+      await screen.findByRole("alertdialog", {
+        name: "Discard unsaved changes?",
+      }),
+    ).toBeInTheDocument();
+    // The page behind an open modal is aria-hidden, so it is only reachable by
+    // text while the prompt is up.
+    expect(screen.getByText("Draft page")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Draft page" }),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Server name")).toHaveValue("Casa");
+  });
+
+  it("navigates once the edits are discarded", async () => {
+    renderGuard();
+
+    await user.type(screen.getByLabelText("Server name"), "Casa");
+    await user.click(screen.getByRole("link", { name: "Other page" }));
+    await user.click(await screen.findByRole("button", { name: "Discard" }));
+
+    expect(
+      await screen.findByRole("heading", { name: "Other page" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument();
+  });
+
+  it("prompts on browser back as well as on in-app links", async () => {
+    const { router } = renderGuard(["/other", "/draft"]);
+
+    await user.type(screen.getByLabelText("Server name"), "Casa");
+    await act(async () => {
+      await router.navigate(-1);
+    });
+
+    expect(await screen.findByRole("alertdialog")).toBeInTheDocument();
+    expect(screen.getByText("Draft page")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Discard" }));
+
+    expect(
+      await screen.findByRole("heading", { name: "Other page" }),
+    ).toBeInTheDocument();
+  });
+
+  it("does not prompt when only the search string changes", async () => {
+    renderGuard();
+
+    await user.type(screen.getByLabelText("Server name"), "Casa");
+    await user.click(
+      screen.getByRole("link", { name: "Same page, other tab" }),
+    );
+
+    expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Draft page" }),
+    ).toBeInTheDocument();
+  });
+
+  it("stops guarding once the form goes clean", async () => {
+    renderGuard();
+
+    const field = screen.getByLabelText("Server name");
+    await user.type(field, "Casa");
+    await user.clear(field);
+    await user.click(screen.getByRole("link", { name: "Other page" }));
+
+    expect(
+      screen.getByRole("heading", { name: "Other page" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/components/UnsavedChangesGuard.tsx b/web/src/components/UnsavedChangesGuard.tsx
new file mode 100644
index 000000000..9421bf332
--- /dev/null
+++ b/web/src/components/UnsavedChangesGuard.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useRef } from "react";
+import { useBlocker } from "react-router";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useHasUnsavedChanges } from "@/hooks/useUnsavedChanges";
+
+/**
+ * Confirms before an in-app navigation throws away staged edits.
+ *
+ * Mount it once inside the shell that owns the forms (it covers everything they
+ * can navigate to: nav rails, back links, the surrounding sidebar, and browser
+ * back/forward, since every one of those goes through the router). Forms
+ * announce themselves through `useReportUnsavedChanges`; tab close and reload
+ * stay with the `beforeunload` guard in `useSettingsForm`, which is the only
+ * thing the browser lets us intercept there.
+ *
+ * `useBlocker` needs a data router — the app mounts one in `App.tsx`, and tests
+ * rendering this component need `createMemoryRouter` rather than
+ * `<MemoryRouter>`.
+ */
+export function UnsavedChangesGuard() {
+  const hasUnsavedChanges = useHasUnsavedChanges();
+  const blocker = useBlocker(
+    ({ currentLocation, nextLocation }) =>
+      // Search-only updates (a tab id, a filter) keep the form mounted, so they
+      // lose nothing and must not prompt.
+      hasUnsavedChanges && currentLocation.pathname !== nextLocation.pathname,
+  );
+  const proceeding = useRef(false);
+
+  useEffect(() => {
+    if (blocker.state !== "blocked") {
+      proceeding.current = false;
+    }
+  }, [blocker.state]);
+
+  return (
+    <AlertDialog
+      open={blocker.state === "blocked"}
+      onOpenChange={(open) => {
+        // Cancel, Escape and the overlay all close the dialog and mean "stay
+        // here". Discard closes it too, but only after the navigation is
+        // already on its way — resetting then would resurrect the blocker.
+        if (open || proceeding.current) return;
+        blocker.reset?.();
+      }}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This page has edits that were never saved. Leaving now throws them
+            away.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            variant="destructive"
+            onClick={() => {
+              proceeding.current = true;
+              blocker.proceed?.();
+            }}
+          >
+            Discard
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/web/src/components/admin/BrandingAssetField.test.tsx b/web/src/components/admin/BrandingAssetField.test.tsx
new file mode 100644
index 000000000..95102f175
--- /dev/null
+++ b/web/src/components/admin/BrandingAssetField.test.tsx
@@ -0,0 +1,145 @@
+// @vitest-environment jsdom
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/hooks/queries/admin/branding", () => ({
+  useUploadBrandingAsset: () => ({ mutate: vi.fn(), isPending: false }),
+  useDeleteBrandingAsset: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
+import { BrandingAssetField } from "./BrandingAssetField";
+import { BRANDING_ASSET_SPECS } from "./brandingAssetSpecs";
+
+describe("BrandingAssetField", () => {
+  it("previews the bundled default, dimmed and captioned, when nothing is uploaded", () => {
+    render(
+      <BrandingAssetField
+        label="Logo (wordmark)"
+        kind="wordmark"
+        currentUrl={null}
+        accept="image/png"
+        enabled
+      />,
+    );
+
+    const preview = screen.getByAltText("Logo (wordmark) preview");
+    expect(preview).toHaveAttribute("src", "/prairie-wordmark-sidebar.png");
+    expect(preview.className).toContain("opacity-40");
+    expect(screen.getByText("Default")).toBeInTheDocument();
+    // Nothing to remove while the default is what is being served.
+    expect(
+      screen.queryByRole("button", { name: "Remove Logo (wordmark)" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Upload/ })).toBeInTheDocument();
+  });
+
+  it("previews the main asset an empty light slot actually falls back to", () => {
+    render(
+      <BrandingAssetField
+        label="Logo (wordmark, light themes)"
+        kind="wordmark_light"
+        currentUrl={null}
+        fallbackUrl="/custom/wordmark.webp"
+        accept="image/png"
+        enabled
+        previewBg="light"
+      />,
+    );
+
+    // The spec has no bundled light asset; what visitors see is the main
+    // logo, so that is what the empty slot must preview.
+    const preview = screen.getByAltText(
+      "Logo (wordmark, light themes) preview",
+    );
+    expect(preview).toHaveAttribute("src", "/custom/wordmark.webp");
+    expect(preview.className).toContain("opacity-40");
+    expect(screen.getByText("Falls back to the main logo")).toBeInTheDocument();
+  });
+
+  it("labels the empty login background as the theme gradient instead of an image", () => {
+    render(
+      <BrandingAssetField
+        label="Login background"
+        kind="login_bg"
+        currentUrl={null}
+        accept="image/png"
+        enabled
+      />,
+    );
+
+    expect(screen.getByText("Theme gradient")).toBeInTheDocument();
+    expect(
+      screen.queryByAltText("Login background preview"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows an uploaded asset undimmed, with a remove action", () => {
+    render(
+      <BrandingAssetField
+        label="Favicon"
+        kind="favicon"
+        currentUrl="/api/v1/branding/assets/favicon?v=abc.png"
+        accept="image/png"
+        enabled
+      />,
+    );
+
+    const preview = screen.getByAltText("Favicon preview");
+    expect(preview).toHaveAttribute(
+      "src",
+      "/api/v1/branding/assets/favicon?v=abc.png",
+    );
+    expect(preview.className).not.toContain("opacity-40");
+    expect(screen.queryByText("Default")).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Remove Favicon" }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Replace/ })).toBeInTheDocument();
+  });
+
+  it("states the pipeline's own dimensions and caps per slot", () => {
+    render(
+      <BrandingAssetField
+        label="Logo (icon)"
+        description="Shown in the collapsed sidebar."
+        kind="mark"
+        currentUrl={null}
+        accept="image/png"
+        enabled
+      />,
+    );
+
+    expect(
+      screen.getByText(BRANDING_ASSET_SPECS.mark.guidance),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Shown in the collapsed sidebar."),
+    ).toBeInTheDocument();
+  });
+
+  // The guidance is only useful if it keeps matching internal/branding/assets.go
+  // and internal/imageutil/imageutil.go; these are the numbers to change on both
+  // sides together.
+  it("keeps the stored sizes and upload caps in step with the server pipeline", () => {
+    expect(BRANDING_ASSET_SPECS.wordmark.storedPx).toBe(640);
+    expect(BRANDING_ASSET_SPECS.mark.storedPx).toBe(512);
+    expect(BRANDING_ASSET_SPECS.login_bg.storedPx).toBe(2560);
+    // The favicon is stored byte-for-byte so .ico and .svg keep working.
+    expect(BRANDING_ASSET_SPECS.favicon.storedPx).toBeNull();
+
+    expect(BRANDING_ASSET_SPECS.wordmark.maxUploadBytes).toBe(8 << 20);
+    expect(BRANDING_ASSET_SPECS.mark.maxUploadBytes).toBe(8 << 20);
+    expect(BRANDING_ASSET_SPECS.favicon.maxUploadBytes).toBe(1 << 20);
+    expect(BRANDING_ASSET_SPECS.login_bg.maxUploadBytes).toBe(12 << 20);
+
+    for (const spec of Object.values(BRANDING_ASSET_SPECS)) {
+      if (spec.storedPx !== null) {
+        expect(spec.guidance).toContain(String(spec.storedPx));
+      }
+      expect(spec.guidance).toContain(
+        `${spec.maxUploadBytes / (1024 * 1024)} MB`,
+      );
+    }
+  });
+});
diff --git a/web/src/components/admin/BrandingAssetField.tsx b/web/src/components/admin/BrandingAssetField.tsx
index 082e22fb3..1912c0277 100644
--- a/web/src/components/admin/BrandingAssetField.tsx
+++ b/web/src/components/admin/BrandingAssetField.tsx
@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { ImageOff, Loader2, Trash2, Upload } from "lucide-react";
+import { Loader2, Trash2, Upload } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import {
@@ -7,6 +7,7 @@ import {
   useUploadBrandingAsset,
   type BrandingAssetKind,
 } from "@/hooks/queries/admin/branding";
+import { BRANDING_ASSET_SPECS } from "./brandingAssetSpecs";
 
 interface BrandingAssetFieldProps {
   label: string;
@@ -25,6 +26,12 @@ interface BrandingAssetFieldProps {
    * so they would be invisible on the default muted tile in a dark admin theme.
    */
   previewBg?: "light";
+  /**
+   * What an empty slot actually serves when the kind has no bundled default of
+   * its own — the light variants fall back to the main logo/icon, so the
+   * preview must show that image, not a placeholder.
+   */
+  fallbackUrl?: string | null;
 }
 
 export function BrandingAssetField({
@@ -36,11 +43,19 @@ export function BrandingAssetField({
   enabled,
   preview = "wide",
   previewBg,
+  fallbackUrl,
 }: BrandingAssetFieldProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const upload = useUploadBrandingAsset();
   const remove = useDeleteBrandingAsset();
   const busy = upload.isPending || remove.isPending;
+  const spec = BRANDING_ASSET_SPECS[kind];
+  // An empty slot is not "no image" — the bundled default (or, for the light
+  // variants, the main asset they fall back to) is what visitors see. Show
+  // that instead of a placeholder glyph, dimmed and captioned so it never
+  // reads as the admin's own upload.
+  const shownUrl = currentUrl ?? spec.defaultUrl ?? fallbackUrl ?? null;
+  const showingDefault = currentUrl === null;
 
   const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -52,21 +67,34 @@ export function BrandingAssetField({
 
   return (
     <div className="border-border bg-background flex items-center gap-4 rounded-xl border p-3">
-      <div
-        className={cn(
-          "border-border flex shrink-0 items-center justify-center overflow-hidden rounded-lg border",
-          previewBg === "light" ? "bg-white" : "bg-muted/40",
-          preview === "square" ? "h-14 w-14" : "h-14 w-28",
-        )}
-      >
-        {currentUrl ? (
-          <img
-            src={currentUrl}
-            alt={`${label} preview`}
-            className="h-full w-full object-contain"
-          />
-        ) : (
-          <ImageOff className="text-muted-foreground h-5 w-5" />
+      <div className="flex shrink-0 flex-col items-center gap-1">
+        <div
+          className={cn(
+            "border-border flex items-center justify-center overflow-hidden rounded-lg border",
+            previewBg === "light" ? "bg-white" : "bg-muted/40",
+            preview === "square" ? "h-14 w-14" : "h-14 w-28",
+          )}
+        >
+          {shownUrl ? (
+            <img
+              src={shownUrl}
+              alt={`${label} preview`}
+              className={cn(
+                "h-full w-full object-contain",
+                showingDefault && "opacity-40",
+              )}
+            />
+          ) : (
+            <span
+              aria-hidden
+              className="from-primary/25 via-muted/40 h-full w-full bg-gradient-to-br to-transparent"
+            />
+          )}
+        </div>
+        {showingDefault && (
+          <span className="text-muted-foreground text-[10px] leading-none">
+            {spec.emptyCaption}
+          </span>
         )}
       </div>
 
@@ -75,6 +103,9 @@ export function BrandingAssetField({
         {description && (
           <p className="text-muted-foreground mt-0.5 text-xs">{description}</p>
         )}
+        <p className="text-muted-foreground/80 mt-0.5 text-[11px] leading-relaxed">
+          {spec.guidance}
+        </p>
       </div>
 
       <input
diff --git a/web/src/components/admin/ConnectionCheckAction.tsx b/web/src/components/admin/ConnectionCheckAction.tsx
index 3a1f723aa..b1b621c1c 100644
--- a/web/src/components/admin/ConnectionCheckAction.tsx
+++ b/web/src/components/admin/ConnectionCheckAction.tsx
@@ -20,11 +20,16 @@ export function ConnectionCheckAction({
   pendingLabel = "Checking...",
 }: Props) {
   return (
-    <div className="flex flex-wrap items-center gap-3 pt-1">
+    // py matches SettingFieldRow so the action reads as one more row in the
+    // group instead of hugging the hairline under the last field.
+    <div className="flex flex-wrap items-center gap-3 py-3.5">
       <Button
         type="button"
         size="sm"
-        variant="outline"
+        // Filled rather than outline: inside a group's inset panel a
+        // transparent hairline button reads as flat text. `secondary` keeps the
+        // check subordinate to the primary Save action in the save bar.
+        variant="secondary"
         onClick={() => void onClick()}
         disabled={disabled || isPending}
       >
diff --git a/web/src/components/admin/RestartBanner.test.tsx b/web/src/components/admin/RestartBanner.test.tsx
new file mode 100644
index 000000000..dbe5351f7
--- /dev/null
+++ b/web/src/components/admin/RestartBanner.test.tsx
@@ -0,0 +1,77 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { RestartBanner } from "./RestartBanner";
+
+describe("RestartBanner", () => {
+  it("stays hidden until a restart is owed", () => {
+    const { container } = render(<RestartBanner />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("prompts for a restart and can be deferred", async () => {
+    render(
+      <RestartBanner
+        restartRequired
+        description="FFmpeg path takes effect on restart."
+      />,
+    );
+
+    expect(screen.getByText("Restart required")).toBeInTheDocument();
+    expect(
+      screen.getByText("FFmpeg path takes effect on restart."),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Restart server/ }),
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: "Later" }));
+    expect(screen.queryByText("Restart required")).not.toBeInTheDocument();
+  });
+
+  it("comes back when a new restart reason arrives", async () => {
+    const { rerender } = render(<RestartBanner restartRequired />);
+
+    await userEvent.click(screen.getByRole("button", { name: "Later" }));
+    expect(screen.queryByText("Restart required")).not.toBeInTheDocument();
+
+    rerender(<RestartBanner restartRequired={false} />);
+    rerender(<RestartBanner restartRequired />);
+    expect(screen.getByText("Restart required")).toBeInTheDocument();
+  });
+
+  it("comes back when a later save bumps the mark count while the flag stays latched", async () => {
+    // The server's restart_required boolean never clears while the process
+    // lives, so a second restart-required save is only visible as a bumped
+    // restart_mark_count.
+    const { rerender } = render(
+      <RestartBanner restartRequired restartSignal={1} />,
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "Later" }));
+    expect(screen.queryByText("Restart required")).not.toBeInTheDocument();
+
+    rerender(<RestartBanner restartRequired restartSignal={2} />);
+    expect(screen.getByText("Restart required")).toBeInTheDocument();
+
+    // Dismissing the new signal holds again until something newer arrives.
+    await userEvent.click(screen.getByRole("button", { name: "Later" }));
+    rerender(<RestartBanner restartRequired restartSignal={2} />);
+    expect(screen.queryByText("Restart required")).not.toBeInTheDocument();
+  });
+
+  it("sits in the page flow instead of covering it", () => {
+    render(<RestartBanner restartRequired />);
+
+    // The bottom-pinned version had to dodge the sidebar, reserve scroll room
+    // and lift the save pill. An in-flow block needs none of that, so a
+    // regression back to `fixed` should fail here.
+    const banner = screen.getByRole("status");
+    expect(banner.className).not.toMatch(/\bfixed\b/);
+    expect(
+      document.documentElement.style.getPropertyValue("--settings-dock-offset"),
+    ).toBe("");
+  });
+});
diff --git a/web/src/components/admin/RestartBanner.tsx b/web/src/components/admin/RestartBanner.tsx
new file mode 100644
index 000000000..1010686b7
--- /dev/null
+++ b/web/src/components/admin/RestartBanner.tsx
@@ -0,0 +1,99 @@
+import { useState, type ReactNode } from "react";
+import { TriangleAlert } from "lucide-react";
+
+import { RestartServerButton } from "@/components/admin/RestartServerButton";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface RestartBannerProps {
+  /**
+   * Whether a restart is owed. The admin shell already reads
+   * `useAdminServerStatus()` to drive this banner, so the flag is passed in
+   * rather than queried again here — one caller, one query, one banner.
+   */
+  restartRequired?: boolean;
+  /**
+   * Opaque value that changes whenever a NEW restart-required save lands
+   * (`restart_mark_count` from the same status response). The boolean latches
+   * true for the life of the process, so this is the only signal that another
+   * requirement arrived after a "Later" — a changed signal un-dismisses.
+   */
+  restartSignal?: string | number;
+  /** One-line explanation under the title. */
+  description?: ReactNode;
+  className?: string;
+}
+
+const DEFAULT_RESTART_DESCRIPTION =
+  "Saved settings that are only read at startup take effect after a restart. Playback sessions will reconnect.";
+
+/**
+ * The single restart prompt for the admin area: an amber banner at the top of
+ * the content column, rendered once by `AdminLayout` so it stays with the admin
+ * on every admin page rather than only inside settings.
+ *
+ * It is a normal in-flow block, not a fixed bar. Nothing to stack above the
+ * sidebar, no spacer to buy back scroll room, nothing to lift out of the way:
+ * a block at the top of the content column cannot clip under the sidebar and
+ * cannot cover the page. It is deliberately not sticky — it may scroll away;
+ * being present on every page is the requirement, not being permanently
+ * on screen.
+ */
+export function RestartBanner({
+  restartRequired = false,
+  restartSignal,
+  description,
+  className,
+}: RestartBannerProps) {
+  const pending = restartRequired;
+  // "Later" records what was pending at the time, not a boolean: the server's
+  // restart_required flag never clears while the process lives, so a fresh
+  // restart-required save only shows up as a change in the signal. A
+  // dismissal therefore holds exactly until the signature it silenced changes.
+  const signature = String(restartSignal ?? "");
+  const [dismissedSignature, setDismissedSignature] = useState<string | null>(
+    null,
+  );
+  // Forgotten entirely once nothing is owed (a restart happened), so the next
+  // requirement always prompts again even with an identical key list.
+  if (!pending && dismissedSignature !== null) {
+    setDismissedSignature(null);
+  }
+  const visible = pending && dismissedSignature !== signature;
+
+  if (!visible) return null;
+
+  return (
+    <div
+      role="status"
+      className={cn(
+        "mb-4 flex flex-wrap items-center gap-3 rounded-2xl border border-amber-500/30 px-4 py-3 sm:mb-6 sm:px-5",
+        "bg-[linear-gradient(90deg,color-mix(in_srgb,var(--warning)_16%,transparent),color-mix(in_srgb,var(--warning)_6%,transparent))]",
+        className,
+      )}
+    >
+      <span className="grid size-7 shrink-0 place-items-center rounded-lg bg-amber-500/15 text-amber-600 dark:text-amber-400">
+        <TriangleAlert className="size-3.5" aria-hidden="true" />
+      </span>
+      {/* A 16rem flex basis with wrapping: on a phone the two actions drop to
+          their own row instead of squeezing the message to a few characters,
+          and on a wide page everything still shares one line. */}
+      <div className="min-w-0 flex-1 basis-64">
+        <p className="text-[13px] font-medium">Restart required</p>
+        <p className="text-muted-foreground text-[11.5px]">
+          {description ?? DEFAULT_RESTART_DESCRIPTION}
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setDismissedSignature(signature)}
+        >
+          Later
+        </Button>
+        <RestartServerButton label="Restart server" />
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/RestartServerButton.tsx b/web/src/components/admin/RestartServerButton.tsx
similarity index 64%
rename from web/src/pages/admin-settings/RestartServerButton.tsx
rename to web/src/components/admin/RestartServerButton.tsx
index 109dbba6c..26d20b65b 100644
--- a/web/src/pages/admin-settings/RestartServerButton.tsx
+++ b/web/src/components/admin/RestartServerButton.tsx
@@ -1,11 +1,23 @@
-import { useState } from "react";
+import { useState, type ComponentProps } from "react";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
 import { api } from "@/api/client";
 import { RotateCcw } from "lucide-react";
 import { toast } from "sonner";
 
-export function RestartServerButton() {
+export interface RestartServerButtonProps {
+  label?: string;
+  variant?: ComponentProps<typeof Button>["variant"];
+  size?: ComponentProps<typeof Button>["size"];
+  className?: string;
+}
+
+export function RestartServerButton({
+  label = "Restart Server",
+  variant = "outline",
+  size = "sm",
+  className,
+}: RestartServerButtonProps = {}) {
   const [showConfirm, setShowConfirm] = useState(false);
 
   async function handleRestart() {
@@ -20,9 +32,14 @@ export function RestartServerButton() {
 
   return (
     <>
-      <Button variant="outline" size="sm" onClick={() => setShowConfirm(true)}>
+      <Button
+        variant={variant}
+        size={size}
+        className={className}
+        onClick={() => setShowConfirm(true)}
+      >
         <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
-        Restart Server
+        {label}
       </Button>
       <ConfirmDialog
         open={showConfirm}
diff --git a/web/src/components/admin/brandingAssetSpecs.ts b/web/src/components/admin/brandingAssetSpecs.ts
new file mode 100644
index 000000000..cd47a8619
--- /dev/null
+++ b/web/src/components/admin/brandingAssetSpecs.ts
@@ -0,0 +1,88 @@
+import type { BrandingAssetKind } from "@/hooks/queries/admin/branding";
+
+/** How the server treats one uploaded branding asset, and what it serves without one. */
+export interface BrandingAssetSpec {
+  /** Longest edge (px) the stored copy is capped at, or null when stored as uploaded. */
+  storedPx: number | null;
+  /** Server-side upload cap in bytes. */
+  maxUploadBytes: number;
+  /** One line of upload guidance, shown under the slot description. */
+  guidance: string;
+  /** Bundled asset served while the slot is empty, or null when there is none. */
+  defaultUrl: string | null;
+  /** Caption under the preview while the slot is empty. */
+  emptyCaption: string;
+}
+
+const MB = 1024 * 1024;
+const WORDMARK_PX = 640;
+const MARK_PX = 512;
+const LOGIN_BG_PX = 2560;
+const WORDMARK_MAX_BYTES = 8 * MB;
+const MARK_MAX_BYTES = 8 * MB;
+const FAVICON_MAX_BYTES = 1 * MB;
+const LOGIN_BG_MAX_BYTES = 12 * MB;
+
+const megabytes = (bytes: number) => `${Math.round(bytes / MB)} MB`;
+
+/**
+ * What actually happens to each uploaded asset, mirrored from
+ * `internal/branding/assets.go` (per-kind caps and processing) and
+ * `internal/imageutil/imageutil.go` (width cap vs. square center-crop). Every
+ * number the UI quotes is written once here so the guidance cannot drift away
+ * from the pipeline one slot at a time. The same numbers are documented for API
+ * clients in `docs/admin-api.md`.
+ *
+ * `defaultUrl` is the bundled asset served while a slot is empty — the same
+ * files `PrairieBrand` and the favicon link fall back to. The login background has
+ * none: the auth pages just keep their theme gradient.
+ */
+export const BRANDING_ASSET_SPECS: Record<
+  BrandingAssetKind,
+  BrandingAssetSpec
+> = {
+  wordmark: {
+    storedPx: WORDMARK_PX,
+    maxUploadBytes: WORDMARK_MAX_BYTES,
+    guidance: `Wide artwork, ${WORDMARK_PX}px or wider. Stored as WebP capped at ${WORDMARK_PX}px wide; narrower images are not enlarged. PNG, JPEG, or WebP up to ${megabytes(WORDMARK_MAX_BYTES)}.`,
+    defaultUrl: "/prairie-wordmark-sidebar.png",
+    emptyCaption: "Default",
+  },
+  // Light variants share their base kind's pipeline. With no upload they
+  // inherit the main asset instead of using a separate bundled default.
+  wordmark_light: {
+    storedPx: WORDMARK_PX,
+    maxUploadBytes: WORDMARK_MAX_BYTES,
+    guidance: `Wide artwork, ${WORDMARK_PX}px or wider. Stored as WebP capped at ${WORDMARK_PX}px wide; narrower images are not enlarged. PNG, JPEG, or WebP up to ${megabytes(WORDMARK_MAX_BYTES)}.`,
+    defaultUrl: null,
+    emptyCaption: "Falls back to the main logo",
+  },
+  mark: {
+    storedPx: MARK_PX,
+    maxUploadBytes: MARK_MAX_BYTES,
+    guidance: `Square artwork, ${MARK_PX}×${MARK_PX} or larger. Anything else is center-cropped to a square, then stored as WebP at exactly ${MARK_PX}×${MARK_PX} — smaller art is upscaled. PNG, JPEG, or WebP up to ${megabytes(MARK_MAX_BYTES)}.`,
+    defaultUrl: "/prairie-icon-1024.png",
+    emptyCaption: "Default",
+  },
+  mark_light: {
+    storedPx: MARK_PX,
+    maxUploadBytes: MARK_MAX_BYTES,
+    guidance: `Square artwork, ${MARK_PX}×${MARK_PX} or larger. Anything else is center-cropped to a square, then stored as WebP at exactly ${MARK_PX}×${MARK_PX} — smaller art is upscaled. PNG, JPEG, or WebP up to ${megabytes(MARK_MAX_BYTES)}.`,
+    defaultUrl: null,
+    emptyCaption: "Falls back to the main icon",
+  },
+  favicon: {
+    storedPx: null,
+    maxUploadBytes: FAVICON_MAX_BYTES,
+    guidance: `Square PNG, ICO, or SVG up to ${megabytes(FAVICON_MAX_BYTES)}. Stored exactly as uploaded — never resized or re-encoded.`,
+    defaultUrl: "/favicon.ico",
+    emptyCaption: "Default",
+  },
+  login_bg: {
+    storedPx: LOGIN_BG_PX,
+    maxUploadBytes: LOGIN_BG_MAX_BYTES,
+    guidance: `Wide photo, ${LOGIN_BG_PX}px or wider. Stored as WebP capped at ${LOGIN_BG_PX}px wide and shown cover-cropped, so keep the subject centered. PNG, JPEG, or WebP up to ${megabytes(LOGIN_BG_MAX_BYTES)}.`,
+    defaultUrl: null,
+    emptyCaption: "Theme gradient",
+  },
+};
diff --git a/web/src/components/admin/libraries/LibraryFormSections.tsx b/web/src/components/admin/libraries/LibraryFormSections.tsx
index b0f160f17..5bf2d93a1 100644
--- a/web/src/components/admin/libraries/LibraryFormSections.tsx
+++ b/web/src/components/admin/libraries/LibraryFormSections.tsx
@@ -328,7 +328,7 @@ export function MetadataFields({ form }: { form: LibraryFormController }) {
           <p className="text-muted-foreground text-xs">
             When providers have no translation for this library&apos;s language,
             translate descriptions with AI after each refresh. Requires AI
-            description translation in Admin Settings → AI Services.
+            description translation in Admin Settings → AI.
           </p>
         </div>
         <Switch
diff --git a/web/src/components/mediaItemMenuTrigger.ts b/web/src/components/mediaItemMenuTrigger.ts
index e5b855bbe..3277bd8c3 100644
--- a/web/src/components/mediaItemMenuTrigger.ts
+++ b/web/src/components/mediaItemMenuTrigger.ts
@@ -36,7 +36,7 @@ export function mediaItemMenuTriggerClassName(
   density: PosterActionDensity = "standard",
 ) {
   return cn(
-    "media-card-action-trigger inline-flex items-center justify-center rounded-md border border-border/20 bg-background/60 text-foreground shadow-sm backdrop-blur-sm transition-[opacity,background-color,color] duration-150 hover:bg-background/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/70",
+    "media-card-action-trigger inline-flex items-center justify-center rounded-md border border-border/20 bg-background/80 text-foreground shadow-sm transition-[opacity,background-color,color] duration-150 hover:bg-background/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/70",
     posterActionSizeClasses(variant, density).trigger,
   );
 }
diff --git a/web/src/components/overlays/CardOverlays.test.tsx b/web/src/components/overlays/CardOverlays.test.tsx
index 4ae2b85f6..61ce00674 100644
--- a/web/src/components/overlays/CardOverlays.test.tsx
+++ b/web/src/components/overlays/CardOverlays.test.tsx
@@ -35,6 +35,11 @@ function badgeTexts(container: HTMLElement): (string | null)[] {
   );
 }
 
+/** Whole-token match so a mangled class ("gap-2mb-2") can never pass as flush. */
+function bottomMarginClasses(node: HTMLElement | null): string[] {
+  return Array.from(node?.classList ?? []).filter((name) => /^mb-/.test(name));
+}
+
 describe("CardOverlays", () => {
   beforeEach(() => vi.stubGlobal("CSS", { supports: () => true }));
   afterEach(() => {
@@ -332,6 +337,9 @@ describe("CardOverlays", () => {
   it("scales legacy browsers from the measured poster width", () => {
     let callback: ResizeObserverCallback | undefined;
     const disconnect = vi.fn();
+    vi.spyOn(window, "getComputedStyle").mockReturnValue({
+      borderTopLeftRadius: "8px",
+    } as CSSStyleDeclaration);
     vi.stubGlobal("CSS", { supports: () => false });
     vi.stubGlobal(
       "ResizeObserver",
@@ -447,48 +455,123 @@ describe("CardOverlays", () => {
     expect(vibrant?.style.boxShadow).toBe("0px 1px 2px 0px rgb(0 0 0 / 0.25)");
   });
 
-  it("lifts bottom-corner badges above persistent card actions", () => {
+  it("anchors bottom-corner badges flush in the corners like the top row", () => {
+    // Card quick actions cover bottom badges by design, so the bottom row
+    // reserves no clearance for them and insets exactly like the top row.
     const prefs = prefsWithOnly("content_rating");
+    const bottomEdge = (variant?: "wide") => {
+      prefs.items.content_rating = {
+        ...prefs.items.content_rating,
+        position: "bottom-left",
+      };
+      const left = render(
+        <CardOverlays
+          data={SAMPLE_MOVIE_DATA}
+          prefs={prefs}
+          variant={variant}
+        />,
+      ).container;
+      prefs.items.content_rating = {
+        ...prefs.items.content_rating,
+        position: "bottom-right",
+      };
+      const right = render(
+        <CardOverlays
+          data={SAMPLE_MOVIE_DATA}
+          prefs={prefs}
+          variant={variant}
+        />,
+      ).container;
+      return {
+        leftStack: left.querySelector<HTMLElement>(
+          '[data-overlay-edge="bottom"] > div.items-start',
+        ),
+        rightStack: right.querySelector<HTMLElement>(
+          '[data-overlay-edge="bottom"] > div.items-end',
+        ),
+        row: left.querySelector<HTMLElement>('[data-overlay-edge="bottom"]'),
+      };
+    };
+
+    for (const variant of [undefined, "wide" as const]) {
+      const { leftStack, rightStack, row } = bottomEdge(variant);
+      expect(leftStack).toBeTruthy();
+      expect(rightStack).toBeTruthy();
+      for (const node of [leftStack, rightStack, row]) {
+        expect(
+          bottomMarginClasses(node),
+          `${variant ?? "poster"} bottom edge`,
+        ).toEqual([]);
+      }
+    }
+
+    prefs.items.content_rating = {
+      ...prefs.items.content_rating,
+      position: "top-left",
+    };
+    const top = render(
+      <CardOverlays data={SAMPLE_MOVIE_DATA} prefs={prefs} />,
+    ).container.querySelector<HTMLElement>('[data-overlay-edge="top"]');
     prefs.items.content_rating = {
       ...prefs.items.content_rating,
       position: "bottom-left",
     };
-    const left = render(
+    const bottom = render(
       <CardOverlays data={SAMPLE_MOVIE_DATA} prefs={prefs} />,
-    ).container;
-    expect(
-      left.querySelector("div.bottom-2 > div.items-start.mb-10"),
-    ).toBeTruthy();
-    expect(left.querySelector("div.bottom-2")?.className).toContain("z-10");
+    ).container.querySelector<HTMLElement>('[data-overlay-edge="bottom"]');
+    expect(top?.style.top).toBe(posterLength(8));
+    expect(bottom?.style.bottom).toBe(top?.style.top);
+  });
 
+  it("lifts the bottom row only when the host draws a watch-progress bar", () => {
+    // The bar occupies the same edge strip, so a flush badge would cut it.
+    const prefs = prefsWithOnly("content_rating");
     prefs.items.content_rating = {
       ...prefs.items.content_rating,
-      position: "bottom-right",
+      position: "bottom-left",
     };
-    const poster = render(
+    const flush = render(
       <CardOverlays data={SAMPLE_MOVIE_DATA} prefs={prefs} />,
-    ).container;
-    expect(
-      poster.querySelector("div.bottom-2 > div.items-end.mb-10"),
-    ).toBeTruthy();
+    ).container.querySelector<HTMLElement>('[data-overlay-edge="bottom"]');
+    expect(bottomMarginClasses(flush)).toEqual([]);
 
-    const wide = render(
-      <CardOverlays data={SAMPLE_MOVIE_DATA} prefs={prefs} variant="wide" />,
-    ).container;
-    expect(
-      wide.querySelector("div.bottom-2 > div.items-end.mb-12"),
-    ).toBeTruthy();
+    const lifted = render(
+      <CardOverlays data={SAMPLE_MOVIE_DATA} prefs={prefs} hasProgressBar />,
+    ).container.querySelector<HTMLElement>('[data-overlay-edge="bottom"]');
+    expect(bottomMarginClasses(lifted)).toEqual(["mb-2"]);
+  });
 
+  it("keeps the badge layer beneath card actions and non-interactive", () => {
+    // MediaItemMenu renders its quick actions at z-20 in the card wrapper's
+    // stacking context (see MediaItemMenu.test.tsx), so this z-10 layer paints
+    // beneath them; pointer-events-none keeps a covered badge from swallowing
+    // a click aimed at the action on top of it.
+    const prefs = prefsWithOnly("content_rating");
     prefs.items.content_rating = {
       ...prefs.items.content_rating,
       position: "bottom-left",
     };
-    const wideLeft = render(
-      <CardOverlays data={SAMPLE_MOVIE_DATA} prefs={prefs} variant="wide" />,
-    ).container;
+    const { container } = render(
+      <CardOverlays data={SAMPLE_MOVIE_DATA} prefs={prefs} />,
+    );
+
+    for (const selector of [
+      '[data-card-overlays="poster"]',
+      '[data-overlay-edge="bottom"]',
+    ]) {
+      const node = container.querySelector<HTMLElement>(selector);
+      expect(node, selector).toBeTruthy();
+      expect(node?.classList.contains("z-10"), selector).toBe(true);
+      expect(node?.classList.contains("pointer-events-none"), selector).toBe(
+        true,
+      );
+    }
+    // Nothing inside the layer may re-enable hit testing.
+    expect(container.querySelectorAll(".pointer-events-auto").length).toBe(0);
     expect(
-      wideLeft.querySelector("div.bottom-2 > div.items-start.mb-12"),
-    ).toBeTruthy();
+      container.querySelector<HTMLElement>("span.inline-flex")?.style
+        .pointerEvents,
+    ).toBe("");
   });
 
   it("renders nothing when no enabled overlay has data", () => {
diff --git a/web/src/components/overlays/CardOverlays.tsx b/web/src/components/overlays/CardOverlays.tsx
index fc062b127..051c958d1 100644
--- a/web/src/components/overlays/CardOverlays.tsx
+++ b/web/src/components/overlays/CardOverlays.tsx
@@ -6,6 +6,7 @@ import {
   getPreset,
   orderedOverlaysForPosition,
 } from "@/lib/overlays";
+import { cn } from "@/lib/utils";
 import type {
   CardOverlayPrefs,
   OverlayData,
@@ -183,6 +184,13 @@ interface CardOverlaysProps {
   data: OverlayData;
   prefs: CardOverlayPrefs;
   variant?: "poster" | "wide";
+  /**
+   * Set by hosts that draw a watch-progress bar along the bottom of the
+   * artwork (ContinueWatchingCard, EpisodeRow, SeasonEpisodeGrid). The bar
+   * occupies the same edge strip as the bottom badge row, so the row rises
+   * just clear of it; with no bar the badges stay flush in the corners.
+   */
+  hasProgressBar?: boolean;
 }
 
 interface ResolvedBadge {
@@ -231,13 +239,11 @@ function BadgeStack({
   align,
   preset,
   scalingMode,
-  extraClass = "",
 }: {
   badges: ResolvedBadge[];
   align: "start" | "end";
   preset: OverlayPreset;
   scalingMode: ScalingMode;
-  extraClass?: string;
 }) {
   const length = (pixels: number, legacyVariable: string) =>
     overlayLength(pixels, scalingMode, legacyVariable);
@@ -245,7 +251,7 @@ function BadgeStack({
 
   return (
     <div
-      className={`flex min-w-0 flex-col ${align === "start" ? "items-start" : "items-end"} ${preset.gapClass} ${extraClass}`}
+      className={`flex min-w-0 flex-col ${align === "start" ? "items-start" : "items-end"} ${preset.gapClass}`}
       style={{ gap: length(preset.stackGap, POSTER_VARS.stackGap) }}
     >
       {badges.map((badge) => {
@@ -323,10 +329,21 @@ function BadgeStack({
 // Each card edge renders as ONE flex row holding the left and right corner
 // stacks. Sharing a row lets flexbox divide the card width between opposing
 // corners (min-w-0 + truncate), so wide badges shrink instead of overlapping.
+//
+// Stacking contract with the card quick actions (watched/favorite bottom-left,
+// more-menu bottom-right; web/src/components/MediaItemMenu.tsx): this whole
+// layer paints at z-10 inside the artwork box, the action wrappers paint at
+// z-20 as siblings of the artwork link in the same stacking context, so the
+// actions always cover overlay badges. That is by design — badges sit flush in
+// all four corners and the actions (hover-revealed on fine pointers,
+// persistent on coarse ones) render on top of them. The layer is
+// pointer-events-none end to end, so a badge can never swallow a click aimed
+// at an action underneath it.
 export default function CardOverlays({
   data,
   prefs,
   variant = "poster",
+  hasProgressBar = false,
 }: CardOverlaysProps) {
   const preset = getPreset(prefs.preset);
   const resolve = (pos: OverlayPosition): ResolvedBadge[] =>
@@ -379,8 +396,7 @@ export default function CardOverlays({
         const measured = Number.parseFloat(
           getComputedStyle(badge).borderTopLeftRadius,
         );
-        if (Number.isFinite(measured) && measured > 0)
-          baseBorderRadius = measured;
+        if (Number.isFinite(measured)) baseBorderRadius = measured;
       }
     }
 
@@ -438,9 +454,17 @@ export default function CardOverlays({
         </div>
       )}
       {(bottomLeft.length > 0 || bottomRight.length > 0) && (
+        /* Bottom badges anchor flush in the corners with the same inset as the
+           top row; card actions cover them by design (see above). The single
+           exception is a watch-progress bar, which lives in this same edge
+           strip and would be cut in half by a flush badge, so hosts that draw
+           one lift the row by one edge step. */
         <div
           data-overlay-edge="bottom"
-          className="pointer-events-none absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2"
+          className={cn(
+            "pointer-events-none absolute inset-x-2 bottom-2 z-10 flex items-end justify-between gap-2",
+            hasProgressBar && "mb-2",
+          )}
           style={{
             right: edgeInset,
             bottom: edgeInset,
@@ -448,21 +472,17 @@ export default function CardOverlays({
             gap: edgeGap,
           }}
         >
-          {/* Bottom badges reserve corner clearance because card actions stay
-              visible on touch and other devices without a fine hover pointer. */}
           <BadgeStack
             badges={bottomLeft}
             align="start"
             preset={preset}
             scalingMode={scalingMode}
-            extraClass={wide ? "mb-12" : "mb-10"}
           />
           <BadgeStack
             badges={bottomRight}
             align="end"
             preset={preset}
             scalingMode={scalingMode}
-            extraClass={wide ? "mb-12" : "mb-10"}
           />
         </div>
       )}
diff --git a/web/src/components/overlays/OverlayPreviewCard.tsx b/web/src/components/overlays/OverlayPreviewCard.tsx
index 41f47ba80..62ae56df4 100644
--- a/web/src/components/overlays/OverlayPreviewCard.tsx
+++ b/web/src/components/overlays/OverlayPreviewCard.tsx
@@ -5,9 +5,12 @@ import {
   type CardOverlayPrefs,
 } from "@/lib/overlays";
 
+/** Which sample item the preview stands in for. Picked by <OverlayPreviewVariantToggle />. */
+export type OverlayPreviewVariant = "movie" | "show";
+
 interface OverlayPreviewCardProps {
   prefs: CardOverlayPrefs;
-  variant?: "movie" | "show";
+  variant?: OverlayPreviewVariant;
   size?: "sm" | "md";
   showPosterOverlays?: boolean;
 }
diff --git a/web/src/components/overlays/OverlayPreviewVariantToggle.tsx b/web/src/components/overlays/OverlayPreviewVariantToggle.tsx
new file mode 100644
index 000000000..84c7c83e6
--- /dev/null
+++ b/web/src/components/overlays/OverlayPreviewVariantToggle.tsx
@@ -0,0 +1,47 @@
+import { cn } from "@/lib/utils";
+import type { OverlayPreviewVariant } from "./OverlayPreviewCard";
+
+interface OverlayPreviewVariantToggleProps {
+  value: OverlayPreviewVariant;
+  onChange: (value: OverlayPreviewVariant) => void;
+  className?: string;
+}
+
+const VARIANTS: readonly OverlayPreviewVariant[] = ["movie", "show"];
+
+/**
+ * Pill pair that picks which sample data <OverlayPreviewCard /> renders. Shared
+ * by the user Card Overlays page and the admin defaults editor so both can
+ * preview show-only overlays (network, show status) while editing. The choice
+ * is local view state on both surfaces and is deliberately never persisted.
+ */
+export function OverlayPreviewVariantToggle({
+  value,
+  onChange,
+  className,
+}: OverlayPreviewVariantToggleProps) {
+  return (
+    <div
+      className={cn("flex gap-1.5", className)}
+      role="group"
+      aria-label="Preview sample"
+    >
+      {VARIANTS.map((variant) => (
+        <button
+          key={variant}
+          type="button"
+          onClick={() => onChange(variant)}
+          aria-pressed={value === variant}
+          className={cn(
+            "rounded-full border px-3 py-1 text-xs font-medium capitalize transition-colors",
+            value === variant
+              ? "border-primary bg-primary/10 text-primary"
+              : "border-border/60 hover:border-border text-muted-foreground",
+          )}
+        >
+          {variant}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/web/src/components/realtimeCatalogInvalidation.test.ts b/web/src/components/realtimeCatalogInvalidation.test.ts
new file mode 100644
index 000000000..9bbfa248a
--- /dev/null
+++ b/web/src/components/realtimeCatalogInvalidation.test.ts
@@ -0,0 +1,222 @@
+import { QueryClient } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  catalogKeys,
+  mediaSurfaceKeys,
+  sectionKeys,
+} from "@/hooks/queries/keys";
+import {
+  createCatalogInvalidationScheduler,
+  PROGRESS_HOME_REFRESH_WINDOW_MS,
+  scheduleProgressHomeRefresh,
+  userStateChangeAffectsSectionMembership,
+} from "./realtimeCatalogInvalidation";
+
+const WINDOW_MS = 2_000;
+
+function catalogListKey(libraryId: number) {
+  return catalogKeys.list({
+    source: "section",
+    scope: "library",
+    section_id: "all",
+    library_id: libraryId,
+    limit: 60,
+    offset: 0,
+  });
+}
+
+/** Seeds one cached query per library so invalidation scope is observable. */
+function seedLibraries(queryClient: QueryClient, libraryIds: number[]) {
+  for (const libraryId of libraryIds) {
+    queryClient.setQueryData(catalogListKey(libraryId), { items: [] });
+  }
+}
+
+function invalidatedLibraries(queryClient: QueryClient, libraryIds: number[]) {
+  return libraryIds.filter(
+    (libraryId) =>
+      queryClient.getQueryState(catalogListKey(libraryId))?.isInvalidated,
+  );
+}
+
+describe("createCatalogInvalidationScheduler", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("invalidates the first event immediately", async () => {
+    const queryClient = new QueryClient();
+    seedLibraries(queryClient, [1, 3]);
+    const scheduler = createCatalogInvalidationScheduler(
+      queryClient,
+      WINDOW_MS,
+    );
+
+    scheduler.schedule({ libraryId: 3, allowDashboardRefetch: false });
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(invalidatedLibraries(queryClient, [1, 3])).toEqual([3]);
+  });
+
+  it("coalesces a burst into a single trailing sweep", async () => {
+    const queryClient = new QueryClient();
+    const invalidateQueries = vi.spyOn(queryClient, "invalidateQueries");
+    const scheduler = createCatalogInvalidationScheduler(
+      queryClient,
+      WINDOW_MS,
+    );
+
+    scheduler.schedule({ libraryId: 3, allowDashboardRefetch: false });
+    await vi.advanceTimersByTimeAsync(0);
+    const afterLeadingEdge = invalidateQueries.mock.calls.length;
+
+    for (let i = 0; i < 50; i += 1) {
+      scheduler.schedule({
+        itemId: `item-${i}`,
+        libraryId: 3,
+        allowDashboardRefetch: false,
+      });
+    }
+    await vi.advanceTimersByTimeAsync(WINDOW_MS - 1);
+
+    expect(invalidateQueries.mock.calls.length).toBe(afterLeadingEdge);
+
+    await vi.advanceTimersByTimeAsync(1);
+
+    // Exactly one more sweep for all 50 events, not 50 sweeps.
+    expect(invalidateQueries.mock.calls.length).toBe(afterLeadingEdge * 2);
+  });
+
+  it("widens to an unscoped sweep when a window spans several libraries", async () => {
+    const queryClient = new QueryClient();
+    seedLibraries(queryClient, [1, 3]);
+    const scheduler = createCatalogInvalidationScheduler(
+      queryClient,
+      WINDOW_MS,
+    );
+
+    // Leading edge consumes the first event; the rest share one window.
+    scheduler.schedule({ libraryId: 3, allowDashboardRefetch: false });
+    await vi.advanceTimersByTimeAsync(0);
+    seedLibraries(queryClient, [1, 3]);
+
+    scheduler.schedule({ libraryId: 3, allowDashboardRefetch: false });
+    scheduler.schedule({ libraryId: 1, allowDashboardRefetch: false });
+    await vi.advanceTimersByTimeAsync(WINDOW_MS);
+
+    expect(invalidatedLibraries(queryClient, [1, 3])).toEqual([1, 3]);
+  });
+
+  it("still invalidates the touched library's own sections on a scoped sweep", async () => {
+    const queryClient = new QueryClient();
+    queryClient.setQueryData(sectionKeys.libraryLayout(3), { sections: [] });
+    const scheduler = createCatalogInvalidationScheduler(
+      queryClient,
+      WINDOW_MS,
+    );
+
+    scheduler.schedule({ libraryId: 3, allowDashboardRefetch: false });
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(
+      queryClient.getQueryState(sectionKeys.libraryLayout(3))?.isInvalidated,
+    ).toBe(true);
+  });
+
+  it("drops queued work on cancel", async () => {
+    const queryClient = new QueryClient();
+    const scheduler = createCatalogInvalidationScheduler(
+      queryClient,
+      WINDOW_MS,
+    );
+
+    scheduler.schedule({ libraryId: 3, allowDashboardRefetch: false });
+    await vi.advanceTimersByTimeAsync(0);
+    seedLibraries(queryClient, [3]);
+
+    scheduler.schedule({ libraryId: 3, allowDashboardRefetch: false });
+    scheduler.cancel();
+    await vi.advanceTimersByTimeAsync(WINDOW_MS * 2);
+
+    expect(invalidatedLibraries(queryClient, [3])).toEqual([]);
+
+    // The window timer is gone too, so the next event leads again.
+    scheduler.schedule({ libraryId: 3, allowDashboardRefetch: false });
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(invalidatedLibraries(queryClient, [3])).toEqual([3]);
+  });
+
+  it("marks home section data stale (without refetching) on a library-scoped sweep", async () => {
+    const queryClient = new QueryClient();
+    const homeItemsKey = sectionKeys.homeItems("recently-added");
+    queryClient.setQueryData(sectionKeys.homeLayout(), { sections: [] });
+    queryClient.setQueryData(homeItemsKey, { items: [] });
+    const scheduler = createCatalogInvalidationScheduler(
+      queryClient,
+      WINDOW_MS,
+    );
+
+    scheduler.schedule({ libraryId: 3, allowDashboardRefetch: false });
+    await vi.advanceTimersByTimeAsync(0);
+
+    // Stale, so the throttled home queue reset fetches real data instead of
+    // re-rendering the fresh-but-outdated cache…
+    expect(
+      queryClient.getQueryState(sectionKeys.homeLayout())?.isInvalidated,
+    ).toBe(true);
+    expect(queryClient.getQueryState(homeItemsKey)?.isInvalidated).toBe(true);
+    // …but the sweep itself never refetches them (no observers here, and the
+    // invalidation is refetchType "none").
+    expect(queryClient.isFetching()).toBe(0);
+  });
+});
+
+describe("userStateChangeAffectsSectionMembership", () => {
+  it("ignores progress ticks and accepts every membership change", () => {
+    expect(userStateChangeAffectsSectionMembership("progress")).toBe(false);
+    for (const change of [
+      "favorite",
+      "watchlist",
+      "history",
+      "watched",
+      "home_dismissal",
+    ]) {
+      expect(userStateChangeAffectsSectionMembership(change)).toBe(true);
+    }
+  });
+
+  it("treats an unknown change as membership-affecting", () => {
+    expect(userStateChangeAffectsSectionMembership(undefined)).toBe(true);
+  });
+});
+
+describe("scheduleProgressHomeRefresh", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => {
+    // Drain any armed trailing refresh so module-level timer state cannot
+    // leak into the next test.
+    vi.runAllTimers();
+    vi.useRealTimers();
+  });
+
+  it("coalesces a stream of progress ticks into one trailing refresh", () => {
+    const queryClient = new QueryClient();
+    const signal = () =>
+      queryClient.getQueryData<number>(mediaSurfaceKeys.refreshSignal()) ?? 0;
+
+    for (let i = 0; i < 10; i += 1) {
+      scheduleProgressHomeRefresh(queryClient);
+      vi.advanceTimersByTime(1_000);
+    }
+    // Ticks alone never reset the home load queue…
+    expect(signal()).toBe(0);
+
+    vi.advanceTimersByTime(PROGRESS_HOME_REFRESH_WINDOW_MS);
+    // …but an open home catches the playback within one window.
+    expect(signal()).toBe(1);
+
+    scheduleProgressHomeRefresh(queryClient);
+    vi.advanceTimersByTime(PROGRESS_HOME_REFRESH_WINDOW_MS);
+    expect(signal()).toBe(2);
+  });
+});
diff --git a/web/src/components/realtimeCatalogInvalidation.ts b/web/src/components/realtimeCatalogInvalidation.ts
index 9721d3427..441fa2402 100644
--- a/web/src/components/realtimeCatalogInvalidation.ts
+++ b/web/src/components/realtimeCatalogInvalidation.ts
@@ -1,16 +1,18 @@
 import type { QueryClient } from "@tanstack/react-query";
-import { adminKeys, libraryKeys } from "@/hooks/queries/keys";
+import { adminKeys, libraryKeys, sectionKeys } from "@/hooks/queries/keys";
 import { invalidateMediaSurfaceQueries } from "@/hooks/queries/mediaSurfaceRefresh";
 import { bumpHomeRefreshSignal } from "@/pages/homeSurfaceRefresh";
 
+export interface CatalogInvalidationOptions {
+  itemId?: string;
+  libraryId?: number;
+  allowDashboardRefetch: boolean;
+  includeLibraryLists?: boolean;
+}
+
 export function invalidateCatalogState(
   queryClient: QueryClient,
-  options: {
-    itemId?: string;
-    libraryId?: number;
-    allowDashboardRefetch: boolean;
-    includeLibraryLists?: boolean;
-  },
+  options: CatalogInvalidationOptions,
 ) {
   const {
     itemId,
@@ -18,6 +20,18 @@ export function invalidateCatalogState(
     allowDashboardRefetch,
     includeLibraryLists = true,
   } = options;
+  // Library-scoped sweeps leave home section queries out (see
+  // activeSectionQueryMatchesLibrary) so a scan cannot storm them — but the
+  // refresh-signal bump below still reloads Home's rows through fetchQuery,
+  // which would happily serve the fresh-but-outdated cache. Mark home data
+  // stale without refetching, so only the (already throttled) queue reset
+  // fetches, and it fetches real data.
+  if (libraryId !== undefined) {
+    void queryClient.invalidateQueries({
+      queryKey: sectionKeys.home(),
+      refetchType: "none",
+    });
+  }
   void invalidateMediaSurfaceQueries(queryClient, { itemId, libraryId }).then(
     () => {
       bumpHomeRefreshSignal(queryClient);
@@ -38,3 +52,148 @@ export function invalidateCatalogState(
     refetchType: allowDashboardRefetch ? "active" : "none",
   });
 }
+
+/**
+ * A scan emits one catalog event per file it touches. Running the full
+ * invalidation sweep for each of them refetches every open surface hundreds of
+ * times a minute for data that is still changing, so events are coalesced into
+ * one sweep per window.
+ */
+export const CATALOG_INVALIDATION_WINDOW_MS = 2_000;
+
+interface PendingCatalogInvalidation {
+  itemIds: Set<string>;
+  libraryIds: Set<number>;
+  hasUnscopedEvent: boolean;
+  allowDashboardRefetch: boolean;
+  includeLibraryLists: boolean;
+}
+
+export interface CatalogInvalidationScheduler {
+  /** Invalidates now if the window is open, otherwise folds into its flush. */
+  schedule: (options: CatalogInvalidationOptions) => void;
+  /** Drops anything still queued. Call on teardown. */
+  cancel: () => void;
+}
+
+/**
+ * Throttles catalog invalidation to one sweep per window, with the first event
+ * after an idle period applied immediately so an isolated change (a single
+ * metadata edit) still lands without delay.
+ *
+ * Merging widens rather than narrows: a window that saw two libraries, or any
+ * event with no library at all, flushes unscoped, and a window that saw several
+ * items drops the per-item keys — the broad `items`/`catalog` invalidations
+ * inside `invalidateMediaSurfaceQueries` already cover every item detail.
+ */
+export function createCatalogInvalidationScheduler(
+  queryClient: QueryClient,
+  windowMs: number = CATALOG_INVALIDATION_WINDOW_MS,
+): CatalogInvalidationScheduler {
+  let windowTimer: number | undefined;
+  let pending: PendingCatalogInvalidation | null = null;
+
+  const flush = () => {
+    const batch = pending;
+    pending = null;
+    windowTimer = window.setTimeout(onWindowClosed, windowMs);
+    if (batch) {
+      invalidateCatalogState(queryClient, resolveBatch(batch));
+    }
+  };
+
+  const onWindowClosed = () => {
+    windowTimer = undefined;
+    if (pending) flush();
+  };
+
+  return {
+    schedule(options) {
+      pending = mergeCatalogInvalidation(pending, options);
+      if (windowTimer === undefined) flush();
+    },
+    cancel() {
+      if (windowTimer !== undefined) window.clearTimeout(windowTimer);
+      windowTimer = undefined;
+      pending = null;
+    },
+  };
+}
+
+function mergeCatalogInvalidation(
+  pending: PendingCatalogInvalidation | null,
+  options: CatalogInvalidationOptions,
+): PendingCatalogInvalidation {
+  const next: PendingCatalogInvalidation = pending ?? {
+    itemIds: new Set(),
+    libraryIds: new Set(),
+    hasUnscopedEvent: false,
+    allowDashboardRefetch: false,
+    includeLibraryLists: false,
+  };
+
+  if (options.itemId) next.itemIds.add(options.itemId);
+  if (options.libraryId === undefined) {
+    next.hasUnscopedEvent = true;
+  } else {
+    next.libraryIds.add(options.libraryId);
+  }
+  next.allowDashboardRefetch =
+    next.allowDashboardRefetch || options.allowDashboardRefetch;
+  next.includeLibraryLists =
+    next.includeLibraryLists || (options.includeLibraryLists ?? true);
+
+  return next;
+}
+
+function resolveBatch(
+  batch: PendingCatalogInvalidation,
+): CatalogInvalidationOptions {
+  const [onlyItemId] = batch.itemIds;
+  const [onlyLibraryId] = batch.libraryIds;
+  return {
+    itemId: batch.itemIds.size === 1 ? onlyItemId : undefined,
+    libraryId:
+      !batch.hasUnscopedEvent && batch.libraryIds.size === 1
+        ? onlyLibraryId
+        : undefined,
+    allowDashboardRefetch: batch.allowDashboardRefetch,
+    includeLibraryLists: batch.includeLibraryLists,
+  };
+}
+
+/**
+ * Whether a `user_state` change can move an item in or out of a home section.
+ *
+ * Progress ticks arrive every few seconds throughout playback and only move a
+ * position, so they must not reset the home load queue per event; they refresh
+ * through `scheduleProgressHomeRefresh` instead.
+ */
+export function userStateChangeAffectsSectionMembership(
+  change: string | undefined,
+): boolean {
+  return change !== "progress";
+}
+
+/**
+ * One trailing home refresh per window for progress ticks. Another client's
+ * playback still has to reach an OPEN home page: the first tick moves an item
+ * into Continue Watching and the bar itself should advance — but Home renders
+ * from its own loaded-section state, which only the refresh signal reloads.
+ * A per-tick bump would reset the load queue every few seconds for the whole
+ * playback; one bump per window keeps home current without that storm.
+ */
+export const PROGRESS_HOME_REFRESH_WINDOW_MS = 30_000;
+
+let progressHomeRefreshTimer: number | undefined;
+
+export function scheduleProgressHomeRefresh(
+  queryClient: QueryClient,
+  windowMs: number = PROGRESS_HOME_REFRESH_WINDOW_MS,
+) {
+  if (progressHomeRefreshTimer !== undefined) return;
+  progressHomeRefreshTimer = window.setTimeout(() => {
+    progressHomeRefreshTimer = undefined;
+    bumpHomeRefreshSignal(queryClient);
+  }, windowMs);
+}
diff --git a/web/src/components/settings/AdvancedSection.test.tsx b/web/src/components/settings/AdvancedSection.test.tsx
new file mode 100644
index 000000000..c38c22968
--- /dev/null
+++ b/web/src/components/settings/AdvancedSection.test.tsx
@@ -0,0 +1,162 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it } from "vitest";
+
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+
+function renderSection(
+  props: Partial<Parameters<typeof AdvancedSection>[0]> = {},
+) {
+  return render(
+    <AdvancedSection id="playback.transcoding" count={3} {...props}>
+      <div>ffmpeg path</div>
+    </AdvancedSection>,
+  );
+}
+
+describe("AdvancedSection", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("starts collapsed and labels the disclosure with the setting count", () => {
+    renderSection();
+
+    const toggle = screen.getByRole("button", {
+      name: /Advanced · 3 settings/,
+    });
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryByText("ffmpeg path")).not.toBeInTheDocument();
+  });
+
+  it("uses the singular form for a single setting", () => {
+    renderSection({ count: 1 });
+
+    expect(
+      screen.getByRole("button", { name: /Advanced · 1 setting$/ }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows the count as a bare number and spells it out for screen readers", () => {
+    renderSection({ count: 9 });
+
+    expect(
+      screen.getByRole("button", { name: "Advanced · 9 settings" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("9")).toBeInTheDocument();
+  });
+
+  it("persists the open state under the section id", async () => {
+    const user = userEvent.setup();
+    const { unmount } = renderSection();
+
+    await user.click(screen.getByRole("button", { name: /Advanced/ }));
+    expect(screen.getByText("ffmpeg path")).toBeInTheDocument();
+    expect(
+      localStorage.getItem("silo.admin.advanced.playback.transcoding"),
+    ).toBe("true");
+
+    unmount();
+    renderSection();
+    expect(screen.getByText("ffmpeg path")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /Advanced/ }));
+    expect(
+      localStorage.getItem("silo.admin.advanced.playback.transcoding"),
+    ).toBe("false");
+    expect(screen.queryByText("ffmpeg path")).not.toBeInTheDocument();
+  });
+
+  it("does not inherit another section's persisted state", () => {
+    localStorage.setItem("silo.admin.advanced.playback.transcoding", "true");
+    renderSection({ id: "downloads" });
+
+    expect(screen.queryByText("ffmpeg path")).not.toBeInTheDocument();
+  });
+
+  it("honours defaultOpen only until a choice is persisted", async () => {
+    const user = userEvent.setup();
+    const { unmount } = renderSection({ defaultOpen: true });
+    expect(screen.getByText("ffmpeg path")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /Advanced/ }));
+    unmount();
+
+    renderSection({ defaultOpen: true });
+    expect(screen.queryByText("ffmpeg path")).not.toBeInTheDocument();
+  });
+
+  it("opens automatically while forceOpen is set", () => {
+    const { rerender } = render(
+      <AdvancedSection id="downloads" count={2} forceOpen={false}>
+        <div>bandwidth</div>
+      </AdvancedSection>,
+    );
+    expect(screen.queryByText("bandwidth")).not.toBeInTheDocument();
+
+    rerender(
+      <AdvancedSection id="downloads" count={2} forceOpen>
+        <div>bandwidth</div>
+      </AdvancedSection>,
+    );
+    expect(screen.getByText("bandwidth")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Advanced/ })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+  });
+
+  it("opens on the first render when forceOpen is already set", () => {
+    render(
+      <AdvancedSection id="downloads" forceOpen>
+        <div>bandwidth</div>
+      </AdvancedSection>,
+    );
+
+    expect(screen.getByText("bandwidth")).toBeInTheDocument();
+  });
+
+  it("re-expands when a new reason to force it open arrives after a manual collapse", async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(
+      <AdvancedSection id="downloads" forceOpen>
+        <div>bandwidth</div>
+      </AdvancedSection>,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Advanced/ }));
+    expect(screen.queryByText("bandwidth")).not.toBeInTheDocument();
+
+    // The reason clears (the field was saved), then a different field inside
+    // goes dirty. The stale manual collapse must not keep it hidden.
+    rerender(
+      <AdvancedSection id="downloads" forceOpen={false}>
+        <div>bandwidth</div>
+      </AdvancedSection>,
+    );
+    expect(screen.queryByText("bandwidth")).not.toBeInTheDocument();
+
+    rerender(
+      <AdvancedSection id="downloads" forceOpen>
+        <div>bandwidth</div>
+      </AdvancedSection>,
+    );
+    expect(screen.getByText("bandwidth")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Advanced/ })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+  });
+
+  it("lets an auto-expanded section be collapsed again", async () => {
+    const user = userEvent.setup();
+    render(
+      <AdvancedSection id="downloads" forceOpen>
+        <div>bandwidth</div>
+      </AdvancedSection>,
+    );
+
+    await user.click(screen.getByRole("button", { name: /Advanced/ }));
+    expect(screen.queryByText("bandwidth")).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/components/settings/AdvancedSection.tsx b/web/src/components/settings/AdvancedSection.tsx
new file mode 100644
index 000000000..53c615ea3
--- /dev/null
+++ b/web/src/components/settings/AdvancedSection.tsx
@@ -0,0 +1,143 @@
+import { useState, type ReactNode } from "react";
+import { ChevronRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import "@/styles/admin-settings.css";
+
+const STORAGE_PREFIX = "silo.admin.advanced.";
+
+function storageKey(id: string) {
+  return `${STORAGE_PREFIX}${id}`;
+}
+
+function readPersisted(id: string): boolean | null {
+  try {
+    const raw = localStorage.getItem(storageKey(id));
+    if (raw === "true") return true;
+    if (raw === "false") return false;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function writePersisted(id: string, open: boolean): void {
+  try {
+    localStorage.setItem(storageKey(id), open ? "true" : "false");
+  } catch {
+    // Storage full or unavailable: the disclosure still works this session.
+  }
+}
+
+export interface AdvancedSectionProps {
+  /** Stable id for the persisted open state, e.g. `playback.transcoding`. */
+  id: string;
+  /** Number of settings inside, rendered as a muted count on the right. */
+  count?: number;
+  title?: string;
+  /** Open state used when nothing is persisted yet. */
+  defaultOpen?: boolean;
+  /**
+   * Forces the section open regardless of the persisted state — pass the
+   * section's dirty/invalid/search-match state so a hidden field can never be
+   * the reason a save bar refuses to save.
+   */
+  forceOpen?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * The single disclosure primitive for advanced admin settings: an inline row at
+ * the end of a group rather than a nested card. Collapsed by default, remembers
+ * the admin's choice per section in localStorage, and auto-expands while
+ * `forceOpen` is set.
+ */
+export function AdvancedSection({
+  id,
+  count,
+  title = "Advanced",
+  defaultOpen = false,
+  forceOpen = false,
+  children,
+}: AdvancedSectionProps) {
+  // Persisted choice, read once: a section's id is fixed for the life of the
+  // instance (give the component a `key` if a caller ever swaps ids).
+  const [persistedOpen, setPersistedOpen] = useState(
+    () => readPersisted(id) ?? defaultOpen,
+  );
+  // Explicit toggle this session, which also wins over `forceOpen` so an
+  // auto-expanded section can still be collapsed.
+  const [override, setOverride] = useState<boolean | null>(null);
+  const [wasForcedOpen, setWasForcedOpen] = useState(forceOpen);
+
+  // A manual collapse only outranks the *current* reason to force the section
+  // open. When a new one arrives (a field inside just went dirty or invalid, or
+  // a search started matching), drop the override so the save bar can never
+  // block on a field the admin cannot see. Adjusting state during render is
+  // cheaper than an effect: React re-renders before committing.
+  if (forceOpen !== wasForcedOpen) {
+    setWasForcedOpen(forceOpen);
+    if (forceOpen) setOverride(null);
+  }
+
+  const open = override ?? (persistedOpen || forceOpen);
+
+  function toggle() {
+    const next = !open;
+    setOverride(next);
+    setPersistedOpen(next);
+    writePersisted(id, next);
+  }
+
+  // The number reads as a bare count on screen; the accessible name spells out
+  // what it counts, since it is visually pushed to the right of the row.
+  const accessibleLabel =
+    typeof count === "number"
+      ? `${title} · ${count} setting${count === 1 ? "" : "s"}`
+      : title;
+
+  return (
+    <div className="min-w-0">
+      <button
+        type="button"
+        aria-label={accessibleLabel}
+        aria-expanded={open}
+        onClick={toggle}
+        className={cn(
+          "text-muted-foreground hover:text-foreground flex w-full items-center gap-2.5",
+          "py-3 text-left text-[13px] transition-colors",
+          open && "text-foreground",
+        )}
+      >
+        <ChevronRight
+          className={cn(
+            "size-3.5 shrink-0 transition-transform",
+            open
+              ? "rotate-90 text-[var(--settings-accent)]"
+              : "text-muted-foreground",
+          )}
+          aria-hidden="true"
+        />
+        <span className="min-w-0 font-medium">{title}</span>
+        {typeof count === "number" ? (
+          <span
+            aria-hidden="true"
+            className="text-muted-foreground ml-auto shrink-0 text-[11.5px]"
+          >
+            {count}
+          </span>
+        ) : null}
+      </button>
+      {open ? (
+        <div
+          className={cn(
+            "ml-[6px] border-l-2 border-[var(--settings-accent-line)] pl-[15px]",
+            "settings-field-list",
+          )}
+        >
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/web/src/components/settings/LimitField.test.tsx b/web/src/components/settings/LimitField.test.tsx
new file mode 100644
index 000000000..289c5b756
--- /dev/null
+++ b/web/src/components/settings/LimitField.test.tsx
@@ -0,0 +1,167 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { LimitField } from "@/components/settings/LimitField";
+
+function Harness({
+  initial,
+  onChange,
+  unlimitedValue,
+}: {
+  initial: string;
+  onChange?: (value: string) => void;
+  unlimitedValue?: string;
+}) {
+  const [value, setValue] = useState(initial);
+  return (
+    <LimitField
+      label="Per-user bandwidth"
+      value={value}
+      unlimitedValue={unlimitedValue}
+      unit="Mbps"
+      onChange={(next) => {
+        setValue(next);
+        onChange?.(next);
+      }}
+    />
+  );
+}
+
+describe("LimitField", () => {
+  it("reads the sentinel as unlimited and hides it from the input", () => {
+    render(<Harness initial="0" />);
+
+    expect(screen.getByRole("checkbox", { name: "Unlimited" })).toBeChecked();
+    const input = screen.getByLabelText("Per-user bandwidth");
+    expect(input).toBeDisabled();
+    expect(input).toHaveValue(null);
+  });
+
+  it("writes the sentinel when Unlimited is checked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Harness initial="50" onChange={onChange} />);
+
+    const checkbox = screen.getByRole("checkbox", { name: "Unlimited" });
+    expect(checkbox).not.toBeChecked();
+
+    await user.click(checkbox);
+    expect(onChange).toHaveBeenLastCalledWith("0");
+    expect(screen.getByLabelText("Per-user bandwidth")).toBeDisabled();
+  });
+
+  it("restores the previous limit when Unlimited is unchecked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Harness initial="50" onChange={onChange} />);
+
+    const checkbox = screen.getByRole("checkbox", { name: "Unlimited" });
+    await user.click(checkbox);
+    await user.click(checkbox);
+
+    expect(onChange).toHaveBeenLastCalledWith("50");
+    expect(screen.getByLabelText("Per-user bandwidth")).toHaveValue(50);
+  });
+
+  it("falls back to an empty limit when unlimited was the saved value", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Harness initial="0" onChange={onChange} />);
+
+    await user.click(screen.getByRole("checkbox", { name: "Unlimited" }));
+    expect(onChange).toHaveBeenLastCalledWith("");
+    expect(screen.getByLabelText("Per-user bandwidth")).toBeEnabled();
+  });
+
+  it("supports a non-zero unlimited sentinel", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Harness initial="10" unlimitedValue="-1" onChange={onChange} />);
+
+    expect(
+      screen.getByRole("checkbox", { name: "Unlimited" }),
+    ).not.toBeChecked();
+    await user.click(screen.getByRole("checkbox", { name: "Unlimited" }));
+    expect(onChange).toHaveBeenLastCalledWith("-1");
+    expect(screen.getByRole("checkbox", { name: "Unlimited" })).toBeChecked();
+  });
+
+  it("passes typed limits straight through", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Harness initial="" onChange={onChange} />);
+
+    await user.type(screen.getByLabelText("Per-user bandwidth"), "25");
+    expect(onChange).toHaveBeenLastCalledWith("25");
+  });
+});
+
+function ScaledHarness({
+  initial,
+  onChange,
+}: {
+  initial: string;
+  onChange?: (v: string) => void;
+}) {
+  const [value, setValue] = useState(initial);
+  return (
+    <LimitField
+      label="Prepared file storage budget"
+      value={value}
+      unit="GB"
+      scale={1_000_000_000}
+      onChange={(next) => {
+        setValue(next);
+        onChange?.(next);
+      }}
+    />
+  );
+}
+
+describe("LimitField scaled units", () => {
+  it("shows a stored byte value in the display unit", () => {
+    render(<ScaledHarness initial="53687091200" />);
+
+    expect(screen.getByLabelText("Prepared file storage budget")).toHaveValue(
+      53.687,
+    );
+  });
+
+  it("stores what was typed in the underlying unit", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<ScaledHarness initial="" onChange={onChange} />);
+
+    await user.type(
+      screen.getByLabelText("Prepared file storage budget"),
+      "50",
+    );
+    expect(onChange).toHaveBeenLastCalledWith("50000000000");
+  });
+
+  it("keeps a fractional entry typeable instead of rewriting it mid-keystroke", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<ScaledHarness initial="" onChange={onChange} />);
+
+    await user.type(
+      screen.getByLabelText("Prepared file storage budget"),
+      "1.5",
+    );
+    expect(onChange).toHaveBeenLastCalledWith("1500000000");
+  });
+
+  it("writes the unscaled sentinel for unlimited", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<ScaledHarness initial="50000000000" onChange={onChange} />);
+
+    await user.click(screen.getByRole("checkbox", { name: "Unlimited" }));
+    expect(onChange).toHaveBeenLastCalledWith("0");
+    expect(screen.getByLabelText("Prepared file storage budget")).toHaveValue(
+      null,
+    );
+  });
+});
diff --git a/web/src/components/settings/LimitField.tsx b/web/src/components/settings/LimitField.tsx
new file mode 100644
index 000000000..bac2e2078
--- /dev/null
+++ b/web/src/components/settings/LimitField.tsx
@@ -0,0 +1,151 @@
+import { useId, useState } from "react";
+
+import { Input } from "@/components/ui/input";
+import {
+  SETTINGS_NUMBER_WIDTH,
+  SettingFieldRow,
+} from "@/pages/admin-settings/SettingField";
+
+export interface LimitFieldProps {
+  label: string;
+  /** Stored value; equal to `unlimitedValue` when the limit is off. */
+  value: string;
+  onChange: (value: string) => void;
+  /** Sentinel the backend reads as "no limit". */
+  unlimitedValue?: string;
+  /** Fallback used when a limit is re-enabled and nothing was typed before. */
+  fallbackValue?: string;
+  unlimitedLabel?: string;
+  /** Rendered in the row's trailing unit slot, e.g. "Mbps". */
+  unit?: string;
+  /**
+   * Stored units per displayed unit, e.g. `1e9` to type a byte budget in GB.
+   * The stored value and the unlimited sentinel are unchanged — only what the
+   * admin reads and types is scaled.
+   */
+  scale?: number;
+  hint?: string;
+  min?: number;
+  disabled?: boolean;
+  restartRequired?: boolean;
+}
+
+/**
+ * Decimal places kept when a stored value is converted for display. Three is
+ * MB granularity on a GB budget, which is finer than any storage decision an
+ * admin makes here, and it keeps float division from surfacing as 53.68709…1.
+ */
+const SCALED_DECIMALS = 3;
+
+function toDisplayUnits(stored: string, scale: number): string {
+  if (scale === 1) return stored;
+  const trimmed = stored.trim();
+  if (trimmed === "") return "";
+  const parsed = Number(trimmed);
+  if (!Number.isFinite(parsed)) return stored;
+  return String(Number((parsed / scale).toFixed(SCALED_DECIMALS)));
+}
+
+function toStoredUnits(displayed: string, scale: number): string {
+  if (scale === 1) return displayed;
+  const trimmed = displayed.trim();
+  if (trimmed === "") return "";
+  const parsed = Number(trimmed);
+  if (!Number.isFinite(parsed)) return displayed;
+  return String(Math.round(parsed * scale));
+}
+
+/**
+ * Number input paired with an "Unlimited" checkbox, replacing the
+ * "0 = unlimited" hint convention. The sentinel never reaches the admin's
+ * eyes, but the saved value is unchanged.
+ */
+export function LimitField({
+  label,
+  value,
+  onChange,
+  unlimitedValue = "0",
+  fallbackValue = "",
+  unlimitedLabel = "Unlimited",
+  unit,
+  scale = 1,
+  hint,
+  min = 0,
+  disabled = false,
+  restartRequired = false,
+}: LimitFieldProps) {
+  const controlId = useId();
+  const checkboxId = useId();
+  const hintId = useId();
+  const unlimited = value.trim() === unlimitedValue;
+  // Remembers the limit that Unlimited replaced so unchecking restores it
+  // instead of dumping the admin back onto an empty box.
+  const [lastLimit, setLastLimit] = useState(fallbackValue);
+  // Keeps what was typed while it still round-trips to the stored value, so a
+  // scaled field does not eat the "." of "1." or rewrite "1.50" mid-keystroke.
+  const [draft, setDraft] = useState<string | null>(null);
+  const displayed =
+    draft !== null && toStoredUnits(draft, scale) === value
+      ? draft
+      : toDisplayUnits(value, scale);
+
+  function changeLimit(next: string) {
+    setDraft(next);
+    onChange(toStoredUnits(next, scale));
+  }
+
+  function toggleUnlimited(checked: boolean) {
+    setDraft(null);
+    if (checked) {
+      setLastLimit(unlimited ? fallbackValue : value);
+      onChange(unlimitedValue);
+      return;
+    }
+    onChange(lastLimit.trim() === unlimitedValue ? fallbackValue : lastLimit);
+  }
+
+  return (
+    <SettingFieldRow
+      label={label}
+      htmlFor={controlId}
+      description={hint}
+      descriptionId={hintId}
+      restartRequired={restartRequired}
+      unit={unit}
+    >
+      <div className="flex flex-wrap items-center justify-end gap-x-3 gap-y-2">
+        {/* Ahead of the input, not after it: the row's unit slot sits to the
+            right of the control edge, so anything between the input and that
+            edge would knock this field's box out of line with the plain number
+            fields it is stacked against. */}
+        <label
+          htmlFor={checkboxId}
+          className="flex shrink-0 items-center gap-2 text-sm"
+        >
+          <input
+            id={checkboxId}
+            type="checkbox"
+            checked={unlimited}
+            onChange={(e) => toggleUnlimited(e.target.checked)}
+            disabled={disabled}
+          />
+          {unlimitedLabel}
+        </label>
+        <Input
+          id={controlId}
+          type="number"
+          min={min}
+          // A scaled field is fractional by nature (0.5 GB), and the default
+          // step of 1 would mark those values invalid.
+          step={scale === 1 ? undefined : "any"}
+          value={unlimited ? "" : displayed}
+          placeholder={unlimited ? unlimitedLabel : undefined}
+          onChange={(e) => changeLimit(e.target.value)}
+          disabled={disabled || unlimited}
+          className={SETTINGS_NUMBER_WIDTH}
+          aria-describedby={hint ? hintId : undefined}
+        />
+      </div>
+    </SettingFieldRow>
+  );
+}
diff --git a/web/src/components/settings/PathSettingField.tsx b/web/src/components/settings/PathSettingField.tsx
new file mode 100644
index 000000000..cf3da08b0
--- /dev/null
+++ b/web/src/components/settings/PathSettingField.tsx
@@ -0,0 +1,93 @@
+import { useId, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  SETTINGS_CONTROL_WIDTH,
+  SettingFieldRow,
+} from "@/pages/admin-settings/SettingField";
+import { cn } from "@/lib/utils";
+
+export interface PathSettingFieldProps {
+  label: string;
+  /**
+   * What the server runs while the field is blank, e.g. `/tmp/silo-transcode`.
+   * It is shown as the placeholder and is what "Reset to default" restores, so
+   * it has to be the real effective value — see
+   * `@/pages/admin-settings/settingsPathDefaults`.
+   */
+  defaultValue: string;
+  /** Sentence under the label. Say what blank means, in words. */
+  description?: ReactNode;
+  value: string;
+  onChange: (value: string) => void;
+  /** Marks the field with a restart badge; drive it from `useRestartKeys`. */
+  restartRequired?: boolean;
+}
+
+/**
+ * A settings row for a filesystem path whose stored value may be blank, where
+ * blank is a real choice ("follow the server's rule") rather than "unset".
+ *
+ * Two things follow from that, and neither works on a plain text field: the
+ * placeholder has to name the path blank resolves to, and an admin who typed an
+ * override needs a way back that does not require knowing what the built-in
+ * value was. Reset stages an empty string through the normal form flow, so the
+ * save bar confirms it like any other edit.
+ */
+export function PathSettingField({
+  label,
+  defaultValue,
+  description,
+  value,
+  onChange,
+  restartRequired,
+}: PathSettingFieldProps) {
+  const controlId = useId();
+  const descriptionId = useId();
+  // Nothing to reset while the field already runs the default, whether it is
+  // blank or holds the default path verbatim: clearing it would save a row
+  // nobody could see the effect of.
+  const overridden = value !== "" && value !== defaultValue;
+
+  return (
+    <SettingFieldRow
+      label={label}
+      htmlFor={controlId}
+      description={description}
+      descriptionId={descriptionId}
+      restartRequired={restartRequired}
+    >
+      {/* The action sits under the control rather than beside it: the row
+          reserves a unit slot to the right of every control, so anything
+          between the input and that slot would knock this field's box out of
+          line with the rows stacked against it. */}
+      <div className="flex w-full flex-col items-stretch gap-1 sm:w-auto sm:items-end">
+        <Input
+          id={controlId}
+          type="text"
+          value={value}
+          placeholder={defaultValue}
+          onChange={(e) => onChange(e.target.value)}
+          className={cn("border-muted-foreground/25", SETTINGS_CONTROL_WIDTH)}
+          aria-describedby={description ? descriptionId : undefined}
+        />
+        {overridden ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="xs"
+            // Several of these rows can share a page, so the label names the
+            // field instead of leaving a screen reader with three identical
+            // "Reset to default" buttons.
+            aria-label={`Reset ${label} to default`}
+            className="text-muted-foreground hover:text-foreground -mr-2 self-end"
+            onClick={() => onChange("")}
+          >
+            Reset to default
+          </Button>
+        ) : null}
+      </div>
+    </SettingFieldRow>
+  );
+}
diff --git a/web/src/components/settings/ProviderTile.test.tsx b/web/src/components/settings/ProviderTile.test.tsx
new file mode 100644
index 000000000..1767bb6ce
--- /dev/null
+++ b/web/src/components/settings/ProviderTile.test.tsx
@@ -0,0 +1,145 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  ProviderTile,
+  ProviderTileGrid,
+} from "@/components/settings/ProviderTile";
+
+describe("ProviderTileGrid", () => {
+  it("stops at two columns so tile headers do not truncate the provider name", () => {
+    const { container } = render(
+      <ProviderTileGrid>
+        <ProviderTile name="OpenSubtitles" state="connected" />
+      </ProviderTileGrid>,
+    );
+
+    const grid = container.firstElementChild;
+    expect(grid).toHaveClass("sm:grid-cols-2");
+    expect(grid?.className).not.toMatch(/grid-cols-3/);
+  });
+});
+
+describe("ProviderTile", () => {
+  it("names the tile after the provider so it can be found as a group", () => {
+    render(
+      <ProviderTile
+        name="OpenSubtitles"
+        tagline="Community subtitles"
+        state="connected"
+      />,
+    );
+
+    expect(
+      screen.getByRole("group", { name: "OpenSubtitles" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Community subtitles")).toBeInTheDocument();
+  });
+
+  it("labels each connection state and exposes it for styling", () => {
+    const { rerender } = render(
+      <ProviderTile name="SubDL" state="connected" />,
+    );
+    expect(screen.getByText("Connected")).toBeInTheDocument();
+
+    rerender(<ProviderTile name="SubDL" state="not_connected" />);
+    expect(screen.getByText("Not connected")).toBeInTheDocument();
+
+    rerender(
+      <ProviderTile
+        name="SubDL"
+        state="error"
+        meta="401 — key rejected 2h ago"
+      />,
+    );
+    expect(screen.getByText("Error")).toBeInTheDocument();
+    expect(screen.getByText("401 — key rejected 2h ago")).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "SubDL" })).toHaveAttribute(
+      "data-state",
+      "error",
+    );
+  });
+
+  it("takes a pill text override", () => {
+    render(
+      <ProviderTile
+        name="TheTVDB"
+        state="connected"
+        statePill="Subscriber key"
+      />,
+    );
+
+    expect(screen.getByText("Subscriber key")).toBeInTheDocument();
+    expect(screen.queryByText("Connected")).not.toBeInTheDocument();
+  });
+
+  it("runs the tile's own action", async () => {
+    const onClick = vi.fn();
+    render(
+      <ProviderTile
+        name="SubSource"
+        state="not_connected"
+        primaryAction={{ label: "Connect", onClick }}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "Connect" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides the panel until the tile is expanded", () => {
+    const { rerender } = render(
+      <ProviderTile
+        name="TMDB"
+        state="connected"
+        primaryAction={{ label: "Manage", onClick: vi.fn() }}
+      >
+        <label>
+          API key
+          <input />
+        </label>
+      </ProviderTile>,
+    );
+
+    expect(screen.queryByLabelText("API key")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Manage" })).toBeInTheDocument();
+
+    rerender(
+      <ProviderTile
+        name="TMDB"
+        state="editing"
+        expanded
+        primaryAction={{ label: "Manage", onClick: vi.fn() }}
+      >
+        <label>
+          API key
+          <input />
+        </label>
+      </ProviderTile>,
+    );
+
+    expect(screen.getByLabelText("API key")).toBeInTheDocument();
+    // The tile's own button gives way to the panel's action row.
+    expect(
+      screen.queryByRole("button", { name: "Manage" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "TMDB" })).toHaveAttribute(
+      "data-expanded",
+      "true",
+    );
+  });
+
+  it("disables everything inside while busy", () => {
+    render(
+      <ProviderTile
+        name="TMDB"
+        state="connected"
+        busy
+        primaryAction={{ label: "Manage", onClick: vi.fn() }}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Manage" })).toBeDisabled();
+  });
+});
diff --git a/web/src/components/settings/ProviderTile.tsx b/web/src/components/settings/ProviderTile.tsx
new file mode 100644
index 000000000..53f47c628
--- /dev/null
+++ b/web/src/components/settings/ProviderTile.tsx
@@ -0,0 +1,293 @@
+import { useId, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import "@/styles/admin-settings.css";
+
+export type ProviderTileState =
+  "connected" | "not_connected" | "error" | "editing";
+
+export interface ProviderTileAction {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export interface ProviderTileProps {
+  name: string;
+  /** One short line under the name, e.g. "Community subtitles". */
+  tagline?: ReactNode;
+  /** Two letters for the logo square; ignored when `logo` is given. */
+  monogram?: string;
+  /** Background/foreground classes for the logo square. */
+  monogramClass?: string;
+  /** Replaces the monogram, e.g. with an icon. */
+  logo?: ReactNode;
+  state: ProviderTileState;
+  /** Overrides the default word for the state. */
+  statePill?: string;
+  /** Small line at the foot. Only for what the state does not already say. */
+  meta?: ReactNode;
+  /** The tile's own button — Connect, Manage, Fix. */
+  primaryAction?: ProviderTileAction;
+  /** Chips beside the name, e.g. a `RestartBadge`. */
+  badge?: ReactNode;
+  /** Controls level with the state, e.g. an enable switch. */
+  headerActions?: ReactNode;
+  /** Spans the tile across the grid and reveals `children` as an inline panel. */
+  expanded?: boolean;
+  /** Disables every control inside while a request is in flight. */
+  busy?: boolean;
+  className?: string;
+  /** The inline connect panel: credential fields and their action row. */
+  children?: ReactNode;
+}
+
+const STATE_LABELS: Record<ProviderTileState, string> = {
+  connected: "Connected",
+  not_connected: "Not connected",
+  error: "Error",
+  editing: "Editing",
+};
+
+const STATE_DOT_CLASSES: Record<ProviderTileState, string> = {
+  connected: "bg-emerald-500",
+  not_connected: "bg-muted-foreground/40",
+  error: "bg-amber-500",
+  editing: "bg-[var(--settings-accent)]",
+};
+
+/** Dot plus word: the tile's one status signal, reused wherever it is listed. */
+export function ProviderState({
+  state,
+  label,
+  className,
+}: {
+  state: ProviderTileState;
+  label?: string;
+  className?: string;
+}) {
+  return (
+    <span
+      data-state={state}
+      className={cn(
+        "inline-flex shrink-0 items-center gap-1.5 text-[11.5px] whitespace-nowrap",
+        state === "error"
+          ? "text-amber-600 dark:text-amber-400"
+          : "text-muted-foreground",
+        className,
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className={cn("size-1.5 rounded-full", STATE_DOT_CLASSES[state])}
+      />
+      {label ?? STATE_LABELS[state]}
+    </span>
+  );
+}
+
+/**
+ * Two-up grid for tiles; an expanded tile spans the full width inside it.
+ * It stops at two columns on purpose: the settings content column is clamped
+ * to `max-w-3xl`, so a third column leaves each tile too narrow for its header
+ * (monogram, name, badge, state pill) and truncates provider names.
+ */
+export function ProviderTileGrid({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className={cn("grid gap-3 sm:grid-cols-2", className)}>{children}</div>
+  );
+}
+
+/** Two letters for a provider whose logo square is just its name, e.g. "AniList" → "AN". */
+export function providerMonogram(name: string): string {
+  return (
+    name
+      .replace(/[^\p{L}\p{N}]/gu, "")
+      .slice(0, 2)
+      .toUpperCase() || "??"
+  );
+}
+
+/** Result of the last Test on a tile, kept in memory for the tile itself. */
+export interface ProviderTestState {
+  ok: boolean;
+  message: string;
+  /** `Date.now()` when the result came back. */
+  at: number;
+  durationMs: number;
+}
+
+function testedLabel(test: ProviderTestState): string {
+  const seconds = Math.max(0, Math.round((Date.now() - test.at) / 1000));
+  const ago =
+    seconds < 60 ? `${seconds}s ago` : `${Math.round(seconds / 60)}m ago`;
+  return `Tested ${ago} · ${test.durationMs} ms`;
+}
+
+/**
+ * The tile's state, from the three things every provider page knows: whether
+ * its panel is open, the last test, and whether the provider is actually usable
+ * right now. Shared so "connected" means the same thing on every page.
+ */
+export function resolveProviderTileState({
+  expanded,
+  test,
+  connected,
+}: {
+  expanded: boolean;
+  test: ProviderTestState | undefined;
+  connected: boolean;
+}): ProviderTileState {
+  if (expanded) return "editing";
+  if (test && !test.ok) return "error";
+  return connected ? "connected" : "not_connected";
+}
+
+/**
+ * The action row every connect panel ends with. Every control in it carries a
+ * border or a fill at rest: a `ghost` button reads as plain text until it is
+ * hovered, which hid the secondary actions from admins who never hovered them.
+ */
+export function ProviderPanelActions({
+  test,
+  children,
+}: {
+  test?: ProviderTestState;
+  children: ReactNode;
+}) {
+  return (
+    // Buttons sit at the right edge — the same corner as the collapsed tile's
+    // Manage button — so the eye finds the actions in one place in both
+    // states. The test status takes the leftover left side.
+    <div className="mt-3.5 flex flex-wrap items-center justify-end gap-2">
+      {test ? (
+        <span
+          role="status"
+          className={
+            test.ok
+              ? "text-muted-foreground mr-auto text-[11.5px]"
+              : "mr-auto text-[11.5px] text-amber-600 dark:text-amber-400"
+          }
+        >
+          {test.ok ? testedLabel(test) : test.message}
+        </span>
+      ) : null}
+      {children}
+    </div>
+  );
+}
+
+/**
+ * One third-party provider: identity, connection state, and — once expanded —
+ * its credential panel inline instead of in a dialog, so the admin never loses
+ * sight of the list they are working through.
+ */
+export function ProviderTile({
+  name,
+  tagline,
+  monogram,
+  monogramClass,
+  logo,
+  state,
+  statePill,
+  meta,
+  primaryAction,
+  badge,
+  headerActions,
+  expanded = false,
+  busy = false,
+  className,
+  children,
+}: ProviderTileProps) {
+  const headingId = useId();
+  const mark = logo ?? (monogram ?? name.slice(0, 2)).toUpperCase();
+
+  return (
+    <fieldset
+      disabled={busy}
+      aria-labelledby={headingId}
+      data-state={state}
+      data-expanded={expanded ? "true" : undefined}
+      className={cn(
+        "border-border/70 bg-foreground/[0.02] flex min-w-0 flex-col rounded-2xl border p-4",
+        expanded && "col-span-full shadow-lg",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-3">
+        <span
+          aria-hidden="true"
+          className={cn(
+            "grid size-9 shrink-0 place-items-center rounded-[10px] text-sm font-bold tracking-tight",
+            monogramClass ?? "bg-muted text-muted-foreground",
+          )}
+        >
+          {mark}
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 id={headingId} className="truncate text-sm font-medium">
+              {name}
+            </h3>
+            {badge}
+          </div>
+          {tagline ? (
+            <p className="text-muted-foreground mt-0.5 text-xs leading-snug">
+              {tagline}
+            </p>
+          ) : null}
+        </div>
+        <div className="flex shrink-0 items-center gap-2.5">
+          <ProviderState state={state} label={statePill} />
+          {headerActions}
+        </div>
+      </div>
+
+      {/* Grid rows stretch the tiles to equal height, but a taller tagline
+          would otherwise push these rows down in one tile and not its
+          neighbor. `mt-auto` on the first bottom-block element pins the
+          action and meta lines to the tile foot, so they sit on the same
+          baseline across every tile in the row. */}
+      {!expanded && primaryAction ? (
+        <div className="mt-auto flex justify-end pt-3.5">
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={primaryAction.onClick}
+            disabled={primaryAction.disabled}
+          >
+            {primaryAction.label}
+          </Button>
+        </div>
+      ) : null}
+
+      {meta ? (
+        <p
+          className={cn(
+            "text-[11.5px]",
+            !expanded && primaryAction ? "mt-2.5" : "mt-auto pt-2.5",
+            state === "error"
+              ? "text-amber-600 dark:text-amber-400"
+              : "text-muted-foreground",
+          )}
+        >
+          {meta}
+        </p>
+      ) : null}
+
+      {expanded && children ? (
+        <div className="border-border/70 mt-3.5 border-t pt-3.5">
+          {children}
+        </div>
+      ) : null}
+    </fieldset>
+  );
+}
diff --git a/web/src/components/settings/RestartBadge.tsx b/web/src/components/settings/RestartBadge.tsx
new file mode 100644
index 000000000..de50d0d97
--- /dev/null
+++ b/web/src/components/settings/RestartBadge.tsx
@@ -0,0 +1,28 @@
+import { RotateCw } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RESTART_TITLE = "Takes effect after a server restart";
+
+/**
+ * Small amber chip marking a setting whose value is only read at startup.
+ * Driven by the compiled restart-required key list (see `useRestartKeys`) so
+ * the fact never has to be hand-copied into a field hint.
+ */
+export function RestartBadge({ className }: { className?: string }) {
+  return (
+    <span
+      title={RESTART_TITLE}
+      aria-label={RESTART_TITLE}
+      className={cn(
+        "inline-flex shrink-0 items-center gap-1 rounded-md border border-amber-500/25",
+        "bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium tracking-wide",
+        "text-amber-600 dark:text-amber-400",
+        className,
+      )}
+    >
+      <RotateCw className="size-2.5" aria-hidden="true" />
+      Restart
+    </span>
+  );
+}
diff --git a/web/src/components/settings/SecretField.test.tsx b/web/src/components/settings/SecretField.test.tsx
new file mode 100644
index 000000000..59bc26957
--- /dev/null
+++ b/web/src/components/settings/SecretField.test.tsx
@@ -0,0 +1,205 @@
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { SecretField } from "@/components/settings/SecretField";
+
+function Harness({
+  configured,
+  onChange,
+  onKeep,
+  onClear,
+  cleared,
+  disabled,
+}: {
+  configured: boolean;
+  onChange?: (value: string) => void;
+  onKeep?: () => void;
+  onClear?: () => void;
+  cleared?: boolean;
+  disabled?: boolean;
+}) {
+  const [value, setValue] = useState("");
+  return (
+    <SecretField
+      label="Secret key"
+      value={value}
+      configured={configured}
+      onChange={(next) => {
+        setValue(next);
+        onChange?.(next);
+      }}
+      onKeep={onKeep}
+      onClear={onClear}
+      cleared={cleared}
+      disabled={disabled}
+    />
+  );
+}
+
+/**
+ * Models a settings-form parent: `null` is an untouched field, `""` is the
+ * dirty empty value that a staged clear writes on save.
+ */
+function FormHarness() {
+  const [staged, setStaged] = useState<string | null>(null);
+  return (
+    <SecretField
+      label="Secret key"
+      value={staged ?? ""}
+      configured
+      onChange={setStaged}
+      onKeep={() => setStaged(null)}
+      onClear={() => setStaged("")}
+      cleared={staged === ""}
+    />
+  );
+}
+
+const CLEAR = { name: "Clear saved value" };
+const KEEP = { name: "Keep saved value" };
+
+describe("SecretField", () => {
+  it("shows a password input when nothing is saved", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Harness configured={false} onChange={onChange} />);
+
+    const input = screen.getByLabelText("Secret key");
+    expect(input).toHaveAttribute("type", "password");
+    expect(input).toHaveAttribute("placeholder", "Not configured");
+    await user.type(input, "abc");
+    expect(onChange).toHaveBeenLastCalledWith("abc");
+  });
+
+  it("shows a saved secret as a masked, editable input", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Harness configured onChange={onChange} />);
+
+    // No Replace step: the input is live and the mask stands in for the value.
+    const input = screen.getByLabelText("Secret key");
+    expect(input).toHaveAttribute("type", "password");
+    expect(input).toHaveAttribute("placeholder", "••••••••••••");
+    expect(
+      screen.getByText(
+        "Type to replace the saved value; leave blank to keep it.",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /Replace/ }),
+    ).not.toBeInTheDocument();
+
+    await user.type(input, "new-secret");
+    expect(onChange).toHaveBeenLastCalledWith("new-secret");
+  });
+
+  it("delegates emptying the input to onKeep so the parent's draft stays authoritative", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    const onKeep = vi.fn();
+    render(<Harness configured onChange={onChange} onKeep={onKeep} />);
+
+    const input = screen.getByLabelText("Secret key");
+    await user.type(input, "x");
+    onChange.mockClear();
+
+    // Deleting back to empty means "keep the saved secret" — the parent
+    // reverts its draft instead of staging "" (which would clear on save).
+    await user.clear(input);
+    expect(onKeep).toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalledWith("");
+  });
+
+  it("clears its own draft when no onKeep is supplied", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Harness configured onChange={onChange} />);
+
+    const input = screen.getByLabelText("Secret key");
+    await user.type(input, "x");
+    onChange.mockClear();
+
+    await user.clear(input);
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("does not treat an empty input as a keep while nothing is saved", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    const onKeep = vi.fn();
+    render(<Harness configured={false} onChange={onChange} onKeep={onKeep} />);
+
+    const input = screen.getByLabelText("Secret key");
+    await user.type(input, "x");
+    await user.clear(input);
+    expect(onKeep).not.toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("offers no clear action on a page that owns its own clear", () => {
+    render(<Harness configured />);
+
+    expect(screen.queryByRole("button", CLEAR)).not.toBeInTheDocument();
+  });
+
+  it("offers no clear action while nothing is saved", () => {
+    render(<Harness configured={false} onClear={vi.fn()} />);
+
+    expect(screen.queryByRole("button", CLEAR)).not.toBeInTheDocument();
+  });
+
+  it("offers no clear action while the field is read-only", () => {
+    render(<Harness configured onClear={vi.fn()} disabled />);
+
+    expect(screen.queryByRole("button", CLEAR)).not.toBeInTheDocument();
+  });
+
+  it("stages a clear from an action that carries a border at rest", async () => {
+    const user = userEvent.setup();
+    const onClear = vi.fn();
+    render(<Harness configured onClear={onClear} />);
+
+    const action = screen.getByRole("button", CLEAR);
+    // Never `ghost`: an action that only appears on hover is invisible to the
+    // admins who need it.
+    expect(action).toHaveAttribute("data-variant", "outline");
+    await user.click(action);
+    expect(onClear).toHaveBeenCalled();
+  });
+
+  it("says a staged clear will be saved, and offers to keep the value instead", async () => {
+    const user = userEvent.setup();
+    render(<FormHarness />);
+
+    await user.click(screen.getByRole("button", CLEAR));
+
+    const input = screen.getByLabelText("Secret key");
+    expect(input).toHaveAttribute("placeholder", "Will be cleared on save");
+    expect(
+      screen.getByText(
+        "Save clears the stored value; type to set a new one instead.",
+      ),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", KEEP));
+    expect(input).toHaveAttribute("placeholder", "••••••••••••");
+    expect(screen.getByRole("button", CLEAR)).toBeInTheDocument();
+  });
+
+  it("stages a replacement when the admin types over a staged clear", async () => {
+    const user = userEvent.setup();
+    render(<FormHarness />);
+
+    await user.click(screen.getByRole("button", CLEAR));
+    const input = screen.getByLabelText("Secret key");
+    await user.type(input, "replacement");
+
+    // A typed value is neither a keep nor a clear, so the action steps aside.
+    expect(input).toHaveValue("replacement");
+    expect(input).toHaveAttribute("placeholder", "••••••••••••");
+    expect(screen.queryByRole("button", CLEAR)).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", KEEP)).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/components/settings/SecretField.tsx b/web/src/components/settings/SecretField.tsx
new file mode 100644
index 000000000..9f263fa52
--- /dev/null
+++ b/web/src/components/settings/SecretField.tsx
@@ -0,0 +1,144 @@
+import { useId } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import {
+  SETTINGS_CONTROL_WIDTH,
+  SettingFieldRow,
+} from "@/pages/admin-settings/SettingField";
+
+export interface SecretFieldProps {
+  label: string;
+  /** Staged plaintext value; empty while the saved secret is kept. */
+  value: string;
+  /** Whether the server already stores a value for this key. */
+  configured: boolean;
+  onChange: (value: string) => void;
+  /**
+   * Called when the input is emptied while a saved value exists, so a
+   * settings-form parent can revert the staged draft (`form.resetValue`)
+   * instead of staging `""` — a dirty `""` would clear the secret on save.
+   * Draft-based parents that already skip empty values may omit it.
+   */
+  onKeep?: () => void;
+  /**
+   * Stages clearing the saved secret, normally `form.setValue(key, "")` so the
+   * page's save bar writes the empty value with the rest of the batch. Pass it
+   * only where the surface has no clear action of its own; pages that own one
+   * (Disconnect, Clear credentials) keep a single clear per surface.
+   */
+  onClear?: () => void;
+  /**
+   * Whether the parent currently has a clear staged for this key, e.g.
+   * `form.isDirty(key) && form.getValue(key) === ""`. Only meaningful
+   * alongside `onClear`.
+   */
+  cleared?: boolean;
+  hint?: string;
+  disabled?: boolean;
+  restartRequired?: boolean;
+}
+
+/** Description shown while a clear is staged, in place of `hint`. */
+const CLEARED_DESCRIPTION =
+  "Save clears the stored value; type to set a new one instead.";
+
+/**
+ * The single credential control for admin settings: one always-editable
+ * password input. A saved secret shows as a masked placeholder, typing stages
+ * a replacement, and emptying the input keeps the saved value, so no ordinary
+ * save can erase a secret by accident.
+ *
+ * Clearing one is always deliberate, and comes from exactly one of two places:
+ * a page-level action (Disconnect, Clear credentials), or — on surfaces that
+ * have none — this field's own opt-in `onClear` affordance, which stages the
+ * empty write for the page's save bar and can be taken back with "Keep saved
+ * value" or Discard.
+ */
+export function SecretField({
+  label,
+  value,
+  configured,
+  onChange,
+  onKeep,
+  onClear,
+  cleared = false,
+  hint,
+  disabled = false,
+  restartRequired = false,
+}: SecretFieldProps) {
+  const controlId = useId();
+  const hintId = useId();
+
+  // A typed replacement outranks both other states: it is neither a keep nor a
+  // clear, so the action disappears until the input is empty again.
+  const clearStaged = cleared && value === "";
+  const showAction = onClear != null && configured && !disabled && value === "";
+
+  const description = clearStaged
+    ? CLEARED_DESCRIPTION
+    : (hint ??
+      (configured
+        ? "Type to replace the saved value; leave blank to keep it."
+        : undefined));
+
+  function keepSaved() {
+    if (onKeep) onKeep();
+    else onChange("");
+  }
+
+  function handleChange(next: string) {
+    if (next === "" && configured) {
+      // Emptying the field means "keep the saved secret", never "clear it".
+      keepSaved();
+      return;
+    }
+    onChange(next);
+  }
+
+  return (
+    <SettingFieldRow
+      label={label}
+      htmlFor={controlId}
+      description={description}
+      descriptionId={hintId}
+      restartRequired={restartRequired}
+    >
+      {/* The action sits ahead of the input, as in LimitField: the row's unit
+          slot is to the right of the control edge, so anything between the
+          input and that edge would knock this field out of line with the
+          plain rows it is stacked against. */}
+      <div className="flex w-full flex-wrap items-center justify-end gap-x-3 gap-y-2 sm:w-auto">
+        {showAction ? (
+          <Button
+            type="button"
+            size="sm"
+            // Outline, never ghost: a clear must carry a border at rest rather
+            // than appear only on hover.
+            variant="outline"
+            onClick={clearStaged ? keepSaved : onClear}
+          >
+            {clearStaged ? "Keep saved value" : "Clear saved value"}
+          </Button>
+        ) : null}
+        <Input
+          id={controlId}
+          type="password"
+          placeholder={
+            clearStaged
+              ? "Will be cleared on save"
+              : configured
+                ? "••••••••••••"
+                : "Not configured"
+          }
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          disabled={disabled}
+          className={cn("border-muted-foreground/25", SETTINGS_CONTROL_WIDTH)}
+          aria-describedby={description ? hintId : undefined}
+        />
+      </div>
+    </SettingFieldRow>
+  );
+}
diff --git a/web/src/components/settings/SettingSlider.tsx b/web/src/components/settings/SettingSlider.tsx
index 5b505ac77..628db6fe3 100644
--- a/web/src/components/settings/SettingSlider.tsx
+++ b/web/src/components/settings/SettingSlider.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 
 import { Slider } from "@/components/ui/slider";
+import { SETTINGS_CONTROL_WIDTH } from "@/pages/admin-settings/SettingField";
+import { cn } from "@/lib/utils";
 
 interface SettingSliderProps {
   /** The persisted value. The thumb returns here if a save is rejected. */
@@ -42,8 +44,12 @@ export function SettingSlider({
   const shown = draft ?? value;
 
   return (
+    // Defaults to the shared settings control width so a slider row ends on the
+    // same edge as the inputs and selects it is stacked against.
     <div
-      className={className ?? "flex w-full items-center gap-3 sm:max-w-[260px]"}
+      className={
+        className ?? cn("flex items-center gap-3", SETTINGS_CONTROL_WIDTH)
+      }
     >
       <Slider
         value={[shown]}
diff --git a/web/src/components/settings/SettingsGroup.tsx b/web/src/components/settings/SettingsGroup.tsx
index d573ff6c4..5a6898a3f 100644
--- a/web/src/components/settings/SettingsGroup.tsx
+++ b/web/src/components/settings/SettingsGroup.tsx
@@ -1,38 +1,60 @@
-import type { ReactNode } from "react";
+import { useId, type ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
 
 interface SettingsGroupProps {
   title: string;
-  description?: string;
+  description?: ReactNode;
+  /** Right-aligned controls level with the title. */
+  actions?: ReactNode;
+  /**
+   * Content rows that draw their own padding and hairlines (admin
+   * `SettingFieldRow`s) instead of spaced blocks.
+   */
+  flush?: boolean;
   children: ReactNode;
   className?: string;
 }
 
+/**
+ * The one settings panel: a quiet surface with a small title, shared by the
+ * user settings pages and (via the admin `FieldGroup` wrapper) the admin
+ * settings pages, so both surfaces read as the same product.
+ */
 export function SettingsGroup({
   title,
   description,
+  actions,
+  flush = false,
   children,
   className,
 }: SettingsGroupProps) {
+  const titleId = useId();
   return (
     <section
-      className={cn(
-        "surface-panel rounded-[1.7rem] border-0 px-4 py-5 shadow-none sm:px-6",
-        className,
-      )}
+      role="group"
+      aria-labelledby={titleId}
+      className={cn("surface-panel-raised px-4 py-5 sm:px-6", className)}
     >
-      <div className="space-y-1">
-        <h3 className="text-foreground text-sm font-semibold tracking-tight">
-          {title}
-        </h3>
-        {description ? (
-          <p className="text-muted-foreground text-[13px] leading-relaxed">
-            {description}
-          </p>
+      <div className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
+        <div className="min-w-0 space-y-1">
+          <h3
+            id={titleId}
+            className="text-foreground text-sm font-semibold tracking-tight"
+          >
+            {title}
+          </h3>
+          {description ? (
+            <p className="text-muted-foreground text-[13px] leading-relaxed">
+              {description}
+            </p>
+          ) : null}
+        </div>
+        {actions ? (
+          <div className="flex shrink-0 items-center gap-2">{actions}</div>
         ) : null}
       </div>
-      <div className="mt-5 space-y-4">{children}</div>
+      <div className={flush ? "mt-2" : "mt-5 space-y-4"}>{children}</div>
     </section>
   );
 }
diff --git a/web/src/components/settings/SettingsPageHeader.tsx b/web/src/components/settings/SettingsPageHeader.tsx
new file mode 100644
index 000000000..50b298da8
--- /dev/null
+++ b/web/src/components/settings/SettingsPageHeader.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+import "@/styles/admin-settings.css";
+
+export interface SettingsPageHeaderProps {
+  title: string;
+  /** Right-aligned page actions, level with the title. */
+  actions?: ReactNode;
+  className?: string;
+}
+
+/**
+ * The heading every admin settings page opens with: the page's name and
+ * nothing else.
+ */
+export function SettingsPageHeader({
+  title,
+  actions,
+  className,
+}: SettingsPageHeaderProps) {
+  return (
+    <header
+      className={cn(
+        "flex min-w-0 flex-wrap items-start justify-between gap-3",
+        className,
+      )}
+    >
+      <h1 className="text-[28px] leading-tight font-semibold tracking-[-0.03em]">
+        {title}
+      </h1>
+      {actions ? (
+        <div className="flex shrink-0 items-center gap-2">{actions}</div>
+      ) : null}
+    </header>
+  );
+}
diff --git a/web/src/components/settings/SettingsPageRail.tsx b/web/src/components/settings/SettingsPageRail.tsx
new file mode 100644
index 000000000..da34be436
--- /dev/null
+++ b/web/src/components/settings/SettingsPageRail.tsx
@@ -0,0 +1,48 @@
+import { SideNavItem, SideNavSection } from "@/components/SideNav";
+import {
+  ADMIN_SETTINGS_NAV,
+  type AdminSettingsSearchItem,
+} from "@/lib/adminSettingsSearch";
+import { settingsPageHref } from "@/hooks/admin/useSettingsOverview";
+
+export interface SettingsPageRailProps {
+  /** Page id of the page being shown, e.g. `general`. */
+  activeId: string;
+  /** Pages to show — pass the search-filtered list; defaults to every page. */
+  items?: readonly AdminSettingsSearchItem[];
+}
+
+/**
+ * The admin settings sibling nav: every settings page one hop away, rendered
+ * with the same `SideNavItem` rail the user settings page uses so the two
+ * settings surfaces read identically. Desktop only — on smaller screens the
+ * Overview (via the All settings link) is the directory.
+ */
+export function SettingsPageRail({
+  activeId,
+  items = ADMIN_SETTINGS_NAV,
+}: SettingsPageRailProps) {
+  return (
+    <nav
+      aria-label="Settings pages"
+      className="sticky top-6 space-y-5 py-5 pr-3 pl-5"
+    >
+      <SideNavSection label="Settings" idPrefix="admin-settings-nav">
+        {items.map((item) => (
+          <SideNavItem
+            key={item.id}
+            label={item.label}
+            icon={item.icon}
+            href={settingsPageHref(item.id)}
+            active={item.id === activeId}
+          />
+        ))}
+      </SideNavSection>
+      {items.length === 0 ? (
+        <p className="text-muted-foreground px-2 text-sm">
+          No matching settings
+        </p>
+      ) : null}
+    </nav>
+  );
+}
diff --git a/web/src/components/settings/SettingsSearchInput.tsx b/web/src/components/settings/SettingsSearchInput.tsx
index 57d52b418..06e49188b 100644
--- a/web/src/components/settings/SettingsSearchInput.tsx
+++ b/web/src/components/settings/SettingsSearchInput.tsx
@@ -2,48 +2,50 @@ import { useEffect, useId, useRef } from "react";
 import { Search, X } from "lucide-react";
 
 import { Input } from "@/components/ui/input";
+import { searchShortcutLabel } from "@/lib/keyboardShortcut";
 import { cn } from "@/lib/utils";
 
 interface SettingsSearchInputProps {
   value: string;
   onChange: (value: string) => void;
   resultCount: number;
-  totalCount: number;
   placeholder?: string;
-  itemLabel?: string;
   emptyLabel?: string;
   className?: string;
   shortcutMediaQuery?: string;
   showShortcutHint?: boolean;
+  /**
+   * Focus the input on ⌘K / Ctrl-K. Turn off where another surface owns that
+   * shortcut (the admin area's command palette).
+   */
+  captureShortcut?: boolean;
 }
 
 export function SettingsSearchInput({
   value,
   onChange,
   resultCount,
-  totalCount,
   placeholder = "Search settings",
-  itemLabel = "settings sections",
   emptyLabel = "No matching settings",
   className,
   shortcutMediaQuery,
   showShortcutHint = false,
+  captureShortcut = true,
 }: SettingsSearchInputProps) {
   const inputId = useId();
   const inputRef = useRef<HTMLInputElement>(null);
   const hasQuery = value.trim().length > 0;
-  const shortcutHint =
-    typeof navigator !== "undefined" &&
-    /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
-      ? "⌘ K"
-      : "Ctrl K";
+  const shortcutHint = searchShortcutLabel();
+  // Idle shows nothing: a "12 settings pages" style count under an untouched
+  // box is noise. The line only speaks while a query is filtering.
   const status = hasQuery
     ? resultCount === 0
       ? emptyLabel
       : `${resultCount} ${resultCount === 1 ? "match" : "matches"}`
-    : `${totalCount} ${itemLabel}`;
+    : null;
 
   useEffect(() => {
+    if (!captureShortcut) return;
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.defaultPrevented || !(event.metaKey || event.ctrlKey)) return;
       if (event.key.toLowerCase() !== "k") return;
@@ -63,7 +65,7 @@ export function SettingsSearchInput({
       window.removeEventListener("keydown", onKeyDown, { capture: true });
       document.removeEventListener("keydown", onKeyDown, { capture: true });
     };
-  }, [shortcutMediaQuery]);
+  }, [captureShortcut, shortcutMediaQuery]);
 
   return (
     <div className={cn("w-full", className)}>
@@ -106,7 +108,12 @@ export function SettingsSearchInput({
           </kbd>
         ) : null}
       </div>
-      <p className="text-muted-foreground mt-2 text-xs" aria-live="polite">
+      {/* Always mounted so the live region reliably announces count changes;
+          visually collapses to nothing while idle. */}
+      <p
+        className={cn("text-muted-foreground text-xs", status && "mt-2")}
+        aria-live="polite"
+      >
         {status}
       </p>
     </div>
diff --git a/web/src/components/settings/SettingsSubheading.tsx b/web/src/components/settings/SettingsSubheading.tsx
new file mode 100644
index 000000000..fae16359b
--- /dev/null
+++ b/web/src/components/settings/SettingsSubheading.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+export interface SettingsSubheadingProps {
+  /** The heading itself, e.g. "Per user". Sentence case; it is uppercased in CSS. */
+  children: ReactNode;
+  /**
+   * One line under the heading, for a cluster whose scope is not obvious from
+   * the rows themselves ("Counted per login account…").
+   */
+  caption?: ReactNode;
+}
+
+/**
+ * A divider inside a settings group: the one treatment for a sub-grouping label,
+ * so "Per user" in Downloads, "Mail Server" in Notifications and "Permission
+ * checks" in Infrastructure read as the same kind of thing.
+ *
+ * Deliberately quieter than a `SettingsGroup` title and than a row label — it
+ * separates rows without competing with them, which is what four different
+ * hand-rolled versions of this were each guessing at.
+ */
+export function SettingsSubheading({
+  children,
+  caption,
+}: SettingsSubheadingProps) {
+  return (
+    <div className="pt-4 pb-1">
+      <h4 className="text-muted-foreground/80 text-[11px] font-semibold tracking-wider uppercase">
+        {children}
+      </h4>
+      {caption ? (
+        <p className="text-muted-foreground mt-1 text-xs leading-relaxed">
+          {caption}
+        </p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/web/src/components/sidebarItemNavigation.ts b/web/src/components/sidebarItemNavigation.ts
index 054df71d3..4605c1e1b 100644
--- a/web/src/components/sidebarItemNavigation.ts
+++ b/web/src/components/sidebarItemNavigation.ts
@@ -1,9 +1,12 @@
 export const SIDEBAR_COLLAPSE_DURATION_MS = 300;
-export const SIDEBAR_TRANSITION_FALLBACK_MS = SIDEBAR_COLLAPSE_DURATION_MS + 80;
+// How long a caller waits for the collapse when it cannot observe the
+// transition itself. Kept well under the collapse duration: the gate exists to
+// hide a detail skeleton, and holding a ready page longer than this reads as
+// lag rather than motion.
+export const SIDEBAR_TRANSITION_FALLBACK_MS = 150;
 // Hover expansion and hidden-tab rAF suspension must never hold the detail
 // shell indefinitely. Settling is preferred, but this is the absolute cap.
-export const SIDEBAR_DETAILS_REVEAL_DEADLINE_MS =
-  SIDEBAR_TRANSITION_FALLBACK_MS * 2;
+export const SIDEBAR_DETAILS_REVEAL_DEADLINE_MS = 760;
 
 export function sidebarDetailsRevealDelay(reduceMotion: boolean): number {
   return reduceMotion ? 0 : SIDEBAR_TRANSITION_FALLBACK_MS;
diff --git a/web/src/hooks/admin/useSettingsOverview.test.ts b/web/src/hooks/admin/useSettingsOverview.test.ts
new file mode 100644
index 000000000..9052ae271
--- /dev/null
+++ b/web/src/hooks/admin/useSettingsOverview.test.ts
@@ -0,0 +1,320 @@
+import { describe, expect, it } from "vitest";
+
+import { ADMIN_SETTINGS_NAV } from "@/lib/adminSettingsSearch";
+import {
+  buildSettingsOverview,
+  type OverviewCard,
+  type OverviewTile,
+  type SettingsOverviewInput,
+} from "./useSettingsOverview";
+
+function tile(input: SettingsOverviewInput, id: string): OverviewTile {
+  const found = buildSettingsOverview(input).tiles.find(
+    (entry) => entry.id === id,
+  );
+  if (!found) throw new Error(`no tile ${id}`);
+  return found;
+}
+
+function card(input: SettingsOverviewInput, id: string): OverviewCard {
+  const found = buildSettingsOverview(input).cards.find(
+    (entry) => entry.id === id,
+  );
+  if (!found) throw new Error(`no card ${id}`);
+  return found;
+}
+
+describe("buildSettingsOverview health tiles", () => {
+  it("degrades to placeholders rather than throwing when nothing has loaded", () => {
+    const model = buildSettingsOverview({});
+
+    expect(model.tiles).toHaveLength(5);
+    expect(model.cards).toHaveLength(12);
+    expect(tile({}, "storage").stateText).toBe("Not set up");
+    expect(card({}, "general")).toEqual({ id: "general" });
+  });
+
+  it("names the bucket when only public storage is configured", () => {
+    const storage = tile(
+      { storageAvailable: true, settings: { "s3.public_bucket": "silo-art" } },
+      "storage",
+    );
+
+    expect(storage.state).toBe("ok");
+    expect(storage.detail).toBe("S3 · silo-art");
+    // A healthy tile is a fact, not a task: it carries no link.
+    expect(storage.action).toBeUndefined();
+  });
+
+  it("summarises both buckets when private storage is configured too", () => {
+    const storage = tile(
+      {
+        storageAvailable: true,
+        settings: {
+          "s3.public_bucket": "silo-art",
+          "s3.private_bucket": "silo-private",
+        },
+      },
+      "storage",
+    );
+
+    expect(storage.detail).toBe("S3 · public + private");
+  });
+
+  it("says a restart is pending once the first bucket is saved", () => {
+    // `storage_available` is settled when the S3 client is built at boot, so
+    // the save that configures the first bucket cannot flip it. "Not set up"
+    // there tells an admin who just did the work that it did not take.
+    const storage = tile(
+      {
+        storageAvailable: false,
+        settings: { "s3.public_bucket": "silo-art" },
+        serverStatus: {
+          started_at: "2026-01-01T00:00:00Z",
+          restart_required: true,
+          restart_required_reason: "server_settings",
+          restart_requested: false,
+        },
+      },
+      "storage",
+    );
+
+    expect(storage.state).toBe("warn");
+    expect(storage.stateText).toBe("Restart pending");
+    expect(storage.detail).toBe("S3 · silo-art · applies after a restart");
+    expect(storage.action).toEqual({ label: "Fix", page: "infrastructure" });
+  });
+
+  it("still calls storage unconfigured when no bucket is saved", () => {
+    // A restart owed by some other save says nothing about storage.
+    const storage = tile(
+      {
+        storageAvailable: false,
+        serverStatus: {
+          started_at: "2026-01-01T00:00:00Z",
+          restart_required: true,
+          restart_required_reason: "server_settings",
+          restart_requested: false,
+        },
+      },
+      "storage",
+    );
+
+    expect(storage.state).toBe("off");
+    expect(storage.stateText).toBe("Not set up");
+    expect(storage.action).toEqual({ label: "Set up", page: "infrastructure" });
+  });
+
+  it("does not read a restart another subsystem asked for as pending storage", () => {
+    const storage = tile(
+      {
+        storageAvailable: false,
+        settings: { "s3.public_bucket": "silo-art" },
+        serverStatus: {
+          started_at: "2026-01-01T00:00:00Z",
+          restart_required: true,
+          restart_required_reason: "jellyfin_compat",
+          restart_requested: false,
+        },
+      },
+      "storage",
+    );
+
+    expect(storage.stateText).toBe("Not set up");
+  });
+
+  it("reports the detected accelerator on the transcoding tile", () => {
+    const transcoding = tile(
+      {
+        settings: {
+          "playback.transcode_enabled": "true",
+          "playback.hw_accel": "auto",
+        },
+        hwAccel: {
+          resolved: "vaapi",
+          render_devices: ["/dev/dri/renderD128"],
+          intel_detected: true,
+          source: "local",
+        },
+      },
+      "transcoding",
+    );
+
+    expect(transcoding.state).toBe("ok");
+    expect(transcoding.stateText).toBe("Ready");
+    expect(transcoding.detail).toBe("Auto · VA-API · /dev/dri/renderD128");
+  });
+
+  it("scopes restart warnings to the tile whose keys are actually pending", () => {
+    // A saved database key owes a restart; neither storage nor transcoding
+    // changed, so neither tile may claim "Restart pending".
+    const base = {
+      settings: {
+        "playback.transcode_enabled": "true",
+        "s3.public_bucket": "silo-art",
+      },
+      serverStatus: {
+        started_at: "2026-01-01T00:00:00Z",
+        restart_required: true,
+        restart_required_reason: "setting:database.max_connections",
+        restart_required_reasons: ["setting:database.max_connections"],
+        restart_requested: false,
+      },
+    };
+    expect(tile(base, "transcoding").stateText).toBe("Ready");
+    expect(tile(base, "storage").stateText).toBe("Not set up");
+
+    // A pending playback key warns transcoding even when a LATER unrelated
+    // save overwrote the singular last-reason field.
+    const playbackPending = {
+      ...base,
+      serverStatus: {
+        ...base.serverStatus,
+        restart_required_reason: "jellyfin_compat",
+        restart_required_reasons: [
+          "setting:playback.hw_accel",
+          "jellyfin_compat",
+        ],
+      },
+    };
+    expect(tile(playbackPending, "transcoding").stateText).toBe(
+      "Restart pending",
+    );
+    expect(tile(playbackPending, "storage").stateText).toBe("Not set up");
+
+    const storagePending = {
+      ...base,
+      serverStatus: {
+        ...base.serverStatus,
+        restart_required_reasons: ["setting:s3.public_bucket"],
+      },
+    };
+    expect(tile(storagePending, "storage").stateText).toBe("Restart pending");
+    expect(tile(storagePending, "transcoding").stateText).toBe("Ready");
+  });
+
+  it("turns the transcoding tile amber while a settings restart is pending", () => {
+    const transcoding = tile(
+      {
+        settings: { "playback.transcode_enabled": "true" },
+        serverStatus: {
+          started_at: "2026-01-01T00:00:00Z",
+          restart_required: true,
+          restart_required_reason: "server_settings",
+          restart_requested: false,
+        },
+      },
+      "transcoding",
+    );
+
+    expect(transcoding.state).toBe("warn");
+    expect(transcoding.stateText).toBe("Restart pending");
+    expect(transcoding.action).toEqual({ label: "Fix", page: "playback" });
+  });
+
+  it("leaves transcoding alone for a restart another subsystem asked for", () => {
+    const transcoding = tile(
+      {
+        settings: { "playback.transcode_enabled": "true" },
+        serverStatus: {
+          started_at: "2026-01-01T00:00:00Z",
+          restart_required: true,
+          restart_required_reason: "jellyfin_compat",
+          restart_requested: false,
+        },
+      },
+      "transcoding",
+    );
+
+    expect(transcoding.state).toBe("ok");
+  });
+
+  it("marks search as informational on Postgres and healthy on Meilisearch", () => {
+    const postgres = tile(
+      { settings: { "catalog.search.provider": "postgres" } },
+      "search",
+    );
+    expect(postgres.state).toBe("info");
+    expect(postgres.stateText).toBe("Postgres");
+    expect(postgres.detail).toBe("Meilisearch not connected");
+
+    const meili = tile(
+      {
+        search: {
+          active_provider: "meilisearch",
+          meilisearch: { configured: true, healthy: true },
+        } as SettingsOverviewInput["search"],
+      },
+      "search",
+    );
+    expect(meili.state).toBe("ok");
+    expect(meili.stateText).toBe("Meilisearch");
+  });
+
+  it("does not report Meilisearch as broken before its status resolves", () => {
+    const pending = tile(
+      { settings: { "catalog.search.provider": "meilisearch" } },
+      "search",
+    );
+
+    expect(pending.state).toBe("info");
+    expect(pending.detail).toBe("Checking connection");
+    expect(pending.action).toBeUndefined();
+  });
+
+  it("only calls email ready when it is on with a host and a sender address", () => {
+    expect(
+      tile({ settings: { "email.enabled": "true" } }, "email").stateText,
+    ).toBe("Not set up");
+    // The server refuses to enable email without a from-address, but legacy
+    // rows and single-key writes can still store this state — it cannot send.
+    expect(
+      tile(
+        {
+          settings: {
+            "email.enabled": "true",
+            "email.smtp_host": "smtp.example.com",
+          },
+        },
+        "email",
+      ).stateText,
+    ).toBe("Not set up");
+    expect(
+      tile(
+        {
+          settings: {
+            "email.enabled": "true",
+            "email.smtp_host": "smtp.example.com",
+            "email.from_address": "silo@example.com",
+          },
+        },
+        "email",
+      ).stateText,
+    ).toBe("Ready");
+  });
+});
+
+describe("buildSettingsOverview groups", () => {
+  it("emits one card per settings page id", () => {
+    expect(buildSettingsOverview({}).cards.map((entry) => entry.id)).toEqual([
+      "general",
+      "infrastructure",
+      "appearance",
+      "security",
+      "library",
+      "playback",
+      "downloads",
+      "providers",
+      "watch-sync",
+      "ai",
+      "notifications",
+      "compatibility",
+    ]);
+  });
+
+  it("keeps the group manifest aligned with the overview ids", () => {
+    expect(buildSettingsOverview({}).cards.map((entry) => entry.id)).toEqual(
+      ADMIN_SETTINGS_NAV.map((item) => item.id),
+    );
+  });
+});
diff --git a/web/src/hooks/admin/useSettingsOverview.ts b/web/src/hooks/admin/useSettingsOverview.ts
new file mode 100644
index 000000000..4a619109e
--- /dev/null
+++ b/web/src/hooks/admin/useSettingsOverview.ts
@@ -0,0 +1,430 @@
+import { useMemo } from "react";
+
+import type { AdminServerStatus } from "@/api/types";
+import { emailReady } from "@/lib/emailReadiness";
+import { useBranding } from "@/hooks/useBranding";
+import {
+  useAdminSensitiveStatus,
+  useAdminServerSettings,
+  useAdminServerStatus,
+  useCatalogSearchStatus,
+  type CatalogSearchStatus,
+} from "@/hooks/queries/admin/settings";
+import {
+  useHWAccelDetection,
+  type HWAccelInfo,
+} from "@/hooks/queries/admin/system";
+
+/**
+ * The settings pages the overview links to. The ids here are stable route
+ * segments and have to match the pages the settings layout mounts.
+ */
+export const ADMIN_SETTINGS_PAGE_IDS = [
+  "general",
+  "infrastructure",
+  "appearance",
+  "security",
+  "library",
+  "playback",
+  "downloads",
+  "providers",
+  "watch-sync",
+  "ai",
+  "notifications",
+  "compatibility",
+] as const;
+
+export type AdminSettingsPageID = (typeof ADMIN_SETTINGS_PAGE_IDS)[number];
+
+/** Colour band a health tile reads in: green, amber, dimmed, or neutral blue. */
+export type OverviewState = "ok" | "warn" | "off" | "info";
+
+export interface OverviewTileAction {
+  label: string;
+  page: AdminSettingsPageID;
+}
+
+export interface OverviewTile {
+  id: string;
+  label: string;
+  state: OverviewState;
+  /** One or two words, e.g. "Healthy" or "Restart pending". */
+  stateText: string;
+  /** Single supporting line under the state. */
+  detail: string;
+  action?: OverviewTileAction;
+}
+
+export interface OverviewCard {
+  id: AdminSettingsPageID;
+}
+
+export interface SettingsOverviewModel {
+  /** True until the settings map has arrived; the page shows skeletons. */
+  isLoading: boolean;
+  tiles: OverviewTile[];
+  cards: OverviewCard[];
+}
+
+/**
+ * Everything the model is derived from. Kept as plain data (rather than read
+ * off hooks inside the builder) so the derivation is testable without a query
+ * client, and so a missing/failed query is just `undefined` here.
+ */
+export interface SettingsOverviewInput {
+  settings?: Record<string, string>;
+  sensitiveConfigured?: readonly string[];
+  storageAvailable?: boolean;
+  serverStatus?: AdminServerStatus;
+  search?: CatalogSearchStatus;
+  hwAccel?: HWAccelInfo;
+}
+
+/** Deep link to one settings page. */
+export function settingsPageHref(page: string): string {
+  return `/admin/settings/${encodeURIComponent(page)}`;
+}
+
+const TRUE_VALUES = new Set(["true", "1", "yes", "on"]);
+
+function readText(
+  settings: Record<string, string> | undefined,
+  key: string,
+): string {
+  return (settings?.[key] ?? "").trim();
+}
+
+function readBool(
+  settings: Record<string, string> | undefined,
+  key: string,
+): boolean {
+  return TRUE_VALUES.has(readText(settings, key).toLowerCase());
+}
+
+function readInt(
+  settings: Record<string, string> | undefined,
+  key: string,
+): number | null {
+  const parsed = Number.parseInt(readText(settings, key), 10);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function join(parts: Array<string | null | undefined>): string {
+  return parts
+    .filter((part): part is string => Boolean(part && part.trim()))
+    .join(" · ");
+}
+
+function sentenceCase(value: string): string {
+  if (!value) return "";
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+const HW_ACCEL_LABELS: Record<string, string> = {
+  auto: "Auto",
+  qsv: "Quick Sync",
+  vaapi: "VA-API",
+  nvenc: "NVENC",
+  videotoolbox: "VideoToolbox",
+  none: "Software",
+};
+
+function hwAccelLabel(value: string): string {
+  return HW_ACCEL_LABELS[value] ?? value.toUpperCase();
+}
+
+/**
+ * How transcoding is set up, in one phrase: the configured mode, and for
+ * "auto" the mode detection actually resolved to.
+ */
+function transcodeModeLabel(
+  configured: string,
+  detection: HWAccelInfo | undefined,
+): string {
+  const mode = configured || "auto";
+  if (mode !== "auto") return hwAccelLabel(mode);
+  const resolved = detection?.resolved;
+  if (!resolved) return "Auto";
+  if (resolved === "none") return "Auto · software";
+  return `Auto · ${hwAccelLabel(resolved)}`;
+}
+
+const SEARCH_PROVIDER_LABELS: Record<string, string> = {
+  postgres: "Postgres",
+  meilisearch: "Meilisearch",
+};
+
+function searchProviderLabel(value: string): string {
+  return SEARCH_PROVIDER_LABELS[value] ?? sentenceCase(value);
+}
+
+/**
+ * Restart reasons that name a subsystem other than the settings batch. Only
+ * used against servers that predate the accumulated per-key reasons list,
+ * where the single last-writer reason is the closest signal there is.
+ */
+const NON_SETTINGS_RESTART_REASONS = new Set([
+  "jellyfin_compat",
+  "ratelimit_backend",
+  "plugin_auth_binding",
+  "plugin_task_binding",
+]);
+
+function legacySettingsRestartPending(status: AdminServerStatus): boolean {
+  const reason = (status.restart_required_reason ?? "").trim();
+  return reason === "" || !NON_SETTINGS_RESTART_REASONS.has(reason);
+}
+
+/**
+ * Whether a saved setting under one of `prefixes` is waiting for a restart.
+ *
+ * The server accumulates one "setting:<key>" reason per restart-required save,
+ * so a tile can warn about its own keys and stay quiet for everyone else's —
+ * and a later unrelated save cannot overwrite the evidence. An older server
+ * without the list falls back to the coarse last-reason heuristic, which warns
+ * for any settings save rather than missing a real one.
+ */
+function settingsRestartPending(
+  status: AdminServerStatus | undefined,
+  prefixes: readonly string[],
+): boolean {
+  if (!status?.restart_required) return false;
+  const reasons = status.restart_required_reasons;
+  if (!reasons) return legacySettingsRestartPending(status);
+  return reasons.some((reason) => {
+    if (!reason.startsWith("setting:")) return false;
+    const key = reason.slice("setting:".length);
+    return prefixes.some((prefix) => key.startsWith(prefix));
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Health tiles
+// ---------------------------------------------------------------------------
+
+/**
+ * The link a tile carries. Only a tile the admin has to do something about
+ * gets one — a healthy tile is a fact, not a task.
+ */
+function tileAction(
+  state: OverviewState,
+  page: AdminSettingsPageID,
+): OverviewTileAction | undefined {
+  if (state === "warn") return { label: "Fix", page };
+  if (state === "off") return { label: "Set up", page };
+  return undefined;
+}
+
+function buildTiles(input: SettingsOverviewInput): OverviewTile[] {
+  const { settings } = input;
+  const configured = new Set(input.sensitiveConfigured ?? []);
+
+  const publicBucket = readText(settings, "s3.public_bucket");
+  const privateBucket = readText(settings, "s3.private_bucket");
+  const storageReady = input.storageAvailable === true;
+  const bucketDetail = privateBucket
+    ? "S3 · public + private"
+    : publicBucket
+      ? `S3 · ${publicBucket}`
+      : "No bucket configured";
+  // `storage_available` is decided when the S3 client is built at boot, so the
+  // save that first configures a bucket cannot flip it — only the restart that
+  // save already asked for can. Reporting "Not set up" in that window tells an
+  // admin who just did the work that it did not take.
+  const storageRestartPending =
+    !storageReady &&
+    publicBucket !== "" &&
+    settingsRestartPending(input.serverStatus, ["s3."]);
+  const storageState: OverviewState = storageReady
+    ? "ok"
+    : storageRestartPending
+      ? "warn"
+      : "off";
+
+  const maxConnections = readInt(settings, "database.max_connections");
+  const redisConfigured =
+    configured.has("redis.url") || readText(settings, "redis.url") !== "";
+
+  const transcodeEnabled = readBool(settings, "playback.transcode_enabled");
+  const transcodeMode = transcodeModeLabel(
+    readText(settings, "playback.hw_accel"),
+    input.hwAccel,
+  );
+  const renderDevice = input.hwAccel?.render_devices?.[0] ?? "";
+  const playbackRestartPending = settingsRestartPending(input.serverStatus, [
+    "playback.",
+  ]);
+  const transcodeState: OverviewState = playbackRestartPending
+    ? "warn"
+    : transcodeEnabled
+      ? "ok"
+      : "off";
+
+  const activeSearch =
+    input.search?.active_provider ||
+    readText(settings, "catalog.search.provider") ||
+    "postgres";
+  const searchStatusResolved = input.search != null;
+  const meiliConfigured = input.search?.meilisearch.configured ?? false;
+  const meiliHealthy = input.search?.meilisearch.healthy ?? false;
+  const searchState: OverviewState =
+    activeSearch === "meilisearch"
+      ? !searchStatusResolved
+        ? "info"
+        : meiliHealthy
+          ? "ok"
+          : "warn"
+      : meiliConfigured
+        ? "warn"
+        : "info";
+
+  const emailHost = readText(settings, "email.smtp_host");
+  const mailReady = emailReady(
+    readBool(settings, "email.enabled"),
+    emailHost,
+    readText(settings, "email.from_address"),
+  );
+  const emailState: OverviewState = mailReady ? "ok" : "off";
+
+  return [
+    {
+      id: "storage",
+      label: "Storage",
+      state: storageState,
+      stateText: storageReady
+        ? "Healthy"
+        : storageRestartPending
+          ? "Restart pending"
+          : "Not set up",
+      detail: storageReady
+        ? bucketDetail
+        : storageRestartPending
+          ? `${bucketDetail} · applies after a restart`
+          : "Artwork and uploads have nowhere to go",
+      action: tileAction(storageState, "infrastructure"),
+    },
+    {
+      id: "database",
+      label: "Database",
+      state: "ok",
+      stateText: "Healthy",
+      detail: join([
+        "Postgres",
+        maxConnections ? `max ${maxConnections} connections` : null,
+        redisConfigured ? "Redis" : null,
+      ]),
+    },
+    {
+      id: "transcoding",
+      label: "Transcoding",
+      state: transcodeState,
+      stateText: playbackRestartPending
+        ? "Restart pending"
+        : transcodeEnabled
+          ? "Ready"
+          : "Off",
+      detail: playbackRestartPending
+        ? "Saved changes apply after a restart"
+        : transcodeEnabled
+          ? join([transcodeMode, renderDevice])
+          : "Clients only get what they can already play",
+      action: tileAction(transcodeState, "playback"),
+    },
+    {
+      id: "search",
+      label: "Search",
+      state: searchState,
+      stateText: searchProviderLabel(activeSearch),
+      detail:
+        activeSearch === "meilisearch"
+          ? !searchStatusResolved
+            ? "Checking connection"
+            : meiliHealthy
+              ? "Meilisearch connected"
+              : "Meilisearch not reachable"
+          : meiliConfigured
+            ? "Meilisearch configured but not active"
+            : "Meilisearch not connected",
+      action: tileAction(searchState, "library"),
+    },
+    {
+      id: "email",
+      label: "Email",
+      state: emailState,
+      stateText: mailReady ? "Ready" : "Not set up",
+      detail: mailReady
+        ? `SMTP · ${emailHost}`
+        : "Invites and resets can't send",
+      action: tileAction(emailState, "notifications"),
+    },
+  ];
+}
+
+// ---------------------------------------------------------------------------
+// Settings groups
+// ---------------------------------------------------------------------------
+
+function buildCards(): OverviewCard[] {
+  return ADMIN_SETTINGS_PAGE_IDS.map((id) => ({ id }));
+}
+
+/** Derives the whole overview model from already-fetched data. */
+export function buildSettingsOverview(
+  input: SettingsOverviewInput,
+): SettingsOverviewModel {
+  const tiles = buildTiles(input);
+  const cards = buildCards();
+
+  return { isLoading: false, tiles, cards };
+}
+
+/**
+ * Live settings state for the admin settings landing page. Every query it
+ * reads is one an individual page already loads, so opening the overview warms
+ * the caches those pages go on to use.
+ */
+export function useSettingsOverview(): SettingsOverviewModel {
+  const { data: settings, isLoading: settingsLoading } =
+    useAdminServerSettings();
+  const { data: sensitive } = useAdminSensitiveStatus();
+  const { data: serverStatus } = useAdminServerStatus();
+  const branding = useBranding();
+
+  // Postgres search has no external service to check. Avoid paying for the
+  // Meilisearch status request unless this server actually selected it.
+  const searchProvider =
+    (settings?.["catalog.search.provider"] ?? "").trim() || "postgres";
+  const { data: search } = useCatalogSearchStatus(
+    settings != null && searchProvider === "meilisearch",
+  );
+
+  // Hardware detection shells out to ffmpeg on the transcode host, so it is
+  // only asked for when transcoding could actually use it.
+  const hwAccelMode = (settings?.["playback.hw_accel"] ?? "").trim();
+  const transcodeEnabled = TRUE_VALUES.has(
+    (settings?.["playback.transcode_enabled"] ?? "").trim().toLowerCase(),
+  );
+  const { data: hwAccel } = useHWAccelDetection(
+    settings != null && transcodeEnabled && hwAccelMode !== "none",
+  );
+
+  return useMemo(() => {
+    const model = buildSettingsOverview({
+      settings,
+      sensitiveConfigured: sensitive?.configured,
+      storageAvailable: branding.storageAvailable,
+      serverStatus,
+      search,
+      hwAccel,
+    });
+    return { ...model, isLoading: settingsLoading && settings == null };
+  }, [
+    branding.storageAvailable,
+    hwAccel,
+    search,
+    sensitive?.configured,
+    serverStatus,
+    settings,
+    settingsLoading,
+  ]);
+}
diff --git a/web/src/hooks/queries/admin/settings.ts b/web/src/hooks/queries/admin/settings.ts
index 61337a8bd..a4d474a95 100644
--- a/web/src/hooks/queries/admin/settings.ts
+++ b/web/src/hooks/queries/admin/settings.ts
@@ -20,8 +20,20 @@ interface SensitiveStatusResponse {
   managed_by_env?: string[];
 }
 
+/**
+ * server_settings keys surfaced by GET /settings/overlay-config, in the order
+ * the admin overlay page presents them. The page edits exactly these, and
+ * saving any of them must refresh every profile's cached overlay config.
+ */
+export const OVERLAY_CONFIG_SERVER_KEYS = [
+  "defaults.card_quick_actions_enabled",
+  "defaults.card_quick_actions",
+  "overlays.enabled",
+  "defaults.card_overlays",
+] as const;
+
 function affectsOverlayConfig(key: string) {
-  return key === "overlays.enabled" || key === "defaults.card_overlays";
+  return (OVERLAY_CONFIG_SERVER_KEYS as readonly string[]).includes(key);
 }
 
 export interface CatalogSearchStatus {
@@ -89,6 +101,27 @@ export function useAdminServerSettings() {
   });
 }
 
+/** Shape of `GET /admin/settings/restart-keys`. */
+export interface RestartKeysResponse {
+  keys: string[];
+  prefixes: string[];
+}
+
+/**
+ * The compiled restart-required registry (`internal/config/restart_keys.go`).
+ * It only changes across deploys, so it is cached aggressively and never
+ * retried: an older server without the endpoint degrades to "nothing needs a
+ * restart" rather than to a broken settings page.
+ */
+export function useAdminRestartKeys() {
+  return useQuery({
+    queryKey: adminKeys.restartKeys(),
+    queryFn: () => api<RestartKeysResponse>("/admin/settings/restart-keys"),
+    staleTime: 5 * 60_000,
+    retry: false,
+  });
+}
+
 export function useAdminServerStatus() {
   return useQuery({
     queryKey: adminKeys.serverStatus(),
@@ -249,10 +282,11 @@ export function useCheckAdminSettingsConnection() {
   });
 }
 
-export function useCatalogSearchStatus() {
+export function useCatalogSearchStatus(enabled = true) {
   return useQuery({
     queryKey: adminKeys.catalogSearchStatus(),
     queryFn: () => api<CatalogSearchStatus>("/admin/catalog/search/status"),
+    enabled,
     staleTime: 15_000,
   });
 }
diff --git a/web/src/hooks/queries/keys.ts b/web/src/hooks/queries/keys.ts
index b07b4c88b..01b76fff5 100644
--- a/web/src/hooks/queries/keys.ts
+++ b/web/src/hooks/queries/keys.ts
@@ -455,6 +455,7 @@ export const adminKeys = {
   sessions: () => ["admin", "sessions"] as const,
   serverSettings: () => ["admin", "serverSettings"] as const,
   serverStatus: () => ["admin", "serverStatus"] as const,
+  restartKeys: () => ["admin", "restartKeys"] as const,
   catalogSearchStatus: () => ["admin", "catalogSearchStatus"] as const,
   jellyfinCompatStatus: () => ["admin", "jellyfinCompatStatus"] as const,
   requestsRoot: () => ["admin", "requests"] as const,
diff --git a/web/src/hooks/queries/mediaSurfaceRefresh.test.ts b/web/src/hooks/queries/mediaSurfaceRefresh.test.ts
index 6b172e014..90e957969 100644
--- a/web/src/hooks/queries/mediaSurfaceRefresh.test.ts
+++ b/web/src/hooks/queries/mediaSurfaceRefresh.test.ts
@@ -371,6 +371,28 @@ describe("invalidateMediaSurfaceQueries", () => {
     ).toBe(true);
   });
 
+  it("leaves home section queries alone for a library-scoped change", async () => {
+    const queryClient = new QueryClient();
+    const homeLayoutKey = sectionKeys.homeLayout();
+    const homeItemsKey = sectionKeys.homeItems("recently-added");
+
+    queryClient.setQueryData(homeLayoutKey, { sections: [] });
+    queryClient.setQueryData(homeItemsKey, {
+      section: { id: "recently-added", items: [] },
+    });
+
+    await invalidateMediaSurfaceQueries(queryClient, { libraryId: 3 });
+
+    expect(queryClient.getQueryState(homeLayoutKey)?.isInvalidated).toBe(false);
+    expect(queryClient.getQueryState(homeItemsKey)?.isInvalidated).toBe(false);
+
+    // An unscoped change — a favorite, a watch, a catalog import — still does.
+    await invalidateMediaSurfaceQueries(queryClient);
+
+    expect(queryClient.getQueryState(homeLayoutKey)?.isInvalidated).toBe(true);
+    expect(queryClient.getQueryState(homeItemsKey)?.isInvalidated).toBe(true);
+  });
+
   it("does not invalidate collection queries for a different library scope", async () => {
     const queryClient = new QueryClient();
     const moviesKey = libraryCollectionKeys.list(1);
diff --git a/web/src/hooks/queries/sections.ts b/web/src/hooks/queries/sections.ts
index 92d7ac7a4..7a63fb739 100644
--- a/web/src/hooks/queries/sections.ts
+++ b/web/src/hooks/queries/sections.ts
@@ -14,6 +14,18 @@ import type {
 import { sectionKeys } from "./keys";
 import { invalidateAdminCollectionQueries } from "./collectionSurfaceRefresh";
 
+/**
+ * Home section data outlives the default client-wide gcTime on purpose.
+ *
+ * The layout query loses its observer the moment home unmounts, and the section
+ * items are fetched observer-less through `queryClient.fetchQuery`, so the
+ * 10 minute default evicts everything home needs mid-session and the next visit
+ * repaints the whole skeleton grid. Keeping the entries for an hour makes a
+ * return render from cache; invalidation still drives real refreshes.
+ */
+export const HOME_SECTION_STALE_TIME = 10 * 60 * 1000;
+export const HOME_SECTION_GC_TIME = 60 * 60 * 1000;
+
 interface RawSectionOverride {
   ID?: string;
   SectionID?: string;
@@ -80,7 +92,8 @@ export function useHomeLayout() {
   return useQuery({
     queryKey: sectionKeys.homeLayout(),
     queryFn: () => api<HomeLayoutResponse>("/home/layout"),
-    staleTime: 5 * 60 * 1000,
+    staleTime: HOME_SECTION_STALE_TIME,
+    gcTime: HOME_SECTION_GC_TIME,
   });
 }
 
diff --git a/web/src/hooks/useLongPress.ts b/web/src/hooks/useLongPress.ts
index acae6c7e4..37b8b92d6 100644
--- a/web/src/hooks/useLongPress.ts
+++ b/web/src/hooks/useLongPress.ts
@@ -37,12 +37,29 @@ export function useLongPress(
   useEffect(() => {
     const target = targetRef?.current;
     if (!target || !enabled) return;
+    // Aliased so the null check above narrows inside the hoisted handlers below.
+    const targetElement = target;
 
     let timer: number | null = null;
+    let suppressionCleanupTimer: number | null = null;
     let press: { pointerId: number; clientX: number; clientY: number } | null =
       null;
     let suppressUntil = 0;
 
+    function removeSuppressionListeners() {
+      if (suppressionCleanupTimer !== null) {
+        window.clearTimeout(suppressionCleanupTimer);
+        suppressionCleanupTimer = null;
+      }
+      targetElement.removeEventListener("click", handleClickCapture, true);
+      targetElement.removeEventListener("contextmenu", handleContextMenu);
+    }
+
+    function installSuppressionListeners() {
+      targetElement.addEventListener("click", handleClickCapture, true);
+      targetElement.addEventListener("contextmenu", handleContextMenu);
+    }
+
     function stopTracking() {
       if (timer !== null) {
         window.clearTimeout(timer);
@@ -62,17 +79,21 @@ export function useLongPress(
         Math.abs(event.clientY - press.clientY) > LONG_PRESS_MOVE_TOLERANCE_PX
       ) {
         stopTracking();
+        removeSuppressionListeners();
       }
     }
 
     function handlePointerUp(event: PointerEvent) {
       if (press && event.pointerId !== press.pointerId) return;
+      const longPressFired = Date.now() <= suppressUntil;
       stopTracking();
+      if (!longPressFired) removeSuppressionListeners();
     }
 
     function handlePointerDown(event: PointerEvent) {
       suppressUntil = 0;
       stopTracking();
+      removeSuppressionListeners();
       if (event.pointerType !== "touch" && event.pointerType !== "pen") return;
 
       press = {
@@ -80,6 +101,11 @@ export function useLongPress(
         clientX: event.clientX,
         clientY: event.clientY,
       };
+      // These listeners are only needed while a touch/pen gesture is active
+      // and for the short suppression window after a successful hold. Keeping
+      // them off every idle card avoids hundreds of redundant listeners on
+      // large home screens, which is especially noticeable in mobile Firefox.
+      installSuppressionListeners();
       // Movement can leave the card (a swipe), so the follow-up listeners live
       // on the window rather than the element.
       window.addEventListener("pointermove", handlePointerMove);
@@ -91,6 +117,10 @@ export function useLongPress(
         press = null;
         suppressUntil = Date.now() + LONG_PRESS_SUPPRESS_MS;
         onLongPressRef.current();
+        suppressionCleanupTimer = window.setTimeout(() => {
+          suppressUntil = 0;
+          removeSuppressionListeners();
+        }, LONG_PRESS_SUPPRESS_MS);
       }, LONG_PRESS_DELAY_MS);
     }
 
@@ -99,6 +129,7 @@ export function useLongPress(
       suppressUntil = 0;
       event.preventDefault();
       event.stopPropagation();
+      removeSuppressionListeners();
     }
 
     function handleContextMenu(event: Event) {
@@ -106,14 +137,11 @@ export function useLongPress(
       event.preventDefault();
     }
 
-    target.addEventListener("pointerdown", handlePointerDown);
-    target.addEventListener("click", handleClickCapture, true);
-    target.addEventListener("contextmenu", handleContextMenu);
+    targetElement.addEventListener("pointerdown", handlePointerDown);
     return () => {
       stopTracking();
-      target.removeEventListener("pointerdown", handlePointerDown);
-      target.removeEventListener("click", handleClickCapture, true);
-      target.removeEventListener("contextmenu", handleContextMenu);
+      removeSuppressionListeners();
+      targetElement.removeEventListener("pointerdown", handlePointerDown);
     };
   }, [enabled, targetRef]);
 }
diff --git a/web/src/hooks/useMediaQuery.ts b/web/src/hooks/useMediaQuery.ts
new file mode 100644
index 000000000..14292d2f7
--- /dev/null
+++ b/web/src/hooks/useMediaQuery.ts
@@ -0,0 +1,48 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+// One MediaQueryList per distinct query, shared by every consumer: getSnapshot
+// runs on every render of every subscriber (hundreds of cards on a home page),
+// and matchMedia re-parses the query on each call. Keyed to the matchMedia
+// function itself so a test that stubs matchMedia never reads a list cached
+// from a different stub.
+let cachedMatchMedia: typeof window.matchMedia | undefined;
+const mediaQueryLists = new Map<string, MediaQueryList>();
+
+function getMediaQueryList(query: string): MediaQueryList | undefined {
+  if (typeof window === "undefined" || !window.matchMedia) return undefined;
+  if (window.matchMedia !== cachedMatchMedia) {
+    cachedMatchMedia = window.matchMedia;
+    mediaQueryLists.clear();
+  }
+  let list = mediaQueryLists.get(query);
+  if (!list) {
+    list = window.matchMedia(query);
+    mediaQueryLists.set(query, list);
+  }
+  return list;
+}
+
+/**
+ * Tracks a CSS media query.
+ *
+ * `fallback` answers where matchMedia does not exist — server rendering, tests,
+ * and older browsers — so a caller can say which side of the query those
+ * environments should be treated as.
+ */
+export function useMediaQuery(query: string, fallback = false): boolean {
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      const media = getMediaQueryList(query);
+      media?.addEventListener("change", onStoreChange);
+      return () => media?.removeEventListener("change", onStoreChange);
+    },
+    [query],
+  );
+
+  const getSnapshot = useCallback(
+    () => getMediaQueryList(query)?.matches ?? fallback,
+    [query, fallback],
+  );
+
+  return useSyncExternalStore(subscribe, getSnapshot, () => fallback);
+}
diff --git a/web/src/hooks/useOverlayPrefs.test.tsx b/web/src/hooks/useOverlayPrefs.test.tsx
index 03e664cd6..705ab883a 100644
--- a/web/src/hooks/useOverlayPrefs.test.tsx
+++ b/web/src/hooks/useOverlayPrefs.test.tsx
@@ -6,24 +6,40 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 const mocks = vi.hoisted(() => ({
   api: vi.fn(),
   setValue: vi.fn(),
+  clearValue: vi.fn(),
+  effective: undefined as Record<string, { value: unknown }> | undefined,
+  profileId: null as string | null,
 }));
 
-vi.mock("@/api/client", () => ({
-  api: mocks.api,
-}));
+vi.mock("@/api/client", async () => {
+  const actual =
+    await vi.importActual<typeof import("@/api/client")>("@/api/client");
+  return { ...actual, api: mocks.api };
+});
 
-vi.mock("@/hooks/queries/settingValues", () => ({
-  useEffectiveSettings: () => ({ data: undefined, isLoading: false }),
+// Keep the real query-key builder and error taxonomy so the hook's optimistic
+// cache writes are exercised against the actual key shape; only the two hooks
+// that reach the network are replaced.
+vi.mock("@/hooks/queries/settingValues", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/hooks/queries/settingValues")>()),
+  useEffectiveSettings: () => ({ data: mocks.effective, isLoading: false }),
   useSetSettingValue: () => ({ mutate: mocks.setValue }),
+  useClearSettingValue: () => ({
+    mutateAsync: mocks.clearValue,
+    isPending: false,
+  }),
 }));
 
 vi.mock("@/utils/storage", () => ({
   storage: {
     KEYS: { PROFILE_ID: "profile_id" },
-    get: () => null,
+    get: () => mocks.profileId,
   },
 }));
 
+import { ApiClientError } from "@/api/client";
+import { SETTING_KEYS } from "@/lib/settingsContract";
+
 import { useOverlayPrefs } from "./useOverlayPrefs";
 import { useUpdateServerSettings } from "./queries/admin/settings";
 
@@ -40,10 +56,26 @@ function createWrapper() {
   };
 }
 
+function effectiveOverlayValue(value: unknown) {
+  return {
+    data: {
+      [SETTING_KEYS.UI_CARD_OVERLAYS]: {
+        key: SETTING_KEYS.UI_CARD_OVERLAYS,
+        value,
+        source: value == null ? "default" : "profile",
+      },
+    } as unknown,
+    isLoading: false,
+  };
+}
+
 describe("useOverlayPrefs", () => {
   beforeEach(() => {
     mocks.api.mockReset();
     mocks.setValue.mockReset();
+    mocks.clearValue.mockReset();
+    mocks.effective = undefined;
+    mocks.profileId = null;
   });
 
   afterEach(cleanup);
@@ -57,10 +89,219 @@ describe("useOverlayPrefs", () => {
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
     expect(mocks.api).toHaveBeenCalledWith("/settings/overlay-config");
-    expect(result.current.enabled).toBe(true);
+    expect(result.current.overlaysEnabled).toBe(true);
+    expect(result.current.prefs).not.toBeNull();
+    expect(result.current).not.toHaveProperty("enabled");
+    expect(result.current.quickActionsEnabled).toBe(false);
+    expect(result.current).not.toHaveProperty("quickActionsGloballyEnabled");
+    expect(result.current.quickActionPreference).toBe("both");
+    expect(result.current.quickActionMode).toBe("none");
     expect(result.current).not.toHaveProperty("watchedIndicatorStyle");
   });
 
+  it("uses disabled and mode values from the admin defaults for an unset profile", async () => {
+    mocks.api.mockResolvedValue({
+      enabled: true,
+      quick_actions_enabled: false,
+      quick_actions_default: "favorites",
+    });
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.quickActionsEnabled).toBe(false);
+    expect(result.current.quickActionPreference).toBe("favorites");
+    expect(result.current.quickActionMode).toBe("none");
+  });
+
+  it("inherits an enabled admin default for a profile that has not chosen", async () => {
+    mocks.profileId = "profile-1";
+    mocks.effective = {};
+    mocks.api.mockResolvedValue({
+      enabled: true,
+      quick_actions_enabled: true,
+      quick_actions_default: "favorites",
+    });
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.quickActionsEnabled).toBe(true);
+    expect(result.current.quickActionMode).toBe("favorites");
+  });
+
+  it("lets a profile opt in to quick actions while the admin default is off", async () => {
+    mocks.profileId = "profile-1";
+    mocks.effective = {
+      "ui.card_quick_actions": { value: "watched" },
+      "ui.card_quick_actions_enabled": { value: true },
+    };
+    mocks.api.mockResolvedValue({
+      enabled: true,
+      quick_actions_enabled: false,
+      quick_actions_default: "favorites",
+    });
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.quickActionsEnabled).toBe(true);
+    expect(result.current.quickActionPreference).toBe("watched");
+    expect(result.current.quickActionMode).toBe("watched");
+
+    act(() => result.current.setQuickActionsEnabled(false));
+    act(() => result.current.setQuickActionMode("both"));
+    expect(mocks.setValue).toHaveBeenCalledWith(
+      {
+        key: "ui.card_quick_actions_enabled",
+        value: false,
+        identity: { scope: "profile" },
+      },
+      expect.objectContaining({ onError: expect.any(Function) }),
+    );
+    expect(mocks.setValue).toHaveBeenCalledWith(
+      {
+        key: "ui.card_quick_actions",
+        value: "both",
+        identity: { scope: "profile" },
+      },
+      expect.objectContaining({ onError: expect.any(Function) }),
+    );
+  });
+
+  it("lets a profile opt out of quick actions while the admin default is on", async () => {
+    mocks.profileId = "profile-1";
+    mocks.effective = {
+      "ui.card_quick_actions": { value: "watched" },
+      "ui.card_quick_actions_enabled": { value: false },
+    };
+    mocks.api.mockResolvedValue({
+      enabled: true,
+      quick_actions_enabled: true,
+      quick_actions_default: "favorites",
+    });
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.quickActionsEnabled).toBe(false);
+    expect(result.current.quickActionPreference).toBe("watched");
+    expect(result.current.quickActionMode).toBe("none");
+
+    act(() => result.current.setQuickActionsEnabled(true));
+    act(() => result.current.setQuickActionMode("both"));
+    expect(mocks.setValue).toHaveBeenCalledWith(
+      {
+        key: "ui.card_quick_actions_enabled",
+        value: true,
+        identity: { scope: "profile" },
+      },
+      expect.objectContaining({ onError: expect.any(Function) }),
+    );
+    expect(mocks.setValue).toHaveBeenCalledWith(
+      {
+        key: "ui.card_quick_actions",
+        value: "both",
+        identity: { scope: "profile" },
+      },
+      expect.objectContaining({ onError: expect.any(Function) }),
+    );
+  });
+
+  it("inherits a disabled overlay default for a profile that has not chosen", async () => {
+    mocks.profileId = "profile-1";
+    mocks.effective = {};
+    mocks.api.mockResolvedValue({ enabled: false });
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.overlaysEnabled).toBe(false);
+    expect(result.current.prefs).toBeNull();
+  });
+
+  it("lets a profile opt in to overlays while the server default is off", async () => {
+    mocks.profileId = "profile-1";
+    mocks.effective = { "ui.card_overlays_enabled": { value: true } };
+    mocks.api.mockResolvedValue({ enabled: false });
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.overlaysEnabled).toBe(true);
+    expect(result.current.prefs).not.toBeNull();
+
+    act(() => result.current.setOverlaysEnabled(false));
+    expect(mocks.setValue).toHaveBeenCalledWith(
+      {
+        key: "ui.card_overlays_enabled",
+        value: false,
+        identity: { scope: "profile" },
+      },
+      expect.objectContaining({ onError: expect.any(Function) }),
+    );
+  });
+
+  it("lets a profile opt out of overlays while the server default is on", async () => {
+    mocks.profileId = "profile-1";
+    mocks.effective = { "ui.card_overlays_enabled": { value: false } };
+    mocks.api.mockResolvedValue({ enabled: true });
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.overlaysEnabled).toBe(false);
+    expect(result.current.prefs).toBeNull();
+
+    act(() => result.current.setOverlaysEnabled(false));
+    expect(mocks.setValue).not.toHaveBeenCalled();
+
+    act(() => result.current.setOverlaysEnabled(true));
+    expect(mocks.setValue).toHaveBeenCalledWith(
+      {
+        key: "ui.card_overlays_enabled",
+        value: true,
+        identity: { scope: "profile" },
+      },
+      expect.objectContaining({ onError: expect.any(Function) }),
+    );
+  });
+
+  it("writes an overlay opt-in for a profile that has expressed no preference", async () => {
+    mocks.profileId = "profile-1";
+    mocks.effective = {};
+    mocks.api.mockResolvedValue({ enabled: false });
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    act(() => result.current.setOverlaysEnabled(true));
+    expect(mocks.setValue).toHaveBeenCalledWith(
+      {
+        key: "ui.card_overlays_enabled",
+        value: true,
+        identity: { scope: "profile" },
+      },
+      expect.objectContaining({ onError: expect.any(Function) }),
+    );
+  });
+
   it("refreshes the shared overlay configuration immediately after an admin save", async () => {
     const queryClient = new QueryClient({
       defaultOptions: {
@@ -75,11 +316,132 @@ describe("useOverlayPrefs", () => {
     const { result } = renderHook(() => useUpdateServerSettings(), { wrapper });
 
     await act(async () => {
-      await result.current.mutateAsync({ "defaults.card_overlays": "{}" });
+      await result.current.mutateAsync({
+        "defaults.card_quick_actions": "favorites",
+      });
     });
 
     expect(invalidateQueries).toHaveBeenCalledWith({
       queryKey: ["settings", "overlay-config"],
     });
   });
+
+  it("prefers a stored profile document over the admin defaults", async () => {
+    mocks.profileId = "profile-1";
+    mocks.api.mockResolvedValue({
+      enabled: true,
+      defaults: JSON.stringify({
+        version: 2,
+        preset: "vibrant",
+        order: [],
+        items: {},
+      }),
+    });
+    mocks.effective = effectiveOverlayValue({
+      version: 2,
+      preset: "minimal",
+      order: [],
+      items: {},
+    }).data as Record<string, { value: unknown }>;
+
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.hasOverride).toBe(true);
+    expect(result.current.prefs?.preset).toBe("minimal");
+  });
+
+  // A snapshot of today's server values would pin the profile to them; only
+  // deleting the stored document keeps it tracking later admin changes.
+  it("deletes the profile document so the profile follows the server defaults again", async () => {
+    mocks.profileId = "profile-1";
+    mocks.api.mockResolvedValue({
+      enabled: true,
+      defaults: JSON.stringify({
+        version: 2,
+        preset: "vibrant",
+        order: [],
+        items: {},
+      }),
+    });
+    mocks.effective = effectiveOverlayValue({
+      version: 2,
+      preset: "minimal",
+      order: [],
+      items: {},
+    }).data as Record<string, { value: unknown }>;
+    mocks.clearValue.mockResolvedValue(undefined);
+
+    const { result, rerender } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    await act(async () => {
+      await result.current.resetPrefs();
+    });
+
+    expect(mocks.clearValue).toHaveBeenCalledWith({
+      key: SETTING_KEYS.UI_CARD_OVERLAYS,
+      identity: { scope: "profile" },
+    });
+
+    // The effective read now resolves to the contract default (null), which is
+    // exactly what lets the admin document apply.
+    mocks.effective = effectiveOverlayValue(null).data as Record<
+      string,
+      { value: unknown }
+    >;
+    rerender();
+
+    expect(result.current.hasOverride).toBe(false);
+    expect(result.current.prefs?.preset).toBe("vibrant");
+  });
+
+  it("treats a 404 from the canonical delete as already inheriting", async () => {
+    mocks.profileId = "profile-1";
+    mocks.api.mockResolvedValue({ enabled: true });
+    mocks.effective = effectiveOverlayValue(null).data as Record<
+      string,
+      { value: unknown }
+    >;
+    mocks.clearValue.mockRejectedValue(
+      new ApiClientError(404, "not_found", "no stored value"),
+    );
+
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    await act(async () => {
+      await expect(result.current.resetPrefs()).resolves.toBeUndefined();
+    });
+  });
+
+  it("surfaces a failed delete instead of pretending the reset landed", async () => {
+    mocks.profileId = "profile-1";
+    mocks.api.mockResolvedValue({ enabled: true });
+    mocks.effective = effectiveOverlayValue({
+      version: 2,
+      preset: "minimal",
+      order: [],
+      items: {},
+    }).data as Record<string, { value: unknown }>;
+    mocks.clearValue.mockRejectedValue(
+      new ApiClientError(500, "server_error", "boom"),
+    );
+
+    const { result } = renderHook(() => useOverlayPrefs(), {
+      wrapper: createWrapper(),
+    });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    await act(async () => {
+      await expect(result.current.resetPrefs()).rejects.toThrow("boom");
+    });
+  });
 });
diff --git a/web/src/hooks/useOverlayPrefs.ts b/web/src/hooks/useOverlayPrefs.ts
index edb4cbba4..f795ac3b9 100644
--- a/web/src/hooks/useOverlayPrefs.ts
+++ b/web/src/hooks/useOverlayPrefs.ts
@@ -1,12 +1,16 @@
 import { useMemo, useCallback } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { api } from "@/api/client";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { api, ApiClientError } from "@/api/client";
 import {
+  effectiveSettingsQueryKey,
+  isDefinitiveSettingMutationRejection,
+  useClearSettingValue,
   useEffectiveSettings,
   useSetSettingValue,
+  type EffectiveSettingsMap,
 } from "@/hooks/queries/settingValues";
 import type { SettingIdentity } from "@/hooks/queries/settingValues";
-import { SETTING_KEYS } from "@/lib/settingsContract";
+import { SETTING_KEYS, type SettingKey } from "@/lib/settingsContract";
 import { settingsKeys } from "@/hooks/queries/keys";
 import { storage } from "@/utils/storage";
 import {
@@ -14,19 +18,37 @@ import {
   serializeOverlayPrefs,
   type CardOverlayPrefs,
 } from "@/lib/overlays";
+import {
+  normalizeCardQuickActionMode,
+  type EnabledCardQuickActionMode,
+} from "@/lib/cardQuickActions";
 
-/** `ui.card_overlays` is profile-wide in the contract (no device scope). */
+/** Card overlay preferences are profile-wide in the contract (no device scope). */
 const PROFILE_SCOPE: SettingIdentity = { scope: "profile" };
 
-const OVERLAY_KEYS = [SETTING_KEYS.UI_CARD_OVERLAYS] as const;
+const OVERLAY_KEYS = [
+  SETTING_KEYS.UI_CARD_OVERLAYS,
+  SETTING_KEYS.UI_CARD_OVERLAYS_ENABLED,
+  SETTING_KEYS.UI_CARD_QUICK_ACTIONS,
+  SETTING_KEYS.UI_CARD_QUICK_ACTIONS_ENABLED,
+] as const;
 
 interface OverlayConfig {
   enabled: boolean;
   defaults?: string;
+  quick_actions_enabled?: boolean;
+  quick_actions_default?: string;
+}
+
+// Overlay booleans are inherit-with-override, not a policy gate: the server
+// setting is only the default for profiles that have not chosen, and an
+// explicit profile choice wins in either direction.
+function inheritBoolean(userValue: unknown, serverDefault: boolean): boolean {
+  return typeof userValue === "boolean" ? userValue : serverDefault;
 }
 
-// The admin kill switch and server-wide defaults live in server_settings, not
-// the user-settings contract, so this endpoint stays alongside the canonical
+// The server-wide overlay defaults live in server_settings, not the
+// user-settings contract, so this endpoint stays alongside the canonical
 // values API.
 function useOverlayConfig() {
   return useQuery({
@@ -39,17 +61,70 @@ function useOverlayConfig() {
 export function useOverlayPrefs() {
   // The effective endpoint requires a profile header; without one the user
   // has no stored preference and the admin defaults apply on their own.
-  const hasProfile = Boolean(storage.get(storage.KEYS.PROFILE_ID));
+  const profileId = storage.get(storage.KEYS.PROFILE_ID);
+  const hasProfile = Boolean(profileId);
   const { data: effective, isLoading: userLoading } = useEffectiveSettings({
     keys: OVERLAY_KEYS,
     enabled: hasProfile,
   });
   const { data: config, isLoading: configLoading } = useOverlayConfig();
-  const setValue = useSetSettingValue();
+  const { mutate: setSettingValue } = useSetSettingValue();
+  const clearValue = useClearSettingValue();
+  const queryClient = useQueryClient();
+  const effectiveQueryKey = useMemo(
+    () =>
+      effectiveSettingsQueryKey({
+        keys: OVERLAY_KEYS,
+        profileId: profileId ?? undefined,
+      }),
+    // The active profile is part of effectiveSettingsQueryKey. Recompute the
+    // target when profile selection changes rather than writing into the
+    // previous profile's cache entry.
+    [profileId],
+  );
+
+  const setProfileValue = useCallback(
+    (key: SettingKey, value: unknown) => {
+      // Writing a stored value back unchanged is a no-op: skip the network
+      // round-trip and the downstream re-render cascade.
+      if (effective?.[key]?.value === value) return;
+      queryClient.setQueryData<EffectiveSettingsMap>(
+        effectiveQueryKey,
+        (current) => ({
+          ...current,
+          [key]: { key, value, source: "profile", scope: "profile" },
+        }),
+      );
+      setSettingValue(
+        { key, value, identity: PROFILE_SCOPE },
+        {
+          // The shared mutation invalidates on success and ambiguous errors.
+          // A definitive rejection never reached storage, so refetch instead of
+          // restoring a snapshot: rapid successive writes make any snapshot an
+          // unpersisted optimistic value, while a refetch reconciles the cache
+          // with what the server actually stored.
+          onError: (error) => {
+            if (isDefinitiveSettingMutationRejection(error)) {
+              void queryClient.invalidateQueries({
+                queryKey: effectiveQueryKey,
+              });
+            }
+          },
+        },
+      );
+    },
+    [effective, effectiveQueryKey, queryClient, setSettingValue],
+  );
 
   // The contract default is null — "no preference expressed" — which is what
   // lets the server-wide admin default apply; a stored value wins outright.
   const userValue = effective?.[SETTING_KEYS.UI_CARD_OVERLAYS]?.value ?? null;
+  const overlaysEnabledUserValue =
+    effective?.[SETTING_KEYS.UI_CARD_OVERLAYS_ENABLED]?.value;
+  const quickActionUserValue =
+    effective?.[SETTING_KEYS.UI_CARD_QUICK_ACTIONS]?.value ?? null;
+  const quickActionsEnabledUserValue =
+    effective?.[SETTING_KEYS.UI_CARD_QUICK_ACTIONS_ENABLED]?.value;
 
   const prefs = useMemo(() => {
     // User setting takes priority; fall back to admin defaults
@@ -57,8 +132,19 @@ export function useOverlayPrefs() {
     return parseOverlayPrefs(source);
   }, [userValue, config?.defaults]);
 
-  // Admin kill switch: if disabled server-wide, return null prefs
-  const enabled = config?.enabled !== false;
+  // Absent server config (including while it loads), overlays are on — the
+  // shipped default — and quick actions are off.
+  const overlaysEnabled = inheritBoolean(
+    overlaysEnabledUserValue,
+    config?.enabled !== false,
+  );
+  const quickActionsEnabled = inheritBoolean(
+    quickActionsEnabledUserValue,
+    config?.quick_actions_enabled === true,
+  );
+  const configuredQuickActionMode = normalizeCardQuickActionMode(
+    quickActionUserValue ?? config?.quick_actions_default,
+  );
 
   const setPrefs = useCallback(
     (next: CardOverlayPrefs) => {
@@ -72,24 +158,75 @@ export function useOverlayPrefs() {
       ) {
         return;
       }
-      setValue.mutate({
-        key: SETTING_KEYS.UI_CARD_OVERLAYS,
-        value: next,
-        identity: PROFILE_SCOPE,
-      });
+      setProfileValue(SETTING_KEYS.UI_CARD_OVERLAYS, next);
     },
-    [userValue, setValue],
+    [userValue, setProfileValue],
+  );
+
+  const setOverlaysEnabled = useCallback(
+    (next: boolean) =>
+      setProfileValue(SETTING_KEYS.UI_CARD_OVERLAYS_ENABLED, next),
+    [setProfileValue],
+  );
+
+  const setQuickActionMode = useCallback(
+    (next: EnabledCardQuickActionMode) => {
+      // Compare against the mode the control displays, not a differently
+      // normalized reading of the stored value: an unrecognized stored value
+      // displays the admin default, which must stay selectable.
+      if (quickActionUserValue != null && configuredQuickActionMode === next)
+        return;
+      setProfileValue(SETTING_KEYS.UI_CARD_QUICK_ACTIONS, next);
+    },
+    [configuredQuickActionMode, quickActionUserValue, setProfileValue],
+  );
+
+  const setQuickActionsEnabled = useCallback(
+    (next: boolean) =>
+      setProfileValue(SETTING_KEYS.UI_CARD_QUICK_ACTIONS_ENABLED, next),
+    [setProfileValue],
+  );
+
+  const resetPrefs = useCallback(async () => {
+    await Promise.all(
+      OVERLAY_KEYS.map(async (key) => {
+        try {
+          await clearValue.mutateAsync({ key, identity: PROFILE_SCOPE });
+        } catch (error) {
+          // A missing scoped value already means this part of the preference
+          // is inheriting from the server default.
+          if (!(error instanceof ApiClientError && error.status === 404))
+            throw error;
+        }
+      }),
+    );
+  }, [clearValue]);
+
+  const hasOverride = OVERLAY_KEYS.some(
+    (key) => effective?.[key]?.source === "profile",
   );
 
   // While either query is in flight, report null prefs instead of built-in
   // defaults: rendering defaults first would flash badges that vanish (or
-  // change) the moment the user's own config or the admin kill switch loads.
+  // change) the moment the user's own config or the server default loads.
   const isLoading = (hasProfile && userLoading) || configLoading;
 
   return {
-    prefs: enabled && !isLoading ? prefs : null,
+    prefs: overlaysEnabled && !isLoading ? prefs : null,
     setPrefs,
+    overlaysEnabled,
+    setOverlaysEnabled,
+    quickActionMode:
+      quickActionsEnabled && !isLoading
+        ? configuredQuickActionMode
+        : ("none" as const),
+    quickActionPreference: configuredQuickActionMode,
+    setQuickActionMode,
+    quickActionsEnabled,
+    setQuickActionsEnabled,
+    resetPrefs,
+    hasOverride,
+    isResetting: clearValue.isPending,
     isLoading,
-    enabled,
   };
 }
diff --git a/web/src/hooks/useRestartKeys.test.ts b/web/src/hooks/useRestartKeys.test.ts
new file mode 100644
index 000000000..4764dbe20
--- /dev/null
+++ b/web/src/hooks/useRestartKeys.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+
+import { createRestartKeyMatcher } from "./useRestartKeys";
+
+describe("createRestartKeyMatcher", () => {
+  it("matches keys listed exactly", () => {
+    const matcher = createRestartKeyMatcher({
+      keys: ["auth.jwt_secret"],
+      prefixes: [],
+    });
+
+    expect(matcher.has("auth.jwt_secret")).toBe(true);
+    expect(matcher.has("auth.jwt_expiry")).toBe(false);
+  });
+
+  it("matches every key under a listed prefix", () => {
+    const matcher = createRestartKeyMatcher({
+      keys: [],
+      prefixes: ["database.", "redis."],
+    });
+
+    expect(matcher.has("database.max_connections")).toBe(true);
+    expect(matcher.has("redis.url")).toBe(true);
+    // The prefix includes its trailing dot, so a sibling namespace that merely
+    // starts with the same word must not be badged.
+    expect(matcher.has("databases_extra.url")).toBe(false);
+    expect(matcher.has("branding.server_name")).toBe(false);
+  });
+
+  it("treats a missing or malformed payload as 'nothing needs a restart'", () => {
+    expect(
+      createRestartKeyMatcher(undefined).has("database.max_connections"),
+    ).toBe(false);
+    expect(
+      createRestartKeyMatcher({ keys: [], prefixes: [] }).has(
+        "database.max_connections",
+      ),
+    ).toBe(false);
+    // An older server can answer with nulls where the arrays should be.
+    const malformed = { keys: null, prefixes: null } as unknown as {
+      keys: string[];
+      prefixes: string[];
+    };
+    expect(createRestartKeyMatcher(malformed).has("auth.jwt_secret")).toBe(
+      false,
+    );
+  });
+
+  it("ignores empty strings so a blank prefix cannot match everything", () => {
+    const matcher = createRestartKeyMatcher({
+      keys: ["", "s3.bucket"],
+      prefixes: [""],
+    });
+
+    expect(matcher.has("s3.bucket")).toBe(true);
+    expect(matcher.has("branding.server_name")).toBe(false);
+  });
+});
diff --git a/web/src/hooks/useRestartKeys.ts b/web/src/hooks/useRestartKeys.ts
new file mode 100644
index 000000000..b0a4c89dc
--- /dev/null
+++ b/web/src/hooks/useRestartKeys.ts
@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+
+import {
+  useAdminRestartKeys,
+  type RestartKeysResponse,
+} from "@/hooks/queries/admin/settings";
+
+/**
+ * Prefix-aware lookup over the server's restart-required registry. It is
+ * deliberately `Set`-shaped (`has(key)`) so call sites read the same whether
+ * the key is listed exactly or covered by a namespace prefix.
+ */
+export interface RestartKeyMatcher {
+  has(key: string): boolean;
+}
+
+const EMPTY_MATCHER: RestartKeyMatcher = { has: () => false };
+
+/**
+ * Builds a matcher from the endpoint payload. Anything that is not the
+ * expected `{ keys, prefixes }` shape — a loading query, or a server too old
+ * to serve the endpoint — degrades to "no key needs a restart" rather than to
+ * a broken page.
+ */
+export function createRestartKeyMatcher(
+  data: RestartKeysResponse | undefined,
+): RestartKeyMatcher {
+  const exact = new Set(
+    Array.isArray(data?.keys) ? data.keys.filter(isNonEmptyString) : [],
+  );
+  const prefixes = Array.isArray(data?.prefixes)
+    ? data.prefixes.filter(isNonEmptyString)
+    : [];
+  if (exact.size === 0 && prefixes.length === 0) return EMPTY_MATCHER;
+  return {
+    has: (key: string) =>
+      exact.has(key) || prefixes.some((prefix) => key.startsWith(prefix)),
+  };
+}
+
+function isNonEmptyString(value: unknown): value is string {
+  return typeof value === "string" && value !== "";
+}
+
+/**
+ * Keys whose saved value only takes effect after a server restart. Feed it to
+ * `SettingField`'s `restartRequired` prop instead of writing "requires a
+ * restart" into hint text.
+ */
+export function useRestartKeys(): RestartKeyMatcher {
+  const { data } = useAdminRestartKeys();
+  return useMemo(() => createRestartKeyMatcher(data), [data]);
+}
diff --git a/web/src/hooks/useSettingsForm.test.ts b/web/src/hooks/useSettingsForm.test.ts
index 5ec80db71..a953472b4 100644
--- a/web/src/hooks/useSettingsForm.test.ts
+++ b/web/src/hooks/useSettingsForm.test.ts
@@ -3,6 +3,7 @@
 import { act, cleanup, renderHook } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
+import { useHasUnsavedChanges } from "./useUnsavedChanges";
 import { useSettingsForm } from "./useSettingsForm";
 
 const { mutateAsync } = vi.hoisted(() => ({ mutateAsync: vi.fn() }));
@@ -150,3 +151,112 @@ describe("useSettingsForm save()", () => {
     expect(result.current.restartRequired).toBe(true);
   });
 });
+
+describe("useSettingsForm isClearStaged()", () => {
+  it("separates a staged clear from an untouched or replaced value", () => {
+    const { result } = renderHook(() => useSettingsForm({ keys: KEYS }));
+
+    // An untouched empty key is not a clear: nothing would be written.
+    expect(result.current.isClearStaged("email.smtp_password")).toBe(false);
+
+    act(() => {
+      result.current.setValue("branding.server_name", "");
+    });
+    expect(result.current.isClearStaged("branding.server_name")).toBe(true);
+
+    act(() => {
+      result.current.setValue("branding.server_name", "Casa");
+    });
+    expect(result.current.isClearStaged("branding.server_name")).toBe(false);
+
+    act(() => {
+      result.current.resetValue("branding.server_name");
+    });
+    expect(result.current.isClearStaged("branding.server_name")).toBe(false);
+  });
+});
+
+describe("useSettingsForm unsaved-changes guard", () => {
+  function fireBeforeUnload(): Event {
+    // jsdom has no BeforeUnloadEvent, and its legacy `returnValue` is a
+    // boolean mirror of the canceled flag — `defaultPrevented` is the portable
+    // signal that the browser would prompt.
+    const event = new Event("beforeunload", { cancelable: true });
+    window.dispatchEvent(event);
+    return event;
+  }
+
+  it("does not warn while the form is clean", () => {
+    renderHook(() => useSettingsForm({ keys: KEYS }));
+
+    expect(fireBeforeUnload().defaultPrevented).toBe(false);
+  });
+
+  it("warns before the page unloads with staged edits", () => {
+    const { result } = renderHook(() => useSettingsForm({ keys: KEYS }));
+
+    act(() => {
+      result.current.setValue("branding.server_name", "Casa");
+    });
+
+    expect(fireBeforeUnload().defaultPrevented).toBe(true);
+  });
+
+  it("stops warning once the edits are discarded", () => {
+    const { result } = renderHook(() => useSettingsForm({ keys: KEYS }));
+
+    act(() => {
+      result.current.setValue("branding.server_name", "Casa");
+    });
+    act(() => {
+      result.current.discard();
+    });
+
+    expect(fireBeforeUnload().defaultPrevented).toBe(false);
+  });
+
+  it("stops warning after the hook unmounts", () => {
+    const { result, unmount } = renderHook(() =>
+      useSettingsForm({ keys: KEYS }),
+    );
+
+    act(() => {
+      result.current.setValue("branding.server_name", "Casa");
+    });
+    unmount();
+
+    expect(fireBeforeUnload().defaultPrevented).toBe(false);
+  });
+
+  // What `UnsavedChangesGuard` reads to block in-app navigation. The hook keeps
+  // no router dependency of its own; it only reports.
+  it("publishes staged edits to the shared unsaved-changes registry", () => {
+    const registry = renderHook(() => useHasUnsavedChanges());
+    const form = renderHook(() => useSettingsForm({ keys: KEYS }));
+
+    expect(registry.result.current).toBe(false);
+
+    act(() => {
+      form.result.current.setValue("branding.server_name", "Casa");
+    });
+    expect(registry.result.current).toBe(true);
+
+    act(() => {
+      form.result.current.discard();
+    });
+    expect(registry.result.current).toBe(false);
+  });
+
+  it("withdraws its registry claim when the form unmounts", () => {
+    const registry = renderHook(() => useHasUnsavedChanges());
+    const form = renderHook(() => useSettingsForm({ keys: KEYS }));
+
+    act(() => {
+      form.result.current.setValue("branding.server_name", "Casa");
+    });
+    expect(registry.result.current).toBe(true);
+
+    form.unmount();
+    expect(registry.result.current).toBe(false);
+  });
+});
diff --git a/web/src/hooks/useSettingsForm.ts b/web/src/hooks/useSettingsForm.ts
index 226b6305d..5215f1a70 100644
--- a/web/src/hooks/useSettingsForm.ts
+++ b/web/src/hooks/useSettingsForm.ts
@@ -5,6 +5,7 @@ import {
   useUpdateServerSettings,
   useAdminSensitiveStatus,
 } from "@/hooks/queries/admin/settings";
+import { useReportUnsavedChanges } from "@/hooks/useUnsavedChanges";
 
 interface UseSettingsFormOptions {
   /** Setting keys this section manages */
@@ -85,8 +86,39 @@ export function useSettingsForm({ keys }: UseSettingsFormOptions) {
   const dirtyCount = dirty.size;
   const dirtyKeys = useMemo(() => Array.from(dirty), [dirty]);
 
+  // In-app navigation is guarded by `UnsavedChangesGuard`, which blocks the
+  // router for as long as this registration is live. Reporting through a module
+  // store rather than owning the prompt keeps the hook usable where no guard is
+  // mounted (the setup wizard) and outside a router entirely.
+  useReportUnsavedChanges(dirtyCount > 0);
+
+  // Every admin settings tab stages edits and only writes them through the
+  // SaveBar, so closing or reloading the tab would silently drop them. One
+  // guard here covers all tabs, and it is the only thing the browser lets us
+  // intercept: a tab close or reload never reaches the router.
+  useEffect(() => {
+    if (dirtyCount === 0) return;
+    function warnOnUnload(event: BeforeUnloadEvent) {
+      event.preventDefault();
+      // Older browsers only show the prompt for a truthy returnValue; the text
+      // itself is ignored everywhere.
+      event.returnValue = "";
+    }
+    window.addEventListener("beforeunload", warnOnUnload);
+    return () => window.removeEventListener("beforeunload", warnOnUnload);
+  }, [dirtyCount]);
+
   const isDirty = useCallback((key: string) => dirty.has(key), [dirty]);
 
+  // A staged clear is a dirty empty value: the save batch writes "" and the
+  // server drops the stored value. This is what `SecretField`'s own clear
+  // affordance stages, and the one thing that distinguishes it from the
+  // "leave blank to keep the saved secret" default.
+  const isClearStaged = useCallback(
+    (key: string) => dirty.has(key) && getValue(key) === "",
+    [dirty, getValue],
+  );
+
   const buildConnectionCheckRequest = useCallback(
     (selectedKeys: string[] = keys): AdminSettingsConnectionCheckRequest => ({
       values: Object.fromEntries(
@@ -160,6 +192,7 @@ export function useSettingsForm({ keys }: UseSettingsFormOptions) {
     dirtyCount,
     dirtyKeys,
     isDirty,
+    isClearStaged,
     save,
     discard,
     isSaving: updateSettings.isPending,
diff --git a/web/src/hooks/useTheme.previewIntent.test.tsx b/web/src/hooks/useTheme.previewIntent.test.tsx
new file mode 100644
index 000000000..414c1137f
--- /dev/null
+++ b/web/src/hooks/useTheme.previewIntent.test.tsx
@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/hooks/queries/settingValues", () => ({
+  useEffectiveSettings: () => ({ data: undefined }),
+}));
+
+vi.mock("@/hooks/queries/profileDefaults", () => ({
+  useProfileDefaultWriter: () => ({ save: vi.fn() }),
+}));
+
+vi.mock("@/hooks/useBranding", () => ({
+  useBranding: () => ({ defaultTheme: null }),
+}));
+
+// Only the auth-dependent hook is replaced; the parsing helpers around it are
+// the real ones so this exercises the provider's actual resolution order.
+vi.mock("@/hooks/themePreferences", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./themePreferences")>()),
+  useAppearanceCacheOwner: () => null,
+}));
+
+import { THEME_PREVIEW_INTENT_MS, ThemeProvider, useTheme } from "./useTheme";
+
+function Probe() {
+  const { theme, previewTheme, resetPreviewTheme, setTheme } = useTheme();
+  return (
+    <>
+      <span data-testid="theme">{theme}</span>
+      <button type="button" onClick={() => previewTheme("cinema-light")}>
+        preview light
+      </button>
+      <button type="button" onClick={resetPreviewTheme}>
+        leave
+      </button>
+      <button type="button" onClick={() => setTheme("cobalt-studio")}>
+        apply cobalt
+      </button>
+    </>
+  );
+}
+
+const domTheme = () => document.documentElement.getAttribute("data-theme");
+
+describe("theme preview hover intent", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.useFakeTimers();
+    render(
+      <ThemeProvider>
+        <Probe />
+      </ThemeProvider>,
+    );
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  // A cursor crossing the swatch row on its way to another menu item used to
+  // flash the whole app light for a frame or two.
+  it("does not restyle the app for a hover shorter than the intent delay", () => {
+    const before = domTheme();
+
+    fireEvent.click(screen.getByRole("button", { name: "preview light" }));
+
+    // Nothing is applied on the hover itself, nor part-way through the delay.
+    expect(domTheme()).toBe(before);
+    act(() => {
+      vi.advanceTimersByTime(THEME_PREVIEW_INTENT_MS / 2);
+    });
+    expect(domTheme()).toBe(before);
+
+    fireEvent.click(screen.getByRole("button", { name: "leave" }));
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    // The armed preview is cancelled, not merely deferred.
+    expect(domTheme()).toBe(before);
+  });
+
+  it("previews once the pointer has settled for the intent delay", () => {
+    fireEvent.click(screen.getByRole("button", { name: "preview light" }));
+    act(() => {
+      vi.advanceTimersByTime(THEME_PREVIEW_INTENT_MS);
+    });
+
+    expect(domTheme()).toBe("cinema-light");
+
+    fireEvent.click(screen.getByRole("button", { name: "leave" }));
+
+    expect(domTheme()).not.toBe("cinema-light");
+  });
+
+  it("applies a picked theme immediately and drops any armed preview", () => {
+    fireEvent.click(screen.getByRole("button", { name: "preview light" }));
+    fireEvent.click(screen.getByRole("button", { name: "apply cobalt" }));
+
+    expect(domTheme()).toBe("cobalt-studio");
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(domTheme()).toBe("cobalt-studio");
+  });
+});
diff --git a/web/src/hooks/useTheme.tsx b/web/src/hooks/useTheme.tsx
index f759cca55..84ecd8173 100644
--- a/web/src/hooks/useTheme.tsx
+++ b/web/src/hooks/useTheme.tsx
@@ -2,6 +2,7 @@ import {
   createContext,
   useContext,
   useEffect,
+  useRef,
   useState,
   useCallback,
 } from "react";
@@ -44,6 +45,32 @@ interface ThemeContextValue {
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
 
+/**
+ * Hover intent for theme previews. A preview restyles the entire app, so a
+ * cursor merely crossing a row of swatches on its way somewhere else used to
+ * flash the whole UI — most visibly on the light theme. Arming the preview
+ * behind a short delay keeps a deliberate hover instant enough to feel live
+ * while a pass-through never flips anything.
+ */
+export const THEME_PREVIEW_INTENT_MS = 250;
+
+/**
+ * Whether an element was focused by keyboard rather than by the pointer.
+ *
+ * Radix moves DOM focus to the menu item under the cursor, so previewing on
+ * every focus would re-trigger exactly the flash the hover delay suppresses.
+ * Engines that do not know `:focus-visible` (jsdom included) simply never
+ * preview on focus, which is the safe direction to fail.
+ */
+export function isKeyboardFocus(element: Element | null | undefined): boolean {
+  if (!element) return false;
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+}
+
 /**
  * The four appearance keys this provider needs, fetched in one batched
  * effective read rather than a query per key.
@@ -312,24 +339,51 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     applyHighContrastToDOM(highContrast);
   }, [highContrast]);
 
+  // Pending hover-intent timer for previewTheme. A ref rather than state: an
+  // armed preview is not something the tree renders, and re-rendering every
+  // swatch on hover is exactly the cost this is trying to avoid.
+  const previewTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cancelPendingPreview = useCallback(() => {
+    if (previewTimerRef.current !== null) {
+      clearTimeout(previewTimerRef.current);
+      previewTimerRef.current = null;
+    }
+  }, []);
+
+  // A timer that outlives the provider would restyle a document nobody is
+  // looking at any more.
+  useEffect(() => cancelPendingPreview, [cancelPendingPreview]);
+
   const setTheme = useCallback(
     (newTheme: ThemeId) => {
+      cancelPendingPreview();
       setPreviewThemeState(null);
       setThemePreference(newTheme);
       applyThemeToDOM(newTheme);
       appearanceCache.set(storage.KEYS.THEME, newTheme, cacheOwner);
       void saveProfileDefault(SETTING_KEYS.UI_THEME, newTheme);
     },
-    [saveProfileDefault, cacheOwner],
+    [saveProfileDefault, cacheOwner, cancelPendingPreview],
   );
 
-  const previewTheme = useCallback((newTheme: ThemeId) => {
-    setPreviewThemeState(newTheme);
-  }, []);
+  // Arm the preview instead of applying it, so leaving within the intent window
+  // — the pass-through case — never repaints the app at all.
+  const previewTheme = useCallback(
+    (newTheme: ThemeId) => {
+      cancelPendingPreview();
+      previewTimerRef.current = setTimeout(() => {
+        previewTimerRef.current = null;
+        setPreviewThemeState(newTheme);
+      }, THEME_PREVIEW_INTENT_MS);
+    },
+    [cancelPendingPreview],
+  );
 
   const resetPreviewTheme = useCallback(() => {
+    cancelPendingPreview();
     setPreviewThemeState(null);
-  }, []);
+  }, [cancelPendingPreview]);
 
   const setTextScale = useCallback(
     (value: TextScale) => {
diff --git a/web/src/hooks/useUnsavedChanges.test.ts b/web/src/hooks/useUnsavedChanges.test.ts
new file mode 100644
index 000000000..b0eb8bcf5
--- /dev/null
+++ b/web/src/hooks/useUnsavedChanges.test.ts
@@ -0,0 +1,45 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  useHasUnsavedChanges,
+  useReportUnsavedChanges,
+} from "./useUnsavedChanges";
+
+function fireBeforeUnload(): boolean {
+  const event = new Event("beforeunload", { cancelable: true });
+  window.dispatchEvent(event);
+  return event.defaultPrevented;
+}
+
+describe("useUnsavedChanges registry", () => {
+  it("arms the reload prompt while anything is dirty and disarms when clean", () => {
+    expect(fireBeforeUnload()).toBe(false);
+
+    const report = renderHook(({ dirty }) => useReportUnsavedChanges(dirty), {
+      initialProps: { dirty: true },
+    });
+    const read = renderHook(() => useHasUnsavedChanges());
+
+    expect(read.result.current).toBe(true);
+    // The router guard cannot see reload/close; the registry's own
+    // beforeunload handler covers that path for every reporter.
+    expect(fireBeforeUnload()).toBe(true);
+
+    report.rerender({ dirty: false });
+    read.rerender();
+    expect(read.result.current).toBe(false);
+    expect(fireBeforeUnload()).toBe(false);
+
+    report.unmount();
+    read.unmount();
+  });
+
+  it("drops a reporter's claim on unmount", () => {
+    const report = renderHook(() => useReportUnsavedChanges(true));
+    expect(fireBeforeUnload()).toBe(true);
+
+    report.unmount();
+    expect(fireBeforeUnload()).toBe(false);
+  });
+});
diff --git a/web/src/hooks/useUnsavedChanges.ts b/web/src/hooks/useUnsavedChanges.ts
new file mode 100644
index 000000000..67d605655
--- /dev/null
+++ b/web/src/hooks/useUnsavedChanges.ts
@@ -0,0 +1,85 @@
+import { useEffect, useId, useSyncExternalStore } from "react";
+
+/**
+ * Registry of forms that currently hold staged, unsaved edits.
+ *
+ * Draft state belongs to the component that owns the form (see
+ * `useSettingsForm`), so nothing above it can tell whether navigating away
+ * would throw work on the floor. Each form reports "I am dirty" here instead,
+ * and a guard mounted higher in the tree (`UnsavedChangesGuard`) turns that
+ * into a router-level block with a confirmation prompt.
+ *
+ * A module store rather than a context on purpose: the reporting side stays
+ * free of both a provider and the router, so `useSettingsForm` keeps working in
+ * places that mount no guard at all (the setup wizard) and in plain
+ * `renderHook` tests.
+ */
+const dirtySources = new Set<string>();
+const listeners = new Set<() => void>();
+
+function handleBeforeUnload(event: BeforeUnloadEvent) {
+  event.preventDefault();
+  // Chrome still requires returnValue to be set for the prompt to appear.
+  event.returnValue = "";
+}
+
+// The router guard covers in-app navigation; reload and tab close never reach
+// the router, so the registry arms the browser's own prompt whenever anything
+// is dirty. Registering the same handler twice is a no-op, so this can run on
+// every change.
+function syncBeforeUnload() {
+  if (typeof window === "undefined") return;
+  if (dirtySources.size > 0) {
+    window.addEventListener("beforeunload", handleBeforeUnload);
+  } else {
+    window.removeEventListener("beforeunload", handleBeforeUnload);
+  }
+}
+
+function emit() {
+  syncBeforeUnload();
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function hasUnsavedChangesSnapshot() {
+  return dirtySources.size > 0;
+}
+
+/**
+ * Reports one form's dirty state to the registry. The entry is removed when the
+ * form goes clean (save or discard) and when the component unmounts, so a form
+ * can never leave a stale claim behind.
+ */
+export function useReportUnsavedChanges(hasUnsavedChanges: boolean) {
+  // One stable id per hook instance: two dirty pages must count as two
+  // sources, and remounting the same page must not leak the old entry.
+  const id = useId();
+
+  useEffect(() => {
+    if (!hasUnsavedChanges) return;
+    dirtySources.add(id);
+    emit();
+    return () => {
+      dirtySources.delete(id);
+      emit();
+    };
+  }, [hasUnsavedChanges, id]);
+}
+
+/** True while any mounted form has edits that were never saved. */
+export function useHasUnsavedChanges(): boolean {
+  return useSyncExternalStore(
+    subscribe,
+    hasUnsavedChangesSnapshot,
+    hasUnsavedChangesSnapshot,
+  );
+}
diff --git a/web/src/lib/adminNavigation.ts b/web/src/lib/adminNavigation.ts
index 12ca269e9..e105a6783 100644
--- a/web/src/lib/adminNavigation.ts
+++ b/web/src/lib/adminNavigation.ts
@@ -14,13 +14,12 @@ import {
   PanelsTopLeft,
   Puzzle,
   Radio,
-  RefreshCw,
   ScrollText,
   Send,
   Server,
+  Settings2,
   ShieldCheck,
   SkipForward,
-  SlidersHorizontal,
   Users,
   UsersRound,
   Wrench,
@@ -32,7 +31,7 @@ import type {
   SettingsSearchGroup,
   SettingsSearchItem,
 } from "@/components/settings/settingsSearch";
-import { ADMIN_SETTINGS_GROUPS } from "@/lib/adminSettingsSearch";
+import { ADMIN_SETTINGS_NAV } from "@/lib/adminSettingsSearch";
 import { pluginRouteHref } from "@/lib/pluginRouteHref";
 
 export interface AdminNavItem extends SettingsSearchItem {
@@ -96,25 +95,20 @@ export const ADMIN_NAV_SECTIONS: AdminNavGroup[] = [
       {
         label: "Libraries",
         description:
-          "Media libraries, paths, scanning, and catalog import/export.",
-        keywords: ["library", "paths", "scan", "catalog", "seed"],
-        icon: Library,
-        href: "/admin/libraries",
-      },
-      {
-        label: "Live TV",
-        description:
-          "HDHomeRun tuners, channel lineup, Schedules Direct, and XML sync guide sources.",
+          "Media libraries, paths, scanning, autoscan sources, and catalog import.",
         keywords: [
-          "ota",
-          "hdhomerun",
-          "epg",
-          "dvr",
-          "guide",
-          "schedules direct",
+          "library",
+          "paths",
+          "scan",
+          "catalog",
+          "seed",
+          "autoscan",
+          "scan queue",
+          "polling",
+          "webhook source",
         ],
-        icon: Radio,
-        href: "/admin/livetv",
+        icon: Library,
+        href: "/admin/libraries",
       },
       {
         label: "Collections",
@@ -142,13 +136,6 @@ export const ADMIN_NAV_SECTIONS: AdminNavGroup[] = [
   {
     label: "Automation",
     items: [
-      {
-        label: "Autoscan",
-        description: "Autoscan sources, queue state, and poller behavior.",
-        keywords: ["scan queue", "cephfs", "polling", "matcher"],
-        icon: RefreshCw,
-        href: "/admin/autoscan",
-      },
       {
         label: "Scheduled Tasks",
         description: "Background task schedules, runs, and job history.",
@@ -157,7 +144,7 @@ export const ADMIN_NAV_SECTIONS: AdminNavGroup[] = [
         href: "/admin/tasks",
       },
       {
-        label: "Subtitles",
+        label: "Subtitle Files",
         description: "Downloaded subtitle records and subtitle admin tools.",
         keywords: ["captions", "subtitle downloads", "providers"],
         icon: Captions,
@@ -229,16 +216,26 @@ export const ADMIN_NAV_SECTIONS: AdminNavGroup[] = [
     ],
   },
   {
-    label: "System",
+    label: "Settings",
     items: [
       {
         label: "Settings",
         description:
-          "Server-wide settings, integrations, storage, and compatibility proxies.",
-        keywords: ["configuration", "server settings", "admin settings"],
-        icon: SlidersHorizontal,
+          "Server configuration, integrations, playback, storage, and access.",
+        keywords: [
+          "settings",
+          "configuration",
+          "server settings",
+          "preferences",
+        ],
+        icon: Settings2,
         href: "/admin/settings",
       },
+    ],
+  },
+  {
+    label: "System",
+    items: [
       {
         label: "Plugins",
         description:
@@ -344,33 +341,30 @@ export function appendAdminPluginNavSection(
   ];
 }
 
-export function appendAdminSettingsNavSection(
-  sections: readonly AdminNavGroup[],
-): AdminNavGroup[] {
-  return [
-    ...sections.map((section) => ({ ...section, items: [...section.items] })),
-    {
-      label: "Admin Settings",
-      items: ADMIN_SETTINGS_GROUPS.flatMap((group) =>
-        group.items.map((item) => ({
-          label: item.label,
-          description: item.description,
-          keywords: ["admin settings", group.label, ...(item.keywords ?? [])],
-          settings: item.settings,
-          icon: item.icon,
-          href: `/admin/settings?tab=${encodeURIComponent(item.id)}`,
-        })),
-      ),
-    },
-  ];
-}
-
 export function buildAdminCommandNavSections(
   installations: readonly PluginInstallation[] | undefined,
   visibility: AdminNavVisibility = {},
 ): AdminNavGroup[] {
-  return appendAdminPluginNavSection(
-    appendAdminSettingsNavSection(buildAdminNavSections(visibility)),
-    installations,
+  // Keep the persistent sidebar quiet while preserving direct access to every
+  // settings category and individual setting through Cmd+K.
+  const sections = buildAdminNavSections(visibility).map((section) =>
+    section.label === "Settings"
+      ? {
+          ...section,
+          items: [
+            ...section.items,
+            ...ADMIN_SETTINGS_NAV.map((item) => ({
+              label: item.label,
+              description: item.description,
+              keywords: ["settings", "configuration", ...(item.keywords ?? [])],
+              settings: item.settings,
+              icon: item.icon,
+              href: `/admin/settings/${encodeURIComponent(item.id)}`,
+            })),
+          ],
+        }
+      : section,
   );
+
+  return appendAdminPluginNavSection(sections, installations);
 }
diff --git a/web/src/lib/adminSettingsSearch.ts b/web/src/lib/adminSettingsSearch.ts
index 74d9129d9..5210ee009 100644
--- a/web/src/lib/adminSettingsSearch.ts
+++ b/web/src/lib/adminSettingsSearch.ts
@@ -1,25 +1,16 @@
 import {
   Bell,
   Captions,
-  Cloud,
   Database,
   Download,
-  Gauge,
-  HardDrive,
-  Info,
-  Layers,
-  Mail,
-  Image,
-  Network,
+  Library,
   Paintbrush,
   PlayCircle,
-  Puzzle,
-  Search,
-  ScanSearch,
-  ScrollText,
+  Plug,
+  RefreshCw,
   Settings2,
   Sparkles,
-  Subtitles,
+  Users,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 
@@ -32,6 +23,8 @@ export interface AdminSettingsSearchItem extends SettingsSearchItem {
   id: string;
   label: string;
   description: string;
+  /** The named sections visible inside this settings destination. */
+  groups: readonly string[];
   keywords?: readonly string[];
   settings?: readonly {
     label: string;
@@ -39,6 +32,13 @@ export interface AdminSettingsSearchItem extends SettingsSearchItem {
     keywords?: readonly string[];
   }[];
   icon: LucideIcon;
+  /**
+   * Short qualifier rendered next to the label in a nav that wants one. The
+   * settings rail reads section health as a status dot instead, so nothing
+   * sets this today; the prop stays so a future nav can opt in without
+   * reshaping the item type.
+   */
+  badge?: string;
 }
 
 export type AdminSettingsSearchGroup =
@@ -47,65 +47,117 @@ export type AdminSettingsSearchGroup =
 const settingIndex = (...labels: string[]) =>
   labels.map((label) => ({ label }));
 
-// Tab ids are stable URL state (?tab=...) — regroup or reorder freely, but
-// renaming an id breaks bookmarks and deep links.
+// Page ids are stable route segments. Old ids from the 20-tab layout are kept
+// working by LEGACY_ADMIN_SETTINGS_PAGE_ALIASES below — regroup or reorder
+// freely, but add an alias entry whenever an id disappears.
+//
+// One group keeps the Overview cards and command palette in the same order.
 export const ADMIN_SETTINGS_GROUPS: AdminSettingsSearchGroup[] = [
   {
-    label: "Server",
+    label: "Settings",
     items: [
       {
-        id: "about",
-        label: "About",
-        description: "Server version, update status, and changelog.",
+        id: "general",
+        label: "General",
+        description: "Server identity, public signups, and logging.",
+        groups: ["Identity", "Access", "Logging"],
         keywords: [
-          "version",
-          "build",
-          "update",
-          "changelog",
-          "release notes",
-          "revision",
-          "git",
+          "server name",
+          "login subtitle",
+          "signup",
+          "invite",
+          "log level",
+          "quiet",
+          "silenced log messages",
+          "branding name",
         ],
         settings: settingIndex(
-          "Version",
-          "Update status",
-          "Latest version",
-          "Changelog",
+          "Identity",
+          "Server name",
+          "Login subtitle",
+          "Access",
+          "Public signups",
+          "Logging",
+          "Log level",
+          "Quiet log prefixes",
         ),
-        icon: Info,
+        icon: Settings2,
       },
       {
-        id: "general",
-        label: "General",
-        description: "Authentication, token lifetimes, and server logging.",
+        id: "infrastructure",
+        label: "Storage & Database",
+        description:
+          "Redis, S3 storage buckets, the database, and log retention.",
+        groups: [
+          "Redis",
+          "Public storage",
+          "Private storage",
+          "Database",
+          "Logs",
+        ],
         keywords: [
-          "access token",
-          "refresh token",
-          "expiry",
-          "log level",
-          "quiet subsystems",
+          "redis",
+          "s3",
+          "bucket",
+          "endpoint",
+          "region",
+          "access key",
+          "secret key",
+          "postgres",
+          "pool",
+          "user db",
+          "ops log",
+          "retention",
+          "decision log",
+          "opa",
+          "infrastructure",
         ],
         settings: settingIndex(
-          "Access Token Expiry",
-          "Refresh Token Expiry",
-          "Log Level",
-          "Quiet Subsystems",
+          "Redis",
+          "Use Redis",
+          "Connection URL",
+          "Public storage",
+          "Private storage",
+          "Endpoint",
+          "Region",
+          "Bucket",
+          "Access Key",
+          "Secret Key",
+          "Put the bucket name in the URL path",
+          "Folder inside the bucket",
+          "How asset links are authorized",
+          "Address clients download from",
+          "Token Secret",
+          "Token query parameter",
+          "Link lifetime (seconds)",
+          "Database",
+          "Maximum Postgres connections",
+          "Where per-user data is stored",
+          "Open files per user",
+          "Close idle user databases after",
+          "Logs",
+          "How much to record",
+          "Delete log entries older than (days)",
+          "Maximum log entries",
+          "Maximum log size (MB)",
+          "Delete permission records older than (days)",
+          "Record one allowed check in every",
         ),
-        icon: Settings2,
+        icon: Database,
       },
       {
-        id: "branding",
-        label: "Branding",
+        id: "appearance",
+        label: "Appearance",
         description:
-          "White-label logo, favicon, server name, login background, and accent color.",
+          "Logos, accent color, default theme, custom CSS, and poster badges.",
+        groups: ["Logos and icons", "Colors and theme", "Card overlays"],
         keywords: [
           "logo",
           "wordmark",
-          "icon",
           "favicon",
+          "login background",
           "white label",
           "brand",
-          "login background",
           "accent color",
           "default theme",
           "app name",
@@ -113,242 +165,153 @@ export const ADMIN_SETTINGS_GROUPS: AdminSettingsSearchGroup[] = [
           "light theme logo",
           "light wordmark",
           "light icon",
+          "theme",
+          "custom css",
+          "community themes",
+          "overlays",
+          "poster badges",
         ],
         settings: settingIndex(
-          "Server Name",
-          "Login Page Subtitle",
+          "Logos and icons",
           "Logo (wordmark)",
           "Logo (wordmark, light themes)",
           "Logo (icon)",
           "Logo (icon, light themes)",
           "Favicon",
-          "Login Background",
-          "Brand Accent Color",
-          "Default Theme",
-        ),
-        icon: Image,
-      },
-      {
-        id: "theming",
-        label: "Theming",
-        description:
-          "Server theme token overrides, custom CSS, and the theme catalog.",
-        keywords: [
-          "theme",
-          "custom css",
-          "community themes",
-          "appearance",
-          "token overrides",
-        ],
-        settings: settingIndex(
-          "Preview",
-          "Token Overrides",
+          "Login background",
+          "Colors and theme",
+          "Accent color",
+          "Custom accent color",
+          "Default theme",
+          "Individual colors and fonts",
           "Custom CSS",
-          "Theme Catalog URL",
+          "Community theme list",
+          "Card overlays",
+          "Show badges on poster art",
+          "Badge style",
         ),
         icon: Paintbrush,
       },
       {
-        id: "overlays",
-        label: "Card Overlays",
-        description: "Server-wide poster badge and overlay defaults.",
-        keywords: [
-          "poster",
-          "badges",
-          "defaults.card_overlays",
-          "overlay preset",
-        ],
-        settings: settingIndex(
-          "Card Overlays Enabled",
-          "Default Configuration",
-          "Default style preset",
-          "Overlay position",
-          "Overlay enabled",
-        ),
-        icon: Layers,
-      },
-    ],
-  },
-  {
-    label: "Media",
-    items: [
-      {
-        id: "scanner",
-        label: "Scanner & Matcher",
+        id: "security",
+        label: "Security & Access",
         description:
-          "Scan workers, matcher workers, batch size, and image caching.",
+          "Sign-in sessions, trusted proxies, and request rate limits.",
+        groups: ["Sign-in sessions", "Network", "Rate limiting"],
         keywords: [
-          "scanner workers",
-          "matcher workers",
-          "batch size",
-          "metadata cache images",
+          "access token",
+          "refresh token",
+          "expiry",
+          "session",
+          "proxy",
+          "x-forwarded-for",
+          "client ip",
+          "rate limit",
+          "throttle",
+          "429",
+          "api key tier",
+          "security",
         ],
         settings: settingIndex(
-          "Scanner Workers",
-          "Matcher Workers",
-          "Matcher Batch Size",
-          "Cache Images to S3",
+          "Sign-in sessions",
+          "Access token expiry",
+          "Refresh token expiry",
+          "Network",
+          "Trusted proxies",
+          "Rate limiting",
+          "Enable rate limiting",
+          "Where counters are kept",
+          "Whole-server requests per second",
+          "Per client address",
+          "Burst allowance",
+          "Standard API keys",
+          "Elevated API keys",
         ),
-        icon: ScanSearch,
+        icon: Users,
       },
       {
-        id: "search",
-        label: "Search",
+        id: "library",
+        label: "Library & Metadata",
         description:
-          "Catalog search provider, Meilisearch connection, and index maintenance.",
+          "Artwork caching, scanning, intro and credits markers, and catalog search.",
+        groups: ["Metadata", "Scanning", "Intro and credits markers", "Search"],
         keywords: [
-          "catalog search",
-          "meilisearch",
-          "postgres fts",
-          "full text search",
-          "index",
-          "typo tolerance",
+          "scanner workers",
+          "matcher",
           "batch size",
-          "index scope",
-          "semantic search",
-          "hybrid search",
-          "vectors",
-          "embeddings",
-          "embedder",
-          "binary quantization",
-          "quantized",
-        ],
-        settings: settingIndex(
-          "Preferred Provider",
-          "URL",
-          "API Key",
-          "Index Prefix",
-          "Timeout (ms)",
-          "Matching Strategy",
-          "Sync Batch Size",
-          "Rebuild Batch Size",
-          "Rebuild Queue Depth",
-          "Indexed Types",
-          "Semantic Search",
-          "Semantic Ratio",
-          "Embedder",
-          "Vectorized Documents",
-          "Status",
-        ),
-        icon: Search,
-      },
-      {
-        id: "intro",
-        label: "Intro Markers",
-        description:
-          "Marker lookup mode, playback fetches, providers, and submissions.",
-        keywords: [
+          "artwork",
+          "posters",
+          "cache images",
+          "object storage",
           "intro",
           "credits",
           "recap",
           "markers",
-          "chapter markers",
-          "provider contributions",
-        ],
-        settings: settingIndex(
-          "Mode",
-          "Fetch Markers at Playback if Missing",
-          "Use for Online Marker Lookup",
-          "Allow Contributions",
-          "Auto-submit Local Markers",
-          "Marker Providers",
-        ),
-        icon: Captions,
-      },
-      {
-        id: "subtitles",
-        label: "Subtitles",
-        description:
-          "Downloaded subtitles, provider settings, and subtitle appearance.",
-        keywords: [
-          "opensubtitles",
-          "providers",
-          "subtitle language",
-          "caption",
-          "downloaded",
-        ],
-        settings: settingIndex(
-          "Provider settings",
-          "Downloaded subtitles",
-          "Subtitle appearance",
-          "Subtitle language",
-          "Subtitle behavior",
-          "Forced subtitles",
-        ),
-        icon: Subtitles,
-      },
-      {
-        id: "ai",
-        label: "AI Services",
-        description:
-          "AI provider endpoints, translation, transcription, and quotas.",
-        keywords: [
-          "openai",
-          "ollama",
-          "base url",
-          "api key",
-          "chat model",
-          "translation",
-          "transcription",
-          "subtitles",
-          "quota",
+          "marker detection",
+          "meilisearch",
+          "postgres search",
+          "semantic",
+          "metadata",
         ],
         settings: settingIndex(
-          "Text translation",
-          "Base URL",
-          "Chat model",
-          "API Key",
-          "Test Text AI",
-          "Speech-to-text",
-          "Transcription model",
-          "Transcription base URL",
-          "Transcription API key",
-          "Test Speech-to-Text",
-          "Features",
-          "Max concurrent jobs",
-          "Subtitle translation",
-          "Subtitle generation from audio",
-          "Description translation",
-          "On-view translation",
-          "Subtitle batch size",
-          "Subtitle context lines",
-          "Transcription chunk length (seconds)",
-          "Transcription limit per account",
-          "Transcription limit period",
-          "Advanced",
+          "Metadata",
+          "S3 image caching",
+          "Scanning",
+          "Scanner workers",
+          "Matcher workers",
+          "Matcher batch size",
+          "Intro and credits markers",
+          "Find intros and credits",
+          "Fetch markers on playback",
+          "Populate markers",
+          "Contribute markers",
+          "Search",
+          "Search engine",
+          "Meilisearch URL",
+          "Meilisearch API key",
+          "Index name prefix",
+          "Query timeout (ms)",
+          "When a search has several words",
+          "Items sent to the index per batch",
+          "Match by meaning as well as words",
+          "Meaning-based share of results",
+          "Search status",
         ),
-        icon: Sparkles,
+        icon: Library,
       },
       {
         id: "playback",
         label: "Playback",
         description:
-          "FFmpeg, transcoding, hardware acceleration, segments, and resume behavior.",
+          "Transcoding, hardware acceleration, and watch thresholds.",
+        groups: ["Transcoding", "Watch behavior"],
         keywords: [
           "ffmpeg",
           "transcode",
           "hardware acceleration",
+          "gpu",
           "chapter thumbnails",
           "watched threshold",
-          "resume threshold",
+          "resume",
           "4k",
         ],
         settings: settingIndex(
-          "FFmpeg Path",
-          "Transcode Directory",
-          "Hardware Acceleration",
-          "Transcoding Enabled",
-          "Local Transcode Fallback",
-          "Allow 4K Transcoding",
-          "Enable Transcode Throttling",
-          "Throttle Buffer (seconds)",
-          "Chapter Thumbnail Workers",
-          "Chapter Thumbnail Execution",
-          "Chapter Thumbnail Node Capacity",
-          "HDR Chapter Thumbnail Policy",
-          "Enable CPU Tone Mapping",
-          "Watched Threshold (%)",
-          "Min Resume Threshold (%)",
+          "Transcoding",
+          "Hardware acceleration",
+          "Allow 4K transcoding",
+          "FFmpeg path",
+          "Transcode directory",
+          "GPU devices",
+          "Local transcode fallback",
+          "Throttle transcoding",
+          "Buffer ahead (seconds)",
+          "Chapter thumbnail workers",
+          "Generate chapter thumbnails on",
+          "HDR handling",
+          "Convert HDR colors on the CPU when the GPU cannot",
+          "Watch behavior",
+          "Mark watched at (%)",
+          "Show in Continue Watching after (%)",
         ),
         icon: PlayCircle,
       },
@@ -356,285 +319,250 @@ export const ADMIN_SETTINGS_GROUPS: AdminSettingsSearchGroup[] = [
         id: "downloads",
         label: "Downloads",
         description:
-          "Download enablement, bandwidth, concurrency, and period limits.",
+          "Offline downloads, per-user and server-wide limits, and prepared copies.",
+        groups: ["Downloads"],
         keywords: [
+          "downloads",
+          "offline",
           "bandwidth",
-          "concurrent downloads",
-          "download limit",
-          "period duration",
+          "mbps",
+          "throttle",
+          "quota",
+          "concurrency",
+          "prepared copies",
+          "artifacts",
+          "storage budget",
         ],
         settings: settingIndex(
-          "Downloads Enabled",
-          "Server Bandwidth (Mbps)",
-          "Per-User Bandwidth (Mbps)",
-          "Max Concurrent Downloads Per User",
-          "Max Downloads Per Period",
-          "Period Duration",
+          "Downloads",
+          "Allow downloads",
+          "Per-user bandwidth",
+          "Per user",
+          "Downloads at once per user",
+          "Downloads per period",
+          "Period length",
+          "Whole server",
+          "Server bandwidth",
+          "Prepare device-friendly copies",
+          "Prepared file directory",
+          "Files prepared at once",
+          "Prepared file storage budget",
         ),
         icon: Download,
       },
-    ],
-  },
-  {
-    label: "Connections",
-    items: [
       {
-        id: "watch-providers",
+        id: "providers",
+        label: "Subtitles & Metadata",
+        description:
+          "Subtitle provider accounts, the MDBList metadata key, and marker providers.",
+        groups: [
+          "Subtitle providers",
+          "Metadata providers",
+          "Marker providers",
+        ],
+        keywords: [
+          "opensubtitles",
+          "subdl",
+          "subsource",
+          "mdblist",
+          "subtitles",
+          "captions",
+          "api key",
+          "provider credentials",
+          "integrations",
+          "theintrodb",
+          "introdb",
+          "marker providers",
+          "markers",
+          "intro",
+          "credits",
+        ],
+        settings: settingIndex(
+          "Subtitle providers",
+          "OpenSubtitles",
+          "SubDL",
+          "SubSource",
+          "Username",
+          "Password",
+          "API key",
+          "Metadata providers",
+          "MDBList",
+          "Marker providers",
+          "TheIntroDB",
+          "Use for online marker lookup",
+          "Lookup order",
+          "Allow contributions",
+          "Send this server's markers automatically",
+          "Minimum confidence",
+        ),
+        icon: Captions,
+      },
+      {
+        id: "watch-sync",
         label: "Watch Providers",
-        description: "Provider integrations for watch history and scrobbling.",
+        description:
+          "Trakt, Simkl, and watch-provider plugins that profiles connect their own accounts to.",
+        groups: ["Watch providers"],
         keywords: [
           "trakt",
           "simkl",
-          "import",
-          "export",
           "scrobble",
-          "watch history",
-          "favorites",
+          "watch providers",
+          "client id",
+          "client secret",
+          "sync",
+          "integrations",
+          "plugin",
         ],
         settings: settingIndex(
-          "Trakt Client ID",
-          "Trakt Client Secret",
-          "Simkl Client ID",
-          "Simkl Client Secret",
+          "Watch providers",
+          "Trakt",
+          "Simkl",
+          "Client ID",
+          "Client secret",
         ),
-        icon: Cloud,
-      },
-      {
-        id: "integrations",
-        label: "Integrations",
-        description: "Third-party integration keys and service connections.",
-        keywords: ["mdblist", "api key", "metadata lists"],
-        settings: settingIndex("API Key"),
-        icon: Puzzle,
+        icon: RefreshCw,
       },
       {
-        id: "email",
-        label: "Email",
+        id: "ai",
+        label: "AI Services",
         description:
-          "SMTP delivery, sender address, digest schedule, and external URL.",
+          "Text and speech-to-text models, and the features that spend them.",
+        groups: ["Models", "Features", "Usage and tuning"],
         keywords: [
-          "smtp",
-          "mail",
-          "from address",
-          "digest",
-          "external url",
-          "tls",
+          "openai",
+          "ollama",
+          "groq",
+          "whisper",
+          "llm",
+          "model",
+          "translation",
+          "transcription",
+          "subtitle translation",
+          "integrations",
         ],
         settings: settingIndex(
-          "Email Enabled",
-          "From Address",
-          "From Name",
-          "Host",
-          "Port",
-          "Security",
-          "Username",
-          "Password",
-          "Verify",
+          "Models",
+          "Text model",
+          "Speech-to-text",
+          "Base URL",
+          "Model",
+          "API key",
+          "Features",
+          "Translate subtitles",
+          "Create subtitles from audio",
+          "Translate descriptions",
+          "Description translation for viewers",
+          "Jobs running at once",
+          "Subtitle lines per request",
+          "Surrounding lines sent for context",
+          "Audio sent per request (seconds)",
+          "Transcriptions per account",
+          "Allowance resets",
         ),
-        icon: Mail,
+        icon: Sparkles,
       },
       {
         id: "notifications",
         label: "Notifications",
         description:
-          "Server notification channels, release events, Prairie Push Relay, Discord, web push, and webhooks.",
+          "Release events, delivery channels, the mail server, and webhooks.",
+        groups: ["Release events", "Delivery channels", "Tuning", "Retention"],
         keywords: [
           "release events",
           "new episode",
-          "prairie push relay",
+          "email",
+          "smtp",
+          "mail",
+          "silo push relay",
           "mobile push",
-          "apple push",
-          "android push",
           "apns",
-          "push relay",
-          "privacy disclosure",
+          "fcm",
           "discord",
-          "browser push",
           "web push",
           "webhooks",
           "server channels",
+          "digest",
         ],
         settings: settingIndex(
-          "Record events",
+          "Notice new content",
           "Enable release events",
-          "Fan out",
+          "Work out who wants it",
           "Enable fanout",
           "Delivery Channels",
           "In-App",
           "Web Push",
-          "Prairie Push Relay",
+          "Silo Push Relay",
           "Relay URL",
           "Deployment ID",
-          "Register Relay",
-          "Clear Relay Credential",
-          "Privacy Disclosure",
+          "Apple Push (APNs)",
+          "Android Push (FCM)",
           "Email",
-          "Allow Per-Episode Email",
-          "Digest Hour",
-          "External URL",
+          "Send email from this server",
+          "From address",
+          "From name",
+          "Mail server address",
+          "Port",
+          "Encryption",
+          "Username",
+          "Password",
+          "Test email recipient",
+          "Let people pick an email per episode",
+          "Send the daily summary at",
+          "Link back to this server at",
           "Discord",
           "Client ID",
-          "Client Secret",
-          "Bot Token",
-          "Invite Bot to Server",
-          "Clear Discord Credentials",
-          "Allow Per-Episode DMs",
-          "Embed Posters",
+          "Client secret",
+          "Bot token",
+          "Let people pick a DM per episode",
+          "Show artwork in Discord messages",
+          "Mention the requester on Discord",
           "Personal Webhooks",
-          "Max Webhooks Per Profile",
-          "Deliveries Per Minute Per Profile",
-          "Allow Private Destinations",
+          "Webhooks each person may create",
+          "Webhook calls per minute, per person",
+          "Allow webhooks to private addresses",
           "Server Channels",
-          "Batch Window (seconds)",
-          "Mention Requesters on Discord",
-          "Settle Delay (seconds)",
-          "Max Series Burst",
-          "Max Event Age (hours)",
-          "Read Notifications (days)",
-          "Unread Notifications (days)",
-          "Processed Events (days)",
+          "Collect new items for (seconds)",
+          "Grouping and flood control",
+          "Wait before sending (seconds)",
+          "Most messages per show at once",
+          "Give up on content older than (hours)",
+          "How long notifications are kept",
         ),
         icon: Bell,
       },
       {
-        id: "compatibility-proxies",
-        label: "Compatibility Proxies",
+        id: "compatibility",
+        label: "Compatibility",
         description:
-          "Jellyfin and Audiobookshelf compatibility proxy settings.",
+          "Jellyfin and Audiobookshelf client compatibility and the Jellyfin web player.",
+        groups: ["Jellyfin", "Audiobookshelf"],
         keywords: [
           "jellyfin",
           "audiobookshelf",
           "abs",
+          "proxy",
           "public url",
           "server id",
           "session ttl",
+          "web player",
         ],
         settings: settingIndex(
-          "Public URL",
-          "Server Name",
+          "Jellyfin",
+          "Allow Jellyfin apps to connect",
+          "Address Jellyfin apps should use",
+          "Jellyfin Web install progress",
+          "Web player version to install",
+          "Web player install folder",
+          "Name shown to Jellyfin apps",
           "Server ID",
-          "Emulated Server Version",
-          "Session TTL",
-          "Playback Session TTL",
-          "Enable Audiobookshelf Proxy",
-        ),
-        icon: Network,
-      },
-      {
-        id: "rate-limiting",
-        label: "Rate Limiting",
-        description:
-          "Request limits, API tiers, admin limits, and authentication throttles.",
-        keywords: [
-          "limits",
-          "tiers",
-          "requests",
-          "throttle",
-          "429",
-          "api keys",
-        ],
-        settings: settingIndex(
-          "Enable Rate Limiting",
-          "Backend",
-          "Global Requests Per Second",
-          "Per-IP Limits",
-          "Requests / Second",
-          "Requests / Minute",
-          "Burst",
-          "Standard",
-          "Elevated",
-          "Login",
-          "Signup",
-          "Setup",
-          "Authentication endpoints",
-        ),
-        icon: Gauge,
-      },
-    ],
-  },
-  {
-    label: "Data",
-    items: [
-      {
-        id: "database",
-        label: "Database",
-        description:
-          "Postgres, Redis, user database pooling, and Litestream settings.",
-        keywords: [
-          "postgres",
-          "redis",
-          "connection url",
-          "user db",
-          "pool",
-          "litestream",
-          "stale grace",
-        ],
-        settings: settingIndex(
-          "Max Connections",
-          "Enable Redis",
-          "Connection URL",
-          "User DB Backend",
-          "Pool Max Open",
-          "Idle Timeout",
-          "Litestream Sync Interval",
-          "Stale Grace Seconds",
-        ),
-        icon: Database,
-      },
-      {
-        id: "storage",
-        label: "Storage",
-        description:
-          "Public and private S3 storage buckets, endpoints, and credentials.",
-        keywords: [
-          "s3",
-          "bucket",
-          "endpoint",
-          "region",
-          "access key",
-          "secret key",
-          "uploads",
-        ],
-        settings: settingIndex(
-          "Endpoint",
-          "Region",
-          "Path Style",
-          "Bucket",
-          "Access Key",
-          "Secret Key",
-          "URL Auth Method",
-          "Read Endpoint",
-          "Token Secret",
-          "Token Param",
-          "Token TTL (seconds)",
+          "Jellyfin version to report",
+          "Stay signed in for",
+          "Forget idle playback after",
+          "Audiobookshelf",
+          "Allow Audiobookshelf apps to connect",
         ),
-        icon: HardDrive,
-      },
-      {
-        id: "log-retention",
-        label: "Log Retention",
-        description:
-          "Operations log cleanup, policy decision log cleanup, access log cleanup, and retention policies.",
-        keywords: [
-          "ops log",
-          "access log",
-          "policy decision log",
-          "decision log",
-          "opa",
-          "cleanup",
-          "retention",
-          "history",
-        ],
-        settings: settingIndex(
-          "Retention Days",
-          "Max Rows",
-          "Max Size (MB)",
-          "Decision Log Retention Days",
-          "Decision Log Verbosity",
-          "Scope Sample Rate",
-          "Bucket Overrides",
-        ),
-        icon: ScrollText,
+        icon: Plug,
       },
     ],
   },
@@ -643,3 +571,42 @@ export const ADMIN_SETTINGS_GROUPS: AdminSettingsSearchGroup[] = [
 export const ADMIN_SETTINGS_NAV = ADMIN_SETTINGS_GROUPS.flatMap(
   (group) => group.items,
 );
+
+const ADMIN_SETTINGS_PAGE_IDS = new Set(
+  ADMIN_SETTINGS_NAV.map((item) => item.id),
+);
+
+/**
+ * Deep links from earlier layouts. Bookmarks, docs, and older client builds
+ * still point at these ids, so every one of them resolves to the page that
+ * absorbed it rather than falling through to the settings overview.
+ */
+export const LEGACY_ADMIN_SETTINGS_PAGE_ALIASES: Readonly<
+  Record<string, string>
+> = {
+  branding: "appearance",
+  theming: "appearance",
+  overlays: "appearance",
+  "rate-limiting": "security",
+  scanner: "library",
+  search: "library",
+  intro: "library",
+  subtitles: "providers",
+  integrations: "providers",
+  "watch-providers": "watch-sync",
+  email: "notifications",
+  jellyfin: "compatibility",
+  "compatibility-proxies": "compatibility",
+  database: "infrastructure",
+  storage: "infrastructure",
+  "log-retention": "infrastructure",
+};
+
+/** Resolves a route segment or legacy `?tab=` value to a current page id. */
+export function resolveAdminSettingsPageID(
+  value: string | null,
+): string | null {
+  if (!value) return null;
+  if (ADMIN_SETTINGS_PAGE_IDS.has(value)) return value;
+  return LEGACY_ADMIN_SETTINGS_PAGE_ALIASES[value] ?? null;
+}
diff --git a/web/src/lib/cardQuickActions.test.ts b/web/src/lib/cardQuickActions.test.ts
new file mode 100644
index 000000000..caf42cfb4
--- /dev/null
+++ b/web/src/lib/cardQuickActions.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+
+import { CARD_QUICK_ACTION_MODES } from "@/lib/cardQuickActions";
+import { SETTING_DEFINITIONS, SETTING_KEYS } from "@/lib/settingsContract";
+
+// The mode literals exist only because the generated definition types its
+// members as unknown, which cannot produce the literal union the card props
+// need. This assertion is what keeps the hand-written copy honest; the option
+// labels derive from the contract directly.
+describe("card quick action modes", () => {
+  it("lists exactly the contract's enum members, in manifest order", () => {
+    const members =
+      SETTING_DEFINITIONS[SETTING_KEYS.UI_CARD_QUICK_ACTIONS].values ?? [];
+    expect(CARD_QUICK_ACTION_MODES).toEqual(
+      members.map((member) => member.value),
+    );
+  });
+});
diff --git a/web/src/lib/cardQuickActions.ts b/web/src/lib/cardQuickActions.ts
new file mode 100644
index 000000000..c0a2556f0
--- /dev/null
+++ b/web/src/lib/cardQuickActions.ts
@@ -0,0 +1,42 @@
+import { SETTING_DEFINITIONS, SETTING_KEYS } from "@/lib/settingsContract";
+
+// Hand-written only because the generated definition types its enum members as
+// unknown, which cannot produce the literal union the card props need; the test
+// pins this list to the contract.
+export const CARD_QUICK_ACTION_MODES = [
+  "both",
+  "favorites",
+  "watched",
+] as const;
+
+export type EnabledCardQuickActionMode =
+  (typeof CARD_QUICK_ACTION_MODES)[number];
+export type CardQuickActionMode = EnabledCardQuickActionMode | "none";
+
+export const CARD_QUICK_ACTION_OPTIONS: ReadonlyArray<{
+  value: EnabledCardQuickActionMode;
+  label: string;
+}> = (SETTING_DEFINITIONS[SETTING_KEYS.UI_CARD_QUICK_ACTIONS].values ?? []).map(
+  (member) => ({
+    value: member.value as EnabledCardQuickActionMode,
+    label: member.label,
+  }),
+);
+
+export function normalizeCardQuickActionMode(
+  value: unknown,
+  fallback: EnabledCardQuickActionMode = "both",
+): EnabledCardQuickActionMode {
+  return typeof value === "string" &&
+    CARD_QUICK_ACTION_MODES.includes(value as EnabledCardQuickActionMode)
+    ? (value as EnabledCardQuickActionMode)
+    : fallback;
+}
+
+export function showsFavoriteQuickAction(mode: CardQuickActionMode): boolean {
+  return mode === "both" || mode === "favorites";
+}
+
+export function showsWatchedQuickAction(mode: CardQuickActionMode): boolean {
+  return mode === "both" || mode === "watched";
+}
diff --git a/web/src/lib/emailReadiness.ts b/web/src/lib/emailReadiness.ts
new file mode 100644
index 000000000..cb54e03f5
--- /dev/null
+++ b/web/src/lib/emailReadiness.ts
@@ -0,0 +1,15 @@
+/**
+ * Whether outbound mail can actually send, mirrored from the server's own
+ * validation (`internal/config/admin_settings.go`): the switch on, a host, AND
+ * a sender address — enabling email with no from-address is rejected there,
+ * but legacy rows and single-key writes can still leave that state stored.
+ * One rule for every surface (settings page, overview tile) so they cannot
+ * drift into disagreeing about readiness.
+ */
+export function emailReady(
+  enabled: boolean,
+  smtpHost: string,
+  fromAddress: string,
+): boolean {
+  return enabled && smtpHost.trim() !== "" && fromAddress.trim() !== "";
+}
diff --git a/web/src/lib/keyboardShortcut.test.ts b/web/src/lib/keyboardShortcut.test.ts
new file mode 100644
index 000000000..10a098524
--- /dev/null
+++ b/web/src/lib/keyboardShortcut.test.ts
@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { searchShortcutLabel } from "./keyboardShortcut";
+
+function stubUserAgent(value: string) {
+  vi.spyOn(window.navigator, "userAgent", "get").mockReturnValue(value);
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("searchShortcutLabel", () => {
+  it("uses the command glyph on Apple keyboards", () => {
+    stubUserAgent(
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15",
+    );
+    expect(searchShortcutLabel()).toBe("⌘ K");
+
+    stubUserAgent(
+      "Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X) AppleWebKit/605.1.15",
+    );
+    expect(searchShortcutLabel()).toBe("⌘ K");
+  });
+
+  it("spells out Ctrl everywhere else", () => {
+    stubUserAgent(
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
+    );
+    expect(searchShortcutLabel()).toBe("Ctrl K");
+
+    stubUserAgent("Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36");
+    expect(searchShortcutLabel()).toBe("Ctrl K");
+
+    stubUserAgent("Mozilla/5.0 (Linux; Android 14) AppleWebKit/537.36");
+    expect(searchShortcutLabel()).toBe("Ctrl K");
+  });
+});
diff --git a/web/src/lib/keyboardShortcut.ts b/web/src/lib/keyboardShortcut.ts
new file mode 100644
index 000000000..8d2e70268
--- /dev/null
+++ b/web/src/lib/keyboardShortcut.ts
@@ -0,0 +1,15 @@
+/**
+ * How the search shortcut is spelled on this machine: the ⌘ glyph on Apple
+ * keyboards, "Ctrl" everywhere else. Every surface that advertises the
+ * ⌘K / Ctrl-K search shortcut reads it from here, so a Windows or Linux admin
+ * is never told to press a key their keyboard does not have.
+ *
+ * The handlers themselves accept either modifier — this is a label, not the
+ * binding.
+ */
+export function searchShortcutLabel(): string {
+  const isApple =
+    typeof navigator !== "undefined" &&
+    /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+  return isApple ? "⌘ K" : "Ctrl K";
+}
diff --git a/web/src/lib/pluginConfigReady.test.ts b/web/src/lib/pluginConfigReady.test.ts
new file mode 100644
index 000000000..ce59e3c2a
--- /dev/null
+++ b/web/src/lib/pluginConfigReady.test.ts
@@ -0,0 +1,103 @@
+import { describe, expect, it } from "vitest";
+
+import type { PluginInstallation } from "@/api/types";
+
+import { installationConfigReady } from "./pluginConfigReady";
+
+function installation(
+  overrides: Partial<PluginInstallation>,
+): PluginInstallation {
+  return {
+    id: 1,
+    repository_id: 1,
+    plugin_id: "silo.test",
+    version: "1.0.0",
+    install_path: "/plugins/test",
+    enabled: true,
+    source_kind: "silo",
+    updates_paused: false,
+    capabilities: [],
+    global_config_schema: [],
+    user_config_schema: [],
+    routes: [],
+    assets: [],
+    global_configs: [],
+    auth_bindings: [],
+    task_bindings: [],
+    update_policy: "auto",
+    ...overrides,
+  } as PluginInstallation;
+}
+
+const schema = (key: string, required: boolean) => ({
+  key,
+  title: key,
+  json_schema: "{}",
+  required,
+});
+
+describe("installationConfigReady", () => {
+  it("is ready when the plugin declares no configuration", () => {
+    expect(installationConfigReady(installation({}))).toBe(true);
+  });
+
+  it("is not ready when configuration is declared but nothing is saved", () => {
+    expect(
+      installationConfigReady(
+        installation({
+          global_config_schema: [schema("account", true)],
+          global_configs: [],
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it("counts configured secrets as filled", () => {
+    expect(
+      installationConfigReady(
+        installation({
+          global_config_schema: [schema("account", true)],
+          global_configs: [
+            { key: "account", value: {}, configured_secrets: ["api_key"] },
+          ],
+        }),
+      ),
+    ).toBe(true);
+  });
+
+  it("counts a required boolean explicitly saved as false as configured", () => {
+    // `false` is a value the admin deliberately chose; only a blank string is
+    // "no value" (that exclusion keeps a keyless plugin from reading ready).
+    expect(
+      installationConfigReady(
+        installation({
+          global_config_schema: [schema("advanced", true)],
+          global_configs: [
+            {
+              key: "advanced",
+              value: { advanced: false },
+              configured_secrets: [],
+            },
+          ],
+        }),
+      ),
+    ).toBe(true);
+  });
+
+  it("does not count a blank string as a value", () => {
+    expect(
+      installationConfigReady(
+        installation({
+          global_config_schema: [schema("account", true)],
+          global_configs: [
+            {
+              key: "account",
+              value: { api_key: "   " },
+              configured_secrets: [],
+            },
+          ],
+        }),
+      ),
+    ).toBe(false);
+  });
+});
diff --git a/web/src/lib/pluginConfigReady.ts b/web/src/lib/pluginConfigReady.ts
new file mode 100644
index 000000000..319d2c4d6
--- /dev/null
+++ b/web/src/lib/pluginConfigReady.ts
@@ -0,0 +1,42 @@
+import type { PluginInstallation } from "@/api/types";
+
+/**
+ * Whether a plugin installation has the global configuration it asks for.
+ *
+ * Silo never sees a plugin's secrets — they live in the plugin's own runtime
+ * config — but the installation response says which config keys the plugin
+ * declares and which have a value or configured secret saved. That is enough
+ * to stop a provider with no API key from reading as connected, which is the
+ * shared rule for every provider tile backed by a plugin: "Connected" means
+ * the plugin could actually serve a configured request.
+ */
+export function installationConfigReady(
+  installation: PluginInstallation,
+): boolean {
+  const schema = installation.global_config_schema ?? [];
+  if (schema.length === 0) return true;
+
+  const saved = new Map(
+    (installation.global_configs ?? []).map((config) => [config.key, config]),
+  );
+  const filled = (key: string) => {
+    const config = saved.get(key);
+    if (!config) return false;
+    if ((config.configured_secrets ?? []).length > 0) return true;
+    // Any saved non-null value counts — `false` and `0` are values an admin
+    // deliberately chose (a required boolean saved as false is configured).
+    // Only a blank string is excluded: an empty text box is not a value, and
+    // counting it would let a keyless plugin read as connected.
+    return Object.values(config.value ?? {}).some((value) =>
+      typeof value === "string" ? value.trim() !== "" : value != null,
+    );
+  };
+
+  // A plugin that takes configuration and has none saved is not set up, whether
+  // or not it marked a field required — several plugins declare everything
+  // optional and then fail every lookup without a key.
+  if (!schema.some((entry) => filled(entry.key))) return false;
+  return schema
+    .filter((entry) => entry.required)
+    .every((entry) => filled(entry.key));
+}
diff --git a/web/src/lib/queryInvalidation.test.ts b/web/src/lib/queryInvalidation.test.ts
index d9ec7e1b3..e45317155 100644
--- a/web/src/lib/queryInvalidation.test.ts
+++ b/web/src/lib/queryInvalidation.test.ts
@@ -34,12 +34,33 @@ describe("activeSectionQueryMatchesLibrary", () => {
     ).toBe(false);
   });
 
-  it("matches non-library and same-library section queries", () => {
+  it("matches same-library and non-library-scoped section queries", () => {
     expect(
-      activeSectionQueryMatchesLibrary(["sections", "home", "items"], 3),
+      activeSectionQueryMatchesLibrary(["sections", "library", 3, "layout"], 3),
     ).toBe(true);
     expect(
-      activeSectionQueryMatchesLibrary(["sections", "library", 3, "layout"], 3),
+      activeSectionQueryMatchesLibrary(
+        ["sections", "admin", "home", undefined],
+        3,
+      ),
+    ).toBe(true);
+  });
+
+  it("does not match home section queries for a library-scoped event", () => {
+    expect(
+      activeSectionQueryMatchesLibrary(["sections", "home", "layout"], 3),
+    ).toBe(false);
+    expect(
+      activeSectionQueryMatchesLibrary(
+        ["sections", "home", "items", "recent"],
+        3,
+      ),
+    ).toBe(false);
+  });
+
+  it("matches home section queries when the event is not library-scoped", () => {
+    expect(
+      activeSectionQueryMatchesLibrary(["sections", "home", "items", "recent"]),
     ).toBe(true);
   });
 });
diff --git a/web/src/lib/queryInvalidation.ts b/web/src/lib/queryInvalidation.ts
index 1c02690da..86045cd26 100644
--- a/web/src/lib/queryInvalidation.ts
+++ b/web/src/lib/queryInvalidation.ts
@@ -8,12 +8,23 @@ export function activeCatalogQueryMatchesLibrary(
   return params?.library_id == null || params.library_id === libraryId;
 }
 
+/**
+ * Decides whether a `["sections", …]` query belongs to the library an event
+ * changed.
+ *
+ * Home sections are deliberately excluded: they are not library-scoped, so a
+ * scan touching one library used to invalidate every home row on every event.
+ * Home rerenders from cache and refreshes on its next mount, which is cheap;
+ * refetching the whole home layout thousands of times during a scan is not.
+ */
 export function activeSectionQueryMatchesLibrary(
   queryKey: unknown,
   libraryId?: number,
 ) {
   if (!libraryId || !Array.isArray(queryKey)) return true;
-  if (queryKey[0] !== "sections" || queryKey[1] !== "library") return true;
+  if (queryKey[0] !== "sections") return true;
+  if (queryKey[1] === "home") return false;
+  if (queryKey[1] !== "library") return true;
   const queryLibraryId = queryKey[2];
   return queryLibraryId == null || queryLibraryId === libraryId;
 }
diff --git a/web/src/lib/routeChunkPrefetch.test.ts b/web/src/lib/routeChunkPrefetch.test.ts
new file mode 100644
index 000000000..99e88c725
--- /dev/null
+++ b/web/src/lib/routeChunkPrefetch.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  prefetchRouteChunks,
+  type RouteChunkScheduler,
+} from "./routeChunkPrefetch";
+
+/** Collects scheduled tasks so a test drives the idle queue explicitly. */
+function manualScheduler() {
+  const tasks: Array<() => void> = [];
+  let cancelledCount = 0;
+  const schedule: RouteChunkScheduler = (task) => {
+    tasks.push(task);
+    return () => {
+      cancelledCount += 1;
+    };
+  };
+  return {
+    schedule,
+    cancelledCount: () => cancelledCount,
+    pending: () => tasks.length,
+    async runNext() {
+      const task = tasks.shift();
+      task?.();
+      // Let the import promise and its `finally` continuation settle so the
+      // next warm-up is queued before the assertion runs.
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    },
+  };
+}
+
+describe("prefetchRouteChunks", () => {
+  it("warms one chunk per idle window, in order", async () => {
+    const order: string[] = [];
+    const scheduler = manualScheduler();
+
+    prefetchRouteChunks(
+      [
+        () => {
+          order.push("first");
+          return Promise.resolve();
+        },
+        () => {
+          order.push("second");
+          return Promise.resolve();
+        },
+      ],
+      scheduler.schedule,
+    );
+
+    expect(order).toEqual([]);
+
+    await scheduler.runNext();
+    expect(order).toEqual(["first"]);
+
+    await scheduler.runNext();
+    expect(order).toEqual(["first", "second"]);
+    expect(scheduler.pending()).toBe(0);
+  });
+
+  it("continues past a chunk that fails to load", async () => {
+    const second = vi.fn(() => Promise.resolve());
+    const scheduler = manualScheduler();
+
+    prefetchRouteChunks(
+      [() => Promise.reject(new Error("offline")), second],
+      scheduler.schedule,
+    );
+
+    await scheduler.runNext();
+    await scheduler.runNext();
+
+    expect(second).toHaveBeenCalledOnce();
+  });
+
+  it("stops warming after cancellation", async () => {
+    const second = vi.fn(() => Promise.resolve());
+    const scheduler = manualScheduler();
+
+    const cancel = prefetchRouteChunks(
+      [() => Promise.resolve(), second],
+      scheduler.schedule,
+    );
+
+    await scheduler.runNext();
+    expect(scheduler.pending()).toBe(1);
+
+    cancel();
+    await scheduler.runNext();
+
+    expect(second).not.toHaveBeenCalled();
+    expect(scheduler.cancelledCount()).toBe(1);
+  });
+});
diff --git a/web/src/lib/routeChunkPrefetch.ts b/web/src/lib/routeChunkPrefetch.ts
new file mode 100644
index 000000000..f9265c2cf
--- /dev/null
+++ b/web/src/lib/routeChunkPrefetch.ts
@@ -0,0 +1,67 @@
+/**
+ * Idle-time warm-up for the hottest lazy route chunks.
+ *
+ * Code-splitting the routes keeps the bootstrap bundle small, but it also puts
+ * a network round trip in front of the first navigation to each route: the old
+ * page stays frozen (or falls back to the app-level Suspense boundary) while
+ * the chunk downloads. Warming the handful of routes practically every session
+ * reaches keeps the split and removes that stall.
+ *
+ * Chunks are fetched one at a time, each on its own idle callback, so the
+ * warm-up never competes with the first screen's data requests.
+ */
+export type RouteChunkImport = () => Promise<unknown>;
+
+/** Upper bound on how long a warm-up may sit waiting for an idle window. */
+export const ROUTE_CHUNK_IDLE_TIMEOUT_MS = 2_000;
+
+/** Schedules `task` and returns a canceller for it. */
+export type RouteChunkScheduler = (task: () => void) => () => void;
+
+/**
+ * Fetches each import in order, one per idle window. Returns a canceller that
+ * stops the remaining warm-ups; imports already in flight are left alone since
+ * their result lands in the module cache either way.
+ */
+export function prefetchRouteChunks(
+  imports: readonly RouteChunkImport[],
+  schedule: RouteChunkScheduler = scheduleWhenIdle,
+): () => void {
+  let cancelled = false;
+  let cancelPending: (() => void) | null = null;
+
+  const warmFrom = (index: number) => {
+    const load = imports[index];
+    if (cancelled || !load) return;
+    cancelPending = schedule(() => {
+      cancelPending = null;
+      if (cancelled) return;
+      void load()
+        .catch(() => {
+          // A failed warm-up is not an error worth reporting: the route retries
+          // the import on navigation, where React.lazy surfaces the failure to
+          // the error boundary with the user actually waiting on it.
+        })
+        .finally(() => warmFrom(index + 1));
+    });
+  };
+
+  warmFrom(0);
+
+  return () => {
+    cancelled = true;
+    cancelPending?.();
+    cancelPending = null;
+  };
+}
+
+function scheduleWhenIdle(task: () => void): () => void {
+  if (typeof globalThis.requestIdleCallback === "function") {
+    const handle = globalThis.requestIdleCallback(() => task(), {
+      timeout: ROUTE_CHUNK_IDLE_TIMEOUT_MS,
+    });
+    return () => globalThis.cancelIdleCallback?.(handle);
+  }
+  const handle = globalThis.setTimeout(task, ROUTE_CHUNK_IDLE_TIMEOUT_MS);
+  return () => globalThis.clearTimeout(handle);
+}
diff --git a/web/src/lib/settingsConformance.json b/web/src/lib/settingsConformance.json
index 63fb19d7b..bcf2146e1 100644
--- a/web/src/lib/settingsConformance.json
+++ b/web/src/lib/settingsConformance.json
@@ -1,6 +1,6 @@
 {
   "fixture_version": 1,
-  "manifest_revision": 7,
+  "manifest_revision": 8,
   "description": "Cross-platform conformance cases for settings resolution. Every case runs against the shipped manifest in this directory: definitions are referenced by key, never restated, so an expectation can only be satisfied by resolving the real contract. Each platform's resolver (Go in internal/settingsresolve, TypeScript in web/src/lib/settingsResolve.ts, Kotlin and Swift in the client repos) runs every case through a hand-written runner; a runner must fail on any fixture field it does not know, because schema drift in the fixture itself is drift. A case's constraint_bindings attach a constraint to a copy of a real definition so constraint semantics stay testable even while no shipped definition carries that constraint kind. In expected entries, constrained:true requires stored_value and constraint_kind to be present, and stored_value may be null to mean the authored value was JSON null.",
   "cases": [
     {
@@ -733,6 +733,149 @@
           "source": "default"
         }
       ]
+    },
+    {
+      "name": "card_overlays_enabled_profile_opt_out",
+      "description": "A profile that turned its own overlay badges off resolves false at profile scope; the server-wide default is not part of settings resolution.",
+      "keys": ["ui.card_overlays_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [
+        {
+          "key": "ui.card_overlays_enabled",
+          "scope": "profile",
+          "profile_id": "p1",
+          "value": false
+        }
+      ],
+      "expected": [
+        {
+          "key": "ui.card_overlays_enabled",
+          "value": false,
+          "source": "profile"
+        }
+      ]
+    },
+    {
+      "name": "card_overlays_enabled_profile_opt_in",
+      "description": "A profile that turned its own overlay badges on resolves true at profile scope, which is what lets it override a server-wide default of off.",
+      "keys": ["ui.card_overlays_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [
+        {
+          "key": "ui.card_overlays_enabled",
+          "scope": "profile",
+          "profile_id": "p1",
+          "value": true
+        }
+      ],
+      "expected": [
+        {
+          "key": "ui.card_overlays_enabled",
+          "value": true,
+          "source": "profile"
+        }
+      ]
+    },
+    {
+      "name": "card_overlays_absent_express_no_preference",
+      "description": "Nothing stored resolves both card-overlay keys to null with source \"default\", which is what lets the server-wide admin defaults apply.",
+      "keys": ["ui.card_overlays", "ui.card_overlays_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [],
+      "expected": [
+        {
+          "key": "ui.card_overlays",
+          "value": null,
+          "source": "default"
+        },
+        {
+          "key": "ui.card_overlays_enabled",
+          "value": null,
+          "source": "default"
+        }
+      ]
+    },
+    {
+      "name": "card_quick_actions_profile_choice_wins",
+      "description": "A profile that picked favorites-only shortcuts resolves at profile scope instead of falling through to the server-wide default.",
+      "keys": ["ui.card_quick_actions"],
+      "context": { "profile_id": "p1" },
+      "stored": [
+        {
+          "key": "ui.card_quick_actions",
+          "scope": "profile",
+          "profile_id": "p1",
+          "value": "favorites"
+        }
+      ],
+      "expected": [
+        {
+          "key": "ui.card_quick_actions",
+          "value": "favorites",
+          "source": "profile"
+        }
+      ]
+    },
+    {
+      "name": "card_quick_actions_enabled_profile_opt_out",
+      "description": "A profile that turned its own quick actions off resolves false at profile scope; the server-wide default is not part of settings resolution.",
+      "keys": ["ui.card_quick_actions_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [
+        {
+          "key": "ui.card_quick_actions_enabled",
+          "scope": "profile",
+          "profile_id": "p1",
+          "value": false
+        }
+      ],
+      "expected": [
+        {
+          "key": "ui.card_quick_actions_enabled",
+          "value": false,
+          "source": "profile"
+        }
+      ]
+    },
+    {
+      "name": "card_quick_actions_enabled_profile_opt_in",
+      "description": "A profile that turned its own quick actions on resolves true at profile scope, which is what lets it override a server-wide default of off.",
+      "keys": ["ui.card_quick_actions_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [
+        {
+          "key": "ui.card_quick_actions_enabled",
+          "scope": "profile",
+          "profile_id": "p1",
+          "value": true
+        }
+      ],
+      "expected": [
+        {
+          "key": "ui.card_quick_actions_enabled",
+          "value": true,
+          "source": "profile"
+        }
+      ]
+    },
+    {
+      "name": "card_quick_actions_absent_express_no_preference",
+      "description": "Nothing stored resolves both quick-action keys to null with source \"default\", which is what lets the server-wide admin defaults apply.",
+      "keys": ["ui.card_quick_actions", "ui.card_quick_actions_enabled"],
+      "context": { "profile_id": "p1" },
+      "stored": [],
+      "expected": [
+        {
+          "key": "ui.card_quick_actions",
+          "value": null,
+          "source": "default"
+        },
+        {
+          "key": "ui.card_quick_actions_enabled",
+          "value": null,
+          "source": "default"
+        }
+      ]
     }
   ]
 }
diff --git a/web/src/lib/settingsContract.ts b/web/src/lib/settingsContract.ts
index d3404a36e..859742445 100644
--- a/web/src/lib/settingsContract.ts
+++ b/web/src/lib/settingsContract.ts
@@ -9,7 +9,7 @@
  */
 
 export const SETTINGS_API_VERSION = 1;
-export const SETTINGS_REVISION = 7;
+export const SETTINGS_REVISION = 8;
 
 export interface SettingSuggestedOption {
   value: string;
@@ -231,8 +231,14 @@ export const SETTING_KEYS = {
   SUBTITLE_MATCHES_DEVICE: "subtitle.matches_device",
   /** Poster badges */
   UI_CARD_OVERLAYS: "ui.card_overlays",
+  /** Card overlays enabled */
+  UI_CARD_OVERLAYS_ENABLED: "ui.card_overlays_enabled",
   /** Media cards */
   UI_CARD_PRESENTATION: "ui.card_presentation",
+  /** Card quick actions */
+  UI_CARD_QUICK_ACTIONS: "ui.card_quick_actions",
+  /** Card quick actions enabled */
+  UI_CARD_QUICK_ACTIONS_ENABLED: "ui.card_quick_actions_enabled",
   /** Custom CSS */
   UI_CUSTOM_CSS: "ui.custom_css",
   /** Custom theme variables */
@@ -1040,6 +1046,22 @@ export const SETTING_DEFINITIONS: Record<SettingKey, SettingDefinition> = {
     category: "appearance",
     platforms: ["web", "ios", "tvos", "macos", "android", "android_tv"],
   },
+  "ui.card_overlays_enabled": {
+    key: "ui.card_overlays_enabled",
+    type: "boolean",
+    nullable: true,
+    persistence: "remote",
+    introducedIn: 8,
+    scopes: ["profile"],
+    scopeIntroducedIn: [8],
+    resolutionOrder: ["profile", "default"],
+    defaultValue: null,
+    label: "Card overlays enabled",
+    description: "Show overlay badges on media cards.",
+    category: "appearance",
+    control: "switch",
+    platforms: ["web"],
+  },
   "ui.card_presentation": {
     key: "ui.card_presentation",
     type: "object",
@@ -1056,6 +1078,44 @@ export const SETTING_DEFINITIONS: Record<SettingKey, SettingDefinition> = {
     control: "panel",
     platforms: ["web", "ios", "tvos", "macos", "android", "android_tv"],
   },
+  "ui.card_quick_actions": {
+    key: "ui.card_quick_actions",
+    type: "enum",
+    nullable: true,
+    persistence: "remote",
+    introducedIn: 8,
+    scopes: ["profile"],
+    scopeIntroducedIn: [8],
+    resolutionOrder: ["profile", "default"],
+    defaultValue: null,
+    label: "Card quick actions",
+    description: "Which favorite and watched shortcuts appear on media cards.",
+    category: "appearance",
+    control: "select",
+    platforms: ["web"],
+    values: [
+      { value: "both", label: "Both", introducedIn: 8 },
+      { value: "favorites", label: "Favorites only", introducedIn: 8 },
+      { value: "watched", label: "Watch indicator only", introducedIn: 8 },
+    ],
+  },
+  "ui.card_quick_actions_enabled": {
+    key: "ui.card_quick_actions_enabled",
+    type: "boolean",
+    nullable: true,
+    persistence: "remote",
+    introducedIn: 8,
+    scopes: ["profile"],
+    scopeIntroducedIn: [8],
+    resolutionOrder: ["profile", "default"],
+    defaultValue: null,
+    label: "Card quick actions enabled",
+    description:
+      "Show the selected favorite and watched shortcuts on media cards.",
+    category: "appearance",
+    control: "switch",
+    platforms: ["web"],
+  },
   "ui.custom_css": {
     key: "ui.custom_css",
     type: "string",
diff --git a/web/src/lib/uiCustomization.ts b/web/src/lib/uiCustomization.ts
index dc83582f0..fe79c7fdc 100644
--- a/web/src/lib/uiCustomization.ts
+++ b/web/src/lib/uiCustomization.ts
@@ -314,6 +314,24 @@ export function carouselCardWidthClasses(size: PosterSize): string {
   }
 }
 
+/**
+ * Placeholder height for an off-screen carousel row rendered under
+ * content-visibility: the row header plus a 2:3 poster at this size's card
+ * width plus the tallest caption. Kept beside carouselCardWidthClasses so a
+ * card-size change updates both; underestimating makes the scrollbar jump as
+ * rows render on approach.
+ */
+export function carouselIntrinsicHeight(size: PosterSize): string {
+  switch (size) {
+    case "compact":
+      return "21rem";
+    case "large":
+      return "27rem";
+    default:
+      return "23rem";
+  }
+}
+
 export function cardTextAreaHeight(caption: CardCaption): number {
   if (caption === "artwork") return 0;
   return caption === "title" ? 28 : 44;
diff --git a/web/src/pages/AdminAutoscan.tsx b/web/src/pages/AdminAutoscan.tsx
index 721d1a3fb..e52c76ad8 100644
--- a/web/src/pages/AdminAutoscan.tsx
+++ b/web/src/pages/AdminAutoscan.tsx
@@ -16,31 +16,10 @@ import {
 import ConnectionsPanel from "@/pages/admin/autoscan/ConnectionsPanel";
 import ActivityPanel from "@/pages/admin/autoscan/ActivityPanel";
 import SourcesPanel from "@/pages/admin/autoscan/SourcesPanel";
-
-// ---------------------------------------------------------------------------
-// Tab routing helpers
-// ---------------------------------------------------------------------------
-
-const AUTOSCAN_TABS = ["sources", "activity"] as const;
-type AutoscanTab = (typeof AUTOSCAN_TABS)[number];
-
-/**
- * Connections and settings used to be peer tabs, which read as "set these up
- * first" — most operators never needed either. They now live in an Advanced
- * section on the Sources view, so their old deep links land on Sources with
- * that section already open rather than 404-ing into a missing tab.
- */
-const LEGACY_ADVANCED_TABS = new Set(["connections", "settings"]);
-
-function normalizeTab(value: string | null): AutoscanTab {
-  return AUTOSCAN_TABS.includes(value as AutoscanTab)
-    ? (value as AutoscanTab)
-    : "sources";
-}
-
-function isLegacyAdvancedTab(value: string | null): boolean {
-  return value !== null && LEGACY_ADVANCED_TABS.has(value);
-}
+import {
+  isLegacyAdvancedTab,
+  normalizeTab,
+} from "@/pages/autoscanSearchParams";
 
 // ---------------------------------------------------------------------------
 // Settings tab
@@ -140,9 +119,21 @@ function SettingsTab() {
 // Page
 // ---------------------------------------------------------------------------
 
-export default function AdminAutoscan() {
+interface AdminAutoscanProps {
+  /**
+   * Rendered inside the Libraries page rather than as its own route. The
+   * heading drops to an h2 and the Sources/Activity selection moves to `view`,
+   * because `tab` already names the Libraries tab that hosts this panel.
+   */
+  embedded?: boolean;
+}
+
+export default function AdminAutoscan({
+  embedded = false,
+}: AdminAutoscanProps = {}) {
   const [searchParams, setSearchParams] = useSearchParams();
-  const requestedTab = searchParams.get("tab");
+  const tabParam = embedded ? "view" : "tab";
+  const requestedTab = searchParams.get(tabParam);
   const activeTab = normalizeTab(requestedTab);
   const trigger = useTriggerAutoscan();
   const settings = useAutoscanSettings();
@@ -164,9 +155,9 @@ export default function AdminAutoscan() {
   function setActiveTab(value: string) {
     const next = new URLSearchParams(searchParams);
     if (value === "sources") {
-      next.delete("tab");
+      next.delete(tabParam);
     } else {
-      next.set("tab", value);
+      next.set(tabParam, value);
     }
     setSearchParams(next, { replace: true });
   }
@@ -176,7 +167,13 @@ export default function AdminAutoscan() {
       <div className="page-header">
         <div className="space-y-2">
           <div className="flex items-center gap-2.5">
-            <h1 className="page-title text-[clamp(2rem,4vw,3rem)]">Autoscan</h1>
+            {embedded ? (
+              <h2 className="text-xl font-semibold tracking-tight">Autoscan</h2>
+            ) : (
+              <h1 className="text-3xl font-semibold tracking-normal text-balance sm:text-4xl">
+                Autoscan
+              </h1>
+            )}
             {settings.data &&
               (enabled ? (
                 <Badge variant="secondary">Enabled</Badge>
@@ -187,7 +184,7 @@ export default function AdminAutoscan() {
               ))}
           </div>
           <p className="text-muted-foreground max-w-2xl text-sm leading-6">
-            Prairie re-scans a library as soon as something changes, instead of
+            Silo re-scans a library as soon as something changes, instead of
             waiting for the next scheduled scan. Add a source for each thing you
             want watched.
           </p>
diff --git a/web/src/pages/AdminDashboard.tsx b/web/src/pages/AdminDashboard.tsx
index 56a7ce8c4..eb5766508 100644
--- a/web/src/pages/AdminDashboard.tsx
+++ b/web/src/pages/AdminDashboard.tsx
@@ -2,15 +2,12 @@ import type { ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router";
 import { AdminSessionActions } from "@/components/AdminSessionActions";
-import { AdminSectionCommandDialog } from "@/components/AdminSectionCommandDialog";
 import { useEventChannel } from "@/components/realtimeEventsContext";
 import {
   fetchAdminStats,
   useAdminStats,
   useAdminSessions,
 } from "@/hooks/queries/admin/stats";
-import { useAdminPluginInstallations } from "@/hooks/queries/admin/plugins";
-import { usePolicyCapability } from "@/hooks/queries/admin/policy";
 import { useAdminUsers } from "@/hooks/queries/admin/users";
 import {
   useAdminLibraries,
@@ -56,7 +53,6 @@ import { useQueryClient } from "@tanstack/react-query";
 import { adminKeys } from "@/hooks/queries/keys";
 import { usePageActivity } from "@/hooks/usePageActivity";
 import { cn } from "@/lib/utils";
-import { buildAdminCommandNavSections } from "@/lib/adminNavigation";
 import {
   compareActiveScans,
   formatActiveScanMode,
@@ -102,8 +98,6 @@ export default function AdminDashboard() {
   const sessionsQuery = useAdminSessions();
   const librariesQuery = useAdminLibraries();
   const usersQuery = useAdminUsers();
-  const { data: adminInstallations } = useAdminPluginInstallations();
-  const policyCapability = usePolicyCapability();
   const scanAll = useScanAllLibraries();
   const pageActivity = usePageActivity();
   const manualRefreshStartedAtRef = useRef<number | null>(null);
@@ -141,13 +135,6 @@ export default function AdminDashboard() {
   const lastUpdatedLabel = lastDashboardUpdatedAt
     ? formatRelativeUpdatedLabel(relativeUpdatedNow, lastDashboardUpdatedAt)
     : null;
-  const adminSearchSections = useMemo(
-    () =>
-      buildAdminCommandNavSections(adminInstallations, {
-        policyEditorAvailable: policyCapability.data?.editor_available === true,
-      }),
-    [adminInstallations, policyCapability.data?.editor_available],
-  );
 
   useEffect(() => {
     if (!lastDashboardUpdatedAt) {
@@ -268,8 +255,6 @@ export default function AdminDashboard() {
 
   return (
     <div className="space-y-6 lg:space-y-8">
-      <AdminSectionCommandDialog sections={adminSearchSections} />
-
       {/* Page header */}
       <div className="page-header">
         <div className="space-y-3">
diff --git a/web/src/pages/AdminDevices.tsx b/web/src/pages/AdminDevices.tsx
index 88422c3f5..c3f54fdde 100644
--- a/web/src/pages/AdminDevices.tsx
+++ b/web/src/pages/AdminDevices.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useMemo, useState, type ReactNode } from "react";
 import { Link, useParams, useSearchParams } from "react-router";
 import {
   Activity,
@@ -249,20 +249,6 @@ export default function AdminDevices() {
   const [groupBy, setGroupBy] = useState<GroupBy>("user");
   const [overridesOnly, setOverridesOnly] = useState(false);
 
-  // ⌘K focuses the global search input
-  const searchRef = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
-        e.preventDefault();
-        searchRef.current?.focus();
-        searchRef.current?.select();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, []);
-
   // anomaly detection
   const anomalies = useMemo(() => detectAnomalies(devices), [devices]);
   const scopedDevices = useMemo(
@@ -446,15 +432,14 @@ export default function AdminDevices() {
             <kbd className="bg-surface/70 border-border/70 text-foreground/80 inline-flex items-center rounded border px-1.5 py-0.5 font-mono text-[10.5px]">
               ⌘K
             </kbd>{" "}
-            to jump.
+            to jump to another admin page.
           </p>
         </div>
 
         <div className="relative w-full sm:w-[340px]">
           <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
           <Input
-            ref={searchRef}
-            className="bg-background/60 h-9 pr-14 pl-9 text-[13px]"
+            className="bg-background/60 h-9 pr-9 pl-9 text-[13px]"
             placeholder="Search devices, users, IDs, profiles…"
             value={search}
             onChange={(event) => setSearch(event.target.value)}
@@ -468,11 +453,7 @@ export default function AdminDevices() {
             >
               <X className="h-3.5 w-3.5" />
             </button>
-          ) : (
-            <kbd className="border-border/70 text-muted-foreground absolute top-1/2 right-2.5 -translate-y-1/2 rounded border px-1.5 py-0.5 font-mono text-[10px]">
-              ⌘K
-            </kbd>
-          )}
+          ) : null}
         </div>
       </div>
 
diff --git a/web/src/pages/AdminLibraries.tsx b/web/src/pages/AdminLibraries.tsx
index 7642c4478..cb3e4cffa 100644
--- a/web/src/pages/AdminLibraries.tsx
+++ b/web/src/pages/AdminLibraries.tsx
@@ -75,7 +75,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Link } from "react-router";
+import { Link, useSearchParams } from "react-router";
 import {
   Plus,
   Pencil,
@@ -99,6 +99,8 @@ import {
   Search,
   FolderOpen,
 } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import AdminAutoscan from "@/pages/AdminAutoscan";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
@@ -145,8 +147,33 @@ const EMPTY_ROOT_WARNING_TEXT =
 const EMPTY_ROOT_WARNING_HINT =
   "Run another scan after storage returns, or confirm deletion before the next empty-root scan.";
 
+const LIBRARY_TABS = ["libraries", "autoscan"] as const;
+type LibraryTab = (typeof LIBRARY_TABS)[number];
+
 export default function AdminLibraries() {
   useEventChannel("scans");
+  // Autoscan used to be its own sidebar page even though it only ever
+  // configured how these libraries get scanned; it is a tab here now, and
+  // /admin/autoscan redirects to it.
+  const [searchParams, setSearchParams] = useSearchParams();
+  const requestedTab = searchParams.get("tab");
+  const activeTab: LibraryTab = LIBRARY_TABS.includes(
+    requestedTab as LibraryTab,
+  )
+    ? (requestedTab as LibraryTab)
+    : "libraries";
+
+  function setActiveTab(value: string) {
+    const next = new URLSearchParams(searchParams);
+    if (value === "libraries") {
+      next.delete("tab");
+      next.delete("view");
+    } else {
+      next.set("tab", value);
+    }
+    setSearchParams(next, { replace: true });
+  }
+
   const { data: libraries = [], isLoading } = useAdminLibraries();
   const { data: activeScans = [] } = useActiveScans();
   const { data: libraryRefreshJobs = [] } = useLibraryRefreshJobs();
@@ -325,7 +352,8 @@ export default function AdminLibraries() {
     });
   }
 
-  if (isLoading) return <div className="p-8">Loading libraries...</div>;
+  if (isLoading && activeTab === "libraries")
+    return <div className="p-8">Loading libraries...</div>;
 
   return (
     <div className="space-y-6">
@@ -366,7 +394,9 @@ export default function AdminLibraries() {
             under Maintenance.
           </p>
         </div>
-        <div className="flex gap-2">
+        <div
+          className={cn("flex gap-2", activeTab !== "libraries" && "hidden")}
+        >
           {activeScanGroups.length > 0 && (
             <ScanQueuePopover
               groups={activeScanGroups}
@@ -423,413 +453,440 @@ export default function AdminLibraries() {
         </div>
       </div>
 
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragStart={handleDragStart}
-        onDragEnd={handleDragEnd}
-        onDragCancel={handleDragCancel}
-      >
-        <div className="surface-panel overflow-x-auto rounded-2xl border-0">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-10" />
-                <TableHead>Name</TableHead>
-                <TableHead>Paths</TableHead>
-                <TableHead>Type</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Last Scanned</TableHead>
-                <TableHead className="w-[15rem]">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <SortableContext
-              items={orderedLibraries.map((l) => l.id)}
-              strategy={verticalListSortingStrategy}
-            >
-              <TableBody>
-                {orderedLibraries.map((lib) => {
-                  const isScanning =
-                    scanMutation.isPending && scanMutation.variables === lib.id;
-                  const activeRefreshJob = activeRefreshJobsByLibraryId.get(
-                    lib.id,
-                  );
-                  const activeLibraryScans =
-                    activeScansByLibraryId.get(lib.id) ?? [];
-                  const runningLibraryScans = activeLibraryScans.filter(
-                    (scan) => scan.status === "running",
-                  ).length;
-                  const queuedLibraryScans =
-                    activeLibraryScans.length - runningLibraryScans;
-                  const isRefreshStarting =
-                    refreshMutation.isPending &&
-                    refreshMutation.variables === lib.id;
-                  const isCheckingMount =
-                    mountCheckMutation.isPending &&
-                    mountCheckMutation.variables === lib.id;
-                  const mountCheck = lastMountCheckByLibraryId[lib.id];
-                  const hasActiveWork =
-                    activeRefreshJob !== undefined ||
-                    activeLibraryScans.length > 0;
-                  const isCancellingLibraryScans =
-                    cancelScansMutation.isPending &&
-                    cancelScansMutation.variables === lib.id;
-                  const isCancellingRefreshJob =
-                    activeRefreshJob !== undefined &&
-                    cancelAdminJobMutation.isPending &&
-                    cancelAdminJobMutation.variables === activeRefreshJob.id;
-                  return (
-                    <Fragment key={lib.id}>
-                      <SortableLibraryRow id={lib.id}>
-                        <TableCell className="font-medium">
-                          {lib.name}
-                        </TableCell>
-                        <TableCell className="font-mono text-xs">
-                          {lib.paths.length === 1 ? (
-                            <span className="text-muted-foreground">
-                              {lib.paths[0]}
-                            </span>
-                          ) : (
-                            <button
-                              type="button"
-                              className="text-muted-foreground hover:text-foreground text-left transition-colors"
-                              onClick={() => {
-                                setEditingLib(lib);
-                                setDialogOpen(true);
-                              }}
-                            >
-                              {lib.paths.length} folders
-                            </button>
-                          )}
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="secondary">{lib.type}</Badge>
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex flex-col gap-1">
-                            <Badge
-                              variant={lib.enabled ? "outline" : "destructive"}
-                            >
-                              {lib.enabled ? "Enabled" : "Disabled"}
-                            </Badge>
-                            {runningLibraryScans > 0 ? (
-                              <Badge variant="secondary">
-                                {runningLibraryScans} running
-                              </Badge>
-                            ) : null}
-                            {queuedLibraryScans > 0 ? (
-                              <Badge variant="secondary">
-                                {queuedLibraryScans} queued
-                              </Badge>
-                            ) : null}
-                            {lib.scan_warning_code === "empty_root" ? (
-                              <Badge variant="destructive">
-                                Empty root guarded
-                              </Badge>
-                            ) : null}
-                            {lib.scan_warning_code === "dead_root" ? (
-                              <Badge variant="destructive">
-                                Root unreachable
-                              </Badge>
-                            ) : null}
-                          </div>
-                        </TableCell>
-                        <TableCell className="text-muted-foreground text-xs">
-                          <div className="space-y-1">
-                            <div>
-                              {lib.last_scanned_at
-                                ? formatDateTime(lib.last_scanned_at)
-                                : "Never"}
-                            </div>
-                            {lib.scan_warning_at ? (
-                              <div className="text-destructive text-[11px]">
-                                Warning: {formatDateTime(lib.scan_warning_at)}
-                              </div>
-                            ) : null}
-                          </div>
-                        </TableCell>
-                        <TableCell className="w-[15rem] align-middle">
-                          <div className="flex flex-nowrap items-center justify-end gap-1">
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className={cn(
-                                "h-7 w-7",
-                                activeLibraryScans.length > 0 &&
-                                  "text-destructive",
-                              )}
-                              title={
-                                activeLibraryScans.length > 0
-                                  ? "Stop Library Scans"
-                                  : "Scan Library"
-                              }
-                              aria-label={
-                                activeLibraryScans.length > 0
-                                  ? "Stop Library Scans"
-                                  : "Scan Library"
-                              }
-                              disabled={
-                                activeLibraryScans.length > 0
-                                  ? isCancellingLibraryScans
-                                  : isScanning
-                              }
-                              onClick={() => {
-                                if (activeLibraryScans.length > 0) {
-                                  cancelScansMutation.mutate(lib.id);
-                                  return;
-                                }
-                                scanMutation.mutate(lib.id);
-                              }}
-                            >
-                              {activeLibraryScans.length > 0 ? (
-                                <Square className="h-3 w-3 fill-current" />
-                              ) : (
-                                <RefreshCw
-                                  className={`h-3 w-3 ${isScanning ? "animate-spin" : ""}`}
-                                />
-                              )}
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className={cn(
-                                "h-7 w-7",
-                                activeRefreshJob && "text-destructive",
-                              )}
-                              title={
-                                activeRefreshJob
-                                  ? "Stop Metadata Refresh"
-                                  : "Rescan Metadata"
-                              }
-                              aria-label={
-                                activeRefreshJob
-                                  ? "Stop Metadata Refresh"
-                                  : "Rescan Metadata"
-                              }
-                              disabled={
-                                activeRefreshJob
-                                  ? isCancellingRefreshJob
-                                  : isRefreshStarting
-                              }
-                              onClick={() => {
-                                if (activeRefreshJob) {
-                                  cancelAdminJobMutation.mutate(
-                                    activeRefreshJob.id,
-                                  );
-                                  return;
-                                }
-                                refreshMutation.mutate(lib.id);
-                              }}
-                            >
-                              {activeRefreshJob ? (
-                                <Square className="h-3 w-3 fill-current" />
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="gap-6">
+        <TabsList
+          variant="line"
+          className="border-border w-full justify-start border-b"
+        >
+          <TabsTrigger value="libraries">Libraries</TabsTrigger>
+          <TabsTrigger value="autoscan">Autoscan</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="libraries" className="space-y-6">
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+            onDragCancel={handleDragCancel}
+          >
+            <div className="surface-panel overflow-x-auto rounded-2xl border-0">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-10" />
+                    <TableHead>Name</TableHead>
+                    <TableHead>Paths</TableHead>
+                    <TableHead>Type</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Last Scanned</TableHead>
+                    <TableHead className="w-[15rem]">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <SortableContext
+                  items={orderedLibraries.map((l) => l.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <TableBody>
+                    {orderedLibraries.map((lib) => {
+                      const isScanning =
+                        scanMutation.isPending &&
+                        scanMutation.variables === lib.id;
+                      const activeRefreshJob = activeRefreshJobsByLibraryId.get(
+                        lib.id,
+                      );
+                      const activeLibraryScans =
+                        activeScansByLibraryId.get(lib.id) ?? [];
+                      const runningLibraryScans = activeLibraryScans.filter(
+                        (scan) => scan.status === "running",
+                      ).length;
+                      const queuedLibraryScans =
+                        activeLibraryScans.length - runningLibraryScans;
+                      const isRefreshStarting =
+                        refreshMutation.isPending &&
+                        refreshMutation.variables === lib.id;
+                      const isCheckingMount =
+                        mountCheckMutation.isPending &&
+                        mountCheckMutation.variables === lib.id;
+                      const mountCheck = lastMountCheckByLibraryId[lib.id];
+                      const hasActiveWork =
+                        activeRefreshJob !== undefined ||
+                        activeLibraryScans.length > 0;
+                      const isCancellingLibraryScans =
+                        cancelScansMutation.isPending &&
+                        cancelScansMutation.variables === lib.id;
+                      const isCancellingRefreshJob =
+                        activeRefreshJob !== undefined &&
+                        cancelAdminJobMutation.isPending &&
+                        cancelAdminJobMutation.variables ===
+                          activeRefreshJob.id;
+                      return (
+                        <Fragment key={lib.id}>
+                          <SortableLibraryRow id={lib.id}>
+                            <TableCell className="font-medium">
+                              {lib.name}
+                            </TableCell>
+                            <TableCell className="font-mono text-xs">
+                              {lib.paths.length === 1 ? (
+                                <span className="text-muted-foreground">
+                                  {lib.paths[0]}
+                                </span>
                               ) : (
-                                <DatabaseBackup className="h-3 w-3" />
+                                <button
+                                  type="button"
+                                  className="text-muted-foreground hover:text-foreground text-left transition-colors"
+                                  onClick={() => {
+                                    setEditingLib(lib);
+                                    setDialogOpen(true);
+                                  }}
+                                >
+                                  {lib.paths.length} folders
+                                </button>
                               )}
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-7 w-7"
-                              title={
-                                mountCheck
-                                  ? formatMountCheckMessage(mountCheck)
-                                  : "Verify Mounts"
-                              }
-                              aria-label={
-                                mountCheck
-                                  ? formatMountCheckMessage(mountCheck)
-                                  : "Verify Mounts"
-                              }
-                              disabled={isCheckingMount}
-                              onClick={() => handleMountCheck(lib.id)}
-                            >
-                              <MountCheckButtonIcon
-                                pending={isCheckingMount}
-                                result={mountCheck}
-                              />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-7 w-7"
-                              aria-label={`Edit ${lib.name}`}
-                              onClick={() => {
-                                setEditingLib(lib);
-                                setDialogOpen(true);
-                              }}
-                            >
-                              <Pencil className="h-3 w-3" aria-hidden="true" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-7 w-7"
-                              aria-label={`Delete ${lib.name}`}
-                              onClick={() => handleDelete(lib)}
-                            >
-                              <Trash2 className="h-3 w-3" aria-hidden="true" />
-                            </Button>
-                            {lib.scan_warning_code === "empty_root" ||
-                            lib.scan_warning_code === "dead_root" ? (
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="text-destructive h-7 w-7"
-                                title="Confirm cleanup for missing or empty roots"
-                                disabled={
-                                  confirmEmptyRootCleanupMutation.isPending &&
-                                  confirmEmptyRootCleanupMutation.variables ===
-                                    lib.id
-                                }
-                                onClick={() =>
-                                  handleConfirmEmptyRootCleanup(lib)
-                                }
-                              >
-                                <Trash2 className="h-3 w-3" />
-                              </Button>
-                            ) : null}
-                          </div>
-                        </TableCell>
-                      </SortableLibraryRow>
-                      {hasActiveWork ? (
-                        <LibraryActiveWorkRow
-                          activeLibraryScans={activeLibraryScans}
-                          activeRefreshJob={activeRefreshJob}
-                          cancellingJobID={
-                            cancelAdminJobMutation.isPending
-                              ? cancelAdminJobMutation.variables
-                              : undefined
-                          }
-                          cancellingLibraryID={
-                            cancelScansMutation.isPending
-                              ? cancelScansMutation.variables
-                              : undefined
-                          }
-                          libraryID={lib.id}
-                          onCancelJob={(jobID) =>
-                            cancelAdminJobMutation.mutate(jobID)
-                          }
-                          onCancelScans={(libraryID) =>
-                            cancelScansMutation.mutate(libraryID)
-                          }
-                        />
-                      ) : null}
-                    </Fragment>
-                  );
-                })}
-                {orderedLibraries
-                  .filter(
-                    (lib) =>
-                      lib.scan_warning_code === "empty_root" ||
-                      lib.scan_warning_code === "dead_root",
-                  )
-                  .map((lib) => {
-                    const mountCheck = lastMountCheckByLibraryId[lib.id];
-                    const isCheckingMount =
-                      mountCheckMutation.isPending &&
-                      mountCheckMutation.variables === lib.id;
-                    return (
-                      <TableRow key={`${lib.id}-warning`}>
-                        <TableCell
-                          colSpan={7}
-                          className="bg-destructive/5 text-sm"
-                        >
-                          <div className="flex flex-col gap-2 py-1">
-                            <div className="text-destructive font-medium">
-                              {lib.scan_warning_code === "dead_root"
-                                ? DEAD_ROOT_WARNING_TEXT
-                                : EMPTY_ROOT_WARNING_TEXT}
-                            </div>
-                            <div className="text-muted-foreground">
-                              {lib.scan_warning_message ??
-                                (lib.scan_warning_code === "dead_root"
-                                  ? DEAD_ROOT_WARNING_HINT
-                                  : EMPTY_ROOT_WARNING_HINT)}
-                            </div>
-                            <div className="flex gap-2">
-                              <Button
-                                variant="outline"
-                                size="sm"
-                                title={
-                                  mountCheck
-                                    ? formatMountCheckMessage(mountCheck)
-                                    : "Check mount"
-                                }
-                                disabled={isCheckingMount}
-                                onClick={() => handleMountCheck(lib.id)}
-                              >
-                                <MountCheckButtonIcon
-                                  className="mr-1 h-3.5 w-3.5"
-                                  pending={isCheckingMount}
-                                  result={mountCheck}
-                                />
-                                Check Mount
-                              </Button>
-                              {lib.scan_warning_code === "dead_root" ? (
+                            </TableCell>
+                            <TableCell>
+                              <Badge variant="secondary">{lib.type}</Badge>
+                            </TableCell>
+                            <TableCell>
+                              <div className="flex flex-col gap-1">
+                                <Badge
+                                  variant={
+                                    lib.enabled ? "outline" : "destructive"
+                                  }
+                                >
+                                  {lib.enabled ? "Enabled" : "Disabled"}
+                                </Badge>
+                                {runningLibraryScans > 0 ? (
+                                  <Badge variant="secondary">
+                                    {runningLibraryScans} running
+                                  </Badge>
+                                ) : null}
+                                {queuedLibraryScans > 0 ? (
+                                  <Badge variant="secondary">
+                                    {queuedLibraryScans} queued
+                                  </Badge>
+                                ) : null}
+                                {lib.scan_warning_code === "empty_root" ? (
+                                  <Badge variant="destructive">
+                                    Empty root guarded
+                                  </Badge>
+                                ) : null}
+                                {lib.scan_warning_code === "dead_root" ? (
+                                  <Badge variant="destructive">
+                                    Root unreachable
+                                  </Badge>
+                                ) : null}
+                              </div>
+                            </TableCell>
+                            <TableCell className="text-muted-foreground text-xs">
+                              <div className="space-y-1">
+                                <div>
+                                  {lib.last_scanned_at
+                                    ? formatDateTime(lib.last_scanned_at)
+                                    : "Never"}
+                                </div>
+                                {lib.scan_warning_at ? (
+                                  <div className="text-destructive text-[11px]">
+                                    Warning:{" "}
+                                    {formatDateTime(lib.scan_warning_at)}
+                                  </div>
+                                ) : null}
+                              </div>
+                            </TableCell>
+                            <TableCell className="w-[15rem] align-middle">
+                              <div className="flex flex-nowrap items-center justify-end gap-1">
                                 <Button
-                                  variant="outline"
-                                  size="sm"
-                                  title="Confirm cleanup for missing or empty roots"
+                                  variant="ghost"
+                                  size="icon"
+                                  className={cn(
+                                    "h-7 w-7",
+                                    activeLibraryScans.length > 0 &&
+                                      "text-destructive",
+                                  )}
+                                  title={
+                                    activeLibraryScans.length > 0
+                                      ? "Stop Library Scans"
+                                      : "Scan Library"
+                                  }
+                                  aria-label={
+                                    activeLibraryScans.length > 0
+                                      ? "Stop Library Scans"
+                                      : "Scan Library"
+                                  }
                                   disabled={
-                                    confirmEmptyRootCleanupMutation.isPending &&
-                                    confirmEmptyRootCleanupMutation.variables ===
-                                      lib.id
+                                    activeLibraryScans.length > 0
+                                      ? isCancellingLibraryScans
+                                      : isScanning
+                                  }
+                                  onClick={() => {
+                                    if (activeLibraryScans.length > 0) {
+                                      cancelScansMutation.mutate(lib.id);
+                                      return;
+                                    }
+                                    scanMutation.mutate(lib.id);
+                                  }}
+                                >
+                                  {activeLibraryScans.length > 0 ? (
+                                    <Square className="h-3 w-3 fill-current" />
+                                  ) : (
+                                    <RefreshCw
+                                      className={`h-3 w-3 ${isScanning ? "animate-spin" : ""}`}
+                                    />
+                                  )}
+                                </Button>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className={cn(
+                                    "h-7 w-7",
+                                    activeRefreshJob && "text-destructive",
+                                  )}
+                                  title={
+                                    activeRefreshJob
+                                      ? "Stop Metadata Refresh"
+                                      : "Rescan Metadata"
                                   }
-                                  onClick={() =>
-                                    handleConfirmEmptyRootCleanup(lib)
+                                  aria-label={
+                                    activeRefreshJob
+                                      ? "Stop Metadata Refresh"
+                                      : "Rescan Metadata"
                                   }
+                                  disabled={
+                                    activeRefreshJob
+                                      ? isCancellingRefreshJob
+                                      : isRefreshStarting
+                                  }
+                                  onClick={() => {
+                                    if (activeRefreshJob) {
+                                      cancelAdminJobMutation.mutate(
+                                        activeRefreshJob.id,
+                                      );
+                                      return;
+                                    }
+                                    refreshMutation.mutate(lib.id);
+                                  }}
                                 >
-                                  <Trash2 className="mr-1 h-3.5 w-3.5" />
-                                  Confirm Cleanup
+                                  {activeRefreshJob ? (
+                                    <Square className="h-3 w-3 fill-current" />
+                                  ) : (
+                                    <DatabaseBackup className="h-3 w-3" />
+                                  )}
                                 </Button>
-                              ) : null}
-                            </div>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })}
-              </TableBody>
-            </SortableContext>
-          </Table>
-        </div>
-        <DragOverlay>
-          {activeLibrary ? (
-            <Table>
-              <TableBody>
-                <TableRow className="bg-background shadow-lg">
-                  <TableCell className="w-10">
-                    <GripVertical className="text-muted-foreground h-4 w-4" />
-                  </TableCell>
-                  <TableCell className="font-medium">
-                    {activeLibrary.name}
-                  </TableCell>
-                  <TableCell className="text-muted-foreground font-mono text-xs">
-                    {activeLibrary.paths.length === 1
-                      ? activeLibrary.paths[0]
-                      : `${activeLibrary.paths.length} folders`}
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="secondary">{activeLibrary.type}</Badge>
-                  </TableCell>
-                  <TableCell />
-                  <TableCell />
-                  <TableCell />
-                </TableRow>
-              </TableBody>
-            </Table>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7"
+                                  title={
+                                    mountCheck
+                                      ? formatMountCheckMessage(mountCheck)
+                                      : "Verify Mounts"
+                                  }
+                                  aria-label={
+                                    mountCheck
+                                      ? formatMountCheckMessage(mountCheck)
+                                      : "Verify Mounts"
+                                  }
+                                  disabled={isCheckingMount}
+                                  onClick={() => handleMountCheck(lib.id)}
+                                >
+                                  <MountCheckButtonIcon
+                                    pending={isCheckingMount}
+                                    result={mountCheck}
+                                  />
+                                </Button>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7"
+                                  aria-label={`Edit ${lib.name}`}
+                                  onClick={() => {
+                                    setEditingLib(lib);
+                                    setDialogOpen(true);
+                                  }}
+                                >
+                                  <Pencil
+                                    className="h-3 w-3"
+                                    aria-hidden="true"
+                                  />
+                                </Button>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7"
+                                  aria-label={`Delete ${lib.name}`}
+                                  onClick={() => handleDelete(lib)}
+                                >
+                                  <Trash2
+                                    className="h-3 w-3"
+                                    aria-hidden="true"
+                                  />
+                                </Button>
+                                {lib.scan_warning_code === "empty_root" ||
+                                lib.scan_warning_code === "dead_root" ? (
+                                  <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="text-destructive h-7 w-7"
+                                    title="Confirm cleanup for missing or empty roots"
+                                    disabled={
+                                      confirmEmptyRootCleanupMutation.isPending &&
+                                      confirmEmptyRootCleanupMutation.variables ===
+                                        lib.id
+                                    }
+                                    onClick={() =>
+                                      handleConfirmEmptyRootCleanup(lib)
+                                    }
+                                  >
+                                    <Trash2 className="h-3 w-3" />
+                                  </Button>
+                                ) : null}
+                              </div>
+                            </TableCell>
+                          </SortableLibraryRow>
+                          {hasActiveWork ? (
+                            <LibraryActiveWorkRow
+                              activeLibraryScans={activeLibraryScans}
+                              activeRefreshJob={activeRefreshJob}
+                              cancellingJobID={
+                                cancelAdminJobMutation.isPending
+                                  ? cancelAdminJobMutation.variables
+                                  : undefined
+                              }
+                              cancellingLibraryID={
+                                cancelScansMutation.isPending
+                                  ? cancelScansMutation.variables
+                                  : undefined
+                              }
+                              libraryID={lib.id}
+                              onCancelJob={(jobID) =>
+                                cancelAdminJobMutation.mutate(jobID)
+                              }
+                              onCancelScans={(libraryID) =>
+                                cancelScansMutation.mutate(libraryID)
+                              }
+                            />
+                          ) : null}
+                        </Fragment>
+                      );
+                    })}
+                    {orderedLibraries
+                      .filter(
+                        (lib) =>
+                          lib.scan_warning_code === "empty_root" ||
+                          lib.scan_warning_code === "dead_root",
+                      )
+                      .map((lib) => {
+                        const mountCheck = lastMountCheckByLibraryId[lib.id];
+                        const isCheckingMount =
+                          mountCheckMutation.isPending &&
+                          mountCheckMutation.variables === lib.id;
+                        return (
+                          <TableRow key={`${lib.id}-warning`}>
+                            <TableCell
+                              colSpan={7}
+                              className="bg-destructive/5 text-sm"
+                            >
+                              <div className="flex flex-col gap-2 py-1">
+                                <div className="text-destructive font-medium">
+                                  {lib.scan_warning_code === "dead_root"
+                                    ? DEAD_ROOT_WARNING_TEXT
+                                    : EMPTY_ROOT_WARNING_TEXT}
+                                </div>
+                                <div className="text-muted-foreground">
+                                  {lib.scan_warning_message ??
+                                    (lib.scan_warning_code === "dead_root"
+                                      ? DEAD_ROOT_WARNING_HINT
+                                      : EMPTY_ROOT_WARNING_HINT)}
+                                </div>
+                                <div className="flex gap-2">
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    title={
+                                      mountCheck
+                                        ? formatMountCheckMessage(mountCheck)
+                                        : "Check mount"
+                                    }
+                                    disabled={isCheckingMount}
+                                    onClick={() => handleMountCheck(lib.id)}
+                                  >
+                                    <MountCheckButtonIcon
+                                      className="mr-1 h-3.5 w-3.5"
+                                      pending={isCheckingMount}
+                                      result={mountCheck}
+                                    />
+                                    Check Mount
+                                  </Button>
+                                  {lib.scan_warning_code === "dead_root" ? (
+                                    <Button
+                                      variant="outline"
+                                      size="sm"
+                                      title="Confirm cleanup for missing or empty roots"
+                                      disabled={
+                                        confirmEmptyRootCleanupMutation.isPending &&
+                                        confirmEmptyRootCleanupMutation.variables ===
+                                          lib.id
+                                      }
+                                      onClick={() =>
+                                        handleConfirmEmptyRootCleanup(lib)
+                                      }
+                                    >
+                                      <Trash2 className="mr-1 h-3.5 w-3.5" />
+                                      Confirm Cleanup
+                                    </Button>
+                                  ) : null}
+                                </div>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        );
+                      })}
+                  </TableBody>
+                </SortableContext>
+              </Table>
+            </div>
+            <DragOverlay>
+              {activeLibrary ? (
+                <Table>
+                  <TableBody>
+                    <TableRow className="bg-background shadow-lg">
+                      <TableCell className="w-10">
+                        <GripVertical className="text-muted-foreground h-4 w-4" />
+                      </TableCell>
+                      <TableCell className="font-medium">
+                        {activeLibrary.name}
+                      </TableCell>
+                      <TableCell className="text-muted-foreground font-mono text-xs">
+                        {activeLibrary.paths.length === 1
+                          ? activeLibrary.paths[0]
+                          : `${activeLibrary.paths.length} folders`}
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="secondary">{activeLibrary.type}</Badge>
+                      </TableCell>
+                      <TableCell />
+                      <TableCell />
+                      <TableCell />
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+
+          <UnmatchedItemsSection />
+          <MetadataMatcherQueuesSection libraries={libraries} />
+          <AmbiguousRootsSection libraries={libraries} />
+          {skippedRoots.length > 0 ? (
+            <SkippedRootsSection skippedRoots={skippedRoots} />
           ) : null}
-        </DragOverlay>
-      </DndContext>
-
-      <UnmatchedItemsSection />
-      <MetadataMatcherQueuesSection libraries={libraries} />
-      <AmbiguousRootsSection libraries={libraries} />
-      {skippedRoots.length > 0 ? (
-        <SkippedRootsSection skippedRoots={skippedRoots} />
-      ) : null}
-      {staleIDs.length > 0 && <StaleIDsSection staleIDs={staleIDs} />}
+          {staleIDs.length > 0 && <StaleIDsSection staleIDs={staleIDs} />}
+        </TabsContent>
+
+        <TabsContent value="autoscan">
+          <AdminAutoscan embedded />
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }
diff --git a/web/src/pages/AdminPlugins.test.tsx b/web/src/pages/AdminPlugins.test.tsx
index 1bf3789fb..eed74cdd8 100644
--- a/web/src/pages/AdminPlugins.test.tsx
+++ b/web/src/pages/AdminPlugins.test.tsx
@@ -1,3 +1,4 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { MemoryRouter } from "react-router";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -143,6 +144,7 @@ vi.mock("@/hooks/queries/admin/plugins", () => ({
   useApplyPluginUpdate: () => ({ mutate: vi.fn(), isPending: false }),
   useDeletePluginInstallation: () => ({ mutate: vi.fn(), isPending: false }),
   useSavePluginConfig: () => ({ mutate: vi.fn(), isPending: false }),
+  useTestPluginConfig: () => ({ mutate: vi.fn(), isPending: false }),
   useSavePluginAuthBinding: () => ({ mutate: vi.fn(), isPending: false }),
   useSavePluginTaskBinding: () => ({ mutate: vi.fn(), isPending: false }),
 }));
@@ -500,4 +502,61 @@ describe("AdminPlugins", () => {
     expect(markup).toContain(">13</span>–<span");
     expect(markup).toContain("2 / 2");
   });
+
+  // Effects never run under renderToStaticMarkup, so the ?configure deep link
+  // needs a real DOM render.
+  it("opens the configure dialog from a ?configure deep link", async () => {
+    const installation = makeInstallation(1, "TheIntroDB");
+    useAdminPluginsMock.mockReturnValue({
+      repositories: [],
+      catalog: [],
+      installations: [installation],
+      catalogSettings: undefined,
+      isLoading: false,
+    });
+
+    render(
+      <MemoryRouter
+        initialEntries={[`/admin/plugins?configure=${installation.plugin_id}`]}
+      >
+        <AdminPlugins />
+      </MemoryRouter>,
+    );
+
+    const dialog = await screen.findByRole("dialog");
+    expect(
+      within(dialog).getByText(
+        "Configure bindings, credentials, and runtime settings.",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).getByText(installation.plugin_id),
+    ).toBeInTheDocument();
+  });
+
+  it("ignores a ?configure deep link for a plugin that is not installed", async () => {
+    useAdminPluginsMock.mockReturnValue({
+      repositories: [],
+      catalog: [],
+      installations: [makeInstallation(1, "TheIntroDB")],
+      catalogSettings: undefined,
+      isLoading: false,
+    });
+
+    render(
+      <MemoryRouter
+        initialEntries={["/admin/plugins?configure=silo.not-installed"]}
+      >
+        <AdminPlugins />
+      </MemoryRouter>,
+    );
+
+    await waitFor(() =>
+      expect(
+        screen.queryByText(
+          "Configure bindings, credentials, and runtime settings.",
+        ),
+      ).not.toBeInTheDocument(),
+    );
+  });
 });
diff --git a/web/src/pages/AdminPlugins.tsx b/web/src/pages/AdminPlugins.tsx
index 1a64c655c..e922f297b 100644
--- a/web/src/pages/AdminPlugins.tsx
+++ b/web/src/pages/AdminPlugins.tsx
@@ -100,9 +100,8 @@ function capabilityLabel(type: string): string {
 
 function sourceLabel(sourceKind: string): string {
   switch (sourceKind) {
-    case "prairie":
     case "silo":
-      return "Prairie maintained";
+      return "Silo maintained";
     case "approved_community":
       return "Approved community";
     default:
@@ -118,7 +117,7 @@ function pluginDisplayName(
   if (displayName) return displayName;
 
   return pluginID
-    .replace(/^(?:prairie|silo)[._-]?/, "")
+    .replace(/^silo[._-]?/, "")
     .split(/[._-]+/)
     .filter(Boolean)
     .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
@@ -493,7 +492,7 @@ function InstalledPluginCard({
               {pluginDisplayName(installation.plugin_id, presentation)}?
             </AlertDialogTitle>
             <AlertDialogDescription>
-              Prairie will stop the plugin, then remove its installation,
+              Silo will stop the plugin, then remove its installation,
               configuration, and installed files. This cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
@@ -903,7 +902,7 @@ function CommunityCatalogControl({
             </label>
           </div>
           <p className="text-muted-foreground text-xs leading-relaxed">
-            Reviewed by Prairie maintainers to work as described and be safe for
+            Reviewed by Silo maintainers to work as described and be safe for
             their documented use. These plugins remain maintained and supported
             by community contributors.
           </p>
@@ -1022,7 +1021,6 @@ function RepositorySection() {
             className="sm:flex-[2]"
           />
           <Button type="submit" size="sm">
-            <Plus />
             Add
           </Button>
         </form>
@@ -1051,7 +1049,7 @@ function RepositorySection() {
               <div className="flex shrink-0 gap-2">
                 {repo.managed ? (
                   <span className="text-muted-foreground self-center text-xs">
-                    Managed by Prairie
+                    Managed by Silo
                   </span>
                 ) : (
                   <>
@@ -1153,9 +1151,6 @@ export default function AdminPlugins() {
   const queryClient = useQueryClient();
   const checkPluginUpdates = useCheckPluginUpdates();
   const { data: pluginUpdateTask } = useTask(CHECK_PLUGIN_UPDATES_TASK_KEY);
-  const [configuring, setConfiguring] = useState<PluginInstallation | null>(
-    null,
-  );
   const previousTaskState = useRef<string | null>(null);
 
   const installedIds = useMemo(
@@ -1247,6 +1242,18 @@ export default function AdminPlugins() {
     setSearchParams(next, { replace: options.replace ?? true });
   }
 
+  // The configure dialog is URL state: ?configure=<plugin_id>. Provider tiles
+  // on the settings pages deep-link straight into a plugin's credential dialog
+  // this way, and closing the dialog (or browser back) just drops the param.
+  // An id that matches no installation renders nothing.
+  const configuring = useMemo(
+    () =>
+      installations.find(
+        (candidate) => candidate.plugin_id === searchParams.get("configure"),
+      ) ?? null,
+    [installations, searchParams],
+  );
+
   useEffect(() => {
     const currentState = pluginUpdateTask?.state ?? null;
     const previousState = previousTaskState.current;
@@ -1256,13 +1263,11 @@ export default function AdminPlugins() {
       (previousState === "running" || previousState === "cancelling") &&
       currentState === "idle"
     ) {
-      void queryClient.invalidateQueries({
+      queryClient.invalidateQueries({
         queryKey: adminKeys.pluginRepositories(),
       });
-      void queryClient.invalidateQueries({
-        queryKey: adminKeys.pluginCatalog(),
-      });
-      void queryClient.invalidateQueries({
+      queryClient.invalidateQueries({ queryKey: adminKeys.pluginCatalog() });
+      queryClient.invalidateQueries({
         queryKey: adminKeys.pluginInstallations(),
       });
     }
@@ -1276,7 +1281,7 @@ export default function AdminPlugins() {
         <div className="space-y-3">
           <h1 className="page-title text-[clamp(2rem,4vw,3rem)]">Plugins</h1>
           <p className="page-subtitle text-sm sm:text-base">
-            Extend Prairie with community and first-party plugins.
+            Extend Silo with community and first-party plugins.
           </p>
         </div>
         <div className="text-muted-foreground py-12 text-center text-sm">
@@ -1292,7 +1297,7 @@ export default function AdminPlugins() {
         <div className="space-y-3">
           <h1 className="page-title text-[clamp(2rem,4vw,3rem)]">Plugins</h1>
           <p className="page-subtitle text-sm sm:text-base">
-            Extend Prairie with community and first-party plugins.
+            Extend Silo with community and first-party plugins.
           </p>
         </div>
         <Button
@@ -1385,7 +1390,13 @@ export default function AdminPlugins() {
                     key={installation.id}
                     installation={installation}
                     catalogEntry={catalogByPluginID.get(installation.plugin_id)}
-                    onConfigure={setConfiguring}
+                    onConfigure={(target) =>
+                      // Push (not replace) so browser back closes the dialog.
+                      updatePluginView(
+                        { configure: target.plugin_id },
+                        { replace: false },
+                      )
+                    }
                   />
                 ))}
               </div>
@@ -1492,7 +1503,7 @@ export default function AdminPlugins() {
       {configuring && (
         <ConfigureDialog
           installation={configuring}
-          onClose={() => setConfiguring(null)}
+          onClose={() => updatePluginView({ configure: undefined })}
         />
       )}
     </div>
diff --git a/web/src/pages/AdminRecommendations.tsx b/web/src/pages/AdminRecommendations.tsx
index 37bbe4959..c81380dbf 100644
--- a/web/src/pages/AdminRecommendations.tsx
+++ b/web/src/pages/AdminRecommendations.tsx
@@ -667,7 +667,8 @@ export default function AdminRecommendations() {
                     />
                   ))}
                   {section.title === EMBEDDING_SECTION_TITLE ? (
-                    <div className="py-3">
+                    // ConnectionCheckAction brings its own row padding.
+                    <div>
                       <ConnectionCheckAction
                         onClick={() => handleCheckConnection(serverSettings)}
                         result={connectionResult}
diff --git a/web/src/pages/AdminUsers.test.tsx b/web/src/pages/AdminUsers.test.tsx
new file mode 100644
index 000000000..2317e8dcf
--- /dev/null
+++ b/web/src/pages/AdminUsers.test.tsx
@@ -0,0 +1,173 @@
+// @vitest-environment jsdom
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes, useLocation } from "react-router";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import AdminUsers from "./AdminUsers";
+
+// The page is exercised for its tab wiring only; the user table's data and the
+// two invite tabs each own their own queries and tests.
+vi.mock("@/hooks/queries/admin/users", () => ({
+  useAdminUsers: () => ({ data: [], isLoading: false }),
+  useCreateUser: () => ({ mutate: vi.fn(), isPending: false }),
+  useUpdateUser: () => ({ mutate: vi.fn(), isPending: false }),
+  useDeleteUser: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
+const mocks = vi.hoisted(() => ({
+  useAdminServerSettings: vi.fn(),
+}));
+
+vi.mock("@/hooks/queries/admin/settings", () => ({
+  useAdminServerSettings: (...args: unknown[]) =>
+    mocks.useAdminServerSettings(...args),
+}));
+
+vi.mock("@/hooks/queries/admin/libraries", () => ({
+  useAdminLibraries: () => ({ data: [] }),
+}));
+
+vi.mock("@/hooks/queries/admin/accessGroups", () => ({
+  useAccessGroups: () => ({ data: [] }),
+}));
+
+vi.mock("./admin-settings/InvitationsTab", () => ({
+  default: () => <div>Invitations panel</div>,
+}));
+
+vi.mock("./admin-settings/InviteCodesTab", () => ({
+  default: () => <div>Invite codes panel</div>,
+}));
+
+function LocationProbe() {
+  const location = useLocation();
+  return (
+    <span data-testid="location">{`${location.pathname}${location.search}`}</span>
+  );
+}
+
+function renderPage(entry = "/admin/users") {
+  return render(
+    <MemoryRouter initialEntries={[entry]}>
+      <Routes>
+        <Route
+          path="/admin/users"
+          element={
+            <>
+              <AdminUsers />
+              <LocationProbe />
+            </>
+          }
+        />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+function tab(name: string) {
+  return screen.getByRole("tab", { name });
+}
+
+describe("AdminUsers tabs", () => {
+  beforeEach(() => {
+    mocks.useAdminServerSettings.mockReset();
+    mocks.useAdminServerSettings.mockReturnValue({
+      data: { "signup.enabled": "false" },
+      isLoading: false,
+    });
+  });
+
+  it("opens on the users tab when no tab is requested", () => {
+    renderPage();
+
+    expect(tab("Users")).toHaveAttribute("aria-selected", "true");
+    expect(tab("Invite Codes")).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("selects the Invite Codes tab from ?tab=invite-codes", () => {
+    renderPage("/admin/users?tab=invite-codes");
+
+    expect(tab("Invite Codes")).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("Invite codes panel")).toBeInTheDocument();
+  });
+
+  it("falls back to the users tab for an unknown tab id", () => {
+    renderPage("/admin/users?tab=not-a-tab");
+
+    expect(tab("Users")).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("writes the selected tab to the URL and drops the param on the default tab", async () => {
+    renderPage();
+
+    await userEvent.click(tab("Invitations"));
+    expect(screen.getByTestId("location")).toHaveTextContent(
+      "/admin/users?tab=invitations",
+    );
+
+    await userEvent.click(tab("Users"));
+    expect(screen.getByTestId("location")).toHaveTextContent("/admin/users");
+    expect(screen.getByTestId("location")).not.toHaveTextContent("tab=");
+  });
+});
+
+describe("AdminUsers public-signup status badge", () => {
+  beforeEach(() => {
+    mocks.useAdminServerSettings.mockReset();
+  });
+
+  it("shows a neutral 'off' badge linking to General settings when signups are disabled", () => {
+    mocks.useAdminServerSettings.mockReturnValue({
+      data: { "signup.enabled": "false" },
+      isLoading: false,
+    });
+    renderPage();
+
+    const badge = screen.getByText("Public signups off");
+    expect(badge).toHaveAttribute("data-variant", "secondary");
+    const link = badge.closest("a");
+    expect(link).toHaveAttribute("href", "/admin/settings/general");
+  });
+
+  it("shows a positive 'on' badge linking to General settings when signups are enabled", () => {
+    mocks.useAdminServerSettings.mockReturnValue({
+      data: { "signup.enabled": "true" },
+      isLoading: false,
+    });
+    renderPage();
+
+    const badge = screen.getByText("Public signups on");
+    expect(badge).toHaveAttribute("data-variant", "outline");
+    const link = badge.closest("a");
+    expect(link).toHaveAttribute("href", "/admin/settings/general");
+  });
+
+  it("renders no signup-status badge while settings are still loading", () => {
+    mocks.useAdminServerSettings.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+    });
+    renderPage();
+
+    expect(screen.queryByText("Public signups on")).not.toBeInTheDocument();
+    expect(screen.queryByText("Public signups off")).not.toBeInTheDocument();
+  });
+
+  it("stays visible regardless of which tab is active", async () => {
+    mocks.useAdminServerSettings.mockReturnValue({
+      data: { "signup.enabled": "true" },
+      isLoading: false,
+    });
+    renderPage();
+
+    expect(screen.getByText("Public signups on")).toBeInTheDocument();
+
+    await userEvent.click(tab("Invite Codes"));
+    expect(screen.getByText("Public signups on")).toBeInTheDocument();
+
+    await userEvent.click(tab("Invitations"));
+    expect(screen.getByText("Public signups on")).toBeInTheDocument();
+  });
+});
diff --git a/web/src/pages/AdminUsers.tsx b/web/src/pages/AdminUsers.tsx
index 931f55b96..2e4dec289 100644
--- a/web/src/pages/AdminUsers.tsx
+++ b/web/src/pages/AdminUsers.tsx
@@ -1,6 +1,6 @@
 import { useState, useId, useMemo } from "react";
 import type { FormEvent, ReactNode } from "react";
-import { Link } from "react-router";
+import { Link, useSearchParams } from "react-router";
 import type {
   AdminUser,
   CreateUserRequest,
@@ -12,6 +12,7 @@ import {
   useUpdateUser,
   useDeleteUser,
 } from "@/hooks/queries/admin/users";
+import { useAdminServerSettings } from "@/hooks/queries/admin/settings";
 import { useAdminLibraries } from "@/hooks/queries/admin/libraries";
 import { useAccessGroups } from "@/hooks/queries/admin/accessGroups";
 import {
@@ -52,18 +53,15 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
+  ArrowRight,
   ChevronDown,
-  ChevronLeft,
-  ChevronRight,
   ChevronUp,
   History,
-  Loader2,
-  Pencil,
   Plus,
-  Save,
-  Search,
-  Settings2,
+  Pencil,
   Trash2,
+  Settings2,
+  Search,
   X,
 } from "lucide-react";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
@@ -83,8 +81,23 @@ type UserSortField =
   "username" | "email" | "role" | "enabled" | "created_at" | "last_active_at";
 type SortDirection = "asc" | "desc";
 
+// Tab ids are a URL contract: other pages deep-link here (General settings
+// points at ?tab=invite-codes), so reuse the trigger values verbatim.
+const ADMIN_USERS_TABS = ["users", "invitations", "invite-codes"] as const;
+type AdminUsersTab = (typeof ADMIN_USERS_TABS)[number];
+
+function normalizeAdminUsersTab(value: string | null): AdminUsersTab {
+  return ADMIN_USERS_TABS.includes(value as AdminUsersTab)
+    ? (value as AdminUsersTab)
+    : "users";
+}
+
 export default function AdminUsers() {
   const { data: users = [], isLoading } = useAdminUsers();
+  const { data: serverSettings } = useAdminServerSettings();
+  const signupsEnabled = serverSettings?.["signup.enabled"] === "true";
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeTab = normalizeAdminUsersTab(searchParams.get("tab"));
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingUser, setEditingUser] = useState<AdminUser | null>(null);
   const [confirmDeleteUser, setConfirmDeleteUser] = useState<AdminUser | null>(
@@ -134,6 +147,20 @@ export default function AdminUsers() {
     setConfirmDeleteUser(u);
   }
 
+  function setActiveTab(value: string) {
+    const nextTab = normalizeAdminUsersTab(value);
+    const next = new URLSearchParams(searchParams);
+
+    // The default tab stays the bare /admin/users URL.
+    if (nextTab === "users") {
+      next.delete("tab");
+    } else {
+      next.set("tab", nextTab);
+    }
+
+    setSearchParams(next, { replace: true });
+  }
+
   if (isLoading)
     return (
       <div className="space-y-3">
@@ -164,9 +191,26 @@ export default function AdminUsers() {
         <div className="space-y-3">
           <h1 className="page-title text-[clamp(2rem,4vw,3rem)]">Users</h1>
           <p className="page-subtitle text-sm sm:text-base">
-            Manage access, defaults, and invite flow for the people using
-            Prairie.
+            Manage access, defaults, and invite flow for the people using Silo.
           </p>
+          {serverSettings !== undefined && (
+            <Link
+              to="/admin/settings/general"
+              className="inline-flex w-fit items-center gap-1 hover:opacity-80"
+            >
+              <Badge
+                variant={signupsEnabled ? "outline" : "secondary"}
+                className={
+                  signupsEnabled
+                    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-500"
+                    : undefined
+                }
+              >
+                {signupsEnabled ? "Public signups on" : "Public signups off"}
+                <ArrowRight className="h-3 w-3" aria-hidden="true" />
+              </Badge>
+            </Link>
+          )}
         </div>
         <div className="flex gap-2">
           <Button variant="outline" size="sm" asChild>
@@ -204,7 +248,7 @@ export default function AdminUsers() {
         </div>
       </div>
 
-      <Tabs defaultValue="users">
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
         <TabsList
           variant="line"
           className="border-border w-full justify-start border-b"
@@ -405,7 +449,6 @@ export default function AdminUsers() {
                     onClick={() => setPage((p) => p - 1)}
                     disabled={page === 0}
                   >
-                    <ChevronLeft />
                     Previous
                   </Button>
                   <Button
@@ -414,7 +457,6 @@ export default function AdminUsers() {
                     onClick={() => setPage((p) => p + 1)}
                     disabled={(page + 1) * pageSize >= total}
                   >
-                    <ChevronRight />
                     Next
                   </Button>
                 </div>
@@ -832,7 +874,6 @@ function UserForm({
 
       <div className="border-border mt-4 border-t pt-4">
         <Button type="submit" className="w-full" disabled={isPending}>
-          {isPending ? <Loader2 className="animate-spin" /> : <Save />}
           {isPending ? "Saving..." : "Save"}
         </Button>
       </div>
diff --git a/web/src/pages/Catalog.test.tsx b/web/src/pages/Catalog.test.tsx
index 6a96e95a1..12532b06e 100644
--- a/web/src/pages/Catalog.test.tsx
+++ b/web/src/pages/Catalog.test.tsx
@@ -19,11 +19,14 @@ vi.mock("react-router", async () => {
 
   return {
     ...actual,
-    BrowserRouter: ({ children }: { children: ReactNode }) => (
-      <actual.MemoryRouter initialEntries={appInitialEntries}>
-        {children}
-      </actual.MemoryRouter>
-    ),
+    // App builds a data router from the real history; point it at the entry
+    // under test instead.
+    createBrowserRouter: ((
+      routes: Parameters<typeof actual.createMemoryRouter>[0],
+    ) =>
+      actual.createMemoryRouter(routes, {
+        initialEntries: appInitialEntries,
+      })) as typeof actual.createBrowserRouter,
     Navigate: ({
       to,
       replace,
diff --git a/web/src/pages/Home.test.tsx b/web/src/pages/Home.test.tsx
index dd86965d0..d6ad6d14b 100644
--- a/web/src/pages/Home.test.tsx
+++ b/web/src/pages/Home.test.tsx
@@ -7,6 +7,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import Home from "./Home";
+import { sectionKeys } from "@/hooks/queries/keys";
 
 (
   globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
@@ -19,20 +20,14 @@ vi.mock("@/hooks/queries/sections", () => ({
   useHomeLayout: (...args: unknown[]) => mockUseHomeLayout(...args),
   fetchHomeSectionItems: (...args: unknown[]) =>
     mockFetchHomeSectionItems(...args),
+  HOME_SECTION_STALE_TIME: 10 * 60 * 1000,
+  HOME_SECTION_GC_TIME: 60 * 60 * 1000,
 }));
 
 vi.mock("@/hooks/useDocumentTitle", () => ({
   useDocumentTitle: vi.fn(),
 }));
 
-vi.mock("@/hooks/useServerBranding", () => ({
-  useServerBranding: () => ({ serverName: "Prairie", loginSubtitle: null }),
-}));
-
-vi.mock("@/components/PrairieBrand", () => ({
-  PrairieBrand: () => <span data-kind="prairie-brand" />,
-}));
-
 vi.mock("react-router", () => ({
   Link: ({ children }: { children: ReactNode }) => <a>{children}</a>,
 }));
@@ -41,10 +36,6 @@ vi.mock("@/components/TasteSeedBanner", () => ({
   default: () => <div data-kind="taste-seed" />,
 }));
 
-vi.mock("@/components/livetv/LiveTVOnNowRow", () => ({
-  default: () => null,
-}));
-
 vi.mock("@/components/HeroBanner", () => ({
   default: () => <div data-kind="hero" />,
 }));
@@ -53,24 +44,6 @@ vi.mock("@/components/SectionRow", () => ({
   default: () => <div data-kind="section-row" />,
 }));
 
-function layoutSection(overrides: {
-  id: string;
-  title?: string;
-  featured?: boolean;
-  item_limit?: number;
-}) {
-  return {
-    id: overrides.id,
-    title: overrides.title ?? overrides.id,
-    section_type: "recently_added",
-    featured: overrides.featured ?? false,
-    item_limit: overrides.item_limit ?? 16,
-    is_custom: false,
-    customized: false,
-    position: 0,
-  };
-}
-
 describe("Home", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -80,13 +53,13 @@ describe("Home", () => {
     document.body.appendChild(container);
     root = createRoot(container);
 
-    mockFetchHomeSectionItems.mockReset();
     mockUseHomeLayout.mockReturnValue({
       data: { sections: [] },
       isLoading: false,
       isError: false,
       refetch: vi.fn(),
     });
+    mockFetchHomeSectionItems.mockReset();
   });
 
   afterEach(async () => {
@@ -96,7 +69,13 @@ describe("Home", () => {
     container.remove();
   });
 
-  async function renderHome(queryClient = new QueryClient()) {
+  it("does not invalidate cached home sections on mount", async () => {
+    const invalidateQueries = vi.spyOn(
+      QueryClient.prototype,
+      "invalidateQueries",
+    );
+    const queryClient = new QueryClient();
+
     await act(async () => {
       root.render(
         <QueryClientProvider client={queryClient}>
@@ -105,52 +84,52 @@ describe("Home", () => {
       );
       await Promise.resolve();
     });
-    return queryClient;
-  }
 
-  it("does not invalidate cached home sections on mount", async () => {
-    const invalidateQueries = vi.spyOn(
-      QueryClient.prototype,
-      "invalidateQueries",
-    );
-    await renderHome();
     expect(invalidateQueries).not.toHaveBeenCalled();
     invalidateQueries.mockRestore();
   });
 
-  it("shows a compact brand welcome only when home has no sections", async () => {
-    await renderHome();
-    expect(container.querySelector('[aria-label="Welcome"]')).toBeTruthy();
-    expect(container.querySelector('[data-kind="hero"]')).toBeNull();
-  });
-
-  it("opens on carousel rows when sections exist without a featured hero", async () => {
-    mockFetchHomeSectionItems.mockResolvedValue({
-      section: {
-        id: "recent",
-        title: "Recently Added",
-        section_type: "recently_added",
-        featured: false,
-        items: [{ content_id: "m1", title: "Movie", type: "movie" }],
-        total_count: 1,
-      },
-    });
+  it("keeps section items cached past the client-wide gc time", async () => {
     mockUseHomeLayout.mockReturnValue({
       data: {
-        sections: [layoutSection({ id: "recent", title: "Recently Added" })],
+        sections: [
+          {
+            id: "recent",
+            section_type: "recently_added",
+            title: "Recently Added",
+            featured: false,
+            item_limit: 10,
+            is_custom: false,
+            customized: false,
+          },
+        ],
       },
       isLoading: false,
       isError: false,
       refetch: vi.fn(),
     });
+    mockFetchHomeSectionItems.mockResolvedValue({
+      section: { id: "recent", items: [], total_count: 0 },
+    });
+    // The client default is what evicts observer-less section entries today.
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { gcTime: 10 * 60_000 } },
+    });
 
-    await renderHome();
     await act(async () => {
-      await Promise.resolve();
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <Home />
+        </QueryClientProvider>,
+      );
       await Promise.resolve();
     });
 
-    expect(container.querySelector('[aria-label="Welcome"]')).toBeNull();
-    expect(container.querySelector('[data-kind="hero"]')).toBeNull();
+    const sectionQuery = queryClient
+      .getQueryCache()
+      .find({ queryKey: sectionKeys.homeItems("recent") });
+
+    expect(sectionQuery).toBeDefined();
+    expect(sectionQuery?.gcTime).toBe(60 * 60 * 1000);
   });
 });
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 2b274bde8..2123423dc 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -13,7 +13,12 @@ import { HERO_BANNER_SIZE, HOME_BRAND_HERO_SIZE } from "@/lib/design-system";
 import { PrairieBrand } from "@/components/PrairieBrand";
 import { useServerBranding } from "@/hooks/useServerBranding";
 import { sectionKeys } from "@/hooks/queries/keys";
-import { fetchHomeSectionItems, useHomeLayout } from "@/hooks/queries/sections";
+import {
+  fetchHomeSectionItems,
+  HOME_SECTION_GC_TIME,
+  HOME_SECTION_STALE_TIME,
+  useHomeLayout,
+} from "@/hooks/queries/sections";
 import { planNextHomeSectionBatch } from "./homeSectionQueue";
 import {
   buildHomeSectionViewModel,
@@ -22,7 +27,6 @@ import {
 import { collectCachedHomeSections } from "./homeSectionCache";
 import { useSectionRefreshSignal } from "./homeSurfaceRefresh";
 
-const SECTION_STALE_TIME = 5 * 60 * 1000;
 const MAX_CONCURRENT_SECTION_REQUESTS = 5;
 const SKELETON_CARD_COUNT = 7;
 
@@ -95,7 +99,8 @@ export default function Home() {
         .fetchQuery<HomeSectionItemsResponse>({
           queryKey: sectionKeys.homeItems(sectionId),
           queryFn: ({ signal }) => fetchHomeSectionItems(sectionId, { signal }),
-          staleTime: SECTION_STALE_TIME,
+          staleTime: HOME_SECTION_STALE_TIME,
+          gcTime: HOME_SECTION_GC_TIME,
         })
         .then((response) => {
           if (!activeSectionIdsRef.current.has(sectionId)) return;
diff --git a/web/src/pages/ItemDetail/components/EpisodeCarousel.test.tsx b/web/src/pages/ItemDetail/components/EpisodeCarousel.test.tsx
index f2f498e50..155f0a807 100644
--- a/web/src/pages/ItemDetail/components/EpisodeCarousel.test.tsx
+++ b/web/src/pages/ItemDetail/components/EpisodeCarousel.test.tsx
@@ -12,6 +12,10 @@ vi.mock("@/hooks/queries/catalogRead", () => ({
   usePrefetchCatalogItemDetail: () => prefetchEpisodeDetail,
 }));
 
+vi.mock("@/hooks/useOverlayPrefs", () => ({
+  useOverlayPrefs: () => ({ quickActionMode: "watched" }),
+}));
+
 vi.mock("@/components/MediaItemMenu", () => ({
   default: (props: Record<string, unknown>) => {
     capturedMenuProps.push(props);
@@ -211,6 +215,7 @@ describe("EpisodeCarousel", () => {
       showCollectionActions: false,
       showWatchedShortcut: true,
       hasPartialProgress: false,
+      quickActionMode: "watched",
     });
     expect(capturedMenuProps[1]).toMatchObject({
       contentId: "ep-2",
@@ -221,6 +226,7 @@ describe("EpisodeCarousel", () => {
       },
       showWatchedShortcut: true,
       hasPartialProgress: true,
+      quickActionMode: "watched",
     });
   });
 });
diff --git a/web/src/pages/ItemDetail/components/EpisodeCarousel.tsx b/web/src/pages/ItemDetail/components/EpisodeCarousel.tsx
index ea42dcbd9..ed0c6a68d 100644
--- a/web/src/pages/ItemDetail/components/EpisodeCarousel.tsx
+++ b/web/src/pages/ItemDetail/components/EpisodeCarousel.tsx
@@ -10,6 +10,8 @@ import MediaItemMenu from "@/components/MediaItemMenu";
 import type { EpisodeNavigationState } from "../itemDetailLayout";
 import { useCarouselEmbla } from "@/hooks/useCarouselEmbla";
 import { usePrefetchCatalogItemDetail } from "@/hooks/queries/catalogRead";
+import { useOverlayPrefs } from "@/hooks/useOverlayPrefs";
+import type { CardQuickActionMode } from "@/lib/cardQuickActions";
 
 interface EpisodeCarouselProps {
   episodes: EpisodeListItem[];
@@ -26,6 +28,7 @@ export default function EpisodeCarousel({
     (episode) => episode.episode_number === currentEpisodeNumber,
   );
   const prefetchEpisodeDetail = usePrefetchCatalogItemDetail();
+  const { quickActionMode } = useOverlayPrefs();
   const {
     emblaApi,
     emblaRef,
@@ -73,6 +76,7 @@ export default function EpisodeCarousel({
                 ep={ep}
                 isCurrent={ep.episode_number === currentEpisodeNumber}
                 episodeLinkState={episodeLinkState}
+                quickActionMode={quickActionMode}
                 onPrefetch={() => prefetchEpisodeDetail(ep.content_id)}
               />
             ))}
@@ -98,11 +102,13 @@ function EpisodeCarouselCard({
   ep,
   isCurrent,
   episodeLinkState,
+  quickActionMode,
   onPrefetch,
 }: {
   ep: EpisodeListItem;
   isCurrent: boolean;
   episodeLinkState?: EpisodeNavigationState;
+  quickActionMode: CardQuickActionMode;
   onPrefetch: () => void;
 }) {
   const cardRef = useRef<HTMLDivElement>(null);
@@ -199,6 +205,7 @@ function EpisodeCarouselCard({
             showCollectionActions={false}
             showWatchedShortcut
             hasPartialProgress={progress != null}
+            quickActionMode={quickActionMode}
             longPressRef={cardRef}
             itemTitle={episodeTitle}
           />
diff --git a/web/src/pages/ItemDetail/components/SeasonEpisodeGrid.test.tsx b/web/src/pages/ItemDetail/components/SeasonEpisodeGrid.test.tsx
index eaa6ccec2..83675dfa2 100644
--- a/web/src/pages/ItemDetail/components/SeasonEpisodeGrid.test.tsx
+++ b/web/src/pages/ItemDetail/components/SeasonEpisodeGrid.test.tsx
@@ -13,7 +13,7 @@ vi.mock("@/components/MediaItemMenu", () => ({
 }));
 
 vi.mock("@/hooks/useOverlayPrefs", () => ({
-  useOverlayPrefs: () => ({ prefs: null }),
+  useOverlayPrefs: () => ({ prefs: null, quickActionMode: "watched" }),
 }));
 
 vi.mock("@/hooks/queries/catalogRead", () => ({
@@ -59,6 +59,7 @@ describe("SeasonEpisodeGrid", () => {
       showCollectionActions: false,
       showWatchedShortcut: true,
       hasPartialProgress: false,
+      quickActionMode: "watched",
     });
   });
 
diff --git a/web/src/pages/ItemDetail/components/SeasonEpisodeGrid.tsx b/web/src/pages/ItemDetail/components/SeasonEpisodeGrid.tsx
index 0453e310f..01d2fa751 100644
--- a/web/src/pages/ItemDetail/components/SeasonEpisodeGrid.tsx
+++ b/web/src/pages/ItemDetail/components/SeasonEpisodeGrid.tsx
@@ -8,6 +8,7 @@ import MediaItemMenu from "@/components/MediaItemMenu";
 import CardOverlays from "@/components/overlays/CardOverlays";
 import { useOverlayPrefs } from "@/hooks/useOverlayPrefs";
 import { usePrefetchCatalogItemDetail } from "@/hooks/queries/catalogRead";
+import type { CardQuickActionMode } from "@/lib/cardQuickActions";
 import {
   overlayDataFromEpisodeListItem,
   type CardOverlayPrefs,
@@ -26,7 +27,7 @@ export default function SeasonEpisodeGrid({
   isLoading,
   episodeLinkState,
 }: SeasonEpisodeGridProps) {
-  const { prefs: overlayPrefs } = useOverlayPrefs();
+  const { prefs: overlayPrefs, quickActionMode } = useOverlayPrefs();
   const prefetchEpisodeDetail = usePrefetchCatalogItemDetail();
 
   if (isLoading) {
@@ -49,6 +50,7 @@ export default function SeasonEpisodeGrid({
           episode={episode}
           episodeLinkState={episodeLinkState}
           overlayPrefs={overlayPrefs}
+          quickActionMode={quickActionMode}
           onPrefetch={() => prefetchEpisodeDetail(episode.content_id)}
         />
       ))}
@@ -60,11 +62,13 @@ function SeasonEpisodeCard({
   episode,
   episodeLinkState,
   overlayPrefs,
+  quickActionMode,
   onPrefetch,
 }: {
   episode: EpisodeListItem;
   episodeLinkState?: EpisodeNavigationState;
   overlayPrefs: CardOverlayPrefs | null;
+  quickActionMode: CardQuickActionMode;
   onPrefetch: () => void;
 }) {
   const cardRef = useRef<HTMLDivElement>(null);
@@ -137,6 +141,7 @@ function SeasonEpisodeCard({
           showCollectionActions={false}
           showWatchedShortcut
           hasPartialProgress={hasPartialProgress}
+          quickActionMode={quickActionMode}
           longPressRef={cardRef}
           itemTitle={episodeTitle}
         />
diff --git a/web/src/pages/LibraryPage.test.tsx b/web/src/pages/LibraryPage.test.tsx
index 7f21bec4b..bf20490e3 100644
--- a/web/src/pages/LibraryPage.test.tsx
+++ b/web/src/pages/LibraryPage.test.tsx
@@ -15,6 +15,8 @@ const mocks = vi.hoisted(() => ({
   savedSearch: "tab=library" as string | undefined,
   saveLibrarySearch:
     vi.fn<(libraryId: number, search: string) => Promise<void>>(),
+  renderOnlyActiveTab: false,
+  recommendedMounts: 0,
 }));
 
 vi.mock("@/hooks/queries/libraries", () => ({
@@ -68,22 +70,51 @@ vi.mock("@/components/LibraryHeader", () => ({
   default: () => <div>Library header</div>,
 }));
 
-vi.mock("@/components/ui/tabs", () => ({
-  Tabs: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  TabsContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-}));
+vi.mock("@/components/ui/tabs", async () => {
+  const { createContext, useContext } = await import("react");
+  const ActiveTabContext = createContext<string | undefined>(undefined);
+  return {
+    Tabs: ({ value, children }: { value: string; children: ReactNode }) => (
+      <ActiveTabContext.Provider value={value}>
+        {children}
+      </ActiveTabContext.Provider>
+    ),
+    TabsContent: ({
+      value,
+      children,
+    }: {
+      value: string;
+      children: ReactNode;
+    }) => {
+      const activeTab = useContext(ActiveTabContext);
+      // Radix only mounts the active panel. Most tests here need to reach into
+      // several panels at once, so that behavior is opt-in per test.
+      if (mocks.renderOnlyActiveTab && activeTab !== value) {
+        return null;
+      }
+      return <div>{children}</div>;
+    },
+  };
+});
 
-vi.mock("./LibraryRecommended", () => ({
-  default: ({
+vi.mock("./LibraryRecommended", async () => {
+  const { useEffect } = await import("react");
+  function LibraryRecommendedMock({
     onHeroStateChange,
   }: {
     onHeroStateChange: (rendered: boolean) => void;
-  }) => (
-    <button type="button" onClick={() => onHeroStateChange(true)}>
-      Show hero
-    </button>
-  ),
-}));
+  }) {
+    useEffect(() => {
+      mocks.recommendedMounts += 1;
+    }, []);
+    return (
+      <button type="button" onClick={() => onHeroStateChange(true)}>
+        Show hero
+      </button>
+    );
+  }
+  return { default: LibraryRecommendedMock };
+});
 
 vi.mock("./LibraryBrowse", () => ({
   default: () => <div>Library browse</div>,
@@ -119,10 +150,29 @@ describe("LibraryPage saved state", () => {
     mocks.ownerKey = "profile-1";
     mocks.rememberEnabled = true;
     mocks.savedSearch = "tab=library";
+    mocks.renderOnlyActiveTab = false;
+    mocks.recommendedMounts = 0;
     mocks.saveLibrarySearch.mockReset();
     mocks.saveLibrarySearch.mockResolvedValue();
   });
 
+  it("never mounts the Recommended tab when saved state lands on the Library tab", async () => {
+    mocks.renderOnlyActiveTab = true;
+    mocks.savedSearch = "tab=library&sort=year&order=desc";
+
+    renderPage("/libraries/7");
+
+    await waitFor(() =>
+      expect(screen.getByTestId("location-search")).toHaveTextContent(
+        "?tab=library&sort=year&order=desc",
+      ),
+    );
+    expect(screen.getByText("Library browse")).toBeInTheDocument();
+    // The hydration effect must not drop the skeleton before the rewritten URL
+    // lands, or Recommended mounts for a frame and fires its section queries.
+    expect(mocks.recommendedMounts).toBe(0);
+  });
+
   it("submits one save while the cached value remains stale across unrelated rerenders", async () => {
     renderPage();
 
diff --git a/web/src/pages/LibraryPage.tsx b/web/src/pages/LibraryPage.tsx
index 9c4d66303..883f47b55 100644
--- a/web/src/pages/LibraryPage.tsx
+++ b/web/src/pages/LibraryPage.tsx
@@ -1,4 +1,11 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  startTransition,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Link, useParams, useSearchParams } from "react-router";
 import type { QueryDefinition } from "@/api/types";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
@@ -151,22 +158,38 @@ export default function LibraryPage() {
       return;
     }
 
-    setSavedStateHydratedKey(libraryPageStateKey);
     const nextSearchParams = applySavedLibraryPageSearchParams(
       searchParams,
       rememberLibraryPageState ? (savedLibrarySearch ?? "") : "",
     );
     const hydratedSearch = serializeLibraryPageSearchParams(nextSearchParams);
-    setHydratedLibrarySearch({
+    const nextHydratedLibrarySearch: HydratedLibrarySearch = {
       ownerKey: libraryPageStateOwnerKey,
       libraryId: id,
       search: hydratedSearch,
-    });
-    if (nextSearchParams.toString() !== searchParams.toString()) {
-      applyingSavedSearchParamsRef.current = hydratedSearch;
-      applyingSavedSearchParamsKeyRef.current = libraryPageStateKey;
-      setSearchParams(nextSearchParams, { replace: true });
+    };
+
+    if (nextSearchParams.toString() === searchParams.toString()) {
+      // The saved search already matches the URL, so there is nothing to
+      // navigate to and the page can leave the skeleton immediately.
+      setSavedStateHydratedKey(libraryPageStateKey);
+      setHydratedLibrarySearch(nextHydratedLibrarySearch);
+      return;
     }
+
+    applyingSavedSearchParamsRef.current = hydratedSearch;
+    applyingSavedSearchParamsKeyRef.current = libraryPageStateKey;
+    // react-router wraps setSearchParams in a transition. Marking hydration as
+    // done urgently would commit first, dropping the skeleton while
+    // `searchParams` still read the pre-navigation URL — long enough for the
+    // default Recommended tab to mount and fire its section queries before the
+    // transition lands the saved tab. Keeping all three updates in one
+    // transition commits the marker and the URL together.
+    startTransition(() => {
+      setSavedStateHydratedKey(libraryPageStateKey);
+      setHydratedLibrarySearch(nextHydratedLibrarySearch);
+      setSearchParams(nextSearchParams, { replace: true });
+    });
   }, [
     id,
     libraryPageStateKey,
diff --git a/web/src/pages/LibraryRecommended.tsx b/web/src/pages/LibraryRecommended.tsx
index 45409e53c..fca8c4bca 100644
--- a/web/src/pages/LibraryRecommended.tsx
+++ b/web/src/pages/LibraryRecommended.tsx
@@ -365,7 +365,7 @@ function PinnedCollectionCarousel({
     libraryId,
     collectionId,
   );
-  const { prefs: overlayPrefs } = useOverlayPrefs();
+  const { prefs: overlayPrefs, quickActionMode } = useOverlayPrefs();
   const { cardPresentation } = useUICustomization();
   const posterWidthClasses = carouselCardWidthClasses(
     cardPresentation.poster_size,
@@ -377,7 +377,11 @@ function PinnedCollectionCarousel({
     <MediaCarousel title={name} loading={isLoading}>
       {(items ?? []).map((item) => (
         <div key={item.content_id} className={posterWidthClasses}>
-          <ItemCard item={item} overlayPrefs={overlayPrefs} />
+          <ItemCard
+            item={item}
+            overlayPrefs={overlayPrefs}
+            quickActionMode={quickActionMode}
+          />
         </div>
       ))}
     </MediaCarousel>
diff --git a/web/src/pages/Recommendations.tsx b/web/src/pages/Recommendations.tsx
index 4a6c195eb..d2cb8fb0a 100644
--- a/web/src/pages/Recommendations.tsx
+++ b/web/src/pages/Recommendations.tsx
@@ -3,6 +3,7 @@ import type { DiscoverRow } from "@/api/types";
 import MediaCarousel from "@/components/MediaCarousel";
 import SectionItemCard from "@/components/SectionItemCard";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";
+import { useOverlayPrefs } from "@/hooks/useOverlayPrefs";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Sparkles, RefreshCw } from "lucide-react";
 import { useUICustomization } from "@/hooks/useUICustomization";
@@ -163,6 +164,7 @@ export default function Recommendations() {
 
   const tasteProfileQuery = useTasteProfile();
   const { data, isLoading, isError, refetch } = useDiscover();
+  const { prefs: overlayPrefs, quickActionMode } = useOverlayPrefs();
   const { cardPresentation } = useUICustomization();
   const posterWidthClasses = carouselCardWidthClasses(
     cardPresentation.poster_size,
@@ -210,7 +212,11 @@ export default function Recommendations() {
                 className={posterWidthClasses}
                 role="listitem"
               >
-                <SectionItemCard item={item} />
+                <SectionItemCard
+                  item={item}
+                  overlayPrefs={overlayPrefs}
+                  quickActionMode={quickActionMode}
+                />
               </div>
             ))}
           </MediaCarousel>
diff --git a/web/src/pages/RecommendationsSection.tsx b/web/src/pages/RecommendationsSection.tsx
index e5acef375..68e6371b3 100644
--- a/web/src/pages/RecommendationsSection.tsx
+++ b/web/src/pages/RecommendationsSection.tsx
@@ -6,6 +6,7 @@ import SectionItemCard from "@/components/SectionItemCard";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useRecommendationSection } from "@/hooks/queries/recommendations";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";
+import { useOverlayPrefs } from "@/hooks/useOverlayPrefs";
 import { useUICustomization } from "@/hooks/useUICustomization";
 import { cardGridClasses } from "@/lib/uiCustomization";
 
@@ -81,6 +82,7 @@ export default function RecommendationsSection() {
     key,
   );
   const title = data?.label || fallbackTitle(kind, key);
+  const { prefs: overlayPrefs, quickActionMode } = useOverlayPrefs();
   const { cardPresentation } = useUICustomization();
 
   useDocumentTitle(title);
@@ -108,7 +110,12 @@ export default function RecommendationsSection() {
       ) : (
         <div className={cardGridClasses(cardPresentation.poster_size)}>
           {data.items.map((item) => (
-            <SectionItemCard key={item.content_id} item={item} />
+            <SectionItemCard
+              key={item.content_id}
+              item={item}
+              overlayPrefs={overlayPrefs}
+              quickActionMode={quickActionMode}
+            />
           ))}
         </div>
       )}
diff --git a/web/src/pages/SettingsLayout.tsx b/web/src/pages/SettingsLayout.tsx
index 0789a2e6d..3ebe2e8c9 100644
--- a/web/src/pages/SettingsLayout.tsx
+++ b/web/src/pages/SettingsLayout.tsx
@@ -609,10 +609,6 @@ export default function SettingsLayout() {
     [canManageProfiles],
   );
 
-  const flatItems = useMemo(
-    () => visibleSections.flatMap((section) => section.items),
-    [visibleSections],
-  );
   const filteredSections = useMemo(
     () => filterSettingsSearchGroups(visibleSections, settingsSearch),
     [settingsSearch, visibleSections],
@@ -650,7 +646,6 @@ export default function SettingsLayout() {
                 value={settingsSearch}
                 onChange={setSettingsSearch}
                 resultCount={filteredSettingsCount}
-                totalCount={flatItems.length}
                 className="w-full sm:max-w-sm"
                 shortcutMediaQuery={
                   activeSegment ? "(min-width: 64rem)" : undefined
@@ -726,7 +721,6 @@ export default function SettingsLayout() {
                 value={settingsSearch}
                 onChange={setSettingsSearch}
                 resultCount={filteredSettingsCount}
-                totalCount={flatItems.length}
                 className="w-full sm:max-w-sm lg:w-[26rem] lg:max-w-none"
                 showShortcutHint
               />
diff --git a/web/src/pages/admin-settings/AIServicesSettings.test.tsx b/web/src/pages/admin-settings/AIServicesSettings.test.tsx
deleted file mode 100644
index 695dc5bd5..000000000
--- a/web/src/pages/admin-settings/AIServicesSettings.test.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { renderToStaticMarkup } from "react-dom/server";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-import AIServicesSettings from "./AIServicesSettings";
-
-const mocks = vi.hoisted(() => ({
-  checkConnection: vi.fn(),
-  discard: vi.fn(),
-  save: vi.fn(),
-  setValue: vi.fn(),
-  toastError: vi.fn(),
-}));
-
-const values: Record<string, string> = {
-  "ai.base_url": "https://text.example.test",
-  "ai.chat_model": "chat-model",
-  "ai.asr_base_url": "",
-  "ai.asr_model": "whisper-model",
-  "ai.max_concurrent_jobs": "2",
-  "subtitle_ai.base_url": "https://legacy.example.test",
-  "subtitle_ai.chat_model": "legacy-chat-model",
-  "subtitle_ai.max_concurrent_jobs": "3",
-  "subtitle_ai.enabled": "true",
-  "subtitle_ai.transcribe_enabled": "false",
-  "subtitle_ai.batch_size": "40",
-  "subtitle_ai.context_neighbors": "2",
-  "subtitle_ai.asr_chunk_seconds": "600",
-  "subtitle_ai.transcribe_quota_jobs": "0",
-  "subtitle_ai.transcribe_quota_period": "day",
-  "metadata_ai.enabled": "false",
-  "metadata_ai.on_view": "button",
-};
-
-let dirtyCount = 0;
-
-const useSettingsFormMock = vi.fn((_options?: { keys: string[] }) => ({
-  isLoading: false,
-  getValue: (key: string) => values[key] ?? "",
-  setValue: mocks.setValue,
-  dirtyCount,
-  dirtyKeys: [],
-  isDirty: vi.fn(() => false),
-  save: mocks.save,
-  discard: mocks.discard,
-  isSaving: false,
-  restartRequired: false,
-  sensitiveConfigured: ["subtitle_ai.api_key"],
-  sensitiveManagedByEnv: [],
-  buildConnectionCheckRequest: vi.fn(() => ({ values: {}, dirty_keys: [] })),
-}));
-
-vi.mock("@/hooks/useSettingsForm", () => ({
-  useSettingsForm: (options: { keys: string[] }) =>
-    useSettingsFormMock(options),
-}));
-
-vi.mock("@/hooks/queries/admin/settings", () => ({
-  useAdminServerSettings: () => ({ data: values }),
-  useAdminSensitiveStatus: () => ({ data: { configured: ["ai.api_key"] } }),
-  useUpdateServerSetting: () => ({ mutateAsync: vi.fn(), isPending: false }),
-  useCheckAdminSettingsConnection: () => ({
-    mutateAsync: mocks.checkConnection,
-    isPending: false,
-  }),
-}));
-
-vi.mock("sonner", () => ({
-  toast: {
-    error: mocks.toastError,
-  },
-}));
-
-describe("AIServicesSettings", () => {
-  beforeEach(() => {
-    dirtyCount = 0;
-    mocks.checkConnection.mockReset();
-    mocks.discard.mockReset();
-    mocks.save.mockReset();
-    mocks.setValue.mockReset();
-    mocks.toastError.mockReset();
-    values["ai.base_url"] = "https://text.example.test";
-    values["ai.chat_model"] = "chat-model";
-    values["ai.asr_base_url"] = "";
-    values["ai.asr_model"] = "whisper-model";
-    values["ai.max_concurrent_jobs"] = "2";
-    values["subtitle_ai.batch_size"] = "40";
-    values["subtitle_ai.context_neighbors"] = "2";
-    values["subtitle_ai.asr_chunk_seconds"] = "600";
-  });
-
-  it("separates text translation from speech-to-text configuration", () => {
-    const markup = renderToStaticMarkup(<AIServicesSettings />);
-
-    expect(markup).toContain("Text translation");
-    expect(markup).toContain("Speech-to-text");
-    expect(markup).toContain("Test Text AI");
-    expect(markup).toContain("Test Speech-to-Text");
-    expect(markup).toContain("Uses the Text translation endpoint");
-  });
-
-  it("shows effective legacy endpoint values until modern keys are saved", () => {
-    const currentBaseURL = values["ai.base_url"]!;
-    const currentChatModel = values["ai.chat_model"]!;
-    values["ai.base_url"] = "";
-    values["ai.chat_model"] = "";
-
-    try {
-      const markup = renderToStaticMarkup(<AIServicesSettings />);
-
-      expect(markup).toContain("https://legacy.example.test");
-      expect(markup).toContain("legacy-chat-model");
-    } finally {
-      values["ai.base_url"] = currentBaseURL;
-      values["ai.chat_model"] = currentChatModel;
-    }
-  });
-
-  it("marks known chat-only fallback endpoints as incompatible with speech-to-text", () => {
-    const currentBaseURL = values["ai.base_url"]!;
-    values["ai.base_url"] = "https://openrouter.ai/api";
-
-    try {
-      const markup = renderToStaticMarkup(<AIServicesSettings />);
-
-      expect(markup).toContain("Incompatible endpoint");
-    } finally {
-      values["ai.base_url"] = currentBaseURL;
-    }
-  });
-
-  it("exposes transcription preset selection to assistive technology", () => {
-    const markup = renderToStaticMarkup(<AIServicesSettings />);
-
-    expect(markup).toContain('aria-pressed="false"');
-  });
-
-  it("explains feature dependencies and keeps advanced tuning secondary", () => {
-    const markup = renderToStaticMarkup(<AIServicesSettings />);
-
-    expect(markup).toContain("Text AI required");
-    expect(markup).toContain("Speech-to-text required");
-    expect(markup).toContain(
-      "Inactive until Description translation is enabled",
-    );
-    expect(markup).toContain("Advanced");
-  });
-
-  it("points recommendation embeddings to their separate configuration", () => {
-    const markup = renderToStaticMarkup(<AIServicesSettings />);
-
-    expect(markup).toContain(
-      "Recommendation embeddings are configured separately",
-    );
-    expect(markup).toContain('href="/admin/recommendations"');
-    expect(markup).not.toContain("Changes take effect after a server restart");
-  });
-
-  it("applies a transcription preset", async () => {
-    const user = userEvent.setup();
-    render(<AIServicesSettings />);
-
-    await user.click(screen.getByRole("button", { name: "Groq - fast" }));
-
-    expect(mocks.setValue).toHaveBeenCalledWith(
-      "ai.asr_base_url",
-      "https://api.groq.com/openai",
-    );
-    expect(mocks.setValue).toHaveBeenCalledWith(
-      "ai.asr_model",
-      "whisper-large-v3-turbo",
-    );
-  });
-
-  it("runs both connection checks and clears their results when drafts are discarded", async () => {
-    const user = userEvent.setup();
-    dirtyCount = 1;
-    mocks.checkConnection
-      .mockResolvedValueOnce({
-        success: true,
-        message: "Text connection verified.",
-      })
-      .mockResolvedValueOnce({
-        success: true,
-        message: "Speech connection verified.",
-      });
-    render(<AIServicesSettings />);
-
-    await user.click(screen.getByRole("button", { name: "Test Text AI" }));
-    await user.click(
-      screen.getByRole("button", { name: "Test Speech-to-Text" }),
-    );
-    expect(
-      await screen.findByText("Text connection verified."),
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText("Speech connection verified."),
-    ).toBeInTheDocument();
-    expect(mocks.checkConnection).toHaveBeenNthCalledWith(
-      1,
-      expect.objectContaining({ kind: "ai_chat" }),
-    );
-    expect(mocks.checkConnection).toHaveBeenNthCalledWith(
-      2,
-      expect.objectContaining({ kind: "ai_transcription" }),
-    );
-
-    await user.click(screen.getByRole("button", { name: "Discard" }));
-
-    expect(mocks.discard).toHaveBeenCalledOnce();
-    await waitFor(() => {
-      expect(
-        screen.queryByText("Text connection verified."),
-      ).not.toBeInTheDocument();
-      expect(
-        screen.queryByText("Speech connection verified."),
-      ).not.toBeInTheDocument();
-    });
-  });
-
-  it("clears a prior connection result when its endpoint changes", async () => {
-    const user = userEvent.setup();
-    mocks.checkConnection.mockResolvedValue({
-      success: true,
-      message: "Text connection verified.",
-    });
-    render(<AIServicesSettings />);
-
-    await user.click(screen.getByRole("button", { name: "Test Text AI" }));
-    expect(
-      await screen.findByText("Text connection verified."),
-    ).toBeInTheDocument();
-    await user.clear(screen.getByRole("textbox", { name: "Base URL" }));
-
-    expect(
-      screen.queryByText("Text connection verified."),
-    ).not.toBeInTheDocument();
-  });
-
-  it.each([
-    [
-      "ai.max_concurrent_jobs",
-      "1.5",
-      "Max concurrent jobs must be a positive whole number.",
-    ],
-    [
-      "subtitle_ai.batch_size",
-      "2abc",
-      "Subtitle batch size must be a positive whole number.",
-    ],
-    [
-      "subtitle_ai.context_neighbors",
-      "1.5",
-      "Subtitle context lines must be zero or a positive whole number.",
-    ],
-    [
-      "subtitle_ai.asr_chunk_seconds",
-      "120seconds",
-      "Transcription chunk length must be between 60 and 600 seconds.",
-    ],
-  ])(
-    "rejects malformed integer input for %s",
-    async (key, malformedValue, message) => {
-      const user = userEvent.setup();
-      dirtyCount = 1;
-      values[key] = malformedValue;
-      render(<AIServicesSettings />);
-
-      await user.click(screen.getByRole("button", { name: "Save Changes" }));
-
-      expect(mocks.toastError).toHaveBeenCalledWith(message);
-      expect(mocks.save).not.toHaveBeenCalled();
-    },
-  );
-});
diff --git a/web/src/pages/admin-settings/AIServicesSettings.tsx b/web/src/pages/admin-settings/AIServicesSettings.tsx
deleted file mode 100644
index ec8f4f77d..000000000
--- a/web/src/pages/admin-settings/AIServicesSettings.tsx
+++ /dev/null
@@ -1,671 +0,0 @@
-import { useState } from "react";
-import {
-  AudioLines,
-  ChevronDown,
-  CircleAlert,
-  CircleCheck,
-  ExternalLink,
-  Languages,
-} from "lucide-react";
-import { toast } from "sonner";
-
-import type { ConnectionCheckResponse } from "@/api/types";
-import { ConnectionCheckAction } from "@/components/admin/ConnectionCheckAction";
-import { Badge } from "@/components/ui/badge";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useCheckAdminSettingsConnection } from "@/hooks/queries/admin/settings";
-import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { QUOTA_PERIODS, QUOTA_PERIOD_WINDOW_LABELS } from "@/lib/quotaPeriods";
-import { cn } from "@/lib/utils";
-
-import { SaveBar } from "./SaveBar";
-import { SettingField } from "./SettingField";
-
-const TEXT_AI_KEYS = ["ai.base_url", "ai.chat_model", "ai.api_key"] as const;
-const SPEECH_AI_KEYS = [
-  "ai.base_url",
-  "ai.api_key",
-  "ai.asr_base_url",
-  "ai.asr_model",
-  "ai.asr_api_key",
-] as const;
-const LEGACY_AI_KEYS = [
-  "subtitle_ai.base_url",
-  "subtitle_ai.api_key",
-  "subtitle_ai.chat_model",
-  "subtitle_ai.max_concurrent_jobs",
-] as const;
-const KEYS: string[] = [
-  ...TEXT_AI_KEYS,
-  ...LEGACY_AI_KEYS,
-  "ai.asr_base_url",
-  "ai.asr_model",
-  "ai.asr_api_key",
-  "ai.max_concurrent_jobs",
-  "subtitle_ai.enabled",
-  "subtitle_ai.transcribe_enabled",
-  "subtitle_ai.batch_size",
-  "subtitle_ai.context_neighbors",
-  "subtitle_ai.asr_chunk_seconds",
-  "subtitle_ai.transcribe_quota_jobs",
-  "subtitle_ai.transcribe_quota_period",
-  "metadata_ai.enabled",
-  "metadata_ai.on_view",
-];
-
-const TRANSCRIPTION_PRESETS = [
-  {
-    id: "self-hosted",
-    label: "Self-hosted",
-    description:
-      "Speaches or faster-whisper on your network. Replace the hostname with one reachable from the Prairie container.",
-    baseUrl: "http://speaches:8000",
-    model: "deepdml/faster-whisper-large-v3-turbo-ct2",
-  },
-  {
-    id: "groq-turbo",
-    label: "Groq - fast",
-    description: "Hosted whisper-large-v3-turbo. Requires a Groq API key.",
-    baseUrl: "https://api.groq.com/openai",
-    model: "whisper-large-v3-turbo",
-  },
-  {
-    id: "groq-accurate",
-    label: "Groq - accurate",
-    description: "Hosted whisper-large-v3. Requires a Groq API key.",
-    baseUrl: "https://api.groq.com/openai",
-    model: "whisper-large-v3",
-  },
-  {
-    id: "openai",
-    label: "OpenAI",
-    description:
-      "Hosted whisper-1. The transcription key can inherit the Text AI key.",
-    baseUrl: "https://api.openai.com",
-    model: "whisper-1",
-  },
-] as const;
-
-const CHAT_ONLY_GATEWAY_HOSTS = ["openrouter.ai"];
-
-function isChatOnlyGateway(rawURL: string): boolean {
-  const trimmed = rawURL.trim();
-  if (!trimmed) return false;
-  try {
-    const host = new URL(
-      trimmed.includes("://") ? trimmed : `https://${trimmed}`,
-    ).hostname.toLowerCase();
-    return CHAT_ONLY_GATEWAY_HOSTS.some(
-      (gateway) => host === gateway || host.endsWith(`.${gateway}`),
-    );
-  } catch {
-    return false;
-  }
-}
-
-function parseStrictInteger(rawValue: string): number | null {
-  const trimmed = rawValue.trim();
-  if (!/^-?\d+$/.test(trimmed)) return null;
-  const parsed = Number(trimmed);
-  return Number.isSafeInteger(parsed) ? parsed : null;
-}
-
-function SectionHeading({
-  icon: Icon,
-  title,
-  description,
-  status,
-  statusTone = "neutral",
-}: {
-  icon: typeof Languages;
-  title: string;
-  description: string;
-  status: string;
-  statusTone?: "ready" | "warning" | "neutral";
-}) {
-  return (
-    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-      <div className="flex min-w-0 gap-3">
-        <div className="bg-muted mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md">
-          <Icon className="text-muted-foreground size-4" />
-        </div>
-        <div className="min-w-0">
-          <h3 className="text-sm font-semibold">{title}</h3>
-          <p className="text-muted-foreground mt-1 max-w-2xl text-xs leading-relaxed">
-            {description}
-          </p>
-        </div>
-      </div>
-      <Badge
-        variant="outline"
-        className={cn(
-          statusTone === "ready" && "border-green-500/30 text-green-600",
-          statusTone === "warning" && "border-amber-500/30 text-amber-600",
-        )}
-      >
-        {statusTone === "ready" ? (
-          <CircleCheck />
-        ) : statusTone === "warning" ? (
-          <CircleAlert />
-        ) : null}
-        {status}
-      </Badge>
-    </div>
-  );
-}
-
-function RequirementNote({
-  label,
-  ready,
-  detail,
-}: {
-  label: string;
-  ready: boolean;
-  detail: string;
-}) {
-  return (
-    <div className="text-muted-foreground flex items-start gap-2 text-xs leading-relaxed">
-      {ready ? (
-        <CircleCheck className="mt-0.5 size-3.5 shrink-0 text-green-600" />
-      ) : (
-        <CircleAlert className="mt-0.5 size-3.5 shrink-0 text-amber-600" />
-      )}
-      <span>
-        <span className="text-foreground font-medium">{label}</span> - {detail}
-      </span>
-    </div>
-  );
-}
-
-export default function AIServicesSettings() {
-  const form = useSettingsForm({ keys: KEYS });
-  const textCheck = useCheckAdminSettingsConnection();
-  const speechCheck = useCheckAdminSettingsConnection();
-  const [textResult, setTextResult] = useState<ConnectionCheckResponse | null>(
-    null,
-  );
-  const [speechResult, setSpeechResult] =
-    useState<ConnectionCheckResponse | null>(null);
-
-  if (form.isLoading) {
-    return (
-      <div className="space-y-6" role="status" aria-label="Loading AI settings">
-        <Skeleton className="h-8 w-48" />
-        <Skeleton className="h-36 w-full max-w-3xl" />
-        <Skeleton className="h-48 w-full max-w-3xl" />
-        <Skeleton className="h-52 w-full max-w-3xl" />
-        <span className="sr-only">Loading AI settings</span>
-      </div>
-    );
-  }
-
-  const value = (key: string, fallback = "") => form.getValue(key) || fallback;
-  const effectiveValue = (key: string, legacyKey: string, fallback: string) =>
-    value(key, value(legacyKey, fallback));
-  const textBaseURL = effectiveValue(
-    "ai.base_url",
-    "subtitle_ai.base_url",
-    "https://api.openai.com",
-  );
-  const chatModel = effectiveValue(
-    "ai.chat_model",
-    "subtitle_ai.chat_model",
-    "gpt-4o-mini",
-  );
-  const asrBaseURL = value("ai.asr_base_url");
-  const asrModel = value("ai.asr_model", "whisper-1");
-  const textReady = textBaseURL.trim() !== "" && chatModel.trim() !== "";
-  const speechUsesTextEndpoint = asrBaseURL.trim() === "";
-  const speechCheckable =
-    (asrBaseURL.trim() !== "" || textBaseURL.trim() !== "") &&
-    asrModel.trim() !== "";
-  const speechCompatible = !isChatOnlyGateway(
-    speechUsesTextEndpoint ? textBaseURL : asrBaseURL,
-  );
-  const speechReady = speechCheckable && speechCompatible;
-  const descriptionEnabled = value("metadata_ai.enabled", "false") === "true";
-
-  function setValue(key: string, nextValue: string) {
-    form.setValue(key, nextValue);
-    if (TEXT_AI_KEYS.includes(key as (typeof TEXT_AI_KEYS)[number])) {
-      setTextResult(null);
-    }
-    if (SPEECH_AI_KEYS.includes(key as (typeof SPEECH_AI_KEYS)[number])) {
-      setSpeechResult(null);
-    }
-  }
-
-  async function checkTextConnection() {
-    try {
-      setTextResult(
-        await textCheck.mutateAsync({
-          kind: "ai_chat",
-          body: form.buildConnectionCheckRequest([...TEXT_AI_KEYS]),
-        }),
-      );
-    } catch (error) {
-      setTextResult({
-        success: false,
-        message:
-          error instanceof Error
-            ? error.message
-            : "Text AI connection check failed.",
-      });
-    }
-  }
-
-  async function checkSpeechConnection() {
-    try {
-      setSpeechResult(
-        await speechCheck.mutateAsync({
-          kind: "ai_transcription",
-          body: form.buildConnectionCheckRequest([...SPEECH_AI_KEYS]),
-        }),
-      );
-    } catch (error) {
-      setSpeechResult({
-        success: false,
-        message:
-          error instanceof Error
-            ? error.message
-            : "Speech-to-text connection check failed.",
-      });
-    }
-  }
-
-  async function save() {
-    const batchSize = parseStrictInteger(value("subtitle_ai.batch_size", "40"));
-    const contextLines = parseStrictInteger(
-      value("subtitle_ai.context_neighbors", "2"),
-    );
-    const chunkSeconds = parseStrictInteger(
-      value("subtitle_ai.asr_chunk_seconds", "600"),
-    );
-    const quotaJobs = Number.parseInt(
-      value("subtitle_ai.transcribe_quota_jobs", "0"),
-      10,
-    );
-    const maxConcurrent = parseStrictInteger(
-      effectiveValue(
-        "ai.max_concurrent_jobs",
-        "subtitle_ai.max_concurrent_jobs",
-        "2",
-      ),
-    );
-
-    if (!textReady) {
-      toast.error("Text AI base URL and chat model are required.");
-      return;
-    }
-    if (maxConcurrent === null || maxConcurrent < 1) {
-      toast.error("Max concurrent jobs must be a positive whole number.");
-      return;
-    }
-    if (batchSize === null || batchSize < 1) {
-      toast.error("Subtitle batch size must be a positive whole number.");
-      return;
-    }
-    if (contextLines === null || contextLines < 0) {
-      toast.error(
-        "Subtitle context lines must be zero or a positive whole number.",
-      );
-      return;
-    }
-    if (chunkSeconds === null || chunkSeconds < 60 || chunkSeconds > 600) {
-      toast.error(
-        "Transcription chunk length must be between 60 and 600 seconds.",
-      );
-      return;
-    }
-    if (!Number.isInteger(quotaJobs) || quotaJobs < 0) {
-      toast.error(
-        "Transcription limit must be zero or a positive whole number.",
-      );
-      return;
-    }
-    await form.save();
-  }
-
-  function discard() {
-    form.discard();
-    setTextResult(null);
-    setSpeechResult(null);
-  }
-
-  return (
-    <div className="flex h-full max-w-4xl flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">AI Services</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure text translation and speech-to-text independently, then
-          enable only the features that use them.
-        </p>
-      </div>
-
-      <div className="divide-border border-border divide-y border-y">
-        <section className="space-y-5 py-6">
-          <SectionHeading
-            icon={Languages}
-            title="Text translation"
-            description="An OpenAI-compatible chat endpoint used to translate existing text subtitles, descriptions, and taglines. Whisper is not required."
-            status={textReady ? "Configured" : "Not configured"}
-            statusTone={textReady ? "ready" : "warning"}
-          />
-          <div className="ml-0 space-y-1 sm:ml-11">
-            <SettingField
-              label="Base URL"
-              value={textBaseURL}
-              onChange={(next) => setValue("ai.base_url", next)}
-              hint="https://api.openai.com"
-            />
-            <SettingField
-              label="Chat model"
-              value={chatModel}
-              onChange={(next) => setValue("ai.chat_model", next)}
-              hint="gpt-4o-mini, gemini-flash-latest, llama3.1"
-            />
-            <SettingField
-              label="API key"
-              type="password"
-              value={value("ai.api_key")}
-              onChange={(next) => setValue("ai.api_key", next)}
-              sensitiveConfigured={
-                form.sensitiveConfigured.includes("ai.api_key") ||
-                form.sensitiveConfigured.includes("subtitle_ai.api_key")
-              }
-              hint="Optional for keyless local endpoints. Saved keys are reused for tests only when the endpoint host is unchanged."
-            />
-            <ConnectionCheckAction
-              onClick={checkTextConnection}
-              result={textResult}
-              isPending={textCheck.isPending}
-              disabled={form.isSaving || !textReady}
-              label="Test Text AI"
-              pendingLabel="Testing Text AI..."
-            />
-          </div>
-        </section>
-
-        <section className="space-y-5 py-6">
-          <SectionHeading
-            icon={AudioLines}
-            title="Speech-to-text"
-            description="A Whisper-compatible transcription endpoint that returns segment timestamps. Only required when Prairie generates subtitles from audio."
-            status={
-              !speechCompatible
-                ? "Incompatible endpoint"
-                : speechResult?.success
-                  ? "Verified"
-                  : speechUsesTextEndpoint
-                    ? "Using text endpoint"
-                    : speechReady
-                      ? "Configured separately"
-                      : "Not configured"
-            }
-            statusTone={
-              speechUsesTextEndpoint
-                ? "warning"
-                : speechReady
-                  ? "ready"
-                  : "warning"
-            }
-          />
-          <div className="ml-0 space-y-3 sm:ml-11">
-            <div className="flex flex-wrap gap-2">
-              {TRANSCRIPTION_PRESETS.map((preset) => {
-                const active =
-                  asrBaseURL === preset.baseUrl && asrModel === preset.model;
-                return (
-                  <button
-                    key={preset.id}
-                    type="button"
-                    title={preset.description}
-                    aria-pressed={active}
-                    onClick={() => {
-                      setValue("ai.asr_base_url", preset.baseUrl);
-                      setValue("ai.asr_model", preset.model);
-                    }}
-                    className={cn(
-                      "border-border hover:bg-accent rounded-md border px-3 py-1.5 text-xs transition-colors",
-                      active && "border-primary bg-primary/5 text-primary",
-                    )}
-                  >
-                    {preset.label}
-                  </button>
-                );
-              })}
-            </div>
-            <SettingField
-              label="Transcription base URL"
-              value={asrBaseURL}
-              onChange={(next) => setValue("ai.asr_base_url", next)}
-              hint="http://speaches:8000 or https://api.groq.com/openai"
-            />
-            {speechUsesTextEndpoint && (
-              <div className="flex max-w-2xl gap-2 rounded-md border border-amber-500/25 bg-amber-500/5 px-3 py-2 text-xs leading-relaxed">
-                <CircleAlert className="mt-0.5 size-3.5 shrink-0 text-amber-600" />
-                <span>
-                  Uses the Text translation endpoint and API key. This only
-                  works when that provider implements OpenAI-compatible{" "}
-                  <code>/audio/transcriptions</code> with timestamped segments.
-                  Test it before enabling audio generation.
-                </span>
-              </div>
-            )}
-            <SettingField
-              label="Transcription model"
-              value={asrModel}
-              onChange={(next) => setValue("ai.asr_model", next)}
-              hint="whisper-large-v3-turbo or whisper-1"
-            />
-            <SettingField
-              label="Transcription API key"
-              type="password"
-              value={value("ai.asr_api_key")}
-              onChange={(next) => setValue("ai.asr_api_key", next)}
-              sensitiveConfigured={form.sensitiveConfigured.includes(
-                "ai.asr_api_key",
-              )}
-              hint="Optional. A saved or inherited key is reused for tests only when the endpoint host is unchanged."
-            />
-            <p className="text-muted-foreground max-w-2xl text-xs leading-relaxed">
-              For self-hosted services, use a hostname or IP reachable from the
-              Prairie container.
-              <code className="mx-1">localhost</code>
-              points back to Prairie itself.
-            </p>
-            <ConnectionCheckAction
-              onClick={checkSpeechConnection}
-              result={speechResult}
-              isPending={speechCheck.isPending}
-              disabled={form.isSaving || !speechCheckable}
-              label="Test Speech-to-Text"
-              pendingLabel="Testing Speech-to-Text..."
-            />
-          </div>
-        </section>
-
-        <section className="space-y-5 py-6">
-          <div>
-            <h3 className="text-sm font-semibold">Features</h3>
-            <p className="text-muted-foreground mt-1 text-xs leading-relaxed">
-              Generated subtitles and translated metadata are saved once and
-              served to every client through Prairie&apos;s normal pipelines.
-            </p>
-          </div>
-
-          <div className="max-w-3xl divide-y">
-            <div className="py-1">
-              <SettingField
-                label="Subtitle translation"
-                type="toggle"
-                value={value("subtitle_ai.enabled", "false")}
-                onChange={(next) => setValue("subtitle_ai.enabled", next)}
-                hint="Text AI required - Translates an existing text subtitle track. Whisper is not used."
-              />
-              <RequirementNote
-                label="Text AI required"
-                ready={textReady}
-                detail="Uses the chat endpoint above."
-              />
-            </div>
-            <div className="py-1">
-              <SettingField
-                label="Subtitle generation from audio"
-                type="toggle"
-                value={value("subtitle_ai.transcribe_enabled", "false")}
-                onChange={(next) =>
-                  setValue("subtitle_ai.transcribe_enabled", next)
-                }
-                hint="Speech-to-text required - Uses Whisper to create timed subtitles from the selected audio track."
-              />
-              <RequirementNote
-                label="Speech-to-text required"
-                ready={speechReady}
-                detail="Also uses Text AI when the requested subtitle language differs from the audio language."
-              />
-            </div>
-            <div className="py-1">
-              <SettingField
-                label="Description translation"
-                type="toggle"
-                value={value("metadata_ai.enabled", "false")}
-                onChange={(next) => setValue("metadata_ai.enabled", next)}
-                hint="Text AI required - Translates overviews and taglines from the metadata editor or library refresh."
-              />
-              <RequirementNote
-                label="Text AI required"
-                ready={textReady}
-                detail="Whisper is not used."
-              />
-            </div>
-            <div className="py-2">
-              <SettingField
-                label="On-view description translation"
-                type="select"
-                value={value("metadata_ai.on_view", "off")}
-                onChange={(next) => setValue("metadata_ai.on_view", next)}
-                disabled={!descriptionEnabled}
-                options={[
-                  { value: "off", label: "Off" },
-                  {
-                    value: "button",
-                    label: "Translate button on detail pages",
-                  },
-                  { value: "auto", label: "Automatic on view" },
-                ]}
-                hint={
-                  descriptionEnabled
-                    ? "Controls viewer-triggered description translation."
-                    : "Inactive until Description translation is enabled."
-                }
-              />
-            </div>
-          </div>
-        </section>
-
-        <section className="py-6">
-          <details className="group">
-            <summary className="flex cursor-pointer list-none items-center justify-between gap-3">
-              <div>
-                <h3 className="text-sm font-semibold">Advanced</h3>
-                <p className="text-muted-foreground mt-1 text-xs">
-                  Job concurrency, translation batching, transcription chunks,
-                  and account quotas.
-                </p>
-              </div>
-              <ChevronDown className="text-muted-foreground size-4 transition-transform group-open:rotate-180" />
-            </summary>
-            <div className="mt-5 max-w-3xl space-y-1 border-t pt-4">
-              <SettingField
-                label="Max concurrent AI jobs"
-                type="number"
-                value={effectiveValue(
-                  "ai.max_concurrent_jobs",
-                  "subtitle_ai.max_concurrent_jobs",
-                  "2",
-                )}
-                onChange={(next) => setValue("ai.max_concurrent_jobs", next)}
-                hint="Shared by subtitle translation, speech-to-text, and description translation. Changing this value requires a server restart."
-              />
-              <SettingField
-                label="Subtitle batch size"
-                type="number"
-                value={value("subtitle_ai.batch_size", "40")}
-                onChange={(next) => setValue("subtitle_ai.batch_size", next)}
-                hint="Text cues sent in each translation request."
-              />
-              <SettingField
-                label="Subtitle context lines"
-                type="number"
-                value={value("subtitle_ai.context_neighbors", "2")}
-                onChange={(next) =>
-                  setValue("subtitle_ai.context_neighbors", next)
-                }
-                hint="Previous source cues included for scene continuity."
-              />
-              <SettingField
-                label="Transcription chunk length (seconds)"
-                type="number"
-                value={value("subtitle_ai.asr_chunk_seconds", "600")}
-                onChange={(next) =>
-                  setValue("subtitle_ai.asr_chunk_seconds", next)
-                }
-                hint="60-600. Shorter chunks reduce timestamp drift but make more requests."
-              />
-              <SettingField
-                label="Transcription limit per account"
-                type="number"
-                value={value("subtitle_ai.transcribe_quota_jobs", "0")}
-                onChange={(next) =>
-                  setValue("subtitle_ai.transcribe_quota_jobs", next)
-                }
-                hint="0 = unlimited. Profiles share their account's limit."
-              />
-              <SettingField
-                label="Transcription limit period"
-                type="select"
-                value={value("subtitle_ai.transcribe_quota_period", "day")}
-                onChange={(next) =>
-                  setValue("subtitle_ai.transcribe_quota_period", next)
-                }
-                options={QUOTA_PERIODS.map((period) => ({
-                  value: period,
-                  label: `Per ${period} (rolling ${QUOTA_PERIOD_WINDOW_LABELS[period]})`,
-                }))}
-                hint="Rolling window used for the account limit."
-              />
-            </div>
-          </details>
-        </section>
-      </div>
-
-      <div className="bg-muted/30 mt-6 flex flex-col gap-3 rounded-md px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <p className="font-medium">
-            Recommendation embeddings are configured separately
-          </p>
-          <p className="text-muted-foreground mt-0.5 text-xs">
-            Search vectors and recommendations do not use the translation or
-            speech endpoints above.
-          </p>
-        </div>
-        <a
-          href="/admin/recommendations"
-          className="text-primary inline-flex shrink-0 items-center gap-1 text-xs font-medium hover:underline"
-        >
-          Open Recommendations
-          <ExternalLink className="size-3.5" />
-        </a>
-      </div>
-
-      <SaveBar
-        dirtyCount={form.dirtyCount}
-        onSave={() => void save()}
-        onDiscard={discard}
-        isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
-      />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/AISettings.test.tsx b/web/src/pages/admin-settings/AISettings.test.tsx
new file mode 100644
index 000000000..1bd7f863d
--- /dev/null
+++ b/web/src/pages/admin-settings/AISettings.test.tsx
@@ -0,0 +1,478 @@
+import { render as renderDOM, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import AISettings from "./AISettings";
+
+// The page links to Recommendations with a router <Link>, so it needs a router.
+function render(ui: React.ReactElement) {
+  return renderDOM(<MemoryRouter>{ui}</MemoryRouter>);
+}
+
+const mocks = vi.hoisted(() => ({
+  checkConnection: vi.fn(),
+  discard: vi.fn(),
+  save: vi.fn(),
+  setValue: vi.fn(),
+  resetValue: vi.fn(),
+  toastError: vi.fn(),
+  toastSuccess: vi.fn(),
+}));
+
+const values: Record<string, string> = {};
+
+const DEFAULT_VALUES: Record<string, string> = {
+  "ai.base_url": "https://text.example.test",
+  "ai.chat_model": "chat-model",
+  "ai.asr_base_url": "",
+  "ai.asr_model": "whisper-model",
+  "ai.max_concurrent_jobs": "2",
+  "subtitle_ai.base_url": "https://legacy.example.test",
+  "subtitle_ai.chat_model": "legacy-chat-model",
+  "subtitle_ai.max_concurrent_jobs": "3",
+  "subtitle_ai.enabled": "true",
+  "subtitle_ai.transcribe_enabled": "false",
+  "subtitle_ai.batch_size": "40",
+  "subtitle_ai.context_neighbors": "2",
+  "subtitle_ai.asr_chunk_seconds": "600",
+  "subtitle_ai.transcribe_quota_jobs": "0",
+  "subtitle_ai.transcribe_quota_period": "day",
+  "metadata_ai.enabled": "false",
+  "metadata_ai.on_view": "button",
+};
+
+let dirtyCount = 0;
+let dirtyKeys: string[] = [];
+const DEFAULT_SENSITIVE_CONFIGURED = ["subtitle_ai.api_key"];
+let sensitiveConfigured: string[] = DEFAULT_SENSITIVE_CONFIGURED;
+
+const useSettingsFormMock = vi.fn((_options?: { keys: string[] }) => ({
+  isLoading: false,
+  getValue: (key: string) => values[key] ?? "",
+  setValue: mocks.setValue,
+  resetValue: mocks.resetValue,
+  dirtyCount,
+  dirtyKeys,
+  isDirty: (key: string) => dirtyKeys.includes(key),
+  isClearStaged: (key: string) =>
+    dirtyKeys.includes(key) && (values[key] ?? "") === "",
+  save: mocks.save,
+  discard: mocks.discard,
+  isSaving: false,
+  restartRequired: false,
+  sensitiveConfigured,
+  sensitiveManagedByEnv: [],
+  sensitiveStatusReady: true,
+  sensitiveStatusError: false,
+  buildConnectionCheckRequest: vi.fn(() => ({ values: {}, dirty_keys: [] })),
+}));
+
+vi.mock("@/hooks/useSettingsForm", () => ({
+  useSettingsForm: (options: { keys: string[] }) =>
+    useSettingsFormMock(options),
+}));
+
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => new Set(["ai.max_concurrent_jobs"]),
+}));
+
+vi.mock("@/hooks/queries/admin/settings", () => ({
+  useCheckAdminSettingsConnection: () => ({
+    mutateAsync: mocks.checkConnection,
+    isPending: false,
+  }),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    error: mocks.toastError,
+    success: mocks.toastSuccess,
+  },
+}));
+
+/** Opens a model tile's connect panel. */
+async function openTile(
+  user: ReturnType<typeof userEvent.setup>,
+  name: string,
+) {
+  const tile = screen.getByRole("group", { name });
+  await user.click(
+    within(tile).getByRole("button", { name: /Connect|Manage/ }),
+  );
+  return screen.getByRole("group", { name });
+}
+
+describe("AISettings", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    dirtyCount = 0;
+    dirtyKeys = [];
+    sensitiveConfigured = DEFAULT_SENSITIVE_CONFIGURED;
+    for (const mock of Object.values(mocks)) mock.mockReset();
+    for (const key of Object.keys(values)) delete values[key];
+    Object.assign(values, DEFAULT_VALUES);
+  });
+
+  it("heads the page and groups models and features", () => {
+    render(<AISettings />);
+
+    expect(
+      screen.getByRole("heading", { level: 1, name: "AI Services" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        "Optional language models for subtitle translation, transcription, and descriptions.",
+      ),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Models" })).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Features" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("group", { name: "Text model" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("group", { name: "Speech-to-text" }),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps model credentials behind the tile until it is expanded", async () => {
+    const user = userEvent.setup();
+    render(<AISettings />);
+
+    expect(screen.queryByLabelText("Model")).not.toBeInTheDocument();
+
+    const tile = await openTile(user, "Text model");
+    expect(tile).toHaveAttribute("data-expanded", "true");
+    expect(within(tile).getByLabelText("Base URL")).toBeInTheDocument();
+    expect(within(tile).getByLabelText("Model")).toBeInTheDocument();
+
+    await user.click(within(tile).getByRole("button", { name: "Close" }));
+    expect(screen.queryByLabelText("Base URL")).not.toBeInTheDocument();
+  });
+
+  it("falls back to the legacy subtitle_ai values", async () => {
+    const user = userEvent.setup();
+    values["ai.base_url"] = "";
+    values["ai.chat_model"] = "";
+
+    render(<AISettings />);
+    await openTile(user, "Text model");
+
+    expect(
+      screen.getByDisplayValue("https://legacy.example.test"),
+    ).toBeInTheDocument();
+    expect(screen.getByDisplayValue("legacy-chat-model")).toBeInTheDocument();
+  });
+
+  it("flags a chat-only endpoint as unable to transcribe", () => {
+    values["ai.base_url"] = "https://openrouter.ai/api";
+
+    render(<AISettings />);
+
+    expect(screen.getByText("Cannot transcribe")).toBeInTheDocument();
+    expect(
+      screen.getByRole("group", { name: "Speech-to-text" }),
+    ).toHaveAttribute("data-state", "error");
+  });
+
+  it("applies a speech-to-text preset", async () => {
+    const user = userEvent.setup();
+    render(<AISettings />);
+    await openTile(user, "Speech-to-text");
+
+    await user.click(screen.getByRole("button", { name: "Groq - fast" }));
+
+    expect(mocks.setValue).toHaveBeenCalledWith(
+      "ai.asr_base_url",
+      "https://api.groq.com/openai",
+    );
+    expect(mocks.setValue).toHaveBeenCalledWith(
+      "ai.asr_model",
+      "whisper-large-v3-turbo",
+    );
+  });
+
+  it("forces a tile open while it holds a staged change", () => {
+    dirtyKeys = ["ai.chat_model"];
+    dirtyCount = 1;
+
+    render(<AISettings />);
+
+    expect(screen.getByRole("group", { name: "Text model" })).toHaveAttribute(
+      "data-expanded",
+      "true",
+    );
+    expect(screen.getByLabelText("Model")).toBeInTheDocument();
+  });
+
+  it("leaves the speech tile closed when only the shared text endpoint is staged", () => {
+    // The transcription check falls back to the text endpoint, so its keys are
+    // part of that request — but they are edited in the text tile, not here.
+    dirtyKeys = ["ai.base_url", "ai.api_key"];
+    dirtyCount = 2;
+
+    render(<AISettings />);
+
+    expect(screen.getByRole("group", { name: "Text model" })).toHaveAttribute(
+      "data-expanded",
+      "true",
+    );
+    expect(
+      screen.getByRole("group", { name: "Speech-to-text" }),
+    ).not.toHaveAttribute("data-expanded");
+  });
+
+  it("gives the model panel actions a resting affordance instead of ghost text", async () => {
+    const user = userEvent.setup();
+    render(<AISettings />);
+
+    const tile = await openTile(user, "Text model");
+    expect(
+      within(tile).getByRole("button", { name: "Test text model" }),
+    ).toHaveAttribute("data-variant", "secondary");
+    expect(within(tile).getByRole("button", { name: "Close" })).toHaveAttribute(
+      "data-variant",
+      "outline",
+    );
+  });
+
+  it("says the features run on demand rather than on a schedule", () => {
+    render(<AISettings />);
+
+    expect(
+      screen.getByText(/Nothing here runs on a schedule/),
+    ).toBeInTheDocument();
+  });
+
+  it("blocks turning on a feature whose model cannot serve it", () => {
+    // A chat-only endpoint cannot transcribe, so speech-to-text is not ready.
+    values["ai.base_url"] = "https://openrouter.ai/api";
+
+    render(<AISettings />);
+
+    expect(
+      screen.getByRole("switch", { name: "Create subtitles from audio" }),
+    ).toBeDisabled();
+  });
+
+  it("still lets an enabled feature be turned off after its model degrades", () => {
+    values["ai.base_url"] = "https://openrouter.ai/api";
+    values["subtitle_ai.transcribe_enabled"] = "true";
+
+    render(<AISettings />);
+
+    expect(
+      screen.getByRole("switch", { name: "Create subtitles from audio" }),
+    ).toBeEnabled();
+  });
+
+  it("says nothing under a feature whose model is ready", () => {
+    render(<AISettings />);
+
+    expect(screen.getByText("Translate subtitles")).toBeInTheDocument();
+    expect(screen.queryByText("Needs the text model")).not.toBeInTheDocument();
+    expect(screen.queryByText("Needs speech-to-text")).not.toBeInTheDocument();
+  });
+
+  it("names the missing model when a feature cannot run", () => {
+    values["ai.base_url"] = "https://openrouter.ai/api";
+
+    render(<AISettings />);
+
+    // A chat-only endpoint cannot transcribe, so the speech feature is unmet.
+    expect(screen.getByText("Needs speech-to-text")).toBeInTheDocument();
+  });
+
+  it("keeps AI tuning behind a collapsed advanced disclosure", async () => {
+    const user = userEvent.setup();
+    render(<AISettings />);
+
+    const toggle = screen.getByRole("button", {
+      name: /Advanced · 6 settings/,
+    });
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    expect(
+      screen.queryByLabelText("Jobs running at once"),
+    ).not.toBeInTheDocument();
+
+    await user.click(toggle);
+
+    expect(screen.getByLabelText("Jobs running at once")).toBeInTheDocument();
+    // Restart-only keys carry the badge instead of hint text.
+    expect(
+      screen.getAllByLabelText("Takes effect after a server restart").length,
+    ).toBe(1);
+  });
+
+  it("separates server-wide tuning from the per-account limit", async () => {
+    const user = userEvent.setup();
+    render(<AISettings />);
+
+    await user.click(
+      screen.getByRole("button", { name: /Advanced · 6 settings/ }),
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Server-wide tuning" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Per-account limits" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Counted per login account, shared by every profile on it.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("auto-expands the advanced section around a staged change", () => {
+    dirtyKeys = ["subtitle_ai.batch_size"];
+    dirtyCount = 1;
+
+    render(<AISettings />);
+
+    // A staged change auto-expands the section so the save bar cannot block on
+    // a hidden field.
+    expect(
+      screen.getByRole("button", { name: /Advanced · 6 settings/ }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByLabelText("Subtitle lines per request"),
+    ).toBeInTheDocument();
+  });
+
+  it("offers Unlimited instead of a zero sentinel for the transcription allowance", async () => {
+    const user = userEvent.setup();
+    render(<AISettings />);
+
+    await user.click(
+      screen.getByRole("button", { name: /Advanced · 6 settings/ }),
+    );
+
+    expect(screen.getByRole("checkbox", { name: "Unlimited" })).toBeChecked();
+  });
+
+  it.each([
+    [
+      "ai.max_concurrent_jobs",
+      "1.5",
+      "Max concurrent jobs must be a positive whole number.",
+    ],
+    [
+      "subtitle_ai.batch_size",
+      "2abc",
+      "Subtitle batch size must be a positive whole number.",
+    ],
+    [
+      "subtitle_ai.context_neighbors",
+      "1.5",
+      "Subtitle context lines must be zero or a positive whole number.",
+    ],
+    [
+      "subtitle_ai.asr_chunk_seconds",
+      "120seconds",
+      "Transcription chunk length must be between 60 and 600 seconds.",
+    ],
+    // parseInt would stop at the first non-digit and let "5abc" through as 5,
+    // saving a quota nobody typed.
+    [
+      "subtitle_ai.transcribe_quota_jobs",
+      "5abc",
+      "Transcription limit must be zero or a positive whole number.",
+    ],
+    [
+      "subtitle_ai.transcribe_quota_jobs",
+      "1.5",
+      "Transcription limit must be zero or a positive whole number.",
+    ],
+  ])(
+    "rejects malformed integer input for %s",
+    async (key, malformedValue, message) => {
+      const user = userEvent.setup();
+      dirtyCount = 1;
+      values[key] = malformedValue;
+      render(<AISettings />);
+
+      await user.click(screen.getByRole("button", { name: "Save" }));
+
+      expect(mocks.toastError).toHaveBeenCalledWith(message);
+      expect(mocks.save).not.toHaveBeenCalled();
+    },
+  );
+
+  it("runs the text model check against the staged values", async () => {
+    const user = userEvent.setup();
+    mocks.checkConnection.mockResolvedValue({
+      success: true,
+      message: "Text connection verified.",
+    });
+    render(<AISettings />);
+    await openTile(user, "Text model");
+
+    await user.click(screen.getByRole("button", { name: "Test text model" }));
+
+    expect(
+      await screen.findByText(/Text connection verified\./),
+    ).toBeInTheDocument();
+    expect(mocks.checkConnection).toHaveBeenCalledWith(
+      expect.objectContaining({ kind: "ai_chat" }),
+    );
+  });
+
+  it("emptying a saved AI key reverts the draft instead of staging an empty value", async () => {
+    const user = userEvent.setup();
+    values["ai.api_key"] = "draft";
+    render(<AISettings />);
+    const tile = await openTile(user, "Text model");
+
+    // No Replace step: the saved key is a masked, always-editable input.
+    const input = within(tile).getByLabelText("API key");
+    expect(input).toHaveAttribute("placeholder", "••••••••••••");
+    await user.clear(input);
+
+    // Staging "" would erase the stored key on the next save.
+    expect(mocks.setValue).not.toHaveBeenCalledWith("ai.api_key", "");
+    expect(mocks.resetValue).toHaveBeenCalledWith("ai.api_key");
+  });
+
+  it("clears the legacy key alongside the modern one", async () => {
+    const user = userEvent.setup();
+    render(<AISettings />);
+    const tile = await openTile(user, "Text model");
+
+    await user.click(
+      within(tile).getByRole("button", { name: "Clear saved value" }),
+    );
+
+    // An empty `ai.api_key` falls back to `subtitle_ai.api_key`, so clearing
+    // only the modern key would leave the old secret in force.
+    expect(mocks.setValue).toHaveBeenCalledWith("ai.api_key", "");
+    expect(mocks.setValue).toHaveBeenCalledWith("subtitle_ai.api_key", "");
+  });
+
+  it("says what a staged clear of the speech key will do", async () => {
+    const user = userEvent.setup();
+    dirtyKeys = ["ai.asr_api_key"];
+    dirtyCount = 1;
+    values["ai.asr_api_key"] = "";
+    sensitiveConfigured = ["ai.asr_api_key"];
+
+    render(<AISettings />);
+    const tile = screen.getByRole("group", { name: "Speech-to-text" });
+
+    // A staged edit holds its tile open, so no expansion step is needed.
+    expect(within(tile).getByLabelText("API key")).toHaveAttribute(
+      "placeholder",
+      "Will be cleared on save",
+    );
+    expect(
+      within(tile).getByText(
+        "Save clears the stored value; type to set a new one instead.",
+      ),
+    ).toBeInTheDocument();
+    await user.click(
+      within(tile).getByRole("button", { name: "Keep saved value" }),
+    );
+    expect(mocks.resetValue).toHaveBeenCalledWith("ai.asr_api_key");
+  });
+});
diff --git a/web/src/pages/admin-settings/AISettings.tsx b/web/src/pages/admin-settings/AISettings.tsx
new file mode 100644
index 000000000..c038794a5
--- /dev/null
+++ b/web/src/pages/admin-settings/AISettings.tsx
@@ -0,0 +1,1005 @@
+import { useState, type ReactNode } from "react";
+import { Link } from "react-router";
+import { AudioLines, CircleAlert, Languages } from "lucide-react";
+import { toast } from "sonner";
+
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+import { LimitField } from "@/components/settings/LimitField";
+import {
+  ProviderTile,
+  ProviderTileGrid,
+} from "@/components/settings/ProviderTile";
+import type { ProviderTileState } from "@/components/settings/ProviderTile";
+import { SecretField } from "@/components/settings/SecretField";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import { SettingsSubheading } from "@/components/settings/SettingsSubheading";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useCheckAdminSettingsConnection } from "@/hooks/queries/admin/settings";
+import { useRestartKeys, type RestartKeyMatcher } from "@/hooks/useRestartKeys";
+import { useSettingsForm } from "@/hooks/useSettingsForm";
+import { QUOTA_PERIODS, QUOTA_PERIOD_WINDOW_LABELS } from "@/lib/quotaPeriods";
+import { cn } from "@/lib/utils";
+
+import { FieldGroup } from "./FieldGroup";
+import { SaveBar } from "./SaveBar";
+import { SettingField, SettingFieldStatus } from "./SettingField";
+
+// ---------------------------------------------------------------------------
+// Setting keys
+// ---------------------------------------------------------------------------
+
+const TEXT_AI_KEYS = ["ai.base_url", "ai.chat_model", "ai.api_key"] as const;
+/**
+ * What the transcription connection check has to send: the speech endpoint
+ * plus the text endpoint it falls back to when no ASR base URL is set.
+ */
+const SPEECH_AI_KEYS = [
+  "ai.base_url",
+  "ai.api_key",
+  "ai.asr_base_url",
+  "ai.asr_model",
+  "ai.asr_api_key",
+] as const;
+/**
+ * The keys the speech tile actually renders. Only these decide whether it is
+ * held open by a staged edit — the shared text keys are edited in the text
+ * tile, so counting them here would expand both tiles at once.
+ */
+const SPEECH_ONLY_KEYS = [
+  "ai.asr_base_url",
+  "ai.asr_model",
+  "ai.asr_api_key",
+] as const;
+/**
+ * Pre-`ai.*` keys. They are still read as a fallback so a server that was
+ * configured before the rename keeps working until the modern key is saved.
+ */
+const LEGACY_AI_KEYS = [
+  "subtitle_ai.base_url",
+  "subtitle_ai.api_key",
+  "subtitle_ai.chat_model",
+  "subtitle_ai.max_concurrent_jobs",
+] as const;
+
+const AI_FEATURE_KEYS = [
+  "subtitle_ai.enabled",
+  "subtitle_ai.transcribe_enabled",
+  "metadata_ai.enabled",
+  "metadata_ai.on_view",
+];
+
+const AI_ADVANCED_KEYS = [
+  "ai.max_concurrent_jobs",
+  "subtitle_ai.batch_size",
+  "subtitle_ai.context_neighbors",
+  "subtitle_ai.asr_chunk_seconds",
+  "subtitle_ai.transcribe_quota_jobs",
+  "subtitle_ai.transcribe_quota_period",
+];
+
+const KEYS: string[] = Array.from(
+  new Set([
+    ...TEXT_AI_KEYS,
+    ...SPEECH_AI_KEYS,
+    ...LEGACY_AI_KEYS,
+    ...AI_FEATURE_KEYS,
+    ...AI_ADVANCED_KEYS,
+  ]),
+);
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const TRANSCRIPTION_PRESETS = [
+  {
+    id: "self-hosted",
+    label: "Self-hosted",
+    description:
+      "Speaches or faster-whisper on your network. Replace the hostname with one reachable from the Silo container.",
+    baseUrl: "http://speaches:8000",
+    model: "deepdml/faster-whisper-large-v3-turbo-ct2",
+  },
+  {
+    id: "groq-turbo",
+    label: "Groq - fast",
+    description: "Hosted whisper-large-v3-turbo. Requires a Groq API key.",
+    baseUrl: "https://api.groq.com/openai",
+    model: "whisper-large-v3-turbo",
+  },
+  {
+    id: "groq-accurate",
+    label: "Groq - accurate",
+    description: "Hosted whisper-large-v3. Requires a Groq API key.",
+    baseUrl: "https://api.groq.com/openai",
+    model: "whisper-large-v3",
+  },
+  {
+    id: "openai",
+    label: "OpenAI",
+    description:
+      "Hosted whisper-1. The transcription key can inherit the Text AI key.",
+    baseUrl: "https://api.openai.com",
+    model: "whisper-1",
+  },
+] as const;
+
+const CHAT_ONLY_GATEWAY_HOSTS = ["openrouter.ai"];
+
+function isChatOnlyGateway(rawURL: string): boolean {
+  const trimmed = rawURL.trim();
+  if (!trimmed) return false;
+  try {
+    const host = new URL(
+      trimmed.includes("://") ? trimmed : `https://${trimmed}`,
+    ).hostname.toLowerCase();
+    return CHAT_ONLY_GATEWAY_HOSTS.some(
+      (gateway) => host === gateway || host.endsWith(`.${gateway}`),
+    );
+  } catch {
+    return false;
+  }
+}
+
+function hostLabel(rawURL: string): string {
+  const trimmed = rawURL.trim();
+  if (!trimmed) return "";
+  try {
+    return new URL(trimmed.includes("://") ? trimmed : `https://${trimmed}`)
+      .host;
+  } catch {
+    return trimmed;
+  }
+}
+
+function parseStrictInteger(rawValue: string): number | null {
+  const trimmed = rawValue.trim();
+  if (!/^-?\d+$/.test(trimmed)) return null;
+  const parsed = Number(trimmed);
+  return Number.isSafeInteger(parsed) ? parsed : null;
+}
+
+/** Result of the last connection check, kept in memory for the tile and strip. */
+interface AITestState {
+  ok: boolean;
+  message: string;
+  at: number;
+  durationMs: number;
+}
+
+function testedLabel(test: AITestState): string {
+  const seconds = Math.max(0, Math.round((Date.now() - test.at) / 1000));
+  const ago =
+    seconds < 60 ? `${seconds}s ago` : `${Math.round(seconds / 60)}m ago`;
+  return `Tested ${ago} · ${test.durationMs} ms`;
+}
+
+/**
+ * The action row shared by both model tiles. Both controls carry a border or a
+ * fill at rest: a `ghost` button reads as plain text until it is hovered, which
+ * hid Close from admins who never hovered it.
+ */
+function ModelPanelActions({
+  testLabel,
+  pendingLabel,
+  onTest,
+  isTesting,
+  testDisabled,
+  onCollapse,
+  canCollapse,
+  test,
+}: {
+  testLabel: string;
+  pendingLabel: string;
+  onTest: () => void;
+  isTesting: boolean;
+  testDisabled: boolean;
+  onCollapse: () => void;
+  /**
+   * False while a staged edit holds the tile open. Collapsing then does
+   * nothing, so the button is left out rather than shown as a dead control.
+   */
+  canCollapse: boolean;
+  test: AITestState | undefined;
+}) {
+  return (
+    // Buttons right-aligned to match the collapsed tile's Manage button (and
+    // the shared ProviderPanelActions); the test status takes the left side.
+    <div className="mt-3.5 flex flex-wrap items-center justify-end gap-2">
+      {test ? (
+        <span
+          role="status"
+          aria-live="polite"
+          className={cn(
+            "mr-auto text-[11.5px]",
+            test.ok
+              ? "text-muted-foreground"
+              : "text-amber-600 dark:text-amber-400",
+          )}
+        >
+          {test.ok ? `${test.message} · ${testedLabel(test)}` : test.message}
+        </span>
+      ) : null}
+      <Button
+        type="button"
+        size="sm"
+        variant="secondary"
+        onClick={onTest}
+        disabled={testDisabled || isTesting}
+      >
+        {isTesting ? pendingLabel : testLabel}
+      </Button>
+      {canCollapse ? (
+        <Button type="button" size="sm" variant="outline" onClick={onCollapse}>
+          Close
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * A labelled cluster inside the Advanced disclosure. The tuning fields mix two
+ * scopes — server-wide dispatch/batching and a per-login-account quota — and
+ * nothing on the row itself says which is which, so the scope is stated once
+ * per cluster instead of being repeated (or omitted) field by field.
+ *
+ * One element per cluster also means the disclosure's child rule draws a single
+ * hairline between the two, with the rows keeping their own inside each.
+ */
+function TuningScope({
+  label,
+  caption,
+  children,
+}: {
+  label: string;
+  caption: string;
+  children: ReactNode;
+}) {
+  return (
+    <div>
+      <SettingsSubheading caption={caption}>{label}</SettingsSubheading>
+      {children}
+    </div>
+  );
+}
+
+/** Note shown on a model tile whose values are staged in the page's save bar. */
+function PendingSaveNote({ dirty }: { dirty: boolean }) {
+  if (!dirty) return null;
+  return (
+    <p className="text-muted-foreground mt-2 text-xs">
+      Unsaved. Test uses what is typed here.
+    </p>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Model tiles
+// ---------------------------------------------------------------------------
+
+function TextModelTile({
+  baseURL,
+  chatModel,
+  apiKeyValue,
+  apiKeyConfigured,
+  apiKeyCleared,
+  ready,
+  dirty,
+  restartKeys,
+  onChange,
+  onReset,
+  onClearApiKey,
+  onTest,
+  isTesting,
+  test,
+  expanded,
+  onExpand,
+  onCollapse,
+}: {
+  baseURL: string;
+  chatModel: string;
+  apiKeyValue: string;
+  apiKeyConfigured: boolean;
+  apiKeyCleared: boolean;
+  ready: boolean;
+  dirty: boolean;
+  restartKeys: RestartKeyMatcher;
+  onChange: (key: string, value: string) => void;
+  onReset: (key: string) => void;
+  onClearApiKey: () => void;
+  onTest: () => void;
+  isTesting: boolean;
+  test: AITestState | undefined;
+  expanded: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+}) {
+  const failed = test != null && !test.ok;
+  const state: ProviderTileState = expanded
+    ? "editing"
+    : failed
+      ? "error"
+      : ready
+        ? "connected"
+        : "not_connected";
+
+  return (
+    <ProviderTile
+      name="Text model"
+      tagline="Subtitle text, descriptions, and taglines"
+      logo={
+        <Languages
+          className="text-muted-foreground size-4"
+          aria-hidden="true"
+        />
+      }
+      state={state}
+      statePill={!expanded && ready && !test?.ok ? "Configured" : undefined}
+      meta={
+        expanded
+          ? undefined
+          : failed
+            ? test.message
+            : ready
+              ? `${chatModel} · ${hostLabel(baseURL)}`
+              : "Base URL and model required"
+      }
+      expanded={expanded}
+      primaryAction={{ label: ready ? "Manage" : "Connect", onClick: onExpand }}
+    >
+      <p className="text-muted-foreground mb-1 text-xs">
+        Any chat endpoint that speaks the OpenAI API.
+      </p>
+      <SettingField
+        label="Base URL"
+        value={baseURL}
+        onChange={(next) => onChange("ai.base_url", next)}
+        hint="https://api.openai.com"
+        restartRequired={restartKeys.has("ai.base_url")}
+      />
+      <SettingField
+        label="Model"
+        value={chatModel}
+        onChange={(next) => onChange("ai.chat_model", next)}
+        hint="gpt-4o-mini, gemini-flash-latest, llama3.1"
+        restartRequired={restartKeys.has("ai.chat_model")}
+      />
+      <SecretField
+        label="API key"
+        value={apiKeyValue}
+        configured={apiKeyConfigured}
+        onChange={(next) => onChange("ai.api_key", next)}
+        // Without this, "Keep saved value" would stage an empty string and the
+        // next save would erase the stored key.
+        onKeep={() => onReset("ai.api_key")}
+        // A local endpoint that needs no key has to be able to get back to
+        // having none, and nothing else on this page erases one.
+        onClear={onClearApiKey}
+        cleared={apiKeyCleared}
+        hint="Empty for a local endpoint that needs none."
+        restartRequired={restartKeys.has("ai.api_key")}
+      />
+      <ModelPanelActions
+        testLabel="Test text model"
+        pendingLabel="Testing text model..."
+        onTest={onTest}
+        isTesting={isTesting}
+        testDisabled={!ready}
+        onCollapse={onCollapse}
+        canCollapse={!dirty}
+        test={test}
+      />
+      <PendingSaveNote dirty={dirty} />
+    </ProviderTile>
+  );
+}
+
+function SpeechModelTile({
+  asrBaseURL,
+  asrModel,
+  apiKeyValue,
+  apiKeyConfigured,
+  apiKeyCleared,
+  usesTextEndpoint,
+  compatible,
+  ready,
+  checkable,
+  dirty,
+  restartKeys,
+  onChange,
+  onReset,
+  onClearApiKey,
+  onTest,
+  isTesting,
+  test,
+  expanded,
+  onExpand,
+  onCollapse,
+}: {
+  asrBaseURL: string;
+  asrModel: string;
+  apiKeyValue: string;
+  apiKeyConfigured: boolean;
+  apiKeyCleared: boolean;
+  usesTextEndpoint: boolean;
+  compatible: boolean;
+  ready: boolean;
+  checkable: boolean;
+  dirty: boolean;
+  restartKeys: RestartKeyMatcher;
+  onChange: (key: string, value: string) => void;
+  onReset: (key: string) => void;
+  onClearApiKey: () => void;
+  onTest: () => void;
+  isTesting: boolean;
+  test: AITestState | undefined;
+  expanded: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+}) {
+  const failed = test != null && !test.ok;
+  const statePill = !compatible
+    ? "Cannot transcribe"
+    : test?.ok
+      ? "Verified"
+      : usesTextEndpoint
+        ? "Shared endpoint"
+        : ready
+          ? "Configured"
+          : undefined;
+  const state: ProviderTileState = expanded
+    ? "editing"
+    : !compatible || failed
+      ? "error"
+      : ready && !usesTextEndpoint
+        ? "connected"
+        : "not_connected";
+
+  return (
+    <ProviderTile
+      name="Speech-to-text"
+      tagline="Writes subtitles from an audio track"
+      logo={
+        <AudioLines
+          className="text-muted-foreground size-4"
+          aria-hidden="true"
+        />
+      }
+      state={state}
+      statePill={expanded ? undefined : statePill}
+      meta={
+        expanded
+          ? undefined
+          : !compatible
+            ? "This endpoint only serves chat completions."
+            : failed
+              ? test.message
+              : asrBaseURL.trim() !== ""
+                ? `${asrModel} · ${hostLabel(asrBaseURL)}`
+                : undefined
+      }
+      expanded={expanded}
+      primaryAction={{ label: ready ? "Manage" : "Connect", onClick: onExpand }}
+    >
+      <p className="text-muted-foreground mb-1 text-xs">
+        A Whisper-compatible endpoint that returns timestamps.
+      </p>
+      <div className="flex flex-wrap gap-2 py-2">
+        {TRANSCRIPTION_PRESETS.map((preset) => {
+          const active =
+            asrBaseURL === preset.baseUrl && asrModel === preset.model;
+          return (
+            <button
+              key={preset.id}
+              type="button"
+              title={preset.description}
+              aria-pressed={active}
+              onClick={() => {
+                onChange("ai.asr_base_url", preset.baseUrl);
+                onChange("ai.asr_model", preset.model);
+              }}
+              className={cn(
+                "border-border hover:bg-accent rounded-md border px-3 py-1.5 text-xs transition-colors",
+                active && "border-primary bg-primary/5 text-primary",
+              )}
+            >
+              {preset.label}
+            </button>
+          );
+        })}
+      </div>
+      <SettingField
+        label="Base URL"
+        value={asrBaseURL}
+        onChange={(next) => onChange("ai.asr_base_url", next)}
+        hint="http://speaches:8000 or https://api.groq.com/openai"
+        restartRequired={restartKeys.has("ai.asr_base_url")}
+      />
+      {usesTextEndpoint && (
+        <div className="my-2 flex gap-2 rounded-md border border-amber-500/25 bg-amber-500/5 px-3 py-2 text-xs leading-relaxed">
+          <CircleAlert className="mt-0.5 size-3.5 shrink-0 text-amber-600" />
+          <span>
+            Empty sends audio to the text endpoint, which may not transcribe.
+            Test it first.
+          </span>
+        </div>
+      )}
+      <SettingField
+        label="Model"
+        value={asrModel}
+        onChange={(next) => onChange("ai.asr_model", next)}
+        hint="whisper-large-v3-turbo or whisper-1"
+        restartRequired={restartKeys.has("ai.asr_model")}
+      />
+      <SecretField
+        label="API key"
+        value={apiKeyValue}
+        configured={apiKeyConfigured}
+        onChange={(next) => onChange("ai.asr_api_key", next)}
+        onKeep={() => onReset("ai.asr_api_key")}
+        // Empty is a real configuration here, not just "unset": it is how the
+        // speech endpoint goes back to borrowing the text model's key.
+        onClear={onClearApiKey}
+        cleared={apiKeyCleared}
+        hint="Empty reuses the text model key."
+        restartRequired={restartKeys.has("ai.asr_api_key")}
+      />
+      <ModelPanelActions
+        testLabel="Test speech-to-text"
+        pendingLabel="Testing speech-to-text..."
+        onTest={onTest}
+        isTesting={isTesting}
+        testDisabled={!checkable}
+        onCollapse={onCollapse}
+        canCollapse={!dirty}
+        test={test}
+      />
+      <p className="text-muted-foreground mt-2 text-xs">
+        Use a host the Silo container can reach;
+        <code className="mx-1">localhost</code>is Silo itself.
+      </p>
+      <PendingSaveNote dirty={dirty} />
+    </ProviderTile>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+
+export default function AISettings() {
+  const form = useSettingsForm({ keys: KEYS });
+  const restartKeys = useRestartKeys();
+  const textCheck = useCheckAdminSettingsConnection();
+  const speechCheck = useCheckAdminSettingsConnection();
+  const [textResult, setTextResult] = useState<AITestState | undefined>(
+    undefined,
+  );
+  const [speechResult, setSpeechResult] = useState<AITestState | undefined>(
+    undefined,
+  );
+  const [expandedTile, setExpandedTile] = useState<string | null>(null);
+
+  if (form.isLoading) {
+    return (
+      <div
+        className="max-w-5xl space-y-6"
+        role="status"
+        aria-label="Loading AI Services settings"
+      >
+        <Skeleton className="h-9 w-48" />
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-40 w-full" />
+        <Skeleton className="h-64 w-full" />
+        <span className="sr-only">Loading AI Services settings</span>
+      </div>
+    );
+  }
+
+  const value = (key: string, fallback = "") => form.getValue(key) || fallback;
+  // Legacy `subtitle_ai.*` values stay authoritative until the modern `ai.*`
+  // key holds something, exactly as the old AI Services tab read them.
+  const effectiveValue = (key: string, legacyKey: string, fallback: string) =>
+    value(key, value(legacyKey, fallback));
+
+  const textBaseURL = effectiveValue(
+    "ai.base_url",
+    "subtitle_ai.base_url",
+    "https://api.openai.com",
+  );
+  const chatModel = effectiveValue(
+    "ai.chat_model",
+    "subtitle_ai.chat_model",
+    "gpt-4o-mini",
+  );
+  const asrBaseURL = value("ai.asr_base_url");
+  const asrModel = value("ai.asr_model", "whisper-1");
+  const textReady = textBaseURL.trim() !== "" && chatModel.trim() !== "";
+  const speechUsesTextEndpoint = asrBaseURL.trim() === "";
+  const speechCheckable =
+    (asrBaseURL.trim() !== "" || textBaseURL.trim() !== "") &&
+    asrModel.trim() !== "";
+  const speechCompatible = !isChatOnlyGateway(
+    speechUsesTextEndpoint ? textBaseURL : asrBaseURL,
+  );
+  const speechReady = speechCheckable && speechCompatible;
+  const subtitleTranslateEnabled =
+    value("subtitle_ai.enabled", "false") === "true";
+  const transcribeEnabled =
+    value("subtitle_ai.transcribe_enabled", "false") === "true";
+  const descriptionEnabled = value("metadata_ai.enabled", "false") === "true";
+  const textDirty = TEXT_AI_KEYS.some((key) => form.isDirty(key));
+  const speechDirty = SPEECH_ONLY_KEYS.some((key) => form.isDirty(key));
+  const advancedChangedCount = AI_ADVANCED_KEYS.filter((key) =>
+    form.isDirty(key),
+  ).length;
+
+  function setValue(key: string, nextValue: string) {
+    form.setValue(key, nextValue);
+    if (TEXT_AI_KEYS.includes(key as (typeof TEXT_AI_KEYS)[number])) {
+      setTextResult(undefined);
+    }
+    if (SPEECH_AI_KEYS.includes(key as (typeof SPEECH_AI_KEYS)[number])) {
+      setSpeechResult(undefined);
+    }
+  }
+
+  async function checkTextConnection() {
+    const started = Date.now();
+    try {
+      const result = await textCheck.mutateAsync({
+        kind: "ai_chat",
+        body: form.buildConnectionCheckRequest([...TEXT_AI_KEYS]),
+      });
+      setTextResult({
+        ok: result.success,
+        message: result.message,
+        at: Date.now(),
+        durationMs: Date.now() - started,
+      });
+    } catch (error) {
+      setTextResult({
+        ok: false,
+        message:
+          error instanceof Error
+            ? error.message
+            : "Text model connection check failed.",
+        at: Date.now(),
+        durationMs: Date.now() - started,
+      });
+    }
+  }
+
+  async function checkSpeechConnection() {
+    const started = Date.now();
+    try {
+      const result = await speechCheck.mutateAsync({
+        kind: "ai_transcription",
+        body: form.buildConnectionCheckRequest([...SPEECH_AI_KEYS]),
+      });
+      setSpeechResult({
+        ok: result.success,
+        message: result.message,
+        at: Date.now(),
+        durationMs: Date.now() - started,
+      });
+    } catch (error) {
+      setSpeechResult({
+        ok: false,
+        message:
+          error instanceof Error
+            ? error.message
+            : "Speech-to-text connection check failed.",
+        at: Date.now(),
+        durationMs: Date.now() - started,
+      });
+    }
+  }
+
+  async function save() {
+    const batchSize = parseStrictInteger(value("subtitle_ai.batch_size", "40"));
+    const contextLines = parseStrictInteger(
+      value("subtitle_ai.context_neighbors", "2"),
+    );
+    const chunkSeconds = parseStrictInteger(
+      value("subtitle_ai.asr_chunk_seconds", "600"),
+    );
+    const quotaJobs = parseStrictInteger(
+      value("subtitle_ai.transcribe_quota_jobs", "0"),
+    );
+    const maxConcurrent = parseStrictInteger(
+      effectiveValue(
+        "ai.max_concurrent_jobs",
+        "subtitle_ai.max_concurrent_jobs",
+        "2",
+      ),
+    );
+
+    if (!textReady) {
+      toast.error("Text AI base URL and chat model are required.");
+      return;
+    }
+    if (maxConcurrent === null || maxConcurrent < 1) {
+      toast.error("Max concurrent jobs must be a positive whole number.");
+      return;
+    }
+    if (batchSize === null || batchSize < 1) {
+      toast.error("Subtitle batch size must be a positive whole number.");
+      return;
+    }
+    if (contextLines === null || contextLines < 0) {
+      toast.error(
+        "Subtitle context lines must be zero or a positive whole number.",
+      );
+      return;
+    }
+    if (chunkSeconds === null || chunkSeconds < 60 || chunkSeconds > 600) {
+      toast.error(
+        "Transcription chunk length must be between 60 and 600 seconds.",
+      );
+      return;
+    }
+    if (quotaJobs === null || quotaJobs < 0) {
+      toast.error(
+        "Transcription limit must be zero or a positive whole number.",
+      );
+      return;
+    }
+    await form.save();
+  }
+
+  function discard() {
+    form.discard();
+    setTextResult(undefined);
+    setSpeechResult(undefined);
+  }
+
+  return (
+    <div className="flex h-full max-w-5xl flex-col gap-7">
+      <SettingsPageHeader title="AI Services" />
+
+      <FieldGroup label="Models">
+        <div className="py-3.5">
+          <ProviderTileGrid>
+            <TextModelTile
+              baseURL={textBaseURL}
+              chatModel={chatModel}
+              apiKeyValue={value("ai.api_key")}
+              apiKeyConfigured={
+                form.sensitiveConfigured.includes("ai.api_key") ||
+                form.sensitiveConfigured.includes("subtitle_ai.api_key")
+              }
+              apiKeyCleared={form.isClearStaged("ai.api_key")}
+              ready={textReady}
+              dirty={textDirty}
+              restartKeys={restartKeys}
+              onChange={setValue}
+              onReset={form.resetValue}
+              // The legacy key goes with it: an empty `ai.api_key` falls back
+              // to `subtitle_ai.api_key`, so clearing only the modern one would
+              // leave the old secret in force on an upgraded server.
+              onClearApiKey={() => {
+                setValue("ai.api_key", "");
+                setValue("subtitle_ai.api_key", "");
+              }}
+              onTest={() => void checkTextConnection()}
+              isTesting={textCheck.isPending}
+              test={textResult}
+              // A staged edit forces its tile open: the save bar must never
+              // block on a field the admin cannot see.
+              expanded={expandedTile === "text" || textDirty}
+              onExpand={() => setExpandedTile("text")}
+              onCollapse={() => setExpandedTile(null)}
+            />
+            <SpeechModelTile
+              asrBaseURL={asrBaseURL}
+              asrModel={asrModel}
+              apiKeyValue={value("ai.asr_api_key")}
+              apiKeyConfigured={form.sensitiveConfigured.includes(
+                "ai.asr_api_key",
+              )}
+              apiKeyCleared={form.isClearStaged("ai.asr_api_key")}
+              usesTextEndpoint={speechUsesTextEndpoint}
+              compatible={speechCompatible}
+              ready={speechReady}
+              checkable={speechCheckable}
+              dirty={speechDirty}
+              restartKeys={restartKeys}
+              onChange={setValue}
+              onReset={form.resetValue}
+              onClearApiKey={() => setValue("ai.asr_api_key", "")}
+              onTest={() => void checkSpeechConnection()}
+              isTesting={speechCheck.isPending}
+              test={speechResult}
+              expanded={expandedTile === "speech" || speechDirty}
+              onExpand={() => setExpandedTile("speech")}
+              onCollapse={() => setExpandedTile(null)}
+            />
+          </ProviderTileGrid>
+        </div>
+      </FieldGroup>
+
+      <FieldGroup label="Features">
+        <p className="text-muted-foreground py-3.5 text-xs leading-relaxed">
+          Nothing here runs on a schedule: subtitle work starts when a viewer or
+          admin asks for a track, and description translation when an admin
+          queues it or a viewer opens a detail page.
+        </p>
+        {/*
+          A feature whose model is not configured only queues jobs that fail at
+          the provider, so its switch is disabled until the model is ready. One
+          that is already on stays switchable, so a degraded provider can be
+          turned off without being fixed first.
+        */}
+        <SettingField
+          label="Translate subtitles"
+          type="toggle"
+          value={value("subtitle_ai.enabled", "false")}
+          onChange={(next) => setValue("subtitle_ai.enabled", next)}
+          description="Turns an existing subtitle track into another language, on request."
+          disabled={!textReady && !subtitleTranslateEnabled}
+          status={
+            textReady ? undefined : (
+              <SettingFieldStatus tone="warn">
+                Needs the text model
+              </SettingFieldStatus>
+            )
+          }
+          restartRequired={restartKeys.has("subtitle_ai.enabled")}
+        />
+        <SettingField
+          label="Create subtitles from audio"
+          type="toggle"
+          value={value("subtitle_ai.transcribe_enabled", "false")}
+          onChange={(next) => setValue("subtitle_ai.transcribe_enabled", next)}
+          description="Writes timed subtitles from the audio track, on request."
+          disabled={!speechReady && !transcribeEnabled}
+          status={
+            speechReady ? undefined : (
+              <SettingFieldStatus tone="warn">
+                Needs speech-to-text
+              </SettingFieldStatus>
+            )
+          }
+          restartRequired={restartKeys.has("subtitle_ai.transcribe_enabled")}
+        />
+        <SettingField
+          label="Translate descriptions"
+          type="toggle"
+          value={value("metadata_ai.enabled", "false")}
+          onChange={(next) => setValue("metadata_ai.enabled", next)}
+          description="Translates overviews and taglines for the items an admin or viewer asks for."
+          disabled={!textReady && !descriptionEnabled}
+          status={
+            textReady ? undefined : (
+              <SettingFieldStatus tone="warn">
+                Needs the text model
+              </SettingFieldStatus>
+            )
+          }
+          restartRequired={restartKeys.has("metadata_ai.enabled")}
+        />
+        <SettingField
+          label="Description translation for viewers"
+          type="select"
+          value={value("metadata_ai.on_view", "off")}
+          onChange={(next) => setValue("metadata_ai.on_view", next)}
+          disabled={!descriptionEnabled}
+          options={[
+            { value: "off", label: "Off" },
+            { value: "button", label: "Translate button on detail pages" },
+            { value: "auto", label: "Automatic on view" },
+          ]}
+          description={
+            descriptionEnabled
+              ? undefined
+              : "Inactive until Translate descriptions is on."
+          }
+          restartRequired={restartKeys.has("metadata_ai.on_view")}
+        />
+        <AdvancedSection
+          id="ai.tuning"
+          count={AI_ADVANCED_KEYS.length}
+          forceOpen={advancedChangedCount > 0}
+        >
+          <TuningScope
+            label="Server-wide tuning"
+            caption="One setting for the whole server, whoever the job belongs to."
+          >
+            <SettingField
+              label="Jobs running at once"
+              type="number"
+              value={effectiveValue(
+                "ai.max_concurrent_jobs",
+                "subtitle_ai.max_concurrent_jobs",
+                "2",
+              )}
+              onChange={(next) => setValue("ai.max_concurrent_jobs", next)}
+              description="One budget shared by every AI job on the server."
+              restartRequired={restartKeys.has("ai.max_concurrent_jobs")}
+            />
+            <SettingField
+              label="Subtitle lines per request"
+              type="number"
+              value={value("subtitle_ai.batch_size", "40")}
+              onChange={(next) => setValue("subtitle_ai.batch_size", next)}
+              restartRequired={restartKeys.has("subtitle_ai.batch_size")}
+            />
+            <SettingField
+              label="Surrounding lines sent for context"
+              type="number"
+              value={value("subtitle_ai.context_neighbors", "2")}
+              onChange={(next) =>
+                setValue("subtitle_ai.context_neighbors", next)
+              }
+              restartRequired={restartKeys.has("subtitle_ai.context_neighbors")}
+            />
+            <SettingField
+              label="Audio per request"
+              type="number"
+              unit="seconds"
+              value={value("subtitle_ai.asr_chunk_seconds", "600")}
+              onChange={(next) =>
+                setValue("subtitle_ai.asr_chunk_seconds", next)
+              }
+              description="Between 60 and 600."
+              restartRequired={restartKeys.has("subtitle_ai.asr_chunk_seconds")}
+            />
+          </TuningScope>
+          <TuningScope
+            label="Per-account limits"
+            caption="Counted per login account, shared by every profile on it."
+          >
+            <LimitField
+              label="Transcriptions per account"
+              value={value("subtitle_ai.transcribe_quota_jobs", "0")}
+              onChange={(next) =>
+                setValue("subtitle_ai.transcribe_quota_jobs", next)
+              }
+              fallbackValue="10"
+              hint="Every profile on the account draws from this one allowance."
+              restartRequired={restartKeys.has(
+                "subtitle_ai.transcribe_quota_jobs",
+              )}
+            />
+            <SettingField
+              label="Allowance resets"
+              type="select"
+              value={value("subtitle_ai.transcribe_quota_period", "day")}
+              onChange={(next) =>
+                setValue("subtitle_ai.transcribe_quota_period", next)
+              }
+              options={QUOTA_PERIODS.map((period) => ({
+                value: period,
+                label: `Per ${period} (rolling ${QUOTA_PERIOD_WINDOW_LABELS[period]})`,
+              }))}
+              description="Rolling window for the transcription allowance above."
+              restartRequired={restartKeys.has(
+                "subtitle_ai.transcribe_quota_period",
+              )}
+            />
+          </TuningScope>
+        </AdvancedSection>
+      </FieldGroup>
+
+      <p className="text-muted-foreground flex flex-wrap items-center gap-2 text-xs">
+        Recommendation embeddings use their own models.
+        <Link
+          to="/admin/recommendations"
+          className="text-primary inline-flex shrink-0 items-center gap-1 font-medium hover:underline"
+        >
+          Open Recommendations
+        </Link>
+      </p>
+
+      <SaveBar
+        dirtyCount={form.dirtyCount}
+        onSave={() => void save()}
+        onDiscard={discard}
+        isSaving={form.isSaving}
+      />
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/AdminSettingsLayout.test.tsx b/web/src/pages/admin-settings/AdminSettingsLayout.test.tsx
index 43e2d81d3..666f32b99 100644
--- a/web/src/pages/admin-settings/AdminSettingsLayout.test.tsx
+++ b/web/src/pages/admin-settings/AdminSettingsLayout.test.tsx
@@ -1,27 +1,57 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { renderToStaticMarkup } from "react-dom/server";
-import { MemoryRouter } from "react-router";
+import { createMemoryRouter, RouterProvider } from "react-router";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import type { SettingsOverviewModel } from "@/hooks/admin/useSettingsOverview";
+import {
+  ADMIN_SETTINGS_NAV,
+  LEGACY_ADMIN_SETTINGS_PAGE_ALIASES,
+} from "@/lib/adminSettingsSearch";
+
 import AdminSettingsLayout from "./AdminSettingsLayout";
 
 const mocks = vi.hoisted(() => ({
   useAdminServerStatus: vi.fn(),
+  useSettingsOverview: vi.fn(),
+  // How many staged edits the open page claims; drives the shell's
+  // unsaved-changes guard.
+  dirtyCount: 0,
 }));
 
-// The layout only needs the active tab's component to render; a loading form
-// keeps every settings page on its skeleton state so no other hooks fire.
-vi.mock("@/hooks/useSettingsForm", () => ({
-  useSettingsForm: () => ({
-    isLoading: true,
-    dirtyCount: 0,
-    getValue: () => "",
-    sensitiveConfigured: [],
-    sensitiveManagedByEnv: [],
-  }),
-}));
+// The layout only needs the active page's component to render; a loading form
+// keeps every settings page on its skeleton state so no other hooks fire. The
+// dirty registration is the one real behavior kept, because the shell's
+// navigation guard reads it.
+vi.mock("@/hooks/useSettingsForm", async () => {
+  const { useReportUnsavedChanges } = await import("@/hooks/useUnsavedChanges");
+
+  return {
+    useSettingsForm: () => {
+      useReportUnsavedChanges(mocks.dirtyCount > 0);
+
+      return {
+        isLoading: true,
+        getValue: () => "",
+        setValue: () => {},
+        resetValue: () => {},
+        dirtyCount: mocks.dirtyCount,
+        dirtyKeys: [],
+        isDirty: () => false,
+        save: () => {},
+        discard: () => {},
+        isSaving: false,
+        restartRequired: false,
+        sensitiveConfigured: [],
+        sensitiveManagedByEnv: [],
+        sensitiveStatusReady: false,
+        sensitiveStatusError: null,
+        buildConnectionCheckRequest: () => ({}),
+      };
+    },
+  };
+});
 
 vi.mock("@/hooks/queries/admin/settings", async (importOriginal) => ({
   ...(await importOriginal<typeof import("@/hooks/queries/admin/settings")>()),
@@ -29,256 +59,295 @@ vi.mock("@/hooks/queries/admin/settings", async (importOriginal) => ({
     mocks.useAdminServerStatus(...args),
 }));
 
+vi.mock("@/hooks/admin/useSettingsOverview", async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import("@/hooks/admin/useSettingsOverview")
+  >()),
+  useSettingsOverview: () => mocks.useSettingsOverview(),
+}));
+
+function overviewModel(): SettingsOverviewModel {
+  return {
+    isLoading: false,
+    tiles: [],
+    cards: [],
+  };
+}
+
 beforeEach(() => {
   mocks.useAdminServerStatus.mockReturnValue({
     data: { restart_required: false },
   });
+  mocks.useSettingsOverview.mockReturnValue(overviewModel());
+  mocks.dirtyCount = 0;
 });
 
 afterEach(() => {
   vi.unstubAllGlobals();
 });
 
-function renderLayout(search = "") {
+// A data router, like the app itself mounts: the shell blocks navigation with
+// `useBlocker`, which the declarative `<MemoryRouter>` cannot serve. The second
+// route stands in for the rest of the admin area (the sidebar's targets).
+function renderInteractiveLayout(suffix = "") {
   const client = new QueryClient({
     defaultOptions: { queries: { retry: false } },
   });
-
-  return renderToStaticMarkup(
-    <QueryClientProvider client={client}>
-      <MemoryRouter initialEntries={[`/admin/settings${search}`]}>
-        <AdminSettingsLayout />
-      </MemoryRouter>
-    </QueryClientProvider>,
+  const router = createMemoryRouter(
+    [
+      { path: "/admin/settings/*", element: <AdminSettingsLayout /> },
+      { path: "/admin/users", element: <h1>Admin users</h1> },
+    ],
+    { initialEntries: [`/admin/settings${suffix}`] },
   );
-}
-
-function renderInteractiveLayout(search = "") {
-  const client = new QueryClient({
-    defaultOptions: { queries: { retry: false } },
-  });
 
-  return render(
-    <QueryClientProvider client={client}>
-      <MemoryRouter initialEntries={[`/admin/settings${search}`]}>
-        <AdminSettingsLayout />
-      </MemoryRouter>
-    </QueryClientProvider>,
-  );
+  return {
+    router,
+    ...render(
+      <QueryClientProvider client={client}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>,
+    ),
+  };
 }
 
 describe("AdminSettingsLayout", () => {
-  it("renders the grouped navigation sections", () => {
-    const markup = renderLayout();
-
-    for (const group of ["Server", "Media", "Connections", "Data"]) {
-      expect(markup).toContain(`>${group}<`);
-    }
-  });
-
-  it("names each settings group exactly once", () => {
+  it("lands on the overview at the settings index", () => {
     renderInteractiveLayout();
 
-    // The category jump bar used to repeat every group name and count directly
-    // above the headings that already carry them.
     expect(
-      screen.queryByRole("navigation", {
-        name: "Admin settings sections categories",
-      }),
+      screen.getByRole("heading", { level: 1, name: "Settings" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("link", { name: "All settings" }),
     ).not.toBeInTheDocument();
-    for (const group of ["Server", "Media", "Connections", "Data"]) {
-      expect(screen.getAllByRole("heading", { name: group })).toHaveLength(1);
-      expect(
-        screen.queryByRole("link", {
-          name: new RegExp(`^${group}, \\d+ settings`),
-        }),
-      ).toBeNull();
-    }
   });
 
-  it("uses one desktop grid and card geometry for every settings group", () => {
-    const markup = renderLayout();
+  it("renders a settings category with the page rail beside it", () => {
+    vi.stubGlobal("scrollTo", vi.fn());
+    renderInteractiveLayout("/general");
 
-    expect(markup.match(/2xl:grid-cols-4/g)).toHaveLength(4);
-    expect(markup).not.toContain("2xl:grid-cols-3");
-    expect(markup.match(/lg:h-28/g)).toHaveLength(21);
-    expect(markup.match(/lg:line-clamp-3/g)).toHaveLength(21);
-  });
+    expect(
+      screen.getByRole("region", { name: "General settings" }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "All settings" })).toHaveAttribute(
+      "href",
+      "/admin/settings",
+    );
 
-  it("renders every settings tab", () => {
-    const markup = renderLayout();
-
-    for (const label of [
-      "About",
-      "General",
-      "Branding",
-      "Theming",
-      "Card Overlays",
-      "Scanner &amp; Matcher",
-      "Search",
-      "Intro Markers",
-      "Subtitles",
-      "AI Services",
-      "Playback",
-      "Downloads",
-      "Watch Providers",
-      "Integrations",
-      "Email",
-      "Notifications",
-      "Compatibility Proxies",
-      "Rate Limiting",
-      "Database",
-      "Storage",
-      "Log Retention",
-    ]) {
-      expect(markup).toContain(label);
+    // The rail lists every settings page and marks the open one.
+    const rail = screen.getByRole("navigation", { name: "Settings pages" });
+    for (const item of ADMIN_SETTINGS_NAV) {
+      const link = within(rail).getByRole("link", { name: item.label });
+      expect(link).toHaveAttribute("href", `/admin/settings/${item.id}`);
     }
+    expect(within(rail).getByRole("link", { name: "General" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
   });
 
-  it("renders the settings index at the root and preserves tab deep links", () => {
-    renderInteractiveLayout();
+  it("mounts every settings page at its own route", () => {
+    vi.stubGlobal("scrollTo", vi.fn());
 
-    expect(
-      screen.getByRole("link", { name: /General.*Authentication/ }),
-    ).toHaveAttribute("href", "/admin/settings?tab=general");
-    expect(
-      screen.queryByRole("link", { name: "All settings" }),
-    ).not.toBeInTheDocument();
+    for (const item of ADMIN_SETTINGS_NAV) {
+      const { unmount } = renderInteractiveLayout(`/${item.id}`);
 
-    const detail = renderLayout("?tab=general");
-    expect(detail).toContain('aria-current="page"');
-    expect(detail).toContain('href="/admin/settings"');
+      expect(
+        screen.getByRole("region", { name: `${item.label} settings` }),
+      ).toBeInTheDocument();
+      unmount();
+    }
   });
 
-  it("focuses the detail heading and resets scroll when an overview link opens", async () => {
+  it("focuses the settings page and resets document scroll when it opens", async () => {
     const scrollTo = vi.fn();
     vi.stubGlobal("scrollTo", scrollTo);
-    renderInteractiveLayout();
+    renderInteractiveLayout("/general");
 
-    await userEvent.click(
-      screen.getByRole("link", { name: /Database.*Postgres/ }),
-    );
-
-    const detailRegion = await screen.findByRole("region", {
-      name: "Database settings",
+    const region = await screen.findByRole("region", {
+      name: "General settings",
     });
     expect(scrollTo).toHaveBeenCalledWith(0, 0);
-    expect(detailRegion).toHaveFocus();
+    expect(region).toHaveFocus();
   });
 
-  it("adds a mobile detail heading when the settings component has none", () => {
+  it("leaves the restart prompt to the admin shell", () => {
     vi.stubGlobal("scrollTo", vi.fn());
+    mocks.useAdminServerStatus.mockReturnValue({
+      data: { restart_required: true },
+    });
 
-    renderInteractiveLayout("?tab=branding");
+    renderInteractiveLayout("/general");
 
-    expect(
-      screen.getByRole("heading", { name: "Branding", level: 2 }),
-    ).toHaveFocus();
+    // AdminLayout renders one banner above every admin page, so a restart owed
+    // while settings is open must not add a second one here.
+    expect(screen.queryByText("Restart required")).not.toBeInTheDocument();
   });
 
-  it("resets the scrolling detail pane when switching admin tabs", async () => {
+  it("redirects legacy query-string tabs to their canonical pages", async () => {
     vi.stubGlobal("scrollTo", vi.fn());
-    renderInteractiveLayout("?tab=general");
 
-    const generalRegion = screen.getByRole("region", {
-      name: "General settings",
-    });
-    generalRegion.scrollTop = 400;
-
-    await userEvent.click(screen.getByRole("button", { name: "Database" }));
+    for (const [legacy, current] of Object.entries(
+      LEGACY_ADMIN_SETTINGS_PAGE_ALIASES,
+    )) {
+      const label = ADMIN_SETTINGS_NAV.find(
+        (item) => item.id === current,
+      )?.label;
+      expect(label).toBeDefined();
 
-    const databaseRegion = await screen.findByRole("region", {
-      name: "Database settings",
-    });
-    expect(databaseRegion.scrollTop).toBe(0);
-    expect(databaseRegion).toHaveFocus();
+      const { unmount } = renderInteractiveLayout(`?tab=${legacy}`);
+      expect(
+        await screen.findByRole("region", { name: `${label} settings` }),
+      ).toBeInTheDocument();
+      unmount();
+    }
   });
 
-  it("surfaces durable restart-required state above the active tab", () => {
-    mocks.useAdminServerStatus.mockReturnValue({
-      data: { restart_required: true },
-    });
+  it("redirects a retired page route to the page that absorbed it", async () => {
+    vi.stubGlobal("scrollTo", vi.fn());
+    renderInteractiveLayout("/jellyfin");
 
-    const markup = renderLayout();
+    expect(
+      await screen.findByRole("region", { name: "Compatibility settings" }),
+    ).toBeInTheDocument();
+  });
 
-    expect(markup).toContain(
-      "Server restart required for saved settings to take effect.",
-    );
+  it("redirects an unknown settings page to the overview", async () => {
+    vi.stubGlobal("scrollTo", vi.fn());
+    renderInteractiveLayout("/not-a-page");
+
+    expect(
+      await screen.findByRole("heading", { level: 1, name: "Settings" }),
+    ).toBeInTheDocument();
   });
 
-  it("resolves the legacy jellyfin tab alias to Compatibility Proxies", () => {
-    const withAlias = renderLayout("?tab=jellyfin");
-    const direct = renderLayout("?tab=compatibility-proxies");
+  it("keeps the rail filter inside the rail, clear of the fixed admin header controls", () => {
+    vi.stubGlobal("scrollTo", vi.fn());
+    renderInteractiveLayout("/general");
+
+    const box = screen.getByRole("searchbox", { name: "Search settings" });
+    const rail = screen.getByRole("navigation", { name: "Settings pages" });
+    const aside = rail.closest("aside");
 
-    expect(withAlias).toBe(direct);
+    expect(aside).not.toBeNull();
+    expect(aside).toContainElement(box);
+    // AdminLayout floats its own Search ⌘K control over the top-right corner,
+    // so the back-link row has to stay free of a second search input.
+    expect(
+      screen.getByRole("link", { name: "All settings" }).parentElement,
+    ).not.toContainElement(box);
   });
 
-  it("filters admin settings sections from the search box", async () => {
-    renderInteractiveLayout();
+  it("filters the page rail from the settings search box", async () => {
+    vi.stubGlobal("scrollTo", vi.fn());
+    renderInteractiveLayout("/general");
 
-    await userEvent.type(
-      screen.getByRole("searchbox", { name: "Search settings" }),
-      "redis",
-    );
+    const box = screen.getByRole("searchbox", { name: "Search settings" });
+    await userEvent.type(box, "transcode");
 
-    expect(screen.getAllByRole("link", { name: /Database/ })).toHaveLength(1);
+    const rail = screen.getByRole("navigation", { name: "Settings pages" });
     expect(
-      screen.queryByRole("link", { name: /Playback/ }),
+      within(rail).getByRole("link", { name: "Playback" }),
+    ).toBeInTheDocument();
+    expect(
+      within(rail).queryByRole("link", { name: "General" }),
     ).not.toBeInTheDocument();
-    expect(screen.getByText("1 match")).toBeInTheDocument();
+
+    await userEvent.clear(box);
+    expect(
+      within(rail).getByRole("link", { name: "General" }),
+    ).toBeInTheDocument();
   });
 
-  it("matches individual admin setting labels", async () => {
-    renderInteractiveLayout();
+  it("keeps `ai` pointing at the AI Services page rather than an alias", () => {
+    vi.stubGlobal("scrollTo", vi.fn());
+    renderInteractiveLayout("/ai");
 
-    await userEvent.type(
-      screen.getByRole("searchbox", { name: "Search settings" }),
-      "pool max open",
-    );
+    expect(
+      screen.getByRole("region", { name: "AI Services settings" }),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("AdminSettingsLayout unsaved-changes guard", () => {
+  // Radix marks the page behind an open modal inert and aria-hidden, so while
+  // the prompt is up the page under it is only reachable by text.
+  const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+  beforeEach(() => {
+    vi.stubGlobal("scrollTo", vi.fn());
+  });
+
+  it("lets a clean page move through the rail untouched", async () => {
+    renderInteractiveLayout("/general");
+
+    const rail = screen.getByRole("navigation", { name: "Settings pages" });
+    await user.click(within(rail).getByRole("link", { name: "Playback" }));
 
-    expect(screen.getAllByRole("link", { name: /Database/ })).toHaveLength(1);
     expect(
-      screen.queryByRole("link", { name: /General/ }),
-    ).not.toBeInTheDocument();
+      screen.getByRole("region", { name: "Playback settings" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument();
   });
 
-  it("focuses admin settings search with Cmd+K", () => {
-    renderInteractiveLayout();
+  it("holds a rail navigation until staged edits are discarded", async () => {
+    mocks.dirtyCount = 1;
+    const { router } = renderInteractiveLayout("/general");
 
-    const searchBox = screen.getByRole("searchbox", {
-      name: "Search settings",
-    });
-    fireEvent.keyDown(document, { key: "k", metaKey: true });
+    const rail = screen.getByRole("navigation", { name: "Settings pages" });
+    await user.click(within(rail).getByRole("link", { name: "Playback" }));
+
+    expect(
+      await screen.findByRole("alertdialog", {
+        name: "Discard unsaved changes?",
+      }),
+    ).toBeInTheDocument();
+    expect(router.state.location.pathname).toBe("/admin/settings/general");
 
-    expect(searchBox).toHaveFocus();
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(
+      screen.getByRole("region", { name: "General settings" }),
+    ).toBeInTheDocument();
+
+    await user.click(within(rail).getByRole("link", { name: "Playback" }));
+    await user.click(await screen.findByRole("button", { name: "Discard" }));
+
+    expect(
+      await screen.findByRole("region", { name: "Playback settings" }),
+    ).toBeInTheDocument();
   });
 
-  it("focuses admin settings search with Ctrl+K", () => {
-    renderInteractiveLayout();
+  it("guards the back link out of the settings shell", async () => {
+    mocks.dirtyCount = 2;
+    renderInteractiveLayout("/general");
 
-    const searchBox = screen.getByRole("searchbox", {
-      name: "Search settings",
-    });
-    fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+    await user.click(screen.getByRole("link", { name: "All settings" }));
+
+    expect(await screen.findByRole("alertdialog")).toBeInTheDocument();
 
-    expect(searchBox).toHaveFocus();
+    await user.click(screen.getByRole("button", { name: "Discard" }));
+
+    expect(
+      await screen.findByRole("heading", { level: 1, name: "Settings" }),
+    ).toBeInTheDocument();
   });
 
-  it("does not consume Cmd+K when the admin detail search is hidden", () => {
-    vi.stubGlobal(
-      "matchMedia",
-      vi.fn(() => ({ matches: false })),
-    );
-    vi.stubGlobal("scrollTo", vi.fn());
-    renderInteractiveLayout("?tab=general");
+  it("guards a navigation that leaves the settings area entirely", async () => {
+    mocks.dirtyCount = 1;
+    const { router } = renderInteractiveLayout("/general");
 
-    const event = new KeyboardEvent("keydown", {
-      key: "k",
-      metaKey: true,
-      cancelable: true,
+    // Stands in for the admin sidebar and for browser back: both reach the
+    // router the same way.
+    await act(async () => {
+      await router.navigate("/admin/users");
     });
 
-    expect(document.dispatchEvent(event)).toBe(true);
-    expect(event.defaultPrevented).toBe(false);
+    expect(await screen.findByRole("alertdialog")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(
+      screen.getByRole("region", { name: "General settings" }),
+    ).toBeInTheDocument();
   });
 });
diff --git a/web/src/pages/admin-settings/AdminSettingsLayout.tsx b/web/src/pages/admin-settings/AdminSettingsLayout.tsx
index 0c48cf451..09b789053 100644
--- a/web/src/pages/admin-settings/AdminSettingsLayout.tsx
+++ b/web/src/pages/admin-settings/AdminSettingsLayout.tsx
@@ -5,78 +5,56 @@ import {
   useState,
   type ComponentType,
 } from "react";
-import { AlertTriangle, ChevronLeft } from "lucide-react";
-import { Link, useSearchParams } from "react-router";
+import { ChevronLeft } from "lucide-react";
+import { Link, Navigate, useParams, useSearchParams } from "react-router";
 
-import { SideNavItem, SideNavSection } from "@/components/SideNav";
-import { SettingsOverviewNav } from "@/components/settings/SettingsOverviewNav";
-import { SettingsSearchInput } from "@/components/settings/SettingsSearchInput";
-import {
-  countSettingsSearchItems,
-  filterSettingsSearchGroups,
-} from "@/components/settings/settingsSearch";
 import {
   ADMIN_SETTINGS_GROUPS,
   ADMIN_SETTINGS_NAV,
+  resolveAdminSettingsPageID,
   type AdminSettingsSearchItem,
 } from "@/lib/adminSettingsSearch";
-import { cn } from "@/lib/utils";
-import { useAdminServerStatus } from "@/hooks/queries/admin/settings";
+import {
+  countSettingsSearchItems,
+  filterSettingsSearchGroups,
+} from "@/components/settings/settingsSearch";
+import { SettingsSearchInput } from "@/components/settings/SettingsSearchInput";
+import { UnsavedChangesGuard } from "@/components/UnsavedChangesGuard";
+import { settingsPageHref } from "@/hooks/admin/useSettingsOverview";
+import { SettingsPageRail } from "@/components/settings/SettingsPageRail";
 
-import EmailSettings from "./EmailSettings";
-import NotificationsAdminSettings from "./NotificationsAdminSettings";
-import AboutSettings from "./AboutSettings";
 import GeneralSettings from "./GeneralSettings";
+import AppearanceSettings from "./AppearanceSettings";
+import SecurityAccessSettings from "./SecurityAccessSettings";
+import LibraryMetadataSettings from "./LibraryMetadataSettings";
 import PlaybackSettings from "./PlaybackSettings";
-import ScannerSettings from "./ScannerSettings";
-import SearchSettings from "./SearchSettings";
-import IntroSettings from "./IntroSettings";
-import SubtitlesSettings from "./SubtitlesSettings";
-import AIServicesSettings from "./AIServicesSettings";
-import RateLimitSettings from "./RateLimitSettings";
-import WatchProvidersSettings from "./WatchProvidersSettings";
-import IntegrationsSettings from "./IntegrationsSettings";
+import DownloadsSettings from "./DownloadsSettings";
+import ProvidersSettings from "./ProvidersSettings";
+import WatchSyncSettings from "./WatchSyncSettings";
+import AISettings from "./AISettings";
+import NotificationsAdminSettings from "./NotificationsAdminSettings";
 import CompatibilityProxiesSettings from "./CompatibilityProxiesSettings";
-import DatabaseSettings from "./DatabaseSettings";
-import StorageSettings from "./StorageSettings";
-import DownloadSettings from "./DownloadSettings";
-import LogRetentionSettings from "./LogRetentionSettings";
-import ThemeSettings from "./ThemeSettings";
-import BrandingSettings from "./BrandingSettings";
-import OverlaySettings from "./OverlaySettings";
-import { RestartServerButton } from "./RestartServerButton";
+import InfrastructureSettings from "./InfrastructureSettings";
+import SettingsOverview from "./SettingsOverview";
+import "@/styles/admin-settings.css";
 
 interface SettingsNav extends AdminSettingsSearchItem {
   component: ComponentType;
 }
 
-interface SettingsNavGroup {
-  label: string;
-  items: SettingsNav[];
-}
-
 const SETTINGS_COMPONENTS: Record<string, ComponentType> = {
-  about: AboutSettings,
   general: GeneralSettings,
-  branding: BrandingSettings,
-  theming: ThemeSettings,
-  overlays: OverlaySettings,
-  scanner: ScannerSettings,
-  search: SearchSettings,
-  intro: IntroSettings,
-  subtitles: SubtitlesSettings,
-  ai: AIServicesSettings,
+  appearance: AppearanceSettings,
+  security: SecurityAccessSettings,
+  library: LibraryMetadataSettings,
   playback: PlaybackSettings,
-  downloads: DownloadSettings,
-  "watch-providers": WatchProvidersSettings,
-  integrations: IntegrationsSettings,
-  email: EmailSettings,
+  downloads: DownloadsSettings,
+  providers: ProvidersSettings,
+  "watch-sync": WatchSyncSettings,
+  ai: AISettings,
   notifications: NotificationsAdminSettings,
-  "compatibility-proxies": CompatibilityProxiesSettings,
-  "rate-limiting": RateLimitSettings,
-  database: DatabaseSettings,
-  storage: StorageSettings,
-  "log-retention": LogRetentionSettings,
+  compatibility: CompatibilityProxiesSettings,
+  infrastructure: InfrastructureSettings,
 };
 
 function settingsComponent(id: string) {
@@ -87,178 +65,110 @@ function settingsComponent(id: string) {
   return component;
 }
 
-const SETTINGS_GROUPS: SettingsNavGroup[] = ADMIN_SETTINGS_GROUPS.map(
-  (group) => ({
-    ...group,
-    items: group.items.map((item) => ({
-      ...item,
-      component: settingsComponent(item.id),
-    })),
-  }),
-);
-
 const SETTINGS_NAV: SettingsNav[] = ADMIN_SETTINGS_NAV.map((item) => ({
   ...item,
   component: settingsComponent(item.id),
 }));
 
-const SHELL_HEADING_SETTINGS = new Set(["branding", "theming"]);
-
 export default function AdminSettingsLayout() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [settingsSearch, setSettingsSearch] = useState("");
+  const params = useParams();
+  const [searchParams] = useSearchParams();
   const activeContentRef = useRef<HTMLDivElement>(null);
-  const activeHeadingRef = useRef<HTMLHeadingElement>(null);
-  const { data: serverStatus } = useAdminServerStatus();
-  const rawActiveId = searchParams.get("tab");
-  const activeId =
-    rawActiveId === "jellyfin" ? "compatibility-proxies" : rawActiveId;
-  const filteredSettingsGroups = useMemo(
-    () => filterSettingsSearchGroups(SETTINGS_GROUPS, settingsSearch),
+  const [settingsSearch, setSettingsSearch] = useState("");
+  const filteredGroups = useMemo(
+    () => filterSettingsSearchGroups(ADMIN_SETTINGS_GROUPS, settingsSearch),
     [settingsSearch],
   );
-  const overviewGroups = useMemo(
-    () =>
-      filteredSettingsGroups.map((group) => ({
-        ...group,
-        items: group.items.map((item) => ({
-          id: item.id,
-          label: item.label,
-          description: item.description,
-          icon: item.icon,
-          href: `/admin/settings?tab=${encodeURIComponent(item.id)}`,
-        })),
-      })),
-    [filteredSettingsGroups],
-  );
-  const filteredSettingsCount = countSettingsSearchItems(
-    filteredSettingsGroups,
+  const filteredItems = useMemo(
+    () => filteredGroups.flatMap((group) => group.items),
+    [filteredGroups],
   );
+  const rawPageId = params["*"]?.replace(/^\/+|\/+$/g, "") || null;
+  const legacyTabId = searchParams.get("tab");
+  const requestedId = rawPageId ?? legacyTabId;
+  const activeId = resolveAdminSettingsPageID(requestedId);
 
-  function setActiveId(id: string) {
-    setSearchParams({ tab: id }, { replace: true });
-  }
   const active = activeId
     ? SETTINGS_NAV.find((item) => item.id === activeId)
     : undefined;
   const ActiveComponent = active?.component;
 
   useEffect(() => {
-    if (!active) return;
+    if (!activeId) return;
 
     window.scrollTo(0, 0);
     if (activeContentRef.current) {
       activeContentRef.current.scrollTop = 0;
     }
-    (activeHeadingRef.current ?? activeContentRef.current)?.focus({
-      preventScroll: true,
-    });
-  }, [active]);
+    activeContentRef.current?.focus({ preventScroll: true });
+  }, [activeId]);
 
-  return (
-    <div className="w-full max-w-[96rem] space-y-6">
-      {active ? (
-        <Link
-          to="/admin/settings"
-          className="text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex w-fit items-center gap-1.5 rounded-lg pr-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none lg:hidden"
-        >
-          <ChevronLeft className="h-4 w-4" aria-hidden="true" />
-          All settings
-        </Link>
-      ) : null}
-
-      <div className={cn("page-header gap-5", active && "hidden lg:flex")}>
-        <div className="min-w-0 space-y-3">
-          <h1 className="page-title text-[clamp(2rem,4vw,3rem)]">Settings</h1>
-          <p className="page-subtitle text-sm sm:text-base">
-            Configure server-wide settings. Most changes apply live;
-            startup-bound fields show a restart warning after they are saved.
-          </p>
-        </div>
-        <SettingsSearchInput
-          value={settingsSearch}
-          onChange={setSettingsSearch}
-          resultCount={filteredSettingsCount}
-          totalCount={SETTINGS_NAV.length}
-          className="w-full sm:max-w-sm lg:w-[26rem] lg:max-w-none"
-          shortcutMediaQuery={active ? "(min-width: 64rem)" : undefined}
-          showShortcutHint={!active}
-        />
-      </div>
+  // Turn old query-string tabs and retired page ids into canonical page URLs.
+  if (requestedId && !activeId) {
+    return <Navigate to="/admin/settings" replace />;
+  }
+  if (
+    activeId &&
+    (rawPageId !== activeId ||
+      legacyTabId !== null ||
+      searchParams.toString() !== "")
+  ) {
+    return <Navigate to={settingsPageHref(activeId)} replace />;
+  }
 
-      {serverStatus?.restart_required && (
-        <div
-          role="status"
-          className="surface-panel-subtle flex flex-col gap-3 rounded-xl p-4 sm:flex-row sm:items-center sm:justify-between"
-        >
-          <div className="text-foreground/80 flex items-center gap-2 text-sm">
-            <AlertTriangle className="h-4 w-4" />
-            <span>
-              Server restart required for saved settings to take effect.
-            </span>
-          </div>
-          <RestartServerButton />
-        </div>
-      )}
+  return (
+    <div className="w-full max-w-[96rem]">
+      {/* Settings pages stage their edits and only write them from the SaveBar,
+          so leaving the shell — rail, back link, admin sidebar, browser back —
+          would drop them. One guard for the whole area; the pages themselves
+          only report that they are dirty. */}
+      <UnsavedChangesGuard />
 
       {active && ActiveComponent ? (
-        <div className="surface-panel flex min-h-[500px] flex-col overflow-hidden rounded-[1.8rem] border-0 lg:flex-row">
-          <nav
-            aria-label="Admin settings sections"
-            className="border-border hidden space-y-5 border-r px-3 py-4 lg:block lg:w-60 lg:flex-shrink-0"
-          >
-            {filteredSettingsGroups.map((group) => (
-              <SideNavSection
-                key={group.label}
-                label={group.label}
-                idPrefix="admin-settings-nav"
-              >
-                {group.items.map((item) => (
-                  <SideNavItem
-                    key={item.id}
-                    label={item.label}
-                    icon={item.icon}
-                    active={item.id === active.id}
-                    onClick={() => setActiveId(item.id)}
-                  />
-                ))}
-              </SideNavSection>
-            ))}
-            {filteredSettingsGroups.length === 0 ? (
-              <p className="text-muted-foreground px-2 text-sm">
-                No matching settings
-              </p>
-            ) : null}
-          </nav>
+        <div className="w-full space-y-5">
+          <div className="flex flex-wrap items-center gap-3">
+            <Link
+              to="/admin/settings"
+              className="text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex w-fit items-center gap-1.5 rounded-lg pr-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            >
+              <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+              All settings
+            </Link>
+          </div>
 
-          <div
-            ref={activeContentRef}
-            role="region"
-            aria-label={`${active.label} settings`}
-            tabIndex={-1}
-            className="flex-1 space-y-6 overflow-y-auto p-4 focus:outline-none sm:p-6"
-          >
-            {SHELL_HEADING_SETTINGS.has(active.id) ? (
-              <h2
-                ref={activeHeadingRef}
+          {/* Same shell as the user settings page (SettingsLayout): one panel,
+              nav rail on the left, content column on the right. */}
+          <div className="surface-panel-lg flex min-w-0 flex-col lg:min-h-[500px] lg:flex-row lg:overflow-hidden">
+            <aside className="border-border hidden lg:block lg:w-60 lg:flex-shrink-0 lg:border-r">
+              {/* Lives with the rail it filters, not in the header row: the
+                  admin shell floats its own fixed Search ⌘K / activity controls
+                  over the top-right corner, which overlapped an input there. */}
+              <div className="pt-5 pr-3 pl-5">
+                <SettingsSearchInput
+                  value={settingsSearch}
+                  onChange={setSettingsSearch}
+                  resultCount={countSettingsSearchItems(filteredGroups)}
+                  captureShortcut={false}
+                />
+              </div>
+              <SettingsPageRail activeId={active.id} items={filteredItems} />
+            </aside>
+
+            <div className="min-w-0 flex-1 p-4 sm:p-6">
+              <div
+                ref={activeContentRef}
+                role="region"
+                aria-label={`${active.label} settings`}
                 tabIndex={-1}
-                className="text-2xl font-semibold tracking-tight focus:outline-none sm:text-3xl lg:sr-only"
+                className="w-full max-w-3xl min-w-0 focus:outline-none"
               >
-                {active.label}
-              </h2>
-            ) : null}
-            <ActiveComponent />
+                <ActiveComponent />
+              </div>
+            </div>
           </div>
         </div>
       ) : (
-        <div className="w-full">
-          <SettingsOverviewNav
-            groups={overviewGroups}
-            ariaLabel="Admin settings sections"
-            idPrefix="admin-settings-index"
-            variant="directory"
-          />
-        </div>
+        <SettingsOverview />
       )}
     </div>
   );
diff --git a/web/src/pages/admin-settings/AppearanceSettings.test.tsx b/web/src/pages/admin-settings/AppearanceSettings.test.tsx
new file mode 100644
index 000000000..f7cb46009
--- /dev/null
+++ b/web/src/pages/admin-settings/AppearanceSettings.test.tsx
@@ -0,0 +1,271 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const useSettingsFormMock = vi.fn();
+
+vi.mock("@/hooks/useSettingsForm", () => ({
+  useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
+}));
+
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => new Set<string>(),
+}));
+
+vi.mock("@/hooks/useBranding", () => ({
+  useBranding: () => ({
+    storageAvailable: true,
+    wordmarkUrl: null,
+    markUrl: null,
+    faviconUrl: null,
+    loginBgUrl: null,
+  }),
+}));
+
+vi.mock("@/components/admin/BrandingAssetField", () => ({
+  BrandingAssetField: ({ label }: { label: string }) => <div>{label}</div>,
+}));
+
+vi.mock("@/components/theme/TokenEditor", () => ({
+  TokenEditor: ({
+    onSetVar,
+  }: {
+    onSetVar: (token: "primary", value: string) => void;
+  }) => (
+    <button type="button" onClick={() => onSetVar("primary", "#112233")}>
+      Set primary token
+    </button>
+  ),
+}));
+
+vi.mock("@/components/theme/RawCssEditor", () => ({
+  RawCssEditor: ({
+    value,
+    onChange,
+  }: {
+    value: string;
+    onChange: (css: string) => void;
+  }) => (
+    <textarea
+      aria-label="Custom CSS editor"
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  ),
+}));
+
+vi.mock("@/components/theme/ThemePreviewCard", () => ({
+  ThemePreviewCard: () => null,
+}));
+
+vi.mock("@/components/overlays/OverlayPreviewCard", () => ({
+  OverlayPreviewCard: ({ variant }: { variant?: string }) => (
+    <div data-testid="overlay-preview">{variant}</div>
+  ),
+}));
+
+import { buildDefaultPrefs, serializeOverlayPrefs } from "@/lib/overlays";
+
+import AppearanceSettings from "./AppearanceSettings";
+
+const BUILT_IN_OVERLAY_DEFAULTS = serializeOverlayPrefs(buildDefaultPrefs());
+
+/** The built-in document with one badge flipped, so it is not already default. */
+function customizedOverlayDefaults() {
+  const prefs = buildDefaultPrefs();
+  prefs.preset = "vibrant";
+  prefs.items.resolution = {
+    ...prefs.items.resolution,
+    enabled: !prefs.items.resolution.enabled,
+  };
+  return serializeOverlayPrefs(prefs);
+}
+
+function makeForm(values: Record<string, string> = {}) {
+  const staged: Record<string, string> = { ...values };
+  return {
+    isLoading: false,
+    getValue: (key: string) => staged[key] ?? "",
+    setValue: vi.fn((key: string, value: string) => {
+      staged[key] = value;
+    }),
+    isDirty: () => false,
+    dirtyCount: 0,
+    save: vi.fn(),
+    discard: vi.fn(),
+    isSaving: false,
+    restartRequired: false,
+  };
+}
+
+let form: ReturnType<typeof makeForm>;
+
+describe("AppearanceSettings", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    form = makeForm();
+    useSettingsFormMock.mockReset();
+    useSettingsFormMock.mockImplementation(() => form);
+  });
+
+  it("renders every field group heading", () => {
+    render(<AppearanceSettings />);
+
+    for (const heading of [
+      "Logos and icons",
+      "Colors and theme",
+      "Card overlays",
+    ]) {
+      expect(screen.getByRole("group", { name: heading })).toBeInTheDocument();
+    }
+  });
+
+  it("renders the tab title and nothing else in the header", () => {
+    render(<AppearanceSettings />);
+
+    expect(
+      screen.getByRole("heading", { name: "Appearance" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Default theme")).toBeInTheDocument();
+    expect(screen.getByText("Accent color")).toBeInTheDocument();
+  });
+
+  it("stages the union of appearance keys and leaves identity to General", () => {
+    render(<AppearanceSettings />);
+
+    const keys = useSettingsFormMock.mock.calls[0]?.[0]?.keys as string[];
+    expect(keys).toEqual(
+      expect.arrayContaining([
+        "branding.accent_color",
+        "branding.default_theme",
+        "ui.admin_theme_vars",
+        "ui.admin_custom_css",
+        "theme.catalog_url",
+        "overlays.enabled",
+        "defaults.card_overlays",
+      ]),
+    );
+    expect(keys).not.toContain("branding.server_name");
+    expect(keys).not.toContain("branding.login_subtitle");
+  });
+
+  it("stages the accent color and its theme tokens instead of saving immediately", () => {
+    render(<AppearanceSettings />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Use accent #10b981" }));
+
+    expect(form.save).not.toHaveBeenCalled();
+    expect(form.setValue).toHaveBeenCalledWith(
+      "branding.accent_color",
+      "#10b981",
+    );
+    expect(form.setValue).toHaveBeenCalledWith(
+      "ui.admin_theme_vars",
+      JSON.stringify({
+        primary: "#10b981",
+        ring: "#10b981",
+        "sidebar-primary": "#10b981",
+      }),
+    );
+  });
+
+  it("keeps the token editor, custom CSS and theme list behind one advanced disclosure", () => {
+    render(<AppearanceSettings />);
+
+    expect(
+      screen.queryByRole("button", { name: "Set primary token" }),
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /Advanced · 3 settings/ }),
+    );
+
+    expect(
+      screen.getByRole("button", { name: "Set primary token" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("textbox", { name: "Custom CSS editor" }),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Community theme list")).toBeInTheDocument();
+  });
+
+  // Show-only overlays (network, show status) are invisible against the movie
+  // sample, so the admin editing server defaults needs the same toggle the user
+  // page has. It is view state: switching it stages nothing.
+  it("previews the badge defaults against either a movie or a show sample", () => {
+    render(<AppearanceSettings />);
+
+    expect(screen.getByTestId("overlay-preview")).toHaveTextContent("movie");
+
+    fireEvent.click(screen.getByRole("button", { name: "show" }));
+
+    expect(screen.getByTestId("overlay-preview")).toHaveTextContent("show");
+    expect(form.setValue).not.toHaveBeenCalled();
+  });
+
+  // Restoring is an ordinary staged edit: the admin still confirms the batch
+  // through the SaveBar, and Discard puts the previous defaults back.
+  it("stages the registry's built-in overlay document instead of saving it", () => {
+    form = makeForm({ "defaults.card_overlays": customizedOverlayDefaults() });
+    render(<AppearanceSettings />);
+
+    fireEvent.click(screen.getByRole("button", { name: /Restore defaults/ }));
+    fireEvent.click(screen.getByRole("button", { name: "Restore" }));
+
+    expect(form.setValue).toHaveBeenCalledWith(
+      "defaults.card_overlays",
+      BUILT_IN_OVERLAY_DEFAULTS,
+    );
+    expect(form.save).not.toHaveBeenCalled();
+  });
+
+  it("leaves the badge kill switch alone when restoring the defaults", () => {
+    form = makeForm({
+      "defaults.card_overlays": customizedOverlayDefaults(),
+      "overlays.enabled": "false",
+    });
+    render(<AppearanceSettings />);
+
+    fireEvent.click(screen.getByRole("button", { name: /Restore defaults/ }));
+    fireEvent.click(screen.getByRole("button", { name: "Restore" }));
+
+    expect(form.setValue).toHaveBeenCalledTimes(1);
+    expect(form.setValue).not.toHaveBeenCalledWith(
+      "overlays.enabled",
+      expect.anything(),
+    );
+  });
+
+  it("offers nothing to restore while the defaults already match the registry", () => {
+    form = makeForm({ "defaults.card_overlays": BUILT_IN_OVERLAY_DEFAULTS });
+    render(<AppearanceSettings />);
+
+    expect(
+      screen.getByRole("button", { name: /Restore defaults/ }),
+    ).toBeDisabled();
+  });
+
+  it("stages sanitized CSS while the editor keeps showing what was typed", () => {
+    render(<AppearanceSettings />);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /Advanced · 3 settings/ }),
+    );
+    const editor = screen.getByRole("textbox", { name: "Custom CSS editor" });
+    fireEvent.change(editor, {
+      target: {
+        value: '@import "https://example.invalid/x.css"; .card { color: red; }',
+      },
+    });
+
+    expect(form.save).not.toHaveBeenCalled();
+    expect(form.setValue).toHaveBeenCalledWith(
+      "ui.admin_custom_css",
+      "/* [blocked @import] */ .card { color: red; }",
+    );
+    expect(editor).toHaveValue(
+      '@import "https://example.invalid/x.css"; .card { color: red; }',
+    );
+  });
+});
diff --git a/web/src/pages/admin-settings/AppearanceSettings.tsx b/web/src/pages/admin-settings/AppearanceSettings.tsx
new file mode 100644
index 000000000..51a193709
--- /dev/null
+++ b/web/src/pages/admin-settings/AppearanceSettings.tsx
@@ -0,0 +1,685 @@
+import { useMemo, useState } from "react";
+import { AlertTriangle, Check, RotateCcw } from "lucide-react";
+
+import { BrandingAssetField } from "@/components/admin/BrandingAssetField";
+import { BRANDING_ASSET_SPECS } from "@/components/admin/brandingAssetSpecs";
+import { ConfirmDialog } from "@/components/ConfirmDialog";
+import {
+  OverlayPreviewCard,
+  type OverlayPreviewVariant,
+} from "@/components/overlays/OverlayPreviewCard";
+import { OverlayPreviewVariantToggle } from "@/components/overlays/OverlayPreviewVariantToggle";
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import { RawCssEditor } from "@/components/theme/RawCssEditor";
+import { ThemePreviewCard } from "@/components/theme/ThemePreviewCard";
+import { TokenEditor } from "@/components/theme/TokenEditor";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { useBranding } from "@/hooks/useBranding";
+import { useRestartKeys } from "@/hooks/useRestartKeys";
+import { useSettingsForm } from "@/hooks/useSettingsForm";
+import { ACCENT_TOKENS, accentColorToTokens } from "@/lib/accentMapping";
+import { sanitizeCss } from "@/lib/cssSanitizer";
+import {
+  buildDefaultPrefs,
+  CATEGORY_META,
+  OVERLAY_CATEGORIES,
+  OVERLAY_PRESETS,
+  OVERLAY_REGISTRY,
+  POSITION_OPTIONS,
+  PRESET_IDS,
+  parseOverlayPrefs,
+  serializeOverlayPrefs,
+  type CardOverlayPrefs,
+  type OverlayId,
+  type OverlayPosition,
+  type PresetId,
+} from "@/lib/overlays";
+import { parseVarsJson } from "@/lib/themeExport";
+import type { ThemeVarOverrides } from "@/hooks/useCustomTheme";
+import type { ThemeToken } from "@/lib/themeTokens";
+import { THEME_IDS, THEMES } from "@/lib/themes";
+import { cn } from "@/lib/utils";
+import { FieldGroup } from "./FieldGroup";
+import { SaveBar } from "./SaveBar";
+import {
+  SETTINGS_CONTROL_WIDTH,
+  SettingField,
+  SettingFieldRow,
+} from "./SettingField";
+
+const IMAGE_ACCEPT = "image/png,image/jpeg,image/webp";
+const FAVICON_ACCEPT =
+  "image/png,image/x-icon,image/vnd.microsoft.icon,image/svg+xml,image/webp,.ico";
+
+const ACCENT_PRESETS = [
+  "#4f46e5",
+  "#0ea5e9",
+  "#10b981",
+  "#f59e0b",
+  "#ef4444",
+  "#ec4899",
+  "#8b5cf6",
+  "#64748b",
+];
+
+const ACCENT_KEY = "branding.accent_color";
+const DEFAULT_THEME_KEY = "branding.default_theme";
+const THEME_VARS_KEY = "ui.admin_theme_vars";
+const CUSTOM_CSS_KEY = "ui.admin_custom_css";
+const CATALOG_URL_KEY = "theme.catalog_url";
+const OVERLAYS_ENABLED_KEY = "overlays.enabled";
+const OVERLAY_DEFAULTS_KEY = "defaults.card_overlays";
+
+const THEME_KEYS = [
+  ACCENT_KEY,
+  DEFAULT_THEME_KEY,
+  THEME_VARS_KEY,
+  CUSTOM_CSS_KEY,
+  CATALOG_URL_KEY,
+];
+
+const OVERLAY_KEYS = [OVERLAYS_ENABLED_KEY, OVERLAY_DEFAULTS_KEY];
+
+/**
+ * Silo's built-in overlay configuration, derived from the registry's own
+ * per-overlay defaults rather than copied out into a literal here, so an
+ * overlay added to the registry is covered without touching this page.
+ */
+const BUILT_IN_OVERLAY_DEFAULTS = serializeOverlayPrefs(buildDefaultPrefs());
+
+/**
+ * Every appearance key the page stages, saved as one batch by the shared
+ * SaveBar. Theming used to autosave each keystroke through
+ * `useUpdateServerSetting`; it now shares this form so the whole page has one
+ * save model. Asset uploads keep their own upload/delete mutations because a
+ * file picker has no draft to batch.
+ *
+ * Server name and login subtitle deliberately live on the General page: they are
+ * server identity, not look and feel.
+ */
+const KEYS = [...THEME_KEYS, ...OVERLAY_KEYS];
+
+export default function AppearanceSettings() {
+  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
+  const branding = useBranding();
+  const restartKeys = useRestartKeys();
+
+  // The CSS box shows exactly what was typed while the staged value is the
+  // sanitized copy that will be saved, so stripping an external @import never
+  // rewrites the text under the cursor.
+  const [cssDraft, setCssDraft] = useState<string | null>(null);
+  // The accent picker and the style preset write the same keys as the advanced
+  // controls, so plain dirty state would pop the disclosure open on an
+  // essential edit. Track use of the advanced controls themselves instead.
+  const [tokensTouched, setTokensTouched] = useState(false);
+  const [overlayItemsTouched, setOverlayItemsTouched] = useState(false);
+  const [confirmRestoreOverlaysOpen, setConfirmRestoreOverlaysOpen] =
+    useState(false);
+  // Which sample the badge preview stands in for. View state only — show-only
+  // overlays (network, show status) are otherwise impossible to see here.
+  const [previewVariant, setPreviewVariant] =
+    useState<OverlayPreviewVariant>("movie");
+
+  const accentColor = form.getValue(ACCENT_KEY);
+  const customAccentActive =
+    Boolean(accentColor) &&
+    !ACCENT_PRESETS.some(
+      (hex) => hex.toLowerCase() === accentColor.toLowerCase(),
+    );
+  const defaultTheme = form.getValue(DEFAULT_THEME_KEY);
+  const vars = parseVarsJson(form.getValue(THEME_VARS_KEY));
+  const savedCss = form.getValue(CUSTOM_CSS_KEY);
+  const rawCss = cssDraft ?? savedCss;
+  const hasThemeOverrides = Object.keys(vars).length > 0 || savedCss.length > 0;
+
+  // s3.public_bucket is not staged here, but getValue falls back to the full
+  // settings response so the uploads can still be gated on it.
+  const s3Configured = Boolean(form.getValue("s3.public_bucket"));
+  const assetStorageAvailable = branding.storageAvailable;
+
+  const overlaysEnabled = form.getValue(OVERLAYS_ENABLED_KEY) !== "false";
+  const overlayPrefs = parseOverlayPrefs(
+    form.getValue(OVERLAY_DEFAULTS_KEY) || BUILT_IN_OVERLAY_DEFAULTS,
+  );
+  const overlayDefaultsAreBuiltIn =
+    serializeOverlayPrefs(overlayPrefs) === BUILT_IN_OVERLAY_DEFAULTS;
+
+  const setVars = (next: ThemeVarOverrides) =>
+    form.setValue(THEME_VARS_KEY, JSON.stringify(next));
+
+  // Accent recolors the primary action color, focus ring, and sidebar accent
+  // (ACCENT_TOKENS). It merges into the staged token overrides so a pick never
+  // clobbers the advanced editor and repeated picks compound correctly.
+  const applyAccent = (hex: string) => {
+    setVars({ ...vars, ...accentColorToTokens(hex) });
+    form.setValue(ACCENT_KEY, hex);
+  };
+
+  const clearAccent = () => {
+    const next = { ...vars };
+    for (const token of ACCENT_TOKENS) {
+      delete next[token];
+    }
+    setVars(next);
+    form.setValue(ACCENT_KEY, "");
+  };
+
+  const setToken = (token: ThemeToken, value: string) => {
+    setTokensTouched(true);
+    setVars({ ...vars, [token]: value });
+  };
+
+  const resetToken = (token: ThemeToken) => {
+    setTokensTouched(true);
+    const next = { ...vars };
+    delete next[token];
+    setVars(next);
+  };
+
+  const handleCssChange = (css: string) => {
+    setTokensTouched(true);
+    setCssDraft(css);
+    form.setValue(CUSTOM_CSS_KEY, sanitizeCss(css));
+  };
+
+  const resetAllThemeOverrides = () => {
+    setTokensTouched(true);
+    setCssDraft("");
+    setVars({});
+    form.setValue(CUSTOM_CSS_KEY, "");
+    form.setValue(ACCENT_KEY, "");
+  };
+
+  const setOverlayPrefs = (next: CardOverlayPrefs) =>
+    form.setValue(OVERLAY_DEFAULTS_KEY, serializeOverlayPrefs(next));
+
+  const updateOverlayItem = (
+    id: OverlayId,
+    patch: Partial<CardOverlayPrefs["items"][OverlayId]>,
+  ) => {
+    setOverlayItemsTouched(true);
+    setOverlayPrefs({
+      ...overlayPrefs,
+      items: {
+        ...overlayPrefs.items,
+        [id]: { ...overlayPrefs.items[id], ...patch },
+      },
+    });
+  };
+
+  // Restoring stages the built-in document like any other edit rather than
+  // writing it: the admin still confirms the whole batch through the SaveBar,
+  // and Discard puts the previous defaults back.
+  const restoreOverlayDefaults = () => {
+    setConfirmRestoreOverlaysOpen(false);
+    form.setValue(OVERLAY_DEFAULTS_KEY, BUILT_IN_OVERLAY_DEFAULTS);
+  };
+
+  // Discarding has to drop the untouched CSS draft too, otherwise the box would
+  // keep showing text that is no longer staged.
+  const discard = () => {
+    setCssDraft(null);
+    form.discard();
+  };
+
+  const themeAdvancedDirty =
+    tokensTouched ||
+    form.isDirty(CUSTOM_CSS_KEY) ||
+    form.isDirty(CATALOG_URL_KEY);
+
+  const allRestart = (keys: string[]) =>
+    keys.every((key) => restartKeys.has(key));
+
+  if (form.isLoading) return <div>Loading...</div>;
+
+  return (
+    <div className="flex h-full flex-col">
+      <SettingsPageHeader title="Appearance" className="mb-8" />
+
+      <div className="flex-1 space-y-5">
+        <FieldGroup label="Logos and icons">
+          {!assetStorageAvailable && (
+            <div className="mt-3 flex items-start gap-3 rounded-xl border border-amber-500/20 bg-amber-500/5 p-3">
+              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
+              <p className="text-muted-foreground text-[13px] leading-relaxed">
+                {s3Configured ? (
+                  <>Restart the server to finish enabling image uploads.</>
+                ) : (
+                  <>
+                    Image uploads need a public S3 bucket, set in{" "}
+                    <span className="text-foreground font-medium">
+                      Infrastructure
+                    </span>{" "}
+                    settings.
+                  </>
+                )}
+              </p>
+            </div>
+          )}
+
+          <div className="space-y-2 py-3.5">
+            <BrandingAssetField
+              label="Logo (wordmark)"
+              description="Shown in the expanded sidebar."
+              kind="wordmark"
+              currentUrl={branding.wordmarkUrl}
+              accept={IMAGE_ACCEPT}
+              enabled={assetStorageAvailable}
+              preview="wide"
+            />
+            <BrandingAssetField
+              label="Logo (wordmark, light themes)"
+              description="Optional. Shown on light themes; falls back to the main logo."
+              kind="wordmark_light"
+              currentUrl={branding.wordmarkLightUrl}
+              fallbackUrl={
+                branding.wordmarkUrl ?? BRANDING_ASSET_SPECS.wordmark.defaultUrl
+              }
+              accept={IMAGE_ACCEPT}
+              enabled={assetStorageAvailable}
+              preview="wide"
+              previewBg="light"
+            />
+            <BrandingAssetField
+              label="Logo (icon)"
+              description="Shown in the collapsed sidebar and the installed app."
+              kind="mark"
+              currentUrl={branding.markUrl}
+              accept={IMAGE_ACCEPT}
+              enabled={assetStorageAvailable}
+              preview="square"
+            />
+            <BrandingAssetField
+              label="Logo (icon, light themes)"
+              description="Optional. Shown on light themes; falls back to the main icon."
+              kind="mark_light"
+              currentUrl={branding.markLightUrl}
+              fallbackUrl={
+                branding.markUrl ?? BRANDING_ASSET_SPECS.mark.defaultUrl
+              }
+              accept={IMAGE_ACCEPT}
+              enabled={assetStorageAvailable}
+              preview="square"
+              previewBg="light"
+            />
+            <BrandingAssetField
+              label="Favicon"
+              description="Shown in the browser tab."
+              kind="favicon"
+              currentUrl={branding.faviconUrl}
+              accept={FAVICON_ACCEPT}
+              enabled={assetStorageAvailable}
+              preview="square"
+            />
+            <BrandingAssetField
+              label="Login background"
+              description="Shown on the login and signup pages."
+              kind="login_bg"
+              currentUrl={branding.loginBgUrl}
+              accept={IMAGE_ACCEPT}
+              enabled={assetStorageAvailable}
+              preview="wide"
+            />
+          </div>
+        </FieldGroup>
+
+        <FieldGroup
+          label="Colors and theme"
+          restartAll={allRestart(THEME_KEYS)}
+        >
+          <SettingFieldRow
+            label="Accent color"
+            description="Recolors buttons, focus outlines, and the sidebar."
+          >
+            <div className="flex flex-wrap items-center justify-end gap-2 sm:max-w-[300px]">
+              {/* Exactly one control in this row is always marked selected:
+                  the Default swatch when no accent is stored, the matching
+                  preset when one is, or the Custom chip when the stored hex
+                  matches no preset. */}
+              <button
+                type="button"
+                onClick={clearAccent}
+                aria-label="Use theme default accent"
+                aria-pressed={!accentColor}
+                title="Theme default"
+                className={cn(
+                  "bg-muted text-muted-foreground relative grid h-8 w-8 place-items-center rounded-full border transition-transform hover:scale-110",
+                  !accentColor
+                    ? "border-foreground ring-foreground ring-offset-background ring-2 ring-offset-2"
+                    : "border-border",
+                )}
+              >
+                <RotateCcw className="h-3.5 w-3.5" />
+              </button>
+              {ACCENT_PRESETS.map((hex) => {
+                const selected =
+                  accentColor.toLowerCase() === hex.toLowerCase();
+                return (
+                  <button
+                    key={hex}
+                    type="button"
+                    onClick={() => applyAccent(hex)}
+                    aria-label={`Use accent ${hex}`}
+                    aria-pressed={selected}
+                    className={cn(
+                      "relative h-8 w-8 rounded-full border transition-transform hover:scale-110",
+                      selected
+                        ? "border-foreground ring-foreground ring-offset-background ring-2 ring-offset-2"
+                        : "border-border",
+                    )}
+                    style={{ backgroundColor: hex }}
+                  >
+                    {selected && (
+                      <Check className="absolute inset-0 m-auto h-4 w-4 text-white drop-shadow" />
+                    )}
+                  </button>
+                );
+              })}
+              <label
+                className={cn(
+                  "inline-flex h-8 cursor-pointer items-center gap-2 rounded-lg border px-2.5 text-xs font-medium",
+                  customAccentActive
+                    ? "border-foreground ring-foreground ring-offset-background ring-1 ring-offset-1"
+                    : "border-border",
+                )}
+              >
+                <input
+                  type="color"
+                  aria-label="Custom accent color"
+                  value={accentColor || "#4f46e5"}
+                  onChange={(e) => applyAccent(e.target.value)}
+                  className="h-5 w-5 cursor-pointer border-0 bg-transparent p-0"
+                />
+                Custom
+                {customAccentActive && <Check className="h-3.5 w-3.5" />}
+              </label>
+            </div>
+          </SettingFieldRow>
+
+          <SettingFieldRow
+            label="Default theme"
+            description="Used until someone picks their own theme."
+          >
+            <div className="flex flex-wrap justify-end gap-2 sm:max-w-[320px]">
+              <button
+                type="button"
+                onClick={() => form.setValue(DEFAULT_THEME_KEY, "")}
+                className={cn(
+                  "rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors",
+                  defaultTheme === ""
+                    ? "border-foreground bg-muted/50"
+                    : "border-border hover:bg-muted/30",
+                )}
+              >
+                No default
+              </button>
+              {THEME_IDS.map((id) => (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => form.setValue(DEFAULT_THEME_KEY, id)}
+                  className={cn(
+                    "inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors",
+                    defaultTheme === id
+                      ? "border-foreground bg-muted/50"
+                      : "border-border hover:bg-muted/30",
+                  )}
+                >
+                  <span
+                    className="h-3.5 w-3.5 rounded-full border border-black/10"
+                    style={{ backgroundColor: THEMES[id].previewBg }}
+                  >
+                    <span
+                      className="block h-full w-full scale-50 rounded-full"
+                      style={{ backgroundColor: THEMES[id].previewAccent }}
+                    />
+                  </span>
+                  {THEMES[id].label}
+                </button>
+              ))}
+            </div>
+          </SettingFieldRow>
+
+          <AdvancedSection
+            id="appearance.theme"
+            count={3}
+            forceOpen={themeAdvancedDirty}
+          >
+            <div className="space-y-3 py-3.5">
+              <div className="space-y-1">
+                <Label className="text-sm font-medium">
+                  Individual colors and fonts
+                </Label>
+                <p className="text-muted-foreground text-xs leading-relaxed">
+                  Applied on top of the chosen theme.
+                </p>
+              </div>
+              <ThemePreviewCard vars={vars} />
+              {hasThemeOverrides && (
+                <div className="flex justify-end">
+                  <button
+                    type="button"
+                    onClick={resetAllThemeOverrides}
+                    className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1.5 text-xs font-medium transition-colors"
+                  >
+                    <RotateCcw className="h-3 w-3" />
+                    Reset all
+                  </button>
+                </div>
+              )}
+              <TokenEditor
+                vars={vars}
+                onSetVar={setToken}
+                onResetVar={resetToken}
+              />
+            </div>
+
+            <div className="space-y-2 py-3.5">
+              <div className="space-y-1">
+                <Label className="text-sm font-medium">Custom CSS</Label>
+                <p className="text-muted-foreground text-xs leading-relaxed">
+                  Applied to every page after the theme.
+                </p>
+              </div>
+              <RawCssEditor value={rawCss} onChange={handleCssChange} />
+            </div>
+
+            <SettingField
+              label="Community theme list"
+              type="text"
+              hint="https://example.com/themes.json"
+              description="Address of a JSON list of community themes."
+              value={form.getValue(CATALOG_URL_KEY)}
+              onChange={(v) => form.setValue(CATALOG_URL_KEY, v)}
+              restartRequired={restartKeys.has(CATALOG_URL_KEY)}
+            />
+          </AdvancedSection>
+        </FieldGroup>
+
+        <FieldGroup
+          label="Card overlays"
+          restartAll={allRestart(OVERLAY_KEYS)}
+          actions={
+            <button
+              type="button"
+              onClick={() => setConfirmRestoreOverlaysOpen(true)}
+              disabled={overlayDefaultsAreBuiltIn}
+              className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1.5 text-xs font-medium transition-colors disabled:pointer-events-none disabled:opacity-40"
+            >
+              <RotateCcw className="h-3 w-3" aria-hidden="true" />
+              Restore defaults
+            </button>
+          }
+        >
+          <SettingField
+            label="Show badges on poster art"
+            description="Off hides badges for everyone."
+            type="toggle"
+            value={form.getValue(OVERLAYS_ENABLED_KEY) || "true"}
+            onChange={(v) => form.setValue(OVERLAYS_ENABLED_KEY, v)}
+            restartRequired={restartKeys.has(OVERLAYS_ENABLED_KEY)}
+          />
+
+          {/* Row and preview are one list child so the hairline falls after
+              the pair, not between them. The preview gets a full-width framed
+              strip instead of squatting in the row's control column. */}
+          <div
+            inert={!overlaysEnabled}
+            className={
+              overlaysEnabled ? undefined : "pointer-events-none opacity-50"
+            }
+          >
+            <SettingFieldRow
+              label="Badge style"
+              description="Default for people who have not chosen their own."
+            >
+              <Select
+                value={overlayPrefs.preset}
+                onValueChange={(v) =>
+                  setOverlayPrefs({ ...overlayPrefs, preset: v as PresetId })
+                }
+              >
+                <SelectTrigger
+                  className={SETTINGS_CONTROL_WIDTH}
+                  aria-label="Badge style"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {PRESET_IDS.map((id) => (
+                    <SelectItem key={id} value={id}>
+                      {OVERLAY_PRESETS[id].label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </SettingFieldRow>
+            <div className="border-border/70 bg-foreground/[0.02] mb-4 rounded-xl border p-3">
+              <div className="flex items-center justify-between gap-3 px-1">
+                <span className="text-muted-foreground text-[11px] font-medium tracking-wide uppercase">
+                  Preview
+                </span>
+                <OverlayPreviewVariantToggle
+                  value={previewVariant}
+                  onChange={setPreviewVariant}
+                />
+              </div>
+              <div className="mt-3 flex justify-center pb-1">
+                <OverlayPreviewCard
+                  prefs={overlayPrefs}
+                  size="sm"
+                  variant={previewVariant}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div
+            inert={!overlaysEnabled}
+            className={cn(
+              overlaysEnabled ? "" : "pointer-events-none opacity-50",
+            )}
+          >
+            <AdvancedSection
+              id="appearance.overlays"
+              count={OVERLAY_REGISTRY.length}
+              forceOpen={overlayItemsTouched}
+            >
+              {OVERLAY_CATEGORIES.map((category) => {
+                const overlays = OVERLAY_REGISTRY.filter(
+                  (d) => d.category === category,
+                );
+                if (overlays.length === 0) return null;
+                return (
+                  <div key={category} className="min-w-0">
+                    <p className="text-muted-foreground pt-3.5 pb-1 text-xs font-medium">
+                      {CATEGORY_META[category].title}
+                    </p>
+                    <div className="settings-field-list">
+                      {overlays.map((def) => {
+                        const config = overlayPrefs.items[def.id];
+                        return (
+                          <SettingFieldRow
+                            key={def.id}
+                            label={def.label}
+                            description={def.description}
+                          >
+                            <Select
+                              value={config.position}
+                              disabled={!config.enabled}
+                              onValueChange={(pos) =>
+                                updateOverlayItem(def.id, {
+                                  position: pos as OverlayPosition,
+                                })
+                              }
+                            >
+                              <SelectTrigger
+                                className="w-[130px]"
+                                aria-label={`${def.label} corner`}
+                              >
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {POSITION_OPTIONS.map((opt) => (
+                                  <SelectItem key={opt.value} value={opt.value}>
+                                    {opt.label}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <Switch
+                              checked={config.enabled}
+                              aria-label={`Show ${def.label}`}
+                              onCheckedChange={(checked) =>
+                                updateOverlayItem(def.id, { enabled: checked })
+                              }
+                            />
+                          </SettingFieldRow>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </AdvancedSection>
+          </div>
+        </FieldGroup>
+      </div>
+
+      <ConfirmDialog
+        open={confirmRestoreOverlaysOpen}
+        onOpenChange={setConfirmRestoreOverlaysOpen}
+        title="Restore badge defaults"
+        description="Replace the server-wide badge defaults with Silo's built-in configuration. The badge on/off switch is left alone, and nothing is written until you save."
+        confirmLabel="Restore"
+        variant="destructive"
+        onConfirm={restoreOverlayDefaults}
+      />
+
+      <SaveBar
+        dirtyCount={form.dirtyCount}
+        onSave={() => {
+          // What persists is the SANITIZED css. Dropping the raw draft on
+          // success flips the editor to the canonical saved value, so stripped
+          // content (an external @import, say) never lingers on screen looking
+          // accepted. On failure the draft stays; the mutation already toasts.
+          void form.save().then(
+            () => setCssDraft(null),
+            () => {},
+          );
+        }}
+        onDiscard={discard}
+        isSaving={form.isSaving}
+      />
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/BrandingSettings.tsx b/web/src/pages/admin-settings/BrandingSettings.tsx
deleted file mode 100644
index c199468ba..000000000
--- a/web/src/pages/admin-settings/BrandingSettings.tsx
+++ /dev/null
@@ -1,325 +0,0 @@
-import { useMemo } from "react";
-import { AlertTriangle, Check, RotateCcw } from "lucide-react";
-
-import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { useBranding } from "@/hooks/useBranding";
-import { BrandingAssetField } from "@/components/admin/BrandingAssetField";
-import { parseVarsJson } from "@/lib/themeExport";
-import { ACCENT_TOKENS, accentColorToTokens } from "@/lib/accentMapping";
-import { THEME_IDS, THEMES } from "@/lib/themes";
-import { cn } from "@/lib/utils";
-import { SaveBar } from "./SaveBar";
-
-const IMAGE_ACCEPT = "image/png,image/jpeg,image/webp";
-const FAVICON_ACCEPT =
-  "image/png,image/x-icon,image/vnd.microsoft.icon,image/svg+xml,image/webp,.ico";
-
-const ACCENT_PRESETS = [
-  "#4f46e5",
-  "#0ea5e9",
-  "#10b981",
-  "#f59e0b",
-  "#ef4444",
-  "#ec4899",
-  "#8b5cf6",
-  "#64748b",
-];
-
-// Text identity, accent color, and default theme are staged locally and persist
-// together on Save. Accent writes both the manifest/meta color
-// (branding.accent_color) and the theme token overrides (ui.admin_theme_vars),
-// so both keys are tracked here. None of these require a restart — the server
-// reads them live, and useUpdateServerSetting refreshes the public theme caches
-// on save so changes apply immediately. Asset uploads (below) keep their own
-// immediate upload/delete mutations: a file picker has no draft to batch.
-const KEYS = [
-  "branding.server_name",
-  "branding.login_subtitle",
-  "branding.accent_color",
-  "branding.default_theme",
-  "ui.admin_theme_vars",
-];
-
-export default function BrandingSettings() {
-  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
-  const branding = useBranding();
-
-  const accentColor = form.getValue("branding.accent_color");
-  const defaultTheme = form.getValue("branding.default_theme");
-  // s3.public_bucket is not managed here, but getValue falls back to the full
-  // settings response so we can still gate the asset uploads on it.
-  const s3Configured = Boolean(form.getValue("s3.public_bucket"));
-  const assetStorageAvailable = branding.storageAvailable;
-
-  // Accent recolors the primary action color, focus ring, and sidebar accent
-  // (ACCENT_TOKENS). It merges into any overrides set via the Theming tab so
-  // they are not clobbered, reading the staged value so repeated picks compound
-  // correctly.
-  const applyAccent = (hex: string) => {
-    const existing = parseVarsJson(form.getValue("ui.admin_theme_vars"));
-    const merged = { ...existing, ...accentColorToTokens(hex) };
-    form.setValue("ui.admin_theme_vars", JSON.stringify(merged));
-    form.setValue("branding.accent_color", hex);
-  };
-
-  const clearAccent = () => {
-    const existing = parseVarsJson(form.getValue("ui.admin_theme_vars"));
-    for (const token of ACCENT_TOKENS) {
-      delete existing[token];
-    }
-    form.setValue("ui.admin_theme_vars", JSON.stringify(existing));
-    form.setValue("branding.accent_color", "");
-  };
-
-  const selectDefaultTheme = (id: string) =>
-    form.setValue("branding.default_theme", id);
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="flex-1 space-y-8">
-        {/* Identity */}
-        <section className="space-y-3">
-          <div>
-            <h4 className="text-sm font-medium">Identity</h4>
-            <p className="text-muted-foreground mt-1 text-[13px]">
-              Your server name appears in the browser tab, on the login page, in
-              the sidebar, and in the installed app. Leave blank for defaults.
-            </p>
-          </div>
-          <div className="space-y-3">
-            <div>
-              <label className="text-muted-foreground mb-1 block text-xs font-medium">
-                Server Name
-              </label>
-              <input
-                type="text"
-                value={form.getValue("branding.server_name")}
-                onChange={(e) =>
-                  form.setValue("branding.server_name", e.target.value)
-                }
-                className="border-border bg-background text-foreground focus:ring-ring w-full rounded-xl border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                placeholder="Prairie"
-              />
-            </div>
-            <div>
-              <label className="text-muted-foreground mb-1 block text-xs font-medium">
-                Login Page Subtitle
-              </label>
-              <input
-                type="text"
-                value={form.getValue("branding.login_subtitle")}
-                onChange={(e) =>
-                  form.setValue("branding.login_subtitle", e.target.value)
-                }
-                className="border-border bg-background text-foreground focus:ring-ring w-full rounded-xl border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                placeholder="Sign in with an existing account."
-              />
-            </div>
-          </div>
-        </section>
-
-        {/* Logos & icons */}
-        <section className="space-y-3">
-          <div>
-            <h4 className="text-sm font-medium">Logos &amp; Icons</h4>
-            <p className="text-muted-foreground mt-1 text-[13px]">
-              Upload custom images to replace the Prairie logo, browser favicon,
-              and login background. Each falls back to the Prairie default when
-              not set.
-            </p>
-          </div>
-
-          {!assetStorageAvailable && (
-            <div className="flex items-start gap-3 rounded-xl border border-amber-500/20 bg-amber-500/5 p-3">
-              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
-              <p className="text-muted-foreground text-[13px] leading-relaxed">
-                {s3Configured ? (
-                  <>
-                    The public bucket is saved, but object storage is not active
-                    in this process yet. Restart the server to enable image
-                    uploads.
-                  </>
-                ) : (
-                  <>
-                    Image uploads require S3 object storage. Configure a public
-                    bucket in{" "}
-                    <span className="text-foreground font-medium">Storage</span>{" "}
-                    settings, then restart the server.
-                  </>
-                )}
-              </p>
-            </div>
-          )}
-
-          <div className="space-y-2">
-            <BrandingAssetField
-              label="Logo (wordmark)"
-              description="Wide logo shown in the expanded sidebar."
-              kind="wordmark"
-              currentUrl={branding.wordmarkUrl}
-              accept={IMAGE_ACCEPT}
-              enabled={assetStorageAvailable}
-              preview="wide"
-            />
-            <BrandingAssetField
-              label="Logo (wordmark, light themes)"
-              description="Optional. Shown on light themes; falls back to the main logo."
-              kind="wordmark_light"
-              currentUrl={branding.wordmarkLightUrl}
-              accept={IMAGE_ACCEPT}
-              enabled={assetStorageAvailable}
-              preview="wide"
-              previewBg="light"
-            />
-            <BrandingAssetField
-              label="Logo (icon)"
-              description="Square mark shown in the collapsed sidebar and installed app."
-              kind="mark"
-              currentUrl={branding.markUrl}
-              accept={IMAGE_ACCEPT}
-              enabled={assetStorageAvailable}
-              preview="square"
-            />
-            <BrandingAssetField
-              label="Logo (icon, light themes)"
-              description="Optional. Shown on light themes; falls back to the main icon."
-              kind="mark_light"
-              currentUrl={branding.markLightUrl}
-              accept={IMAGE_ACCEPT}
-              enabled={assetStorageAvailable}
-              preview="square"
-              previewBg="light"
-            />
-            <BrandingAssetField
-              label="Favicon"
-              description="Browser tab icon. PNG, ICO, or SVG."
-              kind="favicon"
-              currentUrl={branding.faviconUrl}
-              accept={FAVICON_ACCEPT}
-              enabled={assetStorageAvailable}
-              preview="square"
-            />
-            <BrandingAssetField
-              label="Login Background"
-              description="Full-bleed background image for the login and signup pages."
-              kind="login_bg"
-              currentUrl={branding.loginBgUrl}
-              accept={IMAGE_ACCEPT}
-              enabled={assetStorageAvailable}
-              preview="wide"
-            />
-          </div>
-        </section>
-
-        {/* Accent color */}
-        <section className="space-y-3">
-          <div>
-            <h4 className="text-sm font-medium">Brand Accent Color</h4>
-            <p className="text-muted-foreground mt-1 text-[13px]">
-              A quick way to recolor the primary buttons, focus rings, and
-              sidebar accent. For full control, use the Theming tab. Also used
-              as the installed app theme color.
-            </p>
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            {ACCENT_PRESETS.map((hex) => (
-              <button
-                key={hex}
-                type="button"
-                onClick={() => applyAccent(hex)}
-                aria-label={`Use accent ${hex}`}
-                className={cn(
-                  "relative h-8 w-8 rounded-full border transition-transform hover:scale-110",
-                  accentColor.toLowerCase() === hex.toLowerCase()
-                    ? "border-foreground"
-                    : "border-border",
-                )}
-                style={{ backgroundColor: hex }}
-              >
-                {accentColor.toLowerCase() === hex.toLowerCase() && (
-                  <Check className="absolute inset-0 m-auto h-4 w-4 text-white drop-shadow" />
-                )}
-              </button>
-            ))}
-            <label className="border-border ml-1 inline-flex h-8 cursor-pointer items-center gap-2 rounded-lg border px-2.5 text-xs font-medium">
-              <input
-                type="color"
-                value={accentColor || "#4f46e5"}
-                onChange={(e) => applyAccent(e.target.value)}
-                className="h-5 w-5 cursor-pointer border-0 bg-transparent p-0"
-              />
-              Custom
-            </label>
-            {accentColor && (
-              <button
-                type="button"
-                onClick={clearAccent}
-                className="text-muted-foreground hover:text-destructive ml-1 inline-flex items-center gap-1.5 text-xs font-medium transition-colors"
-              >
-                <RotateCcw className="h-3 w-3" />
-                Reset
-              </button>
-            )}
-          </div>
-        </section>
-
-        {/* Default theme */}
-        <section className="space-y-3">
-          <div>
-            <h4 className="text-sm font-medium">Default Theme</h4>
-            <p className="text-muted-foreground mt-1 text-[13px]">
-              The base theme new users see until they choose their own. Users
-              can always pick a different theme for themselves.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <button
-              type="button"
-              onClick={() => selectDefaultTheme("")}
-              className={cn(
-                "rounded-xl border px-3 py-2 text-xs font-medium transition-colors",
-                defaultTheme === ""
-                  ? "border-foreground bg-muted/50"
-                  : "border-border hover:bg-muted/30",
-              )}
-            >
-              No default
-            </button>
-            {THEME_IDS.map((id) => (
-              <button
-                key={id}
-                type="button"
-                onClick={() => selectDefaultTheme(id)}
-                className={cn(
-                  "inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-medium transition-colors",
-                  defaultTheme === id
-                    ? "border-foreground bg-muted/50"
-                    : "border-border hover:bg-muted/30",
-                )}
-              >
-                <span
-                  className="h-3.5 w-3.5 rounded-full border border-black/10"
-                  style={{ backgroundColor: THEMES[id].previewBg }}
-                >
-                  <span
-                    className="block h-full w-full scale-50 rounded-full"
-                    style={{ backgroundColor: THEMES[id].previewAccent }}
-                  />
-                </span>
-                {THEMES[id].label}
-              </button>
-            ))}
-          </div>
-        </section>
-      </div>
-
-      <SaveBar
-        dirtyCount={form.dirtyCount}
-        onSave={form.save}
-        onDiscard={form.discard}
-        isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
-      />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/CompatibilityProxiesSettings.test.tsx b/web/src/pages/admin-settings/CompatibilityProxiesSettings.test.tsx
index a2113b5a8..49296081a 100644
--- a/web/src/pages/admin-settings/CompatibilityProxiesSettings.test.tsx
+++ b/web/src/pages/admin-settings/CompatibilityProxiesSettings.test.tsx
@@ -9,6 +9,10 @@ vi.mock("@/hooks/useSettingsForm", () => ({
   useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
 }));
 
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => new Set<string>(["jellyfin_compat.session_ttl"]),
+}));
+
 vi.mock("@/hooks/queries/admin/settings", () => ({
   useJellyfinCompatStatus: () => ({
     isLoading: false,
@@ -28,27 +32,52 @@ vi.mock("@/hooks/queries/admin/settings", () => ({
   }),
 }));
 
+function mockForm(overrides: Record<string, unknown> = {}) {
+  useSettingsFormMock.mockReturnValue({
+    isLoading: false,
+    getValue: (key: string) => {
+      if (key === "audiobookshelf_compat.enabled") return "true";
+      if (key === "jellyfin_compat.public_url")
+        return "https://jellyfin.example.test";
+      return "";
+    },
+    setValue: vi.fn(),
+    dirtyCount: 0,
+    dirtyKeys: [],
+    save: vi.fn(),
+    discard: vi.fn(),
+    isSaving: false,
+    restartRequired: false,
+    sensitiveConfigured: [],
+    sensitiveManagedByEnv: [],
+    buildConnectionCheckRequest: vi.fn(),
+    ...overrides,
+  });
+}
+
 describe("CompatibilityProxiesSettings", () => {
-  it("shows Jellyfin and Audiobookshelf proxy settings", () => {
-    useSettingsFormMock.mockReturnValue({
-      isLoading: false,
-      getValue: (key: string) => {
-        if (key === "audiobookshelf_compat.enabled") return "true";
-        if (key === "jellyfin_compat.public_url")
-          return "https://jellyfin.example.test";
-        return "";
-      },
-      setValue: vi.fn(),
-      dirtyCount: 0,
-      dirtyKeys: [],
-      save: vi.fn(),
-      discard: vi.fn(),
-      isSaving: false,
-      restartRequired: false,
-      sensitiveConfigured: [],
-      sensitiveManagedByEnv: [],
-      buildConnectionCheckRequest: vi.fn(),
-    });
+  it("renders the page header and every field group heading", () => {
+    mockForm();
+
+    const markup = renderToStaticMarkup(<CompatibilityProxiesSettings />);
+
+    for (const heading of ["Jellyfin", "Audiobookshelf"]) {
+      expect(markup).toContain(heading);
+    }
+    expect(markup).toContain("Compatibility");
+  });
+
+  it("states the Jellyfin web player install state in plain wording", () => {
+    mockForm();
+
+    const markup = renderToStaticMarkup(<CompatibilityProxiesSettings />);
+
+    expect(markup).toContain("Jellyfin web player");
+    expect(markup).toContain("Not installed");
+  });
+
+  it("shows the essential proxy controls and keeps identity settings behind Advanced", () => {
+    mockForm();
 
     const markup = renderToStaticMarkup(<CompatibilityProxiesSettings />);
 
@@ -60,11 +89,27 @@ describe("CompatibilityProxiesSettings", () => {
         "audiobookshelf_compat.enabled",
       ]),
     });
-    expect(markup).toContain("Compatibility Proxies");
-    expect(markup).toContain("Jellyfin");
-    expect(markup).toContain("Audiobookshelf");
-    expect(markup).toContain("Enable Audiobookshelf Proxy");
+    expect(markup).toContain("Allow Jellyfin apps to connect");
+    expect(markup).toContain("Address Jellyfin apps should use");
+    expect(markup).toContain("Allow Audiobookshelf apps to connect");
+    expect(markup).toContain("Advanced · 7 settings");
+    // Collapsed by default, so the advanced fields are not rendered at all.
+    expect(markup).not.toContain("Server ID");
+    expect(markup).not.toContain("Web player install folder");
+    // Internal enum names never reach the admin.
+    expect(markup).not.toContain("web_state");
+    expect(markup).not.toContain("Provenance present");
     expect(markup).not.toContain("Listen Address");
-    expect(markup).not.toContain("https://abs.example.test");
+  });
+
+  it("opens Advanced while one of its fields is unsaved", () => {
+    mockForm({ dirtyKeys: ["jellyfin_compat.web_version"], dirtyCount: 1 });
+
+    const markup = renderToStaticMarkup(<CompatibilityProxiesSettings />);
+
+    expect(markup).toContain("Web player version to install");
+    expect(markup).toContain(
+      "Save your changes before installing or removing the web player.",
+    );
   });
 });
diff --git a/web/src/pages/admin-settings/CompatibilityProxiesSettings.tsx b/web/src/pages/admin-settings/CompatibilityProxiesSettings.tsx
index 1da4e4c3b..c651b57ad 100644
--- a/web/src/pages/admin-settings/CompatibilityProxiesSettings.tsx
+++ b/web/src/pages/admin-settings/CompatibilityProxiesSettings.tsx
@@ -1,4 +1,4 @@
-import { useId, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import {
   AlertCircle,
   CheckCircle2,
@@ -6,14 +6,14 @@ import {
   Loader2,
   Power,
   PowerOff,
-  Settings2,
   Trash2,
 } from "lucide-react";
 
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
 import {
   useInstallJellyfinCompatWeb,
   useJellyfinCompatStatus,
@@ -21,30 +21,42 @@ import {
   useUpdateJellyfinCompatSettings,
 } from "@/hooks/queries/admin/settings";
 import { hasPinnedJellyfinWebInstalled } from "@/lib/jellyfinCompat";
+import { useRestartKeys } from "@/hooks/useRestartKeys";
 import { useSettingsForm } from "@/hooks/useSettingsForm";
 
 import { FieldGroup } from "./FieldGroup";
 import { SaveBar } from "./SaveBar";
-import { SettingField } from "./SettingField";
+import { SettingField, SettingFieldStatus } from "./SettingField";
 import { formatDateTime } from "@/lib/datetime";
 
-const JELLYFIN_KEYS = [
-  "jellyfin_compat.enabled",
-  "jellyfin_compat.public_url",
+const JELLYFIN_ADVANCED_KEYS = [
   "jellyfin_compat.server_name",
   "jellyfin_compat.server_id",
   "jellyfin_compat.emulated_server_version",
-  "jellyfin_compat.web_enabled",
-  "jellyfin_compat.web_version",
-  "jellyfin_compat.web_install_dir",
   "jellyfin_compat.session_ttl",
   "jellyfin_compat.playback_session_ttl",
+  "jellyfin_compat.web_version",
+  "jellyfin_compat.web_install_dir",
+];
+
+const JELLYFIN_KEYS = [
+  "jellyfin_compat.enabled",
+  "jellyfin_compat.public_url",
+  "jellyfin_compat.web_enabled",
+  ...JELLYFIN_ADVANCED_KEYS,
 ];
 
 const AUDIOBOOKSHELF_KEYS = ["audiobookshelf_compat.enabled"];
 
 const KEYS = [...JELLYFIN_KEYS, ...AUDIOBOOKSHELF_KEYS];
 
+// Installing or removing the Jellyfin Web files uses the saved values, so the
+// buttons stay disabled while either of these is only staged in the form.
+const WEB_INSTALL_KEYS = [
+  "jellyfin_compat.web_version",
+  "jellyfin_compat.web_install_dir",
+];
+
 function statusLabel(value: string): string {
   return value
     .split("_")
@@ -52,6 +64,21 @@ function statusLabel(value: string): string {
     .join(" ");
 }
 
+// `web_state` is an internal enum; admins get plain wording instead.
+const WEB_STATE_LABELS: Record<string, string> = {
+  missing: "Not installed",
+  installed: "Installed",
+  update_available: "Update available",
+  installing: "Installing",
+  removing: "Removing",
+  failed: "Install failed",
+};
+
+function webStateLabel(value?: string): string {
+  if (!value) return "Unknown";
+  return WEB_STATE_LABELS[value] ?? statusLabel(value);
+}
+
 function operationTitle(kind?: string): string {
   return kind === "remove"
     ? "Removing Jellyfin Web UI"
@@ -102,88 +129,17 @@ function StatusLine({
   );
 }
 
-function LayerDescription({
-  title,
-  children,
-}: {
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="border-border/60 bg-muted/30 rounded-lg border px-3 py-2">
-      <p className="text-sm font-medium">{title}</p>
-      <p className="text-muted-foreground mt-1 text-xs leading-relaxed">
-        {children}
-      </p>
-    </div>
-  );
-}
-
-function CollapsibleFieldGroup({
-  label,
-  expanded,
-  onToggle,
-  summary,
-  children,
-}: {
-  label: string;
-  expanded: boolean;
-  onToggle: () => void;
-  summary?: React.ReactNode;
-  children: React.ReactNode;
-}) {
-  const labelId = useId();
-  const contentId = useId();
-
-  return (
-    <div
-      role="group"
-      aria-labelledby={labelId}
-      className="surface-panel rounded-2xl border-0 p-4 sm:p-5"
-    >
-      <div className="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <div
-          id={labelId}
-          className="text-muted-foreground text-xs font-semibold tracking-[0.22em] uppercase"
-        >
-          {label}
-        </div>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          aria-expanded={expanded}
-          aria-controls={contentId}
-          onClick={onToggle}
-          className="w-fit shrink-0"
-        >
-          <Settings2 className="mr-1.5 h-3.5 w-3.5" />
-          {expanded ? "Hide settings" : "Show settings"}
-        </Button>
-      </div>
-
-      {summary && <div>{summary}</div>}
-
-      {expanded && (
-        <div
-          id={contentId}
-          className={`divide-border divide-y ${summary ? "mt-3 border-t pt-3" : ""}`}
-        >
-          {children}
-        </div>
-      )}
-    </div>
-  );
-}
-
 export default function CompatibilityProxiesSettings() {
   const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
+  const restartKeys = useRestartKeys();
+  const allRestart = (keys: string[]) =>
+    keys.every((key) => restartKeys.has(key));
   const statusQuery = useJellyfinCompatStatus();
   const installWeb = useInstallJellyfinCompatWeb();
   const removeWeb = useRemoveJellyfinCompatWeb();
   const updateCompatSettings = useUpdateJellyfinCompatSettings();
   const status = statusQuery.data;
-  const [jellyfinExpanded, setJellyfinExpanded] = useState(false);
+  const [showDiagnostics, setShowDiagnostics] = useState(false);
 
   if (form.isLoading || statusQuery.isLoading)
     return (
@@ -203,10 +159,13 @@ export default function CompatibilityProxiesSettings() {
       </div>
     );
 
-  const hasDirtyWebConfig = form.dirtyKeys.some((key) =>
-    ["jellyfin_compat.web_version", "jellyfin_compat.web_install_dir"].includes(
-      key,
-    ),
+  const dirtyKeys: string[] = form.dirtyKeys ?? [];
+  const isDirty = (key: string) => dirtyKeys.includes(key);
+  const hasDirtyWebConfig = dirtyKeys.some((key) =>
+    WEB_INSTALL_KEYS.includes(key),
+  );
+  const jellyfinAdvancedDirty = JELLYFIN_ADVANCED_KEYS.filter((key) =>
+    isDirty(key),
   );
   const operationRunning =
     status?.operation?.state === "running" ||
@@ -219,14 +178,12 @@ export default function CompatibilityProxiesSettings() {
     jellyfinEnabledValue === ""
       ? Boolean(status?.enabled)
       : jellyfinEnabledValue === "true";
-  const jellyfinEnabledDirty = form.dirtyKeys.includes(
-    "jellyfin_compat.enabled",
-  );
   const jellyfinProxyRunning = Boolean(status?.enabled);
   const jellyfinWebServing =
     jellyfinProxyRunning && status?.web_enabled !== false;
   const installedWebAssetsPresent = Boolean(status?.installed_version);
   const pinnedJellyfinWebInstalled = hasPinnedJellyfinWebInstalled(status);
+
   const setJellyfinAPIEnabled = (value: string) => {
     form.setValue("jellyfin_compat.enabled", value);
     if (value === "false") {
@@ -240,147 +197,63 @@ export default function CompatibilityProxiesSettings() {
 
   return (
     <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">
-          Compatibility Proxies
-        </h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure protocol-compatible listener surfaces for external client
-          apps.
-        </p>
-      </div>
+      <SettingsPageHeader title="Compatibility" className="mb-8" />
 
-      <div className="flex-1 space-y-6">
-        <CollapsibleFieldGroup
-          label="Jellyfin"
-          expanded={jellyfinExpanded}
-          onToggle={() => setJellyfinExpanded((current) => !current)}
-          summary={
-            <div className="space-y-3">
-              <SettingField
-                label="Enable Jellyfin Proxy"
-                type="toggle"
-                hint="Starts the Jellyfin-compatible API listener for external Jellyfin clients."
-                value={jellyfinEnabledChecked ? "true" : "false"}
-                onChange={setJellyfinAPIEnabled}
-                disabled={form.isSaving}
-              />
-              <div className="flex flex-wrap items-center gap-2">
-                <Badge variant={status?.enabled ? "default" : "outline"}>
-                  {status?.enabled ? "API enabled" : "API disabled"}
-                </Badge>
-                <Badge variant={jellyfinWebServing ? "secondary" : "outline"}>
-                  {jellyfinWebServing ? "Web UI enabled" : "Web UI disabled"}
-                </Badge>
-                <Badge
-                  variant={
-                    status?.web_state === "installed" ||
-                    status?.web_state === "update_available"
-                      ? "secondary"
-                      : status?.web_state === "failed"
-                        ? "destructive"
-                        : "outline"
-                  }
-                >
-                  Assets {status ? statusLabel(status.web_state) : "Unknown"}
-                </Badge>
-                {status?.operation?.state === "running" && (
-                  <Badge variant="secondary">
-                    {statusLabel(status.operation.kind)} running
-                  </Badge>
-                )}
-                {jellyfinEnabledDirty && (
-                  <Badge variant="outline">API enablement pending save</Badge>
-                )}
-                {status?.restart_required && (
-                  <Badge variant="outline">Restart required</Badge>
-                )}
-              </div>
-            </div>
-          }
-        >
-          <div className="space-y-4 py-3">
-            <div className="grid gap-3 md:grid-cols-2">
-              <LayerDescription title="API Layer">
-                Provides the Jellyfin-compatible API surface used by most
-                third-party apps for discovery, authentication, browsing,
-                metadata, and playback.
-              </LayerDescription>
-              <LayerDescription title="Web Component Layer">
-                Provides the Jellyfin Web UI assets required by Jellyfin native
-                apps and some other clients that expect Jellyfin Web to exist at
-                the server's web route.
-              </LayerDescription>
-            </div>
-
-            {status?.last_error && (
-              <div className="bg-destructive/10 text-destructive mt-4 flex items-start gap-2 rounded-lg px-3 py-2 text-sm">
-                <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />
-                <span>{status.last_error}</span>
-              </div>
-            )}
-          </div>
-
-          <div className="grid gap-x-8 py-3 md:grid-cols-2">
-            <StatusLine
-              label="API state"
-              value={status ? statusLabel(status.api_state) : ""}
-            />
-            <StatusLine label="Listen address" value={status?.listen} mono />
-            <StatusLine label="Public URL" value={status?.public_url} mono />
-            <StatusLine
-              label="Emulated version"
-              value={status?.emulated_server_version}
-            />
-          </div>
+      <div className="flex-1 space-y-5">
+        <FieldGroup label="Jellyfin" restartAll={allRestart(JELLYFIN_KEYS)}>
+          <SettingField
+            label="Allow Jellyfin apps to connect"
+            type="toggle"
+            value={jellyfinEnabledChecked ? "true" : "false"}
+            onChange={setJellyfinAPIEnabled}
+            disabled={form.isSaving}
+            restartRequired={restartKeys.has("jellyfin_compat.enabled")}
+          />
 
-          <div className="space-y-4 py-3">
-            <h3 className="text-sm font-medium">Web Component</h3>
-            <p className="text-muted-foreground text-sm leading-relaxed">
-              The Web Component is separate from the API layer. Disabling the
-              Web UI stops Prairie from serving the route while keeping
-              installed assets available for later reactivation.
-            </p>
+          <SettingField
+            label="Address Jellyfin apps should use"
+            hint="https://media.example.com"
+            value={form.getValue("jellyfin_compat.public_url")}
+            onChange={(v) => form.setValue("jellyfin_compat.public_url", v)}
+            restartRequired={restartKeys.has("jellyfin_compat.public_url")}
+          />
 
-            <div className="grid gap-x-8 md:grid-cols-2">
-              <StatusLine
-                label="Pinned version"
-                value={status?.pinned_version}
-              />
-              <StatusLine
-                label="Installed version"
-                value={status?.installed_version}
-              />
-              <StatusLine
-                label="Installer"
-                value={
-                  status?.installer_ready ? "Ready" : "Missing prerequisites"
-                }
-              />
-              <StatusLine
-                label="Operation"
-                value={
-                  status?.operation
-                    ? `${statusLabel(status.operation.kind)} ${statusLabel(status.operation.state)}`
-                    : "Idle"
-                }
-              />
-              <StatusLine label="Source" value={status?.source_url} mono />
-              <StatusLine label="Commit" value={status?.commit_sha} mono />
-              <StatusLine label="Checksum" value={status?.checksum} mono />
-              <StatusLine
-                label="Install path"
-                value={status?.install_path}
-                mono
-              />
-              <StatusLine
-                label="License present"
-                value={status?.license_present}
-              />
-              <StatusLine
-                label="Provenance present"
-                value={status?.provenance_present}
-              />
+          {status?.last_error && (
+            <div className="bg-destructive/10 text-destructive my-3 flex items-start gap-2 rounded-lg px-3 py-2 text-sm">
+              <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+              <span>{status.last_error}</span>
+            </div>
+          )}
+
+          <div className="space-y-4 py-3.5">
+            <div>
+              <h4 className="text-sm font-medium">Jellyfin web player</h4>
+              <p className="text-muted-foreground mt-1 text-xs leading-relaxed">
+                Jellyfin mobile and TV apps expect to find it on the server.
+              </p>
+              <div className="mt-1.5 flex flex-wrap items-center gap-x-4 gap-y-1">
+                <SettingFieldStatus
+                  tone={installedWebAssetsPresent ? "ok" : "muted"}
+                >
+                  {installedWebAssetsPresent
+                    ? `Version ${status?.installed_version} installed`
+                    : webStateLabel(status?.web_state)}
+                </SettingFieldStatus>
+                {jellyfinProxyRunning && installedWebAssetsPresent ? (
+                  <SettingFieldStatus
+                    tone={jellyfinWebServing ? "ok" : "muted"}
+                  >
+                    {jellyfinWebServing
+                      ? "Served to clients"
+                      : "Not served to clients"}
+                  </SettingFieldStatus>
+                ) : null}
+                {status?.installer_ready === false ? (
+                  <SettingFieldStatus tone="warn">
+                    Downloader is missing required tools
+                  </SettingFieldStatus>
+                ) : null}
+              </div>
             </div>
 
             {status?.operation?.state === "running" &&
@@ -392,8 +265,8 @@ export default function CompatibilityProxiesSettings() {
                 const message =
                   status.operation.message ||
                   (status.operation.kind === "remove"
-                    ? "Removing managed Jellyfin Web assets"
-                    : "Downloading Jellyfin Web, installing dependencies, and building production assets");
+                    ? "Removing the downloaded Jellyfin web player"
+                    : "Downloading the Jellyfin web player and building it");
 
                 return (
                   <div className="border-border/70 bg-muted/30 flex items-start gap-3 rounded-lg border px-3 py-3 text-sm">
@@ -491,107 +364,185 @@ export default function CompatibilityProxiesSettings() {
               </Button>
               {hasDirtyWebConfig && (
                 <span className="text-muted-foreground text-sm">
-                  Save Web settings before installing or removing assets.
+                  Save your changes before installing or removing the web
+                  player.
                 </span>
               )}
               {missingPrerequisites.length > 0 && (
                 <span className="text-muted-foreground text-sm">
-                  Missing installer prerequisites:{" "}
+                  Silo cannot download it until these commands are installed on
+                  the server:{" "}
                   {missingPrerequisites.map((item) => item.command).join(", ")}
                 </span>
               )}
               {pinnedJellyfinWebInstalled && (
                 <span className="text-muted-foreground inline-flex items-center gap-1 text-sm">
                   <CheckCircle2 className="h-4 w-4" />
-                  Pinned Web UI version installed
+                  The chosen version is installed
                 </span>
               )}
-              {(status?.license_present && status?.provenance_present && (
+              {status?.license_present && status?.provenance_present ? (
                 <span className="text-muted-foreground inline-flex items-center gap-1 text-sm">
                   <CheckCircle2 className="h-4 w-4" />
-                  License and provenance files found
+                  License and download record present
                 </span>
-              )) ||
-                null}
+              ) : null}
             </div>
 
-            <div className="divide-border divide-y">
-              <SettingField
-                label="Pinned Web Version (Optional)"
-                hint="Optional. Leave blank to auto-select the latest compatible patch for the emulated API version."
-                value={form.getValue("jellyfin_compat.web_version")}
-                onChange={(v) =>
-                  form.setValue("jellyfin_compat.web_version", v)
-                }
-              />
-              <SettingField
-                label="Web Install Directory (Optional)"
-                hint="Optional. Defaults to Prairie's managed Jellyfin Web install directory."
-                value={form.getValue("jellyfin_compat.web_install_dir")}
-                onChange={(v) =>
-                  form.setValue("jellyfin_compat.web_install_dir", v)
-                }
-              />
+            <div>
+              <Button
+                type="button"
+                size="xs"
+                variant="ghost"
+                aria-expanded={showDiagnostics}
+                onClick={() => setShowDiagnostics((current) => !current)}
+              >
+                {showDiagnostics
+                  ? "Hide download details"
+                  : "Show download details"}
+              </Button>
+              {showDiagnostics && (
+                <div className="grid gap-x-8 pt-2 md:grid-cols-2">
+                  <StatusLine
+                    label="API state"
+                    value={status ? statusLabel(status.api_state) : ""}
+                  />
+                  <StatusLine
+                    label="Listen address"
+                    value={status?.listen}
+                    mono
+                  />
+                  <StatusLine
+                    label="Public URL in use"
+                    value={status?.public_url}
+                    mono
+                  />
+                  <StatusLine
+                    label="Jellyfin version reported"
+                    value={status?.emulated_server_version}
+                  />
+                  <StatusLine
+                    label="Version chosen"
+                    value={status?.pinned_version}
+                  />
+                  <StatusLine
+                    label="Current job"
+                    value={
+                      status?.operation
+                        ? `${statusLabel(status.operation.kind)} ${statusLabel(status.operation.state)}`
+                        : "None"
+                    }
+                  />
+                  <StatusLine
+                    label="Downloaded from"
+                    value={status?.source_url}
+                    mono
+                  />
+                  <StatusLine
+                    label="Source commit"
+                    value={status?.commit_sha}
+                    mono
+                  />
+                  <StatusLine label="Checksum" value={status?.checksum} mono />
+                  <StatusLine
+                    label="Installed at"
+                    value={status?.install_path}
+                    mono
+                  />
+                  <StatusLine
+                    label="License file present"
+                    value={status?.license_present}
+                  />
+                  <StatusLine
+                    label="Download record present"
+                    value={status?.provenance_present}
+                  />
+                </div>
+              )}
             </div>
           </div>
 
-          <div className="space-y-4 py-3">
-            <h3 className="text-sm font-medium">Server Identity</h3>
-
-            <div className="divide-border divide-y">
-              <SettingField
-                label="Public URL"
-                value={form.getValue("jellyfin_compat.public_url")}
-                onChange={(v) => form.setValue("jellyfin_compat.public_url", v)}
-              />
-              <SettingField
-                label="Server Name"
-                value={form.getValue("jellyfin_compat.server_name")}
-                onChange={(v) =>
-                  form.setValue("jellyfin_compat.server_name", v)
-                }
-              />
-              <SettingField
-                label="Server ID"
-                value={form.getValue("jellyfin_compat.server_id")}
-                onChange={(v) => form.setValue("jellyfin_compat.server_id", v)}
-              />
-              <SettingField
-                label="Emulated Server Version"
-                value={form.getValue("jellyfin_compat.emulated_server_version")}
-                onChange={(v) =>
-                  form.setValue("jellyfin_compat.emulated_server_version", v)
-                }
-              />
-              <SettingField
-                label="Session TTL"
-                type="duration"
-                hint="e.g. 24h"
-                value={form.getValue("jellyfin_compat.session_ttl")}
-                onChange={(v) =>
-                  form.setValue("jellyfin_compat.session_ttl", v)
-                }
-              />
-              <SettingField
-                label="Playback Session TTL"
-                type="duration"
-                hint="e.g. 6h"
-                value={form.getValue("jellyfin_compat.playback_session_ttl")}
-                onChange={(v) =>
-                  form.setValue("jellyfin_compat.playback_session_ttl", v)
-                }
-              />
-            </div>
-          </div>
-        </CollapsibleFieldGroup>
+          <AdvancedSection
+            id="compatibility.jellyfin"
+            count={JELLYFIN_ADVANCED_KEYS.length}
+            forceOpen={jellyfinAdvancedDirty.length > 0}
+          >
+            <SettingField
+              label="Name shown to Jellyfin apps"
+              description="Defaults to your Silo server name."
+              value={form.getValue("jellyfin_compat.server_name")}
+              onChange={(v) => form.setValue("jellyfin_compat.server_name", v)}
+              restartRequired={restartKeys.has("jellyfin_compat.server_name")}
+            />
+            <SettingField
+              label="Server ID"
+              description="Changing it makes saved clients treat Silo as a new server."
+              value={form.getValue("jellyfin_compat.server_id")}
+              onChange={(v) => form.setValue("jellyfin_compat.server_id", v)}
+              restartRequired={restartKeys.has("jellyfin_compat.server_id")}
+            />
+            <SettingField
+              label="Jellyfin version to report"
+              description="Leave as is unless an app refuses to connect."
+              value={form.getValue("jellyfin_compat.emulated_server_version")}
+              onChange={(v) =>
+                form.setValue("jellyfin_compat.emulated_server_version", v)
+              }
+              restartRequired={restartKeys.has(
+                "jellyfin_compat.emulated_server_version",
+              )}
+            />
+            <SettingField
+              label="Stay signed in for"
+              type="duration"
+              description="For example 24h."
+              value={form.getValue("jellyfin_compat.session_ttl")}
+              onChange={(v) => form.setValue("jellyfin_compat.session_ttl", v)}
+              restartRequired={restartKeys.has("jellyfin_compat.session_ttl")}
+            />
+            <SettingField
+              label="Forget idle playback after"
+              type="duration"
+              description="For example 6h."
+              value={form.getValue("jellyfin_compat.playback_session_ttl")}
+              onChange={(v) =>
+                form.setValue("jellyfin_compat.playback_session_ttl", v)
+              }
+              restartRequired={restartKeys.has(
+                "jellyfin_compat.playback_session_ttl",
+              )}
+            />
+            <SettingField
+              label="Web player version to install"
+              description="Leave blank to match the reported Jellyfin version."
+              value={form.getValue("jellyfin_compat.web_version")}
+              onChange={(v) => form.setValue("jellyfin_compat.web_version", v)}
+              restartRequired={restartKeys.has("jellyfin_compat.web_version")}
+            />
+            <SettingField
+              label="Web player install folder"
+              description="Leave blank to use the folder Silo manages."
+              value={form.getValue("jellyfin_compat.web_install_dir")}
+              onChange={(v) =>
+                form.setValue("jellyfin_compat.web_install_dir", v)
+              }
+              restartRequired={restartKeys.has(
+                "jellyfin_compat.web_install_dir",
+              )}
+            />
+          </AdvancedSection>
+        </FieldGroup>
 
-        <FieldGroup label="Audiobookshelf">
+        <FieldGroup
+          label="Audiobookshelf"
+          restartAll={allRestart(AUDIOBOOKSHELF_KEYS)}
+        >
           <SettingField
-            label="Enable Audiobookshelf Proxy"
+            label="Allow Audiobookshelf apps to connect"
             type="toggle"
-            hint="Starts the ABS-compatible API listener for external Audiobookshelf clients."
             value={form.getValue("audiobookshelf_compat.enabled")}
             onChange={(v) => form.setValue("audiobookshelf_compat.enabled", v)}
+            restartRequired={restartKeys.has("audiobookshelf_compat.enabled")}
           />
         </FieldGroup>
       </div>
@@ -601,7 +552,6 @@ export default function CompatibilityProxiesSettings() {
         onSave={form.save}
         onDiscard={form.discard}
         isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
       />
     </div>
   );
diff --git a/web/src/pages/admin-settings/CredentialStatus.tsx b/web/src/pages/admin-settings/CredentialStatus.tsx
deleted file mode 100644
index 1ad83da78..000000000
--- a/web/src/pages/admin-settings/CredentialStatus.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { CircleCheck, CircleAlert } from "lucide-react";
-
-export function CredentialStatus({ configured }: { configured: boolean }) {
-  if (configured) {
-    return (
-      <span className="text-muted-foreground inline-flex items-center gap-1 text-xs">
-        <CircleCheck className="h-3.5 w-3.5 text-green-500" />
-        Configured
-      </span>
-    );
-  }
-  return (
-    <span className="text-muted-foreground inline-flex items-center gap-1 text-xs">
-      <CircleAlert className="h-3.5 w-3.5 text-yellow-500" />
-      Not configured
-    </span>
-  );
-}
diff --git a/web/src/pages/admin-settings/DatabaseSettings.test.tsx b/web/src/pages/admin-settings/DatabaseSettings.test.tsx
deleted file mode 100644
index 7eca8438b..000000000
--- a/web/src/pages/admin-settings/DatabaseSettings.test.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it, vi } from "vitest";
-
-import DatabaseSettings from "./DatabaseSettings";
-import { USER_DATABASE_BACKEND_OPTIONS } from "./databaseSettingOptions";
-
-const useSettingsFormMock = vi.fn();
-const useCheckAdminSettingsConnectionMock = vi.fn();
-
-vi.mock("@/hooks/useSettingsForm", () => ({
-  useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
-}));
-
-vi.mock("@/hooks/queries/admin/settings", () => ({
-  useCheckAdminSettingsConnection: (...args: unknown[]) =>
-    useCheckAdminSettingsConnectionMock(...args),
-}));
-
-function makeForm(redisUrl: string, managedByEnv = false) {
-  return {
-    isLoading: false,
-    getValue: (key: string) => {
-      if (key === "redis.url") return redisUrl;
-      return "";
-    },
-    setValue: vi.fn(),
-    dirtyCount: 0,
-    save: vi.fn(),
-    discard: vi.fn(),
-    isSaving: false,
-    restartRequired: false,
-    sensitiveConfigured: redisUrl ? ["redis.url"] : [],
-    sensitiveManagedByEnv: managedByEnv ? ["redis.url"] : [],
-    buildConnectionCheckRequest: vi.fn(),
-  };
-}
-
-describe("DatabaseSettings", () => {
-  useCheckAdminSettingsConnectionMock.mockReturnValue({
-    isPending: false,
-    mutateAsync: vi.fn(),
-  });
-
-  it("shows Redis controls in the Database tab", () => {
-    useSettingsFormMock.mockReturnValue(makeForm(""));
-
-    const markup = renderToStaticMarkup(<DatabaseSettings />);
-
-    expect(markup).toContain("Redis");
-    expect(markup).toContain("Enable Redis");
-    expect(markup).not.toContain("Connection URL");
-  });
-
-  it("marks the unimplemented SQLite backend as unavailable", () => {
-    expect(USER_DATABASE_BACKEND_OPTIONS).toContainEqual({
-      value: "sqlite",
-      label: "SQLite (TBD)",
-      disabled: true,
-    });
-  });
-
-  it("shows the Redis connection URL when Redis is enabled", () => {
-    useSettingsFormMock.mockReturnValue(makeForm("redis://cache:6379"));
-
-    const markup = renderToStaticMarkup(<DatabaseSettings />);
-
-    expect(markup).toContain("Enable Redis");
-    expect(markup).toContain("Connection URL");
-    expect(markup).toContain("Check Connection");
-  });
-
-  it("shows when Redis is managed by environment configuration", () => {
-    useSettingsFormMock.mockReturnValue(makeForm("", true));
-
-    const markup = renderToStaticMarkup(<DatabaseSettings />);
-
-    expect(markup).toContain("Managed by environment");
-    expect(markup).toContain("REDIS_URL");
-    expect(markup).toContain("This setting is controlled by REDIS_URL");
-  });
-});
diff --git a/web/src/pages/admin-settings/DatabaseSettings.tsx b/web/src/pages/admin-settings/DatabaseSettings.tsx
deleted file mode 100644
index c7aa5b21d..000000000
--- a/web/src/pages/admin-settings/DatabaseSettings.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import type { ConnectionCheckResponse } from "@/api/types";
-import { ConnectionCheckAction } from "@/components/admin/ConnectionCheckAction";
-import { Badge } from "@/components/ui/badge";
-import { useCheckAdminSettingsConnection } from "@/hooks/queries/admin/settings";
-import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { SettingField } from "./SettingField";
-import { SaveBar } from "./SaveBar";
-import { FieldGroup } from "./FieldGroup";
-import { USER_DATABASE_BACKEND_OPTIONS } from "./databaseSettingOptions";
-
-const REDIS_KEYS = ["redis.url"];
-
-const KEYS = [
-  "database.max_connections",
-  ...REDIS_KEYS,
-  "userdb.backend",
-  "userdb.pool_max_open",
-  "userdb.idle_timeout",
-];
-
-export default function DatabaseSettings() {
-  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
-  const checkConnection = useCheckAdminSettingsConnection();
-  const [connectionResult, setConnectionResult] =
-    useState<ConnectionCheckResponse | null>(null);
-  const redisUrl = form.getValue("redis.url");
-  const redisManagedByEnv = form.sensitiveManagedByEnv.includes("redis.url");
-  const redisConfigured =
-    redisUrl.trim() !== "" || form.sensitiveConfigured.includes("redis.url");
-  const [redisEnabledOverride, setRedisEnabledOverride] = useState<
-    boolean | null
-  >(null);
-  const effectiveRedisEnabled = redisEnabledOverride ?? redisConfigured;
-
-  useEffect(() => {
-    if (form.dirtyCount === 0) {
-      setRedisEnabledOverride(null);
-    }
-  }, [form.dirtyCount]);
-
-  async function handleCheckConnection() {
-    try {
-      setConnectionResult(
-        await checkConnection.mutateAsync({
-          kind: "redis",
-          body: form.buildConnectionCheckRequest(REDIS_KEYS),
-        }),
-      );
-    } catch (error) {
-      setConnectionResult({
-        success: false,
-        message:
-          error instanceof Error ? error.message : "Connection check failed.",
-      });
-    }
-  }
-
-  if (form.isLoading) return <div>Loading...</div>;
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Database</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure connection pooling, Redis, and user database replication
-          behavior.
-        </p>
-      </div>
-
-      <div className="flex-1 space-y-6">
-        <FieldGroup label="Main Database">
-          <SettingField
-            label="Max Connections"
-            type="number"
-            value={form.getValue("database.max_connections")}
-            onChange={(v) => form.setValue("database.max_connections", v)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Redis">
-          {redisManagedByEnv && (
-            <div className="border-border/70 flex flex-col gap-2 border-b py-3">
-              <div className="flex items-center gap-2">
-                <Badge variant="outline">Managed by environment</Badge>
-              </div>
-              <p className="text-muted-foreground text-sm">
-                Redis is configured by the <code>REDIS_URL</code> environment
-                variable. Change your deployment configuration and restart the
-                server to update or disable Redis.
-              </p>
-            </div>
-          )}
-          <SettingField
-            label="Enable Redis"
-            type="toggle"
-            hint={
-              redisManagedByEnv
-                ? "This setting is controlled by REDIS_URL"
-                : "Leave disabled to run without Redis"
-            }
-            value={effectiveRedisEnabled ? "true" : "false"}
-            onChange={(value) => {
-              if (value === "true") {
-                setRedisEnabledOverride(true);
-                form.resetValue("redis.url");
-                return;
-              }
-              setRedisEnabledOverride(false);
-              form.setValue("redis.url", "");
-            }}
-            disabled={redisManagedByEnv}
-          />
-          {effectiveRedisEnabled && (
-            <>
-              <SettingField
-                label="Connection URL"
-                type="password"
-                hint={
-                  redisManagedByEnv
-                    ? "Value supplied by REDIS_URL"
-                    : "redis://host:6379"
-                }
-                value={redisUrl}
-                onChange={(v) => form.setValue("redis.url", v)}
-                sensitiveConfigured={form.sensitiveConfigured.includes(
-                  "redis.url",
-                )}
-                disabled={redisManagedByEnv}
-              />
-              <ConnectionCheckAction
-                onClick={handleCheckConnection}
-                result={connectionResult}
-                isPending={checkConnection.isPending}
-                disabled={form.isSaving || redisManagedByEnv}
-              />
-              <p className="text-muted-foreground text-xs leading-relaxed">
-                Saving a Redis URL requires a reachable server. Unreachable URLs
-                are rejected so a failed check cannot brick startup after
-                restart.
-              </p>
-            </>
-          )}
-        </FieldGroup>
-
-        <FieldGroup label="User Database">
-          <SettingField
-            label="User DB Backend"
-            type="select"
-            options={USER_DATABASE_BACKEND_OPTIONS}
-            value={form.getValue("userdb.backend")}
-            onChange={(v) => form.setValue("userdb.backend", v)}
-          />
-          {form.getValue("userdb.backend") === "sqlite" && (
-            <>
-              <SettingField
-                label="Pool Max Open"
-                type="number"
-                value={form.getValue("userdb.pool_max_open")}
-                onChange={(v) => form.setValue("userdb.pool_max_open", v)}
-              />
-              <SettingField
-                label="Idle Timeout"
-                type="duration"
-                hint="How long an inactive per-user SQLite connection remains open, e.g. 12h"
-                value={form.getValue("userdb.idle_timeout")}
-                onChange={(v) => form.setValue("userdb.idle_timeout", v)}
-              />
-            </>
-          )}
-        </FieldGroup>
-      </div>
-
-      <SaveBar
-        dirtyCount={form.dirtyCount}
-        onSave={form.save}
-        onDiscard={form.discard}
-        isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
-      />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/DownloadSettings.tsx b/web/src/pages/admin-settings/DownloadSettings.tsx
deleted file mode 100644
index cc5c9b7bd..000000000
--- a/web/src/pages/admin-settings/DownloadSettings.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { useMemo } from "react";
-import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { SettingField } from "./SettingField";
-import { SaveBar } from "./SaveBar";
-import { FieldGroup } from "./FieldGroup";
-
-const KEYS = [
-  "download.enabled",
-  "download.server_bandwidth_mbps",
-  "download.user_bandwidth_mbps",
-  "download.max_concurrent_per_user",
-  "download.max_per_period",
-  "download.period_duration",
-  "download.transcode_enabled",
-  "download.artifact_dir",
-  "download.max_concurrent_prepares",
-  "download.artifact_max_bytes",
-];
-
-export default function DownloadSettings() {
-  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
-
-  if (form.isLoading) return <div>Loading...</div>;
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Downloads</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure download permissions, bandwidth limits, and quotas.
-        </p>
-      </div>
-
-      <div className="flex-1 space-y-6">
-        <FieldGroup label="General">
-          <SettingField
-            label="Downloads Enabled"
-            hint="Allow users to download media files"
-            type="toggle"
-            value={form.getValue("download.enabled")}
-            onChange={(v) => form.setValue("download.enabled", v)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Bandwidth Limits">
-          <SettingField
-            label="Server Bandwidth (Mbps)"
-            hint="Total download bandwidth for the entire server in megabits/sec. 0 = unlimited."
-            value={form.getValue("download.server_bandwidth_mbps")}
-            onChange={(v) => form.setValue("download.server_bandwidth_mbps", v)}
-          />
-          <SettingField
-            label="Per-User Bandwidth (Mbps)"
-            hint="Max download bandwidth per user, shared across active downloads. 0 = unlimited."
-            value={form.getValue("download.user_bandwidth_mbps")}
-            onChange={(v) => form.setValue("download.user_bandwidth_mbps", v)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Quantity Limits">
-          <SettingField
-            label="Max Concurrent Downloads Per User"
-            hint="How many downloads a user can have active at once. 0 = unlimited."
-            value={form.getValue("download.max_concurrent_per_user")}
-            onChange={(v) =>
-              form.setValue("download.max_concurrent_per_user", v)
-            }
-          />
-          <SettingField
-            label="Max Downloads Per Period"
-            hint="Total downloads a user can create per period. 0 = unlimited."
-            value={form.getValue("download.max_per_period")}
-            onChange={(v) => form.setValue("download.max_per_period", v)}
-          />
-          <SettingField
-            label="Period Duration"
-            hint="Rolling window for the per-period limit (e.g., 24h, 168h, 720h)"
-            value={form.getValue("download.period_duration")}
-            onChange={(v) => form.setValue("download.period_duration", v)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Offline Sync (Prepared Downloads)">
-          <SettingField
-            label="Transcode-to-File Enabled"
-            hint="Allow server-side transcode of downloads to a device-friendly file. Requires the per-user download-transcode permission. Downloaded files persist on-device until the user deletes them — there is no expiry or revocation of files already downloaded."
-            type="toggle"
-            value={form.getValue("download.transcode_enabled")}
-            onChange={(v) => form.setValue("download.transcode_enabled", v)}
-          />
-          <SettingField
-            label="Artifact Directory"
-            hint="Where prepared (remux/transcode) download files are written. Empty = a 'prairie-download-artifacts' directory beside the transcode directory."
-            value={form.getValue("download.artifact_dir")}
-            onChange={(v) => form.setValue("download.artifact_dir", v)}
-          />
-          <SettingField
-            label="Max Concurrent Prepares"
-            hint="Encode/remux worker-pool size for preparing download files."
-            value={form.getValue("download.max_concurrent_prepares")}
-            onChange={(v) =>
-              form.setValue("download.max_concurrent_prepares", v)
-            }
-          />
-          <SettingField
-            label="Artifact Storage Budget (bytes)"
-            hint="LRU eviction budget for prepared download files. 0 = unlimited."
-            value={form.getValue("download.artifact_max_bytes")}
-            onChange={(v) => form.setValue("download.artifact_max_bytes", v)}
-          />
-        </FieldGroup>
-      </div>
-
-      <SaveBar
-        dirtyCount={form.dirtyCount}
-        onSave={form.save}
-        onDiscard={form.discard}
-        isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
-      />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/DownloadsSettings.test.tsx b/web/src/pages/admin-settings/DownloadsSettings.test.tsx
new file mode 100644
index 000000000..d85d92517
--- /dev/null
+++ b/web/src/pages/admin-settings/DownloadsSettings.test.tsx
@@ -0,0 +1,306 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import DownloadsSettings from "./DownloadsSettings";
+
+const useSettingsFormMock = vi.fn();
+
+vi.mock("@/hooks/useSettingsForm", () => ({
+  useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
+}));
+
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => new Set<string>(["download.artifact_dir"]),
+}));
+
+function makeForm(values: Record<string, string> = {}, dirty: string[] = []) {
+  const dirtyKeys = new Set(dirty);
+  return {
+    isLoading: false,
+    getValue: (key: string) => values[key] ?? "",
+    setValue: vi.fn(),
+    isDirty: (key: string) => dirtyKeys.has(key),
+    dirtyCount: dirtyKeys.size,
+    dirtyKeys: [...dirtyKeys],
+    save: vi.fn(),
+    discard: vi.fn(),
+    isSaving: false,
+    restartRequired: false,
+    sensitiveConfigured: [],
+    sensitiveManagedByEnv: [],
+  };
+}
+
+/** Opens the page's advanced disclosure via its persisted state. */
+function expandAdvanced() {
+  localStorage.setItem("silo.admin.advanced.downloads", "true");
+}
+
+/** The most recent form the page rendered with, for `setValue` assertions. */
+function lastForm() {
+  const results = useSettingsFormMock.mock.results;
+  return results[results.length - 1]?.value as ReturnType<typeof makeForm>;
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  useSettingsFormMock.mockReset();
+  useSettingsFormMock.mockReturnValue(makeForm());
+});
+
+describe("DownloadsSettings layout", () => {
+  it("opens with the title alone and one Downloads group", () => {
+    render(<DownloadsSettings />);
+
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Downloads" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("group", { name: "Downloads" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/Settings ›/)).not.toBeInTheDocument();
+  });
+
+  it("owns the whole download key family and nothing from playback", () => {
+    render(<DownloadsSettings />);
+
+    expect(useSettingsFormMock.mock.calls[0]?.[0]?.keys).toEqual([
+      "download.enabled",
+      "download.user_bandwidth_mbps",
+      "download.max_concurrent_per_user",
+      "download.max_per_period",
+      "download.period_duration",
+      "download.server_bandwidth_mbps",
+      "download.transcode_enabled",
+      "download.artifact_dir",
+      "download.max_concurrent_prepares",
+      "download.artifact_max_bytes",
+    ]);
+  });
+
+  it("shows the two essential controls and hides the rest behind Advanced", () => {
+    render(<DownloadsSettings />);
+
+    expect(
+      screen.getByRole("switch", { name: /Allow downloads/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText("Per-user bandwidth")).toBeInTheDocument();
+    expect(screen.queryByLabelText("Server bandwidth")).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Advanced · 8 settings" }),
+    ).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("groups the per-user limits ahead of the server-wide ones", () => {
+    expandAdvanced();
+    render(<DownloadsSettings />);
+
+    const text =
+      screen.getByRole("group", { name: "Downloads" }).textContent ?? "";
+    const order = [
+      "Per user",
+      "Downloads at once per user",
+      "Downloads per period",
+      "Period length",
+      "Whole server",
+      "Server bandwidth",
+      "Prepared file storage budget",
+    ].map((label) => text.indexOf(label));
+
+    expect(order.every((index) => index >= 0)).toBe(true);
+    expect([...order].sort((a, b) => a - b)).toEqual(order);
+  });
+
+  it("forces the advanced disclosure open while a hidden field is dirty", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({}, ["download.artifact_dir"]),
+    );
+    render(<DownloadsSettings />);
+
+    expect(
+      screen.getByLabelText("Prepared file directory"),
+    ).toBeInTheDocument();
+  });
+
+  it("marks restart-required fields from the restart key list", () => {
+    expandAdvanced();
+    render(<DownloadsSettings />);
+
+    expect(
+      screen.getAllByLabelText("Takes effect after a server restart"),
+    ).toHaveLength(1);
+  });
+});
+
+describe("DownloadsSettings staged edits", () => {
+  it("stages the downloads toggle without saving it", () => {
+    render(<DownloadsSettings />);
+
+    fireEvent.click(screen.getByRole("switch", { name: /Allow downloads/i }));
+
+    const form = lastForm();
+    expect(form.setValue).toHaveBeenCalledWith("download.enabled", "true");
+    expect(form.save).not.toHaveBeenCalled();
+  });
+
+  it("stages a per-user bandwidth cap", () => {
+    render(<DownloadsSettings />);
+
+    fireEvent.change(screen.getByLabelText("Per-user bandwidth"), {
+      target: { value: "25" },
+    });
+
+    expect(lastForm().setValue).toHaveBeenCalledWith(
+      "download.user_bandwidth_mbps",
+      "25",
+    );
+  });
+
+  it("stages an advanced text field", () => {
+    expandAdvanced();
+    render(<DownloadsSettings />);
+
+    fireEvent.change(screen.getByLabelText("Prepared file directory"), {
+      target: { value: "/var/lib/silo/downloads" },
+    });
+
+    expect(lastForm().setValue).toHaveBeenCalledWith(
+      "download.artifact_dir",
+      "/var/lib/silo/downloads",
+    );
+  });
+
+  it("raises the save bar once edits are staged", () => {
+    useSettingsFormMock.mockReturnValue(makeForm({}, ["download.enabled"]));
+    render(<DownloadsSettings />);
+
+    expect(screen.getByText("1 unsaved change")).toBeInTheDocument();
+  });
+});
+
+describe("DownloadsSettings prepared file storage budget", () => {
+  beforeEach(expandAdvanced);
+
+  it("shows a byte budget in GB", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "download.artifact_max_bytes": "53687091200" }),
+    );
+    render(<DownloadsSettings />);
+
+    expect(screen.getByLabelText("Prepared file storage budget")).toHaveValue(
+      53.687,
+    );
+    expect(
+      screen.getByRole("group", { name: "Downloads" }).textContent,
+    ).not.toContain("53687091200");
+  });
+
+  it("writes bytes back when a GB budget is typed", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "download.artifact_max_bytes": "53687091200" }),
+    );
+    render(<DownloadsSettings />);
+
+    fireEvent.change(screen.getByLabelText("Prepared file storage budget"), {
+      target: { value: "100" },
+    });
+
+    expect(lastForm().setValue).toHaveBeenCalledWith(
+      "download.artifact_max_bytes",
+      "100000000000",
+    );
+  });
+
+  it("keeps unlimited as the default rather than showing 0 GB", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "download.artifact_max_bytes": "0" }),
+    );
+    render(<DownloadsSettings />);
+
+    const input = screen.getByLabelText("Prepared file storage budget");
+
+    expect(input).toHaveValue(null);
+    expect(input).toHaveAttribute("placeholder", "Unlimited");
+  });
+
+  // Neighbouring row, kept honest here: the server reads 0 on this key as
+  // "use the built-in worker count", so it must not become an Unlimited box.
+  it("keeps 0 meaningful on Files prepared at once", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "download.max_concurrent_prepares": "0" }),
+    );
+    render(<DownloadsSettings />);
+
+    expect(screen.getByLabelText("Files prepared at once")).toHaveValue(0);
+    expect(
+      screen.getByText("0 uses the built-in default of 2."),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("DownloadsSettings prepared file directory", () => {
+  beforeEach(expandAdvanced);
+
+  const RESET = { name: "Reset Prepared file directory to default" };
+
+  it("shows where a blank directory resolves to", () => {
+    render(<DownloadsSettings />);
+
+    expect(screen.getByLabelText("Prepared file directory")).toHaveAttribute(
+      "placeholder",
+      "/tmp/silo-download-artifacts",
+    );
+    expect(
+      screen.getByText(
+        "Leave blank for a silo-download-artifacts folder beside the transcode directory.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  // The transcode directory lives on the Playback page's form, so this page
+  // only ever sees the saved value — but it still has to derive from it rather
+  // than quoting the built-in default.
+  it("derives the placeholder from the saved transcode directory", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.transcode_dir": "/mnt/fast/transcode" }),
+    );
+    render(<DownloadsSettings />);
+
+    expect(screen.getByLabelText("Prepared file directory")).toHaveAttribute(
+      "placeholder",
+      "/mnt/fast/silo-download-artifacts",
+    );
+  });
+
+  it("offers no reset while the field already runs the default", () => {
+    render(<DownloadsSettings />);
+
+    expect(screen.queryByRole("button", RESET)).not.toBeInTheDocument();
+  });
+
+  it("stages an empty value when an overridden directory is reset", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "download.artifact_dir": "/mnt/downloads" }),
+    );
+    render(<DownloadsSettings />);
+
+    fireEvent.click(screen.getByRole("button", RESET));
+
+    expect(lastForm().setValue).toHaveBeenCalledWith(
+      "download.artifact_dir",
+      "",
+    );
+  });
+
+  it("counts the reset as one unsaved change and falls back to the placeholder", () => {
+    // The staged empty string, as the form would report it on the next render.
+    useSettingsFormMock.mockReturnValue(
+      makeForm({}, ["download.artifact_dir"]),
+    );
+    render(<DownloadsSettings />);
+
+    expect(screen.getByLabelText("Prepared file directory")).toHaveValue("");
+    expect(screen.getByText("1 unsaved change")).toBeInTheDocument();
+    expect(screen.queryByRole("button", RESET)).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/pages/admin-settings/DownloadsSettings.tsx b/web/src/pages/admin-settings/DownloadsSettings.tsx
new file mode 100644
index 000000000..e3d9add3c
--- /dev/null
+++ b/web/src/pages/admin-settings/DownloadsSettings.tsx
@@ -0,0 +1,201 @@
+import { useMemo } from "react";
+
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+import { LimitField } from "@/components/settings/LimitField";
+import { PathSettingField } from "@/components/settings/PathSettingField";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import { SettingsSubheading } from "@/components/settings/SettingsSubheading";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useRestartKeys } from "@/hooks/useRestartKeys";
+import { useSettingsForm } from "@/hooks/useSettingsForm";
+
+import { FieldGroup } from "./FieldGroup";
+import { SaveBar } from "./SaveBar";
+import { SettingField } from "./SettingField";
+import { effectiveDownloadArtifactDir } from "./settingsPathDefaults";
+
+// Decimal GB, matching how drives and object stores are sold and reported.
+const BYTES_PER_GB = 1_000_000_000;
+
+// Shown without a disclosure: whether offline downloads exist at all, and the
+// one cap a household admin actually reaches for.
+const ESSENTIAL_KEYS = ["download.enabled", "download.user_bandwidth_mbps"];
+
+// Enforced per user: QuantityLimiter counts concurrency and period usage
+// against a user ID (internal/downloads/limiter.go), and the bandwidth cap
+// shapes each user's transfer. They are listed first, under their own
+// heading, so they do not read as server-wide budgets.
+const PER_USER_ADVANCED_KEYS = [
+  "download.max_concurrent_per_user",
+  "download.max_per_period",
+  "download.period_duration",
+];
+
+// Enforced across the whole server.
+const GLOBAL_ADVANCED_KEYS = [
+  "download.server_bandwidth_mbps",
+  "download.transcode_enabled",
+  "download.artifact_dir",
+  "download.max_concurrent_prepares",
+  "download.artifact_max_bytes",
+];
+
+const ADVANCED_KEYS = [...PER_USER_ADVANCED_KEYS, ...GLOBAL_ADVANCED_KEYS];
+
+const KEYS = [...ESSENTIAL_KEYS, ...ADVANCED_KEYS];
+
+export default function DownloadsSettings() {
+  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
+  const restartKeys = useRestartKeys();
+
+  const anyDirty = (keys: string[]) => keys.some((key) => form.isDirty(key));
+  const allRestart = (keys: string[]) =>
+    keys.every((key) => restartKeys.has(key));
+
+  // Where a blank prepared-file directory actually resolves to. The transcode
+  // directory it derives from belongs to the Playback page, which is its own
+  // form instance, so this is the saved value: `getValue` falls through to the
+  // full effective settings for keys this page does not stage.
+  const derivedArtifactDir = effectiveDownloadArtifactDir(
+    "",
+    form.getValue("playback.transcode_dir"),
+  );
+
+  if (form.isLoading)
+    return (
+      <div className="space-y-6" role="status" aria-label="Loading settings">
+        <Skeleton className="h-8 w-40" />
+        <div className="space-y-4">
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+        <span className="sr-only">Loading settings</span>
+      </div>
+    );
+
+  return (
+    <div className="flex h-full flex-col">
+      <SettingsPageHeader title="Downloads" className="mb-8" />
+
+      <div className="flex-1 space-y-5">
+        <FieldGroup
+          label="Downloads"
+          restartAll={allRestart(KEYS)}
+          dirty={anyDirty(KEYS)}
+        >
+          <SettingField
+            label="Allow downloads"
+            type="toggle"
+            value={form.getValue("download.enabled")}
+            onChange={(v) => form.setValue("download.enabled", v)}
+            restartRequired={restartKeys.has("download.enabled")}
+          />
+          <LimitField
+            label="Per-user bandwidth"
+            unit="Mbps"
+            value={form.getValue("download.user_bandwidth_mbps")}
+            onChange={(v) => form.setValue("download.user_bandwidth_mbps", v)}
+            restartRequired={restartKeys.has("download.user_bandwidth_mbps")}
+          />
+
+          <AdvancedSection
+            id="downloads"
+            count={ADVANCED_KEYS.length}
+            forceOpen={anyDirty(ADVANCED_KEYS)}
+          >
+            <SettingsSubheading>Per user</SettingsSubheading>
+            <LimitField
+              label="Downloads at once per user"
+              hint="Counted per user, alongside the per-user bandwidth cap above."
+              value={form.getValue("download.max_concurrent_per_user")}
+              onChange={(v) =>
+                form.setValue("download.max_concurrent_per_user", v)
+              }
+              restartRequired={restartKeys.has(
+                "download.max_concurrent_per_user",
+              )}
+            />
+            <LimitField
+              label="Downloads per period"
+              hint="How many each user may start in the period below."
+              value={form.getValue("download.max_per_period")}
+              onChange={(v) => form.setValue("download.max_per_period", v)}
+              restartRequired={restartKeys.has("download.max_per_period")}
+            />
+            <SettingField
+              label="Period length"
+              type="duration"
+              description="Rolling window each user's count is measured over, e.g. 24h or 168h."
+              value={form.getValue("download.period_duration")}
+              onChange={(v) => form.setValue("download.period_duration", v)}
+              restartRequired={restartKeys.has("download.period_duration")}
+            />
+
+            <SettingsSubheading>Whole server</SettingsSubheading>
+            <LimitField
+              label="Server bandwidth"
+              unit="Mbps"
+              hint="All downloads on this server combined."
+              value={form.getValue("download.server_bandwidth_mbps")}
+              onChange={(v) =>
+                form.setValue("download.server_bandwidth_mbps", v)
+              }
+              restartRequired={restartKeys.has(
+                "download.server_bandwidth_mbps",
+              )}
+            />
+            <SettingField
+              label="Prepare device-friendly copies"
+              type="toggle"
+              description="Converts a file the device cannot play before download."
+              value={form.getValue("download.transcode_enabled")}
+              onChange={(v) => form.setValue("download.transcode_enabled", v)}
+              restartRequired={restartKeys.has("download.transcode_enabled")}
+            />
+            <PathSettingField
+              label="Prepared file directory"
+              defaultValue={derivedArtifactDir}
+              description="Leave blank for a silo-download-artifacts folder beside the transcode directory."
+              value={form.getValue("download.artifact_dir")}
+              onChange={(v) => form.setValue("download.artifact_dir", v)}
+              restartRequired={restartKeys.has("download.artifact_dir")}
+            />
+            {/* Not a LimitField: the server reads 0 as "use the built-in
+                worker count" (2), not as unlimited. */}
+            <SettingField
+              label="Files prepared at once"
+              type="number"
+              description="0 uses the built-in default of 2."
+              value={form.getValue("download.max_concurrent_prepares")}
+              onChange={(v) =>
+                form.setValue("download.max_concurrent_prepares", v)
+              }
+              restartRequired={restartKeys.has(
+                "download.max_concurrent_prepares",
+              )}
+            />
+            {/* Stored as raw bytes (download.artifact_max_bytes); typed in GB
+                because nobody sizes a disk budget in bytes. Unlimited stays
+                the default and still writes the 0 sentinel. */}
+            <LimitField
+              label="Prepared file storage budget"
+              unit="GB"
+              scale={BYTES_PER_GB}
+              hint="Least recently used files are deleted first."
+              value={form.getValue("download.artifact_max_bytes")}
+              onChange={(v) => form.setValue("download.artifact_max_bytes", v)}
+              restartRequired={restartKeys.has("download.artifact_max_bytes")}
+            />
+          </AdvancedSection>
+        </FieldGroup>
+      </div>
+
+      <SaveBar
+        dirtyCount={form.dirtyCount}
+        onSave={form.save}
+        onDiscard={form.discard}
+        isSaving={form.isSaving}
+      />
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/EmailSettings.tsx b/web/src/pages/admin-settings/EmailSettings.tsx
deleted file mode 100644
index 93edb5788..000000000
--- a/web/src/pages/admin-settings/EmailSettings.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { useMemo, useState } from "react";
-import { Loader2, Send } from "lucide-react";
-import { toast } from "sonner";
-import { api } from "@/api/client";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { FieldGroup } from "./FieldGroup";
-import { SaveBar } from "./SaveBar";
-import { SettingField } from "./SettingField";
-
-const KEYS = [
-  "email.enabled",
-  "email.smtp_host",
-  "email.smtp_port",
-  "email.smtp_security",
-  "email.smtp_username",
-  "email.smtp_password",
-  "email.from_address",
-  "email.from_name",
-];
-
-interface EmailTestResult {
-  ok: boolean;
-  duration_ms: number;
-  message?: string;
-}
-
-function TestEmailRow() {
-  const [recipient, setRecipient] = useState("");
-  const [pending, setPending] = useState(false);
-  const [result, setResult] = useState<EmailTestResult | null>(null);
-
-  const sendTest = async () => {
-    setPending(true);
-    setResult(null);
-    try {
-      const response = await api<EmailTestResult>("/admin/email/test", {
-        method: "POST",
-        body: JSON.stringify({ to: recipient.trim() }),
-      });
-      setResult(response);
-      if (response.ok) {
-        toast.success("Test email sent");
-      }
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : "Test request failed",
-      );
-    } finally {
-      setPending(false);
-    }
-  };
-
-  return (
-    <div className="space-y-2 py-2">
-      <div className="flex gap-2">
-        <Input
-          type="email"
-          placeholder="you@example.com"
-          value={recipient}
-          onChange={(event) => setRecipient(event.target.value)}
-        />
-        <Button
-          variant="outline"
-          disabled={pending || !recipient.trim()}
-          onClick={() => void sendTest()}
-        >
-          {pending ? (
-            <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
-          ) : (
-            <Send className="mr-1.5 h-4 w-4" />
-          )}
-          Send test
-        </Button>
-      </div>
-      {result && (
-        <p
-          className={`text-xs ${result.ok ? "text-emerald-500" : "text-amber-500"}`}
-        >
-          {result.ok
-            ? `Delivered to the SMTP server in ${result.duration_ms}ms.`
-            : result.message || "Test failed."}
-        </p>
-      )}
-      <p className="text-muted-foreground text-xs">
-        Save your changes before testing — the test uses the stored settings.
-      </p>
-    </div>
-  );
-}
-
-export default function EmailSettings() {
-  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
-
-  if (form.isLoading) return <div>Loading...</div>;
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Email</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Outbound email via your own SMTP server. Used for notification-address
-          verification and notification digests once those features are enabled.
-        </p>
-      </div>
-
-      <div className="flex-1 space-y-6">
-        <FieldGroup label="General">
-          <SettingField
-            label="Email Enabled"
-            hint="Master switch for all outbound email"
-            type="toggle"
-            value={form.getValue("email.enabled")}
-            onChange={(v) => form.setValue("email.enabled", v)}
-          />
-          <SettingField
-            label="From Address"
-            hint="The sender address, e.g. prairie@example.com"
-            value={form.getValue("email.from_address")}
-            onChange={(v) => form.setValue("email.from_address", v)}
-          />
-          <SettingField
-            label="From Name"
-            hint='Display name on outgoing mail (default "Prairie")'
-            value={form.getValue("email.from_name")}
-            onChange={(v) => form.setValue("email.from_name", v)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="SMTP Server">
-          <SettingField
-            label="Host"
-            hint="SMTP server hostname, e.g. smtp.example.com"
-            value={form.getValue("email.smtp_host")}
-            onChange={(v) => form.setValue("email.smtp_host", v)}
-          />
-          <SettingField
-            label="Port"
-            hint="587 for STARTTLS (typical), 465 for implicit TLS"
-            type="number"
-            value={form.getValue("email.smtp_port")}
-            onChange={(v) => form.setValue("email.smtp_port", v)}
-          />
-          <SettingField
-            label="Security"
-            hint="STARTTLS upgrades a plain connection; TLS connects encrypted from the start"
-            type="select"
-            options={[
-              { value: "starttls", label: "STARTTLS" },
-              { value: "tls", label: "TLS (implicit)" },
-              { value: "none", label: "None (insecure)" },
-            ]}
-            value={form.getValue("email.smtp_security") || "starttls"}
-            onChange={(v) => form.setValue("email.smtp_security", v)}
-          />
-          <SettingField
-            label="Username"
-            hint="Leave empty when the server requires no authentication"
-            value={form.getValue("email.smtp_username")}
-            onChange={(v) => form.setValue("email.smtp_username", v)}
-          />
-          <SettingField
-            label="Password"
-            type="password"
-            sensitiveConfigured={form.sensitiveConfigured.includes(
-              "email.smtp_password",
-            )}
-            value={form.getValue("email.smtp_password")}
-            onChange={(v) => form.setValue("email.smtp_password", v)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Verify">
-          <TestEmailRow />
-        </FieldGroup>
-      </div>
-
-      <SaveBar
-        dirtyCount={form.dirtyCount}
-        onSave={form.save}
-        onDiscard={form.discard}
-        isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
-      />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/FieldGroup.tsx b/web/src/pages/admin-settings/FieldGroup.tsx
index b98567511..07b12dfb0 100644
--- a/web/src/pages/admin-settings/FieldGroup.tsx
+++ b/web/src/pages/admin-settings/FieldGroup.tsx
@@ -1,26 +1,100 @@
-import { useId } from "react";
+import { createContext, useContext, type ReactNode } from "react";
 
+import { SettingsGroup } from "@/components/settings/SettingsGroup";
+import { cn } from "@/lib/utils";
+import "@/styles/admin-settings.css";
+
+const GroupRestartContext = createContext(false);
+
+/** True inside a `FieldGroup` where every field only applies after a restart. */
+export function useGroupRestartAll(): boolean {
+  return useContext(GroupRestartContext);
+}
+
+/**
+ * Marks everything nested under it as restart-all without rendering any
+ * group's own "Changes apply after a restart" line. Use it on a whole page
+ * where every group is restart-all: say the sentence once near the page
+ * title, wrap the page's groups in this provider, and pass `restartAll={false}`
+ * (or omit it) on each `FieldGroup` so the per-group line does not repeat —
+ * per-field restart chips stay suppressed because the groups still inherit
+ * this context.
+ */
+export function RestartAllProvider({ children }: { children: ReactNode }) {
+  return (
+    <GroupRestartContext.Provider value={true}>
+      {children}
+    </GroupRestartContext.Provider>
+  );
+}
+
+export interface FieldGroupProps {
+  /** Sentence-case heading, e.g. "Transcoding". */
+  label: string;
+  /**
+   * Every field in the group only takes effect after a restart. The group says
+   * so once and the fields inside drop their own chips.
+   */
+  restartAll?: boolean;
+  /** At least one field in the group has an unsaved edit. */
+  dirty?: boolean;
+  /** Right-aligned controls on the heading line. */
+  actions?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * An admin settings group: the shared `SettingsGroup` panel (the same surface
+ * the user settings pages use) holding hairline-ruled `SettingFieldRow`s. The
+ * admin-only concerns layer on top: the restart-all line, the unsaved-edits
+ * dot, and the restart context the rows read to drop their own chips.
+ */
 export function FieldGroup({
   label,
+  restartAll = false,
+  dirty = false,
+  actions,
+  className,
   children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  const labelId = useId();
+}: FieldGroupProps) {
+  // A page-level `RestartAllProvider` can already say every field in the page
+  // restarts; a group nested under it inherits that without repeating its own
+  // line (see `restartAll` above).
+  const inheritedRestartAll = useContext(GroupRestartContext);
+  const effectiveRestartAll = restartAll || inheritedRestartAll;
+
+  const dirtyDot = dirty ? (
+    <span
+      className="inline-flex items-center"
+      title="Unsaved changes in this group"
+    >
+      <span
+        aria-hidden="true"
+        className="size-1.5 rounded-full bg-[var(--settings-accent)]"
+      />
+      <span className="sr-only">Unsaved changes in this group</span>
+    </span>
+  ) : null;
+
   return (
-    <div
-      role="group"
-      aria-labelledby={labelId}
-      className="surface-panel rounded-2xl border-0 p-4 sm:p-5"
+    <SettingsGroup
+      title={label}
+      description={restartAll ? "Changes apply after a restart" : undefined}
+      actions={
+        actions || dirtyDot ? (
+          <>
+            {actions}
+            {dirtyDot}
+          </>
+        ) : undefined
+      }
+      flush
+      className={cn("min-w-0", className)}
     >
-      <div
-        id={labelId}
-        className="text-muted-foreground mb-3 text-xs font-semibold tracking-[0.22em] uppercase"
-      >
-        {label}
-      </div>
-      <div className="divide-border divide-y">{children}</div>
-    </div>
+      <GroupRestartContext.Provider value={effectiveRestartAll}>
+        <div className="settings-field-list">{children}</div>
+      </GroupRestartContext.Provider>
+    </SettingsGroup>
   );
 }
diff --git a/web/src/pages/admin-settings/GeneralSettings.test.tsx b/web/src/pages/admin-settings/GeneralSettings.test.tsx
new file mode 100644
index 000000000..cd9711fdf
--- /dev/null
+++ b/web/src/pages/admin-settings/GeneralSettings.test.tsx
@@ -0,0 +1,112 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import GeneralSettings from "./GeneralSettings";
+
+const useSettingsFormMock = vi.fn();
+
+vi.mock("@/hooks/useSettingsForm", () => ({
+  useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
+}));
+
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => new Set<string>(["server.log_level"]),
+}));
+
+function makeForm(values: Record<string, string> = {}) {
+  return {
+    isLoading: false,
+    getValue: (key: string) => values[key] ?? "",
+    setValue: vi.fn(),
+    isDirty: () => false,
+    dirtyCount: 0,
+    save: vi.fn(),
+    discard: vi.fn(),
+    isSaving: false,
+    restartRequired: false,
+    sensitiveConfigured: [],
+    sensitiveManagedByEnv: [],
+  };
+}
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <GeneralSettings />
+    </MemoryRouter>,
+  );
+}
+
+describe("GeneralSettings", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useSettingsFormMock.mockReset();
+    useSettingsFormMock.mockReturnValue(makeForm({ "signup.enabled": "true" }));
+  });
+
+  it("renders every field group", () => {
+    renderPage();
+
+    for (const heading of ["Identity", "Access", "Logging"]) {
+      expect(screen.getByRole("group", { name: heading })).toBeInTheDocument();
+    }
+  });
+
+  it("opens with the title alone: no breadcrumb, lede, or status strip", () => {
+    renderPage();
+
+    expect(
+      screen.getByRole("heading", { name: "General" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("Server name: Silo")).not.toBeInTheDocument();
+    expect(screen.queryByText(/Settings ›/)).not.toBeInTheDocument();
+  });
+
+  it("manages identity, signup and logging keys on one save bar", () => {
+    renderPage();
+
+    expect(useSettingsFormMock.mock.calls[0]?.[0]?.keys).toEqual([
+      "branding.server_name",
+      "branding.login_subtitle",
+      "signup.enabled",
+      "server.log_level",
+      "server.log_quiet",
+    ]);
+  });
+
+  it("shows the public signup toggle in its saved state and links to invite codes", () => {
+    renderPage();
+
+    expect(
+      screen.getByRole("switch", { name: /Public signups/i }),
+    ).toHaveAttribute("aria-checked", "true");
+    // Deep-links straight to the Invite Codes tab rather than the Users tab.
+    expect(
+      screen.getByRole("link", { name: /Manage invite codes/i }),
+    ).toHaveAttribute("href", "/admin/users?tab=invite-codes");
+  });
+
+  it("keeps quiet log prefixes behind the advanced disclosure", () => {
+    renderPage();
+
+    expect(
+      screen.queryByLabelText("Quiet log prefixes"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Advanced/i })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
+  it("forces the advanced disclosure open while a hidden field is dirty", () => {
+    useSettingsFormMock.mockReturnValue({
+      ...makeForm(),
+      isDirty: (key: string) => key === "server.log_quiet",
+    });
+
+    renderPage();
+
+    expect(screen.getByLabelText("Quiet log prefixes")).toBeInTheDocument();
+  });
+});
diff --git a/web/src/pages/admin-settings/GeneralSettings.tsx b/web/src/pages/admin-settings/GeneralSettings.tsx
index 712538495..d8c23914b 100644
--- a/web/src/pages/admin-settings/GeneralSettings.tsx
+++ b/web/src/pages/admin-settings/GeneralSettings.tsx
@@ -1,23 +1,33 @@
 import { useMemo } from "react";
+import { Link } from "react-router";
+import { ArrowRight } from "lucide-react";
+
 import { useSettingsForm } from "@/hooks/useSettingsForm";
+import { useRestartKeys } from "@/hooks/useRestartKeys";
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import { Skeleton } from "@/components/ui/skeleton";
 import { SettingField } from "./SettingField";
 import { SaveBar } from "./SaveBar";
 import { FieldGroup } from "./FieldGroup";
-import { Skeleton } from "@/components/ui/skeleton";
 
-const KEYS = [
-  "auth.access_token_expiry",
-  "auth.refresh_token_expiry",
-  "server.log_level",
-  "server.log_quiet",
-  "clientip.trusted_proxies",
-];
+// Identity (server name, login subtitle) used to live on the Branding tab and
+// public signups on the Invite Codes tab; both are plain server-wide switches an
+// admin looks for under General, so they save with everything else on this page.
+const IDENTITY_KEYS = ["branding.server_name", "branding.login_subtitle"];
+const ACCESS_KEYS = ["signup.enabled"];
+const LOGGING_ADVANCED_KEYS = ["server.log_quiet"];
+const LOGGING_KEYS = ["server.log_level", ...LOGGING_ADVANCED_KEYS];
+
+const KEYS = [...IDENTITY_KEYS, ...ACCESS_KEYS, ...LOGGING_KEYS];
 
 export default function GeneralSettings() {
   const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
-  const trustedProxiesManaged = form.sensitiveManagedByEnv.includes(
-    "clientip.trusted_proxies",
-  );
+  const restartKeys = useRestartKeys();
+
+  const allRestart = (keys: string[]) =>
+    keys.every((key) => restartKeys.has(key));
+  const anyDirty = (keys: string[]) => keys.some((key) => form.isDirty(key));
 
   if (form.isLoading)
     return (
@@ -37,38 +47,75 @@ export default function GeneralSettings() {
 
   return (
     <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">General</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Authentication, token lifetimes, networking, and server logging
-          behavior.
-        </p>
-      </div>
+      <SettingsPageHeader title="General" className="mb-7" />
 
-      <div className="flex-1 space-y-6">
-        <FieldGroup label="Authentication">
+      <div className="flex-1 space-y-5">
+        <FieldGroup
+          label="Identity"
+          restartAll={allRestart(IDENTITY_KEYS)}
+          dirty={anyDirty(IDENTITY_KEYS)}
+        >
           <SettingField
-            label="Access Token Expiry"
-            type="duration"
-            hint="e.g. 1h, 30m"
-            value={form.getValue("auth.access_token_expiry")}
-            onChange={(v) => form.setValue("auth.access_token_expiry", v)}
+            label="Server name"
+            settingKey="branding.server_name"
+            dirty={form.isDirty("branding.server_name")}
+            hint="Silo"
+            value={form.getValue("branding.server_name")}
+            onChange={(v) => form.setValue("branding.server_name", v)}
+            restartRequired={restartKeys.has("branding.server_name")}
           />
           <SettingField
-            label="Refresh Token Expiry"
-            type="duration"
-            hint="e.g. 30d, 720h"
-            value={form.getValue("auth.refresh_token_expiry")}
-            onChange={(v) => form.setValue("auth.refresh_token_expiry", v)}
+            label="Login subtitle"
+            settingKey="branding.login_subtitle"
+            dirty={form.isDirty("branding.login_subtitle")}
+            hint="Sign in with an existing account."
+            description="Shown under the server name on the sign-in page."
+            value={form.getValue("branding.login_subtitle")}
+            onChange={(v) => form.setValue("branding.login_subtitle", v)}
+            restartRequired={restartKeys.has("branding.login_subtitle")}
           />
         </FieldGroup>
 
-        <FieldGroup label="Logging">
+        <FieldGroup
+          label="Access"
+          restartAll={allRestart(ACCESS_KEYS)}
+          dirty={anyDirty(ACCESS_KEYS)}
+          actions={
+            <Link
+              to="/admin/users?tab=invite-codes"
+              className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-xs font-medium transition-colors"
+            >
+              Manage invite codes
+              <ArrowRight className="h-3 w-3" aria-hidden="true" />
+            </Link>
+          }
+        >
           <SettingField
-            label="Log Level"
+            label="Public signups"
+            settingKey="signup.enabled"
+            dirty={form.isDirty("signup.enabled")}
+            type="toggle"
+            description="Anyone with a valid invite code can create an account."
+            value={form.getValue("signup.enabled")}
+            onChange={(v) => form.setValue("signup.enabled", v)}
+            restartRequired={restartKeys.has("signup.enabled")}
+          />
+        </FieldGroup>
+
+        <FieldGroup
+          label="Logging"
+          restartAll={allRestart(LOGGING_KEYS)}
+          dirty={anyDirty(LOGGING_KEYS)}
+        >
+          <SettingField
+            label="Log level"
+            settingKey="server.log_level"
+            dirty={form.isDirty("server.log_level")}
             type="select"
+            description="Debug is loud; use it while chasing a problem."
             value={form.getValue("server.log_level")}
             onChange={(v) => form.setValue("server.log_level", v)}
+            restartRequired={restartKeys.has("server.log_level")}
             options={[
               { value: "debug", label: "Debug" },
               { value: "info", label: "Info" },
@@ -76,53 +123,22 @@ export default function GeneralSettings() {
               { value: "error", label: "Error" },
             ]}
           />
-          <SettingField
-            label="Quiet Log Prefixes"
-            hint="Comma-separated message prefixes to silence, such as metadata or scanner. A trailing colon is optional."
-            value={form.getValue("server.log_quiet")}
-            onChange={(v) => form.setValue("server.log_quiet", v)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Network">
-          <SettingField
-            label="Trusted Proxies"
-            hint={
-              (trustedProxiesManaged
-                ? "Managed by PRAIRIE_TRUSTED_PROXIES. Remove that environment variable to edit here. "
-                : "") +
-              "Comma-separated CIDRs of reverse proxies whose X-Forwarded-For is trusted, e.g. " +
-              "172.16.0.0/12, 203.0.113.7/32. Applies without a restart."
-            }
-            value={form.getValue("clientip.trusted_proxies")}
-            onChange={(v) => form.setValue("clientip.trusted_proxies", v)}
-            disabled={trustedProxiesManaged}
-          />
-          <div className="border-border/60 bg-muted/30 my-3 rounded-lg border px-3 py-2">
-            <p className="text-sm font-medium">Choosing trusted proxy ranges</p>
-            <ul className="text-muted-foreground mt-1 list-disc space-y-1 pl-4 text-xs leading-relaxed">
-              <li>
-                Setting this replaces the defaults (private ranges 10.0.0.0/8,
-                172.16.0.0/12, 192.168.0.0/16 and loopback). Leave it empty to
-                keep them.
-              </li>
-              <li>
-                Recommended: keep the defaults, and only add your proxy&apos;s
-                public address as a /32 (e.g. 203.0.113.7/32) if it reaches
-                Prairie from outside those ranges.
-              </li>
-              <li>
-                CDNs such as Cloudflare connect from many published IP ranges —
-                you must list all of their CIDRs and keep the list up to date as
-                they change.
-              </li>
-              <li>
-                Avoid 0.0.0.0/0 (trust everything): any client could then spoof
-                its IP with a forged X-Forwarded-For header, affecting rate
-                limits and audit logs.
-              </li>
-            </ul>
-          </div>
+          <AdvancedSection
+            id="general.logging"
+            count={LOGGING_ADVANCED_KEYS.length}
+            forceOpen={form.isDirty("server.log_quiet")}
+          >
+            <SettingField
+              label="Quiet log prefixes"
+              settingKey="server.log_quiet"
+              dirty={form.isDirty("server.log_quiet")}
+              hint="metadata, scanner"
+              description="Drops log lines starting with any of these words."
+              value={form.getValue("server.log_quiet")}
+              onChange={(v) => form.setValue("server.log_quiet", v)}
+              restartRequired={restartKeys.has("server.log_quiet")}
+            />
+          </AdvancedSection>
         </FieldGroup>
       </div>
 
@@ -131,7 +147,6 @@ export default function GeneralSettings() {
         onSave={form.save}
         onDiscard={form.discard}
         isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
       />
     </div>
   );
diff --git a/web/src/pages/admin-settings/InfrastructureSettings.test.tsx b/web/src/pages/admin-settings/InfrastructureSettings.test.tsx
new file mode 100644
index 000000000..14720d1c1
--- /dev/null
+++ b/web/src/pages/admin-settings/InfrastructureSettings.test.tsx
@@ -0,0 +1,418 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import InfrastructureSettings from "./InfrastructureSettings";
+import { OPSLOG_BUCKET_POLICIES_KEY } from "./logRetentionPolicy";
+
+const settingsFormMock = vi.fn();
+const useCheckAdminSettingsConnectionMock = vi.fn();
+
+// Most cases drive the page from a hand-written form so a single render can
+// describe any staged state. The cases that have to prove a value reaches the
+// server flip this and run the real hook instead.
+const { realForm, serverSettings, sensitiveStatus, updateSettingsMock } =
+  vi.hoisted(() => ({
+    realForm: { enabled: false },
+    serverSettings: { current: {} as Record<string, string> },
+    sensitiveStatus: {
+      current: { configured: [] as string[], managed_by_env: [] as string[] },
+    },
+    updateSettingsMock: vi.fn(),
+  }));
+
+vi.mock("@/hooks/useSettingsForm", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@/hooks/useSettingsForm")>();
+  return {
+    useSettingsForm: (options: { keys: string[] }) =>
+      realForm.enabled
+        ? actual.useSettingsForm(options)
+        : settingsFormMock(options),
+  };
+});
+
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => new Set<string>(["redis.url"]),
+}));
+
+vi.mock("@/hooks/queries/admin/settings", () => ({
+  useCheckAdminSettingsConnection: (...args: unknown[]) =>
+    useCheckAdminSettingsConnectionMock(...args),
+  useAdminServerSettings: () => ({
+    data: serverSettings.current,
+    isLoading: false,
+  }),
+  useAdminSensitiveStatus: () => ({
+    data: sensitiveStatus.current,
+    isError: false,
+  }),
+  useUpdateServerSettings: () => ({
+    mutateAsync: updateSettingsMock,
+    isPending: false,
+  }),
+}));
+
+useCheckAdminSettingsConnectionMock.mockReturnValue({
+  isPending: false,
+  mutateAsync: vi.fn(),
+});
+
+type FormOverrides = Partial<Record<string, unknown>>;
+
+function mockForm(overrides: FormOverrides = {}) {
+  const form = {
+    isLoading: false,
+    getValue: (key: string) =>
+      key === "s3.public_url_auth" ? "presigned" : "",
+    setValue: vi.fn(),
+    resetValue: vi.fn(),
+    dirtyCount: 0,
+    dirtyKeys: [],
+    isDirty: () => false,
+    isClearStaged: () => false,
+    save: vi.fn(),
+    discard: vi.fn(),
+    isSaving: false,
+    restartRequired: false,
+    sensitiveConfigured: [],
+    sensitiveManagedByEnv: [],
+    sensitiveStatusReady: true,
+    sensitiveStatusError: false,
+    buildConnectionCheckRequest: vi.fn(),
+    ...overrides,
+  };
+  settingsFormMock.mockReturnValue(form);
+  return form;
+}
+
+describe("InfrastructureSettings", () => {
+  it("renders every field group heading", () => {
+    mockForm();
+
+    const markup = renderToStaticMarkup(<InfrastructureSettings />);
+
+    for (const heading of [
+      "Redis",
+      "Public storage",
+      "Private storage",
+      "Database",
+      "Logs",
+    ]) {
+      expect(markup).toContain(heading);
+    }
+  });
+
+  it("renders the page header on its own, with no description or status strip", () => {
+    mockForm();
+
+    render(<InfrastructureSettings />);
+
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Storage & Database" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        "Where Silo keeps its data. Changes here take effect after a restart.",
+      ),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Redis not configured")).not.toBeInTheDocument();
+    expect(screen.queryByText("No public bucket set")).not.toBeInTheDocument();
+  });
+
+  it("states the restart requirement once for the whole page instead of repeating it per group", () => {
+    mockForm();
+
+    render(<InfrastructureSettings />);
+
+    expect(
+      screen.getAllByText("Changes on this page apply after a restart."),
+    ).toHaveLength(1);
+    // No group repeats its own "Changes apply after a restart" line, and no
+    // individual field shows a restart chip either.
+    expect(
+      screen.queryByText("Changes apply after a restart"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryAllByLabelText("Takes effect after a server restart"),
+    ).toHaveLength(0);
+  });
+
+  it("puts units beside the control rather than in the label", () => {
+    mockForm();
+
+    const markup = renderToStaticMarkup(<InfrastructureSettings />);
+
+    expect(markup).toContain("Delete log entries older than");
+    expect(markup).not.toContain("Delete log entries older than (days)");
+    expect(markup).not.toContain("Maximum log size (MB)");
+  });
+
+  it("manages the merged database, storage and log keys in one form", () => {
+    mockForm();
+
+    renderToStaticMarkup(<InfrastructureSettings />);
+
+    const calls = settingsFormMock.mock.calls as [{ keys: string[] }][];
+    const keys = calls[calls.length - 1]?.[0].keys ?? [];
+    expect(keys).toEqual(
+      expect.arrayContaining(["redis.url", "database.max_connections"]),
+    );
+    expect(keys).toEqual(
+      expect.arrayContaining([
+        "s3.public_bucket",
+        "s3.private_bucket",
+        OPSLOG_BUCKET_POLICIES_KEY,
+      ]),
+    );
+    // The disabled Litestream storage tab is gone; its keys keep working through the API.
+    expect(keys.filter((key) => key.startsWith("s3.user_db_"))).toEqual([]);
+  });
+
+  it("shows only essential controls until Advanced is opened", () => {
+    mockForm();
+
+    const markup = renderToStaticMarkup(<InfrastructureSettings />);
+
+    expect(markup).toContain("Use Redis");
+    expect(markup).toContain("Endpoint");
+    expect(markup).toContain("Bucket");
+    expect(markup).toContain("Check Connection");
+    expect(markup).toContain("Maximum log entries");
+    // Advanced, so not rendered while collapsed.
+    expect(markup).not.toContain("Region");
+    expect(markup).not.toContain("Maximum Postgres connections");
+    expect(markup).not.toContain("Record one allowed check in every");
+    expect(markup).not.toContain("Per-area limits");
+    // Removed entirely.
+    expect(markup).not.toContain("User DB");
+    expect(markup).not.toContain("Not currently in use");
+  });
+
+  it("keeps the Redis connection check available when REDIS_URL comes from the environment", () => {
+    mockForm({
+      sensitiveConfigured: ["redis.url"],
+      sensitiveManagedByEnv: ["redis.url"],
+    });
+
+    render(<InfrastructureSettings />);
+
+    const redisGroup = within(screen.getByRole("group", { name: "Redis" }));
+    // The value stays read-only — only writes are refused for env-managed keys —
+    // but the check runs against the value the server merged from REDIS_URL.
+    expect(redisGroup.getByLabelText("Connection URL")).toBeDisabled();
+    expect(
+      redisGroup.getByRole("button", { name: "Check Connection" }),
+    ).toBeEnabled();
+  });
+
+  it("renders Check Connection as a filled button rather than flat text", () => {
+    mockForm();
+
+    render(<InfrastructureSettings />);
+
+    for (const button of screen.getAllByRole("button", {
+      name: "Check Connection",
+    })) {
+      expect(button).toHaveAttribute("data-variant", "secondary");
+    }
+  });
+
+  it("opens an Advanced section while one of its fields is unsaved", () => {
+    mockForm({
+      isDirty: (key: string) => key === "database.max_connections",
+      dirtyCount: 1,
+    });
+
+    const markup = renderToStaticMarkup(<InfrastructureSettings />);
+
+    expect(markup).toContain("Maximum Postgres connections");
+    expect(markup).toContain("Advanced · 2 settings");
+  });
+
+  it("warns about the artwork cache when a public storage identity field is edited", () => {
+    mockForm({
+      isDirty: (key: string) => key === "s3.public_bucket",
+      dirtyCount: 1,
+    });
+
+    const markup = renderToStaticMarkup(<InfrastructureSettings />);
+
+    expect(markup).toContain("Storage location change");
+    expect(markup).toContain("will not change artwork cache records");
+  });
+
+  it("keeps a saved credential when its input is emptied", async () => {
+    const form = mockForm({
+      sensitiveConfigured: ["s3.public_access_key", "s3.public_secret_key"],
+      getValue: (key: string) =>
+        key === "s3.public_access_key"
+          ? "draft"
+          : key === "s3.public_url_auth"
+            ? "presigned"
+            : "",
+    });
+
+    render(<InfrastructureSettings />);
+
+    // No Replace step: the saved credential is a masked, always-editable input.
+    const publicGroup = within(
+      screen.getByRole("group", { name: "Public storage" }),
+    );
+    const input = publicGroup.getByLabelText("Access Key");
+    expect(input).toHaveAttribute("type", "password");
+    expect(input).toHaveAttribute("placeholder", "••••••••••••");
+    expect(
+      publicGroup.queryByRole("button", { name: /Replace/ }),
+    ).not.toBeInTheDocument();
+
+    // Deleting the draft means "keep the saved secret", never "clear it".
+    await userEvent.clear(input);
+    expect(form.resetValue).toHaveBeenCalledWith("s3.public_access_key");
+    expect(form.setValue).not.toHaveBeenCalledWith("s3.public_access_key", "");
+  });
+
+  it("keeps the credential input editable when saving fails", async () => {
+    mockForm({
+      sensitiveConfigured: ["s3.private_access_key"],
+      dirtyCount: 1,
+      save: vi.fn().mockRejectedValue(new Error("save failed")),
+    });
+
+    render(<InfrastructureSettings />);
+
+    const privateGroup = within(
+      screen.getByRole("group", { name: "Private storage" }),
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    await waitFor(() =>
+      expect(privateGroup.getByLabelText("Access Key")).toHaveAttribute(
+        "type",
+        "password",
+      ),
+    );
+  });
+
+  it("fails closed when protected credential status cannot be loaded", () => {
+    mockForm({ sensitiveStatusReady: false, sensitiveStatusError: true });
+
+    render(<InfrastructureSettings />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "Protected credential status is unavailable",
+    );
+    expect(screen.queryByLabelText("Access Key")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Secret Key")).not.toBeInTheDocument();
+  });
+
+  it("stages bucket override edits through the shared save model", async () => {
+    const setValue = vi.fn();
+    mockForm({
+      setValue,
+      isDirty: (key: string) => key === OPSLOG_BUCKET_POLICIES_KEY,
+      dirtyCount: 1,
+      getValue: (key: string) => {
+        if (key === "s3.public_url_auth") return "presigned";
+        if (key === OPSLOG_BUCKET_POLICIES_KEY) {
+          return JSON.stringify([
+            {
+              component: "metadata",
+              level: "info",
+              retention_days: 1,
+              max_rows: 100,
+              max_size_mb: 8,
+            },
+          ]);
+        }
+        return "";
+      },
+    });
+
+    render(<InfrastructureSettings />);
+
+    await userEvent.click(
+      screen.getByRole("button", { name: /Remove metadata rule/ }),
+    );
+
+    expect(setValue).toHaveBeenCalledWith(OPSLOG_BUCKET_POLICIES_KEY, "[]");
+  });
+
+  describe("clearing a stored credential", () => {
+    beforeEach(() => {
+      realForm.enabled = true;
+      serverSettings.current = { "s3.public_url_auth": "presigned" };
+      sensitiveStatus.current = {
+        configured: ["s3.public_access_key"],
+        managed_by_env: [],
+      };
+      updateSettingsMock.mockReset();
+      updateSettingsMock.mockResolvedValue({
+        values: {},
+        restart_required: false,
+      });
+    });
+
+    afterEach(() => {
+      realForm.enabled = false;
+    });
+
+    it("stages the clear in the save bar and saves it as an empty value", async () => {
+      render(<InfrastructureSettings />);
+
+      const publicGroup = within(
+        screen.getByRole("group", { name: "Public storage" }),
+      );
+      await userEvent.click(
+        publicGroup.getByRole("button", { name: "Clear saved value" }),
+      );
+
+      expect(screen.getByText("1 unsaved change")).toBeInTheDocument();
+
+      await userEvent.click(screen.getByRole("button", { name: "Save" }));
+
+      await waitFor(() =>
+        expect(updateSettingsMock).toHaveBeenCalledWith({
+          "s3.public_access_key": "",
+        }),
+      );
+    });
+
+    it("takes the clear back out of the save bar when the saved value is kept", async () => {
+      render(<InfrastructureSettings />);
+
+      const publicGroup = within(
+        screen.getByRole("group", { name: "Public storage" }),
+      );
+      await userEvent.click(
+        publicGroup.getByRole("button", { name: "Clear saved value" }),
+      );
+      await userEvent.click(
+        publicGroup.getByRole("button", { name: "Keep saved value" }),
+      );
+
+      expect(screen.queryByText("1 unsaved change")).not.toBeInTheDocument();
+      expect(publicGroup.getByLabelText("Access Key")).toHaveAttribute(
+        "placeholder",
+        "••••••••••••",
+      );
+    });
+
+    it("leaves an env-managed credential without a clear action", async () => {
+      serverSettings.current = { "redis.url": "" };
+      sensitiveStatus.current = {
+        configured: ["redis.url"],
+        managed_by_env: ["redis.url"],
+      };
+
+      render(<InfrastructureSettings />);
+
+      const redisGroup = within(screen.getByRole("group", { name: "Redis" }));
+      expect(redisGroup.getByLabelText("Connection URL")).toBeDisabled();
+      expect(
+        redisGroup.queryByRole("button", { name: "Clear saved value" }),
+      ).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/web/src/pages/admin-settings/InfrastructureSettings.tsx b/web/src/pages/admin-settings/InfrastructureSettings.tsx
new file mode 100644
index 000000000..557a5530a
--- /dev/null
+++ b/web/src/pages/admin-settings/InfrastructureSettings.tsx
@@ -0,0 +1,903 @@
+import { useMemo, useRef, useState } from "react";
+import { AlertTriangle, Plus, RotateCcw, Trash2 } from "lucide-react";
+
+import type { ConnectionCheckResponse } from "@/api/types";
+import { ConnectionCheckAction } from "@/components/admin/ConnectionCheckAction";
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+import { SecretField } from "@/components/settings/SecretField";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import { SettingsSubheading } from "@/components/settings/SettingsSubheading";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useCheckAdminSettingsConnection } from "@/hooks/queries/admin/settings";
+import { useRestartKeys, type RestartKeyMatcher } from "@/hooks/useRestartKeys";
+import { useSettingsForm } from "@/hooks/useSettingsForm";
+
+import { FieldGroup, RestartAllProvider } from "./FieldGroup";
+import { SaveBar } from "./SaveBar";
+import { SettingField } from "./SettingField";
+import { USER_DATABASE_BACKEND_OPTIONS } from "./databaseSettingOptions";
+import {
+  LOG_LEVEL_OPTIONS,
+  OPSLOG_BUCKET_POLICIES_KEY,
+  OPSLOG_MAX_ROWS_KEY,
+  OPSLOG_MAX_SIZE_MB_KEY,
+  OPSLOG_RETENTION_DAYS_KEY,
+  appendBucketRow,
+  bucketRowsFromRaw,
+  recommendedBucketRows,
+  removeBucketRow,
+  serializeBucketRows,
+  updateBucketRow,
+  type LogRetentionBucketPolicy,
+  type LogRetentionBucketRow,
+} from "./logRetentionPolicy";
+
+type SettingsForm = ReturnType<typeof useSettingsForm>;
+
+const REDIS_KEYS = ["redis.url"];
+
+const DATABASE_KEYS = [
+  "database.max_connections",
+  "userdb.backend",
+  "userdb.pool_max_open",
+  "userdb.idle_timeout",
+];
+
+const PUBLIC_S3_KEYS = [
+  "s3.public_endpoint",
+  "s3.public_region",
+  "s3.public_path_style",
+  "s3.public_bucket",
+  "s3.public_key_prefix",
+  "s3.public_access_key",
+  "s3.public_secret_key",
+  "s3.public_read_endpoint",
+  "s3.public_url_auth",
+  "s3.public_token_secret",
+  "s3.public_token_param",
+  "s3.public_token_ttl",
+];
+
+// Changing any of these moves where cached artwork objects live. Silo detects
+// that change after restart but requires an explicit manual reconcile so an
+// incomplete bucket migration cannot rewrite the artwork catalog.
+const PUBLIC_S3_IDENTITY_KEYS = [
+  "s3.public_endpoint",
+  "s3.public_bucket",
+  "s3.public_key_prefix",
+];
+
+const PRIVATE_S3_KEYS = [
+  "s3.private_endpoint",
+  "s3.private_region",
+  "s3.private_path_style",
+  "s3.private_bucket",
+  "s3.private_key_prefix",
+  "s3.private_access_key",
+  "s3.private_secret_key",
+];
+
+// The overall trim limits are what an admin comes here to change; the policy
+// decision log and the per-area rules are debugging tools behind Advanced.
+const LOG_ESSENTIAL_KEYS = [
+  OPSLOG_RETENTION_DAYS_KEY,
+  OPSLOG_MAX_ROWS_KEY,
+  OPSLOG_MAX_SIZE_MB_KEY,
+];
+
+const LOG_ADVANCED_KEYS = [
+  "policy.decision_log_retention_days",
+  "policy.decision_log_verbosity",
+  "policy.decision_log_scope_sample_rate",
+  OPSLOG_BUCKET_POLICIES_KEY,
+];
+
+const LOG_KEYS = [...LOG_ESSENTIAL_KEYS, ...LOG_ADVANCED_KEYS];
+
+const KEYS = [
+  ...REDIS_KEYS,
+  ...DATABASE_KEYS,
+  ...PUBLIC_S3_KEYS,
+  ...PRIVATE_S3_KEYS,
+  ...LOG_KEYS,
+];
+
+function countDirty(form: SettingsForm, keys: string[]): number {
+  return keys.filter((key) => form.isDirty(key)).length;
+}
+
+/**
+ * Shared credential-draft helpers for every secret on the page. Every editor
+ * is frozen while a save is in flight so a late keystroke cannot ride along
+ * with it; emptying an input reverts to the saved value (`keepSaved`), and
+ * erasing one for real takes the explicit `clearSaved` action.
+ */
+interface SecretEditors {
+  keepSaved: (key: string) => void;
+  clearSaved: (key: string) => void;
+  setSecret: (key: string, value: string) => void;
+  disabled: boolean;
+}
+
+function RedisGroup({
+  form,
+  restartKeys,
+  secrets,
+}: {
+  form: SettingsForm;
+  restartKeys: RestartKeyMatcher;
+  secrets: SecretEditors;
+}) {
+  const checkConnection = useCheckAdminSettingsConnection();
+  const [connectionResult, setConnectionResult] =
+    useState<ConnectionCheckResponse | null>(null);
+  const redisUrl = form.getValue("redis.url");
+  const managedByEnv = form.sensitiveManagedByEnv.includes("redis.url");
+  const configured = form.sensitiveConfigured.includes("redis.url");
+  const [enabledOverride, setEnabledOverride] = useState<boolean | null>(null);
+  // Saving or discarding clears the toggle override so it follows the stored
+  // URL again. Adjusting during render (rather than in an effect) keeps the
+  // override alive while the admin is still editing.
+  const [lastDirtyCount, setLastDirtyCount] = useState(form.dirtyCount);
+  if (lastDirtyCount !== form.dirtyCount) {
+    setLastDirtyCount(form.dirtyCount);
+    if (form.dirtyCount === 0) setEnabledOverride(null);
+  }
+  const enabled = enabledOverride ?? (redisUrl.trim() !== "" || configured);
+
+  async function handleCheckConnection() {
+    try {
+      setConnectionResult(
+        await checkConnection.mutateAsync({
+          kind: "redis",
+          body: form.buildConnectionCheckRequest(REDIS_KEYS),
+        }),
+      );
+    } catch (error) {
+      setConnectionResult({
+        success: false,
+        message:
+          error instanceof Error ? error.message : "Connection check failed.",
+      });
+    }
+  }
+
+  return (
+    <FieldGroup label="Redis">
+      <SettingField
+        label="Use Redis"
+        type="toggle"
+        description={
+          managedByEnv
+            ? "Set by REDIS_URL"
+            : "Needed when running more than one server."
+        }
+        value={enabled ? "true" : "false"}
+        onChange={(value) => {
+          if (value === "true") {
+            setEnabledOverride(true);
+            form.resetValue("redis.url");
+            return;
+          }
+          setEnabledOverride(false);
+          form.setValue("redis.url", "");
+        }}
+        disabled={managedByEnv}
+        restartRequired={restartKeys.has("redis.url")}
+      />
+      {enabled && (
+        <>
+          {/*
+            No `onClear` here: the Use Redis switch above already stages the
+            empty URL, and one clear per surface is the rule.
+          */}
+          <SecretField
+            label="Connection URL"
+            value={redisUrl}
+            configured={configured}
+            onKeep={() => secrets.keepSaved("redis.url")}
+            onChange={(v) => secrets.setSecret("redis.url", v)}
+            hint={
+              managedByEnv ? "Value supplied by REDIS_URL" : "redis://host:6379"
+            }
+            disabled={managedByEnv || secrets.disabled}
+            restartRequired={restartKeys.has("redis.url")}
+          />
+          {/*
+            Env-managed URLs stay checkable: the field is read-only so nothing
+            is dirty, and the server checks the effective value it merged from
+            REDIS_URL. Only writes are refused for env-managed keys.
+          */}
+          <ConnectionCheckAction
+            onClick={handleCheckConnection}
+            result={connectionResult}
+            isPending={checkConnection.isPending}
+            disabled={form.isSaving}
+          />
+        </>
+      )}
+    </FieldGroup>
+  );
+}
+
+function S3Group({
+  form,
+  restartKeys,
+  secrets,
+  scope,
+  label,
+  checkKind,
+}: {
+  form: SettingsForm;
+  restartKeys: RestartKeyMatcher;
+  secrets: SecretEditors;
+  scope: "public" | "private";
+  label: string;
+  checkKind: "s3_public" | "s3_private";
+}) {
+  const checkConnection = useCheckAdminSettingsConnection();
+  const [connectionResult, setConnectionResult] =
+    useState<ConnectionCheckResponse | null>(null);
+  const keys = scope === "public" ? PUBLIC_S3_KEYS : PRIVATE_S3_KEYS;
+  const key = (suffix: string) => `s3.${scope}_${suffix}`;
+  const urlAuth = form.getValue("s3.public_url_auth") || "presigned";
+
+  const advancedKeys =
+    scope === "public"
+      ? [
+          "s3.public_region",
+          "s3.public_path_style",
+          "s3.public_key_prefix",
+          "s3.public_url_auth",
+          "s3.public_read_endpoint",
+          "s3.public_token_secret",
+          "s3.public_token_param",
+          "s3.public_token_ttl",
+        ]
+      : ["s3.private_region", "s3.private_path_style", "s3.private_key_prefix"];
+  const advancedCount =
+    scope === "public"
+      ? 4 +
+        (urlAuth !== "presigned" ? 1 : 0) +
+        (urlAuth === "cloudflare_token" ? 3 : 0)
+      : 3;
+  const advancedChanged = countDirty(form, advancedKeys);
+
+  async function handleCheckConnection() {
+    try {
+      setConnectionResult(
+        await checkConnection.mutateAsync({
+          kind: checkKind,
+          body: form.buildConnectionCheckRequest(keys),
+        }),
+      );
+    } catch (error) {
+      setConnectionResult({
+        success: false,
+        message:
+          error instanceof Error ? error.message : "Connection check failed.",
+      });
+    }
+  }
+
+  return (
+    <FieldGroup label={label}>
+      <SettingField
+        label="Endpoint"
+        hint="https://s3.us-east-1.amazonaws.com"
+        value={form.getValue(key("endpoint"))}
+        onChange={(v) => form.setValue(key("endpoint"), v)}
+        restartRequired={restartKeys.has(key("endpoint"))}
+      />
+      <SettingField
+        label="Bucket"
+        value={form.getValue(key("bucket"))}
+        onChange={(v) => form.setValue(key("bucket"), v)}
+        restartRequired={restartKeys.has(key("bucket"))}
+      />
+      {scope === "public" &&
+        PUBLIC_S3_IDENTITY_KEYS.some((k) => form.isDirty(k)) && (
+          <div className="my-3 flex items-start gap-3 rounded-xl border border-amber-500/20 bg-amber-500/5 p-4">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
+            <div className="text-[13px] leading-relaxed">
+              <p className="font-medium text-amber-500">
+                Storage location change
+              </p>
+              <p className="text-muted-foreground mt-1">
+                Artwork is cached in this bucket. Silo will not change artwork
+                cache records automatically after restart. Copy or migrate the
+                existing bucket objects first, then manually run Reconcile
+                Artwork Cache only if you intend every missing record to be
+                reset or cleared. Re-downloading those reset provider images is
+                a separate, manual Backfill Metadata Images action; normal
+                scheduled caching only processes artwork queued by new or
+                changed metadata. Uploaded images (custom posters, collection
+                artwork, branding) cannot be re-downloaded.
+              </p>
+            </div>
+          </div>
+        )}
+      {/*
+        The access and secret keys must stay configured together, so clearing
+        one alone is refused at save time. Both carry the action, which is what
+        lets an admin stage the pair and hand this bucket back to anonymous or
+        instance-role access.
+      */}
+      <SecretField
+        label="Access Key"
+        value={form.getValue(key("access_key"))}
+        configured={form.sensitiveConfigured.includes(key("access_key"))}
+        onKeep={() => secrets.keepSaved(key("access_key"))}
+        onClear={() => secrets.clearSaved(key("access_key"))}
+        cleared={form.isClearStaged(key("access_key"))}
+        onChange={(v) => secrets.setSecret(key("access_key"), v)}
+        disabled={secrets.disabled}
+        restartRequired={restartKeys.has(key("access_key"))}
+      />
+      <SecretField
+        label="Secret Key"
+        value={form.getValue(key("secret_key"))}
+        configured={form.sensitiveConfigured.includes(key("secret_key"))}
+        onKeep={() => secrets.keepSaved(key("secret_key"))}
+        onClear={() => secrets.clearSaved(key("secret_key"))}
+        cleared={form.isClearStaged(key("secret_key"))}
+        onChange={(v) => secrets.setSecret(key("secret_key"), v)}
+        disabled={secrets.disabled}
+        restartRequired={restartKeys.has(key("secret_key"))}
+      />
+      <ConnectionCheckAction
+        onClick={handleCheckConnection}
+        result={connectionResult}
+        isPending={checkConnection.isPending}
+        disabled={form.isSaving}
+      />
+
+      <AdvancedSection
+        id={`infrastructure.s3.${scope}`}
+        count={advancedCount}
+        forceOpen={advancedChanged > 0}
+      >
+        <SettingField
+          label="Region"
+          description="Leave blank unless your provider requires one."
+          value={form.getValue(key("region"))}
+          onChange={(v) => form.setValue(key("region"), v)}
+          restartRequired={restartKeys.has(key("region"))}
+        />
+        <SettingField
+          label="Put the bucket name in the URL path"
+          type="toggle"
+          description="Needed by MinIO and some self-hosted storage."
+          value={form.getValue(key("path_style"))}
+          onChange={(v) => form.setValue(key("path_style"), v)}
+          restartRequired={restartKeys.has(key("path_style"))}
+        />
+        <SettingField
+          label="Folder inside the bucket"
+          description="Leave blank to use the bucket root."
+          value={form.getValue(key("key_prefix"))}
+          onChange={(v) => form.setValue(key("key_prefix"), v)}
+          restartRequired={restartKeys.has(key("key_prefix"))}
+        />
+        {scope === "public" && (
+          <>
+            <SettingField
+              label="How asset links are authorized"
+              type="select"
+              description="Signed links work with a private bucket and suit most installs."
+              value={urlAuth}
+              onChange={(v) => form.setValue("s3.public_url_auth", v)}
+              options={[
+                { value: "presigned", label: "Signed links (recommended)" },
+                { value: "public", label: "Anyone with the link" },
+                { value: "cloudflare_token", label: "Cloudflare signed token" },
+              ]}
+              restartRequired={restartKeys.has("s3.public_url_auth")}
+            />
+            {urlAuth !== "presigned" && (
+              <SettingField
+                label="Address clients download from"
+                hint="https://cdn.example.com"
+                value={form.getValue("s3.public_read_endpoint")}
+                onChange={(v) => form.setValue("s3.public_read_endpoint", v)}
+                restartRequired={restartKeys.has("s3.public_read_endpoint")}
+              />
+            )}
+            {urlAuth === "cloudflare_token" && (
+              <>
+                {/*
+                  Cloudflare token auth requires this secret, so a clear only
+                  saves alongside a switch back to another mode — the one order
+                  that works, since the field is hidden in those modes.
+                */}
+                <SecretField
+                  label="Token Secret"
+                  value={form.getValue("s3.public_token_secret")}
+                  configured={form.sensitiveConfigured.includes(
+                    "s3.public_token_secret",
+                  )}
+                  onKeep={() => secrets.keepSaved("s3.public_token_secret")}
+                  onClear={() => secrets.clearSaved("s3.public_token_secret")}
+                  cleared={form.isClearStaged("s3.public_token_secret")}
+                  onChange={(v) =>
+                    secrets.setSecret("s3.public_token_secret", v)
+                  }
+                  hint="Signing key configured in Cloudflare"
+                  disabled={secrets.disabled}
+                  restartRequired={restartKeys.has("s3.public_token_secret")}
+                />
+                <SettingField
+                  label="Token query parameter"
+                  description="Usually verify."
+                  value={form.getValue("s3.public_token_param") || "verify"}
+                  onChange={(v) => form.setValue("s3.public_token_param", v)}
+                  restartRequired={restartKeys.has("s3.public_token_param")}
+                />
+                <SettingField
+                  label="Link lifetime"
+                  type="number"
+                  unit="seconds"
+                  value={form.getValue("s3.public_token_ttl") || "10800"}
+                  onChange={(v) => form.setValue("s3.public_token_ttl", v)}
+                  restartRequired={restartKeys.has("s3.public_token_ttl")}
+                />
+              </>
+            )}
+          </>
+        )}
+      </AdvancedSection>
+    </FieldGroup>
+  );
+}
+
+function DatabaseGroup({
+  form,
+  restartKeys,
+}: {
+  form: SettingsForm;
+  restartKeys: RestartKeyMatcher;
+}) {
+  const userDBBackend = form.getValue("userdb.backend");
+  const sqlite = userDBBackend === "sqlite";
+  const changed = countDirty(form, DATABASE_KEYS);
+
+  return (
+    <FieldGroup label="Database">
+      <AdvancedSection
+        id="infrastructure.database"
+        count={sqlite ? 4 : 2}
+        forceOpen={changed > 0}
+      >
+        <SettingField
+          label="Maximum Postgres connections"
+          type="number"
+          description="Raise only if the logs show connection-pool waits."
+          value={form.getValue("database.max_connections")}
+          onChange={(v) => form.setValue("database.max_connections", v)}
+          restartRequired={restartKeys.has("database.max_connections")}
+        />
+        <SettingField
+          label="Where per-user data is stored"
+          type="select"
+          description="PostgreSQL is the only supported option."
+          options={USER_DATABASE_BACKEND_OPTIONS}
+          value={userDBBackend}
+          onChange={(v) => form.setValue("userdb.backend", v)}
+          restartRequired={restartKeys.has("userdb.backend")}
+        />
+        {sqlite && (
+          <>
+            <SettingField
+              label="Open files per user"
+              type="number"
+              description="SQLite connections one user database may hold open."
+              value={form.getValue("userdb.pool_max_open")}
+              onChange={(v) => form.setValue("userdb.pool_max_open", v)}
+              restartRequired={restartKeys.has("userdb.pool_max_open")}
+            />
+            <SettingField
+              label="Close idle user databases after"
+              type="duration"
+              description="For example 12h."
+              value={form.getValue("userdb.idle_timeout")}
+              onChange={(v) => form.setValue("userdb.idle_timeout", v)}
+              restartRequired={restartKeys.has("userdb.idle_timeout")}
+            />
+          </>
+        )}
+      </AdvancedSection>
+    </FieldGroup>
+  );
+}
+
+function BucketOverridesEditor({
+  rows,
+  parseError,
+  onChange,
+  onRestore,
+}: {
+  rows: LogRetentionBucketRow[];
+  parseError: string;
+  onChange: (rows: LogRetentionBucketRow[]) => void;
+  onRestore: () => void;
+}) {
+  function edit(
+    id: string,
+    field: keyof LogRetentionBucketPolicy,
+    value: string,
+  ) {
+    onChange(updateBucketRow(rows, id, field, value));
+  }
+
+  return (
+    <div className="space-y-4 py-3.5">
+      <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-start">
+        <div className="min-w-0">
+          <h4 className="text-sm font-medium">Per-area limits</h4>
+          <p className="text-muted-foreground mt-1 text-xs">
+            A limit of 0 turns that rule off.
+          </p>
+        </div>
+        <div className="flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center">
+          <Button type="button" size="sm" variant="outline" onClick={onRestore}>
+            <RotateCcw className="size-4" />
+            Restore Recommended Rules
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            onClick={() => onChange(appendBucketRow(rows))}
+          >
+            <Plus className="size-4" />
+            Add Rule
+          </Button>
+        </div>
+      </div>
+
+      {parseError ? (
+        <div className="border-warning/30 bg-warning/10 text-warning rounded-[1rem] border px-3 py-2 text-sm">
+          The saved rules could not be read. The editor loaded the recommended
+          rules so you can recover cleanly. Details: {parseError}
+        </div>
+      ) : null}
+
+      <div className="border-border/70 overflow-x-auto rounded-[1rem] border">
+        <table className="w-full border-collapse text-sm">
+          <thead className="bg-muted/40 text-left">
+            <tr>
+              <th className="px-3 py-2 font-medium">Component</th>
+              <th className="px-3 py-2 font-medium">Level</th>
+              <th className="px-3 py-2 font-medium">Days</th>
+              <th className="px-3 py-2 font-medium">Max rows</th>
+              <th className="px-3 py-2 font-medium">Max size (MB)</th>
+              <th className="w-[60px] px-3 py-2 font-medium"> </th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={6}
+                  className="text-muted-foreground px-3 py-6 text-center"
+                >
+                  No per-area rules configured.
+                </td>
+              </tr>
+            ) : (
+              rows.map((row) => (
+                <tr key={row.id} className="border-t">
+                  <td className="px-3 py-2">
+                    <Input
+                      value={row.component}
+                      onChange={(event) =>
+                        edit(row.id, "component", event.target.value)
+                      }
+                      placeholder="metadata"
+                      aria-label={`Component for rule ${row.id}`}
+                    />
+                  </td>
+                  <td className="px-3 py-2">
+                    <Select
+                      value={row.level}
+                      onValueChange={(value) => edit(row.id, "level", value)}
+                    >
+                      <SelectTrigger className="w-[120px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {LOG_LEVEL_OPTIONS.map((level) => (
+                          <SelectItem key={level} value={level}>
+                            {level}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </td>
+                  <td className="px-3 py-2">
+                    <Input
+                      type="number"
+                      min="0"
+                      value={String(row.retention_days)}
+                      onChange={(event) =>
+                        edit(row.id, "retention_days", event.target.value)
+                      }
+                      className="w-[110px]"
+                      aria-label={`Days for rule ${row.id}`}
+                    />
+                  </td>
+                  <td className="px-3 py-2">
+                    <Input
+                      type="number"
+                      min="0"
+                      value={String(row.max_rows)}
+                      onChange={(event) =>
+                        edit(row.id, "max_rows", event.target.value)
+                      }
+                      className="w-[140px]"
+                      aria-label={`Max rows for rule ${row.id}`}
+                    />
+                  </td>
+                  <td className="px-3 py-2">
+                    <Input
+                      type="number"
+                      min="0"
+                      value={String(row.max_size_mb)}
+                      onChange={(event) =>
+                        edit(row.id, "max_size_mb", event.target.value)
+                      }
+                      className="w-[140px]"
+                      aria-label={`Max size for rule ${row.id}`}
+                    />
+                  </td>
+                  <td className="px-3 py-2 text-right">
+                    <Button
+                      type="button"
+                      size="icon-sm"
+                      variant="outline"
+                      onClick={() => onChange(removeBucketRow(rows, row.id))}
+                      aria-label={`Remove ${row.component || "bucket"} rule`}
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function LogsGroup({
+  form,
+  restartKeys,
+}: {
+  form: SettingsForm;
+  restartKeys: RestartKeyMatcher;
+}) {
+  // The bucket rules are one JSON setting edited as a table, so the rows live
+  // here while they are dirty and re-hydrate from the saved value otherwise.
+  const [draftRows, setDraftRows] = useState<LogRetentionBucketRow[] | null>(
+    null,
+  );
+  const raw = form.getValue(OPSLOG_BUCKET_POLICIES_KEY);
+  const bucketDirty = form.isDirty(OPSLOG_BUCKET_POLICIES_KEY);
+  const hydrated = useMemo(() => bucketRowsFromRaw(raw), [raw]);
+  // A stale draft can never be shown: it is only reachable while the key is
+  // dirty, and the only thing that marks it dirty also sets the draft.
+  const rows = bucketDirty && draftRows ? draftRows : hydrated.rows;
+  const parseError = bucketDirty ? "" : hydrated.error;
+  const advancedChanged = countDirty(form, LOG_ADVANCED_KEYS);
+
+  function commitRows(next: LogRetentionBucketRow[]) {
+    setDraftRows(next);
+    form.setValue(OPSLOG_BUCKET_POLICIES_KEY, serializeBucketRows(next));
+  }
+
+  return (
+    <FieldGroup label="Logs">
+      <SettingField
+        label="Delete log entries older than"
+        type="number"
+        unit="days"
+        value={form.getValue(OPSLOG_RETENTION_DAYS_KEY)}
+        onChange={(v) => form.setValue(OPSLOG_RETENTION_DAYS_KEY, v)}
+        restartRequired={restartKeys.has(OPSLOG_RETENTION_DAYS_KEY)}
+      />
+      <SettingField
+        label="Maximum log entries"
+        type="number"
+        value={form.getValue(OPSLOG_MAX_ROWS_KEY)}
+        onChange={(v) => form.setValue(OPSLOG_MAX_ROWS_KEY, v)}
+        restartRequired={restartKeys.has(OPSLOG_MAX_ROWS_KEY)}
+      />
+      <SettingField
+        label="Maximum log size"
+        type="number"
+        unit="MB"
+        value={form.getValue(OPSLOG_MAX_SIZE_MB_KEY)}
+        onChange={(v) => form.setValue(OPSLOG_MAX_SIZE_MB_KEY, v)}
+        restartRequired={restartKeys.has(OPSLOG_MAX_SIZE_MB_KEY)}
+      />
+
+      <AdvancedSection
+        id="infrastructure.logs"
+        count={LOG_ADVANCED_KEYS.length}
+        forceOpen={advancedChanged > 0}
+      >
+        <SettingsSubheading>Permission checks</SettingsSubheading>
+        <SettingField
+          label="Delete permission records older than"
+          type="number"
+          unit="days"
+          value={form.getValue("policy.decision_log_retention_days")}
+          onChange={(v) =>
+            form.setValue("policy.decision_log_retention_days", v)
+          }
+          restartRequired={restartKeys.has(
+            "policy.decision_log_retention_days",
+          )}
+        />
+        <SettingField
+          label="How much to record"
+          type="select"
+          description="Full also stores a sample of each request."
+          value={form.getValue("policy.decision_log_verbosity") || "digest"}
+          onChange={(v) => form.setValue("policy.decision_log_verbosity", v)}
+          options={[
+            { value: "digest", label: "Summary" },
+            { value: "verbose", label: "Full" },
+          ]}
+          restartRequired={restartKeys.has("policy.decision_log_verbosity")}
+        />
+        <SettingField
+          label="Record one allowed check in every"
+          type="number"
+          description="Denials and errors are always recorded."
+          value={form.getValue("policy.decision_log_scope_sample_rate")}
+          onChange={(v) =>
+            form.setValue("policy.decision_log_scope_sample_rate", v)
+          }
+          restartRequired={restartKeys.has(
+            "policy.decision_log_scope_sample_rate",
+          )}
+        />
+
+        <BucketOverridesEditor
+          rows={rows}
+          parseError={parseError}
+          onChange={commitRows}
+          onRestore={() => commitRows(recommendedBucketRows())}
+        />
+      </AdvancedSection>
+    </FieldGroup>
+  );
+}
+
+export default function InfrastructureSettings() {
+  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
+  const restartKeys = useRestartKeys();
+  const [saveInProgress, setSaveInProgress] = useState(false);
+  const saveInProgressRef = useRef(false);
+
+  const secrets: SecretEditors = {
+    keepSaved: (key) => {
+      if (saveInProgressRef.current) return;
+      form.resetValue(key);
+    },
+    clearSaved: (key) => {
+      if (saveInProgressRef.current) return;
+      form.setValue(key, "");
+    },
+    setSecret: (key, value) => {
+      if (saveInProgressRef.current) return;
+      form.setValue(key, value);
+    },
+    disabled: form.isSaving || saveInProgress,
+  };
+
+  async function handleSave() {
+    if (saveInProgressRef.current) return;
+    saveInProgressRef.current = true;
+    setSaveInProgress(true);
+    try {
+      await form.save();
+    } catch {
+      // The mutation reports the error; staged credential drafts stay for retry.
+    } finally {
+      saveInProgressRef.current = false;
+      setSaveInProgress(false);
+    }
+  }
+
+  function handleDiscard() {
+    if (saveInProgressRef.current) return;
+    form.discard();
+  }
+
+  if (form.sensitiveStatusError) {
+    return (
+      <div
+        className="flex items-start gap-3 rounded-xl border border-red-500/20 bg-red-500/5 p-4"
+        role="alert"
+      >
+        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-500" />
+        <div>
+          <p className="text-sm font-medium">
+            Protected credential status is unavailable
+          </p>
+          <p className="text-muted-foreground mt-1 text-xs">
+            Reload this page before editing infrastructure settings.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (form.isLoading || !form.sensitiveStatusReady)
+    return (
+      <div className="space-y-6" role="status" aria-label="Loading settings">
+        <Skeleton className="h-8 w-48" />
+        <div className="space-y-4">
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+        <span className="sr-only">Loading settings</span>
+      </div>
+    );
+
+  return (
+    <div className="flex h-full flex-col">
+      <SettingsPageHeader title="Storage & Database" className="mb-2" />
+      <p className="text-muted-foreground mb-6 text-sm">
+        Changes on this page apply after a restart.
+      </p>
+
+      <RestartAllProvider>
+        <div className="flex-1 space-y-5">
+          <RedisGroup form={form} restartKeys={restartKeys} secrets={secrets} />
+          <S3Group
+            form={form}
+            restartKeys={restartKeys}
+            secrets={secrets}
+            scope="public"
+            label="Public storage"
+            checkKind="s3_public"
+          />
+          <S3Group
+            form={form}
+            restartKeys={restartKeys}
+            secrets={secrets}
+            scope="private"
+            label="Private storage"
+            checkKind="s3_private"
+          />
+          <DatabaseGroup form={form} restartKeys={restartKeys} />
+          <LogsGroup form={form} restartKeys={restartKeys} />
+        </div>
+      </RestartAllProvider>
+
+      <SaveBar
+        dirtyCount={form.dirtyCount}
+        onSave={handleSave}
+        onDiscard={handleDiscard}
+        isSaving={form.isSaving || saveInProgress}
+      />
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/IntegrationsSettings.tsx b/web/src/pages/admin-settings/IntegrationsSettings.tsx
deleted file mode 100644
index 1d6b76f0a..000000000
--- a/web/src/pages/admin-settings/IntegrationsSettings.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import { useState } from "react";
-import { toast } from "sonner";
-import type { ConnectionCheckResponse } from "@/api/types";
-import { ConnectionCheckAction } from "@/components/admin/ConnectionCheckAction";
-import {
-  useAdminSensitiveStatus,
-  useCheckAdminSettingsConnection,
-  useUpdateServerSettings,
-} from "@/hooks/queries/admin/settings";
-
-import { Button } from "@/components/ui/button";
-import { CredentialStatus } from "./CredentialStatus";
-import { SettingField } from "./SettingField";
-
-import { Check, Loader2, RotateCcw, Save, X } from "lucide-react";
-function MDBListCredentialCard() {
-  const { data: sensitive } = useAdminSensitiveStatus();
-  const updateSettings = useUpdateServerSettings();
-  const checkConnection = useCheckAdminSettingsConnection();
-  const [apiKey, setApiKey] = useState("");
-  const [confirmClear, setConfirmClear] = useState(false);
-  const [connectionResult, setConnectionResult] =
-    useState<ConnectionCheckResponse | null>(null);
-  const configured = new Set(sensitive?.configured ?? []).has(
-    "mdblist.api_key",
-  );
-
-  async function save() {
-    if (apiKey.trim() === "") {
-      toast.info("No MDBList API key change to save.");
-      return;
-    }
-    try {
-      await updateSettings.mutateAsync({ "mdblist.api_key": apiKey });
-      setApiKey("");
-      setConnectionResult(null);
-      toast.success("MDBList API key saved");
-    } catch {
-      // The mutation reports the API error.
-    }
-  }
-
-  async function clearKey() {
-    try {
-      await updateSettings.mutateAsync({ "mdblist.api_key": "" });
-      setApiKey("");
-      setConfirmClear(false);
-      setConnectionResult(null);
-      toast.success("MDBList API key cleared");
-    } catch {
-      // The mutation reports the API error.
-    }
-  }
-
-  async function testKey() {
-    try {
-      setConnectionResult(
-        await checkConnection.mutateAsync({
-          kind: "mdblist",
-          body: {
-            values: { "mdblist.api_key": apiKey },
-            dirty_keys: apiKey.trim() === "" ? [] : ["mdblist.api_key"],
-          },
-        }),
-      );
-    } catch (error) {
-      setConnectionResult({
-        success: false,
-        message:
-          error instanceof Error ? error.message : "Connection check failed.",
-      });
-    }
-  }
-
-  return (
-    <fieldset
-      disabled={updateSettings.isPending || checkConnection.isPending}
-      className="border-border bg-surface max-w-2xl rounded-lg border px-5 py-4"
-    >
-      <div className="mb-3 flex items-center justify-between gap-3">
-        <div>
-          <h3 className="text-sm font-semibold">MDBList</h3>
-          <p className="text-muted-foreground text-xs">
-            Enables list search/browse when users add MDBList collections.
-            Importing a list by URL works without a key — only discovery
-            requires one. Get a free key at{" "}
-            <a
-              href="https://mdblist.com/preferences/#api"
-              target="_blank"
-              rel="noreferrer"
-              className="underline"
-            >
-              mdblist.com/preferences
-            </a>
-            .
-          </p>
-        </div>
-        <CredentialStatus configured={configured} />
-      </div>
-      <SettingField
-        label="API Key"
-        type="password"
-        value={apiKey}
-        onChange={setApiKey}
-        sensitiveConfigured={configured}
-        hint="Leave blank to keep the current value."
-      />
-      <div className="flex flex-wrap items-center gap-2">
-        <Button
-          type="button"
-          onClick={() => void save()}
-          disabled={updateSettings.isPending}
-        >
-          {updateSettings.isPending ? (
-            <Loader2 className="animate-spin" />
-          ) : (
-            <Save />
-          )}
-          {updateSettings.isPending ? "Saving..." : "Save MDBList API Key"}
-        </Button>
-        {configured && !confirmClear && (
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => setConfirmClear(true)}
-          >
-            <RotateCcw />
-            Clear API key
-          </Button>
-        )}
-        {confirmClear && (
-          <>
-            <span className="text-muted-foreground text-xs">
-              Disable MDBList discovery?
-            </span>
-            <Button
-              type="button"
-              variant="destructive"
-              onClick={() => void clearKey()}
-              disabled={updateSettings.isPending}
-            >
-              <Check />
-              Confirm clear
-            </Button>
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={() => setConfirmClear(false)}
-            >
-              <X />
-              Cancel
-            </Button>
-          </>
-        )}
-      </div>
-      <ConnectionCheckAction
-        onClick={() => void testKey()}
-        result={connectionResult}
-        isPending={checkConnection.isPending}
-        disabled={
-          updateSettings.isPending || (!configured && apiKey.trim() === "")
-        }
-      />
-      <p className="text-muted-foreground text-xs">
-        Test Connection uses the key entered above, or the saved key when the
-        field is blank.
-      </p>
-    </fieldset>
-  );
-}
-
-export default function IntegrationsSettings() {
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Integrations</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          API keys for external services. Watch provider and subtitle
-          credentials have their own pages in the sidebar.
-        </p>
-      </div>
-
-      <MDBListCredentialCard />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/IntroSettings.tsx b/web/src/pages/admin-settings/IntroSettings.tsx
deleted file mode 100644
index 1f895cd6e..000000000
--- a/web/src/pages/admin-settings/IntroSettings.tsx
+++ /dev/null
@@ -1,496 +0,0 @@
-import { useMemo, useState } from "react";
-import { Link } from "react-router";
-import { Loader2, Play, RefreshCw, Save } from "lucide-react";
-import { toast } from "sonner";
-import type { MarkerProviderConfig, TaskInfo } from "@/api/types";
-import { TaskStatusBadge } from "@/components/admin/TaskStatusBadge";
-import { useEventChannel } from "@/components/realtimeEventsContext";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useTasks, useRunTask } from "@/hooks/queries/admin/tasks";
-import {
-  useMarkerProviders,
-  useUpdateMarkerProvider,
-  useValidateMarkerProvider,
-} from "@/hooks/queries/admin/markers";
-import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { FieldGroup } from "./FieldGroup";
-import { SaveBar } from "./SaveBar";
-import { SettingField } from "./SettingField";
-import { formatDateTime } from "@/lib/datetime";
-
-const INTRO_SETTING_KEYS = ["markers.mode", "markers.lazy_playback"];
-const INTEGER_INPUT_PATTERN = /^[+-]?\d+$/;
-
-function formatRate(value: number) {
-  return `${Math.round(value * 100)}%`;
-}
-
-function ProviderSettingsCard() {
-  const providers = useMarkerProviders();
-
-  if (providers.isLoading) {
-    return (
-      <div className="border-border bg-surface max-w-2xl rounded-lg border px-5 py-4">
-        <Skeleton className="h-5 w-40" />
-        <div className="mt-4 space-y-3">
-          <Skeleton className="h-9 w-full" />
-          <Skeleton className="h-9 w-full" />
-          <Skeleton className="h-9 w-full" />
-        </div>
-      </div>
-    );
-  }
-
-  const providerList = providers.data?.providers ?? [];
-  if (providerList.length === 0) {
-    return (
-      <div className="border-border bg-surface max-w-2xl rounded-lg border px-5 py-4">
-        <h3 className="text-sm font-semibold">Marker Providers</h3>
-        <p className="text-muted-foreground mt-2 text-sm">
-          No marker provider plugins are installed or enabled.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-2xl space-y-4">
-      {providerList.map((provider) => (
-        <ProviderSettingsForm
-          key={[
-            provider.provider,
-            provider.fetch_enabled,
-            provider.fetch_priority,
-            provider.contribute_enabled,
-            provider.contribute_auto_local,
-            provider.contribute_min_confidence,
-            provider.is_submitter,
-          ].join(":")}
-          provider={provider}
-        />
-      ))}
-    </div>
-  );
-}
-
-function ProviderSettingsForm({
-  provider,
-}: {
-  provider: MarkerProviderConfig;
-}) {
-  const updateProvider = useUpdateMarkerProvider();
-  const validateProvider = useValidateMarkerProvider();
-  const displayName = provider.display_name || provider.provider;
-  const minConfidenceID = `marker-min-confidence-${provider.provider.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
-  const priorityID = `marker-priority-${provider.provider.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
-  const [fetchEnabled, setFetchEnabled] = useState(provider.fetch_enabled);
-  const [fetchPriority, setFetchPriority] = useState(
-    String(provider.fetch_priority),
-  );
-  const [contributeEnabled, setContributeEnabled] = useState(
-    provider.contribute_enabled,
-  );
-  const [autoLocal, setAutoLocal] = useState(provider.contribute_auto_local);
-  const [minConfidence, setMinConfidence] = useState(
-    String(provider.contribute_min_confidence ?? 0.95),
-  );
-
-  const parsedMinConfidence = Number.parseFloat(minConfidence);
-  const confidenceValid =
-    Number.isFinite(parsedMinConfidence) &&
-    parsedMinConfidence >= 0 &&
-    parsedMinConfidence <= 1;
-  const fetchPriorityInput = fetchPriority.trim();
-  const parsedFetchPriority = Number(fetchPriorityInput);
-  const priorityValid =
-    INTEGER_INPUT_PATTERN.test(fetchPriorityInput) &&
-    Number.isInteger(parsedFetchPriority);
-  const dirty =
-    provider.fetch_enabled !== fetchEnabled ||
-    provider.fetch_priority !== parsedFetchPriority ||
-    provider.contribute_enabled !== contributeEnabled ||
-    provider.contribute_auto_local !== autoLocal ||
-    provider.contribute_min_confidence !== parsedMinConfidence;
-
-  function save() {
-    if (!priorityValid) {
-      toast.error("Fetch priority must be a whole number.");
-      return;
-    }
-    if (!confidenceValid) {
-      toast.error("Minimum confidence must be between 0 and 1.");
-      return;
-    }
-
-    updateProvider.mutate({
-      provider: provider.provider,
-      patch: {
-        fetch_enabled: fetchEnabled,
-        fetch_priority: parsedFetchPriority,
-        contribute_enabled: contributeEnabled,
-        contribute_auto_local: contributeEnabled && autoLocal,
-        contribute_min_confidence: parsedMinConfidence,
-      },
-    });
-  }
-
-  function validate() {
-    validateProvider.mutate({ provider: provider.provider, displayName });
-  }
-
-  const validation = validateProvider.data;
-
-  return (
-    <fieldset
-      disabled={updateProvider.isPending || validateProvider.isPending}
-      className="border-border bg-surface max-w-2xl rounded-lg border px-5 py-4"
-    >
-      <div className="mb-3 flex flex-col gap-1">
-        <h3 className="text-sm font-semibold">{displayName}</h3>
-        <p className="text-muted-foreground mt-1 text-xs leading-relaxed">
-          Controls online marker lookup and whether locally generated markers
-          can be submitted.
-        </p>
-        <p className="text-muted-foreground text-xs">
-          {provider.source_type === "plugin" && provider.plugin_id
-            ? `Plugin ${provider.plugin_id} / ${provider.capability_id || provider.provider}`
-            : provider.provider}
-        </p>
-      </div>
-
-      <div className="divide-border divide-y">
-        <SettingField
-          label="Use for Online Marker Lookup"
-          type="toggle"
-          value={fetchEnabled ? "true" : "false"}
-          onChange={(value) => setFetchEnabled(value === "true")}
-        />
-        <div className="space-y-1 py-2">
-          <Label htmlFor={priorityID}>Fetch Priority</Label>
-          <Input
-            id={priorityID}
-            type="number"
-            value={fetchPriority}
-            step={1}
-            onChange={(event) => setFetchPriority(event.target.value)}
-            className="w-full sm:w-40"
-            aria-invalid={!priorityValid}
-          />
-          <p className="text-muted-foreground text-xs">
-            Lower numbers win when providers overlap.
-          </p>
-        </div>
-        <SettingField
-          label="Allow Contributions"
-          type="toggle"
-          value={contributeEnabled ? "true" : "false"}
-          onChange={(value) => {
-            const next = value === "true";
-            setContributeEnabled(next);
-            if (!next) setAutoLocal(false);
-          }}
-          disabled={!provider.is_submitter}
-        />
-        <SettingField
-          label="Auto-submit Local Markers"
-          type="toggle"
-          value={autoLocal ? "true" : "false"}
-          onChange={(value) => setAutoLocal(value === "true")}
-          disabled={!provider.is_submitter || !contributeEnabled}
-          hint="Scheduled contribution only sends scanner markers that meet the confidence floor."
-        />
-        <div className="space-y-1 py-2">
-          <Label htmlFor={minConfidenceID}>Minimum Confidence</Label>
-          <Input
-            id={minConfidenceID}
-            type="number"
-            value={minConfidence}
-            min={0}
-            max={1}
-            step={0.01}
-            onChange={(event) => setMinConfidence(event.target.value)}
-            className="w-full sm:w-40"
-            aria-invalid={!confidenceValid}
-            disabled={!provider.is_submitter}
-          />
-          <p className="text-muted-foreground text-xs">
-            Use a decimal from 0 to 1. The default recommendation is 0.95.
-          </p>
-        </div>
-      </div>
-
-      {validation && (
-        <div className="border-border bg-muted/20 mt-4 rounded-md border px-3 py-3">
-          {validation.valid && validation.stats ? (
-            <dl className="grid gap-x-6 gap-y-2 text-xs sm:grid-cols-2">
-              <div className="flex justify-between gap-3">
-                <dt className="text-muted-foreground">Total submissions</dt>
-                <dd className="font-medium">{validation.stats.total}</dd>
-              </div>
-              <div className="flex justify-between gap-3">
-                <dt className="text-muted-foreground">Accepted</dt>
-                <dd className="font-medium">{validation.stats.accepted}</dd>
-              </div>
-              <div className="flex justify-between gap-3">
-                <dt className="text-muted-foreground">Pending</dt>
-                <dd className="font-medium">{validation.stats.pending}</dd>
-              </div>
-              <div className="flex justify-between gap-3">
-                <dt className="text-muted-foreground">Rejected</dt>
-                <dd className="font-medium">{validation.stats.rejected}</dd>
-              </div>
-              <div className="flex justify-between gap-3">
-                <dt className="text-muted-foreground">Acceptance rate</dt>
-                <dd className="font-medium">
-                  {formatRate(validation.stats.acceptance_rate)}
-                </dd>
-              </div>
-              <div className="flex justify-between gap-3">
-                <dt className="text-muted-foreground">Best streak</dt>
-                <dd className="font-medium">{validation.stats.best_streak}</dd>
-              </div>
-            </dl>
-          ) : (
-            <p className="text-destructive text-xs">
-              {validation.error || "Validation failed."}
-            </p>
-          )}
-        </div>
-      )}
-
-      <div className="mt-4 flex flex-col justify-end gap-2 sm:flex-row">
-        {provider.is_submitter && (
-          <Button
-            type="button"
-            size="sm"
-            variant="outline"
-            onClick={validate}
-            disabled={validateProvider.isPending}
-          >
-            {validateProvider.isPending ? (
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-            ) : (
-              <RefreshCw className="h-3.5 w-3.5" />
-            )}
-            Validate
-          </Button>
-        )}
-        <Button
-          type="button"
-          size="sm"
-          onClick={save}
-          disabled={
-            !dirty ||
-            !priorityValid ||
-            !confidenceValid ||
-            updateProvider.isPending
-          }
-        >
-          {updateProvider.isPending ? (
-            <Loader2 className="animate-spin" />
-          ) : (
-            <Save />
-          )}
-          {updateProvider.isPending ? "Saving..." : "Save Provider Settings"}
-        </Button>
-      </div>
-    </fieldset>
-  );
-}
-
-function numberFromResultData(
-  data: Record<string, unknown> | undefined,
-  key: string,
-) {
-  const value = data?.[key];
-  return typeof value === "number" && Number.isFinite(value) ? value : null;
-}
-
-function formatTaskResult(task: TaskInfo | undefined) {
-  const result = task?.last_execution;
-  if (!result) return "Never run";
-
-  const data = result.result_data;
-  if (task.key === "contribute_markers") {
-    const submitted = numberFromResultData(data, "submitted");
-    const skipped = numberFromResultData(data, "skipped");
-    const failed = numberFromResultData(data, "failed");
-    const retryAfter = numberFromResultData(data, "retry_after_seconds");
-    const parts = [
-      submitted != null ? `${submitted} submitted` : null,
-      skipped != null ? `${skipped} skipped` : null,
-      failed != null ? `${failed} failed` : null,
-      retryAfter != null ? `retry after ${retryAfter}s` : null,
-    ].filter(Boolean);
-    if (parts.length > 0) return parts.join(", ");
-  }
-
-  return formatDateTime(result.completed_at);
-}
-
-function TaskActionRow({
-  task,
-  fallbackName,
-  fallbackDescription,
-  onRun,
-  pending,
-}: {
-  task: TaskInfo | undefined;
-  fallbackName: string;
-  fallbackDescription: string;
-  onRun: () => void;
-  pending: boolean;
-}) {
-  const key = task?.key;
-  const running = task?.state === "running" || task?.state === "cancelling";
-
-  return (
-    <div className="border-border flex flex-col gap-3 border-b py-4 last:border-b-0 sm:flex-row sm:items-center">
-      <div className="min-w-0 flex-1">
-        <div className="flex flex-wrap items-center gap-2">
-          <h3 className="text-sm font-semibold">
-            {task?.name ?? fallbackName}
-          </h3>
-          {task?.last_execution && (
-            <TaskStatusBadge result={task.last_execution} />
-          )}
-        </div>
-        <p className="text-muted-foreground mt-1 text-xs leading-relaxed">
-          {task?.description ?? fallbackDescription}
-        </p>
-        <p className="text-muted-foreground mt-1 text-xs">
-          Last result: {formatTaskResult(task)}
-        </p>
-      </div>
-
-      <div className="flex flex-col gap-2 sm:flex-row">
-        {key && (
-          <Button variant="outline" size="sm" asChild>
-            <Link to={`/admin/tasks/${key}`}>History</Link>
-          </Button>
-        )}
-        <Button
-          type="button"
-          size="sm"
-          onClick={onRun}
-          disabled={!task || running || pending}
-        >
-          {pending ? (
-            <Loader2 className="h-3.5 w-3.5 animate-spin" />
-          ) : (
-            <Play className="h-3.5 w-3.5" />
-          )}
-          {running ? "Running" : "Run Now"}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function IntroTasksCard() {
-  useEventChannel("tasks");
-  const { data: tasks } = useTasks();
-  const runTask = useRunTask();
-  const [pendingTask, setPendingTask] = useState<string | null>(null);
-
-  const detectTask = tasks?.find((task) => task.key === "detect_intro_markers");
-  const contributeTask = tasks?.find(
-    (task) => task.key === "contribute_markers",
-  );
-
-  async function run(key: string) {
-    setPendingTask(key);
-    try {
-      await runTask.mutateAsync(key);
-    } finally {
-      setPendingTask(null);
-    }
-  }
-
-  return (
-    <div className="border-border bg-surface max-w-2xl rounded-lg border px-5 py-1">
-      <TaskActionRow
-        task={detectTask}
-        fallbackName="Populate Markers"
-        fallbackDescription="Populates intro and credits markers for opted-in libraries."
-        onRun={() => void run("detect_intro_markers")}
-        pending={pendingTask === "detect_intro_markers"}
-      />
-      <TaskActionRow
-        task={contributeTask}
-        fallbackName="Contribute Markers"
-        fallbackDescription="Submits high-confidence local intro markers to enabled providers."
-        onRun={() => void run("contribute_markers")}
-        pending={pendingTask === "contribute_markers"}
-      />
-    </div>
-  );
-}
-
-export default function IntroSettings() {
-  const form = useSettingsForm({ keys: useMemo(() => INTRO_SETTING_KEYS, []) });
-
-  if (form.isLoading) {
-    return (
-      <div
-        className="space-y-6"
-        role="status"
-        aria-label="Loading intro settings"
-      >
-        <Skeleton className="h-8 w-48" />
-        <Skeleton className="h-24 w-full max-w-2xl" />
-        <Skeleton className="h-40 w-full max-w-2xl" />
-        <span className="sr-only">Loading intro settings</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Intro Markers</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure marker lookup, local marker generation, and provider
-          contribution.
-        </p>
-      </div>
-
-      <div className="flex-1 space-y-6">
-        <FieldGroup label="Marker Lookup">
-          <SettingField
-            label="Mode"
-            type="select"
-            options={[
-              { value: "off", label: "Off" },
-              { value: "local", label: "Local" },
-              { value: "both", label: "Local + Online" },
-              { value: "online", label: "Online Only" },
-            ]}
-            value={form.getValue("markers.mode") || "local"}
-            onChange={(value) => form.setValue("markers.mode", value)}
-          />
-          <SettingField
-            label="Fetch Markers at Playback if Missing"
-            type="toggle"
-            value={form.getValue("markers.lazy_playback") || "false"}
-            onChange={(value) => form.setValue("markers.lazy_playback", value)}
-          />
-        </FieldGroup>
-
-        <ProviderSettingsCard />
-        <IntroTasksCard />
-      </div>
-
-      <SaveBar
-        dirtyCount={form.dirtyCount}
-        onSave={form.save}
-        onDiscard={form.discard}
-        isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
-      />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/InviteCodesTab.test.tsx b/web/src/pages/admin-settings/InviteCodesTab.test.tsx
new file mode 100644
index 000000000..dfa2e1f44
--- /dev/null
+++ b/web/src/pages/admin-settings/InviteCodesTab.test.tsx
@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it, vi } from "vitest";
+
+import InviteCodesTab from "./InviteCodesTab";
+
+const mocks = vi.hoisted(() => ({
+  useAdminServerSettings: vi.fn(),
+}));
+
+vi.mock("@/hooks/queries/admin/inviteCodes", () => ({
+  useAdminInviteCodes: () => ({ data: [], isLoading: false }),
+  useCreateInviteCode: () => ({ mutate: vi.fn(), isPending: false }),
+  useUpdateInviteCode: () => ({ mutate: vi.fn(), isPending: false }),
+  useTopUpInviteCode: () => ({ mutate: vi.fn(), isPending: false }),
+  useDeleteInviteCode: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
+vi.mock("@/hooks/queries/admin/settings", () => ({
+  useAdminServerSettings: (...args: unknown[]) =>
+    mocks.useAdminServerSettings(...args),
+}));
+
+function renderTab() {
+  return render(
+    <MemoryRouter>
+      <InviteCodesTab />
+    </MemoryRouter>,
+  );
+}
+
+describe("InviteCodesTab public-signup status", () => {
+  it("renders nothing signup-status related while settings are loading", () => {
+    mocks.useAdminServerSettings.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+    });
+    renderTab();
+
+    expect(screen.queryByText(/public signups/i)).not.toBeInTheDocument();
+  });
+
+  it("shows a quiet caption when public signups are on", () => {
+    mocks.useAdminServerSettings.mockReturnValue({
+      data: { "signup.enabled": "true" },
+      isLoading: false,
+    });
+    renderTab();
+
+    expect(
+      screen.getByText(/codes only work while public signups are on/i),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(/public signups are off/i),
+    ).not.toBeInTheDocument();
+    const link = screen.getByRole("link", { name: /public signups setting/i });
+    expect(link).toHaveAttribute("href", "/admin/settings/general");
+  });
+
+  it("promotes to a warning callout when public signups are off", () => {
+    mocks.useAdminServerSettings.mockReturnValue({
+      data: { "signup.enabled": "false" },
+      isLoading: false,
+    });
+    renderTab();
+
+    expect(screen.getByText(/public signups are off/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/these codes won't work until you enable them/i),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(/codes only work while public signups are on/i),
+    ).not.toBeInTheDocument();
+    const link = screen.getByRole("link", { name: /public signups setting/i });
+    expect(link).toHaveAttribute("href", "/admin/settings/general");
+  });
+});
diff --git a/web/src/pages/admin-settings/InviteCodesTab.tsx b/web/src/pages/admin-settings/InviteCodesTab.tsx
index 20ca61c3b..55f687bf1 100644
--- a/web/src/pages/admin-settings/InviteCodesTab.tsx
+++ b/web/src/pages/admin-settings/InviteCodesTab.tsx
@@ -8,22 +8,12 @@ import {
   useTopUpInviteCode,
   useDeleteInviteCode,
 } from "@/hooks/queries/admin/inviteCodes";
-import {
-  useAdminServerSettings,
-  useUpdateServerSetting,
-} from "@/hooks/queries/admin/settings";
+import { useAdminServerSettings } from "@/hooks/queries/admin/settings";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import { Switch } from "@/components/ui/switch";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import {
   Table,
   TableBody,
@@ -40,15 +30,23 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Copy, Loader2, Plus, PlusCircle, Trash2 } from "lucide-react";
+import {
+  AlertTriangle,
+  ArrowRight,
+  Copy,
+  Plus,
+  PlusCircle,
+  Trash2,
+} from "lucide-react";
 import { toast } from "sonner";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
 import { formatDate } from "@/lib/datetime";
+import { Link } from "react-router";
 
 export default function InviteCodesTab() {
   const { data: codes = [], isLoading } = useAdminInviteCodes();
-  const { data: settings } = useAdminServerSettings();
-  const updateSetting = useUpdateServerSetting();
+  const { data: serverSettings } = useAdminServerSettings();
+  const signupsEnabled = serverSettings?.["signup.enabled"] === "true";
   const updateCode = useUpdateInviteCode();
   const deleteCode = useDeleteInviteCode();
   const [createOpen, setCreateOpen] = useState(false);
@@ -57,20 +55,6 @@ export default function InviteCodesTab() {
     null,
   );
 
-  const signupEnabled = settings?.["signup.enabled"] === "true";
-
-  function handleToggleSignup(enabled: boolean) {
-    updateSetting.mutate(
-      { key: "signup.enabled", value: enabled ? "true" : "false" },
-      {
-        onSuccess: () =>
-          toast.success(
-            enabled ? "Public signups enabled" : "Public signups disabled",
-          ),
-      },
-    );
-  }
-
   function handleToggleCode(code: InviteCode) {
     updateCode.mutate({ id: code.id, body: { enabled: !code.enabled } });
   }
@@ -80,7 +64,7 @@ export default function InviteCodesTab() {
   }
 
   function handleCopy(text: string) {
-    void navigator.clipboard.writeText(text);
+    navigator.clipboard.writeText(text);
     toast.success("Copied to clipboard");
   }
 
@@ -142,25 +126,36 @@ export default function InviteCodesTab() {
         </Dialog>
       </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Public Signups</CardTitle>
-          <CardDescription>
-            When enabled, users with a valid invite code can create their own
-            accounts.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-center gap-3">
-            <Switch
-              checked={signupEnabled}
-              onCheckedChange={handleToggleSignup}
-              disabled={updateSetting.isPending}
-            />
-            <Label>{signupEnabled ? "Enabled" : "Disabled"}</Label>
+      {serverSettings !== undefined &&
+        (signupsEnabled ? (
+          <p className="text-muted-foreground text-sm">
+            Codes only work while public signups are on.{" "}
+            <Link
+              to="/admin/settings/general"
+              className="text-foreground inline-flex items-center gap-1 font-medium hover:underline"
+            >
+              Public signups setting
+              <ArrowRight className="h-3 w-3" aria-hidden="true" />
+            </Link>
+          </p>
+        ) : (
+          <div className="flex items-start gap-3 rounded-xl border border-amber-500/20 bg-amber-500/5 p-3">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
+            <p className="text-[13px] leading-relaxed">
+              <span className="font-medium text-amber-500">
+                Public signups are off
+              </span>{" "}
+              — these codes won't work until you enable them.{" "}
+              <Link
+                to="/admin/settings/general"
+                className="text-foreground inline-flex items-center gap-1 font-medium hover:underline"
+              >
+                Public signups setting
+                <ArrowRight className="h-3 w-3" aria-hidden="true" />
+              </Link>
+            </p>
           </div>
-        </CardContent>
-      </Card>
+        ))}
 
       <Table>
         <TableHeader>
@@ -309,11 +304,6 @@ function CreateInviteCodeForm({ onClose }: { onClose: () => void }) {
         className="w-full"
         disabled={createMutation.isPending}
       >
-        {createMutation.isPending ? (
-          <Loader2 className="animate-spin" />
-        ) : (
-          <Plus />
-        )}
         {createMutation.isPending ? "Creating..." : "Create"}
       </Button>
     </form>
@@ -361,11 +351,6 @@ function TopUpInviteCodeForm({
         className="w-full"
         disabled={topUpMutation.isPending}
       >
-        {topUpMutation.isPending ? (
-          <Loader2 className="animate-spin" />
-        ) : (
-          <Plus />
-        )}
         {topUpMutation.isPending ? "Adding..." : "Add Uses"}
       </Button>
     </form>
diff --git a/web/src/pages/admin-settings/LibraryMetadataSettings.test.tsx b/web/src/pages/admin-settings/LibraryMetadataSettings.test.tsx
new file mode 100644
index 000000000..df7c59c18
--- /dev/null
+++ b/web/src/pages/admin-settings/LibraryMetadataSettings.test.tsx
@@ -0,0 +1,263 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { MemoryRouter } from "react-router";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import LibraryMetadataSettings from "./LibraryMetadataSettings";
+
+const useSettingsFormMock = vi.fn();
+const useRestartKeysMock = vi.fn(() => new Set<string>());
+const storageAvailableMock = vi.fn(() => true);
+
+vi.mock("@/hooks/useBranding", () => ({
+  useBranding: () => ({ storageAvailable: storageAvailableMock() }),
+}));
+
+vi.mock("@/hooks/useSettingsForm", () => ({
+  useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
+}));
+
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => useRestartKeysMock(),
+}));
+
+vi.mock("@/hooks/queries/admin/settings", () => ({
+  useCheckAdminSettingsConnection: () => ({
+    mutateAsync: vi.fn(),
+    isPending: false,
+  }),
+  useCatalogSearchStatus: () => ({ data: undefined, isLoading: true }),
+}));
+
+vi.mock("@/hooks/queries/admin/tasks", () => ({
+  useTasks: () => ({ data: [] }),
+  useRunTask: () => ({ mutateAsync: vi.fn() }),
+}));
+
+vi.mock("@/components/realtimeEventsContext", () => ({
+  useEventChannel: () => undefined,
+}));
+
+function makeForm(values: Record<string, string>, dirty: string[] = []) {
+  const dirtySet = new Set(dirty);
+  return {
+    isLoading: false,
+    getValue: (key: string) => values[key] ?? "",
+    setValue: vi.fn(),
+    resetValue: vi.fn(),
+    isDirty: (key: string) => dirtySet.has(key),
+    isClearStaged: (key: string) =>
+      dirtySet.has(key) && (values[key] ?? "") === "",
+    dirtyCount: dirtySet.size,
+    save: vi.fn(),
+    discard: vi.fn(),
+    isSaving: false,
+    restartRequired: false,
+    sensitiveConfigured: [] as string[],
+    buildConnectionCheckRequest: vi.fn(() => ({ values: {}, dirty_keys: [] })),
+  };
+}
+
+function render(values: Record<string, string>, dirty: string[] = []) {
+  useSettingsFormMock.mockReturnValue(makeForm(values, dirty));
+  return renderToStaticMarkup(
+    <MemoryRouter>
+      <LibraryMetadataSettings />
+    </MemoryRouter>,
+  );
+}
+
+function text(markup: string): string {
+  const container = document.createElement("div");
+  container.innerHTML = markup;
+  return container.textContent ?? "";
+}
+
+// The toggle is a Radix switch, so reach it through the label association
+// SettingField sets up rather than by scanning the markup for "disabled".
+function toggleDisabled(markup: string, label: string): boolean {
+  const container = document.createElement("div");
+  container.innerHTML = markup;
+  const labelEl = Array.from(container.querySelectorAll("label")).find(
+    (el) => el.textContent?.trim() === label,
+  );
+  if (!labelEl?.htmlFor) throw new Error(`no label found for ${label}`);
+  const control = container.querySelector(`[id="${labelEl.htmlFor}"]`);
+  if (!control) throw new Error(`no control found for ${label}`);
+  return control.hasAttribute("disabled");
+}
+
+describe("LibraryMetadataSettings", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useRestartKeysMock.mockReturnValue(new Set<string>());
+    storageAvailableMock.mockReturnValue(true);
+  });
+
+  it("renders every field group heading", () => {
+    const rendered = text(render({ "catalog.search.provider": "meilisearch" }));
+
+    for (const heading of [
+      "Metadata",
+      "Scanning",
+      "Intro and credits markers",
+      "Search",
+    ]) {
+      expect(rendered).toContain(heading);
+    }
+  });
+
+  it("renders the tab title and the essential controls", () => {
+    const rendered = text(render({ "catalog.search.provider": "postgres" }));
+
+    expect(rendered).toContain("Library & Metadata");
+    expect(rendered).toContain("S3 image caching");
+    expect(rendered).toContain("Find intros and credits");
+    expect(rendered).toContain("Search engine");
+  });
+
+  it("states the CPU cost of local detection and the search fallback guarantee", () => {
+    const rendered = text(render({ "catalog.search.provider": "meilisearch" }));
+
+    expect(rendered).toContain("Detecting on this server utilizes CPU.");
+    expect(rendered).toContain(
+      "Meilisearch tolerates typos but runs as its own service. If it goes down, search falls back to the built-in engine automatically.",
+    );
+  });
+
+  it("offers the Meilisearch connection check as a filled button", () => {
+    const container = document.createElement("div");
+    container.innerHTML = render({ "catalog.search.provider": "meilisearch" });
+
+    const button = Array.from(container.querySelectorAll("button")).find(
+      (el) => el.textContent?.trim() === "Check Connection",
+    );
+
+    expect(button).toBeDefined();
+    // Filled rather than the transparent outline variant, so the control does
+    // not read as flat text inside the group panel.
+    expect(button?.getAttribute("data-variant")).toBe("secondary");
+  });
+
+  it("manages the merged key set of the three tabs it replaces", () => {
+    render({});
+
+    const calls = useSettingsFormMock.mock.calls;
+    const keys: string[] = calls[calls.length - 1]?.[0]?.keys ?? [];
+    expect(keys).toEqual(
+      expect.arrayContaining([
+        "metadata.cache_images",
+        "scanner.workers",
+        "matcher.workers",
+        "matcher.batch_size",
+        "markers.mode",
+        "markers.lazy_playback",
+        "catalog.search.provider",
+        "catalog.search.meilisearch.url",
+        "catalog.search.meilisearch.api_key",
+        "catalog.search.meilisearch.semantic_ratio",
+      ]),
+    );
+    // Hidden tier: still saved through the API, no control on this tab.
+    expect(keys).not.toContain("catalog.search.meilisearch.embedder");
+    expect(keys).not.toContain("catalog.search.meilisearch.binary_quantized");
+    expect(keys).not.toContain("catalog.search.meilisearch.rebuild_batch_size");
+  });
+
+  it("keeps marker behavior and points provider setup at the providers page", () => {
+    const rendered = render({ "catalog.search.provider": "postgres" });
+
+    expect(text(rendered)).toContain("Find intros and credits");
+    // Per-provider configuration moved to Subtitles & Metadata; only the link
+    // to it is left here.
+    expect(text(rendered)).not.toContain("Use for online marker lookup");
+    expect(text(rendered)).not.toContain("Minimum confidence");
+    expect(text(rendered)).toContain("Marker providers");
+    expect(rendered).toContain("/admin/settings/providers");
+  });
+
+  it("keeps advanced settings collapsed but expands a section holding a staged edit", () => {
+    expect(
+      text(render({ "catalog.search.provider": "postgres" })),
+    ).not.toContain("Scanner workers");
+
+    expect(
+      text(
+        render({ "catalog.search.provider": "postgres" }, ["scanner.workers"]),
+      ),
+    ).toContain("Scanner workers");
+  });
+
+  it("hides Meilisearch connection fields until that engine is selected", () => {
+    expect(
+      text(render({ "catalog.search.provider": "postgres" })),
+    ).not.toContain("Meilisearch URL");
+
+    expect(
+      text(render({ "catalog.search.provider": "meilisearch" })),
+    ).toContain("Meilisearch URL");
+  });
+
+  it("leaves S3 image caching editable and unannotated while public storage is active", () => {
+    const rendered = render({ "s3.public_bucket": "silo-public" });
+
+    expect(text(rendered)).toContain("S3 image caching");
+    expect(text(rendered)).not.toContain(
+      "Restart the server for image caching to start",
+    );
+    expect(text(rendered)).not.toContain(
+      "Image caching needs a public S3 bucket",
+    );
+    expect(toggleDisabled(rendered, "S3 image caching")).toBe(false);
+  });
+
+  it("keeps S3 image caching settable when the bucket is saved but not active yet", () => {
+    storageAvailableMock.mockReturnValue(false);
+
+    const rendered = render({ "s3.public_bucket": "silo-public" });
+
+    expect(text(rendered)).toContain(
+      "Restart the server for image caching to start",
+    );
+    expect(toggleDisabled(rendered, "S3 image caching")).toBe(false);
+  });
+
+  it("disables S3 image caching and links to Infrastructure when no bucket is configured", () => {
+    storageAvailableMock.mockReturnValue(false);
+
+    const rendered = render({});
+
+    expect(text(rendered)).toContain("Image caching needs a public S3 bucket");
+    expect(rendered).toContain("/admin/settings/infrastructure");
+    expect(toggleDisabled(rendered, "S3 image caching")).toBe(true);
+  });
+
+  it("still allows switching S3 image caching off when the bucket went away", () => {
+    storageAvailableMock.mockReturnValue(false);
+
+    const rendered = render({ "metadata.cache_images": "true" });
+
+    expect(text(rendered)).toContain("Image caching needs a public S3 bucket");
+    expect(toggleDisabled(rendered, "S3 image caching")).toBe(false);
+  });
+
+  it("says it once for a group where every field needs a restart", () => {
+    useRestartKeysMock.mockReturnValue(new Set(["metadata.cache_images"]));
+
+    const rendered = render({ "catalog.search.provider": "postgres" });
+
+    expect(text(rendered)).toContain("Changes apply after a restart");
+    // The group says it, so the field inside drops its own badge.
+    expect(rendered).not.toContain("Takes effect after a server restart");
+  });
+
+  it("marks a restart-required field with the restart badge inside a mixed group", () => {
+    useRestartKeysMock.mockReturnValue(new Set(["scanner.workers"]));
+
+    const rendered = render({ "catalog.search.provider": "postgres" }, [
+      "scanner.workers",
+    ]);
+
+    expect(rendered).toContain("Takes effect after a server restart");
+    expect(text(rendered)).not.toContain("Changes apply after a restart");
+  });
+});
diff --git a/web/src/pages/admin-settings/LibraryMetadataSettings.tsx b/web/src/pages/admin-settings/LibraryMetadataSettings.tsx
new file mode 100644
index 000000000..4cf6659e9
--- /dev/null
+++ b/web/src/pages/admin-settings/LibraryMetadataSettings.tsx
@@ -0,0 +1,435 @@
+import { useMemo, useState } from "react";
+import { AlertTriangle, ArrowRight } from "lucide-react";
+import { Link } from "react-router";
+
+import type { ConnectionCheckResponse } from "@/api/types";
+import { ConnectionCheckAction } from "@/components/admin/ConnectionCheckAction";
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+import { SecretField } from "@/components/settings/SecretField";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useBranding } from "@/hooks/useBranding";
+import { useCheckAdminSettingsConnection } from "@/hooks/queries/admin/settings";
+import { useRestartKeys } from "@/hooks/useRestartKeys";
+import { useSettingsForm } from "@/hooks/useSettingsForm";
+import { FieldGroup } from "./FieldGroup";
+import { MarkerTasksCard } from "./MarkerTasksCard";
+import { SaveBar } from "./SaveBar";
+import { SearchStatusPanel } from "./SearchStatusPanel";
+import { SettingField } from "./SettingField";
+
+const CACHE_IMAGES_KEY = "metadata.cache_images";
+
+const METADATA_KEYS = [CACHE_IMAGES_KEY];
+
+const SCANNER_KEYS = [
+  "scanner.workers",
+  "matcher.workers",
+  "matcher.batch_size",
+];
+
+const MARKER_KEYS = ["markers.mode", "markers.lazy_playback"];
+
+const MEILI_URL_KEY = "catalog.search.meilisearch.url";
+const MEILI_API_KEY = "catalog.search.meilisearch.api_key";
+
+const MEILI_ADVANCED_KEYS = [
+  "catalog.search.meilisearch.index",
+  "catalog.search.meilisearch.timeout_ms",
+  "catalog.search.meilisearch.matching_strategy",
+  "catalog.search.meilisearch.sync_batch_size",
+  "catalog.search.meilisearch.semantic_enabled",
+  "catalog.search.meilisearch.semantic_ratio",
+];
+
+const MEILI_KEYS = [MEILI_URL_KEY, MEILI_API_KEY, ...MEILI_ADVANCED_KEYS];
+
+const SEARCH_KEYS = ["catalog.search.provider", ...MEILI_KEYS];
+
+// Hidden tier: still saved and readable through the settings API, deliberately
+// without a control here because the defaults are right for every deployment we
+// support — catalog.search.meilisearch.{rebuild_batch_size,
+// rebuild_task_queue_depth,index_types,embedder,binary_quantized}.
+const KEYS = [
+  ...METADATA_KEYS,
+  ...SCANNER_KEYS,
+  ...MARKER_KEYS,
+  ...SEARCH_KEYS,
+];
+
+export default function LibraryMetadataSettings() {
+  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
+  const branding = useBranding();
+  const restartKeys = useRestartKeys();
+  const checkConnection = useCheckAdminSettingsConnection();
+  const [connectionResult, setConnectionResult] =
+    useState<ConnectionCheckResponse | null>(null);
+
+  // Image caching writes provider artwork into the public bucket, so the server
+  // rejects enabling it when no bucket is configured at all. `storage_available`
+  // is the process-level truth (branding uses the same flag for asset uploads);
+  // s3.public_bucket only says the setting was saved, which is enough for the
+  // server to accept the save and separates "restart pending" from "never
+  // configured". s3.public_bucket is not staged here, but getValue falls back
+  // to the full settings response.
+  const publicBucketSaved = Boolean(form.getValue("s3.public_bucket"));
+  const imageStorageAvailable = branding.storageAvailable;
+  const cacheImagesOn = form.getValue(CACHE_IMAGES_KEY) === "true";
+  // Never trap an admin with it on: turning it off stays available even when
+  // the bucket went away.
+  const cacheImagesLocked =
+    !imageStorageAvailable && !publicBucketSaved && !cacheImagesOn;
+
+  const provider = form.getValue("catalog.search.provider") || "postgres";
+  const meiliEnabled = provider === "meilisearch";
+  const anyDirty = (keys: string[]) => keys.some((key) => form.isDirty(key));
+  const allRestart = (keys: string[]) =>
+    keys.every((key) => restartKeys.has(key));
+  // Staged Meilisearch edits stay reachable after switching the provider back,
+  // so the save bar can never count a change the admin cannot see.
+  const showMeili = meiliEnabled || anyDirty(MEILI_KEYS);
+
+  async function handleCheckConnection() {
+    try {
+      setConnectionResult(
+        await checkConnection.mutateAsync({
+          kind: "meilisearch",
+          body: form.buildConnectionCheckRequest(MEILI_KEYS),
+        }),
+      );
+    } catch (error) {
+      setConnectionResult({
+        success: false,
+        message:
+          error instanceof Error ? error.message : "Connection check failed.",
+      });
+    }
+  }
+
+  const markerMode = form.getValue("markers.mode") || "local";
+
+  if (form.isLoading) {
+    return (
+      <div className="space-y-6" role="status" aria-label="Loading settings">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-40 w-full" />
+        <span className="sr-only">Loading settings</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <SettingsPageHeader title="Library & Metadata" className="mb-8" />
+
+      <div className="flex-1 space-y-5">
+        <FieldGroup label="Metadata" restartAll={allRestart(METADATA_KEYS)}>
+          {!imageStorageAvailable && (
+            <div className="mt-3 flex items-start gap-3 rounded-xl border border-amber-500/20 bg-amber-500/5 p-3">
+              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
+              <p className="text-muted-foreground text-[13px] leading-relaxed">
+                {publicBucketSaved ? (
+                  <>Restart the server for image caching to start.</>
+                ) : (
+                  <>
+                    Image caching needs a public S3 bucket, set in{" "}
+                    <Link
+                      to="/admin/settings/infrastructure"
+                      className="text-foreground font-medium underline-offset-2 hover:underline"
+                    >
+                      Infrastructure
+                    </Link>{" "}
+                    settings.
+                  </>
+                )}
+              </p>
+            </div>
+          )}
+          <SettingField
+            label="S3 image caching"
+            type="toggle"
+            description="Serves provider artwork from your S3 bucket."
+            value={form.getValue(CACHE_IMAGES_KEY)}
+            onChange={(value) => form.setValue(CACHE_IMAGES_KEY, value)}
+            disabled={cacheImagesLocked}
+            restartRequired={restartKeys.has(CACHE_IMAGES_KEY)}
+          />
+        </FieldGroup>
+
+        <FieldGroup label="Scanning" restartAll={allRestart(SCANNER_KEYS)}>
+          <AdvancedSection
+            id="library.scanning"
+            count={SCANNER_KEYS.length}
+            forceOpen={anyDirty(SCANNER_KEYS)}
+          >
+            <SettingField
+              label="Scanner workers"
+              type="number"
+              description="How many files Silo reads at once."
+              value={form.getValue("scanner.workers")}
+              onChange={(value) => form.setValue("scanner.workers", value)}
+              restartRequired={restartKeys.has("scanner.workers")}
+            />
+            <SettingField
+              label="Matcher workers"
+              type="number"
+              description="How many items Silo looks up at once."
+              value={form.getValue("matcher.workers")}
+              onChange={(value) => form.setValue("matcher.workers", value)}
+              restartRequired={restartKeys.has("matcher.workers")}
+            />
+            <SettingField
+              label="Matcher batch size"
+              type="number"
+              description="How many items each matcher worker claims per round."
+              value={form.getValue("matcher.batch_size")}
+              onChange={(value) => form.setValue("matcher.batch_size", value)}
+              restartRequired={restartKeys.has("matcher.batch_size")}
+            />
+          </AdvancedSection>
+        </FieldGroup>
+
+        {/*
+          Detection behavior lives here; which online providers answer a lookup,
+          and on what terms, is provider configuration and lives with the other
+          providers.
+        */}
+        <FieldGroup
+          label="Intro and credits markers"
+          restartAll={allRestart(MARKER_KEYS)}
+          actions={
+            <Link
+              to="/admin/settings/providers"
+              className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-xs font-medium transition-colors"
+            >
+              Marker providers
+              <ArrowRight className="h-3 w-3" aria-hidden="true" />
+            </Link>
+          }
+        >
+          <SettingField
+            label="Find intros and credits"
+            type="select"
+            description="Detecting on this server utilizes CPU. Looking online uses the marker providers set up on the Subtitles & Metadata page."
+            options={[
+              { value: "off", label: "Off" },
+              { value: "local", label: "Detect on this server" },
+              {
+                value: "both",
+                label: "Detect on this server, then look online",
+              },
+              { value: "online", label: "Look online only" },
+            ]}
+            value={markerMode}
+            onChange={(value) => form.setValue("markers.mode", value)}
+            restartRequired={restartKeys.has("markers.mode")}
+          />
+
+          <SettingField
+            label="Fetch markers on playback"
+            type="toggle"
+            description="Uses the enabled marker providers to look up missing markers when playback starts. Can delay the first few seconds."
+            value={form.getValue("markers.lazy_playback") || "false"}
+            onChange={(value) => form.setValue("markers.lazy_playback", value)}
+            restartRequired={restartKeys.has("markers.lazy_playback")}
+          />
+
+          <div className="py-3.5">
+            <MarkerTasksCard />
+          </div>
+        </FieldGroup>
+
+        <FieldGroup label="Search" restartAll={allRestart(SEARCH_KEYS)}>
+          <SettingField
+            label="Search engine"
+            type="select"
+            description="Meilisearch tolerates typos but runs as its own service. If it goes down, search falls back to the built-in engine automatically."
+            value={provider}
+            onChange={(value) =>
+              form.setValue("catalog.search.provider", value)
+            }
+            options={[
+              { value: "postgres", label: "Built-in (Postgres)" },
+              { value: "meilisearch", label: "Meilisearch" },
+            ]}
+            restartRequired={restartKeys.has("catalog.search.provider")}
+          />
+
+          {showMeili && (
+            <>
+              <SettingField
+                label="Meilisearch URL"
+                value={form.getValue(MEILI_URL_KEY)}
+                onChange={(value) => form.setValue(MEILI_URL_KEY, value)}
+                hint="http://localhost:7700"
+                disabled={!meiliEnabled}
+                restartRequired={restartKeys.has(MEILI_URL_KEY)}
+              />
+              <SecretField
+                label="Meilisearch API key"
+                value={form.getValue(MEILI_API_KEY)}
+                configured={form.sensitiveConfigured.includes(MEILI_API_KEY)}
+                onChange={(value) => form.setValue(MEILI_API_KEY, value)}
+                onKeep={() => form.resetValue(MEILI_API_KEY)}
+                // Nothing else on this page can empty the stored key, and a
+                // Meilisearch instance without a master key needs it empty.
+                onClear={() => form.setValue(MEILI_API_KEY, "")}
+                cleared={form.isClearStaged(MEILI_API_KEY)}
+                hint="Master key, or one that can read and write the index."
+                disabled={!meiliEnabled}
+                restartRequired={restartKeys.has(MEILI_API_KEY)}
+              />
+              <ConnectionCheckAction
+                onClick={handleCheckConnection}
+                result={connectionResult}
+                isPending={checkConnection.isPending}
+                disabled={!meiliEnabled}
+              />
+
+              <AdvancedSection
+                id="library.search.meilisearch"
+                count={MEILI_ADVANCED_KEYS.length}
+                forceOpen={anyDirty(MEILI_ADVANCED_KEYS)}
+              >
+                <SettingField
+                  label="Index name prefix"
+                  value={
+                    form.getValue("catalog.search.meilisearch.index") ||
+                    "silo_media_items"
+                  }
+                  onChange={(value) =>
+                    form.setValue("catalog.search.meilisearch.index", value)
+                  }
+                  description="Only needed when Silo servers share one Meilisearch."
+                  disabled={!meiliEnabled}
+                  restartRequired={restartKeys.has(
+                    "catalog.search.meilisearch.index",
+                  )}
+                />
+                <SettingField
+                  label="Query timeout"
+                  type="number"
+                  unit="ms"
+                  value={
+                    form.getValue("catalog.search.meilisearch.timeout_ms") ||
+                    "800"
+                  }
+                  onChange={(value) =>
+                    form.setValue(
+                      "catalog.search.meilisearch.timeout_ms",
+                      value,
+                    )
+                  }
+                  description="Searches that take longer fall back to the built-in engine."
+                  disabled={!meiliEnabled}
+                  restartRequired={restartKeys.has(
+                    "catalog.search.meilisearch.timeout_ms",
+                  )}
+                />
+                <SettingField
+                  label="When a search has several words"
+                  type="select"
+                  value={
+                    form.getValue(
+                      "catalog.search.meilisearch.matching_strategy",
+                    ) || "last"
+                  }
+                  onChange={(value) =>
+                    form.setValue(
+                      "catalog.search.meilisearch.matching_strategy",
+                      value,
+                    )
+                  }
+                  options={[
+                    {
+                      value: "last",
+                      label: "Drop trailing words until something matches",
+                    },
+                    { value: "all", label: "Require every word" },
+                  ]}
+                  disabled={!meiliEnabled}
+                  restartRequired={restartKeys.has(
+                    "catalog.search.meilisearch.matching_strategy",
+                  )}
+                />
+                <SettingField
+                  label="Items sent to the index per batch"
+                  type="number"
+                  value={
+                    form.getValue(
+                      "catalog.search.meilisearch.sync_batch_size",
+                    ) || "500"
+                  }
+                  onChange={(value) =>
+                    form.setValue(
+                      "catalog.search.meilisearch.sync_batch_size",
+                      value,
+                    )
+                  }
+                  description="Larger batches index faster and use more memory."
+                  disabled={!meiliEnabled}
+                  restartRequired={restartKeys.has(
+                    "catalog.search.meilisearch.sync_batch_size",
+                  )}
+                />
+                <SettingField
+                  label="Match by meaning as well as words"
+                  type="toggle"
+                  value={
+                    form.getValue(
+                      "catalog.search.meilisearch.semantic_enabled",
+                    ) || "false"
+                  }
+                  onChange={(value) =>
+                    form.setValue(
+                      "catalog.search.meilisearch.semantic_enabled",
+                      value,
+                    )
+                  }
+                  description="Also matches items whose description means something similar."
+                  disabled={!meiliEnabled}
+                  restartRequired={restartKeys.has(
+                    "catalog.search.meilisearch.semantic_enabled",
+                  )}
+                />
+                <SettingField
+                  label="Meaning-based share of results"
+                  type="number"
+                  value={
+                    form.getValue(
+                      "catalog.search.meilisearch.semantic_ratio",
+                    ) || "0.50"
+                  }
+                  onChange={(value) =>
+                    form.setValue(
+                      "catalog.search.meilisearch.semantic_ratio",
+                      value,
+                    )
+                  }
+                  description="0 ranks by words, 1 by meaning."
+                  disabled={!meiliEnabled}
+                  restartRequired={restartKeys.has(
+                    "catalog.search.meilisearch.semantic_ratio",
+                  )}
+                />
+              </AdvancedSection>
+            </>
+          )}
+
+          <AdvancedSection id="library.search.status" title="Search status">
+            <SearchStatusPanel />
+          </AdvancedSection>
+        </FieldGroup>
+      </div>
+
+      <SaveBar
+        dirtyCount={form.dirtyCount}
+        onSave={form.save}
+        onDiscard={form.discard}
+        isSaving={form.isSaving}
+      />
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/LogRetentionSettings.tsx b/web/src/pages/admin-settings/LogRetentionSettings.tsx
deleted file mode 100644
index 58f0df0f1..000000000
--- a/web/src/pages/admin-settings/LogRetentionSettings.tsx
+++ /dev/null
@@ -1,468 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import { Plus, RotateCcw, Trash2 } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  useAdminServerSettings,
-  useUpdateServerSettings,
-} from "@/hooks/queries/admin/settings";
-
-import { FieldGroup } from "./FieldGroup";
-import { SaveBar } from "./SaveBar";
-import { SettingField } from "./SettingField";
-import {
-  DEFAULT_BUCKET_POLICIES,
-  LOG_LEVEL_OPTIONS,
-  OPSLOG_BUCKET_POLICIES_KEY,
-  OPSLOG_MAX_ROWS_KEY,
-  OPSLOG_MAX_SIZE_MB_KEY,
-  OPSLOG_RETENTION_DAYS_KEY,
-  parseBucketPolicies,
-  serializeBucketPolicies,
-  type LogRetentionBucketPolicy,
-} from "./logRetentionPolicy";
-
-type BucketRow = LogRetentionBucketPolicy & { id: string };
-
-const GLOBAL_KEYS = [
-  OPSLOG_RETENTION_DAYS_KEY,
-  OPSLOG_MAX_ROWS_KEY,
-  OPSLOG_MAX_SIZE_MB_KEY,
-  "policy.decision_log_retention_days",
-  "policy.decision_log_verbosity",
-  "policy.decision_log_scope_sample_rate",
-] as const;
-
-const POLICY_DECISION_LOG_RETENTION_DAYS_KEY =
-  "policy.decision_log_retention_days";
-const POLICY_DECISION_LOG_VERBOSITY_KEY = "policy.decision_log_verbosity";
-const POLICY_DECISION_LOG_SCOPE_SAMPLE_RATE_KEY =
-  "policy.decision_log_scope_sample_rate";
-
-function createBucketRow(
-  policy?: Partial<LogRetentionBucketPolicy>,
-  fallbackID = "0",
-): BucketRow {
-  return {
-    id: fallbackID,
-    component: policy?.component ?? "",
-    level: policy?.level ?? "info",
-    retention_days: policy?.retention_days ?? 1,
-    max_rows: policy?.max_rows ?? 100000,
-    max_size_mb: policy?.max_size_mb ?? 128,
-  };
-}
-
-export default function LogRetentionSettings() {
-  const { data: settings, isLoading } = useAdminServerSettings();
-  const updateSettings = useUpdateServerSettings();
-
-  const [localValues, setLocalValues] = useState<Record<string, string>>({});
-  const [bucketRows, setBucketRows] = useState<BucketRow[]>([]);
-  const [dirty, setDirty] = useState<Set<string>>(new Set());
-  const [restartRequired, setRestartRequired] = useState(false);
-  const [parseError, setParseError] = useState<string>("");
-  const [saveError, setSaveError] = useState("");
-  const nextRowID = useRef(1);
-
-  const globalKeys = useMemo(() => [...GLOBAL_KEYS], []);
-  const hydratedState = useMemo(() => {
-    const nextValues: Record<string, string> = {};
-    for (const key of globalKeys) {
-      nextValues[key] = settings?.[key] ?? "";
-    }
-
-    try {
-      const parsed = parseBucketPolicies(
-        settings?.[OPSLOG_BUCKET_POLICIES_KEY] ?? "",
-      );
-      return {
-        localValues: nextValues,
-        bucketRows: parsed.map((policy, index) =>
-          createBucketRow(policy, String(index + 1)),
-        ),
-        parseError: "",
-        nextRowID: parsed.length + 1,
-      };
-    } catch (error) {
-      return {
-        localValues: nextValues,
-        bucketRows: DEFAULT_BUCKET_POLICIES.map((policy, index) =>
-          createBucketRow(policy, String(index + 1)),
-        ),
-        parseError:
-          error instanceof Error
-            ? error.message
-            : "Failed to parse bucket rules",
-        nextRowID: DEFAULT_BUCKET_POLICIES.length + 1,
-      };
-    }
-  }, [globalKeys, settings]);
-
-  const effectiveLocalValues =
-    Object.keys(localValues).length === 0 && dirty.size === 0
-      ? hydratedState.localValues
-      : localValues;
-  const effectiveBucketRows =
-    dirty.has(OPSLOG_BUCKET_POLICIES_KEY) || bucketRows.length > 0
-      ? bucketRows
-      : hydratedState.bucketRows;
-  const effectiveParseError = dirty.has(OPSLOG_BUCKET_POLICIES_KEY)
-    ? parseError
-    : hydratedState.parseError;
-
-  const dirtyCount = dirty.size;
-
-  function getValue(key: string) {
-    return effectiveLocalValues[key] ?? settings?.[key] ?? "";
-  }
-
-  function setValue(key: string, value: string) {
-    setLocalValues((prev) => ({ ...prev, [key]: value }));
-    setDirty((prev) => new Set(prev).add(key));
-  }
-
-  function updateBucketRow(
-    id: string,
-    field: keyof LogRetentionBucketPolicy,
-    value: string,
-  ) {
-    setBucketRows((prev) =>
-      prev.map((row) =>
-        row.id === id
-          ? {
-              ...row,
-              [field]:
-                field === "component" || field === "level"
-                  ? value
-                  : Math.max(0, Number.parseInt(value, 10) || 0),
-            }
-          : row,
-      ),
-    );
-    setDirty((prev) => new Set(prev).add(OPSLOG_BUCKET_POLICIES_KEY));
-  }
-
-  function addBucketRow() {
-    const nextIdValue = Math.max(
-      nextRowID.current,
-      ...effectiveBucketRows.map((row) => Number.parseInt(row.id, 10) || 0),
-      0,
-    );
-    const id = String(nextIdValue + 1);
-    nextRowID.current = nextIdValue + 1;
-    setBucketRows((prev) => [...prev, createBucketRow(undefined, id)]);
-    setDirty((prev) => new Set(prev).add(OPSLOG_BUCKET_POLICIES_KEY));
-  }
-
-  function removeBucketRow(id: string) {
-    setBucketRows((prev) => prev.filter((row) => row.id !== id));
-    setDirty((prev) => new Set(prev).add(OPSLOG_BUCKET_POLICIES_KEY));
-  }
-
-  function restoreRecommendedBuckets() {
-    setBucketRows(
-      DEFAULT_BUCKET_POLICIES.map((policy, index) =>
-        createBucketRow(policy, String(index + 1)),
-      ),
-    );
-    nextRowID.current = DEFAULT_BUCKET_POLICIES.length + 1;
-    setDirty((prev) => new Set(prev).add(OPSLOG_BUCKET_POLICIES_KEY));
-    setParseError("");
-  }
-
-  async function save() {
-    setSaveError("");
-    const values = Object.fromEntries(
-      Array.from(dirty).map((key) => [
-        key,
-        key === OPSLOG_BUCKET_POLICIES_KEY
-          ? serializeBucketPolicies(effectiveBucketRows)
-          : (effectiveLocalValues[key] ?? ""),
-      ]),
-    );
-    try {
-      const result = await updateSettings.mutateAsync(values);
-      setDirty(new Set());
-      setRestartRequired((current) => current || result.restart_required);
-    } catch {
-      setSaveError("Failed to save settings. No changes were applied.");
-    }
-  }
-
-  function discard() {
-    if (!settings) {
-      return;
-    }
-    const nextValues: Record<string, string> = {};
-    for (const key of globalKeys) {
-      nextValues[key] = settings[key] ?? "";
-    }
-    setLocalValues(nextValues);
-    setBucketRows(hydratedState.bucketRows);
-    nextRowID.current = hydratedState.nextRowID;
-    setParseError(hydratedState.parseError);
-    setDirty(new Set());
-    setRestartRequired(false);
-  }
-
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Log Retention</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Prune oldest operational logs by global caps and per-bucket overrides.
-          Bucket rules match on component and level. Cleanup cadence and startup
-          runs are configured in Scheduled Tasks.
-        </p>
-      </div>
-
-      <fieldset
-        disabled={updateSettings.isPending}
-        className="flex-1 space-y-6"
-      >
-        <FieldGroup label="Global Limits">
-          <SettingField
-            label="Retention Days"
-            type="number"
-            hint="Logs older than this are pruned first."
-            value={getValue(OPSLOG_RETENTION_DAYS_KEY)}
-            onChange={(value) => setValue(OPSLOG_RETENTION_DAYS_KEY, value)}
-          />
-          <SettingField
-            label="Max Rows"
-            type="number"
-            hint="Keeps only the newest rows once this total is exceeded."
-            value={getValue(OPSLOG_MAX_ROWS_KEY)}
-            onChange={(value) => setValue(OPSLOG_MAX_ROWS_KEY, value)}
-          />
-          <SettingField
-            label="Max Size (MB)"
-            type="number"
-            hint="Uses estimated log row size. Oldest rows are pruned when the budget is exceeded."
-            value={getValue(OPSLOG_MAX_SIZE_MB_KEY)}
-            onChange={(value) => setValue(OPSLOG_MAX_SIZE_MB_KEY, value)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Policy Decision Logs">
-          <SettingField
-            label="Decision Log Retention Days"
-            type="number"
-            hint="Policy decisions older than this are pruned by the cleanup task."
-            value={getValue(POLICY_DECISION_LOG_RETENTION_DAYS_KEY)}
-            onChange={(value) =>
-              setValue(POLICY_DECISION_LOG_RETENTION_DAYS_KEY, value)
-            }
-          />
-          <SettingField
-            label="Decision Log Verbosity"
-            type="select"
-            hint="Digest omits sampled input and result payloads. Verbose can store those samples in addition to decision metadata."
-            value={getValue(POLICY_DECISION_LOG_VERBOSITY_KEY) || "digest"}
-            onChange={(value) =>
-              setValue(POLICY_DECISION_LOG_VERBOSITY_KEY, value)
-            }
-            options={[
-              { value: "digest", label: "Digest" },
-              { value: "verbose", label: "Verbose" },
-            ]}
-          />
-          <SettingField
-            label="Scope Sample Rate"
-            type="number"
-            hint="Logs one sampled scope decision per N allowed decisions. Denials and errors always log."
-            value={getValue(POLICY_DECISION_LOG_SCOPE_SAMPLE_RATE_KEY)}
-            onChange={(value) =>
-              setValue(POLICY_DECISION_LOG_SCOPE_SAMPLE_RATE_KEY, value)
-            }
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Bucket Overrides">
-          <div className="space-y-4 py-3">
-            <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
-              <div className="text-muted-foreground text-sm">
-                Use tighter rules for noisy buckets like{" "}
-                <span className="font-mono">metadata/info</span>. Set a bucket
-                limit to <span className="font-mono">0</span> to disable that
-                bucket-specific cap.
-              </div>
-              <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-                <Button
-                  type="button"
-                  size="sm"
-                  variant="outline"
-                  onClick={restoreRecommendedBuckets}
-                >
-                  <RotateCcw className="size-4" />
-                  Restore Recommended Rules
-                </Button>
-                <Button type="button" size="sm" onClick={addBucketRow}>
-                  <Plus className="size-4" />
-                  Add Rule
-                </Button>
-              </div>
-            </div>
-
-            {effectiveParseError ? (
-              <div className="border-warning/30 bg-warning/10 text-warning rounded-[1rem] border px-3 py-2 text-sm">
-                Existing bucket policy JSON could not be parsed. The editor
-                loaded the recommended rules so you can recover cleanly.
-                Details: {effectiveParseError}
-              </div>
-            ) : null}
-
-            {saveError && <p className="text-sm text-red-400">{saveError}</p>}
-
-            <div className="surface-panel-subtle overflow-x-auto rounded-[1rem]">
-              <table className="w-full border-collapse text-sm">
-                <thead className="bg-muted/40 text-left">
-                  <tr>
-                    <th className="px-3 py-2 font-medium">Component</th>
-                    <th className="px-3 py-2 font-medium">Level</th>
-                    <th className="px-3 py-2 font-medium">Days</th>
-                    <th className="px-3 py-2 font-medium">Max Rows</th>
-                    <th className="px-3 py-2 font-medium">Max Size (MB)</th>
-                    <th className="w-[60px] px-3 py-2 font-medium"> </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {effectiveBucketRows.length === 0 ? (
-                    <tr>
-                      <td
-                        colSpan={6}
-                        className="text-muted-foreground px-3 py-6 text-center"
-                      >
-                        No bucket overrides configured.
-                      </td>
-                    </tr>
-                  ) : (
-                    effectiveBucketRows.map((row) => (
-                      <tr key={row.id} className="border-t">
-                        <td className="px-3 py-2">
-                          <Input
-                            value={row.component}
-                            onChange={(event) =>
-                              updateBucketRow(
-                                row.id,
-                                "component",
-                                event.target.value,
-                              )
-                            }
-                            placeholder="metadata"
-                          />
-                        </td>
-                        <td className="px-3 py-2">
-                          <Select
-                            value={row.level}
-                            onValueChange={(value) =>
-                              updateBucketRow(row.id, "level", value)
-                            }
-                          >
-                            <SelectTrigger className="w-[120px]">
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              {LOG_LEVEL_OPTIONS.map((level) => (
-                                <SelectItem key={level} value={level}>
-                                  {level}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                        </td>
-                        <td className="px-3 py-2">
-                          <Input
-                            type="number"
-                            min="0"
-                            value={String(row.retention_days)}
-                            onChange={(event) =>
-                              updateBucketRow(
-                                row.id,
-                                "retention_days",
-                                event.target.value,
-                              )
-                            }
-                            className="w-[110px]"
-                          />
-                        </td>
-                        <td className="px-3 py-2">
-                          <Input
-                            type="number"
-                            min="0"
-                            value={String(row.max_rows)}
-                            onChange={(event) =>
-                              updateBucketRow(
-                                row.id,
-                                "max_rows",
-                                event.target.value,
-                              )
-                            }
-                            className="w-[140px]"
-                          />
-                        </td>
-                        <td className="px-3 py-2">
-                          <Input
-                            type="number"
-                            min="0"
-                            value={String(row.max_size_mb)}
-                            onChange={(event) =>
-                              updateBucketRow(
-                                row.id,
-                                "max_size_mb",
-                                event.target.value,
-                              )
-                            }
-                            className="w-[140px]"
-                          />
-                        </td>
-                        <td className="px-3 py-2 text-right">
-                          <Button
-                            type="button"
-                            size="icon-sm"
-                            variant="outline"
-                            onClick={() => removeBucketRow(row.id)}
-                            aria-label={`Remove ${row.component || "bucket"} rule`}
-                          >
-                            <Trash2 className="size-4" />
-                          </Button>
-                        </td>
-                      </tr>
-                    ))
-                  )}
-                </tbody>
-              </table>
-            </div>
-
-            <div className="text-muted-foreground text-xs leading-5">
-              Matching rows are pruned oldest-first when they exceed the bucket
-              rule. Global caps then prune the oldest rows across every
-              remaining bucket.
-            </div>
-          </div>
-        </FieldGroup>
-      </fieldset>
-
-      <SaveBar
-        dirtyCount={dirtyCount}
-        onSave={save}
-        onDiscard={discard}
-        isSaving={updateSettings.isPending}
-        restartRequired={restartRequired}
-      />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/MarkerProviderTiles.tsx b/web/src/pages/admin-settings/MarkerProviderTiles.tsx
new file mode 100644
index 000000000..347553f55
--- /dev/null
+++ b/web/src/pages/admin-settings/MarkerProviderTiles.tsx
@@ -0,0 +1,442 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+
+import type {
+  MarkerProviderConfig,
+  MarkerUserStats,
+  PluginInstallation,
+} from "@/api/types";
+import {
+  ProviderPanelActions,
+  ProviderTile,
+  ProviderTileGrid,
+  providerMonogram,
+  resolveProviderTileState,
+  type ProviderTestState,
+} from "@/components/settings/ProviderTile";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useAdminPluginInstallations } from "@/hooks/queries/admin/plugins";
+import { installationConfigReady } from "@/lib/pluginConfigReady";
+import { useReportUnsavedChanges } from "@/hooks/useUnsavedChanges";
+import {
+  useMarkerProviders,
+  useUpdateMarkerProvider,
+  useValidateMarkerProvider,
+} from "@/hooks/queries/admin/markers";
+import {
+  SETTINGS_NUMBER_WIDTH,
+  SettingField,
+  SettingFieldRow,
+} from "./SettingField";
+
+const INTEGER_INPUT_PATTERN = /^[+-]?\d+$/;
+
+/** Tile id namespace, so a marker provider can never collide with a subtitle one. */
+function markerTileID(provider: string): string {
+  return `marker:${provider}`;
+}
+
+function formatRate(value: number) {
+  return `${Math.round(value * 100)}%`;
+}
+
+/** What the last Validate said, kept per provider while the page is open. */
+interface MarkerValidation {
+  test: ProviderTestState;
+  stats?: MarkerUserStats;
+}
+
+/**
+ * Whether the plugin behind a marker provider has the configuration it asks
+ * for. Silo never sees the key itself — it lives in the plugin's own runtime
+ * config — but it does know which config keys the plugin declares and which
+ * ones have a value saved, which is enough to stop a provider with no API key
+ * from reading as connected. `undefined` means "not known yet": the
+ * installations query is still in flight, or nothing matched, and a tile must
+ * not guess in that window.
+ */
+function markerCredentialsReady(
+  installations: PluginInstallation[] | undefined,
+  provider: MarkerProviderConfig,
+): boolean | undefined {
+  if (!installations) return undefined;
+  const installation = installations.find(
+    (candidate) => candidate.id === provider.plugin_installation_id,
+  );
+  if (!installation) return undefined;
+  return installationConfigReady(installation);
+}
+
+/**
+ * Marker providers as tiles on the providers page, beside the subtitle and
+ * metadata ones. Each tile's panel holds the per-provider behavior (lookup
+ * order, contribution rules) that Silo owns; the provider's credentials belong
+ * to the plugin and are edited on its plugin page.
+ */
+export function MarkerProviderTiles({
+  expandedTile,
+  onExpand,
+  onCollapse,
+}: {
+  expandedTile: string | null;
+  onExpand: (id: string) => void;
+  onCollapse: () => void;
+}) {
+  const providers = useMarkerProviders();
+  // Installed plugins render the credential state; the tiles are useful before
+  // that query lands, so they are never blocked on it.
+  const { data: installations } = useAdminPluginInstallations();
+  const [results, setResults] = useState<
+    Record<string, MarkerValidation | undefined>
+  >({});
+
+  if (providers.isLoading) {
+    return (
+      <ProviderTileGrid>
+        <Skeleton className="h-32 w-full rounded-2xl" />
+        <Skeleton className="h-32 w-full rounded-2xl" />
+      </ProviderTileGrid>
+    );
+  }
+
+  const providerList = providers.data?.providers ?? [];
+  if (providerList.length === 0) {
+    return (
+      <p className="text-muted-foreground text-sm">
+        No marker provider plugins are installed. More install from the{" "}
+        <Link
+          to="/admin/plugins?tab=catalog"
+          className="hover:text-foreground font-medium underline underline-offset-2 transition-colors"
+        >
+          plugin catalog
+        </Link>
+        .
+      </p>
+    );
+  }
+
+  return (
+    <ProviderTileGrid>
+      {providerList.map((provider) => {
+        const id = markerTileID(provider.provider);
+        return (
+          <MarkerProviderTile
+            // Server values in the key so a saved provider drops the drafts it
+            // was edited with instead of re-showing them over the new state.
+            key={[
+              provider.provider,
+              provider.fetch_enabled,
+              provider.fetch_priority,
+              provider.contribute_enabled,
+              provider.contribute_auto_local,
+              provider.contribute_min_confidence,
+              provider.is_submitter,
+            ].join(":")}
+            provider={provider}
+            credentialsReady={markerCredentialsReady(installations, provider)}
+            expanded={expandedTile === id}
+            onExpand={() => onExpand(id)}
+            onCollapse={onCollapse}
+            result={results[id]}
+            onValidated={(result) =>
+              setResults((current) => ({ ...current, [id]: result }))
+            }
+          />
+        );
+      })}
+    </ProviderTileGrid>
+  );
+}
+
+function MarkerProviderTile({
+  provider,
+  credentialsReady,
+  expanded,
+  onExpand,
+  onCollapse,
+  result,
+  onValidated,
+}: {
+  provider: MarkerProviderConfig;
+  credentialsReady: boolean | undefined;
+  expanded: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+  result: MarkerValidation | undefined;
+  onValidated: (result: MarkerValidation | undefined) => void;
+}) {
+  const updateProvider = useUpdateMarkerProvider();
+  const validateProvider = useValidateMarkerProvider();
+  const displayName = provider.display_name || provider.provider;
+  const slug = provider.provider.replace(/[^a-zA-Z0-9_-]/g, "-");
+  const minConfidenceID = `marker-min-confidence-${slug}`;
+  const priorityID = `marker-priority-${slug}`;
+  const [fetchEnabled, setFetchEnabled] = useState(provider.fetch_enabled);
+  const [fetchPriority, setFetchPriority] = useState(
+    String(provider.fetch_priority),
+  );
+  const [contributeEnabled, setContributeEnabled] = useState(
+    provider.contribute_enabled,
+  );
+  const [autoLocal, setAutoLocal] = useState(provider.contribute_auto_local);
+  const [minConfidence, setMinConfidence] = useState(
+    String(provider.contribute_min_confidence ?? 0.95),
+  );
+
+  const parsedMinConfidence = Number.parseFloat(minConfidence);
+  const confidenceValid =
+    Number.isFinite(parsedMinConfidence) &&
+    parsedMinConfidence >= 0 &&
+    parsedMinConfidence <= 1;
+  const fetchPriorityInput = fetchPriority.trim();
+  const parsedFetchPriority = Number(fetchPriorityInput);
+  const priorityValid =
+    INTEGER_INPUT_PATTERN.test(fetchPriorityInput) &&
+    Number.isInteger(parsedFetchPriority);
+  const dirty =
+    provider.fetch_enabled !== fetchEnabled ||
+    provider.fetch_priority !== parsedFetchPriority ||
+    provider.contribute_enabled !== contributeEnabled ||
+    provider.contribute_auto_local !== autoLocal ||
+    provider.contribute_min_confidence !== parsedMinConfidence;
+  // The tile's draft lives outside useSettingsForm, so the navigation guard
+  // and the reload prompt only see it if the tile reports it itself.
+  useReportUnsavedChanges(dirty);
+
+  function save() {
+    if (!priorityValid) {
+      toast.error("Lookup order must be a whole number.");
+      return;
+    }
+    if (!confidenceValid) {
+      toast.error("Minimum confidence must be between 0 and 1.");
+      return;
+    }
+
+    updateProvider.mutate({
+      provider: provider.provider,
+      patch: {
+        fetch_enabled: fetchEnabled,
+        fetch_priority: parsedFetchPriority,
+        contribute_enabled: contributeEnabled,
+        contribute_auto_local: contributeEnabled && autoLocal,
+        contribute_min_confidence: parsedMinConfidence,
+      },
+    });
+  }
+
+  function validate() {
+    const started = Date.now();
+    onValidated(undefined);
+    validateProvider.mutate(
+      { provider: provider.provider, displayName },
+      {
+        onSuccess: (response) =>
+          onValidated({
+            test: {
+              ok: response.valid,
+              message: response.valid
+                ? "Provider validated."
+                : (response.error ?? "Validation failed."),
+              at: Date.now(),
+              durationMs: Date.now() - started,
+            },
+            stats: response.stats,
+          }),
+        onError: (error) =>
+          onValidated({
+            test: {
+              ok: false,
+              message:
+                error instanceof Error ? error.message : "Validation failed.",
+              at: Date.now(),
+              durationMs: Date.now() - started,
+            },
+          }),
+      },
+    );
+  }
+
+  const test = result?.test;
+  const stats = result?.stats;
+  // "Connected" has to mean the server can actually look markers up here: the
+  // plugin has its configuration and the provider is on for lookup.
+  const connected = credentialsReady !== false && provider.fetch_enabled;
+  const state = resolveProviderTileState({ expanded, test, connected });
+  const statePill = expanded
+    ? undefined
+    : credentialsReady === false
+      ? "Needs setup"
+      : provider.fetch_enabled
+        ? undefined
+        : "Connected · off";
+  // Only a failure earns the extra line: the state word already says the rest.
+  const meta = !expanded && test && !test.ok ? test.message : undefined;
+  // installed_q keeps the list behind the dialog filtered to this plugin;
+  // configure opens its config dialog (API key and account) directly.
+  const pluginPage = provider.plugin_id
+    ? `/admin/plugins?installed_q=${encodeURIComponent(provider.plugin_id)}&configure=${encodeURIComponent(provider.plugin_id)}`
+    : "/admin/plugins";
+
+  return (
+    <ProviderTile
+      name={displayName}
+      tagline="Intro and credits markers"
+      monogram={providerMonogram(displayName)}
+      monogramClass="bg-teal-500/20 text-teal-700 dark:text-teal-300"
+      state={state}
+      statePill={statePill}
+      meta={meta}
+      busy={updateProvider.isPending || validateProvider.isPending}
+      expanded={expanded}
+      primaryAction={{
+        label:
+          test && !test.ok
+            ? "Fix"
+            : credentialsReady === false
+              ? "Set up"
+              : "Manage",
+        onClick: onExpand,
+      }}
+    >
+      <p className="text-muted-foreground mb-1 text-xs">
+        {provider.source_type === "plugin" && provider.plugin_id ? (
+          <>
+            Account and API keys for this provider live on its{" "}
+            <Link to={pluginPage} className="underline underline-offset-2">
+              plugin page
+            </Link>
+            .
+          </>
+        ) : (
+          provider.provider
+        )}
+      </p>
+
+      <SettingField
+        label="Use for online marker lookup"
+        type="toggle"
+        value={fetchEnabled ? "true" : "false"}
+        onChange={(value) => setFetchEnabled(value === "true")}
+      />
+      <SettingFieldRow
+        label="Lookup order"
+        htmlFor={priorityID}
+        description="Lower numbers win when providers overlap."
+      >
+        <Input
+          id={priorityID}
+          type="number"
+          value={fetchPriority}
+          step={1}
+          onChange={(event) => setFetchPriority(event.target.value)}
+          className={SETTINGS_NUMBER_WIDTH}
+          aria-invalid={!priorityValid}
+        />
+      </SettingFieldRow>
+      <SettingField
+        label="Allow contributions"
+        type="toggle"
+        value={contributeEnabled ? "true" : "false"}
+        onChange={(value) => {
+          const next = value === "true";
+          setContributeEnabled(next);
+          if (!next) setAutoLocal(false);
+        }}
+        disabled={!provider.is_submitter}
+      />
+      <SettingField
+        label="Send this server's markers automatically"
+        type="toggle"
+        value={autoLocal ? "true" : "false"}
+        onChange={(value) => setAutoLocal(value === "true")}
+        disabled={!provider.is_submitter || !contributeEnabled}
+        hint="Only markers this server detected, and only those above the confidence floor below, are sent."
+      />
+      <SettingFieldRow
+        label="Minimum confidence"
+        htmlFor={minConfidenceID}
+        description="Use a decimal from 0 to 1. The default recommendation is 0.95."
+      >
+        <Input
+          id={minConfidenceID}
+          type="number"
+          value={minConfidence}
+          min={0}
+          max={1}
+          step={0.01}
+          onChange={(event) => setMinConfidence(event.target.value)}
+          className={SETTINGS_NUMBER_WIDTH}
+          aria-invalid={!confidenceValid}
+          disabled={!provider.is_submitter}
+        />
+      </SettingFieldRow>
+
+      {stats && (
+        <div className="border-border bg-muted/20 mt-3.5 rounded-md border px-3 py-3">
+          <dl className="grid gap-x-6 gap-y-2 text-xs sm:grid-cols-2">
+            <div className="flex justify-between gap-3">
+              <dt className="text-muted-foreground">Total submissions</dt>
+              <dd className="font-medium">{stats.total}</dd>
+            </div>
+            <div className="flex justify-between gap-3">
+              <dt className="text-muted-foreground">Accepted</dt>
+              <dd className="font-medium">{stats.accepted}</dd>
+            </div>
+            <div className="flex justify-between gap-3">
+              <dt className="text-muted-foreground">Pending</dt>
+              <dd className="font-medium">{stats.pending}</dd>
+            </div>
+            <div className="flex justify-between gap-3">
+              <dt className="text-muted-foreground">Rejected</dt>
+              <dd className="font-medium">{stats.rejected}</dd>
+            </div>
+            <div className="flex justify-between gap-3">
+              <dt className="text-muted-foreground">Acceptance rate</dt>
+              <dd className="font-medium">
+                {formatRate(stats.acceptance_rate)}
+              </dd>
+            </div>
+            <div className="flex justify-between gap-3">
+              <dt className="text-muted-foreground">Best streak</dt>
+              <dd className="font-medium">{stats.best_streak}</dd>
+            </div>
+          </dl>
+        </div>
+      )}
+
+      <ProviderPanelActions test={test}>
+        <Button
+          type="button"
+          size="sm"
+          onClick={save}
+          disabled={
+            !dirty ||
+            !priorityValid ||
+            !confidenceValid ||
+            updateProvider.isPending
+          }
+        >
+          {updateProvider.isPending ? "Saving..." : "Save"}
+        </Button>
+        {provider.is_submitter && (
+          <Button
+            type="button"
+            size="sm"
+            variant="secondary"
+            onClick={validate}
+            disabled={validateProvider.isPending}
+          >
+            {validateProvider.isPending ? "Validating..." : "Validate"}
+          </Button>
+        )}
+        <Button type="button" size="sm" variant="outline" onClick={onCollapse}>
+          Close
+        </Button>
+      </ProviderPanelActions>
+    </ProviderTile>
+  );
+}
diff --git a/web/src/pages/admin-settings/MarkerTasksCard.tsx b/web/src/pages/admin-settings/MarkerTasksCard.tsx
new file mode 100644
index 000000000..e71c990bc
--- /dev/null
+++ b/web/src/pages/admin-settings/MarkerTasksCard.tsx
@@ -0,0 +1,148 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { Loader2, Play } from "lucide-react";
+
+import type { TaskInfo } from "@/api/types";
+import { TaskStatusBadge } from "@/components/admin/TaskStatusBadge";
+import { useEventChannel } from "@/components/realtimeEventsContext";
+import { Button } from "@/components/ui/button";
+import { useTasks, useRunTask } from "@/hooks/queries/admin/tasks";
+import { formatDateTime } from "@/lib/datetime";
+
+function numberFromResultData(
+  data: Record<string, unknown> | undefined,
+  key: string,
+) {
+  const value = data?.[key];
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+function formatTaskResult(task: TaskInfo | undefined) {
+  const result = task?.last_execution;
+  if (!result) return "Never run";
+
+  const data = result.result_data;
+  if (task.key === "contribute_markers") {
+    const submitted = numberFromResultData(data, "submitted");
+    const skipped = numberFromResultData(data, "skipped");
+    const failed = numberFromResultData(data, "failed");
+    const retryAfter = numberFromResultData(data, "retry_after_seconds");
+    const parts = [
+      submitted != null ? `${submitted} submitted` : null,
+      skipped != null ? `${skipped} skipped` : null,
+      failed != null ? `${failed} failed` : null,
+      retryAfter != null ? `retry after ${retryAfter}s` : null,
+    ].filter(Boolean);
+    if (parts.length > 0) return parts.join(", ");
+  }
+
+  return formatDateTime(result.completed_at);
+}
+
+function TaskActionRow({
+  task,
+  fallbackName,
+  fallbackDescription,
+  onRun,
+  pending,
+}: {
+  task: TaskInfo | undefined;
+  fallbackName: string;
+  fallbackDescription: string;
+  onRun: () => void;
+  pending: boolean;
+}) {
+  const key = task?.key;
+  const running = task?.state === "running" || task?.state === "cancelling";
+
+  return (
+    <div className="border-border flex flex-col gap-3 border-b py-4 last:border-b-0 sm:flex-row sm:items-center">
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <h3 className="text-sm font-semibold">
+            {task?.name ?? fallbackName}
+          </h3>
+          {task?.last_execution && (
+            <TaskStatusBadge result={task.last_execution} />
+          )}
+        </div>
+        <p className="text-muted-foreground mt-1 text-xs leading-relaxed">
+          {task?.description ?? fallbackDescription}
+        </p>
+        <p className="text-muted-foreground mt-1 text-xs">
+          Last result: {formatTaskResult(task)}
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-2 sm:flex-row">
+        {key && (
+          <Button variant="outline" size="sm" asChild>
+            <Link to={`/admin/tasks/${key}`}>History</Link>
+          </Button>
+        )}
+        <Button
+          type="button"
+          size="sm"
+          onClick={onRun}
+          disabled={!task || running || pending}
+        >
+          {pending ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <Play className="h-3.5 w-3.5" />
+          )}
+          {running ? "Running" : "Run now"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/** Run-now shortcuts for the two marker tasks, with their last result. */
+export function MarkerTasksCard() {
+  useEventChannel("tasks");
+  const { data: tasks } = useTasks();
+  const runTask = useRunTask();
+  // Per-task, not one shared value: both tasks can be started back to back,
+  // and the first completion must not re-enable the row that is still running.
+  const [pendingTasks, setPendingTasks] = useState<ReadonlySet<string>>(
+    new Set(),
+  );
+
+  const detectTask = tasks?.find((task) => task.key === "detect_intro_markers");
+  const contributeTask = tasks?.find(
+    (task) => task.key === "contribute_markers",
+  );
+
+  async function run(key: string) {
+    setPendingTasks((current) => new Set(current).add(key));
+    try {
+      await runTask.mutateAsync(key);
+    } finally {
+      setPendingTasks((current) => {
+        const next = new Set(current);
+        next.delete(key);
+        return next;
+      });
+    }
+  }
+
+  return (
+    <div className="max-w-2xl">
+      <TaskActionRow
+        task={detectTask}
+        fallbackName="Populate markers"
+        fallbackDescription="Populates intro and credits markers for opted-in libraries."
+        onRun={() => void run("detect_intro_markers")}
+        pending={pendingTasks.has("detect_intro_markers")}
+      />
+      <TaskActionRow
+        task={contributeTask}
+        fallbackName="Contribute markers"
+        fallbackDescription="Submits high-confidence local intro markers to enabled providers."
+        onRun={() => void run("contribute_markers")}
+        pending={pendingTasks.has("contribute_markers")}
+      />
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/NotificationsAdminSettings.test.tsx b/web/src/pages/admin-settings/NotificationsAdminSettings.test.tsx
index 64a4a31f4..52f9fe73b 100644
--- a/web/src/pages/admin-settings/NotificationsAdminSettings.test.tsx
+++ b/web/src/pages/admin-settings/NotificationsAdminSettings.test.tsx
@@ -1,26 +1,57 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderToStaticMarkup } from "react-dom/server";
 import { MemoryRouter } from "react-router";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import NotificationsAdminSettings from "./NotificationsAdminSettings";
 
 const useSettingsFormMock = vi.fn();
+const restartKeysMock = vi.fn(() => new Set<string>());
+const updateSettingsMock = vi.fn(() =>
+  Promise.resolve({ values: {}, restart_required: false }),
+);
+
+const mocks = vi.hoisted(() => ({
+  copyTextToClipboard: vi.fn(),
+  toastError: vi.fn(),
+  toastSuccess: vi.fn(),
+}));
+
+vi.mock("@/lib/clipboard", () => ({
+  copyTextToClipboard: (...args: unknown[]) =>
+    mocks.copyTextToClipboard(...args),
+}));
+
+vi.mock("sonner", () => ({
+  toast: { error: mocks.toastError, success: mocks.toastSuccess },
+}));
+
+vi.mock("@/hooks/queries/admin/settings", () => ({
+  useUpdateServerSettings: () => ({
+    mutateAsync: updateSettingsMock,
+    isPending: false,
+  }),
+}));
 
 vi.mock("@/hooks/useSettingsForm", () => ({
   useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
 }));
 
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => restartKeysMock(),
+}));
+
 vi.mock("@/hooks/queries/admin/serverNotificationChannels", () => ({
   useServerNotificationChannels: () => ({ data: [] }),
 }));
 
-function makeForm() {
+function makeForm(overrides: Record<string, string> = {}) {
   return {
     isLoading: false,
     getValue: (key: string) => {
+      if (key in overrides) return overrides[key];
       switch (key) {
         case "notifications.release_events_enabled":
         case "notifications.fanout_enabled":
@@ -45,10 +76,12 @@ function makeForm() {
       }
     },
     setValue: vi.fn(),
+    resetValue: vi.fn(),
     dirtyCount: 0,
     dirtyKeys: [],
-    isDirty: vi.fn(() => false),
-    save: vi.fn(),
+    isDirty: vi.fn((_key: string) => false),
+    isClearStaged: vi.fn((_key: string) => false),
+    save: vi.fn(() => Promise.resolve()),
     discard: vi.fn(),
     isSaving: false,
     restartRequired: false,
@@ -65,7 +98,7 @@ function renderPage() {
 
   return (
     <QueryClientProvider client={client}>
-      <MemoryRouter initialEntries={["/admin/settings?tab=notifications"]}>
+      <MemoryRouter initialEntries={["/admin/settings/notifications"]}>
         <NotificationsAdminSettings />
       </MemoryRouter>
     </QueryClientProvider>
@@ -76,8 +109,27 @@ function renderStaticPage() {
   return renderToStaticMarkup(renderPage());
 }
 
+/** Opens one channel card by the description in its header button. */
+async function openChannel(pattern: RegExp) {
+  await userEvent.click(screen.getByRole("button", { name: pattern }));
+}
+
+const EMAIL_CHANNEL = /Daily summary or a message per episode/;
+const DISCORD_CHANNEL = /Direct messages from your Discord bot/;
+const WEBHOOK_CHANNEL = /Webhooks people create for themselves/;
+
 describe("NotificationsAdminSettings", () => {
-  it("registers Prairie Push Relay settings with the shared settings form", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    restartKeysMock.mockReturnValue(new Set<string>());
+    updateSettingsMock.mockClear();
+    mocks.copyTextToClipboard.mockReset();
+    mocks.copyTextToClipboard.mockResolvedValue(undefined);
+    mocks.toastError.mockReset();
+    mocks.toastSuccess.mockReset();
+  });
+
+  it("registers Silo Push Relay settings with the shared settings form", () => {
     useSettingsFormMock.mockReturnValue(makeForm());
 
     renderStaticPage();
@@ -101,24 +153,68 @@ describe("NotificationsAdminSettings", () => {
     expect(options.keys).toContain("notifications.push_relay_url");
   });
 
-  it("shows the Prairie Push Relay channel status", async () => {
+  it("owns the merged email keys and the Discord application", () => {
+    useSettingsFormMock.mockReturnValue(makeForm());
+
+    renderStaticPage();
+
+    const calls = useSettingsFormMock.mock.calls;
+    const firstCall = calls[calls.length - 1];
+    if (!firstCall) {
+      throw new Error("useSettingsForm was not called");
+    }
+    const [options] = firstCall as [{ keys: string[] }];
+    for (const key of [
+      "email.enabled",
+      "email.smtp_host",
+      "email.smtp_port",
+      "email.smtp_security",
+      "email.smtp_username",
+      "email.smtp_password",
+      "email.from_address",
+      "email.from_name",
+    ]) {
+      expect(options.keys).toContain(key);
+    }
+    for (const key of [
+      "discord.client_id",
+      "discord.client_secret",
+      "discord.bot_token",
+    ]) {
+      expect(options.keys).toContain(key);
+    }
+  });
+
+  it("renders every field group heading", () => {
+    useSettingsFormMock.mockReturnValue(makeForm());
+
+    render(renderPage());
+
+    expect(screen.getByText("Grouping and flood control")).toBeInTheDocument();
+    expect(screen.getByText("Retention")).toBeInTheDocument();
+    expect(screen.getByText("Pipeline")).toBeInTheDocument();
+    expect(screen.getByText("Delivery Channels")).toBeInTheDocument();
+    expect(screen.getByText("Tuning")).toBeInTheDocument();
+  });
+
+  it("shows the Silo Push Relay channel status", async () => {
     useSettingsFormMock.mockReturnValue(makeForm());
 
     render(renderPage());
 
-    expect(screen.getByText("Prairie Push Relay")).toBeInTheDocument();
+    expect(screen.getByText("Silo Push Relay")).toBeInTheDocument();
     expect(screen.getByText(/delivered by APNs or FCM/)).toBeInTheDocument();
     expect(screen.getByText("Relay configured")).toBeInTheDocument();
 
     await userEvent.click(
-      screen.getByRole("button", { name: /Prairie Push Relay/ }),
+      screen.getByRole("button", { name: /Silo Push Relay/ }),
     );
 
     expect(screen.getByText("Privacy disclosure")).toBeInTheDocument();
     expect(screen.getByText("Apple Push (APNs)")).toBeInTheDocument();
     expect(screen.getByText("Android Push (FCM)")).toBeInTheDocument();
     expect(
-      screen.getByText(/content-free request to Prairie's push relay/),
+      screen.getByText(/content-free request to Silo's push relay/),
     ).toBeInTheDocument();
     expect(
       screen.getByText(/does not receive notification titles/),
@@ -129,12 +225,220 @@ describe("NotificationsAdminSettings", () => {
     expect(screen.getByText("Deployment ID")).toBeInTheDocument();
     expect(screen.getByText("Rotate credential")).toBeInTheDocument();
     expect(screen.getByText("Credential: cap_v1_test")).toBeInTheDocument();
-    expect(
-      screen.getByText(/Prairie renews automatically/),
-    ).toBeInTheDocument();
+    expect(screen.getByText(/Silo renews automatically/)).toBeInTheDocument();
     expect(screen.queryByText("Relay API Key")).not.toBeInTheDocument();
     expect(screen.queryByText("Smoke Test Profile ID")).not.toBeInTheDocument();
     expect(screen.queryByText("Server Device ID")).not.toBeInTheDocument();
     expect(screen.queryByText("Send test push")).not.toBeInTheDocument();
   });
+
+  it("configures the mail server inside the Email channel card", async () => {
+    restartKeysMock.mockReturnValue(new Set(["email.smtp_host"]));
+    useSettingsFormMock.mockReturnValue(
+      makeForm({
+        "email.smtp_host": "smtp.example.com",
+        "email.enabled": "true",
+        // Readiness mirrors the server rule: no sender address, not ready.
+        "email.from_address": "silo@example.com",
+      }),
+    );
+
+    render(renderPage());
+
+    expect(screen.getByText("Mail server set up")).toBeInTheDocument();
+    expect(screen.queryByText("Mail server address")).not.toBeInTheDocument();
+
+    await openChannel(EMAIL_CHANNEL);
+
+    expect(screen.getByText("Send email from this server")).toBeInTheDocument();
+    expect(screen.getByText("Mail server address")).toBeInTheDocument();
+    expect(screen.getByText("Port")).toBeInTheDocument();
+    expect(screen.getByText("Encryption")).toBeInTheDocument();
+    expect(screen.getByText("Password")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Send test" }),
+    ).toBeInTheDocument();
+    // The restart badge comes from the compiled key list, not from hint text.
+    expect(
+      screen.getAllByLabelText("Takes effect after a server restart").length,
+    ).toBe(1);
+  });
+
+  it("shows the saved SMTP password as a masked, editable input", async () => {
+    const form = makeForm();
+    form.sensitiveConfigured = ["email.smtp_password"];
+    useSettingsFormMock.mockReturnValue(form);
+
+    render(renderPage());
+    await openChannel(EMAIL_CHANNEL);
+
+    // No Replace step: typing stages a replacement, blank keeps the saved one.
+    const input = screen.getByLabelText("Password");
+    expect(input).toHaveAttribute("type", "password");
+    expect(input).toHaveAttribute("placeholder", "••••••••••••");
+    expect(
+      screen.queryByRole("button", { name: /Replace/ }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("configures the Discord application inside the Discord channel card", async () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "discord.client_id": "1234567890" }),
+    );
+
+    render(renderPage());
+    await openChannel(DISCORD_CHANNEL);
+
+    expect(
+      screen.queryByRole("link", { name: "Integrations tab" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByLabelText("Client ID")).toHaveValue("1234567890");
+    expect(screen.getByText("Client secret")).toBeInTheDocument();
+    expect(screen.getByText("Bot token")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Test bot token" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Show setup guide/ }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Invite bot to server/ }),
+    ).toBeInTheDocument();
+    // Delivery and appearance stay here.
+    expect(screen.getByText("Artwork")).toBeInTheDocument();
+    expect(
+      screen.getByText("Let people pick a DM per episode"),
+    ).toBeInTheDocument();
+  });
+
+  it("confirms the invite link copy only once it has actually happened", async () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "discord.client_id": "1234567890" }),
+    );
+
+    render(renderPage());
+    await openChannel(DISCORD_CHANNEL);
+    await userEvent.click(screen.getByRole("button", { name: /Copy link/ }));
+
+    expect(mocks.copyTextToClipboard).toHaveBeenCalledWith(
+      expect.stringContaining("client_id=1234567890"),
+    );
+    await waitFor(() =>
+      expect(mocks.toastSuccess).toHaveBeenCalledWith("Invite link copied"),
+    );
+    expect(mocks.toastError).not.toHaveBeenCalled();
+  });
+
+  it("says so when the invite link could not be copied", async () => {
+    // Denied permission, or a browser that only exposes the clipboard on a
+    // secure origin — which a LAN server reached over plain HTTP is not.
+    mocks.copyTextToClipboard.mockRejectedValue(new Error("clipboard blocked"));
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "discord.client_id": "1234567890" }),
+    );
+
+    render(renderPage());
+    await openChannel(DISCORD_CHANNEL);
+    await userEvent.click(screen.getByRole("button", { name: /Copy link/ }));
+
+    await waitFor(() =>
+      expect(mocks.toastError).toHaveBeenCalledWith(
+        "Couldn't copy the invite link — select it and copy it manually",
+      ),
+    );
+    expect(mocks.toastSuccess).not.toHaveBeenCalled();
+  });
+
+  it("saves the Discord application on its own, not through the page save bar", async () => {
+    const form = makeForm({ "discord.client_id": "1234567890" });
+    useSettingsFormMock.mockReturnValue(form);
+
+    render(renderPage());
+    await openChannel(DISCORD_CHANNEL);
+    await userEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    expect(updateSettingsMock).toHaveBeenCalledWith({
+      "discord.client_id": "1234567890",
+    });
+    expect(form.save).not.toHaveBeenCalled();
+  });
+
+  it("clears the Discord application behind a confirmation", async () => {
+    const form = makeForm({ "discord.client_id": "1234567890" });
+    useSettingsFormMock.mockReturnValue(form);
+
+    render(renderPage());
+    await openChannel(DISCORD_CHANNEL);
+    await userEvent.click(
+      screen.getByRole("button", { name: "Clear credentials" }),
+    );
+
+    expect(
+      screen.getByText("Clear Discord app credentials?"),
+    ).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: /^Clear$/ }));
+
+    expect(updateSettingsMock).toHaveBeenCalledWith({
+      "discord.client_id": "",
+      "discord.client_secret": "",
+      "discord.bot_token": "",
+    });
+  });
+
+  it("counts the enabled channels on the pipeline card", () => {
+    useSettingsFormMock.mockReturnValue(makeForm());
+
+    render(renderPage());
+
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Notifications" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("5/7 channels on")).toBeInTheDocument();
+  });
+
+  it("warns on the pipeline card when sending is paused", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "notifications.fanout_enabled": "false" }),
+    );
+
+    render(renderPage());
+
+    expect(
+      screen.getByText("Sending is paused; new content waits in the queue."),
+    ).toBeInTheDocument();
+  });
+
+  it("hides tuning and webhook limits behind Advanced disclosures", async () => {
+    useSettingsFormMock.mockReturnValue(makeForm());
+
+    render(renderPage());
+    await openChannel(WEBHOOK_CHANNEL);
+
+    expect(screen.queryByText("Settle window")).not.toBeInTheDocument();
+    expect(screen.queryByText("Read notifications")).not.toBeInTheDocument();
+    expect(screen.queryByText("Webhooks per person")).not.toBeInTheDocument();
+
+    for (const toggle of screen.getAllByRole("button", {
+      name: /Advanced · 3 settings/,
+    })) {
+      await userEvent.click(toggle);
+    }
+
+    expect(screen.getByText("Settle window")).toBeInTheDocument();
+    expect(screen.getByText("Read notifications")).toBeInTheDocument();
+    expect(screen.getByText("Webhooks per person")).toBeInTheDocument();
+  });
+
+  it("auto-expands an advanced disclosure that holds a staged change", async () => {
+    const form = makeForm();
+    form.isDirty = vi.fn(
+      (key: string) => key === "notifications.retention.read_days",
+    );
+    useSettingsFormMock.mockReturnValue(form);
+
+    render(renderPage());
+
+    expect(screen.getByText("Read notifications")).toBeInTheDocument();
+    expect(screen.queryByText("Settle window")).not.toBeInTheDocument();
+  });
 });
diff --git a/web/src/pages/admin-settings/NotificationsAdminSettings.tsx b/web/src/pages/admin-settings/NotificationsAdminSettings.tsx
index 1ed01b940..63f57e1f6 100644
--- a/web/src/pages/admin-settings/NotificationsAdminSettings.tsx
+++ b/web/src/pages/admin-settings/NotificationsAdminSettings.tsx
@@ -16,7 +16,6 @@ import {
   Megaphone,
   MonitorSmartphone,
   RadioTower,
-  RotateCcw,
   Rss,
   Send,
   TriangleAlert,
@@ -24,7 +23,6 @@ import {
   Workflow,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
-import { Link } from "react-router";
 import { toast } from "sonner";
 import { api } from "@/api/client";
 import { Button } from "@/components/ui/button";
@@ -38,17 +36,75 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+import { SecretField } from "@/components/settings/SecretField";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import { SettingsSubheading } from "@/components/settings/SettingsSubheading";
 import { adminKeys } from "@/hooks/queries/keys";
 import { useServerNotificationChannels } from "@/hooks/queries/admin/serverNotificationChannels";
+import { useUpdateServerSettings } from "@/hooks/queries/admin/settings";
+import { useRestartKeys } from "@/hooks/useRestartKeys";
 import { useSettingsForm } from "@/hooks/useSettingsForm";
+import { useReportUnsavedChanges } from "@/hooks/useUnsavedChanges";
+import { emailReady } from "@/lib/emailReadiness";
+import { copyTextToClipboard } from "@/lib/clipboard";
 import { cn } from "@/lib/utils";
 import { FieldGroup } from "./FieldGroup";
 import { SaveBar } from "./SaveBar";
 import { SettingField } from "./SettingField";
 import ServerNotificationChannels from "./ServerNotificationChannels";
 
+/** Batching and flood control; all advanced. */
+const FANOUT_KEYS = [
+  "notifications.fanout.settle_seconds",
+  "notifications.fanout.max_series_burst",
+  "notifications.fanout.max_event_age_hours",
+];
+
+/** Inbox and event cleanup; all advanced. */
+const RETENTION_KEYS = [
+  "notifications.retention.read_days",
+  "notifications.retention.unread_days",
+  "notifications.retention.event_days",
+];
+
+/** Personal webhook limits and the SSRF escape hatch; all advanced. */
+const WEBHOOK_ADVANCED_KEYS = [
+  "notifications.webhooks.max_per_profile",
+  "notifications.webhooks.deliveries_per_minute_per_profile",
+  "notifications.webhooks.allow_private_destinations",
+];
+
+/**
+ * Outbound mail. The SMTP server used to be its own tab; it now lives in the
+ * Email channel card because "email notifications don't arrive" is always an
+ * SMTP question.
+ */
+const EMAIL_KEYS = [
+  "email.enabled",
+  "email.smtp_host",
+  "email.smtp_port",
+  "email.smtp_security",
+  "email.smtp_username",
+  "email.smtp_password",
+  "email.from_address",
+  "email.from_name",
+];
+
+/**
+ * The Discord application. Saved by its own card inside the Discord channel
+ * (a bot token has to be testable before it is committed), but listed here so
+ * one form owns every value this page reads.
+ */
+const DISCORD_APP_KEYS = [
+  "discord.client_id",
+  "discord.client_secret",
+  "discord.bot_token",
+];
+
 const KEYS = [
   "notifications.release_events_enabled",
   "notifications.fanout_enabled",
@@ -64,12 +120,8 @@ const KEYS = [
   "notifications.push_relay_expires_at",
   "notifications.push_relay_key_prefix",
   "notifications.push_relay_reregistration_required",
-  "notifications.fanout.settle_seconds",
-  "notifications.fanout.max_series_burst",
-  "notifications.fanout.max_event_age_hours",
-  "notifications.webhooks.max_per_profile",
-  "notifications.webhooks.allow_private_destinations",
-  "notifications.webhooks.deliveries_per_minute_per_profile",
+  ...FANOUT_KEYS,
+  ...WEBHOOK_ADVANCED_KEYS,
   "notifications.email_enabled",
   "notifications.email.allow_per_episode",
   "notifications.email.digest_hour",
@@ -81,15 +133,12 @@ const KEYS = [
   "notifications.server_channels_enabled",
   "notifications.server_channels.batch_seconds",
   "notifications.server_channels.mention_requesters",
-  "discord.client_id",
-  "discord.client_secret",
-  "discord.bot_token",
-  "notifications.retention.read_days",
-  "notifications.retention.unread_days",
-  "notifications.retention.event_days",
+  ...RETENTION_KEYS,
+  ...EMAIL_KEYS,
+  ...DISCORD_APP_KEYS,
 ];
 
-interface DiscordTestResult {
+interface EmailTestResult {
   ok: boolean;
   duration_ms: number;
   message?: string;
@@ -105,15 +154,7 @@ interface AppleRelayRegisterResult {
   expires_at: string;
 }
 
-const DEFAULT_PUSH_RELAY_URL = "https://push.prairie-server.org";
-
-/**
- * Invite link for adding the bot to a Discord server. Membership alone is
- * enough to DM, so no permissions are requested.
- */
-function discordInviteUrl(clientId: string): string {
-  return `https://discord.com/oauth2/authorize?client_id=${encodeURIComponent(clientId)}&scope=bot&permissions=0`;
-}
+const DEFAULT_PUSH_RELAY_URL = "https://push.siloserver.org";
 
 function digestHourLabel(raw: string): string {
   const hour = Number.parseInt(raw, 10);
@@ -145,31 +186,11 @@ function Chip({
   );
 }
 
-function ZoneHeading({
-  title,
-  description,
-}: {
-  title: string;
-  description?: string;
-}) {
-  return (
-    <div className="space-y-1 px-1">
-      <h3 className="text-muted-foreground text-xs font-semibold tracking-[0.22em] uppercase">
-        {title}
-      </h3>
-      {description && (
-        <p className="text-muted-foreground/80 text-xs">{description}</p>
-      )}
-    </div>
-  );
-}
-
-/** Sub-grouping label inside an expanded channel card. */
-function SubsectionLabel({ children }: { children: React.ReactNode }) {
+function ZoneHeading({ title }: { title: string }) {
   return (
-    <div className="text-muted-foreground/80 pt-4 pb-1 text-[11px] font-semibold tracking-wider uppercase">
-      {children}
-    </div>
+    <h3 className="text-muted-foreground px-1 text-xs font-semibold tracking-[0.22em] uppercase">
+      {title}
+    </h3>
   );
 }
 
@@ -310,6 +331,276 @@ function ChannelCard({
   );
 }
 
+/** Sends a real message through the saved SMTP settings. */
+function TestEmailRow() {
+  const [recipient, setRecipient] = useState("");
+  const [pending, setPending] = useState(false);
+  const [result, setResult] = useState<EmailTestResult | null>(null);
+
+  const sendTest = async () => {
+    setPending(true);
+    setResult(null);
+    try {
+      const response = await api<EmailTestResult>("/admin/email/test", {
+        method: "POST",
+        body: JSON.stringify({ to: recipient.trim() }),
+      });
+      setResult(response);
+      if (response.ok) {
+        toast.success("Test email sent");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Test request failed",
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <div className="space-y-2 py-3">
+      <div className="flex max-w-md gap-2">
+        <Input
+          type="email"
+          aria-label="Test email recipient"
+          placeholder="you@example.com"
+          value={recipient}
+          onChange={(event) => setRecipient(event.target.value)}
+        />
+        <Button
+          variant="outline"
+          disabled={pending || !recipient.trim()}
+          onClick={() => void sendTest()}
+        >
+          {pending ? (
+            <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+          ) : (
+            <Send className="mr-1.5 h-4 w-4" />
+          )}
+          Send test
+        </Button>
+      </div>
+      {result && (
+        <p
+          className={`text-xs ${result.ok ? "text-emerald-500" : "text-amber-500"}`}
+        >
+          {result.ok
+            ? `Delivered to the mail server in ${result.duration_ms}ms.`
+            : result.message || "Test failed."}
+        </p>
+      )}
+      <p className="text-muted-foreground text-xs">
+        Save your changes first; the test uses the saved settings.
+      </p>
+    </div>
+  );
+}
+
+function RegisterRelayRow({
+  relayURL,
+  deploymentID,
+  keyPrefix,
+  expiresAt,
+  reregistrationRequired,
+  urlEdited,
+  onRegistered,
+}: {
+  relayURL: string;
+  deploymentID: string;
+  keyPrefix: string;
+  expiresAt: string;
+  reregistrationRequired: boolean;
+  urlEdited: boolean;
+  onRegistered: (submittedRelayURL: string) => void;
+}) {
+  const queryClient = useQueryClient();
+  const [pending, setPending] = useState(false);
+  const [confirmClear, setConfirmClear] = useState(false);
+  const [result, setResult] = useState<AppleRelayRegisterResult | null>(null);
+  const [nowMs] = useState(() => Date.now());
+
+  const configured = deploymentID.trim() !== "";
+  const actionLabel = reregistrationRequired
+    ? "Re-register relay"
+    : configured
+      ? "Rotate credential"
+      : "Register relay";
+  const expiration = expiresAt ? new Date(expiresAt) : null;
+  const expirationValid =
+    expiration != null && !Number.isNaN(expiration.getTime());
+  const renewalStatus = expirationValid
+    ? expiration.getTime() <= nowMs
+      ? "Expired; Silo renews it before the next delivery."
+      : `Expires ${expiration.toLocaleString()}; Silo renews automatically.`
+    : configured
+      ? "Expiration unknown; Silo refreshes the credential on its next renewal."
+      : "No relay credential is registered.";
+
+  const registerRelay = async () => {
+    if (pending) return;
+    setPending(true);
+    setResult(null);
+    try {
+      const response = await api<AppleRelayRegisterResult>(
+        "/admin/notifications/push/relay/register",
+        {
+          method: "POST",
+          body: JSON.stringify({
+            relay_url: relayURL,
+          }),
+        },
+      );
+      setResult(response);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: adminKeys.serverSettings() }),
+        queryClient.invalidateQueries({
+          queryKey: [
+            ...adminKeys.serverSettings(),
+            "sensitive-status",
+          ] as const,
+        }),
+      ]);
+      onRegistered(relayURL);
+      toast.success("Push relay registered");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Relay registration failed",
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const clearRelay = async () => {
+    if (pending) return;
+    setPending(true);
+    setResult(null);
+    try {
+      await api<void>("/admin/notifications/push/relay", { method: "DELETE" });
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: adminKeys.serverSettings() }),
+        queryClient.invalidateQueries({
+          queryKey: [
+            ...adminKeys.serverSettings(),
+            "sensitive-status",
+          ] as const,
+        }),
+      ]);
+      setConfirmClear(false);
+      toast.success("Push relay credential cleared");
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to clear relay credential",
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3 py-3">
+      <SettingField
+        label="Deployment ID"
+        description="Created for you when you register."
+        type="text"
+        value={deploymentID}
+        onChange={() => {}}
+        disabled
+      />
+      <div className="flex flex-wrap items-center gap-2 py-2">
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={pending}
+          onClick={() => void registerRelay()}
+        >
+          {pending ? (
+            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <KeyRound className="mr-1.5 h-3.5 w-3.5" />
+          )}
+          {actionLabel}
+        </Button>
+        {configured && (
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={pending}
+            onClick={() => setConfirmClear(true)}
+          >
+            Clear credential
+          </Button>
+        )}
+      </div>
+      {reregistrationRequired && (
+        <div className="text-xs text-amber-500">
+          The relay credential was rejected or revoked; re-register to create a
+          new deployment.
+        </div>
+      )}
+      <div className="text-muted-foreground space-y-1 text-xs">
+        {keyPrefix && <div>Credential: {keyPrefix}</div>}
+        <div>{renewalStatus}</div>
+      </div>
+      {urlEdited && (
+        <div className="text-muted-foreground text-xs">
+          Register to apply the new relay URL.
+        </div>
+      )}
+      {result && (
+        <div className="text-xs text-emerald-500">
+          Credential ready for {result.deployment_id}
+          {result.key_prefix ? `, key ${result.key_prefix}` : ""}
+          {result.relay_request_id ? `, relay ${result.relay_request_id}` : ""}
+        </div>
+      )}
+      <AlertDialog open={confirmClear} onOpenChange={setConfirmClear}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Clear the push relay credential?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Mobile push delivery stops until a relay is registered again.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={pending}
+              onClick={() => void clearRelay()}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {pending ? "Clearing..." : "Clear credential"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Discord application credentials
+// ---------------------------------------------------------------------------
+
+interface DiscordTestResult {
+  ok: boolean;
+  duration_ms: number;
+  message?: string;
+}
+
+/**
+ * Invite link for adding the bot to a Discord server. Membership alone is
+ * enough to DM, so no permissions are requested.
+ */
+function discordInviteUrl(clientId: string): string {
+  return `https://discord.com/oauth2/authorize?client_id=${encodeURIComponent(clientId)}&scope=bot&permissions=0`;
+}
+
 function DiscordSetupGuide() {
   const [open, setOpen] = useState(false);
   const guideId = useId();
@@ -346,13 +637,13 @@ function DiscordSetupGuide() {
               <code className="bg-muted mx-1 rounded px-1">
                 {"<public URL>"}/api/v1/notifications/discord/link/callback
               </code>
-              using this server&apos;s public URL (PRAIRIE_PUBLIC_URL) — it must
+              using this server&apos;s public URL (SILO_PUBLIC_URL) — it must
               match exactly.
             </li>
             <li>
               Bot page: reset and copy the <strong>Token</strong>. Leave all
               Privileged Gateway Intents (Presence, Server Members, Message
-              Content) <strong>off</strong> — Prairie never connects to the
+              Content) <strong>off</strong> — Silo never connects to the
               gateway; it only sends DMs.
             </li>
             <li>
@@ -379,10 +670,28 @@ function InviteBotRow({ clientId }: { clientId: string }) {
   const [copied, setCopied] = useState(false);
   const trimmed = clientId.trim();
 
+  // The copy can genuinely fail — a denied permission, or a browser that only
+  // exposes the async clipboard on a secure origin, which a LAN server reached
+  // over plain HTTP is not. Claiming success there sends the admin off to paste
+  // an invite link they do not have.
+  async function copyInviteLink() {
+    try {
+      await copyTextToClipboard(discordInviteUrl(trimmed));
+      setCopied(true);
+      toast.success("Invite link copied");
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error(
+        "Couldn't copy the invite link — select it and copy it manually",
+      );
+    }
+  }
+
   return (
     <div className="space-y-2 py-2">
       <div className="flex flex-wrap gap-1.5">
         <Button
+          type="button"
           variant="outline"
           size="sm"
           disabled={!trimmed}
@@ -398,15 +707,11 @@ function InviteBotRow({ clientId }: { clientId: string }) {
           Invite bot to server
         </Button>
         <Button
+          type="button"
           variant="outline"
           size="sm"
           disabled={!trimmed}
-          onClick={() => {
-            void navigator.clipboard.writeText(discordInviteUrl(trimmed));
-            setCopied(true);
-            toast.success("Invite link copied");
-            window.setTimeout(() => setCopied(false), 2000);
-          }}
+          onClick={() => void copyInviteLink()}
         >
           {copied ? (
             <Check className="mr-1.5 h-3.5 w-3.5" />
@@ -418,311 +723,222 @@ function InviteBotRow({ clientId }: { clientId: string }) {
       </div>
       <div className="text-muted-foreground text-xs">
         {trimmed
-          ? "Anyone with Manage Server permission on your Discord server can open this link to add the bot. Users must be members of that server to receive DMs."
-          : "Enter the Client ID above to generate the invite link."}
+          ? "Users must be in that server to receive DMs."
+          : "Enter the Client ID to generate the invite link."}
       </div>
     </div>
   );
 }
 
-function TestDiscordRow({ unsaved }: { unsaved: boolean }) {
-  const [pending, setPending] = useState(false);
-  const [result, setResult] = useState<DiscordTestResult | null>(null);
-
-  const runTest = async () => {
-    setPending(true);
-    setResult(null);
-    try {
-      const response = await api<DiscordTestResult>(
-        "/admin/notifications/discord/test",
-        {
-          method: "POST",
-        },
-      );
-      setResult(response);
-      if (response.ok) {
-        toast.success("Discord bot connected");
-      }
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : "Test request failed",
-      );
-    } finally {
-      setPending(false);
-    }
-  };
-
-  return (
-    <div className="space-y-2 py-2">
-      <Button
-        variant="outline"
-        size="sm"
-        disabled={pending || unsaved}
-        onClick={() => void runTest()}
-      >
-        {pending ? (
-          <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
-        ) : (
-          <Send className="mr-1.5 h-3.5 w-3.5" />
-        )}
-        Test bot token
-      </Button>
-      {unsaved && (
-        <div className="text-muted-foreground text-xs">
-          Save your changes first — the test uses the saved credentials.
-        </div>
-      )}
-      {result && (
-        <div
-          className={`text-xs ${result.ok ? "text-emerald-500" : "text-amber-500"}`}
-        >
-          {result.ok ? "Success" : "Failed"} ({result.duration_ms}ms)
-          {result.message ? ` — ${result.message}` : ""}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ClearDiscordCredentialsRow({
-  configured,
-  onClear,
-}: {
-  configured: boolean;
-  onClear: () => void;
-}) {
-  const [open, setOpen] = useState(false);
-  if (!configured) return null;
-
-  return (
-    <div className="py-2">
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        onClick={() => setOpen(true)}
-      >
-        <RotateCcw />
-        Clear Discord credentials
-      </Button>
-      <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Clear all Discord credentials?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This stages removal of the client ID, client secret, and bot
-              token. Discord linking and delivery stop after you save the
-              settings form.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              onClick={() => {
-                onClear();
-                setOpen(false);
-                toast.info(
-                  "Discord credential removal staged. Save changes to apply it.",
-                );
-              }}
-            >
-              Stage credential removal
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-}
-
-function RegisterRelayRow({
-  relayURL,
-  deploymentID,
-  keyPrefix,
-  expiresAt,
-  reregistrationRequired,
-  urlEdited,
-  onRegistered,
+/**
+ * The Discord application itself — client id, secret, bot token. It lives in
+ * the Discord channel card because "why didn't my DM arrive" is always a
+ * question about these three values, and it saves on its own so the bot token
+ * can be tested before the page's other edits are committed.
+ */
+function DiscordAppCredentials({
+  savedClientId,
+  sensitiveConfigured,
+  restartKeys,
 }: {
-  relayURL: string;
-  deploymentID: string;
-  keyPrefix: string;
-  expiresAt: string;
-  reregistrationRequired: boolean;
-  urlEdited: boolean;
-  onRegistered: (submittedRelayURL: string) => void;
+  savedClientId: string;
+  sensitiveConfigured: string[];
+  restartKeys: ReturnType<typeof useRestartKeys>;
 }) {
-  const queryClient = useQueryClient();
-  const [pending, setPending] = useState(false);
+  const updateSettings = useUpdateServerSettings();
+  // `null` follows the saved value; a draft is only pinned while the admin is
+  // editing, so a refetch cannot overwrite typing in progress.
+  const [clientIdDraft, setClientIdDraft] = useState<string | null>(null);
+  const [clientSecret, setClientSecret] = useState("");
+  const [botToken, setBotToken] = useState("");
+  const [testResult, setTestResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
+  const [testing, setTesting] = useState(false);
   const [confirmClear, setConfirmClear] = useState(false);
-  const [result, setResult] = useState<AppleRelayRegisterResult | null>(null);
 
-  const configured = deploymentID.trim() !== "";
-  const actionLabel = reregistrationRequired
-    ? "Re-register relay"
-    : configured
-      ? "Rotate credential"
-      : "Register relay";
-  const expiration = expiresAt ? new Date(expiresAt) : null;
-  const expirationValid =
-    expiration != null && !Number.isNaN(expiration.getTime());
-  const [evaluatedAt] = useState(() => Date.now());
-  const renewalStatus = expirationValid
-    ? expiration.getTime() <= evaluatedAt
-      ? "Expired; Prairie will renew before the next delivery when the relay grace period permits."
-      : `Expires ${expiration.toLocaleString()}; Prairie renews automatically during the final week with per-server jitter.`
-    : configured
-      ? "Expiration is unknown; the credential will be refreshed on its next lifecycle operation."
-      : "No relay credential is registered.";
+  const clientId = clientIdDraft ?? savedClientId;
+  const configuredKeys = new Set(sensitiveConfigured);
+  const secretConfigured = configuredKeys.has("discord.client_secret");
+  const tokenConfigured = configuredKeys.has("discord.bot_token");
+  const ready =
+    savedClientId.trim() !== "" && secretConfigured && tokenConfigured;
+  const unsaved =
+    clientId !== savedClientId ||
+    clientSecret.trim() !== "" ||
+    botToken.trim() !== "";
+  // The card's drafts live outside useSettingsForm, so the navigation guard
+  // and the reload prompt only see them through this report.
+  useReportUnsavedChanges(unsaved);
+  const anyStored =
+    savedClientId.trim() !== "" || secretConfigured || tokenConfigured;
+
+  async function save() {
+    const updates: Record<string, string> = { "discord.client_id": clientId };
+    if (clientSecret.trim() !== "")
+      updates["discord.client_secret"] = clientSecret;
+    if (botToken.trim() !== "") updates["discord.bot_token"] = botToken;
+    try {
+      await updateSettings.mutateAsync(updates);
+      setClientIdDraft(null);
+      setClientSecret("");
+      setBotToken("");
+      setTestResult(null);
+      toast.success("Discord credentials saved");
+    } catch {
+      // The mutation surfaces the API error.
+    }
+  }
 
-  const registerRelay = async () => {
-    if (pending) return;
-    setPending(true);
-    setResult(null);
+  async function clearAll() {
     try {
-      const response = await api<AppleRelayRegisterResult>(
-        "/admin/notifications/push/relay/register",
+      await updateSettings.mutateAsync({
+        "discord.client_id": "",
+        "discord.client_secret": "",
+        "discord.bot_token": "",
+      });
+      setClientIdDraft(null);
+      setClientSecret("");
+      setBotToken("");
+      setTestResult(null);
+      toast.success("Discord credentials cleared");
+    } catch {
+      // The mutation surfaces the API error.
+    }
+  }
+
+  async function runTest() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const response = await api<DiscordTestResult>(
+        "/admin/notifications/discord/test",
         {
           method: "POST",
-          body: JSON.stringify({
-            relay_url: relayURL,
-          }),
         },
       );
-      setResult(response);
-      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: adminKeys.serverSettings() }),
-        queryClient.invalidateQueries({
-          queryKey: [
-            ...adminKeys.serverSettings(),
-            "sensitive-status",
-          ] as const,
-        }),
-      ]);
-      onRegistered(relayURL);
-      toast.success("Push relay registered");
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : "Relay registration failed",
-      );
-    } finally {
-      setPending(false);
-    }
-  };
-
-  const clearRelay = async () => {
-    if (pending) return;
-    setPending(true);
-    setResult(null);
-    try {
-      await api<void>("/admin/notifications/push/relay", { method: "DELETE" });
-      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: adminKeys.serverSettings() }),
-        queryClient.invalidateQueries({
-          queryKey: [
-            ...adminKeys.serverSettings(),
-            "sensitive-status",
-          ] as const,
-        }),
-      ]);
-      setConfirmClear(false);
-      toast.success("Push relay credential cleared");
+      setTestResult({
+        success: response.ok,
+        message: `${response.ok ? "Success" : "Failed"} (${response.duration_ms}ms)${
+          response.message ? `: ${response.message}` : ""
+        }`,
+      });
     } catch (error) {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to clear relay credential",
-      );
+      setTestResult({
+        success: false,
+        message:
+          error instanceof Error ? error.message : "Test request failed.",
+      });
     } finally {
-      setPending(false);
+      setTesting(false);
     }
-  };
+  }
 
   return (
-    <div className="space-y-3 py-3">
-      <SettingField
-        label="Deployment ID"
-        hint="Opaque relay account for this Prairie server; created during registration"
-        type="text"
-        value={deploymentID}
-        onChange={() => {}}
-        disabled
-      />
-      <div className="flex flex-wrap items-center gap-2 py-2">
+    <>
+      <SettingsSubheading>Application</SettingsSubheading>
+      <DiscordSetupGuide />
+      <div className="settings-field-list">
+        <SettingField
+          label="Client ID"
+          value={clientId}
+          onChange={setClientIdDraft}
+          description="From the application's OAuth2 page."
+          restartRequired={restartKeys.has("discord.client_id")}
+        />
+      </div>
+      <InviteBotRow clientId={clientId} />
+      <div className="settings-field-list">
+        <SecretField
+          label="Client secret"
+          value={clientSecret}
+          configured={secretConfigured}
+          onChange={setClientSecret}
+          hint="From the application's OAuth2 page."
+          restartRequired={restartKeys.has("discord.client_secret")}
+        />
+        <SecretField
+          label="Bot token"
+          value={botToken}
+          configured={tokenConfigured}
+          onChange={setBotToken}
+          hint="From the application's Bot page."
+          restartRequired={restartKeys.has("discord.bot_token")}
+        />
+      </div>
+      <div className="flex flex-wrap items-center gap-2 py-3">
         <Button
-          variant="outline"
+          type="button"
           size="sm"
-          disabled={pending}
-          onClick={() => void registerRelay()}
+          onClick={() => void save()}
+          disabled={updateSettings.isPending}
         >
-          {pending ? (
-            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
-          ) : (
-            <KeyRound className="mr-1.5 h-3.5 w-3.5" />
-          )}
-          {actionLabel}
+          {updateSettings.isPending ? "Saving..." : "Save"}
         </Button>
-        {configured && (
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          onClick={() => void runTest()}
+          disabled={testing || unsaved || !ready}
+        >
+          {testing ? "Testing..." : "Test bot token"}
+        </Button>
+        {anyStored && (
           <Button
-            variant="ghost"
+            type="button"
             size="sm"
-            disabled={pending}
+            variant="ghost"
             onClick={() => setConfirmClear(true)}
           >
-            <RotateCcw />
-            Clear credential
+            Clear credentials
           </Button>
         )}
       </div>
-      {reregistrationRequired && (
-        <div className="text-xs text-amber-500">
-          The current capability was rejected or revoked. Automatic registration
-          is disabled; re-register explicitly to create a new relay deployment.
-        </div>
-      )}
-      <div className="text-muted-foreground space-y-1 text-xs">
-        {keyPrefix && <div>Credential: {keyPrefix}</div>}
-        <div>{renewalStatus}</div>
-      </div>
-      {urlEdited && (
-        <div className="text-muted-foreground text-xs">
-          The relay URL change is applied when you register; credentials are
-          stored immediately.
-        </div>
+      {testResult && (
+        <p
+          role="status"
+          aria-live="polite"
+          className={cn(
+            "pb-2 text-xs",
+            testResult.success
+              ? "text-green-600 dark:text-green-400"
+              : "text-red-600 dark:text-red-400",
+          )}
+        >
+          {testResult.message}
+        </p>
       )}
-      {result && (
-        <div className="text-xs text-emerald-500">
-          Credential ready for {result.deployment_id}
-          {result.key_prefix ? ` — key ${result.key_prefix}` : ""}
-          {result.relay_request_id ? ` — relay ${result.relay_request_id}` : ""}
-        </div>
+      {unsaved && (
+        <p className="text-muted-foreground pb-2 text-xs">
+          Save first; the test uses the stored credentials.
+        </p>
       )}
       <AlertDialog open={confirmClear} onOpenChange={setConfirmClear}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>
-              Clear the push relay credential?
-            </AlertDialogTitle>
+            <AlertDialogTitle>Clear Discord app credentials?</AlertDialogTitle>
             <AlertDialogDescription>
-              Mobile push delivery will stop until a relay is registered again.
-              This clears the local deployment identity and lets you select a
-              different relay origin.
+              Account linking and Discord direct messages stop working
+              immediately.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
             <AlertDialogAction
-              disabled={pending}
-              onClick={() => void clearRelay()}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => {
+                void clearAll();
+                setConfirmClear(false);
+              }}
             >
-              {pending ? "Clearing..." : "Clear credential"}
+              Clear
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </div>
+    </>
   );
 }
 
@@ -732,8 +948,8 @@ function MobilePushPrivacyDisclosure() {
       <div className="text-sm font-medium">Privacy disclosure</div>
       <div className="text-muted-foreground space-y-2 text-xs leading-relaxed">
         <p>
-          If you enable push notifications, your Prairie Server sends a
-          content-free request to Prairie's push relay so Prairie can deliver
+          If you enable push notifications, your Silo Server sends a
+          content-free request to Silo's push relay so Silo can deliver
           notifications through Apple Push Notification service or Firebase
           Cloud Messaging.
         </p>
@@ -742,14 +958,14 @@ function MobilePushPrivacyDisclosure() {
           names, user names, profile names, or your server URL. It does process
           technical metadata needed to deliver and operate the service,
           including an opaque deployment identifier, push delivery timing,
-          request status, app topic, the IP address your self-hosted Prairie
-          Server uses to contact the relay, and a hashed device push token.
-          Apple or Google may also process standard push delivery metadata for
-          their platform.
+          request status, app topic, the IP address your self-hosted Silo Server
+          uses to contact the relay, and a hashed device push token. Apple or
+          Google may also process standard push delivery metadata for their
+          platform.
         </p>
         <p>
           Push notifications are generic; the app fetches private content
-          directly from your Prairie Server after receiving the push.
+          directly from your Silo Server after receiving the push.
         </p>
       </div>
     </div>
@@ -758,19 +974,26 @@ function MobilePushPrivacyDisclosure() {
 
 export default function NotificationsAdminSettings() {
   const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
+  const restartKeys = useRestartKeys();
   const { data: serverChannels } = useServerNotificationChannels();
   // Local draft for the relay URL; null means "show the saved value".
   const [pushRelayURLDraft, setPushRelayURLDraft] = useState<string | null>(
     null,
   );
+  // The relay URL draft lives outside useSettingsForm (only registration
+  // persists it), so the navigation guard and reload prompt only see it
+  // through this report. Above the loading return: hooks must be unconditional.
+  useReportUnsavedChanges(
+    pushRelayURLDraft !== null &&
+      pushRelayURLDraft !==
+        (form.getValue("notifications.push_relay_url") ||
+          DEFAULT_PUSH_RELAY_URL),
+  );
 
   if (form.isLoading) {
     return (
       <div className="space-y-6">
-        <div className="space-y-2">
-          <Skeleton className="h-7 w-44" />
-          <Skeleton className="h-4 w-full max-w-xl" />
-        </div>
+        <Skeleton className="h-7 w-44" />
         <Skeleton className="h-36 w-full rounded-2xl" />
         <div className="space-y-3">
           {[0, 1, 2, 3].map((i) => (
@@ -791,6 +1014,10 @@ export default function NotificationsAdminSettings() {
   // surface the effective default instead of an empty input.
   const numberValue = (key: string, fallback: string) =>
     form.getValue(key) || fallback;
+  const needsRestart = (key: string) => restartKeys.has(key);
+  const allRestart = (keys: string[]) =>
+    keys.every((key) => restartKeys.has(key));
+  const anyDirty = (keys: string[]) => keys.some(form.isDirty);
 
   const releaseEventsOn = isOn("notifications.release_events_enabled");
   const fanoutOn = isOn("notifications.fanout_enabled");
@@ -831,19 +1058,23 @@ export default function NotificationsAdminSettings() {
   const allowPrivate =
     form.getValue("notifications.webhooks.allow_private_destinations") ===
     "true";
-  // The test endpoint reads the SAVED credentials; testing with unsaved
-  // edits in the form would silently test the old values.
-  const discordCredentialsDirty = [
-    "discord.client_id",
-    "discord.client_secret",
-    "discord.bot_token",
-  ].some(form.isDirty);
-  const discordCredentialsReady =
+
+  // Mail readiness mirrors the server's rule (shared with the overview tile):
+  // the outbound switch, a server, AND a sender address — legacy rows and
+  // single-key writes can store enabled-without-sender, which cannot send.
+  const mailReady = emailReady(
+    form.getValue("email.enabled") === "true",
+    form.getValue("email.smtp_host"),
+    form.getValue("email.from_address"),
+  );
+  // The Discord application is configured in the Discord channel card below,
+  // next to the delivery settings it gates. "Configured" mirrors the server's
+  // own rule (DiscordConfigured): client id, client secret, AND bot token —
+  // a partial save (say, only the bot token) must not read as connected.
+  const discordAppConfigured =
     form.getValue("discord.client_id").trim() !== "" &&
-    ["discord.client_secret", "discord.bot_token"].every(
-      (key) =>
-        form.getValue(key) !== "" || form.sensitiveConfigured.includes(key),
-    );
+    form.sensitiveConfigured.includes("discord.client_secret") &&
+    form.sensitiveConfigured.includes("discord.bot_token");
 
   const channelStates = [
     uiOn,
@@ -864,23 +1095,16 @@ export default function NotificationsAdminSettings() {
   ).length;
 
   const pausedMessage = !releaseEventsOn
-    ? "Release events are off — nothing new is recorded, so no notifications are produced."
+    ? "New content is not being recorded, so nothing can be sent."
     : !fanoutOn
-      ? "Fanout is paused — events queue until it is re-enabled or they expire."
+      ? "Sending is paused; new content waits in the queue."
       : null;
 
   return (
     <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Notifications</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Operational controls for the notification system. All settings apply
-          live — no restart needed. Per-profile preferences live in each
-          user&apos;s own notification settings.
-        </p>
-      </div>
+      <SettingsPageHeader className="mb-6" title="Notifications" />
 
-      <div className="flex-1 space-y-7">
+      <div className="flex-1 space-y-5">
         {/* ── Pipeline: the master switches, framed as the flow they gate ── */}
         <div className="surface-panel rounded-2xl border-0 p-4 sm:p-5">
           <div className="text-muted-foreground mb-4 text-xs font-semibold tracking-[0.22em] uppercase">
@@ -889,8 +1113,8 @@ export default function NotificationsAdminSettings() {
           <div className="grid gap-4 md:grid-cols-[1fr_auto_1fr_auto_1fr] md:gap-3">
             <PipelineStage
               icon={Rss}
-              title="Record events"
-              description="Log new-content availability during library scans. Off stops notifications at the source."
+              title="Notice new content"
+              description="Record new items during library scans."
               control={
                 <Switch
                   checked={releaseEventsOn}
@@ -904,8 +1128,8 @@ export default function NotificationsAdminSettings() {
             <PipelineArrow />
             <PipelineStage
               icon={Workflow}
-              title="Fan out"
-              description="Match recorded events to interested profiles and queue deliveries."
+              title="Work out who wants it"
+              description="Match each item against everyone's preferences."
               dimmed={!releaseEventsOn}
               control={
                 <Switch
@@ -918,8 +1142,8 @@ export default function NotificationsAdminSettings() {
             <PipelineArrow />
             <PipelineStage
               icon={Bell}
-              title="Deliver"
-              description="Hand off to the delivery channels below."
+              title="Send it"
+              description="Hand queued messages to the channels below."
               dimmed={!releaseEventsOn || !fanoutOn}
               control={
                 <Chip>
@@ -938,15 +1162,12 @@ export default function NotificationsAdminSettings() {
 
         {/* ── Delivery channels ── */}
         <section className="space-y-3">
-          <ZoneHeading
-            title="Delivery Channels"
-            description="Where notifications go once fanout queues them. Channels can be configured while switched off."
-          />
+          <ZoneHeading title="Delivery Channels" />
 
           <ChannelCard
             icon={Inbox}
             title="In-App"
-            description="Advertise the notification inbox and preferences to web and client apps."
+            description="Notification inbox in the web, mobile, and TV apps."
             enabled={uiOn}
             onEnabledChange={setToggle("notifications.ui_enabled")}
           />
@@ -954,15 +1175,15 @@ export default function NotificationsAdminSettings() {
           <ChannelCard
             icon={MonitorSmartphone}
             title="Web Push"
-            description="Browser push notifications to subscribed devices."
+            description="Browser push to subscribed devices."
             enabled={webPushOn}
             onEnabledChange={setToggle("notifications.web_push_enabled")}
           />
 
           <ChannelCard
             icon={RadioTower}
-            title="Prairie Push Relay"
-            description="Content-free mobile wakeups through Prairie's relay, delivered by APNs or FCM."
+            title="Silo Push Relay"
+            description="Mobile push through Silo's relay, delivered by APNs or FCM."
             enabled={mobilePushOn}
             onEnabledChange={(enabled) => {
               form.setValue(
@@ -986,11 +1207,10 @@ export default function NotificationsAdminSettings() {
               )
             }
           >
-            <div className="divide-border divide-y">
+            <div className="settings-field-list">
               <MobilePushPrivacyDisclosure />
               <SettingField
                 label="Apple Push (APNs)"
-                hint="Deliver generic wakeups to registered iPhone, iPad, Apple TV, and Mac devices."
                 type="toggle"
                 value={String(applePushOn)}
                 onChange={(value) =>
@@ -999,10 +1219,12 @@ export default function NotificationsAdminSettings() {
                     value,
                   )
                 }
+                restartRequired={needsRestart(
+                  "notifications.apple_push_delivery_enabled",
+                )}
               />
               <SettingField
                 label="Android Push (FCM)"
-                hint="Deliver generic wakeups to registered Android phone and TV devices."
                 type="toggle"
                 value={String(androidPushOn)}
                 onChange={(value) =>
@@ -1011,13 +1233,17 @@ export default function NotificationsAdminSettings() {
                     value,
                   )
                 }
+                restartRequired={needsRestart(
+                  "notifications.android_push_delivery_enabled",
+                )}
               />
               <SettingField
                 label="Relay URL"
-                hint="Public relay endpoint used by this Prairie server; stored when you register"
+                description="Saved when you register below."
                 type="text"
                 value={pushRelayURL}
                 onChange={(v) => setPushRelayURLDraft(v)}
+                restartRequired={needsRestart("notifications.push_relay_url")}
               />
               <RegisterRelayRow
                 relayURL={pushRelayURL}
@@ -1041,55 +1267,140 @@ export default function NotificationsAdminSettings() {
           <ChannelCard
             icon={Mail}
             title="Email"
-            description="Notifications by email for accounts that opt in, as a daily digest or per episode."
+            description="Daily summary or a message per episode, for people who opt in."
             enabled={emailOn}
             onEnabledChange={setToggle("notifications.email_enabled")}
             chips={
-              <Chip>
-                Digest at{" "}
-                {digestHourLabel(
-                  form.getValue("notifications.email.digest_hour"),
+              <>
+                {mailReady ? (
+                  <Chip tone="positive">Mail server set up</Chip>
+                ) : (
+                  <Chip tone={emailOn ? "warning" : "neutral"}>
+                    Mail server not set up
+                  </Chip>
                 )}
-              </Chip>
+                <Chip>
+                  Summary at{" "}
+                  {digestHourLabel(
+                    form.getValue("notifications.email.digest_hour"),
+                  )}
+                </Chip>
+              </>
             }
           >
-            <div className="text-muted-foreground border-border/60 border-b py-3 text-xs">
-              Requires working SMTP — configure it on the{" "}
-              <Link
-                to="?tab=email"
-                className="text-foreground font-medium underline-offset-2 hover:underline"
-              >
-                Email settings page
-              </Link>
-              .
+            <SettingsSubheading>Mail Server</SettingsSubheading>
+            <div className="settings-field-list">
+              <SettingField
+                label="Send email from this server"
+                description="Covers every email Silo sends, not just notifications."
+                type="toggle"
+                value={form.getValue("email.enabled")}
+                onChange={(v) => form.setValue("email.enabled", v)}
+                restartRequired={needsRestart("email.enabled")}
+              />
+              <SettingField
+                label="From address"
+                hint="silo@example.com"
+                value={form.getValue("email.from_address")}
+                onChange={(v) => form.setValue("email.from_address", v)}
+                restartRequired={needsRestart("email.from_address")}
+              />
+              <SettingField
+                label="From name"
+                hint="Silo"
+                value={form.getValue("email.from_name")}
+                onChange={(v) => form.setValue("email.from_name", v)}
+                restartRequired={needsRestart("email.from_name")}
+              />
+              <SettingField
+                label="Mail server address"
+                hint="smtp.example.com"
+                value={form.getValue("email.smtp_host")}
+                onChange={(v) => form.setValue("email.smtp_host", v)}
+                restartRequired={needsRestart("email.smtp_host")}
+              />
+              <SettingField
+                label="Port"
+                description="587 for STARTTLS (typical), 465 for implicit TLS"
+                type="number"
+                value={form.getValue("email.smtp_port")}
+                onChange={(v) => form.setValue("email.smtp_port", v)}
+                restartRequired={needsRestart("email.smtp_port")}
+              />
+              <SettingField
+                label="Encryption"
+                description="Use whatever your mail provider documents."
+                type="select"
+                options={[
+                  { value: "starttls", label: "STARTTLS" },
+                  { value: "tls", label: "TLS (implicit)" },
+                  { value: "none", label: "None (insecure)" },
+                ]}
+                value={form.getValue("email.smtp_security") || "starttls"}
+                onChange={(v) => form.setValue("email.smtp_security", v)}
+                restartRequired={needsRestart("email.smtp_security")}
+              />
+              <SettingField
+                label="Username"
+                description="Leave empty if the mail server needs no sign-in."
+                value={form.getValue("email.smtp_username")}
+                onChange={(v) => form.setValue("email.smtp_username", v)}
+                restartRequired={needsRestart("email.smtp_username")}
+              />
+              <SecretField
+                label="Password"
+                value={form.getValue("email.smtp_password")}
+                configured={form.sensitiveConfigured.includes(
+                  "email.smtp_password",
+                )}
+                onKeep={() => form.resetValue("email.smtp_password")}
+                // The username above can be emptied for a relay that needs no
+                // sign-in; without this the password could not follow it.
+                onClear={() => form.setValue("email.smtp_password", "")}
+                cleared={form.isClearStaged("email.smtp_password")}
+                onChange={(v) => form.setValue("email.smtp_password", v)}
+                restartRequired={needsRestart("email.smtp_password")}
+              />
+              <TestEmailRow />
             </div>
-            <div className="divide-border divide-y">
+            <SettingsSubheading>Delivery</SettingsSubheading>
+            <div className="settings-field-list">
               <SettingField
-                label="Allow Per-Episode Email"
-                hint="Let users choose an email per episode instead of the daily digest. Off coerces those accounts to the digest."
+                label="Let people pick an email per episode"
+                description="Off sends them the daily summary instead."
                 type="toggle"
                 value={toggleValue("notifications.email.allow_per_episode")}
                 onChange={(v) =>
                   form.setValue("notifications.email.allow_per_episode", v)
                 }
+                restartRequired={needsRestart(
+                  "notifications.email.allow_per_episode",
+                )}
               />
               <SettingField
-                label="Digest Hour"
-                hint="Hour of day (0-23, server time) when daily digest emails go out (default 8)"
+                label="Daily summary hour"
+                description="In the server's own time zone."
+                unit="0-23"
                 type="number"
                 value={numberValue("notifications.email.digest_hour", "8")}
                 onChange={(v) =>
                   form.setValue("notifications.email.digest_hour", v)
                 }
+                restartRequired={needsRestart(
+                  "notifications.email.digest_hour",
+                )}
               />
               <SettingField
-                label="External URL"
-                hint="Public base URL of this server (e.g. https://prairie.example.com) used for links inside emails. Empty sends emails without links."
+                label="Public URL"
+                description="Used for links inside emails; leave empty to omit them."
                 type="text"
                 value={form.getValue("notifications.email.external_url")}
                 onChange={(v) =>
                   form.setValue("notifications.email.external_url", v)
                 }
+                restartRequired={needsRestart(
+                  "notifications.email.external_url",
+                )}
               />
             </div>
           </ChannelCard>
@@ -1097,111 +1408,78 @@ export default function NotificationsAdminSettings() {
           <ChannelCard
             icon={Bot}
             title="Discord"
-            description="Bot DMs for linked accounts, plus appearance for every Discord delivery surface."
+            description="Direct messages from your Discord bot to linked accounts."
             enabled={discordOn}
             onEnabledChange={setToggle("notifications.discord_enabled")}
             chips={
-              discordCredentialsReady ? (
-                <Chip tone="positive">Credentials configured</Chip>
+              discordAppConfigured ? (
+                <Chip tone="positive">Discord app connected</Chip>
               ) : (
                 <Chip tone={discordOn ? "warning" : "neutral"}>
-                  Setup required
+                  Discord app not connected
                 </Chip>
               )
             }
           >
-            <SubsectionLabel>Bot Setup</SubsectionLabel>
-            <DiscordSetupGuide />
-            <div className="divide-border divide-y">
-              <SettingField
-                label="Client ID"
-                hint="The Discord application's OAuth2 client ID (used for account linking)"
-                type="text"
-                value={form.getValue("discord.client_id")}
-                onChange={(v) => form.setValue("discord.client_id", v)}
-              />
-              <InviteBotRow clientId={form.getValue("discord.client_id")} />
-              <SettingField
-                label="Client Secret"
-                hint="The Discord application's OAuth2 client secret"
-                type="password"
-                value={form.getValue("discord.client_secret")}
-                sensitiveConfigured={form.sensitiveConfigured.includes(
-                  "discord.client_secret",
-                )}
-                onChange={(v) => form.setValue("discord.client_secret", v)}
-              />
-              <SettingField
-                label="Bot Token"
-                hint="The bot user's token (used to send DMs)"
-                type="password"
-                value={form.getValue("discord.bot_token")}
-                sensitiveConfigured={form.sensitiveConfigured.includes(
-                  "discord.bot_token",
-                )}
-                onChange={(v) => form.setValue("discord.bot_token", v)}
-              />
-              <TestDiscordRow unsaved={discordCredentialsDirty} />
-              <ClearDiscordCredentialsRow
-                configured={
-                  form.getValue("discord.client_id").trim() !== "" ||
-                  form.sensitiveConfigured.some((key) =>
-                    ["discord.client_secret", "discord.bot_token"].includes(
-                      key,
-                    ),
-                  )
-                }
-                onClear={() => {
-                  form.setValue("discord.client_id", "");
-                  form.setValue("discord.client_secret", "");
-                  form.setValue("discord.bot_token", "");
-                }}
-              />
-            </div>
-            <SubsectionLabel>Delivery</SubsectionLabel>
-            <div className="divide-border divide-y">
+            <DiscordAppCredentials
+              savedClientId={form.getValue("discord.client_id")}
+              sensitiveConfigured={form.sensitiveConfigured}
+              restartKeys={restartKeys}
+            />
+            <SettingsSubheading>Delivery</SettingsSubheading>
+            <div className="settings-field-list">
               <SettingField
-                label="Allow Per-Episode DMs"
-                hint="Let users choose a DM per episode instead of the daily digest. Off coerces those accounts to the digest."
+                label="Let people pick a DM per episode"
+                description="Off sends them the daily summary instead."
                 type="toggle"
                 value={toggleValue("notifications.discord.allow_per_episode")}
                 onChange={(v) =>
                   form.setValue("notifications.discord.allow_per_episode", v)
                 }
+                restartRequired={needsRestart(
+                  "notifications.discord.allow_per_episode",
+                )}
               />
               <SettingField
-                label="Digest Hour"
-                hint="Hour of day (0-23, server time) when daily digest DMs go out (default 8)"
+                label="Daily summary hour"
+                description="In the server's own time zone."
+                unit="0-23"
                 type="number"
                 value={numberValue("notifications.discord.digest_hour", "8")}
                 onChange={(v) =>
                   form.setValue("notifications.discord.digest_hour", v)
                 }
+                restartRequired={needsRestart(
+                  "notifications.discord.digest_hour",
+                )}
               />
             </div>
-            <SubsectionLabel>Appearance — All Discord Surfaces</SubsectionLabel>
+            <SettingsSubheading>Appearance</SettingsSubheading>
             <SettingField
-              label="Embed Posters"
-              hint="Artwork in outgoing Discord messages (personal webhooks, bot DMs, server channels). Provider CDNs serve posters from TMDB/TVDB and never reveal this server. Server storage additionally serves locally cached posters from this server's image storage — its URL becomes visible to message recipients and must be reachable from the internet."
+              label="Artwork"
+              description="Server images reveal your server URL to anyone who sees the message."
               type="select"
               value={
                 form.getValue("notifications.discord.poster_mode") || "provider"
               }
               options={[
-                { value: "provider", label: "Provider CDNs only (default)" },
-                { value: "server", label: "Provider CDNs + server storage" },
-                { value: "off", label: "No images" },
+                { value: "provider", label: "Provider images only" },
+                { value: "server", label: "Provider and server images" },
+                { value: "off", label: "No artwork" },
               ]}
               onChange={(v) =>
                 form.setValue("notifications.discord.poster_mode", v)
               }
+              restartRequired={needsRestart(
+                "notifications.discord.poster_mode",
+              )}
             />
           </ChannelCard>
 
           <ChannelCard
             icon={Webhook}
             title="Personal Webhooks"
-            description="User-created webhooks (Discord or generic) that receive their personal notifications — the server sends requests to user-chosen URLs."
+            description="Webhooks people create for themselves, Discord or generic."
             enabled={webhooksOn}
             onEnabledChange={setToggle("notifications.webhooks_enabled")}
             chips={
@@ -1210,10 +1488,13 @@ export default function NotificationsAdminSettings() {
               ) : undefined
             }
           >
-            <div className="divide-border divide-y">
+            <AdvancedSection
+              id="notifications.webhooks"
+              count={WEBHOOK_ADVANCED_KEYS.length}
+              forceOpen={anyDirty(WEBHOOK_ADVANCED_KEYS)}
+            >
               <SettingField
-                label="Max Webhooks Per Profile"
-                hint="How many webhooks a single profile may create (default 10)"
+                label="Webhooks per person"
                 type="number"
                 value={numberValue(
                   "notifications.webhooks.max_per_profile",
@@ -1222,10 +1503,14 @@ export default function NotificationsAdminSettings() {
                 onChange={(v) =>
                   form.setValue("notifications.webhooks.max_per_profile", v)
                 }
+                restartRequired={needsRestart(
+                  "notifications.webhooks.max_per_profile",
+                )}
               />
               <SettingField
-                label="Deliveries Per Minute Per Profile"
-                hint="Webhook delivery rate limit; over-limit notifications still reach the inbox (default 60)"
+                label="Deliveries per person"
+                description="Calls over the limit are dropped; the inbox notification still arrives."
+                unit="per minute"
                 type="number"
                 value={numberValue(
                   "notifications.webhooks.deliveries_per_minute_per_profile",
@@ -1237,10 +1522,13 @@ export default function NotificationsAdminSettings() {
                     v,
                   )
                 }
+                restartRequired={needsRestart(
+                  "notifications.webhooks.deliveries_per_minute_per_profile",
+                )}
               />
               <SettingField
-                label="Allow Private Destinations"
-                hint="Disables the SSRF guard so webhooks may target private and LAN addresses. Development only."
+                label="Allow webhooks to private addresses"
+                description="Allows LAN and localhost destinations; development only."
                 type="toggle"
                 value={form.getValue(
                   "notifications.webhooks.allow_private_destinations",
@@ -1251,24 +1539,26 @@ export default function NotificationsAdminSettings() {
                     v,
                   )
                 }
+                restartRequired={needsRestart(
+                  "notifications.webhooks.allow_private_destinations",
+                )}
               />
               {allowPrivate && (
                 <div className="flex items-start gap-2 py-3 text-xs text-amber-500">
                   <TriangleAlert className="mt-0.5 h-4 w-4 flex-shrink-0" />
                   <p>
-                    Private destinations are allowed: any user with webhook
-                    access can make this server send requests to internal
-                    network addresses. Leave this off outside development.
+                    Any user with webhook access can make this server send
+                    requests to internal network addresses.
                   </p>
                 </div>
               )}
-            </div>
+            </AdvancedSection>
           </ChannelCard>
 
           <ChannelCard
             icon={Megaphone}
             title="Server Channels"
-            description="Admin-created broadcasts that post server-wide events (new content, request activity) to shared destinations, like a community Discord channel."
+            description="Server-wide announcements posted to a shared destination."
             enabled={serverChannelsOn}
             onEnabledChange={setToggle("notifications.server_channels_enabled")}
             chips={
@@ -1285,10 +1575,11 @@ export default function NotificationsAdminSettings() {
               </>
             }
           >
-            <div className="divide-border divide-y">
+            <div className="settings-field-list">
               <SettingField
-                label="Batch Window (seconds)"
-                hint="How long new-content events collect before posting, so a season pack lands as one grouped message (default 300, minimum 120)"
+                label="Batch window"
+                description="New content waits this long so a season posts as one message."
+                unit="seconds"
                 type="number"
                 value={numberValue(
                   "notifications.server_channels.batch_seconds",
@@ -1300,10 +1591,13 @@ export default function NotificationsAdminSettings() {
                     v,
                   )
                 }
+                restartRequired={needsRestart(
+                  "notifications.server_channels.batch_seconds",
+                )}
               />
               <SettingField
-                label="Mention Requesters on Discord"
-                hint="Request posts to Discord destinations @mention the requesting user when their account has linked Discord (in user notification settings). Unlinked accounts show their Prairie username without a mention."
+                label="Mention the requester on Discord"
+                description="Unlinked accounts show their Silo username instead."
                 type="toggle"
                 value={form.getValue(
                   "notifications.server_channels.mention_requesters",
@@ -1314,6 +1608,9 @@ export default function NotificationsAdminSettings() {
                     v,
                   )
                 }
+                restartRequired={needsRestart(
+                  "notifications.server_channels.mention_requesters",
+                )}
               />
               <div className="pt-3">
                 <ServerNotificationChannels />
@@ -1322,80 +1619,126 @@ export default function NotificationsAdminSettings() {
           </ChannelCard>
         </section>
 
-        {/* ── Advanced ── */}
+        {/* ── Tuning: everything here has a working default ── */}
         <section className="space-y-3">
-          <ZoneHeading
-            title="Advanced"
-            description="Batching, flood control, and cleanup. The defaults work well for most servers."
-          />
-          <div className="grid gap-3 xl:grid-cols-2 xl:gap-6">
-            <FieldGroup label="Fanout Tuning">
-              <SettingField
-                label="Settle Delay (seconds)"
-                hint="How long an event must sit before fanout claims it, so one scan's episodes batch together (default 30)"
-                type="number"
-                value={numberValue("notifications.fanout.settle_seconds", "30")}
-                onChange={(v) =>
-                  form.setValue("notifications.fanout.settle_seconds", v)
-                }
-              />
-              <SettingField
-                label="Max Series Burst"
-                hint="Max notifications per series per batch; the rest are suppressed to avoid floods (default 3)"
-                type="number"
-                value={numberValue(
-                  "notifications.fanout.max_series_burst",
-                  "3",
-                )}
-                onChange={(v) =>
-                  form.setValue("notifications.fanout.max_series_burst", v)
-                }
-              />
-              <SettingField
-                label="Max Event Age (hours)"
-                hint="Events older than this are dropped instead of delivered late, e.g. after extended downtime (default 72)"
-                type="number"
-                value={numberValue(
-                  "notifications.fanout.max_event_age_hours",
-                  "72",
-                )}
-                onChange={(v) =>
-                  form.setValue("notifications.fanout.max_event_age_hours", v)
-                }
-              />
+          <ZoneHeading title="Tuning" />
+          {/* Full width, not a two-up grid: the settings column is clamped to
+              max-w-3xl, so side-by-side groups left each row with a ~140px
+              label column beside its control and every description wrapped to
+              six lines. */}
+          <div className="space-y-3">
+            <FieldGroup
+              label="Grouping and flood control"
+              restartAll={allRestart(FANOUT_KEYS)}
+            >
+              <AdvancedSection
+                id="notifications.fanout"
+                count={FANOUT_KEYS.length}
+                forceOpen={anyDirty(FANOUT_KEYS)}
+              >
+                <SettingField
+                  label="Settle window"
+                  description="Items that finish scanning together arrive as one notification."
+                  unit="seconds"
+                  type="number"
+                  value={numberValue(
+                    "notifications.fanout.settle_seconds",
+                    "30",
+                  )}
+                  onChange={(v) =>
+                    form.setValue("notifications.fanout.settle_seconds", v)
+                  }
+                  restartRequired={needsRestart(
+                    "notifications.fanout.settle_seconds",
+                  )}
+                />
+                <SettingField
+                  label="Max messages per show"
+                  description="Anything past this is skipped for that batch."
+                  type="number"
+                  value={numberValue(
+                    "notifications.fanout.max_series_burst",
+                    "3",
+                  )}
+                  onChange={(v) =>
+                    form.setValue("notifications.fanout.max_series_burst", v)
+                  }
+                  restartRequired={needsRestart(
+                    "notifications.fanout.max_series_burst",
+                  )}
+                />
+                <SettingField
+                  label="Max content age"
+                  description="Older items are dropped instead of arriving as stale news."
+                  unit="hours"
+                  type="number"
+                  value={numberValue(
+                    "notifications.fanout.max_event_age_hours",
+                    "72",
+                  )}
+                  onChange={(v) =>
+                    form.setValue("notifications.fanout.max_event_age_hours", v)
+                  }
+                  restartRequired={needsRestart(
+                    "notifications.fanout.max_event_age_hours",
+                  )}
+                />
+              </AdvancedSection>
             </FieldGroup>
 
-            <FieldGroup label="Retention">
-              <SettingField
-                label="Read Notifications (days)"
-                hint="How long read inbox entries are kept (default 90)"
-                type="number"
-                value={numberValue("notifications.retention.read_days", "90")}
-                onChange={(v) =>
-                  form.setValue("notifications.retention.read_days", v)
-                }
-              />
-              <SettingField
-                label="Unread Notifications (days)"
-                hint="How long unread inbox entries are kept (default 180)"
-                type="number"
-                value={numberValue(
-                  "notifications.retention.unread_days",
-                  "180",
-                )}
-                onChange={(v) =>
-                  form.setValue("notifications.retention.unread_days", v)
-                }
-              />
-              <SettingField
-                label="Processed Events (days)"
-                hint="How long processed release events are kept for debugging (default 30)"
-                type="number"
-                value={numberValue("notifications.retention.event_days", "30")}
-                onChange={(v) =>
-                  form.setValue("notifications.retention.event_days", v)
-                }
-              />
+            <FieldGroup
+              label="Retention"
+              restartAll={allRestart(RETENTION_KEYS)}
+            >
+              <AdvancedSection
+                id="notifications.retention"
+                count={RETENTION_KEYS.length}
+                forceOpen={anyDirty(RETENTION_KEYS)}
+              >
+                <SettingField
+                  label="Read notifications"
+                  unit="days"
+                  type="number"
+                  value={numberValue("notifications.retention.read_days", "90")}
+                  onChange={(v) =>
+                    form.setValue("notifications.retention.read_days", v)
+                  }
+                  restartRequired={needsRestart(
+                    "notifications.retention.read_days",
+                  )}
+                />
+                <SettingField
+                  label="Unread notifications"
+                  unit="days"
+                  type="number"
+                  value={numberValue(
+                    "notifications.retention.unread_days",
+                    "180",
+                  )}
+                  onChange={(v) =>
+                    form.setValue("notifications.retention.unread_days", v)
+                  }
+                  restartRequired={needsRestart(
+                    "notifications.retention.unread_days",
+                  )}
+                />
+                <SettingField
+                  label="Sent history"
+                  description="Record of what Silo already notified about."
+                  unit="days"
+                  type="number"
+                  value={numberValue(
+                    "notifications.retention.event_days",
+                    "30",
+                  )}
+                  onChange={(v) =>
+                    form.setValue("notifications.retention.event_days", v)
+                  }
+                  restartRequired={needsRestart(
+                    "notifications.retention.event_days",
+                  )}
+                />
+              </AdvancedSection>
             </FieldGroup>
           </div>
         </section>
@@ -1406,7 +1749,6 @@ export default function NotificationsAdminSettings() {
         onSave={form.save}
         onDiscard={form.discard}
         isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
       />
     </div>
   );
diff --git a/web/src/pages/admin-settings/OverlaySettings.test.tsx b/web/src/pages/admin-settings/OverlaySettings.test.tsx
deleted file mode 100644
index fb032ea70..000000000
--- a/web/src/pages/admin-settings/OverlaySettings.test.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import type { ReactNode } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-import OverlaySettings from "./OverlaySettings";
-
-const mocks = vi.hoisted(() => ({
-  setValue: vi.fn(),
-  useSettingsForm: vi.fn(),
-}));
-
-const values: Record<string, string> = {
-  "overlays.enabled": "true",
-  "defaults.card_overlays": "",
-};
-
-vi.mock("@/hooks/useSettingsForm", () => ({
-  useSettingsForm: (options: { keys: string[] }) =>
-    mocks.useSettingsForm(options),
-}));
-
-vi.mock("@/components/ui/select", () => ({
-  Select: ({
-    children,
-    disabled = false,
-    onValueChange,
-    value,
-  }: {
-    children: ReactNode;
-    disabled?: boolean;
-    onValueChange?: (value: string) => void;
-    value?: string;
-  }) => (
-    <div>
-      <button
-        type="button"
-        data-testid="select-control"
-        disabled={disabled}
-        onClick={() => onValueChange?.(value ?? "")}
-      >
-        Select
-      </button>
-      {children}
-    </div>
-  ),
-  SelectContent: ({ children }: { children: ReactNode }) => (
-    <div>{children}</div>
-  ),
-  SelectItem: ({ children, value }: { children: ReactNode; value: string }) => (
-    <div data-value={value}>{children}</div>
-  ),
-  SelectTrigger: ({ children }: { children: ReactNode }) => (
-    <div>{children}</div>
-  ),
-  SelectValue: () => null,
-}));
-
-vi.mock("@/components/ui/switch", () => ({
-  Switch: ({
-    checked,
-    disabled = false,
-    onCheckedChange,
-  }: {
-    checked: boolean;
-    disabled?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-  }) => (
-    <button
-      type="button"
-      data-testid="overlay-switch"
-      disabled={disabled}
-      onClick={() => onCheckedChange?.(!checked)}
-    >
-      Toggle
-    </button>
-  ),
-}));
-
-function makeForm() {
-  return {
-    isLoading: false,
-    getValue: (key: string) => values[key] ?? "",
-    setValue: mocks.setValue,
-    dirtyCount: 0,
-    dirtyKeys: [],
-    isDirty: vi.fn(() => false),
-    save: vi.fn(),
-    discard: vi.fn(),
-    isSaving: false,
-    restartRequired: false,
-    sensitiveConfigured: [],
-    sensitiveManagedByEnv: [],
-    buildConnectionCheckRequest: vi.fn(),
-  };
-}
-
-function renderPage() {
-  return renderToStaticMarkup(<OverlaySettings />);
-}
-
-describe("OverlaySettings", () => {
-  beforeEach(() => {
-    values["overlays.enabled"] = "true";
-    mocks.setValue.mockReset();
-    mocks.useSettingsForm.mockReset();
-    mocks.useSettingsForm.mockReturnValue(makeForm());
-  });
-
-  it("registers only the card overlay settings", () => {
-    const markup = renderPage();
-
-    expect(mocks.useSettingsForm).toHaveBeenCalledWith({
-      keys: ["overlays.enabled", "defaults.card_overlays"],
-    });
-    expect(markup).toContain("Default style preset");
-    expect(markup).not.toContain("Watched indicator");
-  });
-
-  it("keeps the preset selector at its previous responsive column width", () => {
-    const markup = renderPage();
-
-    expect(markup).toContain("sm:grid-cols-2");
-  });
-
-  it("previews poster overlays without watched metadata", () => {
-    const markup = renderPage();
-
-    expect(markup).toContain("Movie preview");
-    expect(markup).not.toContain("Example Movie");
-    expect(markup).not.toContain("data-watched-indicator");
-  });
-
-  it("keeps the overlay preview but hides its badges when overlays are disabled", () => {
-    values["overlays.enabled"] = "false";
-    const markup = renderPage();
-
-    expect(markup).toContain("Movie preview");
-    expect(markup).not.toContain("data-overlay-id");
-  });
-
-  it("prevents disabled overlay controls from changing defaults", () => {
-    values["overlays.enabled"] = "false";
-    render(<OverlaySettings />);
-
-    const selectControls = screen.getAllByTestId("select-control");
-    const overlaySwitches = screen.getAllByTestId("overlay-switch");
-    const defaultOverlaySwitches = overlaySwitches.slice(1);
-
-    expect(
-      selectControls.every((control) => control.hasAttribute("disabled")),
-    ).toBe(true);
-    expect(overlaySwitches[0]).not.toHaveAttribute("disabled");
-    expect(
-      defaultOverlaySwitches.every((control) =>
-        control.hasAttribute("disabled"),
-      ),
-    ).toBe(true);
-
-    selectControls.forEach((control) => fireEvent.click(control));
-    defaultOverlaySwitches.forEach((control) => fireEvent.click(control));
-
-    expect(mocks.setValue).not.toHaveBeenCalled();
-  });
-});
diff --git a/web/src/pages/admin-settings/OverlaySettings.tsx b/web/src/pages/admin-settings/OverlaySettings.tsx
deleted file mode 100644
index a0b270d8b..000000000
--- a/web/src/pages/admin-settings/OverlaySettings.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import { useMemo } from "react";
-import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { SettingField } from "./SettingField";
-import { SaveBar } from "./SaveBar";
-import { FieldGroup } from "./FieldGroup";
-import { OverlayPreviewCard } from "@/components/overlays/OverlayPreviewCard";
-import {
-  buildDefaultPrefs,
-  CATEGORY_META,
-  OVERLAY_CATEGORIES,
-  OVERLAY_REGISTRY,
-  OVERLAY_PRESETS,
-  POSITION_OPTIONS,
-  PRESET_IDS,
-  parseOverlayPrefs,
-  serializeOverlayPrefs,
-  type CardOverlayPrefs,
-  type OverlayId,
-  type OverlayPosition,
-  type PresetId,
-} from "@/lib/overlays";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-const KEYS = ["overlays.enabled", "defaults.card_overlays"];
-
-interface DefaultsEditorProps {
-  value: string;
-  onChange: (value: string) => void;
-  overlaysEnabled: boolean;
-}
-
-function DefaultsEditor({
-  value,
-  onChange,
-  overlaysEnabled,
-}: DefaultsEditorProps) {
-  const prefs = parseOverlayPrefs(value || null);
-
-  const updateItem = (
-    id: OverlayId,
-    patch: Partial<CardOverlayPrefs["items"][OverlayId]>,
-  ) => {
-    const next: CardOverlayPrefs = {
-      ...prefs,
-      items: { ...prefs.items, [id]: { ...prefs.items[id], ...patch } },
-    };
-    onChange(serializeOverlayPrefs(next));
-  };
-
-  const setPreset = (preset: PresetId) => {
-    onChange(serializeOverlayPrefs({ ...prefs, preset }));
-  };
-
-  return (
-    <div className="space-y-6">
-      <div className="grid gap-4 sm:grid-cols-2">
-        <div className={`space-y-2 ${overlaysEnabled ? "" : "opacity-50"}`}>
-          <Label className="text-sm font-medium">Default style preset</Label>
-          <Select
-            value={prefs.preset}
-            disabled={!overlaysEnabled}
-            onValueChange={(v) => setPreset(v as PresetId)}
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {PRESET_IDS.map((id) => (
-                <SelectItem key={id} value={id}>
-                  {OVERLAY_PRESETS[id].label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div className={overlaysEnabled ? "" : "pointer-events-none opacity-50"}>
-        {OVERLAY_CATEGORIES.map((category) => {
-          const overlays = OVERLAY_REGISTRY.filter(
-            (d) => d.category === category,
-          );
-          if (overlays.length === 0) return null;
-          return (
-            <div key={category} className="space-y-2">
-              <div className="text-muted-foreground text-xs font-semibold tracking-wide uppercase">
-                {CATEGORY_META[category].title}
-              </div>
-              <div className="space-y-2">
-                {overlays.map((def) => {
-                  const config = prefs.items[def.id];
-                  return (
-                    <div
-                      key={def.id}
-                      className="flex flex-col justify-between gap-3 py-1.5 sm:flex-row sm:items-center"
-                    >
-                      <div className="min-w-0 space-y-0.5">
-                        <Label className="text-sm font-medium">
-                          {def.label}
-                        </Label>
-                        <p className="text-muted-foreground text-xs">
-                          {def.description}
-                        </p>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Select
-                          value={config.position}
-                          disabled={!overlaysEnabled || !config.enabled}
-                          onValueChange={(pos) =>
-                            updateItem(def.id, {
-                              position: pos as OverlayPosition,
-                            })
-                          }
-                        >
-                          <SelectTrigger className="w-[130px]">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {POSITION_OPTIONS.map((opt) => (
-                              <SelectItem key={opt.value} value={opt.value}>
-                                {opt.label}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <Switch
-                          checked={config.enabled}
-                          disabled={!overlaysEnabled}
-                          onCheckedChange={(checked) =>
-                            updateItem(def.id, { enabled: checked })
-                          }
-                        />
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export default function OverlaySettings() {
-  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
-
-  if (form.isLoading) return <div>Loading...</div>;
-
-  const overlaysEnabled = form.getValue("overlays.enabled") !== "false";
-  const defaultsValue = form.getValue("defaults.card_overlays");
-  const previewPrefs = parseOverlayPrefs(
-    defaultsValue || serializeOverlayPrefs(buildDefaultPrefs()),
-  );
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Card Overlays</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure the default overlay badges and style preset shown on poster
-          cards. Users can override these in their personal settings.
-        </p>
-      </div>
-
-      <div className="flex-1 space-y-6">
-        <FieldGroup label="General">
-          <SettingField
-            label="Card Overlays Enabled"
-            hint="When disabled, no overlay badges appear for any user regardless of their personal settings."
-            type="toggle"
-            value={form.getValue("overlays.enabled") || "true"}
-            onChange={(v) => form.setValue("overlays.enabled", v)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Default Configuration">
-          <p className="text-muted-foreground mb-4 text-xs">
-            These defaults apply to users who have not customized their overlay
-            settings.
-          </p>
-          <div className="flex flex-col gap-6 lg:flex-row">
-            <div className="flex-1">
-              <DefaultsEditor
-                value={
-                  defaultsValue || serializeOverlayPrefs(buildDefaultPrefs())
-                }
-                onChange={(v) => form.setValue("defaults.card_overlays", v)}
-                overlaysEnabled={overlaysEnabled}
-              />
-            </div>
-            <div className="flex items-start justify-center lg:w-[180px]">
-              <OverlayPreviewCard
-                prefs={previewPrefs}
-                size="sm"
-                variant="movie"
-                showPosterOverlays={overlaysEnabled}
-              />
-            </div>
-          </div>
-        </FieldGroup>
-      </div>
-
-      <SaveBar
-        dirtyCount={form.dirtyCount}
-        onSave={form.save}
-        onDiscard={form.discard}
-        isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
-      />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/PlaybackSettings.test.tsx b/web/src/pages/admin-settings/PlaybackSettings.test.tsx
index ea0c10eca..048c81fd0 100644
--- a/web/src/pages/admin-settings/PlaybackSettings.test.tsx
+++ b/web/src/pages/admin-settings/PlaybackSettings.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderToStaticMarkup } from "react-dom/server";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -21,29 +21,45 @@ if (!window.HTMLElement.prototype.scrollIntoView) {
 
 const useSettingsFormMock = vi.fn();
 const useHWAccelDetectionMock = vi.fn();
-
-beforeEach(() => {
-  useSettingsFormMock.mockClear();
-  useHWAccelDetectionMock.mockReturnValue({
-    data: undefined,
-    isLoading: false,
-  });
-});
+const useAdminNodesMock = vi.fn();
 
 vi.mock("@/hooks/useSettingsForm", () => ({
   useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
 }));
 
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => new Set<string>(["playback.ffmpeg_path"]),
+}));
+
 vi.mock("@/hooks/queries/admin/system", () => ({
   useHWAccelDetection: (...args: unknown[]) => useHWAccelDetectionMock(...args),
 }));
 
-function makeForm(values: Record<string, string>) {
+vi.mock("@/hooks/queries/admin/nodes", () => ({
+  useAdminNodes: () => useAdminNodesMock(),
+}));
+
+/** A transcode node the chapter-thumbnail extractor could reserve. */
+function transcodeNode(overrides: Record<string, unknown> = {}) {
+  return {
+    id: 1,
+    name: "node-1",
+    type: "transcode",
+    enabled: true,
+    healthy: true,
+    ...overrides,
+  };
+}
+
+function makeForm(values: Record<string, string>, dirty: string[] = []) {
+  const dirtyKeys = new Set(dirty);
   return {
     isLoading: false,
     getValue: (key: string) => values[key] ?? "",
     setValue: vi.fn(),
-    dirtyCount: 0,
+    isDirty: (key: string) => dirtyKeys.has(key),
+    dirtyCount: dirtyKeys.size,
+    dirtyKeys: [...dirtyKeys],
     save: vi.fn(),
     discard: vi.fn(),
     isSaving: false,
@@ -51,21 +67,148 @@ function makeForm(values: Record<string, string>) {
   };
 }
 
-function settingSwitch(markup: string, labelText: string): Element {
+function parse(markup: string): HTMLElement {
   const container = document.createElement("div");
   container.innerHTML = markup;
+  return container;
+}
+
+function labelled(container: HTMLElement, text: string): Element {
   const label = Array.from(container.querySelectorAll("label")).find(
-    (candidate) => candidate.textContent === labelText,
+    (candidate) => candidate.textContent === text,
   );
-  const toggle = label?.htmlFor
+  const control = label?.htmlFor
     ? container.querySelector(`[id="${label.htmlFor}"]`)
     : null;
-  if (!toggle) throw new Error(`${labelText} toggle was not rendered`);
-  return toggle;
+  if (!control) throw new Error(`no control rendered for label: ${text}`);
+  return control;
+}
+
+/** Opens the page's advanced disclosure via its persisted state. */
+function expandAdvanced() {
+  localStorage.setItem("silo.admin.advanced.playback.transcoding", "true");
 }
 
+const TONE_MAP_LABEL = "Software HDR tone mapping";
+
+beforeEach(() => {
+  localStorage.clear();
+  useSettingsFormMock.mockReset();
+  useHWAccelDetectionMock.mockReset();
+  useHWAccelDetectionMock.mockReturnValue({
+    data: undefined,
+    isLoading: false,
+  });
+  useAdminNodesMock.mockReset();
+  useAdminNodesMock.mockReturnValue({
+    data: [transcodeNode()],
+    isSuccess: true,
+  });
+});
+
+describe("PlaybackSettings layout", () => {
+  it("renders every field group heading", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }),
+    );
+
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+    const headings = Array.from(container.querySelectorAll("[role=group]")).map(
+      (group) => {
+        const labelId = group.getAttribute("aria-labelledby");
+        return labelId
+          ? (container.querySelector(`[id="${labelId}"]`)?.textContent ?? "")
+          : "";
+      },
+    );
+
+    expect(headings).toEqual(["Transcoding", "Watch behavior"]);
+  });
+
+  it("opens with the title alone: no breadcrumb, lede, or status strip", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({
+        "playback.hw_accel": "none",
+        "playback.transcode_enabled": "true",
+      }),
+    );
+
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+
+    expect(container.querySelector("h1")?.textContent).toBe("Playback");
+    expect(container.textContent).not.toContain("Settings ›");
+    expect(container.textContent).not.toContain("Transcoding on");
+    expect(container.textContent).not.toContain("Restart pending");
+  });
+
+  it("puts the percent unit beside the control instead of in the label", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.watched_threshold": "90" }),
+    );
+
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+
+    expect(labelled(container, "Mark watched at")).toHaveAttribute(
+      "value",
+      "90",
+    );
+    expect(container.textContent).not.toContain("Mark watched at (%)");
+  });
+
+  it("manages the playback key family and leaves downloads to their own page", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }),
+    );
+
+    renderToStaticMarkup(<PlaybackSettings />);
+    const keys: string[] = useSettingsFormMock.mock.calls[0]?.[0]?.keys ?? [];
+
+    expect(keys).toContain("playback.transcode_enabled");
+    expect(keys).toContain("playback.watched_threshold");
+    expect(keys.some((key) => key.startsWith("download."))).toBe(false);
+    // Hidden tier: still saved and readable through the API, no UI.
+    expect(keys).not.toContain("playback.chapter_thumbnail_node_capacity");
+  });
+
+  it("keeps advanced settings collapsed until they are opened", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }),
+    );
+
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+
+    expect(container.textContent).toContain("Transcoding");
+    expect(container.textContent).not.toContain("FFmpeg path");
+  });
+
+  it("force-opens an advanced section holding a dirty field", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }, ["playback.ffmpeg_path"]),
+    );
+
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+
+    expect(container.textContent).toContain("FFmpeg path");
+  });
+
+  it("marks restart-required fields from the restart key list", () => {
+    expandAdvanced();
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }),
+    );
+
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+    const badges = container.querySelectorAll(
+      "[aria-label='Takes effect after a server restart']",
+    );
+
+    expect(badges).toHaveLength(1);
+  });
+});
+
 describe("PlaybackSettings CPU tone mapping", () => {
   it("includes the setting and renders it off by default", () => {
+    expandAdvanced();
     useSettingsFormMock.mockReturnValue(
       makeForm({
         "playback.hw_accel": "none",
@@ -73,14 +216,12 @@ describe("PlaybackSettings CPU tone mapping", () => {
       }),
     );
 
-    const toggle = settingSwitch(
-      renderToStaticMarkup(<PlaybackSettings />),
-      "Enable CPU Tone Mapping",
-    );
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
 
     expect(useSettingsFormMock.mock.calls[0]?.[0]?.keys).toContain(
       "playback.chapter_thumbnail_software_tone_map_enabled",
     );
+    const toggle = labelled(container, TONE_MAP_LABEL);
     expect(toggle).toHaveAttribute("aria-checked", "false");
     expect(toggle).not.toHaveAttribute("disabled");
   });
@@ -92,7 +233,7 @@ describe("PlaybackSettings CPU tone mapping", () => {
 
     render(<PlaybackSettings />);
     await userEvent.click(
-      screen.getByRole("combobox", { name: "Hardware Acceleration" }),
+      screen.getByRole("combobox", { name: "Hardware acceleration" }),
     );
 
     expect(
@@ -101,6 +242,7 @@ describe("PlaybackSettings CPU tone mapping", () => {
   });
 
   it("disables the toggle while HDR chapter thumbnails are disabled", () => {
+    expandAdvanced();
     useSettingsFormMock.mockReturnValue(
       makeForm({
         "playback.hw_accel": "none",
@@ -109,10 +251,8 @@ describe("PlaybackSettings CPU tone mapping", () => {
       }),
     );
 
-    const toggle = settingSwitch(
-      renderToStaticMarkup(<PlaybackSettings />),
-      "Enable CPU Tone Mapping",
-    );
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+    const toggle = labelled(container, TONE_MAP_LABEL);
 
     expect(toggle).toHaveAttribute("aria-checked", "true");
     expect(toggle).toHaveAttribute("disabled");
@@ -120,21 +260,23 @@ describe("PlaybackSettings CPU tone mapping", () => {
 });
 
 describe("PlaybackSettings transcode tone mapping", () => {
+  beforeEach(expandAdvanced);
+
   it("registers independent hardware and software settings disabled by default", () => {
     useSettingsFormMock.mockReturnValue(
       makeForm({ "playback.hw_accel": "auto" }),
     );
 
-    const markup = renderToStaticMarkup(<PlaybackSettings />);
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
     const keys = useSettingsFormMock.mock.calls[0]?.[0]?.keys as string[];
 
     expect(keys).toContain("playback.transcode_hardware_tone_map_enabled");
     expect(keys).toContain("playback.transcode_software_tone_map_enabled");
     expect(
-      settingSwitch(markup, "Enable Hardware HDR Tone Mapping"),
+      labelled(container, "Enable Hardware HDR Tone Mapping"),
     ).toHaveAttribute("aria-checked", "false");
     expect(
-      settingSwitch(markup, "Enable Software HDR Tone Mapping"),
+      labelled(container, "Enable Software HDR Tone Mapping"),
     ).toHaveAttribute("aria-checked", "false");
   });
 
@@ -147,13 +289,13 @@ describe("PlaybackSettings transcode tone mapping", () => {
       }),
     );
 
-    const markup = renderToStaticMarkup(<PlaybackSettings />);
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
 
     expect(
-      settingSwitch(markup, "Enable Hardware HDR Tone Mapping"),
+      labelled(container, "Enable Hardware HDR Tone Mapping"),
     ).toHaveAttribute("aria-checked", "true");
     expect(
-      settingSwitch(markup, "Enable Software HDR Tone Mapping"),
+      labelled(container, "Enable Software HDR Tone Mapping"),
     ).toHaveAttribute("aria-checked", "false");
   });
 
@@ -165,8 +307,8 @@ describe("PlaybackSettings transcode tone mapping", () => {
       }),
     );
 
-    const toggle = settingSwitch(
-      renderToStaticMarkup(<PlaybackSettings />),
+    const toggle = labelled(
+      parse(renderToStaticMarkup(<PlaybackSettings />)),
       "Enable Hardware HDR Tone Mapping",
     );
 
@@ -192,8 +334,8 @@ describe("PlaybackSettings transcode tone mapping", () => {
       }),
     );
 
-    const toggle = settingSwitch(
-      renderToStaticMarkup(<PlaybackSettings />),
+    const toggle = labelled(
+      parse(renderToStaticMarkup(<PlaybackSettings />)),
       "Enable Hardware HDR Tone Mapping",
     );
 
@@ -201,3 +343,128 @@ describe("PlaybackSettings transcode tone mapping", () => {
     expect(toggle).not.toHaveAttribute("disabled");
   });
 });
+
+describe("PlaybackSettings path defaults", () => {
+  beforeEach(expandAdvanced);
+
+  const RESET_TRANSCODE_DIR = { name: "Reset Transcode directory to default" };
+
+  it("shows the effective default of each path field as its placeholder", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }),
+    );
+
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+
+    expect(labelled(container, "Transcode directory")).toHaveAttribute(
+      "placeholder",
+      "/tmp/silo-transcode",
+    );
+    expect(labelled(container, "FFmpeg path")).toHaveAttribute(
+      "placeholder",
+      "/usr/lib/jellyfin-ffmpeg/ffmpeg",
+    );
+  });
+
+  it("says in words what leaving each path blank does", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }),
+    );
+
+    const text =
+      parse(renderToStaticMarkup(<PlaybackSettings />)).textContent ?? "";
+
+    expect(text).toContain("Leave blank to use /tmp/silo-transcode.");
+    expect(text).toContain(
+      "Leave blank to use the FFmpeg that ships with the server, at /usr/lib/jellyfin-ffmpeg/ffmpeg.",
+    );
+  });
+
+  it("offers no reset while a path field already runs the default", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({
+        "playback.hw_accel": "none",
+        "playback.transcode_dir": "/tmp/silo-transcode",
+      }),
+    );
+    render(<PlaybackSettings />);
+
+    expect(
+      screen.queryByRole("button", RESET_TRANSCODE_DIR),
+    ).not.toBeInTheDocument();
+  });
+
+  it("stages an empty value when an overridden path is reset", () => {
+    const form = makeForm({
+      "playback.hw_accel": "none",
+      "playback.transcode_dir": "/mnt/fast/transcode",
+    });
+    useSettingsFormMock.mockReturnValue(form);
+    render(<PlaybackSettings />);
+
+    fireEvent.click(screen.getByRole("button", RESET_TRANSCODE_DIR));
+
+    expect(form.setValue).toHaveBeenCalledWith("playback.transcode_dir", "");
+    expect(form.save).not.toHaveBeenCalled();
+  });
+
+  it("counts the reset as one unsaved change and falls back to the placeholder", () => {
+    // The staged empty string, as the form would report it on the next render.
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }, ["playback.transcode_dir"]),
+    );
+    render(<PlaybackSettings />);
+
+    expect(screen.getByLabelText("Transcode directory")).toHaveValue("");
+    expect(screen.getByText("1 unsaved change")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", RESET_TRANSCODE_DIR),
+    ).not.toBeInTheDocument();
+  });
+});
+
+describe("PlaybackSettings chapter thumbnail execution", () => {
+  beforeEach(expandAdvanced);
+
+  it("warns when no transcode node can take an extraction", () => {
+    useAdminNodesMock.mockReturnValue({
+      data: [
+        transcodeNode({ healthy: false }),
+        transcodeNode({ id: 2, type: "streaming" }),
+      ],
+      isSuccess: true,
+    });
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }),
+    );
+
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+
+    expect(container.textContent).toContain("No transcode nodes are connected");
+  });
+
+  it("stays quiet while a healthy transcode node is connected", () => {
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }),
+    );
+
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+
+    expect(container.textContent).not.toContain(
+      "No transcode nodes are connected",
+    );
+  });
+
+  it("does not warn before the node list has loaded", () => {
+    useAdminNodesMock.mockReturnValue({ data: undefined, isSuccess: false });
+    useSettingsFormMock.mockReturnValue(
+      makeForm({ "playback.hw_accel": "none" }),
+    );
+
+    const container = parse(renderToStaticMarkup(<PlaybackSettings />));
+
+    expect(container.textContent).not.toContain(
+      "No transcode nodes are connected",
+    );
+  });
+});
diff --git a/web/src/pages/admin-settings/PlaybackSettings.tsx b/web/src/pages/admin-settings/PlaybackSettings.tsx
index 4f646a579..f8c416d65 100644
--- a/web/src/pages/admin-settings/PlaybackSettings.tsx
+++ b/web/src/pages/admin-settings/PlaybackSettings.tsx
@@ -1,41 +1,80 @@
 import { useMemo } from "react";
 import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { useHWAccelDetection } from "@/hooks/queries/admin/system";
-import { Label } from "@/components/ui/label";
+import { useRestartKeys } from "@/hooks/useRestartKeys";
+import {
+  useHWAccelDetection,
+  type HWAccelInfo,
+} from "@/hooks/queries/admin/system";
+import { useAdminNodes } from "@/hooks/queries/admin/nodes";
 import { Switch } from "@/components/ui/switch";
-import { SettingField } from "./SettingField";
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+import { PathSettingField } from "@/components/settings/PathSettingField";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import { SettingsSubheading } from "@/components/settings/SettingsSubheading";
+import {
+  SettingField,
+  SettingFieldRow,
+  SettingFieldStatus,
+} from "./SettingField";
 import { SaveBar } from "./SaveBar";
 import { FieldGroup } from "./FieldGroup";
 import {
+  DEFAULT_FFMPEG_PATH,
+  DEFAULT_TRANSCODE_DIR,
+} from "./settingsPathDefaults";
+import {
+  CHAPTER_THUMBNAIL_EXECUTION_DEFAULT,
   buildHWDeviceRows,
+  chapterThumbnailExecutionOptions,
+  hasUsableTranscodeNode,
   nodeInventoriesDiverge,
   parseHWDeviceList,
   toggleHWDevice,
 } from "./playbackSettings.utils";
 
-const KEYS = [
+// Shown without a disclosure: the handful of controls a household admin
+// actually touches.
+const TRANSCODING_ESSENTIAL_KEYS = [
+  "playback.transcode_enabled",
+  "playback.hw_accel",
+  "allow_4k_transcode",
+];
+
+const TRANSCODING_ADVANCED_KEYS = [
   "playback.ffmpeg_path",
   "playback.transcode_dir",
-  "playback.hw_accel",
   "playback.hw_device",
-  "playback.transcode_enabled",
   "playback.local_transcode_fallback",
   "playback.transcode_hardware_tone_map_enabled",
   "playback.transcode_software_tone_map_enabled",
-  "allow_4k_transcode",
   "enable_transcode_throttle",
   "transcode_throttle_seconds",
   "playback.chapter_thumbnail_workers",
   "playback.chapter_thumbnail_execution",
-  "playback.chapter_thumbnail_node_capacity",
   "playback.chapter_thumbnail_hdr_policy",
   "playback.chapter_thumbnail_software_tone_map_enabled",
+];
+
+const WATCH_KEYS = [
   "playback.watched_threshold",
   "playback.min_resume_threshold",
 ];
 
+// `playback.chapter_thumbnail_node_capacity` is deliberately absent from the
+// UI (hidden tier): it is still saved and read through the settings API, but
+// the per-node budget is derived from the node pool rather than typed in.
+//
+// The `download.*` family is its own page (DownloadsSettings), so it is not
+// loaded or saved here.
+const KEYS = [
+  ...TRANSCODING_ESSENTIAL_KEYS,
+  ...TRANSCODING_ADVANCED_KEYS,
+  ...WATCH_KEYS,
+];
+
 export default function PlaybackSettings() {
   const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
+  const restartKeys = useRestartKeys();
   const hwAccel = form.getValue("playback.hw_accel");
   const hwDetection = useHWAccelDetection(hwAccel !== "none");
   const hwDevice = form.getValue("playback.hw_device");
@@ -51,32 +90,85 @@ export default function PlaybackSettings() {
     hwAccel === "nvenc" ||
     (hwAccel === "auto" && hwDetection.data?.resolved === "nvenc");
   const inventoriesDiverge = nodeInventoriesDiverge(hwDetection.data);
+  const showDevicePicker =
+    hwAccel !== "none" && !isNvenc && deviceRows.length > 0;
+
+  const nodes = useAdminNodes();
+  const chapterExecution =
+    form.getValue("playback.chapter_thumbnail_execution") ||
+    CHAPTER_THUMBNAIL_EXECUTION_DEFAULT;
+  // Gate the node-backed extraction modes only on a node list we actually
+  // have: while the query is in flight or after it failed, leave every option
+  // reachable rather than blocking a valid choice on a transient error.
+  const transcodeNodeAvailable =
+    !nodes.isSuccess || hasUsableTranscodeNode(nodes.data);
+
+  const isDirty = form.isDirty;
+  const anyDirty = (keys: string[]) => keys.some((key) => isDirty(key));
+  const allRestart = (keys: string[]) =>
+    keys.every((key) => restartKeys.has(key));
+
+  const detection = hwAccel === "none" ? undefined : hwDetection.data;
+  const detectedLabel = describeDetection(detection);
+
+  // Everything the hardware-acceleration field has to say about itself, in its
+  // own status slot. The NVENC note used to be a bare paragraph between rows,
+  // which read as a row with no label and broke the group's rhythm.
+  const hwAccelLines =
+    hwAccel === "none"
+      ? []
+      : [
+          detectedLabel ? (
+            <SettingFieldStatus
+              key="detected"
+              tone={
+                detection?.resolved && detection.resolved !== "none"
+                  ? "ok"
+                  : "warn"
+              }
+            >
+              {detectedLabel}
+            </SettingFieldStatus>
+          ) : hwDetection.isLoading ? (
+            <SettingFieldStatus key="detecting" tone="muted">
+              Detecting hardware…
+            </SettingFieldStatus>
+          ) : null,
+          isNvenc && selectedDevices.length > 1 ? (
+            <SettingFieldStatus key="nvenc" tone="warn">
+              NVENC uses the first configured device ({selectedDevices[0]}).
+            </SettingFieldStatus>
+          ) : null,
+        ].filter(Boolean);
+  const hwAccelStatus =
+    hwAccelLines.length > 0 ? (
+      <span className="flex flex-col items-start gap-1">{hwAccelLines}</span>
+    ) : undefined;
 
   if (form.isLoading) return <div>Loading...</div>;
 
   return (
     <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Playback</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure transcoding, segment generation, and watched-state behavior.
-        </p>
-      </div>
+      <SettingsPageHeader title="Playback" className="mb-8" />
 
-      <div className="flex-1 space-y-6">
-        <FieldGroup label="Transcoding">
+      <div className="flex-1 space-y-5">
+        <FieldGroup
+          label="Transcoding"
+          restartAll={allRestart([
+            ...TRANSCODING_ESSENTIAL_KEYS,
+            ...TRANSCODING_ADVANCED_KEYS,
+          ])}
+        >
           <SettingField
-            label="FFmpeg Path"
-            value={form.getValue("playback.ffmpeg_path")}
-            onChange={(v) => form.setValue("playback.ffmpeg_path", v)}
-          />
-          <SettingField
-            label="Transcode Directory"
-            value={form.getValue("playback.transcode_dir")}
-            onChange={(v) => form.setValue("playback.transcode_dir", v)}
+            label="Transcoding"
+            type="toggle"
+            description="Off serves only files clients can already play."
+            value={form.getValue("playback.transcode_enabled")}
+            onChange={(v) => form.setValue("playback.transcode_enabled", v)}
+            restartRequired={restartKeys.has("playback.transcode_enabled")}
           />
           <SettingField
-            label="Hardware Acceleration"
+            label="Hardware acceleration"
             type="select"
             options={[
               { value: "auto", label: "Auto" },
@@ -86,84 +178,92 @@ export default function PlaybackSettings() {
               { value: "videotoolbox", label: "VideoToolbox (macOS)" },
               { value: "none", label: "Software" },
             ]}
-            value={form.getValue("playback.hw_accel")}
+            description="Auto picks the best device this server can see."
+            status={hwAccelStatus}
+            value={hwAccel}
             onChange={(v) => form.setValue("playback.hw_accel", v)}
+            restartRequired={restartKeys.has("playback.hw_accel")}
           />
-          {form.getValue("playback.hw_accel") === "auto" &&
-            hwDetection.data && (
-              <div className="-mt-1 flex items-center gap-2 text-xs">
-                <span
-                  className={`inline-block h-1.5 w-1.5 rounded-full ${
-                    hwDetection.data.resolved !== "none"
-                      ? "bg-emerald-500"
-                      : "bg-amber-500"
-                  }`}
-                />
-                <span className="text-muted-foreground">
-                  {formatResolved(hwDetection.data.resolved)}
-                  {hwDetection.data.render_devices?.[0] &&
-                    ` — ${hwDetection.data.render_devices[0]}`}
-                  {hwDetection.data.source === "transcode_node" &&
-                    " (transcode node)"}
-                </span>
-              </div>
-            )}
-          {form.getValue("playback.hw_accel") === "auto" &&
-            hwDetection.isLoading && (
-              <p className="text-muted-foreground -mt-1 text-xs">
-                Detecting hardware...
-              </p>
-            )}
-          {hwAccel !== "none" && isNvenc && selectedDevices.length > 1 && (
-            <p className="-mt-1 text-xs text-amber-500">
-              Multi-GPU balancing supports QSV/VA-API only; with NVENC the
-              server uses the first configured device ({selectedDevices[0]}).
-            </p>
-          )}
-          {hwAccel !== "none" && !isNvenc && deviceRows.length > 0 && (
-            <div className="flex flex-col gap-2 py-3">
-              <div className="space-y-0.5">
-                <Label className="text-sm font-medium">GPU Devices</Label>
-                <p className="text-muted-foreground text-xs">
-                  {selectedDevices.length === 0
-                    ? "Auto — the first available device handles every transcode. Select devices to pin or balance."
-                    : selectedDevices.length === 1
-                      ? "All transcodes run on the selected device."
-                      : "Transcode sessions balance across the selected devices (least loaded first)."}
-                  {hwDetection.data?.source === "transcode_node" &&
-                    " Devices reported by a transcode node."}
-                </p>
+          <SettingField
+            label="Allow 4K transcoding"
+            type="toggle"
+            description="Heavy load on most hardware."
+            value={form.getValue("allow_4k_transcode")}
+            onChange={(v) => form.setValue("allow_4k_transcode", v)}
+            restartRequired={restartKeys.has("allow_4k_transcode")}
+          />
+
+          <AdvancedSection
+            id="playback.transcoding"
+            count={
+              TRANSCODING_ADVANCED_KEYS.length - (showDevicePicker ? 0 : 1)
+            }
+            forceOpen={anyDirty(TRANSCODING_ADVANCED_KEYS)}
+          >
+            <PathSettingField
+              label="FFmpeg path"
+              defaultValue={DEFAULT_FFMPEG_PATH}
+              description={`Leave blank to use the FFmpeg that ships with the server, at ${DEFAULT_FFMPEG_PATH}.`}
+              value={form.getValue("playback.ffmpeg_path")}
+              onChange={(v) => form.setValue("playback.ffmpeg_path", v)}
+              restartRequired={restartKeys.has("playback.ffmpeg_path")}
+            />
+            <PathSettingField
+              label="Transcode directory"
+              defaultValue={DEFAULT_TRANSCODE_DIR}
+              description={`Use fast local storage with room to spare. Leave blank to use ${DEFAULT_TRANSCODE_DIR}.`}
+              value={form.getValue("playback.transcode_dir")}
+              onChange={(v) => form.setValue("playback.transcode_dir", v)}
+              restartRequired={restartKeys.has("playback.transcode_dir")}
+            />
+            {showDevicePicker && (
+              <div>
+                <SettingsSubheading
+                  caption={
+                    selectedDevices.length === 0
+                      ? "Auto: the first available device takes every transcode."
+                      : selectedDevices.length === 1
+                        ? "All transcodes run on the selected device."
+                        : "Transcodes balance across the selected devices."
+                  }
+                >
+                  GPU devices
+                </SettingsSubheading>
                 {inventoriesDiverge && (
-                  <p className="text-xs text-amber-500">
-                    This setting applies to every transcode node, but the nodes
-                    report different devices. Only paths present on all nodes
-                    are safe to select.
+                  <p className="pb-2 text-xs text-amber-500">
+                    Nodes report different devices. Only paths on every node are
+                    safe to select.
                   </p>
                 )}
-              </div>
-              <div className="space-y-2">
+                {/* One shared row shell per device, so these switches land on the
+                    same edge as every other control in the group instead of
+                    hugging the panel. */}
                 {deviceRows.map((row) => (
-                  <div
+                  <SettingFieldRow
                     key={row.path}
-                    className="flex items-center justify-between gap-3"
-                  >
-                    <div className="min-w-0">
-                      <p
-                        className={`truncate text-sm ${row.detected ? "" : "text-muted-foreground"}`}
+                    label={
+                      <span
+                        className={
+                          row.detected ? undefined : "text-muted-foreground"
+                        }
                       >
                         {row.description}
-                      </p>
-                      <p className="text-muted-foreground truncate font-mono text-xs">
-                        {row.path}
-                      </p>
-                      {row.missingOnNodes.length > 0 && (
-                        <p className="truncate text-xs text-amber-500">
-                          Not present on: {row.missingOnNodes.join(", ")}
-                        </p>
-                      )}
-                    </div>
+                      </span>
+                    }
+                    description={
+                      <>
+                        <span className="block font-mono">{row.path}</span>
+                        {row.missingOnNodes.length > 0 && (
+                          <span className="mt-0.5 block text-amber-500">
+                            Not present on: {row.missingOnNodes.join(", ")}
+                          </span>
+                        )}
+                      </>
+                    }
+                  >
                     <Switch
                       checked={selectedDevices.includes(row.path)}
+                      aria-label={row.description}
                       onCheckedChange={() =>
                         form.setValue(
                           "playback.hw_device",
@@ -175,163 +275,168 @@ export default function PlaybackSettings() {
                         )
                       }
                     />
-                  </div>
+                  </SettingFieldRow>
                 ))}
               </div>
-            </div>
-          )}
-          <SettingField
-            label="Transcoding Enabled"
-            type="toggle"
-            value={form.getValue("playback.transcode_enabled")}
-            onChange={(v) => form.setValue("playback.transcode_enabled", v)}
-          />
-          <SettingField
-            label="Local Transcode Fallback"
-            type="toggle"
-            hint="When no eligible transcode node is available, transcode on this server instead. Disable to keep all transcoding on dedicated nodes — playback that requires transcoding fails while no node is eligible."
-            value={form.getValue("playback.local_transcode_fallback") || "true"}
-            onChange={(v) =>
-              form.setValue("playback.local_transcode_fallback", v)
-            }
-          />
-          <SettingField
-            label="Enable Hardware HDR Tone Mapping"
-            type="toggle"
-            hint="Allows validated local or remote GPU executors to convert HDR video to SDR when transcoding."
-            value={
-              form.getValue("playback.transcode_hardware_tone_map_enabled") ||
-              "false"
-            }
-            onChange={(v) =>
-              form.setValue("playback.transcode_hardware_tone_map_enabled", v)
-            }
-          />
-          <SettingField
-            label="Enable Software HDR Tone Mapping"
-            type="toggle"
-            hint="Allows the CPU to convert HDR video to SDR when transcoding. This can be very CPU-intensive."
-            value={
-              form.getValue("playback.transcode_software_tone_map_enabled") ||
-              "false"
-            }
-            onChange={(v) =>
-              form.setValue("playback.transcode_software_tone_map_enabled", v)
-            }
-          />
-          <SettingField
-            label="Allow 4K Transcoding"
-            type="toggle"
-            value={form.getValue("allow_4k_transcode")}
-            onChange={(v) => form.setValue("allow_4k_transcode", v)}
-          />
-          <SettingField
-            label="Enable Transcode Throttling"
-            type="toggle"
-            value={form.getValue("enable_transcode_throttle")}
-            onChange={(v) => form.setValue("enable_transcode_throttle", v)}
-          />
-          {form.getValue("enable_transcode_throttle") === "true" && (
+            )}
+            <SettingField
+              label="Local transcode fallback"
+              type="toggle"
+              description="Encode here when no transcode node is free."
+              value={
+                form.getValue("playback.local_transcode_fallback") || "true"
+              }
+              onChange={(v) =>
+                form.setValue("playback.local_transcode_fallback", v)
+              }
+              restartRequired={restartKeys.has(
+                "playback.local_transcode_fallback",
+              )}
+            />
+            <SettingField
+              label="Enable Hardware HDR Tone Mapping"
+              type="toggle"
+              hint="Allows validated local or remote GPU executors to convert HDR video to SDR when transcoding."
+              value={
+                form.getValue("playback.transcode_hardware_tone_map_enabled") ||
+                "false"
+              }
+              onChange={(v) =>
+                form.setValue("playback.transcode_hardware_tone_map_enabled", v)
+              }
+              restartRequired={restartKeys.has(
+                "playback.transcode_hardware_tone_map_enabled",
+              )}
+            />
             <SettingField
-              label="Throttle Buffer (seconds)"
+              label="Enable Software HDR Tone Mapping"
+              type="toggle"
+              hint="Allows the CPU to convert HDR video to SDR when transcoding. This can be very CPU-intensive."
+              value={
+                form.getValue("playback.transcode_software_tone_map_enabled") ||
+                "false"
+              }
+              onChange={(v) =>
+                form.setValue("playback.transcode_software_tone_map_enabled", v)
+              }
+              restartRequired={restartKeys.has(
+                "playback.transcode_software_tone_map_enabled",
+              )}
+            />
+            <SettingField
+              label="Throttle transcoding"
+              type="toggle"
+              description="Pause encoding once the client is far enough ahead."
+              value={form.getValue("enable_transcode_throttle")}
+              onChange={(v) => form.setValue("enable_transcode_throttle", v)}
+              restartRequired={restartKeys.has("enable_transcode_throttle")}
+            />
+            {form.getValue("enable_transcode_throttle") === "true" && (
+              <SettingField
+                label="Buffer ahead"
+                type="number"
+                unit="seconds"
+                value={form.getValue("transcode_throttle_seconds")}
+                onChange={(v) => form.setValue("transcode_throttle_seconds", v)}
+                restartRequired={restartKeys.has("transcode_throttle_seconds")}
+              />
+            )}
+            <SettingField
+              label="Chapter thumbnail workers"
               type="number"
-              hint="How many seconds ahead FFmpeg transcodes before pausing. Minimum: 60."
-              value={form.getValue("transcode_throttle_seconds")}
-              onChange={(v) => form.setValue("transcode_throttle_seconds", v)}
+              description="Parallel extraction jobs per library scan."
+              value={form.getValue("playback.chapter_thumbnail_workers")}
+              onChange={(v) =>
+                form.setValue("playback.chapter_thumbnail_workers", v)
+              }
+              restartRequired={restartKeys.has(
+                "playback.chapter_thumbnail_workers",
+              )}
             />
-          )}
-        </FieldGroup>
-
-        <FieldGroup label="Segments">
-          <SettingField
-            label="Chapter Thumbnail Workers"
-            type="number"
-            hint="Global chapter thumbnail dispatcher concurrency. Higher values improve throughput but can drive more local or remote extraction work at once."
-            value={form.getValue("playback.chapter_thumbnail_workers")}
-            onChange={(v) =>
-              form.setValue("playback.chapter_thumbnail_workers", v)
-            }
-          />
-          <SettingField
-            label="Chapter Thumbnail Execution"
-            type="select"
-            options={[
-              { value: "local", label: "Local only" },
-              {
-                value: "prefer_transcode_nodes",
-                label: "Prefer transcode nodes",
-              },
-              { value: "transcode_nodes_only", label: "Transcode nodes only" },
-            ]}
-            hint="Controls whether chapter thumbnails run on the API node or are offloaded to available transcode nodes."
-            value={
-              form.getValue("playback.chapter_thumbnail_execution") || "local"
-            }
-            onChange={(v) =>
-              form.setValue("playback.chapter_thumbnail_execution", v)
-            }
-          />
-          <SettingField
-            label="Chapter Thumbnail Node Capacity"
-            type="number"
-            hint="Per transcode-node budget for chapter thumbnail jobs when remote execution is enabled."
-            value={form.getValue("playback.chapter_thumbnail_node_capacity")}
-            onChange={(v) =>
-              form.setValue("playback.chapter_thumbnail_node_capacity", v)
-            }
-          />
-          <SettingField
-            label="HDR Chapter Thumbnail Policy"
-            type="select"
-            options={[
-              { value: "best_effort", label: "Best effort tone mapping" },
-              { value: "disabled", label: "Disable HDR/DV thumbnails" },
-            ]}
-            hint="Controls whether chapter thumbnails are generated for HDR or Dolby Vision sources. SDR files are unaffected."
-            value={
-              form.getValue("playback.chapter_thumbnail_hdr_policy") ||
-              "best_effort"
-            }
-            onChange={(v) =>
-              form.setValue("playback.chapter_thumbnail_hdr_policy", v)
-            }
-          />
-          <SettingField
-            label="Enable CPU Tone Mapping"
-            type="toggle"
-            hint="Allows CPU/software tone mapping when hardware HDR chapter-thumbnail extraction is unavailable or fails. Disabled by default because it can be CPU-intensive."
-            value={
-              form.getValue(
-                "playback.chapter_thumbnail_software_tone_map_enabled",
-              ) || "false"
-            }
-            onChange={(v) =>
-              form.setValue(
+            <SettingField
+              label="Generate chapter thumbnails on"
+              type="select"
+              options={chapterThumbnailExecutionOptions(
+                chapterExecution,
+                transcodeNodeAvailable,
+              )}
+              status={
+                transcodeNodeAvailable ? undefined : (
+                  <SettingFieldStatus tone="warn">
+                    No transcode nodes are connected
+                  </SettingFieldStatus>
+                )
+              }
+              value={chapterExecution}
+              onChange={(v) =>
+                form.setValue("playback.chapter_thumbnail_execution", v)
+              }
+              restartRequired={restartKeys.has(
+                "playback.chapter_thumbnail_execution",
+              )}
+            />
+            <SettingField
+              label="HDR handling"
+              type="select"
+              options={[
+                { value: "best_effort", label: "Generate when possible" },
+                { value: "disabled", label: "Skip HDR and Dolby Vision" },
+              ]}
+              description="HDR frames need extra color conversion."
+              value={
+                form.getValue("playback.chapter_thumbnail_hdr_policy") ||
+                "best_effort"
+              }
+              onChange={(v) =>
+                form.setValue("playback.chapter_thumbnail_hdr_policy", v)
+              }
+              restartRequired={restartKeys.has(
+                "playback.chapter_thumbnail_hdr_policy",
+              )}
+            />
+            <SettingField
+              label="Software HDR tone mapping"
+              type="toggle"
+              description="Slow, but works without graphics hardware."
+              value={
+                form.getValue(
+                  "playback.chapter_thumbnail_software_tone_map_enabled",
+                ) || "false"
+              }
+              onChange={(v) =>
+                form.setValue(
+                  "playback.chapter_thumbnail_software_tone_map_enabled",
+                  v,
+                )
+              }
+              disabled={
+                form.getValue("playback.chapter_thumbnail_hdr_policy") ===
+                "disabled"
+              }
+              restartRequired={restartKeys.has(
                 "playback.chapter_thumbnail_software_tone_map_enabled",
-                v,
-              )
-            }
-            disabled={
-              form.getValue("playback.chapter_thumbnail_hdr_policy") ===
-              "disabled"
-            }
-          />
+              )}
+            />
+          </AdvancedSection>
         </FieldGroup>
 
-        <FieldGroup label="Behavior">
+        <FieldGroup label="Watch behavior" restartAll={allRestart(WATCH_KEYS)}>
           <SettingField
-            label="Watched Threshold (%)"
+            label="Mark watched at"
             type="number"
-            hint="Mark as watched after this % is played (default: 90)"
+            unit="%"
             value={form.getValue("playback.watched_threshold")}
             onChange={(v) => form.setValue("playback.watched_threshold", v)}
+            restartRequired={restartKeys.has("playback.watched_threshold")}
           />
           <SettingField
-            label="Min Resume Threshold (%)"
+            label="Show in Continue Watching after"
             type="number"
-            hint="Ignore progress below this % of duration (default: 5)"
+            unit="%"
+            description="Progress below this is ignored."
             value={form.getValue("playback.min_resume_threshold")}
             onChange={(v) => form.setValue("playback.min_resume_threshold", v)}
+            restartRequired={restartKeys.has("playback.min_resume_threshold")}
           />
         </FieldGroup>
       </div>
@@ -341,7 +446,6 @@ export default function PlaybackSettings() {
         onSave={form.save}
         onDiscard={form.discard}
         isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
       />
     </div>
   );
@@ -363,3 +467,20 @@ function formatResolved(resolved: string): string {
       return resolved;
   }
 }
+
+/**
+ * One-line detection result, e.g. "Detected VA-API on renderD128". Returns
+ * undefined while nothing has been probed yet so the caller can show its own
+ * "detecting" state instead of an empty phrase.
+ */
+function describeDetection(
+  detection: HWAccelInfo | undefined,
+): string | undefined {
+  if (!detection) return undefined;
+  if (detection.resolved === "none")
+    return "No supported graphics hardware found";
+  const device = detection.render_devices?.[0];
+  const onNode =
+    detection.source === "transcode_node" ? " (transcode node)" : "";
+  return `Detected ${formatResolved(detection.resolved)}${device ? ` on ${device}` : ""}${onNode}`;
+}
diff --git a/web/src/pages/admin-settings/ProvidersSettings.test.tsx b/web/src/pages/admin-settings/ProvidersSettings.test.tsx
new file mode 100644
index 000000000..9b3475bf5
--- /dev/null
+++ b/web/src/pages/admin-settings/ProvidersSettings.test.tsx
@@ -0,0 +1,622 @@
+import { render as renderDOM, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { MarkerProviderConfig, PluginInstallation } from "@/api/types";
+
+import ProvidersSettings from "./ProvidersSettings";
+
+const mocks = vi.hoisted(() => ({
+  checkConnection: vi.fn(),
+  toastError: vi.fn(),
+  toastInfo: vi.fn(),
+  toastSuccess: vi.fn(),
+  updateProvider: vi.fn(),
+  testProvider: vi.fn(),
+  updateSettings: vi.fn(),
+  updateMarkerProvider: vi.fn(),
+  validateMarkerProvider: vi.fn(),
+}));
+
+function render(ui: React.ReactElement) {
+  return renderDOM(<MemoryRouter>{ui}</MemoryRouter>);
+}
+
+function markerProvider(
+  overrides: Partial<MarkerProviderConfig> = {},
+): MarkerProviderConfig {
+  return {
+    provider: "plugin:6:introdb",
+    display_name: "TheIntroDB",
+    source_type: "plugin",
+    plugin_id: "silo.theintrodb",
+    plugin_installation_id: 6,
+    capability_id: "introdb",
+    is_submitter: true,
+    fetch_enabled: true,
+    fetch_priority: 10,
+    contribute_enabled: false,
+    contribute_auto_local: false,
+    contribute_min_confidence: 0.95,
+    ...overrides,
+  };
+}
+
+let markerProviders: MarkerProviderConfig[] = [];
+let pluginInstallations: Partial<PluginInstallation>[] = [];
+
+vi.mock("@/hooks/queries/admin/markers", () => ({
+  useMarkerProviders: () => ({
+    data: { providers: markerProviders },
+    isLoading: false,
+  }),
+  useUpdateMarkerProvider: () => ({
+    mutate: mocks.updateMarkerProvider,
+    isPending: false,
+  }),
+  useValidateMarkerProvider: () => ({
+    mutate: mocks.validateMarkerProvider,
+    isPending: false,
+  }),
+}));
+
+vi.mock("@/hooks/queries/admin/plugins", () => ({
+  useAdminPluginInstallations: () => ({ data: pluginInstallations }),
+}));
+
+let sensitiveConfigured: string[] = ["mdblist.api_key"];
+let settingsValues: Record<string, string> = {};
+
+const useSettingsFormMock = vi.fn((_options?: { keys: string[] }) => ({
+  isLoading: false,
+  getValue: (key: string) => settingsValues[key] ?? "",
+  setValue: vi.fn(),
+  resetValue: vi.fn(),
+  dirtyCount: 0,
+  dirtyKeys: [],
+  isDirty: vi.fn(() => false),
+  save: vi.fn(),
+  discard: vi.fn(),
+  isSaving: false,
+  restartRequired: false,
+  sensitiveConfigured,
+  sensitiveManagedByEnv: [],
+  sensitiveStatusReady: true,
+  sensitiveStatusError: false,
+  buildConnectionCheckRequest: vi.fn(() => ({ values: {}, dirty_keys: [] })),
+}));
+
+const reportUnsavedMock = vi.fn();
+vi.mock("@/hooks/useUnsavedChanges", () => ({
+  useReportUnsavedChanges: (dirty: boolean) => reportUnsavedMock(dirty),
+}));
+
+vi.mock("@/hooks/useSettingsForm", () => ({
+  useSettingsForm: (options: { keys: string[] }) =>
+    useSettingsFormMock(options),
+}));
+
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => new Set<string>(),
+}));
+
+vi.mock("@/hooks/queries/admin/settings", () => ({
+  useUpdateServerSettings: () => ({
+    mutateAsync: mocks.updateSettings,
+    isPending: false,
+  }),
+  useCheckAdminSettingsConnection: () => ({
+    mutateAsync: mocks.checkConnection,
+    isPending: false,
+  }),
+}));
+
+vi.mock("@/hooks/queries/admin/subtitles", () => ({
+  useSubtitleProviders: () => ({
+    data: {
+      providers: [
+        {
+          provider_name: "subdl",
+          enabled: false,
+          has_api_key: false,
+          has_credentials: false,
+          updated_at: "",
+        },
+        {
+          provider_name: "opensubtitles",
+          enabled: true,
+          has_api_key: false,
+          has_credentials: true,
+          updated_at: "",
+        },
+        {
+          provider_name: "subsource",
+          enabled: false,
+          has_api_key: true,
+          has_credentials: false,
+          updated_at: "",
+        },
+      ],
+    },
+    isLoading: false,
+  }),
+  useUpdateSubtitleProvider: () => ({
+    mutate: mocks.updateProvider,
+    isPending: false,
+  }),
+  useTestSubtitleProvider: () => ({
+    mutate: mocks.testProvider,
+    isPending: false,
+  }),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    error: mocks.toastError,
+    info: mocks.toastInfo,
+    success: mocks.toastSuccess,
+  },
+}));
+
+describe("ProvidersSettings", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    sensitiveConfigured = ["mdblist.api_key"];
+    settingsValues = {};
+    markerProviders = [];
+    pluginInstallations = [];
+    for (const mock of Object.values(mocks)) mock.mockReset();
+  });
+
+  it("heads the page and every provider group", () => {
+    render(<ProvidersSettings />);
+
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Subtitles & Metadata" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        "Where Silo fetches subtitles, artwork, and descriptions.",
+      ),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("group", { name: "Subtitle providers" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("group", { name: "Metadata providers" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("group", { name: "Marker providers" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Searched in order, top to bottom"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows one tile per provider, in search order", () => {
+    render(<ProvidersSettings />);
+
+    const tiles = ["OpenSubtitles", "SubDL", "SubSource", "MDBList"].map(
+      (name) => screen.getByRole("group", { name }),
+    );
+    for (const tile of tiles) expect(tile).toBeInTheDocument();
+    expect(tiles[0]?.compareDocumentPosition(tiles[1] as Node)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+  });
+
+  it("derives each tile state from the stored credentials", () => {
+    render(<ProvidersSettings />);
+
+    const openSubtitles = screen.getByRole("group", { name: "OpenSubtitles" });
+    expect(openSubtitles).toHaveAttribute("data-state", "connected");
+    expect(within(openSubtitles).getByText("Connected")).toBeInTheDocument();
+    // The state word is the only signal: no "credentials stored" line repeating it.
+    expect(
+      within(openSubtitles).queryByText(/credentials stored/),
+    ).not.toBeInTheDocument();
+
+    const subdl = screen.getByRole("group", { name: "SubDL" });
+    expect(subdl).toHaveAttribute("data-state", "not_connected");
+    expect(within(subdl).getByText("Not connected")).toBeInTheDocument();
+    expect(
+      within(subdl).getByRole("button", { name: "Connect" }),
+    ).toBeInTheDocument();
+
+    // Configured but switched off: not searched, so not "connected".
+    const subsource = screen.getByRole("group", { name: "SubSource" });
+    expect(subsource).toHaveAttribute("data-state", "not_connected");
+    expect(within(subsource).getByText("Connected · off")).toBeInTheDocument();
+
+    // MDBList's credential is a server setting, read from sensitive status.
+    const mdblist = screen.getByRole("group", { name: "MDBList" });
+    expect(mdblist).toHaveAttribute("data-state", "connected");
+    expect(
+      within(mdblist).getByRole("button", { name: "Manage" }),
+    ).toBeInTheDocument();
+  });
+
+  it("counts a missing MDBList key as not connected", () => {
+    sensitiveConfigured = [];
+
+    render(<ProvidersSettings />);
+
+    expect(screen.getByRole("group", { name: "MDBList" })).toHaveAttribute(
+      "data-state",
+      "not_connected",
+    );
+  });
+
+  it("reports a credential draft to the unsaved-changes registry", async () => {
+    const user = userEvent.setup();
+    render(<ProvidersSettings />);
+    reportUnsavedMock.mockClear();
+
+    await user.click(
+      within(screen.getByRole("group", { name: "OpenSubtitles" })).getByRole(
+        "button",
+        {
+          name: /Manage|Connect|Set up/,
+        },
+      ),
+    );
+    await user.type(screen.getByLabelText(/Username/i), "user");
+
+    // Tile drafts live outside useSettingsForm; the navigation guard and the
+    // reload prompt only see them through this report.
+    expect(reportUnsavedMock).toHaveBeenLastCalledWith(true);
+  });
+
+  it("expands one tile in place and collapses it again", async () => {
+    const user = userEvent.setup();
+    render(<ProvidersSettings />);
+
+    expect(screen.queryByLabelText("API key")).not.toBeInTheDocument();
+
+    await user.click(
+      within(screen.getByRole("group", { name: "SubDL" })).getByRole("button", {
+        name: "Connect",
+      }),
+    );
+
+    const subdl = screen.getByRole("group", { name: "SubDL" });
+    expect(subdl).toHaveAttribute("data-expanded", "true");
+    expect(subdl).toHaveAttribute("data-state", "editing");
+    expect(within(subdl).getByLabelText("API key")).toBeInTheDocument();
+    expect(
+      within(subdl).getByRole("button", { name: "Test connection" }),
+    ).toBeInTheDocument();
+    // Only one panel is open at a time.
+    expect(
+      screen.getByRole("group", { name: "SubSource" }),
+    ).not.toHaveAttribute("data-expanded");
+
+    await user.click(within(subdl).getByRole("button", { name: "Close" }));
+
+    expect(screen.getByRole("group", { name: "SubDL" })).not.toHaveAttribute(
+      "data-expanded",
+    );
+    expect(screen.queryByLabelText("API key")).not.toBeInTheDocument();
+  });
+
+  it("swaps the expanded panel when another tile is opened", async () => {
+    const user = userEvent.setup();
+    render(<ProvidersSettings />);
+
+    await user.click(
+      within(screen.getByRole("group", { name: "SubDL" })).getByRole("button", {
+        name: "Connect",
+      }),
+    );
+    await user.click(
+      within(screen.getByRole("group", { name: "MDBList" })).getByRole(
+        "button",
+        {
+          name: "Manage",
+        },
+      ),
+    );
+
+    expect(screen.getByRole("group", { name: "SubDL" })).not.toHaveAttribute(
+      "data-expanded",
+    );
+    expect(screen.getByRole("group", { name: "MDBList" })).toHaveAttribute(
+      "data-expanded",
+      "true",
+    );
+  });
+
+  it("saves a subtitle provider from its own panel", async () => {
+    const user = userEvent.setup();
+    render(<ProvidersSettings />);
+
+    await user.click(
+      within(screen.getByRole("group", { name: "SubDL" })).getByRole("button", {
+        name: "Connect",
+      }),
+    );
+    const subdl = screen.getByRole("group", { name: "SubDL" });
+    await user.type(within(subdl).getByLabelText("API key"), "key-123");
+    await user.click(within(subdl).getByRole("button", { name: "Save" }));
+
+    expect(mocks.updateProvider).toHaveBeenCalledWith(
+      { provider: "subdl", config: { enabled: false, api_key: "key-123" } },
+      expect.anything(),
+    );
+  });
+
+  it("surfaces a failed provider test on the tile itself", async () => {
+    const user = userEvent.setup();
+    mocks.testProvider.mockImplementation((_vars, options) => {
+      options.onSuccess({ success: false, error: "401 — key rejected" });
+    });
+    render(<ProvidersSettings />);
+
+    await user.click(
+      within(screen.getByRole("group", { name: "SubSource" })).getByRole(
+        "button",
+        {
+          name: "Manage",
+        },
+      ),
+    );
+    await user.click(
+      within(screen.getByRole("group", { name: "SubSource" })).getByRole(
+        "button",
+        {
+          name: "Test connection",
+        },
+      ),
+    );
+    await user.click(
+      within(screen.getByRole("group", { name: "SubSource" })).getByRole(
+        "button",
+        {
+          name: "Close",
+        },
+      ),
+    );
+
+    const subsource = screen.getByRole("group", { name: "SubSource" });
+    expect(subsource).toHaveAttribute("data-state", "error");
+    expect(
+      within(subsource).getByRole("button", { name: "Fix" }),
+    ).toBeInTheDocument();
+    expect(
+      within(subsource).getByText("401 — key rejected"),
+    ).toBeInTheDocument();
+  });
+
+  it("gives every panel action a resting affordance instead of ghost text", async () => {
+    const user = userEvent.setup();
+    render(<ProvidersSettings />);
+
+    await user.click(
+      within(screen.getByRole("group", { name: "SubSource" })).getByRole(
+        "button",
+        {
+          name: "Manage",
+        },
+      ),
+    );
+
+    const subsource = screen.getByRole("group", { name: "SubSource" });
+    expect(
+      within(subsource).getByRole("button", { name: "Test connection" }),
+    ).toHaveAttribute("data-variant", "secondary");
+    for (const name of ["Disconnect", "Close"]) {
+      expect(within(subsource).getByRole("button", { name })).toHaveAttribute(
+        "data-variant",
+        "outline",
+      );
+    }
+  });
+
+  it("points metadata plugins at the plugins page instead of faking tiles", () => {
+    render(<ProvidersSettings />);
+
+    expect(screen.getByRole("link", { name: "Plugins" })).toHaveAttribute(
+      "href",
+      "/admin/plugins",
+    );
+    expect(
+      screen.queryByRole("group", { name: "TMDB" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("says so plainly when no marker provider plugin is installed", () => {
+    render(<ProvidersSettings />);
+
+    expect(
+      screen.getByText(/No marker provider plugins are installed/),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "plugin catalog" }),
+    ).toHaveAttribute("href", "/admin/plugins?tab=catalog");
+  });
+
+  it("counts a marker provider whose plugin has no saved key as not connected", () => {
+    markerProviders = [markerProvider()];
+    pluginInstallations = [
+      {
+        id: 6,
+        plugin_id: "silo.theintrodb",
+        enabled: true,
+        global_config_schema: [
+          {
+            key: "account",
+            title: "Account",
+            json_schema: "{}",
+            required: false,
+          },
+        ],
+        global_configs: [],
+      },
+    ];
+
+    render(<ProvidersSettings />);
+
+    const tile = screen.getByRole("group", { name: "TheIntroDB" });
+    expect(tile).toHaveAttribute("data-state", "not_connected");
+    expect(within(tile).getByText("Needs setup")).toBeInTheDocument();
+    // The next step is the plugin's own page, so the tile does not offer to
+    // "Manage" settings that cannot work yet.
+    expect(
+      within(tile).getByRole("button", { name: "Set up" }),
+    ).toBeInTheDocument();
+  });
+
+  it("counts a configured, lookup-enabled marker provider as connected", () => {
+    markerProviders = [markerProvider()];
+    pluginInstallations = [
+      {
+        id: 6,
+        plugin_id: "silo.theintrodb",
+        enabled: true,
+        global_config_schema: [
+          {
+            key: "account",
+            title: "Account",
+            json_schema: "{}",
+            required: true,
+          },
+        ],
+        global_configs: [
+          { key: "account", value: {}, configured_secrets: ["api_key"] },
+        ],
+      },
+    ];
+
+    render(<ProvidersSettings />);
+
+    const tile = screen.getByRole("group", { name: "TheIntroDB" });
+    expect(tile).toHaveAttribute("data-state", "connected");
+    expect(within(tile).getByText("Connected")).toBeInTheDocument();
+  });
+
+  it("marks a configured provider that is off for lookup", () => {
+    markerProviders = [markerProvider({ fetch_enabled: false })];
+    pluginInstallations = [
+      {
+        id: 6,
+        plugin_id: "silo.theintrodb",
+        enabled: true,
+        global_config_schema: [
+          {
+            key: "account",
+            title: "Account",
+            json_schema: "{}",
+            required: true,
+          },
+        ],
+        global_configs: [
+          { key: "account", value: {}, configured_secrets: ["api_key"] },
+        ],
+      },
+    ];
+
+    render(<ProvidersSettings />);
+
+    const tile = screen.getByRole("group", { name: "TheIntroDB" });
+    expect(tile).toHaveAttribute("data-state", "not_connected");
+    expect(within(tile).getByText("Connected · off")).toBeInTheDocument();
+  });
+
+  it("edits marker provider behavior in the tile and sends the whole row", async () => {
+    const user = userEvent.setup();
+    markerProviders = [markerProvider()];
+
+    render(<ProvidersSettings />);
+
+    await user.click(
+      within(screen.getByRole("group", { name: "TheIntroDB" })).getByRole(
+        "button",
+        {
+          name: "Manage",
+        },
+      ),
+    );
+
+    const tile = screen.getByRole("group", { name: "TheIntroDB" });
+    expect(tile).toHaveAttribute("data-expanded", "true");
+    expect(within(tile).getByLabelText("Lookup order")).toHaveValue(10);
+    // Credentials are the plugin's, not Silo's: the panel links out for them.
+    expect(
+      within(tile).getByRole("link", { name: "plugin page" }),
+    ).toHaveAttribute(
+      "href",
+      "/admin/plugins?installed_q=silo.theintrodb&configure=silo.theintrodb",
+    );
+
+    await user.clear(within(tile).getByLabelText("Lookup order"));
+    await user.type(within(tile).getByLabelText("Lookup order"), "5");
+    await user.click(within(tile).getByRole("button", { name: "Save" }));
+
+    expect(mocks.updateMarkerProvider).toHaveBeenCalledWith({
+      provider: "plugin:6:introdb",
+      patch: {
+        fetch_enabled: true,
+        fetch_priority: 5,
+        contribute_enabled: false,
+        contribute_auto_local: false,
+        contribute_min_confidence: 0.95,
+      },
+    });
+  });
+
+  it("admits when the detection mode never looks online", () => {
+    markerProviders = [markerProvider()];
+    settingsValues = { "markers.mode": "local" };
+
+    render(<ProvidersSettings />);
+
+    expect(
+      screen.getByText(/Nothing here is searched right now/),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/is set to Detect on this server/),
+    ).toBeInTheDocument();
+  });
+
+  it("says when providers are in play instead", () => {
+    markerProviders = [markerProvider()];
+    settingsValues = { "markers.mode": "both" };
+
+    render(<ProvidersSettings />);
+
+    expect(screen.getByText(/Providers are searched when/)).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Nothing here is searched right now/),
+    ).not.toBeInTheDocument();
+  });
+
+  it("closes a subtitle panel when a marker tile is opened", async () => {
+    const user = userEvent.setup();
+    markerProviders = [markerProvider()];
+
+    render(<ProvidersSettings />);
+
+    await user.click(
+      within(screen.getByRole("group", { name: "SubDL" })).getByRole("button", {
+        name: "Connect",
+      }),
+    );
+    await user.click(
+      within(screen.getByRole("group", { name: "TheIntroDB" })).getByRole(
+        "button",
+        {
+          name: "Manage",
+        },
+      ),
+    );
+
+    expect(screen.getByRole("group", { name: "SubDL" })).not.toHaveAttribute(
+      "data-expanded",
+    );
+    expect(screen.getByRole("group", { name: "TheIntroDB" })).toHaveAttribute(
+      "data-expanded",
+      "true",
+    );
+  });
+});
diff --git a/web/src/pages/admin-settings/ProvidersSettings.tsx b/web/src/pages/admin-settings/ProvidersSettings.tsx
new file mode 100644
index 000000000..b526c724a
--- /dev/null
+++ b/web/src/pages/admin-settings/ProvidersSettings.tsx
@@ -0,0 +1,693 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+
+import type { SubtitleProviderConfig } from "@/api/types";
+import {
+  ProviderPanelActions,
+  ProviderTile,
+  ProviderTileGrid,
+  resolveProviderTileState,
+} from "@/components/settings/ProviderTile";
+import type { ProviderTestState } from "@/components/settings/ProviderTile";
+import { RestartBadge } from "@/components/settings/RestartBadge";
+import { SecretField } from "@/components/settings/SecretField";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useReportUnsavedChanges } from "@/hooks/useUnsavedChanges";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import {
+  useCheckAdminSettingsConnection,
+  useUpdateServerSettings,
+} from "@/hooks/queries/admin/settings";
+import {
+  useSubtitleProviders,
+  useTestSubtitleProvider,
+  useUpdateSubtitleProvider,
+} from "@/hooks/queries/admin/subtitles";
+import { useRestartKeys, type RestartKeyMatcher } from "@/hooks/useRestartKeys";
+import { useSettingsForm } from "@/hooks/useSettingsForm";
+
+import { FieldGroup } from "./FieldGroup";
+import { MarkerProviderTiles } from "./MarkerProviderTiles";
+import { SettingField } from "./SettingField";
+
+/**
+ * MDBList is the only provider on this page whose credential is a server
+ * setting; the subtitle providers have their own endpoints. The form is still
+ * mounted so the page reads one sensitive-status list for every tile.
+ */
+const KEYS = ["mdblist.api_key"];
+
+// ---------------------------------------------------------------------------
+// Shared tile plumbing
+// ---------------------------------------------------------------------------
+
+/** Marks the elapsed time of a request without each caller re-deriving it. */
+async function timed<T>(
+  run: () => Promise<T>,
+): Promise<{ result: T; durationMs: number }> {
+  const started = Date.now();
+  const result = await run();
+  return { result, durationMs: Date.now() - started };
+}
+
+function DisconnectButton({
+  label = "Disconnect",
+  title,
+  description,
+  actionLabel = "Clear",
+  onConfirm,
+}: {
+  label?: string;
+  title: string;
+  description: string;
+  actionLabel?: string;
+  onConfirm: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        type="button"
+        size="sm"
+        variant="outline"
+        onClick={() => setOpen(true)}
+      >
+        {label}
+      </Button>
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{title}</AlertDialogTitle>
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => {
+                onConfirm();
+                setOpen(false);
+              }}
+            >
+              {actionLabel}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Subtitle providers
+// ---------------------------------------------------------------------------
+
+interface SubtitleProviderPresentation {
+  name: string;
+  tagline: string;
+  monogram: string;
+  monogramClass: string;
+}
+
+const SUBTITLE_PROVIDERS: Record<string, SubtitleProviderPresentation> = {
+  opensubtitles: {
+    name: "OpenSubtitles",
+    tagline: "Community subtitles",
+    monogram: "OS",
+    monogramClass: "bg-sky-500/20 text-sky-700 dark:text-sky-300",
+  },
+  subdl: {
+    name: "SubDL",
+    tagline: "API key provider",
+    monogram: "SD",
+    monogramClass: "bg-orange-500/20 text-orange-700 dark:text-orange-300",
+  },
+  subsource: {
+    name: "SubSource",
+    tagline: "API key provider",
+    monogram: "SS",
+    monogramClass: "bg-violet-500/20 text-violet-700 dark:text-violet-300",
+  },
+};
+
+const SUBTITLE_PROVIDER_ORDER = ["opensubtitles", "subdl", "subsource"];
+
+function presentationFor(providerName: string): SubtitleProviderPresentation {
+  return (
+    SUBTITLE_PROVIDERS[providerName] ?? {
+      name: providerName,
+      tagline: "Subtitle provider",
+      monogram: providerName.slice(0, 2),
+      monogramClass: "bg-muted text-muted-foreground",
+    }
+  );
+}
+
+function SubtitleProviderTile({
+  config,
+  expanded,
+  onExpand,
+  onCollapse,
+  test,
+  onTested,
+}: {
+  config: SubtitleProviderConfig;
+  expanded: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+  test: ProviderTestState | undefined;
+  onTested: (test: ProviderTestState | undefined) => void;
+}) {
+  // `null` means "follow the server"; the switch only pins a value while the
+  // admin has an unsaved change, so a refetch can't silently flip it back.
+  const [enabledDraft, setEnabledDraft] = useState<boolean | null>(null);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [apiKey, setApiKey] = useState("");
+
+  const updateProvider = useUpdateSubtitleProvider();
+  const testProvider = useTestSubtitleProvider();
+
+  const enabled = enabledDraft ?? config.enabled;
+  const providerName = config.provider_name;
+  const { name, tagline, monogram, monogramClass } =
+    presentationFor(providerName);
+  const usesAccount = providerName === "opensubtitles";
+  const configured = usesAccount ? config.has_credentials : config.has_api_key;
+
+  const draft = usesAccount ? { username, password } : { api_key: apiKey };
+  // Tile drafts live outside useSettingsForm, so the navigation guard and
+  // the reload prompt only see them if the tile reports them itself.
+  useReportUnsavedChanges(
+    enabledDraft !== null ||
+      username !== "" ||
+      password !== "" ||
+      apiKey !== "",
+  );
+
+  function resetDrafts() {
+    setEnabledDraft(null);
+    setUsername("");
+    setPassword("");
+    setApiKey("");
+  }
+
+  // A failure describes the values that were tested, so it stops being true the
+  // moment they are edited; leaving it up would keep the tile in error while
+  // the admin retypes.
+  function clearStaleTest() {
+    if (test) onTested(undefined);
+  }
+
+  function handleUsernameChange(next: string) {
+    clearStaleTest();
+    setUsername(next);
+  }
+
+  function handlePasswordChange(next: string) {
+    clearStaleTest();
+    setPassword(next);
+  }
+
+  function handleApiKeyChange(next: string) {
+    clearStaleTest();
+    setApiKey(next);
+  }
+
+  function handleSave() {
+    updateProvider.mutate(
+      { provider: providerName, config: { enabled, ...draft } },
+      { onSuccess: resetDrafts },
+    );
+  }
+
+  function handleTest() {
+    onTested(undefined);
+    const started = Date.now();
+    testProvider.mutate(
+      { provider: providerName, config: { enabled, ...draft } },
+      {
+        onSuccess: (result) =>
+          onTested({
+            ok: result.success,
+            message: result.success
+              ? "Connection successful."
+              : (result.error ?? "Connection failed."),
+            at: Date.now(),
+            durationMs: Date.now() - started,
+          }),
+        onError: (err) =>
+          onTested({
+            ok: false,
+            message: err instanceof Error ? err.message : "Connection failed.",
+            at: Date.now(),
+            durationMs: Date.now() - started,
+          }),
+      },
+    );
+  }
+
+  function handleClear() {
+    updateProvider.mutate(
+      {
+        provider: providerName,
+        config: { enabled: false, clear_credentials: true },
+      },
+      {
+        onSuccess: () => {
+          resetDrafts();
+          onTested(undefined);
+        },
+      },
+    );
+  }
+
+  const connected = configured && enabled;
+  const state = resolveProviderTileState({ expanded, test, connected });
+  const statePill =
+    !expanded && configured && !enabled ? "Connected · off" : undefined;
+  // Only a failure earns the extra line: "connected" is already in the header.
+  const meta = !expanded && test && !test.ok ? test.message : undefined;
+
+  return (
+    <ProviderTile
+      name={name}
+      tagline={tagline}
+      monogram={monogram}
+      monogramClass={monogramClass}
+      state={state}
+      statePill={statePill}
+      meta={meta}
+      busy={updateProvider.isPending || testProvider.isPending}
+      expanded={expanded}
+      primaryAction={{
+        label: test && !test.ok ? "Fix" : configured ? "Manage" : "Connect",
+        onClick: onExpand,
+      }}
+      headerActions={
+        expanded ? (
+          <Switch
+            checked={enabled}
+            onCheckedChange={setEnabledDraft}
+            aria-label={`Enable ${name}`}
+          />
+        ) : undefined
+      }
+    >
+      {usesAccount ? (
+        <>
+          <SettingField
+            label="Username"
+            value={username}
+            onChange={handleUsernameChange}
+            description={
+              config.has_credentials
+                ? "Leave blank to keep the saved username."
+                : undefined
+            }
+          />
+          <SecretField
+            label="Password"
+            value={password}
+            configured={config.has_credentials}
+            onChange={handlePasswordChange}
+          />
+        </>
+      ) : (
+        <SecretField
+          label="API key"
+          value={apiKey}
+          configured={config.has_api_key}
+          onChange={handleApiKeyChange}
+        />
+      )}
+      <ProviderPanelActions test={test}>
+        <Button
+          type="button"
+          size="sm"
+          onClick={handleSave}
+          disabled={updateProvider.isPending}
+        >
+          {updateProvider.isPending ? "Saving..." : "Save"}
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          variant="secondary"
+          onClick={handleTest}
+          disabled={testProvider.isPending}
+        >
+          {testProvider.isPending ? "Testing..." : "Test connection"}
+        </Button>
+        {configured ? (
+          <DisconnectButton
+            title={`Clear ${name} credentials?`}
+            description={`${name} is turned off and removed from subtitle searches right away.`}
+            actionLabel="Clear and turn off"
+            onConfirm={handleClear}
+          />
+        ) : null}
+        <Button type="button" size="sm" variant="outline" onClick={onCollapse}>
+          Close
+        </Button>
+      </ProviderPanelActions>
+      <p className="text-muted-foreground mt-2 text-xs">
+        Test uses the values typed here.
+      </p>
+    </ProviderTile>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MDBList
+// ---------------------------------------------------------------------------
+
+function MDBListTile({
+  sensitiveConfigured,
+  restartKeys,
+  expanded,
+  onExpand,
+  onCollapse,
+  test,
+  onTested,
+}: {
+  sensitiveConfigured: string[];
+  restartKeys: RestartKeyMatcher;
+  expanded: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+  test: ProviderTestState | undefined;
+  onTested: (test: ProviderTestState | undefined) => void;
+}) {
+  const updateSettings = useUpdateServerSettings();
+  const checkConnection = useCheckAdminSettingsConnection();
+  const [apiKey, setApiKey] = useState("");
+  const [testing, setTesting] = useState(false);
+
+  const configured = sensitiveConfigured.includes("mdblist.api_key");
+  const hasDraft = apiKey.trim() !== "";
+  useReportUnsavedChanges(hasDraft);
+
+  async function save() {
+    if (!hasDraft) {
+      toast.info("Nothing to save for MDBList.");
+      return;
+    }
+    try {
+      await updateSettings.mutateAsync({ "mdblist.api_key": apiKey });
+      setApiKey("");
+      onTested(undefined);
+      toast.success("MDBList credentials saved");
+    } catch {
+      // The mutation surfaces the API error.
+    }
+  }
+
+  async function clearAll() {
+    try {
+      await updateSettings.mutateAsync({ "mdblist.api_key": "" });
+      setApiKey("");
+      onTested(undefined);
+      toast.success("MDBList credentials cleared");
+    } catch {
+      // The mutation surfaces the API error.
+    }
+  }
+
+  async function runTest() {
+    setTesting(true);
+    try {
+      const { result, durationMs } = await timed(() =>
+        checkConnection.mutateAsync({
+          kind: "mdblist",
+          body: {
+            values: { "mdblist.api_key": apiKey },
+            dirty_keys: hasDraft ? ["mdblist.api_key"] : [],
+          },
+        }),
+      );
+      onTested({
+        ok: result.success,
+        message: result.message,
+        at: Date.now(),
+        durationMs,
+      });
+    } catch (error) {
+      onTested({
+        ok: false,
+        message:
+          error instanceof Error ? error.message : "Connection check failed.",
+        at: Date.now(),
+        durationMs: 0,
+      });
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  const state = resolveProviderTileState({
+    expanded,
+    test,
+    connected: configured,
+  });
+  const meta = !expanded && test && !test.ok ? test.message : undefined;
+
+  return (
+    <ProviderTile
+      name="MDBList"
+      tagline="Ratings and lists"
+      monogram="MD"
+      monogramClass="bg-emerald-500/20 text-emerald-700 dark:text-emerald-300"
+      state={state}
+      meta={meta}
+      busy={updateSettings.isPending || testing}
+      expanded={expanded}
+      // A pending restart has to be visible without opening the tile.
+      badge={restartKeys.has("mdblist.api_key") ? <RestartBadge /> : undefined}
+      primaryAction={{
+        label: test && !test.ok ? "Fix" : configured ? "Manage" : "Connect",
+        onClick: onExpand,
+      }}
+    >
+      <p className="text-muted-foreground mb-1 text-xs">
+        A key adds search and browse; list URLs import without one. Get a key at{" "}
+        <a
+          href="https://mdblist.com/preferences/#api"
+          target="_blank"
+          rel="noreferrer"
+          className="underline"
+        >
+          mdblist.com/preferences
+        </a>
+        .
+      </p>
+      <SecretField
+        label="API key"
+        value={apiKey}
+        configured={configured}
+        onChange={(next) => {
+          // The failure describes the key that was tested, not the new one.
+          if (test) onTested(undefined);
+          setApiKey(next);
+        }}
+        restartRequired={restartKeys.has("mdblist.api_key")}
+      />
+      <ProviderPanelActions test={test}>
+        <Button
+          type="button"
+          size="sm"
+          onClick={() => void save()}
+          disabled={updateSettings.isPending}
+        >
+          {updateSettings.isPending ? "Saving..." : "Save"}
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          variant="secondary"
+          onClick={() => void runTest()}
+          disabled={testing || (!configured && !hasDraft)}
+        >
+          {testing ? "Testing..." : "Test connection"}
+        </Button>
+        {configured ? (
+          <DisconnectButton
+            title="Clear MDBList credentials?"
+            description="MDBList search and browse stop working. Lists already imported by URL are unaffected."
+            onConfirm={() => void clearAll()}
+          />
+        ) : null}
+        <Button type="button" size="sm" variant="outline" onClick={onCollapse}>
+          Close
+        </Button>
+      </ProviderPanelActions>
+      <p className="text-muted-foreground mt-2 text-xs">
+        Test uses the key typed here, or the saved one.
+      </p>
+    </ProviderTile>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+
+export default function ProvidersSettings() {
+  const form = useSettingsForm({ keys: KEYS });
+  const restartKeys = useRestartKeys();
+  const { data, isLoading } = useSubtitleProviders();
+  // One expanded tile at a time: the panel is the page's focus while it is
+  // open, and two open panels lose the list the admin is working through.
+  const [expandedTile, setExpandedTile] = useState<string | null>(null);
+  const [tests, setTests] = useState<
+    Record<string, ProviderTestState | undefined>
+  >({});
+
+  function recordTest(id: string, test: ProviderTestState | undefined) {
+    setTests((current) => ({ ...current, [id]: test }));
+  }
+
+  // Marker tiles can be perfectly set up and still never run: the detection
+  // mode on Library & Metadata decides whether Silo looks online at all. The
+  // key is read, not staged — this page never saves it.
+  const markerMode = form.getValue("markers.mode");
+  const offlineMarkerMode =
+    markerMode === "off"
+      ? "Off"
+      : markerMode === "local"
+        ? "Detect on this server"
+        : null;
+
+  const providers = [...(data?.providers ?? [])].sort((a, b) => {
+    const ai = SUBTITLE_PROVIDER_ORDER.indexOf(a.provider_name);
+    const bi = SUBTITLE_PROVIDER_ORDER.indexOf(b.provider_name);
+    if (ai === -1 && bi === -1) return 0;
+    if (ai === -1) return 1;
+    if (bi === -1) return -1;
+    return ai - bi;
+  });
+
+  if (form.isLoading || isLoading) {
+    return (
+      <div
+        className="max-w-5xl space-y-6"
+        role="status"
+        aria-label="Loading providers"
+      >
+        <Skeleton className="h-9 w-64" />
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-40 w-full" />
+        <Skeleton className="h-40 w-full" />
+        <span className="sr-only">Loading providers</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full max-w-5xl flex-col gap-7">
+      <SettingsPageHeader title="Subtitles & Metadata" />
+
+      <FieldGroup label="Subtitle providers">
+        <div className="py-3.5">
+          {providers.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              No subtitle providers are available.
+            </p>
+          ) : (
+            <ProviderTileGrid>
+              {providers.map((provider) => (
+                <SubtitleProviderTile
+                  key={provider.provider_name}
+                  config={provider}
+                  expanded={expandedTile === provider.provider_name}
+                  onExpand={() => setExpandedTile(provider.provider_name)}
+                  onCollapse={() => setExpandedTile(null)}
+                  test={tests[provider.provider_name]}
+                  onTested={(test) => recordTest(provider.provider_name, test)}
+                />
+              ))}
+            </ProviderTileGrid>
+          )}
+        </div>
+      </FieldGroup>
+
+      <FieldGroup label="Metadata providers">
+        <div className="space-y-3 py-3.5">
+          <ProviderTileGrid>
+            <MDBListTile
+              sensitiveConfigured={form.sensitiveConfigured}
+              restartKeys={restartKeys}
+              expanded={expandedTile === "mdblist"}
+              onExpand={() => setExpandedTile("mdblist")}
+              onCollapse={() => setExpandedTile(null)}
+              test={tests.mdblist}
+              onTested={(test) => recordTest("mdblist", test)}
+            />
+          </ProviderTileGrid>
+          <p className="text-muted-foreground text-xs">
+            TMDB and TheTVDB connect from{" "}
+            <Link to="/admin/plugins" className="underline underline-offset-2">
+              Plugins
+            </Link>
+            .
+          </p>
+        </div>
+      </FieldGroup>
+
+      {/*
+        Marker providers are the online half of "Find intros and credits". The
+        detection mode itself stays on Library & Metadata; what each provider
+        does — lookup order, whether this server contributes back — is provider
+        configuration and belongs beside the other providers.
+      */}
+      <FieldGroup label="Marker providers">
+        <div className="space-y-3 py-3.5">
+          <MarkerProviderTiles
+            expandedTile={expandedTile}
+            onExpand={setExpandedTile}
+            onCollapse={() => setExpandedTile(null)}
+          />
+          <p className="text-muted-foreground text-xs">
+            {offlineMarkerMode ? (
+              <>
+                Nothing here is searched right now:{" "}
+                <Link
+                  to="/admin/settings/library"
+                  className="hover:text-foreground font-medium underline underline-offset-2 transition-colors"
+                >
+                  Find intros and credits
+                </Link>{" "}
+                is set to {offlineMarkerMode}.
+              </>
+            ) : (
+              <>
+                Providers are searched when{" "}
+                <Link
+                  to="/admin/settings/library"
+                  className="hover:text-foreground font-medium underline underline-offset-2 transition-colors"
+                >
+                  Find intros and credits
+                </Link>{" "}
+                looks online.
+              </>
+            )}
+          </p>
+        </div>
+      </FieldGroup>
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/RateLimitSettings.tsx b/web/src/pages/admin-settings/RateLimitSettings.tsx
deleted file mode 100644
index 77948912d..000000000
--- a/web/src/pages/admin-settings/RateLimitSettings.tsx
+++ /dev/null
@@ -1,530 +0,0 @@
-import { useMemo, useState } from "react";
-import { AlertTriangle, Loader2, Save } from "lucide-react";
-import {
-  useRateLimitConfig,
-  useUpdateRateLimitConfig,
-} from "@/hooks/queries/admin/rateLimits";
-import type {
-  RateLimitConfig,
-  RateLimitTierConfig,
-  RateLimitAuthEndpointConfig,
-} from "@/api/types";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { RestartServerButton } from "./RestartServerButton";
-
-const DEFAULT_TIER: RateLimitTierConfig = {
-  requests_per_second: 10,
-  requests_per_minute: 300,
-  burst: 20,
-};
-
-const DEFAULT_AUTH_ENDPOINT: RateLimitAuthEndpointConfig = {
-  requests_per_minute: 20,
-  burst: 10,
-};
-
-const DEFAULT_CONFIG: RateLimitConfig = {
-  enabled: true,
-  backend: "memory",
-  global_requests_per_second: 1000,
-  tiers: {
-    standard: { requests_per_second: 20, requests_per_minute: 1200, burst: 20 },
-    elevated: {
-      requests_per_second: 100,
-      requests_per_minute: 6000,
-      burst: 100,
-    },
-  },
-  ip_requests_per_second: 120,
-  ip_requests_per_minute: 6000,
-  ip_burst: 120,
-  auth_endpoints: {
-    login: { requests_per_minute: 20, burst: 10 },
-    signup: { requests_per_minute: 10, burst: 6 },
-    setup: { requests_per_minute: 10, burst: 6 },
-    device_start: { requests_per_minute: 20, burst: 10 },
-    device_lookup: { requests_per_minute: 60, burst: 20 },
-    device_poll: { requests_per_minute: 120, burst: 30 },
-    autoscan_webhook: { requests_per_minute: 60, burst: 30 },
-  },
-};
-
-const TIER_LABELS: Record<string, string> = {
-  standard: "Standard",
-  elevated: "Elevated",
-};
-
-const AUTH_ENDPOINT_LABELS: Record<string, string> = {
-  login: "Login",
-  signup: "Signup",
-  setup: "Setup",
-  device_start: "Device Authorization Start",
-  device_lookup: "Device Authorization Lookup",
-  device_poll: "Device Authorization Polling",
-  autoscan_webhook: "Autoscan Webhook",
-};
-
-export default function RateLimitSettings() {
-  const { data: serverConfig, isLoading } = useRateLimitConfig();
-  const updateConfig = useUpdateRateLimitConfig();
-  const hydratedConfig = useMemo<RateLimitConfig>(() => {
-    if (!serverConfig) return DEFAULT_CONFIG;
-    return {
-      enabled: serverConfig.enabled,
-      backend: serverConfig.backend || "memory",
-      global_requests_per_second: serverConfig.global_requests_per_second,
-      tiers: {
-        standard:
-          serverConfig.tiers?.standard ?? DEFAULT_CONFIG.tiers.standard!,
-        elevated:
-          serverConfig.tiers?.elevated ?? DEFAULT_CONFIG.tiers.elevated!,
-      },
-      ip_requests_per_second:
-        serverConfig.ip_requests_per_second ??
-        DEFAULT_CONFIG.ip_requests_per_second,
-      ip_requests_per_minute:
-        serverConfig.ip_requests_per_minute ??
-        DEFAULT_CONFIG.ip_requests_per_minute,
-      ip_burst: serverConfig.ip_burst ?? DEFAULT_CONFIG.ip_burst,
-      auth_endpoints: Object.fromEntries(
-        Object.keys(AUTH_ENDPOINT_LABELS).map((endpoint) => [
-          endpoint,
-          serverConfig.auth_endpoints?.[endpoint] ??
-            DEFAULT_CONFIG.auth_endpoints[endpoint] ??
-            DEFAULT_AUTH_ENDPOINT,
-        ]),
-      ),
-    };
-  }, [serverConfig]);
-  const hydratedKey = JSON.stringify(hydratedConfig);
-  const [configState, setConfigState] = useState<{
-    key: string;
-    config: RateLimitConfig;
-  }>({
-    key: hydratedKey,
-    config: hydratedConfig,
-  });
-  const config =
-    configState.key === hydratedKey ? configState.config : hydratedConfig;
-
-  function updateConfigState(
-    updater: (prev: RateLimitConfig) => RateLimitConfig,
-  ) {
-    setConfigState((prev) => {
-      const base = prev.key === hydratedKey ? prev.config : hydratedConfig;
-      return {
-        key: hydratedKey,
-        config: updater(base),
-      };
-    });
-  }
-
-  function handleTierChange(
-    tier: string,
-    field: keyof RateLimitTierConfig,
-    value: string,
-  ) {
-    const num = parseInt(value, 10);
-    if (isNaN(num) || num <= 0) return;
-    updateConfigState((prev) => {
-      const existing: RateLimitTierConfig = prev.tiers[tier] ?? DEFAULT_TIER;
-      return {
-        ...prev,
-        tiers: {
-          ...prev.tiers,
-          [tier]: {
-            ...existing,
-            [field]: num,
-          },
-        },
-      };
-    });
-  }
-
-  function handleAuthEndpointChange(
-    endpoint: string,
-    field: keyof RateLimitAuthEndpointConfig,
-    value: string,
-  ) {
-    const num = parseInt(value, 10);
-    if (isNaN(num) || num <= 0) return;
-    updateConfigState((prev) => {
-      const existing: RateLimitAuthEndpointConfig =
-        prev.auth_endpoints[endpoint] ?? DEFAULT_AUTH_ENDPOINT;
-      return {
-        ...prev,
-        auth_endpoints: {
-          ...prev.auth_endpoints,
-          [endpoint]: {
-            ...existing,
-            [field]: num,
-          },
-        },
-      };
-    });
-  }
-
-  function handleSave() {
-    updateConfig.mutate(config);
-  }
-
-  // The limiter only starts (and only switches backend) at boot, so the saved
-  // config can disagree with what this process is actually enforcing.
-  const pendingRestart =
-    !!serverConfig &&
-    ((serverConfig.enabled && serverConfig.active === false) ||
-      (serverConfig.active === true &&
-        !!serverConfig.active_backend &&
-        serverConfig.backend !== serverConfig.active_backend));
-
-  if (isLoading) return <div>Loading...</div>;
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Rate Limiting</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure request budgets for protected API routes, API keys, and
-          public authentication or Autoscan endpoints.
-        </p>
-      </div>
-
-      <fieldset
-        disabled={updateConfig.isPending}
-        className="max-w-2xl space-y-4"
-      >
-        {pendingRestart && (
-          <div className="surface-panel-subtle flex flex-col gap-3 rounded-xl p-4 sm:flex-row sm:items-center sm:justify-between">
-            <div className="text-foreground/80 flex items-center gap-2 text-xs">
-              <AlertTriangle className="h-3.5 w-3.5 flex-shrink-0" />
-              <span>
-                Saved changes require a server restart to take effect.
-              </span>
-            </div>
-            <RestartServerButton />
-          </div>
-        )}
-        <div className="surface-panel rounded-2xl border-0 px-5 py-4">
-          <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
-            <div className="space-y-0.5">
-              <Label
-                htmlFor="rate-limit-enabled"
-                className="text-sm font-medium"
-              >
-                Enable Rate Limiting
-              </Label>
-              <p className="text-muted-foreground text-xs">
-                When disabled, no rate limits are enforced.
-              </p>
-            </div>
-            <Switch
-              id="rate-limit-enabled"
-              checked={config.enabled}
-              onCheckedChange={(checked) =>
-                updateConfigState((prev) => ({ ...prev, enabled: checked }))
-              }
-            />
-          </div>
-        </div>
-
-        <div className="surface-panel rounded-2xl border-0 px-5 py-4">
-          <div className="space-y-1">
-            <Label htmlFor="backend" className="text-sm font-medium">
-              Backend
-            </Label>
-            <Select
-              value={config.backend}
-              onValueChange={(value) =>
-                updateConfigState((prev) => ({ ...prev, backend: value }))
-              }
-            >
-              <SelectTrigger id="backend" className="w-full sm:w-40">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="memory">In-Memory</SelectItem>
-                <SelectItem value="redis">Redis</SelectItem>
-              </SelectContent>
-            </Select>
-            <p className="text-muted-foreground text-xs">
-              Backend changes require a restart. Redis is recommended for
-              multi-instance deployments and must first be configured under
-              Database.
-            </p>
-          </div>
-        </div>
-
-        <div className="surface-panel rounded-2xl border-0 px-5 py-4">
-          <div className="mb-3 text-sm font-semibold">Global Settings</div>
-          <div className="space-y-1">
-            <Label htmlFor="global-rps" className="text-sm font-medium">
-              Global Requests Per Second
-            </Label>
-            <Input
-              id="global-rps"
-              type="number"
-              min={1}
-              value={config.global_requests_per_second}
-              onChange={(e) => {
-                const num = parseInt(e.target.value, 10);
-                if (!isNaN(num) && num > 0) {
-                  updateConfigState((prev) => ({
-                    ...prev,
-                    global_requests_per_second: num,
-                  }));
-                }
-              }}
-              className="w-full sm:w-40"
-            />
-            <p className="text-muted-foreground text-xs">
-              Maximum requests per second across every route protected by the
-              rate limiter.
-            </p>
-          </div>
-        </div>
-
-        <div className="surface-panel rounded-2xl border-0 px-5 py-4">
-          <div className="mb-1 text-sm font-semibold">Per-IP Limits</div>
-          <p className="text-muted-foreground mb-3 text-xs">
-            Shared across protected authenticated routes and the public
-            auth/Autoscan endpoints for one IP address.
-          </p>
-          <div className="grid gap-4 sm:grid-cols-3">
-            <div className="space-y-1">
-              <Label htmlFor="ip-rps" className="text-sm font-medium">
-                Requests / Second
-              </Label>
-              <Input
-                id="ip-rps"
-                type="number"
-                min={1}
-                value={config.ip_requests_per_second}
-                onChange={(e) => {
-                  const num = parseInt(e.target.value, 10);
-                  if (!isNaN(num) && num > 0) {
-                    updateConfigState((prev) => ({
-                      ...prev,
-                      ip_requests_per_second: num,
-                    }));
-                  }
-                }}
-                className="w-full"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="ip-rpm" className="text-sm font-medium">
-                Requests / Minute
-              </Label>
-              <Input
-                id="ip-rpm"
-                type="number"
-                min={1}
-                value={config.ip_requests_per_minute}
-                onChange={(e) => {
-                  const num = parseInt(e.target.value, 10);
-                  if (!isNaN(num) && num > 0) {
-                    updateConfigState((prev) => ({
-                      ...prev,
-                      ip_requests_per_minute: num,
-                    }));
-                  }
-                }}
-                className="w-full"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="ip-burst" className="text-sm font-medium">
-                Burst
-              </Label>
-              <Input
-                id="ip-burst"
-                type="number"
-                min={1}
-                value={config.ip_burst}
-                onChange={(e) => {
-                  const num = parseInt(e.target.value, 10);
-                  if (!isNaN(num) && num > 0) {
-                    updateConfigState((prev) => ({ ...prev, ip_burst: num }));
-                  }
-                }}
-                className="w-full"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Tier Settings */}
-        {Object.keys(TIER_LABELS).map((tier) => {
-          const tierConfig = config.tiers[tier] ?? DEFAULT_TIER;
-          return (
-            <div
-              key={tier}
-              className="surface-panel rounded-2xl border-0 px-5 py-4"
-            >
-              <div className="mb-1 text-sm font-semibold">
-                {TIER_LABELS[tier]} Tier
-              </div>
-              <p className="text-muted-foreground mb-3 text-xs">
-                Per API key limits for the {TIER_LABELS[tier]!.toLowerCase()}{" "}
-                tier.
-              </p>
-              <div className="grid gap-4 sm:grid-cols-3">
-                <div className="space-y-1">
-                  <Label
-                    htmlFor={`${tier}-rps`}
-                    className="text-sm font-medium"
-                  >
-                    Requests / Second
-                  </Label>
-                  <Input
-                    id={`${tier}-rps`}
-                    type="number"
-                    min={1}
-                    value={tierConfig.requests_per_second}
-                    onChange={(e) =>
-                      handleTierChange(
-                        tier,
-                        "requests_per_second",
-                        e.target.value,
-                      )
-                    }
-                    className="w-full"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label
-                    htmlFor={`${tier}-rpm`}
-                    className="text-sm font-medium"
-                  >
-                    Requests / Minute
-                  </Label>
-                  <Input
-                    id={`${tier}-rpm`}
-                    type="number"
-                    min={1}
-                    value={tierConfig.requests_per_minute}
-                    onChange={(e) =>
-                      handleTierChange(
-                        tier,
-                        "requests_per_minute",
-                        e.target.value,
-                      )
-                    }
-                    className="w-full"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <Label
-                    htmlFor={`${tier}-burst`}
-                    className="text-sm font-medium"
-                  >
-                    Burst
-                  </Label>
-                  <Input
-                    id={`${tier}-burst`}
-                    type="number"
-                    min={1}
-                    value={tierConfig.burst}
-                    onChange={(e) =>
-                      handleTierChange(tier, "burst", e.target.value)
-                    }
-                    className="w-full"
-                  />
-                </div>
-              </div>
-            </div>
-          );
-        })}
-
-        <div className="surface-panel rounded-2xl border-0 px-5 py-4">
-          <div className="mb-1 text-sm font-semibold">Auth Endpoint Limits</div>
-          <p className="text-muted-foreground mb-3 text-xs">
-            Per-IP limits for public authentication and Autoscan endpoints.
-            These apply in addition to the global and shared per-IP budgets
-            above.
-          </p>
-          <div className="space-y-4">
-            {Object.keys(AUTH_ENDPOINT_LABELS).map((endpoint) => {
-              const epConfig =
-                config.auth_endpoints[endpoint] ?? DEFAULT_AUTH_ENDPOINT;
-              return (
-                <div key={endpoint}>
-                  <div className="text-muted-foreground mb-2 text-xs font-medium">
-                    {AUTH_ENDPOINT_LABELS[endpoint]}
-                  </div>
-                  <div className="grid gap-4 sm:grid-cols-2">
-                    <div className="space-y-1">
-                      <Label
-                        htmlFor={`${endpoint}-rpm`}
-                        className="text-sm font-medium"
-                      >
-                        Requests / Minute
-                      </Label>
-                      <Input
-                        id={`${endpoint}-rpm`}
-                        type="number"
-                        min={1}
-                        value={epConfig.requests_per_minute}
-                        onChange={(e) =>
-                          handleAuthEndpointChange(
-                            endpoint,
-                            "requests_per_minute",
-                            e.target.value,
-                          )
-                        }
-                        className="w-full"
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <Label
-                        htmlFor={`${endpoint}-burst`}
-                        className="text-sm font-medium"
-                      >
-                        Burst
-                      </Label>
-                      <Input
-                        id={`${endpoint}-burst`}
-                        type="number"
-                        min={1}
-                        value={epConfig.burst}
-                        onChange={(e) =>
-                          handleAuthEndpointChange(
-                            endpoint,
-                            "burst",
-                            e.target.value,
-                          )
-                        }
-                        className="w-full"
-                      />
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-
-        <div className="pt-2">
-          <Button onClick={handleSave} disabled={updateConfig.isPending}>
-            {updateConfig.isPending ? (
-              <Loader2 className="animate-spin" />
-            ) : (
-              <Save />
-            )}
-            {updateConfig.isPending ? "Saving..." : "Save Changes"}
-          </Button>
-        </div>
-      </fieldset>
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/SaveBar.test.tsx b/web/src/pages/admin-settings/SaveBar.test.tsx
new file mode 100644
index 000000000..319a0b8f8
--- /dev/null
+++ b/web/src/pages/admin-settings/SaveBar.test.tsx
@@ -0,0 +1,64 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { SaveBar } from "./SaveBar";
+
+function renderBar(props: Partial<Parameters<typeof SaveBar>[0]> = {}) {
+  return render(
+    <SaveBar
+      dirtyCount={2}
+      onSave={vi.fn()}
+      onDiscard={vi.fn()}
+      isSaving={false}
+      {...props}
+    />,
+  );
+}
+
+describe("SaveBar", () => {
+  it("stays hidden while the tab is clean", () => {
+    const { container } = renderBar({ dirtyCount: 0 });
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("counts the staged changes and offers both actions", async () => {
+    const onSave = vi.fn();
+    const onDiscard = vi.fn();
+    renderBar({ dirtyCount: 3, onSave, onDiscard });
+
+    expect(screen.getByText("3 unsaved changes")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: "Discard" }));
+    await userEvent.click(screen.getByRole("button", { name: "Save" }));
+    expect(onDiscard).toHaveBeenCalledTimes(1);
+    expect(onSave).toHaveBeenCalledTimes(1);
+  });
+
+  it("uses the singular form for one change", () => {
+    renderBar({ dirtyCount: 1 });
+
+    expect(screen.getByText("1 unsaved change")).toBeInTheDocument();
+  });
+
+  it("says nothing about restarts", () => {
+    renderBar({ dirtyCount: 4 });
+
+    expect(screen.queryByText(/restart/i)).not.toBeInTheDocument();
+  });
+
+  it("disables saving while a save is in flight", () => {
+    renderBar({ isSaving: true });
+
+    expect(screen.getByRole("button", { name: "Saving..." })).toBeDisabled();
+  });
+
+  // The restart prompt belongs to the admin shell (see
+  // components/admin/RestartBanner.test.tsx); the pill must never grow one.
+  it("renders no restart prompt of its own", () => {
+    renderBar({ dirtyCount: 2 });
+
+    expect(screen.queryByText("Restart required")).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/pages/admin-settings/SaveBar.tsx b/web/src/pages/admin-settings/SaveBar.tsx
index 0a3371b15..9e1eb5b9a 100644
--- a/web/src/pages/admin-settings/SaveBar.tsx
+++ b/web/src/pages/admin-settings/SaveBar.tsx
@@ -1,57 +1,75 @@
 import { Button } from "@/components/ui/button";
-import { AlertTriangle, Loader2, Save, Undo2 } from "lucide-react";
-import { RestartServerButton } from "./RestartServerButton";
+import "@/styles/admin-settings.css";
 
 interface SaveBarProps {
   dirtyCount: number;
   onSave: () => void;
   onDiscard: () => void;
   isSaving: boolean;
-  restartRequired: boolean;
 }
 
+function plural(count: number, word: string) {
+  return `${count} ${word}${count === 1 ? "" : "s"}`;
+}
+
+/**
+ * The floating save pill: the staged count and the two actions. Hidden while
+ * the page is clean, so a page with nothing staged has no permanent furniture at
+ * the bottom of the viewport. It says nothing about restarts — the one restart
+ * prompt is `RestartBanner`, rendered once by the admin shell at the top of
+ * every admin page.
+ */
 export function SaveBar({
   dirtyCount,
   onSave,
   onDiscard,
   isSaving,
-  restartRequired,
 }: SaveBarProps) {
+  if (dirtyCount <= 0) return null;
+
   return (
-    <div className="surface-panel-subtle mt-6 rounded-xl p-4">
-      {restartRequired && (
-        <div className="text-foreground/80 mb-3 flex items-center gap-2 text-xs">
-          <AlertTriangle className="h-3.5 w-3.5" />
-          <span>Server restart required for changes to take effect.</span>
-        </div>
-      )}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <span className="text-muted-foreground text-sm">
-          {dirtyCount > 0
-            ? `${dirtyCount} unsaved change${dirtyCount > 1 ? "s" : ""}`
-            : ""}
-        </span>
-        <div className="flex flex-col gap-2 sm:flex-row">
-          {restartRequired && <RestartServerButton />}
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onDiscard}
-            disabled={dirtyCount === 0}
-          >
-            <Undo2 />
-            Discard
-          </Button>
-          <Button
-            size="sm"
-            onClick={onSave}
-            disabled={dirtyCount === 0 || isSaving}
-          >
-            {isSaving ? <Loader2 className="animate-spin" /> : <Save />}
-            {isSaving ? "Saving..." : "Save Changes"}
-          </Button>
+    <>
+      {/* In-flow scroll room. The pill is fixed, so without this the last row of
+          the page parks under it at full scroll and cannot be reached. Sized to
+          clear the pill (bottom 1.5rem + 3rem tall) with margin. */}
+      <div aria-hidden="true" className="h-28" />
+      {/* Scrim so page content dissolves under the pill instead of colliding.
+          Stops at the desktop sidebar so it never tints the nav. */}
+      <div
+        aria-hidden="true"
+        className="pointer-events-none fixed right-0 bottom-0 left-0 z-30 h-40 bg-gradient-to-t from-[var(--background)] via-[color-mix(in_srgb,var(--background)_72%,transparent)] to-transparent lg:left-[240px]"
+      />
+      {/* `lg:left-[240px]` matches AdminLayout's `lg:ml-[240px]`: the pill
+          centers over the content column, not the whole viewport, and stays
+          clear of the sidebar it would otherwise paint under. */}
+      <div
+        role="status"
+        className="pointer-events-none fixed right-0 bottom-6 left-0 z-40 flex justify-center px-4 lg:left-[240px]"
+      >
+        <div className="glass pointer-events-auto flex max-w-full items-center gap-3 rounded-full py-2 pr-2 pl-4 shadow-2xl backdrop-blur-xl sm:gap-4 sm:pl-5">
+          <span className="min-w-0 truncate text-[13px] font-medium">
+            {plural(dirtyCount, "unsaved change")}
+          </span>
+          <span className="flex shrink-0 items-center gap-1.5">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="rounded-full"
+              onClick={onDiscard}
+            >
+              Discard
+            </Button>
+            <Button
+              size="sm"
+              onClick={onSave}
+              disabled={isSaving}
+              className="rounded-full bg-[var(--settings-accent)] text-[#15151a] hover:bg-[var(--settings-accent)] hover:brightness-110"
+            >
+              {isSaving ? "Saving..." : "Save"}
+            </Button>
+          </span>
         </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/web/src/pages/admin-settings/ScannerSettings.tsx b/web/src/pages/admin-settings/ScannerSettings.tsx
deleted file mode 100644
index 1ca45a48a..000000000
--- a/web/src/pages/admin-settings/ScannerSettings.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { useMemo } from "react";
-import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { SettingField } from "./SettingField";
-import { SaveBar } from "./SaveBar";
-import { FieldGroup } from "./FieldGroup";
-import { Skeleton } from "@/components/ui/skeleton";
-
-const KEYS = [
-  "scanner.workers",
-  "matcher.workers",
-  "matcher.batch_size",
-  "metadata.cache_images",
-  "metadata.artwork_encode_workers",
-  "metadata.pause_artwork_during_playback",
-  "metadata.avif_backfill_workers",
-  "metadata.avif_encoder",
-  "metadata.avif_ffmpeg_path",
-  "metadata.avif_nvenc_sessions",
-];
-
-export default function ScannerSettings() {
-  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
-
-  if (form.isLoading)
-    return (
-      <div className="space-y-6" role="status" aria-label="Loading settings">
-        <Skeleton className="h-8 w-48" />
-        <div className="space-y-4">
-          <Skeleton className="h-10 w-full" />
-          <Skeleton className="h-10 w-full" />
-        </div>
-        <div className="space-y-4">
-          <Skeleton className="h-10 w-full" />
-          <Skeleton className="h-10 w-full" />
-        </div>
-        <div className="space-y-4">
-          <Skeleton className="h-10 w-full" />
-        </div>
-        <span className="sr-only">Loading settings</span>
-      </div>
-    );
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">
-          Scanner & Matcher
-        </h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure scanner performance and metadata matching. Startup and
-          recurring scans are managed in Scheduled Tasks.
-        </p>
-      </div>
-
-      <div className="flex-1 space-y-6">
-        <FieldGroup label="Scanner">
-          <SettingField
-            label="Scanner Workers"
-            type="number"
-            value={form.getValue("scanner.workers")}
-            onChange={(v) => form.setValue("scanner.workers", v)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Matcher">
-          <SettingField
-            label="Matcher Workers"
-            type="number"
-            value={form.getValue("matcher.workers")}
-            onChange={(v) => form.setValue("matcher.workers", v)}
-          />
-          <SettingField
-            label="Matcher Batch Size"
-            type="number"
-            value={form.getValue("matcher.batch_size")}
-            onChange={(v) => form.setValue("matcher.batch_size", v)}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Metadata">
-          <SettingField
-            label="Cache Artwork"
-            type="toggle"
-            hint="Download artwork from metadata providers and store resized WebP/AVIF/PNG variants. Uses public S3 when configured; otherwise stores on the local artwork volume."
-            value={form.getValue("metadata.cache_images")}
-            onChange={(v) => form.setValue("metadata.cache_images", v)}
-          />
-          <SettingField
-            label="Artwork Encode Workers"
-            type="number"
-            hint="Total in-flight artwork encodes (WebP cache + AVIF backfill share this budget). 0 = auto: a quarter of the CPU cores, at most 4, so playback transcodes keep headroom."
-            value={form.getValue("metadata.artwork_encode_workers")}
-            onChange={(v) =>
-              form.setValue("metadata.artwork_encode_workers", v)
-            }
-          />
-          <SettingField
-            label="Pause Artwork During Playback"
-            type="toggle"
-            hint="Stop the AVIF backfill and throttle artwork caching to one encode while any playback or transcode session is active. Queued work resumes when streaming ends."
-            value={form.getValue("metadata.pause_artwork_during_playback")}
-            onChange={(v) =>
-              form.setValue("metadata.pause_artwork_during_playback", v)
-            }
-          />
-          <SettingField
-            label="AVIF Backfill Workers"
-            type="number"
-            hint="Concurrent AVIF encodes for deferred sibling backfill. 0 = auto (the shared artwork encode budget, or the NVENC session cap for nvenc)."
-            value={form.getValue("metadata.avif_backfill_workers")}
-            onChange={(v) => form.setValue("metadata.avif_backfill_workers", v)}
-          />
-          <SettingField
-            label="AVIF Encoder"
-            type="select"
-            hint="Still-image AVIF backend. auto picks NVENC (Ada+ AV1) when available, else native SVT-AV1 via ffmpeg, else legacy WASM rav1e. Native SVT requires the debian ffmpeg package (libsvtav1)."
-            value={form.getValue("metadata.avif_encoder")}
-            onChange={(v) => form.setValue("metadata.avif_encoder", v)}
-            options={[
-              { value: "auto", label: "Auto (recommended)" },
-              { value: "svt", label: "SVT-AV1 (CPU)" },
-              { value: "nvenc", label: "NVENC AV1 (GPU, fallback to SVT)" },
-              { value: "wasm", label: "WASM rav1e (legacy)" },
-            ]}
-          />
-          <SettingField
-            label="AVIF FFmpeg Path"
-            type="text"
-            hint="ffmpeg binary for SVT/NVENC still encodes (must include libsvtav1 + avif muxer). Defaults to ffmpeg on PATH — not jellyfin-ffmpeg."
-            value={form.getValue("metadata.avif_ffmpeg_path")}
-            onChange={(v) => form.setValue("metadata.avif_ffmpeg_path", v)}
-          />
-          <SettingField
-            label="AVIF NVENC Sessions"
-            type="number"
-            hint="Max concurrent NVENC still encodes when the nvenc backend is active. 0 = 3. Tiny display widths still fall back to SVT."
-            value={form.getValue("metadata.avif_nvenc_sessions")}
-            onChange={(v) => form.setValue("metadata.avif_nvenc_sessions", v)}
-          />
-        </FieldGroup>
-      </div>
-
-      <SaveBar
-        dirtyCount={form.dirtyCount}
-        onSave={form.save}
-        onDiscard={form.discard}
-        isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
-      />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/SearchSettings.tsx b/web/src/pages/admin-settings/SearchSettings.tsx
deleted file mode 100644
index ef5f67dc4..000000000
--- a/web/src/pages/admin-settings/SearchSettings.tsx
+++ /dev/null
@@ -1,493 +0,0 @@
-import { useMemo, useState } from "react";
-import { Link } from "react-router";
-import type { ConnectionCheckResponse } from "@/api/types";
-import { ConnectionCheckAction } from "@/components/admin/ConnectionCheckAction";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  useCatalogSearchStatus,
-  useCheckAdminSettingsConnection,
-} from "@/hooks/queries/admin/settings";
-import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { FieldGroup } from "./FieldGroup";
-import { SaveBar } from "./SaveBar";
-import { SettingField } from "./SettingField";
-import { formatDateTime } from "@/lib/datetime";
-
-const MEILI_KEYS = [
-  "catalog.search.meilisearch.url",
-  "catalog.search.meilisearch.api_key",
-  "catalog.search.meilisearch.index",
-  "catalog.search.meilisearch.timeout_ms",
-  "catalog.search.meilisearch.matching_strategy",
-  "catalog.search.meilisearch.sync_batch_size",
-  "catalog.search.meilisearch.rebuild_batch_size",
-  "catalog.search.meilisearch.rebuild_task_queue_depth",
-  "catalog.search.meilisearch.index_types",
-  "catalog.search.meilisearch.semantic_enabled",
-  "catalog.search.meilisearch.semantic_ratio",
-  "catalog.search.meilisearch.embedder",
-  "catalog.search.meilisearch.binary_quantized",
-];
-
-const KEYS = ["catalog.search.provider", ...MEILI_KEYS];
-
-export default function SearchSettings() {
-  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
-  const { data: status, isLoading: statusLoading } = useCatalogSearchStatus();
-  const checkConnection = useCheckAdminSettingsConnection();
-  const [connectionResult, setConnectionResult] =
-    useState<ConnectionCheckResponse | null>(null);
-  const provider = form.getValue("catalog.search.provider") || "postgres";
-  const meiliEnabled = provider === "meilisearch";
-
-  async function handleCheckConnection() {
-    try {
-      setConnectionResult(
-        await checkConnection.mutateAsync({
-          kind: "meilisearch",
-          body: form.buildConnectionCheckRequest(MEILI_KEYS),
-        }),
-      );
-    } catch (error) {
-      setConnectionResult({
-        success: false,
-        message:
-          error instanceof Error ? error.message : "Connection check failed.",
-      });
-    }
-  }
-
-  if (form.isLoading) {
-    return (
-      <div className="space-y-6" role="status" aria-label="Loading settings">
-        <Skeleton className="h-8 w-40" />
-        <Skeleton className="h-32 w-full" />
-        <Skeleton className="h-40 w-full" />
-        <span className="sr-only">Loading settings</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Search</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure catalog search provider selection, Meilisearch connectivity,
-          and index status.
-        </p>
-      </div>
-
-      <div className="flex-1 space-y-6">
-        <FieldGroup label="Provider">
-          <SettingField
-            label="Preferred Provider"
-            type="select"
-            value={provider}
-            onChange={(value) =>
-              form.setValue("catalog.search.provider", value)
-            }
-            options={[
-              { value: "postgres", label: "Postgres FTS" },
-              { value: "meilisearch", label: "Meilisearch" },
-            ]}
-          />
-        </FieldGroup>
-
-        <FieldGroup label="Meilisearch">
-          <SettingField
-            label="URL"
-            value={form.getValue("catalog.search.meilisearch.url")}
-            onChange={(value) =>
-              form.setValue("catalog.search.meilisearch.url", value)
-            }
-            hint="http://localhost:7700"
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="API Key"
-            type="password"
-            value={form.getValue("catalog.search.meilisearch.api_key")}
-            onChange={(value) =>
-              form.setValue("catalog.search.meilisearch.api_key", value)
-            }
-            sensitiveConfigured={form.sensitiveConfigured.includes(
-              "catalog.search.meilisearch.api_key",
-            )}
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Index Prefix"
-            value={
-              form.getValue("catalog.search.meilisearch.index") ||
-              "prairie_media_items"
-            }
-            onChange={(value) =>
-              form.setValue("catalog.search.meilisearch.index", value)
-            }
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Timeout (ms)"
-            type="number"
-            value={
-              form.getValue("catalog.search.meilisearch.timeout_ms") || "800"
-            }
-            onChange={(value) =>
-              form.setValue("catalog.search.meilisearch.timeout_ms", value)
-            }
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Matching Strategy"
-            type="select"
-            value={
-              form.getValue("catalog.search.meilisearch.matching_strategy") ||
-              "last"
-            }
-            onChange={(value) =>
-              form.setValue(
-                "catalog.search.meilisearch.matching_strategy",
-                value,
-              )
-            }
-            options={[
-              { value: "last", label: "Last" },
-              { value: "all", label: "All" },
-            ]}
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Sync Batch Size"
-            type="number"
-            value={
-              form.getValue("catalog.search.meilisearch.sync_batch_size") ||
-              "500"
-            }
-            onChange={(value) =>
-              form.setValue("catalog.search.meilisearch.sync_batch_size", value)
-            }
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Rebuild Batch Size"
-            type="number"
-            value={
-              form.getValue("catalog.search.meilisearch.rebuild_batch_size") ||
-              "5000"
-            }
-            onChange={(value) =>
-              form.setValue(
-                "catalog.search.meilisearch.rebuild_batch_size",
-                value,
-              )
-            }
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Rebuild Queue Depth"
-            type="number"
-            value={
-              form.getValue(
-                "catalog.search.meilisearch.rebuild_task_queue_depth",
-              ) || "4"
-            }
-            onChange={(value) =>
-              form.setValue(
-                "catalog.search.meilisearch.rebuild_task_queue_depth",
-                value,
-              )
-            }
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Indexed Types"
-            value={form.getValue("catalog.search.meilisearch.index_types")}
-            onChange={(value) =>
-              form.setValue("catalog.search.meilisearch.index_types", value)
-            }
-            hint="all, video, or movie,series"
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Semantic Search"
-            type="toggle"
-            value={
-              form.getValue("catalog.search.meilisearch.semantic_enabled") ||
-              "false"
-            }
-            onChange={(value) =>
-              form.setValue(
-                "catalog.search.meilisearch.semantic_enabled",
-                value,
-              )
-            }
-            hint="Uses existing recommendation embeddings for hybrid catalog search."
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Semantic Ratio"
-            type="number"
-            value={
-              form.getValue("catalog.search.meilisearch.semantic_ratio") ||
-              "0.50"
-            }
-            onChange={(value) =>
-              form.setValue("catalog.search.meilisearch.semantic_ratio", value)
-            }
-            hint="0.50"
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Embedder"
-            value={
-              form.getValue("catalog.search.meilisearch.embedder") ||
-              "prairie_recommendations"
-            }
-            onChange={(value) =>
-              form.setValue("catalog.search.meilisearch.embedder", value)
-            }
-            disabled={!meiliEnabled}
-          />
-          <SettingField
-            label="Binary Quantized Vectors"
-            type="toggle"
-            value={
-              form.getValue("catalog.search.meilisearch.binary_quantized") ||
-              "false"
-            }
-            onChange={(value) =>
-              form.setValue(
-                "catalog.search.meilisearch.binary_quantized",
-                value,
-              )
-            }
-            hint="~30x smaller raw vectors (overall index size roughly halves) with a small semantic-relevance cost. Only affects the index when Semantic Search is enabled. Changing this requires a full index rebuild (Rebuild Catalog Search Index) before sync resumes."
-            disabled={!meiliEnabled}
-          />
-          <div className="py-3">
-            <ConnectionCheckAction
-              onClick={handleCheckConnection}
-              result={connectionResult}
-              isPending={checkConnection.isPending}
-              disabled={!meiliEnabled}
-            />
-          </div>
-        </FieldGroup>
-
-        <FieldGroup label="Status">
-          {statusLoading || !status ? (
-            <div className="space-y-3 py-3">
-              <Skeleton className="h-5 w-56" />
-              <Skeleton className="h-5 w-72" />
-              <Skeleton className="h-5 w-48" />
-            </div>
-          ) : (
-            <div className="divide-border divide-y">
-              <StatusRow
-                label="Active Provider"
-                value={
-                  status.active_provider === "meilisearch"
-                    ? "Meilisearch"
-                    : "Postgres FTS"
-                }
-                badge={status.configured_provider}
-              />
-              <StatusRow
-                label="Health"
-                value={
-                  status.meilisearch.healthy
-                    ? "Healthy"
-                    : status.meilisearch.circuit_state
-                }
-                badge={
-                  status.meilisearch.configured
-                    ? "configured"
-                    : "not configured"
-                }
-              />
-              <StatusRow
-                label="Active Index"
-                value={status.index.active_index_uid || "Not built"}
-                badge={`schema ${status.index.schema_version}/${status.index.expected_schema_version}`}
-              />
-              <StatusRow
-                label="Documents"
-                value={String(status.index.document_count)}
-              />
-              <StatusRow
-                label="Indexed Types"
-                value={formatIndexedTypes(status.meilisearch.index_types)}
-              />
-              <StatusRow
-                label="Binary Quantized"
-                value={
-                  status.meilisearch.binary_quantized ? "Enabled" : "Disabled"
-                }
-              />
-              <StatusRow
-                label="Semantic Search"
-                value={
-                  status.meilisearch.semantic_enabled ? "Enabled" : "Disabled"
-                }
-                badge={status.meilisearch.embedder}
-              />
-              <StatusRow
-                label="Semantic Ratio"
-                value={formatSemanticRatio(status.meilisearch.semantic_ratio)}
-              />
-              <StatusRow
-                label="Vectorized Documents"
-                value={String(status.index.vector_document_count)}
-              />
-              {status.semantic && (
-                <>
-                  <StatusRow
-                    label="Semantic Readiness"
-                    value={status.semantic.ready ? "Ready" : "Not ready"}
-                    badge={
-                      status.semantic.ready
-                        ? undefined
-                        : status.semantic.disabled_reason
-                    }
-                  />
-                  <StatusRow
-                    label="Vector Coverage"
-                    value={formatPercent(status.semantic.vector_coverage_ratio)}
-                  />
-                  <StatusRow
-                    label="Coverage Updated"
-                    value={
-                      formatStatusDate(status.semantic.coverage_updated_at) ||
-                      "Never"
-                    }
-                  />
-                  <StatusRow
-                    label="Embedder Capability"
-                    value={
-                      status.semantic.capability.ok
-                        ? "OK"
-                        : (status.semantic.capability.reason ?? "Unavailable")
-                    }
-                    badge={status.semantic.capability.embedder}
-                  />
-                  {status.semantic.per_type &&
-                    status.semantic.per_type.length > 0 && (
-                      <div className="flex flex-col gap-2 py-3">
-                        <span className="text-sm font-medium">
-                          Per-Type Coverage
-                        </span>
-                        <div className="divide-border/60 divide-y">
-                          {status.semantic.per_type.map((t) => (
-                            <div
-                              key={t.type}
-                              className="flex items-center justify-between gap-2 py-1.5"
-                            >
-                              <span className="text-muted-foreground min-w-0 truncate text-sm">
-                                {t.type}: {t.vectorized}/{t.eligible} (
-                                {formatPercent(t.vector_coverage_ratio)})
-                              </span>
-                              <Badge
-                                variant={t.ready ? "secondary" : "outline"}
-                              >
-                                {t.ready ? "Ready" : "Not ready"}
-                              </Badge>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                </>
-              )}
-              <StatusRow
-                label="Pending Events"
-                value={String(status.index.pending_events)}
-              />
-              {status.index.dead_lettered_events > 0 && (
-                <StatusRow
-                  label="Dead-lettered Events"
-                  value={String(status.index.dead_lettered_events)}
-                  badge="stale until rebuild"
-                />
-              )}
-              <StatusRow
-                label="Last Sync"
-                value={formatStatusDate(status.index.last_sync_at) || "Never"}
-              />
-              {status.meilisearch.last_fallback && (
-                <StatusRow
-                  label="Last Fallback"
-                  value={status.meilisearch.last_fallback}
-                />
-              )}
-              <div className="flex flex-wrap gap-2 py-3">
-                <Button asChild size="sm" variant="outline">
-                  <Link to="/admin/tasks/rebuild_catalog_search_index">
-                    Rebuild Index
-                  </Link>
-                </Button>
-                <Button asChild size="sm" variant="ghost">
-                  <Link to="/admin/tasks/sync_catalog_search_index">
-                    Sync History
-                  </Link>
-                </Button>
-              </div>
-            </div>
-          )}
-        </FieldGroup>
-      </div>
-
-      <SaveBar
-        dirtyCount={form.dirtyCount}
-        onSave={form.save}
-        onDiscard={form.discard}
-        isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
-      />
-    </div>
-  );
-}
-
-function StatusRow({
-  label,
-  value,
-  badge,
-}: {
-  label: string;
-  value: string;
-  badge?: string;
-}) {
-  return (
-    <div className="flex flex-col gap-2 py-3 sm:flex-row sm:items-center sm:justify-between">
-      <span className="text-sm font-medium">{label}</span>
-      <span className="text-muted-foreground flex min-w-0 flex-wrap items-center gap-2 text-sm">
-        <span className="max-w-full text-right break-words">{value}</span>
-        {badge ? <Badge variant="outline">{badge}</Badge> : null}
-      </span>
-    </div>
-  );
-}
-
-function formatStatusDate(value?: string) {
-  if (!value) return "";
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return "";
-  return formatDateTime(date);
-}
-
-function formatIndexedTypes(value?: string[]) {
-  if (!value || value.length === 0) return "All";
-  return value.join(", ");
-}
-
-function formatSemanticRatio(value?: number) {
-  if (typeof value !== "number" || Number.isNaN(value)) return "0";
-  return value.toFixed(2);
-}
-
-function formatPercent(value?: number) {
-  if (typeof value !== "number" || Number.isNaN(value)) return "0%";
-  return `${Math.round(value * 100)}%`;
-}
diff --git a/web/src/pages/admin-settings/SearchStatusPanel.test.tsx b/web/src/pages/admin-settings/SearchStatusPanel.test.tsx
new file mode 100644
index 000000000..6b5e049a1
--- /dev/null
+++ b/web/src/pages/admin-settings/SearchStatusPanel.test.tsx
@@ -0,0 +1,119 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { SearchStatusPanel } from "./SearchStatusPanel";
+
+const catalogSearchStatusMock = vi.fn();
+
+vi.mock("@/hooks/queries/admin/settings", () => ({
+  useCatalogSearchStatus: () => catalogSearchStatusMock(),
+}));
+
+const STATUS = {
+  active_provider: "postgres",
+  configured_provider: "postgres",
+  meilisearch: {
+    configured: false,
+    healthy: false,
+    circuit_state: "closed",
+    binary_quantized: false,
+    semantic_enabled: false,
+  },
+  index: {
+    active_index_uid: "",
+    schema_version: 3,
+    expected_schema_version: 3,
+    document_count: 0,
+    vector_document_count: 0,
+    pending_events: 0,
+    dead_lettered_events: 0,
+  },
+};
+
+function renderPanel() {
+  return render(
+    <MemoryRouter>
+      <SearchStatusPanel />
+    </MemoryRouter>,
+  );
+}
+
+describe("SearchStatusPanel", () => {
+  beforeEach(() => {
+    catalogSearchStatusMock.mockReset();
+  });
+
+  it("shows skeletons only while the request is still in flight", () => {
+    catalogSearchStatusMock.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      isError: false,
+      error: null,
+    });
+
+    renderPanel();
+
+    expect(
+      screen.queryByText(/Couldn't load search status/),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Answering searches")).not.toBeInTheDocument();
+  });
+
+  it("reports a failed status request instead of leaving the skeletons up", () => {
+    catalogSearchStatusMock.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      isError: true,
+      error: new Error("search status unavailable"),
+    });
+
+    renderPanel();
+
+    expect(
+      screen.getByText(
+        "Couldn't load search status: search status unavailable",
+      ),
+    ).toBeInTheDocument();
+    // The maintenance tasks are exactly what an admin wants when the index is
+    // unhealthy enough for the status endpoint to fail, so they stay reachable.
+    expect(
+      screen.getByRole("link", { name: "Rebuild index" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Sync history" }),
+    ).toBeInTheDocument();
+  });
+
+  it("falls back to a bare message when the failure carries none", () => {
+    catalogSearchStatusMock.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      isError: true,
+      error: null,
+    });
+
+    renderPanel();
+
+    expect(
+      screen.getByText("Couldn't load search status."),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the status rows once the request resolves", () => {
+    catalogSearchStatusMock.mockReturnValue({
+      data: STATUS,
+      isLoading: false,
+      isError: false,
+      error: null,
+    });
+
+    renderPanel();
+
+    expect(screen.getByText("Answering searches")).toBeInTheDocument();
+    expect(screen.getByText("Postgres full-text")).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Couldn't load search status/),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/pages/admin-settings/SearchStatusPanel.tsx b/web/src/pages/admin-settings/SearchStatusPanel.tsx
new file mode 100644
index 000000000..048fc8d89
--- /dev/null
+++ b/web/src/pages/admin-settings/SearchStatusPanel.tsx
@@ -0,0 +1,230 @@
+import { Link } from "react-router";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useCatalogSearchStatus } from "@/hooks/queries/admin/settings";
+import { formatDateTime } from "@/lib/datetime";
+
+import { SettingFieldStatus } from "./SettingField";
+
+/**
+ * Read-only view of the catalog search index: which provider is answering
+ * queries, how much of the catalog is indexed, and links to the rebuild/sync
+ * tasks. Diagnostics, not settings — it lives behind a disclosure.
+ */
+export function SearchStatusPanel() {
+  const { data: status, isLoading, isError, error } = useCatalogSearchStatus();
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3 py-3">
+        <Skeleton className="h-5 w-56" />
+        <Skeleton className="h-5 w-72" />
+        <Skeleton className="h-5 w-48" />
+      </div>
+    );
+  }
+
+  // A failed status request used to leave the skeletons up forever, which reads
+  // as "still loading" — the one thing a diagnostics panel must never imply
+  // about a request that already came back. Say so, and keep the rebuild/sync
+  // links reachable: they are exactly what an admin wants when the index is in
+  // a bad enough state that the status endpoint is failing.
+  if (isError || !status) {
+    return (
+      <div className="space-y-3 py-3">
+        <SettingFieldStatus tone="warn">
+          {`Couldn't load search status${error instanceof Error && error.message ? `: ${error.message}` : "."}`}
+        </SettingFieldStatus>
+        <SearchTaskLinks />
+      </div>
+    );
+  }
+
+  return (
+    <div className="divide-border divide-y">
+      <StatusRow
+        label="Answering searches"
+        value={
+          status.active_provider === "meilisearch"
+            ? "Meilisearch"
+            : "Postgres full-text"
+        }
+        badge={status.configured_provider}
+      />
+      <StatusRow
+        label="Health"
+        value={
+          status.meilisearch.healthy
+            ? "Healthy"
+            : status.meilisearch.circuit_state
+        }
+        badge={status.meilisearch.configured ? "configured" : "not configured"}
+      />
+      <StatusRow
+        label="Active index"
+        value={status.index.active_index_uid || "Not built"}
+        badge={`schema ${status.index.schema_version}/${status.index.expected_schema_version}`}
+      />
+      <StatusRow
+        label="Documents"
+        value={String(status.index.document_count)}
+      />
+      <StatusRow
+        label="Indexed types"
+        value={formatIndexedTypes(status.meilisearch.index_types)}
+      />
+      <StatusRow
+        label="Compressed vectors"
+        value={status.meilisearch.binary_quantized ? "Enabled" : "Disabled"}
+      />
+      <StatusRow
+        label="Meaning-based search"
+        value={status.meilisearch.semantic_enabled ? "Enabled" : "Disabled"}
+        badge={status.meilisearch.embedder}
+      />
+      <StatusRow
+        label="Meaning-based share of results"
+        value={formatSemanticRatio(status.meilisearch.semantic_ratio)}
+      />
+      <StatusRow
+        label="Items with vectors"
+        value={String(status.index.vector_document_count)}
+      />
+      {status.semantic && (
+        <>
+          <StatusRow
+            label="Meaning-based readiness"
+            value={status.semantic.ready ? "Ready" : "Not ready"}
+            badge={
+              status.semantic.ready
+                ? undefined
+                : status.semantic.disabled_reason
+            }
+          />
+          <StatusRow
+            label="Vector coverage"
+            value={formatPercent(status.semantic.vector_coverage_ratio)}
+          />
+          <StatusRow
+            label="Coverage updated"
+            value={
+              formatStatusDate(status.semantic.coverage_updated_at) || "Never"
+            }
+          />
+          <StatusRow
+            label="Embedding model"
+            value={
+              status.semantic.capability.ok
+                ? "OK"
+                : (status.semantic.capability.reason ?? "Unavailable")
+            }
+            badge={status.semantic.capability.embedder}
+          />
+          {status.semantic.per_type && status.semantic.per_type.length > 0 && (
+            <div className="flex flex-col gap-2 py-3">
+              <span className="text-sm font-medium">Coverage by type</span>
+              <div className="divide-border/60 divide-y">
+                {status.semantic.per_type.map((t) => (
+                  <div
+                    key={t.type}
+                    className="flex items-center justify-between gap-2 py-1.5"
+                  >
+                    <span className="text-muted-foreground min-w-0 truncate text-sm">
+                      {t.type}: {t.vectorized}/{t.eligible} (
+                      {formatPercent(t.vector_coverage_ratio)})
+                    </span>
+                    <Badge variant={t.ready ? "secondary" : "outline"}>
+                      {t.ready ? "Ready" : "Not ready"}
+                    </Badge>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+      <StatusRow
+        label="Pending events"
+        value={String(status.index.pending_events)}
+      />
+      {status.index.dead_lettered_events > 0 && (
+        <StatusRow
+          label="Dropped events"
+          value={String(status.index.dead_lettered_events)}
+          badge="stale until rebuild"
+        />
+      )}
+      <StatusRow
+        label="Last sync"
+        value={formatStatusDate(status.index.last_sync_at) || "Never"}
+      />
+      {status.meilisearch.last_fallback && (
+        <StatusRow
+          label="Last fallback"
+          value={status.meilisearch.last_fallback}
+        />
+      )}
+      <SearchTaskLinks />
+    </div>
+  );
+}
+
+/** The two index maintenance tasks. Shown whether or not the status resolved. */
+function SearchTaskLinks() {
+  return (
+    <div className="flex flex-wrap gap-2 py-3">
+      <Button asChild size="sm" variant="outline">
+        <Link to="/admin/tasks/rebuild_catalog_search_index">
+          Rebuild index
+        </Link>
+      </Button>
+      <Button asChild size="sm" variant="ghost">
+        <Link to="/admin/tasks/sync_catalog_search_index">Sync history</Link>
+      </Button>
+    </div>
+  );
+}
+
+function StatusRow({
+  label,
+  value,
+  badge,
+}: {
+  label: string;
+  value: string;
+  badge?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-2 py-3 sm:flex-row sm:items-center sm:justify-between">
+      <span className="text-sm font-medium">{label}</span>
+      <span className="text-muted-foreground flex min-w-0 flex-wrap items-center gap-2 text-sm">
+        <span className="max-w-full text-right break-words">{value}</span>
+        {badge ? <Badge variant="outline">{badge}</Badge> : null}
+      </span>
+    </div>
+  );
+}
+
+function formatStatusDate(value?: string) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return formatDateTime(date);
+}
+
+function formatIndexedTypes(value?: string[]) {
+  if (!value || value.length === 0) return "All";
+  return value.join(", ");
+}
+
+function formatSemanticRatio(value?: number) {
+  if (typeof value !== "number" || Number.isNaN(value)) return "0";
+  return value.toFixed(2);
+}
+
+function formatPercent(value?: number) {
+  if (typeof value !== "number" || Number.isNaN(value)) return "0%";
+  return `${Math.round(value * 100)}%`;
+}
diff --git a/web/src/pages/admin-settings/SecurityAccessSettings.test.tsx b/web/src/pages/admin-settings/SecurityAccessSettings.test.tsx
new file mode 100644
index 000000000..bc82cba25
--- /dev/null
+++ b/web/src/pages/admin-settings/SecurityAccessSettings.test.tsx
@@ -0,0 +1,337 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { RateLimitConfig } from "@/api/types";
+import SecurityAccessSettings from "./SecurityAccessSettings";
+
+// Radix Select reads element sizes via ResizeObserver, which jsdom does not
+// provide, and opens through pointer capture, which jsdom also lacks.
+class ResizeObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+if (typeof globalThis.ResizeObserver === "undefined") {
+  (
+    globalThis as unknown as { ResizeObserver: typeof ResizeObserverStub }
+  ).ResizeObserver = ResizeObserverStub;
+}
+if (
+  typeof window !== "undefined" &&
+  !window.HTMLElement.prototype.hasPointerCapture
+) {
+  window.HTMLElement.prototype.hasPointerCapture = () => false;
+  window.HTMLElement.prototype.scrollIntoView = () => {};
+}
+
+const useSettingsFormMock = vi.fn();
+const rateLimitConfigMock = vi.fn();
+const updateRateLimitMock = vi.fn();
+
+vi.mock("@/hooks/useSettingsForm", () => ({
+  useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
+}));
+
+const reportUnsavedMock = vi.fn();
+vi.mock("@/hooks/useUnsavedChanges", () => ({
+  useReportUnsavedChanges: (dirty: boolean) => reportUnsavedMock(dirty),
+}));
+
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => new Set<string>(["auth.access_token_expiry"]),
+}));
+
+vi.mock("@/hooks/queries/admin/rateLimits", () => ({
+  useRateLimitConfig: () => rateLimitConfigMock(),
+  useUpdateRateLimitConfig: () => updateRateLimitMock(),
+}));
+
+const SERVER_CONFIG: RateLimitConfig = {
+  enabled: true,
+  backend: "memory",
+  global_requests_per_second: 1000,
+  tiers: {
+    standard: { requests_per_second: 20, requests_per_minute: 1200, burst: 20 },
+    elevated: {
+      requests_per_second: 100,
+      requests_per_minute: 6000,
+      burst: 100,
+    },
+  },
+  ip_requests_per_second: 120,
+  ip_requests_per_minute: 6000,
+  ip_burst: 120,
+  auth_endpoints: {
+    login: { requests_per_minute: 20, burst: 10 },
+    signup: { requests_per_minute: 10, burst: 6 },
+    setup: { requests_per_minute: 10, burst: 6 },
+    device_start: { requests_per_minute: 20, burst: 10 },
+    device_lookup: { requests_per_minute: 60, burst: 20 },
+    device_poll: { requests_per_minute: 120, burst: 30 },
+    autoscan_webhook: { requests_per_minute: 60, burst: 30 },
+  },
+  active: true,
+  active_backend: "memory",
+  redis_available: true,
+};
+
+const REDIS_HINT = /Configure Redis under Infrastructure first/;
+
+async function openBackendSelect() {
+  await userEvent.click(screen.getByRole("button", { name: /Advanced/i }));
+  await userEvent.click(
+    screen.getByRole("combobox", { name: /Where counters are kept/i }),
+  );
+}
+
+function makeForm(overrides: Record<string, unknown> = {}) {
+  return {
+    isLoading: false,
+    getValue: () => "",
+    setValue: vi.fn(),
+    isDirty: () => false,
+    dirtyCount: 0,
+    save: vi.fn(),
+    discard: vi.fn(),
+    isSaving: false,
+    restartRequired: false,
+    sensitiveConfigured: [],
+    sensitiveManagedByEnv: [],
+    ...overrides,
+  };
+}
+
+describe("SecurityAccessSettings", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useSettingsFormMock.mockReset();
+    useSettingsFormMock.mockReturnValue(makeForm());
+    rateLimitConfigMock.mockReturnValue({
+      data: SERVER_CONFIG,
+      isLoading: false,
+    });
+    updateRateLimitMock.mockReturnValue({
+      mutateAsync: vi.fn().mockResolvedValue(undefined),
+      isPending: false,
+      data: undefined,
+    });
+  });
+
+  it("reports a rate-limit-only draft to the unsaved-changes registry", async () => {
+    render(<SecurityAccessSettings />);
+    expect(reportUnsavedMock).toHaveBeenLastCalledWith(false);
+
+    await userEvent.click(
+      screen.getByRole("switch", { name: /Enable rate limiting/i }),
+    );
+
+    // The guard and the reload prompt read the registry, not the SaveBar, so
+    // the separate rate-limit draft has to announce itself there too.
+    expect(reportUnsavedMock).toHaveBeenLastCalledWith(true);
+  });
+
+  it("renders every field group", () => {
+    render(<SecurityAccessSettings />);
+
+    for (const heading of ["Sign-in sessions", "Network", "Rate limiting"]) {
+      expect(screen.getByRole("group", { name: heading })).toBeInTheDocument();
+    }
+  });
+
+  it("renders the tab title", () => {
+    render(<SecurityAccessSettings />);
+
+    expect(
+      screen.getByRole("heading", { name: "Security & Access" }),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps the token and proxy keys on the batched settings form", () => {
+    render(<SecurityAccessSettings />);
+
+    expect(useSettingsFormMock.mock.calls[0]?.[0]?.keys).toEqual([
+      "auth.access_token_expiry",
+      "auth.refresh_token_expiry",
+      "clientip.trusted_proxies",
+    ]);
+  });
+
+  it("shows only the rate limiting switch until Advanced is opened", async () => {
+    render(<SecurityAccessSettings />);
+
+    expect(
+      screen.getByRole("switch", { name: /Enable rate limiting/i }),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("Per client address")).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: /Advanced/i }));
+
+    expect(screen.getByText("Per client address")).toBeInTheDocument();
+    expect(screen.getByText("Standard API keys")).toBeInTheDocument();
+    expect(screen.getByText("Sign in")).toBeInTheDocument();
+  });
+
+  it("stages an edited rate-limit row on the shared save bar", async () => {
+    render(<SecurityAccessSettings />);
+
+    await userEvent.click(screen.getByRole("button", { name: /Advanced/i }));
+
+    // The control rejects empty/zero input, so append rather than clear first.
+    const rpsInput = screen.getByLabelText(
+      "Whole-server limit",
+    ) as HTMLInputElement;
+    await userEvent.type(rpsInput, "5");
+
+    expect(rpsInput.value).toBe("10005");
+    expect(screen.getByText("1 unsaved change")).toBeInTheDocument();
+  });
+
+  it("counts an edited rate limit toward the shared save bar and saves both writers in order", async () => {
+    const order: string[] = [];
+    const save = vi.fn(async () => {
+      order.push("settings");
+    });
+    const mutateAsync = vi.fn(async () => {
+      order.push("rate-limits");
+    });
+    useSettingsFormMock.mockReturnValue(makeForm({ dirtyCount: 1, save }));
+    updateRateLimitMock.mockReturnValue({
+      mutateAsync,
+      isPending: false,
+      data: undefined,
+    });
+
+    render(<SecurityAccessSettings />);
+
+    await userEvent.click(
+      screen.getByRole("switch", { name: /Enable rate limiting/i }),
+    );
+    expect(screen.getByText("2 unsaved changes")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: /^Save$/i }));
+
+    await waitFor(() =>
+      expect(mutateAsync).toHaveBeenCalledWith(
+        expect.objectContaining({ enabled: false }),
+      ),
+    );
+    expect(save).toHaveBeenCalled();
+    // PUT /admin/rate-limits/config validates `backend: redis` against the
+    // persisted settings, so running the two writers concurrently lets the
+    // limiter be judged against the state this very save is replacing.
+    expect(order).toEqual(["settings", "rate-limits"]);
+  });
+
+  it("leaves the rate-limit write alone when the settings batch fails", async () => {
+    const save = vi.fn().mockRejectedValue(new Error("invalid duration"));
+    const mutateAsync = vi.fn();
+    useSettingsFormMock.mockReturnValue(makeForm({ dirtyCount: 1, save }));
+    updateRateLimitMock.mockReturnValue({
+      mutateAsync,
+      isPending: false,
+      data: undefined,
+    });
+
+    render(<SecurityAccessSettings />);
+
+    await userEvent.click(
+      screen.getByRole("switch", { name: /Enable rate limiting/i }),
+    );
+    await userEvent.click(screen.getByRole("button", { name: /^Save$/i }));
+
+    await waitFor(() => expect(save).toHaveBeenCalled());
+    expect(mutateAsync).not.toHaveBeenCalled();
+    // The staged rate-limit edit survives so the admin can fix the cause and
+    // save again; both mutations toast their own failure.
+    expect(screen.getByText("2 unsaved changes")).toBeInTheDocument();
+  });
+
+  it("offers the Redis backend when the server reports Redis configured", async () => {
+    render(<SecurityAccessSettings />);
+    await openBackendSelect();
+
+    expect(
+      screen.getByRole("option", { name: "Shared via Redis" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
+    expect(screen.queryByText(REDIS_HINT)).not.toBeInTheDocument();
+  });
+
+  it("disables the Redis backend and points at Infrastructure when Redis is unconfigured", async () => {
+    rateLimitConfigMock.mockReturnValue({
+      data: { ...SERVER_CONFIG, redis_available: false },
+      isLoading: false,
+    });
+
+    render(<SecurityAccessSettings />);
+    await openBackendSelect();
+
+    expect(
+      screen.getByRole("option", { name: "Shared via Redis" }),
+    ).toHaveAttribute("aria-disabled", "true");
+    expect(
+      screen.getByRole("option", { name: "This server only" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
+    expect(screen.getByText(REDIS_HINT)).toBeInTheDocument();
+  });
+
+  it("leaves the restart prompt to the admin shell", () => {
+    rateLimitConfigMock.mockReturnValue({
+      data: { ...SERVER_CONFIG, backend: "redis", active_backend: "memory" },
+      isLoading: false,
+    });
+
+    render(<SecurityAccessSettings />);
+
+    // AdminLayout renders the one banner for the whole admin area, driven by
+    // GET /admin/server/status; saving a backend change marks that flag
+    // server-side, so this page adds nothing of its own.
+    expect(screen.queryByText("Restart required")).not.toBeInTheDocument();
+  });
+
+  it("warns on the backend row when the running limiter disagrees with the saved backend", async () => {
+    rateLimitConfigMock.mockReturnValue({
+      data: { ...SERVER_CONFIG, backend: "redis", active_backend: "memory" },
+      isLoading: false,
+    });
+
+    render(<SecurityAccessSettings />);
+    await userEvent.click(screen.getByRole("button", { name: /Advanced/i }));
+
+    expect(
+      screen.getByText(
+        /running limiter is using in-memory counters, not the saved Redis/i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("warns when rate limiting is enabled but no limiter is running", () => {
+    rateLimitConfigMock.mockReturnValue({
+      data: { ...SERVER_CONFIG, active: false, active_backend: "" },
+      isLoading: false,
+    });
+
+    render(<SecurityAccessSettings />);
+
+    expect(
+      screen.getByText(/no limiter is running in this process/i),
+    ).toBeInTheDocument();
+  });
+
+  it("shows no drift warnings when the running limiter matches the saved config", async () => {
+    rateLimitConfigMock.mockReturnValue({
+      data: SERVER_CONFIG,
+      isLoading: false,
+    });
+
+    render(<SecurityAccessSettings />);
+    await userEvent.click(screen.getByRole("button", { name: /Advanced/i }));
+
+    expect(
+      screen.queryByText(/no limiter is running/i),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(/running limiter is using/i),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/pages/admin-settings/SecurityAccessSettings.tsx b/web/src/pages/admin-settings/SecurityAccessSettings.tsx
new file mode 100644
index 000000000..dc5a83d1a
--- /dev/null
+++ b/web/src/pages/admin-settings/SecurityAccessSettings.tsx
@@ -0,0 +1,614 @@
+import { useId, useMemo, useState } from "react";
+
+import type {
+  RateLimitAuthEndpointConfig,
+  RateLimitConfig,
+  RateLimitTierConfig,
+} from "@/api/types";
+import { AdvancedSection } from "@/components/settings/AdvancedSection";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import { SettingsSubheading } from "@/components/settings/SettingsSubheading";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  useRateLimitConfig,
+  useUpdateRateLimitConfig,
+} from "@/hooks/queries/admin/rateLimits";
+import { useRestartKeys } from "@/hooks/useRestartKeys";
+import { useSettingsForm } from "@/hooks/useSettingsForm";
+import { useReportUnsavedChanges } from "@/hooks/useUnsavedChanges";
+import { cn } from "@/lib/utils";
+import { FieldGroup } from "./FieldGroup";
+import { SaveBar } from "./SaveBar";
+import {
+  SETTINGS_CONTROL_WIDTH,
+  SETTINGS_NUMBER_WIDTH,
+  SettingField,
+  SettingFieldRow,
+  SettingFieldStatus,
+} from "./SettingField";
+
+// Sign-in lifetimes and proxy trust go through the batched settings endpoint.
+// Rate limits do not: they live behind /admin/rate-limits/config and the batch
+// endpoint rejects those keys, so this page drives two writers behind one save
+// bar rather than showing the admin two different Save buttons.
+const SESSION_KEYS = ["auth.access_token_expiry", "auth.refresh_token_expiry"];
+const NETWORK_KEYS = ["clientip.trusted_proxies"];
+const KEYS = [...SESSION_KEYS, ...NETWORK_KEYS];
+
+const DEFAULT_TIER: RateLimitTierConfig = {
+  requests_per_second: 10,
+  requests_per_minute: 300,
+  burst: 20,
+};
+
+const DEFAULT_AUTH_ENDPOINT: RateLimitAuthEndpointConfig = {
+  requests_per_minute: 20,
+  burst: 10,
+};
+
+const DEFAULT_CONFIG: RateLimitConfig = {
+  enabled: true,
+  backend: "memory",
+  global_requests_per_second: 1000,
+  tiers: {
+    standard: { requests_per_second: 20, requests_per_minute: 1200, burst: 20 },
+    elevated: {
+      requests_per_second: 100,
+      requests_per_minute: 6000,
+      burst: 100,
+    },
+  },
+  ip_requests_per_second: 120,
+  ip_requests_per_minute: 6000,
+  ip_burst: 120,
+  auth_endpoints: {
+    login: { requests_per_minute: 20, burst: 10 },
+    signup: { requests_per_minute: 10, burst: 6 },
+    setup: { requests_per_minute: 10, burst: 6 },
+    device_start: { requests_per_minute: 20, burst: 10 },
+    device_lookup: { requests_per_minute: 60, burst: 20 },
+    device_poll: { requests_per_minute: 120, burst: 30 },
+    autoscan_webhook: { requests_per_minute: 60, burst: 30 },
+  },
+};
+
+const TIER_LABELS: Record<string, string> = {
+  standard: "Standard API keys",
+  elevated: "Elevated API keys",
+};
+
+const AUTH_ENDPOINT_LABELS: Record<string, string> = {
+  login: "Sign in",
+  signup: "Sign up",
+  setup: "First-run setup",
+  device_start: "TV sign-in: start",
+  device_lookup: "TV sign-in: code lookup",
+  device_poll: "TV sign-in: waiting for approval",
+  autoscan_webhook: "Autoscan webhook",
+};
+
+interface RateLimitField {
+  value: number;
+  onChange: (value: string) => void;
+}
+
+/** One captioned number box inside a rate-limit row's control column. */
+function RateBox({
+  id,
+  caption,
+  field,
+  disabled,
+}: {
+  id: string;
+  caption: string;
+  field: RateLimitField;
+  disabled: boolean;
+}) {
+  return (
+    <span className="flex flex-col items-end gap-1">
+      <Label
+        htmlFor={id}
+        className="text-muted-foreground text-[11px] font-normal"
+      >
+        {caption}
+      </Label>
+      <Input
+        id={id}
+        type="number"
+        min={1}
+        value={field.value}
+        onChange={(e) => field.onChange(e.target.value)}
+        disabled={disabled}
+        className="w-24 text-right tabular-nums"
+      />
+    </span>
+  );
+}
+
+/**
+ * One labelled row of request budgets. The per-second box is optional because
+ * the public auth endpoints are only budgeted per minute; everything else on
+ * this page uses the full requests/second · requests/minute · burst triad.
+ */
+function RateTriadRow({
+  label,
+  description,
+  perSecond,
+  perMinute,
+  burst,
+  disabled = false,
+}: {
+  label: string;
+  description?: string;
+  perSecond?: RateLimitField;
+  perMinute: RateLimitField;
+  burst: RateLimitField;
+  disabled?: boolean;
+}) {
+  const baseId = useId();
+
+  return (
+    <SettingFieldRow
+      label={label}
+      htmlFor={`${baseId}-rpm`}
+      description={description}
+    >
+      <div className="flex flex-wrap items-end justify-end gap-2.5">
+        {perSecond && (
+          <RateBox
+            id={`${baseId}-rps`}
+            caption="Per second"
+            field={perSecond}
+            disabled={disabled}
+          />
+        )}
+        <RateBox
+          id={`${baseId}-rpm`}
+          caption="Per minute"
+          field={perMinute}
+          disabled={disabled}
+        />
+        <RateBox
+          id={`${baseId}-burst`}
+          caption="Burst"
+          field={burst}
+          disabled={disabled}
+        />
+      </div>
+    </SettingFieldRow>
+  );
+}
+
+export default function SecurityAccessSettings() {
+  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
+  const restartKeys = useRestartKeys();
+  const allRestart = (keys: string[]) =>
+    keys.every((key) => restartKeys.has(key));
+  const { data: serverConfig, isLoading: rateLimitsLoading } =
+    useRateLimitConfig();
+  const updateConfig = useUpdateRateLimitConfig();
+
+  const trustedProxiesManaged = form.sensitiveManagedByEnv.includes(
+    "clientip.trusted_proxies",
+  );
+
+  // The save endpoint rejects the Redis backend unless Redis is configured, so
+  // mirror that rule on the option itself. The server stays the source of
+  // truth; an older response without the field leaves the option enabled.
+  const redisSelectable = serverConfig?.redis_available !== false;
+
+  // Drift the shared restart banner cannot see: what the limiter in this
+  // process actually runs with, straight from the GET response. The
+  // restart_required flag only covers staged saves — a limiter that failed to
+  // apply the saved backend at boot (say, Redis was unreachable) drifts
+  // without the flag, and a restart alone may not fix it, so the hint states
+  // the mismatch instead of prescribing a restart.
+  const savedBackend = serverConfig?.backend || "memory";
+  const limiterInactive =
+    serverConfig?.enabled === true && serverConfig.active === false;
+  const runningBackend =
+    serverConfig?.active === true ? serverConfig.active_backend : undefined;
+  const runningBackendDiffers =
+    Boolean(runningBackend) && runningBackend !== savedBackend;
+  const backendNoun = (backend?: string) =>
+    backend === "redis" ? "Redis" : "in-memory";
+
+  const hydratedConfig = useMemo<RateLimitConfig>(() => {
+    if (!serverConfig) return DEFAULT_CONFIG;
+    return {
+      enabled: serverConfig.enabled,
+      backend: serverConfig.backend || "memory",
+      global_requests_per_second: serverConfig.global_requests_per_second,
+      tiers: {
+        standard:
+          serverConfig.tiers?.standard ?? DEFAULT_CONFIG.tiers.standard!,
+        elevated:
+          serverConfig.tiers?.elevated ?? DEFAULT_CONFIG.tiers.elevated!,
+      },
+      ip_requests_per_second:
+        serverConfig.ip_requests_per_second ??
+        DEFAULT_CONFIG.ip_requests_per_second,
+      ip_requests_per_minute:
+        serverConfig.ip_requests_per_minute ??
+        DEFAULT_CONFIG.ip_requests_per_minute,
+      ip_burst: serverConfig.ip_burst ?? DEFAULT_CONFIG.ip_burst,
+      auth_endpoints: Object.fromEntries(
+        Object.keys(AUTH_ENDPOINT_LABELS).map((endpoint) => [
+          endpoint,
+          serverConfig.auth_endpoints?.[endpoint] ??
+            DEFAULT_CONFIG.auth_endpoints[endpoint] ??
+            DEFAULT_AUTH_ENDPOINT,
+        ]),
+      ),
+    };
+  }, [serverConfig]);
+
+  // Keyed on the hydrated snapshot so a refetch that actually changes the saved
+  // config wins over a stale draft instead of silently resurrecting it.
+  const hydratedKey = JSON.stringify(hydratedConfig);
+  const [configState, setConfigState] = useState<{
+    key: string;
+    config: RateLimitConfig;
+  }>({
+    key: hydratedKey,
+    config: hydratedConfig,
+  });
+  const config =
+    configState.key === hydratedKey ? configState.config : hydratedConfig;
+
+  function updateConfigState(
+    updater: (prev: RateLimitConfig) => RateLimitConfig,
+  ) {
+    setConfigState((prev) => {
+      const base = prev.key === hydratedKey ? prev.config : hydratedConfig;
+      return { key: hydratedKey, config: updater(base) };
+    });
+  }
+
+  function setNumber(field: (value: number) => void) {
+    return (raw: string) => {
+      const num = parseInt(raw, 10);
+      if (isNaN(num) || num <= 0) return;
+      field(num);
+    };
+  }
+
+  function handleTierChange(
+    tier: string,
+    field: keyof RateLimitTierConfig,
+    value: number,
+  ) {
+    updateConfigState((prev) => {
+      const existing: RateLimitTierConfig = prev.tiers[tier] ?? DEFAULT_TIER;
+      return {
+        ...prev,
+        tiers: { ...prev.tiers, [tier]: { ...existing, [field]: value } },
+      };
+    });
+  }
+
+  function handleAuthEndpointChange(
+    endpoint: string,
+    field: keyof RateLimitAuthEndpointConfig,
+    value: number,
+  ) {
+    updateConfigState((prev) => {
+      const existing: RateLimitAuthEndpointConfig =
+        prev.auth_endpoints[endpoint] ?? DEFAULT_AUTH_ENDPOINT;
+      return {
+        ...prev,
+        auth_endpoints: {
+          ...prev.auth_endpoints,
+          [endpoint]: { ...existing, [field]: value },
+        },
+      };
+    });
+  }
+
+  const rateLimitsDirty = JSON.stringify(config) !== hydratedKey;
+  // The rate-limit draft lives outside useSettingsForm, so it has to announce
+  // itself to the unsaved-changes registry on its own — otherwise the
+  // navigation guard and the reload prompt only know about the batched keys.
+  useReportUnsavedChanges(rateLimitsDirty);
+  // Everything except the on/off switch lives in the disclosure, so compare the
+  // two with `enabled` normalised away to decide whether to force it open.
+  const advancedDirty =
+    JSON.stringify({ ...config, enabled: true }) !==
+    JSON.stringify({ ...hydratedConfig, enabled: true });
+  const advancedCount =
+    2 +
+    3 +
+    Object.keys(TIER_LABELS).length * 3 +
+    Object.keys(AUTH_ENDPOINT_LABELS).length * 2;
+
+  /**
+   * One Save, two writers — and they are ordered, not concurrent. The
+   * rate-limit endpoint validates `backend: redis` against the *persisted*
+   * settings, so firing it alongside the settings batch means it can be judged
+   * against the state the admin is in the middle of replacing.
+   *
+   * A failed writer keeps its own staged edits (neither mutation clears them on
+   * error) and toasts the server's message, so the admin can fix the cause and
+   * hit Save again. The batch failing skips the rate-limit PUT for the same
+   * reason it goes first: the settings it would be validated against are not
+   * the ones on screen.
+   */
+  async function handleSave() {
+    try {
+      if (form.dirtyCount > 0) await form.save();
+      if (rateLimitsDirty) await updateConfig.mutateAsync(config);
+    } catch {
+      // Both mutations already surface the failure as a toast; swallowing here
+      // only stops it becoming an unhandled rejection out of the save bar.
+    }
+  }
+
+  function handleDiscard() {
+    setConfigState({ key: hydratedKey, config: hydratedConfig });
+    form.discard();
+  }
+
+  if (form.isLoading || rateLimitsLoading)
+    return (
+      <div className="space-y-6" role="status" aria-label="Loading settings">
+        <Skeleton className="h-8 w-48" />
+        <div className="space-y-4">
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+        <div className="space-y-4">
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+        <span className="sr-only">Loading settings</span>
+      </div>
+    );
+
+  const savingRateLimits = updateConfig.isPending;
+
+  return (
+    <div className="flex h-full flex-col">
+      <SettingsPageHeader title="Security & Access" className="mb-8" />
+
+      <div className="flex-1 space-y-5">
+        <FieldGroup
+          label="Sign-in sessions"
+          restartAll={allRestart(SESSION_KEYS)}
+        >
+          <SettingField
+            label="Access token expiry"
+            type="duration"
+            description="How long before an app silently renews, e.g. 30m."
+            value={form.getValue("auth.access_token_expiry")}
+            onChange={(v) => form.setValue("auth.access_token_expiry", v)}
+            restartRequired={restartKeys.has("auth.access_token_expiry")}
+          />
+          <SettingField
+            label="Refresh token expiry"
+            type="duration"
+            description="How long someone stays signed in, e.g. 30d."
+            value={form.getValue("auth.refresh_token_expiry")}
+            onChange={(v) => form.setValue("auth.refresh_token_expiry", v)}
+            restartRequired={restartKeys.has("auth.refresh_token_expiry")}
+          />
+        </FieldGroup>
+
+        <FieldGroup label="Network" restartAll={allRestart(NETWORK_KEYS)}>
+          <SettingField
+            label="Trusted proxies"
+            description={
+              trustedProxiesManaged
+                ? "Managed by SILO_TRUSTED_PROXIES."
+                : "Comma-separated proxy ranges; empty keeps the private defaults."
+            }
+            hint="172.16.0.0/12, 203.0.113.7/32"
+            value={form.getValue("clientip.trusted_proxies")}
+            onChange={(v) => form.setValue("clientip.trusted_proxies", v)}
+            disabled={trustedProxiesManaged}
+            restartRequired={restartKeys.has("clientip.trusted_proxies")}
+          />
+        </FieldGroup>
+
+        <FieldGroup label="Rate limiting">
+          <SettingField
+            label="Enable rate limiting"
+            type="toggle"
+            value={config.enabled ? "true" : "false"}
+            onChange={(v) =>
+              updateConfigState((prev) => ({ ...prev, enabled: v === "true" }))
+            }
+            disabled={savingRateLimits}
+            status={
+              limiterInactive ? (
+                <SettingFieldStatus tone="warn">
+                  Enabled, but no limiter is running in this process — it may
+                  have failed to start. Check the server logs.
+                </SettingFieldStatus>
+              ) : undefined
+            }
+          />
+
+          <AdvancedSection
+            id="security.rate-limits"
+            count={advancedCount}
+            forceOpen={advancedDirty}
+          >
+            <SettingFieldRow
+              label="Where counters are kept"
+              htmlFor="rate-limit-backend"
+              description={
+                redisSelectable
+                  ? "Redis shares counters across servers, after a restart."
+                  : "Redis shares counters across servers, after a restart. Configure Redis under Infrastructure first."
+              }
+              status={
+                runningBackendDiffers ? (
+                  <SettingFieldStatus tone="warn">
+                    The running limiter is using {backendNoun(runningBackend)}{" "}
+                    counters, not the saved {backendNoun(savedBackend)} backend.
+                    If a restart does not fix it, check that the saved backend
+                    is reachable.
+                  </SettingFieldStatus>
+                ) : undefined
+              }
+            >
+              <Select
+                value={config.backend}
+                onValueChange={(value) =>
+                  updateConfigState((prev) => ({ ...prev, backend: value }))
+                }
+                disabled={savingRateLimits}
+              >
+                <SelectTrigger
+                  id="rate-limit-backend"
+                  className={SETTINGS_CONTROL_WIDTH}
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="memory">This server only</SelectItem>
+                  <SelectItem value="redis" disabled={!redisSelectable}>
+                    Shared via Redis
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </SettingFieldRow>
+
+            <SettingFieldRow
+              label="Whole-server limit"
+              htmlFor="global-rps"
+              description="Ceiling across every rate-limited route."
+              // The row's unit slot rather than a span beside the input: the
+              // triad rows below have no unit, and an inline one here would
+              // push this box off the column they share.
+              unit="per second"
+            >
+              <Input
+                id="global-rps"
+                type="number"
+                min={1}
+                value={config.global_requests_per_second}
+                onChange={(e) =>
+                  setNumber((num) =>
+                    updateConfigState((prev) => ({
+                      ...prev,
+                      global_requests_per_second: num,
+                    })),
+                  )(e.target.value)
+                }
+                disabled={savingRateLimits}
+                className={cn("text-right tabular-nums", SETTINGS_NUMBER_WIDTH)}
+              />
+            </SettingFieldRow>
+
+            <RateTriadRow
+              label="Per client address"
+              description="Budget one IP address gets."
+              disabled={savingRateLimits}
+              perSecond={{
+                value: config.ip_requests_per_second,
+                onChange: setNumber((num) =>
+                  updateConfigState((prev) => ({
+                    ...prev,
+                    ip_requests_per_second: num,
+                  })),
+                ),
+              }}
+              perMinute={{
+                value: config.ip_requests_per_minute,
+                onChange: setNumber((num) =>
+                  updateConfigState((prev) => ({
+                    ...prev,
+                    ip_requests_per_minute: num,
+                  })),
+                ),
+              }}
+              burst={{
+                value: config.ip_burst,
+                onChange: setNumber((num) =>
+                  updateConfigState((prev) => ({ ...prev, ip_burst: num })),
+                ),
+              }}
+            />
+
+            {Object.keys(TIER_LABELS).map((tier) => {
+              const tierConfig = config.tiers[tier] ?? DEFAULT_TIER;
+              return (
+                <RateTriadRow
+                  key={tier}
+                  label={TIER_LABELS[tier]!}
+                  disabled={savingRateLimits}
+                  perSecond={{
+                    value: tierConfig.requests_per_second,
+                    onChange: setNumber((num) =>
+                      handleTierChange(tier, "requests_per_second", num),
+                    ),
+                  }}
+                  perMinute={{
+                    value: tierConfig.requests_per_minute,
+                    onChange: setNumber((num) =>
+                      handleTierChange(tier, "requests_per_minute", num),
+                    ),
+                  }}
+                  burst={{
+                    value: tierConfig.burst,
+                    onChange: setNumber((num) =>
+                      handleTierChange(tier, "burst", num),
+                    ),
+                  }}
+                />
+              );
+            })}
+
+            <SettingsSubheading>
+              Sign-in and webhook endpoints
+            </SettingsSubheading>
+            {Object.keys(AUTH_ENDPOINT_LABELS).map((endpoint) => {
+              const epConfig =
+                config.auth_endpoints[endpoint] ?? DEFAULT_AUTH_ENDPOINT;
+              return (
+                <RateTriadRow
+                  key={endpoint}
+                  label={AUTH_ENDPOINT_LABELS[endpoint]!}
+                  disabled={savingRateLimits}
+                  perMinute={{
+                    value: epConfig.requests_per_minute,
+                    onChange: setNumber((num) =>
+                      handleAuthEndpointChange(
+                        endpoint,
+                        "requests_per_minute",
+                        num,
+                      ),
+                    ),
+                  }}
+                  burst={{
+                    value: epConfig.burst,
+                    onChange: setNumber((num) =>
+                      handleAuthEndpointChange(endpoint, "burst", num),
+                    ),
+                  }}
+                />
+              );
+            })}
+          </AdvancedSection>
+        </FieldGroup>
+      </div>
+
+      <SaveBar
+        dirtyCount={form.dirtyCount + (rateLimitsDirty ? 1 : 0)}
+        onSave={() => void handleSave()}
+        onDiscard={handleDiscard}
+        isSaving={form.isSaving || savingRateLimits}
+      />
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/SettingField.test.tsx b/web/src/pages/admin-settings/SettingField.test.tsx
index 5b5e3d697..e053d6036 100644
--- a/web/src/pages/admin-settings/SettingField.test.tsx
+++ b/web/src/pages/admin-settings/SettingField.test.tsx
@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { describe, expect, it, vi } from "vitest";
 
+import { FieldGroup } from "./FieldGroup";
 import { SettingField } from "./SettingField";
 
 vi.mock("@/components/ui/select", () => ({
@@ -40,4 +41,101 @@ describe("SettingField", () => {
     expect(screen.getByRole("button", { name: "PostgreSQL" })).toBeEnabled();
     expect(screen.getByRole("button", { name: "SQLite (TBD)" })).toBeDisabled();
   });
+
+  it("shows the restart chip after the label", () => {
+    render(
+      <SettingField
+        label="FFmpeg path"
+        value="/usr/bin/ffmpeg"
+        onChange={vi.fn()}
+        restartRequired
+      />,
+    );
+
+    expect(
+      screen.getByLabelText("Takes effect after a server restart"),
+    ).toBeInTheDocument();
+  });
+
+  it("omits the chip by default", () => {
+    render(<SettingField label="FFmpeg path" value="" onChange={vi.fn()} />);
+
+    expect(
+      screen.queryByLabelText("Takes effect after a server restart"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("drops its chip inside a group that already says every field restarts", () => {
+    render(
+      <FieldGroup label="Redis" restartAll>
+        <SettingField
+          label="Connection URL"
+          value=""
+          onChange={vi.fn()}
+          restartRequired
+        />
+      </FieldGroup>,
+    );
+
+    expect(
+      screen.getByText("Changes apply after a restart"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByLabelText("Takes effect after a server restart"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("puts the unit beside the control instead of in the label", () => {
+    render(
+      <SettingField
+        label="Mark watched at"
+        type="number"
+        unit="%"
+        value="90"
+        onChange={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText("Mark watched at")).toHaveValue(90);
+    expect(screen.getByText("%")).toBeInTheDocument();
+  });
+
+  it("renders a status line under the description", () => {
+    render(
+      <SettingField
+        label="Hardware acceleration"
+        type="toggle"
+        value="true"
+        onChange={vi.fn()}
+        description="Offload video encoding to the GPU."
+        status={<span>Detected VA-API on renderD128</span>}
+      />,
+    );
+
+    expect(
+      screen.getByText("Offload video encoding to the GPU."),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Detected VA-API on renderD128"),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps describing the control with its description", () => {
+    render(
+      <SettingField
+        label="Mark watched at"
+        type="number"
+        value="90"
+        onChange={vi.fn()}
+        hint="Percent of runtime before Silo marks an item finished."
+      />,
+    );
+
+    const input = screen.getByLabelText("Mark watched at");
+    const describedBy = input.getAttribute("aria-describedby");
+    expect(describedBy).toBeTruthy();
+    expect(document.getElementById(describedBy!)).toHaveTextContent(
+      "Percent of runtime before Silo marks an item finished.",
+    );
+  });
 });
diff --git a/web/src/pages/admin-settings/SettingField.tsx b/web/src/pages/admin-settings/SettingField.tsx
index 868f717d9..5ac9330e0 100644
--- a/web/src/pages/admin-settings/SettingField.tsx
+++ b/web/src/pages/admin-settings/SettingField.tsx
@@ -1,7 +1,11 @@
-import { useId } from "react";
+import { useId, type ReactNode } from "react";
+import { Check, TriangleAlert } from "lucide-react";
+
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
+import { RestartBadge } from "@/components/settings/RestartBadge";
+import { cn } from "@/lib/utils";
 import {
   Select,
   SelectContent,
@@ -9,6 +13,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { useGroupRestartAll } from "./FieldGroup";
+import "@/styles/admin-settings.css";
 
 interface SelectOption {
   value: string;
@@ -16,167 +22,310 @@ interface SelectOption {
   disabled?: boolean;
 }
 
+/**
+ * Width of a text, password, or select control inside a settings row. Pages
+ * that hand `SettingFieldRow` a control of their own use this instead of
+ * picking a width, so every row on a page ends on the same edge.
+ */
+export const SETTINGS_CONTROL_WIDTH = "w-full sm:w-[var(--settings-control-w)]";
+
+/** Width of a number control inside a settings row. See {@link SETTINGS_CONTROL_WIDTH}. */
+export const SETTINGS_NUMBER_WIDTH =
+  "w-full sm:w-[var(--settings-control-w-num)]";
+
+/**
+ * One-line probe result rendered under a field description, e.g.
+ * "Detected VA-API on renderD128". Pass any node to `status` instead when the
+ * copy needs richer markup.
+ */
+export function SettingFieldStatus({
+  tone = "ok",
+  children,
+}: {
+  tone?: "ok" | "warn" | "muted";
+  children: ReactNode;
+}) {
+  const Icon = tone === "warn" ? TriangleAlert : tone === "ok" ? Check : null;
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 text-[12.5px] leading-snug",
+        tone === "ok" && "text-green-600 dark:text-green-400",
+        tone === "warn" && "text-amber-600 dark:text-amber-400",
+        tone === "muted" && "text-muted-foreground",
+      )}
+    >
+      {Icon ? <Icon className="size-3.5 shrink-0" aria-hidden="true" /> : null}
+      {children}
+    </span>
+  );
+}
+
+export interface SettingFieldRowProps {
+  label: ReactNode;
+  /** Ties the label to the control; omit for rows whose control has no id. */
+  htmlFor?: string;
+  /**
+   * The `server_settings` key behind the row, e.g. `branding.server_name`.
+   * Rendered as a small mono caption under the label so an admin can match
+   * what they see to the API, environment overrides, and support answers.
+   */
+  settingKey?: string;
+  /** The row has an unsaved edit; shows the violet dot before the label. */
+  dirty?: boolean;
+  /** Description under the label. One short sentence, or nothing at all. */
+  description?: ReactNode;
+  descriptionId?: string;
+  /** Extra line under the description — probe results, quota notes. */
+  status?: ReactNode;
+  /** Amber "Restart" chip after the label; drive it from `useRestartKeys`. */
+  restartRequired?: boolean;
+  /**
+   * Trailing unit for the control, e.g. "days" or "Mbps". It renders in the
+   * row's own unit slot rather than beside the control on purpose: the slot is
+   * reserved on every row, so a row that has a unit and a row that does not
+   * still end their controls on the same edge.
+   */
+  unit?: ReactNode;
+  className?: string;
+  /** The control itself. */
+  children: ReactNode;
+}
+
+/**
+ * The row shell every admin setting sits in: label and description on the
+ * left, control right-aligned, unit slot after it, hairline underneath.
+ * Exported so the credential and limit variants line up with plain fields
+ * instead of re-deriving spacing.
+ */
+export function SettingFieldRow({
+  label,
+  htmlFor,
+  settingKey,
+  dirty,
+  description,
+  descriptionId,
+  status,
+  restartRequired,
+  unit,
+  className,
+  children,
+}: SettingFieldRowProps) {
+  // A group that already says "Changes apply after a restart" does not need the
+  // same fact repeated on every row inside it.
+  const groupSaysRestart = useGroupRestartAll();
+
+  return (
+    <div
+      className={cn(
+        "settings-field-row border-border/60 relative flex flex-col gap-3 border-b py-3.5 last:border-b-0",
+        "sm:flex-row sm:items-start sm:gap-6",
+        className,
+      )}
+    >
+      <div className="min-w-0 flex-1 sm:max-w-[520px]">
+        <div className="flex flex-wrap items-center gap-2">
+          {dirty ? (
+            <span
+              className="size-1.5 shrink-0 rounded-full bg-[var(--settings-accent)]"
+              title="Unsaved change"
+            />
+          ) : null}
+          <Label htmlFor={htmlFor} className="text-sm font-medium">
+            {label}
+          </Label>
+          {restartRequired && !groupSaysRestart && <RestartBadge />}
+        </div>
+        {settingKey ? (
+          <span className="text-muted-foreground/70 mt-0.5 block font-mono text-[10px] tracking-[0.02em]">
+            {settingKey}
+          </span>
+        ) : null}
+        {description ? (
+          <p
+            id={descriptionId}
+            className="text-muted-foreground mt-1 text-xs leading-relaxed"
+          >
+            {description}
+          </p>
+        ) : null}
+        {status ? <div className="mt-1.5">{status}</div> : null}
+      </div>
+      <div className="flex w-full items-center gap-2 sm:w-auto sm:shrink-0 sm:justify-end">
+        {/* Grows to fill the row on a stacked phone layout; content-sized and
+            right-aligned from `sm` up, which is what puts every control on the
+            shared edge. */}
+        <div className="flex min-w-0 flex-1 items-center gap-2 sm:flex-none sm:justify-end">
+          {children}
+        </div>
+        {unit ? (
+          <span className="text-muted-foreground shrink-0 text-xs whitespace-nowrap sm:w-[var(--settings-unit-w)]">
+            {unit}
+          </span>
+        ) : (
+          // The reserved half of the contract: an empty slot on a unit-less row
+          // so its control does not slide right past the rows that have one.
+          <span
+            aria-hidden="true"
+            className="hidden shrink-0 sm:block sm:w-[var(--settings-unit-w)]"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
 interface SettingFieldProps {
   label: string;
+  /** The `server_settings` key, shown as a mono caption under the label. */
+  settingKey?: string;
+  /** The field has an unsaved edit; drive it from `form.isDirty(key)`. */
+  dirty?: boolean;
   type?: "text" | "number" | "password" | "toggle" | "duration" | "select";
+  /**
+   * Placeholder for `text`, description for every other type. Prefer
+   * `description` for new call sites.
+   */
   hint?: string;
+  /** Always rendered under the label, whatever the type. */
+  description?: ReactNode;
+  /** Extra line under the description, e.g. a detection result. */
+  status?: ReactNode;
+  /** Rendered in the row's trailing unit slot, e.g. "%" or "Mbps". */
+  unit?: string;
   value: string;
   onChange: (value: string) => void;
   options?: SelectOption[];
   sensitiveConfigured?: boolean;
   disabled?: boolean;
+  /** Marks the field with a restart badge; drive it from `useRestartKeys`. */
+  restartRequired?: boolean;
+  className?: string;
 }
 
 export function SettingField({
   label,
+  settingKey,
+  dirty,
   type = "text",
   hint,
+  description,
+  status,
+  unit,
   value,
   onChange,
   options,
   sensitiveConfigured,
   disabled,
+  restartRequired,
+  className,
 }: SettingFieldProps) {
   const controlId = useId();
   const hintId = useId();
 
+  // `text` keeps treating `hint` as a placeholder (its long-standing
+  // behaviour); every other type shows it under the label.
+  const hintAsDescription = type === "text" ? undefined : hint;
+  const rowDescription = description ?? hintAsDescription;
+  const describedBy = rowDescription ? hintId : undefined;
+
+  const row = (control: ReactNode) => (
+    <SettingFieldRow
+      label={label}
+      htmlFor={controlId}
+      settingKey={settingKey}
+      dirty={dirty}
+      description={rowDescription}
+      descriptionId={hintId}
+      status={status}
+      restartRequired={restartRequired}
+      unit={unit}
+      className={className}
+    >
+      {control}
+    </SettingFieldRow>
+  );
+
   if (type === "toggle") {
-    const checked = value === "true";
-    return (
-      <div className="flex flex-col justify-between gap-3 py-3 sm:flex-row sm:items-center">
-        <div className="space-y-0.5">
-          <Label htmlFor={controlId} className="text-sm font-medium">
-            {label}
-          </Label>
-          {hint && (
-            <p id={hintId} className="text-muted-foreground text-xs">
-              {hint}
-            </p>
-          )}
-        </div>
-        <Switch
-          id={controlId}
-          checked={checked}
-          onCheckedChange={(val) => onChange(val ? "true" : "false")}
-          disabled={disabled}
-          aria-describedby={hint ? hintId : undefined}
-        />
-      </div>
+    return row(
+      <Switch
+        id={controlId}
+        checked={value === "true"}
+        onCheckedChange={(val) => onChange(val ? "true" : "false")}
+        disabled={disabled}
+        aria-describedby={describedBy}
+      />,
     );
   }
 
   if (type === "select" && options) {
     const currentVal = value || options[0]?.value || "";
-    return (
-      <div className="space-y-1 py-2">
-        <Label htmlFor={controlId} className="text-sm font-medium">
-          {label}
-        </Label>
-        <Select value={currentVal} onValueChange={onChange} disabled={disabled}>
-          <SelectTrigger
-            id={controlId}
-            className="w-full sm:w-fit"
-            aria-describedby={hint ? hintId : undefined}
-          >
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {options.map((opt) => (
-              <SelectItem
-                key={opt.value}
-                value={opt.value}
-                disabled={opt.disabled}
-              >
-                {opt.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        {hint && (
-          <p id={hintId} className="text-muted-foreground text-xs">
-            {hint}
-          </p>
-        )}
-      </div>
+    return row(
+      <Select value={currentVal} onValueChange={onChange} disabled={disabled}>
+        <SelectTrigger
+          id={controlId}
+          className={cn("border-muted-foreground/25", SETTINGS_CONTROL_WIDTH)}
+          aria-describedby={describedBy}
+        >
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((opt) => (
+            <SelectItem
+              key={opt.value}
+              value={opt.value}
+              disabled={opt.disabled}
+            >
+              {opt.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>,
     );
   }
 
   if (type === "password") {
-    const placeholder = sensitiveConfigured
-      ? "configured"
-      : (hint ?? "Not configured");
-    return (
-      <div className="space-y-1 py-2">
-        <Label htmlFor={controlId} className="text-sm font-medium">
-          {label}
-        </Label>
-        <Input
-          id={controlId}
-          type="password"
-          placeholder={placeholder}
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          className="max-w-md"
-          autoComplete="off"
-          aria-describedby={hint ? hintId : undefined}
-        />
-        {hint && (
-          <p id={hintId} className="text-muted-foreground text-xs">
-            {hint}
-          </p>
-        )}
-      </div>
+    return row(
+      <Input
+        id={controlId}
+        type="password"
+        placeholder={
+          sensitiveConfigured ? "configured" : (hint ?? "Not configured")
+        }
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        className={cn("border-muted-foreground/25", SETTINGS_CONTROL_WIDTH)}
+        aria-describedby={describedBy}
+      />,
     );
   }
 
   if (type === "number") {
-    return (
-      <div className="space-y-1 py-2">
-        <Label htmlFor={controlId} className="text-sm font-medium">
-          {label}
-        </Label>
-        <Input
-          id={controlId}
-          type="number"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          className="w-full sm:w-40"
-          autoComplete="off"
-          aria-describedby={hint ? hintId : undefined}
-        />
-        {hint && (
-          <p id={hintId} className="text-muted-foreground text-xs">
-            {hint}
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  // text and duration
-  return (
-    <div className="space-y-1 py-2">
-      <Label htmlFor={controlId} className="text-sm font-medium">
-        {label}
-      </Label>
+    return row(
       <Input
         id={controlId}
-        type="text"
+        type="number"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         disabled={disabled}
-        className="max-w-md"
-        placeholder={hint}
-        autoComplete="off"
-        aria-describedby={hint && type === "duration" ? hintId : undefined}
-      />
-      {hint && type === "duration" && (
-        <p id={hintId} className="text-muted-foreground text-xs">
-          {hint}
-        </p>
-      )}
-    </div>
+        className={cn("border-muted-foreground/25", SETTINGS_NUMBER_WIDTH)}
+        aria-describedby={describedBy}
+      />,
+    );
+  }
+
+  // text and duration
+  return row(
+    <Input
+      id={controlId}
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={disabled}
+      className={cn("border-muted-foreground/25", SETTINGS_CONTROL_WIDTH)}
+      placeholder={type === "text" ? hint : undefined}
+      aria-describedby={describedBy}
+    />,
   );
 }
diff --git a/web/src/pages/admin-settings/SettingsOverview.test.tsx b/web/src/pages/admin-settings/SettingsOverview.test.tsx
new file mode 100644
index 000000000..fd6aac326
--- /dev/null
+++ b/web/src/pages/admin-settings/SettingsOverview.test.tsx
@@ -0,0 +1,176 @@
+import { render, screen, within } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { SettingsOverviewModel } from "@/hooks/admin/useSettingsOverview";
+import SettingsOverview from "./SettingsOverview";
+
+const mocks = vi.hoisted(() => ({
+  useSettingsOverview: vi.fn(),
+}));
+
+vi.mock("@/hooks/admin/useSettingsOverview", async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import("@/hooks/admin/useSettingsOverview")
+  >()),
+  useSettingsOverview: () => mocks.useSettingsOverview(),
+}));
+
+function model(
+  overrides: Partial<SettingsOverviewModel> = {},
+): SettingsOverviewModel {
+  return {
+    isLoading: false,
+    tiles: [
+      {
+        id: "storage",
+        label: "Storage",
+        state: "ok",
+        stateText: "Healthy",
+        detail: "S3 · public + private",
+      },
+      {
+        id: "transcoding",
+        label: "Transcoding",
+        state: "warn",
+        stateText: "Restart pending",
+        detail: "Saved changes apply after a restart",
+        action: { label: "Fix", page: "playback" },
+      },
+      {
+        id: "email",
+        label: "Email",
+        state: "off",
+        stateText: "Not set up",
+        detail: "Invites and resets can't send",
+        action: { label: "Set up", page: "notifications" },
+      },
+    ],
+    cards: [
+      { id: "playback" },
+      { id: "downloads" },
+      { id: "notifications" },
+      { id: "watch-sync" },
+    ],
+    ...overrides,
+  };
+}
+
+function renderOverview() {
+  return render(
+    <MemoryRouter initialEntries={["/admin/settings"]}>
+      <SettingsOverview />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  mocks.useSettingsOverview.mockReturnValue(model());
+});
+
+describe("SettingsOverview", () => {
+  it("renders the page heading and nothing else above the content", () => {
+    renderOverview();
+
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Settings" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Configure the server, media processing, integrations/),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Setup & health" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Recommendations and configuration problems/),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Settings groups" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("searchbox")).not.toBeInTheDocument();
+  });
+
+  it("shows only the health tiles that need something, with their action", () => {
+    renderOverview();
+
+    expect(
+      screen.queryByTestId("overview-tile-storage"),
+    ).not.toBeInTheDocument();
+
+    const transcoding = screen.getByTestId("overview-tile-transcoding");
+    expect(transcoding).toHaveAttribute("data-state", "warn");
+    expect(
+      within(transcoding).getByText("Restart pending"),
+    ).toBeInTheDocument();
+    expect(within(transcoding).getByRole("link")).toHaveAttribute(
+      "href",
+      "/admin/settings/playback",
+    );
+
+    const email = screen.getByTestId("overview-tile-email");
+    expect(within(email).getByText("Set up")).toBeInTheDocument();
+  });
+
+  it("explains the empty checklist when nothing needs attention", () => {
+    mocks.useSettingsOverview.mockReturnValue(
+      model({ tiles: model().tiles.filter((tile) => tile.state === "ok") }),
+    );
+    renderOverview();
+
+    expect(screen.getByText("No action needed")).toBeInTheDocument();
+    expect(
+      screen.getByText(/restart-required changes will appear here/),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByTestId("overview-tile-storage"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders one group card per entry with its named subareas", () => {
+    renderOverview();
+
+    const playback = screen.getByTestId("overview-card-playback");
+    expect(playback).toHaveAttribute("href", "/admin/settings/playback");
+    expect(within(playback).getByText("Playback")).toBeInTheDocument();
+    expect(
+      within(playback).getByText(
+        "Transcoding, hardware acceleration, and watch thresholds.",
+      ),
+    ).toBeInTheDocument();
+    expect(within(playback).getByText("Transcoding")).toBeInTheDocument();
+    expect(within(playback).getByText("Watch behavior")).toBeInTheDocument();
+    expect(within(playback).queryByText("Current")).not.toBeInTheDocument();
+
+    // Downloads is its own page, not a section of Playback.
+    const downloads = screen.getByTestId("overview-card-downloads");
+    expect(downloads).toHaveAttribute("href", "/admin/settings/downloads");
+    expect(within(playback).queryByText("Downloads")).not.toBeInTheDocument();
+
+    expect(screen.getByTestId("overview-card-watch-sync")).toHaveAttribute(
+      "href",
+      "/admin/settings/watch-sync",
+    );
+  });
+
+  it("does not reduce a multi-setting group to one configuration summary", () => {
+    renderOverview();
+
+    const notifications = screen.getByTestId("overview-card-notifications");
+    expect(
+      within(notifications).queryByText("Email channel has no SMTP"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows skeletons instead of tiles and cards on first load", () => {
+    mocks.useSettingsOverview.mockReturnValue(model({ isLoading: true }));
+    renderOverview();
+
+    expect(
+      screen.queryByTestId("overview-tile-transcoding"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("overview-card-playback"),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("No action needed")).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/pages/admin-settings/SettingsOverview.tsx b/web/src/pages/admin-settings/SettingsOverview.tsx
new file mode 100644
index 000000000..60d7b936b
--- /dev/null
+++ b/web/src/pages/admin-settings/SettingsOverview.tsx
@@ -0,0 +1,101 @@
+import { CircleCheck } from "lucide-react";
+
+import { useSettingsOverview } from "@/hooks/admin/useSettingsOverview";
+import {
+  HealthTile,
+  HealthTileSkeleton,
+  SectionCard,
+  SectionCardSkeleton,
+} from "./overviewCards";
+
+const SKELETON_TILES = [0, 1];
+const SKELETON_CARDS = [0, 1, 2, 3, 4, 5];
+
+/**
+ * The settings landing page: whatever needs the admin across the top, then one
+ * directory of settings categories. Mounted at the settings index route.
+ */
+export default function SettingsOverview() {
+  const { isLoading, tiles, cards } = useSettingsOverview();
+
+  // Keep this focused on actionable setup and health items rather than
+  // presenting every configured integration as a wall of green tiles.
+  const attentionTiles = tiles.filter(
+    (tile) => tile.state === "warn" || tile.state === "off",
+  );
+
+  return (
+    <div className="w-full space-y-10">
+      <header className="max-w-3xl space-y-3">
+        <h1 className="page-title text-[clamp(2.25rem,4vw,3.5rem)]">
+          Settings
+        </h1>
+        <p className="text-muted-foreground text-sm leading-relaxed sm:text-base">
+          Configure the server, media processing, integrations, and the defaults
+          your household starts with.
+        </p>
+      </header>
+
+      <section aria-labelledby="setup-health-heading" className="space-y-4">
+        <div className="space-y-1.5">
+          <h2
+            id="setup-health-heading"
+            className="text-xl font-semibold tracking-tight"
+          >
+            Setup &amp; health
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Recommendations and configuration problems that may limit server
+            features.
+          </p>
+        </div>
+        {isLoading ? (
+          <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5">
+            {SKELETON_TILES.map((index) => (
+              <HealthTileSkeleton key={index} />
+            ))}
+          </div>
+        ) : attentionTiles.length === 0 ? (
+          <div className="border-border/60 bg-card/35 inline-flex max-w-xl items-start gap-3 rounded-xl border px-4 py-3">
+            <CircleCheck
+              className="mt-0.5 size-4 shrink-0 text-emerald-500"
+              aria-hidden="true"
+            />
+            <div className="space-y-0.5">
+              <p className="text-sm font-medium">No action needed</p>
+              <p className="text-muted-foreground text-xs leading-relaxed">
+                Missing setup, unavailable services, and restart-required
+                changes will appear here.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5">
+            {attentionTiles.map((tile) => (
+              <HealthTile key={tile.id} tile={tile} />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <section aria-labelledby="settings-groups-heading" className="space-y-5">
+        <div className="space-y-1.5">
+          <h2
+            id="settings-groups-heading"
+            className="text-xl font-semibold tracking-tight"
+          >
+            Settings groups
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Each group shows the sections you’ll find inside.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          {isLoading
+            ? SKELETON_CARDS.map((index) => <SectionCardSkeleton key={index} />)
+            : cards.map((card) => <SectionCard key={card.id} card={card} />)}
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/StorageSettings.test.tsx b/web/src/pages/admin-settings/StorageSettings.test.tsx
deleted file mode 100644
index 613ca07f7..000000000
--- a/web/src/pages/admin-settings/StorageSettings.test.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import { act, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it, vi } from "vitest";
-
-import StorageSettings from "./StorageSettings";
-
-const useSettingsFormMock = vi.fn();
-const useCheckAdminSettingsConnectionMock = vi.fn();
-
-vi.mock("@/hooks/useSettingsForm", () => ({
-  useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
-}));
-
-vi.mock("@/hooks/queries/admin/settings", () => ({
-  useCheckAdminSettingsConnection: (...args: unknown[]) =>
-    useCheckAdminSettingsConnectionMock(...args),
-}));
-
-describe("StorageSettings", () => {
-  it("shows public and private storage sections with connection checks", () => {
-    useCheckAdminSettingsConnectionMock.mockReturnValue({
-      isPending: false,
-      mutateAsync: vi.fn(),
-    });
-    useSettingsFormMock.mockReturnValue({
-      isLoading: false,
-      getValue: (key: string) => {
-        if (key === "s3.public_url_auth") return "presigned";
-        return "";
-      },
-      setValue: vi.fn(),
-      dirtyCount: 0,
-      save: vi.fn(),
-      discard: vi.fn(),
-      isSaving: false,
-      restartRequired: false,
-      sensitiveConfigured: [],
-      sensitiveStatusReady: true,
-      sensitiveStatusError: false,
-      buildConnectionCheckRequest: vi.fn(),
-      isDirty: () => false,
-    });
-
-    const markup = renderToStaticMarkup(<StorageSettings />);
-
-    expect(markup).toContain("Public Assets");
-    expect(markup).toContain("Private Internal");
-    expect(markup).toContain("Check Connection");
-    expect(markup).not.toContain("Storage location change");
-  });
-
-  it("warns about the artwork cache when a public storage identity field is edited", () => {
-    useCheckAdminSettingsConnectionMock.mockReturnValue({
-      isPending: false,
-      mutateAsync: vi.fn(),
-    });
-    useSettingsFormMock.mockReturnValue({
-      isLoading: false,
-      getValue: (key: string) => {
-        if (key === "s3.public_url_auth") return "presigned";
-        return "";
-      },
-      setValue: vi.fn(),
-      dirtyCount: 1,
-      save: vi.fn(),
-      discard: vi.fn(),
-      isSaving: false,
-      restartRequired: false,
-      sensitiveConfigured: [],
-      sensitiveStatusReady: true,
-      sensitiveStatusError: false,
-      buildConnectionCheckRequest: vi.fn(),
-      isDirty: (key: string) => key === "s3.public_bucket",
-    });
-
-    const markup = renderToStaticMarkup(<StorageSettings />);
-
-    expect(markup).toContain("Storage location change");
-    expect(markup).toContain("will not change artwork cache records");
-    expect(markup).toContain("manually run Reconcile Artwork Cache");
-    expect(markup).toContain("manual Backfill Metadata Images");
-    expect(markup).toContain("new or changed metadata");
-    expect(markup).not.toContain("automatically re-caches anything missing");
-  });
-
-  it("requires an explicit action before replacing a configured S3 credential", async () => {
-    const resetValue = vi.fn();
-    const setValue = vi.fn();
-    let resolveSave: (() => void) | undefined;
-    const save = vi.fn(
-      () =>
-        new Promise<void>((resolve) => {
-          resolveSave = resolve;
-        }),
-    );
-    const discard = vi.fn();
-    useCheckAdminSettingsConnectionMock.mockReturnValue({
-      isPending: false,
-      mutateAsync: vi.fn(),
-    });
-    useSettingsFormMock.mockReturnValue({
-      isLoading: false,
-      getValue: (key: string) =>
-        key === "s3.public_url_auth" ? "presigned" : "",
-      setValue,
-      resetValue,
-      dirtyCount: 1,
-      save,
-      discard,
-      isSaving: false,
-      restartRequired: false,
-      sensitiveConfigured: ["s3.public_access_key", "s3.public_secret_key"],
-      sensitiveStatusReady: true,
-      sensitiveStatusError: false,
-      buildConnectionCheckRequest: vi.fn(),
-      isDirty: () => false,
-    });
-
-    render(<StorageSettings />);
-
-    expect(screen.queryByLabelText("Access Key")).not.toBeInTheDocument();
-    await userEvent.click(
-      screen.getByRole("button", { name: "Replace Access Key" }),
-    );
-    expect(screen.getByLabelText("Access Key")).toHaveAttribute(
-      "type",
-      "password",
-    );
-
-    await userEvent.click(
-      screen.getByRole("button", { name: "Keep saved Access Key" }),
-    );
-    expect(resetValue).toHaveBeenCalledWith("s3.public_access_key");
-    expect(screen.queryByLabelText("Access Key")).not.toBeInTheDocument();
-
-    await userEvent.click(
-      screen.getByRole("button", { name: "Replace Secret Key" }),
-    );
-    await userEvent.click(screen.getByRole("button", { name: "Save Changes" }));
-    await waitFor(() => expect(save).toHaveBeenCalledOnce());
-    setValue.mockClear();
-    await userEvent.type(
-      screen.getByLabelText("Secret Key"),
-      "late replacement",
-    );
-    expect(setValue).not.toHaveBeenCalled();
-    await act(async () => resolveSave?.());
-    await waitFor(() =>
-      expect(screen.queryByLabelText("Secret Key")).not.toBeInTheDocument(),
-    );
-
-    await userEvent.click(
-      screen.getByRole("button", { name: "Replace Access Key" }),
-    );
-    await userEvent.click(screen.getByRole("button", { name: "Discard" }));
-    expect(discard).toHaveBeenCalledOnce();
-    expect(screen.queryByLabelText("Access Key")).not.toBeInTheDocument();
-  });
-
-  it("keeps a credential replacement open when saving fails", async () => {
-    const save = vi.fn().mockRejectedValue(new Error("save failed"));
-    useCheckAdminSettingsConnectionMock.mockReturnValue({
-      isPending: false,
-      mutateAsync: vi.fn(),
-    });
-    useSettingsFormMock.mockReturnValue({
-      isLoading: false,
-      getValue: (key: string) =>
-        key === "s3.public_url_auth" ? "presigned" : "",
-      setValue: vi.fn(),
-      resetValue: vi.fn(),
-      dirtyCount: 1,
-      save,
-      discard: vi.fn(),
-      isSaving: false,
-      restartRequired: false,
-      sensitiveConfigured: ["s3.public_access_key"],
-      sensitiveStatusReady: true,
-      sensitiveStatusError: false,
-      buildConnectionCheckRequest: vi.fn(),
-      isDirty: () => false,
-    });
-
-    render(<StorageSettings />);
-
-    await userEvent.click(
-      screen.getByRole("button", { name: "Replace Access Key" }),
-    );
-    await userEvent.click(screen.getByRole("button", { name: "Save Changes" }));
-
-    await waitFor(() => expect(save).toHaveBeenCalledOnce());
-    expect(screen.getByLabelText("Access Key")).toHaveAttribute(
-      "type",
-      "password",
-    );
-  });
-
-  it("keeps credential inputs unmounted until protected status is available", () => {
-    let sensitiveStatusReady = false;
-    useCheckAdminSettingsConnectionMock.mockReturnValue({
-      isPending: false,
-      mutateAsync: vi.fn(),
-    });
-    useSettingsFormMock.mockImplementation(() => ({
-      isLoading: false,
-      getValue: (key: string) =>
-        key === "s3.public_url_auth" ? "presigned" : "",
-      setValue: vi.fn(),
-      resetValue: vi.fn(),
-      dirtyCount: 0,
-      save: vi.fn(),
-      discard: vi.fn(),
-      isSaving: false,
-      restartRequired: false,
-      sensitiveConfigured: ["s3.public_access_key"],
-      sensitiveStatusReady,
-      sensitiveStatusError: false,
-      buildConnectionCheckRequest: vi.fn(),
-      isDirty: () => false,
-    }));
-
-    const { rerender } = render(<StorageSettings />);
-
-    expect(
-      screen.getByRole("status", { name: "Loading settings" }),
-    ).toBeInTheDocument();
-    expect(screen.queryByLabelText("Access Key")).not.toBeInTheDocument();
-
-    sensitiveStatusReady = true;
-    rerender(<StorageSettings />);
-
-    expect(
-      screen.getByRole("button", { name: "Replace Access Key" }),
-    ).toBeInTheDocument();
-    expect(screen.queryByLabelText("Access Key")).not.toBeInTheDocument();
-  });
-
-  it("fails closed when protected credential status cannot be loaded", () => {
-    useCheckAdminSettingsConnectionMock.mockReturnValue({
-      isPending: false,
-      mutateAsync: vi.fn(),
-    });
-    useSettingsFormMock.mockReturnValue({
-      isLoading: false,
-      sensitiveConfigured: [],
-      sensitiveStatusReady: false,
-      sensitiveStatusError: true,
-    });
-
-    render(<StorageSettings />);
-
-    expect(screen.getByRole("alert")).toHaveTextContent(
-      "Protected credential status is unavailable",
-    );
-    expect(screen.queryByLabelText("Access Key")).not.toBeInTheDocument();
-  });
-});
diff --git a/web/src/pages/admin-settings/StorageSettings.tsx b/web/src/pages/admin-settings/StorageSettings.tsx
deleted file mode 100644
index d1cde0e72..000000000
--- a/web/src/pages/admin-settings/StorageSettings.tsx
+++ /dev/null
@@ -1,590 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import { AlertTriangle } from "lucide-react";
-import type { ConnectionCheckResponse } from "@/api/types";
-import { ConnectionCheckAction } from "@/components/admin/ConnectionCheckAction";
-import { useCheckAdminSettingsConnection } from "@/hooks/queries/admin/settings";
-import { useSettingsForm } from "@/hooks/useSettingsForm";
-import { SettingField } from "./SettingField";
-import { SaveBar } from "./SaveBar";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Button } from "@/components/ui/button";
-
-const PUBLIC_S3_KEYS = [
-  "s3.public_endpoint",
-  "s3.public_region",
-  "s3.public_path_style",
-  "s3.public_bucket",
-  "s3.public_key_prefix",
-  "s3.public_access_key",
-  "s3.public_secret_key",
-  "s3.public_read_endpoint",
-  "s3.public_url_auth",
-  "s3.public_token_secret",
-  "s3.public_token_param",
-  "s3.public_token_ttl",
-] as const;
-
-// Changing any of these moves where cached artwork objects live. Silo detects
-// that change after restart but requires an explicit manual reconcile so an
-// incomplete bucket migration cannot rewrite the artwork catalog.
-const PUBLIC_S3_IDENTITY_KEYS = [
-  "s3.public_endpoint",
-  "s3.public_bucket",
-  "s3.public_key_prefix",
-] as const;
-
-const PRIVATE_S3_KEYS = [
-  "s3.private_endpoint",
-  "s3.private_region",
-  "s3.private_path_style",
-  "s3.private_bucket",
-  "s3.private_key_prefix",
-  "s3.private_access_key",
-  "s3.private_secret_key",
-] as const;
-
-const KEYS = [
-  ...PUBLIC_S3_KEYS,
-  ...PRIVATE_S3_KEYS,
-  "s3.user_db_endpoint",
-  "s3.user_db_region",
-  "s3.user_db_path_style",
-  "s3.user_db_bucket",
-  "s3.user_db_key_prefix",
-  "s3.user_db_access_key",
-  "s3.user_db_secret_key",
-];
-
-function KeyPrefixField({
-  id,
-  value,
-  onChange,
-}: {
-  id: string;
-  value: string;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <div className="space-y-1 py-2">
-      <Label htmlFor={id} className="text-sm font-medium">
-        Key Prefix
-      </Label>
-      <Input
-        id={id}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className="max-w-md"
-        placeholder="silo/dev"
-      />
-      <p className="text-muted-foreground text-xs">
-        Optional. Stores all Silo objects under this folder inside the bucket.
-        Leave blank to use the bucket root.
-      </p>
-    </div>
-  );
-}
-
-function S3CredentialField({
-  label,
-  value,
-  configured,
-  editing,
-  onChange,
-  onReplace,
-  onKeep,
-  disabled,
-}: {
-  label: string;
-  value: string;
-  configured: boolean;
-  editing: boolean;
-  onChange: (value: string) => void;
-  onReplace: () => void;
-  onKeep: () => void;
-  disabled: boolean;
-}) {
-  if (configured && !editing) {
-    return (
-      <div className="space-y-1 py-2">
-        <Label className="text-sm font-medium">{label}</Label>
-        <div className="flex max-w-md items-center justify-between gap-3 rounded-md border px-3 py-1.5">
-          <span className="text-muted-foreground text-sm">configured</span>
-          <Button
-            type="button"
-            size="xs"
-            variant="outline"
-            aria-label={`Replace ${label}`}
-            onClick={onReplace}
-            disabled={disabled}
-          >
-            Replace
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-1">
-      <SettingField
-        label={label}
-        type="password"
-        value={value}
-        onChange={onChange}
-        hint={configured ? "Enter a replacement value." : undefined}
-        disabled={disabled}
-      />
-      {configured && (
-        <Button
-          type="button"
-          size="xs"
-          variant="ghost"
-          aria-label={`Keep saved ${label}`}
-          onClick={onKeep}
-          disabled={disabled}
-        >
-          Keep saved value
-        </Button>
-      )}
-    </div>
-  );
-}
-
-export default function StorageSettings() {
-  const form = useSettingsForm({ keys: useMemo(() => KEYS, []) });
-  const publicCheckConnection = useCheckAdminSettingsConnection();
-  const privateCheckConnection = useCheckAdminSettingsConnection();
-  const [publicConnectionResult, setPublicConnectionResult] =
-    useState<ConnectionCheckResponse | null>(null);
-  const [privateConnectionResult, setPrivateConnectionResult] =
-    useState<ConnectionCheckResponse | null>(null);
-  const [editingSensitiveKeys, setEditingSensitiveKeys] = useState<Set<string>>(
-    new Set(),
-  );
-  const [credentialSaveInProgress, setCredentialSaveInProgress] =
-    useState(false);
-  const credentialSaveInProgressRef = useRef(false);
-
-  function beginCredentialReplacement(key: string) {
-    if (credentialSaveInProgressRef.current) return;
-    setEditingSensitiveKeys((current) => new Set(current).add(key));
-  }
-
-  function keepSavedCredential(key: string) {
-    if (credentialSaveInProgressRef.current) return;
-    form.resetValue(key);
-    setEditingSensitiveKeys((current) => {
-      const next = new Set(current);
-      next.delete(key);
-      return next;
-    });
-  }
-
-  function setCredentialValue(key: string, value: string) {
-    if (credentialSaveInProgressRef.current) return;
-    form.setValue(key, value);
-  }
-
-  async function handleSave() {
-    if (credentialSaveInProgressRef.current) return;
-    credentialSaveInProgressRef.current = true;
-    setCredentialSaveInProgress(true);
-    try {
-      await form.save();
-      setEditingSensitiveKeys(new Set());
-    } catch {
-      // The mutation reports the error; keep credential editors open for retry.
-    } finally {
-      credentialSaveInProgressRef.current = false;
-      setCredentialSaveInProgress(false);
-    }
-  }
-
-  function handleDiscard() {
-    if (credentialSaveInProgressRef.current) return;
-    form.discard();
-    setEditingSensitiveKeys(new Set());
-  }
-
-  async function handleCheckPublicConnection() {
-    try {
-      setPublicConnectionResult(
-        await publicCheckConnection.mutateAsync({
-          kind: "s3_public",
-          body: form.buildConnectionCheckRequest([...PUBLIC_S3_KEYS]),
-        }),
-      );
-    } catch (error) {
-      setPublicConnectionResult({
-        success: false,
-        message:
-          error instanceof Error ? error.message : "Connection check failed.",
-      });
-    }
-  }
-
-  async function handleCheckPrivateConnection() {
-    try {
-      setPrivateConnectionResult(
-        await privateCheckConnection.mutateAsync({
-          kind: "s3_private",
-          body: form.buildConnectionCheckRequest([...PRIVATE_S3_KEYS]),
-        }),
-      );
-    } catch (error) {
-      setPrivateConnectionResult({
-        success: false,
-        message:
-          error instanceof Error ? error.message : "Connection check failed.",
-      });
-    }
-  }
-
-  if (form.sensitiveStatusError) {
-    return (
-      <div
-        className="flex items-start gap-3 rounded-xl border border-red-500/20 bg-red-500/5 p-4"
-        role="alert"
-      >
-        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-500" />
-        <div>
-          <p className="text-sm font-medium">
-            Protected credential status is unavailable
-          </p>
-          <p className="text-muted-foreground mt-1 text-xs">
-            Reload this page before editing storage settings.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  if (form.isLoading || !form.sensitiveStatusReady)
-    return (
-      <div className="space-y-6" role="status" aria-label="Loading settings">
-        <Skeleton className="h-8 w-48" />
-        <div className="space-y-4">
-          <Skeleton className="h-10 w-full" />
-          <Skeleton className="h-10 w-full" />
-          <Skeleton className="h-10 w-full" />
-          <Skeleton className="h-10 w-full" />
-          <Skeleton className="h-10 w-full" />
-          <Skeleton className="h-10 w-full" />
-        </div>
-        <span className="sr-only">Loading settings</span>
-      </div>
-    );
-
-  const publicURLAuth = form.getValue("s3.public_url_auth") || "presigned";
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Storage</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Configure separate S3-compatible storage for client-facing assets and
-          private internal Silo artifacts.
-        </p>
-      </div>
-
-      <div className="flex-1 space-y-6">
-        <Tabs defaultValue="public">
-          <TabsList className="surface-panel-subtle h-auto gap-1 rounded-[1.1rem] border-0 bg-transparent p-1">
-            <TabsTrigger value="public">Public Assets</TabsTrigger>
-            <TabsTrigger value="private">Private Internal</TabsTrigger>
-            <TabsTrigger
-              value="userdb"
-              disabled
-              title="Reserved for future Litestream replication"
-            >
-              User DB
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="public" className="space-y-1 pt-4">
-            <p className="text-muted-foreground mb-2 text-sm">
-              Stores client-facing assets such as artwork, chapter thumbnails,
-              and subtitle files.
-            </p>
-            <p className="text-muted-foreground mb-4 text-xs leading-relaxed">
-              This bucket does not need to be public. Most installs should keep
-              it private and use presigned URLs. Only use Public or Cloudflare
-              Token modes if you want direct CDN/object access.
-            </p>
-            <SettingField
-              label="Endpoint"
-              value={form.getValue("s3.public_endpoint")}
-              onChange={(v) => form.setValue("s3.public_endpoint", v)}
-            />
-            <SettingField
-              label="Region"
-              value={form.getValue("s3.public_region")}
-              onChange={(v) => form.setValue("s3.public_region", v)}
-            />
-            <SettingField
-              label="Path Style"
-              type="toggle"
-              value={form.getValue("s3.public_path_style")}
-              onChange={(v) => form.setValue("s3.public_path_style", v)}
-            />
-            <SettingField
-              label="Bucket"
-              value={form.getValue("s3.public_bucket")}
-              onChange={(v) => form.setValue("s3.public_bucket", v)}
-            />
-            <KeyPrefixField
-              id="s3-public-key-prefix"
-              value={form.getValue("s3.public_key_prefix")}
-              onChange={(v) => form.setValue("s3.public_key_prefix", v)}
-            />
-            {PUBLIC_S3_IDENTITY_KEYS.some((key) => form.isDirty(key)) && (
-              <div className="my-3 flex items-start gap-3 rounded-xl border border-amber-500/20 bg-amber-500/5 p-4">
-                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
-                <div className="text-[13px] leading-relaxed">
-                  <p className="font-medium text-amber-500">
-                    Storage location change
-                  </p>
-                  <p className="text-muted-foreground mt-1">
-                    Artwork is cached in this bucket. Silo will not change
-                    artwork cache records automatically after restart. Copy or
-                    migrate the existing bucket objects first, then manually run
-                    Reconcile Artwork Cache only if you intend every missing
-                    record to be reset or cleared. Re-downloading those reset
-                    provider images is a separate, manual Backfill Metadata
-                    Images action; normal scheduled caching only processes
-                    artwork queued by new or changed metadata. Uploaded images
-                    (custom posters, collection artwork, branding) cannot be
-                    re-downloaded.
-                  </p>
-                </div>
-              </div>
-            )}
-            <S3CredentialField
-              label="Access Key"
-              value={form.getValue("s3.public_access_key")}
-              onChange={(v) => setCredentialValue("s3.public_access_key", v)}
-              configured={form.sensitiveConfigured.includes(
-                "s3.public_access_key",
-              )}
-              editing={editingSensitiveKeys.has("s3.public_access_key")}
-              onReplace={() =>
-                beginCredentialReplacement("s3.public_access_key")
-              }
-              onKeep={() => keepSavedCredential("s3.public_access_key")}
-              disabled={form.isSaving || credentialSaveInProgress}
-            />
-            <S3CredentialField
-              label="Secret Key"
-              value={form.getValue("s3.public_secret_key")}
-              onChange={(v) => setCredentialValue("s3.public_secret_key", v)}
-              configured={form.sensitiveConfigured.includes(
-                "s3.public_secret_key",
-              )}
-              editing={editingSensitiveKeys.has("s3.public_secret_key")}
-              onReplace={() =>
-                beginCredentialReplacement("s3.public_secret_key")
-              }
-              onKeep={() => keepSavedCredential("s3.public_secret_key")}
-              disabled={form.isSaving || credentialSaveInProgress}
-            />
-
-            <ConnectionCheckAction
-              onClick={handleCheckPublicConnection}
-              result={publicConnectionResult}
-              isPending={publicCheckConnection.isPending}
-              disabled={form.isSaving}
-            />
-
-            <div className="border-border mt-6 border-t pt-6">
-              <h3 className="mb-1 text-sm font-medium">
-                Asset URL Authentication
-              </h3>
-              <p className="text-muted-foreground mb-4 text-xs leading-relaxed">
-                Controls how client-facing asset URLs are generated. Presigned
-                URLs are recommended and work with private buckets.
-              </p>
-              <SettingField
-                label="URL Auth Method"
-                type="select"
-                value={publicURLAuth}
-                onChange={(v) => form.setValue("s3.public_url_auth", v)}
-                options={[
-                  {
-                    value: "presigned",
-                    label: "S3 Presigned URLs (Recommended)",
-                  },
-                  { value: "public", label: "Public (no auth)" },
-                  { value: "cloudflare_token", label: "Cloudflare Token Auth" },
-                ]}
-              />
-              {publicURLAuth !== "presigned" && (
-                <SettingField
-                  label="Read Endpoint"
-                  value={form.getValue("s3.public_read_endpoint")}
-                  onChange={(v) => form.setValue("s3.public_read_endpoint", v)}
-                  hint="https://cdn.example.com"
-                />
-              )}
-              {publicURLAuth === "cloudflare_token" && (
-                <>
-                  <SettingField
-                    label="Token Secret"
-                    type="password"
-                    value={form.getValue("s3.public_token_secret")}
-                    onChange={(v) => form.setValue("s3.public_token_secret", v)}
-                    sensitiveConfigured={form.sensitiveConfigured.includes(
-                      "s3.public_token_secret",
-                    )}
-                  />
-                  <SettingField
-                    label="Token Param"
-                    value={form.getValue("s3.public_token_param") || "verify"}
-                    onChange={(v) => form.setValue("s3.public_token_param", v)}
-                    hint="verify"
-                  />
-                  <SettingField
-                    label="Token TTL (seconds)"
-                    type="number"
-                    value={form.getValue("s3.public_token_ttl") || "10800"}
-                    onChange={(v) => form.setValue("s3.public_token_ttl", v)}
-                  />
-                </>
-              )}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="private" className="space-y-1 pt-4">
-            <p className="text-muted-foreground mb-4 text-sm">
-              Stores non-public Silo objects such as imports, exports, and
-              internal artifacts.
-            </p>
-            <SettingField
-              label="Endpoint"
-              value={form.getValue("s3.private_endpoint")}
-              onChange={(v) => form.setValue("s3.private_endpoint", v)}
-            />
-            <SettingField
-              label="Region"
-              value={form.getValue("s3.private_region")}
-              onChange={(v) => form.setValue("s3.private_region", v)}
-            />
-            <SettingField
-              label="Path Style"
-              type="toggle"
-              value={form.getValue("s3.private_path_style")}
-              onChange={(v) => form.setValue("s3.private_path_style", v)}
-            />
-            <SettingField
-              label="Bucket"
-              value={form.getValue("s3.private_bucket")}
-              onChange={(v) => form.setValue("s3.private_bucket", v)}
-            />
-            <KeyPrefixField
-              id="s3-private-key-prefix"
-              value={form.getValue("s3.private_key_prefix")}
-              onChange={(v) => form.setValue("s3.private_key_prefix", v)}
-            />
-            <S3CredentialField
-              label="Access Key"
-              value={form.getValue("s3.private_access_key")}
-              onChange={(v) => setCredentialValue("s3.private_access_key", v)}
-              configured={form.sensitiveConfigured.includes(
-                "s3.private_access_key",
-              )}
-              editing={editingSensitiveKeys.has("s3.private_access_key")}
-              onReplace={() =>
-                beginCredentialReplacement("s3.private_access_key")
-              }
-              onKeep={() => keepSavedCredential("s3.private_access_key")}
-              disabled={form.isSaving || credentialSaveInProgress}
-            />
-            <S3CredentialField
-              label="Secret Key"
-              value={form.getValue("s3.private_secret_key")}
-              onChange={(v) => setCredentialValue("s3.private_secret_key", v)}
-              configured={form.sensitiveConfigured.includes(
-                "s3.private_secret_key",
-              )}
-              editing={editingSensitiveKeys.has("s3.private_secret_key")}
-              onReplace={() =>
-                beginCredentialReplacement("s3.private_secret_key")
-              }
-              onKeep={() => keepSavedCredential("s3.private_secret_key")}
-              disabled={form.isSaving || credentialSaveInProgress}
-            />
-
-            <ConnectionCheckAction
-              onClick={handleCheckPrivateConnection}
-              result={privateConnectionResult}
-              isPending={privateCheckConnection.isPending}
-              disabled={form.isSaving}
-            />
-          </TabsContent>
-
-          <TabsContent value="userdb" className="space-y-1 pt-4 opacity-50">
-            <p className="text-muted-foreground mb-4 text-sm">
-              Reserved for Litestream user database replication. Not currently
-              in use.
-            </p>
-            <SettingField
-              label="Endpoint"
-              value={form.getValue("s3.user_db_endpoint")}
-              onChange={(v) => form.setValue("s3.user_db_endpoint", v)}
-              disabled
-            />
-            <SettingField
-              label="Region"
-              value={form.getValue("s3.user_db_region")}
-              onChange={(v) => form.setValue("s3.user_db_region", v)}
-              disabled
-            />
-            <SettingField
-              label="Path Style"
-              type="toggle"
-              value={form.getValue("s3.user_db_path_style")}
-              onChange={(v) => form.setValue("s3.user_db_path_style", v)}
-              disabled
-            />
-            <SettingField
-              label="Bucket"
-              value={form.getValue("s3.user_db_bucket")}
-              onChange={(v) => form.setValue("s3.user_db_bucket", v)}
-              disabled
-            />
-            <SettingField
-              label="Access Key"
-              type="password"
-              value={form.getValue("s3.user_db_access_key")}
-              onChange={(v) => form.setValue("s3.user_db_access_key", v)}
-              sensitiveConfigured={form.sensitiveConfigured.includes(
-                "s3.user_db_access_key",
-              )}
-              disabled
-            />
-            <SettingField
-              label="Secret Key"
-              type="password"
-              value={form.getValue("s3.user_db_secret_key")}
-              onChange={(v) => form.setValue("s3.user_db_secret_key", v)}
-              sensitiveConfigured={form.sensitiveConfigured.includes(
-                "s3.user_db_secret_key",
-              )}
-              disabled
-            />
-          </TabsContent>
-        </Tabs>
-      </div>
-
-      <SaveBar
-        dirtyCount={form.dirtyCount}
-        onSave={handleSave}
-        onDiscard={handleDiscard}
-        isSaving={form.isSaving || credentialSaveInProgress}
-        restartRequired={form.restartRequired}
-      />
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/SubtitlesSettings.tsx b/web/src/pages/admin-settings/SubtitlesSettings.tsx
deleted file mode 100644
index 5ed11a7f5..000000000
--- a/web/src/pages/admin-settings/SubtitlesSettings.tsx
+++ /dev/null
@@ -1,419 +0,0 @@
-import { useState, useEffect } from "react";
-import {
-  useSubtitleProviders,
-  useUpdateSubtitleProvider,
-  useTestSubtitleProvider,
-} from "@/hooks/queries/admin/subtitles";
-import type { SubtitleProviderConfig } from "@/api/types";
-
-import { Button } from "@/components/ui/button";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Eye,
-  EyeOff,
-  Loader2,
-  RotateCcw,
-  Save,
-  ScanSearch,
-} from "lucide-react";
-import { CredentialStatus } from "./CredentialStatus";
-
-// ============================================================================
-// Search providers
-// ============================================================================
-
-const SUBTITLE_PROVIDER_NAMES: Record<string, string> = {
-  opensubtitles: "OpenSubtitles",
-  subdl: "SubDL",
-  subsource: "SubSource",
-};
-
-interface SubtitleProviderFormState {
-  enabled: boolean;
-  api_key: string;
-  username: string;
-  password: string;
-  showApiKey: boolean;
-}
-
-interface SubtitleTestResult {
-  success: boolean;
-  error?: string;
-}
-
-function defaultSubtitleFormState(
-  config: SubtitleProviderConfig,
-): SubtitleProviderFormState {
-  return {
-    enabled: config.enabled,
-    api_key: "",
-    username: "",
-    password: "",
-    showApiKey: false,
-  };
-}
-
-function subtitleProviderDraft(
-  form: SubtitleProviderFormState,
-  withAccount: boolean,
-) {
-  const user = form.username;
-  const pass = form.password;
-  const key = form.api_key;
-  return {
-    enabled: form.enabled,
-    ...(withAccount ? { username: user, password: pass } : { api_key: key }),
-  };
-}
-
-function SubtitleProviderCard({ config }: { config: SubtitleProviderConfig }) {
-  const [form, setForm] = useState<SubtitleProviderFormState>(() =>
-    defaultSubtitleFormState(config),
-  );
-  const [testResult, setTestResult] = useState<SubtitleTestResult | null>(null);
-  const [confirmClear, setConfirmClear] = useState(false);
-
-  const updateProvider = useUpdateSubtitleProvider();
-  const testProvider = useTestSubtitleProvider();
-
-  useEffect(() => {
-    setForm((prev) => ({
-      ...prev,
-      enabled: config.enabled,
-    }));
-  }, [config.enabled]);
-
-  const providerName = config.provider_name;
-  const displayName = SUBTITLE_PROVIDER_NAMES[providerName] ?? providerName;
-  const isOpenSubtitles = providerName === "opensubtitles";
-  const credentialsConfigured =
-    (isOpenSubtitles && config.has_credentials) ||
-    (!isOpenSubtitles && config.has_api_key);
-
-  function handleSave() {
-    updateProvider.mutate({
-      provider: providerName,
-      config: {
-        enabled: form.enabled,
-        ...(isOpenSubtitles
-          ? { username: form.username, password: form.password }
-          : { api_key: form.api_key }),
-      },
-    });
-  }
-
-  function handleTest() {
-    setTestResult(null);
-    testProvider.mutate(
-      {
-        provider: providerName,
-        config: subtitleProviderDraft(form, isOpenSubtitles),
-      },
-      {
-        onSuccess: (result) => {
-          setTestResult({ success: result.success, error: result.error });
-        },
-        onError: (err) => {
-          setTestResult({
-            success: false,
-            error: err instanceof Error ? err.message : "Test failed",
-          });
-        },
-      },
-    );
-  }
-
-  return (
-    <fieldset
-      disabled={updateProvider.isPending || testProvider.isPending}
-      className="border-border bg-surface space-y-4 rounded-lg border px-5 py-4"
-    >
-      {/* Header row */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <span className="text-sm font-semibold">{displayName}</span>
-          <CredentialStatus
-            configured={
-              isOpenSubtitles ? config.has_credentials : config.has_api_key
-            }
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          <Label
-            htmlFor={`${providerName}-enabled`}
-            className="text-sm font-medium"
-          >
-            {form.enabled ? "Enabled" : "Disabled"}
-          </Label>
-          <Switch
-            id={`${providerName}-enabled`}
-            checked={form.enabled}
-            onCheckedChange={(checked) =>
-              setForm((prev) => ({ ...prev, enabled: checked }))
-            }
-          />
-        </div>
-      </div>
-
-      {/* Credentials: username/password for OpenSubtitles, API key for others */}
-      {isOpenSubtitles ? (
-        <>
-          <div className="space-y-1">
-            <Label
-              htmlFor={`${providerName}-username`}
-              className="text-sm font-medium"
-            >
-              Username
-            </Label>
-            <Input
-              id={`${providerName}-username`}
-              type="text"
-              placeholder={
-                config.has_credentials
-                  ? "Leave blank to keep current"
-                  : "OpenSubtitles username"
-              }
-              value={form.username}
-              onChange={(e) =>
-                setForm((prev) => ({ ...prev, username: e.target.value }))
-              }
-            />
-          </div>
-          <div className="space-y-1">
-            <Label
-              htmlFor={`${providerName}-password`}
-              className="text-sm font-medium"
-            >
-              Password
-            </Label>
-            <Input
-              id={`${providerName}-password`}
-              type="password"
-              placeholder={
-                config.has_credentials
-                  ? "Leave blank to keep current"
-                  : "OpenSubtitles password"
-              }
-              value={form.password}
-              onChange={(e) =>
-                setForm((prev) => ({ ...prev, password: e.target.value }))
-              }
-            />
-          </div>
-        </>
-      ) : (
-        <div className="space-y-1">
-          <Label
-            htmlFor={`${providerName}-api-key`}
-            className="text-sm font-medium"
-          >
-            API Key
-          </Label>
-          <div className="flex items-center gap-2">
-            <Input
-              id={`${providerName}-api-key`}
-              type={form.showApiKey ? "text" : "password"}
-              placeholder={
-                config.has_api_key
-                  ? "Leave blank to keep current"
-                  : "Enter API key"
-              }
-              value={form.api_key}
-              onChange={(e) =>
-                setForm((prev) => ({ ...prev, api_key: e.target.value }))
-              }
-              className="flex-1"
-            />
-            <Button
-              variant="ghost"
-              size="icon"
-              type="button"
-              onClick={() =>
-                setForm((prev) => ({ ...prev, showApiKey: !prev.showApiKey }))
-              }
-            >
-              {form.showApiKey ? (
-                <EyeOff className="h-4 w-4" />
-              ) : (
-                <Eye className="h-4 w-4" />
-              )}
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {/* Actions */}
-      <div className="flex items-center gap-3 pt-1">
-        <Button
-          variant="outline"
-          onClick={handleTest}
-          disabled={testProvider.isPending}
-        >
-          {testProvider.isPending ? (
-            <Loader2 className="animate-spin" />
-          ) : (
-            <ScanSearch />
-          )}
-          {testProvider.isPending ? "Testing..." : "Test Connection"}
-        </Button>
-        <Button onClick={handleSave} disabled={updateProvider.isPending}>
-          {updateProvider.isPending ? (
-            <Loader2 className="animate-spin" />
-          ) : (
-            <Save />
-          )}
-          {updateProvider.isPending ? "Saving..." : "Save"}
-        </Button>
-        {credentialsConfigured && (
-          <Button
-            variant="ghost"
-            onClick={() => setConfirmClear(true)}
-            disabled={updateProvider.isPending}
-          >
-            <RotateCcw />
-            Clear credentials
-          </Button>
-        )}
-        {testResult !== null && (
-          <span
-            className={`text-sm ${testResult.success ? "text-green-500" : "text-red-500"}`}
-          >
-            {testResult.success
-              ? "Connection successful"
-              : (testResult.error ?? "Connection failed")}
-          </span>
-        )}
-      </div>
-      <p className="text-muted-foreground text-xs">
-        Test Connection uses the values currently entered above. Saving applies
-        provider changes live to new searches.
-      </p>
-      <AlertDialog open={confirmClear} onOpenChange={setConfirmClear}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              Clear {displayName} credentials?
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              The provider will be disabled and removed from live subtitle
-              searches immediately.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              disabled={updateProvider.isPending}
-              onClick={() =>
-                updateProvider.mutate(
-                  {
-                    provider: providerName,
-                    config: { enabled: false, clear_credentials: true },
-                  },
-                  {
-                    onSuccess: () => {
-                      setForm(
-                        defaultSubtitleFormState({ ...config, enabled: false }),
-                      );
-                      setTestResult(null);
-                      setConfirmClear(false);
-                    },
-                  },
-                )
-              }
-            >
-              {updateProvider.isPending ? "Clearing..." : "Clear and disable"}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </fieldset>
-  );
-}
-
-const SUBTITLE_PROVIDER_ORDER = ["opensubtitles", "subdl", "subsource"];
-
-function SearchProvidersContent() {
-  const { data, isLoading } = useSubtitleProviders();
-
-  if (isLoading)
-    return (
-      <div className="space-y-6" role="status" aria-label="Loading settings">
-        <Skeleton className="h-8 w-48" />
-        <div className="space-y-4">
-          <Skeleton className="h-32 w-full" />
-          <Skeleton className="h-32 w-full" />
-          <Skeleton className="h-32 w-full" />
-        </div>
-        <span className="sr-only">Loading settings</span>
-      </div>
-    );
-
-  const providers = data?.providers ?? [];
-
-  // Sort by known order, putting unknown providers at end
-  const sorted = [...providers].sort((a, b) => {
-    const ai = SUBTITLE_PROVIDER_ORDER.indexOf(a.provider_name);
-    const bi = SUBTITLE_PROVIDER_ORDER.indexOf(b.provider_name);
-    if (ai === -1 && bi === -1) return 0;
-    if (ai === -1) return 1;
-    if (bi === -1) return -1;
-    return ai - bi;
-  });
-
-  return (
-    <div className="space-y-4">
-      <p className="text-muted-foreground max-w-3xl text-sm">
-        Configure external subtitle search providers. Credentials are stored
-        securely and never returned by the API.
-      </p>
-
-      <div className="max-w-2xl space-y-4">
-        {sorted.map((provider) => (
-          <SubtitleProviderCard
-            key={provider.provider_name}
-            config={provider}
-          />
-        ))}
-        {sorted.length === 0 && (
-          <div className="border-border bg-surface rounded-lg border px-5 py-4">
-            <p className="text-muted-foreground text-sm">
-              No subtitle providers configured.
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default function SubtitlesSettings() {
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">Subtitles</h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          Search providers for downloading subtitles. AI translation and
-          transcription live under AI Services.
-        </p>
-      </div>
-
-      <div className="space-y-8">
-        <SearchProvidersContent />
-      </div>
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/ThemeSettings.test.tsx b/web/src/pages/admin-settings/ThemeSettings.test.tsx
deleted file mode 100644
index d269b2a11..000000000
--- a/web/src/pages/admin-settings/ThemeSettings.test.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-// @vitest-environment jsdom
-
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const mocks = vi.hoisted(() => ({
-  updateMutate: vi.fn(),
-}));
-
-vi.mock("@/hooks/queries/admin/settings", () => ({
-  useAdminServerSettings: () => ({
-    data: {
-      "ui.admin_theme_vars": "{}",
-      "ui.admin_custom_css": "",
-      "theme.catalog_url": "https://themes.example.invalid/catalog.json",
-    },
-  }),
-  useUpdateServerSetting: () => ({
-    mutate: (...args: unknown[]) => mocks.updateMutate(...args),
-  }),
-}));
-
-vi.mock("@/components/theme/TokenEditor", () => ({
-  TokenEditor: ({
-    onSetVar,
-  }: {
-    onSetVar: (token: "primary", value: string) => void;
-  }) => (
-    <>
-      <button type="button" onClick={() => onSetVar("primary", "#112233")}>
-        Set primary
-      </button>
-      <button type="button" onClick={() => onSetVar("primary", "#445566")}>
-        Set latest primary
-      </button>
-    </>
-  ),
-}));
-
-vi.mock("@/components/theme/RawCssEditor", () => ({
-  RawCssEditor: ({
-    value,
-    onChange,
-  }: {
-    value: string;
-    onChange: (value: string) => void;
-  }) => (
-    <textarea
-      aria-label="Custom CSS editor"
-      value={value}
-      onChange={(event) => onChange(event.target.value)}
-    />
-  ),
-}));
-
-vi.mock("@/components/theme/ThemePreviewCard", () => ({
-  ThemePreviewCard: () => null,
-}));
-
-import ThemeSettings from "./ThemeSettings";
-
-describe("ThemeSettings autosave", () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-    mocks.updateMutate.mockReset();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it("flushes the latest pending variables and CSS when navigating away", () => {
-    const { unmount } = render(<ThemeSettings />);
-
-    fireEvent.click(screen.getByRole("button", { name: "Set primary" }));
-    fireEvent.click(screen.getByRole("button", { name: "Set latest primary" }));
-    fireEvent.change(
-      screen.getByRole("textbox", { name: "Custom CSS editor" }),
-      {
-        target: {
-          value:
-            '@import "https://example.invalid/theme.css"; .card { color: red; }',
-        },
-      },
-    );
-
-    expect(mocks.updateMutate).not.toHaveBeenCalled();
-
-    unmount();
-
-    expect(mocks.updateMutate).toHaveBeenCalledTimes(2);
-    expect(mocks.updateMutate).toHaveBeenCalledWith({
-      key: "ui.admin_theme_vars",
-      value: JSON.stringify({ primary: "#445566" }),
-    });
-    expect(mocks.updateMutate).toHaveBeenCalledWith({
-      key: "ui.admin_custom_css",
-      value: "/* [blocked @import] */ .card { color: red; }",
-    });
-  });
-
-  it("does not save completed debounces again during unmount", () => {
-    const { unmount } = render(<ThemeSettings />);
-
-    fireEvent.click(screen.getByRole("button", { name: "Set primary" }));
-    fireEvent.change(
-      screen.getByRole("textbox", { name: "Custom CSS editor" }),
-      {
-        target: { value: ".card { color: red; }" },
-      },
-    );
-
-    act(() => {
-      vi.advanceTimersByTime(1_000);
-    });
-    expect(mocks.updateMutate).toHaveBeenCalledTimes(2);
-
-    unmount();
-
-    expect(mocks.updateMutate).toHaveBeenCalledTimes(2);
-  });
-});
diff --git a/web/src/pages/admin-settings/ThemeSettings.tsx b/web/src/pages/admin-settings/ThemeSettings.tsx
deleted file mode 100644
index 5958b5b88..000000000
--- a/web/src/pages/admin-settings/ThemeSettings.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { AlertTriangle, RotateCcw } from "lucide-react";
-import {
-  useAdminServerSettings,
-  useUpdateServerSetting,
-} from "@/hooks/queries/admin/settings";
-import { TokenEditor } from "@/components/theme/TokenEditor";
-import { RawCssEditor } from "@/components/theme/RawCssEditor";
-import { ThemePreviewCard } from "@/components/theme/ThemePreviewCard";
-import { parseVarsJson } from "@/lib/themeExport";
-import { sanitizeCss } from "@/lib/cssSanitizer";
-import type { ThemeToken } from "@/lib/themeTokens";
-import type { ThemeVarOverrides } from "@/hooks/useCustomTheme";
-
-export default function ThemeSettings() {
-  const { data: settings } = useAdminServerSettings();
-  const updateSetting = useUpdateServerSetting();
-
-  const [vars, setVars] = useState<ThemeVarOverrides>({});
-  const [rawCss, setRawCss] = useState("");
-  const [catalogUrl, setCatalogUrl] = useState("");
-  const mutateSettingRef = useRef(updateSetting.mutate);
-  useEffect(() => {
-    mutateSettingRef.current = updateSetting.mutate;
-  }, [updateSetting.mutate]);
-
-  // Only seed local state once from the first server response
-  const seededRef = useRef(false);
-  useEffect(() => {
-    if (settings && !seededRef.current) {
-      seededRef.current = true;
-      setVars(parseVarsJson(settings["ui.admin_theme_vars"]));
-      setRawCss(settings["ui.admin_custom_css"] ?? "");
-      setCatalogUrl(
-        settings["theme.catalog_url"] ??
-          "https://raw.githubusercontent.com/prairie-server/prairie-themes/main/catalog.json",
-      );
-    }
-  }, [settings]);
-
-  // Debounce timers
-  const varsTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
-  const cssTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
-  const pendingVarsRef = useRef<ThemeVarOverrides | null>(null);
-  const pendingCssRef = useRef<string | null>(null);
-
-  const persistVars = useCallback((newVars: ThemeVarOverrides) => {
-    mutateSettingRef.current({
-      key: "ui.admin_theme_vars",
-      value: JSON.stringify(newVars),
-    });
-  }, []);
-
-  const flushPendingVars = useCallback(() => {
-    clearTimeout(varsTimerRef.current);
-    varsTimerRef.current = undefined;
-    const pending = pendingVarsRef.current;
-    if (pending === null) return;
-    pendingVarsRef.current = null;
-    persistVars(pending);
-  }, [persistVars]);
-
-  const flushPendingCss = useCallback(() => {
-    clearTimeout(cssTimerRef.current);
-    cssTimerRef.current = undefined;
-    const pending = pendingCssRef.current;
-    if (pending === null) return;
-    pendingCssRef.current = null;
-    mutateSettingRef.current({
-      key: "ui.admin_custom_css",
-      value: sanitizeCss(pending),
-    });
-  }, []);
-
-  useEffect(
-    () => () => {
-      flushPendingVars();
-      flushPendingCss();
-    },
-    [flushPendingCss, flushPendingVars],
-  );
-
-  const handleSetVar = useCallback(
-    (token: ThemeToken, value: string) => {
-      setVars((prev) => {
-        const next = { ...prev, [token]: value };
-        clearTimeout(varsTimerRef.current);
-        pendingVarsRef.current = next;
-        varsTimerRef.current = setTimeout(flushPendingVars, 500);
-        return next;
-      });
-    },
-    [flushPendingVars],
-  );
-
-  const handleResetVar = useCallback(
-    (token: ThemeToken) => {
-      clearTimeout(varsTimerRef.current);
-      varsTimerRef.current = undefined;
-      pendingVarsRef.current = null;
-      setVars((prev) => {
-        const next = { ...prev };
-        delete next[token];
-        persistVars(next);
-        return next;
-      });
-    },
-    [persistVars],
-  );
-
-  const handleCssChange = useCallback(
-    (css: string) => {
-      setRawCss(css);
-      clearTimeout(cssTimerRef.current);
-      pendingCssRef.current = css;
-      cssTimerRef.current = setTimeout(flushPendingCss, 1000);
-    },
-    [flushPendingCss],
-  );
-
-  const handleCatalogUrlBlur = useCallback(() => {
-    mutateSettingRef.current({ key: "theme.catalog_url", value: catalogUrl });
-  }, [catalogUrl]);
-
-  const handleResetAll = useCallback(() => {
-    clearTimeout(varsTimerRef.current);
-    clearTimeout(cssTimerRef.current);
-    varsTimerRef.current = undefined;
-    cssTimerRef.current = undefined;
-    pendingVarsRef.current = null;
-    pendingCssRef.current = null;
-    setVars({});
-    setRawCss("");
-    persistVars({});
-    mutateSettingRef.current({ key: "ui.admin_custom_css", value: "" });
-  }, [persistVars]);
-
-  const hasOverrides = Object.keys(vars).length > 0 || rawCss.length > 0;
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-start gap-3 rounded-xl border border-amber-500/20 bg-amber-500/5 p-4">
-        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
-        <div className="text-[13px] leading-relaxed">
-          <p className="font-medium text-amber-500">
-            Server-wide theme customization
-          </p>
-          <p className="text-muted-foreground mt-1">
-            These overrides apply to all users as a base layer. Individual users
-            can further customize on top of these settings.
-          </p>
-        </div>
-      </div>
-
-      {/* Preview */}
-      <div>
-        <h4 className="mb-2 text-sm font-medium">Preview</h4>
-        <ThemePreviewCard vars={vars} />
-        {hasOverrides && (
-          <div className="mt-2 flex justify-end">
-            <button
-              type="button"
-              onClick={handleResetAll}
-              className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1.5 text-xs font-medium transition-colors"
-            >
-              <RotateCcw className="h-3 w-3" />
-              Reset all
-            </button>
-          </div>
-        )}
-      </div>
-
-      {/* Token editor */}
-      <div>
-        <h4 className="mb-2 text-sm font-medium">Token Overrides</h4>
-        <TokenEditor
-          vars={vars}
-          onSetVar={handleSetVar}
-          onResetVar={handleResetVar}
-        />
-      </div>
-
-      {/* Raw CSS */}
-      <div>
-        <h4 className="mb-2 text-sm font-medium">Custom CSS</h4>
-        <RawCssEditor value={rawCss} onChange={handleCssChange} />
-      </div>
-
-      {/* Catalog URL */}
-      <div>
-        <h4 className="mb-2 text-sm font-medium">Theme Catalog URL</h4>
-        <p className="text-muted-foreground mb-2 text-[13px]">
-          HTTPS URL of the GitHub-hosted community theme catalog JSON index.
-          Users browse this in their settings.
-        </p>
-        <input
-          type="url"
-          value={catalogUrl}
-          onChange={(e) => setCatalogUrl(e.target.value)}
-          onBlur={handleCatalogUrlBlur}
-          className="border-border bg-background text-foreground focus:ring-ring w-full rounded-xl border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-          placeholder="https://raw.githubusercontent.com/prairie-server/prairie-themes/main/catalog.json"
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/WatchProvidersSettings.tsx b/web/src/pages/admin-settings/WatchProvidersSettings.tsx
deleted file mode 100644
index 1294b2908..000000000
--- a/web/src/pages/admin-settings/WatchProvidersSettings.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import { useState } from "react";
-import {
-  AlertTriangle,
-  Check,
-  Loader2,
-  RotateCcw,
-  Save,
-  X,
-} from "lucide-react";
-import { toast } from "sonner";
-import {
-  useAdminSensitiveStatus,
-  useUpdateServerSettings as useUpdateServerSetting,
-} from "@/hooks/queries/admin/settings";
-
-import { Button } from "@/components/ui/button";
-import { CredentialStatus } from "./CredentialStatus";
-import { RestartServerButton } from "./RestartServerButton";
-import { SettingField } from "./SettingField";
-
-interface WatchProviderCredentials {
-  key: string;
-  displayName: string;
-}
-
-const WATCH_PROVIDER_CREDENTIALS: WatchProviderCredentials[] = [
-  { key: "trakt", displayName: "Trakt" },
-  { key: "simkl", displayName: "Simkl" },
-];
-
-function WatchProviderCredentialCard({
-  provider,
-}: {
-  provider: WatchProviderCredentials;
-}) {
-  const { data: sensitive } = useAdminSensitiveStatus();
-  const updateSetting = useUpdateServerSetting();
-  const [clientId, setClientId] = useState("");
-  const [clientSecret, setClientSecret] = useState("");
-  const [confirmClear, setConfirmClear] = useState(false);
-  const [restartRequired, setRestartRequired] = useState(false);
-  const configured = new Set(sensitive?.configured ?? []);
-  const clientIdKey = `watchsync.${provider.key}.client_id`;
-  const clientSecretKey = `watchsync.${provider.key}.client_secret`;
-
-  async function save() {
-    const updates: Record<string, string> = {};
-    if (clientId.trim() !== "") {
-      updates[clientIdKey] = clientId;
-    }
-    if (clientSecret.trim() !== "") {
-      updates[clientSecretKey] = clientSecret;
-    }
-    if (Object.keys(updates).length === 0) {
-      toast.info(`No ${provider.displayName} credentials changed.`);
-      return;
-    }
-    try {
-      const result = await updateSetting.mutateAsync(updates);
-      setClientId("");
-      setClientSecret("");
-      setRestartRequired((current) => current || result.restart_required);
-      toast.success(`${provider.displayName} credentials saved`);
-    } catch {
-      // The mutation reports the API error.
-    }
-  }
-
-  async function clearCredentials() {
-    try {
-      const result = await updateSetting.mutateAsync({
-        [clientIdKey]: "",
-        [clientSecretKey]: "",
-      });
-      setClientId("");
-      setClientSecret("");
-      setConfirmClear(false);
-      setRestartRequired((current) => current || result.restart_required);
-      toast.success(`${provider.displayName} credentials cleared`);
-    } catch {
-      // The mutation reports the API error.
-    }
-  }
-
-  return (
-    <fieldset
-      disabled={updateSetting.isPending}
-      className="border-border bg-surface max-w-2xl rounded-lg border px-5 py-4"
-    >
-      <div className="mb-3 flex items-center justify-between gap-3">
-        <div>
-          <h3 className="text-sm font-semibold">{provider.displayName}</h3>
-          <p className="text-muted-foreground text-xs">
-            OAuth credentials for profile connections.
-          </p>
-        </div>
-        <CredentialStatus
-          configured={
-            configured.has(clientIdKey) && configured.has(clientSecretKey)
-          }
-        />
-      </div>
-      <SettingField
-        label="Client ID"
-        type="password"
-        value={clientId}
-        onChange={setClientId}
-        sensitiveConfigured={configured.has(clientIdKey)}
-        hint="Leave blank to keep the current value."
-      />
-      <SettingField
-        label="Client Secret"
-        type="password"
-        value={clientSecret}
-        onChange={setClientSecret}
-        sensitiveConfigured={configured.has(clientSecretKey)}
-        hint="Leave blank to keep the current value."
-      />
-      <div className="flex flex-wrap items-center gap-2">
-        <Button
-          type="button"
-          onClick={() => void save()}
-          disabled={updateSetting.isPending}
-        >
-          {updateSetting.isPending ? (
-            <Loader2 className="animate-spin" />
-          ) : (
-            <Save />
-          )}
-          {updateSetting.isPending
-            ? "Saving..."
-            : `Save ${provider.displayName} Credentials`}
-        </Button>
-        {(configured.has(clientIdKey) || configured.has(clientSecretKey)) &&
-          !confirmClear && (
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setConfirmClear(true)}
-            >
-              <RotateCcw />
-              Clear credentials
-            </Button>
-          )}
-        {confirmClear && (
-          <>
-            <span className="text-muted-foreground text-xs">
-              Disconnect this server credential?
-            </span>
-            <Button
-              type="button"
-              variant="destructive"
-              onClick={() => void clearCredentials()}
-              disabled={updateSetting.isPending}
-            >
-              <Check />
-              Confirm clear
-            </Button>
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={() => setConfirmClear(false)}
-            >
-              <X />
-              Cancel
-            </Button>
-          </>
-        )}
-      </div>
-      {restartRequired && (
-        <div className="border-warning/30 bg-warning/10 text-warning mt-3 flex items-center justify-between gap-3 rounded-xl border px-3 py-2 text-xs">
-          <span className="flex items-center gap-2">
-            <AlertTriangle className="h-3.5 w-3.5" />
-            Restart required for {provider.displayName} collection browsing to
-            use this credential change.
-          </span>
-          <RestartServerButton />
-        </div>
-      )}
-    </fieldset>
-  );
-}
-
-export default function WatchProvidersSettings() {
-  return (
-    <div className="flex h-full flex-col">
-      <div className="mb-6 space-y-2">
-        <h2 className="text-xl font-semibold tracking-tight">
-          Watch Providers
-        </h2>
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          OAuth credentials for watch history and scrobbling services. Users
-          connect their own accounts from their profile settings once a provider
-          is configured here.
-        </p>
-      </div>
-
-      <div className="space-y-4">
-        {WATCH_PROVIDER_CREDENTIALS.map((provider) => (
-          <WatchProviderCredentialCard key={provider.key} provider={provider} />
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/web/src/pages/admin-settings/WatchSyncSettings.test.tsx b/web/src/pages/admin-settings/WatchSyncSettings.test.tsx
new file mode 100644
index 000000000..618c76fc4
--- /dev/null
+++ b/web/src/pages/admin-settings/WatchSyncSettings.test.tsx
@@ -0,0 +1,335 @@
+import { render as renderDOM, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { PluginInstallation } from "@/api/types";
+
+import WatchSyncSettings from "./WatchSyncSettings";
+
+const mocks = vi.hoisted(() => ({
+  toastInfo: vi.fn(),
+  toastSuccess: vi.fn(),
+  updateSettings: vi.fn(),
+}));
+
+let pluginInstallations: Partial<PluginInstallation>[] = [];
+
+vi.mock("@/hooks/queries/admin/plugins", () => ({
+  useAdminPluginInstallations: () => ({ data: pluginInstallations }),
+}));
+
+function render(ui: React.ReactElement) {
+  return renderDOM(<MemoryRouter>{ui}</MemoryRouter>);
+}
+
+let sensitiveConfigured: string[] = [
+  "watchsync.trakt.client_id",
+  "watchsync.trakt.client_secret",
+];
+
+const useSettingsFormMock = vi.fn((_options?: { keys: string[] }) => ({
+  isLoading: false,
+  getValue: () => "",
+  setValue: vi.fn(),
+  resetValue: vi.fn(),
+  dirtyCount: 0,
+  dirtyKeys: [],
+  isDirty: vi.fn(() => false),
+  save: vi.fn(),
+  discard: vi.fn(),
+  isSaving: false,
+  restartRequired: false,
+  sensitiveConfigured,
+  sensitiveManagedByEnv: [],
+  sensitiveStatusReady: true,
+  sensitiveStatusError: false,
+  buildConnectionCheckRequest: vi.fn(() => ({ values: {}, dirty_keys: [] })),
+}));
+
+vi.mock("@/hooks/useSettingsForm", () => ({
+  useSettingsForm: (options: { keys: string[] }) =>
+    useSettingsFormMock(options),
+}));
+
+vi.mock("@/hooks/useRestartKeys", () => ({
+  useRestartKeys: () => new Set<string>(),
+}));
+
+vi.mock("@/hooks/queries/admin/settings", () => ({
+  useUpdateServerSettings: () => ({
+    mutateAsync: mocks.updateSettings,
+    isPending: false,
+  }),
+  useAdminServerStatus: () => ({ data: undefined }),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    info: mocks.toastInfo,
+    success: mocks.toastSuccess,
+  },
+}));
+
+describe("WatchSyncSettings", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    sensitiveConfigured = [
+      "watchsync.trakt.client_id",
+      "watchsync.trakt.client_secret",
+    ];
+    pluginInstallations = [];
+    for (const mock of Object.values(mocks)) mock.mockReset();
+    mocks.updateSettings.mockResolvedValue({
+      values: {},
+      restart_required: false,
+    });
+  });
+
+  it("heads the page and lists both providers", () => {
+    render(<WatchSyncSettings />);
+
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Watch Providers" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Keep watch history in sync with Trakt and Simkl."),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Trakt" })).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Simkl" })).toBeInTheDocument();
+  });
+
+  it("registers only the watch sync app credentials with the settings form", () => {
+    render(<WatchSyncSettings />);
+
+    expect(useSettingsFormMock).toHaveBeenCalledWith({
+      keys: [
+        "watchsync.trakt.client_id",
+        "watchsync.trakt.client_secret",
+        "watchsync.simkl.client_id",
+        "watchsync.simkl.client_secret",
+      ],
+    });
+  });
+
+  it("derives tile state from the stored credentials", () => {
+    render(<WatchSyncSettings />);
+
+    expect(screen.getByRole("group", { name: "Trakt" })).toHaveAttribute(
+      "data-state",
+      "connected",
+    );
+    expect(screen.getByRole("group", { name: "Simkl" })).toHaveAttribute(
+      "data-state",
+      "not_connected",
+    );
+    expect(screen.getByText("Connected")).toBeInTheDocument();
+    expect(screen.getByText("Not connected")).toBeInTheDocument();
+    // The state word is the only signal; the tile no longer repeats it as a
+    // "credentials stored" line underneath.
+    expect(
+      screen.queryByText("App credentials stored"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("marks a half-configured provider as partly set up", () => {
+    sensitiveConfigured = ["watchsync.simkl.client_id"];
+
+    render(<WatchSyncSettings />);
+
+    expect(screen.getByText("Partly set up")).toBeInTheDocument();
+  });
+
+  it("expands one tile in place and collapses it again", async () => {
+    const user = userEvent.setup();
+    render(<WatchSyncSettings />);
+
+    expect(screen.queryByLabelText("Client ID")).not.toBeInTheDocument();
+
+    await user.click(
+      within(screen.getByRole("group", { name: "Simkl" })).getByRole("button", {
+        name: "Connect",
+      }),
+    );
+
+    const simkl = screen.getByRole("group", { name: "Simkl" });
+    expect(simkl).toHaveAttribute("data-expanded", "true");
+    expect(within(simkl).getByLabelText("Client ID")).toBeInTheDocument();
+    expect(within(simkl).getByLabelText("Client secret")).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Trakt" })).not.toHaveAttribute(
+      "data-expanded",
+    );
+
+    await user.click(within(simkl).getByRole("button", { name: "Close" }));
+
+    expect(screen.queryByLabelText("Client ID")).not.toBeInTheDocument();
+  });
+
+  it("gives every panel action a resting affordance instead of ghost text", async () => {
+    const user = userEvent.setup();
+    render(<WatchSyncSettings />);
+
+    await user.click(
+      within(screen.getByRole("group", { name: "Trakt" })).getByRole("button", {
+        name: "Manage",
+      }),
+    );
+
+    const trakt = screen.getByRole("group", { name: "Trakt" });
+    for (const name of ["Clear credentials", "Close"]) {
+      expect(within(trakt).getByRole("button", { name })).toHaveAttribute(
+        "data-variant",
+        "outline",
+      );
+    }
+  });
+
+  it("saves only the credentials that were typed", async () => {
+    const user = userEvent.setup();
+    render(<WatchSyncSettings />);
+
+    await user.click(
+      within(screen.getByRole("group", { name: "Simkl" })).getByRole("button", {
+        name: "Connect",
+      }),
+    );
+    const simkl = screen.getByRole("group", { name: "Simkl" });
+    await user.type(within(simkl).getByLabelText("Client ID"), "simkl-id");
+    await user.click(within(simkl).getByRole("button", { name: "Save" }));
+
+    expect(mocks.updateSettings).toHaveBeenCalledWith({
+      "watchsync.simkl.client_id": "simkl-id",
+    });
+  });
+
+  it("lists installed watch-provider plugins beside the built-ins", () => {
+    pluginInstallations = [
+      {
+        id: 7,
+        plugin_id: "silo-plugin-watchsync-anilist",
+        enabled: true,
+        capabilities: [
+          {
+            type: "watch_sync_provider.v1",
+            id: "anilist",
+            display_name: "AniList",
+          },
+        ],
+      },
+      {
+        id: 9,
+        plugin_id: "silo-plugin-watchsync-serializd",
+        enabled: false,
+        capabilities: [
+          {
+            type: "watch_sync_provider.v1",
+            id: "serializd",
+            display_name: "Serializd",
+          },
+        ],
+      },
+      {
+        // Not a watch provider; must not appear on this page.
+        id: 11,
+        plugin_id: "silo-plugin-metadata-tmdb",
+        enabled: true,
+        capabilities: [
+          { type: "metadata_provider.v1", id: "tmdb", display_name: "TMDB" },
+        ],
+      },
+    ];
+
+    render(<WatchSyncSettings />);
+
+    const anilist = screen.getByRole("group", { name: "AniList" });
+    expect(anilist).toHaveAttribute("data-state", "connected");
+    expect(within(anilist).getByText("Enabled")).toBeInTheDocument();
+    expect(
+      within(anilist).getByRole("button", { name: "Configure" }),
+    ).toBeInTheDocument();
+
+    const serializd = screen.getByRole("group", { name: "Serializd" });
+    expect(serializd).toHaveAttribute("data-state", "not_connected");
+    expect(within(serializd).getByText("Disabled")).toBeInTheDocument();
+
+    expect(
+      screen.queryByRole("group", { name: "TMDB" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "plugin catalog" }),
+    ).toHaveAttribute("href", "/admin/plugins?tab=catalog");
+  });
+
+  it("does not label an enabled plugin as connected until its required config is set", () => {
+    const capability = {
+      type: "watch_sync_provider.v1",
+      id: "anilist",
+      display_name: "AniList",
+    };
+    const schema = [
+      { key: "account", title: "Account", json_schema: "{}", required: true },
+    ];
+    pluginInstallations = [
+      {
+        id: 7,
+        plugin_id: "silo-plugin-watchsync-anilist",
+        enabled: true,
+        capabilities: [capability],
+        global_config_schema: schema,
+        global_configs: [],
+      },
+      {
+        id: 9,
+        plugin_id: "silo-plugin-watchsync-serializd",
+        enabled: true,
+        capabilities: [
+          {
+            type: "watch_sync_provider.v1",
+            id: "serializd",
+            display_name: "Serializd",
+          },
+        ],
+        global_config_schema: schema,
+        global_configs: [
+          { key: "account", value: {}, configured_secrets: ["api_key"] },
+        ],
+      },
+    ];
+
+    render(<WatchSyncSettings />);
+
+    // Enabled but keyless: the plugin cannot serve a request, so the tile must
+    // not read as set up.
+    const anilist = screen.getByRole("group", { name: "AniList" });
+    expect(anilist).toHaveAttribute("data-state", "not_connected");
+    expect(within(anilist).getByText("Needs setup")).toBeInTheDocument();
+
+    const serializd = screen.getByRole("group", { name: "Serializd" });
+    expect(serializd).toHaveAttribute("data-state", "connected");
+    expect(within(serializd).getByText("Enabled")).toBeInTheDocument();
+  });
+
+  it("clears a connected provider behind a confirmation", async () => {
+    const user = userEvent.setup();
+    render(<WatchSyncSettings />);
+
+    await user.click(
+      within(screen.getByRole("group", { name: "Trakt" })).getByRole("button", {
+        name: "Manage",
+      }),
+    );
+    await user.click(
+      within(screen.getByRole("group", { name: "Trakt" })).getByRole("button", {
+        name: "Clear credentials",
+      }),
+    );
+
+    expect(screen.getByText("Clear Trakt credentials?")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Clear" }));
+
+    expect(mocks.updateSettings).toHaveBeenCalledWith({
+      "watchsync.trakt.client_id": "",
+      "watchsync.trakt.client_secret": "",
+    });
+  });
+});
diff --git a/web/src/pages/admin-settings/WatchSyncSettings.tsx b/web/src/pages/admin-settings/WatchSyncSettings.tsx
new file mode 100644
index 000000000..52a648571
--- /dev/null
+++ b/web/src/pages/admin-settings/WatchSyncSettings.tsx
@@ -0,0 +1,376 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+
+import type { PluginInstallation } from "@/api/types";
+import {
+  ProviderTile,
+  ProviderTileGrid,
+  providerMonogram,
+} from "@/components/settings/ProviderTile";
+import { RestartBadge } from "@/components/settings/RestartBadge";
+import { SecretField } from "@/components/settings/SecretField";
+import { SettingsPageHeader } from "@/components/settings/SettingsPageHeader";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { RestartServerButton } from "@/components/admin/RestartServerButton";
+import { installationConfigReady } from "@/lib/pluginConfigReady";
+import { useReportUnsavedChanges } from "@/hooks/useUnsavedChanges";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useAdminPluginInstallations } from "@/hooks/queries/admin/plugins";
+import { useUpdateServerSettings } from "@/hooks/queries/admin/settings";
+import { useRestartKeys, type RestartKeyMatcher } from "@/hooks/useRestartKeys";
+import { useSettingsForm } from "@/hooks/useSettingsForm";
+
+import { FieldGroup } from "./FieldGroup";
+
+/**
+ * App credentials only. A viewer's own Trakt or Simkl account is linked from
+ * their profile settings, never here.
+ */
+const KEYS = [
+  "watchsync.trakt.client_id",
+  "watchsync.trakt.client_secret",
+  "watchsync.simkl.client_id",
+  "watchsync.simkl.client_secret",
+];
+
+interface WatchProvider {
+  key: string;
+  title: string;
+  monogram: string;
+  monogramClass: string;
+}
+
+const PROVIDERS: WatchProvider[] = [
+  {
+    key: "trakt",
+    title: "Trakt",
+    monogram: "TR",
+    monogramClass: "bg-red-500/20 text-red-700 dark:text-red-300",
+  },
+  {
+    key: "simkl",
+    title: "Simkl",
+    monogram: "SK",
+    monogramClass: "bg-amber-500/20 text-amber-700 dark:text-amber-300",
+  },
+];
+
+/**
+ * The capability type watch-provider plugins declare (see
+ * `internal/pluginhost`'s `watch_sync_provider.v1`). Matched by family so a
+ * future `.v2` still shows up here.
+ */
+const WATCH_SYNC_CAPABILITY = "watch_sync_provider";
+
+interface PluginWatchProvider {
+  installationId: number;
+  capabilityId: string;
+  pluginId: string;
+  name: string;
+  enabled: boolean;
+  /** Whether the plugin's declared global config is actually filled in. */
+  configReady: boolean;
+}
+
+/**
+ * One entry per watch-sync capability across the installed plugins. Trakt and
+ * Simkl are built in; every other watch provider arrives as a plugin, so this
+ * is what keeps the page honest about what the server can actually sync with.
+ */
+function pluginWatchProviders(
+  installations: PluginInstallation[],
+): PluginWatchProvider[] {
+  const providers: PluginWatchProvider[] = [];
+  for (const installation of installations) {
+    for (const capability of installation.capabilities ?? []) {
+      const type = capability.type ?? "";
+      if (
+        type !== WATCH_SYNC_CAPABILITY &&
+        !type.startsWith(`${WATCH_SYNC_CAPABILITY}.`)
+      ) {
+        continue;
+      }
+      providers.push({
+        installationId: installation.id,
+        capabilityId: capability.id,
+        pluginId: installation.plugin_id,
+        name: capability.display_name || installation.plugin_id,
+        enabled: installation.enabled,
+        // "Connected" must mean the plugin could serve a configured request,
+        // not merely that the installation is switched on.
+        configReady: installationConfigReady(installation),
+      });
+    }
+  }
+  return providers.sort((a, b) => a.name.localeCompare(b.name));
+}
+
+function credentialKeys(providerKey: string) {
+  return [
+    { key: `watchsync.${providerKey}.client_id`, label: "Client ID" },
+    { key: `watchsync.${providerKey}.client_secret`, label: "Client secret" },
+  ];
+}
+
+function WatchProviderTile({
+  provider,
+  sensitiveConfigured,
+  restartKeys,
+  expanded,
+  onExpand,
+  onCollapse,
+}: {
+  provider: WatchProvider;
+  sensitiveConfigured: string[];
+  restartKeys: RestartKeyMatcher;
+  expanded: boolean;
+  onExpand: () => void;
+  onCollapse: () => void;
+}) {
+  const updateSettings = useUpdateServerSettings();
+  const [drafts, setDrafts] = useState<Record<string, string>>({});
+  const [needsRestart, setNeedsRestart] = useState(false);
+  const [confirmClear, setConfirmClear] = useState(false);
+  // Tile drafts live outside useSettingsForm, so the navigation guard and the
+  // reload prompt only see them if the tile reports them itself.
+  useReportUnsavedChanges(Object.values(drafts).some((value) => value !== ""));
+
+  const { title } = provider;
+  const fields = credentialKeys(provider.key);
+  const configuredKeys = new Set(sensitiveConfigured);
+  const anyConfigured = fields.some((field) => configuredKeys.has(field.key));
+  const allConfigured = fields.every((field) => configuredKeys.has(field.key));
+  const draftOf = (key: string) => drafts[key] ?? "";
+  const restartRequired = fields.some((field) => restartKeys.has(field.key));
+
+  async function save() {
+    const updates: Record<string, string> = {};
+    for (const field of fields) {
+      if (draftOf(field.key).trim() !== "")
+        updates[field.key] = draftOf(field.key);
+    }
+    if (Object.keys(updates).length === 0) {
+      toast.info(`Nothing to save for ${title}.`);
+      return;
+    }
+    try {
+      const result = await updateSettings.mutateAsync(updates);
+      setDrafts({});
+      setNeedsRestart((current) => current || result.restart_required);
+      toast.success(`${title} credentials saved`);
+    } catch {
+      // The mutation surfaces the API error.
+    }
+  }
+
+  async function clearAll() {
+    try {
+      const result = await updateSettings.mutateAsync(
+        Object.fromEntries(fields.map((field) => [field.key, ""])),
+      );
+      setDrafts({});
+      setNeedsRestart((current) => current || result.restart_required);
+      toast.success(`${title} credentials cleared`);
+    } catch {
+      // The mutation surfaces the API error.
+    }
+  }
+
+  return (
+    <ProviderTile
+      name={title}
+      tagline="Watch history sync"
+      monogram={provider.monogram}
+      monogramClass={provider.monogramClass}
+      state={
+        expanded ? "editing" : allConfigured ? "connected" : "not_connected"
+      }
+      statePill={
+        !expanded && !allConfigured && anyConfigured
+          ? "Partly set up"
+          : undefined
+      }
+      badge={restartRequired ? <RestartBadge /> : undefined}
+      busy={updateSettings.isPending}
+      expanded={expanded}
+      primaryAction={{
+        label: anyConfigured ? "Manage" : "Connect",
+        onClick: onExpand,
+      }}
+    >
+      <p className="text-muted-foreground mb-1 text-xs">
+        Viewers link their own {title} account from profile settings.
+      </p>
+      {fields.map((field) => (
+        <SecretField
+          key={field.key}
+          label={field.label}
+          value={draftOf(field.key)}
+          configured={configuredKeys.has(field.key)}
+          onChange={(next) =>
+            setDrafts((prev) => ({ ...prev, [field.key]: next }))
+          }
+          restartRequired={restartKeys.has(field.key)}
+        />
+      ))}
+      {/*
+        Every action carries a border at rest. A `ghost` button reads as plain
+        text until it is hovered, which hid Clear credentials and Close from
+        admins who never hovered them.
+      */}
+      <div className="mt-3.5 flex flex-wrap items-center gap-2">
+        <Button
+          type="button"
+          size="sm"
+          onClick={() => void save()}
+          disabled={updateSettings.isPending}
+        >
+          {updateSettings.isPending ? "Saving..." : "Save"}
+        </Button>
+        {anyConfigured ? (
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={() => setConfirmClear(true)}
+          >
+            Clear credentials
+          </Button>
+        ) : null}
+        <Button type="button" size="sm" variant="outline" onClick={onCollapse}>
+          Close
+        </Button>
+      </div>
+      {needsRestart && (
+        <div className="border-warning/30 bg-warning/10 text-warning mt-3 flex flex-wrap items-center justify-between gap-3 rounded-xl border px-3 py-2 text-xs">
+          <span>
+            Restart the server to pick up the new {title} credentials.
+          </span>
+          <RestartServerButton />
+        </div>
+      )}
+      <AlertDialog open={confirmClear} onOpenChange={setConfirmClear}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Clear {title} credentials?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Viewers can no longer connect a {title} account, and existing
+              connections stop syncing.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => {
+                void clearAll();
+                setConfirmClear(false);
+              }}
+            >
+              Clear
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </ProviderTile>
+  );
+}
+
+export default function WatchSyncSettings() {
+  const form = useSettingsForm({ keys: KEYS });
+  const restartKeys = useRestartKeys();
+  const navigate = useNavigate();
+  const [expandedTile, setExpandedTile] = useState<string | null>(null);
+  // Plugin providers render as they arrive rather than blocking the page:
+  // the built-in tiles are useful on their own.
+  const { data: installations } = useAdminPluginInstallations();
+  const pluginProviders = pluginWatchProviders(installations ?? []);
+
+  if (form.isLoading) {
+    return (
+      <div
+        className="max-w-5xl space-y-6"
+        role="status"
+        aria-label="Loading watch sync"
+      >
+        <Skeleton className="h-9 w-64" />
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-40 w-full" />
+        <span className="sr-only">Loading watch sync</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full max-w-5xl flex-col gap-7">
+      <SettingsPageHeader title="Watch Providers" />
+
+      <FieldGroup label="Watch providers">
+        <div className="py-3.5">
+          <ProviderTileGrid>
+            {PROVIDERS.map((provider) => (
+              <WatchProviderTile
+                key={provider.key}
+                provider={provider}
+                sensitiveConfigured={form.sensitiveConfigured}
+                restartKeys={restartKeys}
+                expanded={expandedTile === provider.key}
+                onExpand={() => setExpandedTile(provider.key)}
+                onCollapse={() => setExpandedTile(null)}
+              />
+            ))}
+            {pluginProviders.map((provider) => (
+              <ProviderTile
+                key={`plugin-${provider.installationId}-${provider.capabilityId}`}
+                name={provider.name}
+                tagline="Watch provider plugin"
+                monogram={providerMonogram(provider.name)}
+                monogramClass="bg-violet-500/20 text-violet-700 dark:text-violet-300"
+                state={
+                  provider.enabled && provider.configReady
+                    ? "connected"
+                    : "not_connected"
+                }
+                statePill={
+                  !provider.enabled
+                    ? "Disabled"
+                    : provider.configReady
+                      ? "Enabled"
+                      : "Needs setup"
+                }
+                primaryAction={{
+                  label: "Configure",
+                  onClick: () =>
+                    navigate(
+                      `/admin/plugins?installed_q=${encodeURIComponent(provider.pluginId)}&configure=${encodeURIComponent(provider.pluginId)}`,
+                    ),
+                }}
+              />
+            ))}
+          </ProviderTileGrid>
+          <p className="text-muted-foreground mt-3 text-xs">
+            Watch providers are pluggable. More install from the{" "}
+            <Link
+              to="/admin/plugins?tab=catalog"
+              className="hover:text-foreground font-medium underline underline-offset-2 transition-colors"
+            >
+              plugin catalog
+            </Link>
+            ; a plugin provider's credentials live on its plugin page.
+          </p>
+        </div>
+      </FieldGroup>
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/logRetentionPolicy.test.ts b/web/src/pages/admin-settings/logRetentionPolicy.test.ts
index 01ccb623b..c4ea14da4 100644
--- a/web/src/pages/admin-settings/logRetentionPolicy.test.ts
+++ b/web/src/pages/admin-settings/logRetentionPolicy.test.ts
@@ -1,8 +1,14 @@
 import { describe, expect, it } from "vitest";
 
 import {
+  appendBucketRow,
+  bucketRowsFromRaw,
   parseBucketPolicies,
+  recommendedBucketRows,
+  removeBucketRow,
   serializeBucketPolicies,
+  serializeBucketRows,
+  updateBucketRow,
   type LogRetentionBucketPolicy,
 } from "./logRetentionPolicy";
 
@@ -129,3 +135,77 @@ describe("logRetentionPolicy", () => {
     ]);
   });
 });
+
+describe("logRetentionPolicy bucket rows", () => {
+  it("gives every parsed row a stable id", () => {
+    const { rows, error } = bucketRowsFromRaw(
+      JSON.stringify([
+        {
+          component: "metadata",
+          level: "info",
+          retention_days: 1,
+          max_rows: 10,
+          max_size_mb: 8,
+        },
+        {
+          component: "scanner",
+          level: "warn",
+          retention_days: 7,
+          max_rows: 20,
+          max_size_mb: 16,
+        },
+      ]),
+    );
+
+    expect(error).toBe("");
+    expect(rows.map((row) => row.id)).toEqual(["1", "2"]);
+    expect(rows[1]?.component).toBe("scanner");
+  });
+
+  it("falls back to the recommended rows when the stored JSON is unreadable", () => {
+    const { rows, error } = bucketRowsFromRaw("{not json");
+
+    expect(error).not.toBe("");
+    expect(rows).toEqual(recommendedBucketRows());
+  });
+
+  it("numbers a new row after the highest id still present", () => {
+    let rows = bucketRowsFromRaw("").rows;
+    rows = appendBucketRow(rows);
+    rows = appendBucketRow(rows);
+    expect(rows.map((row) => row.id)).toEqual(["1", "2"]);
+
+    rows = updateBucketRow(rows, "1", "component", "scanner");
+    rows = updateBucketRow(rows, "1", "max_rows", "-4");
+    expect(rows[0]?.component).toBe("scanner");
+    expect(rows[0]?.max_rows).toBe(0);
+
+    // Ids are max-of-remaining + 1, not a monotonic counter: removing the last
+    // row frees its id for the next one. That is safe because an id only has to
+    // be unique among the rows currently on screen — it is a React key and the
+    // handle the editor's own update/remove calls use, and it is stripped before
+    // the rows are serialized.
+    rows = removeBucketRow(rows, "2");
+    rows = appendBucketRow(rows);
+    expect(rows.map((row) => row.id)).toEqual(["1", "2"]);
+  });
+
+  it("serializes rows without their editor ids", () => {
+    const rows = updateBucketRow(
+      appendBucketRow([]),
+      "1",
+      "component",
+      "metadata",
+    );
+
+    expect(JSON.parse(serializeBucketRows(rows))).toEqual([
+      {
+        component: "metadata",
+        level: "info",
+        retention_days: 1,
+        max_rows: 100000,
+        max_size_mb: 128,
+      },
+    ]);
+  });
+});
diff --git a/web/src/pages/admin-settings/logRetentionPolicy.ts b/web/src/pages/admin-settings/logRetentionPolicy.ts
index 7abd89870..73b558e5d 100644
--- a/web/src/pages/admin-settings/logRetentionPolicy.ts
+++ b/web/src/pages/admin-settings/logRetentionPolicy.ts
@@ -121,3 +121,99 @@ export function serializeBucketPolicies(
 
   return JSON.stringify(normalized);
 }
+
+/** A bucket policy plus the stable row id the editor keys React on. */
+export type LogRetentionBucketRow = LogRetentionBucketPolicy & { id: string };
+
+export function createBucketRow(
+  policy?: Partial<LogRetentionBucketPolicy>,
+  id = "0",
+): LogRetentionBucketRow {
+  return {
+    id,
+    component: policy?.component ?? "",
+    level: policy?.level ?? "info",
+    retention_days: policy?.retention_days ?? 1,
+    max_rows: policy?.max_rows ?? 100000,
+    max_size_mb: policy?.max_size_mb ?? 128,
+  };
+}
+
+export function recommendedBucketRows(): LogRetentionBucketRow[] {
+  return DEFAULT_BUCKET_POLICIES.map((policy, index) =>
+    createBucketRow(policy, String(index + 1)),
+  );
+}
+
+export interface LogRetentionBucketRowsState {
+  rows: LogRetentionBucketRow[];
+  /** Empty unless the stored JSON was unreadable and the rows fell back. */
+  error: string;
+}
+
+/**
+ * Turns the stored `opslog.bucket_policies` JSON into editor rows. Unreadable
+ * JSON falls back to the recommended rules with an error the caller shows, so
+ * an admin can always recover without hand-editing the database.
+ */
+export function bucketRowsFromRaw(raw: string): LogRetentionBucketRowsState {
+  try {
+    const parsed = parseBucketPolicies(raw);
+    return {
+      rows: parsed.map((policy, index) =>
+        createBucketRow(policy, String(index + 1)),
+      ),
+      error: "",
+    };
+  } catch (error) {
+    return {
+      rows: recommendedBucketRows(),
+      error:
+        error instanceof Error ? error.message : "Failed to parse bucket rules",
+    };
+  }
+}
+
+function nextBucketRowID(rows: LogRetentionBucketRow[]): string {
+  const highest = rows.reduce(
+    (max, row) => Math.max(max, Number.parseInt(row.id, 10) || 0),
+    0,
+  );
+  return String(highest + 1);
+}
+
+export function appendBucketRow(
+  rows: LogRetentionBucketRow[],
+): LogRetentionBucketRow[] {
+  return [...rows, createBucketRow(undefined, nextBucketRowID(rows))];
+}
+
+export function removeBucketRow(
+  rows: LogRetentionBucketRow[],
+  id: string,
+): LogRetentionBucketRow[] {
+  return rows.filter((row) => row.id !== id);
+}
+
+export function updateBucketRow(
+  rows: LogRetentionBucketRow[],
+  id: string,
+  field: keyof LogRetentionBucketPolicy,
+  value: string,
+): LogRetentionBucketRow[] {
+  return rows.map((row) =>
+    row.id === id
+      ? {
+          ...row,
+          [field]:
+            field === "component" || field === "level"
+              ? value
+              : Math.max(0, Number.parseInt(value, 10) || 0),
+        }
+      : row,
+  );
+}
+
+export function serializeBucketRows(rows: LogRetentionBucketRow[]): string {
+  return serializeBucketPolicies(rows);
+}
diff --git a/web/src/pages/admin-settings/overviewCards.tsx b/web/src/pages/admin-settings/overviewCards.tsx
new file mode 100644
index 000000000..c330ad096
--- /dev/null
+++ b/web/src/pages/admin-settings/overviewCards.tsx
@@ -0,0 +1,184 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  ChevronRight,
+  Database,
+  HardDrive,
+  Mail,
+  PlayCircle,
+  Search,
+  Server,
+  Settings2,
+} from "lucide-react";
+import { Link } from "react-router";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { ADMIN_SETTINGS_NAV } from "@/lib/adminSettingsSearch";
+import {
+  settingsPageHref,
+  type AdminSettingsPageID,
+  type OverviewCard,
+  type OverviewTile,
+} from "@/hooks/admin/useSettingsOverview";
+
+/** Icon per health tile, keyed by the tile ids the hook emits. */
+const TILE_ICONS: Record<string, LucideIcon> = {
+  storage: HardDrive,
+  database: Database,
+  transcoding: PlayCircle,
+  search: Search,
+  email: Mail,
+};
+
+const CARD_METADATA = Object.fromEntries(
+  ADMIN_SETTINGS_NAV.map((item) => [
+    item.id,
+    {
+      description: item.description,
+      groups: item.groups,
+      icon: item.icon,
+      label: item.label,
+    },
+  ]),
+) as Record<
+  AdminSettingsPageID,
+  {
+    description: string;
+    groups: readonly string[];
+    icon: LucideIcon;
+    label: string;
+  }
+>;
+
+const PANEL = "border-border/70 rounded-xl border";
+
+/**
+ * One health tile. Only tiles asking for something are rendered, so the tile
+ * says what is wrong and links to the page that fixes it.
+ */
+export function HealthTile({ tile }: { tile: OverviewTile }) {
+  const Icon = TILE_ICONS[tile.id] ?? Server;
+  const warn = tile.state === "warn";
+
+  return (
+    <div
+      data-testid={`overview-tile-${tile.id}`}
+      data-state={tile.state}
+      className={cn(PANEL, "flex flex-col p-3.5")}
+    >
+      <span className="flex items-center gap-2">
+        <Icon
+          className={cn(
+            "size-4 shrink-0",
+            warn ? "text-amber-400" : "text-muted-foreground",
+          )}
+          aria-hidden="true"
+        />
+        <span className="text-muted-foreground text-xs">{tile.label}</span>
+      </span>
+      <span
+        className={cn("mt-1.5 text-sm font-medium", warn && "text-amber-300")}
+      >
+        {tile.stateText}
+      </span>
+      {tile.detail ? (
+        <span className="text-muted-foreground mt-1 text-xs leading-snug">
+          {tile.detail}
+        </span>
+      ) : null}
+      {tile.action ? (
+        <Link
+          to={settingsPageHref(tile.action.page)}
+          aria-label={`${tile.action.label} — ${tile.label}`}
+          className={cn(
+            "text-foreground/80 hover:text-foreground mt-auto inline-flex items-center gap-1 pt-2.5",
+            "focus-visible:ring-ring rounded-sm text-xs font-medium focus-visible:ring-2 focus-visible:outline-none",
+          )}
+        >
+          {tile.action.label}
+          <ChevronRight className="size-3.5" aria-hidden="true" />
+        </Link>
+      ) : null}
+    </div>
+  );
+}
+
+/** One settings group and the named subareas the admin will find inside it. */
+export function SectionCard({ card }: { card: OverviewCard }) {
+  const metadata = CARD_METADATA[card.id];
+  const Icon = metadata?.icon ?? Settings2;
+
+  return (
+    <Link
+      to={settingsPageHref(card.id)}
+      data-testid={`overview-card-${card.id}`}
+      className={cn(
+        PANEL,
+        "group hover:border-ring/40 bg-card/25 flex min-h-40 flex-col p-4 transition-all",
+        "hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/10",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+      )}
+    >
+      <div className="flex items-start gap-3.5">
+        <span className="bg-accent/75 text-foreground flex size-10 shrink-0 items-center justify-center rounded-xl">
+          <Icon className="size-[18px]" aria-hidden="true" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <h3 className="text-base leading-6 font-semibold tracking-tight">
+            {metadata?.label}
+          </h3>
+          <p className="text-muted-foreground mt-1.5 max-w-2xl text-[13px] leading-relaxed">
+            {metadata?.description}
+          </p>
+        </div>
+        <ChevronRight
+          className="text-muted-foreground group-hover:text-foreground mt-1 size-4 shrink-0 transition-colors"
+          aria-hidden="true"
+        />
+      </div>
+      <ul className="mt-4 grid list-none grid-cols-1 gap-x-5 gap-y-2 sm:grid-cols-2">
+        {metadata?.groups.map((group) => (
+          <li
+            key={group}
+            className="text-foreground/75 flex min-w-0 items-center gap-2 text-xs leading-5"
+          >
+            <span className="bg-border h-px w-3 shrink-0" aria-hidden="true" />
+            <span className="truncate">{group}</span>
+          </li>
+        ))}
+      </ul>
+    </Link>
+  );
+}
+
+/** Placeholder tile shown while the settings map is still in flight. */
+export function HealthTileSkeleton() {
+  return (
+    <div className={cn(PANEL, "flex flex-col gap-2 p-3.5")}>
+      <Skeleton className="h-3 w-16" />
+      <Skeleton className="h-4 w-20" />
+      <Skeleton className="h-3 w-24" />
+    </div>
+  );
+}
+
+/** Placeholder card shown while the settings map is still in flight. */
+export function SectionCardSkeleton() {
+  return (
+    <div className={cn(PANEL, "flex min-h-40 flex-col p-4")}>
+      <div className="flex items-start gap-3.5">
+        <Skeleton className="size-10 rounded-xl" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-5 w-36" />
+          <Skeleton className="h-3 w-4/5" />
+          <Skeleton className="h-3 w-3/5" />
+        </div>
+      </div>
+      <div className="mt-4 grid grid-cols-2 gap-2">
+        <Skeleton className="h-3 w-28" />
+        <Skeleton className="h-3 w-24" />
+        <Skeleton className="h-3 w-20" />
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/admin-settings/playbackSettings.utils.test.ts b/web/src/pages/admin-settings/playbackSettings.utils.test.ts
index f742fcd87..529c881ee 100644
--- a/web/src/pages/admin-settings/playbackSettings.utils.test.ts
+++ b/web/src/pages/admin-settings/playbackSettings.utils.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, it } from "vitest";
 import {
   buildHWDeviceRows,
+  chapterThumbnailExecutionOptions,
+  hasUsableTranscodeNode,
   nodeInventoriesDiverge,
   parseHWDeviceList,
   toggleHWDevice,
@@ -183,3 +185,63 @@ describe("nodeInventoriesDiverge", () => {
     ).toBe(true);
   });
 });
+
+function node(overrides: Record<string, unknown> = {}) {
+  return {
+    id: 1,
+    name: "node-1",
+    type: "transcode",
+    enabled: true,
+    healthy: true,
+    ...overrides,
+  } as never;
+}
+
+describe("hasUsableTranscodeNode", () => {
+  it("is false without any node list", () => {
+    expect(hasUsableTranscodeNode(undefined)).toBe(false);
+    expect(hasUsableTranscodeNode([])).toBe(false);
+  });
+
+  it("requires a transcode node that is both enabled and healthy", () => {
+    expect(hasUsableTranscodeNode([node({ enabled: false })])).toBe(false);
+    expect(hasUsableTranscodeNode([node({ healthy: false })])).toBe(false);
+    expect(hasUsableTranscodeNode([node({ type: "streaming" })])).toBe(false);
+    expect(
+      hasUsableTranscodeNode([node({ healthy: false }), node({ id: 2 })]),
+    ).toBe(true);
+  });
+});
+
+describe("chapterThumbnailExecutionOptions", () => {
+  const disabledValues = (current: string, available: boolean) =>
+    chapterThumbnailExecutionOptions(current, available)
+      .filter((option) => option.disabled)
+      .map((option) => option.value);
+
+  it("enables everything while a transcode node is available", () => {
+    expect(disabledValues("local", true)).toEqual([]);
+  });
+
+  it("disables the node-backed modes when no node can take the work", () => {
+    expect(disabledValues("local", false)).toEqual([
+      "prefer_transcode_nodes",
+      "transcode_nodes_only",
+    ]);
+  });
+
+  it("keeps a saved node-backed mode selectable so it can be changed", () => {
+    expect(disabledValues("transcode_nodes_only", false)).toEqual([
+      "prefer_transcode_nodes",
+    ]);
+    expect(disabledValues("prefer_transcode_nodes", false)).toEqual([
+      "transcode_nodes_only",
+    ]);
+  });
+
+  it("never disables local extraction", () => {
+    expect(disabledValues("transcode_nodes_only", false)).not.toContain(
+      "local",
+    );
+  });
+});
diff --git a/web/src/pages/admin-settings/playbackSettings.utils.ts b/web/src/pages/admin-settings/playbackSettings.utils.ts
index d7ef83150..4f4480749 100644
--- a/web/src/pages/admin-settings/playbackSettings.utils.ts
+++ b/web/src/pages/admin-settings/playbackSettings.utils.ts
@@ -1,3 +1,4 @@
+import type { StreamNode } from "@/api/types";
 import type { HWAccelInfo } from "@/hooks/queries/admin/system";
 
 // Helpers for the playback.hw_device GPU picker. The setting stores a
@@ -98,6 +99,63 @@ export function nodeInventoriesDiverge(
   return inventories.length > 1 && new Set(inventories).size > 1;
 }
 
+// Helpers for the "Generate chapter thumbnails on" select. Two of its three
+// modes need a transcode node to run on: `transcode_nodes_only` fails every
+// extraction without one, and `prefer_transcode_nodes` silently degrades to
+// local — so both are offered only when the node pool can actually serve them.
+
+export const CHAPTER_THUMBNAIL_EXECUTION_DEFAULT = "local";
+
+const NODE_BACKED_CHAPTER_THUMBNAIL_MODES = [
+  "prefer_transcode_nodes",
+  "transcode_nodes_only",
+];
+
+/**
+ * True when at least one transcode node could take an extraction. Mirrors the
+ * server's reservation rule (internal/chapterthumbs reserveRemoteNode): a node
+ * counts only while it is both enabled and healthy.
+ */
+export function hasUsableTranscodeNode(
+  nodes: StreamNode[] | undefined,
+): boolean {
+  return (nodes ?? []).some(
+    (node) => node.type === "transcode" && node.enabled && node.healthy,
+  );
+}
+
+export interface ChapterThumbnailExecutionOption {
+  value: string;
+  label: string;
+  disabled: boolean;
+}
+
+/**
+ * Builds the execution options, disabling the node-backed modes when no
+ * transcode node is available. The saved mode is never disabled: pre-configuring
+ * nodes that have not joined yet is legitimate, and a persisted node-only value
+ * has to stay visible and editable so the admin can switch back off it.
+ */
+export function chapterThumbnailExecutionOptions(
+  current: string,
+  transcodeNodeAvailable: boolean,
+): ChapterThumbnailExecutionOption[] {
+  return [
+    { value: CHAPTER_THUMBNAIL_EXECUTION_DEFAULT, label: "This server" },
+    {
+      value: "prefer_transcode_nodes",
+      label: "Transcode nodes when available",
+    },
+    { value: "transcode_nodes_only", label: "Transcode nodes only" },
+  ].map((option) => ({
+    ...option,
+    disabled:
+      !transcodeNodeAvailable &&
+      option.value !== current &&
+      NODE_BACKED_CHAPTER_THUMBNAIL_MODES.includes(option.value),
+  }));
+}
+
 function detectedDevices(
   detection: HWAccelInfo | undefined,
 ): { path: string; description: string }[] {
diff --git a/web/src/pages/admin-settings/settingsPathDefaults.test.ts b/web/src/pages/admin-settings/settingsPathDefaults.test.ts
new file mode 100644
index 000000000..3733136a8
--- /dev/null
+++ b/web/src/pages/admin-settings/settingsPathDefaults.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  DEFAULT_TRANSCODE_DIR,
+  effectiveDownloadArtifactDir,
+} from "./settingsPathDefaults";
+
+// Expectations captured from `config.EffectiveDownloadArtifactDir`
+// (internal/config/config.go) run over the same inputs. This file is the only
+// thing keeping the placeholder honest, so it asserts the awkward cases too.
+describe("effectiveDownloadArtifactDir", () => {
+  it("keeps a configured directory as typed", () => {
+    expect(
+      effectiveDownloadArtifactDir("/mnt/downloads", "/mnt/fast/transcode"),
+    ).toBe("/mnt/downloads");
+  });
+
+  it("derives a sibling of the default transcode dir when both are blank", () => {
+    expect(effectiveDownloadArtifactDir("", "")).toBe(
+      "/tmp/silo-download-artifacts",
+    );
+    expect(effectiveDownloadArtifactDir("", DEFAULT_TRANSCODE_DIR)).toBe(
+      "/tmp/silo-download-artifacts",
+    );
+  });
+
+  it("follows a custom transcode dir", () => {
+    expect(effectiveDownloadArtifactDir("", "/mnt/fast/transcode")).toBe(
+      "/mnt/fast/silo-download-artifacts",
+    );
+    expect(effectiveDownloadArtifactDir("", "/transcode")).toBe(
+      "/silo-download-artifacts",
+    );
+  });
+
+  it("still derives the sibling for a trailing-slash transcode dir", () => {
+    // Nesting inside the transcode root would put prepared downloads where the
+    // orphaned-transcode sweep deletes them; the server cleans the path first.
+    expect(effectiveDownloadArtifactDir("", "/mnt/fast/transcode/")).toBe(
+      "/mnt/fast/silo-download-artifacts",
+    );
+    expect(effectiveDownloadArtifactDir("", "/")).toBe(
+      "/silo-download-artifacts",
+    );
+  });
+
+  it("cleans the derived path the way filepath.Join does", () => {
+    expect(effectiveDownloadArtifactDir("", "/mnt//fast/transcode")).toBe(
+      "/mnt/fast/silo-download-artifacts",
+    );
+    expect(effectiveDownloadArtifactDir("", "/mnt/fast/../transcode")).toBe(
+      "/mnt/silo-download-artifacts",
+    );
+  });
+
+  it("stays relative for relative input, like the server would", () => {
+    expect(effectiveDownloadArtifactDir("", "relative/transcode")).toBe(
+      "relative/silo-download-artifacts",
+    );
+    expect(effectiveDownloadArtifactDir("", "transcode")).toBe(
+      "silo-download-artifacts",
+    );
+  });
+});
diff --git a/web/src/pages/admin-settings/settingsPathDefaults.ts b/web/src/pages/admin-settings/settingsPathDefaults.ts
new file mode 100644
index 000000000..4b3e1b2ff
--- /dev/null
+++ b/web/src/pages/admin-settings/settingsPathDefaults.ts
@@ -0,0 +1,84 @@
+/**
+ * What the server actually uses for the admin path settings that are allowed to
+ * be blank, mirrored from the Go readers that own them:
+ *
+ * - `DefaultTranscodeDir` (`internal/config/config.go`), also the effective
+ *   value the settings API backfills for `playback.transcode_dir`.
+ * - `EffectiveDownloadArtifactDir` (`internal/config/config.go`) for
+ *   `download.artifact_dir`, which has no static default: blank means "a
+ *   sibling of the transcode directory", so the UI has to derive it the same
+ *   way the API and transcode-node processes do.
+ * - The `playback.ffmpeg_path` fallback in `internal/config/db_loader.go`.
+ *
+ * Every path the UI quotes is written once here so the fields cannot drift away
+ * from the pipeline one placeholder at a time, the same way
+ * `web/src/components/admin/brandingAssetSpecs.ts` mirrors the branding asset
+ * rules. Change a value in Go and this module has to change with it.
+ */
+
+/** Fallback for a blank `playback.transcode_dir`. */
+export const DEFAULT_TRANSCODE_DIR = "/tmp/silo-transcode";
+
+/** Fallback for a blank `playback.ffmpeg_path`: the FFmpeg the server ships. */
+export const DEFAULT_FFMPEG_PATH = "/usr/lib/jellyfin-ffmpeg/ffmpeg";
+
+/**
+ * Directory prepared downloads land in when `download.artifact_dir` is blank.
+ * It is a *sibling* of the transcode directory, never a child: the transcode
+ * sweep deletes every non-active subdirectory of its own root.
+ */
+const DOWNLOAD_ARTIFACT_DIR_NAME = "silo-download-artifacts";
+
+/**
+ * Where prepared downloads are written for a given pair of stored settings —
+ * the configured directory when set, otherwise a `silo-download-artifacts`
+ * sibling of the (possibly defaulted) transcode directory.
+ *
+ * Pass the raw stored or staged strings: this mirrors
+ * `config.EffectiveDownloadArtifactDir` exactly. The Go side cleans the
+ * transcode path before taking its parent, so a trailing slash still yields
+ * the sibling directory rather than nesting inside the transcode root.
+ */
+export function effectiveDownloadArtifactDir(
+  artifactDir: string,
+  transcodeDir: string,
+): string {
+  if (artifactDir !== "") return artifactDir;
+  const base = transcodeDir === "" ? DEFAULT_TRANSCODE_DIR : transcodeDir;
+  return joinPath(dirName(cleanPath(base)), DOWNLOAD_ARTIFACT_DIR_NAME);
+}
+
+/** `filepath.Dir`: everything up to the final slash, cleaned. */
+function dirName(path: string): string {
+  const lastSlash = path.lastIndexOf("/");
+  return cleanPath(lastSlash < 0 ? "" : path.slice(0, lastSlash + 1));
+}
+
+/** `filepath.Join` for two non-empty elements. */
+function joinPath(dir: string, name: string): string {
+  return cleanPath(`${dir}/${name}`);
+}
+
+/**
+ * `filepath.Clean` for slash-separated paths: collapses repeated separators and
+ * resolves `.` and `..` lexically, leaving `.` for an empty result.
+ */
+function cleanPath(path: string): string {
+  const rooted = path.startsWith("/");
+  const resolved: string[] = [];
+  for (const segment of path.split("/")) {
+    if (segment === "" || segment === ".") continue;
+    if (segment === "..") {
+      if (resolved.length > 0 && resolved[resolved.length - 1] !== "..") {
+        resolved.pop();
+      } else if (!rooted) {
+        // A relative path keeps the `..` it cannot resolve; `/..` is just `/`.
+        resolved.push("..");
+      }
+      continue;
+    }
+    resolved.push(segment);
+  }
+  const cleaned = (rooted ? "/" : "") + resolved.join("/");
+  return cleaned === "" ? "." : cleaned;
+}
diff --git a/web/src/pages/autoscanSearchParams.test.ts b/web/src/pages/autoscanSearchParams.test.ts
new file mode 100644
index 000000000..658e58b3d
--- /dev/null
+++ b/web/src/pages/autoscanSearchParams.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  buildLegacyAutoscanRedirectTarget,
+  isLegacyAdvancedTab,
+  normalizeTab,
+} from "./autoscanSearchParams";
+
+describe("buildLegacyAutoscanRedirectTarget", () => {
+  it("lands a bare link on the Autoscan tab", () => {
+    expect(buildLegacyAutoscanRedirectTarget("")).toBe(
+      "/admin/libraries?tab=autoscan",
+    );
+  });
+
+  it("translates the legacy tab into the embedded page's view parameter", () => {
+    // `tab` names the Libraries tab now, so the panel's own selection has to
+    // move to `view` or the link silently lands on Sources.
+    expect(buildLegacyAutoscanRedirectTarget("?tab=activity")).toBe(
+      "/admin/libraries?tab=autoscan&view=activity",
+    );
+  });
+
+  it("carries the retired connections and settings tabs through", () => {
+    // AdminAutoscan opens its Advanced section for these, but only if the value
+    // reaches it.
+    expect(buildLegacyAutoscanRedirectTarget("?tab=connections")).toBe(
+      "/admin/libraries?tab=autoscan&view=connections",
+    );
+    expect(buildLegacyAutoscanRedirectTarget("?tab=settings")).toBe(
+      "/admin/libraries?tab=autoscan&view=settings",
+    );
+  });
+
+  it("leaves the default view implicit", () => {
+    // An absent `view` already means Sources, and the panel deletes the param
+    // when Sources is selected.
+    expect(buildLegacyAutoscanRedirectTarget("?tab=sources")).toBe(
+      "/admin/libraries?tab=autoscan",
+    );
+  });
+
+  it("drops a tab value nothing answers to", () => {
+    expect(buildLegacyAutoscanRedirectTarget("?tab=nonsense")).toBe(
+      "/admin/libraries?tab=autoscan",
+    );
+  });
+
+  it("keeps unrelated query parameters", () => {
+    expect(buildLegacyAutoscanRedirectTarget("?tab=activity&source=42")).toBe(
+      "/admin/libraries?tab=autoscan&view=activity&source=42",
+    );
+  });
+
+  it("emits one view even when the old link already used that name", () => {
+    expect(buildLegacyAutoscanRedirectTarget("?view=activity")).toBe(
+      "/admin/libraries?tab=autoscan&view=activity",
+    );
+  });
+});
+
+describe("autoscan tab helpers", () => {
+  it("falls back to Sources for anything it does not serve", () => {
+    expect(normalizeTab("activity")).toBe("activity");
+    expect(normalizeTab("sources")).toBe("sources");
+    expect(normalizeTab("connections")).toBe("sources");
+    expect(normalizeTab(null)).toBe("sources");
+  });
+
+  it("recognises only the two retired tabs as Advanced deep links", () => {
+    expect(isLegacyAdvancedTab("connections")).toBe(true);
+    expect(isLegacyAdvancedTab("settings")).toBe(true);
+    expect(isLegacyAdvancedTab("activity")).toBe(false);
+    expect(isLegacyAdvancedTab(null)).toBe(false);
+  });
+});
diff --git a/web/src/pages/autoscanSearchParams.ts b/web/src/pages/autoscanSearchParams.ts
new file mode 100644
index 000000000..c4a2c18fd
--- /dev/null
+++ b/web/src/pages/autoscanSearchParams.ts
@@ -0,0 +1,64 @@
+/**
+ * The autoscan panel's URL contract, in one place so the page and the legacy
+ * `/admin/autoscan` redirect cannot drift apart about which values mean what.
+ */
+
+export const AUTOSCAN_TABS = ["sources", "activity"] as const;
+export type AutoscanTab = (typeof AUTOSCAN_TABS)[number];
+
+/**
+ * Connections and settings used to be peer tabs, which read as "set these up
+ * first" — most operators never needed either. They now live in an Advanced
+ * section on the Sources view, so their old deep links land on Sources with
+ * that section already open rather than 404-ing into a missing tab.
+ */
+const LEGACY_ADVANCED_TABS = new Set(["connections", "settings"]);
+
+export function normalizeTab(value: string | null): AutoscanTab {
+  return AUTOSCAN_TABS.includes(value as AutoscanTab)
+    ? (value as AutoscanTab)
+    : "sources";
+}
+
+export function isLegacyAdvancedTab(value: string | null): boolean {
+  return value !== null && LEGACY_ADVANCED_TABS.has(value);
+}
+
+/** Every value the panel still reacts to, current or legacy. */
+function isKnownAutoscanView(value: string): boolean {
+  return (
+    AUTOSCAN_TABS.includes(value as AutoscanTab) ||
+    LEGACY_ADVANCED_TABS.has(value)
+  );
+}
+
+/**
+ * Where `/admin/autoscan` sends an old link. Autoscan is a tab on Libraries
+ * now, so `tab` names that tab and the panel's own Sources/Activity selection
+ * moves to `view`. A bookmarked `?tab=activity` therefore has to be translated
+ * rather than dropped, or every old deep link silently lands on Sources.
+ *
+ * "sources" stays implicit — it is what an absent `view` already means, and the
+ * panel drops the param when you select it.
+ */
+export function buildLegacyAutoscanRedirectTarget(search: string): string {
+  const legacy = new URLSearchParams(search);
+  const legacyView = legacy.get("tab") ?? legacy.get("view");
+  legacy.delete("tab");
+  legacy.delete("view");
+
+  const target = new URLSearchParams({ tab: "autoscan" });
+  if (
+    legacyView &&
+    legacyView !== "sources" &&
+    isKnownAutoscanView(legacyView)
+  ) {
+    target.set("view", legacyView);
+  }
+  // Anything else on the old URL is none of this redirect's business; carry it.
+  for (const [key, value] of legacy) {
+    target.append(key, value);
+  }
+
+  return `/admin/libraries?${target.toString()}`;
+}
diff --git a/web/src/pages/livetv/LiveTVTranscodingTab.tsx b/web/src/pages/livetv/LiveTVTranscodingTab.tsx
index c27f7fb1e..4f7e835ec 100644
--- a/web/src/pages/livetv/LiveTVTranscodingTab.tsx
+++ b/web/src/pages/livetv/LiveTVTranscodingTab.tsx
@@ -198,7 +198,6 @@ export function LiveTVTranscodingTab() {
         onSave={form.save}
         onDiscard={form.discard}
         isSaving={form.isSaving}
-        restartRequired={form.restartRequired}
       />
     </div>
   );
diff --git a/web/src/pages/settings/AppearanceSettings.tsx b/web/src/pages/settings/AppearanceSettings.tsx
index 03e8d88fa..d1d36179b 100644
--- a/web/src/pages/settings/AppearanceSettings.tsx
+++ b/web/src/pages/settings/AppearanceSettings.tsx
@@ -7,7 +7,7 @@ import {
   useDateTimeFormat,
   useDateTimeFormatSettings,
 } from "@/hooks/useDateTimeFormat";
-import { useTheme } from "@/hooks/useTheme";
+import { isKeyboardFocus, useTheme } from "@/hooks/useTheme";
 import { formatDate, formatTime } from "@/lib/datetime";
 import type {
   DateFormatPreference,
@@ -65,7 +65,12 @@ export default function AppearanceSettings() {
                 key={id}
                 type="button"
                 onClick={() => setTheme(id)}
-                onFocus={() => previewTheme(id)}
+                // Pointer focus already previews through onMouseEnter (behind
+                // the hover-intent delay); previewing on every focus would
+                // short-circuit it. Keyboard focus only.
+                onFocus={(event) => {
+                  if (isKeyboardFocus(event.currentTarget)) previewTheme(id);
+                }}
                 onBlur={resetPreviewTheme}
                 onMouseEnter={() => previewTheme(id)}
                 onMouseLeave={resetPreviewTheme}
@@ -215,10 +220,10 @@ export default function AppearanceSettings() {
           </div>
           <button
             type="button"
-            onClick={() => setTheme("prairie-dusk")}
+            onClick={() => setTheme("midnight-cinema")}
             className="border-border text-foreground hover:bg-accent inline-flex h-8 items-center justify-center rounded-md border px-3 text-sm font-medium transition-colors"
           >
-            Reset to Prairie Dusk
+            Reset to Cinema Dark
           </button>
         </div>
       </SettingsGroup>
diff --git a/web/src/pages/settings/CardOverlaySettings.test.tsx b/web/src/pages/settings/CardOverlaySettings.test.tsx
new file mode 100644
index 000000000..deb932af0
--- /dev/null
+++ b/web/src/pages/settings/CardOverlaySettings.test.tsx
@@ -0,0 +1,117 @@
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import CardOverlaySettings from "./CardOverlaySettings";
+
+const mocks = vi.hoisted(() => ({
+  overlaysEnabled: true,
+  setOverlaysEnabled: vi.fn(),
+  setQuickActionsEnabled: vi.fn(),
+}));
+
+vi.mock("@/hooks/useOverlayPrefs", () => ({
+  useOverlayPrefs: () => ({
+    prefs: null,
+    setPrefs: vi.fn(),
+    quickActionPreference: "favorites",
+    setQuickActionMode: vi.fn(),
+    quickActionsEnabled: false,
+    setQuickActionsEnabled: mocks.setQuickActionsEnabled,
+    overlaysEnabled: mocks.overlaysEnabled,
+    setOverlaysEnabled: mocks.setOverlaysEnabled,
+    isLoading: false,
+  }),
+}));
+
+vi.mock("@/components/overlays/OverlayPreviewCard", () => ({
+  OverlayPreviewCard: () => <div>Overlay preview</div>,
+}));
+
+vi.mock("@/components/ui/select", () => ({
+  Select: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  SelectContent: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  SelectItem: ({ children, value }: { children: ReactNode; value: string }) => (
+    <div data-value={value}>{children}</div>
+  ),
+  SelectTrigger: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  SelectValue: () => null,
+}));
+
+function switchMarkup(markup: string, label: string) {
+  return markup.match(
+    new RegExp(`<button[^>]*aria-label="${label}"[^>]*>`),
+  )?.[0];
+}
+
+describe("CardOverlaySettings", () => {
+  beforeEach(() => {
+    mocks.overlaysEnabled = true;
+    mocks.setOverlaysEnabled.mockReset();
+    mocks.setQuickActionsEnabled.mockReset();
+  });
+
+  it("places the profile quick-action override above the overlay preview", () => {
+    const markup = renderToStaticMarkup(<CardOverlaySettings />);
+
+    expect(markup).toContain("Override the server defaults for this profile.");
+    expect(markup).toContain("Card quick actions");
+    expect(markup).toContain("Both");
+    expect(markup).toContain("Favorites only");
+    expect(markup).toContain("Watch indicator only");
+    expect(markup.indexOf("Card quick actions")).toBeLessThan(
+      markup.indexOf("Overlay preview"),
+    );
+    expect(markup).toContain('aria-label="Enable card quick actions"');
+  });
+
+  it("keeps the profile quick-action switch operable when the server default is off", () => {
+    const markup = renderToStaticMarkup(<CardOverlaySettings />);
+
+    expect(markup).not.toContain(
+      "Card quick actions have been disabled by your server",
+    );
+    const quickActionsSwitch = switchMarkup(
+      markup,
+      "Enable card quick actions",
+    );
+    expect(quickActionsSwitch).toBeDefined();
+    // Tailwind `disabled:` variants live in the class list, so match the
+    // rendered attribute rather than the bare word.
+    expect(quickActionsSwitch).not.toContain('disabled=""');
+    expect(quickActionsSwitch).not.toContain("data-disabled");
+  });
+
+  it("offers a profile overlay-badge switch above the badge configuration", () => {
+    const markup = renderToStaticMarkup(<CardOverlaySettings />);
+
+    expect(markup).toContain("Card overlay badges");
+    expect(markup).toContain('aria-label="Enable card overlay badges"');
+    expect(markup.indexOf("Card overlay badges")).toBeLessThan(
+      markup.indexOf("Overlay preview"),
+    );
+    expect(markup).not.toContain("pointer-events-none opacity-50");
+  });
+
+  it("dims the badge configuration but keeps its switch operable when overlays are off", () => {
+    mocks.overlaysEnabled = false;
+    const markup = renderToStaticMarkup(<CardOverlaySettings />);
+
+    expect(markup).not.toContain(
+      "Card overlays have been disabled by your server",
+    );
+    expect(markup).toContain("pointer-events-none opacity-50");
+    const overlaysSwitch = switchMarkup(markup, "Enable card overlay badges");
+    expect(overlaysSwitch).toBeDefined();
+    expect(overlaysSwitch).not.toContain('disabled=""');
+    expect(overlaysSwitch).not.toContain("data-disabled");
+    // The switch sits outside the dimmed region.
+    expect(
+      markup.indexOf('aria-label="Enable card overlay badges"'),
+    ).toBeLessThan(markup.indexOf("pointer-events-none opacity-50"));
+  });
+});
diff --git a/web/src/pages/settings/CardOverlaySettings.tsx b/web/src/pages/settings/CardOverlaySettings.tsx
index da49e29aa..927610f8e 100644
--- a/web/src/pages/settings/CardOverlaySettings.tsx
+++ b/web/src/pages/settings/CardOverlaySettings.tsx
@@ -1,9 +1,14 @@
 import { useId, useState, type ReactNode } from "react";
-import { Check, ImageIcon, ImageOff, X } from "lucide-react";
+import { Check, ImageIcon, ImageOff, RotateCcw, X } from "lucide-react";
 import { toast } from "sonner";
 
+import { ConfirmDialog } from "@/components/ConfirmDialog";
 import { SettingsGroup } from "@/components/settings/SettingsGroup";
-import { OverlayPreviewCard } from "@/components/overlays/OverlayPreviewCard";
+import {
+  OverlayPreviewCard,
+  type OverlayPreviewVariant,
+} from "@/components/overlays/OverlayPreviewCard";
+import { OverlayPreviewVariantToggle } from "@/components/overlays/OverlayPreviewVariantToggle";
 import { useOverlayPrefs } from "@/hooks/useOverlayPrefs";
 import {
   ACCENT_PALETTE,
@@ -36,6 +41,10 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  CARD_QUICK_ACTION_OPTIONS,
+  type EnabledCardQuickActionMode,
+} from "@/lib/cardQuickActions";
 
 interface SettingRowProps {
   label: string;
@@ -219,7 +228,7 @@ function OverlayToggle({ overlayId, prefs, onUpdate }: OverlayToggleProps) {
               })
             }
           >
-            <SelectTrigger className="w-full sm:w-[140px]">
+            <SelectTrigger className="w-[140px]">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -295,16 +304,57 @@ function PresetPicker({ value, onChange }: PresetPickerProps) {
 }
 
 export default function CardOverlaySettings() {
-  const { prefs, setPrefs, isLoading, enabled } = useOverlayPrefs();
-  const [previewVariant, setPreviewVariant] = useState<"movie" | "show">(
-    "movie",
-  );
+  const {
+    prefs,
+    setPrefs,
+    quickActionPreference,
+    setQuickActionMode,
+    quickActionsEnabled,
+    setQuickActionsEnabled,
+    overlaysEnabled,
+    setOverlaysEnabled,
+    resetPrefs,
+    hasOverride,
+    isResetting,
+    isLoading,
+  } = useOverlayPrefs();
+  const [previewVariant, setPreviewVariant] =
+    useState<OverlayPreviewVariant>("movie");
+  const [confirmRestoreOpen, setConfirmRestoreOpen] = useState(false);
 
   const handleUpdate = (next: CardOverlayPrefs) => {
     setPrefs(next);
     toast.success("Setting saved");
   };
 
+  const handleQuickActionModeChange = (next: EnabledCardQuickActionMode) => {
+    setQuickActionMode(next);
+    toast.success("Setting saved");
+  };
+
+  const handleQuickActionsEnabledChange = (next: boolean) => {
+    setQuickActionsEnabled(next);
+    toast.success("Setting saved");
+  };
+
+  const handleOverlaysEnabledChange = (next: boolean) => {
+    setOverlaysEnabled(next);
+    toast.success("Setting saved");
+  };
+
+  // Removing the profile document is what puts this profile back on the
+  // server defaults for good: a copy of today's server values would freeze
+  // this profile at them and ignore every later change the admin makes.
+  const handleRestoreServerDefaults = async () => {
+    try {
+      await resetPrefs();
+      setConfirmRestoreOpen(false);
+      toast.success("Restored the server's default badges");
+    } catch {
+      toast.error("Failed to restore the server's default badges");
+    }
+  };
+
   if (isLoading) return null;
   const displayPrefs = prefs ?? buildDefaultPrefs();
 
@@ -315,21 +365,105 @@ export default function CardOverlaySettings() {
           Card Overlays
         </h2>
         <p className="text-muted-foreground max-w-2xl text-sm leading-relaxed">
-          Choose which badges appear on poster cards, where they sit, and how
-          they look. Inspired by Kometa.
+          Choose the quick actions and badges shown on media cards, where badges
+          sit, and how they look. Inspired by Kometa.
         </p>
       </div>
 
-      {!enabled && (
-        <div className="surface-panel-subtle rounded-2xl border px-4 py-3 text-sm">
-          Card overlays have been disabled by your server administrator.
-        </div>
-      )}
+      <SettingsGroup
+        title="General"
+        description="Override the server defaults for this profile."
+      >
+        <SettingRow
+          label="Card quick actions"
+          description="Choose the favorite and watched shortcuts shown for this profile."
+          control={({ id }) => (
+            <div className="flex items-center gap-2">
+              <Select
+                value={quickActionPreference}
+                disabled={!quickActionsEnabled}
+                onValueChange={(value) =>
+                  handleQuickActionModeChange(
+                    value as EnabledCardQuickActionMode,
+                  )
+                }
+              >
+                <SelectTrigger
+                  className="w-[190px]"
+                  aria-label="Card quick action mode"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {CARD_QUICK_ACTION_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Switch
+                id={id}
+                checked={quickActionsEnabled}
+                onCheckedChange={handleQuickActionsEnabledChange}
+                aria-label="Enable card quick actions"
+              />
+            </div>
+          )}
+        />
+        <SettingRow
+          label="Card overlay badges"
+          description="Show overlay badges on media cards for this profile."
+          control={({ id }) => (
+            <Switch
+              id={id}
+              checked={overlaysEnabled}
+              onCheckedChange={handleOverlaysEnabledChange}
+              aria-label="Enable card overlay badges"
+            />
+          )}
+        />
+      </SettingsGroup>
+
+      <ConfirmDialog
+        open={confirmRestoreOpen}
+        onOpenChange={setConfirmRestoreOpen}
+        title="Restore default server settings"
+        description="Discard your badge customizations and follow the server defaults again, including any the administrator changes later. This cannot be undone."
+        confirmLabel="Restore"
+        variant="destructive"
+        isPending={isResetting}
+        onConfirm={() => {
+          void handleRestoreServerDefaults();
+        }}
+      />
 
-      <div className={enabled ? "" : "pointer-events-none opacity-50"}>
+      {/* `inert`, not just pointer-events: the controls must also be
+          unreachable by keyboard and invisible to assistive tech while card
+          overlays are disabled for this profile. */}
+      <div
+        inert={!overlaysEnabled}
+        className={overlaysEnabled ? "" : "pointer-events-none opacity-50"}
+      >
         <SettingsGroup
           title="Preview"
           description="Live preview of your current overlay configuration."
+          actions={
+            hasOverride ? (
+              <button
+                type="button"
+                onClick={() => setConfirmRestoreOpen(true)}
+                className="text-muted-foreground hover:text-destructive inline-flex items-center gap-1.5 text-xs font-medium transition-colors"
+              >
+                <RotateCcw className="h-3 w-3" aria-hidden="true" />
+                Restore default server settings
+              </button>
+            ) : (
+              <span className="text-muted-foreground text-xs">
+                Following the server defaults
+              </span>
+            )
+          }
         >
           <div className="flex flex-col items-center gap-4">
             <OverlayPreviewCard
@@ -337,22 +471,10 @@ export default function CardOverlaySettings() {
               variant={previewVariant}
               size="md"
             />
-            <div className="flex gap-1.5">
-              {(["movie", "show"] as const).map((v) => (
-                <button
-                  key={v}
-                  type="button"
-                  onClick={() => setPreviewVariant(v)}
-                  className={`rounded-full border px-3 py-1 text-xs font-medium capitalize transition-colors ${
-                    previewVariant === v
-                      ? "border-primary bg-primary/10 text-primary"
-                      : "border-border/60 hover:border-border text-muted-foreground"
-                  }`}
-                >
-                  {v}
-                </button>
-              ))}
-            </div>
+            <OverlayPreviewVariantToggle
+              value={previewVariant}
+              onChange={setPreviewVariant}
+            />
           </div>
         </SettingsGroup>
 
@@ -421,7 +543,9 @@ export default function CardOverlaySettings() {
                 <li>
                   <strong className="text-foreground">Position</strong> picks
                   which corner the badge sits in. Multiple badges in the same
-                  corner stack vertically.
+                  corner stack vertically. Bottom corners share space with the
+                  card's quick actions, which draw over the badge while they
+                  show.
                 </li>
               </ul>
             </SettingsGroup>
diff --git a/web/src/pages/setup-wizard/steps/ServerStorageStep.test.tsx b/web/src/pages/setup-wizard/steps/ServerStorageStep.test.tsx
index 3ea05791e..8acb04ea6 100644
--- a/web/src/pages/setup-wizard/steps/ServerStorageStep.test.tsx
+++ b/web/src/pages/setup-wizard/steps/ServerStorageStep.test.tsx
@@ -24,6 +24,11 @@ const useWizardContextMock = vi.fn();
 const useCheckAdminSettingsConnectionMock = vi.fn();
 const useJellyfinCompatStatusMock = vi.fn();
 const useInstallJellyfinCompatWebMock = vi.fn();
+const useQueryMock = vi.fn();
+
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: (...args: unknown[]) => useQueryMock(...args),
+}));
 
 vi.mock("@/hooks/useSettingsForm", () => ({
   useSettingsForm: (...args: unknown[]) => useSettingsFormMock(...args),
@@ -80,6 +85,7 @@ function mockStep({
     canGoBack: false,
     goBack: vi.fn(),
   });
+  useQueryMock.mockReturnValue({ data: null });
   useCheckAdminSettingsConnectionMock.mockReturnValue({
     isPending: false,
     mutateAsync: vi.fn(),
diff --git a/web/src/pages/setup-wizard/steps/ServerStorageStep.tsx b/web/src/pages/setup-wizard/steps/ServerStorageStep.tsx
index bd5110d07..df8363e6d 100644
--- a/web/src/pages/setup-wizard/steps/ServerStorageStep.tsx
+++ b/web/src/pages/setup-wizard/steps/ServerStorageStep.tsx
@@ -1,5 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
 import type { FormEvent } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { ApiClientError, api } from "@/api/client";
 import type { ConnectionCheckResponse } from "@/api/types";
 import { ConnectionCheckAction } from "@/components/admin/ConnectionCheckAction";
 import { Badge } from "@/components/ui/badge";
@@ -20,9 +22,6 @@ import {
   CheckCircle2,
   ChevronRight,
   Download,
-  Loader2,
-  Save,
-  SkipForward,
 } from "lucide-react";
 import { toast } from "sonner";
 import {
@@ -34,7 +33,6 @@ import { hasPinnedJellyfinWebInstalled } from "@/lib/jellyfinCompat";
 import { useSettingsForm } from "@/hooks/useSettingsForm";
 import { SettingField } from "@/pages/admin-settings/SettingField";
 import { useWizardContext } from "../WizardContext";
-import { WizardActions } from "../WizardActions";
 
 const SERVER_KEYS = [
   "redis.url",
@@ -76,6 +74,18 @@ const ALL_KEYS = [
   ...META_KEYS,
 ];
 
+async function fetchSettingValue(key: string): Promise<string | null> {
+  try {
+    const result = await api<{ key: string; value: string }>(
+      `/admin/settings/${encodeURIComponent(key)}`,
+    );
+    return result?.value ?? null;
+  } catch (err) {
+    if (err instanceof ApiClientError && err.status === 404) return null;
+    throw err;
+  }
+}
+
 function Section({
   label,
   description,
@@ -151,7 +161,6 @@ function KeyPrefixField({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder="prairie/dev"
-        autoComplete="off"
       />
       <p className="text-muted-foreground/70 text-xs">
         Optional. Stores all Prairie objects under this folder inside the
@@ -182,12 +191,23 @@ export function ServerStorageStep() {
     useState(false);
   const [publicExpanded, setPublicExpanded] = useState(true);
   const [privateExpanded, setPrivateExpanded] = useState(false);
+  const [redisHydrated, setRedisHydrated] = useState(false);
   const [redisConnectionResult, setRedisConnectionResult] =
     useState<ConnectionCheckResponse | null>(null);
   const [publicS3ConnectionResult, setPublicS3ConnectionResult] =
     useState<ConnectionCheckResponse | null>(null);
   const [privateS3ConnectionResult, setPrivateS3ConnectionResult] =
     useState<ConnectionCheckResponse | null>(null);
+  const redisQuery = useQuery({
+    queryKey: ["setup-wizard", "setting", "redis.url"],
+    queryFn: () => fetchSettingValue("redis.url"),
+  });
+
+  useEffect(() => {
+    if (redisHydrated || !redisQuery.data) return;
+    setRedisHydrated(true);
+    form.setValue("redis.url", redisQuery.data);
+  }, [redisQuery.data, redisHydrated, form]);
 
   const redisUrl = form.getValue("redis.url");
   const redisManagedByEnv = form.sensitiveManagedByEnv.includes("redis.url");
@@ -380,7 +400,6 @@ export function ServerStorageStep() {
                 form.setValue("playback.ffmpeg_path", e.target.value)
               }
               placeholder="/usr/lib/jellyfin-ffmpeg/ffmpeg"
-              autoComplete="off"
             />
           </div>
           <div className="space-y-1.5">
@@ -394,7 +413,6 @@ export function ServerStorageStep() {
                 form.setValue("playback.transcode_dir", e.target.value)
               }
               placeholder="/tmp/prairie-transcode"
-              autoComplete="off"
             />
           </div>
         </div>
@@ -422,24 +440,20 @@ export function ServerStorageStep() {
               </SelectContent>
             </Select>
           </div>
-          <div className="space-y-1.5">
+          <div className="flex items-center gap-2 pb-1.5">
+            <Switch
+              id="setup-transcode-enabled"
+              checked={form.getValue("playback.transcode_enabled") !== "false"}
+              onCheckedChange={(v) =>
+                form.setValue(
+                  "playback.transcode_enabled",
+                  v ? "true" : "false",
+                )
+              }
+            />
             <Label htmlFor="setup-transcode-enabled" className="text-xs">
               Transcoding
             </Label>
-            <div className="flex h-9 items-center">
-              <Switch
-                id="setup-transcode-enabled"
-                checked={
-                  form.getValue("playback.transcode_enabled") !== "false"
-                }
-                onCheckedChange={(v) =>
-                  form.setValue(
-                    "playback.transcode_enabled",
-                    v ? "true" : "false",
-                  )
-                }
-              />
-            </div>
           </div>
         </div>
       </Section>
@@ -490,7 +504,6 @@ export function ServerStorageStep() {
                 form.setValue("jellyfin_compat.public_url", e.target.value)
               }
               placeholder="http://your-server:8096"
-              autoComplete="off"
             />
           </div>
           <div className="space-y-1.5">
@@ -504,7 +517,6 @@ export function ServerStorageStep() {
                 form.setValue("jellyfin_compat.server_name", e.target.value)
               }
               placeholder="Prairie"
-              autoComplete="off"
             />
           </div>
         </div>
@@ -521,7 +533,6 @@ export function ServerStorageStep() {
                   form.setValue("jellyfin_compat.web_version", e.target.value)
                 }
                 placeholder="Auto-select compatible release"
-                autoComplete="off"
               />
               <p className="text-muted-foreground/70 text-xs">
                 Optional. Leave blank to use the latest compatible released
@@ -545,7 +556,6 @@ export function ServerStorageStep() {
                   )
                 }
                 placeholder="Use Prairie managed directory"
-                autoComplete="off"
               />
               <p className="text-muted-foreground/70 text-xs">
                 Optional. Defaults to{" "}
@@ -680,7 +690,6 @@ export function ServerStorageStep() {
                 form.setValue("s3.public_endpoint", e.target.value)
               }
               placeholder="https://s3.amazonaws.com"
-              autoComplete="off"
             />
           </div>
           <div className="space-y-1.5">
@@ -690,7 +699,6 @@ export function ServerStorageStep() {
               onChange={(e) =>
                 form.setValue("s3.public_bucket", e.target.value)
               }
-              autoComplete="off"
             />
           </div>
         </div>
@@ -765,7 +773,6 @@ export function ServerStorageStep() {
                 form.setValue("s3.private_endpoint", e.target.value)
               }
               placeholder="https://s3.amazonaws.com"
-              autoComplete="off"
             />
           </div>
           <div className="space-y-1.5">
@@ -775,7 +782,6 @@ export function ServerStorageStep() {
               onChange={(e) =>
                 form.setValue("s3.private_bucket", e.target.value)
               }
-              autoComplete="off"
             />
           </div>
         </div>
@@ -815,11 +821,11 @@ export function ServerStorageStep() {
         <div className="flex items-center justify-between">
           <div>
             <p className="text-muted-foreground text-[11px] font-semibold tracking-[0.1em] uppercase">
-              Image caching
+              S3 Image Caching
             </p>
             <p className="text-muted-foreground/70 mt-0.5 text-xs">
-              Cache artwork as WebP/AVIF/PNG variants (public S3 when
-              configured, otherwise local storage).
+              Copies posters and backdrops from metadata providers into your
+              public S3 bucket instead of proxying external URLs.
             </p>
           </div>
           <Switch
@@ -833,13 +839,8 @@ export function ServerStorageStep() {
         </div>
       </div>
 
-      <WizardActions className="flex flex-wrap gap-3 pt-4">
+      <div className="flex gap-3 pt-4">
         <Button type="submit" disabled={submitting || form.isSaving}>
-          {submitting || form.isSaving ? (
-            <Loader2 className="animate-spin" />
-          ) : (
-            <Save />
-          )}
           {submitting || form.isSaving ? "Saving..." : "Save & continue"}
         </Button>
         <Button
@@ -848,10 +849,9 @@ export function ServerStorageStep() {
           onClick={handleSkip}
           disabled={submitting || form.isSaving}
         >
-          <SkipForward />
           Skip
         </Button>
-      </WizardActions>
+      </div>
     </form>
   );
 }
diff --git a/web/src/player/hooks/useCoarsePointer.ts b/web/src/player/hooks/useCoarsePointer.ts
index 3493eb55f..20745cf25 100644
--- a/web/src/player/hooks/useCoarsePointer.ts
+++ b/web/src/player/hooks/useCoarsePointer.ts
@@ -1,22 +1,7 @@
-import { useEffect, useState } from "react";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 
 const QUERY = "(pointer: coarse)";
 
 export function useCoarsePointer(): boolean {
-  const [isCoarse, setIsCoarse] = useState(() =>
-    typeof window === "undefined" || !window.matchMedia
-      ? false
-      : window.matchMedia(QUERY).matches,
-  );
-
-  useEffect(() => {
-    if (!window.matchMedia) return;
-    const media = window.matchMedia(QUERY);
-    const update = () => setIsCoarse(media.matches);
-    update();
-    media.addEventListener("change", update);
-    return () => media.removeEventListener("change", update);
-  }, []);
-
-  return isCoarse;
+  return useMediaQuery(QUERY);
 }
diff --git a/web/src/styles/admin-settings.css b/web/src/styles/admin-settings.css
new file mode 100644
index 000000000..955881c57
--- /dev/null
+++ b/web/src/styles/admin-settings.css
@@ -0,0 +1,74 @@
+/* ================================================================
+   Admin settings — accent tokens
+   ================================================================
+   The app themes carry no hue accent: `--accent` is a raised surface
+   colour, not a brand hue. One violet carries the active rail item, the
+   advanced-disclosure rail, and the save pill, so it is defined once
+   here instead of being hardcoded per component.
+
+   Imported by the admin settings primitives that reference it
+   (SettingField, AdvancedSection, SaveBar, ProviderTile); Vite dedupes
+   the repeated import.
+   ================================================================ */
+
+:root {
+  --settings-accent: #a78bfa;
+  /* 15% alpha variant for tinted bleeds and soft chip fills. */
+  --settings-accent-soft: color-mix(
+    in srgb,
+    var(--settings-accent) 15%,
+    transparent
+  );
+  /* Slightly stronger, for 1px hairlines that still have to read as violet. */
+  --settings-accent-line: color-mix(
+    in srgb,
+    var(--settings-accent) 32%,
+    transparent
+  );
+}
+
+/* ================================================================
+   Settings rows — alignment contract
+   ================================================================
+   Every settings row is three zones, left to right:
+
+     [ label + description ]   [ control ]   [ unit ]
+
+   The control zone is right-aligned, so an input, a select, a switch
+   and a slider all end on the same vertical edge. The unit zone is a
+   fixed-width trailing slot that is reserved whether or not the row
+   fills it — that reservation is the whole point: without it
+   "Maximum log size [ 500 ] MB" pushes its input left by the width of
+   "MB" while "Maximum log entries [ 1000 ]" sits flush, and a column of
+   number fields comes out ragged.
+
+   Widths are per control kind, not per row, so a number box stays a
+   number box beside a full-width text box and the two still share
+   their right edge. Consume them through `SETTINGS_CONTROL_WIDTH` /
+   `SETTINGS_NUMBER_WIDTH` in SettingField.tsx rather than re-deriving
+   a width per page.
+   ================================================================ */
+
+:root {
+  /* Text, password, and select controls. */
+  --settings-control-w: 15rem;
+  /* Number controls: the values are short, so the box is narrower. */
+  --settings-control-w-num: 10rem;
+  /* Trailing unit slot; sized for the longest unit in use ("per minute"). */
+  --settings-unit-w: 4rem;
+}
+
+/*
+ * A stack of settings rows, hairline-ruled between them and not after the last.
+ * Each separator has exactly one owner: `SettingFieldRow` rules itself (its
+ * `.settings-field-row` class opts it out here, so a row directly in a list is
+ * never double-ruled), and this rule covers the custom blocks (action rows,
+ * notes, wrappers) that sit between fields, which a row's own border cannot.
+ */
+.settings-field-list > *:not(.settings-field-row) {
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
+}
+
+.settings-field-list > *:last-child {
+  border-bottom: 0;
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index cfde9776e..0ab68a1b6 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -104,10 +104,6 @@ export default defineConfig(({ mode }) => {
       pool: "forks",
       fileParallelism: true,
       maxWorkers: "50%",
-      // Enforce 95% on pure helpers under src/lib/. Prefer modules that already
-      // have *.test.ts coverage; write tests before adding a file here.
-      // Thin React Query / mutation wrappers are left out until they are
-      // meaningfully unit-tested.
       coverage: {
         provider: "v8",
         include: [
@@ -133,8 +129,6 @@ export default defineConfig(({ mode }) => {
           "src/lib/queryInvalidation.ts",
           "src/utils/storage.ts",
         ],
-        // Per-shard runs only see a slice of tests; enforce thresholds on the
-        // merged report (CI sets VITEST_SHARD=1). Local/full runs keep the gate.
         thresholds: process.env.VITEST_SHARD
           ? undefined
           : {