feat: Improve Claude CLI usage detection, mobile usage view, and add provider auth initialization

apps/ui/src/components/views/board-view/board-header.tsx

@@ -69,7 +69,6 @@ export function BoardHeader({
   const [showAutoModeSettings, setShowAutoModeSettings] = useState(false);
   const [showWorktreeSettings, setShowWorktreeSettings] = useState(false);
   const [showPlanSettings, setShowPlanSettings] = useState(false);
-  const apiKeys = useAppStore((state) => state.apiKeys);
   const claudeAuthStatus = useSetupStore((state) => state.claudeAuthStatus);
   const skipVerificationInAutoMode = useAppStore((state) => state.skipVerificationInAutoMode);
   const setSkipVerificationInAutoMode = useAppStore((state) => state.setSkipVerificationInAutoMode);
@@ -108,15 +107,8 @@ export function BoardHeader({
     [projectPath, setWorktreePanelVisible]
   );
 
-  // Claude usage tracking visibility logic
-  // Hide when using API key (only show for Claude Code CLI users)
-  // Also hide on Windows for now (CLI usage command not supported)
-  const isWindows =
-    typeof navigator !== 'undefined' && navigator.platform?.toLowerCase().includes('win');
-  const hasClaudeApiKey = !!apiKeys.anthropic || !!claudeAuthStatus?.hasEnvApiKey;
-  const isClaudeCliVerified =
-    claudeAuthStatus?.authenticated && claudeAuthStatus?.method === 'cli_authenticated';
-  const showClaudeUsage = !hasClaudeApiKey && !isWindows && isClaudeCliVerified;
+  const isClaudeCliVerified = !!claudeAuthStatus?.authenticated;
+  const showClaudeUsage = isClaudeCliVerified;
 
   // Codex usage tracking visibility logic
   // Show if Codex is authenticated (CLI or API key)
@@ -143,8 +135,8 @@ export function BoardHeader({
         />
       </div>
       <div className="flex gap-4 items-center">
-        {/* Usage Popover - show if either provider is authenticated */}
-        {isMounted && (showClaudeUsage || showCodexUsage) && <UsagePopover />}
+        {/* Usage Popover - show if either provider is authenticated, only on desktop */}
+        {isMounted && !isMobile && (showClaudeUsage || showCodexUsage) && <UsagePopover />}
 
         {/* Mobile view: show hamburger menu with all controls */}
         {isMounted && isMobile && (
@@ -158,6 +150,8 @@ export function BoardHeader({
             onAutoModeToggle={onAutoModeToggle}
             onOpenAutoModeSettings={() => setShowAutoModeSettings(true)}
             onOpenPlanDialog={onOpenPlanDialog}
+            showClaudeUsage={showClaudeUsage}
+            showCodexUsage={showCodexUsage}
           />
         )}
 

apps/ui/src/components/views/board-view/header-mobile-menu.tsx

@@ -11,6 +11,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Menu, Bot, Wand2, Settings2, GitBranch, Zap } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { MobileUsageBar } from './mobile-usage-bar';
 
 interface HeaderMobileMenuProps {
   // Worktree panel visibility
@@ -26,6 +27,9 @@ interface HeaderMobileMenuProps {
   onOpenAutoModeSettings: () => void;
   // Plan button
   onOpenPlanDialog: () => void;
+  // Usage bar visibility
+  showClaudeUsage: boolean;
+  showCodexUsage: boolean;
 }
 
 export function HeaderMobileMenu({
@@ -38,6 +42,8 @@ export function HeaderMobileMenu({
   onAutoModeToggle,
   onOpenAutoModeSettings,
   onOpenPlanDialog,
+  showClaudeUsage,
+  showCodexUsage,
 }: HeaderMobileMenuProps) {
   return (
     <DropdownMenu>
@@ -52,6 +58,17 @@ export function HeaderMobileMenu({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-64">
+        {/* Usage Bar - show if either provider is authenticated */}
+        {(showClaudeUsage || showCodexUsage) && (
+          <>
+            <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
+              Usage
+            </DropdownMenuLabel>
+            <MobileUsageBar showClaudeUsage={showClaudeUsage} showCodexUsage={showCodexUsage} />
+            <DropdownMenuSeparator />
+          </>
+        )}
+
         <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
           Controls
         </DropdownMenuLabel>

apps/ui/src/components/views/board-view/mobile-usage-bar.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useCallback } from 'react';
+import { RefreshCw, AlertTriangle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { getElectronAPI } from '@/lib/electron';
+import { useAppStore, type ClaudeUsage, type CodexUsage } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
+import { AnthropicIcon, OpenAIIcon } from '@/components/ui/provider-icon';
+
+interface MobileUsageBarProps {
+  showClaudeUsage: boolean;
+  showCodexUsage: boolean;
+}
+
+// Helper to get progress bar color based on percentage
+function getProgressBarColor(percentage: number): string {
+  if (percentage >= 80) return 'bg-red-500';
+  if (percentage >= 50) return 'bg-yellow-500';
+  return 'bg-green-500';
+}
+
+// Individual usage bar component
+function UsageBar({
+  label,
+  percentage,
+  isStale,
+}: {
+  label: string;
+  percentage: number;
+  isStale: boolean;
+}) {
+  return (
+    <div className="mt-1.5 first:mt-0">
+      <div className="flex items-center justify-between mb-0.5">
+        <span className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">
+          {label}
+        </span>
+        <span
+          className={cn(
+            'text-[10px] font-mono font-bold',
+            percentage >= 80
+              ? 'text-red-500'
+              : percentage >= 50
+                ? 'text-yellow-500'
+                : 'text-green-500'
+          )}
+        >
+          {Math.round(percentage)}%
+        </span>
+      </div>
+      <div
+        className={cn(
+          'h-1 w-full bg-muted-foreground/10 rounded-full overflow-hidden transition-opacity',
+          isStale && 'opacity-60'
+        )}
+      >
+        <div
+          className={cn('h-full transition-all duration-500', getProgressBarColor(percentage))}
+          style={{ width: `${Math.min(percentage, 100)}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+// Container for a provider's usage info
+function UsageItem({
+  icon: Icon,
+  label,
+  isLoading,
+  onRefresh,
+  children,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  isLoading: boolean;
+  onRefresh: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="px-2 py-2">
+      <div className="flex items-center justify-between mb-1.5">
+        <div className="flex items-center gap-2">
+          <Icon className="w-4 h-4 text-muted-foreground shrink-0" />
+          <span className="text-sm font-semibold">{label}</span>
+        </div>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onRefresh();
+          }}
+          className="p-1 rounded hover:bg-accent/50 transition-colors"
+          title="Refresh usage"
+        >
+          <RefreshCw
+            className={cn('w-3.5 h-3.5 text-muted-foreground', isLoading && 'animate-spin')}
+          />
+        </button>
+      </div>
+      <div className="pl-6 space-y-2">{children}</div>
+    </div>
+  );
+}
+
+export function MobileUsageBar({ showClaudeUsage, showCodexUsage }: MobileUsageBarProps) {
+  const { claudeUsage, claudeUsageLastUpdated, setClaudeUsage } = useAppStore();
+  const { codexUsage, codexUsageLastUpdated, setCodexUsage } = useAppStore();
+
+  // Check if data is stale (older than 2 minutes)
+  const isClaudeStale =
+    !claudeUsageLastUpdated || Date.now() - claudeUsageLastUpdated > 2 * 60 * 1000;
+  const isCodexStale = !codexUsageLastUpdated || Date.now() - codexUsageLastUpdated > 2 * 60 * 1000;
+
+  const fetchClaudeUsage = useCallback(async () => {
+    try {
+      const api = getElectronAPI();
+      if (!api.claude) return;
+      const data = await api.claude.getUsage();
+      if (!('error' in data)) {
+        setClaudeUsage(data);
+      }
+    } catch {
+      // Silently fail - usage display is optional
+    }
+  }, [setClaudeUsage]);
+
+  const fetchCodexUsage = useCallback(async () => {
+    try {
+      const api = getElectronAPI();
+      if (!api.codex) return;
+      const data = await api.codex.getUsage();
+      if (!('error' in data)) {
+        setCodexUsage(data);
+      }
+    } catch {
+      // Silently fail - usage display is optional
+    }
+  }, [setCodexUsage]);
+
+  const getCodexWindowLabel = (durationMins: number) => {
+    if (durationMins < 60) return `${durationMins}m Window`;
+    if (durationMins < 1440) return `${Math.round(durationMins / 60)}h Window`;
+    return `${Math.round(durationMins / 1440)}d Window`;
+  };
+
+  // Auto-fetch on mount if data is stale
+  useEffect(() => {
+    if (showClaudeUsage && isClaudeStale) {
+      fetchClaudeUsage();
+    }
+  }, [showClaudeUsage, isClaudeStale, fetchClaudeUsage]);
+
+  useEffect(() => {
+    if (showCodexUsage && isCodexStale) {
+      fetchCodexUsage();
+    }
+  }, [showCodexUsage, isCodexStale, fetchCodexUsage]);
+
+  // Don't render if there's nothing to show
+  if (!showClaudeUsage && !showCodexUsage) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2 py-1" data-testid="mobile-usage-bar">
+      {showClaudeUsage && (
+        <UsageItem
+          icon={AnthropicIcon}
+          label="Claude"
+          isLoading={false}
+          onRefresh={fetchClaudeUsage}
+        >
+          {claudeUsage ? (
+            <>
+              <UsageBar
+                label="Session"
+                percentage={claudeUsage.sessionPercentage}
+                isStale={isClaudeStale}
+              />
+              <UsageBar
+                label="Weekly"
+                percentage={claudeUsage.weeklyPercentage}
+                isStale={isClaudeStale}
+              />
+            </>
+          ) : (
+            <p className="text-[10px] text-muted-foreground italic">Loading usage data...</p>
+          )}
+        </UsageItem>
+      )}
+
+      {showCodexUsage && (
+        <UsageItem icon={OpenAIIcon} label="Codex" isLoading={false} onRefresh={fetchCodexUsage}>
+          {codexUsage?.rateLimits ? (
+            <>
+              {codexUsage.rateLimits.primary && (
+                <UsageBar
+                  label={getCodexWindowLabel(codexUsage.rateLimits.primary.windowDurationMins)}
+                  percentage={codexUsage.rateLimits.primary.usedPercent}
+                  isStale={isCodexStale}
+                />
+              )}
+              {codexUsage.rateLimits.secondary && (
+                <UsageBar
+                  label={getCodexWindowLabel(codexUsage.rateLimits.secondary.windowDurationMins)}
+                  percentage={codexUsage.rateLimits.secondary.usedPercent}
+                  isStale={isCodexStale}
+                />
+              )}
+            </>
+          ) : (
+            <p className="text-[10px] text-muted-foreground italic">Loading usage data...</p>
+          )}
+        </UsageItem>
+      )}
+    </div>
+  );
+}