From 3f9798be9bfa1a27a5ebd55996683b961abb7a2c Mon Sep 17 00:00:00 2001
From: Eric Coissac <eric@coissac.eu>
Date: Wed, 17 Dec 2025 15:25:02 +0100
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20de=20la=20vue=20playlist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webapp/src/components/PlayListManager.vue | 846 +++++++++++++-----
 pmoapp/webapp/src/services/audioCache.ts      |   1 +
 pmoapp/webapp/src/services/playlists.ts       |  10 +
 pmocache/src/db.rs                            |  58 +-
 pmoplaylist/src/api.rs                        |  97 +-
 pmoplaylist/src/handle/read.rs                |   2 +
 pmoplaylist/src/handle/write.rs               |  28 +-
 pmoplaylist/src/manager.rs                    |  44 +-
 pmoplaylist/src/persistence/mod.rs            |  45 +-
 pmoplaylist/src/playlist/mod.rs               |  14 +
 10 files changed, 895 insertions(+), 250 deletions(-)

diff --git a/pmoapp/webapp/src/components/PlayListManager.vue b/pmoapp/webapp/src/components/PlayListManager.vue
index 1d1f3d6d..cef56c06 100644
--- a/pmoapp/webapp/src/components/PlayListManager.vue
+++ b/pmoapp/webapp/src/components/PlayListManager.vue
@@ -46,6 +46,20 @@
                 placeholder="ex: qobuz/discover"
               />
             </label>
+            <label class="field">
+              <span>Cover PK (optional)</span>
+              <input
+                v-model.trim="createForm.coverPk"
+                type="text"
+                placeholder="cover cache pk"
+              />
+            </label>
+            <div class="cover-preview-row" v-if="createCoverPreview">
+              <div class="cover-preview small">
+                <img :src="createCoverPreview" alt="Cover preview" loading="lazy" />
+              </div>
+              <span class="small muted">Preview sourced from /covers/image/{{ createForm.coverPk }}</span>
+            </div>
             <label class="checkbox">
               <input type="checkbox" v-model="createForm.persistent" />
               Persistent (stored in SQLite)
@@ -143,12 +157,18 @@
           </template>
           <template v-else>
             <div class="detail-header">
-              <div>
+              <div class="detail-cover">
+                <img v-if="summaryCoverUrl" :src="summaryCoverUrl" alt="Playlist cover" />
+                <div v-else class="cover-placeholder large">🎵</div>
+              </div>
+              <div class="detail-header-main">
                 <h3>
-                  {{ selectedSummary?.title || selectedSummary?.id || "Untitled" }}
-                  <span class="pill">{{ formatRoleLabel(selectedSummary?.role || "") }}</span>
+                  {{ detailTitle }}
+                  <span class="pill">{{ selectedSummary ? formatRoleLabel(selectedSummary.role) : "Unknown" }}</span>
                 </h3>
-                <p class="detail-id">#{{ selectedSummary?.id }}</p>
+                <p class="detail-id">
+                  {{ detailId ? `#${detailId}` : "—" }}
+                </p>
               </div>
               <div class="detail-header-actions">
                 <button @click="loadSelectedPlaylist(false)" :disabled="detailLoading">
@@ -157,13 +177,34 @@
               </div>
             </div>
             <div class="detail-stats">
-              <span><strong>{{ selectedSummary?.track_count ?? 0 }}</strong> tracks</span>
-              <span><strong>{{ formatCapacity(selectedSummary?.max_size) }}</strong> capacity</span>
-              <span><strong>{{ formatTtl(selectedSummary?.default_ttl_secs) }}</strong> TTL</span>
+              <span><strong>{{ selectedSummary ? selectedSummary.track_count : 0 }}</strong> tracks</span>
+              <span>
+                <strong>{{ formatCapacity(selectedSummary ? selectedSummary.max_size : undefined) }}</strong>
+                capacity
+              </span>
+              <span>
+                <strong>{{ formatTtl(selectedSummary ? selectedSummary.default_ttl_secs : undefined) }}</strong>
+                TTL
+              </span>
               <span>
                 Last change:
                 {{ selectedSummary ? formatRelativeDate(selectedSummary.last_change) : "—" }}
               </span>
+              <span class="cover-stat">
+                Cover:
+                <template v-if="selectedSummary?.cover_pk">
+                  <code>{{ selectedSummary.cover_pk }}</code>
+                  <button
+                    class="btn-secondary btn-compact"
+                    @click="selectedSummary?.cover_pk && copyPk(selectedSummary.cover_pk)"
+                  >
+                    Copy
+                  </button>
+                </template>
+                <template v-else>
+                  <span>None</span>
+                </template>
+              </span>
             </div>
             <div class="detail-messages">
               <p v-if="detailError" class="error">❌ {{ detailError }}</p>
@@ -199,19 +240,40 @@
                       <span>Max size</span>
                       <input v-model="updateForm.maxSize" type="number" min="0" placeholder="Unlimited" />
                     </label>
-                    <label class="field">
-                      <span>Default TTL (s)</span>
-                      <input
-                        v-model="updateForm.defaultTtl"
-                        type="number"
-                        min="0"
-                        placeholder="Never expire"
-                      />
-                    </label>
-                  </div>
-                  <div class="form-messages">
-                    <p v-if="updateState.error" class="error">❌ {{ updateState.error }}</p>
+                  <label class="field">
+                    <span>Default TTL (s)</span>
+                    <input
+                      v-model="updateForm.defaultTtl"
+                      type="number"
+                      min="0"
+                      placeholder="Never expire"
+                    />
+                  </label>
+                </div>
+                <label class="field">
+                  <span>Cover PK</span>
+                  <input
+                    v-model="updateForm.coverPk"
+                    type="text"
+                    placeholder="cover cache pk (leave blank to clear)"
+                  />
+                </label>
+                <div class="cover-preview-row">
+                  <div class="cover-preview">
+                    <img v-if="updateCoverPreview" :src="updateCoverPreview" alt="Cover preview" loading="lazy" />
+                    <div v-else class="cover-placeholder small">No cover</div>
                   </div>
+                  <button
+                    type="button"
+                    class="btn-secondary btn-compact"
+                    @click="updateForm.coverPk = ''"
+                  >
+                    Clear
+                  </button>
+                </div>
+                <div class="form-messages">
+                  <p v-if="updateState.error" class="error">❌ {{ updateState.error }}</p>
+                </div>
                   <button type="submit" class="primary" :disabled="updateState.busy">
                     {{ updateState.busy ? "Saving..." : "Apply changes" }}
                   </button>
@@ -257,27 +319,63 @@
                     <span v-if="lazyTracksCount > 0">· {{ lazyTracksCount }} lazy</span>
                   </span>
                 </div>
-                <div class="track-table" v-if="selectedPlaylist.tracks.length > 0">
-                  <div class="track-row track-header">
-                    <span>PK</span>
-                    <span>Added</span>
-                    <span>TTL</span>
-                    <span>Actions</span>
-                  </div>
-                  <div
+                <div class="track-grid" v-if="sortedTracks.length > 0">
+                  <article
                     v-for="track in sortedTracks"
-                    :key="track.cache_pk"
-                    class="track-row"
-                    :class="{ lazy: isLazyTrack(track.cache_pk) }"
+                    :key="`${track.cache_pk}-${track.added_at}`"
+                    class="track-card"
+                    :class="{ lazy: isLazyTrack(track) }"
                   >
