feat(generator): add personalized Random Idea button powered by background profile + Whack Pack card + Codex

public/app.js

@@ -145,6 +145,10 @@ async function loadSettings() {
     if (modelSel && data.nanoBananaModel) {
       modelSel.value = data.nanoBananaModel;
     }
+    const bgEl = document.getElementById("settings-user-background");
+    if (bgEl && data.userBackground !== undefined) {
+      bgEl.value = data.userBackground;
+    }
   } catch (err) {
     console.warn("Failed to load settings:", err);
   }
@@ -2141,7 +2145,11 @@ function bindGlobalEvents() {
     e.preventDefault();
     const keyInput = document.getElementById("settings-api-key");
     const modelSel = document.getElementById("settings-model-select");
-    const payload = { nanoBananaModel: modelSel.value };
+    const bgInput = document.getElementById("settings-user-background");
+    const payload = {
+      nanoBananaModel: modelSel.value,
+      userBackground: bgInput ? bgInput.value.trim() : undefined
+    };
     if (keyInput.value.trim()) {
       payload.geminiApiKey = keyInput.value.trim();
     }
@@ -2151,10 +2159,38 @@ function bindGlobalEvents() {
     });
     keyInput.value = "";
     document.getElementById("settings-modal")?.classList.add("hidden");
-    showToast("🍌 Saved Nano Banana 2.1 settings!");
+    showToast("✓ Saved SparkVault & AI Generator settings!");
     await loadSettings();
   });
 
+  // Personalized Random Idea Button
+  document.getElementById("btn-generate-random-idea")?.addEventListener("click", async () => {
+    const btn = document.getElementById("btn-generate-random-idea");
+    if (!btn) return;
+    const origText = btn.innerHTML;
+    btn.disabled = true;
+    btn.innerHTML = "🎲 Generating...";
+    showToast("🎲 Drawing a Whack Pack card & inventing an idea from your background...");
+
+    try {
+      const catSel = document.getElementById("quick-capture-category")?.value || "any";
+      const res = await apiFetch("/api/ideas/generate-random", {
+        method: "POST",
+        body: JSON.stringify({
+          category: catSel === "spark" ? "any" : catSel
+        })
+      });
+      await Promise.all([loadIdeas(), loadWhackCatalog()]);
+      showToast(`✨ Created "${res.idea.title}" (via Card #${res.card.number} • ${res.generatorUsed})!`);
+      openIdeaDrawer(res.idea.id, "details");
+    } catch (err) {
+      showToast(`⚠️ ${err.message}`);
+    } finally {
+      btn.disabled = false;
+      btn.innerHTML = origText;
+    }
+  });
+
   // Lightbox Close
   document.getElementById("btn-close-lightbox")?.addEventListener("click", () => {
     document.getElementById("lightbox-modal")?.classList.add("hidden");