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.
This commit is contained in:
Mohamad Yahia
2025-12-21 08:09:00 +04:00
parent 5bd2b705dc
commit ebc7c9a7a0
2 changed files with 13 additions and 3 deletions

View File

@@ -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 && (

View File

@@ -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":