Merge remote-tracking branch 'origin/main' into refactor/folder-pattern-compliance

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

@@ -6,6 +6,8 @@ import { Switch } from "@/components/ui/switch";
 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;
@@ -30,6 +32,13 @@ 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)
+  // Also hide on Windows for now (CLI usage command not supported)
+  const isWindows = typeof navigator !== 'undefined' && navigator.platform?.toLowerCase().includes('win');
+  const showUsageTracking = !apiKeys.anthropic && !isWindows;
+
   return (
     <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
       <div>
@@ -37,6 +46,9 @@ export function BoardHeader({
         <p className="text-sm text-muted-foreground">{projectName}</p>
       </div>
       <div className="flex gap-2 items-center">
+        {/* 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 && (
           <div

apps/ui/src/components/views/settings-view.tsx

@@ -9,6 +9,7 @@ import { KeyboardMapDialog } from "./settings-view/components/keyboard-map-dialo
 import { DeleteProjectDialog } from "./settings-view/components/delete-project-dialog";
 import { SettingsNavigation } from "./settings-view/components/settings-navigation";
 import { ApiKeysSection } from "./settings-view/api-keys/api-keys-section";
+import { ClaudeUsageSection } from "./settings-view/api-keys/claude-usage-section";
 import { ClaudeCliStatus } from "./settings-view/cli-status/claude-cli-status";
 import { AIEnhancementSection } from "./settings-view/ai-enhancement";
 import { AppearanceSection } from "./settings-view/appearance/appearance-section";
@@ -46,8 +47,14 @@ export function SettingsView() {
     defaultAIProfileId,
     setDefaultAIProfileId,
     aiProfiles,
+    apiKeys,
   } = useAppStore();
 
+  // Hide usage tracking 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 showUsageTracking = !apiKeys.anthropic && !isWindows;
+
   // Convert electron Project to settings-view Project type
   const convertProject = (
     project: ElectronProject | null
@@ -92,11 +99,14 @@ export function SettingsView() {
     switch (activeView) {
       case "claude":
         return (
-          <ClaudeCliStatus
-            status={claudeCliStatus}
-            isChecking={isCheckingClaudeCli}
-            onRefresh={handleRefreshClaudeCli}
-          />
+          <div className="space-y-6">
+            <ClaudeCliStatus
+              status={claudeCliStatus}
+              isChecking={isCheckingClaudeCli}
+              onRefresh={handleRefreshClaudeCli}
+            />
+            {showUsageTracking && <ClaudeUsageSection />}
+          </div>
         );
       case "ai-enhancement":
         return <AIEnhancementSection />;

apps/ui/src/components/views/settings-view/api-keys/claude-usage-section.tsx

@@ -0,0 +1,37 @@
+import { cn } from "@/lib/utils";
+
+export function ClaudeUsageSection() {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl overflow-hidden",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-green-500/20 to-green-600/10 flex items-center justify-center border border-green-500/20">
+            <div className="w-5 h-5 rounded-full bg-green-500/50" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Claude Usage Tracking</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Track your Claude Code usage limits. Uses the Claude CLI for data.
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Info about CLI requirement */}
+        <div className="rounded-lg bg-secondary/30 p-3 text-xs text-muted-foreground space-y-2 border border-border/50">
+          <p>Usage tracking requires Claude Code CLI to be installed and authenticated:</p>
+          <ol className="list-decimal list-inside space-y-1 ml-1">
+            <li>Install Claude Code CLI if not already installed</li>
+            <li>Run <code className="font-mono bg-muted px-1 rounded">claude login</code> to authenticate</li>
+            <li>Usage data will be fetched automatically every ~minute</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  );
+}