From 22a3da61c309f50faff439dd4f680c89ba3e5e3d Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Sat, 18 Apr 2026 17:12:34 -0700
Subject: [PATCH] fix: frontend concurrent-mount errors, nginx routing, and
 browser UX (#98 #106 #107)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- App.vue: lazy-mount pattern (v-if + v-show) so non-active tabs only mount on
  first visit, eliminating concurrent onMounted calls across all components (#98)
- nginx.cloud.conf: add /kiwi/api/ location to proxy API calls on direct-port
  access (localhost:8515); was serving SPA HTML → causing M.map/filter/find
  TypeError chain on load (#98)
- nginx.cloud.conf: $host → $http_host so 307 redirects preserve port number (#107)
- RecipeBrowserPanel: show friendly "corpus not loaded" notice and skip auto-select
  when all category counts are 0, instead of rendering confusing empty buttons (#106)
- Defensive Array.isArray guards in inventory store, mealPlan store, ReceiptsView
---
 docker/web/nginx.cloud.conf                    | 18 +++++++++++++++++-
 frontend/src/App.vue                           | 17 +++++++++++------
 frontend/src/components/ReceiptsView.vue       |  3 ++-
 frontend/src/components/RecipeBrowserPanel.vue | 18 ++++++++++++++----
 frontend/src/stores/inventory.ts               |  3 ++-
 frontend/src/stores/mealPlan.ts                |  3 ++-
 6 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/docker/web/nginx.cloud.conf b/docker/web/nginx.cloud.conf
index 4a3d316..85e509b 100644
--- a/docker/web/nginx.cloud.conf
+++ b/docker/web/nginx.cloud.conf
@@ -8,7 +8,7 @@ server {
     # Proxy API requests to the FastAPI container via Docker bridge network.
     location /api/ {
         proxy_pass http://api:8512;
-        proxy_set_header Host $host;
+        proxy_set_header Host $http_host;
         # Prefer X-Real-IP set by Caddy (real client address); fall back to $remote_addr
         # when accessed directly on LAN without Caddy in the path.
         proxy_set_header X-Real-IP $http_x_real_ip;
@@ -20,6 +20,22 @@ server {
         client_max_body_size 20m;
     }
 
+    # Direct-port LAN access (localhost:8515): when VITE_API_BASE='/kiwi', the frontend
+    # builds API calls as /kiwi/api/v1/... — proxy these to the API container.
+    # Through Caddy the /kiwi prefix is stripped before reaching nginx, so this block
+    # is only active for direct-port access without Caddy in the path.
+    # Longer prefix (/kiwi/api/ = 10 chars) beats ^~/kiwi/ (6 chars) per nginx rules.
+    location /kiwi/api/ {
+        rewrite ^/kiwi(/api/.*)$ $1 break;
+        proxy_pass http://api:8512;
+        proxy_set_header Host $http_host;
+        proxy_set_header X-Real-IP $http_x_real_ip;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
+        proxy_set_header X-CF-Session $http_x_cf_session;
+        client_max_body_size 20m;
+    }
+
     # When accessed directly (localhost:8515) instead of via Caddy (/kiwi path-strip),
     # Vite's /kiwi base URL means assets are requested at /kiwi/assets/... but stored
     # at /assets/... in nginx's root. Alias /kiwi/ → root so direct port access works.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8e8860b..ad1aa1c 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -88,22 +88,22 @@
 
       <main class="app-main">
         <div class="container">
-          <div v-show="currentTab === 'inventory'" class="tab-content fade-in">
+          <div v-if="mountedTabs.has('inventory')" v-show="currentTab === 'inventory'" class="tab-content fade-in">
             <InventoryList />
           </div>
-          <div v-show="currentTab === 'receipts'" class="tab-content fade-in">
+          <div v-if="mountedTabs.has('receipts')" v-show="currentTab === 'receipts'" class="tab-content fade-in">
             <ReceiptsView />
           </div>
           <div v-show="currentTab === 'recipes'" class="tab-content fade-in">
             <RecipesView />
           </div>
-          <div v-show="currentTab === 'settings'" class="tab-content fade-in">
+          <div v-if="mountedTabs.has('settings')" v-show="currentTab === 'settings'" class="tab-content fade-in">
             <SettingsView />
           </div>
-          <div v-show="currentTab === 'mealplan'" class="tab-content">
+          <div v-if="mountedTabs.has('mealplan')" v-show="currentTab === 'mealplan'" class="tab-content">
             <MealPlanView />
           </div>
-          <div v-show="currentTab === 'shopping'" class="tab-content fade-in">
+          <div v-if="mountedTabs.has('shopping')" v-show="currentTab === 'shopping'" class="tab-content fade-in">
             <ShoppingView />
           </div>
         </div>
@@ -204,7 +204,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import InventoryList from './components/InventoryList.vue'
 import ReceiptsView from './components/ReceiptsView.vue'
 import RecipesView from './components/RecipesView.vue'
@@ -220,6 +220,10 @@ type Tab = 'inventory' | 'receipts' | 'recipes' | 'settings' | 'mealplan' | 'sho
 
 const currentTab = ref<Tab>('recipes')
 const sidebarCollapsed = ref(false)
+// Lazy-mount: tabs mount on first visit and stay mounted (KeepAlive-like behaviour).
+// Only 'recipes' is in the initial set so non-active tabs don't mount simultaneously
+// on page load — eliminates concurrent onMounted calls across all tab components.
+const mountedTabs = reactive(new Set<Tab>(['recipes']))
 const inventoryStore = useInventoryStore()
 const { kiwiVisible, kiwiDirection } = useEasterEggs()
 
@@ -239,6 +243,7 @@ function onWordmarkClick() {
 }
 
 async function switchTab(tab: Tab) {
+  mountedTabs.add(tab)
   currentTab.value = tab
   if (tab === 'recipes' && inventoryStore.items.length === 0) {
     await inventoryStore.fetchItems()
diff --git a/frontend/src/components/ReceiptsView.vue b/frontend/src/components/ReceiptsView.vue
index f84a411..023cb42 100644
--- a/frontend/src/components/ReceiptsView.vue
+++ b/frontend/src/components/ReceiptsView.vue
@@ -175,7 +175,8 @@ async function uploadFile(file: File) {
 
 async function loadReceipts() {
   try {
-    const data = await receiptsAPI.listReceipts()
+    const raw = await receiptsAPI.listReceipts()
+    const data = Array.isArray(raw) ? raw : []
     // Fetch OCR data for each receipt
     receipts.value = await Promise.all(
       data.map(async (receipt: any) => {
diff --git a/frontend/src/components/RecipeBrowserPanel.vue b/frontend/src/components/RecipeBrowserPanel.vue
index a0cdb28..d838ebf 100644
--- a/frontend/src/components/RecipeBrowserPanel.vue
+++ b/frontend/src/components/RecipeBrowserPanel.vue
@@ -15,8 +15,13 @@
     <div v-if="loadingDomains" class="text-secondary text-sm">Loading…</div>
 
     <div v-else-if="activeDomain" class="browser-body">
+      <!-- Corpus unavailable notice — shown when all category counts are 0 -->
+      <div v-if="allCountsZero" class="browser-unavailable card p-md text-secondary text-sm">
+        Recipe library is not available on this instance yet. Browse categories will appear once the recipe corpus is loaded.
+      </div>
+
       <!-- Category list + Surprise Me -->
-      <div class="category-list mb-md flex flex-wrap gap-xs">
+      <div v-else class="category-list mb-md flex flex-wrap gap-xs">
         <button
           v-for="cat in categories"
           :key="cat.category"
@@ -101,7 +106,7 @@
         </template>
       </template>
 
-      <div v-else class="text-secondary text-sm">Loading recipes…</div>
+      <div v-else-if="!allCountsZero" class="text-secondary text-sm">Loading recipes…</div>
     </div>
 
     <div v-else-if="!loadingDomains" class="text-secondary text-sm">Loading…</div>
@@ -145,6 +150,9 @@ const loadingRecipes = ref(false)
 const savingRecipe = ref<BrowserRecipe | null>(null)
 
 const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
+const allCountsZero = computed(() =>
+  categories.value.length > 0 && categories.value.every(c => c.recipe_count === 0)
+)
 
 const pantryItems = computed(() =>
   inventoryStore.items
@@ -179,8 +187,10 @@ async function selectDomain(domainId: string) {
   total.value = 0
   page.value = 1
   categories.value = await browserAPI.listCategories(domainId)
-  // Auto-select the most-populated category so content appears immediately
-  if (categories.value.length > 0) {
+  // Auto-select the most-populated category so content appears immediately.
+  // Skip when all counts are 0 (corpus not seeded) — no point loading an empty result.
+  const hasRecipes = categories.value.some(c => c.recipe_count > 0)
+  if (hasRecipes) {
     const top = categories.value.reduce((best, c) =>
       c.recipe_count > best.recipe_count ? c : best, categories.value[0]!)
     selectCategory(top.category)
diff --git a/frontend/src/stores/inventory.ts b/frontend/src/stores/inventory.ts
index 69b5c24..2ddc3db 100644
--- a/frontend/src/stores/inventory.ts
+++ b/frontend/src/stores/inventory.ts
@@ -55,11 +55,12 @@ export const useInventoryStore = defineStore('inventory', () => {
     error.value = null
 
     try {
-      items.value = await inventoryAPI.listItems({
+      const result = await inventoryAPI.listItems({
         item_status: statusFilter.value === 'all' ? undefined : statusFilter.value,
         location: locationFilter.value === 'all' ? undefined : locationFilter.value,
         limit: 1000,
       })
+      items.value = Array.isArray(result) ? result : []
     } catch (err: any) {
       error.value = err.response?.data?.detail || 'Failed to fetch inventory items'
       console.error('Error fetching inventory:', err)
diff --git a/frontend/src/stores/mealPlan.ts b/frontend/src/stores/mealPlan.ts
index 6603b19..a5a9501 100644
--- a/frontend/src/stores/mealPlan.ts
+++ b/frontend/src/stores/mealPlan.ts
@@ -34,7 +34,8 @@ export const useMealPlanStore = defineStore('mealPlan', () => {
   async function loadPlans() {
     loading.value = true
     try {
-      plans.value = await mealPlanAPI.list()
+      const result = await mealPlanAPI.list()
+      plans.value = Array.isArray(result) ? result : []
     } finally {
       loading.value = false
     }