Fix Suno track list rendering

chatgpt-suno-tampermonkey.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         ChatGPT to Suno Prompt Copier
 // @namespace    local.suno-helper
-// @version      0.8.9
+// @version      0.9.0
 // @description  Copy structured ChatGPT song prompt versions into Suno fields.
 // @author       local
 // @match        https://chatgpt.com/*
@@ -30,7 +30,7 @@
 (function () {
   "use strict";
 
-  const SCRIPT_VERSION = "0.8.9";
+  const SCRIPT_VERSION = "0.9.0";
   const STORAGE_KEY = "chatgptSunoPromptSlots";
   const SLOT_COUNT = 2;
   const isChatGPT = location.hostname.includes("chatgpt.com") || location.hostname.includes("chat.openai.com");
@@ -1619,37 +1619,62 @@
           libraryTrackMap.set(track.id, track);
         }
       }
-      libraryTracks = [...libraryTrackMap.values()];
+      libraryTracks = [...libraryTrackMap.values()].filter((track) => track?.id);
     };
     const renderLibraryTrackList = () => {
+      try {
+        for (const id of [...selectedTrackIds]) {
+          if (!libraryTrackMap.has(id)) selectedTrackIds.delete(id);
+        }
         const selectedCount = selectedTrackIds.size;
         selectionSummary.textContent = libraryTracks.length
           ? `누적 ${libraryTracks.length}곡 / 선택 ${selectedCount}곡`
           : "누적된 곡 없음. 스크롤하면서 곡 감지를 눌러줘.";
+
+        const nodes = [];
         if (!libraryTracks.length) {
-        trackList.innerHTML = `<div class="cgs-track-item"><div></div><div class="cgs-track-meta">감지된 곡 없음</div><div></div></div>`;
+          const empty = document.createElement("div");
+          empty.className = "cgs-track-item";
+          empty.innerHTML = `<div></div><div class="cgs-track-meta">감지된 곡 없음</div><div></div>`;
+          trackList.replaceChildren(empty);
           return;
         }
-      trackList.innerHTML = libraryTracks
+
-        .map((track, index) => {
+        libraryTracks.forEach((track, index) => {
-          const selected = selectedTrackIds.has(track.id);
+          const row = document.createElement("div");
-          const badge = [
+          row.className = `cgs-track-item ${selectedTrackIds.has(track.id) ? "cgs-selected" : ""}`;
+          row.dataset.cgsTrackIndex = String(index);
+          row.title = track.id || "";
+
+          const number = document.createElement("div");
+          number.className = "cgs-track-index";
+          number.textContent = String(index + 1);
+
+          const text = document.createElement("div");
+          const title = document.createElement("div");
+          title.className = "cgs-track-title";
+          title.textContent = track.title || track.id || "제목 없음";
+          const meta = document.createElement("div");
+          meta.className = "cgs-track-meta";
+          meta.textContent = String(track.style || track.lyrics || track.id || "").slice(0, 110);
+          text.append(title, meta);
+
+          const badge = document.createElement("div");
+          badge.className = "cgs-track-badge";
+          badge.textContent = [
             track.audioUrl ? "MP3" : "",
             track.wavUrl ? "WAV" : "",
             track.imageUrl ? "IMG" : "",
-          ].filter(Boolean).join(" ");
+          ].filter(Boolean).join(" ") || "ID";
-          return `
+
-            <div class="cgs-track-item ${selected ? "cgs-selected" : ""}" data-cgs-track-index="${index}" title="${escapeHtml(track.id || "")}">
+          row.append(number, text, badge);
-              <div class="cgs-track-index">${index + 1}</div>
+          nodes.push(row);
-              <div>
+        });
-                <div class="cgs-track-title">${escapeHtml(track.title || track.id || "제목 없음")}</div>
+        trackList.replaceChildren(...nodes);
-                <div class="cgs-track-meta">${escapeHtml((track.style || track.lyrics || track.id || "").slice(0, 110))}</div>
+      } catch (error) {
-              </div>
+        console.error("[ChatGPT to Suno] track list render failed", error);
-              <div class="cgs-track-badge">${escapeHtml(badge || "ID")}</div>
+        setStatus(body, `곡 목록 표시 실패: ${error.message || error}`);
-            </div>
+      }
-          `;
-        })
-        .join("");
     };
     const setSelectedRange = (from, to) => {
       const start = Math.max(0, Math.min(from, to));