domain: primaryImageTag -> imageId end-to-end (phase 4a/4b)

Rust: PlayerMediaItem and MergedMediaItem gain image_id (dual-carry),
populated from primary_image_tag at every construction/conversion site.
Regenerated bindings.

Frontend: all catalog + player + merged readers now use imageId. The
NowPlayingItem->MediaItem bridge (player.ts) properly maps the remote
session's Jellyfin fields (Type, runTimeTicks, primaryImageTag) onto the
neutral kind/durationMs/imageId. Types that are genuinely out of scope
(Person, NowPlayingItem, PlayItemRequest) keep primaryImageTag.

Rust 456, frontend 644, check clean.

src/lib/api/bindings.ts

@@ -1918,7 +1918,11 @@ export type MediaType = "audio" | "video"
  * Lightweight media item for merged playback state
  * Converts from both local MediaItem and remote NowPlayingItem
  */
-export type MergedMediaItem = { id: string; title: string; artist: string | null; album: string | null; albumId: string | null; duration: number | null; primaryImageTag: string | null; mediaType: string }
+export type MergedMediaItem = { id: string; title: string; artist: string | null; album: string | null; albumId: string | null; duration: number | null; primaryImageTag: string | null; 
+/**
+ * Neutral image identifier — replaces `primary_image_tag` (same value).
+ */
+imageId: string | null; mediaType: string }
 /**
  * Argument struct for [`set_network_state`].
  * 
@@ -2110,9 +2114,17 @@ artistItems?: ArtistItem[] | null;
  */
 artists?: string[] | null; 
 /**
- * Primary image tag for artwork
+ * Primary image tag for artwork.
+ * 
+ * Legacy Jellyfin name; being replaced by `image_id` (same value). Dual-carried
+ * while the frontend migrates (docs/specs/frontend-domain-model.md).
  */
 primaryImageTag?: string | null; 
+/**
+ * Neutral image identifier the frontend resolves to a URL — replaces
+ * `primary_image_tag`.
+ */
+imageId?: string | null; 
 /**
  * Item type (Audio, Movie, Episode, etc.)
  */

src/lib/components/library/ArtistDetailView.svelte

@@ -112,12 +112,12 @@
     <!-- Artist Info -->
     <div class="flex flex-col items-center text-center py-12">
       <!-- Artist Image -->
