From 2f19082661d1c6607c83f7cfb775e33d160844f0 Mon Sep 17 00:00:00 2001
From: Zane <75694352+zanesq@users.noreply.github.com>
Date: Thu, 26 Jun 2025 11:09:18 -0700
Subject: [PATCH] Add flag for showing cost tracking (#3090)

---
 .../src/components/bottom_menu/BottomMenu.tsx | 19 +++++++----
 .../src/components/more_menu/MoreMenu.tsx     |  2 +-
 .../settings/app/AppSettingsSection.tsx       | 34 ++++++++++---------
 ui/desktop/src/updates.ts                     |  1 +
 4 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/ui/desktop/src/components/bottom_menu/BottomMenu.tsx b/ui/desktop/src/components/bottom_menu/BottomMenu.tsx
index bd3a2d4a..3e973471 100644
--- a/ui/desktop/src/components/bottom_menu/BottomMenu.tsx
+++ b/ui/desktop/src/components/bottom_menu/BottomMenu.tsx
@@ -10,6 +10,7 @@ import { useModelAndProvider } from '../ModelAndProviderContext';
 import { Message } from '../../types/message';
 import { ManualSummarizeButton } from '../context_management/ManualSummaryButton';
 import { CostTracker } from './CostTracker';
+import { COST_TRACKING_ENABLED } from '../../updates';
 
 const TOKEN_LIMIT_DEFAULT = 128000; // fallback for custom models that the backend doesn't know about
 const TOKEN_WARNING_THRESHOLD = 0.8; // warning shows at 80% of the token limit
@@ -223,12 +224,18 @@ export default function BottomMenu({
         </div>
 
         {/* Cost Tracker - no separator before it */}
-        <div className="flex items-center h-full ml-1">
-          <CostTracker inputTokens={inputTokens} outputTokens={outputTokens} sessionCosts={sessionCosts} />
-        </div>
-
-        {/* Separator between cost and model */}
-        <div className="w-[1px] h-4 bg-borderSubtle mx-1.5" />
+        {COST_TRACKING_ENABLED && (
+          <>
+            <div className="flex items-center h-full ml-1">
+              <CostTracker
+                inputTokens={inputTokens}
+                outputTokens={outputTokens}
+                sessionCosts={sessionCosts}
+              />
+            </div>
+            <div className="w-[1px] h-4 bg-borderSubtle mx-1.5" />
+          </>
+        )}
 
         {/* Model Selector Dropdown */}
         <div className="flex items-center h-full">
diff --git a/ui/desktop/src/components/more_menu/MoreMenu.tsx b/ui/desktop/src/components/more_menu/MoreMenu.tsx
index 75286168..41635661 100644
--- a/ui/desktop/src/components/more_menu/MoreMenu.tsx
+++ b/ui/desktop/src/components/more_menu/MoreMenu.tsx
@@ -358,7 +358,7 @@ export default function MoreMenu({
                 subtitle="Browse your saved recipes"
                 icon={<FileText className="w-4 h-4" />}
               >
-                Go to Recipe Library
+                Recipe Library
               </MenuButton>
               <MenuButton
                 onClick={() => {
diff --git a/ui/desktop/src/components/settings/app/AppSettingsSection.tsx b/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
index c19558c0..1a96a3d3 100644
--- a/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
+++ b/ui/desktop/src/components/settings/app/AppSettingsSection.tsx
@@ -4,7 +4,7 @@ import { Button } from '../../ui/button';
 import { Settings, RefreshCw, ExternalLink } from 'lucide-react';
 import Modal from '../../Modal';
 import UpdateSection from './UpdateSection';
-import { UPDATES_ENABLED } from '../../../updates';
+import { COST_TRACKING_ENABLED, UPDATES_ENABLED } from '../../../updates';
 import { getApiUrl, getSecretKey } from '../../../config';
 
 interface AppSettingsSectionProps {
@@ -274,24 +274,26 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
           </div>
 
           {/* Cost Tracking */}
-          <div className="flex items-center justify-between mb-4">
-            <div>
-              <h3 className="text-textStandard">Cost Tracking</h3>
-              <p className="text-xs text-textSubtle max-w-md mt-[2px]">
-                Show model pricing and usage costs
-              </p>
+          {COST_TRACKING_ENABLED && (
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h3 className="text-textStandard">Cost Tracking</h3>
+                <p className="text-xs text-textSubtle max-w-md mt-[2px]">
+                  Show model pricing and usage costs
+                </p>
+              </div>
+              <div className="flex items-center">
+                <Switch
+                  checked={showPricing}
+                  onCheckedChange={handleShowPricingToggle}
+                  variant="mono"
+                />
+              </div>
             </div>
-            <div className="flex items-center">
-              <Switch
-                checked={showPricing}
-                onCheckedChange={handleShowPricingToggle}
-                variant="mono"
-              />
-            </div>
-          </div>
+          )}
 
           {/* Pricing Status - only show if cost tracking is enabled */}
-          {showPricing && (
+          {COST_TRACKING_ENABLED && showPricing && (
             <>
               <div className="flex items-center justify-between text-xs mb-2 px-4">
                 <span className="text-textSubtle">Pricing Source:</span>
diff --git a/ui/desktop/src/updates.ts b/ui/desktop/src/updates.ts
index da6e19cf..3029a850 100644
--- a/ui/desktop/src/updates.ts
+++ b/ui/desktop/src/updates.ts
@@ -1 +1,2 @@
 export const UPDATES_ENABLED = true;
+export const COST_TRACKING_ENABLED = true;