The Gemini API key, base URL, and model inputs were not syncing with
the env editor below due to data source mismatch. The form was using
generic hooks (useApiKeyState, useBaseUrlState) that only updated
settingsConfig, while the env editor relied on geminiEnv from
useGeminiConfigState.
Changes:
- Use geminiApiKey/geminiBaseUrl from useGeminiConfigState instead of
generic hooks
- Wrap handlers to maintain bidirectional sync between geminiEnv and
settingsConfig
- Remove unused handleGeminiBaseUrlChange from useBaseUrlState to
avoid naming conflicts
Now all Gemini form fields properly sync with the env editor in both
directions.
* feat(providers): add notes field for provider management
- Add notes field to Provider model (backend and frontend)
- Display notes with higher priority than URL in provider card
- Style notes as non-clickable text to differentiate from URLs
- Add notes input field in provider form
- Add i18n support (zh/en) for notes field
* chore: format code and clean up unused props
- Run cargo fmt on Rust backend code
- Format TypeScript imports and code style
- Remove unused appId prop from ProviderPresetSelector
- Clean up unused variables in tests
- Integrate notes field handling in provider dialogs
* feat(deeplink): implement ccswitch:// protocol for provider import
Add deep link support to enable one-click provider configuration import via ccswitch:// URLs.
Backend:
- Implement URL parsing and validation (src-tauri/src/deeplink.rs)
- Add Tauri commands for parse and import (src-tauri/src/commands/deeplink.rs)
- Register ccswitch:// protocol in macOS Info.plist
- Add comprehensive unit tests (src-tauri/tests/deeplink_import.rs)
Frontend:
- Create confirmation dialog with security review UI (src/components/DeepLinkImportDialog.tsx)
- Add API wrapper (src/lib/api/deeplink.ts)
- Integrate event listeners in App.tsx
Configuration:
- Update Tauri config for deep link handling
- Add i18n support for Chinese and English
- Include test page for deep link validation (deeplink-test.html)
Files: 15 changed, 1312 insertions(+)
* chore(deeplink): integrate deep link handling into app lifecycle
Wire up deep link infrastructure with app initialization and event handling.
Backend Integration:
- Register deep link module and commands in mod.rs
- Add URL handling in app setup (src-tauri/src/lib.rs:handle_deeplink_url)
- Handle deep links from single instance callback (Windows/Linux CLI)
- Handle deep links from macOS system events
- Add tauri-plugin-deep-link dependency (Cargo.toml)
Frontend Integration:
- Listen for deeplink-import/deeplink-error events in App.tsx
- Update DeepLinkImportDialog component imports
Configuration:
- Enable deep link plugin in tauri.conf.json
- Update Cargo.lock for new dependencies
Localization:
- Add Chinese translations for deep link UI (zh.json)
- Add English translations for deep link UI (en.json)
Files: 9 changed, 359 insertions(+), 18 deletions(-)
* refactor(deeplink): enhance Codex provider template generation
Align deep link import with UI preset generation logic by:
- Adding complete config.toml template matching frontend defaults
- Generating safe provider name from sanitized input
- Including model_provider, reasoning_effort, and wire_api settings
- Removing minimal template that only contained base_url
- Cleaning up deprecated test file deeplink-test.html
* style: fix clippy uninlined_format_args warnings
Apply clippy --fix to use inline format arguments in:
- src/mcp.rs (8 fixes)
- src/services/env_manager.rs (10 fixes)
* style: apply code formatting and cleanup
- Format TypeScript files with Prettier (App.tsx, EnvWarningBanner.tsx, formatters.ts)
- Organize Rust imports and module order alphabetically
- Add newline at end of JSON files (en.json, zh.json)
- Update Cargo.lock for dependency changes
* feat: add model name configuration support for Codex and fix Gemini model handling
- Add visual model name input field for Codex providers
- Add model name extraction and update utilities in providerConfigUtils
- Implement model name state management in useCodexConfigState hook
- Add conditional model field rendering in CodexFormFields (non-official only)
- Integrate model name sync with TOML config in ProviderForm
- Fix Gemini deeplink model injection bug
- Correct environment variable name from GOOGLE_GEMINI_MODEL to GEMINI_MODEL
- Add test cases for Gemini model injection (with/without model)
- All tests passing (9/9)
- Fix Gemini model field binding in edit mode
- Add geminiModel state to useGeminiConfigState hook
- Extract model value during initialization and reset
- Sync model field with geminiEnv state to prevent data loss on submit
- Fix missing model value display when editing Gemini providers
Changes:
- 6 files changed, 245 insertions(+), 13 deletions(-)
**Changes:**
- Remove all comments from custom template (align with Claude/Gemini)
- Remove base_url field from template (user fills in form instead)
- Simplify getCodexCustomTemplate() - no locale parameter needed
- Keep preset configurations unchanged with their baseUrl values
**Template now contains only:**
- model_provider, model, model_reasoning_effort
- disable_response_storage
- [model_providers.custom] section with minimal fields
**Benefits:**
- ✅ Cleaner, more focused template
- ✅ Consistent with other apps (no comments)
- ✅ Forces users to fill base_url via form field
- ✅ Reduced template size from 35+ lines to 12 lines
Net change: -74 lines (codexTemplates.ts)
**Changes:**
- Create src/config/codexTemplates.ts with getCodexCustomTemplate factory
- Support both Chinese and English templates based on i18n.language
- Remove 70 lines of duplicated template strings from ProviderForm.tsx
- Update both useEffect and handlePresetChange to use template factory
- Clean up unused "Custom (Blank Template)" preset entry
**Benefits:**
- ✅ Eliminates code duplication (35-line template repeated twice)
- ✅ Adds internationalization support for English users
- ✅ Follows project architecture (templates in config/ directory)
- ✅ Improves maintainability (single source of truth)
- ✅ Net reduction: 34 lines (81 additions, 115 deletions)
**Technical Details:**
- Template selection logic: (i18n.language || "zh").startsWith("zh") ? "zh" : "en"
- Templates are identical except for comments language
- Both auth and config are returned as a single CodexTemplate object
Addresses DRY principle violation and architectural concerns identified
in code review.
- Change ProviderForm to use providerForm.category* instead of providerPreset.category*
- Remove duplicate category keys from providerPreset namespace in both zh.json and en.json
- Fix naming inconsistency: use categoryAggregation (not categoryAggregator)
- Fixes issue where English UI would show Chinese defaultValue fallbacks
This ensures single source of truth for category labels and improves maintainability.
Optimize custom endpoint management logic to distinguish between edit and create modes:
- Edit mode: endpoints are read/written directly to backend via API
- Create mode: use draftCustomEndpoints to stage, save on submit
- Remove duplicate endpoint loading in useSpeedTestEndpoints
- Add isSaving state and initialCustomUrls tracking
Fixed an issue where custom/extension fields (e.g., timeout_ms, retry_count)
were silently dropped when editing Codex MCP server configurations in TOML format.
Root cause: The TOML parser functions only extracted known fields (type, command,
args, env, cwd, url, headers), discarding any additional fields during normalization.
Changes:
- mcpServerToToml: Now uses spread operator to copy all fields before stringification
- normalizeServerConfig: Added logic to preserve unknown fields after processing known ones
- Both stdio and http server types now retain custom configuration fields
This fix enables forward compatibility with future MCP protocol extensions and
allows users to add custom configurations without code changes.
- Add src/lib/schemas/common.ts with jsonConfigSchema and tomlConfigSchema
- Enhance src/lib/schemas/mcp.ts to require command for stdio and url for http via superRefine
- Keep ProviderForm as-is; future steps will wire new schemas into RHF flows
- Verified: pnpm typecheck passes
Previously, endpoint URL input was only shown for aggregator, third_party,
and custom categories. This excluded cn_official providers from managing
custom endpoints.
Changed logic to show endpoint input for all categories except official,
which fixes the issue and simplifies the condition.
- Add isPartner and partnerPromotionKey fields to Provider and ProviderPreset types
- Display gold star badge on partner presets in selector
- Show promotional message in API Key section for partners
- Configure Zhipu GLM as official partner with 10% discount promotion
- Support both Claude and Codex provider presets
- Add i18n support for partner promotion messages (zh/en)
Implement Solution A (complete deferred submission) for custom endpoint
management, replacing the dual-mode system with unified local staging.
Changes:
- Remove immediate backend saves from EndpointSpeedTest
* handleAddEndpoint: local state update only
* handleRemoveEndpoint: local state update only
* handleSelect: remove lastUsed timestamp update
- Add explicit clear detection in ProviderForm
* Distinguish "user cleared endpoints" from "user didn't modify"
* Pass empty object {} as clear signal vs null for no-change
- Fix mergeProviderMeta to handle three distinct cases:
* null/undefined: don't modify endpoints (no meta sent)
* empty object {}: explicitly clear endpoints (send empty meta)
* with data: add/update endpoints (overwrite)
Fixed Critical Bug:
When users deleted all custom endpoints, changes were not saved because:
- draftCustomEndpoints=[] resulted in customEndpointsToSave=null
- mergeProviderMeta(meta, null) returned undefined
- Backend interpreted missing meta as "don't modify", preserving old values
Solution:
Detect when user had endpoints and cleared them (hadEndpoints && length===0),
then pass empty object to mergeProviderMeta as explicit clear signal.
Architecture Improvements:
- Transaction atomicity: all fields submitted together on form save
- UX consistency: add/edit modes behave identically
- Cancel button: true rollback with no immediate saves
- Code simplification: removed ~40 lines of immediate save error handling
Testing:
- TypeScript type check: passed
- Rust backend tests: 10/10 passed
- Build: successful
Allow aggregator category providers (like AiHubMix) to access the endpoint
speed test and management features, previously limited to third-party and
custom providers only.
- Add new AiHubMix provider preset with dual endpoints
- Fix AnyRouter base_url inconsistency (add /v1 suffix)
- Add configuration wizard shortcut link for Codex custom mode
- Improve accessibility with aria-label for wizard button
- Remove unused isCustomMode prop from CodexConfigEditor
- Add internationalization for new UI elements (zh/en)
- Rename src/config/providerPresets.ts to claudeProviderPresets.ts
- Update all import statements across 11 files to reflect the new name
- Establish symmetrical naming convention with codexProviderPresets.ts
- Improve code clarity and maintainability
Remove KimiModelSelector component and useKimiModelSelector hook to
eliminate code duplication and unify model configuration across all
Claude-compatible providers.
**Problem Statement:**
Previously, we maintained two separate implementations for the same
functionality:
- KimiModelSelector: API-driven dropdown with 211 lines of code
- ClaudeFormFields: Simple text inputs for model configuration
After removing API fetching logic from KimiModelSelector, both components
became functionally identical (4 text inputs), violating DRY principle
and creating unnecessary maintenance burden.
**Changes:**
Backend (Rust):
- No changes (model normalization logic already in place)
Frontend (React):
- Delete KimiModelSelector.tsx (-211 lines)
- Delete useKimiModelSelector.ts (-142 lines)
- Update ClaudeFormFields.tsx: remove Kimi-specific props (-35 lines)
- Update ProviderForm.tsx: unify display logic (-31 lines)
- Clean up hooks/index.ts: remove useKimiModelSelector export (-1 line)
Configuration:
- Update Kimi preset: kimi-k2-turbo-preview → kimi-k2-0905-preview
* Uses official September 2025 release
* 256K context window (vs 128K in older version)
Internationalization:
- Remove kimiSelector.* i18n keys (15 keys × 2 languages = -36 lines)
- Remove providerForm.kimiApiKeyHint
**Unified Architecture:**
Before (complex branching):
ProviderForm
├─ if Kimi → useKimiModelSelector → KimiModelSelector (4 inputs)
└─ else → useModelState → ClaudeFormFields inline (4 inputs)
After (single path):
ProviderForm
└─ useModelState → ClaudeFormFields (4 inputs for all providers)
Display logic simplified:
- Old: shouldShowModelSelector = category !== "official" && !shouldShowKimiSelector
- New: shouldShowModelSelector = category !== "official"
**Impact:**
Code Quality:
- Remove 457 lines of redundant code (-98.5%)
- Eliminate dual-track maintenance
- Improve code consistency
- Pass TypeScript type checking with zero errors
- Zero remaining references to deleted code
User Experience:
- Consistent UI across all providers (including Kimi)
- Same model configuration workflow for everyone
- No functional changes from user perspective
Architecture:
- Single source of truth for model configuration
- Easier to extend for future providers
- Reduced bundle size (removed lucide-react icons dependency)
**Testing:**
- ✅ TypeScript compilation passes
- ✅ No dangling references
- ✅ All model configuration fields functional
- ✅ Display logic works for official/cn_official/aggregator categories
**Migration Notes:**
- Existing Kimi users: configurations automatically upgraded to new model name
- No manual intervention required
- Backend normalization ensures backward compatibility
Upgrade Claude model configuration from dual-key to quad-key system for
better model tier differentiation.
**Breaking Changes:**
- Replace `ANTHROPIC_SMALL_FAST_MODEL` with three granular keys:
- `ANTHROPIC_DEFAULT_HAIKU_MODEL`
- `ANTHROPIC_DEFAULT_SONNET_MODEL`
- `ANTHROPIC_DEFAULT_OPUS_MODEL`
**Backend (Rust):**
- Add `normalize_claude_models_in_value()` for automatic migration
- Implement fallback chain: `DEFAULT_* || SMALL_FAST || MODEL`
- Auto-cleanup: remove legacy `SMALL_FAST` key after normalization
- Apply normalization across 6 critical paths:
- Add/update provider
- Read from live config
- Write to live config
- Refresh config snapshot
**Frontend (React):**
- Expand UI from 2 to 4 model input fields
- Implement smart fallback in `useModelState` hook
- Update `useKimiModelSelector` for Kimi model picker
- Add i18n keys for Haiku/Sonnet/Opus labels (zh/en)
**Configuration:**
- Update all 7 provider presets to new format
- DeepSeek/Qwen/Moonshot: use same model for all tiers
- Zhipu: preserve tier differentiation (glm-4.5-air for Haiku)
**Backward Compatibility:**
- Old configs auto-upgrade on first read/write
- Fallback chain ensures graceful degradation
- No manual migration required
Closes #[issue-number]
Rename `AppType` to `AppId` across the entire frontend codebase to better
reflect its purpose as an application identifier rather than a type category.
This aligns frontend naming with backend command parameter conventions.
Changes:
- Rename type `AppType` to `AppId` in src/lib/api/types.ts
- Remove `AppType` export from src/lib/api/index.ts
- Update all component props from `appType` to `appId` (43 files)
- Update all variable names from `appType` to `appId`
- Synchronize documentation (CHANGELOG, refactoring plans)
- Update test files and MSW mocks
BREAKING CHANGE: `AppType` type is no longer exported. Use `AppId` instead.
All component props have been renamed from `appType` to `appId`.
- Remove redundant 'config' field from Claude default configuration
* Align with SSOT architecture where Claude only requires 'env' field
* Matches the actual structure used in settings.json
- Update PackyCode provider configuration
* Migrate domain: packycode.com → packyapi.com
* Update API endpoints to new domain structure
* Update load balancer endpoint: api-slb.packycode.com → api-slb.packyapi.com
Fixed two critical data loss bugs where user-added custom endpoints were discarded:
1. **AddProviderDialog**: Form submission ignored values.meta from ProviderForm and
re-inferred URLs only from presets/config, causing loss of endpoints added via
speed test modal. Now prioritizes form-collected meta and uses fallback inference
only when custom_endpoints is missing.
2. **ProviderForm**: Edit mode always returned initialData.meta, discarding any
changes made in the speed test modal. Now uses mergeProviderMeta to properly
merge customEndpointsMap with existing meta fields.
Changes:
- Extract mergeProviderMeta utility to handle meta field merging logic
- Preserve other meta fields (e.g., usage_script) during endpoint updates
- Unify new/edit code paths to use consistent meta handling
- Add comprehensive unit tests for meta merging scenarios
- Add integration tests for AddProviderDialog submission flow
Impact:
- Third-party and custom providers can now reliably manage multiple endpoints
- Edit operations correctly reflect user modifications
- No data loss for existing meta fields like usage_script
- Unify EndpointCandidate type definition in types.ts
- Remove all 'as any' type assertions in useSpeedTestEndpoints
- Add cleanup function to prevent race conditions in async operations
- Fix stale error messages persisting after successful deletion
- Improve error handling for endpoint deletion (distinguish not-found vs network errors)
- Extract timeout magic numbers to ENDPOINT_TIMEOUT_SECS constant
- Clarify URL validation to explicitly allow only http/https
- Fix ambiguous payload.meta assignment logic in ProviderForm
- Add i18n for new error messages (removeFailed, updateLastUsedFailed)
Improved useApiKeyState hook to explicitly handle category parameter:
- Only create apiKey field for non-official providers in add mode
- Explicitly check category !== undefined to avoid unintended behavior
- Added comprehensive comments explaining the logic
- Updated dependency array to include category parameter
This ensures official provider configs remain clean without empty apiKey fields.
- Add dynamic hint text based on provider category (official, opensource, aggregator, third-party, custom)
- Display hints in ProviderPresetSelector below preset buttons
- Rename "Chinese official" to "Opensource official" for better clarity
- Add i18n keys for all category hints in both zh and en locales
- Remove redundant hint boxes from ClaudeFormFields and CodexFormFields
This improves user guidance by showing contextual hints that explain
what fields are required for each provider category.
Restructure AddProviderDialog and EditProviderDialog to follow the
standardized dialog layout pattern with buttons in DialogFooter.
Changes:
- Add DialogFooter to AddProviderDialog and EditProviderDialog
- Add `showButtons` prop to ProviderForm (default: true for backward compatibility)
- Add `id="provider-form"` to form element for external form submission
- Move Cancel and Submit buttons from ProviderForm to DialogFooter
- Use `form="provider-form"` attribute on DialogFooter buttons to trigger submission
Benefits:
- Consistent dialog footer appearance across all dialogs
- Proper spacing and alignment with other modal dialogs
- Better visual hierarchy with separated content and action areas
- Maintains backward compatibility for ProviderForm usage elsewhere
All provider dialogs now follow the unified pattern:
- DialogHeader: Title and description
- Content area: flex-1 overflow-y-auto px-6 py-4
- DialogFooter: Action buttons with standard styling
- Migrate all form components from ProviderForm/ to providers/forms/
- Create shared components to eliminate code duplication:
* ApiKeySection: unified API key input with "Get API Key" link
* EndpointField: unified endpoint URL input with manage button
- Refactor ClaudeFormFields (-31% lines) and CodexFormFields (-33% lines)
- Update all import paths to use new locations
- Reduce code duplication from ~12% to ~7%
This change improves maintainability and makes the codebase more DRY.
- Add smol-toml dependency for client-side TOML parsing
- Create useCodexTomlValidation hook with 500ms debounce
- Display validation errors below config.toml textarea
- Trigger validation on onChange for immediate user feedback
- Backend validation remains as fallback for data integrity
- Remove obsolete TODO comments for Codex Base URL handling
- Codex Base URL is already fully managed by useCodexConfigState hook
- useBaseUrlState is now only used for Claude mode
- Add clarifying comments about the architecture
- Create useSpeedTestEndpoints hook that collects endpoints from:
1. Current baseUrl/codexBaseUrl
2. Initial data URL (edit mode)
3. Preset's endpointCandidates array
- Pass speedTestEndpoints to ClaudeFormFields and CodexFormFields
- Update EndpointSpeedTest to use collected endpoints instead of just current URL
- Fix PackyCode preset endpoints not appearing in speed test modal
Fixed critical bug where CodexFormFields component was not rendered
in edit mode, preventing users from:
- Viewing and editing API base URL for custom/third-party Codex providers
- Accessing endpoint speed test modal in edit mode
- Updating API keys in edit mode
Changed line 477 from:
{appType === "codex" && !isEditMode && (
To:
{appType === "codex" && (
This aligns Codex behavior with Claude, where all form fields are
available in both create and edit modes for custom/third-party providers.
- Created ProviderPresetSelector component (80 lines)
- Created BasicFormFields component (60 lines)
- Created ClaudeFormFields component (272 lines)
- Created CodexFormFields component (131 lines)
- Reduced ProviderForm from 866 to 544 lines (37% reduction)
Each component now has a clear single responsibility:
- ProviderPresetSelector: Handles preset selection UI
- BasicFormFields: Name and website URL inputs
- ClaudeFormFields: All Claude-specific form fields
- CodexFormFields: All Codex-specific form fields
- ProviderForm: Orchestrates hooks and component composition
Benefits:
- Better code organization and maintainability
- Easier to test individual components
- Clearer separation of concerns
- More reusable components
- Created useCodexCommonConfig hook for managing Codex TOML common config
- Persists to localStorage with key 'cc-switch:codex-common-config-snippet'
- Added isCodexTemplateModalOpen state to ProviderForm
- Connected all CodexConfigEditor props:
- Common config snippet management (useCommonConfig, handlers)
- Template modal state (isTemplateModalOpen, setIsTemplateModalOpen)
- Form field callbacks (onWebsiteUrlChange, onNameChange)
- Custom mode detection (isCustomMode)
- Hook structure mirrors useCommonConfigSnippet for consistency
- Create useCommonConfigSnippet hook to manage common config state
- Create CommonConfigEditor component with modal for editing
- Support merging/removing common config snippets from provider configs
- Persist common config to localStorage for reuse across providers
- Auto-detect if provider config contains common snippet
- Replace JSON editor with CommonConfigEditor in ProviderForm
- Create useTemplateValues hook to manage template variable state
- Support dynamic placeholder replacement in provider configs
- Add template parameter input UI in provider form
- Validate required template values before submission
- Auto-update config when template values change
- Create useKimiModelSelector hook to manage Kimi-specific state
- Auto-detect Kimi providers by preset name or config content
- Support model initialization from existing config in edit mode
- Sync model selections with JSON configuration
- Maintain clean separation between UI and business logic
- Create useApiKeyLink hook to manage API Key retrieval link display and URL
- Create useCustomEndpoints hook to collect endpoints from multiple sources
- Simplify ProviderForm by using these new hooks
- Reduce code duplication and improve maintainability
- Fix TypeScript error with form.watch("websiteUrl") by providing default empty string
- Add draftCustomEndpoints state to collect custom endpoints from speed test modal
- Import CustomEndpoint type from @/types
- Update handleSubmit to collect and package endpoints into meta.custom_endpoints:
* User-added custom endpoints (from draftCustomEndpoints)
* Preset endpointCandidates (if any)
* Current Base URL (baseUrl/codexBaseUrl)
- Add onCustomEndpointsChange callback to both Claude and Codex EndpointSpeedTest instances
- Extend ProviderFormValues type to include meta.custom_endpoints field
- Only creates meta.custom_endpoints for new providers (not edit mode)
- Deduplicates URLs and creates CustomEndpoint entries with addedAt timestamp
- Add shouldShowClaudeApiKeyLink logic based on provider category
- Add shouldShowCodexApiKeyLink logic for Codex providers
- Add getCurrentClaudeWebsiteUrl() to get website URL with apiKeyUrl priority for third-party providers
- Add getCurrentCodexWebsiteUrl() with same logic for Codex
- Add link UI below API Key input for both Claude and Codex
- Links only show for cn_official, aggregator, and third_party categories
- Preserve original UI styling with -mt-1 pl-1 positioning
- Integrate useModelState hook for managing ANTHROPIC_MODEL and ANTHROPIC_SMALL_FAST_MODEL
- Add two model input fields in responsive grid layout
- Only show for non-official Claude providers
- Include helper text explaining optional nature
- Bidirectional sync between inputs and JSON config
- Integrate useBaseUrlState hook for managing Base URL
- Add Base URL input field for third-party and custom providers
- Add endpoint speed test modal with management button
- Show Base URL section only for non-official providers
- Add Zap icon button to open endpoint speed test modal
- Pass baseUrl to EndpointSpeedTest component
- Add helper text explaining API endpoint usage
All TypeScript type checks pass.
- Create custom hooks for state management:
- useProviderCategory: manages provider category state
- useApiKeyState: manages API key input with auto-sync to config
- useBaseUrlState: manages base URL for Claude and Codex
- useModelState: manages model selection state
- Integrate API key input into simplified ProviderForm:
- Add ApiKeyInput component for Claude mode
- Auto-populate API key into settings config
- Disable for official providers
- Fix EndpointSpeedTest type errors:
- Fix import paths to use @ alias
- Add temporary type definitions
- Format all TODO comments properly
- Remove incorrect type assertions
- Comment out unimplemented window.api checks
All TypeScript type checks now pass.
Restore the vibrant color palette from the pre-refactoring version while
maintaining shadcn/ui component architecture and modern design patterns.
## Color Scheme Restoration
### Button Component
- **default variant**: Blue primary (`bg-blue-500`) - matches old `primary`
- **destructive variant**: Red (`bg-red-500`) - matches old `danger`
- **secondary variant**: Gray text (`text-gray-500`) - matches old `secondary`
- **ghost variant**: Transparent hover (`hover:bg-gray-100`) - matches old `ghost`
- **mcp variant**: Emerald green (`bg-emerald-500`) - matches old `mcp`
- Updated border-radius to `rounded-lg` for consistency
### CSS Variables
- Set `--primary` to blue (`hsl(217 91% 60%)` ≈ `bg-blue-500`)
- Added complete shadcn/ui theme variables for light/dark modes
- Maintained semantic color tokens for maintainability
### Component-Specific Colors
- **"Currently Using" badge**: Green (`bg-green-500/10 text-green-500`)
- **Delete button hover**: Red (`hover:text-red-500 hover:bg-red-100`)
- **MCP button**: Emerald green with minimum width (`min-w-[80px]`)
- **Links/URLs**: Blue (`text-blue-500`)
## Benefits
- ✅ Restored original vibrant UI (blue, green, red accents)
- ✅ Maintained shadcn/ui component system (accessibility, animations)
- ✅ Easy global theming via CSS variables
- ✅ Consistent design language across all components
- ✅ Code formatted with Prettier (shadcn/ui standards)
## Files Changed
- `src/index.css`: Added shadcn/ui theme variables with blue primary
- `src/components/ui/button.tsx`: Restored all original button color variants
- `src/components/providers/ProviderCard.tsx`: Green badge for current provider
- `src/components/providers/ProviderActions.tsx`: Red hover for delete button
- `src/components/mcp/McpPanel.tsx`: Use `mcp` variant for consistency
- `src/App.tsx`: MCP button with emerald color and wider width
The UI now matches the original colorful design while leveraging modern
shadcn/ui components for better maintainability and user experience.
This commit completes Stage 2.5-2.6 of the refactoring plan by:
- Consolidating 8 provider form files (1941+ lines) into a single
unified ProviderForm component (353 lines), reducing code by ~82%
- Implementing modern form management with react-hook-form and zod
- Adding preset provider categorization with grouped select UI
- Supporting dual-mode operation for both Claude and Codex configs
- Removing redundant subcomponents:
- ApiKeyInput.tsx (72 lines)
- ClaudeConfigEditor.tsx (205 lines)
- CodexConfigEditor.tsx (667 lines)
- EndpointSpeedTest.tsx (636 lines)
- KimiModelSelector.tsx (195 lines)
- PresetSelector.tsx (119 lines)
Key improvements:
- Type-safe form values with ProviderFormValues extension
- Automatic template value application for presets
- Better internationalization coverage
- Cleaner separation of concerns
- Enhanced UX with categorized preset groups
Updates AddProviderDialog and EditProviderDialog to pass appType prop
and handle preset category metadata.
