frontend/src/components/RecipesView.vue

@@ -11,7 +11,7 @@
         :aria-selected="activeTab === tab.id"
         :tabindex="activeTab === tab.id ? 0 : -1"
         :class="['btn', 'tab-btn', activeTab === tab.id ? 'btn-primary' : 'btn-secondary']"
-        @click="activeTab = tab.id"
+        @click="activateTab(tab.id)"
         @keydown="onTabKeydown"
       >{{ tab.label }}</button>
     </div>
@@ -32,6 +32,7 @@
       aria-labelledby="tab-saved"
       tabindex="0"
       @open-recipe="openRecipeById"
+      @go-to-tab="(tab: string) => activateTab(tab as TabId)"
     />
 
     <!-- Community tab -->
@@ -80,8 +81,8 @@
       </div>
 
       <!-- Surprise Me confirmation -->
-      <div v-if="recipesStore.level === 4" class="status-badge status-warning wildcard-warning">
+      <div v-if="recipesStore.level === 4" class="status-badge status-info wildcard-warning">
-        <span id="wildcard-warning-desc">The AI will freestyle recipes from whatever you have. Results can be unusual — that's part of the fun.</span>
+        <span id="wildcard-warning-desc">Wildcard mode lets the AI get creative with whatever you have on hand. Results might surprise you.</span>
         <label class="flex-start gap-sm mt-xs">
           <input type="checkbox" v-model="recipesStore.wildcardConfirmed" aria-describedby="wildcard-warning-desc" />
           <span>I understand, go for it</span>
@@ -97,6 +98,9 @@
         🌿 Hard Day Mode
         <span class="hard-day-sub">{{ recipesStore.hardDayMode ? 'on — quick &amp; simple only' : 'quick, simple recipes only' }}</span>
       </button>
+      <p v-if="recipesStore.hardDayMode && recipesStore.result && recipesStore.result.suggestions.length > 0" class="text-muted text-sm mt-xs">
+        Tap "Find recipes" again to apply.
+      </p>
 
       <!-- Dietary Preferences (collapsible) -->
       <details class="collapsible form-group" @toggle="(e: Event) => dietaryOpen = (e.target as HTMLDetailsElement).open">
@@ -125,6 +129,7 @@
               aria-describedby="constraint-hint"
               @keydown="onConstraintKey"
               @blur="commitConstraintInput"
+              autocomplete="off"
             />
             <span id="constraint-hint" class="form-hint">Press Enter or comma to add.</span>
           </div>
@@ -159,6 +164,7 @@
               aria-describedby="allergy-hint"
               @keydown="onAllergyKey"
               @blur="commitAllergyInput"
+              autocomplete="off"
             />
             <span id="allergy-hint" class="form-hint">No recipes containing these ingredients will appear.</span>
           </div>
@@ -194,7 +200,7 @@
       <!-- Advanced Filters (collapsible) -->
       <details class="collapsible form-group" @toggle="(e: Event) => advancedOpen = (e.target as HTMLDetailsElement).open">
         <summary class="collapsible-summary filter-summary" :aria-expanded="advancedOpen">
-          Advanced filters
+          Nutrition Filters{{ activeNutritionFilterCount > 0 ? ` (${activeNutritionFilterCount} active)` : '' }}
           <span v-if="advancedActive" class="filter-active-dot" aria-label="filters active"></span>
         </summary>
 
@@ -313,13 +319,13 @@
       </div>
 
       <!-- Element gaps -->
-      <div v-if="recipesStore.result.element_gaps.length > 0" class="card card-warning mb-md">
+      <div v-if="recipesStore.result.element_gaps.length > 0" class="card card-secondary mb-md">
-        <p class="text-sm font-semibold">Your pantry is missing some flavor elements:</p>
+        <p class="text-sm font-semibold">These would expand your options:</p>
         <div class="flex flex-wrap gap-xs mt-xs">
           <span
             v-for="gap in recipesStore.result.element_gaps"
             :key="gap"
-            class="status-badge status-warning"
+            class="status-badge status-info"
           >{{ gap }}</span>
         </div>
       </div>
@@ -331,6 +337,7 @@
           v-model="filterText"
           placeholder="Search recipes or ingredients…"
           aria-label="Filter recipes"
+          autocomplete="off"
         />
         <div class="filter-chips">
           <template v-if="availableLevels.length > 1">
