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