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 @@
-
+
- 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.
I understand, go for it
@@ -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);