feat(offline): play downloaded video, and drain the offline sync queue (0.4.6)

Bundles this session's work plus the concurrent search/offline/player changes.
Every gate passes on the combined tree: 885 frontend tests, 610 Rust tests,
clippy clean, boundary clean, trace coverage 86%.

Offline video playback — four separate defects, each of which alone stopped it:

  DR-133  A completed download's file_path is already absolute (the worker
          rewrites it on completion), but the player rooted it a second time and
          handed the webview /data/user/0/app//data/user/0/app/videos/x.mp4.
  DR-134  The asset protocol was never enabled: no protocol-asset feature and no
          assetProtocol config, so convertFileSrc produced URLs nothing answered.
          Also silently defeated the cached-thumbnail path, which fails soft to
          the server copy and hid it whenever the server was reachable.
  DR-137  Tauri's asset protocol answers a range-less request by reading the
          whole file into memory, and only advertises Accept-Ranges from inside
          its range branch, so the first request never learns ranges exist.
          Chromium gave up with PIPELINE_ERROR_READ after ~31s. Local media is
          now served by a loopback HTTP server: bounded 4 MiB chunks streamed
          from the file handle, every response length-delimited, and a range-less
          request answered with one chunk rather than the file. Confined by a
          per-session token and to the app data directory, because loopback is
          shared between apps on Android.
  DR-138  Release builds set usesCleartextTraffic=false, so Android rejected the
          request to that server before any I/O. A network-security-config
          exempts 127.0.0.1 only; a remote server must still be HTTPS.

Downloads:

  DR-135  download_item never records media_type and the reconnect resolver read
          that NULL as 'audio', so a movie queued from a media card had its URL
          resolved by get_audio_stream_url and completed as an audio-only
          transcode. The item's own type now decides.
  DR-136  Rows already downloaded that way are requeued on reconnect, since
          prevention alone leaves them reading "downloaded" and still unplayable.

Known limitation: a download taken at `original` quality is a byte copy of the
source, so it can be any container. One such file is an AVI holding XVID, which
the webview cannot play in any case — the media server serves it correctly and
Chromium refuses it. That needs either a transcoded download preset or the
native ExoPlayer surface work, and is not addressed here.

Also fixes two ID collisions between concurrent work: DR-143 defined twice
(search vs offline gate) and UT-131 defined twice (Episode Focus hero vs channel
cap). The search requirement is now DR-147 and the channel-cap test UT-141, with
their code references and matrix rows updated.

src/lib/api/bindings.ts

