feat(naming): add Suggest Names button for ideas and tee compositor

public/app.js

@@ -812,10 +812,96 @@ async function openIdeaDrawer(id, initialTab = "details") {
 function closeIdeaDrawer() {
   state.activeIdeaId = null;
   state.activeIdea = null;
+  document.getElementById("drawer-name-suggestions-panel")?.classList.add("hidden");
   document.getElementById("drawer-backdrop").classList.add("hidden");
   document.getElementById("idea-drawer").classList.add("hidden");
 }
 
+async function requestNameSuggestionsForActiveIdea() {
+  if (!state.activeIdeaId || !state.activeIdea) return;
+  const panel = document.getElementById("drawer-name-suggestions-panel");
+  const btn = document.getElementById("btn-suggest-names");
+  if (!panel) return;
+
+  panel.classList.remove("hidden");
+  panel.innerHTML = `<div class="muted-label" style="padding:0.4rem;">✨ Brainstorming 6 creative names & taglines for "${escapeHtml(state.activeIdea.title)}"...</div>`;
+  if (btn) btn.disabled = true;
+
+  try {
+    const res = await apiFetch(`/api/ideas/${state.activeIdeaId}/suggest-names`, {
+      method: "POST"
+    });
+    const list = res.suggestions || [];
+    panel.innerHTML = `
+      <div class="name-suggestions-header">
+        <span>✨ <strong>Suggested Names & Taglines</strong> <small class="muted-label">(${escapeHtml(res.generatorUsed || "AI")})</small></span>
+        <div style="display:flex;gap:0.35rem;">
+          <button type="button" id="btn-resuggest-names" class="btn btn-ghost btn-xs">🔄 More</button>
+          <button type="button" id="btn-close-name-suggestions" class="btn btn-ghost btn-xs">✕</button>
+        </div>
+      </div>
+      <div class="name-suggestions-grid">
+        ${list
+          .map(
+            (s, idx) => `
+          <div class="name-suggestion-card" data-idx="${idx}">
+            <div style="display:flex;justify-content:space-between;align-items:center;gap:0.35rem;">
+              <strong style="font-size:0.86rem;color:var(--text-primary);">${escapeHtml(s.name)}</strong>
+              <span class="tag-chip">${escapeHtml(s.style || "Name")}</span>
+            </div>
+            ${s.tagline ? `<small class="muted-label" style="display:block;">${escapeHtml(s.tagline)}</small>` : ""}
+            <div style="display:flex;gap:0.35rem;margin-top:0.25rem;flex-wrap:wrap;">
+              <button type="button" class="btn btn-primary btn-xs btn-use-suggested-title" data-name="${escapeHtml(s.name)}" data-tagline="${escapeHtml(s.tagline || "")}">
+                ✓ Use Title
+              </button>
+              <button type="button" class="btn btn-ghost btn-xs btn-use-suggested-tee" data-name="${escapeHtml(s.name)}" data-tagline="${escapeHtml(s.tagline || "")}">
+                👕 Send to Tee Canvas
+              </button>
+            </div>
+          </div>
+        `
+          )
+          .join("")}
+      </div>
+    `;
+
+    panel.querySelector("#btn-resuggest-names")?.addEventListener("click", requestNameSuggestionsForActiveIdea);
+    panel.querySelector("#btn-close-name-suggestions")?.addEventListener("click", () => {
+      panel.classList.add("hidden");
+    });
+
+    panel.querySelectorAll(".btn-use-suggested-title").forEach((b) => {
+      b.addEventListener("click", async () => {
+        const newTitle = b.dataset.name;
+        const tagline = b.dataset.tagline;
+        const patch = { title: newTitle };
+        if (tagline && !state.activeIdea.elevator_pitch) {
+          patch.elevator_pitch = tagline;
+        }
+        document.getElementById("drawer-title-input").value = newTitle;
+        await saveActiveIdeaPatch(patch);
+        showToast(`✨ Renamed Spark to "${newTitle}"!`);
+      });
+    });
+
+    panel.querySelectorAll(".btn-use-suggested-tee").forEach((b) => {
+      b.addEventListener("click", () => {
+        const topEl = document.getElementById("comp-top-text");
+        const botEl = document.getElementById("comp-bottom-text");
+        if (topEl) topEl.value = b.dataset.name.toUpperCase();
+        if (botEl && b.dataset.tagline) botEl.value = b.dataset.tagline.toUpperCase();
+        switchDrawerTab("mockup");
+        renderCompositorCanvas();
+        showToast("👕 Loaded name & tagline onto the T-Shirt Compositor!");
+      });
+    });
+  } catch (err) {
+    panel.innerHTML = `<div class="muted-label">⚠️ ${escapeHtml(err.message)}</div>`;
+  } finally {
+    if (btn) btn.disabled = false;
+  }
+}
+
 function switchDrawerTab(tabName) {
   state.drawerTab = tabName;
   document.querySelectorAll(".drawer-tab").forEach((btn) => {
@@ -1889,6 +1975,8 @@ function bindGlobalEvents() {
   document.getElementById("drawer-title-input")?.addEventListener("change", (e) => {
     saveActiveIdeaPatch({ title: e.target.value });
   });
+  document.getElementById("btn-suggest-names")?.addEventListener("click", requestNameSuggestionsForActiveIdea);
+  document.getElementById("btn-comp-suggest-names")?.addEventListener("click", requestNameSuggestionsForActiveIdea);
   document.getElementById("drawer-status-select")?.addEventListener("change", (e) => {
     saveActiveIdeaPatch({ status: e.target.value });
   });