- Button now turns blue when user has entered an API key
- Uses 'default' variant (blue) when input is present and not loading
- Uses 'secondary' variant (gray) when input is empty or disabled
- Provides clear visual feedback to indicate when action is available
- Maintains proper disabled state for empty input and loading states
- Move 'Recommended' pill from Tetrate to API Key Tester as primary option
- Update provider cards to use consistent bg-transparent styling
- Replace 'Test Key' button text with ArrowRight icon for cleaner UI
- Add custom ArrowRight icon component matching design system
- Improve button height matching with input field using items-stretch
- Use design system Button component instead of custom blue styling
- Maintain blue focus ring on input while using standard button colors
- Create better visual hierarchy: API Key Tester (primary) → Provider cards (secondary)
- Fixed API key configuration using proper upsertConfig structure with is_secret: true
- Added delay after setting config to ensure it's applied before testing models
- Improved error handling with specific error messages from API responses
- Enhanced provider display names for better user experience
- Added Enter key support for quick testing workflow
- Enhanced dark mode support for result display colors
- Better error extraction from API responses for debugging
- Uses direct upsertConfig API calls for immediate effect
This should fix the issue where valid Anthropic API keys were showing as failed.
The component now properly:
1. Sets the API key as a secret configuration value
2. Waits for the config to be applied
3. Tests the provider's model endpoint
4. Shows specific error messages for debugging
- Created ApiKeyTester component that automatically tests API keys against multiple providers
- Integrated with existing providers() and getProviderModels() API endpoints
- Tests common providers: OpenAI, Anthropic, Google, Groq, Cohere, Mistral
- Automatically configures first working provider with GOOSE_PROVIDER and GOOSE_MODEL
- Added real-time validation with loading states and clear success/error feedback
- Positioned above 'Other providers' section for easy discovery
- Includes toast notifications and visual test results
- Handles authentication failures gracefully with specific error messages
Key features:
- Smart detection across multiple provider APIs
- One-click testing with progress indicators
- Automatic configuration on success
- Clear visual feedback for each provider tested
- Seamless integration with existing onboarding flow
- Added OpenAI and Anthropic provider options to onboarding
- Created official provider icons (Tetrate, OpenAI, Claude/Anthropic)
- Implemented 2x2 grid layout for better organization
- Updated header to be left-aligned with original messaging
- Enhanced icon spacing and positioning for better visual hierarchy
- Added setup handlers for manual provider configuration
- Fixed icon export compatibility issues
- Maintained OAuth flows for OpenRouter/Tetrate
- Added manual configuration flows for OpenAI/Anthropic
Key changes:
- ProviderGuard.tsx: Complete redesign with 4 providers
- New icon components: OpenAI.tsx, Anthropic.tsx, Tetrate.tsx
- New setup utilities: openaiSetup.ts, anthropicSetup.ts
- Updated icons/index.ts for proper exports
- Enhanced spacing (mb-3) for more visual 'soul'
All icons use official branding and consistent 16px sizing.
spencrmartin