@@ -386,16 +393,16 @@
             <div class="flex flex-wrap gap-xs" style="align-items:center">
               <span class="status-badge status-success">{{ recipe.match_count }} matched</span>
               <span class="status-badge status-info">Level {{ recipe.level }}</span>
-              <span v-if="recipe.is_wildcard" class="status-badge status-warning">Wildcard</span>
+              <span v-if="recipe.is_wildcard" class="status-badge status-info">Wildcard</span>
               <button
                 v-if="recipe.id"
-                :class="['btn-bookmark', { active: recipesStore.isBookmarked(recipe.id) }]"
+                :class="['btn-icon', 'btn-bookmark', { active: recipesStore.isBookmarked(recipe.id) }]"
                 @click="recipesStore.toggleBookmark(recipe)"
                 :aria-label="recipesStore.isBookmarked(recipe.id) ? 'Remove bookmark: ' + recipe.title : 'Bookmark: ' + recipe.title"
               >{{ recipesStore.isBookmarked(recipe.id) ? '★' : '☆' }}</button>
               <button
                 v-if="recipe.id"
-                class="btn-dismiss"
+                class="btn-icon btn-dismiss"
                 @click="recipesStore.dismiss(recipe.id)"
                 :aria-label="'Hide recipe: ' + recipe.title"
               >✕</button>
@@ -450,12 +457,12 @@
 
           <!-- Missing ingredients -->
           <div v-if="recipe.missing_ingredients.length > 0" class="mb-sm">
-            <p class="text-sm font-semibold text-secondary">You'd need:</p>
+            <p class="text-sm font-semibold text-secondary">To complete this recipe:</p>
             <div class="flex flex-wrap gap-xs mt-xs">
               <span
                 v-for="ing in recipe.missing_ingredients"
                 :key="ing"
-                class="status-badge status-warning"
+                class="status-badge status-info"
               >{{ ing }}</span>
             </div>
           </div>
@@ -471,13 +478,34 @@
                 target="_blank"
                 rel="noopener noreferrer"
                 class="grocery-link status-badge status-info"
+                title="This is an affiliate link"
               >
                 {{ link.ingredient }} @ {{ link.retailer }} ↗
               </a>
             </div>
           </div>
 
-          <!-- Swap candidates collapsible -->
+          <!-- Prep notes -->
+          <div v-if="recipe.prep_notes && recipe.prep_notes.length > 0" class="prep-notes mb-sm">
+            <p class="text-sm font-semibold">Before you start:</p>
+            <ul class="prep-notes-list mt-xs">
+              <li v-for="note in recipe.prep_notes" :key="note" class="text-sm prep-note-item">
+                {{ note }}
+              </li>
+            </ul>
+          </div>
+
+          <!-- Directions — always visible; this is the content people came for -->
+          <div v-if="recipe.directions.length > 0" class="directions-section">
+            <p class="text-sm font-semibold directions-label">Steps</p>
+            <ol class="directions-list mt-xs">
+              <li v-for="(step, idx) in recipe.directions" :key="idx" class="text-sm direction-step">
+                {{ step }}
+              </li>
+            </ol>
+          </div>
+
+          <!-- Swap candidates collapsible — shown after directions per M8 -->
           <details
             v-if="recipe.swap_candidates.length > 0"
             class="collapsible mb-sm"
@@ -501,26 +529,6 @@
             </div>
           </details>
 
-          <!-- Prep notes -->
-          <div v-if="recipe.prep_notes && recipe.prep_notes.length > 0" class="prep-notes mb-sm">
-            <p class="text-sm font-semibold">Before you start:</p>
-            <ul class="prep-notes-list mt-xs">
-              <li v-for="note in recipe.prep_notes" :key="note" class="text-sm prep-note-item">
-                {{ note }}
-              </li>
-            </ul>
-          </div>
-
-          <!-- Directions — always visible; this is the content people came for -->
-          <div v-if="recipe.directions.length > 0" class="directions-section">
-            <p class="text-sm font-semibold directions-label">Steps</p>
-            <ol class="directions-list mt-xs">
-              <li v-for="(step, idx) in recipe.directions" :key="idx" class="text-sm direction-step">
-                {{ step }}
-              </li>
-            </ol>
-          </div>
-
           <!-- Primary action: open detail panel -->
           <div class="card-actions">
             <button class="btn btn-primary btn-make" @click="openRecipe(recipe)">
@@ -593,11 +601,22 @@
       @close="browserSelectedRecipe = null"
       @cooked="browserSelectedRecipe = null"
     />
