Débugage de la WebUI non complètement convaincants.

pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRenderersStore } from '@/stores/renderers'
-import { usePlaybackStore } from '@/stores/playback'
 import { Music } from 'lucide-vue-next'
 
 const props = defineProps<{
@@ -9,10 +8,9 @@ const props = defineProps<{
 }>()
 
 const renderersStore = useRenderersStore()
-const playbackStore = usePlaybackStore()
 
 const state = computed(() => renderersStore.getStateById(props.rendererId))
-const metadata = computed(() => playbackStore.getTrackMetadata(props.rendererId))
+const metadata = computed(() => state.value?.current_track)
 
 // Calcul du pourcentage de progression
 const progressPercent = computed(() => {

pmoapp/webapp/src/components/pmocontrol/QueueItem.vue

@@ -18,9 +18,17 @@ defineProps<{
     <!-- Index (1-based pour l'affichage) -->
     <span class="item-index">{{ item.index + 1 }}</span>
 
-    <!-- Cover miniature (placeholder pour l'instant, on ajoutera la cover plus tard) -->
+    <!-- Cover miniature -->
     <div class="item-cover">
-      <Music :size="20" />
+      <img
+        v-if="item.album_art_uri"
+        :src="item.album_art_uri"
+        :alt="item.album || 'Album cover'"
+        class="cover-image"
+        loading="lazy"
+        @error="(e: Event) => (e.target as HTMLImageElement).style.display = 'none'"
+      />
+      <Music v-else :size="20" />
     </div>
 
     <!-- Métadonnées -->
@@ -85,6 +93,13 @@ defineProps<{
   justify-content: center;
   color: var(--color-text-tertiary);
   flex-shrink: 0;
+  overflow: hidden;
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .item-metadata {

pmoapp/webapp/src/components/pmocontrol/RendererCard.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { usePlaybackStore } from '@/stores/playback'
 import type {
   RendererCapabilitiesSummary,
   RendererSummary,
@@ -16,9 +15,9 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
-const playbackStore = usePlaybackStore()
 
-const metadata = computed(() => playbackStore.getTrackMetadata(props.renderer.id))
+// Métadonnées proviennent directement de l'état du renderer (API + SSE)
+const metadata = computed(() => props.state?.current_track)
 
 const protocolLabel = computed(() => {
   switch (props.renderer.protocol) {