From ebc7c9a7a08824462815fa9c39af25fa681cf18a Mon Sep 17 00:00:00 2001
From: Mohamad Yahia <xyzt70@gmail.com>
Date: Sun, 21 Dec 2025 08:09:00 +0400
Subject: [PATCH] feat: hide usage tracking UI when API key is configured

Usage tracking via CLI only works for Claude Code subscription users.
Hide the Usage button and settings section when an Anthropic API key is set.
---
 .../src/components/views/board-view/board-header.tsx   | 10 ++++++++--
 apps/ui/src/components/views/settings-view.tsx         |  6 +++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/ui/src/components/views/board-view/board-header.tsx b/apps/ui/src/components/views/board-view/board-header.tsx
index 044b6151..a7c74b3c 100644
--- a/apps/ui/src/components/views/board-view/board-header.tsx
+++ b/apps/ui/src/components/views/board-view/board-header.tsx
@@ -7,6 +7,7 @@ import { Label } from "@/components/ui/label";
 import { Plus, Bot } from "lucide-react";
 import { KeyboardShortcut } from "@/hooks/use-keyboard-shortcuts";
 import { ClaudeUsagePopover } from "@/components/claude-usage-popover";
+import { useAppStore } from "@/store/app-store";
 
 interface BoardHeaderProps {
   projectName: string;
@@ -31,6 +32,11 @@ export function BoardHeader({
   addFeatureShortcut,
   isMounted,
 }: BoardHeaderProps) {
+  const apiKeys = useAppStore((state) => state.apiKeys);
+
+  // Hide usage tracking when using API key (only show for Claude Code CLI users)
+  const showUsageTracking = !apiKeys.anthropic;
+
   return (
     <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
       <div>
@@ -38,8 +44,8 @@ export function BoardHeader({
         <p className="text-sm text-muted-foreground">{projectName}</p>
       </div>
       <div className="flex gap-2 items-center">
-        {/* Usage Popover */}
-        {isMounted && <ClaudeUsagePopover />}
+        {/* Usage Popover - only show for CLI users (not API key users) */}
+        {isMounted && showUsageTracking && <ClaudeUsagePopover />}
 
         {/* Concurrency Slider - only show after mount to prevent hydration issues */}
         {isMounted && (
diff --git a/apps/ui/src/components/views/settings-view.tsx b/apps/ui/src/components/views/settings-view.tsx
index b438672a..5100e7e6 100644
--- a/apps/ui/src/components/views/settings-view.tsx
+++ b/apps/ui/src/components/views/settings-view.tsx
@@ -47,8 +47,12 @@ export function SettingsView() {
     defaultAIProfileId,
     setDefaultAIProfileId,
     aiProfiles,
+    apiKeys,
   } = useAppStore();
 
+  // Hide usage tracking when using API key (only show for Claude Code CLI users)
+  const showUsageTracking = !apiKeys.anthropic;
+
   // Convert electron Project to settings-view Project type
   const convertProject = (
     project: ElectronProject | null
@@ -99,7 +103,7 @@ export function SettingsView() {
               isChecking={isCheckingClaudeCli}
               onRefresh={handleRefreshClaudeCli}
             />
-            <ClaudeUsageSection />
+            {showUsageTracking && <ClaudeUsageSection />}
           </div>
         );
       case "ai-enhancement":