+
+    <!-- Undo toast for "I cooked this" dismiss -->
+    <div
+      v-if="lastCookedRecipe"
+      class="undo-toast"
+      role="status"
+      aria-live="polite"
+    >
+      Dismissed from suggestions.
+      <button class="btn-link" @click="undoCooked">Undo</button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, nextTick, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import { useRecipesStore } from '../stores/recipes'
 import { useInventoryStore } from '../stores/inventory'
 import { useSavedRecipesStore } from '../stores/savedRecipes'
@@ -633,20 +652,25 @@ function onTabKeydown(e: KeyboardEvent) {
   const current = tabIds.indexOf(activeTab.value)
   if (e.key === 'ArrowRight') {
     e.preventDefault()
-    activeTab.value = tabIds[(current + 1) % tabIds.length]!
+    activateTab(tabIds[(current + 1) % tabIds.length]!)
-    nextTick(() => {
-      // Move focus to the newly active panel so keyboard users don't have to Tab
-      // through the entire tab bar again to reach the panel content
-      const panel = document.querySelector('[role="tabpanel"]') as HTMLElement | null
-      panel?.focus()
-    })
   } else if (e.key === 'ArrowLeft') {
     e.preventDefault()
-    activeTab.value = tabIds[(current - 1 + tabIds.length) % tabIds.length]!
+    activateTab(tabIds[(current - 1 + tabIds.length) % tabIds.length]!)
-    nextTick(() => {
+  }
-      const panel = document.querySelector('[role="tabpanel"]') as HTMLElement | null
+}
-      panel?.focus()
+
-    })
+async function activateTab(tab: TabId) {
+  activeTab.value = tab
+  await nextTick()
+  // Move focus to the newly active panel so keyboard users don't have to Tab
+  // through the entire tab bar again to reach the panel content.
+  // findPanelRef handles the Find tab (a plain div); other tabs are child
+  // components so we locate their panel via querySelector.
+  if (tab === 'find' && findPanelRef.value) {
+    findPanelRef.value.focus()
+  } else {
+    const panel = document.querySelector('[role="tabpanel"]') as HTMLElement | null
+    panel?.focus()
   }
 }
 
@@ -750,11 +774,28 @@ function openRecipe(recipe: RecipeSuggestion) {
   selectedRecipe.value = recipe
 }
 
+const lastCookedRecipe = ref<{ id: number; title: string } | null>(null)
+let undoTimer: ReturnType<typeof setTimeout> | null = null
+
 function onCooked(recipe: RecipeSuggestion) {
   recipesStore.logCook(recipe.id, recipe.title)
   recipesStore.dismiss(recipe.id)
+  lastCookedRecipe.value = { id: recipe.id, title: recipe.title }
+  if (undoTimer) clearTimeout(undoTimer)
+  undoTimer = setTimeout(() => {
+    lastCookedRecipe.value = null
+  }, 12000)
 }
 
