Files
cc-switch/src/i18n/locales/en.json

782 lines
34 KiB
JSON
Raw Normal View History

{
"app": {
"title": "CC Switch",
"description": "All-in-One Assistant for Claude Code, Codex & Gemini CLI"
},
"common": {
"add": "Add",
"edit": "Edit",
"delete": "Delete",
"save": "Save",
"saving": "Saving...",
"cancel": "Cancel",
"confirm": "Confirm",
"close": "Close",
"done": "Done",
"settings": "Settings",
"about": "About",
"version": "Version",
"loading": "Loading...",
"success": "Success",
"error": "Error",
"unknown": "Unknown",
"enterValidValue": "Please enter a valid value",
"clear": "Clear",
"toggleTheme": "Toggle theme",
"format": "Format",
"formatSuccess": "Formatted successfully",
"formatError": "Format failed: {{error}}",
Feat/claude skills management (#237) * feat(skills): add Claude Skills management feature Implement complete Skills management system with repository discovery, installation, and lifecycle management capabilities. Backend: - Add SkillService with GitHub integration and installation logic - Implement skill commands (list, install, uninstall, check updates) - Support multiple skill repositories with caching Frontend: - Add Skills management page with repository browser - Create SkillCard and RepoManager components - Add badge, card, table UI components - Integrate Skills API with Tauri commands Files: 10 files changed, 1488 insertions(+) * feat(skills): integrate Skills feature into application Integrate Skills management feature with complete dependency updates, configuration structure extensions, and internationalization support. Dependencies: - Add @radix-ui/react-visually-hidden for accessibility - Add anyhow, zip, serde_yaml, tempfile for Skills backend - Enable chrono serde feature for timestamp serialization Backend Integration: - Extend MultiAppConfig with SkillStore field - Implement skills.json migration from legacy location - Register SkillService and skill commands in main app - Export skill module in commands and services Frontend Integration: - Add Skills page route and dialog in App - Integrate Skills UI with main navigation Internationalization: - Add complete Chinese translations for Skills UI - Add complete English translations for Skills UI Code Quality: - Remove redundant blank lines in gemini_mcp.rs - Format log statements in mcp.rs Tests: - Update import_export_sync tests for SkillStore - Update mcp_commands tests for new structure Files: 16 files changed, 540 insertions(+), 39 deletions(-) * style(skills): improve SkillsPage typography and spacing Optimize visual hierarchy and readability of Skills page: - Reduce title size from 2xl to lg with tighter tracking - Improve description spacing and color contrast - Enhance empty state with better text hierarchy - Use explicit gray colors for better dark mode support * feat(skills): support custom subdirectory path for skill scanning Add optional skillsPath field to SkillRepo to enable scanning skills from subdirectories (e.g., "skills/") instead of repository root. Changes: - Backend: Add skillsPath field with subdirectory scanning logic - Frontend: Add skillsPath input field and display in repo list - Presets: Add cexll/myclaude repo with skills/ subdirectory - Code quality: Fix clippy warnings (dedup logic, string formatting) Backward compatible: skillsPath is optional, defaults to root scanning. * refactor(skills): improve repo manager dialog layout Optimize dialog structure with fixed header and scrollable content: - Add flexbox layout with fixed header and scrollable body - Remove outer border wrapper for cleaner appearance - Match SkillsPage design pattern for consistency - Improve UX with better content hierarchy
2025-11-18 22:05:54 +08:00
"copy": "Copy",
Refactor/UI (#273) * feat(components): add reusable full-screen panel components Add new full-screen panel components to support the UI refactoring: - FullScreenPanel: Reusable full-screen layout component with header, content area, and optional footer. Provides consistent layout for settings, prompts, and other full-screen views. - PromptFormPanel: Dedicated panel for creating and editing prompts with markdown preview support. Features real-time validation and integrated save/cancel actions. - AgentsPanel: Panel component for managing agent configurations. Provides a consistent interface for agent CRUD operations. - RepoManagerPanel: Full-featured repository manager panel for Skills. Supports repository listing, addition, deletion, and configuration management with integrated validation. These components establish the foundation for the upcoming settings page migration from dialog-based to full-screen layout. * refactor(settings): migrate from dialog to full-screen page layout Complete migration of settings from modal dialog to dedicated full-screen page, improving UX and providing more space for configuration options. Changes: - Remove SettingsDialog component (legacy modal-based interface) - Add SettingsPage component with full-screen layout using FullScreenPanel - Refactor App.tsx routing to support dedicated settings page * Add settings route handler * Update navigation logic from dialog-based to page-based * Integrate with existing app switcher and provider management - Update ImportExportSection to work with new page layout * Improve spacing and layout for better readability * Enhanced error handling and user feedback * Better integration with page-level actions - Enhance useSettings hook to support page-based workflow * Add navigation state management * Improve settings persistence logic * Better error boundary handling Benefits: - More intuitive navigation with dedicated settings page - Better use of screen space for complex configurations - Improved accessibility with clearer visual hierarchy - Consistent with modern desktop application patterns - Easier to extend with new settings sections This change is part of the larger UI refactoring initiative to modernize the application interface and improve user experience. * refactor(forms): simplify and modernize form components Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance. * style(ui): modernize component layouts and visual design Update UI components with improved layouts, visual hierarchy, and modern design patterns for better user experience. Navigation & Brand Components: - AppSwitcher * Enhanced visual design with better spacing * Improved active state indicators * Smoother transitions and hover effects * Better mobile responsiveness - BrandIcons * Optimized icon rendering performance * Added support for more provider icons * Improved SVG handling and fallbacks * Better scaling across different screen sizes Editor Components: - JsonEditor * Enhanced syntax highlighting * Better error visualization * Improved code formatting options * Added line numbers and code folding support - UsageScriptModal * Complete layout overhaul (1239 lines refactored) * Better script editor integration * Improved template selection UI * Enhanced preview and testing panels * Better error feedback and validation Provider Components: - ProviderCard * Redesigned card layout with modern aesthetics * Better information density and readability * Improved action buttons placement * Enhanced status indicators (active/inactive) - ProviderList * Better grid/list view layouts * Improved drag-and-drop visual feedback * Enhanced sorting indicators - ProviderActions * Streamlined action menu * Better icon consistency * Improved tooltips and accessibility Usage & Footer: - UsageFooter * Redesigned footer layout * Better quota visualization * Improved refresh controls * Enhanced error states Design System Updates: - dialog.tsx (shadcn/ui component) * Updated to latest design tokens * Better overlay animations * Improved focus management - index.css * Added 65 lines of global utility classes * New animation keyframes * Enhanced color variables for dark mode * Improved typography scale - tailwind.config.js * Extended theme with new design tokens * Added custom animations and transitions * New spacing and sizing utilities * Enhanced color palette Visual Improvements: - Consistent border radius across components - Unified shadow system for depth perception - Better color contrast for accessibility (WCAG AA) - Smoother animations and transitions - Improved dark mode support These changes create a more polished, modern interface while maintaining consistency with the application's design language. * chore: update dialogs, i18n and improve component integration Various functional updates and improvements across provider dialogs, MCP panel, skills page, and internationalization. Provider Dialogs: - AddProviderDialog * Simplified form state management * Improved preset selection workflow * Better validation error messages * Enhanced template variable handling - EditProviderDialog * Streamlined edit flow with better state synchronization * Improved handling of live config backfilling * Better error recovery for failed updates * Enhanced integration with parent components MCP & Skills: - UnifiedMcpPanel * Reduced complexity from 140+ to ~95 lines * Improved multi-app server management * Better server type detection (stdio/http) * Enhanced server status indicators * Cleaner integration with MCP form modal - SkillsPage * Simplified navigation and state management * Better integration with RepoManagerPanel * Improved error handling for repository operations * Enhanced loading states - SkillCard * Minor layout adjustments * Better action button placement Environment & Configuration: - EnvWarningBanner * Improved conflict detection messages * Better visual hierarchy for warnings * Enhanced dismissal behavior - tauri.conf.json * Updated build configuration * Added new window management options Internationalization: - en.json & zh.json * Added 17 new translation keys for new features * Updated existing keys for better clarity * Added translations for new settings page * Improved consistency across UI text Code Cleanup: - mutations.ts * Removed 14 lines of unused mutation definitions * Cleaned up deprecated query invalidation logic * Better type safety for mutation parameters Overall Impact: - Reduced total lines by 51 (-10% in affected files) - Improved component integration and data flow - Better error handling and user feedback - Enhanced i18n coverage for new features These changes improve the overall polish and integration of various components while removing technical debt and unused code. * feat(backend): add auto-launch functionality Implement system auto-launch feature to allow CC-Switch to start automatically on system boot, improving user convenience. Backend Implementation: - auto_launch.rs: New module for auto-launch management * Cross-platform support using auto-launch crate * Enable/disable auto-launch with system integration * Proper error handling for permission issues * Platform-specific implementations (macOS/Windows/Linux) Command Layer: - Add get_auto_launch command to check current status - Add set_auto_launch command to toggle auto-start - Integrate commands with settings API Settings Integration: - Extend Settings struct with auto_launch field - Persist auto-launch preference in settings store - Automatic state synchronization on app startup Dependencies: - Add auto-launch ^0.5.0 to Cargo.toml - Update Cargo.lock with new dependency tree Technical Details: - Uses platform-specific auto-launch mechanisms: * macOS: Login Items via LaunchServices * Windows: Registry Run key * Linux: XDG autostart desktop files - Handles edge cases like permission denials gracefully - Maintains settings consistency across app restarts This feature enables users to have CC-Switch readily available after system boot without manual intervention, particularly useful for users who frequently switch between API providers. * refactor(settings): enhance settings page with auto-launch integration Complete refactoring of settings page architecture to integrate auto-launch feature and improve overall settings management workflow. SettingsPage Component: - Integrate auto-launch toggle with WindowSettings section - Improve layout and spacing for better visual hierarchy - Enhanced error handling for settings operations - Better loading states during settings updates - Improved accessibility with proper ARIA labels WindowSettings Component: - Add auto-launch switch with real-time status - Integrate with backend auto-launch commands - Proper error feedback for permission issues - Visual indicators for current auto-launch state - Tooltip guidance for auto-launch functionality useSettings Hook (Major Refactoring): - Complete rewrite reducing complexity by ~30% - Better separation of concerns with dedicated handlers - Improved state management using React Query - Enhanced auto-launch state synchronization * Fetch auto-launch status on mount * Real-time updates on toggle * Proper error recovery - Optimized re-renders with better memoization - Cleaner API for component integration - Better TypeScript type safety Settings API: - Add getAutoLaunch() method - Add setAutoLaunch(enabled: boolean) method - Type-safe Tauri command invocations - Proper error propagation to UI layer Architecture Improvements: - Reduced hook complexity from 197 to ~140 effective lines - Eliminated redundant state management logic - Better error boundaries and fallback handling - Improved testability with clearer separation User Experience Enhancements: - Instant visual feedback on auto-launch toggle - Clear error messages for permission issues - Loading indicators during async operations - Consistent behavior across all platforms This refactoring provides a solid foundation for future settings additions while maintaining code quality and user experience. * refactor(ui): optimize FullScreenPanel, Dialog and App routing Comprehensive refactoring of core UI components to improve code quality, maintainability, and user experience. FullScreenPanel Component: - Enhanced props interface with better TypeScript types - Improved layout flexibility with customizable padding - Better header/footer composition patterns - Enhanced scroll behavior for long content - Added support for custom actions in header - Improved responsive design for different screen sizes - Better integration with parent components - Cleaner prop drilling with context where appropriate Dialog Component (shadcn/ui): - Updated to latest component patterns - Improved animation timing and easing - Better focus trap management - Enhanced overlay styling with backdrop blur - Improved accessibility (ARIA labels, keyboard navigation) - Better close button positioning and styling - Enhanced mobile responsiveness - Cleaner composition with DialogHeader/Footer App Component Routing: - Refactored routing logic for better clarity - Improved state management for navigation - Better integration with settings page - Enhanced error boundary handling - Cleaner separation of layout concerns - Improved provider context propagation - Better handling of deep links - Optimized re-renders with React.memo where appropriate Code Quality Improvements: - Reduced prop drilling with better component composition - Improved TypeScript type safety - Better separation of concerns - Enhanced code readability with clearer naming - Eliminated redundant logic Performance Optimizations: - Reduced unnecessary re-renders - Better memoization of callbacks - Optimized component tree structure - Improved event handler efficiency User Experience: - Smoother transitions and animations - Better visual feedback for interactions - Improved loading states - More consistent behavior across features These changes create a more maintainable and performant foundation for the application's UI layer while improving the overall user experience with smoother interactions and better visual polish. * refactor(features): modernize Skills, Prompts and Agents components Major refactoring of feature components to improve code quality, user experience, and maintainability. SkillsPage Component (299 lines refactored): - Complete rewrite of layout and state management - Better integration with RepoManagerPanel - Improved navigation between list and detail views - Enhanced error handling with user-friendly messages - Better loading states with skeleton screens - Optimized re-renders with proper memoization - Cleaner separation between list and form views - Improved skill card interactions - Better responsive design for different screen sizes RepoManagerPanel Component (370 lines refactored): - Streamlined repository management workflow - Enhanced form validation with real-time feedback - Improved repository list with better visual hierarchy - Better handling of git operations (clone, pull, delete) - Enhanced error recovery for network issues - Cleaner state management reducing complexity - Improved TypeScript type safety - Better integration with Skills backend API - Enhanced loading indicators for async operations PromptPanel Component (249 lines refactored): - Modernized layout with FullScreenPanel integration - Better separation between list and edit modes - Improved prompt card design with better readability - Enhanced search and filter functionality - Cleaner state management for editing workflow - Better integration with PromptFormPanel - Improved delete confirmation with safety checks - Enhanced keyboard navigation support PromptFormPanel Component (238 lines refactored): - Streamlined form layout and validation - Better markdown editor integration - Real-time preview with syntax highlighting - Improved validation error display - Enhanced save/cancel workflow - Better handling of large prompt content - Cleaner form state management - Improved accessibility features AgentsPanel Component (33 lines modified): - Minor layout adjustments for consistency - Better integration with FullScreenPanel - Improved placeholder states - Enhanced error boundaries Type Definitions (types.ts): - Added 10 new type definitions - Better type safety for Skills/Prompts/Agents - Enhanced interfaces for repository management - Improved typing for form validations Architecture Improvements: - Reduced component coupling - Better prop interfaces with explicit types - Improved error boundaries - Enhanced code reusability - Better testing surface User Experience Enhancements: - Smoother transitions between views - Better visual feedback for actions - Improved error messages - Enhanced loading states - More intuitive navigation flows - Better responsive layouts Code Quality: - Net reduction of 29 lines while adding features - Improved code organization - Better naming conventions - Enhanced documentation - Cleaner control flow These changes significantly improve the maintainability and user experience of core feature components while establishing consistent patterns for future development. * style(ui): refine component layouts and improve visual consistency Comprehensive UI polish across multiple components to enhance visual design, improve user experience, and maintain consistency. UsageScriptModal Component (1302 lines refactored): - Complete layout overhaul for better usability - Improved script editor with syntax highlighting - Better template selection interface - Enhanced test/preview panels with clearer separation - Improved error feedback and validation messages - Better modal sizing and responsiveness - Cleaner tab navigation between sections - Enhanced code formatting and readability - Improved loading states for async operations - Better integration with parent components MCP Components: - McpFormModal (42 lines): * Streamlined form layout * Better server type selection (stdio/http) * Improved field grouping and labels * Enhanced validation feedback - UnifiedMcpPanel (14 lines): * Minor layout adjustments * Better list item spacing * Improved server status indicators * Enhanced action button placement Provider Components: - ProviderCard (11 lines): * Refined card layout and spacing * Better visual hierarchy * Improved badge placement * Enhanced hover effects - ProviderList (5 lines): * Minor grid layout adjustments * Better drag-and-drop visual feedback - GeminiConfigSections (4 lines): * Field label alignment * Improved spacing consistency Editor & Footer Components: - JsonEditor (13 lines): * Better editor height management * Improved error display * Enhanced syntax highlighting - UsageFooter (10 lines): * Refined footer layout * Better quota display * Improved refresh button placement Settings & Environment: - ImportExportSection (24 lines): * Better button layout * Improved action grouping * Enhanced visual feedback - EnvWarningBanner (4 lines): * Refined alert styling * Better dismiss button placement Global Styles (index.css): - Added 11 lines of utility classes - Improved transition timing - Better focus indicators - Enhanced scrollbar styling - Refined spacing utilities Design Improvements: - Consistent spacing using design tokens - Unified color palette application - Better typography hierarchy - Improved shadow system for depth - Enhanced interactive states (hover, active, focus) - Better border radius consistency - Refined animation timings Accessibility: - Improved focus indicators - Better keyboard navigation - Enhanced screen reader support - Improved color contrast ratios Code Quality: - Net increase of 68 lines due to UsageScriptModal improvements - Better component organization - Cleaner style application - Reduced style duplication These visual refinements create a more polished and professional interface while maintaining excellent usability and accessibility standards across all components. * chore(i18n): add auto-launch translation keys Add translation keys for new auto-launch feature to support multi-language interface. Translation Keys Added: - autoLaunch: Label for auto-launch toggle - autoLaunchDescription: Explanation of auto-launch functionality - autoLaunchEnabled: Status message when enabled Languages Updated: - Chinese (zh.json): 简体中文翻译 - English (en.json): English translations The translations maintain consistency with existing terminology and provide clear, user-friendly descriptions of the auto-launch feature across both supported languages. * test: update test suites to match component refactoring Comprehensive test updates to align with recent component refactoring and new auto-launch functionality. Component Tests: - AddProviderDialog.test.tsx (10 lines): * Updated test cases for new dialog behavior * Enhanced mock data for preset selection * Improved assertions for validation - ImportExportSection.test.tsx (16 lines): * Updated for new settings page integration * Enhanced test coverage for error scenarios * Better mock state management - McpFormModal.test.tsx (60 lines): * Extensive updates for form refactoring * New test cases for multi-app selection * Enhanced validation testing * Better coverage of stdio/http server types - ProviderList.test.tsx (11 lines): * Updated for new card layout * Enhanced drag-and-drop testing - SettingsDialog.test.tsx (96 lines): * Major updates for SettingsPage migration * New test cases for auto-launch functionality * Enhanced integration test coverage * Better async operation testing Hook Tests: - useDirectorySettings.test.tsx (32 lines): * Updated for refactored hook logic * Enhanced test coverage for edge cases - useDragSort.test.tsx (36 lines): * Simplified test cases * Better mock implementation * Improved assertions - useImportExport tests (16 lines total): * Updated for new error handling * Enhanced test coverage - useMcpValidation.test.tsx (23 lines): * Updated validation test cases * Better coverage of error scenarios - useProviderActions.test.tsx (48 lines): * Extensive updates for hook refactoring * New test cases for provider operations * Enhanced mock data - useSettings.test.tsx (12 lines): * New test cases for auto-launch * Enhanced settings state testing * Better async operation coverage Integration Tests: - App.test.tsx (41 lines): * Updated for new routing logic * Enhanced navigation testing * Better component integration coverage - SettingsDialog.test.tsx (88 lines): * Complete rewrite for SettingsPage * New integration test scenarios * Enhanced user workflow testing Mock Infrastructure: - handlers.ts (117 lines): * Major updates for MSW handlers * New handlers for auto-launch commands * Enhanced error simulation * Better request/response mocking - state.ts (37 lines): * Updated mock state structure * New state for auto-launch * Enhanced state reset functionality - tauriMocks.ts (10 lines): * Updated mock implementations * Better type safety - server.ts & testQueryClient.ts: * Minor cleanup (2 lines removed) Test Infrastructure Improvements: - Better test isolation - Enhanced mock data consistency - Improved async operation testing - Better error scenario coverage - Enhanced integration test patterns Coverage Improvements: - Net increase of 195 lines of test code - Better coverage of edge cases - Enhanced error path testing - Improved integration test scenarios - Better mock infrastructure All tests now pass with the refactored components while maintaining comprehensive coverage of functionality and edge cases. * style(ui): improve window dragging and provider card styles * fix(skills): resolve third-party skills installation failure - Add skills_path field to Skill struct - Use skills_path to construct correct source path during installation - Fix installation for repos with custom skill subdirectories * feat(icon): add icon type system and intelligent inference logic Introduce a new icon system for provider customization: - Add IconMetadata and IconPreset interfaces in src/types/icon.ts - Define structure for icon name, display name, category, keywords - Support default color configuration per icon - Implement smart icon inference in src/config/iconInference.ts - Create iconMappings for 25+ AI providers and cloud platforms - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc. - inferIconForPreset(): match provider name to icon config - addIconsToPresets(): batch apply icons to preset arrays - Support fuzzy matching for flexible name recognition This foundation enables automatic icon assignment when users add providers, improving visual identification in the provider list. * feat(ui): add icon picker, color picker and provider icon components Implement comprehensive icon selection system for provider customization: ## New Components ### ProviderIcon (src/components/ProviderIcon.tsx) - Render SVG icons by name with automatic fallback - Display provider initials when icon not found - Support custom sizing via size prop - Use dangerouslySetInnerHTML for inline SVG rendering ### IconPicker (src/components/IconPicker.tsx) - Grid-based icon selection with visual preview - Real-time search filtering by name and keywords - Integration with icon metadata for display names - Responsive grid layout (6-10 columns based on screen) ### ColorPicker (src/components/ColorPicker.tsx) - 12 preset colors for quick selection - Native color input for custom color picking - Hex input field for precise color entry - Visual feedback for selected color state ## Icon Assets (src/icons/extracted/) - 38 high-quality SVG icons for AI providers and platforms - Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc. - Cloud platforms: AWS, Azure, Google Cloud, Cloudflare - Auto-generated index.ts with getIcon/hasIcon helpers - Metadata system with searchable keywords per icon ## Build Scripts - scripts/extract-icons.js: Extract icons from simple-icons - scripts/generate-icon-index.js: Generate TypeScript index file * feat(provider): integrate icon system into provider UI components Add icon customization support to provider management interface: ## Type System Updates ### Provider Interface (src/types.ts) - Add optional `icon` field for icon name (e.g., "openai", "anthropic") - Add optional `iconColor` field for hex color (e.g., "#00A67E") ### Form Schema (src/lib/schemas/provider.ts) - Extend providerSchema with icon and iconColor optional fields - Maintain backward compatibility with existing providers ## UI Components ### ProviderCard (src/components/providers/ProviderCard.tsx) - Display ProviderIcon alongside provider name - Add icon container with hover animation effect - Adjust layout spacing for icon placement - Update translate offsets for action buttons ### BasicFormFields (src/components/providers/forms/BasicFormFields.tsx) - Add icon preview section showing current selection - Implement fullscreen icon picker dialog - Auto-apply default color from icon metadata on selection - Display provider name and icon status in preview ### AddProviderDialog & EditProviderDialog - Pass icon fields through form submission - Preserve icon data during provider updates This enables users to visually distinguish providers in the list with custom icons, improving UX for multi-provider setups. * feat(backend): add icon fields to Provider model and default mappings Extend Rust backend to support provider icon customization: ## Provider Model (src-tauri/src/provider.rs) - Add `icon: Option<String>` field for icon name - Add `icon_color: Option<String>` field for hex color - Use serde rename `iconColor` for frontend compatibility - Apply skip_serializing_if for clean JSON output - Update Provider::new() to initialize icon fields as None ## Provider Defaults (src-tauri/src/provider_defaults.rs) [NEW] - Define ProviderIcon struct with name and color fields - Create DEFAULT_PROVIDER_ICONS static HashMap with 23 providers: - AI providers: OpenAI, Anthropic, Claude, Google, Gemini, DeepSeek, Kimi, Moonshot, Zhipu, MiniMax, Baidu, Alibaba, Tencent, Meta, Microsoft, Cohere, Perplexity, Mistral, HuggingFace - Cloud platforms: AWS, Azure, Huawei, Cloudflare - Implement infer_provider_icon() with exact and fuzzy matching - Add unit tests for matching logic (exact, fuzzy, case-insensitive) ## Deep Link Support (src-tauri/src/deeplink.rs) - Initialize icon fields when creating Provider from deep link import ## Module Registration (src-tauri/src/lib.rs) - Register provider_defaults module ## Dependencies (Cargo.toml) - Add once_cell for lazy static initialization This backend support enables icon persistence and future features like auto-icon inference during provider creation. * chore(i18n): add translations for icon picker and provider icon Add Chinese and English translations for icon customization feature: ## Icon Picker (iconPicker) - search: "Search Icons" / "搜索图标" - searchPlaceholder: "Enter icon name..." / "输入图标名称..." - noResults: "No matching icons found" / "未找到匹配的图标" - category.aiProvider: "AI Providers" / "AI 服务商" - category.cloud: "Cloud Platforms" / "云平台" - category.tool: "Dev Tools" / "开发工具" - category.other: "Other" / "其他" ## Provider Icon (providerIcon) - label: "Icon" / "图标" - colorLabel: "Icon Color" / "图标颜色" - selectIcon: "Select Icon" / "选择图标" - preview: "Preview" / "预览" These translations support the new icon picker UI components and provider form icon selection interface. * style(ui): refine header layout and AppSwitcher color scheme Improve application header and component styling: ## App.tsx Header Layout - Wrap title and settings button in flex container with gap - Add vertical divider between title and settings icon - Apply responsive padding (pl-1 sm:pl-2) - Reformat JSX for better readability (prettier) - Fix string template formatting in className ## AppSwitcher Color Update - Change Claude tab gradient from orange/amber to teal/emerald/green - Update shadow color to match new teal theme - Change hover color from orange-500 to teal-500 - Align visual style with emerald/teal brand colors ## Dialog Component Cleanup - Remove default close button (X icon) from DialogContent - Allow parent components to control close button placement - Remove unused lucide-react X import ## index.css Header Border - Add top border (2px solid) to glass-header - Apply to both light and dark mode variants - Improve visual separation of header area These changes enhance visual consistency and modernize the UI appearance with a cohesive teal color scheme. * chore(deps): add icon library and update preset configurations Add dependencies and utility scripts for icon system: ## Dependencies (package.json) - Add @lobehub/icons-static-svg@1.73.0 - High-quality SVG icon library for AI providers - Source for extracted icons in src/icons/extracted/ - Update pnpm-lock.yaml accordingly ## Provider Preset Updates (src/config/claudeProviderPresets.ts) - Add optional `icon` and `iconColor` fields to ProviderPreset interface - Apply to Anthropic Official preset as example: - icon: "anthropic" - iconColor: "#D4915D" - Future presets can include default icon configurations ## Utility Script (scripts/filter-icons.js) [NEW] - Helper script for filtering and managing icon assets - Supports icon discovery and validation workflow - Complements extract-icons.js and generate-icon-index.js This completes the icon system infrastructure, providing all necessary tools and dependencies for icon customization. * refactor(ui): simplify AppSwitcher styles and migrate to local SVG icons - Replace complex gradient animations with clean, minimal tab design - Migrate from @lobehub/icons CDN to local SVG assets for better reliability - Fix clippy warning in error.rs (use inline format args) - Improve code formatting in skill service and commands - Reduce CSS complexity in AppSwitcher component (removed blur effects and gradients) - Update BrandIcons to use imported local SVG files instead of dynamic image loading This improves performance, reduces external dependencies, and provides a cleaner UI experience. * style(ui): hide scrollbars across all browsers and optimize form layout - Hide scrollbars globally with cross-browser support: * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none } * Firefox: scrollbar-width: none * IE 10+: -ms-overflow-style: none - Remove custom scrollbar styling (width, colors, hover states) - Reorganize BasicFormFields layout: * Move icon picker to top center as a clickable preview (80x80) * Change name and notes fields to horizontal grid layout (md:grid-cols-2) * Remove icon preview section from bottom * Improve visual hierarchy and space efficiency This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality. * refactor(layout): standardize max-width to 60rem and optimize padding structure - Unify container max-width across components: * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list * Replace max-w-5xl with max-w-[60rem] in PromptPanel * Move padding from header element to inner container for consistent spacing - Optimize padding hierarchy: * Remove px-6 from header element, add to inner header container * Remove px-6 from main element, keep it only in provider list container * Consolidate PromptPanel padding: move px-6 from nested divs to outer container * Remove redundant pl-1 sm:pl-2 from logo/title area - Benefits: * Consistent 60rem max-width provides better readability on wide screens * Simplified padding structure reduces CSS complexity * Cleaner responsive behavior with unified spacing rules This creates a more maintainable and visually consistent layout system. * refactor(ui): unify layout system with 60rem max-width and consistent spacing - Standardize container max-width across all panels: * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem] * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel * Ensures consistent reading width and visual balance on wide screens - Optimize padding hierarchy and structure: * Move px-6 from parent elements to content containers * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer * Add border separators (border-t/border-b) to header and footer sections * Consolidate nested padding in MCP, Skills, and Prompts panels * Remove redundant padding layers for cleaner CSS - Simplify component styling: * MCP list items: Replace card-based layout with modern group-based design * Remove unnecessary wrapper divs and flatten DOM structure * Update card hover effects with smooth transitions * Simplify icon selection dialog (remove description text in BasicFormFields) - Benefits: * Consistent 60rem max-width provides optimal readability * Unified spacing rules reduce maintenance complexity * Cleaner component hierarchy improves performance * Better responsive behavior across different screen sizes * More cohesive visual design language throughout the app This creates a maintainable, scalable design system foundation. * feat(deeplink): add Claude model fields support and enhance import dialog - Add Claude-specific model field support in deeplink import: * Support model (ANTHROPIC_MODEL) - general default model * Support haikuModel (ANTHROPIC_DEFAULT_HAIKU_MODEL) * Support sonnetModel (ANTHROPIC_DEFAULT_SONNET_MODEL) * Support opusModel (ANTHROPIC_DEFAULT_OPUS_MODEL) * Backend: Update DeepLinkImportRequest struct to include optional model fields * Frontend: Add TypeScript type definitions for new model parameters - Enhance deeplink demo page (deplink.html): * Add 5 new Claude configuration examples showcasing different model setups * Add parameter documentation with required/optional tags * Include basic config (no models), single model, complete 4-model, partial models, and third-party provider examples * Improve visual design with param-list component and color-coded badges * Add detailed descriptions for each configuration scenario - Redesign DeepLinkImportDialog layout: * Switch from 3-column to compact 2-column grid layout * Reduce dialog width from 500px to 650px for better content display * Add dedicated section for Claude model configurations with blue highlight box * Use uppercase labels and smaller text for more information density * Add truncation and tooltips for long URLs * Improve visual hierarchy with spacing and grouping * Increase z-index to 9999 to ensure dialog appears on top - Minor UI refinements: * Update App.tsx layout adjustments * Optimize McpFormModal styling * Refine ProviderCard and BasicFormFields components This enables users to import Claude providers with precise model configurations via deeplink. * feat(deeplink): add config file support for deeplink import Support importing provider configuration from embedded or remote config files. - Add base64 dependency for config content encoding - Support config, configFormat, and configUrl parameters - Make homepage/endpoint/apiKey optional when config is provided - Add config parsing and merging logic * feat(deeplink): enhance dialog with config file preview Add config file parsing and preview in deep link import dialog. - Support Base64 encoded config display - Add config file source indicator (embedded/remote) - Parse and display config fields by app type (Claude/Codex/Gemini) - Mask sensitive values in config preview - Improve dialog layout and content organization * refactor(ui): unify dialog styles and improve layout consistency Standardize dialog and panel components across the application. - Update dialog background to use semantic color tokens - Adjust FullScreenPanel max-width to 56rem for better alignment - Add drag region and prevent body scroll in full-screen panels - Optimize button sizes and spacing in panel headers - Apply consistent styling to all dialog-based components * i18n: add deeplink config preview translations Add missing translation keys for config file preview feature. - Add configSource, configEmbedded, configRemote labels - Add configDetails and configUrl display strings - Support both Chinese and English versions * feat(deeplink): enhance test page with v3.8 config file examples Improve deeplink test page with comprehensive config file import examples. - Add version badge for v3.8 features - Add copy-to-clipboard functionality for all deep links - Add Claude config file import examples (embedded/remote) - Add Codex config file import examples (auth.json + config.toml) - Add Gemini config file import examples (.env format) - Add config generator tool for easy testing - Update UI with better styling and layout * feat(settings): add autoSaveSettings for lightweight auto-save Add optimized auto-save function for General tab settings. - Add autoSaveSettings method for non-destructive auto-save - Only trigger system APIs when values actually change - Avoid unnecessary auto-launch and plugin config updates - Update tests to cover new functionality * refactor(settings): simplify settings page layout and auto-save Reorganize settings page structure and integrate autoSaveSettings. - Move save button inline within Advanced tab content - Remove sticky footer for cleaner layout - Use autoSaveSettings for General tab settings - Simplify dialog close behavior - Refactor ImportExportSection layout * style(providers): optimize card layout and action button sizes Improve provider card visual density and action buttons. - Reduce icon button sizes for compact layout - Adjust drag handle and icon sizes - Tighten spacing between action buttons - Update hover translate values for better alignment * refactor(mcp): improve form modal layout with adaptive height editor Restructure MCP form modal for better space utilization. - Split form into upper form fields and lower JSON editor sections - Add full-height mode support for JsonEditor component - Use flex layout for editor to fill available space - Update PromptFormPanel to use full-height editor - Fix locale text formatting * style: unify list item styles with semantic colors Apply consistent styling to list items across components. - Replace hardcoded colors with semantic tokens in MCP and Prompt list items - Add glass effect container to EndpointSpeedTest panel - Format code for better readability * style: format template literals for better readability Improve code formatting for conditional className expressions. - Break long template literals across multiple lines - Maintain consistent formatting in MCP form and endpoint test components * feat(deeplink): add config merge command for preview Expose config merging functionality to frontend for preview. - Add merge_deeplink_config Tauri command - Make parse_and_merge_config public for reuse - Enable frontend to display complete config before import * feat(deeplink): merge and display config in import dialog Enhance import dialog to fetch and display complete config. - Call mergeDeeplinkConfig API when config is present - Add UTF-8 base64 decoding support for config content - Add scrollable content area with custom scrollbar styling - Show complete configuration before user confirms import * i18n: add config merge error message Add translation for config file merge error handling. * style(deeplink): format test page HTML for better readability Improve HTML formatting in deeplink test page. - Format multiline attributes for better readability - Add consistent indentation to nested elements - Break long lines in buttons and links * refactor(usage): improve footer layout with two-row design Reorganize usage footer for better readability and space efficiency. - Split into two rows: update time + refresh button (row 1), usage stats (row 2) - Move refresh button to top row next to update time - Remove card background for cleaner look - Add fallback text when never updated - Improve spacing and alignment - Format template literals for consistency
2025-11-22 19:18:35 +08:00
"view": "View",
"back": "Back"
},
"apiKeyInput": {
"placeholder": "Enter API Key",
"show": "Show API Key",
"hide": "Hide API Key"
},
"jsonEditor": {
"mustBeObject": "Configuration must be a JSON object, not an array or other type",
"invalidJson": "Invalid JSON format"
},
"claudeConfig": {
"configLabel": "Claude Code settings.json (JSON) *",
"writeCommonConfig": "Write Common Config",
"editCommonConfig": "Edit Common Config",
"editCommonConfigTitle": "Edit Common Config Snippet",
"commonConfigHint": "This snippet will be merged into settings.json when 'Write Common Config' is checked",
"fullSettingsHint": "Full Claude Code settings.json content"
},
"header": {
"viewOnGithub": "View on GitHub",
"toggleDarkMode": "Switch to Dark Mode",
"toggleLightMode": "Switch to Light Mode",
"addProvider": "Add Provider",
"switchToChinese": "Switch to Chinese",
"switchToEnglish": "Switch to English",
"enterEditMode": "Enter Edit Mode",
"exitEditMode": "Exit Edit Mode"
},
"provider": {
"noProviders": "No providers added yet",
"noProvidersDescription": "Click the \"Add Provider\" button in the top right to configure your first API provider",
"currentlyUsing": "Currently Using",
"enable": "Enable",
"inUse": "In Use",
"editProvider": "Edit Provider",
"editProviderHint": "Configuration will be applied to the current provider immediately after update.",
"deleteProvider": "Delete Provider",
"addNewProvider": "Add New Provider",
"addClaudeProvider": "Add Claude Code Provider",
"addCodexProvider": "Add Codex Provider",
feat(gemini): add Gemini provider integration (#202) * feat(gemini): add Gemini provider integration - Add gemini_config.rs module for .env file parsing - Extend AppType enum to support Gemini - Implement GeminiConfigEditor and GeminiFormFields components - Add GeminiIcon with standardized 1024x1024 viewBox - Add Gemini provider presets configuration - Update i18n translations for Gemini support - Extend ProviderService and McpService for Gemini * fix(gemini): resolve TypeScript errors, add i18n support, and fix MCP logic **Critical Fixes:** - Fix TS2741 errors in tests/msw/state.ts by adding missing Gemini type definitions - Fix ProviderCard.extractApiUrl to support GOOGLE_GEMINI_BASE_URL display - Add missing apps.gemini i18n keys (zh/en) for proper app name display - Fix MCP service Gemini cross-app duplication logic to prevent self-copy **Technical Details:** - tests/msw/state.ts: Add gemini default providers, current ID, and MCP config - ProviderCard.tsx: Check both ANTHROPIC_BASE_URL and GOOGLE_GEMINI_BASE_URL - services/mcp.rs: Skip Gemini in sync_other_side logic with unreachable!() guards - Run pnpm format to auto-fix code style issues **Verification:** - ✅ pnpm typecheck passes - ✅ pnpm format completed * feat(gemini): enhance authentication and config parsing - Add strict and lenient .env parsing modes - Implement PackyCode partner authentication detection - Support Google OAuth official authentication - Auto-configure security.auth.selectedType for PackyCode - Add comprehensive test coverage for all auth types - Update i18n for OAuth hints and Gemini config --------- Co-authored-by: Jason <farion1231@gmail.com>
2025-11-12 10:47:34 +08:00
"addGeminiProvider": "Add Gemini Provider",
"addProviderHint": "Fill in the information to quickly switch providers in the list.",
"editClaudeProvider": "Edit Claude Code Provider",
"editCodexProvider": "Edit Codex Provider",
"configError": "Configuration Error",
"notConfigured": "Not configured for official website",
"applyToClaudePlugin": "Apply to Claude plugin",
"removeFromClaudePlugin": "Remove from Claude plugin",
"dragToReorder": "Drag to reorder",
"dragHandle": "Drag to reorder",
"duplicate": "Duplicate",
"sortUpdateFailed": "Failed to update sort order",
"configureUsage": "Configure usage query",
"name": "Provider Name",
"namePlaceholder": "e.g., Claude Official",
"websiteUrl": "Website URL",
feat: add model configuration support and fix Gemini deeplink bug (#251) * 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(-)
2025-11-19 09:03:18 +08:00
"notes": "Notes",
"notesPlaceholder": "e.g., Company dedicated account",
"configJson": "Config JSON",
"writeCommonConfig": "Write common config",
"editCommonConfigButton": "Edit common config",
"configJsonHint": "Please fill in complete Claude Code configuration",
"editCommonConfigTitle": "Edit common config snippet",
"editCommonConfigHint": "Common config snippet will be merged into all providers that enable it",
"addProvider": "Add Provider",
"sortUpdated": "Sort order updated",
"usageSaved": "Usage query configuration saved",
feat(gemini): add Gemini provider integration (#202) * feat(gemini): add Gemini provider integration - Add gemini_config.rs module for .env file parsing - Extend AppType enum to support Gemini - Implement GeminiConfigEditor and GeminiFormFields components - Add GeminiIcon with standardized 1024x1024 viewBox - Add Gemini provider presets configuration - Update i18n translations for Gemini support - Extend ProviderService and McpService for Gemini * fix(gemini): resolve TypeScript errors, add i18n support, and fix MCP logic **Critical Fixes:** - Fix TS2741 errors in tests/msw/state.ts by adding missing Gemini type definitions - Fix ProviderCard.extractApiUrl to support GOOGLE_GEMINI_BASE_URL display - Add missing apps.gemini i18n keys (zh/en) for proper app name display - Fix MCP service Gemini cross-app duplication logic to prevent self-copy **Technical Details:** - tests/msw/state.ts: Add gemini default providers, current ID, and MCP config - ProviderCard.tsx: Check both ANTHROPIC_BASE_URL and GOOGLE_GEMINI_BASE_URL - services/mcp.rs: Skip Gemini in sync_other_side logic with unreachable!() guards - Run pnpm format to auto-fix code style issues **Verification:** - ✅ pnpm typecheck passes - ✅ pnpm format completed * feat(gemini): enhance authentication and config parsing - Add strict and lenient .env parsing modes - Implement PackyCode partner authentication detection - Support Google OAuth official authentication - Auto-configure security.auth.selectedType for PackyCode - Add comprehensive test coverage for all auth types - Update i18n for OAuth hints and Gemini config --------- Co-authored-by: Jason <farion1231@gmail.com>
2025-11-12 10:47:34 +08:00
"usageSaveFailed": "Failed to save usage query configuration",
"geminiConfig": "Gemini Configuration",
"geminiConfigHint": "Use .env format to configure Gemini",
"form": {
"gemini": {
"model": "Model",
"oauthTitle": "OAuth Authentication Mode",
"oauthHint": "Google official uses OAuth personal authentication, no need to fill in API Key. The browser will automatically open for login on first use.",
"apiKeyPlaceholder": "Enter Gemini API Key"
}
}
},
"notifications": {
"providerAdded": "Provider added",
"providerSaved": "Provider configuration saved",
"providerDeleted": "Provider deleted successfully",
"switchSuccess": "Switch successful! Please restart {{appName}} terminal to take effect",
"switchFailedTitle": "Switch failed",
"switchFailed": "Switch failed: {{error}}",
"autoImported": "Default provider created from existing configuration",
"addFailed": "Failed to add provider: {{error}}",
"saveFailed": "Save failed: {{error}}",
"saveFailedGeneric": "Save failed, please try again",
"appliedToClaudePlugin": "Applied to Claude plugin",
"removedFromClaudePlugin": "Removed from Claude plugin",
"syncClaudePluginFailed": "Sync Claude plugin failed",
"updateSuccess": "Provider updated successfully",
"updateFailed": "Failed to update provider: {{error}}",
"deleteSuccess": "Provider deleted",
"deleteFailed": "Failed to delete provider: {{error}}",
"settingsSaved": "Settings saved",
"settingsSaveFailed": "Failed to save settings: {{error}}"
},
"confirm": {
"deleteProvider": "Delete Provider",
"deleteProviderMessage": "Are you sure you want to delete provider \"{{name}}\"? This action cannot be undone."
},
"settings": {
"title": "Settings",
"general": "General",
"tabGeneral": "General",
"tabAdvanced": "Advanced",
"language": "Language",
"languageHint": "Preview interface language immediately after switching, takes effect permanently after saving.",
"theme": "Theme",
"themeHint": "Choose the appearance theme for the app, takes effect immediately.",
"themeLight": "Light",
"themeDark": "Dark",
"themeSystem": "System",
"importExport": "Import/Export Config",
"importExportHint": "Import or export CC Switch configuration for backup or migration.",
"exportConfig": "Export Config to File",
"selectConfigFile": "Select Config File",
"noFileSelected": "No configuration file selected.",
"import": "Import",
"importing": "Importing...",
"importSuccess": "Import Successful!",
"importFailed": "Import Failed",
"syncLiveFailed": "Imported, but failed to sync to the current provider. Please reselect the provider manually.",
"importPartialSuccess": "Config imported, but failed to sync to the current provider.",
"importPartialHint": "Please manually reselect the provider to refresh the live configuration.",
"configExported": "Config exported to:",
"exportFailed": "Export failed",
"selectFileFailed": "Failed to select file",
"configCorrupted": "Config file may be corrupted or invalid",
"backupId": "Backup ID",
"autoReload": "Data will refresh automatically in 2 seconds...",
"languageOptionChinese": "中文",
"languageOptionEnglish": "English",
"windowBehavior": "Window Behavior",
"windowBehaviorHint": "Configure window minimize and Claude plugin integration policies.",
Refactor/UI (#273) * feat(components): add reusable full-screen panel components Add new full-screen panel components to support the UI refactoring: - FullScreenPanel: Reusable full-screen layout component with header, content area, and optional footer. Provides consistent layout for settings, prompts, and other full-screen views. - PromptFormPanel: Dedicated panel for creating and editing prompts with markdown preview support. Features real-time validation and integrated save/cancel actions. - AgentsPanel: Panel component for managing agent configurations. Provides a consistent interface for agent CRUD operations. - RepoManagerPanel: Full-featured repository manager panel for Skills. Supports repository listing, addition, deletion, and configuration management with integrated validation. These components establish the foundation for the upcoming settings page migration from dialog-based to full-screen layout. * refactor(settings): migrate from dialog to full-screen page layout Complete migration of settings from modal dialog to dedicated full-screen page, improving UX and providing more space for configuration options. Changes: - Remove SettingsDialog component (legacy modal-based interface) - Add SettingsPage component with full-screen layout using FullScreenPanel - Refactor App.tsx routing to support dedicated settings page * Add settings route handler * Update navigation logic from dialog-based to page-based * Integrate with existing app switcher and provider management - Update ImportExportSection to work with new page layout * Improve spacing and layout for better readability * Enhanced error handling and user feedback * Better integration with page-level actions - Enhance useSettings hook to support page-based workflow * Add navigation state management * Improve settings persistence logic * Better error boundary handling Benefits: - More intuitive navigation with dedicated settings page - Better use of screen space for complex configurations - Improved accessibility with clearer visual hierarchy - Consistent with modern desktop application patterns - Easier to extend with new settings sections This change is part of the larger UI refactoring initiative to modernize the application interface and improve user experience. * refactor(forms): simplify and modernize form components Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance. * style(ui): modernize component layouts and visual design Update UI components with improved layouts, visual hierarchy, and modern design patterns for better user experience. Navigation & Brand Components: - AppSwitcher * Enhanced visual design with better spacing * Improved active state indicators * Smoother transitions and hover effects * Better mobile responsiveness - BrandIcons * Optimized icon rendering performance * Added support for more provider icons * Improved SVG handling and fallbacks * Better scaling across different screen sizes Editor Components: - JsonEditor * Enhanced syntax highlighting * Better error visualization * Improved code formatting options * Added line numbers and code folding support - UsageScriptModal * Complete layout overhaul (1239 lines refactored) * Better script editor integration * Improved template selection UI * Enhanced preview and testing panels * Better error feedback and validation Provider Components: - ProviderCard * Redesigned card layout with modern aesthetics * Better information density and readability * Improved action buttons placement * Enhanced status indicators (active/inactive) - ProviderList * Better grid/list view layouts * Improved drag-and-drop visual feedback * Enhanced sorting indicators - ProviderActions * Streamlined action menu * Better icon consistency * Improved tooltips and accessibility Usage & Footer: - UsageFooter * Redesigned footer layout * Better quota visualization * Improved refresh controls * Enhanced error states Design System Updates: - dialog.tsx (shadcn/ui component) * Updated to latest design tokens * Better overlay animations * Improved focus management - index.css * Added 65 lines of global utility classes * New animation keyframes * Enhanced color variables for dark mode * Improved typography scale - tailwind.config.js * Extended theme with new design tokens * Added custom animations and transitions * New spacing and sizing utilities * Enhanced color palette Visual Improvements: - Consistent border radius across components - Unified shadow system for depth perception - Better color contrast for accessibility (WCAG AA) - Smoother animations and transitions - Improved dark mode support These changes create a more polished, modern interface while maintaining consistency with the application's design language. * chore: update dialogs, i18n and improve component integration Various functional updates and improvements across provider dialogs, MCP panel, skills page, and internationalization. Provider Dialogs: - AddProviderDialog * Simplified form state management * Improved preset selection workflow * Better validation error messages * Enhanced template variable handling - EditProviderDialog * Streamlined edit flow with better state synchronization * Improved handling of live config backfilling * Better error recovery for failed updates * Enhanced integration with parent components MCP & Skills: - UnifiedMcpPanel * Reduced complexity from 140+ to ~95 lines * Improved multi-app server management * Better server type detection (stdio/http) * Enhanced server status indicators * Cleaner integration with MCP form modal - SkillsPage * Simplified navigation and state management * Better integration with RepoManagerPanel * Improved error handling for repository operations * Enhanced loading states - SkillCard * Minor layout adjustments * Better action button placement Environment & Configuration: - EnvWarningBanner * Improved conflict detection messages * Better visual hierarchy for warnings * Enhanced dismissal behavior - tauri.conf.json * Updated build configuration * Added new window management options Internationalization: - en.json & zh.json * Added 17 new translation keys for new features * Updated existing keys for better clarity * Added translations for new settings page * Improved consistency across UI text Code Cleanup: - mutations.ts * Removed 14 lines of unused mutation definitions * Cleaned up deprecated query invalidation logic * Better type safety for mutation parameters Overall Impact: - Reduced total lines by 51 (-10% in affected files) - Improved component integration and data flow - Better error handling and user feedback - Enhanced i18n coverage for new features These changes improve the overall polish and integration of various components while removing technical debt and unused code. * feat(backend): add auto-launch functionality Implement system auto-launch feature to allow CC-Switch to start automatically on system boot, improving user convenience. Backend Implementation: - auto_launch.rs: New module for auto-launch management * Cross-platform support using auto-launch crate * Enable/disable auto-launch with system integration * Proper error handling for permission issues * Platform-specific implementations (macOS/Windows/Linux) Command Layer: - Add get_auto_launch command to check current status - Add set_auto_launch command to toggle auto-start - Integrate commands with settings API Settings Integration: - Extend Settings struct with auto_launch field - Persist auto-launch preference in settings store - Automatic state synchronization on app startup Dependencies: - Add auto-launch ^0.5.0 to Cargo.toml - Update Cargo.lock with new dependency tree Technical Details: - Uses platform-specific auto-launch mechanisms: * macOS: Login Items via LaunchServices * Windows: Registry Run key * Linux: XDG autostart desktop files - Handles edge cases like permission denials gracefully - Maintains settings consistency across app restarts This feature enables users to have CC-Switch readily available after system boot without manual intervention, particularly useful for users who frequently switch between API providers. * refactor(settings): enhance settings page with auto-launch integration Complete refactoring of settings page architecture to integrate auto-launch feature and improve overall settings management workflow. SettingsPage Component: - Integrate auto-launch toggle with WindowSettings section - Improve layout and spacing for better visual hierarchy - Enhanced error handling for settings operations - Better loading states during settings updates - Improved accessibility with proper ARIA labels WindowSettings Component: - Add auto-launch switch with real-time status - Integrate with backend auto-launch commands - Proper error feedback for permission issues - Visual indicators for current auto-launch state - Tooltip guidance for auto-launch functionality useSettings Hook (Major Refactoring): - Complete rewrite reducing complexity by ~30% - Better separation of concerns with dedicated handlers - Improved state management using React Query - Enhanced auto-launch state synchronization * Fetch auto-launch status on mount * Real-time updates on toggle * Proper error recovery - Optimized re-renders with better memoization - Cleaner API for component integration - Better TypeScript type safety Settings API: - Add getAutoLaunch() method - Add setAutoLaunch(enabled: boolean) method - Type-safe Tauri command invocations - Proper error propagation to UI layer Architecture Improvements: - Reduced hook complexity from 197 to ~140 effective lines - Eliminated redundant state management logic - Better error boundaries and fallback handling - Improved testability with clearer separation User Experience Enhancements: - Instant visual feedback on auto-launch toggle - Clear error messages for permission issues - Loading indicators during async operations - Consistent behavior across all platforms This refactoring provides a solid foundation for future settings additions while maintaining code quality and user experience. * refactor(ui): optimize FullScreenPanel, Dialog and App routing Comprehensive refactoring of core UI components to improve code quality, maintainability, and user experience. FullScreenPanel Component: - Enhanced props interface with better TypeScript types - Improved layout flexibility with customizable padding - Better header/footer composition patterns - Enhanced scroll behavior for long content - Added support for custom actions in header - Improved responsive design for different screen sizes - Better integration with parent components - Cleaner prop drilling with context where appropriate Dialog Component (shadcn/ui): - Updated to latest component patterns - Improved animation timing and easing - Better focus trap management - Enhanced overlay styling with backdrop blur - Improved accessibility (ARIA labels, keyboard navigation) - Better close button positioning and styling - Enhanced mobile responsiveness - Cleaner composition with DialogHeader/Footer App Component Routing: - Refactored routing logic for better clarity - Improved state management for navigation - Better integration with settings page - Enhanced error boundary handling - Cleaner separation of layout concerns - Improved provider context propagation - Better handling of deep links - Optimized re-renders with React.memo where appropriate Code Quality Improvements: - Reduced prop drilling with better component composition - Improved TypeScript type safety - Better separation of concerns - Enhanced code readability with clearer naming - Eliminated redundant logic Performance Optimizations: - Reduced unnecessary re-renders - Better memoization of callbacks - Optimized component tree structure - Improved event handler efficiency User Experience: - Smoother transitions and animations - Better visual feedback for interactions - Improved loading states - More consistent behavior across features These changes create a more maintainable and performant foundation for the application's UI layer while improving the overall user experience with smoother interactions and better visual polish. * refactor(features): modernize Skills, Prompts and Agents components Major refactoring of feature components to improve code quality, user experience, and maintainability. SkillsPage Component (299 lines refactored): - Complete rewrite of layout and state management - Better integration with RepoManagerPanel - Improved navigation between list and detail views - Enhanced error handling with user-friendly messages - Better loading states with skeleton screens - Optimized re-renders with proper memoization - Cleaner separation between list and form views - Improved skill card interactions - Better responsive design for different screen sizes RepoManagerPanel Component (370 lines refactored): - Streamlined repository management workflow - Enhanced form validation with real-time feedback - Improved repository list with better visual hierarchy - Better handling of git operations (clone, pull, delete) - Enhanced error recovery for network issues - Cleaner state management reducing complexity - Improved TypeScript type safety - Better integration with Skills backend API - Enhanced loading indicators for async operations PromptPanel Component (249 lines refactored): - Modernized layout with FullScreenPanel integration - Better separation between list and edit modes - Improved prompt card design with better readability - Enhanced search and filter functionality - Cleaner state management for editing workflow - Better integration with PromptFormPanel - Improved delete confirmation with safety checks - Enhanced keyboard navigation support PromptFormPanel Component (238 lines refactored): - Streamlined form layout and validation - Better markdown editor integration - Real-time preview with syntax highlighting - Improved validation error display - Enhanced save/cancel workflow - Better handling of large prompt content - Cleaner form state management - Improved accessibility features AgentsPanel Component (33 lines modified): - Minor layout adjustments for consistency - Better integration with FullScreenPanel - Improved placeholder states - Enhanced error boundaries Type Definitions (types.ts): - Added 10 new type definitions - Better type safety for Skills/Prompts/Agents - Enhanced interfaces for repository management - Improved typing for form validations Architecture Improvements: - Reduced component coupling - Better prop interfaces with explicit types - Improved error boundaries - Enhanced code reusability - Better testing surface User Experience Enhancements: - Smoother transitions between views - Better visual feedback for actions - Improved error messages - Enhanced loading states - More intuitive navigation flows - Better responsive layouts Code Quality: - Net reduction of 29 lines while adding features - Improved code organization - Better naming conventions - Enhanced documentation - Cleaner control flow These changes significantly improve the maintainability and user experience of core feature components while establishing consistent patterns for future development. * style(ui): refine component layouts and improve visual consistency Comprehensive UI polish across multiple components to enhance visual design, improve user experience, and maintain consistency. UsageScriptModal Component (1302 lines refactored): - Complete layout overhaul for better usability - Improved script editor with syntax highlighting - Better template selection interface - Enhanced test/preview panels with clearer separation - Improved error feedback and validation messages - Better modal sizing and responsiveness - Cleaner tab navigation between sections - Enhanced code formatting and readability - Improved loading states for async operations - Better integration with parent components MCP Components: - McpFormModal (42 lines): * Streamlined form layout * Better server type selection (stdio/http) * Improved field grouping and labels * Enhanced validation feedback - UnifiedMcpPanel (14 lines): * Minor layout adjustments * Better list item spacing * Improved server status indicators * Enhanced action button placement Provider Components: - ProviderCard (11 lines): * Refined card layout and spacing * Better visual hierarchy * Improved badge placement * Enhanced hover effects - ProviderList (5 lines): * Minor grid layout adjustments * Better drag-and-drop visual feedback - GeminiConfigSections (4 lines): * Field label alignment * Improved spacing consistency Editor & Footer Components: - JsonEditor (13 lines): * Better editor height management * Improved error display * Enhanced syntax highlighting - UsageFooter (10 lines): * Refined footer layout * Better quota display * Improved refresh button placement Settings & Environment: - ImportExportSection (24 lines): * Better button layout * Improved action grouping * Enhanced visual feedback - EnvWarningBanner (4 lines): * Refined alert styling * Better dismiss button placement Global Styles (index.css): - Added 11 lines of utility classes - Improved transition timing - Better focus indicators - Enhanced scrollbar styling - Refined spacing utilities Design Improvements: - Consistent spacing using design tokens - Unified color palette application - Better typography hierarchy - Improved shadow system for depth - Enhanced interactive states (hover, active, focus) - Better border radius consistency - Refined animation timings Accessibility: - Improved focus indicators - Better keyboard navigation - Enhanced screen reader support - Improved color contrast ratios Code Quality: - Net increase of 68 lines due to UsageScriptModal improvements - Better component organization - Cleaner style application - Reduced style duplication These visual refinements create a more polished and professional interface while maintaining excellent usability and accessibility standards across all components. * chore(i18n): add auto-launch translation keys Add translation keys for new auto-launch feature to support multi-language interface. Translation Keys Added: - autoLaunch: Label for auto-launch toggle - autoLaunchDescription: Explanation of auto-launch functionality - autoLaunchEnabled: Status message when enabled Languages Updated: - Chinese (zh.json): 简体中文翻译 - English (en.json): English translations The translations maintain consistency with existing terminology and provide clear, user-friendly descriptions of the auto-launch feature across both supported languages. * test: update test suites to match component refactoring Comprehensive test updates to align with recent component refactoring and new auto-launch functionality. Component Tests: - AddProviderDialog.test.tsx (10 lines): * Updated test cases for new dialog behavior * Enhanced mock data for preset selection * Improved assertions for validation - ImportExportSection.test.tsx (16 lines): * Updated for new settings page integration * Enhanced test coverage for error scenarios * Better mock state management - McpFormModal.test.tsx (60 lines): * Extensive updates for form refactoring * New test cases for multi-app selection * Enhanced validation testing * Better coverage of stdio/http server types - ProviderList.test.tsx (11 lines): * Updated for new card layout * Enhanced drag-and-drop testing - SettingsDialog.test.tsx (96 lines): * Major updates for SettingsPage migration * New test cases for auto-launch functionality * Enhanced integration test coverage * Better async operation testing Hook Tests: - useDirectorySettings.test.tsx (32 lines): * Updated for refactored hook logic * Enhanced test coverage for edge cases - useDragSort.test.tsx (36 lines): * Simplified test cases * Better mock implementation * Improved assertions - useImportExport tests (16 lines total): * Updated for new error handling * Enhanced test coverage - useMcpValidation.test.tsx (23 lines): * Updated validation test cases * Better coverage of error scenarios - useProviderActions.test.tsx (48 lines): * Extensive updates for hook refactoring * New test cases for provider operations * Enhanced mock data - useSettings.test.tsx (12 lines): * New test cases for auto-launch * Enhanced settings state testing * Better async operation coverage Integration Tests: - App.test.tsx (41 lines): * Updated for new routing logic * Enhanced navigation testing * Better component integration coverage - SettingsDialog.test.tsx (88 lines): * Complete rewrite for SettingsPage * New integration test scenarios * Enhanced user workflow testing Mock Infrastructure: - handlers.ts (117 lines): * Major updates for MSW handlers * New handlers for auto-launch commands * Enhanced error simulation * Better request/response mocking - state.ts (37 lines): * Updated mock state structure * New state for auto-launch * Enhanced state reset functionality - tauriMocks.ts (10 lines): * Updated mock implementations * Better type safety - server.ts & testQueryClient.ts: * Minor cleanup (2 lines removed) Test Infrastructure Improvements: - Better test isolation - Enhanced mock data consistency - Improved async operation testing - Better error scenario coverage - Enhanced integration test patterns Coverage Improvements: - Net increase of 195 lines of test code - Better coverage of edge cases - Enhanced error path testing - Improved integration test scenarios - Better mock infrastructure All tests now pass with the refactored components while maintaining comprehensive coverage of functionality and edge cases. * style(ui): improve window dragging and provider card styles * fix(skills): resolve third-party skills installation failure - Add skills_path field to Skill struct - Use skills_path to construct correct source path during installation - Fix installation for repos with custom skill subdirectories * feat(icon): add icon type system and intelligent inference logic Introduce a new icon system for provider customization: - Add IconMetadata and IconPreset interfaces in src/types/icon.ts - Define structure for icon name, display name, category, keywords - Support default color configuration per icon - Implement smart icon inference in src/config/iconInference.ts - Create iconMappings for 25+ AI providers and cloud platforms - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc. - inferIconForPreset(): match provider name to icon config - addIconsToPresets(): batch apply icons to preset arrays - Support fuzzy matching for flexible name recognition This foundation enables automatic icon assignment when users add providers, improving visual identification in the provider list. * feat(ui): add icon picker, color picker and provider icon components Implement comprehensive icon selection system for provider customization: ## New Components ### ProviderIcon (src/components/ProviderIcon.tsx) - Render SVG icons by name with automatic fallback - Display provider initials when icon not found - Support custom sizing via size prop - Use dangerouslySetInnerHTML for inline SVG rendering ### IconPicker (src/components/IconPicker.tsx) - Grid-based icon selection with visual preview - Real-time search filtering by name and keywords - Integration with icon metadata for display names - Responsive grid layout (6-10 columns based on screen) ### ColorPicker (src/components/ColorPicker.tsx) - 12 preset colors for quick selection - Native color input for custom color picking - Hex input field for precise color entry - Visual feedback for selected color state ## Icon Assets (src/icons/extracted/) - 38 high-quality SVG icons for AI providers and platforms - Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc. - Cloud platforms: AWS, Azure, Google Cloud, Cloudflare - Auto-generated index.ts with getIcon/hasIcon helpers - Metadata system with searchable keywords per icon ## Build Scripts - scripts/extract-icons.js: Extract icons from simple-icons - scripts/generate-icon-index.js: Generate TypeScript index file * feat(provider): integrate icon system into provider UI components Add icon customization support to provider management interface: ## Type System Updates ### Provider Interface (src/types.ts) - Add optional `icon` field for icon name (e.g., "openai", "anthropic") - Add optional `iconColor` field for hex color (e.g., "#00A67E") ### Form Schema (src/lib/schemas/provider.ts) - Extend providerSchema with icon and iconColor optional fields - Maintain backward compatibility with existing providers ## UI Components ### ProviderCard (src/components/providers/ProviderCard.tsx) - Display ProviderIcon alongside provider name - Add icon container with hover animation effect - Adjust layout spacing for icon placement - Update translate offsets for action buttons ### BasicFormFields (src/components/providers/forms/BasicFormFields.tsx) - Add icon preview section showing current selection - Implement fullscreen icon picker dialog - Auto-apply default color from icon metadata on selection - Display provider name and icon status in preview ### AddProviderDialog & EditProviderDialog - Pass icon fields through form submission - Preserve icon data during provider updates This enables users to visually distinguish providers in the list with custom icons, improving UX for multi-provider setups. * feat(backend): add icon fields to Provider model and default mappings Extend Rust backend to support provider icon customization: ## Provider Model (src-tauri/src/provider.rs) - Add `icon: Option<String>` field for icon name - Add `icon_color: Option<String>` field for hex color - Use serde rename `iconColor` for frontend compatibility - Apply skip_serializing_if for clean JSON output - Update Provider::new() to initialize icon fields as None ## Provider Defaults (src-tauri/src/provider_defaults.rs) [NEW] - Define ProviderIcon struct with name and color fields - Create DEFAULT_PROVIDER_ICONS static HashMap with 23 providers: - AI providers: OpenAI, Anthropic, Claude, Google, Gemini, DeepSeek, Kimi, Moonshot, Zhipu, MiniMax, Baidu, Alibaba, Tencent, Meta, Microsoft, Cohere, Perplexity, Mistral, HuggingFace - Cloud platforms: AWS, Azure, Huawei, Cloudflare - Implement infer_provider_icon() with exact and fuzzy matching - Add unit tests for matching logic (exact, fuzzy, case-insensitive) ## Deep Link Support (src-tauri/src/deeplink.rs) - Initialize icon fields when creating Provider from deep link import ## Module Registration (src-tauri/src/lib.rs) - Register provider_defaults module ## Dependencies (Cargo.toml) - Add once_cell for lazy static initialization This backend support enables icon persistence and future features like auto-icon inference during provider creation. * chore(i18n): add translations for icon picker and provider icon Add Chinese and English translations for icon customization feature: ## Icon Picker (iconPicker) - search: "Search Icons" / "搜索图标" - searchPlaceholder: "Enter icon name..." / "输入图标名称..." - noResults: "No matching icons found" / "未找到匹配的图标" - category.aiProvider: "AI Providers" / "AI 服务商" - category.cloud: "Cloud Platforms" / "云平台" - category.tool: "Dev Tools" / "开发工具" - category.other: "Other" / "其他" ## Provider Icon (providerIcon) - label: "Icon" / "图标" - colorLabel: "Icon Color" / "图标颜色" - selectIcon: "Select Icon" / "选择图标" - preview: "Preview" / "预览" These translations support the new icon picker UI components and provider form icon selection interface. * style(ui): refine header layout and AppSwitcher color scheme Improve application header and component styling: ## App.tsx Header Layout - Wrap title and settings button in flex container with gap - Add vertical divider between title and settings icon - Apply responsive padding (pl-1 sm:pl-2) - Reformat JSX for better readability (prettier) - Fix string template formatting in className ## AppSwitcher Color Update - Change Claude tab gradient from orange/amber to teal/emerald/green - Update shadow color to match new teal theme - Change hover color from orange-500 to teal-500 - Align visual style with emerald/teal brand colors ## Dialog Component Cleanup - Remove default close button (X icon) from DialogContent - Allow parent components to control close button placement - Remove unused lucide-react X import ## index.css Header Border - Add top border (2px solid) to glass-header - Apply to both light and dark mode variants - Improve visual separation of header area These changes enhance visual consistency and modernize the UI appearance with a cohesive teal color scheme. * chore(deps): add icon library and update preset configurations Add dependencies and utility scripts for icon system: ## Dependencies (package.json) - Add @lobehub/icons-static-svg@1.73.0 - High-quality SVG icon library for AI providers - Source for extracted icons in src/icons/extracted/ - Update pnpm-lock.yaml accordingly ## Provider Preset Updates (src/config/claudeProviderPresets.ts) - Add optional `icon` and `iconColor` fields to ProviderPreset interface - Apply to Anthropic Official preset as example: - icon: "anthropic" - iconColor: "#D4915D" - Future presets can include default icon configurations ## Utility Script (scripts/filter-icons.js) [NEW] - Helper script for filtering and managing icon assets - Supports icon discovery and validation workflow - Complements extract-icons.js and generate-icon-index.js This completes the icon system infrastructure, providing all necessary tools and dependencies for icon customization. * refactor(ui): simplify AppSwitcher styles and migrate to local SVG icons - Replace complex gradient animations with clean, minimal tab design - Migrate from @lobehub/icons CDN to local SVG assets for better reliability - Fix clippy warning in error.rs (use inline format args) - Improve code formatting in skill service and commands - Reduce CSS complexity in AppSwitcher component (removed blur effects and gradients) - Update BrandIcons to use imported local SVG files instead of dynamic image loading This improves performance, reduces external dependencies, and provides a cleaner UI experience. * style(ui): hide scrollbars across all browsers and optimize form layout - Hide scrollbars globally with cross-browser support: * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none } * Firefox: scrollbar-width: none * IE 10+: -ms-overflow-style: none - Remove custom scrollbar styling (width, colors, hover states) - Reorganize BasicFormFields layout: * Move icon picker to top center as a clickable preview (80x80) * Change name and notes fields to horizontal grid layout (md:grid-cols-2) * Remove icon preview section from bottom * Improve visual hierarchy and space efficiency This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality. * refactor(layout): standardize max-width to 60rem and optimize padding structure - Unify container max-width across components: * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list * Replace max-w-5xl with max-w-[60rem] in PromptPanel * Move padding from header element to inner container for consistent spacing - Optimize padding hierarchy: * Remove px-6 from header element, add to inner header container * Remove px-6 from main element, keep it only in provider list container * Consolidate PromptPanel padding: move px-6 from nested divs to outer container * Remove redundant pl-1 sm:pl-2 from logo/title area - Benefits: * Consistent 60rem max-width provides better readability on wide screens * Simplified padding structure reduces CSS complexity * Cleaner responsive behavior with unified spacing rules This creates a more maintainable and visually consistent layout system. * refactor(ui): unify layout system with 60rem max-width and consistent spacing - Standardize container max-width across all panels: * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem] * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel * Ensures consistent reading width and visual balance on wide screens - Optimize padding hierarchy and structure: * Move px-6 from parent elements to content containers * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer * Add border separators (border-t/border-b) to header and footer sections * Consolidate nested padding in MCP, Skills, and Prompts panels * Remove redundant padding layers for cleaner CSS - Simplify component styling: * MCP list items: Replace card-based layout with modern group-based design * Remove unnecessary wrapper divs and flatten DOM structure * Update card hover effects with smooth transitions * Simplify icon selection dialog (remove description text in BasicFormFields) - Benefits: * Consistent 60rem max-width provides optimal readability * Unified spacing rules reduce maintenance complexity * Cleaner component hierarchy improves performance * Better responsive behavior across different screen sizes * More cohesive visual design language throughout the app This creates a maintainable, scalable design system foundation. * feat(deeplink): add Claude model fields support and enhance import dialog - Add Claude-specific model field support in deeplink import: * Support model (ANTHROPIC_MODEL) - general default model * Support haikuModel (ANTHROPIC_DEFAULT_HAIKU_MODEL) * Support sonnetModel (ANTHROPIC_DEFAULT_SONNET_MODEL) * Support opusModel (ANTHROPIC_DEFAULT_OPUS_MODEL) * Backend: Update DeepLinkImportRequest struct to include optional model fields * Frontend: Add TypeScript type definitions for new model parameters - Enhance deeplink demo page (deplink.html): * Add 5 new Claude configuration examples showcasing different model setups * Add parameter documentation with required/optional tags * Include basic config (no models), single model, complete 4-model, partial models, and third-party provider examples * Improve visual design with param-list component and color-coded badges * Add detailed descriptions for each configuration scenario - Redesign DeepLinkImportDialog layout: * Switch from 3-column to compact 2-column grid layout * Reduce dialog width from 500px to 650px for better content display * Add dedicated section for Claude model configurations with blue highlight box * Use uppercase labels and smaller text for more information density * Add truncation and tooltips for long URLs * Improve visual hierarchy with spacing and grouping * Increase z-index to 9999 to ensure dialog appears on top - Minor UI refinements: * Update App.tsx layout adjustments * Optimize McpFormModal styling * Refine ProviderCard and BasicFormFields components This enables users to import Claude providers with precise model configurations via deeplink. * feat(deeplink): add config file support for deeplink import Support importing provider configuration from embedded or remote config files. - Add base64 dependency for config content encoding - Support config, configFormat, and configUrl parameters - Make homepage/endpoint/apiKey optional when config is provided - Add config parsing and merging logic * feat(deeplink): enhance dialog with config file preview Add config file parsing and preview in deep link import dialog. - Support Base64 encoded config display - Add config file source indicator (embedded/remote) - Parse and display config fields by app type (Claude/Codex/Gemini) - Mask sensitive values in config preview - Improve dialog layout and content organization * refactor(ui): unify dialog styles and improve layout consistency Standardize dialog and panel components across the application. - Update dialog background to use semantic color tokens - Adjust FullScreenPanel max-width to 56rem for better alignment - Add drag region and prevent body scroll in full-screen panels - Optimize button sizes and spacing in panel headers - Apply consistent styling to all dialog-based components * i18n: add deeplink config preview translations Add missing translation keys for config file preview feature. - Add configSource, configEmbedded, configRemote labels - Add configDetails and configUrl display strings - Support both Chinese and English versions * feat(deeplink): enhance test page with v3.8 config file examples Improve deeplink test page with comprehensive config file import examples. - Add version badge for v3.8 features - Add copy-to-clipboard functionality for all deep links - Add Claude config file import examples (embedded/remote) - Add Codex config file import examples (auth.json + config.toml) - Add Gemini config file import examples (.env format) - Add config generator tool for easy testing - Update UI with better styling and layout * feat(settings): add autoSaveSettings for lightweight auto-save Add optimized auto-save function for General tab settings. - Add autoSaveSettings method for non-destructive auto-save - Only trigger system APIs when values actually change - Avoid unnecessary auto-launch and plugin config updates - Update tests to cover new functionality * refactor(settings): simplify settings page layout and auto-save Reorganize settings page structure and integrate autoSaveSettings. - Move save button inline within Advanced tab content - Remove sticky footer for cleaner layout - Use autoSaveSettings for General tab settings - Simplify dialog close behavior - Refactor ImportExportSection layout * style(providers): optimize card layout and action button sizes Improve provider card visual density and action buttons. - Reduce icon button sizes for compact layout - Adjust drag handle and icon sizes - Tighten spacing between action buttons - Update hover translate values for better alignment * refactor(mcp): improve form modal layout with adaptive height editor Restructure MCP form modal for better space utilization. - Split form into upper form fields and lower JSON editor sections - Add full-height mode support for JsonEditor component - Use flex layout for editor to fill available space - Update PromptFormPanel to use full-height editor - Fix locale text formatting * style: unify list item styles with semantic colors Apply consistent styling to list items across components. - Replace hardcoded colors with semantic tokens in MCP and Prompt list items - Add glass effect container to EndpointSpeedTest panel - Format code for better readability * style: format template literals for better readability Improve code formatting for conditional className expressions. - Break long template literals across multiple lines - Maintain consistent formatting in MCP form and endpoint test components * feat(deeplink): add config merge command for preview Expose config merging functionality to frontend for preview. - Add merge_deeplink_config Tauri command - Make parse_and_merge_config public for reuse - Enable frontend to display complete config before import * feat(deeplink): merge and display config in import dialog Enhance import dialog to fetch and display complete config. - Call mergeDeeplinkConfig API when config is present - Add UTF-8 base64 decoding support for config content - Add scrollable content area with custom scrollbar styling - Show complete configuration before user confirms import * i18n: add config merge error message Add translation for config file merge error handling. * style(deeplink): format test page HTML for better readability Improve HTML formatting in deeplink test page. - Format multiline attributes for better readability - Add consistent indentation to nested elements - Break long lines in buttons and links * refactor(usage): improve footer layout with two-row design Reorganize usage footer for better readability and space efficiency. - Split into two rows: update time + refresh button (row 1), usage stats (row 2) - Move refresh button to top row next to update time - Remove card background for cleaner look - Add fallback text when never updated - Improve spacing and alignment - Format template literals for consistency
2025-11-22 19:18:35 +08:00
"launchOnStartup": "Launch on Startup",
"launchOnStartupDescription": "Automatically run CC Switch when system starts",
"autoLaunchFailed": "Failed to set auto-launch",
"minimizeToTray": "Minimize to tray on close",
"minimizeToTrayDescription": "When checked, clicking the close button will hide to system tray, otherwise the app will exit directly.",
"enableClaudePluginIntegration": "Apply to Claude Code extension",
"enableClaudePluginIntegrationDescription": "When enabled, the VS Code Claude Code extension provider will switch with this app",
"configDirectoryOverride": "Configuration Directory Override (Advanced)",
"configDirectoryDescription": "When using Claude Code or Codex in environments like WSL, you can manually specify the configuration directory to the one in WSL to keep provider data consistent with the main environment.",
"appConfigDir": "CC Switch Configuration Directory",
"appConfigDirDescription": "Customize the storage location for CC Switch configuration (point to cloud sync folder to enable config sync)",
"browsePlaceholderApp": "e.g., C:\\Users\\Administrator\\.cc-switch",
"claudeConfigDir": "Claude Code Configuration Directory",
"claudeConfigDirDescription": "Override Claude configuration directory (settings.json) and keep claude.json (MCP) alongside it.",
"codexConfigDir": "Codex Configuration Directory",
"codexConfigDirDescription": "Override Codex configuration directory.",
"geminiConfigDir": "Gemini Configuration Directory",
"geminiConfigDirDescription": "Override Gemini configuration directory (.env).",
"browsePlaceholderClaude": "e.g., /home/<your-username>/.claude",
"browsePlaceholderCodex": "e.g., /home/<your-username>/.codex",
"browsePlaceholderGemini": "e.g., /home/<your-username>/.gemini",
"browseDirectory": "Browse Directory",
"resetDefault": "Reset to default directory (takes effect after saving)",
"checkForUpdates": "Check for Updates",
"updateTo": "Update to v{{version}}",
"updating": "Updating...",
"checking": "Checking...",
"upToDate": "Up to Date",
"aboutHint": "View version information and update status.",
"portableMode": "Portable mode: updates require manual download.",
"updateAvailable": "New version available: {{version}}",
"updateFailed": "Update installation failed, attempted to open download page.",
"checkUpdateFailed": "Failed to check for updates, please try again later.",
"openReleaseNotesFailed": "Failed to open release notes",
"releaseNotes": "Release Notes",
"viewReleaseNotes": "View release notes for this version",
"viewCurrentReleaseNotes": "View current version release notes",
"importFailedError": "Import config failed: {{message}}",
"exportFailedError": "Export config failed:",
"restartRequired": "Restart Required",
"restartRequiredMessage": "Modifying the CC Switch configuration directory requires restarting the application to take effect. Restart now?",
"restartNow": "Restart Now",
"restartLater": "Restart Later",
"restartFailed": "Application restart failed, please manually close and reopen.",
"devModeRestartHint": "Dev Mode: Automatic restart not supported, please manually restart the application.",
"saving": "Saving..."
},
"apps": {
"claude": "Claude Code",
feat(gemini): add Gemini provider integration (#202) * feat(gemini): add Gemini provider integration - Add gemini_config.rs module for .env file parsing - Extend AppType enum to support Gemini - Implement GeminiConfigEditor and GeminiFormFields components - Add GeminiIcon with standardized 1024x1024 viewBox - Add Gemini provider presets configuration - Update i18n translations for Gemini support - Extend ProviderService and McpService for Gemini * fix(gemini): resolve TypeScript errors, add i18n support, and fix MCP logic **Critical Fixes:** - Fix TS2741 errors in tests/msw/state.ts by adding missing Gemini type definitions - Fix ProviderCard.extractApiUrl to support GOOGLE_GEMINI_BASE_URL display - Add missing apps.gemini i18n keys (zh/en) for proper app name display - Fix MCP service Gemini cross-app duplication logic to prevent self-copy **Technical Details:** - tests/msw/state.ts: Add gemini default providers, current ID, and MCP config - ProviderCard.tsx: Check both ANTHROPIC_BASE_URL and GOOGLE_GEMINI_BASE_URL - services/mcp.rs: Skip Gemini in sync_other_side logic with unreachable!() guards - Run pnpm format to auto-fix code style issues **Verification:** - ✅ pnpm typecheck passes - ✅ pnpm format completed * feat(gemini): enhance authentication and config parsing - Add strict and lenient .env parsing modes - Implement PackyCode partner authentication detection - Support Google OAuth official authentication - Auto-configure security.auth.selectedType for PackyCode - Add comprehensive test coverage for all auth types - Update i18n for OAuth hints and Gemini config --------- Co-authored-by: Jason <farion1231@gmail.com>
2025-11-12 10:47:34 +08:00
"codex": "Codex",
"gemini": "Gemini"
},
"console": {
"providerSwitchReceived": "Received provider switch event:",
"setupListenerFailed": "Failed to setup provider switch listener:",
"updateProviderFailed": "Update provider failed:",
"autoImportFailed": "Auto import default configuration failed:",
"openLinkFailed": "Failed to open link:",
"getVersionFailed": "Failed to get version info:",
"loadSettingsFailed": "Failed to load settings:",
"getConfigPathFailed": "Failed to get config path:",
"getConfigDirFailed": "Failed to get config directory:",
"detectPortableFailed": "Failed to detect portable mode:",
"saveSettingsFailed": "Failed to save settings:",
"updateFailed": "Update failed:",
"checkUpdateFailed": "Check for updates failed:",
"openConfigFolderFailed": "Failed to open config folder:",
"selectConfigDirFailed": "Failed to select config directory:",
"getDefaultConfigDirFailed": "Failed to get default config directory:",
"openReleaseNotesFailed": "Failed to open release notes:"
},
"providerForm": {
"supplierName": "Provider Name",
"supplierNameRequired": "Provider Name *",
"supplierNamePlaceholder": "e.g., Anthropic Official",
"websiteUrl": "Website URL",
"websiteUrlPlaceholder": "https://example.com (optional)",
"apiEndpoint": "API Endpoint",
"apiEndpointPlaceholder": "https://your-api-endpoint.com",
"codexApiEndpointPlaceholder": "https://your-api-endpoint.com/v1",
"manageAndTest": "Manage & Test",
"configContent": "Config Content",
"officialNoApiKey": "Official login does not require API Key, save directly",
"codexOfficialNoApiKey": "Official does not require API Key, save directly",
"codexApiKeyAutoFill": "Just fill in here, auth.json below will be auto-filled",
"apiKeyAutoFill": "Just fill in here, config below will be auto-filled",
"cnOfficialApiKeyHint": "💡 Only need to fill in API Key, endpoint is preset",
"aggregatorApiKeyHint": "💡 Only need to fill in API Key, endpoint is preset",
"thirdPartyApiKeyHint": "💡 Only need to fill in API Key, endpoint is preset",
"customApiKeyHint": "💡 Custom configuration requires manually filling all necessary fields",
"officialHint": "💡 Official provider uses browser login, no API Key needed",
"getApiKey": "Get API Key",
"partnerPromotion": {
"zhipu": "Zhipu GLM is an official partner of CC Switch. Use this link to top up and get a 10% discount",
"packycode": "PackyCode is an official partner of CC Switch. Register using this link and enter \"cc-switch\" promo code during recharge to get 10% off"
},
"parameterConfig": "Parameter Config - {{name}} *",
"mainModel": "Main Model (optional)",
"mainModelPlaceholder": "e.g., GLM-4.6",
"fastModel": "Fast Model (optional)",
"fastModelPlaceholder": "e.g., GLM-4.5-Air",
"modelHint": "💡 Leave blank to use provider's default model",
"apiHint": "💡 Fill in Claude API compatible service endpoint",
"codexApiHint": "💡 Fill in service endpoint compatible with OpenAI Response format",
"fillSupplierName": "Please fill in provider name",
"fillConfigContent": "Please fill in configuration content",
"fillParameter": "Please fill in {{label}}",
"fillTemplateValue": "Please fill in {{label}}",
"configJsonError": "Config JSON format error, please check syntax",
"authJsonRequired": "auth.json must be a JSON object",
"authJsonError": "auth.json format error, please check JSON syntax",
"fillAuthJson": "Please fill in auth.json configuration",
"fillApiKey": "Please fill in OPENAI_API_KEY",
"visitWebsite": "Visit {{url}}",
"anthropicModel": "Main Model",
"anthropicSmallFastModel": "Fast Model",
"anthropicDefaultHaikuModel": "Default Haiku Model",
"anthropicDefaultSonnetModel": "Default Sonnet Model",
"anthropicDefaultOpusModel": "Default Opus Model",
"modelPlaceholder": "",
"smallModelPlaceholder": "",
"haikuModelPlaceholder": "",
"modelHelper": "Optional: Specify default Claude model to use, leave blank to use system default.",
"categoryOfficial": "Official",
"categoryCnOfficial": "Opensource Official",
"categoryAggregation": "Aggregation",
"categoryThirdParty": "Third Party"
},
"endpointTest": {
"title": "API Endpoint Management",
"endpoints": "endpoints",
"autoSelect": "Auto Select",
"testSpeed": "Test",
"testing": "Testing",
"addEndpointPlaceholder": "https://api.example.com",
"done": "Done",
"noEndpoints": "No endpoints",
"failed": "Failed",
"enterValidUrl": "Please enter a valid URL",
"invalidUrlFormat": "Invalid URL format",
"onlyHttps": "Only HTTP/HTTPS supported",
"urlExists": "This URL already exists",
"saveFailed": "Save failed, please try again",
"loadEndpointsFailed": "Failed to load custom endpoints:",
"addEndpointFailed": "Failed to add custom endpoint:",
"removeEndpointFailed": "Failed to remove custom endpoint:",
"removeFailed": "Remove failed: {{error}}",
"updateLastUsedFailed": "Failed to update endpoint last used time",
"pleaseAddEndpoint": "Please add an endpoint first",
"testUnavailable": "Speed test unavailable",
"noResult": "No result returned",
Refactor/UI (#273) * feat(components): add reusable full-screen panel components Add new full-screen panel components to support the UI refactoring: - FullScreenPanel: Reusable full-screen layout component with header, content area, and optional footer. Provides consistent layout for settings, prompts, and other full-screen views. - PromptFormPanel: Dedicated panel for creating and editing prompts with markdown preview support. Features real-time validation and integrated save/cancel actions. - AgentsPanel: Panel component for managing agent configurations. Provides a consistent interface for agent CRUD operations. - RepoManagerPanel: Full-featured repository manager panel for Skills. Supports repository listing, addition, deletion, and configuration management with integrated validation. These components establish the foundation for the upcoming settings page migration from dialog-based to full-screen layout. * refactor(settings): migrate from dialog to full-screen page layout Complete migration of settings from modal dialog to dedicated full-screen page, improving UX and providing more space for configuration options. Changes: - Remove SettingsDialog component (legacy modal-based interface) - Add SettingsPage component with full-screen layout using FullScreenPanel - Refactor App.tsx routing to support dedicated settings page * Add settings route handler * Update navigation logic from dialog-based to page-based * Integrate with existing app switcher and provider management - Update ImportExportSection to work with new page layout * Improve spacing and layout for better readability * Enhanced error handling and user feedback * Better integration with page-level actions - Enhance useSettings hook to support page-based workflow * Add navigation state management * Improve settings persistence logic * Better error boundary handling Benefits: - More intuitive navigation with dedicated settings page - Better use of screen space for complex configurations - Improved accessibility with clearer visual hierarchy - Consistent with modern desktop application patterns - Easier to extend with new settings sections This change is part of the larger UI refactoring initiative to modernize the application interface and improve user experience. * refactor(forms): simplify and modernize form components Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance. * style(ui): modernize component layouts and visual design Update UI components with improved layouts, visual hierarchy, and modern design patterns for better user experience. Navigation & Brand Components: - AppSwitcher * Enhanced visual design with better spacing * Improved active state indicators * Smoother transitions and hover effects * Better mobile responsiveness - BrandIcons * Optimized icon rendering performance * Added support for more provider icons * Improved SVG handling and fallbacks * Better scaling across different screen sizes Editor Components: - JsonEditor * Enhanced syntax highlighting * Better error visualization * Improved code formatting options * Added line numbers and code folding support - UsageScriptModal * Complete layout overhaul (1239 lines refactored) * Better script editor integration * Improved template selection UI * Enhanced preview and testing panels * Better error feedback and validation Provider Components: - ProviderCard * Redesigned card layout with modern aesthetics * Better information density and readability * Improved action buttons placement * Enhanced status indicators (active/inactive) - ProviderList * Better grid/list view layouts * Improved drag-and-drop visual feedback * Enhanced sorting indicators - ProviderActions * Streamlined action menu * Better icon consistency * Improved tooltips and accessibility Usage & Footer: - UsageFooter * Redesigned footer layout * Better quota visualization * Improved refresh controls * Enhanced error states Design System Updates: - dialog.tsx (shadcn/ui component) * Updated to latest design tokens * Better overlay animations * Improved focus management - index.css * Added 65 lines of global utility classes * New animation keyframes * Enhanced color variables for dark mode * Improved typography scale - tailwind.config.js * Extended theme with new design tokens * Added custom animations and transitions * New spacing and sizing utilities * Enhanced color palette Visual Improvements: - Consistent border radius across components - Unified shadow system for depth perception - Better color contrast for accessibility (WCAG AA) - Smoother animations and transitions - Improved dark mode support These changes create a more polished, modern interface while maintaining consistency with the application's design language. * chore: update dialogs, i18n and improve component integration Various functional updates and improvements across provider dialogs, MCP panel, skills page, and internationalization. Provider Dialogs: - AddProviderDialog * Simplified form state management * Improved preset selection workflow * Better validation error messages * Enhanced template variable handling - EditProviderDialog * Streamlined edit flow with better state synchronization * Improved handling of live config backfilling * Better error recovery for failed updates * Enhanced integration with parent components MCP & Skills: - UnifiedMcpPanel * Reduced complexity from 140+ to ~95 lines * Improved multi-app server management * Better server type detection (stdio/http) * Enhanced server status indicators * Cleaner integration with MCP form modal - SkillsPage * Simplified navigation and state management * Better integration with RepoManagerPanel * Improved error handling for repository operations * Enhanced loading states - SkillCard * Minor layout adjustments * Better action button placement Environment & Configuration: - EnvWarningBanner * Improved conflict detection messages * Better visual hierarchy for warnings * Enhanced dismissal behavior - tauri.conf.json * Updated build configuration * Added new window management options Internationalization: - en.json & zh.json * Added 17 new translation keys for new features * Updated existing keys for better clarity * Added translations for new settings page * Improved consistency across UI text Code Cleanup: - mutations.ts * Removed 14 lines of unused mutation definitions * Cleaned up deprecated query invalidation logic * Better type safety for mutation parameters Overall Impact: - Reduced total lines by 51 (-10% in affected files) - Improved component integration and data flow - Better error handling and user feedback - Enhanced i18n coverage for new features These changes improve the overall polish and integration of various components while removing technical debt and unused code. * feat(backend): add auto-launch functionality Implement system auto-launch feature to allow CC-Switch to start automatically on system boot, improving user convenience. Backend Implementation: - auto_launch.rs: New module for auto-launch management * Cross-platform support using auto-launch crate * Enable/disable auto-launch with system integration * Proper error handling for permission issues * Platform-specific implementations (macOS/Windows/Linux) Command Layer: - Add get_auto_launch command to check current status - Add set_auto_launch command to toggle auto-start - Integrate commands with settings API Settings Integration: - Extend Settings struct with auto_launch field - Persist auto-launch preference in settings store - Automatic state synchronization on app startup Dependencies: - Add auto-launch ^0.5.0 to Cargo.toml - Update Cargo.lock with new dependency tree Technical Details: - Uses platform-specific auto-launch mechanisms: * macOS: Login Items via LaunchServices * Windows: Registry Run key * Linux: XDG autostart desktop files - Handles edge cases like permission denials gracefully - Maintains settings consistency across app restarts This feature enables users to have CC-Switch readily available after system boot without manual intervention, particularly useful for users who frequently switch between API providers. * refactor(settings): enhance settings page with auto-launch integration Complete refactoring of settings page architecture to integrate auto-launch feature and improve overall settings management workflow. SettingsPage Component: - Integrate auto-launch toggle with WindowSettings section - Improve layout and spacing for better visual hierarchy - Enhanced error handling for settings operations - Better loading states during settings updates - Improved accessibility with proper ARIA labels WindowSettings Component: - Add auto-launch switch with real-time status - Integrate with backend auto-launch commands - Proper error feedback for permission issues - Visual indicators for current auto-launch state - Tooltip guidance for auto-launch functionality useSettings Hook (Major Refactoring): - Complete rewrite reducing complexity by ~30% - Better separation of concerns with dedicated handlers - Improved state management using React Query - Enhanced auto-launch state synchronization * Fetch auto-launch status on mount * Real-time updates on toggle * Proper error recovery - Optimized re-renders with better memoization - Cleaner API for component integration - Better TypeScript type safety Settings API: - Add getAutoLaunch() method - Add setAutoLaunch(enabled: boolean) method - Type-safe Tauri command invocations - Proper error propagation to UI layer Architecture Improvements: - Reduced hook complexity from 197 to ~140 effective lines - Eliminated redundant state management logic - Better error boundaries and fallback handling - Improved testability with clearer separation User Experience Enhancements: - Instant visual feedback on auto-launch toggle - Clear error messages for permission issues - Loading indicators during async operations - Consistent behavior across all platforms This refactoring provides a solid foundation for future settings additions while maintaining code quality and user experience. * refactor(ui): optimize FullScreenPanel, Dialog and App routing Comprehensive refactoring of core UI components to improve code quality, maintainability, and user experience. FullScreenPanel Component: - Enhanced props interface with better TypeScript types - Improved layout flexibility with customizable padding - Better header/footer composition patterns - Enhanced scroll behavior for long content - Added support for custom actions in header - Improved responsive design for different screen sizes - Better integration with parent components - Cleaner prop drilling with context where appropriate Dialog Component (shadcn/ui): - Updated to latest component patterns - Improved animation timing and easing - Better focus trap management - Enhanced overlay styling with backdrop blur - Improved accessibility (ARIA labels, keyboard navigation) - Better close button positioning and styling - Enhanced mobile responsiveness - Cleaner composition with DialogHeader/Footer App Component Routing: - Refactored routing logic for better clarity - Improved state management for navigation - Better integration with settings page - Enhanced error boundary handling - Cleaner separation of layout concerns - Improved provider context propagation - Better handling of deep links - Optimized re-renders with React.memo where appropriate Code Quality Improvements: - Reduced prop drilling with better component composition - Improved TypeScript type safety - Better separation of concerns - Enhanced code readability with clearer naming - Eliminated redundant logic Performance Optimizations: - Reduced unnecessary re-renders - Better memoization of callbacks - Optimized component tree structure - Improved event handler efficiency User Experience: - Smoother transitions and animations - Better visual feedback for interactions - Improved loading states - More consistent behavior across features These changes create a more maintainable and performant foundation for the application's UI layer while improving the overall user experience with smoother interactions and better visual polish. * refactor(features): modernize Skills, Prompts and Agents components Major refactoring of feature components to improve code quality, user experience, and maintainability. SkillsPage Component (299 lines refactored): - Complete rewrite of layout and state management - Better integration with RepoManagerPanel - Improved navigation between list and detail views - Enhanced error handling with user-friendly messages - Better loading states with skeleton screens - Optimized re-renders with proper memoization - Cleaner separation between list and form views - Improved skill card interactions - Better responsive design for different screen sizes RepoManagerPanel Component (370 lines refactored): - Streamlined repository management workflow - Enhanced form validation with real-time feedback - Improved repository list with better visual hierarchy - Better handling of git operations (clone, pull, delete) - Enhanced error recovery for network issues - Cleaner state management reducing complexity - Improved TypeScript type safety - Better integration with Skills backend API - Enhanced loading indicators for async operations PromptPanel Component (249 lines refactored): - Modernized layout with FullScreenPanel integration - Better separation between list and edit modes - Improved prompt card design with better readability - Enhanced search and filter functionality - Cleaner state management for editing workflow - Better integration with PromptFormPanel - Improved delete confirmation with safety checks - Enhanced keyboard navigation support PromptFormPanel Component (238 lines refactored): - Streamlined form layout and validation - Better markdown editor integration - Real-time preview with syntax highlighting - Improved validation error display - Enhanced save/cancel workflow - Better handling of large prompt content - Cleaner form state management - Improved accessibility features AgentsPanel Component (33 lines modified): - Minor layout adjustments for consistency - Better integration with FullScreenPanel - Improved placeholder states - Enhanced error boundaries Type Definitions (types.ts): - Added 10 new type definitions - Better type safety for Skills/Prompts/Agents - Enhanced interfaces for repository management - Improved typing for form validations Architecture Improvements: - Reduced component coupling - Better prop interfaces with explicit types - Improved error boundaries - Enhanced code reusability - Better testing surface User Experience Enhancements: - Smoother transitions between views - Better visual feedback for actions - Improved error messages - Enhanced loading states - More intuitive navigation flows - Better responsive layouts Code Quality: - Net reduction of 29 lines while adding features - Improved code organization - Better naming conventions - Enhanced documentation - Cleaner control flow These changes significantly improve the maintainability and user experience of core feature components while establishing consistent patterns for future development. * style(ui): refine component layouts and improve visual consistency Comprehensive UI polish across multiple components to enhance visual design, improve user experience, and maintain consistency. UsageScriptModal Component (1302 lines refactored): - Complete layout overhaul for better usability - Improved script editor with syntax highlighting - Better template selection interface - Enhanced test/preview panels with clearer separation - Improved error feedback and validation messages - Better modal sizing and responsiveness - Cleaner tab navigation between sections - Enhanced code formatting and readability - Improved loading states for async operations - Better integration with parent components MCP Components: - McpFormModal (42 lines): * Streamlined form layout * Better server type selection (stdio/http) * Improved field grouping and labels * Enhanced validation feedback - UnifiedMcpPanel (14 lines): * Minor layout adjustments * Better list item spacing * Improved server status indicators * Enhanced action button placement Provider Components: - ProviderCard (11 lines): * Refined card layout and spacing * Better visual hierarchy * Improved badge placement * Enhanced hover effects - ProviderList (5 lines): * Minor grid layout adjustments * Better drag-and-drop visual feedback - GeminiConfigSections (4 lines): * Field label alignment * Improved spacing consistency Editor & Footer Components: - JsonEditor (13 lines): * Better editor height management * Improved error display * Enhanced syntax highlighting - UsageFooter (10 lines): * Refined footer layout * Better quota display * Improved refresh button placement Settings & Environment: - ImportExportSection (24 lines): * Better button layout * Improved action grouping * Enhanced visual feedback - EnvWarningBanner (4 lines): * Refined alert styling * Better dismiss button placement Global Styles (index.css): - Added 11 lines of utility classes - Improved transition timing - Better focus indicators - Enhanced scrollbar styling - Refined spacing utilities Design Improvements: - Consistent spacing using design tokens - Unified color palette application - Better typography hierarchy - Improved shadow system for depth - Enhanced interactive states (hover, active, focus) - Better border radius consistency - Refined animation timings Accessibility: - Improved focus indicators - Better keyboard navigation - Enhanced screen reader support - Improved color contrast ratios Code Quality: - Net increase of 68 lines due to UsageScriptModal improvements - Better component organization - Cleaner style application - Reduced style duplication These visual refinements create a more polished and professional interface while maintaining excellent usability and accessibility standards across all components. * chore(i18n): add auto-launch translation keys Add translation keys for new auto-launch feature to support multi-language interface. Translation Keys Added: - autoLaunch: Label for auto-launch toggle - autoLaunchDescription: Explanation of auto-launch functionality - autoLaunchEnabled: Status message when enabled Languages Updated: - Chinese (zh.json): 简体中文翻译 - English (en.json): English translations The translations maintain consistency with existing terminology and provide clear, user-friendly descriptions of the auto-launch feature across both supported languages. * test: update test suites to match component refactoring Comprehensive test updates to align with recent component refactoring and new auto-launch functionality. Component Tests: - AddProviderDialog.test.tsx (10 lines): * Updated test cases for new dialog behavior * Enhanced mock data for preset selection * Improved assertions for validation - ImportExportSection.test.tsx (16 lines): * Updated for new settings page integration * Enhanced test coverage for error scenarios * Better mock state management - McpFormModal.test.tsx (60 lines): * Extensive updates for form refactoring * New test cases for multi-app selection * Enhanced validation testing * Better coverage of stdio/http server types - ProviderList.test.tsx (11 lines): * Updated for new card layout * Enhanced drag-and-drop testing - SettingsDialog.test.tsx (96 lines): * Major updates for SettingsPage migration * New test cases for auto-launch functionality * Enhanced integration test coverage * Better async operation testing Hook Tests: - useDirectorySettings.test.tsx (32 lines): * Updated for refactored hook logic * Enhanced test coverage for edge cases - useDragSort.test.tsx (36 lines): * Simplified test cases * Better mock implementation * Improved assertions - useImportExport tests (16 lines total): * Updated for new error handling * Enhanced test coverage - useMcpValidation.test.tsx (23 lines): * Updated validation test cases * Better coverage of error scenarios - useProviderActions.test.tsx (48 lines): * Extensive updates for hook refactoring * New test cases for provider operations * Enhanced mock data - useSettings.test.tsx (12 lines): * New test cases for auto-launch * Enhanced settings state testing * Better async operation coverage Integration Tests: - App.test.tsx (41 lines): * Updated for new routing logic * Enhanced navigation testing * Better component integration coverage - SettingsDialog.test.tsx (88 lines): * Complete rewrite for SettingsPage * New integration test scenarios * Enhanced user workflow testing Mock Infrastructure: - handlers.ts (117 lines): * Major updates for MSW handlers * New handlers for auto-launch commands * Enhanced error simulation * Better request/response mocking - state.ts (37 lines): * Updated mock state structure * New state for auto-launch * Enhanced state reset functionality - tauriMocks.ts (10 lines): * Updated mock implementations * Better type safety - server.ts & testQueryClient.ts: * Minor cleanup (2 lines removed) Test Infrastructure Improvements: - Better test isolation - Enhanced mock data consistency - Improved async operation testing - Better error scenario coverage - Enhanced integration test patterns Coverage Improvements: - Net increase of 195 lines of test code - Better coverage of edge cases - Enhanced error path testing - Improved integration test scenarios - Better mock infrastructure All tests now pass with the refactored components while maintaining comprehensive coverage of functionality and edge cases. * style(ui): improve window dragging and provider card styles * fix(skills): resolve third-party skills installation failure - Add skills_path field to Skill struct - Use skills_path to construct correct source path during installation - Fix installation for repos with custom skill subdirectories * feat(icon): add icon type system and intelligent inference logic Introduce a new icon system for provider customization: - Add IconMetadata and IconPreset interfaces in src/types/icon.ts - Define structure for icon name, display name, category, keywords - Support default color configuration per icon - Implement smart icon inference in src/config/iconInference.ts - Create iconMappings for 25+ AI providers and cloud platforms - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc. - inferIconForPreset(): match provider name to icon config - addIconsToPresets(): batch apply icons to preset arrays - Support fuzzy matching for flexible name recognition This foundation enables automatic icon assignment when users add providers, improving visual identification in the provider list. * feat(ui): add icon picker, color picker and provider icon components Implement comprehensive icon selection system for provider customization: ## New Components ### ProviderIcon (src/components/ProviderIcon.tsx) - Render SVG icons by name with automatic fallback - Display provider initials when icon not found - Support custom sizing via size prop - Use dangerouslySetInnerHTML for inline SVG rendering ### IconPicker (src/components/IconPicker.tsx) - Grid-based icon selection with visual preview - Real-time search filtering by name and keywords - Integration with icon metadata for display names - Responsive grid layout (6-10 columns based on screen) ### ColorPicker (src/components/ColorPicker.tsx) - 12 preset colors for quick selection - Native color input for custom color picking - Hex input field for precise color entry - Visual feedback for selected color state ## Icon Assets (src/icons/extracted/) - 38 high-quality SVG icons for AI providers and platforms - Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc. - Cloud platforms: AWS, Azure, Google Cloud, Cloudflare - Auto-generated index.ts with getIcon/hasIcon helpers - Metadata system with searchable keywords per icon ## Build Scripts - scripts/extract-icons.js: Extract icons from simple-icons - scripts/generate-icon-index.js: Generate TypeScript index file * feat(provider): integrate icon system into provider UI components Add icon customization support to provider management interface: ## Type System Updates ### Provider Interface (src/types.ts) - Add optional `icon` field for icon name (e.g., "openai", "anthropic") - Add optional `iconColor` field for hex color (e.g., "#00A67E") ### Form Schema (src/lib/schemas/provider.ts) - Extend providerSchema with icon and iconColor optional fields - Maintain backward compatibility with existing providers ## UI Components ### ProviderCard (src/components/providers/ProviderCard.tsx) - Display ProviderIcon alongside provider name - Add icon container with hover animation effect - Adjust layout spacing for icon placement - Update translate offsets for action buttons ### BasicFormFields (src/components/providers/forms/BasicFormFields.tsx) - Add icon preview section showing current selection - Implement fullscreen icon picker dialog - Auto-apply default color from icon metadata on selection - Display provider name and icon status in preview ### AddProviderDialog & EditProviderDialog - Pass icon fields through form submission - Preserve icon data during provider updates This enables users to visually distinguish providers in the list with custom icons, improving UX for multi-provider setups. * feat(backend): add icon fields to Provider model and default mappings Extend Rust backend to support provider icon customization: ## Provider Model (src-tauri/src/provider.rs) - Add `icon: Option<String>` field for icon name - Add `icon_color: Option<String>` field for hex color - Use serde rename `iconColor` for frontend compatibility - Apply skip_serializing_if for clean JSON output - Update Provider::new() to initialize icon fields as None ## Provider Defaults (src-tauri/src/provider_defaults.rs) [NEW] - Define ProviderIcon struct with name and color fields - Create DEFAULT_PROVIDER_ICONS static HashMap with 23 providers: - AI providers: OpenAI, Anthropic, Claude, Google, Gemini, DeepSeek, Kimi, Moonshot, Zhipu, MiniMax, Baidu, Alibaba, Tencent, Meta, Microsoft, Cohere, Perplexity, Mistral, HuggingFace - Cloud platforms: AWS, Azure, Huawei, Cloudflare - Implement infer_provider_icon() with exact and fuzzy matching - Add unit tests for matching logic (exact, fuzzy, case-insensitive) ## Deep Link Support (src-tauri/src/deeplink.rs) - Initialize icon fields when creating Provider from deep link import ## Module Registration (src-tauri/src/lib.rs) - Register provider_defaults module ## Dependencies (Cargo.toml) - Add once_cell for lazy static initialization This backend support enables icon persistence and future features like auto-icon inference during provider creation. * chore(i18n): add translations for icon picker and provider icon Add Chinese and English translations for icon customization feature: ## Icon Picker (iconPicker) - search: "Search Icons" / "搜索图标" - searchPlaceholder: "Enter icon name..." / "输入图标名称..." - noResults: "No matching icons found" / "未找到匹配的图标" - category.aiProvider: "AI Providers" / "AI 服务商" - category.cloud: "Cloud Platforms" / "云平台" - category.tool: "Dev Tools" / "开发工具" - category.other: "Other" / "其他" ## Provider Icon (providerIcon) - label: "Icon" / "图标" - colorLabel: "Icon Color" / "图标颜色" - selectIcon: "Select Icon" / "选择图标" - preview: "Preview" / "预览" These translations support the new icon picker UI components and provider form icon selection interface. * style(ui): refine header layout and AppSwitcher color scheme Improve application header and component styling: ## App.tsx Header Layout - Wrap title and settings button in flex container with gap - Add vertical divider between title and settings icon - Apply responsive padding (pl-1 sm:pl-2) - Reformat JSX for better readability (prettier) - Fix string template formatting in className ## AppSwitcher Color Update - Change Claude tab gradient from orange/amber to teal/emerald/green - Update shadow color to match new teal theme - Change hover color from orange-500 to teal-500 - Align visual style with emerald/teal brand colors ## Dialog Component Cleanup - Remove default close button (X icon) from DialogContent - Allow parent components to control close button placement - Remove unused lucide-react X import ## index.css Header Border - Add top border (2px solid) to glass-header - Apply to both light and dark mode variants - Improve visual separation of header area These changes enhance visual consistency and modernize the UI appearance with a cohesive teal color scheme. * chore(deps): add icon library and update preset configurations Add dependencies and utility scripts for icon system: ## Dependencies (package.json) - Add @lobehub/icons-static-svg@1.73.0 - High-quality SVG icon library for AI providers - Source for extracted icons in src/icons/extracted/ - Update pnpm-lock.yaml accordingly ## Provider Preset Updates (src/config/claudeProviderPresets.ts) - Add optional `icon` and `iconColor` fields to ProviderPreset interface - Apply to Anthropic Official preset as example: - icon: "anthropic" - iconColor: "#D4915D" - Future presets can include default icon configurations ## Utility Script (scripts/filter-icons.js) [NEW] - Helper script for filtering and managing icon assets - Supports icon discovery and validation workflow - Complements extract-icons.js and generate-icon-index.js This completes the icon system infrastructure, providing all necessary tools and dependencies for icon customization. * refactor(ui): simplify AppSwitcher styles and migrate to local SVG icons - Replace complex gradient animations with clean, minimal tab design - Migrate from @lobehub/icons CDN to local SVG assets for better reliability - Fix clippy warning in error.rs (use inline format args) - Improve code formatting in skill service and commands - Reduce CSS complexity in AppSwitcher component (removed blur effects and gradients) - Update BrandIcons to use imported local SVG files instead of dynamic image loading This improves performance, reduces external dependencies, and provides a cleaner UI experience. * style(ui): hide scrollbars across all browsers and optimize form layout - Hide scrollbars globally with cross-browser support: * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none } * Firefox: scrollbar-width: none * IE 10+: -ms-overflow-style: none - Remove custom scrollbar styling (width, colors, hover states) - Reorganize BasicFormFields layout: * Move icon picker to top center as a clickable preview (80x80) * Change name and notes fields to horizontal grid layout (md:grid-cols-2) * Remove icon preview section from bottom * Improve visual hierarchy and space efficiency This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality. * refactor(layout): standardize max-width to 60rem and optimize padding structure - Unify container max-width across components: * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list * Replace max-w-5xl with max-w-[60rem] in PromptPanel * Move padding from header element to inner container for consistent spacing - Optimize padding hierarchy: * Remove px-6 from header element, add to inner header container * Remove px-6 from main element, keep it only in provider list container * Consolidate PromptPanel padding: move px-6 from nested divs to outer container * Remove redundant pl-1 sm:pl-2 from logo/title area - Benefits: * Consistent 60rem max-width provides better readability on wide screens * Simplified padding structure reduces CSS complexity * Cleaner responsive behavior with unified spacing rules This creates a more maintainable and visually consistent layout system. * refactor(ui): unify layout system with 60rem max-width and consistent spacing - Standardize container max-width across all panels: * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem] * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel * Ensures consistent reading width and visual balance on wide screens - Optimize padding hierarchy and structure: * Move px-6 from parent elements to content containers * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer * Add border separators (border-t/border-b) to header and footer sections * Consolidate nested padding in MCP, Skills, and Prompts panels * Remove redundant padding layers for cleaner CSS - Simplify component styling: * MCP list items: Replace card-based layout with modern group-based design * Remove unnecessary wrapper divs and flatten DOM structure * Update card hover effects with smooth transitions * Simplify icon selection dialog (remove description text in BasicFormFields) - Benefits: * Consistent 60rem max-width provides optimal readability * Unified spacing rules reduce maintenance complexity * Cleaner component hierarchy improves performance * Better responsive behavior across different screen sizes * More cohesive visual design language throughout the app This creates a maintainable, scalable design system foundation. * feat(deeplink): add Claude model fields support and enhance import dialog - Add Claude-specific model field support in deeplink import: * Support model (ANTHROPIC_MODEL) - general default model * Support haikuModel (ANTHROPIC_DEFAULT_HAIKU_MODEL) * Support sonnetModel (ANTHROPIC_DEFAULT_SONNET_MODEL) * Support opusModel (ANTHROPIC_DEFAULT_OPUS_MODEL) * Backend: Update DeepLinkImportRequest struct to include optional model fields * Frontend: Add TypeScript type definitions for new model parameters - Enhance deeplink demo page (deplink.html): * Add 5 new Claude configuration examples showcasing different model setups * Add parameter documentation with required/optional tags * Include basic config (no models), single model, complete 4-model, partial models, and third-party provider examples * Improve visual design with param-list component and color-coded badges * Add detailed descriptions for each configuration scenario - Redesign DeepLinkImportDialog layout: * Switch from 3-column to compact 2-column grid layout * Reduce dialog width from 500px to 650px for better content display * Add dedicated section for Claude model configurations with blue highlight box * Use uppercase labels and smaller text for more information density * Add truncation and tooltips for long URLs * Improve visual hierarchy with spacing and grouping * Increase z-index to 9999 to ensure dialog appears on top - Minor UI refinements: * Update App.tsx layout adjustments * Optimize McpFormModal styling * Refine ProviderCard and BasicFormFields components This enables users to import Claude providers with precise model configurations via deeplink. * feat(deeplink): add config file support for deeplink import Support importing provider configuration from embedded or remote config files. - Add base64 dependency for config content encoding - Support config, configFormat, and configUrl parameters - Make homepage/endpoint/apiKey optional when config is provided - Add config parsing and merging logic * feat(deeplink): enhance dialog with config file preview Add config file parsing and preview in deep link import dialog. - Support Base64 encoded config display - Add config file source indicator (embedded/remote) - Parse and display config fields by app type (Claude/Codex/Gemini) - Mask sensitive values in config preview - Improve dialog layout and content organization * refactor(ui): unify dialog styles and improve layout consistency Standardize dialog and panel components across the application. - Update dialog background to use semantic color tokens - Adjust FullScreenPanel max-width to 56rem for better alignment - Add drag region and prevent body scroll in full-screen panels - Optimize button sizes and spacing in panel headers - Apply consistent styling to all dialog-based components * i18n: add deeplink config preview translations Add missing translation keys for config file preview feature. - Add configSource, configEmbedded, configRemote labels - Add configDetails and configUrl display strings - Support both Chinese and English versions * feat(deeplink): enhance test page with v3.8 config file examples Improve deeplink test page with comprehensive config file import examples. - Add version badge for v3.8 features - Add copy-to-clipboard functionality for all deep links - Add Claude config file import examples (embedded/remote) - Add Codex config file import examples (auth.json + config.toml) - Add Gemini config file import examples (.env format) - Add config generator tool for easy testing - Update UI with better styling and layout * feat(settings): add autoSaveSettings for lightweight auto-save Add optimized auto-save function for General tab settings. - Add autoSaveSettings method for non-destructive auto-save - Only trigger system APIs when values actually change - Avoid unnecessary auto-launch and plugin config updates - Update tests to cover new functionality * refactor(settings): simplify settings page layout and auto-save Reorganize settings page structure and integrate autoSaveSettings. - Move save button inline within Advanced tab content - Remove sticky footer for cleaner layout - Use autoSaveSettings for General tab settings - Simplify dialog close behavior - Refactor ImportExportSection layout * style(providers): optimize card layout and action button sizes Improve provider card visual density and action buttons. - Reduce icon button sizes for compact layout - Adjust drag handle and icon sizes - Tighten spacing between action buttons - Update hover translate values for better alignment * refactor(mcp): improve form modal layout with adaptive height editor Restructure MCP form modal for better space utilization. - Split form into upper form fields and lower JSON editor sections - Add full-height mode support for JsonEditor component - Use flex layout for editor to fill available space - Update PromptFormPanel to use full-height editor - Fix locale text formatting * style: unify list item styles with semantic colors Apply consistent styling to list items across components. - Replace hardcoded colors with semantic tokens in MCP and Prompt list items - Add glass effect container to EndpointSpeedTest panel - Format code for better readability * style: format template literals for better readability Improve code formatting for conditional className expressions. - Break long template literals across multiple lines - Maintain consistent formatting in MCP form and endpoint test components * feat(deeplink): add config merge command for preview Expose config merging functionality to frontend for preview. - Add merge_deeplink_config Tauri command - Make parse_and_merge_config public for reuse - Enable frontend to display complete config before import * feat(deeplink): merge and display config in import dialog Enhance import dialog to fetch and display complete config. - Call mergeDeeplinkConfig API when config is present - Add UTF-8 base64 decoding support for config content - Add scrollable content area with custom scrollbar styling - Show complete configuration before user confirms import * i18n: add config merge error message Add translation for config file merge error handling. * style(deeplink): format test page HTML for better readability Improve HTML formatting in deeplink test page. - Format multiline attributes for better readability - Add consistent indentation to nested elements - Break long lines in buttons and links * refactor(usage): improve footer layout with two-row design Reorganize usage footer for better readability and space efficiency. - Split into two rows: update time + refresh button (row 1), usage stats (row 2) - Move refresh button to top row next to update time - Remove card background for cleaner look - Add fallback text when never updated - Improve spacing and alignment - Format template literals for consistency
2025-11-22 19:18:35 +08:00
"testFailed": "Speed test failed: {{error}}",
"status": "Status: {{code}}"
},
"codexConfig": {
"authJson": "auth.json (JSON) *",
"authJsonPlaceholder": "{\n \"OPENAI_API_KEY\": \"sk-your-api-key-here\"\n}",
"authJsonHint": "Codex auth.json configuration content",
"configToml": "config.toml (TOML)",
"configTomlHint": "Codex config.toml configuration content",
"writeCommonConfig": "Write Common Config",
"editCommonConfig": "Edit Common Config",
"editCommonConfigTitle": "Edit Codex Common Config Snippet",
"commonConfigHint": "This snippet will be appended to the end of config.toml when 'Write Common Config' is checked",
"apiUrlLabel": "API Request URL"
},
"geminiConfig": {
"envFile": "Environment Variables (.env)",
"envFileHint": "Configure Gemini environment variables in .env format",
"configJson": "Configuration File (config.json)",
"configJsonHint": "Configure Gemini extended parameters in JSON format (optional)",
"writeCommonConfig": "Write Common Config",
"editCommonConfig": "Edit Common Config",
"editCommonConfigTitle": "Edit Gemini Common Config Snippet",
"commonConfigHint": "Common config snippet will be merged into all Gemini providers with it enabled"
},
"providerPreset": {
"label": "Provider Preset",
"custom": "Custom Configuration",
"other": "Other",
"hint": "You can continue to adjust the fields below after selecting a preset."
},
"usage": {
"queryFailed": "Query failed",
"refreshUsage": "Refresh usage",
"planUsage": "Plan usage",
"invalid": "Expired",
"total": "Total:",
"used": "Used:",
"remaining": "Remaining:",
"justNow": "Just now",
"minutesAgo": "{{count}} min ago",
"hoursAgo": "{{count}} hr ago",
"daysAgo": "{{count}} day ago"
},
"usageScript": {
"title": "Configure Usage Query",
"enableUsageQuery": "Enable usage query",
"presetTemplate": "Preset template",
Refactor/UI (#273) * feat(components): add reusable full-screen panel components Add new full-screen panel components to support the UI refactoring: - FullScreenPanel: Reusable full-screen layout component with header, content area, and optional footer. Provides consistent layout for settings, prompts, and other full-screen views. - PromptFormPanel: Dedicated panel for creating and editing prompts with markdown preview support. Features real-time validation and integrated save/cancel actions. - AgentsPanel: Panel component for managing agent configurations. Provides a consistent interface for agent CRUD operations. - RepoManagerPanel: Full-featured repository manager panel for Skills. Supports repository listing, addition, deletion, and configuration management with integrated validation. These components establish the foundation for the upcoming settings page migration from dialog-based to full-screen layout. * refactor(settings): migrate from dialog to full-screen page layout Complete migration of settings from modal dialog to dedicated full-screen page, improving UX and providing more space for configuration options. Changes: - Remove SettingsDialog component (legacy modal-based interface) - Add SettingsPage component with full-screen layout using FullScreenPanel - Refactor App.tsx routing to support dedicated settings page * Add settings route handler * Update navigation logic from dialog-based to page-based * Integrate with existing app switcher and provider management - Update ImportExportSection to work with new page layout * Improve spacing and layout for better readability * Enhanced error handling and user feedback * Better integration with page-level actions - Enhance useSettings hook to support page-based workflow * Add navigation state management * Improve settings persistence logic * Better error boundary handling Benefits: - More intuitive navigation with dedicated settings page - Better use of screen space for complex configurations - Improved accessibility with clearer visual hierarchy - Consistent with modern desktop application patterns - Easier to extend with new settings sections This change is part of the larger UI refactoring initiative to modernize the application interface and improve user experience. * refactor(forms): simplify and modernize form components Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance. * style(ui): modernize component layouts and visual design Update UI components with improved layouts, visual hierarchy, and modern design patterns for better user experience. Navigation & Brand Components: - AppSwitcher * Enhanced visual design with better spacing * Improved active state indicators * Smoother transitions and hover effects * Better mobile responsiveness - BrandIcons * Optimized icon rendering performance * Added support for more provider icons * Improved SVG handling and fallbacks * Better scaling across different screen sizes Editor Components: - JsonEditor * Enhanced syntax highlighting * Better error visualization * Improved code formatting options * Added line numbers and code folding support - UsageScriptModal * Complete layout overhaul (1239 lines refactored) * Better script editor integration * Improved template selection UI * Enhanced preview and testing panels * Better error feedback and validation Provider Components: - ProviderCard * Redesigned card layout with modern aesthetics * Better information density and readability * Improved action buttons placement * Enhanced status indicators (active/inactive) - ProviderList * Better grid/list view layouts * Improved drag-and-drop visual feedback * Enhanced sorting indicators - ProviderActions * Streamlined action menu * Better icon consistency * Improved tooltips and accessibility Usage & Footer: - UsageFooter * Redesigned footer layout * Better quota visualization * Improved refresh controls * Enhanced error states Design System Updates: - dialog.tsx (shadcn/ui component) * Updated to latest design tokens * Better overlay animations * Improved focus management - index.css * Added 65 lines of global utility classes * New animation keyframes * Enhanced color variables for dark mode * Improved typography scale - tailwind.config.js * Extended theme with new design tokens * Added custom animations and transitions * New spacing and sizing utilities * Enhanced color palette Visual Improvements: - Consistent border radius across components - Unified shadow system for depth perception - Better color contrast for accessibility (WCAG AA) - Smoother animations and transitions - Improved dark mode support These changes create a more polished, modern interface while maintaining consistency with the application's design language. * chore: update dialogs, i18n and improve component integration Various functional updates and improvements across provider dialogs, MCP panel, skills page, and internationalization. Provider Dialogs: - AddProviderDialog * Simplified form state management * Improved preset selection workflow * Better validation error messages * Enhanced template variable handling - EditProviderDialog * Streamlined edit flow with better state synchronization * Improved handling of live config backfilling * Better error recovery for failed updates * Enhanced integration with parent components MCP & Skills: - UnifiedMcpPanel * Reduced complexity from 140+ to ~95 lines * Improved multi-app server management * Better server type detection (stdio/http) * Enhanced server status indicators * Cleaner integration with MCP form modal - SkillsPage * Simplified navigation and state management * Better integration with RepoManagerPanel * Improved error handling for repository operations * Enhanced loading states - SkillCard * Minor layout adjustments * Better action button placement Environment & Configuration: - EnvWarningBanner * Improved conflict detection messages * Better visual hierarchy for warnings * Enhanced dismissal behavior - tauri.conf.json * Updated build configuration * Added new window management options Internationalization: - en.json & zh.json * Added 17 new translation keys for new features * Updated existing keys for better clarity * Added translations for new settings page * Improved consistency across UI text Code Cleanup: - mutations.ts * Removed 14 lines of unused mutation definitions * Cleaned up deprecated query invalidation logic * Better type safety for mutation parameters Overall Impact: - Reduced total lines by 51 (-10% in affected files) - Improved component integration and data flow - Better error handling and user feedback - Enhanced i18n coverage for new features These changes improve the overall polish and integration of various components while removing technical debt and unused code. * feat(backend): add auto-launch functionality Implement system auto-launch feature to allow CC-Switch to start automatically on system boot, improving user convenience. Backend Implementation: - auto_launch.rs: New module for auto-launch management * Cross-platform support using auto-launch crate * Enable/disable auto-launch with system integration * Proper error handling for permission issues * Platform-specific implementations (macOS/Windows/Linux) Command Layer: - Add get_auto_launch command to check current status - Add set_auto_launch command to toggle auto-start - Integrate commands with settings API Settings Integration: - Extend Settings struct with auto_launch field - Persist auto-launch preference in settings store - Automatic state synchronization on app startup Dependencies: - Add auto-launch ^0.5.0 to Cargo.toml - Update Cargo.lock with new dependency tree Technical Details: - Uses platform-specific auto-launch mechanisms: * macOS: Login Items via LaunchServices * Windows: Registry Run key * Linux: XDG autostart desktop files - Handles edge cases like permission denials gracefully - Maintains settings consistency across app restarts This feature enables users to have CC-Switch readily available after system boot without manual intervention, particularly useful for users who frequently switch between API providers. * refactor(settings): enhance settings page with auto-launch integration Complete refactoring of settings page architecture to integrate auto-launch feature and improve overall settings management workflow. SettingsPage Component: - Integrate auto-launch toggle with WindowSettings section - Improve layout and spacing for better visual hierarchy - Enhanced error handling for settings operations - Better loading states during settings updates - Improved accessibility with proper ARIA labels WindowSettings Component: - Add auto-launch switch with real-time status - Integrate with backend auto-launch commands - Proper error feedback for permission issues - Visual indicators for current auto-launch state - Tooltip guidance for auto-launch functionality useSettings Hook (Major Refactoring): - Complete rewrite reducing complexity by ~30% - Better separation of concerns with dedicated handlers - Improved state management using React Query - Enhanced auto-launch state synchronization * Fetch auto-launch status on mount * Real-time updates on toggle * Proper error recovery - Optimized re-renders with better memoization - Cleaner API for component integration - Better TypeScript type safety Settings API: - Add getAutoLaunch() method - Add setAutoLaunch(enabled: boolean) method - Type-safe Tauri command invocations - Proper error propagation to UI layer Architecture Improvements: - Reduced hook complexity from 197 to ~140 effective lines - Eliminated redundant state management logic - Better error boundaries and fallback handling - Improved testability with clearer separation User Experience Enhancements: - Instant visual feedback on auto-launch toggle - Clear error messages for permission issues - Loading indicators during async operations - Consistent behavior across all platforms This refactoring provides a solid foundation for future settings additions while maintaining code quality and user experience. * refactor(ui): optimize FullScreenPanel, Dialog and App routing Comprehensive refactoring of core UI components to improve code quality, maintainability, and user experience. FullScreenPanel Component: - Enhanced props interface with better TypeScript types - Improved layout flexibility with customizable padding - Better header/footer composition patterns - Enhanced scroll behavior for long content - Added support for custom actions in header - Improved responsive design for different screen sizes - Better integration with parent components - Cleaner prop drilling with context where appropriate Dialog Component (shadcn/ui): - Updated to latest component patterns - Improved animation timing and easing - Better focus trap management - Enhanced overlay styling with backdrop blur - Improved accessibility (ARIA labels, keyboard navigation) - Better close button positioning and styling - Enhanced mobile responsiveness - Cleaner composition with DialogHeader/Footer App Component Routing: - Refactored routing logic for better clarity - Improved state management for navigation - Better integration with settings page - Enhanced error boundary handling - Cleaner separation of layout concerns - Improved provider context propagation - Better handling of deep links - Optimized re-renders with React.memo where appropriate Code Quality Improvements: - Reduced prop drilling with better component composition - Improved TypeScript type safety - Better separation of concerns - Enhanced code readability with clearer naming - Eliminated redundant logic Performance Optimizations: - Reduced unnecessary re-renders - Better memoization of callbacks - Optimized component tree structure - Improved event handler efficiency User Experience: - Smoother transitions and animations - Better visual feedback for interactions - Improved loading states - More consistent behavior across features These changes create a more maintainable and performant foundation for the application's UI layer while improving the overall user experience with smoother interactions and better visual polish. * refactor(features): modernize Skills, Prompts and Agents components Major refactoring of feature components to improve code quality, user experience, and maintainability. SkillsPage Component (299 lines refactored): - Complete rewrite of layout and state management - Better integration with RepoManagerPanel - Improved navigation between list and detail views - Enhanced error handling with user-friendly messages - Better loading states with skeleton screens - Optimized re-renders with proper memoization - Cleaner separation between list and form views - Improved skill card interactions - Better responsive design for different screen sizes RepoManagerPanel Component (370 lines refactored): - Streamlined repository management workflow - Enhanced form validation with real-time feedback - Improved repository list with better visual hierarchy - Better handling of git operations (clone, pull, delete) - Enhanced error recovery for network issues - Cleaner state management reducing complexity - Improved TypeScript type safety - Better integration with Skills backend API - Enhanced loading indicators for async operations PromptPanel Component (249 lines refactored): - Modernized layout with FullScreenPanel integration - Better separation between list and edit modes - Improved prompt card design with better readability - Enhanced search and filter functionality - Cleaner state management for editing workflow - Better integration with PromptFormPanel - Improved delete confirmation with safety checks - Enhanced keyboard navigation support PromptFormPanel Component (238 lines refactored): - Streamlined form layout and validation - Better markdown editor integration - Real-time preview with syntax highlighting - Improved validation error display - Enhanced save/cancel workflow - Better handling of large prompt content - Cleaner form state management - Improved accessibility features AgentsPanel Component (33 lines modified): - Minor layout adjustments for consistency - Better integration with FullScreenPanel - Improved placeholder states - Enhanced error boundaries Type Definitions (types.ts): - Added 10 new type definitions - Better type safety for Skills/Prompts/Agents - Enhanced interfaces for repository management - Improved typing for form validations Architecture Improvements: - Reduced component coupling - Better prop interfaces with explicit types - Improved error boundaries - Enhanced code reusability - Better testing surface User Experience Enhancements: - Smoother transitions between views - Better visual feedback for actions - Improved error messages - Enhanced loading states - More intuitive navigation flows - Better responsive layouts Code Quality: - Net reduction of 29 lines while adding features - Improved code organization - Better naming conventions - Enhanced documentation - Cleaner control flow These changes significantly improve the maintainability and user experience of core feature components while establishing consistent patterns for future development. * style(ui): refine component layouts and improve visual consistency Comprehensive UI polish across multiple components to enhance visual design, improve user experience, and maintain consistency. UsageScriptModal Component (1302 lines refactored): - Complete layout overhaul for better usability - Improved script editor with syntax highlighting - Better template selection interface - Enhanced test/preview panels with clearer separation - Improved error feedback and validation messages - Better modal sizing and responsiveness - Cleaner tab navigation between sections - Enhanced code formatting and readability - Improved loading states for async operations - Better integration with parent components MCP Components: - McpFormModal (42 lines): * Streamlined form layout * Better server type selection (stdio/http) * Improved field grouping and labels * Enhanced validation feedback - UnifiedMcpPanel (14 lines): * Minor layout adjustments * Better list item spacing * Improved server status indicators * Enhanced action button placement Provider Components: - ProviderCard (11 lines): * Refined card layout and spacing * Better visual hierarchy * Improved badge placement * Enhanced hover effects - ProviderList (5 lines): * Minor grid layout adjustments * Better drag-and-drop visual feedback - GeminiConfigSections (4 lines): * Field label alignment * Improved spacing consistency Editor & Footer Components: - JsonEditor (13 lines): * Better editor height management * Improved error display * Enhanced syntax highlighting - UsageFooter (10 lines): * Refined footer layout * Better quota display * Improved refresh button placement Settings & Environment: - ImportExportSection (24 lines): * Better button layout * Improved action grouping * Enhanced visual feedback - EnvWarningBanner (4 lines): * Refined alert styling * Better dismiss button placement Global Styles (index.css): - Added 11 lines of utility classes - Improved transition timing - Better focus indicators - Enhanced scrollbar styling - Refined spacing utilities Design Improvements: - Consistent spacing using design tokens - Unified color palette application - Better typography hierarchy - Improved shadow system for depth - Enhanced interactive states (hover, active, focus) - Better border radius consistency - Refined animation timings Accessibility: - Improved focus indicators - Better keyboard navigation - Enhanced screen reader support - Improved color contrast ratios Code Quality: - Net increase of 68 lines due to UsageScriptModal improvements - Better component organization - Cleaner style application - Reduced style duplication These visual refinements create a more polished and professional interface while maintaining excellent usability and accessibility standards across all components. * chore(i18n): add auto-launch translation keys Add translation keys for new auto-launch feature to support multi-language interface. Translation Keys Added: - autoLaunch: Label for auto-launch toggle - autoLaunchDescription: Explanation of auto-launch functionality - autoLaunchEnabled: Status message when enabled Languages Updated: - Chinese (zh.json): 简体中文翻译 - English (en.json): English translations The translations maintain consistency with existing terminology and provide clear, user-friendly descriptions of the auto-launch feature across both supported languages. * test: update test suites to match component refactoring Comprehensive test updates to align with recent component refactoring and new auto-launch functionality. Component Tests: - AddProviderDialog.test.tsx (10 lines): * Updated test cases for new dialog behavior * Enhanced mock data for preset selection * Improved assertions for validation - ImportExportSection.test.tsx (16 lines): * Updated for new settings page integration * Enhanced test coverage for error scenarios * Better mock state management - McpFormModal.test.tsx (60 lines): * Extensive updates for form refactoring * New test cases for multi-app selection * Enhanced validation testing * Better coverage of stdio/http server types - ProviderList.test.tsx (11 lines): * Updated for new card layout * Enhanced drag-and-drop testing - SettingsDialog.test.tsx (96 lines): * Major updates for SettingsPage migration * New test cases for auto-launch functionality * Enhanced integration test coverage * Better async operation testing Hook Tests: - useDirectorySettings.test.tsx (32 lines): * Updated for refactored hook logic * Enhanced test coverage for edge cases - useDragSort.test.tsx (36 lines): * Simplified test cases * Better mock implementation * Improved assertions - useImportExport tests (16 lines total): * Updated for new error handling * Enhanced test coverage - useMcpValidation.test.tsx (23 lines): * Updated validation test cases * Better coverage of error scenarios - useProviderActions.test.tsx (48 lines): * Extensive updates for hook refactoring * New test cases for provider operations * Enhanced mock data - useSettings.test.tsx (12 lines): * New test cases for auto-launch * Enhanced settings state testing * Better async operation coverage Integration Tests: - App.test.tsx (41 lines): * Updated for new routing logic * Enhanced navigation testing * Better component integration coverage - SettingsDialog.test.tsx (88 lines): * Complete rewrite for SettingsPage * New integration test scenarios * Enhanced user workflow testing Mock Infrastructure: - handlers.ts (117 lines): * Major updates for MSW handlers * New handlers for auto-launch commands * Enhanced error simulation * Better request/response mocking - state.ts (37 lines): * Updated mock state structure * New state for auto-launch * Enhanced state reset functionality - tauriMocks.ts (10 lines): * Updated mock implementations * Better type safety - server.ts & testQueryClient.ts: * Minor cleanup (2 lines removed) Test Infrastructure Improvements: - Better test isolation - Enhanced mock data consistency - Improved async operation testing - Better error scenario coverage - Enhanced integration test patterns Coverage Improvements: - Net increase of 195 lines of test code - Better coverage of edge cases - Enhanced error path testing - Improved integration test scenarios - Better mock infrastructure All tests now pass with the refactored components while maintaining comprehensive coverage of functionality and edge cases. * style(ui): improve window dragging and provider card styles * fix(skills): resolve third-party skills installation failure - Add skills_path field to Skill struct - Use skills_path to construct correct source path during installation - Fix installation for repos with custom skill subdirectories * feat(icon): add icon type system and intelligent inference logic Introduce a new icon system for provider customization: - Add IconMetadata and IconPreset interfaces in src/types/icon.ts - Define structure for icon name, display name, category, keywords - Support default color configuration per icon - Implement smart icon inference in src/config/iconInference.ts - Create iconMappings for 25+ AI providers and cloud platforms - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc. - inferIconForPreset(): match provider name to icon config - addIconsToPresets(): batch apply icons to preset arrays - Support fuzzy matching for flexible name recognition This foundation enables automatic icon assignment when users add providers, improving visual identification in the provider list. * feat(ui): add icon picker, color picker and provider icon components Implement comprehensive icon selection system for provider customization: ## New Components ### ProviderIcon (src/components/ProviderIcon.tsx) - Render SVG icons by name with automatic fallback - Display provider initials when icon not found - Support custom sizing via size prop - Use dangerouslySetInnerHTML for inline SVG rendering ### IconPicker (src/components/IconPicker.tsx) - Grid-based icon selection with visual preview - Real-time search filtering by name and keywords - Integration with icon metadata for display names - Responsive grid layout (6-10 columns based on screen) ### ColorPicker (src/components/ColorPicker.tsx) - 12 preset colors for quick selection - Native color input for custom color picking - Hex input field for precise color entry - Visual feedback for selected color state ## Icon Assets (src/icons/extracted/) - 38 high-quality SVG icons for AI providers and platforms - Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc. - Cloud platforms: AWS, Azure, Google Cloud, Cloudflare - Auto-generated index.ts with getIcon/hasIcon helpers - Metadata system with searchable keywords per icon ## Build Scripts - scripts/extract-icons.js: Extract icons from simple-icons - scripts/generate-icon-index.js: Generate TypeScript index file * feat(provider): integrate icon system into provider UI components Add icon customization support to provider management interface: ## Type System Updates ### Provider Interface (src/types.ts) - Add optional `icon` field for icon name (e.g., "openai", "anthropic") - Add optional `iconColor` field for hex color (e.g., "#00A67E") ### Form Schema (src/lib/schemas/provider.ts) - Extend providerSchema with icon and iconColor optional fields - Maintain backward compatibility with existing providers ## UI Components ### ProviderCard (src/components/providers/ProviderCard.tsx) - Display ProviderIcon alongside provider name - Add icon container with hover animation effect - Adjust layout spacing for icon placement - Update translate offsets for action buttons ### BasicFormFields (src/components/providers/forms/BasicFormFields.tsx) - Add icon preview section showing current selection - Implement fullscreen icon picker dialog - Auto-apply default color from icon metadata on selection - Display provider name and icon status in preview ### AddProviderDialog & EditProviderDialog - Pass icon fields through form submission - Preserve icon data during provider updates This enables users to visually distinguish providers in the list with custom icons, improving UX for multi-provider setups. * feat(backend): add icon fields to Provider model and default mappings Extend Rust backend to support provider icon customization: ## Provider Model (src-tauri/src/provider.rs) - Add `icon: Option<String>` field for icon name - Add `icon_color: Option<String>` field for hex color - Use serde rename `iconColor` for frontend compatibility - Apply skip_serializing_if for clean JSON output - Update Provider::new() to initialize icon fields as None ## Provider Defaults (src-tauri/src/provider_defaults.rs) [NEW] - Define ProviderIcon struct with name and color fields - Create DEFAULT_PROVIDER_ICONS static HashMap with 23 providers: - AI providers: OpenAI, Anthropic, Claude, Google, Gemini, DeepSeek, Kimi, Moonshot, Zhipu, MiniMax, Baidu, Alibaba, Tencent, Meta, Microsoft, Cohere, Perplexity, Mistral, HuggingFace - Cloud platforms: AWS, Azure, Huawei, Cloudflare - Implement infer_provider_icon() with exact and fuzzy matching - Add unit tests for matching logic (exact, fuzzy, case-insensitive) ## Deep Link Support (src-tauri/src/deeplink.rs) - Initialize icon fields when creating Provider from deep link import ## Module Registration (src-tauri/src/lib.rs) - Register provider_defaults module ## Dependencies (Cargo.toml) - Add once_cell for lazy static initialization This backend support enables icon persistence and future features like auto-icon inference during provider creation. * chore(i18n): add translations for icon picker and provider icon Add Chinese and English translations for icon customization feature: ## Icon Picker (iconPicker) - search: "Search Icons" / "搜索图标" - searchPlaceholder: "Enter icon name..." / "输入图标名称..." - noResults: "No matching icons found" / "未找到匹配的图标" - category.aiProvider: "AI Providers" / "AI 服务商" - category.cloud: "Cloud Platforms" / "云平台" - category.tool: "Dev Tools" / "开发工具" - category.other: "Other" / "其他" ## Provider Icon (providerIcon) - label: "Icon" / "图标" - colorLabel: "Icon Color" / "图标颜色" - selectIcon: "Select Icon" / "选择图标" - preview: "Preview" / "预览" These translations support the new icon picker UI components and provider form icon selection interface. * style(ui): refine header layout and AppSwitcher color scheme Improve application header and component styling: ## App.tsx Header Layout - Wrap title and settings button in flex container with gap - Add vertical divider between title and settings icon - Apply responsive padding (pl-1 sm:pl-2) - Reformat JSX for better readability (prettier) - Fix string template formatting in className ## AppSwitcher Color Update - Change Claude tab gradient from orange/amber to teal/emerald/green - Update shadow color to match new teal theme - Change hover color from orange-500 to teal-500 - Align visual style with emerald/teal brand colors ## Dialog Component Cleanup - Remove default close button (X icon) from DialogContent - Allow parent components to control close button placement - Remove unused lucide-react X import ## index.css Header Border - Add top border (2px solid) to glass-header - Apply to both light and dark mode variants - Improve visual separation of header area These changes enhance visual consistency and modernize the UI appearance with a cohesive teal color scheme. * chore(deps): add icon library and update preset configurations Add dependencies and utility scripts for icon system: ## Dependencies (package.json) - Add @lobehub/icons-static-svg@1.73.0 - High-quality SVG icon library for AI providers - Source for extracted icons in src/icons/extracted/ - Update pnpm-lock.yaml accordingly ## Provider Preset Updates (src/config/claudeProviderPresets.ts) - Add optional `icon` and `iconColor` fields to ProviderPreset interface - Apply to Anthropic Official preset as example: - icon: "anthropic" - iconColor: "#D4915D" - Future presets can include default icon configurations ## Utility Script (scripts/filter-icons.js) [NEW] - Helper script for filtering and managing icon assets - Supports icon discovery and validation workflow - Complements extract-icons.js and generate-icon-index.js This completes the icon system infrastructure, providing all necessary tools and dependencies for icon customization. * refactor(ui): simplify AppSwitcher styles and migrate to local SVG icons - Replace complex gradient animations with clean, minimal tab design - Migrate from @lobehub/icons CDN to local SVG assets for better reliability - Fix clippy warning in error.rs (use inline format args) - Improve code formatting in skill service and commands - Reduce CSS complexity in AppSwitcher component (removed blur effects and gradients) - Update BrandIcons to use imported local SVG files instead of dynamic image loading This improves performance, reduces external dependencies, and provides a cleaner UI experience. * style(ui): hide scrollbars across all browsers and optimize form layout - Hide scrollbars globally with cross-browser support: * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none } * Firefox: scrollbar-width: none * IE 10+: -ms-overflow-style: none - Remove custom scrollbar styling (width, colors, hover states) - Reorganize BasicFormFields layout: * Move icon picker to top center as a clickable preview (80x80) * Change name and notes fields to horizontal grid layout (md:grid-cols-2) * Remove icon preview section from bottom * Improve visual hierarchy and space efficiency This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality. * refactor(layout): standardize max-width to 60rem and optimize padding structure - Unify container max-width across components: * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list * Replace max-w-5xl with max-w-[60rem] in PromptPanel * Move padding from header element to inner container for consistent spacing - Optimize padding hierarchy: * Remove px-6 from header element, add to inner header container * Remove px-6 from main element, keep it only in provider list container * Consolidate PromptPanel padding: move px-6 from nested divs to outer container * Remove redundant pl-1 sm:pl-2 from logo/title area - Benefits: * Consistent 60rem max-width provides better readability on wide screens * Simplified padding structure reduces CSS complexity * Cleaner responsive behavior with unified spacing rules This creates a more maintainable and visually consistent layout system. * refactor(ui): unify layout system with 60rem max-width and consistent spacing - Standardize container max-width across all panels: * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem] * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel * Ensures consistent reading width and visual balance on wide screens - Optimize padding hierarchy and structure: * Move px-6 from parent elements to content containers * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer * Add border separators (border-t/border-b) to header and footer sections * Consolidate nested padding in MCP, Skills, and Prompts panels * Remove redundant padding layers for cleaner CSS - Simplify component styling: * MCP list items: Replace card-based layout with modern group-based design * Remove unnecessary wrapper divs and flatten DOM structure * Update card hover effects with smooth transitions * Simplify icon selection dialog (remove description text in BasicFormFields) - Benefits: * Consistent 60rem max-width provides optimal readability * Unified spacing rules reduce maintenance complexity * Cleaner component hierarchy improves performance * Better responsive behavior across different screen sizes * More cohesive visual design language throughout the app This creates a maintainable, scalable design system foundation. * feat(deeplink): add Claude model fields support and enhance import dialog - Add Claude-specific model field support in deeplink import: * Support model (ANTHROPIC_MODEL) - general default model * Support haikuModel (ANTHROPIC_DEFAULT_HAIKU_MODEL) * Support sonnetModel (ANTHROPIC_DEFAULT_SONNET_MODEL) * Support opusModel (ANTHROPIC_DEFAULT_OPUS_MODEL) * Backend: Update DeepLinkImportRequest struct to include optional model fields * Frontend: Add TypeScript type definitions for new model parameters - Enhance deeplink demo page (deplink.html): * Add 5 new Claude configuration examples showcasing different model setups * Add parameter documentation with required/optional tags * Include basic config (no models), single model, complete 4-model, partial models, and third-party provider examples * Improve visual design with param-list component and color-coded badges * Add detailed descriptions for each configuration scenario - Redesign DeepLinkImportDialog layout: * Switch from 3-column to compact 2-column grid layout * Reduce dialog width from 500px to 650px for better content display * Add dedicated section for Claude model configurations with blue highlight box * Use uppercase labels and smaller text for more information density * Add truncation and tooltips for long URLs * Improve visual hierarchy with spacing and grouping * Increase z-index to 9999 to ensure dialog appears on top - Minor UI refinements: * Update App.tsx layout adjustments * Optimize McpFormModal styling * Refine ProviderCard and BasicFormFields components This enables users to import Claude providers with precise model configurations via deeplink. * feat(deeplink): add config file support for deeplink import Support importing provider configuration from embedded or remote config files. - Add base64 dependency for config content encoding - Support config, configFormat, and configUrl parameters - Make homepage/endpoint/apiKey optional when config is provided - Add config parsing and merging logic * feat(deeplink): enhance dialog with config file preview Add config file parsing and preview in deep link import dialog. - Support Base64 encoded config display - Add config file source indicator (embedded/remote) - Parse and display config fields by app type (Claude/Codex/Gemini) - Mask sensitive values in config preview - Improve dialog layout and content organization * refactor(ui): unify dialog styles and improve layout consistency Standardize dialog and panel components across the application. - Update dialog background to use semantic color tokens - Adjust FullScreenPanel max-width to 56rem for better alignment - Add drag region and prevent body scroll in full-screen panels - Optimize button sizes and spacing in panel headers - Apply consistent styling to all dialog-based components * i18n: add deeplink config preview translations Add missing translation keys for config file preview feature. - Add configSource, configEmbedded, configRemote labels - Add configDetails and configUrl display strings - Support both Chinese and English versions * feat(deeplink): enhance test page with v3.8 config file examples Improve deeplink test page with comprehensive config file import examples. - Add version badge for v3.8 features - Add copy-to-clipboard functionality for all deep links - Add Claude config file import examples (embedded/remote) - Add Codex config file import examples (auth.json + config.toml) - Add Gemini config file import examples (.env format) - Add config generator tool for easy testing - Update UI with better styling and layout * feat(settings): add autoSaveSettings for lightweight auto-save Add optimized auto-save function for General tab settings. - Add autoSaveSettings method for non-destructive auto-save - Only trigger system APIs when values actually change - Avoid unnecessary auto-launch and plugin config updates - Update tests to cover new functionality * refactor(settings): simplify settings page layout and auto-save Reorganize settings page structure and integrate autoSaveSettings. - Move save button inline within Advanced tab content - Remove sticky footer for cleaner layout - Use autoSaveSettings for General tab settings - Simplify dialog close behavior - Refactor ImportExportSection layout * style(providers): optimize card layout and action button sizes Improve provider card visual density and action buttons. - Reduce icon button sizes for compact layout - Adjust drag handle and icon sizes - Tighten spacing between action buttons - Update hover translate values for better alignment * refactor(mcp): improve form modal layout with adaptive height editor Restructure MCP form modal for better space utilization. - Split form into upper form fields and lower JSON editor sections - Add full-height mode support for JsonEditor component - Use flex layout for editor to fill available space - Update PromptFormPanel to use full-height editor - Fix locale text formatting * style: unify list item styles with semantic colors Apply consistent styling to list items across components. - Replace hardcoded colors with semantic tokens in MCP and Prompt list items - Add glass effect container to EndpointSpeedTest panel - Format code for better readability * style: format template literals for better readability Improve code formatting for conditional className expressions. - Break long template literals across multiple lines - Maintain consistent formatting in MCP form and endpoint test components * feat(deeplink): add config merge command for preview Expose config merging functionality to frontend for preview. - Add merge_deeplink_config Tauri command - Make parse_and_merge_config public for reuse - Enable frontend to display complete config before import * feat(deeplink): merge and display config in import dialog Enhance import dialog to fetch and display complete config. - Call mergeDeeplinkConfig API when config is present - Add UTF-8 base64 decoding support for config content - Add scrollable content area with custom scrollbar styling - Show complete configuration before user confirms import * i18n: add config merge error message Add translation for config file merge error handling. * style(deeplink): format test page HTML for better readability Improve HTML formatting in deeplink test page. - Format multiline attributes for better readability - Add consistent indentation to nested elements - Break long lines in buttons and links * refactor(usage): improve footer layout with two-row design Reorganize usage footer for better readability and space efficiency. - Split into two rows: update time + refresh button (row 1), usage stats (row 2) - Move refresh button to top row next to update time - Remove card background for cleaner look - Add fallback text when never updated - Improve spacing and alignment - Format template literals for consistency
2025-11-22 19:18:35 +08:00
"requestUrl": "Request URL",
"requestUrlPlaceholder": "e.g. https://api.example.com",
"method": "HTTP method",
"templateCustom": "Custom",
"templateGeneral": "General",
"templateNewAPI": "NewAPI",
"credentialsConfig": "Credentials",
"accessToken": "Access Token",
"accessTokenPlaceholder": "Generate in 'Security Settings'",
"userId": "User ID",
"userIdPlaceholder": "e.g., 114514",
"defaultPlan": "Default Plan",
"queryFailedMessage": "Query failed",
"queryScript": "Query script (JavaScript)",
"timeoutSeconds": "Timeout (seconds)",
Refactor/UI (#273) * feat(components): add reusable full-screen panel components Add new full-screen panel components to support the UI refactoring: - FullScreenPanel: Reusable full-screen layout component with header, content area, and optional footer. Provides consistent layout for settings, prompts, and other full-screen views. - PromptFormPanel: Dedicated panel for creating and editing prompts with markdown preview support. Features real-time validation and integrated save/cancel actions. - AgentsPanel: Panel component for managing agent configurations. Provides a consistent interface for agent CRUD operations. - RepoManagerPanel: Full-featured repository manager panel for Skills. Supports repository listing, addition, deletion, and configuration management with integrated validation. These components establish the foundation for the upcoming settings page migration from dialog-based to full-screen layout. * refactor(settings): migrate from dialog to full-screen page layout Complete migration of settings from modal dialog to dedicated full-screen page, improving UX and providing more space for configuration options. Changes: - Remove SettingsDialog component (legacy modal-based interface) - Add SettingsPage component with full-screen layout using FullScreenPanel - Refactor App.tsx routing to support dedicated settings page * Add settings route handler * Update navigation logic from dialog-based to page-based * Integrate with existing app switcher and provider management - Update ImportExportSection to work with new page layout * Improve spacing and layout for better readability * Enhanced error handling and user feedback * Better integration with page-level actions - Enhance useSettings hook to support page-based workflow * Add navigation state management * Improve settings persistence logic * Better error boundary handling Benefits: - More intuitive navigation with dedicated settings page - Better use of screen space for complex configurations - Improved accessibility with clearer visual hierarchy - Consistent with modern desktop application patterns - Easier to extend with new settings sections This change is part of the larger UI refactoring initiative to modernize the application interface and improve user experience. * refactor(forms): simplify and modernize form components Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance. * style(ui): modernize component layouts and visual design Update UI components with improved layouts, visual hierarchy, and modern design patterns for better user experience. Navigation & Brand Components: - AppSwitcher * Enhanced visual design with better spacing * Improved active state indicators * Smoother transitions and hover effects * Better mobile responsiveness - BrandIcons * Optimized icon rendering performance * Added support for more provider icons * Improved SVG handling and fallbacks * Better scaling across different screen sizes Editor Components: - JsonEditor * Enhanced syntax highlighting * Better error visualization * Improved code formatting options * Added line numbers and code folding support - UsageScriptModal * Complete layout overhaul (1239 lines refactored) * Better script editor integration * Improved template selection UI * Enhanced preview and testing panels * Better error feedback and validation Provider Components: - ProviderCard * Redesigned card layout with modern aesthetics * Better information density and readability * Improved action buttons placement * Enhanced status indicators (active/inactive) - ProviderList * Better grid/list view layouts * Improved drag-and-drop visual feedback * Enhanced sorting indicators - ProviderActions * Streamlined action menu * Better icon consistency * Improved tooltips and accessibility Usage & Footer: - UsageFooter * Redesigned footer layout * Better quota visualization * Improved refresh controls * Enhanced error states Design System Updates: - dialog.tsx (shadcn/ui component) * Updated to latest design tokens * Better overlay animations * Improved focus management - index.css * Added 65 lines of global utility classes * New animation keyframes * Enhanced color variables for dark mode * Improved typography scale - tailwind.config.js * Extended theme with new design tokens * Added custom animations and transitions * New spacing and sizing utilities * Enhanced color palette Visual Improvements: - Consistent border radius across components - Unified shadow system for depth perception - Better color contrast for accessibility (WCAG AA) - Smoother animations and transitions - Improved dark mode support These changes create a more polished, modern interface while maintaining consistency with the application's design language. * chore: update dialogs, i18n and improve component integration Various functional updates and improvements across provider dialogs, MCP panel, skills page, and internationalization. Provider Dialogs: - AddProviderDialog * Simplified form state management * Improved preset selection workflow * Better validation error messages * Enhanced template variable handling - EditProviderDialog * Streamlined edit flow with better state synchronization * Improved handling of live config backfilling * Better error recovery for failed updates * Enhanced integration with parent components MCP & Skills: - UnifiedMcpPanel * Reduced complexity from 140+ to ~95 lines * Improved multi-app server management * Better server type detection (stdio/http) * Enhanced server status indicators * Cleaner integration with MCP form modal - SkillsPage * Simplified navigation and state management * Better integration with RepoManagerPanel * Improved error handling for repository operations * Enhanced loading states - SkillCard * Minor layout adjustments * Better action button placement Environment & Configuration: - EnvWarningBanner * Improved conflict detection messages * Better visual hierarchy for warnings * Enhanced dismissal behavior - tauri.conf.json * Updated build configuration * Added new window management options Internationalization: - en.json & zh.json * Added 17 new translation keys for new features * Updated existing keys for better clarity * Added translations for new settings page * Improved consistency across UI text Code Cleanup: - mutations.ts * Removed 14 lines of unused mutation definitions * Cleaned up deprecated query invalidation logic * Better type safety for mutation parameters Overall Impact: - Reduced total lines by 51 (-10% in affected files) - Improved component integration and data flow - Better error handling and user feedback - Enhanced i18n coverage for new features These changes improve the overall polish and integration of various components while removing technical debt and unused code. * feat(backend): add auto-launch functionality Implement system auto-launch feature to allow CC-Switch to start automatically on system boot, improving user convenience. Backend Implementation: - auto_launch.rs: New module for auto-launch management * Cross-platform support using auto-launch crate * Enable/disable auto-launch with system integration * Proper error handling for permission issues * Platform-specific implementations (macOS/Windows/Linux) Command Layer: - Add get_auto_launch command to check current status - Add set_auto_launch command to toggle auto-start - Integrate commands with settings API Settings Integration: - Extend Settings struct with auto_launch field - Persist auto-launch preference in settings store - Automatic state synchronization on app startup Dependencies: - Add auto-launch ^0.5.0 to Cargo.toml - Update Cargo.lock with new dependency tree Technical Details: - Uses platform-specific auto-launch mechanisms: * macOS: Login Items via LaunchServices * Windows: Registry Run key * Linux: XDG autostart desktop files - Handles edge cases like permission denials gracefully - Maintains settings consistency across app restarts This feature enables users to have CC-Switch readily available after system boot without manual intervention, particularly useful for users who frequently switch between API providers. * refactor(settings): enhance settings page with auto-launch integration Complete refactoring of settings page architecture to integrate auto-launch feature and improve overall settings management workflow. SettingsPage Component: - Integrate auto-launch toggle with WindowSettings section - Improve layout and spacing for better visual hierarchy - Enhanced error handling for settings operations - Better loading states during settings updates - Improved accessibility with proper ARIA labels WindowSettings Component: - Add auto-launch switch with real-time status - Integrate with backend auto-launch commands - Proper error feedback for permission issues - Visual indicators for current auto-launch state - Tooltip guidance for auto-launch functionality useSettings Hook (Major Refactoring): - Complete rewrite reducing complexity by ~30% - Better separation of concerns with dedicated handlers - Improved state management using React Query - Enhanced auto-launch state synchronization * Fetch auto-launch status on mount * Real-time updates on toggle * Proper error recovery - Optimized re-renders with better memoization - Cleaner API for component integration - Better TypeScript type safety Settings API: - Add getAutoLaunch() method - Add setAutoLaunch(enabled: boolean) method - Type-safe Tauri command invocations - Proper error propagation to UI layer Architecture Improvements: - Reduced hook complexity from 197 to ~140 effective lines - Eliminated redundant state management logic - Better error boundaries and fallback handling - Improved testability with clearer separation User Experience Enhancements: - Instant visual feedback on auto-launch toggle - Clear error messages for permission issues - Loading indicators during async operations - Consistent behavior across all platforms This refactoring provides a solid foundation for future settings additions while maintaining code quality and user experience. * refactor(ui): optimize FullScreenPanel, Dialog and App routing Comprehensive refactoring of core UI components to improve code quality, maintainability, and user experience. FullScreenPanel Component: - Enhanced props interface with better TypeScript types - Improved layout flexibility with customizable padding - Better header/footer composition patterns - Enhanced scroll behavior for long content - Added support for custom actions in header - Improved responsive design for different screen sizes - Better integration with parent components - Cleaner prop drilling with context where appropriate Dialog Component (shadcn/ui): - Updated to latest component patterns - Improved animation timing and easing - Better focus trap management - Enhanced overlay styling with backdrop blur - Improved accessibility (ARIA labels, keyboard navigation) - Better close button positioning and styling - Enhanced mobile responsiveness - Cleaner composition with DialogHeader/Footer App Component Routing: - Refactored routing logic for better clarity - Improved state management for navigation - Better integration with settings page - Enhanced error boundary handling - Cleaner separation of layout concerns - Improved provider context propagation - Better handling of deep links - Optimized re-renders with React.memo where appropriate Code Quality Improvements: - Reduced prop drilling with better component composition - Improved TypeScript type safety - Better separation of concerns - Enhanced code readability with clearer naming - Eliminated redundant logic Performance Optimizations: - Reduced unnecessary re-renders - Better memoization of callbacks - Optimized component tree structure - Improved event handler efficiency User Experience: - Smoother transitions and animations - Better visual feedback for interactions - Improved loading states - More consistent behavior across features These changes create a more maintainable and performant foundation for the application's UI layer while improving the overall user experience with smoother interactions and better visual polish. * refactor(features): modernize Skills, Prompts and Agents components Major refactoring of feature components to improve code quality, user experience, and maintainability. SkillsPage Component (299 lines refactored): - Complete rewrite of layout and state management - Better integration with RepoManagerPanel - Improved navigation between list and detail views - Enhanced error handling with user-friendly messages - Better loading states with skeleton screens - Optimized re-renders with proper memoization - Cleaner separation between list and form views - Improved skill card interactions - Better responsive design for different screen sizes RepoManagerPanel Component (370 lines refactored): - Streamlined repository management workflow - Enhanced form validation with real-time feedback - Improved repository list with better visual hierarchy - Better handling of git operations (clone, pull, delete) - Enhanced error recovery for network issues - Cleaner state management reducing complexity - Improved TypeScript type safety - Better integration with Skills backend API - Enhanced loading indicators for async operations PromptPanel Component (249 lines refactored): - Modernized layout with FullScreenPanel integration - Better separation between list and edit modes - Improved prompt card design with better readability - Enhanced search and filter functionality - Cleaner state management for editing workflow - Better integration with PromptFormPanel - Improved delete confirmation with safety checks - Enhanced keyboard navigation support PromptFormPanel Component (238 lines refactored): - Streamlined form layout and validation - Better markdown editor integration - Real-time preview with syntax highlighting - Improved validation error display - Enhanced save/cancel workflow - Better handling of large prompt content - Cleaner form state management - Improved accessibility features AgentsPanel Component (33 lines modified): - Minor layout adjustments for consistency - Better integration with FullScreenPanel - Improved placeholder states - Enhanced error boundaries Type Definitions (types.ts): - Added 10 new type definitions - Better type safety for Skills/Prompts/Agents - Enhanced interfaces for repository management - Improved typing for form validations Architecture Improvements: - Reduced component coupling - Better prop interfaces with explicit types - Improved error boundaries - Enhanced code reusability - Better testing surface User Experience Enhancements: - Smoother transitions between views - Better visual feedback for actions - Improved error messages - Enhanced loading states - More intuitive navigation flows - Better responsive layouts Code Quality: - Net reduction of 29 lines while adding features - Improved code organization - Better naming conventions - Enhanced documentation - Cleaner control flow These changes significantly improve the maintainability and user experience of core feature components while establishing consistent patterns for future development. * style(ui): refine component layouts and improve visual consistency Comprehensive UI polish across multiple components to enhance visual design, improve user experience, and maintain consistency. UsageScriptModal Component (1302 lines refactored): - Complete layout overhaul for better usability - Improved script editor with syntax highlighting - Better template selection interface - Enhanced test/preview panels with clearer separation - Improved error feedback and validation messages - Better modal sizing and responsiveness - Cleaner tab navigation between sections - Enhanced code formatting and readability - Improved loading states for async operations - Better integration with parent components MCP Components: - McpFormModal (42 lines): * Streamlined form layout * Better server type selection (stdio/http) * Improved field grouping and labels * Enhanced validation feedback - UnifiedMcpPanel (14 lines): * Minor layout adjustments * Better list item spacing * Improved server status indicators * Enhanced action button placement Provider Components: - ProviderCard (11 lines): * Refined card layout and spacing * Better visual hierarchy * Improved badge placement * Enhanced hover effects - ProviderList (5 lines): * Minor grid layout adjustments * Better drag-and-drop visual feedback - GeminiConfigSections (4 lines): * Field label alignment * Improved spacing consistency Editor & Footer Components: - JsonEditor (13 lines): * Better editor height management * Improved error display * Enhanced syntax highlighting - UsageFooter (10 lines): * Refined footer layout * Better quota display * Improved refresh button placement Settings & Environment: - ImportExportSection (24 lines): * Better button layout * Improved action grouping * Enhanced visual feedback - EnvWarningBanner (4 lines): * Refined alert styling * Better dismiss button placement Global Styles (index.css): - Added 11 lines of utility classes - Improved transition timing - Better focus indicators - Enhanced scrollbar styling - Refined spacing utilities Design Improvements: - Consistent spacing using design tokens - Unified color palette application - Better typography hierarchy - Improved shadow system for depth - Enhanced interactive states (hover, active, focus) - Better border radius consistency - Refined animation timings Accessibility: - Improved focus indicators - Better keyboard navigation - Enhanced screen reader support - Improved color contrast ratios Code Quality: - Net increase of 68 lines due to UsageScriptModal improvements - Better component organization - Cleaner style application - Reduced style duplication These visual refinements create a more polished and professional interface while maintaining excellent usability and accessibility standards across all components. * chore(i18n): add auto-launch translation keys Add translation keys for new auto-launch feature to support multi-language interface. Translation Keys Added: - autoLaunch: Label for auto-launch toggle - autoLaunchDescription: Explanation of auto-launch functionality - autoLaunchEnabled: Status message when enabled Languages Updated: - Chinese (zh.json): 简体中文翻译 - English (en.json): English translations The translations maintain consistency with existing terminology and provide clear, user-friendly descriptions of the auto-launch feature across both supported languages. * test: update test suites to match component refactoring Comprehensive test updates to align with recent component refactoring and new auto-launch functionality. Component Tests: - AddProviderDialog.test.tsx (10 lines): * Updated test cases for new dialog behavior * Enhanced mock data for preset selection * Improved assertions for validation - ImportExportSection.test.tsx (16 lines): * Updated for new settings page integration * Enhanced test coverage for error scenarios * Better mock state management - McpFormModal.test.tsx (60 lines): * Extensive updates for form refactoring * New test cases for multi-app selection * Enhanced validation testing * Better coverage of stdio/http server types - ProviderList.test.tsx (11 lines): * Updated for new card layout * Enhanced drag-and-drop testing - SettingsDialog.test.tsx (96 lines): * Major updates for SettingsPage migration * New test cases for auto-launch functionality * Enhanced integration test coverage * Better async operation testing Hook Tests: - useDirectorySettings.test.tsx (32 lines): * Updated for refactored hook logic * Enhanced test coverage for edge cases - useDragSort.test.tsx (36 lines): * Simplified test cases * Better mock implementation * Improved assertions - useImportExport tests (16 lines total): * Updated for new error handling * Enhanced test coverage - useMcpValidation.test.tsx (23 lines): * Updated validation test cases * Better coverage of error scenarios - useProviderActions.test.tsx (48 lines): * Extensive updates for hook refactoring * New test cases for provider operations * Enhanced mock data - useSettings.test.tsx (12 lines): * New test cases for auto-launch * Enhanced settings state testing * Better async operation coverage Integration Tests: - App.test.tsx (41 lines): * Updated for new routing logic * Enhanced navigation testing * Better component integration coverage - SettingsDialog.test.tsx (88 lines): * Complete rewrite for SettingsPage * New integration test scenarios * Enhanced user workflow testing Mock Infrastructure: - handlers.ts (117 lines): * Major updates for MSW handlers * New handlers for auto-launch commands * Enhanced error simulation * Better request/response mocking - state.ts (37 lines): * Updated mock state structure * New state for auto-launch * Enhanced state reset functionality - tauriMocks.ts (10 lines): * Updated mock implementations * Better type safety - server.ts & testQueryClient.ts: * Minor cleanup (2 lines removed) Test Infrastructure Improvements: - Better test isolation - Enhanced mock data consistency - Improved async operation testing - Better error scenario coverage - Enhanced integration test patterns Coverage Improvements: - Net increase of 195 lines of test code - Better coverage of edge cases - Enhanced error path testing - Improved integration test scenarios - Better mock infrastructure All tests now pass with the refactored components while maintaining comprehensive coverage of functionality and edge cases. * style(ui): improve window dragging and provider card styles * fix(skills): resolve third-party skills installation failure - Add skills_path field to Skill struct - Use skills_path to construct correct source path during installation - Fix installation for repos with custom skill subdirectories * feat(icon): add icon type system and intelligent inference logic Introduce a new icon system for provider customization: - Add IconMetadata and IconPreset interfaces in src/types/icon.ts - Define structure for icon name, display name, category, keywords - Support default color configuration per icon - Implement smart icon inference in src/config/iconInference.ts - Create iconMappings for 25+ AI providers and cloud platforms - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc. - inferIconForPreset(): match provider name to icon config - addIconsToPresets(): batch apply icons to preset arrays - Support fuzzy matching for flexible name recognition This foundation enables automatic icon assignment when users add providers, improving visual identification in the provider list. * feat(ui): add icon picker, color picker and provider icon components Implement comprehensive icon selection system for provider customization: ## New Components ### ProviderIcon (src/components/ProviderIcon.tsx) - Render SVG icons by name with automatic fallback - Display provider initials when icon not found - Support custom sizing via size prop - Use dangerouslySetInnerHTML for inline SVG rendering ### IconPicker (src/components/IconPicker.tsx) - Grid-based icon selection with visual preview - Real-time search filtering by name and keywords - Integration with icon metadata for display names - Responsive grid layout (6-10 columns based on screen) ### ColorPicker (src/components/ColorPicker.tsx) - 12 preset colors for quick selection - Native color input for custom color picking - Hex input field for precise color entry - Visual feedback for selected color state ## Icon Assets (src/icons/extracted/) - 38 high-quality SVG icons for AI providers and platforms - Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc. - Cloud platforms: AWS, Azure, Google Cloud, Cloudflare - Auto-generated index.ts with getIcon/hasIcon helpers - Metadata system with searchable keywords per icon ## Build Scripts - scripts/extract-icons.js: Extract icons from simple-icons - scripts/generate-icon-index.js: Generate TypeScript index file * feat(provider): integrate icon system into provider UI components Add icon customization support to provider management interface: ## Type System Updates ### Provider Interface (src/types.ts) - Add optional `icon` field for icon name (e.g., "openai", "anthropic") - Add optional `iconColor` field for hex color (e.g., "#00A67E") ### Form Schema (src/lib/schemas/provider.ts) - Extend providerSchema with icon and iconColor optional fields - Maintain backward compatibility with existing providers ## UI Components ### ProviderCard (src/components/providers/ProviderCard.tsx) - Display ProviderIcon alongside provider name - Add icon container with hover animation effect - Adjust layout spacing for icon placement - Update translate offsets for action buttons ### BasicFormFields (src/components/providers/forms/BasicFormFields.tsx) - Add icon preview section showing current selection - Implement fullscreen icon picker dialog - Auto-apply default color from icon metadata on selection - Display provider name and icon status in preview ### AddProviderDialog & EditProviderDialog - Pass icon fields through form submission - Preserve icon data during provider updates This enables users to visually distinguish providers in the list with custom icons, improving UX for multi-provider setups. * feat(backend): add icon fields to Provider model and default mappings Extend Rust backend to support provider icon customization: ## Provider Model (src-tauri/src/provider.rs) - Add `icon: Option<String>` field for icon name - Add `icon_color: Option<String>` field for hex color - Use serde rename `iconColor` for frontend compatibility - Apply skip_serializing_if for clean JSON output - Update Provider::new() to initialize icon fields as None ## Provider Defaults (src-tauri/src/provider_defaults.rs) [NEW] - Define ProviderIcon struct with name and color fields - Create DEFAULT_PROVIDER_ICONS static HashMap with 23 providers: - AI providers: OpenAI, Anthropic, Claude, Google, Gemini, DeepSeek, Kimi, Moonshot, Zhipu, MiniMax, Baidu, Alibaba, Tencent, Meta, Microsoft, Cohere, Perplexity, Mistral, HuggingFace - Cloud platforms: AWS, Azure, Huawei, Cloudflare - Implement infer_provider_icon() with exact and fuzzy matching - Add unit tests for matching logic (exact, fuzzy, case-insensitive) ## Deep Link Support (src-tauri/src/deeplink.rs) - Initialize icon fields when creating Provider from deep link import ## Module Registration (src-tauri/src/lib.rs) - Register provider_defaults module ## Dependencies (Cargo.toml) - Add once_cell for lazy static initialization This backend support enables icon persistence and future features like auto-icon inference during provider creation. * chore(i18n): add translations for icon picker and provider icon Add Chinese and English translations for icon customization feature: ## Icon Picker (iconPicker) - search: "Search Icons" / "搜索图标" - searchPlaceholder: "Enter icon name..." / "输入图标名称..." - noResults: "No matching icons found" / "未找到匹配的图标" - category.aiProvider: "AI Providers" / "AI 服务商" - category.cloud: "Cloud Platforms" / "云平台" - category.tool: "Dev Tools" / "开发工具" - category.other: "Other" / "其他" ## Provider Icon (providerIcon) - label: "Icon" / "图标" - colorLabel: "Icon Color" / "图标颜色" - selectIcon: "Select Icon" / "选择图标" - preview: "Preview" / "预览" These translations support the new icon picker UI components and provider form icon selection interface. * style(ui): refine header layout and AppSwitcher color scheme Improve application header and component styling: ## App.tsx Header Layout - Wrap title and settings button in flex container with gap - Add vertical divider between title and settings icon - Apply responsive padding (pl-1 sm:pl-2) - Reformat JSX for better readability (prettier) - Fix string template formatting in className ## AppSwitcher Color Update - Change Claude tab gradient from orange/amber to teal/emerald/green - Update shadow color to match new teal theme - Change hover color from orange-500 to teal-500 - Align visual style with emerald/teal brand colors ## Dialog Component Cleanup - Remove default close button (X icon) from DialogContent - Allow parent components to control close button placement - Remove unused lucide-react X import ## index.css Header Border - Add top border (2px solid) to glass-header - Apply to both light and dark mode variants - Improve visual separation of header area These changes enhance visual consistency and modernize the UI appearance with a cohesive teal color scheme. * chore(deps): add icon library and update preset configurations Add dependencies and utility scripts for icon system: ## Dependencies (package.json) - Add @lobehub/icons-static-svg@1.73.0 - High-quality SVG icon library for AI providers - Source for extracted icons in src/icons/extracted/ - Update pnpm-lock.yaml accordingly ## Provider Preset Updates (src/config/claudeProviderPresets.ts) - Add optional `icon` and `iconColor` fields to ProviderPreset interface - Apply to Anthropic Official preset as example: - icon: "anthropic" - iconColor: "#D4915D" - Future presets can include default icon configurations ## Utility Script (scripts/filter-icons.js) [NEW] - Helper script for filtering and managing icon assets - Supports icon discovery and validation workflow - Complements extract-icons.js and generate-icon-index.js This completes the icon system infrastructure, providing all necessary tools and dependencies for icon customization. * refactor(ui): simplify AppSwitcher styles and migrate to local SVG icons - Replace complex gradient animations with clean, minimal tab design - Migrate from @lobehub/icons CDN to local SVG assets for better reliability - Fix clippy warning in error.rs (use inline format args) - Improve code formatting in skill service and commands - Reduce CSS complexity in AppSwitcher component (removed blur effects and gradients) - Update BrandIcons to use imported local SVG files instead of dynamic image loading This improves performance, reduces external dependencies, and provides a cleaner UI experience. * style(ui): hide scrollbars across all browsers and optimize form layout - Hide scrollbars globally with cross-browser support: * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none } * Firefox: scrollbar-width: none * IE 10+: -ms-overflow-style: none - Remove custom scrollbar styling (width, colors, hover states) - Reorganize BasicFormFields layout: * Move icon picker to top center as a clickable preview (80x80) * Change name and notes fields to horizontal grid layout (md:grid-cols-2) * Remove icon preview section from bottom * Improve visual hierarchy and space efficiency This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality. * refactor(layout): standardize max-width to 60rem and optimize padding structure - Unify container max-width across components: * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list * Replace max-w-5xl with max-w-[60rem] in PromptPanel * Move padding from header element to inner container for consistent spacing - Optimize padding hierarchy: * Remove px-6 from header element, add to inner header container * Remove px-6 from main element, keep it only in provider list container * Consolidate PromptPanel padding: move px-6 from nested divs to outer container * Remove redundant pl-1 sm:pl-2 from logo/title area - Benefits: * Consistent 60rem max-width provides better readability on wide screens * Simplified padding structure reduces CSS complexity * Cleaner responsive behavior with unified spacing rules This creates a more maintainable and visually consistent layout system. * refactor(ui): unify layout system with 60rem max-width and consistent spacing - Standardize container max-width across all panels: * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem] * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel * Ensures consistent reading width and visual balance on wide screens - Optimize padding hierarchy and structure: * Move px-6 from parent elements to content containers * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer * Add border separators (border-t/border-b) to header and footer sections * Consolidate nested padding in MCP, Skills, and Prompts panels * Remove redundant padding layers for cleaner CSS - Simplify component styling: * MCP list items: Replace card-based layout with modern group-based design * Remove unnecessary wrapper divs and flatten DOM structure * Update card hover effects with smooth transitions * Simplify icon selection dialog (remove description text in BasicFormFields) - Benefits: * Consistent 60rem max-width provides optimal readability * Unified spacing rules reduce maintenance complexity * Cleaner component hierarchy improves performance * Better responsive behavior across different screen sizes * More cohesive visual design language throughout the app This creates a maintainable, scalable design system foundation. * feat(deeplink): add Claude model fields support and enhance import dialog - Add Claude-specific model field support in deeplink import: * Support model (ANTHROPIC_MODEL) - general default model * Support haikuModel (ANTHROPIC_DEFAULT_HAIKU_MODEL) * Support sonnetModel (ANTHROPIC_DEFAULT_SONNET_MODEL) * Support opusModel (ANTHROPIC_DEFAULT_OPUS_MODEL) * Backend: Update DeepLinkImportRequest struct to include optional model fields * Frontend: Add TypeScript type definitions for new model parameters - Enhance deeplink demo page (deplink.html): * Add 5 new Claude configuration examples showcasing different model setups * Add parameter documentation with required/optional tags * Include basic config (no models), single model, complete 4-model, partial models, and third-party provider examples * Improve visual design with param-list component and color-coded badges * Add detailed descriptions for each configuration scenario - Redesign DeepLinkImportDialog layout: * Switch from 3-column to compact 2-column grid layout * Reduce dialog width from 500px to 650px for better content display * Add dedicated section for Claude model configurations with blue highlight box * Use uppercase labels and smaller text for more information density * Add truncation and tooltips for long URLs * Improve visual hierarchy with spacing and grouping * Increase z-index to 9999 to ensure dialog appears on top - Minor UI refinements: * Update App.tsx layout adjustments * Optimize McpFormModal styling * Refine ProviderCard and BasicFormFields components This enables users to import Claude providers with precise model configurations via deeplink. * feat(deeplink): add config file support for deeplink import Support importing provider configuration from embedded or remote config files. - Add base64 dependency for config content encoding - Support config, configFormat, and configUrl parameters - Make homepage/endpoint/apiKey optional when config is provided - Add config parsing and merging logic * feat(deeplink): enhance dialog with config file preview Add config file parsing and preview in deep link import dialog. - Support Base64 encoded config display - Add config file source indicator (embedded/remote) - Parse and display config fields by app type (Claude/Codex/Gemini) - Mask sensitive values in config preview - Improve dialog layout and content organization * refactor(ui): unify dialog styles and improve layout consistency Standardize dialog and panel components across the application. - Update dialog background to use semantic color tokens - Adjust FullScreenPanel max-width to 56rem for better alignment - Add drag region and prevent body scroll in full-screen panels - Optimize button sizes and spacing in panel headers - Apply consistent styling to all dialog-based components * i18n: add deeplink config preview translations Add missing translation keys for config file preview feature. - Add configSource, configEmbedded, configRemote labels - Add configDetails and configUrl display strings - Support both Chinese and English versions * feat(deeplink): enhance test page with v3.8 config file examples Improve deeplink test page with comprehensive config file import examples. - Add version badge for v3.8 features - Add copy-to-clipboard functionality for all deep links - Add Claude config file import examples (embedded/remote) - Add Codex config file import examples (auth.json + config.toml) - Add Gemini config file import examples (.env format) - Add config generator tool for easy testing - Update UI with better styling and layout * feat(settings): add autoSaveSettings for lightweight auto-save Add optimized auto-save function for General tab settings. - Add autoSaveSettings method for non-destructive auto-save - Only trigger system APIs when values actually change - Avoid unnecessary auto-launch and plugin config updates - Update tests to cover new functionality * refactor(settings): simplify settings page layout and auto-save Reorganize settings page structure and integrate autoSaveSettings. - Move save button inline within Advanced tab content - Remove sticky footer for cleaner layout - Use autoSaveSettings for General tab settings - Simplify dialog close behavior - Refactor ImportExportSection layout * style(providers): optimize card layout and action button sizes Improve provider card visual density and action buttons. - Reduce icon button sizes for compact layout - Adjust drag handle and icon sizes - Tighten spacing between action buttons - Update hover translate values for better alignment * refactor(mcp): improve form modal layout with adaptive height editor Restructure MCP form modal for better space utilization. - Split form into upper form fields and lower JSON editor sections - Add full-height mode support for JsonEditor component - Use flex layout for editor to fill available space - Update PromptFormPanel to use full-height editor - Fix locale text formatting * style: unify list item styles with semantic colors Apply consistent styling to list items across components. - Replace hardcoded colors with semantic tokens in MCP and Prompt list items - Add glass effect container to EndpointSpeedTest panel - Format code for better readability * style: format template literals for better readability Improve code formatting for conditional className expressions. - Break long template literals across multiple lines - Maintain consistent formatting in MCP form and endpoint test components * feat(deeplink): add config merge command for preview Expose config merging functionality to frontend for preview. - Add merge_deeplink_config Tauri command - Make parse_and_merge_config public for reuse - Enable frontend to display complete config before import * feat(deeplink): merge and display config in import dialog Enhance import dialog to fetch and display complete config. - Call mergeDeeplinkConfig API when config is present - Add UTF-8 base64 decoding support for config content - Add scrollable content area with custom scrollbar styling - Show complete configuration before user confirms import * i18n: add config merge error message Add translation for config file merge error handling. * style(deeplink): format test page HTML for better readability Improve HTML formatting in deeplink test page. - Format multiline attributes for better readability - Add consistent indentation to nested elements - Break long lines in buttons and links * refactor(usage): improve footer layout with two-row design Reorganize usage footer for better readability and space efficiency. - Split into two rows: update time + refresh button (row 1), usage stats (row 2) - Move refresh button to top row next to update time - Remove card background for cleaner look - Add fallback text when never updated - Improve spacing and alignment - Format template literals for consistency
2025-11-22 19:18:35 +08:00
"headers": "Headers",
"body": "Body",
"timeoutHint": "Range: 2-30 seconds",
"timeoutMustBeInteger": "Timeout must be an integer, decimal part ignored",
"timeoutCannotBeNegative": "Timeout cannot be negative",
Refactor/UI (#273) * feat(components): add reusable full-screen panel components Add new full-screen panel components to support the UI refactoring: - FullScreenPanel: Reusable full-screen layout component with header, content area, and optional footer. Provides consistent layout for settings, prompts, and other full-screen views. - PromptFormPanel: Dedicated panel for creating and editing prompts with markdown preview support. Features real-time validation and integrated save/cancel actions. - AgentsPanel: Panel component for managing agent configurations. Provides a consistent interface for agent CRUD operations. - RepoManagerPanel: Full-featured repository manager panel for Skills. Supports repository listing, addition, deletion, and configuration management with integrated validation. These components establish the foundation for the upcoming settings page migration from dialog-based to full-screen layout. * refactor(settings): migrate from dialog to full-screen page layout Complete migration of settings from modal dialog to dedicated full-screen page, improving UX and providing more space for configuration options. Changes: - Remove SettingsDialog component (legacy modal-based interface) - Add SettingsPage component with full-screen layout using FullScreenPanel - Refactor App.tsx routing to support dedicated settings page * Add settings route handler * Update navigation logic from dialog-based to page-based * Integrate with existing app switcher and provider management - Update ImportExportSection to work with new page layout * Improve spacing and layout for better readability * Enhanced error handling and user feedback * Better integration with page-level actions - Enhance useSettings hook to support page-based workflow * Add navigation state management * Improve settings persistence logic * Better error boundary handling Benefits: - More intuitive navigation with dedicated settings page - Better use of screen space for complex configurations - Improved accessibility with clearer visual hierarchy - Consistent with modern desktop application patterns - Easier to extend with new settings sections This change is part of the larger UI refactoring initiative to modernize the application interface and improve user experience. * refactor(forms): simplify and modernize form components Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance. * style(ui): modernize component layouts and visual design Update UI components with improved layouts, visual hierarchy, and modern design patterns for better user experience. Navigation & Brand Components: - AppSwitcher * Enhanced visual design with better spacing * Improved active state indicators * Smoother transitions and hover effects * Better mobile responsiveness - BrandIcons * Optimized icon rendering performance * Added support for more provider icons * Improved SVG handling and fallbacks * Better scaling across different screen sizes Editor Components: - JsonEditor * Enhanced syntax highlighting * Better error visualization * Improved code formatting options * Added line numbers and code folding support - UsageScriptModal * Complete layout overhaul (1239 lines refactored) * Better script editor integration * Improved template selection UI * Enhanced preview and testing panels * Better error feedback and validation Provider Components: - ProviderCard * Redesigned card layout with modern aesthetics * Better information density and readability * Improved action buttons placement * Enhanced status indicators (active/inactive) - ProviderList * Better grid/list view layouts * Improved drag-and-drop visual feedback * Enhanced sorting indicators - ProviderActions * Streamlined action menu * Better icon consistency * Improved tooltips and accessibility Usage & Footer: - UsageFooter * Redesigned footer layout * Better quota visualization * Improved refresh controls * Enhanced error states Design System Updates: - dialog.tsx (shadcn/ui component) * Updated to latest design tokens * Better overlay animations * Improved focus management - index.css * Added 65 lines of global utility classes * New animation keyframes * Enhanced color variables for dark mode * Improved typography scale - tailwind.config.js * Extended theme with new design tokens * Added custom animations and transitions * New spacing and sizing utilities * Enhanced color palette Visual Improvements: - Consistent border radius across components - Unified shadow system for depth perception - Better color contrast for accessibility (WCAG AA) - Smoother animations and transitions - Improved dark mode support These changes create a more polished, modern interface while maintaining consistency with the application's design language. * chore: update dialogs, i18n and improve component integration Various functional updates and improvements across provider dialogs, MCP panel, skills page, and internationalization. Provider Dialogs: - AddProviderDialog * Simplified form state management * Improved preset selection workflow * Better validation error messages * Enhanced template variable handling - EditProviderDialog * Streamlined edit flow with better state synchronization * Improved handling of live config backfilling * Better error recovery for failed updates * Enhanced integration with parent components MCP & Skills: - UnifiedMcpPanel * Reduced complexity from 140+ to ~95 lines * Improved multi-app server management * Better server type detection (stdio/http) * Enhanced server status indicators * Cleaner integration with MCP form modal - SkillsPage * Simplified navigation and state management * Better integration with RepoManagerPanel * Improved error handling for repository operations * Enhanced loading states - SkillCard * Minor layout adjustments * Better action button placement Environment & Configuration: - EnvWarningBanner * Improved conflict detection messages * Better visual hierarchy for warnings * Enhanced dismissal behavior - tauri.conf.json * Updated build configuration * Added new window management options Internationalization: - en.json & zh.json * Added 17 new translation keys for new features * Updated existing keys for better clarity * Added translations for new settings page * Improved consistency across UI text Code Cleanup: - mutations.ts * Removed 14 lines of unused mutation definitions * Cleaned up deprecated query invalidation logic * Better type safety for mutation parameters Overall Impact: - Reduced total lines by 51 (-10% in affected files) - Improved component integration and data flow - Better error handling and user feedback - Enhanced i18n coverage for new features These changes improve the overall polish and integration of various components while removing technical debt and unused code. * feat(backend): add auto-launch functionality Implement system auto-launch feature to allow CC-Switch to start automatically on system boot, improving user convenience. Backend Implementation: - auto_launch.rs: New module for auto-launch management * Cross-platform support using auto-launch crate * Enable/disable auto-launch with system integration * Proper error handling for permission issues * Platform-specific implementations (macOS/Windows/Linux) Command Layer: - Add get_auto_launch command to check current status - Add set_auto_launch command to toggle auto-start - Integrate commands with settings API Settings Integration: - Extend Settings struct with auto_launch field - Persist auto-launch preference in settings store - Automatic state synchronization on app startup Dependencies: - Add auto-launch ^0.5.0 to Cargo.toml - Update Cargo.lock with new dependency tree Technical Details: - Uses platform-specific auto-launch mechanisms: * macOS: Login Items via LaunchServices * Windows: Registry Run key * Linux: XDG autostart desktop files - Handles edge cases like permission denials gracefully - Maintains settings consistency across app restarts This feature enables users to have CC-Switch readily available after system boot without manual intervention, particularly useful for users who frequently switch between API providers. * refactor(settings): enhance settings page with auto-launch integration Complete refactoring of settings page architecture to integrate auto-launch feature and improve overall settings management workflow. SettingsPage Component: - Integrate auto-launch toggle with WindowSettings section - Improve layout and spacing for better visual hierarchy - Enhanced error handling for settings operations - Better loading states during settings updates - Improved accessibility with proper ARIA labels WindowSettings Component: - Add auto-launch switch with real-time status - Integrate with backend auto-launch commands - Proper error feedback for permission issues - Visual indicators for current auto-launch state - Tooltip guidance for auto-launch functionality useSettings Hook (Major Refactoring): - Complete rewrite reducing complexity by ~30% - Better separation of concerns with dedicated handlers - Improved state management using React Query - Enhanced auto-launch state synchronization * Fetch auto-launch status on mount * Real-time updates on toggle * Proper error recovery - Optimized re-renders with better memoization - Cleaner API for component integration - Better TypeScript type safety Settings API: - Add getAutoLaunch() method - Add setAutoLaunch(enabled: boolean) method - Type-safe Tauri command invocations - Proper error propagation to UI layer Architecture Improvements: - Reduced hook complexity from 197 to ~140 effective lines - Eliminated redundant state management logic - Better error boundaries and fallback handling - Improved testability with clearer separation User Experience Enhancements: - Instant visual feedback on auto-launch toggle - Clear error messages for permission issues - Loading indicators during async operations - Consistent behavior across all platforms This refactoring provides a solid foundation for future settings additions while maintaining code quality and user experience. * refactor(ui): optimize FullScreenPanel, Dialog and App routing Comprehensive refactoring of core UI components to improve code quality, maintainability, and user experience. FullScreenPanel Component: - Enhanced props interface with better TypeScript types - Improved layout flexibility with customizable padding - Better header/footer composition patterns - Enhanced scroll behavior for long content - Added support for custom actions in header - Improved responsive design for different screen sizes - Better integration with parent components - Cleaner prop drilling with context where appropriate Dialog Component (shadcn/ui): - Updated to latest component patterns - Improved animation timing and easing - Better focus trap management - Enhanced overlay styling with backdrop blur - Improved accessibility (ARIA labels, keyboard navigation) - Better close button positioning and styling - Enhanced mobile responsiveness - Cleaner composition with DialogHeader/Footer App Component Routing: - Refactored routing logic for better clarity - Improved state management for navigation - Better integration with settings page - Enhanced error boundary handling - Cleaner separation of layout concerns - Improved provider context propagation - Better handling of deep links - Optimized re-renders with React.memo where appropriate Code Quality Improvements: - Reduced prop drilling with better component composition - Improved TypeScript type safety - Better separation of concerns - Enhanced code readability with clearer naming - Eliminated redundant logic Performance Optimizations: - Reduced unnecessary re-renders - Better memoization of callbacks - Optimized component tree structure - Improved event handler efficiency User Experience: - Smoother transitions and animations - Better visual feedback for interactions - Improved loading states - More consistent behavior across features These changes create a more maintainable and performant foundation for the application's UI layer while improving the overall user experience with smoother interactions and better visual polish. * refactor(features): modernize Skills, Prompts and Agents components Major refactoring of feature components to improve code quality, user experience, and maintainability. SkillsPage Component (299 lines refactored): - Complete rewrite of layout and state management - Better integration with RepoManagerPanel - Improved navigation between list and detail views - Enhanced error handling with user-friendly messages - Better loading states with skeleton screens - Optimized re-renders with proper memoization - Cleaner separation between list and form views - Improved skill card interactions - Better responsive design for different screen sizes RepoManagerPanel Component (370 lines refactored): - Streamlined repository management workflow - Enhanced form validation with real-time feedback - Improved repository list with better visual hierarchy - Better handling of git operations (clone, pull, delete) - Enhanced error recovery for network issues - Cleaner state management reducing complexity - Improved TypeScript type safety - Better integration with Skills backend API - Enhanced loading indicators for async operations PromptPanel Component (249 lines refactored): - Modernized layout with FullScreenPanel integration - Better separation between list and edit modes - Improved prompt card design with better readability - Enhanced search and filter functionality - Cleaner state management for editing workflow - Better integration with PromptFormPanel - Improved delete confirmation with safety checks - Enhanced keyboard navigation support PromptFormPanel Component (238 lines refactored): - Streamlined form layout and validation - Better markdown editor integration - Real-time preview with syntax highlighting - Improved validation error display - Enhanced save/cancel workflow - Better handling of large prompt content - Cleaner form state management - Improved accessibility features AgentsPanel Component (33 lines modified): - Minor layout adjustments for consistency - Better integration with FullScreenPanel - Improved placeholder states - Enhanced error boundaries Type Definitions (types.ts): - Added 10 new type definitions - Better type safety for Skills/Prompts/Agents - Enhanced interfaces for repository management - Improved typing for form validations Architecture Improvements: - Reduced component coupling - Better prop interfaces with explicit types - Improved error boundaries - Enhanced code reusability - Better testing surface User Experience Enhancements: - Smoother transitions between views - Better visual feedback for actions - Improved error messages - Enhanced loading states - More intuitive navigation flows - Better responsive layouts Code Quality: - Net reduction of 29 lines while adding features - Improved code organization - Better naming conventions - Enhanced documentation - Cleaner control flow These changes significantly improve the maintainability and user experience of core feature components while establishing consistent patterns for future development. * style(ui): refine component layouts and improve visual consistency Comprehensive UI polish across multiple components to enhance visual design, improve user experience, and maintain consistency. UsageScriptModal Component (1302 lines refactored): - Complete layout overhaul for better usability - Improved script editor with syntax highlighting - Better template selection interface - Enhanced test/preview panels with clearer separation - Improved error feedback and validation messages - Better modal sizing and responsiveness - Cleaner tab navigation between sections - Enhanced code formatting and readability - Improved loading states for async operations - Better integration with parent components MCP Components: - McpFormModal (42 lines): * Streamlined form layout * Better server type selection (stdio/http) * Improved field grouping and labels * Enhanced validation feedback - UnifiedMcpPanel (14 lines): * Minor layout adjustments * Better list item spacing * Improved server status indicators * Enhanced action button placement Provider Components: - ProviderCard (11 lines): * Refined card layout and spacing * Better visual hierarchy * Improved badge placement * Enhanced hover effects - ProviderList (5 lines): * Minor grid layout adjustments * Better drag-and-drop visual feedback - GeminiConfigSections (4 lines): * Field label alignment * Improved spacing consistency Editor & Footer Components: - JsonEditor (13 lines): * Better editor height management * Improved error display * Enhanced syntax highlighting - UsageFooter (10 lines): * Refined footer layout * Better quota display * Improved refresh button placement Settings & Environment: - ImportExportSection (24 lines): * Better button layout * Improved action grouping * Enhanced visual feedback - EnvWarningBanner (4 lines): * Refined alert styling * Better dismiss button placement Global Styles (index.css): - Added 11 lines of utility classes - Improved transition timing - Better focus indicators - Enhanced scrollbar styling - Refined spacing utilities Design Improvements: - Consistent spacing using design tokens - Unified color palette application - Better typography hierarchy - Improved shadow system for depth - Enhanced interactive states (hover, active, focus) - Better border radius consistency - Refined animation timings Accessibility: - Improved focus indicators - Better keyboard navigation - Enhanced screen reader support - Improved color contrast ratios Code Quality: - Net increase of 68 lines due to UsageScriptModal improvements - Better component organization - Cleaner style application - Reduced style duplication These visual refinements create a more polished and professional interface while maintaining excellent usability and accessibility standards across all components. * chore(i18n): add auto-launch translation keys Add translation keys for new auto-launch feature to support multi-language interface. Translation Keys Added: - autoLaunch: Label for auto-launch toggle - autoLaunchDescription: Explanation of auto-launch functionality - autoLaunchEnabled: Status message when enabled Languages Updated: - Chinese (zh.json): 简体中文翻译 - English (en.json): English translations The translations maintain consistency with existing terminology and provide clear, user-friendly descriptions of the auto-launch feature across both supported languages. * test: update test suites to match component refactoring Comprehensive test updates to align with recent component refactoring and new auto-launch functionality. Component Tests: - AddProviderDialog.test.tsx (10 lines): * Updated test cases for new dialog behavior * Enhanced mock data for preset selection * Improved assertions for validation - ImportExportSection.test.tsx (16 lines): * Updated for new settings page integration * Enhanced test coverage for error scenarios * Better mock state management - McpFormModal.test.tsx (60 lines): * Extensive updates for form refactoring * New test cases for multi-app selection * Enhanced validation testing * Better coverage of stdio/http server types - ProviderList.test.tsx (11 lines): * Updated for new card layout * Enhanced drag-and-drop testing - SettingsDialog.test.tsx (96 lines): * Major updates for SettingsPage migration * New test cases for auto-launch functionality * Enhanced integration test coverage * Better async operation testing Hook Tests: - useDirectorySettings.test.tsx (32 lines): * Updated for refactored hook logic * Enhanced test coverage for edge cases - useDragSort.test.tsx (36 lines): * Simplified test cases * Better mock implementation * Improved assertions - useImportExport tests (16 lines total): * Updated for new error handling * Enhanced test coverage - useMcpValidation.test.tsx (23 lines): * Updated validation test cases * Better coverage of error scenarios - useProviderActions.test.tsx (48 lines): * Extensive updates for hook refactoring * New test cases for provider operations * Enhanced mock data - useSettings.test.tsx (12 lines): * New test cases for auto-launch * Enhanced settings state testing * Better async operation coverage Integration Tests: - App.test.tsx (41 lines): * Updated for new routing logic * Enhanced navigation testing * Better component integration coverage - SettingsDialog.test.tsx (88 lines): * Complete rewrite for SettingsPage * New integration test scenarios * Enhanced user workflow testing Mock Infrastructure: - handlers.ts (117 lines): * Major updates for MSW handlers * New handlers for auto-launch commands * Enhanced error simulation * Better request/response mocking - state.ts (37 lines): * Updated mock state structure * New state for auto-launch * Enhanced state reset functionality - tauriMocks.ts (10 lines): * Updated mock implementations * Better type safety - server.ts & testQueryClient.ts: * Minor cleanup (2 lines removed) Test Infrastructure Improvements: - Better test isolation - Enhanced mock data consistency - Improved async operation testing - Better error scenario coverage - Enhanced integration test patterns Coverage Improvements: - Net increase of 195 lines of test code - Better coverage of edge cases - Enhanced error path testing - Improved integration test scenarios - Better mock infrastructure All tests now pass with the refactored components while maintaining comprehensive coverage of functionality and edge cases. * style(ui): improve window dragging and provider card styles * fix(skills): resolve third-party skills installation failure - Add skills_path field to Skill struct - Use skills_path to construct correct source path during installation - Fix installation for repos with custom skill subdirectories * feat(icon): add icon type system and intelligent inference logic Introduce a new icon system for provider customization: - Add IconMetadata and IconPreset interfaces in src/types/icon.ts - Define structure for icon name, display name, category, keywords - Support default color configuration per icon - Implement smart icon inference in src/config/iconInference.ts - Create iconMappings for 25+ AI providers and cloud platforms - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc. - inferIconForPreset(): match provider name to icon config - addIconsToPresets(): batch apply icons to preset arrays - Support fuzzy matching for flexible name recognition This foundation enables automatic icon assignment when users add providers, improving visual identification in the provider list. * feat(ui): add icon picker, color picker and provider icon components Implement comprehensive icon selection system for provider customization: ## New Components ### ProviderIcon (src/components/ProviderIcon.tsx) - Render SVG icons by name with automatic fallback - Display provider initials when icon not found - Support custom sizing via size prop - Use dangerouslySetInnerHTML for inline SVG rendering ### IconPicker (src/components/IconPicker.tsx) - Grid-based icon selection with visual preview - Real-time search filtering by name and keywords - Integration with icon metadata for display names - Responsive grid layout (6-10 columns based on screen) ### ColorPicker (src/components/ColorPicker.tsx) - 12 preset colors for quick selection - Native color input for custom color picking - Hex input field for precise color entry - Visual feedback for selected color state ## Icon Assets (src/icons/extracted/) - 38 high-quality SVG icons for AI providers and platforms - Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc. - Cloud platforms: AWS, Azure, Google Cloud, Cloudflare - Auto-generated index.ts with getIcon/hasIcon helpers - Metadata system with searchable keywords per icon ## Build Scripts - scripts/extract-icons.js: Extract icons from simple-icons - scripts/generate-icon-index.js: Generate TypeScript index file * feat(provider): integrate icon system into provider UI components Add icon customization support to provider management interface: ## Type System Updates ### Provider Interface (src/types.ts) - Add optional `icon` field for icon name (e.g., "openai", "anthropic") - Add optional `iconColor` field for hex color (e.g., "#00A67E") ### Form Schema (src/lib/schemas/provider.ts) - Extend providerSchema with icon and iconColor optional fields - Maintain backward compatibility with existing providers ## UI Components ### ProviderCard (src/components/providers/ProviderCard.tsx) - Display ProviderIcon alongside provider name - Add icon container with hover animation effect - Adjust layout spacing for icon placement - Update translate offsets for action buttons ### BasicFormFields (src/components/providers/forms/BasicFormFields.tsx) - Add icon preview section showing current selection - Implement fullscreen icon picker dialog - Auto-apply default color from icon metadata on selection - Display provider name and icon status in preview ### AddProviderDialog & EditProviderDialog - Pass icon fields through form submission - Preserve icon data during provider updates This enables users to visually distinguish providers in the list with custom icons, improving UX for multi-provider setups. * feat(backend): add icon fields to Provider model and default mappings Extend Rust backend to support provider icon customization: ## Provider Model (src-tauri/src/provider.rs) - Add `icon: Option<String>` field for icon name - Add `icon_color: Option<String>` field for hex color - Use serde rename `iconColor` for frontend compatibility - Apply skip_serializing_if for clean JSON output - Update Provider::new() to initialize icon fields as None ## Provider Defaults (src-tauri/src/provider_defaults.rs) [NEW] - Define ProviderIcon struct with name and color fields - Create DEFAULT_PROVIDER_ICONS static HashMap with 23 providers: - AI providers: OpenAI, Anthropic, Claude, Google, Gemini, DeepSeek, Kimi, Moonshot, Zhipu, MiniMax, Baidu, Alibaba, Tencent, Meta, Microsoft, Cohere, Perplexity, Mistral, HuggingFace - Cloud platforms: AWS, Azure, Huawei, Cloudflare - Implement infer_provider_icon() with exact and fuzzy matching - Add unit tests for matching logic (exact, fuzzy, case-insensitive) ## Deep Link Support (src-tauri/src/deeplink.rs) - Initialize icon fields when creating Provider from deep link import ## Module Registration (src-tauri/src/lib.rs) - Register provider_defaults module ## Dependencies (Cargo.toml) - Add once_cell for lazy static initialization This backend support enables icon persistence and future features like auto-icon inference during provider creation. * chore(i18n): add translations for icon picker and provider icon Add Chinese and English translations for icon customization feature: ## Icon Picker (iconPicker) - search: "Search Icons" / "搜索图标" - searchPlaceholder: "Enter icon name..." / "输入图标名称..." - noResults: "No matching icons found" / "未找到匹配的图标" - category.aiProvider: "AI Providers" / "AI 服务商" - category.cloud: "Cloud Platforms" / "云平台" - category.tool: "Dev Tools" / "开发工具" - category.other: "Other" / "其他" ## Provider Icon (providerIcon) - label: "Icon" / "图标" - colorLabel: "Icon Color" / "图标颜色" - selectIcon: "Select Icon" / "选择图标" - preview: "Preview" / "预览" These translations support the new icon picker UI components and provider form icon selection interface. * style(ui): refine header layout and AppSwitcher color scheme Improve application header and component styling: ## App.tsx Header Layout - Wrap title and settings button in flex container with gap - Add vertical divider between title and settings icon - Apply responsive padding (pl-1 sm:pl-2) - Reformat JSX for better readability (prettier) - Fix string template formatting in className ## AppSwitcher Color Update - Change Claude tab gradient from orange/amber to teal/emerald/green - Update shadow color to match new teal theme - Change hover color from orange-500 to teal-500 - Align visual style with emerald/teal brand colors ## Dialog Component Cleanup - Remove default close button (X icon) from DialogContent - Allow parent components to control close button placement - Remove unused lucide-react X import ## index.css Header Border - Add top border (2px solid) to glass-header - Apply to both light and dark mode variants - Improve visual separation of header area These changes enhance visual consistency and modernize the UI appearance with a cohesive teal color scheme. * chore(deps): add icon library and update preset configurations Add dependencies and utility scripts for icon system: ## Dependencies (package.json) - Add @lobehub/icons-static-svg@1.73.0 - High-quality SVG icon library for AI providers - Source for extracted icons in src/icons/extracted/ - Update pnpm-lock.yaml accordingly ## Provider Preset Updates (src/config/claudeProviderPresets.ts) - Add optional `icon` and `iconColor` fields to ProviderPreset interface - Apply to Anthropic Official preset as example: - icon: "anthropic" - iconColor: "#D4915D" - Future presets can include default icon configurations ## Utility Script (scripts/filter-icons.js) [NEW] - Helper script for filtering and managing icon assets - Supports icon discovery and validation workflow - Complements extract-icons.js and generate-icon-index.js This completes the icon system infrastructure, providing all necessary tools and dependencies for icon customization. * refactor(ui): simplify AppSwitcher styles and migrate to local SVG icons - Replace complex gradient animations with clean, minimal tab design - Migrate from @lobehub/icons CDN to local SVG assets for better reliability - Fix clippy warning in error.rs (use inline format args) - Improve code formatting in skill service and commands - Reduce CSS complexity in AppSwitcher component (removed blur effects and gradients) - Update BrandIcons to use imported local SVG files instead of dynamic image loading This improves performance, reduces external dependencies, and provides a cleaner UI experience. * style(ui): hide scrollbars across all browsers and optimize form layout - Hide scrollbars globally with cross-browser support: * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none } * Firefox: scrollbar-width: none * IE 10+: -ms-overflow-style: none - Remove custom scrollbar styling (width, colors, hover states) - Reorganize BasicFormFields layout: * Move icon picker to top center as a clickable preview (80x80) * Change name and notes fields to horizontal grid layout (md:grid-cols-2) * Remove icon preview section from bottom * Improve visual hierarchy and space efficiency This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality. * refactor(layout): standardize max-width to 60rem and optimize padding structure - Unify container max-width across components: * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list * Replace max-w-5xl with max-w-[60rem] in PromptPanel * Move padding from header element to inner container for consistent spacing - Optimize padding hierarchy: * Remove px-6 from header element, add to inner header container * Remove px-6 from main element, keep it only in provider list container * Consolidate PromptPanel padding: move px-6 from nested divs to outer container * Remove redundant pl-1 sm:pl-2 from logo/title area - Benefits: * Consistent 60rem max-width provides better readability on wide screens * Simplified padding structure reduces CSS complexity * Cleaner responsive behavior with unified spacing rules This creates a more maintainable and visually consistent layout system. * refactor(ui): unify layout system with 60rem max-width and consistent spacing - Standardize container max-width across all panels: * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem] * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel * Ensures consistent reading width and visual balance on wide screens - Optimize padding hierarchy and structure: * Move px-6 from parent elements to content containers * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer * Add border separators (border-t/border-b) to header and footer sections * Consolidate nested padding in MCP, Skills, and Prompts panels * Remove redundant padding layers for cleaner CSS - Simplify component styling: * MCP list items: Replace card-based layout with modern group-based design * Remove unnecessary wrapper divs and flatten DOM structure * Update card hover effects with smooth transitions * Simplify icon selection dialog (remove description text in BasicFormFields) - Benefits: * Consistent 60rem max-width provides optimal readability * Unified spacing rules reduce maintenance complexity * Cleaner component hierarchy improves performance * Better responsive behavior across different screen sizes * More cohesive visual design language throughout the app This creates a maintainable, scalable design system foundation. * feat(deeplink): add Claude model fields support and enhance import dialog - Add Claude-specific model field support in deeplink import: * Support model (ANTHROPIC_MODEL) - general default model * Support haikuModel (ANTHROPIC_DEFAULT_HAIKU_MODEL) * Support sonnetModel (ANTHROPIC_DEFAULT_SONNET_MODEL) * Support opusModel (ANTHROPIC_DEFAULT_OPUS_MODEL) * Backend: Update DeepLinkImportRequest struct to include optional model fields * Frontend: Add TypeScript type definitions for new model parameters - Enhance deeplink demo page (deplink.html): * Add 5 new Claude configuration examples showcasing different model setups * Add parameter documentation with required/optional tags * Include basic config (no models), single model, complete 4-model, partial models, and third-party provider examples * Improve visual design with param-list component and color-coded badges * Add detailed descriptions for each configuration scenario - Redesign DeepLinkImportDialog layout: * Switch from 3-column to compact 2-column grid layout * Reduce dialog width from 500px to 650px for better content display * Add dedicated section for Claude model configurations with blue highlight box * Use uppercase labels and smaller text for more information density * Add truncation and tooltips for long URLs * Improve visual hierarchy with spacing and grouping * Increase z-index to 9999 to ensure dialog appears on top - Minor UI refinements: * Update App.tsx layout adjustments * Optimize McpFormModal styling * Refine ProviderCard and BasicFormFields components This enables users to import Claude providers with precise model configurations via deeplink. * feat(deeplink): add config file support for deeplink import Support importing provider configuration from embedded or remote config files. - Add base64 dependency for config content encoding - Support config, configFormat, and configUrl parameters - Make homepage/endpoint/apiKey optional when config is provided - Add config parsing and merging logic * feat(deeplink): enhance dialog with config file preview Add config file parsing and preview in deep link import dialog. - Support Base64 encoded config display - Add config file source indicator (embedded/remote) - Parse and display config fields by app type (Claude/Codex/Gemini) - Mask sensitive values in config preview - Improve dialog layout and content organization * refactor(ui): unify dialog styles and improve layout consistency Standardize dialog and panel components across the application. - Update dialog background to use semantic color tokens - Adjust FullScreenPanel max-width to 56rem for better alignment - Add drag region and prevent body scroll in full-screen panels - Optimize button sizes and spacing in panel headers - Apply consistent styling to all dialog-based components * i18n: add deeplink config preview translations Add missing translation keys for config file preview feature. - Add configSource, configEmbedded, configRemote labels - Add configDetails and configUrl display strings - Support both Chinese and English versions * feat(deeplink): enhance test page with v3.8 config file examples Improve deeplink test page with comprehensive config file import examples. - Add version badge for v3.8 features - Add copy-to-clipboard functionality for all deep links - Add Claude config file import examples (embedded/remote) - Add Codex config file import examples (auth.json + config.toml) - Add Gemini config file import examples (.env format) - Add config generator tool for easy testing - Update UI with better styling and layout * feat(settings): add autoSaveSettings for lightweight auto-save Add optimized auto-save function for General tab settings. - Add autoSaveSettings method for non-destructive auto-save - Only trigger system APIs when values actually change - Avoid unnecessary auto-launch and plugin config updates - Update tests to cover new functionality * refactor(settings): simplify settings page layout and auto-save Reorganize settings page structure and integrate autoSaveSettings. - Move save button inline within Advanced tab content - Remove sticky footer for cleaner layout - Use autoSaveSettings for General tab settings - Simplify dialog close behavior - Refactor ImportExportSection layout * style(providers): optimize card layout and action button sizes Improve provider card visual density and action buttons. - Reduce icon button sizes for compact layout - Adjust drag handle and icon sizes - Tighten spacing between action buttons - Update hover translate values for better alignment * refactor(mcp): improve form modal layout with adaptive height editor Restructure MCP form modal for better space utilization. - Split form into upper form fields and lower JSON editor sections - Add full-height mode support for JsonEditor component - Use flex layout for editor to fill available space - Update PromptFormPanel to use full-height editor - Fix locale text formatting * style: unify list item styles with semantic colors Apply consistent styling to list items across components. - Replace hardcoded colors with semantic tokens in MCP and Prompt list items - Add glass effect container to EndpointSpeedTest panel - Format code for better readability * style: format template literals for better readability Improve code formatting for conditional className expressions. - Break long template literals across multiple lines - Maintain consistent formatting in MCP form and endpoint test components * feat(deeplink): add config merge command for preview Expose config merging functionality to frontend for preview. - Add merge_deeplink_config Tauri command - Make parse_and_merge_config public for reuse - Enable frontend to display complete config before import * feat(deeplink): merge and display config in import dialog Enhance import dialog to fetch and display complete config. - Call mergeDeeplinkConfig API when config is present - Add UTF-8 base64 decoding support for config content - Add scrollable content area with custom scrollbar styling - Show complete configuration before user confirms import * i18n: add config merge error message Add translation for config file merge error handling. * style(deeplink): format test page HTML for better readability Improve HTML formatting in deeplink test page. - Format multiline attributes for better readability - Add consistent indentation to nested elements - Break long lines in buttons and links * refactor(usage): improve footer layout with two-row design Reorganize usage footer for better readability and space efficiency. - Split into two rows: update time + refresh button (row 1), usage stats (row 2) - Move refresh button to top row next to update time - Remove card background for cleaner look - Add fallback text when never updated - Improve spacing and alignment - Format template literals for consistency
2025-11-22 19:18:35 +08:00
"autoIntervalMinutes": "Auto query interval (minutes)",
"autoQueryInterval": "Auto Query Interval (minutes)",
Refactor/UI (#273) * feat(components): add reusable full-screen panel components Add new full-screen panel components to support the UI refactoring: - FullScreenPanel: Reusable full-screen layout component with header, content area, and optional footer. Provides consistent layout for settings, prompts, and other full-screen views. - PromptFormPanel: Dedicated panel for creating and editing prompts with markdown preview support. Features real-time validation and integrated save/cancel actions. - AgentsPanel: Panel component for managing agent configurations. Provides a consistent interface for agent CRUD operations. - RepoManagerPanel: Full-featured repository manager panel for Skills. Supports repository listing, addition, deletion, and configuration management with integrated validation. These components establish the foundation for the upcoming settings page migration from dialog-based to full-screen layout. * refactor(settings): migrate from dialog to full-screen page layout Complete migration of settings from modal dialog to dedicated full-screen page, improving UX and providing more space for configuration options. Changes: - Remove SettingsDialog component (legacy modal-based interface) - Add SettingsPage component with full-screen layout using FullScreenPanel - Refactor App.tsx routing to support dedicated settings page * Add settings route handler * Update navigation logic from dialog-based to page-based * Integrate with existing app switcher and provider management - Update ImportExportSection to work with new page layout * Improve spacing and layout for better readability * Enhanced error handling and user feedback * Better integration with page-level actions - Enhance useSettings hook to support page-based workflow * Add navigation state management * Improve settings persistence logic * Better error boundary handling Benefits: - More intuitive navigation with dedicated settings page - Better use of screen space for complex configurations - Improved accessibility with clearer visual hierarchy - Consistent with modern desktop application patterns - Easier to extend with new settings sections This change is part of the larger UI refactoring initiative to modernize the application interface and improve user experience. * refactor(forms): simplify and modernize form components Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance. * style(ui): modernize component layouts and visual design Update UI components with improved layouts, visual hierarchy, and modern design patterns for better user experience. Navigation & Brand Components: - AppSwitcher * Enhanced visual design with better spacing * Improved active state indicators * Smoother transitions and hover effects * Better mobile responsiveness - BrandIcons * Optimized icon rendering performance * Added support for more provider icons * Improved SVG handling and fallbacks * Better scaling across different screen sizes Editor Components: - JsonEditor * Enhanced syntax highlighting * Better error visualization * Improved code formatting options * Added line numbers and code folding support - UsageScriptModal * Complete layout overhaul (1239 lines refactored) * Better script editor integration * Improved template selection UI * Enhanced preview and testing panels * Better error feedback and validation Provider Components: - ProviderCard * Redesigned card layout with modern aesthetics * Better information density and readability * Improved action buttons placement * Enhanced status indicators (active/inactive) - ProviderList * Better grid/list view layouts * Improved drag-and-drop visual feedback * Enhanced sorting indicators - ProviderActions * Streamlined action menu * Better icon consistency * Improved tooltips and accessibility Usage & Footer: - UsageFooter * Redesigned footer layout * Better quota visualization * Improved refresh controls * Enhanced error states Design System Updates: - dialog.tsx (shadcn/ui component) * Updated to latest design tokens * Better overlay animations * Improved focus management - index.css * Added 65 lines of global utility classes * New animation keyframes * Enhanced color variables for dark mode * Improved typography scale - tailwind.config.js * Extended theme with new design tokens * Added custom animations and transitions * New spacing and sizing utilities * Enhanced color palette Visual Improvements: - Consistent border radius across components - Unified shadow system for depth perception - Better color contrast for accessibility (WCAG AA) - Smoother animations and transitions - Improved dark mode support These changes create a more polished, modern interface while maintaining consistency with the application's design language. * chore: update dialogs, i18n and improve component integration Various functional updates and improvements across provider dialogs, MCP panel, skills page, and internationalization. Provider Dialogs: - AddProviderDialog * Simplified form state management * Improved preset selection workflow * Better validation error messages * Enhanced template variable handling - EditProviderDialog * Streamlined edit flow with better state synchronization * Improved handling of live config backfilling * Better error recovery for failed updates * Enhanced integration with parent components MCP & Skills: - UnifiedMcpPanel * Reduced complexity from 140+ to ~95 lines * Improved multi-app server management * Better server type detection (stdio/http) * Enhanced server status indicators * Cleaner integration with MCP form modal - SkillsPage * Simplified navigation and state management * Better integration with RepoManagerPanel * Improved error handling for repository operations * Enhanced loading states - SkillCard * Minor layout adjustments * Better action button placement Environment & Configuration: - EnvWarningBanner * Improved conflict detection messages * Better visual hierarchy for warnings * Enhanced dismissal behavior - tauri.conf.json * Updated build configuration * Added new window management options Internationalization: - en.json & zh.json * Added 17 new translation keys for new features * Updated existing keys for better clarity * Added translations for new settings page * Improved consistency across UI text Code Cleanup: - mutations.ts * Removed 14 lines of unused mutation definitions * Cleaned up deprecated query invalidation logic * Better type safety for mutation parameters Overall Impact: - Reduced total lines by 51 (-10% in affected files) - Improved component integration and data flow - Better error handling and user feedback - Enhanced i18n coverage for new features These changes improve the overall polish and integration of various components while removing technical debt and unused code. * feat(backend): add auto-launch functionality Implement system auto-launch feature to allow CC-Switch to start automatically on system boot, improving user convenience. Backend Implementation: - auto_launch.rs: New module for auto-launch management * Cross-platform support using auto-launch crate * Enable/disable auto-launch with system integration * Proper error handling for permission issues * Platform-specific implementations (macOS/Windows/Linux) Command Layer: - Add get_auto_launch command to check current status - Add set_auto_launch command to toggle auto-start - Integrate commands with settings API Settings Integration: - Extend Settings struct with auto_launch field - Persist auto-launch preference in settings store - Automatic state synchronization on app startup Dependencies: - Add auto-launch ^0.5.0 to Cargo.toml - Update Cargo.lock with new dependency tree Technical Details: - Uses platform-specific auto-launch mechanisms: * macOS: Login Items via LaunchServices * Windows: Registry Run key * Linux: XDG autostart desktop files - Handles edge cases like permission denials gracefully - Maintains settings consistency across app restarts This feature enables users to have CC-Switch readily available after system boot without manual intervention, particularly useful for users who frequently switch between API providers. * refactor(settings): enhance settings page with auto-launch integration Complete refactoring of settings page architecture to integrate auto-launch feature and improve overall settings management workflow. SettingsPage Component: - Integrate auto-launch toggle with WindowSettings section - Improve layout and spacing for better visual hierarchy - Enhanced error handling for settings operations - Better loading states during settings updates - Improved accessibility with proper ARIA labels WindowSettings Component: - Add auto-launch switch with real-time status - Integrate with backend auto-launch commands - Proper error feedback for permission issues - Visual indicators for current auto-launch state - Tooltip guidance for auto-launch functionality useSettings Hook (Major Refactoring): - Complete rewrite reducing complexity by ~30% - Better separation of concerns with dedicated handlers - Improved state management using React Query - Enhanced auto-launch state synchronization * Fetch auto-launch status on mount * Real-time updates on toggle * Proper error recovery - Optimized re-renders with better memoization - Cleaner API for component integration - Better TypeScript type safety Settings API: - Add getAutoLaunch() method - Add setAutoLaunch(enabled: boolean) method - Type-safe Tauri command invocations - Proper error propagation to UI layer Architecture Improvements: - Reduced hook complexity from 197 to ~140 effective lines - Eliminated redundant state management logic - Better error boundaries and fallback handling - Improved testability with clearer separation User Experience Enhancements: - Instant visual feedback on auto-launch toggle - Clear error messages for permission issues - Loading indicators during async operations - Consistent behavior across all platforms This refactoring provides a solid foundation for future settings additions while maintaining code quality and user experience. * refactor(ui): optimize FullScreenPanel, Dialog and App routing Comprehensive refactoring of core UI components to improve code quality, maintainability, and user experience. FullScreenPanel Component: - Enhanced props interface with better TypeScript types - Improved layout flexibility with customizable padding - Better header/footer composition patterns - Enhanced scroll behavior for long content - Added support for custom actions in header - Improved responsive design for different screen sizes - Better integration with parent components - Cleaner prop drilling with context where appropriate Dialog Component (shadcn/ui): - Updated to latest component patterns - Improved animation timing and easing - Better focus trap management - Enhanced overlay styling with backdrop blur - Improved accessibility (ARIA labels, keyboard navigation) - Better close button positioning and styling - Enhanced mobile responsiveness - Cleaner composition with DialogHeader/Footer App Component Routing: - Refactored routing logic for better clarity - Improved state management for navigation - Better integration with settings page - Enhanced error boundary handling - Cleaner separation of layout concerns - Improved provider context propagation - Better handling of deep links - Optimized re-renders with React.memo where appropriate Code Quality Improvements: - Reduced prop drilling with better component composition - Improved TypeScript type safety - Better separation of concerns - Enhanced code readability with clearer naming - Eliminated redundant logic Performance Optimizations: - Reduced unnecessary re-renders - Better memoization of callbacks - Optimized component tree structure - Improved event handler efficiency User Experience: - Smoother transitions and animations - Better visual feedback for interactions - Improved loading states - More consistent behavior across features These changes create a more maintainable and performant foundation for the application's UI layer while improving the overall user experience with smoother interactions and better visual polish. * refactor(features): modernize Skills, Prompts and Agents components Major refactoring of feature components to improve code quality, user experience, and maintainability. SkillsPage Component (299 lines refactored): - Complete rewrite of layout and state management - Better integration with RepoManagerPanel - Improved navigation between list and detail views - Enhanced error handling with user-friendly messages - Better loading states with skeleton screens - Optimized re-renders with proper memoization - Cleaner separation between list and form views - Improved skill card interactions - Better responsive design for different screen sizes RepoManagerPanel Component (370 lines refactored): - Streamlined repository management workflow - Enhanced form validation with real-time feedback - Improved repository list with better visual hierarchy - Better handling of git operations (clone, pull, delete) - Enhanced error recovery for network issues - Cleaner state management reducing complexity - Improved TypeScript type safety - Better integration with Skills backend API - Enhanced loading indicators for async operations PromptPanel Component (249 lines refactored): - Modernized layout with FullScreenPanel integration - Better separation between list and edit modes - Improved prompt card design with better readability - Enhanced search and filter functionality - Cleaner state management for editing workflow - Better integration with PromptFormPanel - Improved delete confirmation with safety checks - Enhanced keyboard navigation support PromptFormPanel Component (238 lines refactored): - Streamlined form layout and validation - Better markdown editor integration - Real-time preview with syntax highlighting - Improved validation error display - Enhanced save/cancel workflow - Better handling of large prompt content - Cleaner form state management - Improved accessibility features AgentsPanel Component (33 lines modified): - Minor layout adjustments for consistency - Better integration with FullScreenPanel - Improved placeholder states - Enhanced error boundaries Type Definitions (types.ts): - Added 10 new type definitions - Better type safety for Skills/Prompts/Agents - Enhanced interfaces for repository management - Improved typing for form validations Architecture Improvements: - Reduced component coupling - Better prop interfaces with explicit types - Improved error boundaries - Enhanced code reusability - Better testing surface User Experience Enhancements: - Smoother transitions between views - Better visual feedback for actions - Improved error messages - Enhanced loading states - More intuitive navigation flows - Better responsive layouts Code Quality: - Net reduction of 29 lines while adding features - Improved code organization - Better naming conventions - Enhanced documentation - Cleaner control flow These changes significantly improve the maintainability and user experience of core feature components while establishing consistent patterns for future development. * style(ui): refine component layouts and improve visual consistency Comprehensive UI polish across multiple components to enhance visual design, improve user experience, and maintain consistency. UsageScriptModal Component (1302 lines refactored): - Complete layout overhaul for better usability - Improved script editor with syntax highlighting - Better template selection interface - Enhanced test/preview panels with clearer separation - Improved error feedback and validation messages - Better modal sizing and responsiveness - Cleaner tab navigation between sections - Enhanced code formatting and readability - Improved loading states for async operations - Better integration with parent components MCP Components: - McpFormModal (42 lines): * Streamlined form layout * Better server type selection (stdio/http) * Improved field grouping and labels * Enhanced validation feedback - UnifiedMcpPanel (14 lines): * Minor layout adjustments * Better list item spacing * Improved server status indicators * Enhanced action button placement Provider Components: - ProviderCard (11 lines): * Refined card layout and spacing * Better visual hierarchy * Improved badge placement * Enhanced hover effects - ProviderList (5 lines): * Minor grid layout adjustments * Better drag-and-drop visual feedback - GeminiConfigSections (4 lines): * Field label alignment * Improved spacing consistency Editor & Footer Components: - JsonEditor (13 lines): * Better editor height management * Improved error display * Enhanced syntax highlighting - UsageFooter (10 lines): * Refined footer layout * Better quota display * Improved refresh button placement Settings & Environment: - ImportExportSection (24 lines): * Better button layout * Improved action grouping * Enhanced visual feedback - EnvWarningBanner (4 lines): * Refined alert styling * Better dismiss button placement Global Styles (index.css): - Added 11 lines of utility classes - Improved transition timing - Better focus indicators - Enhanced scrollbar styling - Refined spacing utilities Design Improvements: - Consistent spacing using design tokens - Unified color palette application - Better typography hierarchy - Improved shadow system for depth - Enhanced interactive states (hover, active, focus) - Better border radius consistency - Refined animation timings Accessibility: - Improved focus indicators - Better keyboard navigation - Enhanced screen reader support - Improved color contrast ratios Code Quality: - Net increase of 68 lines due to UsageScriptModal improvements - Better component organization - Cleaner style application - Reduced style duplication These visual refinements create a more polished and professional interface while maintaining excellent usability and accessibility standards across all components. * chore(i18n): add auto-launch translation keys Add translation keys for new auto-launch feature to support multi-language interface. Translation Keys Added: - autoLaunch: Label for auto-launch toggle - autoLaunchDescription: Explanation of auto-launch functionality - autoLaunchEnabled: Status message when enabled Languages Updated: - Chinese (zh.json): 简体中文翻译 - English (en.json): English translations The translations maintain consistency with existing terminology and provide clear, user-friendly descriptions of the auto-launch feature across both supported languages. * test: update test suites to match component refactoring Comprehensive test updates to align with recent component refactoring and new auto-launch functionality. Component Tests: - AddProviderDialog.test.tsx (10 lines): * Updated test cases for new dialog behavior * Enhanced mock data for preset selection * Improved assertions for validation - ImportExportSection.test.tsx (16 lines): * Updated for new settings page integration * Enhanced test coverage for error scenarios * Better mock state management - McpFormModal.test.tsx (60 lines): * Extensive updates for form refactoring * New test cases for multi-app selection * Enhanced validation testing * Better coverage of stdio/http server types - ProviderList.test.tsx (11 lines): * Updated for new card layout * Enhanced drag-and-drop testing - SettingsDialog.test.tsx (96 lines): * Major updates for SettingsPage migration * New test cases for auto-launch functionality * Enhanced integration test coverage * Better async operation testing Hook Tests: - useDirectorySettings.test.tsx (32 lines): * Updated for refactored hook logic * Enhanced test coverage for edge cases - useDragSort.test.tsx (36 lines): * Simplified test cases * Better mock implementation * Improved assertions - useImportExport tests (16 lines total): * Updated for new error handling * Enhanced test coverage - useMcpValidation.test.tsx (23 lines): * Updated validation test cases * Better coverage of error scenarios - useProviderActions.test.tsx (48 lines): * Extensive updates for hook refactoring * New test cases for provider operations * Enhanced mock data - useSettings.test.tsx (12 lines): * New test cases for auto-launch * Enhanced settings state testing * Better async operation coverage Integration Tests: - App.test.tsx (41 lines): * Updated for new routing logic * Enhanced navigation testing * Better component integration coverage - SettingsDialog.test.tsx (88 lines): * Complete rewrite for SettingsPage * New integration test scenarios * Enhanced user workflow testing Mock Infrastructure: - handlers.ts (117 lines): * Major updates for MSW handlers * New handlers for auto-launch commands * Enhanced error simulation * Better request/response mocking - state.ts (37 lines): * Updated mock state structure * New state for auto-launch * Enhanced state reset functionality - tauriMocks.ts (10 lines): * Updated mock implementations * Better type safety - server.ts & testQueryClient.ts: * Minor cleanup (2 lines removed) Test Infrastructure Improvements: - Better test isolation - Enhanced mock data consistency - Improved async operation testing - Better error scenario coverage - Enhanced integration test patterns Coverage Improvements: - Net increase of 195 lines of test code - Better coverage of edge cases - Enhanced error path testing - Improved integration test scenarios - Better mock infrastructure All tests now pass with the refactored components while maintaining comprehensive coverage of functionality and edge cases. * style(ui): improve window dragging and provider card styles * fix(skills): resolve third-party skills installation failure - Add skills_path field to Skill struct - Use skills_path to construct correct source path during installation - Fix installation for repos with custom skill subdirectories * feat(icon): add icon type system and intelligent inference logic Introduce a new icon system for provider customization: - Add IconMetadata and IconPreset interfaces in src/types/icon.ts - Define structure for icon name, display name, category, keywords - Support default color configuration per icon - Implement smart icon inference in src/config/iconInference.ts - Create iconMappings for 25+ AI providers and cloud platforms - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc. - inferIconForPreset(): match provider name to icon config - addIconsToPresets(): batch apply icons to preset arrays - Support fuzzy matching for flexible name recognition This foundation enables automatic icon assignment when users add providers, improving visual identification in the provider list. * feat(ui): add icon picker, color picker and provider icon components Implement comprehensive icon selection system for provider customization: ## New Components ### ProviderIcon (src/components/ProviderIcon.tsx) - Render SVG icons by name with automatic fallback - Display provider initials when icon not found - Support custom sizing via size prop - Use dangerouslySetInnerHTML for inline SVG rendering ### IconPicker (src/components/IconPicker.tsx) - Grid-based icon selection with visual preview - Real-time search filtering by name and keywords - Integration with icon metadata for display names - Responsive grid layout (6-10 columns based on screen) ### ColorPicker (src/components/ColorPicker.tsx) - 12 preset colors for quick selection - Native color input for custom color picking - Hex input field for precise color entry - Visual feedback for selected color state ## Icon Assets (src/icons/extracted/) - 38 high-quality SVG icons for AI providers and platforms - Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc. - Cloud platforms: AWS, Azure, Google Cloud, Cloudflare - Auto-generated index.ts with getIcon/hasIcon helpers - Metadata system with searchable keywords per icon ## Build Scripts - scripts/extract-icons.js: Extract icons from simple-icons - scripts/generate-icon-index.js: Generate TypeScript index file * feat(provider): integrate icon system into provider UI components Add icon customization support to provider management interface: ## Type System Updates ### Provider Interface (src/types.ts) - Add optional `icon` field for icon name (e.g., "openai", "anthropic") - Add optional `iconColor` field for hex color (e.g., "#00A67E") ### Form Schema (src/lib/schemas/provider.ts) - Extend providerSchema with icon and iconColor optional fields - Maintain backward compatibility with existing providers ## UI Components ### ProviderCard (src/components/providers/ProviderCard.tsx) - Display ProviderIcon alongside provider name - Add icon container with hover animation effect - Adjust layout spacing for icon placement - Update translate offsets for action buttons ### BasicFormFields (src/components/providers/forms/BasicFormFields.tsx) - Add icon preview section showing current selection - Implement fullscreen icon picker dialog - Auto-apply default color from icon metadata on selection - Display provider name and icon status in preview ### AddProviderDialog & EditProviderDialog - Pass icon fields through form submission - Preserve icon data during provider updates This enables users to visually distinguish providers in the list with custom icons, improving UX for multi-provider setups. * feat(backend): add icon fields to Provider model and default mappings Extend Rust backend to support provider icon customization: ## Provider Model (src-tauri/src/provider.rs) - Add `icon: Option<String>` field for icon name - Add `icon_color: Option<String>` field for hex color - Use serde rename `iconColor` for frontend compatibility - Apply skip_serializing_if for clean JSON output - Update Provider::new() to initialize icon fields as None ## Provider Defaults (src-tauri/src/provider_defaults.rs) [NEW] - Define ProviderIcon struct with name and color fields - Create DEFAULT_PROVIDER_ICONS static HashMap with 23 providers: - AI providers: OpenAI, Anthropic, Claude, Google, Gemini, DeepSeek, Kimi, Moonshot, Zhipu, MiniMax, Baidu, Alibaba, Tencent, Meta, Microsoft, Cohere, Perplexity, Mistral, HuggingFace - Cloud platforms: AWS, Azure, Huawei, Cloudflare - Implement infer_provider_icon() with exact and fuzzy matching - Add unit tests for matching logic (exact, fuzzy, case-insensitive) ## Deep Link Support (src-tauri/src/deeplink.rs) - Initialize icon fields when creating Provider from deep link import ## Module Registration (src-tauri/src/lib.rs) - Register provider_defaults module ## Dependencies (Cargo.toml) - Add once_cell for lazy static initialization This backend support enables icon persistence and future features like auto-icon inference during provider creation. * chore(i18n): add translations for icon picker and provider icon Add Chinese and English translations for icon customization feature: ## Icon Picker (iconPicker) - search: "Search Icons" / "搜索图标" - searchPlaceholder: "Enter icon name..." / "输入图标名称..." - noResults: "No matching icons found" / "未找到匹配的图标" - category.aiProvider: "AI Providers" / "AI 服务商" - category.cloud: "Cloud Platforms" / "云平台" - category.tool: "Dev Tools" / "开发工具" - category.other: "Other" / "其他" ## Provider Icon (providerIcon) - label: "Icon" / "图标" - colorLabel: "Icon Color" / "图标颜色" - selectIcon: "Select Icon" / "选择图标" - preview: "Preview" / "预览" These translations support the new icon picker UI components and provider form icon selection interface. * style(ui): refine header layout and AppSwitcher color scheme Improve application header and component styling: ## App.tsx Header Layout - Wrap title and settings button in flex container with gap - Add vertical divider between title and settings icon - Apply responsive padding (pl-1 sm:pl-2) - Reformat JSX for better readability (prettier) - Fix string template formatting in className ## AppSwitcher Color Update - Change Claude tab gradient from orange/amber to teal/emerald/green - Update shadow color to match new teal theme - Change hover color from orange-500 to teal-500 - Align visual style with emerald/teal brand colors ## Dialog Component Cleanup - Remove default close button (X icon) from DialogContent - Allow parent components to control close button placement - Remove unused lucide-react X import ## index.css Header Border - Add top border (2px solid) to glass-header - Apply to both light and dark mode variants - Improve visual separation of header area These changes enhance visual consistency and modernize the UI appearance with a cohesive teal color scheme. * chore(deps): add icon library and update preset configurations Add dependencies and utility scripts for icon system: ## Dependencies (package.json) - Add @lobehub/icons-static-svg@1.73.0 - High-quality SVG icon library for AI providers - Source for extracted icons in src/icons/extracted/ - Update pnpm-lock.yaml accordingly ## Provider Preset Updates (src/config/claudeProviderPresets.ts) - Add optional `icon` and `iconColor` fields to ProviderPreset interface - Apply to Anthropic Official preset as example: - icon: "anthropic" - iconColor: "#D4915D" - Future presets can include default icon configurations ## Utility Script (scripts/filter-icons.js) [NEW] - Helper script for filtering and managing icon assets - Supports icon discovery and validation workflow - Complements extract-icons.js and generate-icon-index.js This completes the icon system infrastructure, providing all necessary tools and dependencies for icon customization. * refactor(ui): simplify AppSwitcher styles and migrate to local SVG icons - Replace complex gradient animations with clean, minimal tab design - Migrate from @lobehub/icons CDN to local SVG assets for better reliability - Fix clippy warning in error.rs (use inline format args) - Improve code formatting in skill service and commands - Reduce CSS complexity in AppSwitcher component (removed blur effects and gradients) - Update BrandIcons to use imported local SVG files instead of dynamic image loading This improves performance, reduces external dependencies, and provides a cleaner UI experience. * style(ui): hide scrollbars across all browsers and optimize form layout - Hide scrollbars globally with cross-browser support: * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none } * Firefox: scrollbar-width: none * IE 10+: -ms-overflow-style: none - Remove custom scrollbar styling (width, colors, hover states) - Reorganize BasicFormFields layout: * Move icon picker to top center as a clickable preview (80x80) * Change name and notes fields to horizontal grid layout (md:grid-cols-2) * Remove icon preview section from bottom * Improve visual hierarchy and space efficiency This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality. * refactor(layout): standardize max-width to 60rem and optimize padding structure - Unify container max-width across components: * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list * Replace max-w-5xl with max-w-[60rem] in PromptPanel * Move padding from header element to inner container for consistent spacing - Optimize padding hierarchy: * Remove px-6 from header element, add to inner header container * Remove px-6 from main element, keep it only in provider list container * Consolidate PromptPanel padding: move px-6 from nested divs to outer container * Remove redundant pl-1 sm:pl-2 from logo/title area - Benefits: * Consistent 60rem max-width provides better readability on wide screens * Simplified padding structure reduces CSS complexity * Cleaner responsive behavior with unified spacing rules This creates a more maintainable and visually consistent layout system. * refactor(ui): unify layout system with 60rem max-width and consistent spacing - Standardize container max-width across all panels: * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem] * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel * Ensures consistent reading width and visual balance on wide screens - Optimize padding hierarchy and structure: * Move px-6 from parent elements to content containers * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer * Add border separators (border-t/border-b) to header and footer sections * Consolidate nested padding in MCP, Skills, and Prompts panels * Remove redundant padding layers for cleaner CSS - Simplify component styling: * MCP list items: Replace card-based layout with modern group-based design * Remove unnecessary wrapper divs and flatten DOM structure * Update card hover effects with smooth transitions * Simplify icon selection dialog (remove description text in BasicFormFields) - Benefits: * Consistent 60rem max-width provides optimal readability * Unified spacing rules reduce maintenance complexity * Cleaner component hierarchy improves performance * Better responsive behavior across different screen sizes * More cohesive visual design language throughout the app This creates a maintainable, scalable design system foundation. * feat(deeplink): add Claude model fields support and enhance import dialog - Add Claude-specific model field support in deeplink import: * Support model (ANTHROPIC_MODEL) - general default model * Support haikuModel (ANTHROPIC_DEFAULT_HAIKU_MODEL) * Support sonnetModel (ANTHROPIC_DEFAULT_SONNET_MODEL) * Support opusModel (ANTHROPIC_DEFAULT_OPUS_MODEL) * Backend: Update DeepLinkImportRequest struct to include optional model fields * Frontend: Add TypeScript type definitions for new model parameters - Enhance deeplink demo page (deplink.html): * Add 5 new Claude configuration examples showcasing different model setups * Add parameter documentation with required/optional tags * Include basic config (no models), single model, complete 4-model, partial models, and third-party provider examples * Improve visual design with param-list component and color-coded badges * Add detailed descriptions for each configuration scenario - Redesign DeepLinkImportDialog layout: * Switch from 3-column to compact 2-column grid layout * Reduce dialog width from 500px to 650px for better content display * Add dedicated section for Claude model configurations with blue highlight box * Use uppercase labels and smaller text for more information density * Add truncation and tooltips for long URLs * Improve visual hierarchy with spacing and grouping * Increase z-index to 9999 to ensure dialog appears on top - Minor UI refinements: * Update App.tsx layout adjustments * Optimize McpFormModal styling * Refine ProviderCard and BasicFormFields components This enables users to import Claude providers with precise model configurations via deeplink. * feat(deeplink): add config file support for deeplink import Support importing provider configuration from embedded or remote config files. - Add base64 dependency for config content encoding - Support config, configFormat, and configUrl parameters - Make homepage/endpoint/apiKey optional when config is provided - Add config parsing and merging logic * feat(deeplink): enhance dialog with config file preview Add config file parsing and preview in deep link import dialog. - Support Base64 encoded config display - Add config file source indicator (embedded/remote) - Parse and display config fields by app type (Claude/Codex/Gemini) - Mask sensitive values in config preview - Improve dialog layout and content organization * refactor(ui): unify dialog styles and improve layout consistency Standardize dialog and panel components across the application. - Update dialog background to use semantic color tokens - Adjust FullScreenPanel max-width to 56rem for better alignment - Add drag region and prevent body scroll in full-screen panels - Optimize button sizes and spacing in panel headers - Apply consistent styling to all dialog-based components * i18n: add deeplink config preview translations Add missing translation keys for config file preview feature. - Add configSource, configEmbedded, configRemote labels - Add configDetails and configUrl display strings - Support both Chinese and English versions * feat(deeplink): enhance test page with v3.8 config file examples Improve deeplink test page with comprehensive config file import examples. - Add version badge for v3.8 features - Add copy-to-clipboard functionality for all deep links - Add Claude config file import examples (embedded/remote) - Add Codex config file import examples (auth.json + config.toml) - Add Gemini config file import examples (.env format) - Add config generator tool for easy testing - Update UI with better styling and layout * feat(settings): add autoSaveSettings for lightweight auto-save Add optimized auto-save function for General tab settings. - Add autoSaveSettings method for non-destructive auto-save - Only trigger system APIs when values actually change - Avoid unnecessary auto-launch and plugin config updates - Update tests to cover new functionality * refactor(settings): simplify settings page layout and auto-save Reorganize settings page structure and integrate autoSaveSettings. - Move save button inline within Advanced tab content - Remove sticky footer for cleaner layout - Use autoSaveSettings for General tab settings - Simplify dialog close behavior - Refactor ImportExportSection layout * style(providers): optimize card layout and action button sizes Improve provider card visual density and action buttons. - Reduce icon button sizes for compact layout - Adjust drag handle and icon sizes - Tighten spacing between action buttons - Update hover translate values for better alignment * refactor(mcp): improve form modal layout with adaptive height editor Restructure MCP form modal for better space utilization. - Split form into upper form fields and lower JSON editor sections - Add full-height mode support for JsonEditor component - Use flex layout for editor to fill available space - Update PromptFormPanel to use full-height editor - Fix locale text formatting * style: unify list item styles with semantic colors Apply consistent styling to list items across components. - Replace hardcoded colors with semantic tokens in MCP and Prompt list items - Add glass effect container to EndpointSpeedTest panel - Format code for better readability * style: format template literals for better readability Improve code formatting for conditional className expressions. - Break long template literals across multiple lines - Maintain consistent formatting in MCP form and endpoint test components * feat(deeplink): add config merge command for preview Expose config merging functionality to frontend for preview. - Add merge_deeplink_config Tauri command - Make parse_and_merge_config public for reuse - Enable frontend to display complete config before import * feat(deeplink): merge and display config in import dialog Enhance import dialog to fetch and display complete config. - Call mergeDeeplinkConfig API when config is present - Add UTF-8 base64 decoding support for config content - Add scrollable content area with custom scrollbar styling - Show complete configuration before user confirms import * i18n: add config merge error message Add translation for config file merge error handling. * style(deeplink): format test page HTML for better readability Improve HTML formatting in deeplink test page. - Format multiline attributes for better readability - Add consistent indentation to nested elements - Break long lines in buttons and links * refactor(usage): improve footer layout with two-row design Reorganize usage footer for better readability and space efficiency. - Split into two rows: update time + refresh button (row 1), usage stats (row 2) - Move refresh button to top row next to update time - Remove card background for cleaner look - Add fallback text when never updated - Improve spacing and alignment - Format template literals for consistency
2025-11-22 19:18:35 +08:00
"autoQueryIntervalHint": "0 to disable; recommend 5-60 minutes",
"intervalMustBeInteger": "Interval must be an integer, decimal part ignored",
"intervalCannotBeNegative": "Interval cannot be negative",
"intervalAdjusted": "Interval adjusted to {{value}} minutes",
"scriptHelp": "Script writing instructions:",
"configFormat": "Configuration format:",
"commentOptional": "optional",
"commentResponseIsJson": "response is the JSON data returned by the API",
"extractorFormat": "Extractor return format (all fields optional):",
"tips": "💡 Tips:",
"testing": "Testing...",
"testScript": "Test script",
"format": "Format",
"saveConfig": "Save config",
"scriptEmpty": "Script configuration cannot be empty",
"mustHaveReturn": "Script must contain return statement",
"testSuccess": "Test successful!",
"testFailed": "Test failed",
"formatSuccess": "Format successful",
"formatFailed": "Format failed",
"variablesHint": "Supported variables: {{apiKey}}, {{baseUrl}} | extractor function receives API response JSON object",
Refactor/UI (#273) * feat(components): add reusable full-screen panel components Add new full-screen panel components to support the UI refactoring: - FullScreenPanel: Reusable full-screen layout component with header, content area, and optional footer. Provides consistent layout for settings, prompts, and other full-screen views. - PromptFormPanel: Dedicated panel for creating and editing prompts with markdown preview support. Features real-time validation and integrated save/cancel actions. - AgentsPanel: Panel component for managing agent configurations. Provides a consistent interface for agent CRUD operations. - RepoManagerPanel: Full-featured repository manager panel for Skills. Supports repository listing, addition, deletion, and configuration management with integrated validation. These components establish the foundation for the upcoming settings page migration from dialog-based to full-screen layout. * refactor(settings): migrate from dialog to full-screen page layout Complete migration of settings from modal dialog to dedicated full-screen page, improving UX and providing more space for configuration options. Changes: - Remove SettingsDialog component (legacy modal-based interface) - Add SettingsPage component with full-screen layout using FullScreenPanel - Refactor App.tsx routing to support dedicated settings page * Add settings route handler * Update navigation logic from dialog-based to page-based * Integrate with existing app switcher and provider management - Update ImportExportSection to work with new page layout * Improve spacing and layout for better readability * Enhanced error handling and user feedback * Better integration with page-level actions - Enhance useSettings hook to support page-based workflow * Add navigation state management * Improve settings persistence logic * Better error boundary handling Benefits: - More intuitive navigation with dedicated settings page - Better use of screen space for complex configurations - Improved accessibility with clearer visual hierarchy - Consistent with modern desktop application patterns - Easier to extend with new settings sections This change is part of the larger UI refactoring initiative to modernize the application interface and improve user experience. * refactor(forms): simplify and modernize form components Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance. * style(ui): modernize component layouts and visual design Update UI components with improved layouts, visual hierarchy, and modern design patterns for better user experience. Navigation & Brand Components: - AppSwitcher * Enhanced visual design with better spacing * Improved active state indicators * Smoother transitions and hover effects * Better mobile responsiveness - BrandIcons * Optimized icon rendering performance * Added support for more provider icons * Improved SVG handling and fallbacks * Better scaling across different screen sizes Editor Components: - JsonEditor * Enhanced syntax highlighting * Better error visualization * Improved code formatting options * Added line numbers and code folding support - UsageScriptModal * Complete layout overhaul (1239 lines refactored) * Better script editor integration * Improved template selection UI * Enhanced preview and testing panels * Better error feedback and validation Provider Components: - ProviderCard * Redesigned card layout with modern aesthetics * Better information density and readability * Improved action buttons placement * Enhanced status indicators (active/inactive) - ProviderList * Better grid/list view layouts * Improved drag-and-drop visual feedback * Enhanced sorting indicators - ProviderActions * Streamlined action menu * Better icon consistency * Improved tooltips and accessibility Usage & Footer: - UsageFooter * Redesigned footer layout * Better quota visualization * Improved refresh controls * Enhanced error states Design System Updates: - dialog.tsx (shadcn/ui component) * Updated to latest design tokens * Better overlay animations * Improved focus management - index.css * Added 65 lines of global utility classes * New animation keyframes * Enhanced color variables for dark mode * Improved typography scale - tailwind.config.js * Extended theme with new design tokens * Added custom animations and transitions * New spacing and sizing utilities * Enhanced color palette Visual Improvements: - Consistent border radius across components - Unified shadow system for depth perception - Better color contrast for accessibility (WCAG AA) - Smoother animations and transitions - Improved dark mode support These changes create a more polished, modern interface while maintaining consistency with the application's design language. * chore: update dialogs, i18n and improve component integration Various functional updates and improvements across provider dialogs, MCP panel, skills page, and internationalization. Provider Dialogs: - AddProviderDialog * Simplified form state management * Improved preset selection workflow * Better validation error messages * Enhanced template variable handling - EditProviderDialog * Streamlined edit flow with better state synchronization * Improved handling of live config backfilling * Better error recovery for failed updates * Enhanced integration with parent components MCP & Skills: - UnifiedMcpPanel * Reduced complexity from 140+ to ~95 lines * Improved multi-app server management * Better server type detection (stdio/http) * Enhanced server status indicators * Cleaner integration with MCP form modal - SkillsPage * Simplified navigation and state management * Better integration with RepoManagerPanel * Improved error handling for repository operations * Enhanced loading states - SkillCard * Minor layout adjustments * Better action button placement Environment & Configuration: - EnvWarningBanner * Improved conflict detection messages * Better visual hierarchy for warnings * Enhanced dismissal behavior - tauri.conf.json * Updated build configuration * Added new window management options Internationalization: - en.json & zh.json * Added 17 new translation keys for new features * Updated existing keys for better clarity * Added translations for new settings page * Improved consistency across UI text Code Cleanup: - mutations.ts * Removed 14 lines of unused mutation definitions * Cleaned up deprecated query invalidation logic * Better type safety for mutation parameters Overall Impact: - Reduced total lines by 51 (-10% in affected files) - Improved component integration and data flow - Better error handling and user feedback - Enhanced i18n coverage for new features These changes improve the overall polish and integration of various components while removing technical debt and unused code. * feat(backend): add auto-launch functionality Implement system auto-launch feature to allow CC-Switch to start automatically on system boot, improving user convenience. Backend Implementation: - auto_launch.rs: New module for auto-launch management * Cross-platform support using auto-launch crate * Enable/disable auto-launch with system integration * Proper error handling for permission issues * Platform-specific implementations (macOS/Windows/Linux) Command Layer: - Add get_auto_launch command to check current status - Add set_auto_launch command to toggle auto-start - Integrate commands with settings API Settings Integration: - Extend Settings struct with auto_launch field - Persist auto-launch preference in settings store - Automatic state synchronization on app startup Dependencies: - Add auto-launch ^0.5.0 to Cargo.toml - Update Cargo.lock with new dependency tree Technical Details: - Uses platform-specific auto-launch mechanisms: * macOS: Login Items via LaunchServices * Windows: Registry Run key * Linux: XDG autostart desktop files - Handles edge cases like permission denials gracefully - Maintains settings consistency across app restarts This feature enables users to have CC-Switch readily available after system boot without manual intervention, particularly useful for users who frequently switch between API providers. * refactor(settings): enhance settings page with auto-launch integration Complete refactoring of settings page architecture to integrate auto-launch feature and improve overall settings management workflow. SettingsPage Component: - Integrate auto-launch toggle with WindowSettings section - Improve layout and spacing for better visual hierarchy - Enhanced error handling for settings operations - Better loading states during settings updates - Improved accessibility with proper ARIA labels WindowSettings Component: - Add auto-launch switch with real-time status - Integrate with backend auto-launch commands - Proper error feedback for permission issues - Visual indicators for current auto-launch state - Tooltip guidance for auto-launch functionality useSettings Hook (Major Refactoring): - Complete rewrite reducing complexity by ~30% - Better separation of concerns with dedicated handlers - Improved state management using React Query - Enhanced auto-launch state synchronization * Fetch auto-launch status on mount * Real-time updates on toggle * Proper error recovery - Optimized re-renders with better memoization - Cleaner API for component integration - Better TypeScript type safety Settings API: - Add getAutoLaunch() method - Add setAutoLaunch(enabled: boolean) method - Type-safe Tauri command invocations - Proper error propagation to UI layer Architecture Improvements: - Reduced hook complexity from 197 to ~140 effective lines - Eliminated redundant state management logic - Better error boundaries and fallback handling - Improved testability with clearer separation User Experience Enhancements: - Instant visual feedback on auto-launch toggle - Clear error messages for permission issues - Loading indicators during async operations - Consistent behavior across all platforms This refactoring provides a solid foundation for future settings additions while maintaining code quality and user experience. * refactor(ui): optimize FullScreenPanel, Dialog and App routing Comprehensive refactoring of core UI components to improve code quality, maintainability, and user experience. FullScreenPanel Component: - Enhanced props interface with better TypeScript types - Improved layout flexibility with customizable padding - Better header/footer composition patterns - Enhanced scroll behavior for long content - Added support for custom actions in header - Improved responsive design for different screen sizes - Better integration with parent components - Cleaner prop drilling with context where appropriate Dialog Component (shadcn/ui): - Updated to latest component patterns - Improved animation timing and easing - Better focus trap management - Enhanced overlay styling with backdrop blur - Improved accessibility (ARIA labels, keyboard navigation) - Better close button positioning and styling - Enhanced mobile responsiveness - Cleaner composition with DialogHeader/Footer App Component Routing: - Refactored routing logic for better clarity - Improved state management for navigation - Better integration with settings page - Enhanced error boundary handling - Cleaner separation of layout concerns - Improved provider context propagation - Better handling of deep links - Optimized re-renders with React.memo where appropriate Code Quality Improvements: - Reduced prop drilling with better component composition - Improved TypeScript type safety - Better separation of concerns - Enhanced code readability with clearer naming - Eliminated redundant logic Performance Optimizations: - Reduced unnecessary re-renders - Better memoization of callbacks - Optimized component tree structure - Improved event handler efficiency User Experience: - Smoother transitions and animations - Better visual feedback for interactions - Improved loading states - More consistent behavior across features These changes create a more maintainable and performant foundation for the application's UI layer while improving the overall user experience with smoother interactions and better visual polish. * refactor(features): modernize Skills, Prompts and Agents components Major refactoring of feature components to improve code quality, user experience, and maintainability. SkillsPage Component (299 lines refactored): - Complete rewrite of layout and state management - Better integration with RepoManagerPanel - Improved navigation between list and detail views - Enhanced error handling with user-friendly messages - Better loading states with skeleton screens - Optimized re-renders with proper memoization - Cleaner separation between list and form views - Improved skill card interactions - Better responsive design for different screen sizes RepoManagerPanel Component (370 lines refactored): - Streamlined repository management workflow - Enhanced form validation with real-time feedback - Improved repository list with better visual hierarchy - Better handling of git operations (clone, pull, delete) - Enhanced error recovery for network issues - Cleaner state management reducing complexity - Improved TypeScript type safety - Better integration with Skills backend API - Enhanced loading indicators for async operations PromptPanel Component (249 lines refactored): - Modernized layout with FullScreenPanel integration - Better separation between list and edit modes - Improved prompt card design with better readability - Enhanced search and filter functionality - Cleaner state management for editing workflow - Better integration with PromptFormPanel - Improved delete confirmation with safety checks - Enhanced keyboard navigation support PromptFormPanel Component (238 lines refactored): - Streamlined form layout and validation - Better markdown editor integration - Real-time preview with syntax highlighting - Improved validation error display - Enhanced save/cancel workflow - Better handling of large prompt content - Cleaner form state management - Improved accessibility features AgentsPanel Component (33 lines modified): - Minor layout adjustments for consistency - Better integration with FullScreenPanel - Improved placeholder states - Enhanced error boundaries Type Definitions (types.ts): - Added 10 new type definitions - Better type safety for Skills/Prompts/Agents - Enhanced interfaces for repository management - Improved typing for form validations Architecture Improvements: - Reduced component coupling - Better prop interfaces with explicit types - Improved error boundaries - Enhanced code reusability - Better testing surface User Experience Enhancements: - Smoother transitions between views - Better visual feedback for actions - Improved error messages - Enhanced loading states - More intuitive navigation flows - Better responsive layouts Code Quality: - Net reduction of 29 lines while adding features - Improved code organization - Better naming conventions - Enhanced documentation - Cleaner control flow These changes significantly improve the maintainability and user experience of core feature components while establishing consistent patterns for future development. * style(ui): refine component layouts and improve visual consistency Comprehensive UI polish across multiple components to enhance visual design, improve user experience, and maintain consistency. UsageScriptModal Component (1302 lines refactored): - Complete layout overhaul for better usability - Improved script editor with syntax highlighting - Better template selection interface - Enhanced test/preview panels with clearer separation - Improved error feedback and validation messages - Better modal sizing and responsiveness - Cleaner tab navigation between sections - Enhanced code formatting and readability - Improved loading states for async operations - Better integration with parent components MCP Components: - McpFormModal (42 lines): * Streamlined form layout * Better server type selection (stdio/http) * Improved field grouping and labels * Enhanced validation feedback - UnifiedMcpPanel (14 lines): * Minor layout adjustments * Better list item spacing * Improved server status indicators * Enhanced action button placement Provider Components: - ProviderCard (11 lines): * Refined card layout and spacing * Better visual hierarchy * Improved badge placement * Enhanced hover effects - ProviderList (5 lines): * Minor grid layout adjustments * Better drag-and-drop visual feedback - GeminiConfigSections (4 lines): * Field label alignment * Improved spacing consistency Editor & Footer Components: - JsonEditor (13 lines): * Better editor height management * Improved error display * Enhanced syntax highlighting - UsageFooter (10 lines): * Refined footer layout * Better quota display * Improved refresh button placement Settings & Environment: - ImportExportSection (24 lines): * Better button layout * Improved action grouping * Enhanced visual feedback - EnvWarningBanner (4 lines): * Refined alert styling * Better dismiss button placement Global Styles (index.css): - Added 11 lines of utility classes - Improved transition timing - Better focus indicators - Enhanced scrollbar styling - Refined spacing utilities Design Improvements: - Consistent spacing using design tokens - Unified color palette application - Better typography hierarchy - Improved shadow system for depth - Enhanced interactive states (hover, active, focus) - Better border radius consistency - Refined animation timings Accessibility: - Improved focus indicators - Better keyboard navigation - Enhanced screen reader support - Improved color contrast ratios Code Quality: - Net increase of 68 lines due to UsageScriptModal improvements - Better component organization - Cleaner style application - Reduced style duplication These visual refinements create a more polished and professional interface while maintaining excellent usability and accessibility standards across all components. * chore(i18n): add auto-launch translation keys Add translation keys for new auto-launch feature to support multi-language interface. Translation Keys Added: - autoLaunch: Label for auto-launch toggle - autoLaunchDescription: Explanation of auto-launch functionality - autoLaunchEnabled: Status message when enabled Languages Updated: - Chinese (zh.json): 简体中文翻译 - English (en.json): English translations The translations maintain consistency with existing terminology and provide clear, user-friendly descriptions of the auto-launch feature across both supported languages. * test: update test suites to match component refactoring Comprehensive test updates to align with recent component refactoring and new auto-launch functionality. Component Tests: - AddProviderDialog.test.tsx (10 lines): * Updated test cases for new dialog behavior * Enhanced mock data for preset selection * Improved assertions for validation - ImportExportSection.test.tsx (16 lines): * Updated for new settings page integration * Enhanced test coverage for error scenarios * Better mock state management - McpFormModal.test.tsx (60 lines): * Extensive updates for form refactoring * New test cases for multi-app selection * Enhanced validation testing * Better coverage of stdio/http server types - ProviderList.test.tsx (11 lines): * Updated for new card layout * Enhanced drag-and-drop testing - SettingsDialog.test.tsx (96 lines): * Major updates for SettingsPage migration * New test cases for auto-launch functionality * Enhanced integration test coverage * Better async operation testing Hook Tests: - useDirectorySettings.test.tsx (32 lines): * Updated for refactored hook logic * Enhanced test coverage for edge cases - useDragSort.test.tsx (36 lines): * Simplified test cases * Better mock implementation * Improved assertions - useImportExport tests (16 lines total): * Updated for new error handling * Enhanced test coverage - useMcpValidation.test.tsx (23 lines): * Updated validation test cases * Better coverage of error scenarios - useProviderActions.test.tsx (48 lines): * Extensive updates for hook refactoring * New test cases for provider operations * Enhanced mock data - useSettings.test.tsx (12 lines): * New test cases for auto-launch * Enhanced settings state testing * Better async operation coverage Integration Tests: - App.test.tsx (41 lines): * Updated for new routing logic * Enhanced navigation testing * Better component integration coverage - SettingsDialog.test.tsx (88 lines): * Complete rewrite for SettingsPage * New integration test scenarios * Enhanced user workflow testing Mock Infrastructure: - handlers.ts (117 lines): * Major updates for MSW handlers * New handlers for auto-launch commands * Enhanced error simulation * Better request/response mocking - state.ts (37 lines): * Updated mock state structure * New state for auto-launch * Enhanced state reset functionality - tauriMocks.ts (10 lines): * Updated mock implementations * Better type safety - server.ts & testQueryClient.ts: * Minor cleanup (2 lines removed) Test Infrastructure Improvements: - Better test isolation - Enhanced mock data consistency - Improved async operation testing - Better error scenario coverage - Enhanced integration test patterns Coverage Improvements: - Net increase of 195 lines of test code - Better coverage of edge cases - Enhanced error path testing - Improved integration test scenarios - Better mock infrastructure All tests now pass with the refactored components while maintaining comprehensive coverage of functionality and edge cases. * style(ui): improve window dragging and provider card styles * fix(skills): resolve third-party skills installation failure - Add skills_path field to Skill struct - Use skills_path to construct correct source path during installation - Fix installation for repos with custom skill subdirectories * feat(icon): add icon type system and intelligent inference logic Introduce a new icon system for provider customization: - Add IconMetadata and IconPreset interfaces in src/types/icon.ts - Define structure for icon name, display name, category, keywords - Support default color configuration per icon - Implement smart icon inference in src/config/iconInference.ts - Create iconMappings for 25+ AI providers and cloud platforms - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc. - inferIconForPreset(): match provider name to icon config - addIconsToPresets(): batch apply icons to preset arrays - Support fuzzy matching for flexible name recognition This foundation enables automatic icon assignment when users add providers, improving visual identification in the provider list. * feat(ui): add icon picker, color picker and provider icon components Implement comprehensive icon selection system for provider customization: ## New Components ### ProviderIcon (src/components/ProviderIcon.tsx) - Render SVG icons by name with automatic fallback - Display provider initials when icon not found - Support custom sizing via size prop - Use dangerouslySetInnerHTML for inline SVG rendering ### IconPicker (src/components/IconPicker.tsx) - Grid-based icon selection with visual preview - Real-time search filtering by name and keywords - Integration with icon metadata for display names - Responsive grid layout (6-10 columns based on screen) ### ColorPicker (src/components/ColorPicker.tsx) - 12 preset colors for quick selection - Native color input for custom color picking - Hex input field for precise color entry - Visual feedback for selected color state ## Icon Assets (src/icons/extracted/) - 38 high-quality SVG icons for AI providers and platforms - Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc. - Cloud platforms: AWS, Azure, Google Cloud, Cloudflare - Auto-generated index.ts with getIcon/hasIcon helpers - Metadata system with searchable keywords per icon ## Build Scripts - scripts/extract-icons.js: Extract icons from simple-icons - scripts/generate-icon-index.js: Generate TypeScript index file * feat(provider): integrate icon system into provider UI components Add icon customization support to provider management interface: ## Type System Updates ### Provider Interface (src/types.ts) - Add optional `icon` field for icon name (e.g., "openai", "anthropic") - Add optional `iconColor` field for hex color (e.g., "#00A67E") ### Form Schema (src/lib/schemas/provider.ts) - Extend providerSchema with icon and iconColor optional fields - Maintain backward compatibility with existing providers ## UI Components ### ProviderCard (src/components/providers/ProviderCard.tsx) - Display ProviderIcon alongside provider name - Add icon container with hover animation effect - Adjust layout spacing for icon placement - Update translate offsets for action buttons ### BasicFormFields (src/components/providers/forms/BasicFormFields.tsx) - Add icon preview section showing current selection - Implement fullscreen icon picker dialog - Auto-apply default color from icon metadata on selection - Display provider name and icon status in preview ### AddProviderDialog & EditProviderDialog - Pass icon fields through form submission - Preserve icon data during provider updates This enables users to visually distinguish providers in the list with custom icons, improving UX for multi-provider setups. * feat(backend): add icon fields to Provider model and default mappings Extend Rust backend to support provider icon customization: ## Provider Model (src-tauri/src/provider.rs) - Add `icon: Option<String>` field for icon name - Add `icon_color: Option<String>` field for hex color - Use serde rename `iconColor` for frontend compatibility - Apply skip_serializing_if for clean JSON output - Update Provider::new() to initialize icon fields as None ## Provider Defaults (src-tauri/src/provider_defaults.rs) [NEW] - Define ProviderIcon struct with name and color fields - Create DEFAULT_PROVIDER_ICONS static HashMap with 23 providers: - AI providers: OpenAI, Anthropic, Claude, Google, Gemini, DeepSeek, Kimi, Moonshot, Zhipu, MiniMax, Baidu, Alibaba, Tencent, Meta, Microsoft, Cohere, Perplexity, Mistral, HuggingFace - Cloud platforms: AWS, Azure, Huawei, Cloudflare - Implement infer_provider_icon() with exact and fuzzy matching - Add unit tests for matching logic (exact, fuzzy, case-insensitive) ## Deep Link Support (src-tauri/src/deeplink.rs) - Initialize icon fields when creating Provider from deep link import ## Module Registration (src-tauri/src/lib.rs) - Register provider_defaults module ## Dependencies (Cargo.toml) - Add once_cell for lazy static initialization This backend support enables icon persistence and future features like auto-icon inference during provider creation. * chore(i18n): add translations for icon picker and provider icon Add Chinese and English translations for icon customization feature: ## Icon Picker (iconPicker) - search: "Search Icons" / "搜索图标" - searchPlaceholder: "Enter icon name..." / "输入图标名称..." - noResults: "No matching icons found" / "未找到匹配的图标" - category.aiProvider: "AI Providers" / "AI 服务商" - category.cloud: "Cloud Platforms" / "云平台" - category.tool: "Dev Tools" / "开发工具" - category.other: "Other" / "其他" ## Provider Icon (providerIcon) - label: "Icon" / "图标" - colorLabel: "Icon Color" / "图标颜色" - selectIcon: "Select Icon" / "选择图标" - preview: "Preview" / "预览" These translations support the new icon picker UI components and provider form icon selection interface. * style(ui): refine header layout and AppSwitcher color scheme Improve application header and component styling: ## App.tsx Header Layout - Wrap title and settings button in flex container with gap - Add vertical divider between title and settings icon - Apply responsive padding (pl-1 sm:pl-2) - Reformat JSX for better readability (prettier) - Fix string template formatting in className ## AppSwitcher Color Update - Change Claude tab gradient from orange/amber to teal/emerald/green - Update shadow color to match new teal theme - Change hover color from orange-500 to teal-500 - Align visual style with emerald/teal brand colors ## Dialog Component Cleanup - Remove default close button (X icon) from DialogContent - Allow parent components to control close button placement - Remove unused lucide-react X import ## index.css Header Border - Add top border (2px solid) to glass-header - Apply to both light and dark mode variants - Improve visual separation of header area These changes enhance visual consistency and modernize the UI appearance with a cohesive teal color scheme. * chore(deps): add icon library and update preset configurations Add dependencies and utility scripts for icon system: ## Dependencies (package.json) - Add @lobehub/icons-static-svg@1.73.0 - High-quality SVG icon library for AI providers - Source for extracted icons in src/icons/extracted/ - Update pnpm-lock.yaml accordingly ## Provider Preset Updates (src/config/claudeProviderPresets.ts) - Add optional `icon` and `iconColor` fields to ProviderPreset interface - Apply to Anthropic Official preset as example: - icon: "anthropic" - iconColor: "#D4915D" - Future presets can include default icon configurations ## Utility Script (scripts/filter-icons.js) [NEW] - Helper script for filtering and managing icon assets - Supports icon discovery and validation workflow - Complements extract-icons.js and generate-icon-index.js This completes the icon system infrastructure, providing all necessary tools and dependencies for icon customization. * refactor(ui): simplify AppSwitcher styles and migrate to local SVG icons - Replace complex gradient animations with clean, minimal tab design - Migrate from @lobehub/icons CDN to local SVG assets for better reliability - Fix clippy warning in error.rs (use inline format args) - Improve code formatting in skill service and commands - Reduce CSS complexity in AppSwitcher component (removed blur effects and gradients) - Update BrandIcons to use imported local SVG files instead of dynamic image loading This improves performance, reduces external dependencies, and provides a cleaner UI experience. * style(ui): hide scrollbars across all browsers and optimize form layout - Hide scrollbars globally with cross-browser support: * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none } * Firefox: scrollbar-width: none * IE 10+: -ms-overflow-style: none - Remove custom scrollbar styling (width, colors, hover states) - Reorganize BasicFormFields layout: * Move icon picker to top center as a clickable preview (80x80) * Change name and notes fields to horizontal grid layout (md:grid-cols-2) * Remove icon preview section from bottom * Improve visual hierarchy and space efficiency This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality. * refactor(layout): standardize max-width to 60rem and optimize padding structure - Unify container max-width across components: * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list * Replace max-w-5xl with max-w-[60rem] in PromptPanel * Move padding from header element to inner container for consistent spacing - Optimize padding hierarchy: * Remove px-6 from header element, add to inner header container * Remove px-6 from main element, keep it only in provider list container * Consolidate PromptPanel padding: move px-6 from nested divs to outer container * Remove redundant pl-1 sm:pl-2 from logo/title area - Benefits: * Consistent 60rem max-width provides better readability on wide screens * Simplified padding structure reduces CSS complexity * Cleaner responsive behavior with unified spacing rules This creates a more maintainable and visually consistent layout system. * refactor(ui): unify layout system with 60rem max-width and consistent spacing - Standardize container max-width across all panels: * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem] * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel * Ensures consistent reading width and visual balance on wide screens - Optimize padding hierarchy and structure: * Move px-6 from parent elements to content containers * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer * Add border separators (border-t/border-b) to header and footer sections * Consolidate nested padding in MCP, Skills, and Prompts panels * Remove redundant padding layers for cleaner CSS - Simplify component styling: * MCP list items: Replace card-based layout with modern group-based design * Remove unnecessary wrapper divs and flatten DOM structure * Update card hover effects with smooth transitions * Simplify icon selection dialog (remove description text in BasicFormFields) - Benefits: * Consistent 60rem max-width provides optimal readability * Unified spacing rules reduce maintenance complexity * Cleaner component hierarchy improves performance * Better responsive behavior across different screen sizes * More cohesive visual design language throughout the app This creates a maintainable, scalable design system foundation. * feat(deeplink): add Claude model fields support and enhance import dialog - Add Claude-specific model field support in deeplink import: * Support model (ANTHROPIC_MODEL) - general default model * Support haikuModel (ANTHROPIC_DEFAULT_HAIKU_MODEL) * Support sonnetModel (ANTHROPIC_DEFAULT_SONNET_MODEL) * Support opusModel (ANTHROPIC_DEFAULT_OPUS_MODEL) * Backend: Update DeepLinkImportRequest struct to include optional model fields * Frontend: Add TypeScript type definitions for new model parameters - Enhance deeplink demo page (deplink.html): * Add 5 new Claude configuration examples showcasing different model setups * Add parameter documentation with required/optional tags * Include basic config (no models), single model, complete 4-model, partial models, and third-party provider examples * Improve visual design with param-list component and color-coded badges * Add detailed descriptions for each configuration scenario - Redesign DeepLinkImportDialog layout: * Switch from 3-column to compact 2-column grid layout * Reduce dialog width from 500px to 650px for better content display * Add dedicated section for Claude model configurations with blue highlight box * Use uppercase labels and smaller text for more information density * Add truncation and tooltips for long URLs * Improve visual hierarchy with spacing and grouping * Increase z-index to 9999 to ensure dialog appears on top - Minor UI refinements: * Update App.tsx layout adjustments * Optimize McpFormModal styling * Refine ProviderCard and BasicFormFields components This enables users to import Claude providers with precise model configurations via deeplink. * feat(deeplink): add config file support for deeplink import Support importing provider configuration from embedded or remote config files. - Add base64 dependency for config content encoding - Support config, configFormat, and configUrl parameters - Make homepage/endpoint/apiKey optional when config is provided - Add config parsing and merging logic * feat(deeplink): enhance dialog with config file preview Add config file parsing and preview in deep link import dialog. - Support Base64 encoded config display - Add config file source indicator (embedded/remote) - Parse and display config fields by app type (Claude/Codex/Gemini) - Mask sensitive values in config preview - Improve dialog layout and content organization * refactor(ui): unify dialog styles and improve layout consistency Standardize dialog and panel components across the application. - Update dialog background to use semantic color tokens - Adjust FullScreenPanel max-width to 56rem for better alignment - Add drag region and prevent body scroll in full-screen panels - Optimize button sizes and spacing in panel headers - Apply consistent styling to all dialog-based components * i18n: add deeplink config preview translations Add missing translation keys for config file preview feature. - Add configSource, configEmbedded, configRemote labels - Add configDetails and configUrl display strings - Support both Chinese and English versions * feat(deeplink): enhance test page with v3.8 config file examples Improve deeplink test page with comprehensive config file import examples. - Add version badge for v3.8 features - Add copy-to-clipboard functionality for all deep links - Add Claude config file import examples (embedded/remote) - Add Codex config file import examples (auth.json + config.toml) - Add Gemini config file import examples (.env format) - Add config generator tool for easy testing - Update UI with better styling and layout * feat(settings): add autoSaveSettings for lightweight auto-save Add optimized auto-save function for General tab settings. - Add autoSaveSettings method for non-destructive auto-save - Only trigger system APIs when values actually change - Avoid unnecessary auto-launch and plugin config updates - Update tests to cover new functionality * refactor(settings): simplify settings page layout and auto-save Reorganize settings page structure and integrate autoSaveSettings. - Move save button inline within Advanced tab content - Remove sticky footer for cleaner layout - Use autoSaveSettings for General tab settings - Simplify dialog close behavior - Refactor ImportExportSection layout * style(providers): optimize card layout and action button sizes Improve provider card visual density and action buttons. - Reduce icon button sizes for compact layout - Adjust drag handle and icon sizes - Tighten spacing between action buttons - Update hover translate values for better alignment * refactor(mcp): improve form modal layout with adaptive height editor Restructure MCP form modal for better space utilization. - Split form into upper form fields and lower JSON editor sections - Add full-height mode support for JsonEditor component - Use flex layout for editor to fill available space - Update PromptFormPanel to use full-height editor - Fix locale text formatting * style: unify list item styles with semantic colors Apply consistent styling to list items across components. - Replace hardcoded colors with semantic tokens in MCP and Prompt list items - Add glass effect container to EndpointSpeedTest panel - Format code for better readability * style: format template literals for better readability Improve code formatting for conditional className expressions. - Break long template literals across multiple lines - Maintain consistent formatting in MCP form and endpoint test components * feat(deeplink): add config merge command for preview Expose config merging functionality to frontend for preview. - Add merge_deeplink_config Tauri command - Make parse_and_merge_config public for reuse - Enable frontend to display complete config before import * feat(deeplink): merge and display config in import dialog Enhance import dialog to fetch and display complete config. - Call mergeDeeplinkConfig API when config is present - Add UTF-8 base64 decoding support for config content - Add scrollable content area with custom scrollbar styling - Show complete configuration before user confirms import * i18n: add config merge error message Add translation for config file merge error handling. * style(deeplink): format test page HTML for better readability Improve HTML formatting in deeplink test page. - Format multiline attributes for better readability - Add consistent indentation to nested elements - Break long lines in buttons and links * refactor(usage): improve footer layout with two-row design Reorganize usage footer for better readability and space efficiency. - Split into two rows: update time + refresh button (row 1), usage stats (row 2) - Move refresh button to top row next to update time - Remove card background for cleaner look - Add fallback text when never updated - Improve spacing and alignment - Format template literals for consistency
2025-11-22 19:18:35 +08:00
"scriptConfig": "Request configuration",
"extractorCode": "Extractor code",
"extractorHint": "Return object should include remaining quota fields",
"fieldIsValid": "• isValid: Boolean, whether plan is valid",
"fieldInvalidMessage": "• invalidMessage: String, reason for expiration (shown when isValid is false)",
"fieldRemaining": "• remaining: Number, remaining quota",
"fieldUnit": "• unit: String, unit (e.g., \"USD\")",
"fieldPlanName": "• planName: String, plan name",
"fieldTotal": "• total: Number, total quota",
"fieldUsed": "• used: Number, used quota",
"fieldExtra": "• extra: String, custom display text",
"tip1": "• Variables {{apiKey}} and {{baseUrl}} are automatically replaced",
"tip2": "• Extractor function runs in sandbox environment, supports ES2020+ syntax",
"tip3": "• Entire config must be wrapped in () to form object literal expression"
},
"errors": {
"usage_query_failed": "Usage query failed"
},
"presetSelector": {
"title": "Select Configuration Type",
"custom": "Custom",
"customDescription": "Manually configure provider, requires complete configuration",
"officialDescription": "Official login, no API Key required",
"presetDescription": "Use preset configuration, only API Key required"
},
"mcp": {
"title": "MCP Management",
"claudeTitle": "Claude Code MCP Management",
"codexTitle": "Codex MCP Management",
"geminiTitle": "Gemini MCP Management",
"unifiedPanel": {
"title": "MCP Server Management",
"addServer": "Add Server",
"editServer": "Edit Server",
"deleteServer": "Delete Server",
"deleteConfirm": "Are you sure you want to delete server \"{{id}}\"? This action cannot be undone.",
"noServers": "No servers yet",
"enabledApps": "Enabled Apps",
"apps": {
"claude": "Claude",
"codex": "Codex",
"gemini": "Gemini"
}
},
"userLevelPath": "User-level MCP path",
"serverList": "Servers",
"loading": "Loading...",
"empty": "No MCP servers",
"emptyDescription": "Click the button in the top right to add your first MCP server",
"add": "Add MCP",
"addServer": "Add MCP",
"editServer": "Edit MCP",
"addClaudeServer": "Add Claude Code MCP",
"editClaudeServer": "Edit Claude Code MCP",
"addCodexServer": "Add Codex MCP",
"editCodexServer": "Edit Codex MCP",
"configPath": "Config Path",
"serverCount": "{{count}} MCP server(s) configured",
"enabledCount": "{{count}} enabled",
"template": {
"fetch": "Quick Template: mcp-fetch"
},
"form": {
"title": "MCP Title (Unique)",
"titlePlaceholder": "my-mcp-server",
"name": "Display Name",
"namePlaceholder": "e.g. @modelcontextprotocol/server-time",
"enabledApps": "Enable to Apps",
"noAppsWarning": "At least one app must be selected",
"description": "Description",
"descriptionPlaceholder": "Optional description",
"tags": "Tags (comma separated)",
"tagsPlaceholder": "stdio, time, utility",
"homepage": "Homepage",
"homepagePlaceholder": "https://example.com",
"docs": "Docs",
"docsPlaceholder": "https://example.com/docs",
"additionalInfo": "Additional Info",
"jsonConfig": "Full JSON Configuration",
"jsonConfigOrPrefix": "Full JSON configuration or use",
"tomlConfigOrPrefix": "Full TOML configuration or use",
"jsonPlaceholder": "{\n \"type\": \"stdio\",\n \"command\": \"uvx\",\n \"args\": [\"mcp-server-fetch\"]\n}",
"tomlConfig": "Full TOML Configuration",
"tomlPlaceholder": "type = \"stdio\"\ncommand = \"uvx\"\nargs = [\"mcp-server-fetch\"]",
"useWizard": "Config Wizard",
"syncOtherSide": "Mirror to {{target}}",
"syncOtherSideHint": "Apply the same settings to {{target}}; existing entries with the same id will be overwritten.",
"willOverwriteWarning": "Will overwrite existing config in {{target}}"
},
"wizard": {
"title": "MCP Configuration Wizard",
"hint": "Quickly configure MCP server and auto-generate JSON configuration",
"type": "Type",
"typeStdio": "stdio",
"typeHttp": "http",
"typeSse": "sse",
"command": "Command",
"commandPlaceholder": "npx or uvx",
"args": "Arguments",
"argsPlaceholder": "arg1\narg2",
"env": "Environment Variables",
"envPlaceholder": "KEY1=value1\nKEY2=value2",
"url": "URL",
"urlPlaceholder": "https://api.example.com/mcp",
"urlRequired": "Please enter URL",
"headers": "Headers (optional)",
"headersPlaceholder": "Authorization: Bearer your_token_here\nContent-Type: application/json",
"preview": "Configuration Preview",
"apply": "Apply Configuration"
},
"id": "Identifier (unique)",
"type": "Type",
"command": "Command",
"validateCommand": "Validate Command",
"args": "Args",
"argsPlaceholder": "e.g., mcp-server-fetch --help",
"env": "Environment (one per line, KEY=VALUE)",
"envPlaceholder": "FOO=bar\nHELLO=world",
"reset": "Reset",
"notice": {
"restartClaude": "Written. Restart Claude to take effect."
},
"msg": {
"saved": "Saved",
"deleted": "Deleted",
"enabled": "Enabled",
"disabled": "Disabled",
"templateAdded": "Template added"
},
"error": {
"idRequired": "Please enter identifier",
"idExists": "Identifier already exists. Please choose another.",
"jsonInvalid": "Invalid JSON format",
"tomlInvalid": "Invalid TOML format",
"commandRequired": "Please enter command",
"singleServerObjectRequired": "Please paste a single MCP server object (do not include top-level mcpServers)",
"saveFailed": "Save failed",
"deleteFailed": "Delete failed"
},
"validation": {
"ok": "Command available",
"fail": "Command not found"
},
"confirm": {
"deleteTitle": "Delete MCP Server",
"deleteMessage": "Are you sure you want to delete MCP server \"{{id}}\"? This action cannot be undone."
},
"presets": {
"title": "Select MCP Type",
"enable": "Enable",
"enabled": "Enabled",
"installed": "Installed",
"docs": "Docs",
"requiresEnv": "Requires env",
"fetch": {
"name": "mcp-server-fetch",
"description": "Universal HTTP request tool, supports GET/POST and other HTTP methods, suitable for quick API requests and web data scraping"
},
"time": {
"name": "@modelcontextprotocol/server-time",
"description": "Time query tool providing current time, timezone conversion, and date calculation features"
},
"memory": {
"name": "@modelcontextprotocol/server-memory",
"description": "Knowledge graph memory system supporting entities, relations, and observations to help AI remember important information from conversations"
},
"sequential-thinking": {
"name": "@modelcontextprotocol/server-sequential-thinking",
"description": "Sequential thinking tool helping AI break down complex problems into multiple steps for deeper thinking"
},
"context7": {
"name": "@upstash/context7-mcp",
"description": "Context7 documentation search tool providing latest library docs and code examples, with higher limits when configured with a key"
}
}
feat(prompts+i18n): add prompt management and improve prompt editor i18n (#193) * feat(prompts): add prompt management across Tauri service and React UI - backend: add commands/prompt.rs, services/prompt.rs, register in commands/mod.rs and lib.rs, refine app_config.rs - frontend: add PromptPanel, PromptFormModal, PromptListItem, MarkdownEditor, usePromptActions, integrate in App.tsx - api: add src/lib/api/prompts.ts - i18n: update src/i18n/locales/{en,zh}.json - build: update package.json and pnpm-lock.yaml * feat(i18n): improve i18n for prompts and Markdown editor - update src/i18n/locales/{en,zh}.json keys and strings - apply i18n in PromptFormModal, PromptPanel, and MarkdownEditor - align prompt text with src-tauri/src/services/prompt.rs * feat(prompts): add enable/disable toggle and simplify panel UI - Add PromptToggle component and integrate in prompt list items - Implement toggleEnabled with optimistic update; enable via API, disable via upsert with enabled=false; reload after success - Simplify PromptPanel: remove file import and current-file preview to keep CRUD flow focused - Tweak header controls style (use mcp variant) and minor copy: rename “Prompt Management” to “Prompts” - i18n: add disableSuccess/disableFailed messages - Backend (Tauri): prevent duplicate backups when importing original prompt content * style: unify code formatting with trailing commas * feat(prompts): add Gemini filename support to PromptFormModal Update filename mapping to use Record<AppId, string> pattern, supporting GEMINI.md alongside CLAUDE.md and AGENTS.md. * fix(prompts): sync enabled prompt to file when updating When updating a prompt that is currently enabled, automatically sync the updated content to the corresponding live file (CLAUDE.md/AGENTS.md/GEMINI.md). This ensures the active prompt file always reflects the latest content when editing enabled prompts.
2025-11-12 16:41:41 +08:00
},
"prompts": {
"manage": "Prompts",
"title": "{{appName}} Prompt Management",
"claudeTitle": "Claude Prompt Management",
"codexTitle": "Codex Prompt Management",
"add": "Add Prompt",
"edit": "Edit Prompt",
"addTitle": "Add {{appName}} Prompt",
"editTitle": "Edit {{appName}} Prompt",
"import": "Import Existing",
"count": "{{count}} prompts",
"enabled": "Enabled",
"enable": "Enable",
"enabledName": "Enabled: {{name}}",
"noneEnabled": "No prompt enabled",
"currentFile": "Current {{filename}} Content",
"empty": "No prompts yet",
"emptyDescription": "Click the button above to add or import prompts",
"loading": "Loading...",
"name": "Name",
"namePlaceholder": "e.g., Default Project Prompt",
"description": "Description",
"descriptionPlaceholder": "Optional description",
"content": "Content",
"contentPlaceholder": "# {{filename}}\n\nEnter prompt content here...",
"loadFailed": "Failed to load prompts",
"saveSuccess": "Saved successfully",
"saveFailed": "Failed to save",
"deleteSuccess": "Deleted successfully",
"deleteFailed": "Failed to delete",
"enableSuccess": "Enabled successfully",
"enableFailed": "Failed to enable",
"disableSuccess": "Disabled successfully",
"disableFailed": "Failed to disable",
"importSuccess": "Imported successfully",
"importFailed": "Failed to import",
"confirm": {
"deleteTitle": "Confirm Delete",
"deleteMessage": "Are you sure you want to delete prompt \"{{name}}\"?"
}
Feat/claude skills management (#237) * feat(skills): add Claude Skills management feature Implement complete Skills management system with repository discovery, installation, and lifecycle management capabilities. Backend: - Add SkillService with GitHub integration and installation logic - Implement skill commands (list, install, uninstall, check updates) - Support multiple skill repositories with caching Frontend: - Add Skills management page with repository browser - Create SkillCard and RepoManager components - Add badge, card, table UI components - Integrate Skills API with Tauri commands Files: 10 files changed, 1488 insertions(+) * feat(skills): integrate Skills feature into application Integrate Skills management feature with complete dependency updates, configuration structure extensions, and internationalization support. Dependencies: - Add @radix-ui/react-visually-hidden for accessibility - Add anyhow, zip, serde_yaml, tempfile for Skills backend - Enable chrono serde feature for timestamp serialization Backend Integration: - Extend MultiAppConfig with SkillStore field - Implement skills.json migration from legacy location - Register SkillService and skill commands in main app - Export skill module in commands and services Frontend Integration: - Add Skills page route and dialog in App - Integrate Skills UI with main navigation Internationalization: - Add complete Chinese translations for Skills UI - Add complete English translations for Skills UI Code Quality: - Remove redundant blank lines in gemini_mcp.rs - Format log statements in mcp.rs Tests: - Update import_export_sync tests for SkillStore - Update mcp_commands tests for new structure Files: 16 files changed, 540 insertions(+), 39 deletions(-) * style(skills): improve SkillsPage typography and spacing Optimize visual hierarchy and readability of Skills page: - Reduce title size from 2xl to lg with tighter tracking - Improve description spacing and color contrast - Enhance empty state with better text hierarchy - Use explicit gray colors for better dark mode support * feat(skills): support custom subdirectory path for skill scanning Add optional skillsPath field to SkillRepo to enable scanning skills from subdirectories (e.g., "skills/") instead of repository root. Changes: - Backend: Add skillsPath field with subdirectory scanning logic - Frontend: Add skillsPath input field and display in repo list - Presets: Add cexll/myclaude repo with skills/ subdirectory - Code quality: Fix clippy warnings (dedup logic, string formatting) Backward compatible: skillsPath is optional, defaults to root scanning. * refactor(skills): improve repo manager dialog layout Optimize dialog structure with fixed header and scrollable content: - Add flexbox layout with fixed header and scrollable body - Remove outer border wrapper for cleaner appearance - Match SkillsPage design pattern for consistency - Improve UX with better content hierarchy
2025-11-18 22:05:54 +08:00
},
"env": {
"warning": {
"title": "Environment Variable Conflicts Detected",
"description": "Found {{count}} environment variables that may override your configuration"
},
"actions": {
"expand": "View Details",
"collapse": "Collapse",
"selectAll": "Select All",
"clearSelection": "Clear Selection",
"deleteSelected": "Delete Selected ({{count}})",
"deleting": "Deleting..."
},
"field": {
"value": "Value",
"source": "Source"
},
"source": {
"userRegistry": "User Environment Variable (Registry)",
"systemRegistry": "System Environment Variable (Registry)",
"systemEnv": "System Environment Variable"
},
"delete": {
"success": "Environment variables deleted successfully",
"error": "Failed to delete environment variables"
},
"backup": {
"location": "Backup location: {{path}}"
},
"confirm": {
"title": "Confirm Delete Environment Variables",
"message": "Are you sure you want to delete {{count}} environment variable(s)?",
"backupNotice": "A backup will be created automatically before deletion. You can restore it later. Changes take effect after restarting the application or terminal.",
"confirm": "Confirm Delete"
},
"error": {
"noSelection": "Please select environment variables to delete"
}
},
Feat/claude skills management (#237) * feat(skills): add Claude Skills management feature Implement complete Skills management system with repository discovery, installation, and lifecycle management capabilities. Backend: - Add SkillService with GitHub integration and installation logic - Implement skill commands (list, install, uninstall, check updates) - Support multiple skill repositories with caching Frontend: - Add Skills management page with repository browser - Create SkillCard and RepoManager components - Add badge, card, table UI components - Integrate Skills API with Tauri commands Files: 10 files changed, 1488 insertions(+) * feat(skills): integrate Skills feature into application Integrate Skills management feature with complete dependency updates, configuration structure extensions, and internationalization support. Dependencies: - Add @radix-ui/react-visually-hidden for accessibility - Add anyhow, zip, serde_yaml, tempfile for Skills backend - Enable chrono serde feature for timestamp serialization Backend Integration: - Extend MultiAppConfig with SkillStore field - Implement skills.json migration from legacy location - Register SkillService and skill commands in main app - Export skill module in commands and services Frontend Integration: - Add Skills page route and dialog in App - Integrate Skills UI with main navigation Internationalization: - Add complete Chinese translations for Skills UI - Add complete English translations for Skills UI Code Quality: - Remove redundant blank lines in gemini_mcp.rs - Format log statements in mcp.rs Tests: - Update import_export_sync tests for SkillStore - Update mcp_commands tests for new structure Files: 16 files changed, 540 insertions(+), 39 deletions(-) * style(skills): improve SkillsPage typography and spacing Optimize visual hierarchy and readability of Skills page: - Reduce title size from 2xl to lg with tighter tracking - Improve description spacing and color contrast - Enhance empty state with better text hierarchy - Use explicit gray colors for better dark mode support * feat(skills): support custom subdirectory path for skill scanning Add optional skillsPath field to SkillRepo to enable scanning skills from subdirectories (e.g., "skills/") instead of repository root. Changes: - Backend: Add skillsPath field with subdirectory scanning logic - Frontend: Add skillsPath input field and display in repo list - Presets: Add cexll/myclaude repo with skills/ subdirectory - Code quality: Fix clippy warnings (dedup logic, string formatting) Backward compatible: skillsPath is optional, defaults to root scanning. * refactor(skills): improve repo manager dialog layout Optimize dialog structure with fixed header and scrollable content: - Add flexbox layout with fixed header and scrollable body - Remove outer border wrapper for cleaner appearance - Match SkillsPage design pattern for consistency - Improve UX with better content hierarchy
2025-11-18 22:05:54 +08:00
"skills": {
"manage": "Skills",
"title": "Claude Skills Management",
"description": "Discover and install Claude skills from popular repositories to extend Claude Code/Codex capabilities",
"refresh": "Refresh",
"refreshing": "Refreshing...",
"repoManager": "Repository Management",
"count": "{{count}} skills",
"empty": "No skills available",
"emptyDescription": "Add skill repositories to discover available skills",
"addRepo": "Add Skill Repository",
"loading": "Loading...",
"installed": "Installed",
"install": "Install",
"installing": "Installing...",
"uninstall": "Uninstall",
"uninstalling": "Uninstalling...",
"view": "View",
"noDescription": "No description",
"loadFailed": "Failed to load",
"installSuccess": "Skill {{name}} installed",
"installFailed": "Failed to install",
"uninstallSuccess": "Skill {{name}} uninstalled",
"uninstallFailed": "Failed to uninstall",
"error": {
"skillNotFound": "Skill not found: {{directory}}",
"missingRepoInfo": "Missing repository info (owner or name)",
"downloadTimeout": "Download repository {{owner}}/{{name}} timeout ({{timeout}}s)",
"downloadTimeoutHint": "Please check network connection or retry later",
"skillPathNotFound": "Skill path '{{path}}' not found in repository {{owner}}/{{name}}",
"skillDirNotFound": "Skill directory not found: {{path}}",
"emptyArchive": "Downloaded archive is empty",
"downloadFailed": "Download failed: HTTP {{status}}",
"allBranchesFailed": "All branches failed, tried: {{branches}}",
"httpError": "HTTP error {{status}}",
"http403": "GitHub access restricted, possibly rate limited",
"http404": "Repository or branch not found, please check URL",
"http429": "Too many requests, please wait and retry",
"parseMetadataFailed": "Failed to parse skill metadata",
"getHomeDirFailed": "Unable to get user home directory",
"networkError": "Network error",
"fsError": "File system error",
"unknownError": "Unknown error",
"suggestion": {
"checkNetwork": "Please check network connection",
"checkProxy": "Consider configuring HTTP proxy",
"retryLater": "Please retry later",
"checkRepoUrl": "Please check repository URL and branch name",
"checkDiskSpace": "Please check disk space",
"checkPermission": "Please check directory permissions"
}
},
Feat/claude skills management (#237) * feat(skills): add Claude Skills management feature Implement complete Skills management system with repository discovery, installation, and lifecycle management capabilities. Backend: - Add SkillService with GitHub integration and installation logic - Implement skill commands (list, install, uninstall, check updates) - Support multiple skill repositories with caching Frontend: - Add Skills management page with repository browser - Create SkillCard and RepoManager components - Add badge, card, table UI components - Integrate Skills API with Tauri commands Files: 10 files changed, 1488 insertions(+) * feat(skills): integrate Skills feature into application Integrate Skills management feature with complete dependency updates, configuration structure extensions, and internationalization support. Dependencies: - Add @radix-ui/react-visually-hidden for accessibility - Add anyhow, zip, serde_yaml, tempfile for Skills backend - Enable chrono serde feature for timestamp serialization Backend Integration: - Extend MultiAppConfig with SkillStore field - Implement skills.json migration from legacy location - Register SkillService and skill commands in main app - Export skill module in commands and services Frontend Integration: - Add Skills page route and dialog in App - Integrate Skills UI with main navigation Internationalization: - Add complete Chinese translations for Skills UI - Add complete English translations for Skills UI Code Quality: - Remove redundant blank lines in gemini_mcp.rs - Format log statements in mcp.rs Tests: - Update import_export_sync tests for SkillStore - Update mcp_commands tests for new structure Files: 16 files changed, 540 insertions(+), 39 deletions(-) * style(skills): improve SkillsPage typography and spacing Optimize visual hierarchy and readability of Skills page: - Reduce title size from 2xl to lg with tighter tracking - Improve description spacing and color contrast - Enhance empty state with better text hierarchy - Use explicit gray colors for better dark mode support * feat(skills): support custom subdirectory path for skill scanning Add optional skillsPath field to SkillRepo to enable scanning skills from subdirectories (e.g., "skills/") instead of repository root. Changes: - Backend: Add skillsPath field with subdirectory scanning logic - Frontend: Add skillsPath input field and display in repo list - Presets: Add cexll/myclaude repo with skills/ subdirectory - Code quality: Fix clippy warnings (dedup logic, string formatting) Backward compatible: skillsPath is optional, defaults to root scanning. * refactor(skills): improve repo manager dialog layout Optimize dialog structure with fixed header and scrollable content: - Add flexbox layout with fixed header and scrollable body - Remove outer border wrapper for cleaner appearance - Match SkillsPage design pattern for consistency - Improve UX with better content hierarchy
2025-11-18 22:05:54 +08:00
"repo": {
"title": "Manage Skill Repositories",
"description": "Add or remove GitHub skill repository sources",
"url": "Repository URL",
"urlPlaceholder": "owner/name or https://github.com/owner/name",
"branch": "Branch",
"branchPlaceholder": "main",
"path": "Skills Path",
"pathPlaceholder": "skills (optional, leave empty for root)",
"add": "Add Repository",
"list": "Added Repositories",
"empty": "No repositories",
"invalidUrl": "Invalid repository URL format",
"addSuccess": "Repository {{owner}}/{{name}} added, detected {{count}} skills",
"addFailed": "Failed to add",
"removeSuccess": "Repository {{owner}}/{{name}} removed",
"removeFailed": "Failed to remove",
"skillCount": "{{count}} skills detected"
}
feat: add model configuration support and fix Gemini deeplink bug (#251) * 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(-)
2025-11-19 09:03:18 +08:00
},
"deeplink": {
"confirmImport": "Confirm Import Provider",
"confirmImportDescription": "The following configuration will be imported from deep link into CC Switch",
"app": "App Type",
"providerName": "Provider Name",
"homepage": "Homepage",
"endpoint": "API Endpoint",
"apiKey": "API Key",
"model": "Model",
"notes": "Notes",
"import": "Import",
"importing": "Importing...",
"warning": "Please confirm the information above is correct before importing. You can edit or delete it later in the provider list.",
"parseError": "Failed to parse deep link",
"importSuccess": "Import successful",
"importSuccessDescription": "Provider \"{{name}}\" has been successfully imported",
Refactor/UI (#273) * feat(components): add reusable full-screen panel components Add new full-screen panel components to support the UI refactoring: - FullScreenPanel: Reusable full-screen layout component with header, content area, and optional footer. Provides consistent layout for settings, prompts, and other full-screen views. - PromptFormPanel: Dedicated panel for creating and editing prompts with markdown preview support. Features real-time validation and integrated save/cancel actions. - AgentsPanel: Panel component for managing agent configurations. Provides a consistent interface for agent CRUD operations. - RepoManagerPanel: Full-featured repository manager panel for Skills. Supports repository listing, addition, deletion, and configuration management with integrated validation. These components establish the foundation for the upcoming settings page migration from dialog-based to full-screen layout. * refactor(settings): migrate from dialog to full-screen page layout Complete migration of settings from modal dialog to dedicated full-screen page, improving UX and providing more space for configuration options. Changes: - Remove SettingsDialog component (legacy modal-based interface) - Add SettingsPage component with full-screen layout using FullScreenPanel - Refactor App.tsx routing to support dedicated settings page * Add settings route handler * Update navigation logic from dialog-based to page-based * Integrate with existing app switcher and provider management - Update ImportExportSection to work with new page layout * Improve spacing and layout for better readability * Enhanced error handling and user feedback * Better integration with page-level actions - Enhance useSettings hook to support page-based workflow * Add navigation state management * Improve settings persistence logic * Better error boundary handling Benefits: - More intuitive navigation with dedicated settings page - Better use of screen space for complex configurations - Improved accessibility with clearer visual hierarchy - Consistent with modern desktop application patterns - Easier to extend with new settings sections This change is part of the larger UI refactoring initiative to modernize the application interface and improve user experience. * refactor(forms): simplify and modernize form components Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance. * style(ui): modernize component layouts and visual design Update UI components with improved layouts, visual hierarchy, and modern design patterns for better user experience. Navigation & Brand Components: - AppSwitcher * Enhanced visual design with better spacing * Improved active state indicators * Smoother transitions and hover effects * Better mobile responsiveness - BrandIcons * Optimized icon rendering performance * Added support for more provider icons * Improved SVG handling and fallbacks * Better scaling across different screen sizes Editor Components: - JsonEditor * Enhanced syntax highlighting * Better error visualization * Improved code formatting options * Added line numbers and code folding support - UsageScriptModal * Complete layout overhaul (1239 lines refactored) * Better script editor integration * Improved template selection UI * Enhanced preview and testing panels * Better error feedback and validation Provider Components: - ProviderCard * Redesigned card layout with modern aesthetics * Better information density and readability * Improved action buttons placement * Enhanced status indicators (active/inactive) - ProviderList * Better grid/list view layouts * Improved drag-and-drop visual feedback * Enhanced sorting indicators - ProviderActions * Streamlined action menu * Better icon consistency * Improved tooltips and accessibility Usage & Footer: - UsageFooter * Redesigned footer layout * Better quota visualization * Improved refresh controls * Enhanced error states Design System Updates: - dialog.tsx (shadcn/ui component) * Updated to latest design tokens * Better overlay animations * Improved focus management - index.css * Added 65 lines of global utility classes * New animation keyframes * Enhanced color variables for dark mode * Improved typography scale - tailwind.config.js * Extended theme with new design tokens * Added custom animations and transitions * New spacing and sizing utilities * Enhanced color palette Visual Improvements: - Consistent border radius across components - Unified shadow system for depth perception - Better color contrast for accessibility (WCAG AA) - Smoother animations and transitions - Improved dark mode support These changes create a more polished, modern interface while maintaining consistency with the application's design language. * chore: update dialogs, i18n and improve component integration Various functional updates and improvements across provider dialogs, MCP panel, skills page, and internationalization. Provider Dialogs: - AddProviderDialog * Simplified form state management * Improved preset selection workflow * Better validation error messages * Enhanced template variable handling - EditProviderDialog * Streamlined edit flow with better state synchronization * Improved handling of live config backfilling * Better error recovery for failed updates * Enhanced integration with parent components MCP & Skills: - UnifiedMcpPanel * Reduced complexity from 140+ to ~95 lines * Improved multi-app server management * Better server type detection (stdio/http) * Enhanced server status indicators * Cleaner integration with MCP form modal - SkillsPage * Simplified navigation and state management * Better integration with RepoManagerPanel * Improved error handling for repository operations * Enhanced loading states - SkillCard * Minor layout adjustments * Better action button placement Environment & Configuration: - EnvWarningBanner * Improved conflict detection messages * Better visual hierarchy for warnings * Enhanced dismissal behavior - tauri.conf.json * Updated build configuration * Added new window management options Internationalization: - en.json & zh.json * Added 17 new translation keys for new features * Updated existing keys for better clarity * Added translations for new settings page * Improved consistency across UI text Code Cleanup: - mutations.ts * Removed 14 lines of unused mutation definitions * Cleaned up deprecated query invalidation logic * Better type safety for mutation parameters Overall Impact: - Reduced total lines by 51 (-10% in affected files) - Improved component integration and data flow - Better error handling and user feedback - Enhanced i18n coverage for new features These changes improve the overall polish and integration of various components while removing technical debt and unused code. * feat(backend): add auto-launch functionality Implement system auto-launch feature to allow CC-Switch to start automatically on system boot, improving user convenience. Backend Implementation: - auto_launch.rs: New module for auto-launch management * Cross-platform support using auto-launch crate * Enable/disable auto-launch with system integration * Proper error handling for permission issues * Platform-specific implementations (macOS/Windows/Linux) Command Layer: - Add get_auto_launch command to check current status - Add set_auto_launch command to toggle auto-start - Integrate commands with settings API Settings Integration: - Extend Settings struct with auto_launch field - Persist auto-launch preference in settings store - Automatic state synchronization on app startup Dependencies: - Add auto-launch ^0.5.0 to Cargo.toml - Update Cargo.lock with new dependency tree Technical Details: - Uses platform-specific auto-launch mechanisms: * macOS: Login Items via LaunchServices * Windows: Registry Run key * Linux: XDG autostart desktop files - Handles edge cases like permission denials gracefully - Maintains settings consistency across app restarts This feature enables users to have CC-Switch readily available after system boot without manual intervention, particularly useful for users who frequently switch between API providers. * refactor(settings): enhance settings page with auto-launch integration Complete refactoring of settings page architecture to integrate auto-launch feature and improve overall settings management workflow. SettingsPage Component: - Integrate auto-launch toggle with WindowSettings section - Improve layout and spacing for better visual hierarchy - Enhanced error handling for settings operations - Better loading states during settings updates - Improved accessibility with proper ARIA labels WindowSettings Component: - Add auto-launch switch with real-time status - Integrate with backend auto-launch commands - Proper error feedback for permission issues - Visual indicators for current auto-launch state - Tooltip guidance for auto-launch functionality useSettings Hook (Major Refactoring): - Complete rewrite reducing complexity by ~30% - Better separation of concerns with dedicated handlers - Improved state management using React Query - Enhanced auto-launch state synchronization * Fetch auto-launch status on mount * Real-time updates on toggle * Proper error recovery - Optimized re-renders with better memoization - Cleaner API for component integration - Better TypeScript type safety Settings API: - Add getAutoLaunch() method - Add setAutoLaunch(enabled: boolean) method - Type-safe Tauri command invocations - Proper error propagation to UI layer Architecture Improvements: - Reduced hook complexity from 197 to ~140 effective lines - Eliminated redundant state management logic - Better error boundaries and fallback handling - Improved testability with clearer separation User Experience Enhancements: - Instant visual feedback on auto-launch toggle - Clear error messages for permission issues - Loading indicators during async operations - Consistent behavior across all platforms This refactoring provides a solid foundation for future settings additions while maintaining code quality and user experience. * refactor(ui): optimize FullScreenPanel, Dialog and App routing Comprehensive refactoring of core UI components to improve code quality, maintainability, and user experience. FullScreenPanel Component: - Enhanced props interface with better TypeScript types - Improved layout flexibility with customizable padding - Better header/footer composition patterns - Enhanced scroll behavior for long content - Added support for custom actions in header - Improved responsive design for different screen sizes - Better integration with parent components - Cleaner prop drilling with context where appropriate Dialog Component (shadcn/ui): - Updated to latest component patterns - Improved animation timing and easing - Better focus trap management - Enhanced overlay styling with backdrop blur - Improved accessibility (ARIA labels, keyboard navigation) - Better close button positioning and styling - Enhanced mobile responsiveness - Cleaner composition with DialogHeader/Footer App Component Routing: - Refactored routing logic for better clarity - Improved state management for navigation - Better integration with settings page - Enhanced error boundary handling - Cleaner separation of layout concerns - Improved provider context propagation - Better handling of deep links - Optimized re-renders with React.memo where appropriate Code Quality Improvements: - Reduced prop drilling with better component composition - Improved TypeScript type safety - Better separation of concerns - Enhanced code readability with clearer naming - Eliminated redundant logic Performance Optimizations: - Reduced unnecessary re-renders - Better memoization of callbacks - Optimized component tree structure - Improved event handler efficiency User Experience: - Smoother transitions and animations - Better visual feedback for interactions - Improved loading states - More consistent behavior across features These changes create a more maintainable and performant foundation for the application's UI layer while improving the overall user experience with smoother interactions and better visual polish. * refactor(features): modernize Skills, Prompts and Agents components Major refactoring of feature components to improve code quality, user experience, and maintainability. SkillsPage Component (299 lines refactored): - Complete rewrite of layout and state management - Better integration with RepoManagerPanel - Improved navigation between list and detail views - Enhanced error handling with user-friendly messages - Better loading states with skeleton screens - Optimized re-renders with proper memoization - Cleaner separation between list and form views - Improved skill card interactions - Better responsive design for different screen sizes RepoManagerPanel Component (370 lines refactored): - Streamlined repository management workflow - Enhanced form validation with real-time feedback - Improved repository list with better visual hierarchy - Better handling of git operations (clone, pull, delete) - Enhanced error recovery for network issues - Cleaner state management reducing complexity - Improved TypeScript type safety - Better integration with Skills backend API - Enhanced loading indicators for async operations PromptPanel Component (249 lines refactored): - Modernized layout with FullScreenPanel integration - Better separation between list and edit modes - Improved prompt card design with better readability - Enhanced search and filter functionality - Cleaner state management for editing workflow - Better integration with PromptFormPanel - Improved delete confirmation with safety checks - Enhanced keyboard navigation support PromptFormPanel Component (238 lines refactored): - Streamlined form layout and validation - Better markdown editor integration - Real-time preview with syntax highlighting - Improved validation error display - Enhanced save/cancel workflow - Better handling of large prompt content - Cleaner form state management - Improved accessibility features AgentsPanel Component (33 lines modified): - Minor layout adjustments for consistency - Better integration with FullScreenPanel - Improved placeholder states - Enhanced error boundaries Type Definitions (types.ts): - Added 10 new type definitions - Better type safety for Skills/Prompts/Agents - Enhanced interfaces for repository management - Improved typing for form validations Architecture Improvements: - Reduced component coupling - Better prop interfaces with explicit types - Improved error boundaries - Enhanced code reusability - Better testing surface User Experience Enhancements: - Smoother transitions between views - Better visual feedback for actions - Improved error messages - Enhanced loading states - More intuitive navigation flows - Better responsive layouts Code Quality: - Net reduction of 29 lines while adding features - Improved code organization - Better naming conventions - Enhanced documentation - Cleaner control flow These changes significantly improve the maintainability and user experience of core feature components while establishing consistent patterns for future development. * style(ui): refine component layouts and improve visual consistency Comprehensive UI polish across multiple components to enhance visual design, improve user experience, and maintain consistency. UsageScriptModal Component (1302 lines refactored): - Complete layout overhaul for better usability - Improved script editor with syntax highlighting - Better template selection interface - Enhanced test/preview panels with clearer separation - Improved error feedback and validation messages - Better modal sizing and responsiveness - Cleaner tab navigation between sections - Enhanced code formatting and readability - Improved loading states for async operations - Better integration with parent components MCP Components: - McpFormModal (42 lines): * Streamlined form layout * Better server type selection (stdio/http) * Improved field grouping and labels * Enhanced validation feedback - UnifiedMcpPanel (14 lines): * Minor layout adjustments * Better list item spacing * Improved server status indicators * Enhanced action button placement Provider Components: - ProviderCard (11 lines): * Refined card layout and spacing * Better visual hierarchy * Improved badge placement * Enhanced hover effects - ProviderList (5 lines): * Minor grid layout adjustments * Better drag-and-drop visual feedback - GeminiConfigSections (4 lines): * Field label alignment * Improved spacing consistency Editor & Footer Components: - JsonEditor (13 lines): * Better editor height management * Improved error display * Enhanced syntax highlighting - UsageFooter (10 lines): * Refined footer layout * Better quota display * Improved refresh button placement Settings & Environment: - ImportExportSection (24 lines): * Better button layout * Improved action grouping * Enhanced visual feedback - EnvWarningBanner (4 lines): * Refined alert styling * Better dismiss button placement Global Styles (index.css): - Added 11 lines of utility classes - Improved transition timing - Better focus indicators - Enhanced scrollbar styling - Refined spacing utilities Design Improvements: - Consistent spacing using design tokens - Unified color palette application - Better typography hierarchy - Improved shadow system for depth - Enhanced interactive states (hover, active, focus) - Better border radius consistency - Refined animation timings Accessibility: - Improved focus indicators - Better keyboard navigation - Enhanced screen reader support - Improved color contrast ratios Code Quality: - Net increase of 68 lines due to UsageScriptModal improvements - Better component organization - Cleaner style application - Reduced style duplication These visual refinements create a more polished and professional interface while maintaining excellent usability and accessibility standards across all components. * chore(i18n): add auto-launch translation keys Add translation keys for new auto-launch feature to support multi-language interface. Translation Keys Added: - autoLaunch: Label for auto-launch toggle - autoLaunchDescription: Explanation of auto-launch functionality - autoLaunchEnabled: Status message when enabled Languages Updated: - Chinese (zh.json): 简体中文翻译 - English (en.json): English translations The translations maintain consistency with existing terminology and provide clear, user-friendly descriptions of the auto-launch feature across both supported languages. * test: update test suites to match component refactoring Comprehensive test updates to align with recent component refactoring and new auto-launch functionality. Component Tests: - AddProviderDialog.test.tsx (10 lines): * Updated test cases for new dialog behavior * Enhanced mock data for preset selection * Improved assertions for validation - ImportExportSection.test.tsx (16 lines): * Updated for new settings page integration * Enhanced test coverage for error scenarios * Better mock state management - McpFormModal.test.tsx (60 lines): * Extensive updates for form refactoring * New test cases for multi-app selection * Enhanced validation testing * Better coverage of stdio/http server types - ProviderList.test.tsx (11 lines): * Updated for new card layout * Enhanced drag-and-drop testing - SettingsDialog.test.tsx (96 lines): * Major updates for SettingsPage migration * New test cases for auto-launch functionality * Enhanced integration test coverage * Better async operation testing Hook Tests: - useDirectorySettings.test.tsx (32 lines): * Updated for refactored hook logic * Enhanced test coverage for edge cases - useDragSort.test.tsx (36 lines): * Simplified test cases * Better mock implementation * Improved assertions - useImportExport tests (16 lines total): * Updated for new error handling * Enhanced test coverage - useMcpValidation.test.tsx (23 lines): * Updated validation test cases * Better coverage of error scenarios - useProviderActions.test.tsx (48 lines): * Extensive updates for hook refactoring * New test cases for provider operations * Enhanced mock data - useSettings.test.tsx (12 lines): * New test cases for auto-launch * Enhanced settings state testing * Better async operation coverage Integration Tests: - App.test.tsx (41 lines): * Updated for new routing logic * Enhanced navigation testing * Better component integration coverage - SettingsDialog.test.tsx (88 lines): * Complete rewrite for SettingsPage * New integration test scenarios * Enhanced user workflow testing Mock Infrastructure: - handlers.ts (117 lines): * Major updates for MSW handlers * New handlers for auto-launch commands * Enhanced error simulation * Better request/response mocking - state.ts (37 lines): * Updated mock state structure * New state for auto-launch * Enhanced state reset functionality - tauriMocks.ts (10 lines): * Updated mock implementations * Better type safety - server.ts & testQueryClient.ts: * Minor cleanup (2 lines removed) Test Infrastructure Improvements: - Better test isolation - Enhanced mock data consistency - Improved async operation testing - Better error scenario coverage - Enhanced integration test patterns Coverage Improvements: - Net increase of 195 lines of test code - Better coverage of edge cases - Enhanced error path testing - Improved integration test scenarios - Better mock infrastructure All tests now pass with the refactored components while maintaining comprehensive coverage of functionality and edge cases. * style(ui): improve window dragging and provider card styles * fix(skills): resolve third-party skills installation failure - Add skills_path field to Skill struct - Use skills_path to construct correct source path during installation - Fix installation for repos with custom skill subdirectories * feat(icon): add icon type system and intelligent inference logic Introduce a new icon system for provider customization: - Add IconMetadata and IconPreset interfaces in src/types/icon.ts - Define structure for icon name, display name, category, keywords - Support default color configuration per icon - Implement smart icon inference in src/config/iconInference.ts - Create iconMappings for 25+ AI providers and cloud platforms - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc. - inferIconForPreset(): match provider name to icon config - addIconsToPresets(): batch apply icons to preset arrays - Support fuzzy matching for flexible name recognition This foundation enables automatic icon assignment when users add providers, improving visual identification in the provider list. * feat(ui): add icon picker, color picker and provider icon components Implement comprehensive icon selection system for provider customization: ## New Components ### ProviderIcon (src/components/ProviderIcon.tsx) - Render SVG icons by name with automatic fallback - Display provider initials when icon not found - Support custom sizing via size prop - Use dangerouslySetInnerHTML for inline SVG rendering ### IconPicker (src/components/IconPicker.tsx) - Grid-based icon selection with visual preview - Real-time search filtering by name and keywords - Integration with icon metadata for display names - Responsive grid layout (6-10 columns based on screen) ### ColorPicker (src/components/ColorPicker.tsx) - 12 preset colors for quick selection - Native color input for custom color picking - Hex input field for precise color entry - Visual feedback for selected color state ## Icon Assets (src/icons/extracted/) - 38 high-quality SVG icons for AI providers and platforms - Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc. - Cloud platforms: AWS, Azure, Google Cloud, Cloudflare - Auto-generated index.ts with getIcon/hasIcon helpers - Metadata system with searchable keywords per icon ## Build Scripts - scripts/extract-icons.js: Extract icons from simple-icons - scripts/generate-icon-index.js: Generate TypeScript index file * feat(provider): integrate icon system into provider UI components Add icon customization support to provider management interface: ## Type System Updates ### Provider Interface (src/types.ts) - Add optional `icon` field for icon name (e.g., "openai", "anthropic") - Add optional `iconColor` field for hex color (e.g., "#00A67E") ### Form Schema (src/lib/schemas/provider.ts) - Extend providerSchema with icon and iconColor optional fields - Maintain backward compatibility with existing providers ## UI Components ### ProviderCard (src/components/providers/ProviderCard.tsx) - Display ProviderIcon alongside provider name - Add icon container with hover animation effect - Adjust layout spacing for icon placement - Update translate offsets for action buttons ### BasicFormFields (src/components/providers/forms/BasicFormFields.tsx) - Add icon preview section showing current selection - Implement fullscreen icon picker dialog - Auto-apply default color from icon metadata on selection - Display provider name and icon status in preview ### AddProviderDialog & EditProviderDialog - Pass icon fields through form submission - Preserve icon data during provider updates This enables users to visually distinguish providers in the list with custom icons, improving UX for multi-provider setups. * feat(backend): add icon fields to Provider model and default mappings Extend Rust backend to support provider icon customization: ## Provider Model (src-tauri/src/provider.rs) - Add `icon: Option<String>` field for icon name - Add `icon_color: Option<String>` field for hex color - Use serde rename `iconColor` for frontend compatibility - Apply skip_serializing_if for clean JSON output - Update Provider::new() to initialize icon fields as None ## Provider Defaults (src-tauri/src/provider_defaults.rs) [NEW] - Define ProviderIcon struct with name and color fields - Create DEFAULT_PROVIDER_ICONS static HashMap with 23 providers: - AI providers: OpenAI, Anthropic, Claude, Google, Gemini, DeepSeek, Kimi, Moonshot, Zhipu, MiniMax, Baidu, Alibaba, Tencent, Meta, Microsoft, Cohere, Perplexity, Mistral, HuggingFace - Cloud platforms: AWS, Azure, Huawei, Cloudflare - Implement infer_provider_icon() with exact and fuzzy matching - Add unit tests for matching logic (exact, fuzzy, case-insensitive) ## Deep Link Support (src-tauri/src/deeplink.rs) - Initialize icon fields when creating Provider from deep link import ## Module Registration (src-tauri/src/lib.rs) - Register provider_defaults module ## Dependencies (Cargo.toml) - Add once_cell for lazy static initialization This backend support enables icon persistence and future features like auto-icon inference during provider creation. * chore(i18n): add translations for icon picker and provider icon Add Chinese and English translations for icon customization feature: ## Icon Picker (iconPicker) - search: "Search Icons" / "搜索图标" - searchPlaceholder: "Enter icon name..." / "输入图标名称..." - noResults: "No matching icons found" / "未找到匹配的图标" - category.aiProvider: "AI Providers" / "AI 服务商" - category.cloud: "Cloud Platforms" / "云平台" - category.tool: "Dev Tools" / "开发工具" - category.other: "Other" / "其他" ## Provider Icon (providerIcon) - label: "Icon" / "图标" - colorLabel: "Icon Color" / "图标颜色" - selectIcon: "Select Icon" / "选择图标" - preview: "Preview" / "预览" These translations support the new icon picker UI components and provider form icon selection interface. * style(ui): refine header layout and AppSwitcher color scheme Improve application header and component styling: ## App.tsx Header Layout - Wrap title and settings button in flex container with gap - Add vertical divider between title and settings icon - Apply responsive padding (pl-1 sm:pl-2) - Reformat JSX for better readability (prettier) - Fix string template formatting in className ## AppSwitcher Color Update - Change Claude tab gradient from orange/amber to teal/emerald/green - Update shadow color to match new teal theme - Change hover color from orange-500 to teal-500 - Align visual style with emerald/teal brand colors ## Dialog Component Cleanup - Remove default close button (X icon) from DialogContent - Allow parent components to control close button placement - Remove unused lucide-react X import ## index.css Header Border - Add top border (2px solid) to glass-header - Apply to both light and dark mode variants - Improve visual separation of header area These changes enhance visual consistency and modernize the UI appearance with a cohesive teal color scheme. * chore(deps): add icon library and update preset configurations Add dependencies and utility scripts for icon system: ## Dependencies (package.json) - Add @lobehub/icons-static-svg@1.73.0 - High-quality SVG icon library for AI providers - Source for extracted icons in src/icons/extracted/ - Update pnpm-lock.yaml accordingly ## Provider Preset Updates (src/config/claudeProviderPresets.ts) - Add optional `icon` and `iconColor` fields to ProviderPreset interface - Apply to Anthropic Official preset as example: - icon: "anthropic" - iconColor: "#D4915D" - Future presets can include default icon configurations ## Utility Script (scripts/filter-icons.js) [NEW] - Helper script for filtering and managing icon assets - Supports icon discovery and validation workflow - Complements extract-icons.js and generate-icon-index.js This completes the icon system infrastructure, providing all necessary tools and dependencies for icon customization. * refactor(ui): simplify AppSwitcher styles and migrate to local SVG icons - Replace complex gradient animations with clean, minimal tab design - Migrate from @lobehub/icons CDN to local SVG assets for better reliability - Fix clippy warning in error.rs (use inline format args) - Improve code formatting in skill service and commands - Reduce CSS complexity in AppSwitcher component (removed blur effects and gradients) - Update BrandIcons to use imported local SVG files instead of dynamic image loading This improves performance, reduces external dependencies, and provides a cleaner UI experience. * style(ui): hide scrollbars across all browsers and optimize form layout - Hide scrollbars globally with cross-browser support: * WebKit browsers (Chrome, Safari, Edge): ::-webkit-scrollbar { display: none } * Firefox: scrollbar-width: none * IE 10+: -ms-overflow-style: none - Remove custom scrollbar styling (width, colors, hover states) - Reorganize BasicFormFields layout: * Move icon picker to top center as a clickable preview (80x80) * Change name and notes fields to horizontal grid layout (md:grid-cols-2) * Remove icon preview section from bottom * Improve visual hierarchy and space efficiency This provides a cleaner, more modern UI with hidden scrollbars while maintaining full scroll functionality. * refactor(layout): standardize max-width to 60rem and optimize padding structure - Unify container max-width across components: * Replace max-w-4xl with max-w-[60rem] in App.tsx provider list * Replace max-w-5xl with max-w-[60rem] in PromptPanel * Move padding from header element to inner container for consistent spacing - Optimize padding hierarchy: * Remove px-6 from header element, add to inner header container * Remove px-6 from main element, keep it only in provider list container * Consolidate PromptPanel padding: move px-6 from nested divs to outer container * Remove redundant pl-1 sm:pl-2 from logo/title area - Benefits: * Consistent 60rem max-width provides better readability on wide screens * Simplified padding structure reduces CSS complexity * Cleaner responsive behavior with unified spacing rules This creates a more maintainable and visually consistent layout system. * refactor(ui): unify layout system with 60rem max-width and consistent spacing - Standardize container max-width across all panels: * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem] * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel * Ensures consistent reading width and visual balance on wide screens - Optimize padding hierarchy and structure: * Move px-6 from parent elements to content containers * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer * Add border separators (border-t/border-b) to header and footer sections * Consolidate nested padding in MCP, Skills, and Prompts panels * Remove redundant padding layers for cleaner CSS - Simplify component styling: * MCP list items: Replace card-based layout with modern group-based design * Remove unnecessary wrapper divs and flatten DOM structure * Update card hover effects with smooth transitions * Simplify icon selection dialog (remove description text in BasicFormFields) - Benefits: * Consistent 60rem max-width provides optimal readability * Unified spacing rules reduce maintenance complexity * Cleaner component hierarchy improves performance * Better responsive behavior across different screen sizes * More cohesive visual design language throughout the app This creates a maintainable, scalable design system foundation. * feat(deeplink): add Claude model fields support and enhance import dialog - Add Claude-specific model field support in deeplink import: * Support model (ANTHROPIC_MODEL) - general default model * Support haikuModel (ANTHROPIC_DEFAULT_HAIKU_MODEL) * Support sonnetModel (ANTHROPIC_DEFAULT_SONNET_MODEL) * Support opusModel (ANTHROPIC_DEFAULT_OPUS_MODEL) * Backend: Update DeepLinkImportRequest struct to include optional model fields * Frontend: Add TypeScript type definitions for new model parameters - Enhance deeplink demo page (deplink.html): * Add 5 new Claude configuration examples showcasing different model setups * Add parameter documentation with required/optional tags * Include basic config (no models), single model, complete 4-model, partial models, and third-party provider examples * Improve visual design with param-list component and color-coded badges * Add detailed descriptions for each configuration scenario - Redesign DeepLinkImportDialog layout: * Switch from 3-column to compact 2-column grid layout * Reduce dialog width from 500px to 650px for better content display * Add dedicated section for Claude model configurations with blue highlight box * Use uppercase labels and smaller text for more information density * Add truncation and tooltips for long URLs * Improve visual hierarchy with spacing and grouping * Increase z-index to 9999 to ensure dialog appears on top - Minor UI refinements: * Update App.tsx layout adjustments * Optimize McpFormModal styling * Refine ProviderCard and BasicFormFields components This enables users to import Claude providers with precise model configurations via deeplink. * feat(deeplink): add config file support for deeplink import Support importing provider configuration from embedded or remote config files. - Add base64 dependency for config content encoding - Support config, configFormat, and configUrl parameters - Make homepage/endpoint/apiKey optional when config is provided - Add config parsing and merging logic * feat(deeplink): enhance dialog with config file preview Add config file parsing and preview in deep link import dialog. - Support Base64 encoded config display - Add config file source indicator (embedded/remote) - Parse and display config fields by app type (Claude/Codex/Gemini) - Mask sensitive values in config preview - Improve dialog layout and content organization * refactor(ui): unify dialog styles and improve layout consistency Standardize dialog and panel components across the application. - Update dialog background to use semantic color tokens - Adjust FullScreenPanel max-width to 56rem for better alignment - Add drag region and prevent body scroll in full-screen panels - Optimize button sizes and spacing in panel headers - Apply consistent styling to all dialog-based components * i18n: add deeplink config preview translations Add missing translation keys for config file preview feature. - Add configSource, configEmbedded, configRemote labels - Add configDetails and configUrl display strings - Support both Chinese and English versions * feat(deeplink): enhance test page with v3.8 config file examples Improve deeplink test page with comprehensive config file import examples. - Add version badge for v3.8 features - Add copy-to-clipboard functionality for all deep links - Add Claude config file import examples (embedded/remote) - Add Codex config file import examples (auth.json + config.toml) - Add Gemini config file import examples (.env format) - Add config generator tool for easy testing - Update UI with better styling and layout * feat(settings): add autoSaveSettings for lightweight auto-save Add optimized auto-save function for General tab settings. - Add autoSaveSettings method for non-destructive auto-save - Only trigger system APIs when values actually change - Avoid unnecessary auto-launch and plugin config updates - Update tests to cover new functionality * refactor(settings): simplify settings page layout and auto-save Reorganize settings page structure and integrate autoSaveSettings. - Move save button inline within Advanced tab content - Remove sticky footer for cleaner layout - Use autoSaveSettings for General tab settings - Simplify dialog close behavior - Refactor ImportExportSection layout * style(providers): optimize card layout and action button sizes Improve provider card visual density and action buttons. - Reduce icon button sizes for compact layout - Adjust drag handle and icon sizes - Tighten spacing between action buttons - Update hover translate values for better alignment * refactor(mcp): improve form modal layout with adaptive height editor Restructure MCP form modal for better space utilization. - Split form into upper form fields and lower JSON editor sections - Add full-height mode support for JsonEditor component - Use flex layout for editor to fill available space - Update PromptFormPanel to use full-height editor - Fix locale text formatting * style: unify list item styles with semantic colors Apply consistent styling to list items across components. - Replace hardcoded colors with semantic tokens in MCP and Prompt list items - Add glass effect container to EndpointSpeedTest panel - Format code for better readability * style: format template literals for better readability Improve code formatting for conditional className expressions. - Break long template literals across multiple lines - Maintain consistent formatting in MCP form and endpoint test components * feat(deeplink): add config merge command for preview Expose config merging functionality to frontend for preview. - Add merge_deeplink_config Tauri command - Make parse_and_merge_config public for reuse - Enable frontend to display complete config before import * feat(deeplink): merge and display config in import dialog Enhance import dialog to fetch and display complete config. - Call mergeDeeplinkConfig API when config is present - Add UTF-8 base64 decoding support for config content - Add scrollable content area with custom scrollbar styling - Show complete configuration before user confirms import * i18n: add config merge error message Add translation for config file merge error handling. * style(deeplink): format test page HTML for better readability Improve HTML formatting in deeplink test page. - Format multiline attributes for better readability - Add consistent indentation to nested elements - Break long lines in buttons and links * refactor(usage): improve footer layout with two-row design Reorganize usage footer for better readability and space efficiency. - Split into two rows: update time + refresh button (row 1), usage stats (row 2) - Move refresh button to top row next to update time - Remove card background for cleaner look - Add fallback text when never updated - Improve spacing and alignment - Format template literals for consistency
2025-11-22 19:18:35 +08:00
"importError": "Failed to import",
"configSource": "Config Source",
"configEmbedded": "Embedded Config",
"configRemote": "Remote Config",
"configDetails": "Config Details",
"configUrl": "Config File URL",
"configMergeError": "Failed to merge configuration file"
},
"iconPicker": {
"search": "Search Icons",
"searchPlaceholder": "Enter icon name...",
"noResults": "No matching icons found",
"category": {
"aiProvider": "AI Providers",
"cloud": "Cloud Platforms",
"tool": "Dev Tools",
"other": "Other"
}
},
"providerIcon": {
"label": "Icon",
"colorLabel": "Icon Color",
"selectIcon": "Select Icon",
"preview": "Preview"
}
}