adding more security to api endpoints to require api token for all access, no by passing

apps/ui/src/components/claude-usage-popover.tsx

@@ -5,6 +5,7 @@ import { RefreshCw, AlertTriangle, CheckCircle, XCircle, Clock, ExternalLink } f
 import { cn } from '@/lib/utils';
 import { getElectronAPI } from '@/lib/electron';
 import { useAppStore } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
 
 // Error codes for distinguishing failure modes
 const ERROR_CODES = {
@@ -25,10 +26,15 @@ const REFRESH_INTERVAL_SECONDS = 45;
 
 export function ClaudeUsagePopover() {
   const { claudeUsage, claudeUsageLastUpdated, setClaudeUsage } = useAppStore();
+  const claudeAuthStatus = useSetupStore((state) => state.claudeAuthStatus);
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<UsageError | null>(null);
 
+  // Check if CLI is verified/authenticated
+  const isCliVerified =
+    claudeAuthStatus?.authenticated && claudeAuthStatus?.method === 'cli_authenticated';
+
   // Check if data is stale (older than 2 minutes) - recalculates when claudeUsageLastUpdated changes
   const isStale = useMemo(() => {
     return !claudeUsageLastUpdated || Date.now() - claudeUsageLastUpdated > 2 * 60 * 1000;
@@ -68,14 +74,17 @@ export function ClaudeUsagePopover() {
     [setClaudeUsage]
   );
 
-  // Auto-fetch on mount if data is stale
+  // Auto-fetch on mount if data is stale (only if CLI is verified)
   useEffect(() => {
-    if (isStale) {
+    if (isStale && isCliVerified) {
       fetchUsage(true);
     }
-  }, [isStale, fetchUsage]);
+  }, [isStale, isCliVerified, fetchUsage]);
 
   useEffect(() => {
+    // Skip if CLI is not verified
+    if (!isCliVerified) return;
+
     // Initial fetch when opened
     if (open) {
       if (!claudeUsage || isStale) {
@@ -94,7 +103,7 @@ export function ClaudeUsagePopover() {
     return () => {
       if (intervalId) clearInterval(intervalId);
     };
-  }, [open, claudeUsage, isStale, fetchUsage]);
+  }, [open, claudeUsage, isStale, isCliVerified, fetchUsage]);
 
   // Derived status color/icon helper
   const getStatusInfo = (percentage: number) => {