+function undoCooked() {
+  if (!lastCookedRecipe.value) return
+  recipesStore.undismiss(lastCookedRecipe.value.id)
+  if (undoTimer) clearTimeout(undoTimer)
+  lastCookedRecipe.value = null
+}
+
+onUnmounted(() => { if (undoTimer) clearTimeout(undoTimer) })
+
 const levels = [
   { 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.' },
@@ -814,6 +855,11 @@ const advancedActive = computed(() =>
   !!recipesStore.styleId
 )
 
+// #46 — count of active nutrition filters so the summary is informative when collapsed
+const activeNutritionFilterCount = computed(() =>
+  Object.values(recipesStore.nutritionFilters ?? {}).filter((v) => v !== null).length
+)
+
 const activeLevel = computed(() => levels.find(l => l.value === recipesStore.level))
 
 const cuisineStyles = [
@@ -1022,6 +1068,11 @@ watch(
   color: inherit;
   opacity: 0.7;
   transition: opacity 0.15s;
+  min-width: 24px;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .chip-remove:hover {
@@ -1472,4 +1523,26 @@ details[open] .collapsible-summary::before {
     grid-template-columns: 1fr;
   }
 }
+
+.undo-toast {
+  position: fixed;
+  bottom: var(--spacing-lg);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  box-shadow: var(--shadow-md);
+  font-size: var(--font-size-sm);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.undo-toast .btn-link {
+  min-height: 24px;
+  padding: 2px 4px;
+}
 </style>

frontend/src/components/SavedRecipesPanel.vue

@@ -3,7 +3,14 @@
     <!-- Empty state -->
     <div v-if="!store.loading && store.saved.length === 0" class="empty-state card text-center">
       <p class="text-secondary">No saved recipes yet.</p>
-      <p class="text-sm text-secondary mt-xs">Bookmark a recipe from Find or Browse and it will appear here.</p>
+      <div class="flex gap-sm mt-sm" style="justify-content: center;">
+        <button class="btn btn-secondary btn-sm" @click="$emit('go-to-tab', 'find')">
+          Find recipes for my pantry
+        </button>
+        <button class="btn btn-secondary btn-sm" @click="$emit('go-to-tab', 'browse')">
+          Browse recipes
+        </button>
+      </div>
     </div>
 
     <template v-else>
@@ -53,7 +60,7 @@
             </button>
 
             <!-- Stars display -->
-            <div v-if="recipe.rating !== null" class="stars-display flex gap-xs" aria-label="Rating">
+            <div v-if="recipe.rating !== null" class="stars-display flex gap-xs" :aria-label="`Rating: ${recipe.rating} out of 5`">
               <span
                 v-for="n in 5"
                 :key="n"
@@ -72,15 +79,30 @@
             >{{ tag }}</span>
           </div>
 
-          <!-- Notes preview -->
+          <!-- Notes preview with expand/collapse -->
-          <p v-if="recipe.notes" class="notes-preview text-sm text-secondary mt-xs">
+          <div v-if="recipe.notes" class="mt-xs">
-            {{ recipe.notes }}
+            <div
-          </p>
+              class="notes-preview text-sm text-secondary"
+              :class="{ expanded: expandedNotes.has(recipe.id) }"
+            >{{ recipe.notes }}</div>
+            <button
+              v-if="recipe.notes.length > 120"
+              class="btn-link text-sm"
+              :aria-expanded="expandedNotes.has(recipe.id)"
+              @click="toggleNotes(recipe.id)"
+            >
+              {{ expandedNotes.has(recipe.id) ? 'Show less' : 'Show more' }}
+            </button>
+          </div>
 
           <!-- Actions -->
           <div class="flex gap-xs mt-sm">
             <button class="btn btn-secondary btn-xs" @click="editRecipe(recipe)">Edit</button>
-            <button class="btn btn-secondary btn-xs" @click="unsave(recipe)">Remove</button>
+            <template v-if="confirmingRemove === recipe.id">
+              <button class="btn btn-danger btn-xs" @click="confirmRemove(recipe.id)">Yes, remove</button>
+              <button class="btn btn-secondary btn-xs" @click="cancelRemove">Cancel</button>
+            </template>
+            <button v-else class="btn btn-ghost btn-xs" @click="startRemove(recipe.id)">Remove</button>
           </div>
         </div>
       </div>
@@ -127,13 +149,40 @@ import { useSavedRecipesStore } from '../stores/savedRecipes'
 import type { SavedRecipe } from '../services/api'
 import SaveRecipeModal from './SaveRecipeModal.vue'
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'open-recipe', recipeId: number): void
+  (e: 'go-to-tab', tab: string): void
 }>()
 
 const store = useSavedRecipesStore()
 const editingRecipe = ref<SavedRecipe | null>(null)
 const showNewCollection = ref(false)
+
+// #44: two-step remove confirmation
+const confirmingRemove = ref<number | null>(null)
+
+function startRemove(id: number) {
+  confirmingRemove.value = id
+}
+
+function cancelRemove() {
+  confirmingRemove.value = null
+}
+
+function confirmRemove(id: number) {
+  const recipe = store.saved.find(r => r.id === id)
+  if (recipe) void unsave(recipe)
+  confirmingRemove.value = null
+}
+
+// #48: notes expand/collapse
+const expandedNotes = ref<Set<number>>(new Set())
+
+function toggleNotes(id: number) {
+  const next = new Set(expandedNotes.value)
+  next.has(id) ? next.delete(id) : next.add(id)
+  expandedNotes.value = next
+}
 const newColDialogRef = ref<HTMLElement | null>(null)
 let newColPreviousFocus: HTMLElement | null = null
 
@@ -245,10 +294,30 @@ async function createCollection() {
 }
 
 .notes-preview {
-  white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  max-height: 3.6em;
-  max-width: 100%;
+  transition: max-height 0.2s ease;
+}
+
+.notes-preview.expanded {
+  max-height: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .notes-preview { transition: none; }
+}
+
+.btn-link {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-primary);
+  padding: 0;
+  text-decoration: underline;
+}
+
+.btn-link:hover {
+  text-decoration: none;
 }
 
 .tag-chip {

frontend/src/stores/recipes.ts

@@ -21,6 +21,35 @@ const BOOKMARKS_MAX = 50
 const MISSING_MODE_KEY = 'kiwi:builder_missing_mode'
 const FILTER_MODE_KEY = 'kiwi:builder_filter_mode'
 
+const CONSTRAINTS_KEY = 'kiwi:constraints'
+const ALLERGIES_KEY = 'kiwi:allergies'
+
+function loadConstraints(): string[] {
+  try {
+    const raw = localStorage.getItem(CONSTRAINTS_KEY)
+    return raw ? JSON.parse(raw) : []
+  } catch {
+    return []
+  }
+}
+
+function saveConstraints(vals: string[]) {
+  localStorage.setItem(CONSTRAINTS_KEY, JSON.stringify(vals))
+}
+
+function loadAllergies(): string[] {
+  try {
+    const raw = localStorage.getItem(ALLERGIES_KEY)
+    return raw ? JSON.parse(raw) : []
+  } catch {
+    return []
+  }
+}
+
+function saveAllergies(vals: string[]) {
+  localStorage.setItem(ALLERGIES_KEY, JSON.stringify(vals))
+}
+
 type MissingIngredientMode = 'hidden' | 'greyed' | 'add-to-cart'
 type BuilderFilterMode = 'text' | 'tags'
 
@@ -95,8 +124,8 @@ export const useRecipesStore = defineStore('recipes', () => {
 
   // Request parameters
   const level = ref(1)
-  const constraints = ref<string[]>([])
+  const constraints = ref<string[]>(loadConstraints())
-  const allergies = ref<string[]>([])
+  const allergies = ref<string[]>(loadAllergies())
   const hardDayMode = ref(false)
   const maxMissing = ref<number | null>(null)
   const styleId = ref<string | null>(null)
@@ -126,6 +155,8 @@ export const useRecipesStore = defineStore('recipes', () => {
   // Persist wizard prefs on change
   watch(missingIngredientMode, (val) => localStorage.setItem(MISSING_MODE_KEY, val))
   watch(builderFilterMode, (val) => localStorage.setItem(FILTER_MODE_KEY, val))
+  watch(constraints, (val) => saveConstraints(val), { deep: true })
+  watch(allergies, (val) => saveAllergies(val), { deep: true })
 
   const dismissedCount = computed(() => dismissedIds.value.size)
 
@@ -207,6 +238,11 @@ export const useRecipesStore = defineStore('recipes', () => {
     }
   }
 
+  function undismiss(id: number) {
+    dismissedIds.value = new Set([...dismissedIds.value].filter((d) => d !== id))
+    saveDismissed(dismissedIds.value)
+  }
+
   function clearDismissed() {
     dismissedIds.value = new Set()
     localStorage.removeItem(DISMISSED_KEY)
@@ -241,6 +277,16 @@ export const useRecipesStore = defineStore('recipes', () => {
     localStorage.removeItem(BOOKMARKS_KEY)
   }
 
+  function clearConstraints() {
+    constraints.value = []
+    localStorage.removeItem(CONSTRAINTS_KEY)
+  }
+
+  function clearAllergies() {
+    allergies.value = []
+    localStorage.removeItem(ALLERGIES_KEY)
+  }
+
   function clearResult() {
     result.value = null
     error.value = null
@@ -270,11 +316,14 @@ export const useRecipesStore = defineStore('recipes', () => {
     isBookmarked,
     toggleBookmark,
     clearBookmarks,
+    clearConstraints,
+    clearAllergies,
     missingIngredientMode,
     builderFilterMode,
     suggest,
     loadMore,
     dismiss,
+    undismiss,
     clearDismissed,
     clearResult,
   }

frontend/src/style.css

@@ -115,7 +115,8 @@
   :root {
     --color-text-primary: #2c1a06;
     --color-text-secondary: #6b4c1e;
-    --color-text-muted: #a0845a;
+    /* Darkened from #a0845a → #7a5c2e for WCAG 1.4.3 AA compliance (~4.6:1 against light bg) */
+    --color-text-muted: #7a5c2e;
 
     --color-bg-primary: #fdf8f0;
     --color-bg-secondary: #ffffff;