feat(settings): OpenRouter section localization, modern UI & hardening#125
Conversation
|
CodeAnt AI is reviewing your PR. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
codeant-ai
Bot
added
the
size:XXL
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
|
CodeAnt AI finished reviewing your PR. |
- Localize free-model labels via i18n keys - Gate model catalog and key validation through assertCloudAiAllowed - Validate OpenRouter localStorage cache shape - Allow Escape propagation in Select search input - Add OpenRouterSection and openrouterModels unit tests
|
@CodeAnt-AI: review |
|
CodeAnt AI is running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
size:XXL
Sequence DiagramThis PR refactors the OpenRouter settings panel so it loads model metadata and key status through a hardened OpenRouter service, and lets users test their stored API key with policy-aware validation and clearer feedback. sequenceDiagram
participant User
participant SettingsUI as Settings view
participant ORService as OpenRouter service
User->>SettingsUI: Open OpenRouter settings
SettingsUI->>ORService: Initialize section (key status and model catalog)
ORService-->>SettingsUI: Return models and stored key state
User->>SettingsUI: Click Test connection
SettingsUI->>ORService: Validate stored API key
ORService-->>SettingsUI: Return success or error result
SettingsUI-->>User: Show connection status and messages
Generated by CodeAnt AI |
|
CodeAnt AI finished running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
…ect on error, remove Select keydown stop - Keep stored OpenRouter API key in component state; pass to fetchOpenRouterModels - Re-fetch model catalog automatically after key save/clear - Always render model Select (static free-tier + custom) even when paid catalog fails - Remove remaining search-input onKeyDown stopPropagation in Select
|
@CodeAnt-AI: review |
|
CodeAnt AI is running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
- Select paid-model value no longer falls back to __custom__. - Model catalog stays usable (not disabled) when paid fetch fails. - Cache reads normalize entries to drop malformed items. - OpenRouterSection test mock filters non-native select props.
|
@CodeAnt-AI: review |
|
CodeAnt AI is running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
size:XXL
Sequence DiagramThis diagram shows how the updated OpenRouter settings panel loads the user's API key, fetches a searchable model catalog with policy-aware caching, and lets the user save and test their key while being isolated inside a view error boundary. sequenceDiagram
participant User
participant SettingsView
participant ViewErrorBoundary
participant OpenRouterSettings
participant Storage
participant OpenRouterModelService
User->>SettingsView: Open OpenRouter settings tab
SettingsView->>ViewErrorBoundary: Render OpenRouter section
ViewErrorBoundary->>OpenRouterSettings: Mount settings panel
OpenRouterSettings->>Storage: Load stored OpenRouter API key
OpenRouterSettings->>OpenRouterModelService: Fetch model catalog (policy-aware, cached)
User->>OpenRouterSettings: Enter API key and click Save
OpenRouterSettings->>Storage: Save API key
User->>OpenRouterSettings: Click Test connection and search model
OpenRouterSettings->>OpenRouterModelService: Validate key and provide searchable model list
OpenRouterSettings-->>User: Show connection status and grouped model options
Generated by CodeAnt AI |
codeant-ai
Bot
added
the
size:XXL
Sequence DiagramThis diagram shows how the OpenRouter settings panel now loads the model catalog using a stored key, updates models when the user saves a new key, and validates the key via a test-connection flow, all through the shared OpenRouter models service. sequenceDiagram
participant User
participant SettingsUI
participant ModelsService
User->>SettingsUI: Open OpenRouter settings
SettingsUI->>ModelsService: Load model catalog with stored key and AI policy
ModelsService-->>SettingsUI: Model list for searchable selector
User->>SettingsUI: Save API key
SettingsUI->>ModelsService: Store key, clear cache, reload catalog
ModelsService-->>SettingsUI: Updated models including paid options
User->>SettingsUI: Test connection
SettingsUI->>ModelsService: Validate stored key against OpenRouter API
ModelsService-->>SettingsUI: Key valid or invalid
SettingsUI-->>User: Show connection success or error message
Generated by CodeAnt AI |
|
CodeAnt AI finished running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
|
CodeAnt AI finished reviewing your PR. |
…nc (CodeAnt wave 10) commitCustomModel now reverts the selection to the actually-configured model when the custom input is left empty, instead of leaving "custom" selected while the stored model is unchanged. Covers both the blur and Enter paths. + test asserting an empty custom selection persists nothing and reverts the UI to the configured free model. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
@CodeAnt-AI review |
|
CodeAnt AI is running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
size:XXL
Sequence DiagramThis diagram shows how the OpenRouter settings section now loads the model catalog using the stored key, lets users save and test their API key, and surfaces results safely via an error boundary and notifications. sequenceDiagram
participant User
participant SettingsView
participant ErrorBoundary
participant OpenRouterSection
participant OpenRouterService
participant StorageService
participant Status
User->>SettingsView: Open OpenRouter settings
SettingsView->>ErrorBoundary: Render OpenRouter section
ErrorBoundary->>OpenRouterSection: Mount section UI
OpenRouterSection->>OpenRouterService: Load model catalog with stored key
OpenRouterService-->>OpenRouterSection: Return models or fallback options
User->>OpenRouterSection: Enter API key and click Save and Test
OpenRouterSection->>StorageService: Save or clear API key
OpenRouterSection->>OpenRouterService: Refresh catalog and validate key
OpenRouterService-->>OpenRouterSection: Key valid or error details
OpenRouterSection->>Status: Show success or error notification
Generated by CodeAnt AI |
…nRef only on success (CodeAnt wave 11) Hardens the sequence guards added in wave 9: - handleSaveKey/handleClearKey now call setIsTesting(false) right after bumping testSeqRef, so a connection test superseded by a save/clear can't leave the spinner/disabled state stuck via its sequence-guard early-return. - keyOverriddenRef is now set only AFTER a successful save/clear (not before the await), so a failed save/clear no longer suppresses a still-in-flight initial getApiKey load (which would wrongly show "no stored key" even though one exists). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
@CodeAnt-AI review |
|
CodeAnt AI is running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
size:XXL
|
CodeAnt AI finished running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
Sequence DiagramThis diagram shows the main flow in the updated OpenRouter settings section: loading and refreshing the model catalog based on the stored API key, and validating the key via a test-connection action, all behind the new policy-gated model service. sequenceDiagram
participant User
participant SettingsUI as Settings UI
participant Models as OpenRouter models service
User->>SettingsUI: Open OpenRouter settings
SettingsUI->>Models: Load model catalog for current key (policy gated, cached)
Models-->>SettingsUI: Return models or catalog error
User->>SettingsUI: Save or clear API key
SettingsUI->>Models: Persist key and refresh model catalog
Models-->>SettingsUI: Updated models for new key
User->>SettingsUI: Click Test connection
SettingsUI->>Models: Validate stored API key (policy gated)
Models-->>SettingsUI: Return connection status
SettingsUI-->>User: Show success or error message and mode/offline warnings
Generated by CodeAnt AI |
|
CodeAnt AI finished running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
…eAnt wave 12) The unmount cleanup now also bumps testSeqRef, so a connection test still pending when the user leaves the settings view can't resolve later and call setTestResult/setIsTesting on an unmounted component. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
@CodeAnt-AI review |
|
CodeAnt AI is running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
size:XXL
Sequence DiagramThis diagram shows how the updated OpenRouter settings panel loads a policy-gated model catalog, lets users save an API key, and test the connection, all while driving the searchable model select and key status messages. sequenceDiagram
participant User
participant Settings as OpenRouter settings UI
participant Policy as AI policy
participant OpenRouter as OpenRouter API
User->>Settings: Open OpenRouter settings
Settings->>Policy: Check cloud AI allowed
Policy-->>Settings: Cloud use permitted
Settings->>OpenRouter: Fetch model catalog (cache-aware)
OpenRouter-->>Settings: Model list for searchable select
User->>Settings: Save OpenRouter API key
Settings->>OpenRouter: Refresh authenticated model catalog
OpenRouter-->>Settings: Updated models including paid options
User->>Settings: Test connection
Settings->>OpenRouter: Validate key and show success status
Generated by CodeAnt AI |
|
CodeAnt AI finished running the review. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
1 participant
User description
Summary
Hardens the OpenRouter provider settings panel with full i18n coverage, the design-system searchable Select, API-key validation, model-catalog fetching/caching, AI-mode awareness, and ViewErrorBoundary wrapping.
Quality gate (local)
Key changes
Deferred
Closes TODO P2 OpenRouterSection tests.
CodeAnt-AI Description
Make OpenRouter settings searchable, validated, and safer to use
What Changed
Impact
✅ Faster model selection✅ Clearer key setup✅ Fewer broken Settings screens💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.