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");

public/index.html

@@ -39,8 +39,16 @@
       <button type="submit" class="btn btn-primary btn-sm">Capture</button>
       <button
         type="button"
-        id="btn-open-external-clip"
+        id="btn-generate-random-idea"
         class="btn btn-secondary btn-sm"
+        title="Generate a personalized random idea tailored to your background & a Whack Pack card"
+      >
+        🎲 Random Idea
+      </button>
+      <button
+        type="button"
+        id="btn-open-external-clip"
+        class="btn btn-ghost btn-sm"
         title="Attach external notes, clipboard screenshots, photos, or image URLs to a spark"
       >
         📎 Clip / Attach
@@ -750,6 +758,16 @@
             <option value="gemini-3.1-flash-lite-image">gemini-3.1-flash-lite-image — Nano Banana 2 Lite (Ultra-Fast)</option>
           </select>
         </div>
+        <div class="field-group">
+          <label for="settings-user-background">🎲 Personal Background & Tastes (Used by '🎲 Random Idea')</label>
+          <textarea
+            id="settings-user-background"
+            rows="5"
+            class="textarea-input"
+            placeholder="Describe your interests, aesthetic tastes, homelab stack, apparel preferences..."
+          ></textarea>
+          <small class="muted-label">When you click <strong>🎲 Random Idea</strong>, SparkVault combines this profile with a random Creative Whack Pack card to invent a tailored idea.</small>
+        </div>
         <div class="modal-footer">
           <button type="button" id="btn-cancel-settings" class="btn btn-ghost">Cancel</button>
           <button type="submit" class="btn btn-primary">Save Settings</button>