Populating metadata

popup.js

@@ -12,17 +12,37 @@ function entryLabel(entry) {
   return entry && entry.fullUrl ? "full candidate" : "preview fallback";
 }
 
+function formatMeta(entry) {
+  const key = entry && entry.key ? entry.key : "n/a";
+  const bpm = entry && entry.bpm ? entry.bpm : "n/a";
+  const tags = entry && Array.isArray(entry.tags) && entry.tags.length ? entry.tags.join(", ") : "n/a";
+  return `Key: ${key} | BPM: ${bpm} | Tags: ${tags}`;
+}
+
 function buildRow(entry) {
   const li = document.createElement("li");
   li.className = "url-item";
 
+  if (entry.coverImageUrl) {
+    const cover = document.createElement("img");
+    cover.className = "cover-image";
+    cover.src = entry.coverImageUrl;
+    cover.alt = "Cover art";
+    cover.loading = "lazy";
+    li.appendChild(cover);
+  }
+
   const p = document.createElement("p");
   p.className = "url-text";
-  p.textContent = entry.previewUrl || entry.fullUrl || "";
+  p.textContent = entry.fileName || entry.sampleId || "(unknown filename)";
 
   const status = document.createElement("p");
   status.className = "status";
-  status.textContent = `Source: ${entry.source || "unknown"} | Mode: ${entryLabel(entry)}`;
+  status.textContent = `Source: ${entry.source || "unknown"} | Mode: ${entryLabel(entry)} | ID: ${entry.sampleId || "n/a"}`;
+
+  const meta = document.createElement("p");
+  meta.className = "status";
+  meta.textContent = formatMeta(entry);
 
   const actions = document.createElement("div");
   actions.className = "actions";
@@ -52,6 +72,7 @@ function buildRow(entry) {
   actions.appendChild(copy);
   li.appendChild(p);
   li.appendChild(status);
+  li.appendChild(meta);
   li.appendChild(actions);
   return li;
 }