-      {#if artist.primaryImageTag}
+      {#if artist.imageId}
         <div class="mb-6 rounded-full overflow-hidden w-40 h-40 shadow-lg">
           <CachedImage
             itemId={artist.id}
             imageType="Primary"
-            tag={artist.primaryImageTag}
+            tag={artist.imageId}
             maxWidth={400}
             alt={artist.name}
             class="w-full h-full object-cover"
@@ -160,11 +160,11 @@
             class="group cursor-pointer"
           >
             <div class="aspect-square bg-[var(--color-surface)] rounded-lg overflow-hidden mb-2 group-hover:opacity-80 transition-opacity">
-              {#if album.primaryImageTag}
+              {#if album.imageId}
                 <CachedImage
                   itemId={album.id}
                   imageType="Primary"
-                  tag={album.primaryImageTag}
+                  tag={album.imageId}
                   maxWidth={200}
                   alt={album.name}
                   class="w-full h-full object-cover"
@@ -218,11 +218,11 @@
               class="group text-center"
             >
               <div class="w-32 h-32 bg-[var(--color-surface)] rounded-full overflow-hidden mb-2 mx-auto group-hover:opacity-80 transition-opacity">
-                {#if relatedArtist.primaryImageTag}
+                {#if relatedArtist.imageId}
                   <CachedImage
                     itemId={relatedArtist.id}
                     imageType="Primary"
-                    tag={relatedArtist.primaryImageTag}
+                    tag={relatedArtist.imageId}
                     maxWidth={200}
                     alt={relatedArtist.name}
                     class="w-full h-full object-cover"

src/lib/components/library/EpisodeFocusView.svelte

@@ -77,8 +77,8 @@
     if (episode.backdropImageTags?.[0]) {
       return { itemId: episode.id, imageType: "Backdrop" as const, tag: episode.backdropImageTags[0] };
     }
-    if (episode.primaryImageTag) {
-      return { itemId: episode.id, imageType: "Primary" as const, tag: episode.primaryImageTag };
+    if (episode.imageId) {
+      return { itemId: episode.id, imageType: "Primary" as const, tag: episode.imageId };
     }
     if (series.backdropImageTags?.[0]) {
       return { itemId: series.id, imageType: "Backdrop" as const, tag: series.backdropImageTags[0] };
@@ -246,7 +246,7 @@
             <CachedImage
               itemId={ep.id}
               imageType="Primary"
-              tag={ep.primaryImageTag}
+              tag={ep.imageId}
               maxWidth={400}
               alt={ep.name}
               class="w-full h-full object-cover transition-transform {isCurrent ? '' : 'group-hover/card:scale-105'}"

src/lib/components/library/EpisodeRow.svelte

@@ -59,7 +59,7 @@
     <CachedImage
       itemId={episode.id}
       imageType="Primary"
-      tag={episode.primaryImageTag}
+      tag={episode.imageId}
       maxWidth={320}
       alt={episode.name}
       class="w-full h-full object-cover transition-transform group-hover/row:scale-105"

src/lib/components/library/GenericGenreBrowser.svelte

@@ -234,7 +234,7 @@
                 <CachedImage
                   itemId={item.id}
                   imageType="Primary"
-                  tag={item.primaryImageTag}
+                  tag={item.imageId}
                   maxWidth={300}
                   alt={item.name}
                   class="w-full h-full object-cover group-hover:scale-105 transition-transform"

src/lib/components/library/LibraryListView.svelte

@@ -19,7 +19,7 @@
   }
 
   function getImageTag(item: MediaItem | Library): string | undefined {
-    return "primaryImageTag" in item ? (item.primaryImageTag ?? undefined) : ("imageTag" in item ? (item.imageTag ?? undefined) : undefined);
+    return "imageId" in item ? (item.imageId ?? undefined) : ("imageTag" in item ? (item.imageTag ?? undefined) : undefined);
   }
 
   function getSubtitle(item: MediaItem | Library): string {

src/lib/components/library/MediaCard.svelte

@@ -113,7 +113,7 @@
   });
 
   const imageTag = $derived(
-    "primaryImageTag" in item ? item.primaryImageTag : ("imageTag" in item ? item.imageTag : undefined)
+    "imageId" in item ? item.imageId : ("imageTag" in item ? item.imageTag : undefined)
   );
 
   const maxWidth = $derived(size === "large" ? 400 : size === "medium" ? 300 : 200);

src/lib/components/library/PersonDetailView.svelte

@@ -53,7 +53,7 @@
       <CachedImage
         itemId={person.id}
         imageType="Primary"
-        tag={person.primaryImageTag}
+        tag={person.imageId}
         maxWidth={400}
         alt={person.name}
         class="w-full rounded-lg shadow-lg"

src/lib/components/library/PlaylistDetailView.svelte

@@ -146,11 +146,11 @@
   <div class="flex gap-6 pt-4">
     <!-- Playlist artwork -->
     <div class="flex-shrink-0 w-48">
-      {#if playlist.primaryImageTag}
+      {#if playlist.imageId}
         <CachedImage
           itemId={playlist.id}
           imageType="Primary"
-          tag={playlist.primaryImageTag}
+          tag={playlist.imageId}
           maxWidth={400}
           alt={playlist.name}
           class="w-full rounded-lg shadow-lg"

src/lib/components/library/SeasonSection.svelte

@@ -28,7 +28,7 @@
       <CachedImage
         itemId={season.id}
         imageType="Primary"
-        tag={season.primaryImageTag}
+        tag={season.imageId}
         maxWidth={200}
         alt={seasonName}
         class="w-full h-full object-cover"

src/lib/components/player/AudioPlayer.svelte

@@ -143,7 +143,7 @@
         <CachedImage
           itemId={artworkItemId}
           imageType="Primary"
-          tag={displayMedia?.primaryImageTag}
+          tag={displayMedia?.imageId}
           maxWidth={800}
           alt=""
           class="w-full h-full object-cover blur-3xl opacity-30"
@@ -223,7 +223,7 @@
           <CachedImage
             itemId={artworkItemId}
             imageType="Primary"
-            tag={displayMedia?.primaryImageTag}
+            tag={displayMedia?.imageId}
             maxWidth={500}
             alt={displayMedia?.name}
             class="w-full h-full object-cover"

src/lib/components/player/MiniPlayer.svelte

@@ -326,7 +326,7 @@
             <CachedImage
               itemId={displayMedia.albumId || displayMedia.id}
               imageType="Primary"
-              tag={displayMedia.primaryImageTag}
+              tag={displayMedia.imageId}
               maxWidth={100}
               alt={displayMedia?.name}
               class="w-full h-full object-cover"

src/lib/components/player/NextEpisodePopup.svelte

@@ -78,11 +78,11 @@
         <div
           class="relative flex-shrink-0 w-28 h-16 rounded-lg overflow-hidden bg-gray-800"
         >
-          {#if imageId && $nextEpisodeItem.primaryImageTag}
+          {#if imageId && $nextEpisodeItem.imageId}
             <CachedImage
               itemId={imageId}
               imageType="Primary"
-              tag={$nextEpisodeItem.primaryImageTag}
+              tag={$nextEpisodeItem.imageId}
               maxHeight={200}
               alt={$nextEpisodeItem.name}
               class="w-full h-full object-cover"

src/lib/components/player/Queue.svelte

@@ -184,11 +184,11 @@
 
                 <!-- Artwork -->
                 <div class="w-10 h-10 rounded bg-gray-800 flex-shrink-0 overflow-hidden">
-                  {#if item.primaryImageTag}
+                  {#if item.imageId}
                     <CachedImage
                       itemId={item.id}
                       imageType="Primary"
-                      tag={item.primaryImageTag}
+                      tag={item.imageId}
                       maxWidth={80}
                       alt={item.name}
                       class="w-full h-full object-cover"

src/lib/components/player/VideoPlayer.svelte

@@ -1223,7 +1223,7 @@
           needsTranscoding: false,
           // Now-playing metadata so the lockscreen/miniplayer show the item.
           artist: media.seriesName ?? null,
-          primaryImageTag: media.primaryImageTag ?? null,
+          primaryImageTag: media.imageId ?? null,
           serverId: media.serverId ?? null,
           // Real duration so the lockscreen scrubber has a range to draw.
           durationSeconds: duration > 0 ? duration : null,
@@ -1626,11 +1626,11 @@
     {#if !isMediaReady}
       <div class="absolute inset-0 flex items-center justify-center bg-black">
         <!-- Poster/Title Card -->
-        {#if media?.primaryImageTag}
+        {#if media?.imageId}
           <CachedImage
             itemId={media.id}
             imageType="Primary"
-            tag={media.primaryImageTag}
+            tag={media.imageId}
             maxHeight={1080}
             alt={media?.name || "Video"}
             class="max-w-full max-h-full object-contain"

src/lib/components/playlist/AddToPlaylistModal.svelte

@@ -121,11 +121,11 @@
               class="w-full flex items-center gap-3 p-3 hover:bg-[var(--color-surface-hover)] rounded-lg transition-colors disabled:opacity-50"
             >
               <div class="w-10 h-10 flex-shrink-0 rounded overflow-hidden">
-                {#if playlist.primaryImageTag}
+                {#if playlist.imageId}
                   <CachedImage
                     itemId={playlist.id}
                     imageType="Primary"
-                    tag={playlist.primaryImageTag}
+                    tag={playlist.imageId}
                     maxWidth={80}
                     alt={playlist.name}
                     class="w-full h-full object-cover"

src/lib/stores/movies.ts

@@ -45,7 +45,7 @@ function createMoviesStore() {
 
   /** Artwork check for hero candidates: needs a backdrop or a primary image. */
   const hasArt = (i: MediaItem) =>
-    !!(i.backdropImageTags && i.backdropImageTags.length > 0) || !!i.primaryImageTag;
+    !!(i.backdropImageTags && i.backdropImageTags.length > 0) || !!i.imageId;
 
   async function loadSections(libraryId: string) {
     update(s => ({

src/lib/stores/music.ts

@@ -55,7 +55,7 @@ function createMusicStore() {
 
   /** Artwork check for hero candidates: needs a primary image or backdrop. */
   const hasArt = (i: MediaItem) =>
-    !!i.primaryImageTag || !!(i.backdropImageTags && i.backdropImageTags.length > 0);
+    !!i.imageId || !!(i.backdropImageTags && i.backdropImageTags.length > 0);
 
   async function loadSections(libraryId: string) {
     update(s => ({

src/lib/stores/player.ts

@@ -9,7 +9,7 @@
  */
 
 import { writable, derived } from "svelte/store";
-import type { MediaItem, ItemType } from "$lib/api/types";
+import type { MediaItem, MediaKind } from "$lib/api/types";
 import type { NowPlayingItem } from "$lib/api/bindings";
 import { isRemoteMode } from "./playbackMode";
 import { selectedSession } from "./sessions";
@@ -24,7 +24,7 @@ export interface MergedMediaItem {
   album: string | null;
   albumId: string | null;
   duration: number | null;
-  primaryImageTag: string | null;
+  imageId: string | null;
   mediaType: "audio" | "video";
 }
 
@@ -170,16 +170,24 @@ export const isMuted = derived(player, ($p) => $p.muted);
  * falls back to the `artists` string list when `artistItems` is absent.)
  */
 function nowPlayingToMediaItem(npi: NowPlayingItem): MediaItem {
+  // NowPlayingItem is remote-session data still carrying Jellyfin field names
+  // (Type, runTimeTicks, primaryImageTag). Map it onto the neutral MediaItem the
+  // UI consumes. Only the coarse audio/video split matters here for display.
+  const kind: MediaKind =
+    npi.Type === "Movie" ? "movie" :
+    npi.Type === "Episode" ? "episode" :
+    npi.Type === "MusicAlbum" ? "album" :
+    "track";
   return {
     id: npi.id ?? "",
     name: npi.name ?? "",
-    type: (npi.Type ?? "Audio") as ItemType,
+    kind,
     serverId: "",
     albumName: npi.album,
     albumId: npi.albumId,
     artists: npi.artists,
-    primaryImageTag: npi.primaryImageTag ?? npi.albumPrimaryImageTag,
-    runTimeTicks: npi.runTimeTicks,
+    imageId: npi.primaryImageTag ?? npi.albumPrimaryImageTag,
+    durationMs: npi.runTimeTicks != null ? Math.floor(npi.runTimeTicks / 10000) : null,
   } as MediaItem;
 }
 

src/lib/stores/tv.ts

@@ -50,7 +50,7 @@ function createTvStore() {
   const hasArt = (i: MediaItem) =>
     !!(i.backdropImageTags && i.backdropImageTags.length > 0) ||
     !!(i.parentBackdropImageTags && i.parentBackdropImageTags.length > 0) ||
-    !!i.primaryImageTag;
+    !!i.imageId;
 
   async function loadSections(libraryId: string) {
     update(s => ({

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

@@ -355,11 +355,11 @@
       <div class="flex gap-6">
         <!-- Poster -->
         <div class="flex-shrink-0 w-48">
-          {#if item.primaryImageTag}
+          {#if item.imageId}
             <CachedImage
               itemId={item.id}
               imageType="Primary"
-              tag={item.primaryImageTag}
+              tag={item.imageId}
               maxWidth={400}
               alt={item.name}
               class="w-full {isMusicItem ? 'aspect-square' : ''} rounded-lg shadow-lg"

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

@@ -355,8 +355,8 @@
                   artist: t.artists?.join(", ") || null,
                   album: t.albumName || null,
                   duration: t.runTimeTicks ? t.runTimeTicks / 10000000 : null,
-                  artworkUrl: t.primaryImageTag
-                    ? repo.getImageUrl(t.albumId || t.id, "Primary", { maxWidth: 300, tag: t.primaryImageTag })
+                  artworkUrl: t.imageId
+                    ? repo.getImageUrl(t.albumId || t.id, "Primary", { maxWidth: 300, tag: t.imageId })
                     : null,
                   mediaType: "audio",
                   streamUrl: trackStreamUrl,