-                    <span class="pk">
-                      {{ track.cache_pk }}
-                      <span v-if="isLazyTrack(track.cache_pk)" class="pill warning">Lazy</span>
-                    </span>
-                    <span>{{ formatRelativeDate(track.added_at) }}</span>
-                    <span>{{ trackTtlLabel(track.ttl_secs) }}</span>
-                    <span class="row-actions">
-                      <button class="btn-secondary" @click="copyPk(track.cache_pk)">Copy</button>
+                    <div class="cover-wrapper">
+                      <img
+                        v-if="trackCoverUrl(track, 200)"
+                        :src="trackCoverUrl(track, 200)"
+                        :alt="trackTitle(track)"
+                        loading="lazy"
+                      />
+                      <div v-else class="cover-placeholder">🎵</div>
+                      <span v-if="isLazyTrack(track) || trackLazyReference(track)" class="cover-lazy-pill">
+                        {{ isLazyTrack(track) ? "Lazy entry" : "Lazy ref" }}
+                      </span>
+                    </div>
+                    <div class="track-info">
+                      <div class="track-title">
+                        {{ trackTitle(track) }}
+                      </div>
+                      <div class="track-artist" v-if="trackArtist(track)">
+                        {{ trackArtist(track) }}
+                      </div>
+                      <div class="track-album" v-if="trackAlbum(track)">
+                        {{ trackAlbum(track) }}
+                      </div>
+                      <div class="track-meta">
+                        <span v-if="trackDurationLabel(track)">
+                          {{ trackDurationLabel(track) }}
+                        </span>
+                        <span v-if="trackSampleRateLabel(track)">
+                          {{ trackSampleRateLabel(track) }}
+                        </span>
+                        <span v-if="trackBitrateLabel(track)">
+                          {{ trackBitrateLabel(track) }}
+                        </span>
+                      </div>
+                      <div class="pk-info">
+                        <div class="pk-line">
+                          <span class="label">PK</span>
+                          <code>{{ track.cache_pk }}</code>
+                        </div>
+                        <div class="pk-line" v-if="trackLazyReference(track)">
+                          <span class="label">Lazy</span>
+                          <code>{{ trackLazyReference(track) }}</code>
+                        </div>
+                      </div>
+                      <div class="added-info">
+                        Added {{ formatRelativeDate(track.added_at) }} · TTL
+                        {{ trackTtlLabel(track.ttl_secs) }}
+                      </div>
+                    </div>
+                    <div class="track-actions">
+                      <button class="btn-secondary" @click="copyPk(track.cache_pk)">Copy PK</button>
                       <button
                         class="btn-danger"
                         @click="handleRemoveTrack(track.cache_pk)"
@@ -285,8 +383,8 @@
                       >
                         {{ isRemovingTrack(track.cache_pk) ? "..." : "Remove" }}
                       </button>
-                    </span>
-                  </div>
+                    </div>
+                  </article>
                 </div>
               </div>
             </div>
