diff --git a/web/src/lib/components/PlaylistCard.svelte b/web/src/lib/components/PlaylistCard.svelte
index c1a90946..65078bb8 100644
--- a/web/src/lib/components/PlaylistCard.svelte
+++ b/web/src/lib/components/PlaylistCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Play } from 'lucide-svelte';
-  import type { Playlist } from '$lib/api/types';
+  import type { Playlist, PlaylistTrack, TrackRef } from '$lib/api/types';
   import { user } from '$lib/auth/store.svelte';
   import { getPlaylist } from '$lib/api/playlists';
   import { playQueue } from '$lib/player/store.svelte';
@@ -11,6 +11,27 @@
 
   let starting = $state(false);
 
+  // Map PlaylistTrack rows to TrackRef shape and drop tracks whose upstream
+  // file has been removed (track_id is null). Mirrors PlaylistTrackRow's
+  // liveTrack derivation.
+  function toTrackRefs(rows: PlaylistTrack[]): TrackRef[] {
+    const out: TrackRef[] = [];
+    for (const r of rows) {
+      if (!r.track_id) continue;
+      out.push({
+        id: r.track_id,
+        title: r.title,
+        album_id: r.album_id ?? '',
+        album_title: r.album_title,
+        artist_id: r.artist_id ?? '',
+        artist_name: r.artist_name,
+        duration_sec: r.duration_sec,
+        stream_url: r.stream_url ?? ''
+      });
+    }
+    return out;
+  }
+
   async function onPlayClick(e: MouseEvent) {
     e.preventDefault();
     e.stopPropagation();
@@ -18,8 +39,9 @@
     starting = true;
     try {
       const detail = await getPlaylist(playlist.id);
-      if (detail.tracks.length > 0) {
-        playQueue(detail.tracks, 0);
+      const refs = toTrackRefs(detail.tracks);
+      if (refs.length > 0) {
+        playQueue(refs, 0);
       }
     } finally {
       starting = false;