Make ChatGPT helper panel persistent

chatgpt-suno-tampermonkey.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         ChatGPT to Suno Prompt Copier
 // @namespace    local.suno-helper
-// @version      0.1.1
+// @version      0.1.2
 // @description  Copy structured ChatGPT song prompt versions into Suno fields.
 // @author       local
 // @match        https://chatgpt.com/*
@@ -23,6 +23,7 @@
   const STORAGE_KEY = "chatgptSunoPromptPayload";
   const isChatGPT = location.hostname.includes("chatgpt.com") || location.hostname.includes("chat.openai.com");
   const isSuno = location.hostname === "suno.com" || location.hostname.endsWith(".suno.com");
+  let chatRenderTimer = 0;
 
   const FIELD_DEFS = [
     { key: "title", label: "Title", aliases: ["Title", "제목"] },
@@ -47,6 +48,15 @@
       font: 13px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       overflow: hidden;
     }
+    #cgs-panel.cgs-chatgpt {
+      right: 18px;
+      top: 72px;
+      bottom: auto;
+      border-color: rgba(47, 124, 246, 0.55);
+    }
+    #cgs-panel.cgs-error {
+      border-color: rgba(255, 84, 84, 0.7);
+    }
     #cgs-panel * { box-sizing: border-box; }
     #cgs-panel.cgs-minimized .cgs-body { display: none; }
     .cgs-head {
@@ -102,12 +112,13 @@
     }
   `);
 
-  function createPanel(title) {
+  function createPanel(title, mode = "") {
     const old = document.querySelector("#cgs-panel");
     if (old) old.remove();
 
     const panel = document.createElement("section");
     panel.id = "cgs-panel";
+    if (mode) panel.classList.add(mode);
     panel.innerHTML = `
       <div class="cgs-head">
         <span>${escapeHtml(title)}</span>
@@ -122,6 +133,15 @@
     return panel.querySelector(".cgs-body");
   }
 
+  function createErrorPanel(error) {
+    if (!document.body) return;
+    const body = createPanel("Suno Helper Error", "cgs-error");
+    body.innerHTML = `
+      <div class="cgs-muted">스크립트 UI를 만드는 중 오류가 났어.</div>
+      <div class="cgs-status">${escapeHtml(error?.message || String(error))}</div>
+    `;
+  }
+
   function setStatus(body, text) {
     const status = body.querySelector(".cgs-status");
     if (status) status.textContent = text;
@@ -227,7 +247,8 @@
   }
 
   function bootChatGPT() {
-    const body = createPanel("ChatGPT -> Suno");
+    clearInterval(chatRenderTimer);
+    const body = createPanel("ChatGPT -> Suno", "cgs-chatgpt");
     body.innerHTML = `
       <div class="cgs-muted">현재 답변에서 Version A/B/C를 찾아서 저장해.</div>
       <div data-cgs-list></div>
@@ -271,7 +292,9 @@
 
     body.querySelector("[data-cgs-rescan]").addEventListener("click", render);
     render();
-    setInterval(render, 3000);
+    chatRenderTimer = setInterval(() => {
+      if (document.body.contains(body)) render();
+    }, 3000);
   }
 
   function getAllControls() {
@@ -426,6 +449,32 @@
     }
   }
 
-  if (isChatGPT) bootChatGPT();
-  if (isSuno) bootSuno();
+  function startApp() {
+    if (!document.body) {
+      setTimeout(startApp, 100);
+      return;
+    }
+
+    try {
+      if (isChatGPT) bootChatGPT();
+      if (isSuno) bootSuno();
+    } catch (error) {
+      console.error("[ChatGPT to Suno]", error);
+      createErrorPanel(error);
+    }
+
+    setInterval(() => {
+      if (!document.querySelector("#cgs-panel")) {
+        try {
+          if (isChatGPT) bootChatGPT();
+          if (isSuno) bootSuno();
+        } catch (error) {
+          console.error("[ChatGPT to Suno]", error);
+          createErrorPanel(error);
+        }
+      }
+    }, 2000);
+  }
+
+  startApp();
 })();