@@ -299,7 +397,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from "vue";
-import type { PlaylistDetail, PlaylistSummary } from "../services/playlists";
+import type { PlaylistDetail, PlaylistSummary, PlaylistTrack } from "../services/playlists";
 import {
   addTracksToPlaylist,
   createPlaylist,
@@ -311,6 +409,15 @@ import {
   updatePlaylist,
 } from "../services/playlists";
 
+import type { AudioCacheMetadata } from "../services/audioCache";
+import {
+  getCoverUrl as getAudioCoverUrl,
+  getDurationMs,
+  formatDuration,
+  formatBitrate,
+  formatSampleRate,
+} from "../services/audioCache";
+
 const playlists = ref<PlaylistSummary[]>([]);
 const listLoading = ref(false);
 const listError = ref("");
@@ -332,6 +439,7 @@ const createForm = reactive({
   title: "",
   role: "user",
   customRole: "",
+  coverPk: "",
   persistent: true,
   maxSize: "",
   defaultTtl: "",
@@ -347,6 +455,7 @@ const updateForm = reactive({
   title: "",
   role: "user",
   customRole: "",
+  coverPk: "",
   maxSize: "",
   defaultTtl: "",
 });
@@ -397,6 +506,25 @@ const selectedSummary = computed(() => {
   return playlists.value.find((p) => p.id === selectedPlaylistId.value) ?? detailSummary ?? null;
 });
 
+const detailTitle = computed(() => {
+  const summary = selectedSummary.value;
+  if (!summary) {
+    return "Playlist";
+  }
+  return summary.title || summary.id || "Playlist";
+});
+
+const detailId = computed(() => selectedSummary.value?.id ?? "");
+
+const summaryCoverUrl = computed(() => {
+  const summary = selectedSummary.value;
+  if (!summary) return undefined;
+  if (summary.cover_url && summary.cover_url.length > 0) {
+    return summary.cover_url;
+  }
+  return coverUrlFromPk(summary.cover_pk);
+});
+
 const sortedPlaylists = computed(() => {
   return [...playlists.value].sort(
     (a, b) => new Date(b.last_change).getTime() - new Date(a.last_change).getTime()
@@ -413,10 +541,13 @@ const sortedTracks = computed(() => {
 
 const lazyTracksCount = computed(() =>
   selectedPlaylist.value
-    ? selectedPlaylist.value.tracks.filter((track) => isLazyTrack(track.cache_pk)).length
+    ? selectedPlaylist.value.tracks.filter((track) => isLazyTrack(track)).length
     : 0
 );
 
+const updateCoverPreview = computed(() => coverUrlFromPk(updateForm.coverPk) ?? summaryCoverUrl.value);
+const createCoverPreview = computed(() => coverUrlFromPk(createForm.coverPk));
+
 function formatRelativeDate(dateString: string) {
   const date = new Date(dateString);
   if (Number.isNaN(date.getTime())) return dateString;
@@ -451,6 +582,13 @@ function formatTtl(ttl?: number | null) {
   return `${hours}h`;
 }
 
+function coverUrlFromPk(pk?: string | null, size = 256): string | undefined {
+  if (!pk) return undefined;
+  const trimmed = pk.trim();
+  if (!trimmed) return undefined;
+  return `/covers/image/${trimmed}/${size}`;
+}
+
 function trackTtlLabel(ttl?: number | null) {
   if (ttl === null || ttl === undefined) return "inherit";
   if (ttl === 0) return "Expires now";
@@ -458,10 +596,6 @@ function trackTtlLabel(ttl?: number | null) {
   return `${Math.round(ttl / 60)}m`;
 }
 
-function isLazyTrack(pk: string) {
-  return pk.startsWith("L:");
-}
-
 function copyPk(pk: string) {
   navigator.clipboard.writeText(pk);
   alert(`Copied ${pk}`);
@@ -507,6 +641,10 @@ watch(
   () => selectedPlaylistId.value,
   (id, previous) => {
     if (id) {
+      if (previous !== id) {
+        selectedPlaylist.value = null;
+        detailError.value = "";
+      }
       loadSelectedPlaylist(previous !== id);
     } else {
       selectedPlaylist.value = null;
@@ -532,6 +670,85 @@ async function loadSelectedPlaylist(syncForms = true) {
   }
 }
 
+function trackMetadata(track: PlaylistTrack): AudioCacheMetadata | null {
+  return track.metadata ?? null;
+}
+
+function trackTitle(track: PlaylistTrack): string {
+  const metadata = trackMetadata(track);
+  return metadata?.title || track.cache_pk;
+}
+
+function trackArtist(track: PlaylistTrack): string | undefined {
+  const metadata = trackMetadata(track);
+  return metadata?.artist || undefined;
+}
+
+function trackAlbum(track: PlaylistTrack): string | undefined {
+  const metadata = trackMetadata(track);
+  return metadata?.album || undefined;
+}
+
+function trackDurationLabel(track: PlaylistTrack): string | undefined {
+  const duration = getDurationMs(trackMetadata(track));
+  if (duration === undefined) return undefined;
+  return formatDuration(duration);
+}
+
+function trackSampleRateLabel(track: PlaylistTrack): string | undefined {
+  const metadata = trackMetadata(track);
+  if (!metadata?.sample_rate) return undefined;
+  return formatSampleRate(metadata.sample_rate);
+}
+
+function trackBitrateLabel(track: PlaylistTrack): string | undefined {
+  const metadata = trackMetadata(track);
+  if (!metadata?.bitrate) return undefined;
+  return formatBitrate(metadata.bitrate);
+}
+
+function trackCoverUrl(track: PlaylistTrack, size = 200): string | undefined {
+  if (track.cover_url) {
+    if (size && track.cover_source === "cover_pk") {
+      const [rawBase, query] = track.cover_url.split("?");
+      const base = rawBase ?? track.cover_url;
+      if (base) {
+        const segments = base.split("/");
+        const lastIndex = segments.length - 1;
+        if (lastIndex >= 0) {
+          const last = segments[lastIndex];
+          if (last && /^\d+$/.test(last)) {
+            segments[lastIndex] = String(size);
+            const rebuilt = segments.join("/");
+            return query ? `${rebuilt}?${query}` : rebuilt;
+          }
+        }
+      }
+    }
+    return track.cover_url;
+  }
+
+  const metadata = trackMetadata(track);
+  if (!metadata) return undefined;
+  try {
+    return getAudioCoverUrl(metadata, size) || undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function trackLazyReference(track: PlaylistTrack): string | undefined {
+  return track.lazy_pk ?? undefined;
+}
+
+function isLazyPk(pk: string): boolean {
+  return pk.startsWith("L:");
+}
+
+function isLazyTrack(track: PlaylistTrack): boolean {
+  return isLazyPk(track.cache_pk);
+}
+
 function syncUpdateForm(detail: PlaylistDetail | null) {
   if (!detail) return;
   updateForm.title = detail.summary.title || "";
@@ -542,6 +759,7 @@ function syncUpdateForm(detail: PlaylistDetail | null) {
     updateForm.role = "custom";
     updateForm.customRole = detail.summary.role;
   }
+  updateForm.coverPk = detail.summary.cover_pk ?? "";
   updateForm.maxSize =
     detail.summary.max_size === null || detail.summary.max_size === undefined
       ? ""
@@ -557,6 +775,7 @@ function resetCreateForm() {
   createForm.title = "";
   createForm.role = "user";
   createForm.customRole = "";
+  createForm.coverPk = "";
   createForm.persistent = true;
   createForm.maxSize = "";
   createForm.defaultTtl = "";
@@ -607,6 +826,7 @@ async function handleCreatePlaylist() {
   }
 
   const roleValue = resolveRoleValue(createForm.role, createForm.customRole);
+  const coverPk = createForm.coverPk.trim();
 
   createState.busy = true;
   try {
@@ -614,6 +834,7 @@ async function handleCreatePlaylist() {
       id: createForm.id.trim(),
       title: createForm.title || undefined,
       role: roleValue,
+      cover_pk: coverPk || undefined,
       persistent: createForm.persistent,
       max_size: maxSize,
       default_ttl_secs: defaultTtl,
@@ -635,6 +856,7 @@ async function handleUpdatePlaylist() {
   if (!selectedSummary.value) return;
   updateState.error = "";
   updateState.message = "";
+  const summary = selectedSummary.value;
 
   let maxSizePayload: number | null | undefined;
   let defaultTtlPayload: number | null | undefined;
@@ -642,25 +864,22 @@ async function handleUpdatePlaylist() {
   try {
     if (updateForm.maxSize.trim() === "") {
       maxSizePayload =
-        selectedSummary.value.max_size === null || selectedSummary.value.max_size === undefined
-          ? undefined
-          : null;
+        summary.max_size === null || summary.max_size === undefined ? undefined : null;
     } else {
       const value = parseOptionalNumber(updateForm.maxSize);
-      if (value !== selectedSummary.value.max_size) {
+      if (value !== summary.max_size) {
         maxSizePayload = value ?? null;
       }
     }
 
     if (updateForm.defaultTtl.trim() === "") {
       defaultTtlPayload =
-        selectedSummary.value.default_ttl_secs === null ||
-        selectedSummary.value.default_ttl_secs === undefined
+        summary.default_ttl_secs === null || summary.default_ttl_secs === undefined
           ? undefined
           : null;
     } else {
       const ttlValue = parseOptionalNumber(updateForm.defaultTtl);
-      if (ttlValue !== selectedSummary.value.default_ttl_secs) {
+      if (ttlValue !== summary.default_ttl_secs) {
         defaultTtlPayload = ttlValue ?? null;
       }
     }
@@ -671,7 +890,7 @@ async function handleUpdatePlaylist() {
 
   const payload: Record<string, unknown> = {};
   const trimmedTitle = updateForm.title.trim();
-  if (trimmedTitle !== selectedSummary.value.title) {
+  if (trimmedTitle !== summary.title) {
     payload.title = trimmedTitle;
   }
 
@@ -681,7 +900,7 @@ async function handleUpdatePlaylist() {
     return;
   }
 
-  if (resolvedRole && resolvedRole !== selectedSummary.value.role) {
+  if (resolvedRole && resolvedRole !== summary.role) {
     payload.role = resolvedRole;
   }
 
@@ -692,6 +911,16 @@ async function handleUpdatePlaylist() {
     payload.default_ttl_secs = defaultTtlPayload;
   }
 
+  const trimmedCoverPk = updateForm.coverPk.trim();
+  const currentCoverPk = summary.cover_pk ?? "";
+  if (trimmedCoverPk === "") {
+    if (currentCoverPk !== "") {
+      payload.cover_pk = null;
+    }
+  } else if (trimmedCoverPk !== currentCoverPk) {
+    payload.cover_pk = trimmedCoverPk;
+  }
+
   if (Object.keys(payload).length === 0) {
     updateState.message = "No changes to apply";
     return;
@@ -813,67 +1042,106 @@ onMounted(() => {
 
 <style scoped>
 .playlist-manager {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
   padding: 1rem;
-  color: #f3f3f3;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  color: #f5f5f5;
+}
+
+@media (max-width: 768px) {
+  .playlist-manager {
+    padding: 0.5rem;
+  }
 }
 
 .header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   flex-wrap: wrap;
+  justify-content: space-between;
   gap: 1rem;
-  border-bottom: 1px solid #333;
-  padding-bottom: 0.5rem;
+  padding: 1rem;
+  border-radius: 12px;
+  border: 1px solid #2b2b2b;
+  background: #151515;
+}
+
+.header h2 {
+  margin: 0;
+  color: #61dafb;
 }
 
 .subtitle {
-  color: #888;
   margin: 0.25rem 0 0;
+  color: #b0b0b0;
 }
 
 .header-stats {
   display: flex;
-  gap: 0.75rem;
-  font-weight: 500;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.header-stats span {
+  background: #232323;
+  border-radius: 999px;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.85rem;
+  color: #ddd;
 }
 
 .header-actions button {
-  padding: 0.5rem 1rem;
+  padding: 0.6rem 1.2rem;
+  border-radius: 6px;
+  border: none;
+  background: #61dafb;
+  color: #0b0b0b;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.header-actions button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 .panels {
   display: grid;
-  grid-template-columns: 340px 1fr;
+  grid-template-columns: 360px 1fr;
   gap: 1.5rem;
+  align-items: start;
+}
+
+@media (max-width: 1100px) {
+  .panels {
+    grid-template-columns: 1fr;
+  }
 }
 
 .section-card {
-  background: #232323;
-  border: 1px solid #3a3a3a;
-  border-radius: 10px;
+  background: #1f1f1f;
+  border: 1px solid #2f2f2f;
+  border-radius: 12px;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  color: inherit;
 }
 
 .section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 0.5rem;
 }
 
 .empty-state {
   padding: 1rem;
+  border: 1px dashed #3a3a3a;
+  border-radius: 8px;
   text-align: center;
-  color: #999;
-  border: 1px dashed #444;
-  border-radius: 6px;
+  color: #a8a8a8;
 }
 
 .list-section {
@@ -888,26 +1156,27 @@ onMounted(() => {
 }
 
 .playlist-card {
-  border: 1px solid #333;
-  border-radius: 8px;
-  padding: 0.75rem;
-  cursor: pointer;
+  border: 1px solid #2a2a2a;
+  border-radius: 10px;
+  padding: 0.85rem;
+  background: #242424;
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
-  background: #2b2b2b;
-  color: inherit;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .playlist-card.selected {
-  border-color: #569cd6;
-  box-shadow: 0 0 0 1px rgba(86, 156, 214, 0.4);
+  border-color: #61dafb;
+  box-shadow: 0 0 0 1px rgba(97, 218, 251, 0.4);
 }
 
 .card-title {
   display: flex;
   justify-content: space-between;
   gap: 0.5rem;
+  font-weight: 600;
 }
 
 .card-metrics,
@@ -915,34 +1184,133 @@ onMounted(() => {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  font-size: 0.9rem;
-  color: #bbb;
+  font-size: 0.85rem;
+  color: #bdbdbd;
 }
 
 .card-actions {
   display: flex;
-  gap: 0.5rem;
   flex-wrap: wrap;
-}
-
-.detail-panel {
-  min-height: 400px;
+  gap: 0.5rem;
 }
 
 .detail-card {
+  background: #111;
+  border: 1px solid #2b2b2b;
+  border-radius: 14px;
+  padding: 1.25rem;
   min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .detail-header {
+  display: grid;
+  grid-template-columns: 140px 1fr auto;
+  gap: 1rem;
+  align-items: center;
+}
+
+.detail-header-main h3 {
+  margin: 0;
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 0.75rem;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.detail-cover {
+  width: 120px;
+  height: 120px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #1a1a1a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #2f2f2f;
+}
+
+.detail-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .detail-id {
-  color: #aaa;
-  margin: 0;
+  margin: 0.2rem 0 0;
+  color: #9c9c9c;
+  font-size: 0.85rem;
+}
+
+.detail-header-actions button {
+  background: #232323;
+  border: 1px solid #3d3d3d;
+  border-radius: 6px;
+  padding: 0.5rem 0.9rem;
+  color: #f5f5f5;
+  cursor: pointer;
+}
+
+@media (max-width: 900px) {
+  .detail-header {
+    grid-template-columns: 100px 1fr;
+  }
+
+  .detail-header-actions {
+    grid-column: span 2;
+    justify-self: flex-start;
+  }
+}
+
+.cover-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #1b1b1b;
+  color: #666;
+  font-size: 2rem;
+}
+
+.cover-placeholder.small {
+  font-size: 1rem;
+}
+
+.cover-preview-row {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.cover-preview {
+  width: 96px;
+  height: 96px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #2d2d2d;
+  background: #0f0f0f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cover-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cover-preview.small {
+  width: 72px;
+  height: 72px;
+}
+
+.btn-compact {
+  padding: 0.25rem 0.6rem;
+  font-size: 0.8rem;
 }
 
 .detail-stats {
@@ -952,23 +1320,31 @@ onMounted(() => {
   font-size: 0.95rem;
 }
 
+.cover-stat code {
+  background: #0f0f0f;
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  margin-right: 0.4rem;
+}
+
 .detail-messages .error,
 .detail-messages .success {
   margin: 0;
 }
 
 .section-subcard {
-  border: 1px solid #333;
-  border-radius: 8px;
-  padding: 0.75rem;
+  background: #181818;
+  border: 1px solid #2b2b2b;
+  border-radius: 10px;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  background: #1a1a1a;
 }
 
 .section-subcard h4 {
   margin: 0;
+  color: #e7e7e7;
 }
 
 form {
@@ -977,175 +1353,245 @@ form {
   gap: 0.75rem;
 }
 
-.field {
+.field,
+.checkbox {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.35rem;
   font-size: 0.9rem;
 }
 
+.checkbox {
+  flex-direction: row;
+  align-items: center;
+}
+
 .field input,
 .field select,
 .field textarea {
-  background: #111;
+  background: #0f0f0f;
   border: 1px solid #3f3f3f;
   border-radius: 6px;
   padding: 0.5rem;
-  color: #f6f6f6;
+  color: #f5f5f5;
 }
 
 .field textarea {
   resize: vertical;
 }
 
-.field-group {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
 .field-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 0.75rem;
 }
 
-.checkbox {
+.field-group {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.9rem;
+  flex-wrap: wrap;
+  gap: 0.75rem;
 }
 
 .form-messages {
   min-height: 1rem;
 }
 
-.form-messages .error,
-.form-messages .success {
-  margin: 0;
-}
-
 .primary {
-  background: #569cd6;
+  background: #4b9ed0;
   color: #fff;
   border: none;
-  padding: 0.5rem 1rem;
+  padding: 0.6rem 1rem;
   border-radius: 6px;
   cursor: pointer;
+  font-weight: 600;
 }
 
 .primary:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
 button {
-  background: #333;
-  color: #fff;
-  border: 1px solid transparent;
-  padding: 0.4rem 0.75rem;
-  border-radius: 6px;
-  cursor: pointer;
   font-size: 0.9rem;
 }
 
 .btn-secondary {
   background: #2c2c2c;
-  border-color: #444;
+  border: 1px solid #3d3d3d;
+  color: #f5f5f5;
 }
 
 .btn-danger {
-  background: #a33;
-  border-color: #c55;
+  background: #c0392b;
+  border: 1px solid #d35400;
+  color: #fff;
 }
 
 button:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
 .pill {
-  background: #444;
-  color: #eee;
+  background: #2f2f2f;
   border-radius: 999px;
-  padding: 0.1rem 0.5rem;
+  padding: 0.15rem 0.6rem;
   font-size: 0.75rem;
 }
 
-.pill.transient {
-  background: #5b3d99;
-}
-
-.pill.warning {
-  background: #b78000;
-}
-
-.detail-header-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.tracks .track-table {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.track-row {
-  display: grid;
-  grid-template-columns: 1fr 140px 80px 160px;
-  gap: 0.5rem;
-  align-items: center;
-  padding: 0.4rem;
-  border-radius: 6px;
-  background: #121212;
-  border: 1px solid #2f2f2f;
-  font-size: 0.9rem;
-  color: inherit;
-}
-
-.track-row.lazy {
-  border-color: #b78000;
-  background: rgba(183, 128, 0, 0.15);
-}
-
-.track-header {
-  font-weight: 600;
-  background: transparent;
-  border: none;
-}
-
-.row-actions {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: flex-end;
-}
-
-.pk {
-  word-break: break-all;
-}
-
-.error {
-  color: #ff8a8a;
-}
-
-.success {
-  color: #7ed07e;
-}
-
 .small {
   font-size: 0.85rem;
-  color: #aaa;
+  color: #a5a5a5;
 }
 
-@media (max-width: 1100px) {
-  .panels {
+.muted {
+  color: #8a8a8a;
+}
+
+.tracks .section-header {
+  margin-bottom: 0.5rem;
+}
+
+.track-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+}
+
+.track-card {
+  display: grid;
+  grid-template-columns: 120px 1fr auto;
+  gap: 1rem;
+  padding: 0.9rem;
+  border-radius: 12px;
+  border: 1px solid #2a2a2a;
+  background: #16181f;
+  align-items: center;
+}
+
+@media (max-width: 900px) {
+  .track-card {
     grid-template-columns: 1fr;
   }
 
-  .list-section {
-    max-height: none;
+  .cover-wrapper {
+    width: 100%;
+    height: 220px;
   }
 }
+
+.track-card.lazy {
+  border-color: #d4a017;
+  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.4);
+}
+
+.cover-wrapper {
+  width: 120px;
+  height: 120px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #1f1f1f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.cover-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.track-card .cover-placeholder {
+  font-size: 2rem;
+  color: #6f6f6f;
+}
+
+.cover-lazy-pill {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  background: #d4a017;
+  color: #1a1a1a;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.track-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.track-title {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.track-artist,
+.track-album {
+  font-size: 0.9rem;
+  color: #bbbbbb;
+}
+
+.track-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  font-size: 0.85rem;
+  color: #a0a0a0;
+}
+
+.pk-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.85rem;
+  word-break: break-word;
+}
+
+.pk-line {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+}
+
+.pk-line .label {
+  font-size: 0.75rem;
+  color: #888;
+  text-transform: uppercase;
+}
+
+.pk-line code {
+  background: #0f0f0f;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+}
+
+.added-info {
+  font-size: 0.8rem;
+  color: #909090;
+}
+
+.track-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.error {
+  color: #ff7a7a;
+}
+
+.success {
+  color: #6adf8b;
+}
 </style>
+.detail-header-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
diff --git a/pmoapp/webapp/src/services/audioCache.ts b/pmoapp/webapp/src/services/audioCache.ts
index d75b4169..54be2b5f 100644
--- a/pmoapp/webapp/src/services/audioCache.ts
+++ b/pmoapp/webapp/src/services/audioCache.ts
@@ -29,6 +29,7 @@ export interface AudioCacheMetadata {
 
 export interface AudioCacheEntry {
   pk: string;
+  lazy_pk?: string | null;
   id: string | null;
   hits: number;
   last_used: string | null;
diff --git a/pmoapp/webapp/src/services/playlists.ts b/pmoapp/webapp/src/services/playlists.ts
index 160f95a2..a5c6f570 100644
--- a/pmoapp/webapp/src/services/playlists.ts
+++ b/pmoapp/webapp/src/services/playlists.ts
@@ -3,16 +3,24 @@ export interface PlaylistSummary {
   title: string;
   role: string;
   persistent: boolean;
+  cover_pk?: string | null;
+  cover_url?: string | null;
   track_count: number;
   max_size?: number | null;
   default_ttl_secs?: number | null;
   last_change: string;
 }
 
+import type { AudioCacheMetadata } from "./audioCache";
+
 export interface PlaylistTrack {
   cache_pk: string;
   added_at: string;
   ttl_secs?: number | null;
+  lazy_pk?: string | null;
+  metadata?: AudioCacheMetadata | null;
+  cover_url?: string | null;
+  cover_source?: string | null;
 }
 
 export interface PlaylistDetail {
@@ -29,6 +37,7 @@ export interface CreatePlaylistPayload {
   id: string;
   title?: string;
   role?: string;
+  cover_pk?: string;
   persistent?: boolean;
   max_size?: number;
   default_ttl_secs?: number;
@@ -39,6 +48,7 @@ export interface UpdatePlaylistPayload {
   role?: string;
   max_size?: number | null;
   default_ttl_secs?: number | null;
+  cover_pk?: string | null;
 }
 
 export interface AddTracksPayload {
diff --git a/pmocache/src/db.rs b/pmocache/src/db.rs
index 78156f45..d1801fe3 100644
--- a/pmocache/src/db.rs
+++ b/pmocache/src/db.rs
@@ -24,6 +24,9 @@ pub struct CacheEntry {
     /// Clé primaire unique de l'élément (hash SHA1 de l'URL)
     #[cfg_attr(feature = "openapi", schema(example = "1a2b3c4d5e6f7a8b"))]
     pub pk: String,
+    /// Lazy PK historique associé (si l'élément provient d'un téléchargement différé)
+    #[cfg_attr(feature = "openapi", schema(example = "L:QOBUZ:123456"))]
+    pub lazy_pk: Option<String>,
     /// URL source de l'élément
     #[cfg_attr(feature = "openapi", schema(example = "https://example.com/resource"))]
     pub id: Option<String>,
@@ -486,17 +489,18 @@ impl DB {
         let mut entry = {
             let conn = self.lock_conn("get");
             conn.query_row(
-                "SELECT pk, id, collection, hits, last_used \
+                "SELECT pk, lazy_pk, id, collection, hits, last_used \
                  FROM asset \
                  WHERE pk = ?1",
                 [pk],
                 |row| {
                     Ok(CacheEntry {
                         pk: row.get(0)?,
-                        id: row.get::<_, Option<String>>(1)?,
-                        collection: row.get(2)?,
-                        hits: row.get(3)?,
-                        last_used: row.get(4)?,
+                        lazy_pk: row.get::<_, Option<String>>(1)?,
+                        id: row.get::<_, Option<String>>(2)?,
+                        collection: row.get(3)?,
+                        hits: row.get(4)?,
+                        last_used: row.get(5)?,
                         metadata: None,
                     })
                 },
@@ -526,17 +530,18 @@ impl DB {
         let mut entry = {
             let conn = self.lock_conn("get_from_id");
             conn.query_row(
-                "SELECT pk, id, collection, hits, last_used \
+                "SELECT pk, lazy_pk, id, collection, hits, last_used \
              FROM asset \
              WHERE collection = ?1 AND id = ?2",
                 params![collection, id],
                 |row| {
                     Ok(CacheEntry {
                         pk: row.get(0)?,
-                        id: row.get::<_, Option<String>>(1)?,
-                        collection: row.get(2)?,
-                        hits: row.get(3)?,
-                        last_used: row.get(4)?,
+                        lazy_pk: row.get::<_, Option<String>>(1)?,
+                        id: row.get::<_, Option<String>>(2)?,
+                        collection: row.get(3)?,
+                        hits: row.get(4)?,
+                        last_used: row.get(5)?,
                         metadata: None,
                     })
                 },
@@ -627,7 +632,7 @@ impl DB {
             let conn = self.lock_conn("get_all");
 
             let mut stmt = conn.prepare(
-                "SELECT pk, id, collection, hits, last_used 
+                "SELECT pk, lazy_pk, id, collection, hits, last_used 
                  FROM asset 
                  ORDER BY hits DESC",
             )?;
@@ -635,10 +640,11 @@ impl DB {
             let rows = stmt.query_map([], |row| {
                 Ok(CacheEntry {
                     pk: row.get(0)?,
-                    id: row.get::<_, Option<String>>(1)?,
-                    collection: row.get(2)?,
-                    hits: row.get(3)?,
-                    last_used: row.get(4)?,
+                    lazy_pk: row.get::<_, Option<String>>(1)?,
+                    id: row.get::<_, Option<String>>(2)?,
+                    collection: row.get(3)?,
+                    hits: row.get(4)?,
+                    last_used: row.get(5)?,
                     metadata: None,
                 })
             })?;
@@ -670,17 +676,18 @@ impl DB {
             let conn = self.lock_conn("get_by_collection");
 
             let mut stmt = conn.prepare(
-                "SELECT pk, id, collection, hits, last_used 
+                "SELECT pk, lazy_pk, id, collection, hits, last_used 
                   FROM asset 
                   WHERE collection = ?1 ORDER BY hits DESC",
             )?;
             let rows = stmt.query_map([collection], |row| {
                 Ok(CacheEntry {
                     pk: row.get(0)?,
-                    id: row.get::<_, Option<String>>(1)?,
-                    collection: row.get(2)?,
-                    hits: row.get(3)?,
-                    last_used: row.get(4)?,
+                    lazy_pk: row.get::<_, Option<String>>(1)?,
+                    id: row.get::<_, Option<String>>(2)?,
+                    collection: row.get(3)?,
+                    hits: row.get(4)?,
+                    last_used: row.get(5)?,
                     metadata: None,
                 })
             })?;
@@ -741,7 +748,7 @@ impl DB {
         let conn = self.lock_conn("get_oldest");
 
         let mut stmt = conn.prepare(
-            "SELECT pk, id, collection, hits, last_used
+            "SELECT pk, lazy_pk, id, collection, hits, last_used
              FROM asset
              ORDER BY last_used ASC, hits ASC
              LIMIT ?1",
@@ -751,10 +758,11 @@ impl DB {
             .query_map([limit], |row| {
                 Ok(CacheEntry {
                     pk: row.get(0)?,
-                    id: row.get::<_, Option<String>>(1)?,
-                    collection: row.get(2)?,
-                    hits: row.get(3)?,
-                    last_used: row.get(4)?,
+                    lazy_pk: row.get::<_, Option<String>>(1)?,
+                    id: row.get::<_, Option<String>>(2)?,
+                    collection: row.get(3)?,
+                    hits: row.get(4)?,
+                    last_used: row.get(5)?,
                     metadata: None,
                 })
             })?
diff --git a/pmoplaylist/src/api.rs b/pmoplaylist/src/api.rs
index beeb3754..d56062b5 100644
--- a/pmoplaylist/src/api.rs
+++ b/pmoplaylist/src/api.rs
@@ -1,5 +1,6 @@
 //! API REST pour la gestion des playlists.
 
+use std::sync::Arc;
 use std::time::{Duration, SystemTime};
 
 use axum::{
@@ -11,6 +12,7 @@ use axum::{
 };
 use chrono::{DateTime, Utc};
 use serde::{Deserialize, Serialize};
+use serde_json::Value;
 use utoipa::ToSchema;
 
 use crate::manager::{PlaylistOverview, PlaylistSnapshot, PlaylistTrackSnapshot};
@@ -41,6 +43,10 @@ pub struct PlaylistSummaryResponse {
     #[schema(value_type = String)]
     pub role: PlaylistRole,
     pub persistent: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub cover_pk: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub cover_url: Option<String>,
     pub track_count: usize,
     pub max_size: Option<usize>,
     pub default_ttl_secs: Option<u64>,
@@ -62,6 +68,14 @@ pub struct PlaylistTrackResponse {
     pub cache_pk: String,
     pub added_at: DateTime<Utc>,
     pub ttl_secs: Option<u64>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub lazy_pk: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub metadata: Option<Value>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub cover_url: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub cover_source: Option<String>,
 }
 
 /// Requête pour créer une playlist persistante/éphémère.
@@ -71,6 +85,8 @@ pub struct CreatePlaylistRequest {
     pub title: Option<String>,
     #[schema(value_type = String)]
     pub role: Option<PlaylistRole>,
+    #[schema(example = "abc123")]
+    pub cover_pk: Option<String>,
     #[schema(example = true)]
     pub persistent: Option<bool>,
     pub max_size: Option<usize>,
@@ -85,6 +101,8 @@ pub struct UpdatePlaylistRequest {
     pub role: Option<PlaylistRole>,
     pub max_size: Option<Option<usize>>,
     pub default_ttl_secs: Option<Option<u64>>,
+    /// Utiliser `null` explicite pour supprimer la cover, ou omettre pour ne pas modifier.
+    pub cover_pk: Option<Option<String>>,
 }
 
 /// Requête pour ajouter des morceaux dans une playlist.
@@ -153,6 +171,7 @@ pub async fn create_playlist(Json(req): Json<CreatePlaylistRequest>) -> Response
 
     let result = async move {
         let id = req.id.clone();
+        let normalized_cover_pk = normalize_cover_pk(req.cover_pk.clone());
         if persistent {
             let writer = manager
                 .create_persistent_playlist_with_role(id.clone(), role)
@@ -164,6 +183,9 @@ pub async fn create_playlist(Json(req): Json<CreatePlaylistRequest>) -> Response
                 req.default_ttl_secs,
             )
             .await?;
+            if let Some(cover_pk) = normalized_cover_pk.clone() {
+                writer.set_cover_pk(Some(cover_pk)).await?;
+            }
         } else {
             let writer = manager.get_write_handle(id.clone()).await?;
             if let Some(role) = requested_role {
@@ -176,6 +198,9 @@ pub async fn create_playlist(Json(req): Json<CreatePlaylistRequest>) -> Response
                 req.default_ttl_secs,
             )
             .await?;
+            if let Some(cover_pk) = normalized_cover_pk {
+                writer.set_cover_pk(Some(cover_pk)).await?;
+            }
         }
 
         manager.playlist_snapshot(&req.id).await
@@ -236,6 +261,7 @@ pub async fn update_playlist(
         role,
         max_size,
         default_ttl_secs,
+        cover_pk,
     } = req;
 
     let manager = crate::manager::PlaylistManager();
@@ -256,6 +282,13 @@ pub async fn update_playlist(
         if let Some(ttl) = default_ttl_secs {
             writer.set_default_ttl(ttl.map(Duration::from_secs)).await?;
         }
+        if let Some(cover_pk) = cover_pk {
+            let normalized = match cover_pk {
+                Some(value) => normalize_cover_pk(Some(value)),
+                None => None,
+            };
+            writer.set_cover_pk(normalized).await?;
+        }
 
         manager.playlist_snapshot(&playlist_id).await
     }
@@ -440,21 +473,78 @@ fn apply_metadata_updates(
     }
 }
 
-fn playlist_track_to_response(track: &PlaylistTrackSnapshot) -> PlaylistTrackResponse {
-    PlaylistTrackResponse {
+fn playlist_track_to_response(
+    track: &PlaylistTrackSnapshot,
+    audio_cache: Option<&Arc<pmoaudiocache::Cache>>,
+) -> PlaylistTrackResponse {
+    let mut response = PlaylistTrackResponse {
         cache_pk: track.cache_pk.clone(),
         added_at: system_time_to_datetime(track.added_at),
         ttl_secs: track.ttl.map(|ttl| ttl.as_secs()),
+        lazy_pk: None,
+        metadata: None,
+        cover_url: None,
+        cover_source: None,
+    };
+
+    if let Some(cache) = audio_cache {
+        if let Ok(mut entry) = cache.db.get(&track.cache_pk, true) {
+            if let Some(lazy_pk) = entry.lazy_pk.take() {
+                if lazy_pk != response.cache_pk {
+                    response.lazy_pk = Some(lazy_pk);
+                }
+            }
+
+            if let Some(metadata) = entry.metadata {
+                if let Some((url, source)) = resolve_cover_from_metadata(&metadata) {
+                    response.cover_url = Some(url);
+                    response.cover_source = Some(source);
+                }
+                response.metadata = Some(metadata);
+            }
+        }
     }
+
+    response
+}
+
+fn cover_url_from_pk(pk: &str) -> String {
+    format!("/covers/image/{}/256", pk)
+}
+
+fn normalize_cover_pk(input: Option<String>) -> Option<String> {
+    input.and_then(|pk| {
+        let trimmed = pk.trim();
+        if trimmed.is_empty() {
+            None
+        } else {
+            Some(trimmed.to_string())
+        }
+    })
+}
+
+fn resolve_cover_from_metadata(metadata: &Value) -> Option<(String, String)> {
+    if let Some(cover_pk) = metadata.get("cover_pk").and_then(Value::as_str) {
+        return Some((cover_url_from_pk(cover_pk), "cover_pk".to_string()));
+    }
+
+    if let Some(url) = metadata.get("cover_url").and_then(Value::as_str) {
+        return Some((url.to_string(), "cover_url".to_string()));
+    }
+
+    None
 }
 
 impl From<PlaylistOverview> for PlaylistSummaryResponse {
     fn from(value: PlaylistOverview) -> Self {
+        let cover_pk = value.cover_pk.clone();
         Self {
             id: value.id,
             title: value.title,
             role: value.role,
             persistent: value.persistent,
+            cover_pk: cover_pk.clone(),
+            cover_url: cover_pk.as_deref().map(cover_url_from_pk),
             track_count: value.track_count,
             max_size: value.max_size,
             default_ttl_secs: value.default_ttl.map(|ttl| ttl.as_secs()),
@@ -466,10 +556,11 @@ impl From<PlaylistOverview> for PlaylistSummaryResponse {
 impl From<PlaylistSnapshot> for PlaylistDetailResponse {
     fn from(value: PlaylistSnapshot) -> Self {
         let summary = PlaylistSummaryResponse::from(value.overview);
+        let audio_cache = crate::manager::audio_cache().ok();
         let tracks = value
             .tracks
             .iter()
-            .map(playlist_track_to_response)
+            .map(|track| playlist_track_to_response(track, audio_cache.as_ref()))
             .collect();
         Self { summary, tracks }
     }
diff --git a/pmoplaylist/src/handle/read.rs b/pmoplaylist/src/handle/read.rs
index a23ae28d..87ebfdac 100644
--- a/pmoplaylist/src/handle/read.rs
+++ b/pmoplaylist/src/handle/read.rs
@@ -68,12 +68,14 @@ impl ReadHandle {
                     if let Some(persistence) = crate::manager::PlaylistManager().persistence() {
                         let title = self.playlist.title().await;
                         let role = self.playlist.role().await;
+                        let cover_pk = self.playlist.cover_pk().await;
                         let core = self.playlist.core.read().await;
                         let _ = persistence
                             .save_playlist(
                                 &self.playlist.id,
                                 &title,
                                 &role,
+                                cover_pk.as_deref(),
                                 &core.config,
                                 &core.tracks,
                             )
diff --git a/pmoplaylist/src/handle/write.rs b/pmoplaylist/src/handle/write.rs
index cc381aba..f49997a5 100644
--- a/pmoplaylist/src/handle/write.rs
+++ b/pmoplaylist/src/handle/write.rs
@@ -292,6 +292,23 @@ impl WriteHandle {
         Ok(())
     }
 
+    /// Met à jour la cover (cover_pk) associée à la playlist.
+    pub async fn set_cover_pk(&self, cover_pk: Option<String>) -> Result<()> {
+        if !self.playlist.is_alive() {
+            return Err(crate::Error::PlaylistDeleted(self.playlist.id.clone()));
+        }
+
+        self.playlist.set_cover_pk(cover_pk).await;
+
+        if self.playlist.persistent {
+            self.save_to_db().await?;
+        }
+
+        crate::manager::PlaylistManager().notify_playlist_changed(&self.playlist.id);
+
+        Ok(())
+    }
+
     /// Vérifie si la playlist contient déjà un pk
     pub async fn contains_pk(&self, cache_pk: &str) -> Result<bool> {
         if !self.playlist.is_alive() {
@@ -530,8 +547,17 @@ impl WriteHandle {
         let config = &core.config;
         let tracks = &core.tracks;
 
+        let cover_pk = self.playlist.cover_pk().await;
+
         persistence
-            .save_playlist(&self.playlist.id, &title, &role, config, tracks)
+            .save_playlist(
+                &self.playlist.id,
+                &title,
+                &role,
+                cover_pk.as_deref(),
+                config,
+                tracks,
+            )
             .await
     }
 }
diff --git a/pmoplaylist/src/manager.rs b/pmoplaylist/src/manager.rs
index ee033c8f..4fc643b0 100644
--- a/pmoplaylist/src/manager.rs
+++ b/pmoplaylist/src/manager.rs
@@ -67,6 +67,7 @@ pub struct PlaylistOverview {
     pub title: String,
     pub role: PlaylistRole,
     pub persistent: bool,
+    pub cover_pk: Option<String>,
     pub track_count: usize,
     pub max_size: Option<usize>,
     pub default_ttl: Option<Duration>,
@@ -184,6 +185,7 @@ impl PlaylistManager {
             PlaylistConfig::default(),
             true, // persistent
             role,
+            None,
         ));
 
         // Acqu�rir le write lock
@@ -199,9 +201,17 @@ impl PlaylistManager {
         if let Some(persistence) = &self.inner.persistence {
             let title = playlist.title().await;
             let role = playlist.role().await;
+            let cover_pk = playlist.cover_pk().await;
             let core = playlist.core.read().await;
             persistence
-                .save_playlist(&playlist.id, &title, &role, &core.config, &core.tracks)
+                .save_playlist(
+                    &playlist.id,
+                    &title,
+                    &role,
+                    cover_pk.as_deref(),
+                    &core.config,
+                    &core.tracks,
+                )
                 .await?;
         }
 
@@ -436,6 +446,7 @@ impl PlaylistManager {
             PlaylistConfig::default(),
             false, // éphémère
             PlaylistRole::User,
+            None,
         ));
 
         let write_token = playlist
@@ -471,12 +482,20 @@ impl PlaylistManager {
 
         // Pas en mémoire, essayer de charger depuis la DB
         if let Some(persistence) = &self.inner.persistence {
-            if let Some((title, role, config, tracks)) = persistence.load_playlist(&id).await? {
+            if let Some((title, role, config, cover_pk, tracks)) =
+                persistence.load_playlist(&id).await?
+            {
                 // Reconstruire la playlist
                 let mut playlists = self.inner.playlists.write().await;
 
-                let playlist =
-                    Arc::new(Playlist::new(id.clone(), title.clone(), config, true, role));
+                let playlist = Arc::new(Playlist::new(
+                    id.clone(),
+                    title.clone(),
+                    config,
+                    true,
+                    role,
+                    cover_pk,
+                ));
 
                 // Restaurer les tracks
                 {
@@ -519,7 +538,9 @@ impl PlaylistManager {
 
         // Pas en m�moire, essayer de ressusciter depuis la DB
         if let Some(persistence) = &self.inner.persistence {
-            if let Some((title, role, config, tracks)) = persistence.load_playlist(id).await? {
+            if let Some((title, role, config, cover_pk, tracks)) =
+                persistence.load_playlist(id).await?
+            {
                 // Reconstruire la playlist
                 let mut playlists = self.inner.playlists.write().await;
 
@@ -529,6 +550,7 @@ impl PlaylistManager {
                     config,
                     true,
                     role,
+                    cover_pk,
                 ));
 
                 // Restaurer les tracks
@@ -587,6 +609,7 @@ impl PlaylistManager {
         let playlist = self.ensure_playlist_loaded(id).await?;
         let title = playlist.title().await;
         let role = playlist.role().await;
+        let cover_pk = playlist.cover_pk().await;
         let persistent = playlist.persistent;
         let last_change = playlist.last_change().await;
         let core = playlist.core.read().await;
@@ -598,6 +621,7 @@ impl PlaylistManager {
             title,
             role,
             persistent,
+            cover_pk,
             track_count,
             max_size: config.max_size,
             default_ttl: config.default_ttl,
@@ -916,9 +940,17 @@ impl PlaylistManager {
                     if let Some(persistence) = &self.inner.persistence {
                         let title = playlist.title().await;
                         let role = playlist.role().await;
+                        let cover_pk = playlist.cover_pk().await;
                         let core = playlist.core.read().await;
                         let _ = persistence
-                            .save_playlist(&playlist.id, &title, &role, &core.config, &core.tracks)
+                            .save_playlist(
+                                &playlist.id,
+                                &title,
+                                &role,
+                                cover_pk.as_deref(),
+                                &core.config,
+                                &core.tracks,
+                            )
                             .await;
                     }
                 }
diff --git a/pmoplaylist/src/persistence/mod.rs b/pmoplaylist/src/persistence/mod.rs
index f65494a2..881dcea3 100644
--- a/pmoplaylist/src/persistence/mod.rs
+++ b/pmoplaylist/src/persistence/mod.rs
@@ -36,6 +36,7 @@ impl PersistenceManager {
                 id TEXT PRIMARY KEY,
                 title TEXT NOT NULL,
                 role TEXT NOT NULL,
+                cover_pk TEXT,
                 max_size INTEGER,
                 default_ttl_secs INTEGER,
                 created_at INTEGER NOT NULL,
@@ -84,6 +85,7 @@ impl PersistenceManager {
         id: &str,
         title: &str,
         role: &PlaylistRole,
+        cover_pk: Option<&str>,
         config: &PlaylistConfig,
         tracks: &VecDeque<Arc<Record>>,
     ) -> Result<()> {
@@ -96,19 +98,21 @@ impl PersistenceManager {
 
         // Upsert playlist metadata
         conn.execute(
-            "INSERT OR REPLACE INTO playlists (id, title, role, max_size, default_ttl_secs, created_at, last_modified)
-             VALUES (?1, ?2, ?3, ?4, ?5,
-                     COALESCE((SELECT created_at FROM playlists WHERE id = ?1), ?6),
-                     ?6)",
+            "INSERT OR REPLACE INTO playlists (id, title, role, cover_pk, max_size, default_ttl_secs, created_at, last_modified)
+             VALUES (?1, ?2, ?3, ?4, ?5, ?6,
+                     COALESCE((SELECT created_at FROM playlists WHERE id = ?1), ?7),
+                     ?7)",
             params![
                 id,
                 title,
                 role.as_str(),
+                cover_pk,
                 config.max_size.map(|s| s as i64),
                 config.default_ttl.map(|d| d.as_secs() as i64),
                 now_nanos,
             ],
-        ).map_err(|e| crate::Error::PersistenceError(format!("Failed to save playlist: {}", e)))?;
+        )
+        .map_err(|e| crate::Error::PersistenceError(format!("Failed to save playlist: {}", e)))?;
 
         // Supprimer les anciens tracks
         conn.execute("DELETE FROM tracks WHERE playlist_id = ?1", params![id])
@@ -140,21 +144,31 @@ impl PersistenceManager {
     pub async fn load_playlist(
         &self,
         id: &str,
-    ) -> Result<Option<(String, PlaylistRole, PlaylistConfig, VecDeque<Arc<Record>>)>> {
+    ) -> Result<
+        Option<(
+            String,
+            PlaylistRole,
+            PlaylistConfig,
+            Option<String>,
+            VecDeque<Arc<Record>>,
+        )>,
+    > {
         let conn = self.conn.lock().unwrap();
 
         // Charger les métadonnées
-        let mut stmt = conn
-            .prepare("SELECT title, role, max_size, default_ttl_secs FROM playlists WHERE id = ?1")
-            .map_err(|e| {
-                crate::Error::PersistenceError(format!("Failed to prepare statement: {}", e))
-            })?;
+        let mut stmt = conn.prepare(
+            "SELECT title, role, cover_pk, max_size, default_ttl_secs FROM playlists WHERE id = ?1",
+        )
+        .map_err(|e| {
+            crate::Error::PersistenceError(format!("Failed to prepare statement: {}", e))
+        })?;
 
         let result = stmt.query_row(params![id], |row| {
             let title: String = row.get(0)?;
             let role_raw: String = row.get(1)?;
-            let max_size: Option<i64> = row.get(2)?;
-            let default_ttl_secs: Option<i64> = row.get(3)?;
+            let cover_pk: Option<String> = row.get(2)?;
+            let max_size: Option<i64> = row.get(3)?;
+            let default_ttl_secs: Option<i64> = row.get(4)?;
 
             Ok((
                 title,
@@ -164,10 +178,11 @@ impl PersistenceManager {
                     max_size: max_size.map(|s| s as usize),
                     default_ttl: default_ttl_secs.map(|s| Duration::from_secs(s as u64)),
                 },
+                cover_pk,
             ))
         });
 
-        let (title, role, config) = match result {
+        let (title, role, config, cover_pk) = match result {
             Ok(data) => data,
             Err(rusqlite::Error::QueryReturnedNoRows) => return Ok(None),
             Err(e) => {
@@ -210,7 +225,7 @@ impl PersistenceManager {
             tracks.push_back(Arc::new(record));
         }
 
-        Ok(Some((title, role, config, tracks)))
+        Ok(Some((title, role, config, cover_pk, tracks)))
     }
 
     /// Supprime une playlist
diff --git a/pmoplaylist/src/playlist/mod.rs b/pmoplaylist/src/playlist/mod.rs
index d2cc4c60..9995ef4d 100644
--- a/pmoplaylist/src/playlist/mod.rs
+++ b/pmoplaylist/src/playlist/mod.rs
@@ -34,6 +34,7 @@ pub struct Playlist {
     pub id: String,
     title: RwLock<String>,
     role: RwLock<PlaylistRole>,
+    cover_pk: RwLock<Option<String>>,
     state: Arc<AtomicU8>,
     pub core: Arc<RwLock<PlaylistCore>>,
     pub persistent: bool,
@@ -49,11 +50,13 @@ impl Playlist {
         config: PlaylistConfig,
         persistent: bool,
         role: PlaylistRole,
+        cover_pk: Option<String>,
     ) -> Self {
         Self {
             id,
             title: RwLock::new(title),
             role: RwLock::new(role),
+            cover_pk: RwLock::new(cover_pk),
             state: Arc::new(AtomicU8::new(PlaylistState::Active as u8)),
             core: Arc::new(RwLock::new(PlaylistCore::new(config))),
             persistent,
@@ -100,6 +103,17 @@ impl Playlist {
         self.touch().await;
     }
 
+    /// Retourne la cover associée à la playlist.
+    pub async fn cover_pk(&self) -> Option<String> {
+        self.cover_pk.read().await.clone()
+    }
+
+    /// Modifie la cover (PK) de la playlist.
+    pub async fn set_cover_pk(&self, value: Option<String>) {
+        *self.cover_pk.write().await = value;
+        self.touch().await;
+    }
+
     /// Timestamp du dernier changement
     pub async fn last_change(&self) -> SystemTime {
         *self.last_change.read().await