@@ -873,6 +873,22 @@ async markDownloadCompleted(downloadId: number, bytesDownloaded: number, filePat
 async markDownloadFailed(downloadId: number, errorMessage: string) : Promise<null> {
     return await TAURI_INVOKE("mark_download_failed", { downloadId, errorMessage });
 },
+/**
+ * A playable URL for a downloaded file on disk.
+ * 
+ * Local media is served over a loopback HTTP server rather than handed to the
+ * webview as a `file://`/asset URL, because the asset protocol cannot stream a
+ * large file — it answers a range-less request with the whole thing, which
+ * Chromium abandons. See `media_server` for why real HTTP is used.
+ * 
+ * The returned URL carries the server's per-session token, so it is only valid
+ * for this run of the app and must not be persisted.
+ * 
+ * TRACES: UR-071 | DR-137
+ */
+async mediaLocalUrl(path: string) : Promise<string> {
+    return await TAURI_INVOKE("media_local_url", { path });
+},
 /**
  * Start downloading a file immediately
  * This command actually downloads the file using the worker
@@ -1130,6 +1146,14 @@ async syncMarkFailed(id: number, error: string) : Promise<null> {
 async syncGetPendingCount(userId: string) : Promise<number> {
     return await TAURI_INVOKE("sync_get_pending_count", { userId });
 },
+/**
+ * Push the queue now, on the user's say-so, instead of waiting for a reconnect.
+ * 
+ * TRACES: UR-025 | DR-132
+ */
+async syncProcessPending() : Promise<DrainReport> {
+    return await TAURI_INVOKE("sync_process_pending");
+},
 /**
  * Delete completed sync operations older than specified days
  */
@@ -1879,6 +1903,26 @@ export type DownloadVideoRequest = { itemId: string; userId: string; filePath: s
  * Enhanced response with pre-computed stats
  */
 export type DownloadsResponse = { downloads: DownloadInfo[]; stats: DownloadStats }
+/**
+ * What a drain did, for logging and for the frontend's "Sync now" button.
+ */
+export type DrainReport = { 
+/**
+ * Rows that reached the server and are now `completed`.
+ */
+pushed: number; 
+/**
+ * Rows that failed and will be retried on the next reconnect.
+ */
+deferred: number; 
+/**
+ * Rows that exhausted `MAX_SYNC_ATTEMPTS` and were given up on.
+ */
+abandoned: number; 
+/**
+ * Rows still waiting afterwards (what the badge counts).
+ */
+remaining: number }
 /**
  * Built-in equalizer presets. A preset *is* a gain curve defined by the band
  * layout above (a domain concept), not a mere label — the curve numbers live
@@ -2750,7 +2794,15 @@ mime_type: string }
 /**
  * Sync queue item returned to frontend
  */
-export type SyncQueueItem = { id: number; userId: string; operation: string; itemId: string | null; payload: string | null; status: string; retryCount: number; createdAt: string | null; errorMessage: string | null }
+export type SyncQueueItem = { id: number; userId: string; operation: string; itemId: string | null; payload: string | null; status: string; retryCount: number; createdAt: string | null; errorMessage: string | null; 
+/**
+ * Cached title of the item the operation is about, when the catalog knows
+ * it. Resolved here rather than by a per-row frontend fetch — the queue
+ * list is otherwise a wall of opaque ids.
+ * 
+ * TRACES: UR-025 | DR-132
+ */
+itemName: string | null }
 /**
  * Statistics about the thumbnail cache
  */

src/lib/components/AppHeader.svelte

@@ -1,19 +1,22 @@
 <!--
   Shared application header. Lifted out of the library layout so the account
   menu (and desktop nav) are available on every authenticated, non-immersive
-  screen, not only under /library. Routes that need in-header search (the
-  library layout) pass it in via the `search` snippet; other routes omit it.
+  screen, not only under /library.
+
+  The search box is owned here rather than passed in by a layout, so the same
+  bar renders on the library routes and on /search — searching from the header
+  no longer hands you to a screen with a different input.
 
   TRACES: UR-054 | DR-076
 -->
 <script lang="ts">
-  import type { Snippet } from "svelte";
   import { page } from "$app/stores";
   import AccountMenu from "$lib/components/account/AccountMenu.svelte";
-
-  let { search }: { search?: Snippet } = $props();
+  import HeaderSearch from "$lib/components/search/HeaderSearch.svelte";
+  import { showHeaderSearch } from "$lib/utils/layoutShell";
 
   const pathname = $derived($page.url.pathname);
+  const withSearch = $derived(showHeaderSearch({ pathname }));
 </script>
 
 <header class="sticky top-0 z-50 bg-[var(--color-background)]/95 backdrop-blur border-b border-gray-800 flex-shrink-0">
@@ -51,10 +54,10 @@
       </a>
     </nav>
 
-    <!-- Optional in-header search (library layout supplies it). -->
-    {#if search}
-      <div class="flex-1 max-w-md hidden md:block space-y-2">
-        {@render search()}
+    <!-- In-header search: the single md+ search input (library + /search). -->
+    {#if withSearch}
+      <div class="flex-1 max-w-md hidden md:block">
+        <HeaderSearch />
       </div>
     {/if}
 

src/lib/components/Search.svelte

@@ -3,9 +3,16 @@
     value?: string;
     placeholder?: string;
     onSearch?: (query: string) => void;
+    /** Exposed so a parent can focus/position the caret (see HeaderSearch). */
+    inputEl?: HTMLInputElement | null;
   }
 
-  let { value = $bindable(""), placeholder = "Search...", onSearch }: Props = $props();
+  let {
+    value = $bindable(""),
+    placeholder = "Search...",
+    onSearch,
+    inputEl = $bindable(null),
+  }: Props = $props();
 
   let debounceTimer: ReturnType<typeof setTimeout>;
 
@@ -39,6 +46,7 @@
   </div>
 
   <input
+    bind:this={inputEl}
     type="text"
     {value}
     {placeholder}

src/lib/components/library/EpisodeFocusView.svelte

@@ -1,11 +1,23 @@
-<!-- TRACES: UR-048 | DR-061, DR-062 -->
+<!--
+  The one and only episode surface (ux-flows §5B.1) — so it carries everything
+  an episode can do, not just Play. A bare Episode page used to exist alongside
+  it with a *different* set of affordances (download, breadcrumbs, cast), which
+  meant opening an episode from Continue Watching silently lost them.
+
+  TRACES: UR-048, UR-058 | DR-061, DR-062, DR-142
+-->
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { truncateMiddle } from "$lib/utils/truncateMiddle";
   import type { MediaItem } from "$lib/api/types";
   import CachedImage from "$lib/components/common/CachedImage.svelte";
   import FavoriteButton from "$lib/components/FavoriteButton.svelte";
+  import VideoDownloadButton from "./VideoDownloadButton.svelte";
+  import CastSection from "./CastSection.svelte";
+  import GenreTags from "./GenreTags.svelte";
+  import RelatedItemsSection from "./RelatedItemsSection.svelte";
   import { favoriteOverrides, resolveIsFavorite } from "$lib/stores/favorites";
+  import { seasonAnchorId } from "./seriesNavigation";
   import {
     isCurrentEpisode as isSameEpisode,
     adjacentEpisodes as computeAdjacent,
@@ -14,12 +26,17 @@
 
   interface Props {
     episode: MediaItem;
-    series: MediaItem;
-    allEpisodes: MediaItem[];
+    /**
+     * The parent series. `null` only for an episode that carries no `seriesId`
+     * (a deep link into a stale cache) — the view still renders, minus the
+     * affordances that need series context.
+     */
+    series?: MediaItem | null;
+    allEpisodes?: MediaItem[];
     onBack?: () => void;
   }
 
-  let { episode, series, allEpisodes, onBack }: Props = $props();
+  let { episode, series = null, allEpisodes = [], onBack }: Props = $props();
 
   // Pure logic lives in ./episodeStrip.ts (unit-tested). Wrap for local use.
   function isCurrentEpisode(ep: MediaItem): boolean {
@@ -28,6 +45,10 @@
 
   const adjacentEpisodes = $derived(() => computeAdjacent(episode, allEpisodes));
 
+  // A strip of exactly one card is the current episode talking to itself — the
+  // spec wants the *next* episodes, so with no siblings there is nothing to show.
+  const hasEpisodeStrip = $derived(adjacentEpisodes().length > 1);
+
   // Compute best backdrop source (no fetch, pure derivation)
   const backdropSource = $derived.by(() => {
     if (episode.backdropImageTags?.[0]) {
@@ -36,12 +57,28 @@
     if (episode.imageId) {
       return { itemId: episode.id, imageType: "Primary" as const, tag: episode.imageId };
     }
-    if (series.backdropImageTags?.[0]) {
+    if (series?.backdropImageTags?.[0]) {
       return { itemId: series.id, imageType: "Backdrop" as const, tag: series.backdropImageTags[0] };
     }
     return null;
   });
 
+  // Cast and genres are the episode's own when the server sent them, else the
+  // series' — a list-level episode fetch often carries neither, and an empty
+  // Cast row on an episode of a show with a known cast reads as broken.
+  const people = $derived(episode.people?.length ? episode.people : series?.people ?? []);
+  const genres = $derived(episode.genres?.length ? episode.genres : series?.genres ?? []);
+
+  // "More Like This" on an episode means similar *shows* (UR-048), so it keys
+  // off the series rather than the episode.
+  const seriesName = $derived(series?.name ?? episode.seriesName ?? null);
+  const seriesHref = $derived(series ? `/library/${series.id}` : null);
+  const seasonHref = $derived(
+    series && episode.parentIndexNumber != null
+      ? `/library/${series.id}#${seasonAnchorId(episode.parentIndexNumber)}`
+      : null
+  );
+
   function formatDuration(ms?: number | null): string {
     if (!ms) return "";
     const seconds = Math.floor(ms / 1000);
@@ -66,6 +103,7 @@
   }
 
   function handleEpisodeClick(ep: MediaItem) {
+    if (!series) return;
     goto(`/library/${series.id}?episode=${ep.id}`);
   }
 
@@ -112,8 +150,19 @@
     <!-- Content -->
     <div class="relative h-full flex flex-col justify-end p-8 max-w-3xl">
       <div class="space-y-4">
-        <!-- Series name -->
-        <p class="text-gray-300 text-lg">{series.name}</p>
+        <!-- Series name — a link, so the episode page is a navigable hub
+             rather than a dead end (UR-058). -->
+        {#if seriesName}
+          <p class="text-lg">
+            {#if seriesHref}
+              <a href={seriesHref} class="text-gray-300 hover:text-white hover:underline transition-colors">
+                {seriesName}
+              </a>
+            {:else}
+              <span class="text-gray-300">{seriesName}</span>
+            {/if}
+          </p>
+        {/if}
 
         <!-- Episode title -->
         <h1 class="text-4xl font-bold text-white drop-shadow-lg">
@@ -122,9 +171,20 @@
 
         <!-- Metadata -->
         <div class="flex items-center gap-4 text-sm text-gray-200">
-          <span class="px-2 py-1 bg-[var(--color-jellyfin)] rounded font-semibold">
-            {episodeLabel}
-          </span>
+          <!-- The badge links to the season's place in the series list —
+               seasons have no page of their own (DR-103). -->
+          {#if seasonHref}
+            <a
+              href={seasonHref}
+              class="px-2 py-1 bg-[var(--color-jellyfin)] rounded font-semibold hover:brightness-110 transition-all"
+            >
+              {episodeLabel}
+            </a>
+          {:else}
+            <span class="px-2 py-1 bg-[var(--color-jellyfin)] rounded font-semibold">
+              {episodeLabel}
+            </span>
+          {/if}
           {#if duration}
             <span>{duration}</span>
           {/if}
@@ -168,7 +228,8 @@
           </div>
         {/if}
 
-        <!-- Play button + favourite. TRACES: UR-068 | DR-119 -->
+        <!-- Play / Download / Favourite — the full hero action row of
+             ux-flows §5B.2. TRACES: UR-058, UR-068 | DR-119, DR-142 -->
         <div class="pt-2 flex items-center gap-3">
           <button
             onclick={handlePlay}
@@ -179,6 +240,16 @@
             </svg>
             {progress > 0 && progress < 95 ? "Resume" : "Play"}
           </button>
+          <VideoDownloadButton
+            itemId={episode.id}
+            itemName={episode.name}
+            isMovie={false}
+            seriesName={seriesName ?? undefined}
+            seasonName={episode.seasonName ?? undefined}
+            seasonNumber={episode.parentIndexNumber ?? undefined}
+            episodeNumber={episode.indexNumber ?? undefined}
+            size="lg"
+          />
           <FavoriteButton
             itemId={episode.id}
             isFavorite={resolveIsFavorite(episode, $favoriteOverrides)}
@@ -189,7 +260,10 @@
     </div>
   </div>
 
-  <!-- Adjacent episodes -->
+  <!-- Adjacent episodes. Nothing may be inserted between the hero and this
+       strip — continuation content comes before discovery content
+       (ux-flows §5B.2). TRACES: UR-048 | DR-061, DR-062 -->
+  {#if hasEpisodeStrip}
   <div class="space-y-4">
     <h2 class="text-xl font-semibold text-white">More Episodes</h2>
 
@@ -273,4 +347,27 @@
       {/each}
     </div>
   </div>
+  {/if}
+
+  <!-- Discovery content, strictly below the episode strip (ux-flows §5B.2:
+       hero → strip → cast → similar). TRACES: UR-048 | DR-062, DR-142 -->
+  {#if genres.length}
+    <GenreTags {genres} maxShow={6} itemKind="episode" />
+  {/if}
+
+  {#if people.length}
+    <CastSection {people} />
+  {/if}
+
+  <!-- "More Like This" on an episode means similar shows, so it keys off the
+       series. Skipped for a series-less episode, which has nothing to match on. -->
+  {#if series && (series.genres?.length || series.people?.length)}
+    <RelatedItemsSection
+      currentItemId={series.id}
+      itemKind="series"
+      genres={series.genres ?? undefined}
+      people={series.people ?? undefined}
+      limit={12}
+    />
+  {/if}
 </div>

src/lib/components/library/EpisodeFocusView.test.ts

@@ -0,0 +1,175 @@
+// The Episode Focus View is the *only* episode surface (ux-flows §5B.1), so it
+// has to carry everything the bare Episode page used to: download, breadcrumbs
+// back to the series/season, cast and similar shows. It shipped with only Play
+// and Favourite, which is why "open an episode from Continue Watching" lost the
+// download affordance.
+//
+// TRACES: UR-048, UR-058 | DR-062, DR-142 | UT-131, UT-132, UT-133, UT-134, UT-135
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/svelte";
+import type { MediaItem } from "$lib/api/types";
+
+const h = vi.hoisted(() => {
+  function shim<T>(initial: T) {
+    let value = initial;
+    const subs = new Set<(v: T) => void>();
+    return {
+      set(v: T) {
+        value = v;
+        subs.forEach((fn) => fn(value));
+      },
+      subscribe(fn: (v: T) => void) {
+        subs.add(fn);
+        fn(value);
+        return () => subs.delete(fn);
+      },
+    };
+  }
+  return {
+    downloadsStore: shim({ downloads: {} as Record<string, unknown> }),
+    favoriteOverridesStore: shim(new Map<string, boolean>()),
+    getSimilarItems: vi.fn(async () => ({ items: [] as MediaItem[] })),
+    search: vi.fn(async () => ({ items: [] as MediaItem[] })),
+  };
+});
+
+vi.mock("$lib/stores/downloads", () => ({
+  downloads: {
+    subscribe: h.downloadsStore.subscribe,
+    downloadVideo: vi.fn(),
+    pinItem: vi.fn(),
+    unpinItem: vi.fn(),
+    delete: vi.fn(),
+    cancel: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/stores/favorites", async () => {
+  const actual = await vi.importActual<typeof import("$lib/stores/favorites")>(
+    "$lib/stores/favorites"
+  );
+  return { ...actual, favoriteOverrides: { subscribe: h.favoriteOverridesStore.subscribe } };
+});
+
+vi.mock("$lib/stores/auth", () => ({
+  auth: {
+    getRepository: () => ({ getSimilarItems: h.getSimilarItems, search: h.search }),
+    getUserId: () => "user-1",
+  },
+  user: { subscribe: (fn: (v: unknown) => void) => (fn({ id: "user-1" }), () => {}) },
+}));
+
+// CachedImage does async repo/image work irrelevant to these tests.
+vi.mock("$lib/components/common/CachedImage.svelte", async () => ({
+  default: (await import("./__mocks__/StubImage.svelte")).default,
+}));
+
+import EpisodeFocusView from "./EpisodeFocusView.svelte";
+
+const SERIES: MediaItem = {
+  id: "series-1",
+  name: "The Show",
+  kind: "series",
+  genres: ["Drama"],
+  people: [{ id: "p-1", name: "Lead Actor", type: "Actor" }],
+} as unknown as MediaItem;
+
+function episode(overrides: Partial<MediaItem> = {}): MediaItem {
+  return {
+    id: "ep-4",
+    name: "The Fourth One",
+    kind: "episode",
+    seriesId: "series-1",
+    seriesName: "The Show",
+    parentIndexNumber: 2,
+    indexNumber: 4,
+    durationMs: 2_880_000,
+    overview: "Something happens.",
+    genres: ["Drama"],
+    people: [{ id: "p-1", name: "Lead Actor", type: "Actor" }],
+    ...overrides,
+  } as unknown as MediaItem;
+}
+
+function sibling(id: string, number: number): MediaItem {
+  return {
+    id,
+    name: `Episode ${number}`,
+    kind: "episode",
+    seriesId: "series-1",
+    parentIndexNumber: 2,
+    indexNumber: number,
+  } as unknown as MediaItem;
+}
+
+const allEpisodes = [sibling("ep-3", 3), episode(), sibling("ep-5", 5)];
+
+describe("EpisodeFocusView — full episode functionality (DR-142)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    h.downloadsStore.set({ downloads: {} });
+    h.favoriteOverridesStore.set(new Map());
+  });
+
+  it("offers a download control in the hero", () => {
+    render(EpisodeFocusView, {
+      props: { episode: episode(), series: SERIES, allEpisodes },
+    });
+
+    expect(screen.getByLabelText(/Download for offline playback/i)).toBeTruthy();
+  });
+
+  it("links the series name back to the series page", () => {
+    render(EpisodeFocusView, {
+      props: { episode: episode(), series: SERIES, allEpisodes },
+    });
+
+    const link = screen.getByRole("link", { name: "The Show" });
+    expect(link.getAttribute("href")).toBe("/library/series-1");
+  });
+
+  it("links the season badge to the season's place in the series list", () => {
+    render(EpisodeFocusView, {
+      props: { episode: episode(), series: SERIES, allEpisodes },
+    });
+
+    const link = screen.getByRole("link", { name: "S2E4" });
+    expect(link.getAttribute("href")).toBe("/library/series-1#season-2");
+  });
+
+  it("renders cast below the episode strip, never above it (DR-062)", () => {
+    const { container } = render(EpisodeFocusView, {
+      props: { episode: episode(), series: SERIES, allEpisodes },
+    });
+
+    const headings = [...container.querySelectorAll("h2")].map((h2) => h2.textContent?.trim());
+    const strip = headings.indexOf("More Episodes");
+    const cast = headings.findIndex((t) => t?.startsWith("Cast"));
+
+    expect(strip).toBeGreaterThanOrEqual(0);
+    expect(cast).toBeGreaterThan(strip);
+  });
+
+  it("hides the episode strip when the episode has no siblings", () => {
+    render(EpisodeFocusView, {
+      props: { episode: episode(), series: SERIES, allEpisodes: [] },
+    });
+
+    expect(screen.queryByText("More Episodes")).toBeNull();
+  });
+
+  it("renders without a series for an episode that carries no seriesId", () => {
+    render(EpisodeFocusView, {
+      props: {
+        episode: episode({ seriesId: null, seriesName: null }),
+        series: null,
+        allEpisodes: [],
+      },
+    });
+
+    // Still a complete surface: title, play and download all present.
+    expect(screen.getByText("The Fourth One")).toBeTruthy();
+    expect(screen.getByLabelText(/Download for offline playback/i)).toBeTruthy();
+    expect(screen.queryByRole("link", { name: "The Show" })).toBeNull();
+  });
+});

src/lib/components/library/GenericGenreBrowser.svelte

@@ -11,6 +11,7 @@
   import ResultsCounter from "$lib/components/common/ResultsCounter.svelte";
   import CachedImage from "$lib/components/common/CachedImage.svelte";
   import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
+  import { useOfflineFilterReload } from "$lib/composables/useOfflineFilterReload";
   import type { Genre, MediaItem, ItemType } from "$lib/api/types";
 
   /**
@@ -52,12 +53,16 @@
   let selectedGenre = $state<Genre | null>(null);
   let genreItems = $state<MediaItem[]>([]);
   let loadingItems = $state(false);
-  const { markLoaded } = useServerReachabilityReload(async () => {
+  async function reloadGenreBrowse() {
     await loadGenres();
     if (selectedGenre) {
       await loadGenreItems(selectedGenre);
     }
-  });
+  }
+
+  const { markLoaded } = useServerReachabilityReload(reloadGenreBrowse);
+  // Re-query when the offline downloaded-only gate changes. TRACES: UR-052 | DR-143
+  useOfflineFilterReload(reloadGenreBrowse);
 
   onMount(async () => {
     await loadGenres();

src/lib/components/library/GenericMediaListPage.svelte

@@ -14,6 +14,7 @@
   import BackButton from "$lib/components/common/BackButton.svelte";
   import ResultsCounter from "$lib/components/common/ResultsCounter.svelte";
   import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
+  import { useOfflineFilterReload } from "$lib/composables/useOfflineFilterReload";
   import type { MediaItem, Library, ItemType, SearchResult } from "$lib/api/types";
   import LibraryGrid from "./LibraryGrid.svelte";
   import TrackList from "./TrackList.svelte";
@@ -95,6 +96,11 @@
     await loadItems();
   });
 
+  // Re-query when the offline downloaded-only gate changes — going offline, or
+  // toggling "Show all server media". Without this the listing kept whatever it
+  // was first loaded with and the toggle only greyed cards. TRACES: UR-052 | DR-143
+  useOfflineFilterReload(() => loadItems());
+
   onMount(async () => {
     await loadItems();
     markLoaded();

src/lib/components/library/seriesNavigation.test.ts

@@ -1,9 +1,11 @@
+// TRACES: UR-062 | DR-102, DR-103, DR-142 | UT-136
 import { describe, it, expect } from "vitest";
 import type { MediaItem } from "$lib/api/types";
 import {
   seasonAnchorId,
   seasonRedirectTarget,
   episodeFocusHref,
+  episodeRedirectTarget,
   seriesPlayHref,
   seriesPlayLabel,
   groupEpisodesBySeason,
@@ -103,6 +105,17 @@ describe("episodeFocusHref", () => {
   });
 });
 
+describe("episodeRedirectTarget", () => {
+  it("sends a bare episode page to the episode inside its series", () => {
+    expect(episodeRedirectTarget(ep("s1e2", 1, 2))).toBe("/library/series-1?episode=s1e2");
+  });
+
+  it("does not redirect an episode that has no series to fall back on", () => {
+    const orphan = { ...ep("lone", 1, 2), seriesId: undefined } as MediaItem;
+    expect(episodeRedirectTarget(orphan)).toBeNull();
+  });
+});
+
 describe("groupEpisodesBySeason", () => {
   it("groups episodes under their season headers, in season order", () => {
     const seasons = [seasonHeader(2), seasonHeader(1)];

src/lib/components/library/seriesNavigation.ts

@@ -10,7 +10,7 @@
 // lives in Rust (`repository_get_series_current_episode`); this module only
 // renders and routes around the answer.
 //
-// TRACES: UR-062 | DR-102, DR-103
+// TRACES: UR-062 | DR-102, DR-103, DR-142
 import type { MediaItem } from "$lib/api/types";
 
 export interface SeasonData {
@@ -57,6 +57,21 @@ export function episodeFocusHref(episode: MediaItem): string {
   return `/library/${episode.seriesId}?episode=${episode.id}`;
 }
 
+/**
+ * Where a bare `/library/<episodeId>` should actually land — the same rule
+ * seasons follow (DR-103). An episode is never a page of its own, so a deep
+ * link, a stale bookmark, or any caller that missed `episodeFocusHref` is
+ * redirected into the series' Episode Focus View.
+ *
+ * Returns `null` for an episode with no `seriesId` (a deep link into a stale
+ * cache): there is nothing to redirect *to*, so the caller renders the Focus
+ * View series-less rather than stranding the user (ux-flows §5B.1).
+ */
+export function episodeRedirectTarget(episode: MediaItem): string | null {
+  if (!episode.seriesId) return null;
+  return episodeFocusHref(episode);
+}
+
 /**
  * Where the series hero button goes.
  *

src/lib/components/search/HeaderSearch.svelte

@@ -0,0 +1,88 @@
+<!--
+  The header search box (md+ only; below md the bottom-nav Search tab and the
+  /search page's own input serve that role).
+
+  One box, one results surface. The bar renders on the library routes *and on
+  /search itself*, so searching from the header no longer swaps you onto a
+  screen whose input is somewhere else: the box you typed in stays where it is
+  and keeps driving the results. Off /search it navigates there (the only
+  surface that renders results); on /search it republishes the query into the
+  URL, which the page consumes.
+
+  TRACES: UR-049, UR-054 | DR-063, DR-064, DR-147
+-->
+<script lang="ts">
+  import { onMount, tick } from "svelte";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+  import { library } from "$lib/stores/library";
+  import Search from "$lib/components/Search.svelte";
+  import {
+    isSearchRoute,
+    parseSearchScope,
+    resolveSearchScope,
+    searchRouteUrl,
+    type SearchScope,
+  } from "$lib/utils/searchScope";
+
+  // Seeded from the URL, then owned by the user. A navigation to /search
+  // remounts this component (library and root render their own AppHeader), so
+  // reading `?q=` here is what carries a half-typed query across that hop.
+  let value = $state($page.url.searchParams.get("q") ?? "");
+  let inputEl = $state<HTMLInputElement | null>(null);
+
+  let scope = $state<SearchScope>(
+    isSearchRoute($page.url.pathname)
+      ? parseSearchScope($page.url.searchParams.get("scope"))
+      : resolveSearchScope($page.url.pathname)
+  );
+
+  $effect(() => {
+    const url = $page.url;
+    if (isSearchRoute(url.pathname)) {
+      // On /search the scope chips own the scope and publish it in the URL, so
+      // the bar follows rather than overriding it on the next keystroke.
+      scope = parseSearchScope(url.searchParams.get("scope"));
+    } else if (!value.trim()) {
+      // Elsewhere the route seeds the scope, but only while no search is
+      // active: navigating must not snap a widened search back to the section
+      // the user happens to be in.
+      scope = resolveSearchScope(url.pathname);
+    }
+  });
+
+  // Landing on /search with a seeded query means the user was mid-type in the
+  // previous route's header. That box is gone; put the caret back in this one
+  // so their next keystroke lands in the search field and not nowhere.
+  onMount(async () => {
+    if (!value) return;
+    await tick();
+    inputEl?.focus();
+    inputEl?.setSelectionRange(value.length, value.length);
+  });
+
+  async function handleSearch(query: string) {
+    if (isSearchRoute($page.url.pathname)) {
+      // Already on the results surface — republish in place. replaceState keeps
+      // a whole session of typing to a single history entry.
+      await goto(searchRouteUrl(query, scope), {
+        replaceState: true,
+        keepFocus: true,
+        noScroll: true,
+      });
+      return;
+    }
+    if (!query.trim()) {
+      library.clearSearch();
+      return;
+    }
+    await goto(searchRouteUrl(query, scope));
+  }
+</script>
+
+<Search
+  bind:value
+  bind:inputEl
+  placeholder="Search your library..."
+  onSearch={handleSearch}
+/>

src/lib/components/search/HeaderSearch.test.ts

@@ -0,0 +1,110 @@
+/**
+ * The header search bar is the single md+ search input.
+ *
+ * Off /search it navigates there (the only surface that renders results); on
+ * /search it stays put and republishes the query into the URL, so the user goes
+ * on typing in the same box instead of being handed to a second input owned by
+ * the page.
+ *
+ * TRACES: UR-049, UR-054 | DR-147
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
+
+const { pageStore, goto, clearSearch } = vi.hoisted(() => {
+  const { writable } = require("svelte/store");
+  return {
+    pageStore: writable({ url: new URL("http://localhost/library/music") }),
+    goto: vi.fn(),
+    clearSearch: vi.fn(),
+  };
+});
+
+vi.mock("$app/stores", () => ({ page: pageStore, navigating: { subscribe: () => () => {} } }));
+vi.mock("$app/navigation", () => ({ goto, afterNavigate: vi.fn(), beforeNavigate: vi.fn() }));
+vi.mock("$lib/stores/library", () => ({
+  library: { subscribe: () => () => {}, search: vi.fn(), clearSearch },
+}));
+
+import HeaderSearch from "./HeaderSearch.svelte";
+
+const afterDebounce = () => new Promise((resolve) => setTimeout(resolve, 450));
+
+function input(): HTMLInputElement {
+  return screen.getByPlaceholderText("Search your library...") as HTMLInputElement;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  pageStore.set({ url: new URL("http://localhost/library/music") });
+});
+
+describe("from a library route", () => {
+  it("routes to /search with the query and the route's scope", async () => {
+    render(HeaderSearch);
+
+    await fireEvent.input(input(), { target: { value: "jazz" } });
+    await afterDebounce();
+
+    expect(goto).toHaveBeenCalledWith("/search?q=jazz&scope=music");
+  });
+
+  it("clears the results rather than navigating on an empty query", async () => {
+    render(HeaderSearch);
+
+    await fireEvent.input(input(), { target: { value: "jazz" } });
+    await afterDebounce();
+    goto.mockClear();
+
+    await fireEvent.input(input(), { target: { value: "" } });
+    await afterDebounce();
+
+    expect(goto).not.toHaveBeenCalled();
+    expect(clearSearch).toHaveBeenCalled();
+  });
+});
+
+describe("on /search", () => {
+  beforeEach(() => {
+    pageStore.set({ url: new URL("http://localhost/search?q=jazz&scope=music") });
+  });
+
+  it("carries the query over from the URL and puts the caret back in the box", async () => {
+    render(HeaderSearch);
+
+    await waitFor(() => expect(document.activeElement).toBe(input()));
+    expect(input().value).toBe("jazz");
+    expect(input().selectionStart).toBe(4);
+  });
+
+  it("republishes in place instead of pushing a second results screen", async () => {
+    render(HeaderSearch);
+
+    await fireEvent.input(input(), { target: { value: "jazzy" } });
+    await afterDebounce();
+
+    expect(goto).toHaveBeenCalledWith("/search?q=jazzy&scope=music", {
+      replaceState: true,
+      keepFocus: true,
+      noScroll: true,
+    });
+    // The box the user is typing in keeps its text — nothing re-seeds it.
+    expect(input().value).toBe("jazzy");
+  });
+
+  it("searches with the scope the page's chips published, not the route default", async () => {
+    // A chip pick lands in the URL; the bar must adopt it or the next keystroke
+    // would silently widen the search back to All.
+    pageStore.set({ url: new URL("http://localhost/search?q=jazz&scope=tv") });
+    render(HeaderSearch);
+
+    await fireEvent.input(input(), { target: { value: "jazzy" } });
+    await afterDebounce();
+
+    expect(goto).toHaveBeenCalledWith(
+      "/search?q=jazzy&scope=tv",
+      expect.objectContaining({ replaceState: true })
+    );
+  });
+});

src/lib/components/sync/PendingSyncList.svelte

@@ -0,0 +1,137 @@
+<!--
+  What the "N waiting to sync" badge actually stands for.
+
+  These are outgoing changes — watch positions, watched flags — made while the
+  server was unreachable and still waiting to reach Jellyfin. They are *not*
+  downloads, which is where the badge used to send people looking: the Downloads
+  page lists the `downloads` table and structurally cannot show these.
+
+  Rows push themselves on reconnect (DR-131); "Sync now" only asks for that to
+  happen immediately.
+
+  TRACES: UR-025 | DR-132
+-->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { commands, type SyncQueueItem } from "$lib/api/bindings";
+  import { syncService } from "$lib/services/syncService";
+  import { pendingSyncCount } from "$lib/stores/appState";
+  import { isConnected } from "$lib/stores/connectivity";
+  import {
+    describeOperation,
+    describeSubject,
+    isStuck,
+    summarize,
+    sortForDisplay,
+  } from "$lib/services/pendingSync.logic";
+
+  let items = $state<SyncQueueItem[]>([]);
+  let loading = $state(true);
+  let syncing = $state(false);
+  let error = $state<string | null>(null);
+  let lastResult = $state<string | null>(null);
+
+  const summary = $derived(summarize(items));
+
+  export async function refresh() {
+    try {
+      loading = true;
+      error = null;
+      items = sortForDisplay(await syncService.getPending());
+      pendingSyncCount.set(items.length);
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(refresh);
+
+  async function syncNow() {
+    try {
+      syncing = true;
+      error = null;
+      const report = await commands.syncProcessPending();
+      lastResult =
+        report.pushed > 0
+          ? `Sent ${report.pushed} update${report.pushed === 1 ? "" : "s"}.`
+          : "Nothing could be sent — the server is still unreachable.";
+      await refresh();
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    } finally {
+      syncing = false;
+    }
+  }
+
+  function formatQueuedAt(createdAt: string | null): string {
+    if (!createdAt) return "";
+    const parsed = Date.parse(createdAt);
+    return Number.isNaN(parsed) ? "" : new Date(parsed).toLocaleString();
+  }
+</script>
+
+<div class="space-y-4">
+  <p class="text-sm text-gray-400">
+    Changes made while the server was unreachable — watch positions and watched
+    flags — waiting to reach Jellyfin. They send themselves when the server comes
+    back. This is not the download queue; downloaded media lives under Downloads.
+  </p>
+
+  {#if loading}
+    <p class="py-6 text-center text-sm text-gray-400">Loading queued updates…</p>
+  {:else if items.length === 0}
+    <p class="py-6 text-center text-sm text-gray-500">Everything is synced.</p>
+  {:else}
+    <div class="flex flex-wrap items-center gap-3">
+      <button
+        onclick={syncNow}
+        disabled={syncing || !$isConnected}
+        class="rounded-lg bg-[var(--color-jellyfin)] px-4 py-2 text-sm font-medium text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
+        title={$isConnected ? "Send these now" : "Needs a reachable server"}
+      >
+        {syncing ? "Sending…" : "Sync now"}
+      </button>
+      {#if summary.stuck > 0}
+        <span class="text-xs text-amber-400">
+          {summary.stuck} failed and will be retried
+        </span>
+      {/if}
+      {#if lastResult}
+        <span class="text-xs text-gray-400">{lastResult}</span>
+      {/if}
+    </div>
+
+    <ul class="space-y-2">
+      {#each items as item (item.id)}
+        <li
+          class="rounded-lg border-l-4 bg-[var(--color-surface)] p-3 {isStuck(item)
+            ? 'border-amber-500/60'
+            : 'border-gray-600/60'}"
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div class="min-w-0">
+              <p class="truncate text-sm font-medium text-white">
+                {describeOperation(item.operation)}
+              </p>
+              <p class="truncate text-xs text-gray-400">{describeSubject(item)}</p>
+              {#if item.errorMessage}
+                <p class="mt-1 text-xs text-amber-400">
+                  {item.errorMessage}{item.retryCount > 0 ? ` (attempt ${item.retryCount})` : ""}
+                </p>
+              {/if}
+            </div>
+            <span class="shrink-0 text-[11px] text-gray-500">
+              {formatQueuedAt(item.createdAt)}
+            </span>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#if error}
+    <p class="text-sm text-red-400">{error}</p>
+  {/if}
+</div>

src/lib/components/sync/PendingSyncModal.svelte

@@ -0,0 +1,57 @@
+<!--
+  Modal wrapper for the pending-sync queue, opened from the offline banner's
+  badge so the count is answerable where the user reads it.
+
+  TRACES: UR-025 | DR-132
+-->
+<script lang="ts">
+  import PendingSyncList from "./PendingSyncList.svelte";
+
+  interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+  }
+
+  let { isOpen, onClose }: Props = $props();
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) onClose();
+  }
+</script>
+
+{#if isOpen}
+  <div
+    class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 p-0 sm:items-center sm:p-4"
+    onclick={handleBackdropClick}
+    onkeydown={(e) => { if (e.key === "Escape") onClose(); }}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="pending-sync-title"
+    tabindex="-1"
+  >
+    <div
+      class="flex max-h-[80vh] w-full flex-col rounded-t-2xl bg-[var(--color-surface)] shadow-2xl sm:max-h-[70vh] sm:max-w-lg sm:rounded-2xl"
+      onclick={(e) => e.stopPropagation()}
+      role="none"
+    >
+      <div class="flex items-center justify-between border-b border-gray-800 px-6 py-4">
+        <h2 id="pending-sync-title" class="text-lg font-semibold text-white">
+          Waiting to sync
+        </h2>
+        <button
+          onclick={onClose}
+          class="-m-2 p-2 text-gray-400 transition-colors hover:text-white"
+          aria-label="Close"
+        >
+          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto p-6">
+        <PendingSyncList />
+      </div>
+    </div>
+  </div>
+{/if}

src/lib/composables/useOfflineFilterReload.test.ts

@@ -0,0 +1,55 @@
+// TRACES: UR-052 | DR-143 | UT-140
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { writable } from "svelte/store";
+
+const h = vi.hoisted(() => ({
+  version: null as ReturnType<typeof import("svelte/store").writable<number>> | null,
+  destroyFns: [] as Array<() => void>,
+}));
+
+vi.mock("svelte", () => ({
+  onDestroy: (fn: () => void) => h.destroyFns.push(fn),
+}));
+
+vi.mock("$lib/services/offlineCatalog", () => ({
+  get catalogFilterVersion() {
+    return h.version;
+  },
+}));
+
+import { useOfflineFilterReload } from "./useOfflineFilterReload";
+
+describe("useOfflineFilterReload (DR-143)", () => {
+  beforeEach(() => {
+    h.version = writable(0);
+    h.destroyFns.length = 0;
+  });
+
+  it("does not reload for the value the page already loaded under", () => {
+    const reload = vi.fn();
+    useOfflineFilterReload(reload);
+
+    expect(reload).not.toHaveBeenCalled();
+  });
+
+  it("reloads once each time the gate settles into a new state", () => {
+    const reload = vi.fn();
+    useOfflineFilterReload(reload);
+
+    h.version!.set(1);
+    expect(reload).toHaveBeenCalledTimes(1);
+
+    h.version!.set(2);
+    expect(reload).toHaveBeenCalledTimes(2);
+  });
+
+  it("stops reloading a page that has been destroyed", () => {
+    const reload = vi.fn();
+    useOfflineFilterReload(reload);
+
+    h.destroyFns.forEach((fn) => fn());
+    h.version!.set(1);
+
+    expect(reload).not.toHaveBeenCalled();
+  });
+});

src/lib/composables/useOfflineFilterReload.ts

@@ -0,0 +1,47 @@
+/**
+ * Re-query a listing when the offline "downloaded only" gate changes.
+ *
+ * The gate is a process-wide flag in Rust, consulted only while a query runs,
+ * so flipping it has no effect on rows already on screen. Library pages loaded
+ * once on mount and reloaded only on the offline → online transition
+ * (`useServerReachabilityReload`), which left two gaps the user sees as a broken
+ * filter:
+ *
+ *  - going *offline* never reloaded, so the full server catalog stayed on
+ *    screen under a now-closed gate;
+ *  - toggling "Show all server media" never reloaded, so it only greyed the
+ *    cards already listed instead of adding or removing any.
+ *
+ * `catalogFilterVersion` bumps once the backend has accepted the new gate, so
+ * the reload this triggers always queries under the intended filter.
+ *
+ * Call during component initialisation, like `useServerReachabilityReload`:
+ *
+ * ```svelte
+ * <script>
+ *   useOfflineFilterReload(() => loadItems());
+ * </script>
+ * ```
+ *
+ * TRACES: UR-052 | DR-143
+ */
+import { onDestroy } from "svelte";
+import { catalogFilterVersion } from "$lib/services/offlineCatalog";
+
+export function useOfflineFilterReload(reloadFn: () => void | Promise<void>): void {
+  // The value the page is already showing. Seeded from the first subscription
+  // callback (stores emit synchronously on subscribe) so mounting never
+  // triggers a redundant second load of what onMount just fetched.
+  let applied: number | null = null;
+
+  const unsubscribe = catalogFilterVersion.subscribe((version) => {
+    if (applied === null || version === applied) {
+      applied = version;
+      return;
+    }
+    applied = version;
+    void reloadFn();
+  });
+
+  onDestroy(unsubscribe);
+}

src/lib/services/offlineCatalog.reload.test.ts

@@ -0,0 +1,162 @@
+// The offline "downloaded only" gate is a *backend* flag, so flipping it only
+// changes what the user sees if the listing is re-queried afterwards. Nothing
+// re-queried: the toggle greyed cards instantly (a pure frontend derivation in
+// MediaCard) while the item list stayed exactly as it was loaded, which is why
+// the filter read as "shows everything until I toggle, then greys some of it".
+//
+// `catalogFilterVersion` is the refetch signal, and it must bump only once the
+// backend has actually accepted the new flag — a reload racing the push would
+// re-query under the old gate and land back where it started.
+//
+// TRACES: UR-052 | DR-078, DR-143 | UT-137, UT-138, UT-139
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { get } from "svelte/store";
+
+const h = vi.hoisted(() => {
+  function shim<T>(initial: T) {
+    let value = initial;
+    const subs = new Set<(v: T) => void>();
+    return {
+      set(v: T) {
+        value = v;
+        subs.forEach((fn) => fn(value));
+      },
+      subscribe(fn: (v: T) => void) {
+        subs.add(fn);
+        fn(value);
+        return () => subs.delete(fn);
+      },
+      /**
+       * Drop subscribers from previously imported copies of the module.
+       * `vi.resetModules()` gives each test a fresh module instance, but this
+       * store outlives them all — without this the stale instances keep
+       * consuming `mockImplementationOnce` and pushing their own state.
+       */
+      reset(v: T) {
+        subs.clear();
+        value = v;
+      },
+    };
+  }
+  return {
+    isConnectedStore: shim(true),
+    // Resolution is deferred so a test can observe the window between "command
+    // issued" and "command accepted".
+    pending: [] as Array<() => void>,
+    setShowServerCatalog: vi.fn(
+      () => new Promise<void>((resolve) => h.pending.push(() => resolve()))
+    ),
+  };
+});
+
+vi.mock("$lib/stores/connectivity", () => ({
+  isConnected: { subscribe: h.isConnectedStore.subscribe },
+}));
+
+vi.mock("$lib/api/bindings", () => ({
+  commands: {
+    setShowServerCatalog: h.setShowServerCatalog,
+    syncFullCatalog: vi.fn(),
+    resumeQueuedDownloads: vi.fn(),
+    catalogSyncStatus: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/stores/auth", () => ({
+  auth: { getRepository: () => ({ getHandle: () => "handle-1" }) },
+}));
+
+/** Let every issued setShowServerCatalog settle. */
+async function settle() {
+  h.pending.splice(0).forEach((resolve) => resolve());
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+describe("offline filter refetch signal (DR-143)", () => {
+  beforeEach(() => {
+    h.setShowServerCatalog.mockReset();
+    h.setShowServerCatalog.mockImplementation(
+      () => new Promise<void>((resolve) => h.pending.push(() => resolve()))
+    );
+    h.pending.length = 0;
+    h.isConnectedStore.reset(true);
+    vi.resetModules();
+  });
+
+  it("bumps the version when going offline closes the gate", async () => {
+    const mod = await import("./offlineCatalog");
+    await settle();
+    const before = get(mod.catalogFilterVersion);
+
+    h.isConnectedStore.set(false); // include: true → false
+    await settle();
+
+    expect(h.setShowServerCatalog).toHaveBeenLastCalledWith(false);
+    expect(get(mod.catalogFilterVersion)).toBeGreaterThan(before);
+  });
+
+  it("bumps only after the backend accepts the flag, never before", async () => {
+    const mod = await import("./offlineCatalog");
+    await settle();
+    const before = get(mod.catalogFilterVersion);
+
+    h.isConnectedStore.set(false);
+    await Promise.resolve(); // command issued, not yet resolved
+
+    expect(h.setShowServerCatalog).toHaveBeenLastCalledWith(false);
+    expect(get(mod.catalogFilterVersion)).toBe(before);
+
+    await settle();
+    expect(get(mod.catalogFilterVersion)).toBeGreaterThan(before);
+  });
+
+  it("bumps both ways as the offline toggle is flipped", async () => {
+    const mod = await import("./offlineCatalog");
+    h.isConnectedStore.set(false);
+    await settle();
+    const offlineGated = get(mod.catalogFilterVersion);
+
+    mod.showServerCatalog.set(true); // reveal the server catalog
+    await settle();
+    expect(h.setShowServerCatalog).toHaveBeenLastCalledWith(true);
+    const revealed = get(mod.catalogFilterVersion);
+    expect(revealed).toBeGreaterThan(offlineGated);
+
+    mod.showServerCatalog.set(false); // back to downloaded-only
+    await settle();
+    expect(h.setShowServerCatalog).toHaveBeenLastCalledWith(false);
+    expect(get(mod.catalogFilterVersion)).toBeGreaterThan(revealed);
+  });
+
+  it("does not bump when the effective gate is unchanged", async () => {
+    const mod = await import("./offlineCatalog");
+    await settle();
+    const before = get(mod.catalogFilterVersion);
+
+    // Online, the toggle cannot close the gate — browsing reads the same cache.
+    mod.showServerCatalog.set(true);
+    await settle();
+
+    expect(get(mod.catalogFilterVersion)).toBe(before);
+  });
+
+  it("retries the push after a failed one rather than latching the old gate", async () => {
+    const mod = await import("./offlineCatalog");
+    await settle();
+    const before = get(mod.catalogFilterVersion);
+
+    h.setShowServerCatalog.mockImplementationOnce(() => Promise.reject(new Error("ipc down")));
+    h.isConnectedStore.set(false);
+    await settle();
+    expect(get(mod.catalogFilterVersion)).toBe(before); // nothing to reload for
+
+    // The same transition must be attempted again, not skipped as "already sent".
+    h.isConnectedStore.set(true);
+    await settle();
+    h.isConnectedStore.set(false);
+    await settle();
+    expect(h.setShowServerCatalog).toHaveBeenLastCalledWith(false);
+    expect(get(mod.catalogFilterVersion)).toBeGreaterThan(before);
+  });
+});

src/lib/services/offlineCatalog.ts

@@ -25,30 +25,62 @@ import { isConnected } from "$lib/stores/connectivity";
  */
 export const showServerCatalog: Writable<boolean> = writable(false);
 
+/**
+ * Bumped every time the backend's downloads-only gate *settles* into a new
+ * state. Library pages watch it and re-query.
+ *
+ * The gate lives in Rust and is only consulted when a query runs, so flipping
+ * it changes nothing already on screen. Without this signal the toggle merely
+ * greyed cards — `MediaCard.isServerOnly` is a pure frontend derivation and
+ * updates instantly — while the item list stayed as first loaded. That is the
+ * "shows everything until I filter" behaviour: the listing had never been
+ * re-queried under the closed gate. Going offline had the same problem, since
+ * nothing reloads on the online → offline transition either.
+ *
+ * It bumps *after* the command resolves, never before: a reload racing the push
+ * would re-query under the old gate and undo itself.
+ *
+ * TRACES: UR-052 | DR-143
+ */
+export const catalogFilterVersion: Writable<number> = writable(0);
+
 // Keep the backend's offline library queries in sync with the UI toggle. The
 // offline cache holds the whole synced catalog, so `get_items` would otherwise
 // return every server item even offline with the toggle off. Include the
 // non-downloaded catalog only when online (fast browsing reads the same cache)
 // or when the "Show all server media" toggle is on.
 let lastIncludeCatalog: boolean | null = null;
-function pushCatalogVisibility(connected: boolean, showCatalog: boolean): void {
+async function pushCatalogVisibility(connected: boolean, showCatalog: boolean): Promise<void> {
   const include = connected || showCatalog;
   if (include === lastIncludeCatalog) return;
   lastIncludeCatalog = include;
-  commands.setShowServerCatalog(include).catch((err) => {
+
+  try {
+    await commands.setShowServerCatalog(include);
+  } catch (err) {
     console.warn("[OfflineCatalog] Failed to set catalog visibility:", err);
-  });
+    // The backend is still on the old gate, so forget that we sent this —
+    // otherwise the next identical transition is skipped as a no-op and the
+    // frontend and backend disagree about the filter for the rest of the
+    // session. No version bump: there is nothing new to re-query under.
+    lastIncludeCatalog = null;
+    return;
+  }
+
+  catalogFilterVersion.update((n) => n + 1);
 }
 
 let connectedNow = true;
 let showCatalogNow = false;
+// Fire-and-forget on purpose: the push handles its own failure, and subscribers
+// must not block. Consumers wait on `catalogFilterVersion` instead.
 isConnected.subscribe((v) => {
   connectedNow = v;
-  pushCatalogVisibility(connectedNow, showCatalogNow);
+  void pushCatalogVisibility(connectedNow, showCatalogNow);
 });
 showServerCatalog.subscribe((v) => {
   showCatalogNow = v;
-  pushCatalogVisibility(connectedNow, showCatalogNow);
+  void pushCatalogVisibility(connectedNow, showCatalogNow);
 });
 
 /** Last time a full catalog sync completed, for a UI hint. */

src/lib/services/pendingSync.logic.test.ts

@@ -0,0 +1,85 @@
+// TRACES: UR-025 | DR-132 | UT-123
+import { describe, it, expect } from "vitest";
+import type { SyncQueueItem } from "$lib/api/bindings";
+import {
+  describeOperation,
+  describeSubject,
+  isStuck,
+  summarize,
+  sortForDisplay,
+} from "./pendingSync.logic";
+
+function row(overrides: Partial<SyncQueueItem> = {}): SyncQueueItem {
+  return {
+    id: 1,
+    userId: "u1",
+    operation: "report_playback_stopped",
+    itemId: "ep1",
+    payload: null,
+    status: "pending",
+    retryCount: 0,
+    createdAt: "2026-08-01T10:00:00Z",
+    errorMessage: null,
+    itemName: null,
+    ...overrides,
+  } as SyncQueueItem;
+}
+
+describe("pending sync row description", () => {
+  it("labels the operations the backend can queue", () => {
+    expect(describeOperation("report_playback_stopped")).toBe("Watch position");
+    expect(describeOperation("mark_played")).toBe("Marked as watched");
+    expect(describeOperation("report_playback_start")).toBe("Playback started");
+  });
+
+  it("still renders an operation it has no label for", () => {
+    // An unlabelled row is the one heading for abandonment — it must not
+    // render blank, which is the failure this whole surface exists to fix.
+    expect(describeOperation("teleport_item")).toBe("teleport item");
+  });
+
+  it("names the item when the catalog knows it, and falls back to the id", () => {
+    expect(describeSubject(row({ itemName: "The Expanse S01E01" }))).toBe(
+      "The Expanse S01E01",
+    );
+    expect(describeSubject(row({ itemName: null, itemId: "abc123" }))).toBe("abc123");
+    expect(describeSubject(row({ itemName: null, itemId: null }))).toBe("Unknown item");
+  });
+});
+
+describe("stuck rows", () => {
+  it("treats a failed or retried row as stuck", () => {
+    expect(isStuck(row({ status: "failed", retryCount: 1 }))).toBe(true);
+    expect(isStuck(row({ status: "pending", retryCount: 2 }))).toBe(true);
+    expect(isStuck(row())).toBe(false);
+  });
+
+  it("summarizes a mixed queue", () => {
+    const summary = summarize([row(), row({ id: 2, status: "failed", retryCount: 1 })]);
+    expect(summary).toEqual({ total: 2, stuck: 1, allStuck: false });
+  });
+
+  it("reports allStuck only when every row has failed", () => {
+    expect(summarize([row({ status: "failed", retryCount: 3 })]).allStuck).toBe(true);
+    expect(summarize([]).allStuck).toBe(false);
+  });
+});
+
+describe("display order", () => {
+  it("lists oldest first — the order they will be replayed in", () => {
+    const sorted = sortForDisplay([
+      row({ id: 3, createdAt: "2026-08-01T12:00:00Z" }),
+      row({ id: 1, createdAt: "2026-08-01T10:00:00Z" }),
+      row({ id: 2, createdAt: "2026-08-01T11:00:00Z" }),
+    ]);
+    expect(sorted.map((r) => r.id)).toEqual([1, 2, 3]);
+  });
+
+  it("keeps timestamp-less rows instead of dropping them", () => {
+    const sorted = sortForDisplay([
+      row({ id: 2, createdAt: null }),
+      row({ id: 1, createdAt: "2026-08-01T10:00:00Z" }),
+    ]);
+    expect(sorted.map((r) => r.id)).toEqual([1, 2]);
+  });
+});

src/lib/services/pendingSync.logic.ts

@@ -0,0 +1,79 @@
+// Presentation logic for the pending-sync queue.
+//
+// The queue's *meaning* lives in Rust (which operations exist, how they push,
+// when one is abandoned — DR-131). What lives here is purely how a row reads on
+// screen: its label, its subtitle, and whether it is currently erroring. Kept
+// out of the component so it can be unit-tested, the same pattern as
+// episodeStrip.ts.
+//
+// TRACES: UR-025 | DR-132 | UT-123
+
+import type { SyncQueueItem } from "$lib/api/bindings";
+
+/** How each queued operation reads in the list. */
+const OPERATION_LABELS: Record<string, string> = {
+  report_playback_start: "Playback started",
+  report_playback_stopped: "Watch position",
+  update_progress: "Watch position",
+  mark_played: "Marked as watched",
+  mark_favorite: "Added to favourites",
+  unmark_favorite: "Removed from favourites",
+  playlist_create: "Playlist created",
+  playlist_delete: "Playlist deleted",
+  playlist_rename: "Playlist renamed",
+  playlist_add_items: "Added to playlist",
+  playlist_remove_items: "Removed from playlist",
+  playlist_reorder_item: "Playlist reordered",
+};
+
+/**
+ * A human label for a queued operation. An operation this build has no label
+ * for still reads as something — an unknown row is the case most worth showing,
+ * since it is the one that will end up abandoned.
+ */
+export function describeOperation(operation: string): string {
+  return OPERATION_LABELS[operation] ?? operation.replace(/_/g, " ");
+}
+
+/** What the row is about: the item's title if the catalog knows it, else its id. */
+export function describeSubject(item: SyncQueueItem): string {
+  return item.itemName ?? item.itemId ?? "Unknown item";
+}
+
+/**
+ * A row is "stuck" once it has failed at least once — that is what justifies
+ * showing its error, and what a Retry button acts on.
+ */
+export function isStuck(item: SyncQueueItem): boolean {
+  return item.status === "failed" || item.retryCount > 0;
+}
+
+export interface PendingSyncSummary {
+  total: number;
+  stuck: number;
+  /** True when every queued row has already failed — retrying needs the server. */
+  allStuck: boolean;
+}
+
+export function summarize(items: SyncQueueItem[]): PendingSyncSummary {
+  const stuck = items.filter(isStuck).length;
+  return {
+    total: items.length,
+    stuck,
+    allStuck: items.length > 0 && stuck === items.length,
+  };
+}
+
+/**
+ * Oldest first — the order they will be replayed in, so the list reads as the
+ * queue it is. Rows without a timestamp sort last rather than being dropped.
+ */
+export function sortForDisplay(items: SyncQueueItem[]): SyncQueueItem[] {
+  return [...items].sort((a, b) => {
+    if (!a.createdAt && !b.createdAt) return a.id - b.id;
+    if (!a.createdAt) return 1;
+    if (!b.createdAt) return -1;
+    const diff = Date.parse(a.createdAt) - Date.parse(b.createdAt);
+    return diff !== 0 ? diff : a.id - b.id;
+  });
+}

src/lib/services/syncService.ts

@@ -9,18 +9,11 @@
 import { commands } from "$lib/api/bindings";
 import { auth } from "$lib/stores/auth";
 
-// Types matching Rust structs
-export interface SyncQueueItem {
-  id: number;
-  userId: string;
-  operation: string;
-  itemId: string | null;
-  payload: string | null;
-  status: string;
-  retryCount: number;
-  createdAt: string | null;
-  errorMessage: string | null;
-}
+// The queue row shape comes from the generated bindings rather than a
+// hand-written mirror — the mirror had already drifted (it predates `itemName`),
+// and a drifted duplicate is how a field silently stops reaching the UI.
+import type { SyncQueueItem } from "$lib/api/bindings";
+export type { SyncQueueItem };
 
 export type SyncOperation =
   | "mark_played"

src/lib/utils/layoutShell.test.ts

@@ -19,6 +19,7 @@ import {
   showBottomNav,
   showGlobalMiniPlayer,
   showGlobalHeader,
+  showHeaderSearch,
   routeOwnsLayout,
   showBottomUi,
   shellReservesBottomInset,
@@ -179,3 +180,25 @@ describe("shellReservesBottomInset", () => {
     expect(shellReservesBottomInset({ pathname: "/", isAuthenticated: false })).toBe(false);
   });
 });
+
+describe("showHeaderSearch", () => {
+  it("renders the bar on the library routes", () => {
+    expect(showHeaderSearch({ pathname: "/library" })).toBe(true);
+    expect(showHeaderSearch({ pathname: "/library/music/albums" })).toBe(true);
+    expect(showHeaderSearch({ pathname: "/library/abc123" })).toBe(true);
+  });
+
+  it("keeps the bar on /search, so searching does not swap you to another input", () => {
+    // The regression: the bar existed only under /library, so a header search
+    // landed the user on /search with the box they were typing in gone and a
+    // different one (belonging to the page) in its place.
+    expect(showHeaderSearch({ pathname: "/search" })).toBe(true);
+    expect(showHeaderSearch({ pathname: "/search/" })).toBe(true);
+  });
+
+  it("stays off routes with nothing to search", () => {
+    expect(showHeaderSearch({ pathname: "/" })).toBe(false);
+    expect(showHeaderSearch({ pathname: "/downloads" })).toBe(false);
+    expect(showHeaderSearch({ pathname: "/settings" })).toBe(false);
+  });
+});

src/lib/utils/layoutShell.ts

@@ -17,6 +17,8 @@
  * TRACES: UR-005 | DR-009
  */
 
+import { isSearchRoute } from "$lib/utils/searchScope";
+
 export interface BottomUiVisibilityInput {
   /** Current route pathname, e.g. `$page.url.pathname`. */
   pathname: string;
@@ -90,6 +92,21 @@ export function showGlobalHeader({
   );
 }
 
+/**
+ * Whether the header renders its search box on this route (md+ only; below md
+ * the bottom-nav Search tab and /search's own input serve that role).
+ *
+ * `/search` is included deliberately: the bar is the single md+ search input,
+ * so it must survive the hop onto the results page instead of being replaced by
+ * a second input belonging to that page. The library routes keep it because
+ * that is where a search is most often started.
+ *
+ * TRACES: UR-049, UR-054 | DR-063
+ */
+export function showHeaderSearch({ pathname }: { pathname: string }): boolean {
+  return pathname.startsWith("/library") || isSearchRoute(pathname);
+}
+
 /**
  * Whether any bottom UI is showing for this route (mini player, nav, or both).
  * The bottom UI is rendered in flex flow below the scroller (see BottomUi.svelte),

src/lib/utils/searchScope.test.ts

@@ -3,11 +3,14 @@ import {
   composeSearchGroups,
   DEFAULT_GROUP_ORDER,
   groupsForScope,
+  isSearchRoute,
   moveGroup,
   normalizeGroupOrder,
+  parseSearchScope,
   reorderGroups,
   resolveSearchScope,
   searchRouteUrl,
+  seedFromSearchUrl,
   shouldNavigateToSearch,
   type SearchGroupId,
 } from "./searchScope";
@@ -397,3 +400,66 @@ describe("shouldNavigateToSearch", () => {
     expect(shouldNavigateToSearch("/library/music", "  ")).toBe(false);
   });
 });
+
+describe("isSearchRoute", () => {
+  it("recognises the search surface through query strings and trailing slashes", () => {
+    expect(isSearchRoute("/search")).toBe(true);
+    expect(isSearchRoute("/search/")).toBe(true);
+    expect(isSearchRoute("/search?q=jazz&scope=music")).toBe(true);
+    expect(isSearchRoute("/library/music")).toBe(false);
+    expect(isSearchRoute("/")).toBe(false);
+  });
+});
+
+describe("parseSearchScope", () => {
+  it("accepts the known scopes", () => {
+    expect(parseSearchScope("music")).toBe("music");
+    expect(parseSearchScope("tv")).toBe("tv");
+  });
+
+  it("falls back on absent or unrecognised values", () => {
+    expect(parseSearchScope(null)).toBe("all");
+    expect(parseSearchScope("")).toBe("all");
+    expect(parseSearchScope("books")).toBe("all");
+    expect(parseSearchScope(null, "music")).toBe("music");
+  });
+});
+
+describe("seedFromSearchUrl", () => {
+  const params = (search: string) => new URL(`http://x/search${search}`).searchParams;
+
+  it("seeds a fresh page from the URL", () => {
+    expect(seedFromSearchUrl(params("?q=jazz&scope=music"), null)).toEqual({
+      query: "jazz",
+      scope: "music",
+    });
+  });
+
+  it("seeds an empty query so an emptied URL clears the page", () => {
+    expect(seedFromSearchUrl(params(""), null)).toEqual({ query: "", scope: "all" });
+    expect(seedFromSearchUrl(params(""), { query: "jazz", scope: "all" })).toEqual({
+      query: "",
+      scope: "all",
+    });
+  });
+
+  it("asks for nothing once that same URL has been applied", () => {
+    // The regression this exists for: the page must consume the URL once, not
+    // keep re-asserting it. While the seed is unchanged the user's typing and
+    // chip picks own the input — re-applying snapped it back a keystroke later.
+    const applied = { query: "jazz", scope: "music" } as const;
+    expect(seedFromSearchUrl(params("?q=jazz&scope=music"), applied)).toBeNull();
+  });
+
+  it("re-seeds when the query or the scope actually changes", () => {
+    const applied = { query: "jazz", scope: "music" } as const;
+    expect(seedFromSearchUrl(params("?q=blues&scope=music"), applied)).toEqual({
+      query: "blues",
+      scope: "music",
+    });
+    expect(seedFromSearchUrl(params("?q=jazz"), applied)).toEqual({
+      query: "jazz",
+      scope: "all",
+    });
+  });
+});

src/lib/utils/searchScope.ts

@@ -71,6 +71,16 @@ export function searchRouteUrl(query: string, scope: SearchScope): string {
   return `/search?${params.toString().replace(/\+/g, "%20")}`;
 }
 
+/** Normalise a pathname for comparison: drop query, hash and trailing slashes. */
+function normalizePath(pathname: string): string {
+  return pathname.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
+}
+
+/** Whether `pathname` is the search surface itself. */
+export function isSearchRoute(pathname: string): boolean {
+  return normalizePath(pathname) === "/search";
+}
+
 /**
  * Whether a search typed on `pathname` must navigate to `/search` to be seen.
  *
@@ -82,8 +92,48 @@ export function searchRouteUrl(query: string, scope: SearchScope): string {
  */
 export function shouldNavigateToSearch(pathname: string, query: string): boolean {
   if (!query.trim()) return false;
-  const path = pathname.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
-  return path !== "/search";
+  return !isSearchRoute(pathname);
+}
+
+/** Read a `?scope=` value, falling back when it is absent or unrecognised. */
+export function parseSearchScope(
+  raw: string | null | undefined,
+  fallback: SearchScope = "all"
+): SearchScope {
+  return SEARCH_SCOPES.includes(raw as SearchScope) ? (raw as SearchScope) : fallback;
+}
+
+/** The query + scope a `/search` URL asks the page to show. */
+export interface SearchSeed {
+  query: string;
+  scope: SearchScope;
+}
+
+/**
+ * What a `/search` URL should seed the page with, or `null` if it asks for
+ * nothing new.
+ *
+ * The URL is *consumed once per value*, not continuously reconciled against the
+ * live input. `applied` is the seed the caller last took from the URL: while it
+ * still matches, the user's own typing and chip picks govern, and only a real
+ * navigation (the header search sending a new query) re-seeds the page.
+ *
+ * Reconciling instead of consuming was the bug this replaced — the old effect
+ * compared the URL against `library.searchQuery`, so every keystroke's search
+ * re-ran it and snapped the input back to the query the header had sent.
+ *
+ * TRACES: UR-049 | DR-063, DR-064
+ */
+export function seedFromSearchUrl(
+  params: URLSearchParams,
+  applied: SearchSeed | null
+): SearchSeed | null {
+  const seed: SearchSeed = {
+    query: params.get("q") ?? "",
+    scope: parseSearchScope(params.get("scope")),
+  };
+  if (applied && applied.query === seed.query && applied.scope === seed.scope) return null;
+  return seed;
 }
 
 // ---------------------------------------------------------------------------

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
   import { platform } from "@tauri-apps/plugin-os";
   import { listen, type UnlistenFn } from "@tauri-apps/api/event";
   import "../app.css";
+  import { commands } from "$lib/api/bindings";
   import { auth, needsReauth, isAuthenticated } from "$lib/stores/auth";
   import { connectivity, isConnected } from "$lib/stores/connectivity";
   import { initPlayerEvents, cleanupPlayerEvents } from "$lib/services/playerEvents";
@@ -20,6 +21,7 @@
   import SleepTimerModal from "$lib/components/player/SleepTimerModal.svelte";
   import BottomUi from "$lib/components/BottomUi.svelte";
   import AppHeader from "$lib/components/AppHeader.svelte";
+  import PendingSyncModal from "$lib/components/sync/PendingSyncModal.svelte";
   import { isInitialized, pendingSyncCount, isAndroid, showSleepTimerModal } from "$lib/stores/appState";
   import {
     showBottomNav as computeShowBottomNav,
@@ -34,6 +36,9 @@
 
   let { children } = $props();
 
+  /** Offline banner badge → the list of what is actually queued (DR-132). */
+  let showPendingSync = $state(false);
+
   /** Teardown for the network-transport reporter (WiFi-only gate). */
   let stopNetworkReporting: (() => void) | null = null;
   let stopFavoritesListener: UnlistenFn | null = null;
@@ -149,6 +154,17 @@
     // Start sync service for offline mutation queue
     syncService.start();
 
+    // Kick the queue once at startup. The Rust drain otherwise only runs on an
+    // offline→online transition, so a queue built up in a previous session sits
+    // untouched for a whole run of the app if the server was reachable the
+    // whole time. Safe when it isn't: an unreachable server leaves rows queued
+    // without spending their retry budget (DR-131).
+    if (get(auth).user?.id) {
+      commands.syncProcessPending().catch((err) =>
+        console.debug("[Layout] Startup sync drain skipped:", err)
+      );
+    }
+
     // Load the last-sync hint for the offline banner. The catalog *index* is no
     // longer kicked off from here: the Rust background indexer (DR-109) owns
     // when to re-index, so a long session no longer searches a stale catalog and
@@ -200,7 +216,9 @@
     }
   });
 
-  // Update pending sync count periodically
+  // Update pending sync count periodically, and immediately whenever the Rust
+  // drain (DR-131) reports it pushed or gave up on rows — otherwise the badge
+  // lags a reconnect by up to 10s and reads as if nothing happened.
   $effect(() => {
     if ($isAuthenticated) {
       const updateCount = async () => {
@@ -210,7 +228,19 @@
       updateCount();
       // Update every 10 seconds
       const interval = setInterval(updateCount, 10000);
-      return () => clearInterval(interval);
+      let unlistenDrain: UnlistenFn | null = null;
+      listen("sync-queue-changed", () => {
+        void updateCount();
+      })
+        .then((unlisten) => {
+          unlistenDrain = unlisten;
+        })
+        .catch((err) => console.debug("[Layout] sync-queue-changed listen failed:", err));
+
+      return () => {
+        clearInterval(interval);
+        unlistenDrain?.();
+      };
     }
   });
 </script>
@@ -236,10 +266,19 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414" />
         </svg>
         <span>You're offline. Some features may be limited.</span>
+        <!-- The badge is answerable: it opens the queue it counts. Read as
+             "pending transfers" it used to send people to the Downloads page,
+             which lists a different table entirely and can never show these.
+             TRACES: UR-025 | DR-132 -->
         {#if $pendingSyncCount > 0}
-          <span class="bg-white/20 px-2 py-0.5 rounded-full text-xs">
-            {$pendingSyncCount} pending sync{$pendingSyncCount !== 1 ? 's' : ''}
-          </span>
+          <button
+            type="button"
+            onclick={() => (showPendingSync = true)}
+            class="bg-white/20 hover:bg-white/30 px-2 py-0.5 rounded-full text-xs transition-colors"
+            title="Changes waiting to reach the server"
+          >
+            {$pendingSyncCount} waiting to sync
+          </button>
         {/if}
         <button
           type="button"
@@ -298,6 +337,12 @@
       isOpen={$showSleepTimerModal}
       onClose={() => showSleepTimerModal.set(false)}
     />
+
+    <!-- What the offline banner's badge counts (DR-132) -->
+    <PendingSyncModal
+      isOpen={showPendingSync}
+      onClose={() => (showPendingSync = false)}
+    />
   {:else}
     <div class="flex items-center justify-center h-full">
       <div class="w-8 h-8 border-2 border-[var(--color-jellyfin)] border-t-transparent rounded-full animate-spin"></div>

src/routes/library/+layout.svelte

@@ -1,17 +1,8 @@
 <script lang="ts">
   import { onMount, onDestroy, setContext } from "svelte";
   import { goto } from "$app/navigation";
-  import { page } from "$app/stores";
   import { isAuthenticated, isLoading as isAuthLoading } from "$lib/stores/auth";
-  import { library } from "$lib/stores/library";
   import { useScrollGuard } from "$lib/composables/useScrollGuard";
-  import Search from "$lib/components/Search.svelte";
-  import {
-    resolveSearchScope,
-    searchRouteUrl,
-    shouldNavigateToSearch,
-    type SearchScope,
-  } from "$lib/utils/searchScope";
   import AppHeader from "$lib/components/AppHeader.svelte";
   import BottomUi from "$lib/components/BottomUi.svelte";
   import SleepTimerModal from "$lib/components/player/SleepTimerModal.svelte";
@@ -22,7 +13,6 @@
 
   let { children } = $props();
 
-  let searchQuery = $state("");
   let showSleepTimerModal = $state(false);
 
   onMount(() => {
@@ -38,38 +28,8 @@
     }
   });
 
-  // The header search outlives navigation, so the route seeds the scope only
-  // while no search is active. Once the user has typed (or picked a chip),
-  // their scope governs until they clear the query — navigating must not snap
-  // a widened search back to the section they happen to be in.
-  // TRACES: UR-049 | DR-064
-  let searchScope = $state<SearchScope>(resolveSearchScope($page.url.pathname));
-
-  $effect(() => {
-    const pathname = $page.url.pathname;
-    if (!searchQuery.trim()) {
-      searchScope = resolveSearchScope(pathname);
-    }
-  });
-
-  // The header bar is a *navigator*, not a second results surface: /search is
-  // the only route that renders searchResults, so searching here routes there
-  // with the query + route-derived scope in the URL. Previously this ran
-  // library.search() in place, which was invisible on every /library/** page
-  // except /library itself.
-  // TRACES: UR-049 | DR-063
-  async function handleSearch(query: string) {
-    if (!query.trim()) {
-      library.clearSearch();
-      return;
-    }
-    if (shouldNavigateToSearch($page.url.pathname, query)) {
-      await goto(searchRouteUrl(query, searchScope));
-      // The query now lives in the URL; clear the header input so returning to
-      // a library page does not leave a stale term sitting in the box.
-      searchQuery = "";
-    }
-  }
+  // Search lives in AppHeader (see HeaderSearch.svelte) so the same bar renders
+  // here and on /search — this layout no longer owns any search state.
 </script>
 
 {#if $isAuthLoading}
@@ -78,17 +38,8 @@
   </div>
 {:else if $isAuthenticated}
   <div class="h-full flex flex-col overflow-hidden">
-    <!-- Header (shared across all authenticated chrome; library supplies search) -->
-    <AppHeader search={librarySearch} />
-
-    {#snippet librarySearch()}
-      <!-- Scope chips live on /search, which owns the results. -->
-      <Search
-        bind:value={searchQuery}
-        placeholder="Search your library..."
-        onSearch={handleSearch}
-      />
-    {/snippet}
+    <!-- Header (shared across all authenticated chrome; it owns the search bar) -->
+    <AppHeader />
 
     <!-- Main content. The BottomUi below is an in-flow flex sibling, so this
          scroller is physically bounded above it and its last row can never

src/routes/library/[id]/+page.svelte

@@ -1,9 +1,10 @@
-<!-- TRACES: UR-035, UR-038, UR-048, UR-062 | DR-043, DR-062, DR-102, DR-103 -->
+<!-- TRACES: UR-035, UR-038, UR-048, UR-058, UR-062 | DR-043, DR-062, DR-102, DR-103, DR-142 -->
 <script lang="ts">
   import { onMount, untrack } from "svelte";
   import { page } from "$app/stores";
   import { goto } from "$app/navigation";
   import { navigateBack } from "$lib/utils/navigation";
+  import { useOfflineFilterReload } from "$lib/composables/useOfflineFilterReload";
   import { kindLabel } from "$lib/utils/mediaKind";
   import { commands } from "$lib/api/bindings";
   import type { MediaItem, Library } from "$lib/api/types";
@@ -33,9 +34,9 @@
   import ArtistLinks from "$lib/components/library/ArtistLinks.svelte";
   import {
     groupEpisodesBySeason,
-    seasonAnchorId,
     seasonRedirectTarget,
     episodeFocusHref,
+    episodeRedirectTarget,
     seriesPlayHref,
     seriesPlayLabel,
     initialExpandedSeasons,
@@ -84,6 +85,13 @@
     previousServerReachable = serverReachable;
   });
 
+  // Re-query when the offline downloaded-only gate changes, so a container's
+  // contents follow the filter the same way a library listing does.
+  // TRACES: UR-052 | DR-143
+  useOfflineFilterReload(() => {
+    if (itemId) loadItem();
+  });
+
   async function loadItem() {
     if (!itemId) return;
     // Only show spinner when navigating to a different item
@@ -113,6 +121,20 @@
         // No seriesId (stale cache / deep link) — fall through to the generic
         // rendering below rather than stranding the user.
       }
+
+      // Nor is an episode. A bare `/library/<episodeId>` — a deep link, an old
+      // bookmark, a caller that missed `episodeFocusHref` — lands in the series'
+      // Episode Focus View, so there is exactly one episode surface and it never
+      // has fewer affordances than the other (ux-flows §5B.1).
+      // TRACES: UR-058 | DR-142
+      if (item?.kind === "episode") {
+        const target = episodeRedirectTarget(item);
+        if (target) {
+          await goto(target, { replaceState: true });
+          return;
+        }
+        // Series-less episode: rendered by the Focus View below, series and all.
+      }
       console.log(`[LibraryDetail] ✓ Loaded item: ${item?.name} (${item?.kind})`);
       console.log(`[LibraryDetail] - Has people? ${item?.people ? `YES (${item.people.length})` : 'NO'}`);
       if (item?.people) {
@@ -185,13 +207,18 @@
           $page.url.searchParams.get("episode")
         );
 
-        // If we have a focused episode ID but couldn't find it in the seasons,
-        // fetch it directly (handles ID mismatch between APIs)
+        // Always fetch the focused episode in full. The season fan-out is a
+        // *list* query, so its episodes carry no cast and no genres — the Focus
+        // View would render a bare hero with the sections missing. This also
+        // still covers the original case: an episode id the fan-out never
+        // returned at all (an ID mismatch between APIs).
+        // TRACES: UR-058 | DR-142
         const episodeIdParam = $page.url.searchParams.get("episode");
-        if (episodeIdParam && !episodes.some((e) => e.id === episodeIdParam)) {
+        if (episodeIdParam) {
           try {
             directFetchedEpisode = await repo.getItem(episodeIdParam);
           } catch {
+            // Best-effort: the list entry still renders a usable hero.
             console.warn("Could not fetch focused episode directly:", episodeIdParam);
           }
         }
@@ -271,8 +298,9 @@
   }
 
   async function handlePlayAll() {
-    // For single items (Episode, Movie), play the item directly
-    if (item?.kind === "episode" || item?.kind === "movie") {
+    // A movie is a leaf — play it directly. (Episodes never get here; they
+    // play from the Focus View's own hero button.)
+    if (item?.kind === "movie") {
       goto(`/player/${itemId}`);
     } else if (item?.kind === "series" && itemId) {
       // Open the episode the viewer is up to, where an explicit Play/Resume
@@ -340,12 +368,16 @@
   // An empty series has nowhere for the hero button to lead.
   const canPlay = $derived(item?.kind !== "series" || currentEpisode !== null);
 
-  // Find the focused episode (check allEpisodes first, then fall back to directly fetched)
-  const focusedEpisode = $derived(
-    focusedEpisodeId
-      ? allEpisodes.find((e) => e.id === focusedEpisodeId) ?? directFetchedEpisode
-      : null
-  );
+  // The focused episode, as complete as we can make it: the full item fetched
+  // above layered over the list entry, so cast/genres are present without losing
+  // anything the fan-out knew. Either source alone is enough to render.
+  const focusedEpisode = $derived.by(() => {
+    if (!focusedEpisodeId) return null;
+    const listed = allEpisodes.find((e) => e.id === focusedEpisodeId) ?? null;
+    const fetched = directFetchedEpisode?.id === focusedEpisodeId ? directFetchedEpisode : null;
+    if (listed && fetched) return { ...listed, ...fetched };
+    return fetched ?? listed;
+  });
 
   const isMusicItem = $derived(
     item?.kind === "track" || item?.kind === "album" || item?.kind === "artist" || item?.kind === "playlist"
@@ -408,6 +440,10 @@
         {allEpisodes}
         onBack={handleBackToSeries}
       />
+    <!-- The same view for a series-less episode, so an episode is never shown
+         through a second, lesser surface. TRACES: UR-058 | DR-142 -->
+    {:else if item.kind === "episode"}
+      <EpisodeFocusView episode={item} series={null} allEpisodes={[]} onBack={goBack} />
     {:else}
     <div class="space-y-8">
       <!-- Back navigation -->
@@ -445,32 +481,7 @@
         <div class="flex-1 space-y-4">
           <div>
             <h1 class="text-3xl font-bold text-white">{item.name}</h1>
-            {#if item.kind === "episode"}
-              <!-- Links back to the parent series/season so the episode detail
-                   page is a navigable hub, not a dead end. TRACES: UR-058 | DR-087 -->
-              {#if item.seriesId && item.seriesName}
-                <p class="text-lg mt-1">
-                  <a
-                    href={`/library/${item.seriesId}`}
-                    class="text-[var(--color-jellyfin)] hover:underline"
-                  >{item.seriesName}</a>
-                </p>
-              {/if}
-              {#if item.parentIndexNumber || item.indexNumber}
-                <p class="text-lg text-gray-400 mt-1">
-                  <!-- Links to the season's place in the series list, not to a
-                       season page — seasons have none (DR-103). -->
-                  {#if item.seriesId && item.parentIndexNumber}
-                    <a
-                      href={`/library/${item.seriesId}#${seasonAnchorId(item.parentIndexNumber)}`}
-                      class="hover:underline hover:text-[var(--color-jellyfin)] transition-colors"
-                    >Season {item.parentIndexNumber}</a>
-                  {:else if item.parentIndexNumber}Season {item.parentIndexNumber}{/if}
-                  {#if item.parentIndexNumber && item.indexNumber}, {/if}
-                  {#if item.indexNumber}Episode {item.indexNumber}{/if}
-                </p>
-              {/if}
-            {:else if item.artistItems?.length || item.artists?.length}
+            {#if item.artistItems?.length || item.artists?.length}
               <p class="text-lg text-gray-400 mt-1">
                 <ArtistLinks
                   artistItems={item.artistItems}
@@ -515,7 +526,7 @@
                 {playLabel}
               </button>
             {/if}
-            {#if item.kind !== "episode" && item.kind !== "movie"}
+            {#if item.kind !== "movie"}
               <button
                 onclick={handleShufflePlay}
                 class="px-6 py-2 bg-[var(--color-surface)] hover:bg-[var(--color-surface-hover)] rounded-lg font-medium flex items-center gap-2 transition-colors"
@@ -551,13 +562,6 @@
                 isMovie={true}
                 size="lg"
               />
-            {:else if item.kind === "episode"}
-              <VideoDownloadButton
-                itemId={item.id}
-                itemName={item.name}
-                isMovie={false}
-                size="lg"
-              />
             {/if}
             <!-- Favourite. Sits with Play/Download rather than in the header,
                  per ux-flows §5B.3/§5B.4. TRACES: UR-068 | DR-119 -->
@@ -615,12 +619,13 @@
         </div>
       {/if}
 
-      <!-- Cast / Related — for Movies and Episodes these sit above the content
-           block; for Series they render *below* the seasons instead, so
-           continuation content precedes discovery content (UX §5B.4). -->
+      <!-- Cast / Related — for Movies these sit above the content block; for
+           Series they render *below* the seasons instead, so continuation
+           content precedes discovery content (UX §5B.4). Episodes never reach
+           here — they render through EpisodeFocusView (§5B.1). -->
       {#if item.kind !== "series"}
-        <!-- Cast Section - for Movies and Episodes -->
-        {#if (item.kind === "movie" || item.kind === "episode") && item.people?.length}
+        <!-- Cast Section - for Movies -->
+        {#if item.kind === "movie" && item.people?.length}
           <CastSection people={item.people ?? undefined} />
         {/if}
 

src/routes/library/favorites/+page.svelte

@@ -16,6 +16,7 @@
   import { auth } from "$lib/stores/auth";
   import { isServerReachable } from "$lib/stores/connectivity";
   import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
+  import { useOfflineFilterReload } from "$lib/composables/useOfflineFilterReload";
   import { navigateBack } from "$lib/utils/navigation";
   import { favoriteOverrides, retainFavorites } from "$lib/stores/favorites";
   import LibraryGrid from "$lib/components/library/LibraryGrid.svelte";
@@ -81,6 +82,8 @@
   });
 
   const { markLoaded } = useServerReachabilityReload(() => load(scope));
+  // Re-query when the offline downloaded-only gate changes. TRACES: UR-052 | DR-143
+  useOfflineFilterReload(() => load(scope));
 
   function selectScope(next: (typeof FAVORITE_SCOPES)[number]) {
     if (next === scope) return;

src/routes/library/movies/+page.svelte

@@ -16,6 +16,7 @@
   import { movies } from "$lib/stores/movies";
   import { isServerReachable } from "$lib/stores/connectivity";
   import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
+  import { useOfflineFilterReload } from "$lib/composables/useOfflineFilterReload";
   import HeroBanner from "$lib/components/home/HeroBanner.svelte";
   import Carousel from "$lib/components/home/Carousel.svelte";
   import LibraryViewTabs from "$lib/components/library/LibraryViewTabs.svelte";
@@ -69,6 +70,8 @@
   }
 
   const { markLoaded, checkServerReachability } = useServerReachabilityReload(load);
+  // Re-query when the offline downloaded-only gate changes. TRACES: UR-052 | DR-143
+  useOfflineFilterReload(load);
 
   onMount(async () => {
     await load();

src/routes/library/music/+page.svelte

@@ -8,6 +8,7 @@
   import { music } from "$lib/stores/music";
   import { isServerReachable } from "$lib/stores/connectivity";
   import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
+  import { useOfflineFilterReload } from "$lib/composables/useOfflineFilterReload";
   import HeroBanner from "$lib/components/home/HeroBanner.svelte";
   import Carousel from "$lib/components/home/Carousel.svelte";
   import type { MediaItem } from "$lib/api/types";
@@ -67,6 +68,8 @@
   }
 
   const { markLoaded, checkServerReachability } = useServerReachabilityReload(load);
+  // Re-query when the offline downloaded-only gate changes. TRACES: UR-052 | DR-143
+  useOfflineFilterReload(load);
 
   onMount(async () => {
     await load();

src/routes/library/tv/+page.svelte

@@ -16,6 +16,7 @@
   import { tv } from "$lib/stores/tv";
   import { isServerReachable } from "$lib/stores/connectivity";
   import { useServerReachabilityReload } from "$lib/composables/useServerReachabilityReload";
+  import { useOfflineFilterReload } from "$lib/composables/useOfflineFilterReload";
   import HeroBanner from "$lib/components/home/HeroBanner.svelte";
   import Carousel from "$lib/components/home/Carousel.svelte";
   import LibraryViewTabs from "$lib/components/library/LibraryViewTabs.svelte";
@@ -70,6 +71,8 @@
   }
 
   const { markLoaded, checkServerReachability } = useServerReachabilityReload(load);
+  // Re-query when the offline downloaded-only gate changes. TRACES: UR-052 | DR-143
+  useOfflineFilterReload(load);
 
   onMount(async () => {
     await load();

src/routes/player/[id]/+page.svelte

@@ -2,7 +2,6 @@
   import { onMount, onDestroy } from "svelte";
   import { page } from "$app/stores";
   import { goto } from "$app/navigation";
-  import { convertFileSrc } from "@tauri-apps/api/core";
   import { commands } from "$lib/api/bindings";
   import { downloadedFilePath, resolveVideoSource } from "$lib/player/localSource";
   import type { PlayQueueRequest } from "$lib/api/bindings";
@@ -244,9 +243,13 @@
         const fullPath = downloadedFilePath(storagePath, localDownload.filePath);
         console.log("loadAndPlay: Full local path:", fullPath);
 
-        // Convert file path to asset URL that can be played in webview
-        const localUrl = convertFileSrc(fullPath);
-        console.log("loadAndPlay: Converted to asset URL:", localUrl);
+        // Serve the file over the loopback media server rather than the asset
+        // protocol: the asset protocol answers a range-less request with the
+        // entire file, so a downloaded film never finished loading. Rust mints
+        // the URL (it holds the port and the per-session token).
+        // TRACES: UR-071 | DR-137
+        const localUrl = await commands.mediaLocalUrl(fullPath);
+        console.log("loadAndPlay: Local media URL resolved");
 
         if (isVideo) {
           // Local video files don't need transcoding and support native seeking
@@ -310,12 +313,17 @@
           // at all offline. Rust returns null when nothing is downloaded or the
           // file has gone, so this falls back to the server on its own.
           // TRACES: UR-071 | DR-123
+          // A downloaded file is served over the loopback media server, not the
+          // asset protocol — see DR-137. The URL is minted up front because
+          // resolveVideoSource stays pure/synchronous.
+          // TRACES: UR-071 | DR-123, DR-137
           const localPath = await commands.playerLocalMediaPath(id);
+          const localUrl = localPath ? await commands.mediaLocalUrl(localPath) : null;
           const source = resolveVideoSource({
             localPath,
             remoteUrl: playbackInfo.streamUrl,
             remoteNeedsTranscoding: playbackInfo.needsTranscoding,
-            toAssetUrl: convertFileSrc,
+            toAssetUrl: () => localUrl ?? "",
           });
 
           streamUrl = source.url;

src/routes/search/+page.svelte

@@ -5,40 +5,46 @@
   import Search from "$lib/components/Search.svelte";
   import SearchResults from "$lib/components/search/SearchResults.svelte";
   import SearchScopeChips from "$lib/components/search/SearchScopeChips.svelte";
-  import { resolveSearchScope, SEARCH_SCOPES, type SearchScope } from "$lib/utils/searchScope";
+  import {
+    parseSearchScope,
+    searchRouteUrl,
+    seedFromSearchUrl,
+    type SearchScope,
+    type SearchSeed,
+  } from "$lib/utils/searchScope";
+  import { episodeFocusHref } from "$lib/components/library/seriesNavigation";
   import type { MediaItem } from "$lib/api/types";
 
-  // `?q=` / `?scope=` seed the page so the desktop header search bar can hand
-  // a query over by navigating here — /search is the only surface that renders
-  // results, so every other search affordance routes into it.
+  // `?q=` / `?scope=` seed the page so the header search bar can hand a query
+  // over by navigating here — /search is the only surface that renders results,
+  // so every other search affordance routes into it.
   // TRACES: UR-049 | DR-063
-  const initialQuery = $page.url.searchParams.get("q") ?? "";
-  const initialScope = $page.url.searchParams.get("scope");
+  let searchQuery = $state($page.url.searchParams.get("q") ?? "");
+  let scope = $state<SearchScope>(parseSearchScope($page.url.searchParams.get("scope")));
 
-  let searchQuery = $state(initialQuery);
+  // The URL is *consumed*, not continuously reconciled: `applied` records the
+  // seed already taken, so the user's typing and chip picks stand until a real
+  // navigation brings a different one. It is a plain `let` on purpose — as
+  // `$state` it would be a dependency of the effect that writes it and the
+  // effect would re-run itself.
+  //
+  // Reading `$library.searchQuery` here instead (the previous shape) made every
+  // search re-run this effect, which then re-asserted the URL's query over
+  // whatever had been typed since — the input snapped back a keystroke later.
+  // TRACES: UR-049 | DR-063, DR-064, DR-147
+  let applied: SearchSeed | null = null;
 
-  // Route resolves the *initial* scope only. Deriving it reactively would snap
-  // a user who widened to All back to the route's scope on any navigation.
-  // TRACES: UR-049 | DR-064
-  let scope = $state<SearchScope>(
-    SEARCH_SCOPES.includes(initialScope as SearchScope)
-      ? (initialScope as SearchScope)
-      : resolveSearchScope($page.url.pathname)
-  );
-
-  // A query arriving in the URL must actually run — mounting with a seeded
-  // input alone would render the empty state with a filled box.
   $effect(() => {
-    const q = $page.url.searchParams.get("q") ?? "";
-    if (!q.trim()) return;
-    const urlScope = $page.url.searchParams.get("scope");
-    const nextScope = SEARCH_SCOPES.includes(urlScope as SearchScope)
-      ? (urlScope as SearchScope)
-      : "all";
-    if (q === $library.searchQuery && nextScope === scope) return;
-    searchQuery = q;
-    scope = nextScope;
-    library.search(q, nextScope);
+    const seed = seedFromSearchUrl($page.url.searchParams, applied);
+    if (!seed) return;
+    applied = seed;
+    searchQuery = seed.query;
+    scope = seed.scope;
+    if (seed.query.trim()) {
+      library.search(seed.query, seed.scope);
+    } else {
+      library.clearSearch();
+    }
   });
 
   async function handleSearch(query: string) {
@@ -49,9 +55,19 @@
     }
   }
 
-  // Changing the chip re-runs the current query; changing the query keeps scope.
+  // Chips write the scope to the URL so the header bar (which searches with
+  // whatever scope the URL carries) and this page cannot disagree about it.
+  // Applied optimistically as well, so the chip highlights on click rather than
+  // a navigation later.
+  // TRACES: UR-049 | DR-064, DR-147
   async function handleScopeChange(next: SearchScope) {
     scope = next;
+    applied = { query: searchQuery, scope: next };
+    await goto(searchRouteUrl(searchQuery, next), {
+      replaceState: true,
+      keepFocus: true,
+      noScroll: true,
+    });
     if (searchQuery.trim()) {
       await library.search(searchQuery, next);
     }
@@ -75,8 +91,11 @@
         goto(`/library/${item.id}`);
         break;
       case "Episode":
-        // Episodes play directly
-        goto(`/player/${item.id}`);
+        // Tap opens, it does not play (ux-flows §5B.1/§5B.5) — a search hit
+        // went straight to the player, so it was the one episode entry point
+        // with no way to reach download, cast or the rest of the episode.
+        // TRACES: UR-058 | DR-142
+        goto(episodeFocusHref(item));
         break;
       default:
         goto(`/library/${item.id}`);
@@ -88,13 +107,17 @@
 <div class="max-w-6xl mx-auto">
   <h1 class="text-2xl font-bold mb-6">Search</h1>
 
-  <!-- Search Input -->
+  <!-- Search input. On md+ the header bar owns the input (it is present on this
+       route too), so rendering one here as well would put two search boxes on
+       the same screen; below md the header has none and this is the only one. -->
   <div class="mb-6 space-y-3">
-    <Search
-      bind:value={searchQuery}
-      placeholder="Search your library..."
-      onSearch={handleSearch}
-    />
+    <div class="md:hidden">
+      <Search
+        bind:value={searchQuery}
+        placeholder="Search your library..."
+        onSearch={handleSearch}
+      />
+    </div>
     <SearchScopeChips {scope} onChange={handleScopeChange} />
   </div>
 

src/routes/search/searchPage.test.ts

@@ -0,0 +1,129 @@
+/**
+ * Regression: `/search` must not fight the user's typing when the page was
+ * seeded from the URL (`?q=`), i.e. when the desktop header search navigated
+ * here.
+ *
+ * The original seeding effect read `$library.searchQuery`, so every store write
+ * re-ran it and re-asserted the URL's `q` over whatever had been typed since.
+ * Typing one more character therefore snapped the input back to the query the
+ * header had sent, and picking a scope chip snapped back to the URL's scope.
+ * Arriving from the bottom-nav Search tab (no `?q=`) hit the effect's
+ * empty-query early return, so the same component behaved correctly — the bug
+ * only showed up on the header's route into the page.
+ *
+ * TRACES: UR-049 | DR-147
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
+
+const { pageStore, libState, search, clearSearch, goto } = vi.hoisted(() => {
+  // svelte/store is safe to import inside a hoisted factory (no test-file TDZ).
+  const { writable } = require("svelte/store");
+  return {
+    pageStore: writable({ url: new URL("http://localhost/search") }),
+    libState: writable({ searchQuery: "", searchResults: [], loadingCount: 0 }),
+    search: vi.fn(),
+    clearSearch: vi.fn(),
+    goto: vi.fn(),
+  };
+});
+
+vi.mock("$app/stores", () => ({ page: pageStore, navigating: { subscribe: () => () => {} } }));
+vi.mock("$app/navigation", () => ({ goto, afterNavigate: vi.fn(), beforeNavigate: vi.fn() }));
+vi.mock("$lib/stores/library", () => ({
+  library: { subscribe: libState.subscribe, search, clearSearch },
+}));
+
+import Page from "./+page.svelte";
+
+/** The store write `library.search` performs — the trigger for the old loop. */
+function primeSearch() {
+  search.mockImplementation(async (query: string) => {
+    libState.update((s: Record<string, unknown>) => ({ ...s, searchQuery: query }));
+  });
+  clearSearch.mockImplementation(() => {
+    libState.update((s: Record<string, unknown>) => ({ ...s, searchQuery: "", searchResults: [] }));
+  });
+}
+
+/** Wait past Search.svelte's 300ms input debounce, then let effects settle. */
+const afterDebounce = () => new Promise((resolve) => setTimeout(resolve, 450));
+
+function input(): HTMLInputElement {
+  return screen.getByPlaceholderText("Search your library...") as HTMLInputElement;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  libState.set({ searchQuery: "", searchResults: [], loadingCount: 0 });
+  pageStore.set({ url: new URL("http://localhost/search") });
+  primeSearch();
+  // Model SvelteKit: a goto publishes the new URL through the page store, so a
+  // scope chip's URL round trip really runs through the seeding effect.
+  goto.mockImplementation(async (url: string) => {
+    pageStore.set({ url: new URL(url, "http://localhost") });
+  });
+});
+
+describe("/search seeded from the URL", () => {
+  it("keeps the text the user types on top of the seeded query", async () => {
+    pageStore.set({ url: new URL("http://localhost/search?q=abc") });
+    render(Page);
+
+    await waitFor(() => expect(search).toHaveBeenCalledWith("abc", "all"));
+
+    await fireEvent.input(input(), { target: { value: "abcd" } });
+    await afterDebounce();
+
+    expect(input().value).toBe("abcd");
+    expect(search).toHaveBeenLastCalledWith("abcd", "all");
+  });
+
+  it("keeps a scope chip the user picks instead of snapping back to the URL", async () => {
+    pageStore.set({ url: new URL("http://localhost/search?q=abc&scope=music") });
+    render(Page);
+
+    await waitFor(() => expect(search).toHaveBeenCalledWith("abc", "music"));
+
+    await fireEvent.click(screen.getByRole("radio", { name: "All" }));
+    await afterDebounce();
+
+    expect(screen.getByRole("radio", { name: "All" }).getAttribute("aria-checked")).toBe("true");
+    expect(search).toHaveBeenLastCalledWith("abc", "all");
+  });
+
+  it("re-seeds when a fresh query arrives in the URL (header search on this page)", async () => {
+    pageStore.set({ url: new URL("http://localhost/search?q=abc") });
+    render(Page);
+    await waitFor(() => expect(search).toHaveBeenCalledWith("abc", "all"));
+
+    pageStore.set({ url: new URL("http://localhost/search?q=zeppelin") });
+
+    await waitFor(() => expect(search).toHaveBeenLastCalledWith("zeppelin", "all"));
+    expect(input().value).toBe("zeppelin");
+  });
+
+  it("clears when the URL query is emptied", async () => {
+    pageStore.set({ url: new URL("http://localhost/search?q=abc") });
+    render(Page);
+    await waitFor(() => expect(search).toHaveBeenCalledWith("abc", "all"));
+
+    pageStore.set({ url: new URL("http://localhost/search") });
+
+    await waitFor(() => expect(input().value).toBe(""));
+    expect(screen.getByText("Search your entire library")).toBeTruthy();
+  });
+});
+
+describe("/search entered with no query (bottom-nav Search tab)", () => {
+  it("searches what the user types and leaves it alone", async () => {
+    render(Page);
+
+    await fireEvent.input(input(), { target: { value: "moon" } });
+    await afterDebounce();
+
+    expect(input().value).toBe("moon");
+    expect(search).toHaveBeenLastCalledWith("moon", "all");
+  });
+});

src/routes/settings/+page.svelte

@@ -1,4 +1,4 @@
-<!-- TRACES: UR-023, UR-027, UR-029, UR-057 | DR-030, DR-048, DR-077, DR-086 -->
+<!-- TRACES: UR-023, UR-025, UR-027, UR-029, UR-057 | DR-030, DR-048, DR-077, DR-086, DR-132 -->
 <script lang="ts">
   import { onMount } from "svelte";
   import { commands } from "$lib/api/bindings";
@@ -20,6 +20,7 @@
   } from "$lib/services/imageCache";
   import { getCacheConfig, updateCacheConfig } from "$lib/services/preload";
   import SearchGroupOrderList from "$lib/components/settings/SearchGroupOrderList.svelte";
+  import PendingSyncList from "$lib/components/sync/PendingSyncList.svelte";
   import { library, viewMode } from "$lib/stores/library";
   import {
     isNetworkDetectionSupported,
@@ -674,6 +675,18 @@
         </div>
       </div>
 
+      <!-- Pending server updates. Lives here as well as behind the offline
+           banner's badge, because a row that keeps failing is still queued once
+           the server is reachable again — when no banner is on screen.
+           TRACES: UR-025 | DR-132 -->
+      <div class="border-t border-gray-700 pt-6">
+        <h2 class="text-2xl font-bold text-white mb-4">Waiting to sync</h2>
+
+        <div class="bg-[var(--color-surface)] rounded-lg p-6">
+          <PendingSyncList />
+        </div>
+      </div>
+
       <!-- Image Cache Settings -->
       <div class="border-t border-gray-700 pt-6">
         <h2 class="text-2xl font-bold text-white mb-4">Image Cache</h2>