admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cc0b9352bc839acb8e4ba651abbb55deddf8b7f1
cc-switch/deplink.html

1674 lines
87 KiB
HTML
Raw Normal View History

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
<!DOCTYPE html>
<html lang="zh-CN">
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
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
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CC Switch 深链接测试</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
color: white;
padding: 40px;
text-align: center;
}
.header h1 {
font-size: 32px;
margin-bottom: 10px;
}
.header p {
font-size: 16px;
opacity: 0.9;
}
.content {
padding: 40px;
}
.section {
margin-bottom: 40px;
}
.section h2 {
color: #2c3e50;
font-size: 24px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #ecf0f1;
}
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
.version-badge {
display: inline-block;
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
margin-left: 8px;
vertical-align: middle;
}
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
.link-card {
background: #f8f9fa;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
.link-card:hover {
border-color: #3498db;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
transform: translateY(-2px);
}
.link-card h3 {
color: #2c3e50;
font-size: 20px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.link-card .description {
color: #7f8c8d;
font-size: 14px;
margin-bottom: 16px;
line-height: 1.6;
}
.deep-link {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
color: white;
padding: 12px 24px;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}
.deep-link:hover {
background: linear-gradient(135deg, #2980b9 0%, #1f6391 100%);
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
transform: translateY(-1px);
}
.deep-link:active {
transform: translateY(0);
}
.info-box {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 16px;
border-radius: 8px;
margin-top: 20px;
}
.info-box h4 {
color: #856404;
margin-bottom: 8px;
font-size: 16px;
}
.info-box ul {
list-style: disc;
margin-left: 20px;
color: #856404;
font-size: 14px;
line-height: 1.8;
padding-left: 20px;
}
.generator-section {
background: #e8f4f8;
border-radius: 12px;
padding: 30px;
margin-top: 40px;
}
.generator-section h2 {
color: #2c3e50;
margin-bottom: 24px;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #2c3e50;
font-weight: 500;
font-size: 14px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 2px solid #dee2e6;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #3498db;
}
.btn {
background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
color: white;
padding: 14px 28px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}
.btn:hover {
background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0);
}
.result-box {
background: white;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
border: 2px solid #3498db;
}
.result-box strong {
color: #2c3e50;
font-size: 16px;
}
.result-text {
background: #f8f9fa;
padding: 12px;
border-radius: 6px;
margin: 12px 0;
word-break: break-all;
font-family: monospace;
font-size: 13px;
color: #2c3e50;
border: 1px solid #dee2e6;
}
.btn-copy {
background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
margin-right: 10px;
}
.btn-copy:hover {
background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
}
.app-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.badge-claude {
background: #e8f4f8;
color: #3498db;
}
.badge-codex {
background: #fef5e7;
color: #f39c12;
}
.badge-gemini {
background: #fdeef4;
color: #e91e63;
}
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
.param-list {
background: #f8f9fa;
border-left: 3px solid #3498db;
padding: 12px;
border-radius: 6px;
margin: 12px 0;
font-size: 13px;
line-height: 1.8;
color: #495057;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}
.param-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
margin-right: 6px;
background: #3498db;
color: white;
}
.param-tag.optional {
background: #95a5a6;
}
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
@media (max-width: 768px) {
.header h1 {
font-size: 24px;
}
.content {
padding: 20px;
}
.generator-section {
padding: 20px;
}
}
</style>
</head>
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
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
<body>
<div class="container">
<div class="header">
<h1>🔗 CC Switch 深链接测试</h1>
<p>点击下方链接测试深链接导入功能</p>
</div>
<div class="content">
<!-- Claude 示例 -->
<div class="section">
<h2>Claude Code 供应商</h2>
<div class="link-card">
<h3>
<span class="app-badge badge-claude">Claude</span>
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
基础配置（无模型）
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
</h3>
<p class="description">
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
最简单的 Claude 配置，仅包含必需参数（API Key、端点等），不指定任何模型，使用 Claude Code 默认值。
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
</p>
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
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=claude, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=claude&name=Claude%20Basic&homepage=https%3A%2F%2Fclaude.ai&endpoint=https%3A%2F%2Fapi.anthropic.com%2Fv1&apiKey=sk-ant-test-basic-key&notes=%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE%EF%BC%8C%E6%97%A0%E6%A8%A1%E5%9E%8B%E6%8C%87%E5%AE%9A"
class="deep-link">
📥 导入基础配置
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=claude&name=Claude%20Basic&homepage=https%3A%2F%2Fclaude.ai&endpoint=https%3A%2F%2Fapi.anthropic.com%2Fv1&apiKey=sk-ant-test-basic-key&notes=%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE%EF%BC%8C%E6%97%A0%E6%A8%A1%E5%9E%8B%E6%8C%87%E5%AE%9A', this)">
📋 复制链接
</button>
</div>
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
</div>
<div class="link-card">
<h3>
<span class="app-badge badge-claude">Claude</span>
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
带默认模型
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
</h3>
<p class="description">
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
设置通用默认模型（ANTHROPIC_MODEL），适用于只需要一个固定模型的场景。
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
</p>
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
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=claude, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> <strong>model=claude-haiku-4.1</strong>, notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=claude&name=Claude%20with%20Model&homepage=https%3A%2F%2Fclaude.ai&endpoint=https%3A%2F%2Fapi.anthropic.com%2Fv1&apiKey=sk-ant-test-model-key&model=claude-haiku-4.1&notes=%E5%B8%A6%E9%BB%98%E8%AE%A4%E6%A8%A1%E5%9E%8B"
class="deep-link">
📥 导入带默认模型
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=claude&name=Claude%20with%20Model&homepage=https%3A%2F%2Fclaude.ai&endpoint=https%3A%2F%2Fapi.anthropic.com%2Fv1&apiKey=sk-ant-test-model-key&model=claude-haiku-4.1&notes=%E5%B8%A6%E9%BB%98%E8%AE%A4%E6%A8%A1%E5%9E%8B', this)">
📋 复制链接
</button>
</div>
</div>
<div class="link-card">
<h3>
<span class="app-badge badge-claude">Claude</span>
完整配置（四种模型）
</h3>
<p class="description">
设置所有四种模型字段：默认模型、Haiku 模型、Sonnet 模型、Opus 模型。适用于需要精细控制不同模型系列的场景。
</p>
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=claude, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> <strong>model=claude-sonnet-4.5</strong>,
<strong>haikuModel=claude-haiku-4.1</strong>, <strong>sonnetModel=claude-sonnet-4.5</strong>,
<strong>opusModel=claude-opus-4</strong>, notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=claude&name=Claude%20Complete&homepage=https%3A%2F%2Fclaude.ai&endpoint=https%3A%2F%2Fapi.anthropic.com%2Fv1&apiKey=sk-ant-test-complete-key&model=claude-sonnet-4.5&haikuModel=claude-haiku-4.1&sonnetModel=claude-sonnet-4.5&opusModel=claude-opus-4&notes=%E5%AE%8C%E6%95%B4%E6%A8%A1%E5%9E%8B%E9%85%8D%E7%BD%AE"
class="deep-link">
📥 导入完整配置
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=claude&name=Claude%20Complete&homepage=https%3A%2F%2Fclaude.ai&endpoint=https%3A%2F%2Fapi.anthropic.com%2Fv1&apiKey=sk-ant-test-complete-key&model=claude-sonnet-4.5&haikuModel=claude-haiku-4.1&sonnetModel=claude-sonnet-4.5&opusModel=claude-opus-4&notes=%E5%AE%8C%E6%95%B4%E6%A8%A1%E5%9E%8B%E9%85%8D%E7%BD%AE', this)">
📋 复制链接
</button>
</div>
</div>
<div class="link-card">
<h3>
<span class="app-badge badge-claude">Claude</span>
部分模型配置
</h3>
<p class="description">
仅设置特定的模型字段（例如只设置 Haiku 和 Sonnet），其他模型使用默认值。演示参数灵活性。
</p>
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=claude, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> <strong>haikuModel=claude-haiku-4.1</strong>,
<strong>sonnetModel=claude-sonnet-4.5</strong>, notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=claude&name=Claude%20Partial&homepage=https%3A%2F%2Fclaude.ai&endpoint=https%3A%2F%2Fapi.anthropic.com%2Fv1&apiKey=sk-ant-test-partial-key&haikuModel=claude-haiku-4.1&sonnetModel=claude-sonnet-4.5&notes=%E9%83%A8%E5%88%86%E6%A8%A1%E5%9E%8B%E9%85%8D%E7%BD%AE"
class="deep-link">
📥 导入部分模型配置
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=claude&name=Claude%20Partial&homepage=https%3A%2F%2Fclaude.ai&endpoint=https%3A%2F%2Fapi.anthropic.com%2Fv1&apiKey=sk-ant-test-partial-key&haikuModel=claude-haiku-4.1&sonnetModel=claude-sonnet-4.5&notes=%E9%83%A8%E5%88%86%E6%A8%A1%E5%9E%8B%E9%85%8D%E7%BD%AE', this)">
📋 复制链接
</button>
</div>
</div>
<div class="link-card">
<h3>
<span class="app-badge badge-claude">Claude</span>
第三方供应商示例
</h3>
<p class="description">
使用第三方供应商的 API 端点和自定义模型名称，演示兼容性。
</p>
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=claude, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> <strong>model=custom-claude-v1</strong>, notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=claude&name=Third-Party%20Claude&homepage=https%3A%2F%2Fthirdparty.com&endpoint=https%3A%2F%2Fapi.thirdparty.com%2Fv1&apiKey=sk-third-party-key&model=custom-claude-v1&notes=%E7%AC%AC%E4%B8%89%E6%96%B9%E4%BE%9B%E5%BA%94%E5%95%86%E7%A4%BA%E4%BE%8B"
class="deep-link">
📥 导入第三方供应商
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=claude&name=Third-Party%20Claude&homepage=https%3A%2F%2Fthirdparty.com&endpoint=https%3A%2F%2Fapi.thirdparty.com%2Fv1&apiKey=sk-third-party-key&model=custom-claude-v1&notes=%E7%AC%AC%E4%B8%89%E6%96%B9%E4%BE%9B%E5%BA%94%E5%95%86%E7%A4%BA%E4%BE%8B', this)">
📋 复制链接
</button>
</div>
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
</div>
</div>
<!-- Codex 示例 -->
<div class="section">
<h2>Codex 供应商</h2>
<div class="link-card">
<h3>
<span class="app-badge badge-codex">Codex</span>
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
基础配置
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
</h3>
<p class="description">
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
OpenAI 官方 API 基础配置，仅包含必需参数。
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
</p>
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
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=codex, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=codex&name=OpenAI%20Basic&homepage=https%3A%2F%2Fopenai.com&endpoint=https%3A%2F%2Fapi.openai.com%2Fv1&apiKey=sk-test-basic-openai-key&notes=%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE"
class="deep-link">
📥 导入基础配置
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=codex&name=OpenAI%20Basic&homepage=https%3A%2F%2Fopenai.com&endpoint=https%3A%2F%2Fapi.openai.com%2Fv1&apiKey=sk-test-basic-openai-key&notes=%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE', this)">
📋 复制链接
</button>
</div>
</div>
<div class="link-card">
<h3>
<span class="app-badge badge-codex">Codex</span>
带默认模型
</h3>
<p class="description">
OpenAI API 配置，指定默认模型为 gpt-5.1。
</p>
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=codex, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> <strong>model=gpt-5.1</strong>, notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=codex&name=OpenAI%20Official&homepage=https%3A%2F%2Fopenai.com&endpoint=https%3A%2F%2Fapi.openai.com%2Fv1&apiKey=sk-test-demo-openai-key-67890&model=gpt-5.1&notes=OpenAI%20%E5%AE%98%E6%96%B9%E6%9C%8D%E5%8A%A1"
class="deep-link">
📥 导入 OpenAI Official
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=codex&name=OpenAI%20Official&homepage=https%3A%2F%2Fopenai.com&endpoint=https%3A%2F%2Fapi.openai.com%2Fv1&apiKey=sk-test-demo-openai-key-67890&model=gpt-5.1&notes=OpenAI%20%E5%AE%98%E6%96%B9%E6%9C%8D%E5%8A%A1', this)">
📋 复制链接
</button>
</div>
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
</div>
<div class="link-card">
<h3>
<span class="app-badge badge-codex">Codex</span>
Azure OpenAI
</h3>
<p class="description">
Azure 部署的 OpenAI 服务示例。适合企业用户使用 Azure 云服务。默认模型 gpt-5.1。
</p>
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
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=codex, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> <strong>model=gpt-5.1</strong>, notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=codex&name=Azure%20OpenAI&homepage=https%3A%2F%2Fazure.microsoft.com%2Fopenai&endpoint=https%3A%2F%2Fyour-resource.openai.azure.com%2F&apiKey=azure-test-api-key-xyz&model=gpt-5.1&notes=Azure%20%E4%BC%81%E4%B8%9A%E7%89%88%E6%9C%AC"
class="deep-link">
📥 导入 Azure OpenAI
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=codex&name=Azure%20OpenAI&homepage=https%3A%2F%2Fazure.microsoft.com%2Fopenai&endpoint=https%3A%2F%2Fyour-resource.openai.azure.com%2F&apiKey=azure-test-api-key-xyz&model=gpt-5.1&notes=Azure%20%E4%BC%81%E4%B8%9A%E7%89%88%E6%9C%AC', this)">
📋 复制链接
</button>
</div>
</div>
<div class="link-card">
<h3>
<span class="app-badge badge-codex">Codex</span>
第三方兼容 API
</h3>
<p class="description">
使用兼容 OpenAI API 格式的第三方服务（如 Together AI、Groq 等）。
</p>
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=codex, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> <strong>model=mixtral-8x7b</strong>, notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=codex&name=Third-Party%20API&homepage=https%3A%2F%2Fthirdparty.com&endpoint=https%3A%2F%2Fapi.thirdparty.com%2Fv1&apiKey=sk-third-party-key&model=mixtral-8x7b&notes=%E7%AC%AC%E4%B8%89%E6%96%B9%E5%85%BC%E5%AE%B9%E6%9C%8D%E5%8A%A1"
class="deep-link">
📥 导入第三方 API
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=codex&name=Third-Party%20API&homepage=https%3A%2F%2Fthirdparty.com&endpoint=https%3A%2F%2Fapi.thirdparty.com%2Fv1&apiKey=sk-third-party-key&model=mixtral-8x7b&notes=%E7%AC%AC%E4%B8%89%E6%96%B9%E5%85%BC%E5%AE%B9%E6%9C%8D%E5%8A%A1', this)">
📋 复制链接
</button>
</div>
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
</div>
</div>
<!-- Gemini 示例 -->
<div class="section">
<h2>Gemini 供应商</h2>
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
<div class="link-card">
<h3>
<span class="app-badge badge-gemini">Gemini</span>
基础配置
</h3>
<p class="description">
Google Gemini 官方 API 基础配置，仅包含必需参数。
</p>
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=gemini, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=gemini&name=Google%20Gemini%20Basic&homepage=https%3A%2F%2Fai.google.dev&endpoint=https%3A%2F%2Fgenerativelanguage.googleapis.com%2Fv1beta&apiKey=AIzaSy-test-basic-key&notes=%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE"
class="deep-link">
📥 导入基础配置
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=gemini&name=Google%20Gemini%20Basic&homepage=https%3A%2F%2Fai.google.dev&endpoint=https%3A%2F%2Fgenerativelanguage.googleapis.com%2Fv1beta&apiKey=AIzaSy-test-basic-key&notes=%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE', this)">
📋 复制链接
</button>
</div>
</div>
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
<div class="link-card">
<h3>
<span class="app-badge badge-gemini">Gemini</span>
Google Gemini Official
</h3>
<p class="description">
导入 Google Gemini 官方 API 配置。默认模型 gemini-3-pro-preview。
</p>
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
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=gemini, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> <strong>model=gemini-3-pro-preview</strong>, notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=gemini&name=Google%20Gemini&homepage=https%3A%2F%2Fai.google.dev&endpoint=https%3A%2F%2Fgenerativelanguage.googleapis.com%2Fv1beta&apiKey=AIzaSy-test-demo-key-abc123&model=gemini-3-pro-preview&notes=Google%20AI%20%E5%AE%98%E6%96%B9%E6%9C%8D%E5%8A%A1"
class="deep-link">
📥 导入 Google Gemini
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=gemini&name=Google%20Gemini&homepage=https%3A%2F%2Fai.google.dev&endpoint=https%3A%2F%2Fgenerativelanguage.googleapis.com%2Fv1beta&apiKey=AIzaSy-test-demo-key-abc123&model=gemini-3-pro-preview&notes=Google%20AI%20%E5%AE%98%E6%96%B9%E6%9C%8D%E5%8A%A1', this)">
📋 复制链接
</button>
</div>
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
</div>
<div class="link-card">
<h3>
<span class="app-badge badge-gemini">Gemini</span>
Gemini 测试环境
</h3>
<p class="description">
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
公司内部 Gemini 测试环境配置示例。用于验证 Gemini 相关深链接导入流程。默认模型 gemini-3-pro-preview。
</p>
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=gemini, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> <strong>model=gemini-3-pro-preview</strong>, notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=gemini&name=%E5%85%AC%E5%8F%B8%20Gemini%20%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83&homepage=https%3A%2F%2Fgemini-test.company.com&endpoint=https%3A%2F%2Fapi-gemini-test.company.com%2Fv1beta&apiKey=sk-gemini-test-company-key&model=gemini-3-pro-preview&notes=%E5%85%AC%E5%8F%B8%E5%86%85%E9%83%A8%20Gemini%20%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83%EF%BC%8C%E4%BB%85%E4%BE%9B%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8"
class="deep-link">
📥 导入 Gemini 测试环境
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=gemini&name=%E5%85%AC%E5%8F%B8%20Gemini%20%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83&homepage=https%3A%2F%2Fgemini-test.company.com&endpoint=https%3A%2F%2Fapi-gemini-test.company.com%2Fv1beta&apiKey=sk-gemini-test-company-key&model=gemini-3-pro-preview&notes=%E5%85%AC%E5%8F%B8%E5%86%85%E9%83%A8%20Gemini%20%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83%EF%BC%8C%E4%BB%85%E4%BE%9B%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8', this)">
📋 复制链接
</button>
</div>
</div>
<div class="link-card">
<h3>
<span class="app-badge badge-gemini">Gemini</span>
第三方兼容服务
</h3>
<p class="description">
使用第三方提供的 Gemini API 兼容服务，支持自定义模型名称。
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
</p>
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
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=gemini, name, homepage, endpoint,
apiKey<br>
<span class="param-tag optional">可选</span> <strong>model=gemini-custom-v2</strong>, notes
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=gemini&name=Third-Party%20Gemini&homepage=https%3A%2F%2Fthirdparty-gemini.com&endpoint=https%3A%2F%2Fapi.thirdparty-gemini.com%2Fv1&apiKey=tpg-test-key-xyz&model=gemini-custom-v2&notes=%E7%AC%AC%E4%B8%89%E6%96%B9%20Gemini%20%E5%85%BC%E5%AE%B9%E6%9C%8D%E5%8A%A1"
class="deep-link">
📥 导入第三方服务
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=gemini&name=Third-Party%20Gemini&homepage=https%3A%2F%2Fthirdparty-gemini.com&endpoint=https%3A%2F%2Fapi.thirdparty-gemini.com%2Fv1&apiKey=tpg-test-key-xyz&model=gemini-custom-v2&notes=%E7%AC%AC%E4%B8%89%E6%96%B9%20Gemini%20%E5%85%BC%E5%AE%B9%E6%9C%8D%E5%8A%A1', this)">
📋 复制链接
</button>
</div>
</div>
</div>
<!-- 配置文件导入示例 (v3.8+) -->
<div class="section">
<h2>📦 配置文件导入示例 <span class="version-badge">v3.8+</span></h2>
<!-- Claude 配置文件导入 -->
<div class="link-card">
<h3>
<span class="app-badge badge-claude">Claude</span>
完整 JSON 配置导入
</h3>
<p class="description">
通过 Base64 编码的 JSON 配置文件导入完整配置，包含所有四种模型和端点信息。
</p>
<div class="param-list">
<span class="param-tag">必需</span> resource=provider, app=claude, name<br>
<span class="param-tag optional">可选</span> <strong>config</strong> (Base64 JSON),
<strong>configFormat=json</strong>
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=claude&name=Claude%20Complete&configFormat=json&config=eyJlbnYiOnsiQU5USFJPUElDX0FVVEhfVE9LRU4iOiJzay1hbnQtdGVzdC1rZXkxMjMiLCJBTlRIUk9QSUNfQkFTRV9VUkwiOiJodHRwczovL2FwaS5hbnRocm9waWMuY29tL3YxIiwiQU5USFJPUElDX01PREVMIjoiY2xhdWRlLXNvbm5ldC00LjUiLCJBTlRIUk9QSUNfREVGQVVMVF9IQUlLVV9NT0RFTCI6ImNsYXVkZS1oYWlrdS00LjEiLCJBTlRIUk9QSUNfREVGQVVMVF9TT05ORVRfTU9ERUwiOiJjbGF1ZGUtc29ubmV0LTQuNSIsIkFOVEhST1BJQ19ERUZBVUxUX09QVVNfTU9ERUwiOiJjbGF1ZGUtb3B1cy00In19"
class="deep-link">
📥 导入完整配置
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=claude&name=Claude%20Complete&configFormat=json&config=eyJlbnYiOnsiQU5USFJPUElDX0FVVEhfVE9LRU4iOiJzay1hbnQtdGVzdC1rZXkxMjMiLCJBTlRIUk9QSUNfQkFTRV9VUkwiOiJodHRwczovL2FwaS5hbnRocm9waWMuY29tL3YxIiwiQU5USFJPUElDX01PREVMIjoiY2xhdWRlLXNvbm5ldC00LjUiLCJBTlRIUk9QSUNfREVGQVVMVF9IQUlLVV9NT0RFTCI6ImNsYXVkZS1oYWlrdS00LjEiLCJBTlRIUk9QSUNfREVGQVVMVF9TT05ORVRfTU9ERUwiOiJjbGF1ZGUtc29ubmV0LTQuNSIsIkFOVEhST1BJQ19ERUZBVUxUX09QVVNfTU9ERUwiOiJjbGF1ZGUtb3B1cy00In19', this)">
📋 复制链接
</button>
</div>
<div class="code-block"
style="margin-top: 12px; padding: 12px; background: #2c3e50; color: #ecf0f1; border-radius: 8px; font-family: monospace; font-size: 12px; overflow-x: auto;">
<div style="color: #95a5a6; margin-bottom: 8px;">// 解码后的配置内容:</div>
{<br>
&nbsp;&nbsp;"env": {<br>
&nbsp;&nbsp;&nbsp;&nbsp;"ANTHROPIC_AUTH_TOKEN": "sk-ant-test-key123",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"ANTHROPIC_BASE_URL": "https://api.anthropic.com/v1",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"ANTHROPIC_MODEL": "claude-sonnet-4.5",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"ANTHROPIC_DEFAULT_HAIKU_MODEL": "claude-haiku-4.1",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"ANTHROPIC_DEFAULT_SONNET_MODEL": "claude-sonnet-4.5",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"ANTHROPIC_DEFAULT_OPUS_MODEL": "claude-opus-4"<br>
&nbsp;&nbsp;}<br>
}
</div>
</div>
<!-- URL 参数覆盖配置文件 -->
<div class="link-card">
<h3>
<span class="app-badge badge-claude">Claude</span>
配置 + URL 参数覆盖
</h3>
<p class="description">
配置文件提供基础设置,URL 参数覆盖 API Key。URL 参数优先级最高。
</p>
<div class="param-list">
<span class="param-tag">必需</span> name, config<br>
<span class="param-tag optional">覆盖</span> <strong>apiKey</strong> (覆盖配置文件中的值)
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=claude&name=My%20Custom&apiKey=sk-ant-my-new-key&configFormat=json&config=eyJlbnYiOnsiQU5USFJPUElDX0JBU0VfVVJMIjoiaHR0cHM6Ly9hcGkuYW50aHJvcGljLmNvbS92MSIsIkFOVEhST1BJQ19NT0RFTCI6ImNsYXVkZS1zb25uZXQtNC41In19"
class="deep-link">
📥 导入混合配置
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=claude&name=My%20Custom&apiKey=sk-ant-my-new-key&configFormat=json&config=eyJlbnYiOnsiQU5USFJPUElDX0JBU0VfVVJMIjoiaHR0cHM6Ly9hcGkuYW50aHJvcGljLmNvbS92MSIsIkFOVEhST1BJQ19NT0RFTCI6ImNsYXVkZS1zb25uZXQtNC41In19', this)">
📋 复制链接
</button>
</div>
<div class="code-block"
style="margin-top: 12px; padding: 12px; background: #2c3e50; color: #ecf0f1; border-radius: 8px; font-family: monospace; font-size: 12px; overflow-x: auto;">
<div style="color: #95a5a6; margin-bottom: 8px;">// 解码后的配置内容:</div>
{<br>
&nbsp;&nbsp;"env": {<br>
&nbsp;&nbsp;&nbsp;&nbsp;"ANTHROPIC_BASE_URL": "https://api.anthropic.com/v1",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"ANTHROPIC_MODEL": "claude-sonnet-4.5"<br>
&nbsp;&nbsp;}<br>
}<br>
<div style="color: #f39c12; margin-top: 8px;">// URL 参数覆盖: apiKey=sk-ant-my-new-key</div>
</div>
<div
style="margin-top: 12px; padding: 10px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 4px; font-size: 13px;">
<strong>优先级规则:</strong> URL 参数 (apiKey) > 配置文件 (endpoint, model)
</div>
</div>
<!-- Codex TOML 配置导入 -->
<div class="link-card">
<h3>
<span class="app-badge badge-codex">Codex</span>
TOML 格式配置导入
</h3>
<p class="description">
Codex 使用 TOML 格式的配置文件,包含 auth 和 config 两部分。
</p>
<div class="param-list">
<span class="param-tag">必需</span> name, config<br>
<span class="param-tag optional">可选</span> <strong>configFormat=json</strong> (Codex 配置为 JSON
包装的 TOML)
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=codex&name=OpenAI%20Complete&configFormat=json&config=eyJhdXRoIjp7Ik9QRU5BSV9BUElfS0VZIjoic2stcHJvai10ZXN0LWtleTEyMyJ9LCJjb25maWciOiJbbW9kZWxfcHJvdmlkZXJzLm9wZW5haV1cbmJhc2VfdXJsID0gXCJodHRwczovL2FwaS5vcGVuYWkuY29tL3YxXCJcblxuW2dlbmVyYWxdXG5tb2RlbCA9IFwiZ3B0LTUuMVwiIn0="
class="deep-link">
📥 导入 Codex 配置
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=codex&name=OpenAI%20Complete&configFormat=json&config=eyJhdXRoIjp7Ik9QRU5BSV9BUElfS0VZIjoic2stcHJvai10ZXN0LWtleTEyMyJ9LCJjb25maWciOiJbbW9kZWxfcHJvdmlkZXJzLm9wZW5haV1cbmJhc2VfdXJsID0gXCJodHRwczovL2FwaS5vcGVuYWkuY29tL3YxXCJcblxuW2dlbmVyYWxdXG5tb2RlbCA9IFwiZ3B0LTUuMVwiIn0=', this)">
📋 复制链接
</button>
</div>
<div class="code-block"
style="margin-top: 12px; padding: 12px; background: #2c3e50; color: #ecf0f1; border-radius: 8px; font-family: monospace; font-size: 12px; overflow-x: auto;">
<div style="color: #95a5a6; margin-bottom: 8px;">// 解码后的配置内容:</div>
{<br>
&nbsp;&nbsp;"auth": {<br>
&nbsp;&nbsp;&nbsp;&nbsp;"OPENAI_API_KEY": "sk-proj-test-key123"<br>
&nbsp;&nbsp;},<br>
&nbsp;&nbsp;"config": "[model_providers.openai]\nbase_url =
\"https://api.openai.com/v1\"\n\n[general]\nmodel = \"gpt-5.1\""<br>
}
<div style="color: #95a5a6; margin-top: 12px; margin-bottom: 4px;">// config 字段解析 (TOML):</div>
<div style="color: #a8d08d;">[model_providers.openai]</div>
<div style="color: #a8d08d;">base_url = "https://api.openai.com/v1"</div>
<div style="color: #a8d08d; margin-top: 8px;">[general]</div>
<div style="color: #a8d08d;">model = "gpt-5.1"</div>
</div>
</div>
<!-- Gemini 配置导入 -->
<div class="link-card">
<h3>
<span class="app-badge badge-gemini">Gemini</span>
Gemini 配置导入
</h3>
<p class="description">
Gemini 使用扁平的环境变量格式,简洁明了。
</p>
<div class="param-list">
<span class="param-tag">必需</span> name, config<br>
<span class="param-tag optional">可选</span> <strong>configFormat=json</strong>
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=gemini&name=Google%20Gemini&configFormat=json&config=eyJHRU1JTklfQVBJX0tFWSI6IkFJemFTeUR0ZXN0a2V5MTIzIiwiR0VNSU5JX0JBU0VfVVJMIjoiaHR0cHM6Ly9nZW5lcmF0aXZlbGFuZ3VhZ2UuZ29vZ2xlYXBpcy5jb20vdjFiZXRhIiwiR0VNSU5JX01PREVMIjoiZ2VtaW5pLTMtcHJvLXByZXZpZXcifQ=="
class="deep-link">
📥 导入 Gemini 配置
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=gemini&name=Google%20Gemini&configFormat=json&config=eyJHRU1JTklfQVBJX0tFWSI6IkFJemFTeUR0ZXN0a2V5MTIzIiwiR0VNSU5JX0JBU0VfVVJMIjoiaHR0cHM6Ly9nZW5lcmF0aXZlbGFuZ3VhZ2UuZ29vZ2xlYXBpcy5jb20vdjFiZXRhIiwiR0VNSU5JX01PREVMIjoiZ2VtaW5pLTMtcHJvLXByZXZpZXcifQ==', this)">
📋 复制链接
</button>
</div>
<div class="code-block"
style="margin-top: 12px; padding: 12px; background: #2c3e50; color: #ecf0f1; border-radius: 8px; font-family: monospace; font-size: 12px; overflow-x: auto;">
<div style="color: #95a5a6; margin-bottom: 8px;">// 解码后的配置内容:</div>
{<br>
&nbsp;&nbsp;"GEMINI_API_KEY": "AIzaSyDtestkey123",<br>
&nbsp;&nbsp;"GEMINI_BASE_URL": "https://generativelanguage.googleapis.com/v1beta",<br>
&nbsp;&nbsp;"GEMINI_MODEL": "gemini-3-pro-preview"<br>
}
</div>
</div>
<!-- 自动填充示例 -->
<div class="link-card">
<h3>
<span class="app-badge badge-claude">Claude</span>
自动填充示例
</h3>
<p class="description">
仅提供配置文件和名称,其他信息(API Key、端点、官网)自动从配置文件中提取。
</p>
<div class="param-list">
<span class="param-tag">必需</span> name, config<br>
<span class="param-tag">自动填充</span> apiKey, endpoint, homepage (从配置文件提取)
</div>
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
<a href="ccswitch://v1/import?resource=provider&app=claude&name=Auto%20Filled&configFormat=json&config=eyJlbnYiOnsiQU5USFJPUElDX0FVVEhfVE9LRU4iOiJzay1hbnQtYXV0by1maWxsZWQta2V5IiwiQU5USFJPUElDX0JBU0VfVVJMIjoiaHR0cHM6Ly9hcGkuYW50aHJvcGljLmNvbS92MSJ9fQ=="
class="deep-link">
📥 测试自动填充
</a>
<button class="deep-link"
style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); cursor: pointer; border: none;"
onclick="copyDeepLink('ccswitch://v1/import?resource=provider&app=claude&name=Auto%20Filled&configFormat=json&config=eyJlbnYiOnsiQU5USFJPUElDX0FVVEhfVE9LRU4iOiJzay1hbnQtYXV0by1maWxsZWQta2V5IiwiQU5USFJPUElDX0JBU0VfVVJMIjoiaHR0cHM6Ly9hcGkuYW50aHJvcGljLmNvbS92MSJ9fQ==', this)">
📋 复制链接
</button>
</div>
<div class="code-block"
style="margin-top: 12px; padding: 12px; background: #2c3e50; color: #ecf0f1; border-radius: 8px; font-family: monospace; font-size: 12px; overflow-x: auto;">
<div style="color: #95a5a6; margin-bottom: 8px;">// 解码后的配置内容:</div>
{<br>
&nbsp;&nbsp;"env": {<br>
&nbsp;&nbsp;&nbsp;&nbsp;"ANTHROPIC_AUTH_TOKEN": "sk-ant-auto-filled-key",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"ANTHROPIC_BASE_URL": "https://api.anthropic.com/v1"<br>
&nbsp;&nbsp;}<br>
}<br>
<div style="color: #52c41a; margin-top: 8px;">✓ API Key: 从配置文件提取</div>
<div style="color: #52c41a;">✓ Endpoint: 从配置文件提取</div>
<div style="color: #52c41a;">✓ Homepage: 自动推断为 https://anthropic.com</div>
</div>
<div
style="margin-top: 12px; padding: 10px; background: #d1ecf1; border-left: 4px solid #17a2b8; border-radius: 4px; font-size: 13px;">
<strong>自动填充规则:</strong><br>
• API Key: 从配置文件中提取<br>
• Endpoint: 从配置文件中提取<br>
• Homepage: 根据 Endpoint 自动推断
</div>
</div>
<!-- 功能说明 -->
<div
style="margin-top: 24px; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white;">
<h4 style="margin-bottom: 16px; font-size: 18px;">✨ 配置文件导入新特性 (v3.8+)</h4>
<ul style="list-style: none; padding-left: 0;">
<li style="margin-bottom: 12px; padding-left: 24px; position: relative;">
<span style="position: absolute; left: 0;">📄</span>
<strong>支持格式:</strong> JSON 和 TOML 配置文件
</li>
<li style="margin-bottom: 12px; padding-left: 24px; position: relative;">
<span style="position: absolute; left: 0;">🎯</span>
<strong>优先级规则:</strong> URL 参数 > 配置文件内容 > 远程 URL
</li>
<li style="margin-bottom: 12px; padding-left: 24px; position: relative;">
<span style="position: absolute; left: 0;">🔀</span>
<strong>智能合并:</strong> URL 参数覆盖配置文件,保留非冲突字段
</li>
<li style="margin-bottom: 12px; padding-left: 24px; position: relative;">
<span style="position: absolute; left: 0;">✨</span>
<strong>自动填充:</strong> 未提供的字段自动从配置文件提取
</li>
<li style="padding-left: 24px; position: relative;">
<span style="position: absolute; left: 0;">🌐</span>
<strong>官网推断:</strong> 根据 API 端点自动推断供应商官网
</li>
</ul>
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
</div>
</div>
<!-- 注意事项 -->
<div class="info-box">
<h4>⚠️ 使用注意事项</h4>
<ul>
<li><strong>首次点击</strong>：浏览器会询问是否允许打开 CC Switch，请点击"允许"或"打开"</li>
<li><strong>macOS 用户</strong>：可能需要在"系统设置" → "隐私与安全性"中允许应用</li>
<li><strong>测试 API Key</strong>：示例中的 API Key 仅用于测试格式，无法实际使用</li>
<li><strong>导入确认</strong>：点击链接后会弹出确认对话框，API Key 会被掩码显示（前4位+****）</li>
<li><strong>编辑配置</strong>：导入后可以在 CC Switch 中随时编辑或删除配置</li>
</ul>
</div>
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
<!-- 深链接解析器 -->
<div class="generator-section" style="background: #f0f9ff; border: 2px solid #3498db;">
<h2>🔍 深链接解析器</h2>
<p style="color: #7f8c8d; margin-bottom: 24px;">粘贴深链接 URL，查看解析结果</p>
<div class="form-group">
<label>深链接 URL</label>
<textarea id="parseUrl" rows="3" placeholder="粘贴完整的 ccswitch:// 深链接..."
style="font-family: monospace; font-size: 13px;"></textarea>
</div>
<button class="btn" style="background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);"
onclick="parseDeepLink()">
🔍 解析深链接
</button>
<!-- 解析结果 -->
<div id="parseResult" style="display: none;">
<div class="result-box" style="margin-top: 20px;">
<strong>✅ 解析结果：</strong>
<!-- 基本信息 -->
<div id="parseBasicInfo" style="margin-top: 16px;"></div>
<!-- URL 参数 -->
<div id="parseUrlParams" style="margin-top: 16px;"></div>
<!-- 配置文件解析 -->
<div id="parseConfigContent" style="margin-top: 16px;"></div>
</div>
</div>
</div>
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
<!-- 深链接生成器 -->
<div class="generator-section">
<h2>🛠️ 深链接生成器</h2>
<p style="color: #7f8c8d; margin-bottom: 24px;">填写下方表单，生成您自己的深链接</p>
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
<!-- 导入模式切换 -->
<div class="form-group">
<label>导入模式</label>
<select id="importMode" onchange="toggleImportMode()">
<option value="url">URL 参数模式（传统）</option>
<option value="config">配置文件模式（v3.8+）</option>
</select>
<small style="color: #7f8c8d; font-size: 12px; display: block; margin-top: 4px;">
URL 参数模式：直接在 URL 中传递参数 | 配置文件模式：使用 Base64 编码的 JSON/TOML
</small>
</div>
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
<div class="form-group">
<label>应用类型 *</label>
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
<select id="app" onchange="updateModelFields()">
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
<option value="claude">Claude Code</option>
<option value="codex">Codex</option>
<option value="gemini">Gemini</option>
</select>
</div>
<div class="form-group">
<label>供应商名称 *</label>
<input type="text" id="name" placeholder="例如: Claude Official">
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
<small style="color: #e74c3c; font-size: 12px; display: block; margin-top: 4px;">
⚠️ 唯一必填项
</small>
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
</div>
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
<!-- URL 参数模式字段 -->
<div id="urlModeFields">
<div class="form-group">
<label>官网地址</label>
<input type="url" id="homepage" placeholder="https://example.com（可选，配置文件模式可自动推断）">
</div>
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
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
<div class="form-group">
<label>API 端点</label>
<input type="url" id="endpoint" placeholder="https://api.example.com/v1（配置文件模式可从配置提取）">
</div>
<div class="form-group">
<label>API Key</label>
<input type="text" id="apiKey" placeholder="sk-xxxxx 或 AIzaSyXXXXX（配置文件模式可从配置提取）">
</div>
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
</div>
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
<!-- 配置文件模式字段 -->
<div id="configModeFields" style="display: none;">
<!-- 通用/Claude/Gemini JSON 配置 -->
<div id="generalConfigGroup" class="form-group">
<label id="configJsonLabel">配置文件内容（JSON）</label>
<textarea id="configJson" rows="12"
placeholder='输入 JSON 配置，例如：&#10;{&#10; "env": {&#10; "ANTHROPIC_AUTH_TOKEN": "sk-ant-xxx",&#10; "ANTHROPIC_BASE_URL": "https://api.anthropic.com/v1",&#10; "ANTHROPIC_MODEL": "claude-sonnet-4.5"&#10; }&#10;}'></textarea>
<small style="color: #7f8c8d; font-size: 12px; display: block; margin-top: 4px;">
配置文件将自动进行 Base64 编码
</small>
</div>
<!-- Codex 专用配置字段 -->
<div id="codexConfigGroup" style="display: none;">
<div class="form-group">
<label>Codex 认证信息 (JSON)</label>
<textarea id="codexAuthJson" rows="5"
placeholder='{&#10; "auth": {&#10; "OPENAI_API_KEY": "sk-..."&#10; }&#10;}'></textarea>
<small style="color: #7f8c8d; font-size: 12px; display: block; margin-top: 4px;">
包含 API Key 的认证信息 JSON 对象
</small>
</div>
<div class="form-group">
<label>Codex 配置文件 (TOML)</label>
<textarea id="codexConfigToml" rows="10"
placeholder='[model_providers.openai]&#10;base_url = "..."&#10;&#10;[general]&#10;model = "..."'
style="font-family: monospace;"></textarea>
<small style="color: #7f8c8d; font-size: 12px; display: block; margin-top: 4px;">
config.toml 的原始内容
</small>
</div>
</div>
<div class="form-group">
<label>URL 参数覆盖（可选）</label>
<div style="background: #fff3cd; padding: 12px; border-radius: 8px; margin-bottom: 8px;">
<p style="font-size: 12px; color: #856404; margin: 0;">
💡 可以在下方填写 API Key、端点等参数来覆盖配置文件中的值。留空则完全使用配置文件。
</p>
</div>
<input type="text" id="overrideApiKey" placeholder="覆盖配置文件中的 API Key（可选）">
<input type="url" id="overrideEndpoint" placeholder="覆盖配置文件中的端点（可选）" style="margin-top: 8px;">
</div>
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
</div>
<div class="form-group">
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
<label>默认模型（可选）</label>
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
<input type="text" id="model" placeholder="例如: claude-haiku-4.1, gpt-5.1, gemini-3-pro-preview">
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
<small style="color: #7f8c8d; font-size: 12px; display: block; margin-top: 4px;">
通用模型字段，适用于所有应用类型
</small>
</div>
<!-- Claude 专用字段 -->
<div id="claudeFields" style="display: block;">
<div style="background: #e8f4f8; padding: 16px; border-radius: 8px; margin: 16px 0;">
<h4 style="color: #2c3e50; margin-bottom: 12px; font-size: 14px;">
📋 Claude 专用模型字段（可选）
</h4>
<p style="color: #7f8c8d; font-size: 12px; margin-bottom: 12px;">
可以根据需要设置特定的模型字段，这些字段仅在 Claude 应用中生效
</p>
<div class="form-group">
<label>Haiku 模型</label>
<input type="text" id="haikuModel" placeholder="claude-haiku-4.1">
<small style="color: #7f8c8d; font-size: 11px; display: block; margin-top: 4px;">
对应环境变量：ANTHROPIC_DEFAULT_HAIKU_MODEL
</small>
</div>
<div class="form-group">
<label>Sonnet 模型</label>
<input type="text" id="sonnetModel" placeholder="claude-sonnet-4.5">
<small style="color: #7f8c8d; font-size: 11px; display: block; margin-top: 4px;">
对应环境变量：ANTHROPIC_DEFAULT_SONNET_MODEL
</small>
</div>
<div class="form-group">
<label>Opus 模型</label>
<input type="text" id="opusModel" placeholder="claude-opus-4">
<small style="color: #7f8c8d; font-size: 11px; display: block; margin-top: 4px;">
对应环境变量：ANTHROPIC_DEFAULT_OPUS_MODEL
</small>
</div>
</div>
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
</div>
<div class="form-group">
<label>备注（可选）</label>
<textarea id="notes" rows="2" placeholder="例如: 公司专用账号"></textarea>
</div>
<button class="btn" onclick="generateLink()">🚀 生成深链接</button>
<div id="result" style="display: none;">
<div class="result-box">
<strong>✅ 生成的深链接：</strong>
<div class="result-text" id="linkText"></div>
<button class="btn btn-copy" onclick="copyLink()">📋 复制链接</button>
<a id="testLink" class="deep-link" style="text-decoration: none;">
🧪 测试链接
</a>
</div>
</div>
</div>
</div>
</div>
<script>
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
// UTF-8 字符串转 Base64
function utf8_to_b64(str) {
try {
const bytes = new TextEncoder().encode(str);
const binString = Array.from(bytes, (byte) => String.fromCharCode(byte)).join("");
return btoa(binString);
} catch (e) {
console.error("Base64 encode error:", e);
return window.btoa(unescape(encodeURIComponent(str)));
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
}
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
}
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
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
// Base64 转 UTF-8 字符串
function b64_to_utf8(str) {
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
try {
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
const binString = atob(str);
const bytes = Uint8Array.from(binString, (m) => m.codePointAt(0));
return new TextDecoder().decode(bytes);
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
} catch (e) {
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
console.error("Base64 decode error:", e);
return decodeURIComponent(escape(window.atob(str)));
}
}
// 切换导入模式
function toggleImportMode() {
const mode = document.getElementById('importMode').value;
const urlFields = document.getElementById('urlModeFields');
const configFields = document.getElementById('configModeFields');
if (mode === 'url') {
urlFields.style.display = 'block';
configFields.style.display = 'none';
} else {
urlFields.style.display = 'none';
configFields.style.display = 'block';
// 当切换到配置文件模式时，自动填充示例配置
populateConfigTemplate();
}
}
// ... (rest of the functions) ...
// 根据应用类型填充配置模板
function populateConfigTemplate() {
const app = document.getElementById('app').value;
const configTextarea = document.getElementById('configJson');
const codexAuthTextarea = document.getElementById('codexAuthJson');
const codexConfigTextarea = document.getElementById('codexConfigToml');
let template = '';
if (app === 'claude') {
template = `{
"env": {
"ANTHROPIC_AUTH_TOKEN": "sk-ant-your-api-key-here",
"ANTHROPIC_BASE_URL": "https://api.anthropic.com/v1",
"ANTHROPIC_MODEL": "claude-sonnet-4.5",
"ANTHROPIC_DEFAULT_HAIKU_MODEL": "claude-haiku-4.1",
"ANTHROPIC_DEFAULT_SONNET_MODEL": "claude-sonnet-4.5",
"ANTHROPIC_DEFAULT_OPUS_MODEL": "claude-opus-4"
}
}`;
configTextarea.value = template;
} else if (app === 'codex') {
// Codex 分开填充
codexAuthTextarea.value = `{
"auth": {
"OPENAI_API_KEY": "sk-proj-your-api-key-here"
}
}`;
codexConfigTextarea.value = `model_provider = "custom"
model = "gpt-5.1"
model_reasoning_effort = "high"
disable_response_storage = true
[model_providers.custom]
name = "custom"
base_url = "https://api.openai.com/v1"
wire_api = "responses"
requires_openai_auth = true`;
} else if (app === 'gemini') {
template = `{
"GEMINI_API_KEY": "AIzaSy-your-api-key-here",
"GEMINI_BASE_URL": "https://generativelanguage.googleapis.com/v1beta",
"GEMINI_MODEL": "gemini-3-pro-preview"
}`;
configTextarea.value = template;
}
}
// 更新模型字段显示
function updateModelFields() {
const app = document.getElementById('app').value;
const claudeFields = document.getElementById('claudeFields');
const generalConfigGroup = document.getElementById('generalConfigGroup');
const codexConfigGroup = document.getElementById('codexConfigGroup');
const mode = document.getElementById('importMode').value;
// Claude 字段显示控制
if (app === 'claude') {
claudeFields.style.display = 'block';
} else {
claudeFields.style.display = 'none';
}
// 配置文件输入框控制
if (mode === 'config') {
if (app === 'codex') {
generalConfigGroup.style.display = 'none';
codexConfigGroup.style.display = 'block';
} else {
generalConfigGroup.style.display = 'block';
codexConfigGroup.style.display = 'none';
}
populateConfigTemplate();
}
}
function generateLink() {
const mode = document.getElementById('importMode').value;
const app = document.getElementById('app').value;
const name = document.getElementById('name').value.trim();
// 验证必填字段（只有名称是必填的）
if (!name) {
alert('❌ 请填写供应商名称！');
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
return;
}
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
// 构建基础参数
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
const params = new URLSearchParams({
resource: 'provider',
app: app,
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
name: name
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
});
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
if (mode === 'url') {
// URL 参数模式
const homepage = document.getElementById('homepage').value.trim();
const endpoint = document.getElementById('endpoint').value.trim();
const apiKey = document.getElementById('apiKey').value.trim();
const model = document.getElementById('model').value.trim();
const notes = document.getElementById('notes').value.trim();
// Claude 专用字段
const haikuModel = document.getElementById('haikuModel').value.trim();
const sonnetModel = document.getElementById('sonnetModel').value.trim();
const opusModel = document.getElementById('opusModel').value.trim();
// URL 模式下，至少需要 endpoint 和 apiKey
if (!endpoint || !apiKey) {
alert('❌ URL 参数模式下，端点和 API Key 是必填的！');
return;
}
// 验证 URL 格式
if (homepage) {
try {
new URL(homepage);
} catch (e) {
alert('❌ 请输入有效的官网 URL 格式（需包含 http:// 或 https://）！');
return;
}
}
try {
new URL(endpoint);
} catch (e) {
alert('❌ 请输入有效的端点 URL 格式（需包含 http:// 或 https://）！');
return;
}
// 添加参数
if (homepage) params.append('homepage', homepage);
params.append('endpoint', endpoint);
params.append('apiKey', apiKey);
if (model) params.append('model', model);
if (notes) params.append('notes', notes);
// 添加 Claude 专用模型字段
if (app === 'claude') {
if (haikuModel) params.append('haikuModel', haikuModel);
if (sonnetModel) params.append('sonnetModel', sonnetModel);
if (opusModel) params.append('opusModel', opusModel);
}
} else {
// 配置文件模式
let configJson = '';
if (app === 'codex') {
// Codex 特殊处理：合并 Auth JSON 和 Config TOML
const authJson = document.getElementById('codexAuthJson').value.trim();
const configToml = document.getElementById('codexConfigToml').value.trim();
if (!authJson) {
alert('❌ 请填写 Codex 认证信息 (JSON)！');
return;
}
if (!configToml) {
alert('❌ 请填写 Codex 配置文件 (TOML)！');
return;
}
try {
const authObj = JSON.parse(authJson);
// 构造最终对象
const finalObj = {
...authObj,
config: configToml
};
configJson = JSON.stringify(finalObj);
} catch (e) {
alert('❌ Codex 认证信息不是有效的 JSON 格式：' + e.message);
return;
}
} else {
// 其他应用使用通用 JSON 输入框
configJson = document.getElementById('configJson').value.trim();
if (!configJson) {
alert('❌ 配置文件模式下，请填写配置文件内容！');
return;
}
// 验证 JSON 格式
try {
JSON.parse(configJson);
} catch (e) {
alert('❌ 配置文件不是有效的 JSON 格式：' + e.message);
return;
}
}
const overrideApiKey = document.getElementById('overrideApiKey').value.trim();
const overrideEndpoint = document.getElementById('overrideEndpoint').value.trim();
const model = document.getElementById('model').value.trim();
const notes = document.getElementById('notes').value.trim();
// Claude 专用字段
const haikuModel = document.getElementById('haikuModel').value.trim();
const sonnetModel = document.getElementById('sonnetModel').value.trim();
const opusModel = document.getElementById('opusModel').value.trim();
// Base64 编码配置文件
const configB64 = utf8_to_b64(configJson);
params.append('config', configB64);
params.append('configFormat', 'json');
// 添加覆盖参数
if (overrideApiKey) params.append('apiKey', overrideApiKey);
if (overrideEndpoint) {
try {
new URL(overrideEndpoint);
params.append('endpoint', overrideEndpoint);
} catch (e) {
alert('❌ 覆盖端点 URL 格式无效！');
return;
}
}
if (model) params.append('model', model);
if (notes) params.append('notes', notes);
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
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
// 添加 Claude 专用模型字段
if (app === 'claude') {
if (haikuModel) params.append('haikuModel', haikuModel);
if (sonnetModel) params.append('sonnetModel', sonnetModel);
if (opusModel) params.append('opusModel', opusModel);
}
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
}
const deepLink = `ccswitch://v1/import?${params.toString()}`;
// 显示结果
document.getElementById('linkText').textContent = deepLink;
document.getElementById('testLink').href = deepLink;
document.getElementById('result').style.display = 'block';
// 滚动到结果区域
document.getElementById('result').scrollIntoView({
behavior: 'smooth',
block: 'nearest'
});
}
function copyLink() {
const linkText = document.getElementById('linkText').textContent;
navigator.clipboard.writeText(linkText).then(() => {
const btn = event.target;
const originalText = btn.textContent;
btn.textContent = '✅ 已复制！';
btn.style.background = 'linear-gradient(135deg, #27ae60 0%, #229954 100%)';
setTimeout(() => {
btn.textContent = originalText;
btn.style.background = '';
}, 2000);
}).catch(err => {
console.error('复制失败:', err);
alert('❌ 复制失败，请手动复制链接');
});
}
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
// 复制深链接
function copyDeepLink(url, button) {
navigator.clipboard.writeText(url).then(() => {
const originalText = button.textContent;
button.textContent = '✅ 已复制！';
button.style.background = 'linear-gradient(135deg, #27ae60 0%, #229954 100%)';
setTimeout(() => {
button.textContent = originalText;
button.style.background = '';
}, 2000);
}).catch(err => {
console.error('复制失败:', err);
alert('❌ 复制失败，请手动复制链接');
});
}
// 深链接解析器
function parseDeepLink() {
const urlInput = document.getElementById('parseUrl').value.trim();
if (!urlInput) {
alert('❌ 请输入深链接 URL！');
return;
}
try {
// 解析 URL
const url = new URL(urlInput);
// 验证协议
if (url.protocol !== 'ccswitch:') {
alert('❌ 无效的深链接协议！必须以 ccswitch:// 开头');
return;
}
// 提取版本和路径
const version = url.hostname;
const path = url.pathname;
// 解析查询参数
const params = new URLSearchParams(url.search);
const paramsObj = {};
params.forEach((value, key) => {
paramsObj[key] = value;
});
// 构建基本信息 HTML
let basicInfoHtml = `
<div style="background: #e8f4f8; padding: 16px; border-radius: 8px; border-left: 4px solid #3498db;">
<h4 style="margin-bottom: 12px; color: #2c3e50;">📋 基本信息</h4>
<div style="display: grid; grid-template-columns: 120px 1fr; gap: 8px; font-size: 14px;">
<div style="color: #7f8c8d;">协议版本:</div>
<div style="font-weight: 600; color: #2c3e50;">${version}</div>
<div style="color: #7f8c8d;">路径:</div>
<div style="font-weight: 600; color: #2c3e50;">${path}</div>
<div style="color: #7f8c8d;">资源类型:</div>
<div style="font-weight: 600; color: #2c3e50;">${paramsObj.resource || '-'}</div>
<div style="color: #7f8c8d;">应用类型:</div>
<div style="font-weight: 600; color: #2c3e50; text-transform: capitalize;">${paramsObj.app || '-'}</div>
<div style="color: #7f8c8d;">供应商名称:</div>
<div style="font-weight: 600; color: #2c3e50;">${paramsObj.name || '-'}</div>
</div>
</div>
`;
// 构建 URL 参数 HTML
let urlParamsHtml = `
<div style="background: #fff3cd; padding: 16px; border-radius: 8px; border-left: 4px solid #ffc107;">
<h4 style="margin-bottom: 12px; color: #856404;">🔗 URL 参数</h4>
<div style="display: grid; grid-template-columns: 150px 1fr; gap: 8px; font-size: 13px;">
`;
// 常规参数
const regularParams = ['homepage', 'endpoint', 'apiKey', 'model', 'notes'];
regularParams.forEach(key => {
if (paramsObj[key]) {
let displayValue = paramsObj[key];
// API Key 掩码处理
if (key === 'apiKey') {
displayValue = displayValue.substring(0, 10) + '****';
}
urlParamsHtml += `
<div style="color: #856404; font-weight: 500;">${key}:</div>
<div style="color: #856404; word-break: break-all; font-family: monospace; font-size: 12px;">${displayValue}</div>
`;
}
});
// Claude 专用模型参数
const claudeModelParams = ['haikuModel', 'sonnetModel', 'opusModel'];
claudeModelParams.forEach(key => {
if (paramsObj[key]) {
urlParamsHtml += `
<div style="color: #856404; font-weight: 500;">${key}:</div>
<div style="color: #856404; word-break: break-all; font-family: monospace; font-size: 12px;">${paramsObj[key]}</div>
`;
}
});
urlParamsHtml += '</div></div>';
// 配置文件解析
let configHtml = '';
if (paramsObj.config) {
try {
// 解码 Base64
const decoded = b64_to_utf8(paramsObj.config);
const configObj = JSON.parse(decoded);
configHtml = `
<div style="background: #d1ecf1; padding: 16px; border-radius: 8px; border-left: 4px solid #17a2b8;">
<h4 style="margin-bottom: 12px; color: #0c5460;">📄 配置文件内容 (${paramsObj.configFormat?.toUpperCase() || 'JSON'})</h4>
`;
// 根据应用类型解析配置
if (paramsObj.app === 'claude') {
const env = configObj.env || {};
configHtml += `
<div style="background: #fff; padding: 12px; border-radius: 6px; margin-bottom: 12px;">
<div style="font-size: 12px; color: #0c5460; margin-bottom: 8px; font-weight: 600;">Claude 环境变量:</div>
<div style="display: grid; grid-template-columns: 250px 1fr; gap: 6px; font-size: 12px; font-family: monospace;">
`;
Object.keys(env).forEach(key => {
let value = env[key];
if (key.includes('TOKEN') || key.includes('KEY')) {
value = value.substring(0, 10) + '****';
}
configHtml += `
<div style="color: #0c5460; font-weight: 500;">${key}:</div>
<div style="color: #0c5460;">${value}</div>
`;
});
configHtml += '</div></div>';
} else if (paramsObj.app === 'codex') {
const auth = configObj.auth || {};
const config = configObj.config || '';
configHtml += `
<div style="background: #fff; padding: 12px; border-radius: 6px; margin-bottom: 12px;">
<div style="font-size: 12px; color: #0c5460; margin-bottom: 8px; font-weight: 600;">Codex 认证信息:</div>
<div style="display: grid; grid-template-columns: 200px 1fr; gap: 6px; font-size: 12px; font-family: monospace;">
`;
Object.keys(auth).forEach(key => {
let value = auth[key];
if (key.includes('KEY')) {
value = value.substring(0, 10) + '****';
}
configHtml += `
<div style="color: #0c5460; font-weight: 500;">${key}:</div>
<div style="color: #0c5460;">${value}</div>
`;
});
configHtml += '</div></div>';
if (config) {
configHtml += `
<div style="background: #fff; padding: 12px; border-radius: 6px;">
<div style="font-size: 12px; color: #0c5460; margin-bottom: 8px; font-weight: 600;">TOML 配置:</div>
<pre style="margin: 0; font-size: 11px; color: #0c5460; white-space: pre-wrap; word-break: break-all;">${config}</pre>
</div>
`;
}
} else if (paramsObj.app === 'gemini') {
configHtml += `
<div style="background: #fff; padding: 12px; border-radius: 6px;">
<div style="font-size: 12px; color: #0c5460; margin-bottom: 8px; font-weight: 600;">Gemini 环境变量:</div>
<div style="display: grid; grid-template-columns: 200px 1fr; gap: 6px; font-size: 12px; font-family: monospace;">
`;
Object.keys(configObj).forEach(key => {
let value = configObj[key];
if (key.includes('KEY')) {
value = value.substring(0, 10) + '****';
}
configHtml += `
<div style="color: #0c5460; font-weight: 500;">${key}:</div>
<div style="color: #0c5460;">${value}</div>
`;
});
configHtml += '</div></div>';
}
// 原始 JSON
configHtml += `
<details style="margin-top: 12px;">
<summary style="cursor: pointer; color: #0c5460; font-size: 12px; font-weight: 600;">查看原始 JSON →</summary>
<pre style="margin-top: 8px; padding: 12px; background: #f8f9fa; border-radius: 6px; font-size: 11px; overflow-x: auto; border: 1px solid #dee2e6;">${JSON.stringify(configObj, null, 2)}</pre>
</details>
`;
configHtml += '</div>';
} catch (e) {
configHtml = `
<div style="background: #f8d7da; padding: 16px; border-radius: 8px; border-left: 4px solid #dc3545;">
<h4 style="margin-bottom: 8px; color: #721c24;">❌ 配置文件解析失败</h4>
<div style="color: #721c24; font-size: 13px;">${e.message}</div>
</div>
`;
}
}
// 显示结果
document.getElementById('parseBasicInfo').innerHTML = basicInfoHtml;
document.getElementById('parseUrlParams').innerHTML = urlParamsHtml;
document.getElementById('parseConfigContent').innerHTML = configHtml;
document.getElementById('parseResult').style.display = 'block';
// 滚动到结果
document.getElementById('parseResult').scrollIntoView({
behavior: 'smooth',
block: 'nearest'
});
} catch (e) {
alert('❌ 深链接解析失败：' + e.message);
console.error('Parse error:', e);
}
}
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
// 阻止表单默认提交行为
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
document.addEventListener('DOMContentLoaded', function () {
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
const inputs = document.querySelectorAll('input, textarea, select');
inputs.forEach(input => {
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
input.addEventListener('keypress', function (e) {
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
if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
e.preventDefault();
generateLink();
}
});
});
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
// 初始化显示 Claude 字段
updateModelFields();
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
});
</script>
</body>
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
</html>
Reference in New Issue Copy Permalink