- Add edit mode button next to settings in header
- Edit button turns blue when active
- Drag handles fade in/out with edit mode toggle
- Add smooth 200ms transition animation
- Add i18n support for edit mode (en/zh)
- Maintain consistent spacing between header elements
Move the theme toggle from the main header to the settings dialog for a
cleaner UI and better organization. The new theme selector uses a
button group design consistent with the language settings.
Changes:
- Created ThemeSettings component with three options: Light, Dark, System
- Added ThemeSettings to the General tab in settings dialog
- Removed ModeToggle component from main header
- Added theme-related i18n keys for all options
- Theme selection takes effect immediately without requiring save
Design:
- Uses button group style matching LanguageSettings
- Icons for each theme option (Sun, Moon, Monitor)
- Consistent with app's blue theme for active state
- Smooth transitions and hover effects
This change simplifies the main header and consolidates all appearance
settings in one place, improving the overall user experience.
Fixed dual-source jitter issue:
1. Horizontal shift: Use overflow-y-scroll to force scrollbar gutter
2. Vertical jump: Use keepPreviousData to maintain content during app switch
Convert all MCP-related modal windows to use the unified shadcn/ui Dialog
component for consistency with the rest of the application.
Changes:
- McpPanel: Replace custom modal with Dialog component
- Update props from onClose to open/onOpenChange pattern
- Use DialogContent, DialogHeader, DialogTitle components
- Remove custom backdrop and close button (handled by Dialog)
- McpFormModal: Migrate form modal to Dialog
- Wrap entire form in Dialog component structure
- Use DialogFooter for action buttons
- Apply variant="mcp" to maintain green button styling
- Remove unused X icon import
- McpWizardModal: Convert wizard to Dialog
- Replace custom modal structure with Dialog components
- Use Button component with variant="mcp" for consistency
- Remove unused isLinux and X icon imports
- App.tsx: Update McpPanel usage
- Remove conditional rendering wrapper
- Pass open and onOpenChange props directly
- dialog.tsx: Fix dialog overlay and content styling
- Change overlay from bg-background/80 to bg-black/50 for consistency
- Change content from bg-background to explicit bg-white dark:bg-gray-900
- Ensures opaque backgrounds matching MCP panel style
Benefits:
- Unified dialog behavior across the application
- Consistent styling and animations
- Better accessibility with Radix UI primitives
- Reduced code duplication
- Maintains MCP-specific green color scheme
All dialogs now share the same base styling while preserving their unique
content and functionality.
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.
* feat: add provider usage query functionality
- Updated `Cargo.toml` to include `regex` and `rquickjs` dependencies for usage script execution.
- Implemented `query_provider_usage` command in `commands.rs` to handle usage queries.
- Created `UsageScript` and `UsageData` structs in `provider.rs` for managing usage script configurations and results.
- Added `execute_usage_script` function in `usage_script.rs` to run user-defined scripts for querying usage.
- Enhanced `ProviderList` component to include a button for configuring usage scripts and a modal for editing scripts.
- Introduced `UsageFooter` component to display usage information and status.
- Added `UsageScriptModal` for editing and testing usage scripts with preset templates.
- Updated Tauri API to support querying provider usage.
- Modified types in `types.ts` to include structures for usage scripts and results.
* feat(usage): support multi-plan usage display for providers
- 【Feature】
- Update `UsageResult` to support an array of `UsageData` for displaying multiple usage plans per provider.
- Refactor `query_provider_usage` command to parse both single `UsageData` objects (for backward compatibility) and arrays of `UsageData`.
- Enhance `usage_script` validation to accept either a single usage object or an array of usage objects.
- 【Frontend】
- Redesign `UsageFooter` to iterate and display details for all available usage plans, introducing `UsagePlanItem` for individual plan rendering.
- Improve usage display with color-coded remaining balance and clear plan information.
- Update `UsageScriptModal` test notification to summarize all returned plans.
- Remove redundant `isCurrent` prop from `UsageFooter` in `ProviderList`.
- 【Build】
- Change frontend development server port from `3000` to `3005` in `tauri.conf.json` and `vite.config.mts`.
* feat(usage): enhance query flexibility and display
- 【`src/types.ts`, `src-tauri/src/provider.rs`】Make `UsageData` fields optional and introduce `extra` and `invalidMessage` for more flexible reporting.
- `expiresAt` replaced by generic `extra` field.
- `isValid`, `remaining`, `unit` are now optional.
- Added `invalidMessage` to provide specific reasons for invalid status.
- 【`src-tauri/src/usage_script.rs`】Relax usage script result validation to accommodate optional fields in `UsageData`.
- 【`src/components/UsageFooter.tsx`】Update UI to display `extra` field and `invalidMessage`, and conditionally render `remaining` and `unit` based on availability.
- 【`src/components/UsageScriptModal.tsx`】
- Add a new `NewAPI` preset template demonstrating advanced extractor logic for complex API responses.
- Update script instructions to reflect optional fields and new variable syntax (`{{apiKey}}`).
- Remove old "DeepSeek" and "OpenAI" templates.
- Remove basic syntax check for `return` statement.
- 【`.vscode/settings.json`】Add `dish-ai-commit.base.language` setting.
- 【`src-tauri/src/commands.rs`】Adjust usage logging to handle optional `remaining` and `unit` fields.
* chore(config): remove VS Code settings from version control
- delete .vscode/settings.json to remove editor-specific configurations
- add /.vscode to .gitignore to prevent tracking of local VS Code settings
- ensure personalized editor preferences are not committed to the repository
* fix(provider): preserve usage script during provider update
- When updating a provider, the `usage_script` configuration within `ProviderMeta` was not explicitly merged.
- This could lead to the accidental loss of `usage_script` settings if the incoming `provider` object in the update request did not contain this field.
- Ensure `usage_script` is cloned from the existing provider's meta when merging `ProviderMeta` during an update.
* refactor(provider): enforce base_url for usage scripts and update dev ports
- 【Backend】
- `src-tauri/src/commands.rs`: Made `ANTHROPIC_BASE_URL` a required field for Claude providers and `base_url` a required field in `config.toml` for Codex providers when extracting credentials for usage script execution. This improves error handling by explicitly failing if these critical URLs are missing or malformed.
- 【Frontend】
- `src/App.tsx`, `src/components/ProviderList.tsx`: Passed `appType` prop to `ProviderList` component to ensure `updateProvider` calls within `handleSaveUsageScript` correctly identify the application type.
- 【Config】
- `src-tauri/tauri.conf.json`, `vite.config.mts`: Updated development server ports from `3005` to `3000` to standardize local development environment.
* refactor(usage): improve usage data fetching logic
- Prevent redundant API calls by tracking last fetched parameters in `useEffect`.
- Avoid concurrent API requests by adding a guard in `fetchUsage`.
- Clear usage data and last fetch parameters when usage query is disabled.
- Add `queryProviderUsage` API declaration to `window.api` interface.
* fix(usage-script): ensure usage script updates and improve reactivity
- correctly update `usage_script` from new provider meta during updates
- replace full page reload with targeted provider data refresh after saving usage script settings
- trigger usage data fetch or clear when `usageEnabled` status changes in `UsageFooter`
- reduce logging verbosity for usage script execution in backend commands and script execution
* style(usage-footer): adjust usage plan item layout
- Decrease width of extra field column from 35% to 30%
- Increase width of usage information column from 40% to 45%
- Improve visual balance and readability of usage plan items
- Apply immediately on save (write or remove primaryApiKey)
- Honor setting on provider switch (enabled: write for non-official, remove for official; disabled: no auto writes)
- Remove per-provider Claude plugin buttons from ProviderList
- Upsert primaryApiKey=any preserving other fields; respect override dir
- Add zh/en i18n for the new setting
- Support both TOML schemas: [mcp.servers.<id>] and [mcp_servers.<id>]
- Non-destructive merge of imported servers (enabled=true only)
- Preserve existing TOML schema when syncing (prefer mcp_servers)
- Remove both mcp and mcp_servers when no enabled items
feat(ui): auto-import Codex MCP on panel init (app=codex)
chore(tauri): add import_mcp_from_codex command and register
chore(types): expose window.api.importMcpFromCodex and typings
fix(ui): remove unused variable for typecheck
- Make MCP panel app-aware; pass appType from App and call APIs with current app
- Show active app in title: “MCP Management · Claude Code/Codex”
- Add sync_enabled_to_codex: project enabled servers from SSOT to ~/.codex/config.toml as [mcp.servers.*]
- Sync on enable/disable, delete, and provider switch (post live write)
- Add Tauri command sync_enabled_mcp_to_codex and expose window.api.syncEnabledMcpToCodex()
- Fix Rust borrow scopes in switch_provider to avoid E0502
- Add TS declarations for new Codex sync API
- Add MCP-specific green button style (buttonStyles.mcp)
- Unify MCP panel and form buttons with emerald theme
- Adjust MCP entry button width to match AppSwitcher (px-3)
- Reduce JSON editor height from h-64 to h-48
- Update translations: "Add/Edit Server" → "Add/Edit MCP"
- Change form label to "MCP Title (Unique)" for clarity
- Move config wizard button to right side of JSON label
- Fix McpListItem enabled state check (explicit true check)
- Increase notification z-index to z-[80] to prevent overlay issues
- Make MCP save operation async with proper error propagation
- Display specific backend error messages in form validation
- Ensure errors are visible in both form and panel layers
- Redesign MCP panel to match main interface style
- Add toggle switch for each MCP server to enable/disable
- Use emerald theme color consistent with MCP button
- Create card-based layout with one MCP per row
- Add dedicated form modal for add/edit operations
- Implement proper empty state with friendly prompts
- Add comprehensive i18n support (zh/en)
- Extend McpServer type to support enabled field
- Backend already supports enabled field via serde_json::Value
Components:
- McpPanel: Main panel container with header and list
- McpListItem: Card-based list item with toggle and actions
- McpFormModal: Independent modal for add/edit forms
- McpToggle: Emerald-themed toggle switch component
All changes passed TypeScript type checking and production build.
- Add McpPanel with enable toggle, server list and add/edit form
- Quick template: mcp-fetch (uvx mcp-server-fetch)
- Command validation UI and open ~/.claude shortcut
- Wire MCP button in App to open panel
- Move language switcher from header to settings modal for better organization
- Implement modern segment control UI instead of radio buttons for language selection
- Add language preference persistence in localStorage and backend settings
- Support instant language preview with cancel/revert functionality
- Remove standalone LanguageSwitcher component
- Improve initial language detection logic (localStorage -> browser -> default)
- Add proper i18n keys for language settings UI text
* feat: integrate i18next for internationalization support
- Added i18next and react-i18next dependencies for localization.
- Updated various components to utilize translation functions for user-facing text.
- Enhanced user experience by providing multilingual support across the application.
* feat: improve i18n implementation with better translations and accessibility
- Add proper i18n keys for language switcher tooltips and aria-labels
- Replace hardcoded Chinese console error messages with i18n keys
- Add missing translation keys for new UI elements
- Improve accessibility with proper aria-label attributes
---------
Co-authored-by: Jason <farion1231@gmail.com>
- refactor(settings): remove the VS Code auto-sync toggle from Settings UI
- feat(provider-list): enable auto-sync after "Apply to VS Code"; disable after "Remove"
- chore(prettier): run Prettier on changed files
- verify: typecheck and renderer build pass
- Files
- added: src/hooks/useVSCodeAutoSync.ts
- modified: src/App.tsx
- modified: src/components/ProviderList.tsx
- modified: src/components/SettingsModal.tsx
- Notes
- Auto-sync now defaults to enabled for new users (stored in localStorage; existing saved state is respected).
- No settings toggle is shown; manual Apply/Remove in the list still works as before.
- refactor(ProviderList): use shared base_url helpers
- refactor(App): reuse shared base_url helpers for VS Code sync
- fix(auto-sync): global shared VS Code auto-apply state (localStorage + event broadcast)
- feat(tray): auto-apply to VS Code on Codex provider-switched when enabled
- behavior: manual Apply enables auto-sync; manual Remove disables; official providers clear managed keys only
- chore(typecheck): pass pnpm typecheck
- Extract syncCodexToVSCode as a standalone function for better code organization
- Fix VS Code button state not updating after provider switch
- Add loadProviders() call after sync to trigger UI state refresh
- Improve error handling and variable naming
- feat(tauri): Add commands to read/write VS Code settings.json with cross-variant detection (Code/Insiders/VSCodium/OSS)
- fix(vscode): Use top-level keys “chatgpt.apiBase” and “chatgpt.config.preferred_auth_method”
- fix(vscode): Handle empty settings.json (skip deletes, direct write) to avoid “Can not delete in empty document”
- fix(windows): Make atomic writes robust by removing target before rename
- ui(provider-list): Improve error surfacing when applying/removing
- chore(types): Extend window.api typings and tauri-api wrappers for VS Code commands
- deps: Add jsonc-parser
- Move extractErrorMessage function from App.tsx to utils/errorUtils.ts
- Improve code organization and reusability
- Enhance error notification with dynamic message extraction and timeout
- Make "CC Switch" title clickable link to GitHub repository
- Remove separate GitHub icon for cleaner design
- Add hover effects for better user interaction
- Update repository URL to farion1231/cc-switch
- Convert layout to flexbox with fixed header and scrollable content area
- Use overflow-y-scroll to always show scrollbar track
- Prevents content width changes when switching between apps
- Ensures consistent 12px spacing between header and content
- Add useDarkMode hook for managing theme state and persistence
- Integrate dark mode toggle button in app header
- Update all components with dark variant styles using Tailwind v4
- Create centralized style utilities for consistent theming
- Support system color scheme preference as fallback
- Store user preference in localStorage for persistence
- Replace all CSS custom properties with Tailwind utility classes
- Add tailwind.config.js with custom color palette matching Linear design
- Reduce index.css from 89 to 37 lines (58% reduction)
- Maintain consistent visual appearance with semantic color usage
- Update all components to use Tailwind classes instead of CSS variables
Remove the configuration file path information section from the main page footer, including:
- configStatus state and related functions
- loadConfigStatus function
- handleOpenConfigFolder function
- UI component showing config file path and folder open button
This simplifies the interface while preserving all core functionality.
- Add createdAt timestamp field to Provider interface
- Implement sorting logic: old providers without timestamp first, then by creation time
- Providers without timestamps are sorted alphabetically by name
- New providers are automatically timestamped on creation
- Add settings icon button next to app title
- Create SettingsModal component with:
- Show in Dock option (macOS)
- Version info and check for updates button
- Config file location with open folder button
- Add settings-related APIs in tauri-api
- Update type definitions for new API methods
- Links use primary color; removed leading icon
- Show API address when website is missing; use secondary text color, non-monospace
- Parse base_url from Codex TOML; change fallback copy to "未配置官网地址"
- Use primary color for the top-left header title
- Clean up unused imports
Affected files:
- src/components/ProviderList.tsx
- src/App.tsx
* feat: refactor ProviderForm component with new subcomponents
- Introduced PresetSelector, ApiKeyInput, ClaudeConfigEditor, and CodexConfigEditor for improved modularity and readability.
- Simplified preset selection logic for both Claude and Codex configurations.
- Enhanced API Key input handling with dedicated components for better user experience.
- Removed redundant code and improved state management in the ProviderForm component.
* feat: add Kimi model selection to ProviderForm component
- Introduced KimiModelSelector for enhanced model configuration options.
- Implemented state management for Kimi model selection, including initialization and updates based on preset selection.
- Improved user experience by conditionally displaying the Kimi model selector based on the selected preset.
- Refactored related logic to ensure proper handling of Kimi-specific settings in the ProviderForm.
* feat: enhance API Key input and model selection in ProviderForm
- Added toggle functionality to show/hide API Key in ApiKeyInput component for improved user experience.
- Updated placeholder text in ProviderForm to provide clearer instructions based on the selected preset.
- Enhanced KimiModelSelector to display a more informative message when API Key is not provided.
- Refactored provider presets to remove hardcoded API Key values for better security practices.
* fix(kimi): optimize debounce implementation in model selector
- Fix initial state: use empty string instead of apiKey.trim()
- Refactor fetchModels to fetchModelsWithKey with explicit key parameter
- Ensure consistent behavior between auto-fetch and manual refresh
- Eliminate mental overhead from optional parameter fallback logic
* fix(api-key): remove custom masking logic, use native password input
- Remove getDisplayValue function with custom star masking
- Use native browser password input behavior for better UX consistency
- Simplify component logic while maintaining show/hide toggle functionality
* chore: format code with prettier
- Apply consistent code formatting across all TypeScript files
- Fix indentation and spacing according to project style guide
---------
Co-authored-by: Jason <farion1231@gmail.com>
- App: update auto-import message to '默认供应商'
- README: clarify default import only when providers are empty
- Plan doc: replace 'current entry' wording with current pointer (manager.current)
- Migration: name live-imported item 'default' instead of 'current'
