From 33c619b6b5992d32882e09628fb6a06f44ba97d0 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Tue, 14 Apr 2026 15:51:34 -0700
Subject: [PATCH] feat(kiwi-fe): wire OrchUsagePill into RecipesView and
 Settings opt-in toggle

- Import and mount OrchUsagePill near the recipe level selector in RecipesView;
  pill is self-hiding when not enabled or no lifetime key is present
- Add useOrchUsage composable to SettingsView with a Display section checkbox
  so users can opt in to seeing the cloud recipe call budget pill
- Add @/ path alias to vite.config.ts and tsconfig.app.json to resolve the
  existing @/services/api import in useOrchUsage.ts (fixes vite build error)
- tsc --noEmit and vite build both pass clean
---
 frontend/src/components/RecipesView.vue  |  3 +++
 frontend/src/components/SettingsView.vue | 31 ++++++++++++++++++++++++
 frontend/tsconfig.app.json               |  4 +++
 frontend/vite.config.ts                  |  6 +++++
 4 files changed, 44 insertions(+)

diff --git a/frontend/src/components/RecipesView.vue b/frontend/src/components/RecipesView.vue
index 0c4f579..f0c5029 100644
--- a/frontend/src/components/RecipesView.vue
+++ b/frontend/src/components/RecipesView.vue
@@ -75,6 +75,8 @@
         <p v-if="activeLevel" class="level-description text-sm text-secondary mt-xs">
           {{ activeLevel.description }}
         </p>
+        <!-- Orch budget pill — only visible when user has opted in (Settings toggle) -->
+        <OrchUsagePill class="mt-xs" />
       </div>
 
       <!-- Surprise Me confirmation -->
@@ -604,6 +606,7 @@ import RecipeBrowserPanel from './RecipeBrowserPanel.vue'
 import SavedRecipesPanel from './SavedRecipesPanel.vue'
 import CommunityFeedPanel from './CommunityFeedPanel.vue'
 import BuildYourOwnTab from './BuildYourOwnTab.vue'
+import OrchUsagePill from './OrchUsagePill.vue'
 import type { ForkResult } from '../stores/community'
 import type { RecipeSuggestion, GroceryLink } from '../services/api'
 import { recipesAPI } from '../services/api'
diff --git a/frontend/src/components/SettingsView.vue b/frontend/src/components/SettingsView.vue
index f6085b9..14c4a0e 100644
--- a/frontend/src/components/SettingsView.vue
+++ b/frontend/src/components/SettingsView.vue
@@ -63,6 +63,22 @@
           </button>
         </div>
       </section>
+
+      <!-- Display Preferences -->
+      <section class="mt-md">
+        <h3 class="text-lg font-semibold mb-xs">Display</h3>
+        <label class="orch-pill-toggle flex-start gap-sm text-sm">
+          <input
+            type="checkbox"
+            :checked="orchPillEnabled"
+            @change="setOrchPillEnabled(($event.target as HTMLInputElement).checked)"
+          />
+          Show cloud recipe call budget in Recipes
+        </label>
+        <p class="text-xs text-muted mt-xs">
+          Displays your remaining cloud recipe calls near the level selector. Only visible if you have a lifetime or founders key.
+        </p>
+      </section>
     </div>
     <div class="card mt-md">
       <h2 class="section-title text-xl mb-md">Cook History</h2>
@@ -159,9 +175,11 @@ import { ref, computed, onMounted } from 'vue'
 import { useSettingsStore } from '../stores/settings'
 import { useRecipesStore } from '../stores/recipes'
 import { householdAPI, type HouseholdStatus } from '../services/api'
+import { useOrchUsage } from '../composables/useOrchUsage'
 
 const settingsStore = useSettingsStore()
 const recipesStore = useRecipesStore()
+const { enabled: orchPillEnabled, setEnabled: setOrchPillEnabled } = useOrchUsage()
 
 const sortedCookLog = computed(() =>
   [...recipesStore.cookLog].sort((a, b) => b.cookedAt - a.cookedAt)
@@ -450,4 +468,17 @@ onMounted(async () => {
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
 }
+
+.orch-pill-toggle {
+  cursor: pointer;
+  align-items: center;
+  color: var(--color-text);
+}
+
+.orch-pill-toggle input[type="checkbox"] {
+  accent-color: var(--color-primary);
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
 </style>
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index 8d16e42..d493206 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -3,6 +3,10 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
 
     /* Linting */
     "strict": true,
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 7e4bca6..c8dd6dd 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,9 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
 
 export default defineConfig({
   plugins: [vue()],
   base: process.env.VITE_BASE_URL ?? '/',
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
   build: {
     rollupOptions: {
       output: {