fix: Improve spinner visibility on primary-colored backgrounds

Add variant prop to Spinner component to support different color contexts:
- 'primary' (default): Uses text-primary for standard backgrounds
- 'foreground': Uses text-primary-foreground for primary backgrounds
- 'muted': Uses text-muted-foreground for subtle contexts

Updated components where spinners were invisible against primary backgrounds:
- TaskProgressPanel: Active task indicators now visible
- Button: Auto-detects spinner variant based on button style
- Various dialogs and setup views using buttons with loaders

Fixes #670

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/ui/src/components/ui/button.tsx

@@ -3,7 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/lib/utils';
-import { Spinner } from '@/components/ui/spinner';
+import { Spinner, type SpinnerVariant } from '@/components/ui/spinner';
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 cursor-pointer disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-[0.98]",
@@ -37,9 +37,19 @@ const buttonVariants = cva(
   }
 );
 
-// Loading spinner component
+/** Button variants that have colored backgrounds requiring foreground spinner color */
-function ButtonSpinner({ className }: { className?: string }) {
+const COLORED_BACKGROUND_VARIANTS = ['default', 'destructive'] as const;
-  return <Spinner size="sm" className={className} />;
+
+/** Get spinner variant based on button variant - use foreground for colored backgrounds */
+function getSpinnerVariant(
+  buttonVariant: VariantProps<typeof buttonVariants>['variant']
+): SpinnerVariant {
+  // undefined defaults to 'default' variant which has a colored background
+  if (!buttonVariant || COLORED_BACKGROUND_VARIANTS.includes(buttonVariant as any)) {
+    return 'foreground';
+  }
+  // outline, secondary, ghost, link, animated-outline use standard backgrounds
+  return 'primary';
 }
 
 function Button({
@@ -57,6 +67,7 @@ function Button({
     loading?: boolean;
   }) {
   const isDisabled = disabled || loading;
+  const spinnerVariant = getSpinnerVariant(variant);
 
   // Special handling for animated-outline variant
   if (variant === 'animated-outline' && !asChild) {
@@ -83,7 +94,7 @@ function Button({
             size === 'icon' && 'p-0 gap-0'
           )}
         >
-          {loading && <ButtonSpinner />}
+          {loading && <Spinner size="sm" variant={spinnerVariant} />}
           {children}
         </span>
       </button>
@@ -99,7 +110,7 @@ function Button({
       disabled={isDisabled}
       {...props}
     >
-      {loading && <ButtonSpinner />}
+      {loading && <Spinner size="sm" variant={spinnerVariant} />}
       {children}
     </Comp>
   );

apps/ui/src/components/ui/spinner.tsx

@@ -1,7 +1,8 @@
 import { Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
-type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SpinnerVariant = 'primary' | 'foreground' | 'muted';
 
 const sizeClasses: Record<SpinnerSize, string> = {
   xs: 'h-3 w-3',
@@ -11,9 +12,17 @@ const sizeClasses: Record<SpinnerSize, string> = {
   xl: 'h-8 w-8',
 };
 
+const variantClasses: Record<SpinnerVariant, string> = {
+  primary: 'text-primary',
+  foreground: 'text-primary-foreground',
+  muted: 'text-muted-foreground',
+};
+
 interface SpinnerProps {
   /** Size of the spinner */
   size?: SpinnerSize;
+  /** Color variant - use 'foreground' when on primary backgrounds */
+  variant?: SpinnerVariant;
   /** Additional class names */
   className?: string;
 }
@@ -21,11 +30,12 @@ interface SpinnerProps {
 /**
  * Themed spinner component using the primary brand color.
  * Use this for all loading indicators throughout the app for consistency.
+ * Use variant='foreground' when placing on primary-colored backgrounds.
  */
-export function Spinner({ size = 'md', className }: SpinnerProps) {
+export function Spinner({ size = 'md', variant = 'primary', className }: SpinnerProps) {
   return (
     <Loader2
-      className={cn(sizeClasses[size], 'animate-spin text-primary', className)}
+      className={cn(sizeClasses[size], 'animate-spin', variantClasses[variant], className)}
       aria-hidden="true"
     />
   );

apps/ui/src/components/ui/task-progress-panel.tsx

@@ -261,7 +261,7 @@ export function TaskProgressPanel({
                       )}
                     >
                       {isCompleted && <Check className="h-3.5 w-3.5" />}
-                      {isActive && <Spinner size="xs" />}
+                      {isActive && <Spinner size="xs" variant="foreground" />}
                       {isPending && <Circle className="h-2 w-2 fill-current opacity-50" />}
                     </div>
 

apps/ui/src/components/views/board-view/dialogs/merge-worktree-dialog.tsx

@@ -330,7 +330,7 @@ export function MergeWorktreeDialog({
           >
             {isLoading ? (
               <>
-                <Spinner size="sm" className="mr-2" />
+                <Spinner size="sm" variant="foreground" className="mr-2" />
                 Merging...
               </>
             ) : (

apps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsx

@@ -210,7 +210,7 @@ export function PlanApprovalDialog({
                 className="bg-green-600 hover:bg-green-700 text-white"
               >
                 {isLoading ? (
-                  <Spinner size="sm" className="mr-2" />
+                  <Spinner size="sm" variant="foreground" className="mr-2" />
                 ) : (
                   <Check className="w-4 h-4 mr-2" />
                 )}

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

@@ -572,7 +572,7 @@ export function InterviewView() {
                   >
                     {isGenerating ? (
                       <>
-                        <Spinner size="sm" className="mr-2" />
+                        <Spinner size="sm" variant="foreground" className="mr-2" />
                         Creating...
                       </>
                     ) : (

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

@@ -448,7 +448,7 @@ export function LoginView() {
           >
             {isLoggingIn ? (
               <>
-                <Spinner size="sm" className="mr-2" />
+                <Spinner size="sm" variant="foreground" className="mr-2" />
                 Authenticating...
               </>
             ) : (

apps/ui/src/components/views/setup-view/components/cli-installation-card.tsx

@@ -60,7 +60,7 @@ export function CliInstallationCard({
         >
           {isInstalling ? (
             <>
-              <Spinner size="sm" className="mr-2" />
+              <Spinner size="sm" variant="foreground" className="mr-2" />
               Installing...
             </>
           ) : (

apps/ui/src/components/views/setup-view/steps/claude-setup-step.tsx

@@ -412,7 +412,7 @@ export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps
                     >
                       {isInstalling ? (
                         <>
-                          <Spinner size="sm" className="mr-2" />
+                          <Spinner size="sm" variant="foreground" className="mr-2" />
                           Installing...
                         </>
                       ) : (
@@ -574,7 +574,7 @@ export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps
                     >
                       {isSavingApiKey ? (
                         <>
-                          <Spinner size="sm" className="mr-2" />
+                          <Spinner size="sm" variant="foreground" className="mr-2" />
                           Saving...
                         </>
                       ) : (

apps/ui/src/components/views/setup-view/steps/cli-setup-step.tsx

@@ -408,7 +408,7 @@ export function CliSetupStep({ config, state, onNext, onBack, onSkip }: CliSetup
                     >
                       {isInstalling ? (
                         <>
-                          <Spinner size="sm" className="mr-2" />
+                          <Spinner size="sm" variant="foreground" className="mr-2" />
                           Installing...
                         </>
                       ) : (
@@ -681,7 +681,7 @@ export function CliSetupStep({ config, state, onNext, onBack, onSkip }: CliSetup
                     >
                       {isSavingApiKey ? (
                         <>
-                          <Spinner size="sm" className="mr-2" />
+                          <Spinner size="sm" variant="foreground" className="mr-2" />
                           Saving...
                         </>
                       ) : (

apps/ui/src/components/views/setup-view/steps/cursor-setup-step.tsx

@@ -318,7 +318,7 @@ export function CursorSetupStep({ onNext, onBack, onSkip }: CursorSetupStepProps
                 >
                   {isLoggingIn ? (
                     <>
-                      <Spinner size="sm" className="mr-2" />
+                      <Spinner size="sm" variant="foreground" className="mr-2" />
                       Waiting for login...
                     </>
                   ) : (

apps/ui/src/components/views/setup-view/steps/opencode-setup-step.tsx

@@ -316,7 +316,7 @@ export function OpencodeSetupStep({ onNext, onBack, onSkip }: OpencodeSetupStepP
                   >
                     {isLoggingIn ? (
                       <>
-                        <Spinner size="sm" className="mr-2" />
+                        <Spinner size="sm" variant="foreground" className="mr-2" />
                         Waiting for login...
                       </>
                     ) : (

apps/ui/src/components/views/setup-view/steps/providers-setup-step.tsx

@@ -329,7 +329,7 @@ function ClaudeContent() {
               >
                 {isInstalling ? (
                   <>
-                    <Spinner size="sm" className="mr-2" />
+                    <Spinner size="sm" variant="foreground" className="mr-2" />
                     Installing...
                   </>
                 ) : (
@@ -424,7 +424,11 @@ function ClaudeContent() {
                         disabled={isSavingApiKey || !apiKey.trim()}
                         className="flex-1 bg-brand-500 hover:bg-brand-600 text-white"
                       >
-                        {isSavingApiKey ? <Spinner size="sm" /> : 'Save API Key'}
+                        {isSavingApiKey ? (
+                          <Spinner size="sm" variant="foreground" />
+                        ) : (
+                          'Save API Key'
+                        )}
                       </Button>
                       {hasApiKey && (
                         <Button
@@ -661,7 +665,7 @@ function CursorContent() {
               >
                 {isLoggingIn ? (
                   <>
-                    <Spinner size="sm" className="mr-2" />
+                    <Spinner size="sm" variant="foreground" className="mr-2" />
                     Waiting for login...
                   </>
                 ) : (
@@ -918,7 +922,7 @@ function CodexContent() {
                   >
                     {isLoggingIn ? (
                       <>
-                        <Spinner size="sm" className="mr-2" />
+                        <Spinner size="sm" variant="foreground" className="mr-2" />
                         Waiting for login...
                       </>
                     ) : (
@@ -961,7 +965,7 @@ function CodexContent() {
                     disabled={isSaving || !apiKey.trim()}
                     className="w-full bg-brand-500 hover:bg-brand-600 text-white"
                   >
-                    {isSaving ? <Spinner size="sm" /> : 'Save API Key'}
+                    {isSaving ? <Spinner size="sm" variant="foreground" /> : 'Save API Key'}
                   </Button>
                 </AccordionContent>
               </AccordionItem>
@@ -1194,7 +1198,7 @@ function OpencodeContent() {
               >
                 {isLoggingIn ? (
                   <>
-                    <Spinner size="sm" className="mr-2" />
+                    <Spinner size="sm" variant="foreground" className="mr-2" />
                     Waiting for login...
                   </>
                 ) : (
@@ -1466,7 +1470,7 @@ function GeminiContent() {
                   >
                     {isLoggingIn ? (
                       <>
-                        <Spinner size="sm" className="mr-2" />
+                        <Spinner size="sm" variant="foreground" className="mr-2" />
                         Waiting for login...
                       </>
                     ) : (
@@ -1509,7 +1513,7 @@ function GeminiContent() {
                     disabled={isSaving || !apiKey.trim()}
                     className="w-full bg-brand-500 hover:bg-brand-600 text-white"
                   >
-                    {isSaving ? <Spinner size="sm" /> : 'Save API Key'}
+                    {isSaving ? <Spinner size="sm" variant="foreground" /> : 'Save API Key'}
                   </Button>
                 </AccordionContent>
               </AccordionItem>
@@ -1745,7 +1749,7 @@ function CopilotContent() {
               >
                 {isLoggingIn ? (
                   <>
-                    <Spinner size="sm" className="mr-2" />
+                    <Spinner size="sm" variant="foreground" className="mr-2" />
                     Waiting for login...
                   </>
                 ) : (