From 74a7c068bc9541f112756428f61a99a1fee5d8b4 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Wed, 8 Apr 2026 15:03:51 -0700
Subject: [PATCH] feat(ux): rename creativity levels with descriptive labels
 and inline descriptions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "Use What I Have" / "Allow Swaps" / "Get Creative" / "Surprise Me 🎲"
- Active level shows a one-liner description beneath the selector
- Hover tooltips repeat the description for mouse users
- Label changed from "Creativity Level" to "How far should we stretch?"
- Wildcard confirmation copy updated to match new framing
---
 frontend/src/components/RecipesView.vue | 26 +++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/RecipesView.vue b/frontend/src/components/RecipesView.vue
index b80578d..2b2fce4 100644
--- a/frontend/src/components/RecipesView.vue
+++ b/frontend/src/components/RecipesView.vue
@@ -40,23 +40,26 @@
 
       <!-- Level Selector -->
       <div class="form-group">
-        <label class="form-label">Creativity Level</label>
+        <label class="form-label">How far should we stretch?</label>
         <div class="flex flex-wrap gap-sm">
           <button
             v-for="lvl in levels"
             :key="lvl.value"
             :class="['btn', 'btn-secondary', { active: recipesStore.level === lvl.value }]"
             @click="recipesStore.level = lvl.value"
+            :title="lvl.description"
           >
             {{ lvl.label }}
           </button>
         </div>
+        <p v-if="activeLevel" class="level-description text-sm text-secondary mt-xs">
+          {{ activeLevel.description }}
+        </p>
       </div>
 
-      <!-- Wildcard warning -->
+      <!-- Surprise Me confirmation -->
       <div v-if="recipesStore.level === 4" class="status-badge status-warning wildcard-warning">
-        Wildcard mode uses LLM to generate creative recipes with whatever you have. Results may be
-        unusual.
+        The AI will freestyle recipes from whatever you have. Results can be unusual — that's part of the fun.
         <label class="flex-start gap-sm mt-xs">
           <input type="checkbox" v-model="recipesStore.wildcardConfirmed" />
           <span>I understand, go for it</span>
@@ -644,12 +647,14 @@ function onCooked(recipe: RecipeSuggestion) {
 }
 
 const levels = [
-  { value: 1, label: '1 — From Pantry' },
-  { value: 2, label: '2 — Creative Swaps' },
-  { value: 3, label: '3 — AI Scaffold' },
-  { value: 4, label: '4 — Wildcard 🎲' },
+  { value: 1, label: 'Use What I Have',  description: 'Finds recipes you can make right now using exactly what\'s in your pantry.' },
+  { value: 2, label: 'Allow Swaps',      description: 'Same as above, plus recipes where one or two ingredients can be substituted.' },
+  { value: 3, label: 'Get Creative',     description: 'AI builds recipes in your chosen cuisine style from what you have. Requires paid tier.' },
+  { value: 4, label: 'Surprise Me 🎲',   description: 'Fully AI-generated — open-ended and occasionally unexpected. Requires paid tier.' },
 ]
 
+const activeLevel = computed(() => levels.find(l => l.value === recipesStore.level))
+
 const cuisineStyles = [
   { id: 'italian',           label: 'Italian' },
   { id: 'mediterranean',     label: 'Mediterranean' },
@@ -796,6 +801,11 @@ onMounted(async () => {
   margin-left: var(--spacing-xs);
 }
 
+.level-description {
+  font-style: italic;
+  line-height: 1.4;
+}
+
 .wildcard-warning {
   display: block;
   margin-bottom: var(--spacing-md);