fix: Improve spinner visibility on primary-colored backgrounds

[Shironex]

Summary

• Enhanced Spinner component with a variant prop supporting primary, foreground, and muted color variants
• Updated Button component to automatically detect and use the correct spinner variant based on button style (foreground for colored backgrounds like default/destructive)
• Fixed spinner visibility in TaskProgressPanel for active task indicators
• Updated all components using Button loading states to ensure spinner visibility

Root Cause

After commit 832d10e unified all loading indicators to use the new Spinner component, spinners on primary-colored backgrounds became invisible because the spinner defaulted to text-primary which blended into bg-primary backgrounds.

Solution

The Spinner component now accepts a variant prop:

• 'primary' (default): Uses text-primary for standard backgrounds
• 'foreground': Uses text-primary-foreground for primary backgrounds
• 'muted': Uses text-muted-foreground for subtle contexts

The Button component automatically selects the correct spinner variant based on its style variant.

Files Modified

• apps/ui/src/components/ui/spinner.tsx - Added variant prop
• apps/ui/src/components/ui/button.tsx - Auto-detect spinner variant
• apps/ui/src/components/ui/task-progress-panel.tsx - Use foreground variant
• Multiple dialog and setup view components - Updated button loading usage

Test Plan

• Verify spinners are visible on primary-colored button backgrounds
• Verify spinners are visible in TaskProgressPanel active indicators
• Verify spinners still work correctly on standard backgrounds
• Test in both light and dark themes

Closes #670

🤖 Generated with Claude Code

Summary by CodeRabbit

• Refactor
  • Unified and improved spinner visuals across the app (auth, setup, dialogs, buttons, and workflows) for a more polished, consistent loading appearance.
• New Features
  • Task indicators and keyboard-shortcut state now reflect running tasks across all worktrees, so worktree panels and shortcuts show multi-worktree activity.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Warning

Rate limit exceeded

@Shironex has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 17 minutes and 45 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Reworks Spinner to accept a new SpinnerVariant and exposes SpinnerSize. Button loading uses Spinner directly with a mapped variant. Multiple UI components updated to pass variant="foreground" to spinners to fix visibility against primary-colored backgrounds.

Changes

Cohort / File(s)	Summary
Spinner Core Types & Component apps/ui/src/components/ui/spinner.tsx	Expose SpinnerSize, add SpinnerVariant type (`'primary'
Button Component Refactoring apps/ui/src/components/ui/button.tsx	Remove ButtonSpinner usage; use Spinner directly. Add getSpinnerVariant() and COLORED_BACKGROUND_VARIANTS to map button variants → spinner variants and apply computed variant for loading states.
Board / Task / Dialog UIs apps/ui/src/components/ui/task-progress-panel.tsx, apps/ui/src/components/views/board-view.tsx, apps/ui/src/components/views/board-view/dialogs/merge-worktree-dialog.tsx, apps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsx, apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx	Use variant="foreground" (or conditional variant) for spinners; aggregate running auto tasks across worktrees in board-view.tsx and propagate aggregated running feature IDs to WorktreePanel.
Auth, Interview & Login Views apps/ui/src/components/views/interview-view.tsx, apps/ui/src/components/views/login-view.tsx	Add variant="foreground" to spinners used during spec generation and authentication flows.
Setup & Provider Steps apps/ui/src/components/views/setup-view/components/cli-installation-card.tsx, apps/ui/src/components/views/setup-view/steps/claude-setup-step.tsx, .../cli-setup-step.tsx, .../cursor-setup-step.tsx, .../opencode-setup-step.tsx, .../providers-setup-step.tsx	Standardize spinner appearance by adding variant="foreground" across multiple setup steps and provider flows (installing, saving API keys, waiting for login).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

Bug, Enhancement

Poem

I hop and I spin with a bright little cheer,
No longer hidden by colors so near.
Buttons and dialogs now sparkle and sing,
Foreground spinners make everything spring. 🐇✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 47.62% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main objective: improving spinner visibility on primary-colored backgrounds through a new variant prop system.
Linked Issues check	✅ Passed	The PR fully addresses issue #670 by adding a variant prop to Spinner, implementing auto-detection in Button, and updating components to use appropriate variants across backgrounds.
Out of Scope Changes check	✅ Passed	BoardView changes aggregating running auto tasks across worktrees are slightly tangential but align with ensuring spinner visibility in the WorktreePanel for multi-worktree scenarios.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @Shironex, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves a critical UI visibility issue where loading spinners on primary-colored backgrounds were invisible due to insufficient color contrast. The solution involves enhancing the Spinner component with configurable color variants and integrating this new functionality into the Button component for automatic variant selection. This ensures that all loading indicators are clearly visible across different UI elements, significantly improving user experience and accessibility.

Highlights

• Spinner Component Enhancement: Introduced a variant prop to the Spinner component, allowing it to display in primary, foreground, or muted colors to ensure visibility on various backgrounds.
• Automated Button Spinner Variant Selection: The Button component now intelligently determines the appropriate Spinner variant (e.g., foreground for colored backgrounds) when in a loading state, removing the need for manual color selection.
• Visibility Fixes Across UI: Corrected spinner visibility issues in TaskProgressPanel and numerous dialogs/setup views by explicitly setting the foreground variant where spinners were previously blending into primary-colored backgrounds.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request effectively addresses the spinner visibility issue on primary-colored backgrounds by introducing variants to the Spinner component and intelligently updating the Button component. The changes are well-executed across multiple files. I've included a couple of suggestions for refactoring that will improve type safety and leverage the new abstractions more effectively. Overall, this is a solid fix.