feat: hide usage tracking UI when API key is configured

maddada · maddada · commit ebc7c9a7a088 · 2025-12-21T08:09:00.000+04:00
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.
diff --git 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,15 +32,20 @@ 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>
         <h1 className="text-xl font-bold">Kanban Board</h1>
         <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
@@ -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":
