Commit Graph

643 Commits

Author SHA1 Message Date
Jason
5ebe23abc8 refactor: remove config file location display feature
Remove the config file location display from settings dialog to simplify
the user interface. Users who need to access the config file can still do
so through the advanced settings section.

Changes:
- Removed ConfigPathDisplay component and its usage
- Removed configPath and openConfigFolder from useSettings hook
- Removed configPath and openConfigFolder from useSettingsMetadata hook
- Removed related i18n keys: configFileLocation, openFolder
- Updated settings dialog to remove the config path display section

This simplifies the settings UI while maintaining access to config
directory management through the advanced settings tab.
2025-10-17 23:46:44 +08:00
Jason
e6b66f425a refine: enhance settings dialog UI with improved visual feedback
Improve the visual hierarchy and interaction feedback in the settings dialog:

1. Tab navigation enhancement:
   - Active tabs now use blue background (blue-500/600) with white text
   - Add shadow effect to active tabs for better depth perception
   - Inactive tabs show hover effects (opacity + background)
   - Consistent with app's primary blue theme color

2. Switch component visual improvement:
   - Checked state: blue background (blue-500/600) for clear indication
   - Unchecked state: gray background (gray-300/700) for neutral appearance
   - White thumb color for better contrast on both states
   - Enhanced focus ring (ring-2 + offset-2) for accessibility

3. Layout spacing refinement:
   - Change content area padding from pb-4 to py-4 for symmetrical spacing
   - Ensure consistent 4-unit spacing between all dialog sections

4. Clarify plugin integration description:
   - Update description to accurately reflect that provider switching
     in this app will sync with VS Code Claude Code extension
   - Previous wording was ambiguous about the synchronization behavior

Files changed:
- src/components/ui/tabs.tsx: Enhanced tab visual states
- src/components/ui/switch.tsx: Improved switch contrast
- src/components/settings/SettingsDialog.tsx: Fixed spacing
- src/i18n/locales/{zh,en}.json: Updated plugin description
2025-10-17 23:40:07 +08:00
Jason
8e82ded158 refine: improve settings dialog layout spacing and fix footer visibility
This commit refines the visual hierarchy and fixes layout issues in the
settings dialog:

1. Add visual separators to dialog sections:
   - Add bottom border and background to DialogHeader
   - Both header and footer now have consistent border + bg-muted/20 styling
   - Creates clear three-section layout: header | content | footer

2. Fix footer overflow issue:
   - Remove min-h-[480px] from content area that conflicted with max-h-[90vh]
   - Keep min-h-[400px] on TabsContent to prevent height jumps
   - Add flex-shrink-0 to header and footer to ensure they stay visible
   - Content area uses flex-1 to fill remaining space naturally

3. Improve spacing:
   - Add pb-4 to content area for breathing room above footer
   - Add pb-4 to DialogHeader for consistent spacing below title
   - Ensure proper padding hierarchy across all dialog sections

Layout calculation (small screens, 90vh ≈ 540px):
- Header: ~70px (fixed)
- Content: 400px minimum, scrollable (flexible)
- Footer: ~70px (fixed)
- Total: ≤ 540px, footer always visible ✓

Files modified:
- src/components/ui/dialog.tsx (DialogHeader, DialogFooter styling)
- src/components/settings/SettingsDialog.tsx (content area height constraint)
2025-10-17 23:27:37 +08:00
Jason
c04f636bbe fix: redesign settings dialog layout to prevent content overflow and visual jitter
Fixed multiple layout issues in the settings dialog:

1. Dialog structure: Changed from grid to flexbox layout
   - Removed global padding from DialogContent
   - Added individual padding to DialogHeader (px-6 pt-6) and DialogFooter (px-6 pb-6 pt-4)
   - Added max-h-[90vh] constraint to prevent dialog from exceeding viewport

2. Content area improvements:
   - Replaced max-h-[70vh] with flex-1 for better space utilization
   - Set min-h-[480px] on content wrapper to maintain consistent dialog height
   - Applied min-h-[400px] to all TabsContent components to prevent height jumps

3. Scrollbar optimization:
   - Changed overflow-y-auto to overflow-y-scroll to force scrollbar gutter
   - Eliminates horizontal shift when switching between tabs with different content heights
   - Consistent with main app layout approach (App.tsx)

4. Footer enhancement:
   - Added border-t and bg-muted/20 for visual separation
   - Fixed footer overlapping content in advanced tab

Result: Settings dialog now displays all content properly without requiring
fullscreen, maintains consistent height across tabs, and eliminates layout shift
when switching tabs.
2025-10-17 23:09:21 +08:00
Jason
f5c6363dee fix: eliminate layout shift when switching between Claude and Codex
Fixed dual-source jitter issue:
1. Horizontal shift: Use overflow-y-scroll to force scrollbar gutter
2. Vertical jump: Use keepPreviousData to maintain content during app switch
2025-10-17 21:51:37 +08:00
Jason
2d3d717826 refactor: unify modal overlay system with shadcn/ui Dialog
Fix inconsistent modal overlays by migrating all custom implementations
to the unified shadcn/ui Dialog component with proper z-index layering.

Changes:
- Update Dialog component to support three z-index levels:
  - base (z-40): First-level dialogs
  - nested (z-50): Nested dialogs
  - alert (z-[60]): Alert/confirmation dialogs (using Tailwind arbitrary value)
- Refactor all custom modal implementations to use Dialog:
  - EndpointSpeedTest: API endpoint speed testing panel
  - ClaudeConfigEditor: Claude common config editor
  - CodexQuickWizardModal: Codex quick setup wizard
  - CodexCommonConfigModal: Codex common config editor
  - SettingsDialog: Restart confirmation prompt
- Remove custom backdrop implementations and manual z-index
- Leverage Radix UI Portal for automatic DOM order management
- Ensure consistent overlay behavior and keyboard interactions

This eliminates the "background residue" issue where overlays from
different layers would conflict, providing a unified and professional
user experience across all modal interactions.
2025-10-17 21:32:28 +08:00
Jason
bcaebc1bcb fix: prevent language setting rollback after successful save
Introduce `closeAfterSave` callback to distinguish between save-and-close and cancel-and-close scenarios. Previously, saving settings would trigger `resetSettings()`, causing language changes to revert and requiring users to save twice for the change to take effect.

Changes:
- Add `closeAfterSave()`: close dialog without resetting settings after successful save
- Keep `closeDialog()`: reset settings when canceling or directly closing dialog
- Update save flow to use `closeAfterSave()` in `handleSaveClick`, `handleRestartLater`, and `handleRestartNow`
2025-10-17 20:53:50 +08:00
Jason
e02175e68d fix: prevent language switch state reset caused by dependency cycle
Fixed an issue where clicking the language switcher would cause a brief flash
and fail to persist the language change. The root cause was a dependency cycle
in useSettingsForm where readPersistedLanguage depended on i18n.language,
causing the initialization effect to re-run and reset state whenever the
language changed.

Changed the dependency from [i18n.language] to [i18n] since the i18n object
itself is stable and doesn't change when the language changes, while the
function can still access the current language value via closure.
2025-10-17 20:42:36 +08:00
Jason
9fb000b8fe refactor: unify EndpointSpeedTest with shadcn/ui components
Replace native HTML elements with shadcn/ui components:
- <button> → <Button> with variants (default, outline, ghost)
- <input type="url"> → <Input> component

Benefits:
- Consistent styling across the application
- Better accessibility and theming support
- Reduced custom CSS classes
- Type-safe component props
2025-10-17 19:20:57 +08:00
Jason
0cff882a3f refactor: improve code quality and consistency
Changes:
1. Remove unused variable in useSettings.ts (readPersistedLanguage)
2. Replace manual state management with React Query in UsageFooter
   - Create useUsageQuery hook with 5-minute cache
   - Simplify component from 227 lines to 81 lines (-64%)
   - Improve consistency with project's React Query pattern
   - Enable automatic refetch and error handling
2025-10-17 19:18:10 +08:00
Jason
d9c56511b1 refactor: split CodexConfigEditor into specialized components
Before optimization:
- CodexConfigEditor.tsx: 675 lines (monolithic component)

After optimization:
- CodexConfigEditor.tsx: 131 lines (-81%, orchestration only)
- CodexQuickWizardModal.tsx: 325 lines (quick wizard modal)
- CodexCommonConfigModal.tsx: 126 lines (common config modal)
- CodexConfigSections.tsx: 150 lines (auth & config sections)
- Total: 732 lines (+57 lines, but highly modular)

Benefits:
 Single Responsibility: each component has one clear purpose
 Maintainability: reduced file size makes code easier to understand
 Reusability: modal components can be used independently
 Testability: isolated components are easier to test
 Readability: main component is now just orchestration logic
 Consistency: follows same modal patterns across app

Component breakdown:
- CodexConfigEditor: orchestration + state management (131 lines)
- CodexQuickWizardModal: step-by-step wizard for quick config (325 lines)
- CodexCommonConfigModal: common TOML configuration editor (126 lines)
- CodexAuthSection: auth.json editor UI (70 lines)
- CodexConfigSection: config.toml editor UI (80 lines)
2025-10-17 18:38:49 +08:00
Jason
b8a435a7f6 refactor: extract MCP business logic to useMcpActions hook
Before optimization:
- McpPanel.tsx: 298 lines (component + business logic)

After optimization:
- McpPanel.tsx: 234 lines (-21%, UI focused)
- useMcpActions.ts: 137 lines (business logic)

Benefits:
 Separation of concerns: UI vs business logic
 Reusability: MCP operations can be used in other components
 Testability: business logic can be tested independently
 Consistency: follows same pattern as useProviderActions
 Optimistic updates: toggle enabled status with rollback on error
 Unified error handling: all MCP errors use toast notifications

Technical details:
- Extract reload, toggleEnabled, saveServer, deleteServer
- Implement optimistic UI updates for toggle
- Centralize error handling and toast messages
- Remove duplicate error handling code from component
2025-10-17 18:19:06 +08:00
Jason
edfb61186d refactor: split useSettings hook into specialized hooks
Before optimization:
- useSettings.ts: 516 lines (single monolithic hook)

After optimization:
- useSettingsForm.ts: 158 lines (form state management)
- useDirectorySettings.ts: 297 lines (directory management)
- useSettingsMetadata.ts: 95 lines (metadata management)
- useSettings.ts: 215 lines (composition layer)
- Total: 765 lines (+249 lines, but with clear separation of concerns)

Benefits:
 Single Responsibility Principle: each hook focuses on one domain
 Testability: independent hooks are easier to unit test
 Reusability: specialized hooks can be reused in other components
 Maintainability: reduced cognitive load per file
 Zero breaking changes: SettingsDialog auto-adapted to new interface

Technical details:
- useSettingsForm: pure form state + language sync
- useDirectorySettings: directory selection/reset + default value computation
- useSettingsMetadata: config path + portable mode + restart flag
- useSettings: composition layer + save logic + reset logic
2025-10-17 18:12:03 +08:00
Jason
f963d58e6a refactor: extract business logic to useProviderActions hook
Major improvements:
- Create `src/hooks/useProviderActions.ts` (147 lines)
  - Consolidate provider operations (add, update, delete, switch)
  - Extract Claude plugin sync logic
  - Extract usage script save logic

- Simplify `App.tsx` (347 → 226 lines, -35%)
  - Remove 8 callback functions
  - Remove Claude plugin sync logic
  - Remove usage script save logic
  - Cleaner and more maintainable

- Replace `onNotify` prop with `toast` in:
  - `UsageScriptModal.tsx`
  - `McpPanel.tsx`
  - `McpFormModal.tsx`
  - `McpWizardModal.tsx`
  - Unified notification system using sonner

Benefits:
- Reduced coupling and improved maintainability
- Business logic isolated in hooks, easier to test
- Consistent notification system across the app
2025-10-17 17:49:16 +08:00
Jason
8d6ab63648 refactor: cleanup and minor improvements
- Remove unused useDarkMode hook (now using shadcn theme-provider)
- Clean up MCP components (remove redundant code)
- Add restart API to settings
- Minor type improvements
2025-10-17 16:35:12 +08:00
Jason
d3f2c3c901 refactor: extract validation logic into useMcpValidation hook
Extract all MCP form validation logic into a reusable custom hook to
improve code organization and enable reuse across components.

Changes:
- Create useMcpValidation hook with 4 validation functions:
  * validateJson: basic JSON structure validation
  * formatTomlError: unified TOML error formatting with i18n
  * validateTomlConfig: complete TOML validation with required fields
  * validateJsonConfig: complete JSON validation with structure checks

- Update McpFormModal to use the hook instead of inline validation
- Simplify validation calls throughout the component
- Reduce code duplication while maintaining all functionality

Benefits:
- Validation logic can be reused in other MCP-related components
- Easier to test validation in isolation
- Better separation of concerns
- McpFormModal remains at 699 lines (original: 767), kept cohesive

The component stays as one piece since its 700 lines represent a
single, cohesive form feature rather than multiple unrelated concerns.
2025-10-17 15:10:04 +08:00
Jason
c1f5ddf763 refactor: unify directory structure and extract shared components
- Migrate all form components from ProviderForm/ to providers/forms/
- Create shared components to eliminate code duplication:
  * ApiKeySection: unified API key input with "Get API Key" link
  * EndpointField: unified endpoint URL input with manage button
- Refactor ClaudeFormFields (-31% lines) and CodexFormFields (-33% lines)
- Update all import paths to use new locations
- Reduce code duplication from ~12% to ~7%

This change improves maintainability and makes the codebase more DRY.
2025-10-17 14:31:34 +08:00
Jason
54b0b3b139 feat: add real-time TOML validation for Codex config
- Add smol-toml dependency for client-side TOML parsing
- Create useCodexTomlValidation hook with 500ms debounce
- Display validation errors below config.toml textarea
- Trigger validation on onChange for immediate user feedback
- Backend validation remains as fallback for data integrity
2025-10-16 23:56:30 +08:00
Jason
51c68ef192 chore: clean up TODO comments in ProviderForm
- Remove obsolete TODO comments for Codex Base URL handling
- Codex Base URL is already fully managed by useCodexConfigState hook
- useBaseUrlState is now only used for Claude mode
- Add clarifying comments about the architecture
2025-10-16 22:54:51 +08:00
Jason
41dd487471 fix: enable endpoint speed test by calling backend API
- Import vscodeApi to access backend test_api_endpoints command
- Replace empty results array with actual API call
- Remove TODO comments for implemented API calls
- Enable all endpoint management features:
  - Speed test with latency measurement
  - Load custom endpoints from backend
  - Add/remove custom endpoints
  - Update endpoint last used time
- Fix issue where clicking test button immediately showed failure
2025-10-16 22:47:52 +08:00
Jason
17f350f2d3 feat: add useSpeedTestEndpoints hook to collect all endpoint candidates for speed test modal
- Create useSpeedTestEndpoints hook that collects endpoints from:
  1. Current baseUrl/codexBaseUrl
  2. Initial data URL (edit mode)
  3. Preset's endpointCandidates array
- Pass speedTestEndpoints to ClaudeFormFields and CodexFormFields
- Update EndpointSpeedTest to use collected endpoints instead of just current URL
- Fix PackyCode preset endpoints not appearing in speed test modal
2025-10-16 22:41:36 +08:00
Jason
8a724b79ec fix: enable base URL and endpoint editing for Codex providers in edit mode
Fixed critical bug where CodexFormFields component was not rendered
in edit mode, preventing users from:
- Viewing and editing API base URL for custom/third-party Codex providers
- Accessing endpoint speed test modal in edit mode
- Updating API keys in edit mode

Changed line 477 from:
  {appType === "codex" && !isEditMode && (
To:
  {appType === "codex" && (

This aligns Codex behavior with Claude, where all form fields are
available in both create and edit modes for custom/third-party providers.
2025-10-16 22:28:36 +08:00
Jason
9d75a646ee fix: allow API Key editing in edit mode
Fixed logic in useApiKeyState.ts to correctly show API Key input
when editing existing providers. Changed condition from
`!isEditMode && hasApiKeyField(config)` to
`isEditMode && hasApiKeyField(config)` to match the original
form's behavior.

This restores the ability to directly update API keys when
editing existing providers that have API key fields in their
configuration.
2025-10-16 22:21:46 +08:00
Jason
0868a71576 refactor: split ProviderForm into smaller focused components
- Created ProviderPresetSelector component (80 lines)
- Created BasicFormFields component (60 lines)
- Created ClaudeFormFields component (272 lines)
- Created CodexFormFields component (131 lines)
- Reduced ProviderForm from 866 to 544 lines (37% reduction)

Each component now has a clear single responsibility:
- ProviderPresetSelector: Handles preset selection UI
- BasicFormFields: Name and website URL inputs
- ClaudeFormFields: All Claude-specific form fields
- CodexFormFields: All Codex-specific form fields
- ProviderForm: Orchestrates hooks and component composition

Benefits:
- Better code organization and maintainability
- Easier to test individual components
- Clearer separation of concerns
- More reusable components
2025-10-16 21:40:42 +08:00
Jason
8ce574bdd2 feat: integrate Codex common config snippet and template modal features
- Created useCodexCommonConfig hook for managing Codex TOML common config
- Persists to localStorage with key 'cc-switch:codex-common-config-snippet'
- Added isCodexTemplateModalOpen state to ProviderForm
- Connected all CodexConfigEditor props:
  - Common config snippet management (useCommonConfig, handlers)
  - Template modal state (isTemplateModalOpen, setIsTemplateModalOpen)
  - Form field callbacks (onWebsiteUrlChange, onNameChange)
  - Custom mode detection (isCustomMode)
- Hook structure mirrors useCommonConfigSnippet for consistency
2025-10-16 21:04:32 +08:00
Jason
856beb3b70 feat: add Claude common config snippet functionality
- Create useCommonConfigSnippet hook to manage common config state
- Create CommonConfigEditor component with modal for editing
- Support merging/removing common config snippets from provider configs
- Persist common config to localStorage for reuse across providers
- Auto-detect if provider config contains common snippet
- Replace JSON editor with CommonConfigEditor in ProviderForm
2025-10-16 20:32:11 +08:00
Jason
74afca7b58 feat: implement template variables input functionality
- Create useTemplateValues hook to manage template variable state
- Support dynamic placeholder replacement in provider configs
- Add template parameter input UI in provider form
- Validate required template values before submission
- Auto-update config when template values change
2025-10-16 20:25:39 +08:00
Jason
e4f85f4f65 refactor: extract Kimi model selector logic to dedicated hook
- Create useKimiModelSelector hook to manage Kimi-specific state
- Auto-detect Kimi providers by preset name or config content
- Support model initialization from existing config in edit mode
- Sync model selections with JSON configuration
- Maintain clean separation between UI and business logic
2025-10-16 20:21:42 +08:00
Jason
6541c14421 refactor: extract API Key link and custom endpoints logic into hooks
- Create useApiKeyLink hook to manage API Key retrieval link display and URL
- Create useCustomEndpoints hook to collect endpoints from multiple sources
- Simplify ProviderForm by using these new hooks
- Reduce code duplication and improve maintainability
- Fix TypeScript error with form.watch("websiteUrl") by providing default empty string
2025-10-16 19:56:00 +08:00
Jason
fe4b3e9957 feat: implement custom endpoint management
- Add draftCustomEndpoints state to collect custom endpoints from speed test modal
- Import CustomEndpoint type from @/types
- Update handleSubmit to collect and package endpoints into meta.custom_endpoints:
  * User-added custom endpoints (from draftCustomEndpoints)
  * Preset endpointCandidates (if any)
  * Current Base URL (baseUrl/codexBaseUrl)
- Add onCustomEndpointsChange callback to both Claude and Codex EndpointSpeedTest instances
- Extend ProviderFormValues type to include meta.custom_endpoints field
- Only creates meta.custom_endpoints for new providers (not edit mode)
- Deduplicates URLs and creates CustomEndpoint entries with addedAt timestamp
2025-10-16 19:40:22 +08:00
Jason
918e519b05 feat: add API Key retrieval links for both Claude and Codex providers
- Add shouldShowClaudeApiKeyLink logic based on provider category
- Add shouldShowCodexApiKeyLink logic for Codex providers
- Add getCurrentClaudeWebsiteUrl() to get website URL with apiKeyUrl priority for third-party providers
- Add getCurrentCodexWebsiteUrl() with same logic for Codex
- Add link UI below API Key input for both Claude and Codex
- Links only show for cn_official, aggregator, and third_party categories
- Preserve original UI styling with -mt-1 pl-1 positioning
2025-10-16 19:37:43 +08:00
Jason
a32aeaf73e feat: add Codex support to ProviderForm
- Create useCodexConfigState hook for managing Codex configuration
  - Handles auth.json (JSON) and config.toml (TOML) separately
  - Bidirectional sync with Base URL extraction
  - API Key management from auth.OPENAI_API_KEY
- Integrate Codex-specific UI components
  - Codex API Key input
  - Codex Base URL input with endpoint speed test
  - CodexConfigEditor for auth/config editing
- Update handlePresetChange to support Codex presets
- Update handleSubmit to compose Codex auth+config
- Conditional rendering: Claude uses JsonEditor, Codex uses CodexConfigEditor
2025-10-16 18:50:44 +08:00
Jason
577998fef2 feat: add model selector to ProviderForm
- Integrate useModelState hook for managing ANTHROPIC_MODEL and ANTHROPIC_SMALL_FAST_MODEL
- Add two model input fields in responsive grid layout
- Only show for non-official Claude providers
- Include helper text explaining optional nature
- Bidirectional sync between inputs and JSON config
2025-10-16 17:58:49 +08:00
Jason
3b22bcc134 feat: add Base URL input and endpoint speed test to ProviderForm
- Integrate useBaseUrlState hook for managing Base URL
- Add Base URL input field for third-party and custom providers
- Add endpoint speed test modal with management button
- Show Base URL section only for non-official providers
- Add Zap icon button to open endpoint speed test modal
- Pass baseUrl to EndpointSpeedTest component
- Add helper text explaining API endpoint usage

All TypeScript type checks pass.
2025-10-16 17:44:23 +08:00
Jason
98c35c7c62 refactor: create modular hooks and integrate API key input
- Create custom hooks for state management:
  - useProviderCategory: manages provider category state
  - useApiKeyState: manages API key input with auto-sync to config
  - useBaseUrlState: manages base URL for Claude and Codex
  - useModelState: manages model selection state

- Integrate API key input into simplified ProviderForm:
  - Add ApiKeyInput component for Claude mode
  - Auto-populate API key into settings config
  - Disable for official providers

- Fix EndpointSpeedTest type errors:
  - Fix import paths to use @ alias
  - Add temporary type definitions
  - Format all TODO comments properly
  - Remove incorrect type assertions
  - Comment out unimplemented window.api checks

All TypeScript type checks now pass.
2025-10-16 17:40:25 +08:00
Jason
2c1346a23d refactor: convert provider preset selector to flat button layout
Replace dropdown select menu with flat button layout matching MCP design.
Selecting a preset now fills the form without auto-submitting.
2025-10-16 16:51:47 +08:00
Jason
31f56f7c86 fix: add scrollbars to provider dialogs and simplify theme toggle
## Changes

### Add scrollbars to provider dialogs
- **AddProviderDialog.tsx**: Add max-h-[90vh], flex flex-col layout, and scrollable content wrapper
- **EditProviderDialog.tsx**: Add max-h-[90vh], flex flex-col layout, and scrollable content wrapper
- Both dialogs now follow the same scrolling pattern as other dialogs in the app
- Wrap ProviderForm in `<div className="flex-1 overflow-y-auto -mx-6 px-6">` for proper scrolling

### Simplify theme toggle
- **mode-toggle.tsx**: Change from dropdown menu to direct toggle button
- Remove DropdownMenu and related imports
- Click now directly toggles between light and dark mode
- Simpler UX: one click to switch themes instead of opening a menu
- Remove "system" theme option from quick toggle (still available in settings if needed)

## Benefits
- **Consistent scrolling**: All dialogs now have proper scroll behavior when content exceeds viewport height
- **Better UX**: Theme toggle is faster and more intuitive with direct click
- **Code simplification**: Removed unnecessary dropdown menu complexity from theme toggle

All TypeScript type checks and Prettier formatting checks pass.
2025-10-16 16:39:03 +08:00
Jason
cfefe6b52a refactor: migrate UsageScriptModal to shadcn/ui Dialog component
Migrate the usage script configuration modal from custom modal implementation to shadcn/ui Dialog component to maintain consistent styling across the entire application.

## Changes

### UsageScriptModal.tsx
- Replace custom modal structure (fixed positioning, backdrop) with Dialog component
- Remove X icon import (Dialog includes built-in close button)
- Add Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter imports
- Add Button component import for action buttons
- Update props interface to include isOpen boolean prop
- Restructure component layout:
  - Use DialogHeader with DialogTitle for header section
  - Apply -mx-6 px-6 pattern for full-width scrollable content
  - Use DialogFooter with flex-col sm:flex-row sm:justify-between layout
- Convert custom buttons to Button components:
  - Test/Format buttons: variant="outline" size="sm"
  - Cancel button: variant="ghost" size="sm"
  - Save button: variant="default" size="sm"
- Maintain all existing functionality (preset templates, JSON editor, validation, testing, formatting)

### App.tsx
- Update UsageScriptModal usage to pass isOpen prop
- Use Boolean(usageProvider) to control dialog open state

## Benefits
- **Consistent styling**: All dialogs now use the same shadcn/ui Dialog component
- **Better accessibility**: Automatic focus management, ESC key handling, ARIA attributes
- **Code maintainability**: Reduced custom modal boilerplate, easier to update styling globally
- **User experience**: Unified look and feel across settings, providers, MCP, and usage script dialogs

All TypeScript type checks and Prettier formatting checks pass.
2025-10-16 16:32:50 +08:00
Jason
92528e6a9f refactor: migrate all MCP dialogs to shadcn/ui Dialog component
Convert all MCP-related modal windows to use the unified shadcn/ui Dialog
component for consistency with the rest of the application.

Changes:
- McpPanel: Replace custom modal with Dialog component
  - Update props from onClose to open/onOpenChange pattern
  - Use DialogContent, DialogHeader, DialogTitle components
  - Remove custom backdrop and close button (handled by Dialog)

- McpFormModal: Migrate form modal to Dialog
  - Wrap entire form in Dialog component structure
  - Use DialogFooter for action buttons
  - Apply variant="mcp" to maintain green button styling
  - Remove unused X icon import

- McpWizardModal: Convert wizard to Dialog
  - Replace custom modal structure with Dialog components
  - Use Button component with variant="mcp" for consistency
  - Remove unused isLinux and X icon imports

- App.tsx: Update McpPanel usage
  - Remove conditional rendering wrapper
  - Pass open and onOpenChange props directly

- dialog.tsx: Fix dialog overlay and content styling
  - Change overlay from bg-background/80 to bg-black/50 for consistency
  - Change content from bg-background to explicit bg-white dark:bg-gray-900
  - Ensures opaque backgrounds matching MCP panel style

Benefits:
- Unified dialog behavior across the application
- Consistent styling and animations
- Better accessibility with Radix UI primitives
- Reduced code duplication
- Maintains MCP-specific green color scheme

All dialogs now share the same base styling while preserving their unique
content and functionality.
2025-10-16 16:20:45 +08:00
Jason
5f2bede5c4 style: restore original color scheme to shadcn/ui components
Restore the vibrant color palette from the pre-refactoring version while
maintaining shadcn/ui component architecture and modern design patterns.

## Color Scheme Restoration

### Button Component
- **default variant**: Blue primary (`bg-blue-500`) - matches old `primary`
- **destructive variant**: Red (`bg-red-500`) - matches old `danger`
- **secondary variant**: Gray text (`text-gray-500`) - matches old `secondary`
- **ghost variant**: Transparent hover (`hover:bg-gray-100`) - matches old `ghost`
- **mcp variant**: Emerald green (`bg-emerald-500`) - matches old `mcp`
- Updated border-radius to `rounded-lg` for consistency

### CSS Variables
- Set `--primary` to blue (`hsl(217 91% 60%)` ≈ `bg-blue-500`)
- Added complete shadcn/ui theme variables for light/dark modes
- Maintained semantic color tokens for maintainability

### Component-Specific Colors
- **"Currently Using" badge**: Green (`bg-green-500/10 text-green-500`)
- **Delete button hover**: Red (`hover:text-red-500 hover:bg-red-100`)
- **MCP button**: Emerald green with minimum width (`min-w-[80px]`)
- **Links/URLs**: Blue (`text-blue-500`)

## Benefits

-  Restored original vibrant UI (blue, green, red accents)
-  Maintained shadcn/ui component system (accessibility, animations)
-  Easy global theming via CSS variables
-  Consistent design language across all components
-  Code formatted with Prettier (shadcn/ui standards)

## Files Changed

- `src/index.css`: Added shadcn/ui theme variables with blue primary
- `src/components/ui/button.tsx`: Restored all original button color variants
- `src/components/providers/ProviderCard.tsx`: Green badge for current provider
- `src/components/providers/ProviderActions.tsx`: Red hover for delete button
- `src/components/mcp/McpPanel.tsx`: Use `mcp` variant for consistency
- `src/App.tsx`: MCP button with emerald color and wider width

The UI now matches the original colorful design while leveraging modern
shadcn/ui components for better maintainability and user experience.
2025-10-16 15:32:26 +08:00
Jason
bb48f4f6af refactor: consolidate provider form components
This commit completes Stage 2.5-2.6 of the refactoring plan by:

- Consolidating 8 provider form files (1941+ lines) into a single
  unified ProviderForm component (353 lines), reducing code by ~82%
- Implementing modern form management with react-hook-form and zod
- Adding preset provider categorization with grouped select UI
- Supporting dual-mode operation for both Claude and Codex configs
- Removing redundant subcomponents:
  - ApiKeyInput.tsx (72 lines)
  - ClaudeConfigEditor.tsx (205 lines)
  - CodexConfigEditor.tsx (667 lines)
  - EndpointSpeedTest.tsx (636 lines)
  - KimiModelSelector.tsx (195 lines)
  - PresetSelector.tsx (119 lines)

Key improvements:
- Type-safe form values with ProviderFormValues extension
- Automatic template value application for presets
- Better internationalization coverage
- Cleaner separation of concerns
- Enhanced UX with categorized preset groups

Updates AddProviderDialog and EditProviderDialog to pass appType prop
and handle preset category metadata.
2025-10-16 13:02:38 +08:00
Jason
f3e7412a14 feat: complete stage 4 cleanup and code formatting
This commit completes stage 4 of the refactoring plan, focusing on cleanup
and optimization of the modernized codebase.

## Key Changes

### Code Cleanup
- Remove legacy `src/lib/styles.ts` (no longer needed)
- Remove old modal components (`ImportProgressModal.tsx`, `ProviderList.tsx`)
- Streamline `src/lib/tauri-api.ts` from 712 lines to 17 lines (-97.6%)
  - Remove global `window.api` pollution
  - Keep only event listeners (`tauriEvents.onProviderSwitched`)
  - All API calls now use modular `@/lib/api/*` layer

### Type System
- Clean up `src/vite-env.d.ts` (remove 156 lines of outdated types)
- Remove obsolete global type declarations
- All TypeScript checks pass with zero errors

### Code Formatting
- Format all source files with Prettier (82 files)
- Fix formatting issues in 15 files:
  - App.tsx and core components
  - MCP management components
  - Settings module components
  - Provider management components
  - UI components

### Documentation Updates
- Update `REFACTORING_CHECKLIST.md` with stage 4 progress
- Mark completed tasks in `REFACTORING_MASTER_PLAN.md`

## Impact

**Code Reduction:**
- Total: -1,753 lines, +384 lines (net -1,369 lines)
- tauri-api.ts: 712 → 17 lines (-97.6%)
- Removed styles.ts: -82 lines
- Removed vite-env.d.ts declarations: -156 lines

**Quality Improvements:**
-  Zero TypeScript errors
-  Zero TODO/FIXME comments
-  100% Prettier compliant
-  Zero `window.api` references
-  Fully modular API layer

## Testing
- [x] TypeScript compilation passes
- [x] Code formatting validated
- [x] No linting errors

Stage 4 completion: 100%
Ready for stage 5 (testing and bug fixes)
2025-10-16 12:13:51 +08:00
Jason
2b45af118f feat: complete stage 3 settings refactor 2025-10-16 11:40:02 +08:00
Jason
b88eb88608 feat: complete stage 2 core refactor 2025-10-16 10:49:56 +08:00
Jason
cc0b7053aa feat: complete stage 1 infrastructure 2025-10-16 10:00:22 +08:00
Jason
95e2d84655 docs: add comprehensive refactoring documentation
Add three key documents to guide the project restructure:
- REFACTORING_MASTER_PLAN.md: Complete refactoring roadmap with 6 stages
- REFACTORING_CHECKLIST.md: Detailed task checklist for tracking progress
- REFACTORING_REFERENCE.md: Technical reference and implementation guide

This refactoring aims to modernize the codebase with React Query,
react-hook-form, zod validation, and shadcn/ui components while
maintaining the current Tailwind CSS 4.x stack.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-16 09:38:41 +08:00
ZyphrZero
9eb991d087 feat(ui): add drag-and-drop sorting for provider list (#126)
* feat(ui): add drag-and-drop sorting for provider list

Implement drag-and-drop functionality to allow users to reorder providers with custom sort indices.

Features:
- Install @dnd-kit libraries for drag-and-drop support
- Add sortIndex field to Provider type (frontend & backend)
- Implement SortableProviderItem component with drag handle
- Add update_providers_sort_order Tauri command
- Sync tray menu order with provider list sorting
- Add i18n support for drag-related UI text

Technical details:
- Use @dnd-kit/core and @dnd-kit/sortable for smooth drag interactions
- Disable animations for immediate response after drop
- Update tray menu immediately after reordering
- Sort priority: sortIndex → createdAt → name

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(ui): remove unused transition variable in ProviderList

Remove unused 'transition' destructured variable from useSortable hook
to fix TypeScript error TS6133. The transition property is hardcoded
as 'none' in the style object to prevent conflicts with drag operations.

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-10-15 22:21:06 +08:00
ZyphrZero
3b6048b1e8 feat(config): migrate app_config_dir to Tauri Store for independent management (#109) 2025-10-15 09:15:53 +08:00
Sirhexs
3e4df2c96a feat: add provider usage query with JavaScript scripting support (#101)
* feat: add provider usage query functionality

- Updated `Cargo.toml` to include `regex` and `rquickjs` dependencies for usage script execution.
- Implemented `query_provider_usage` command in `commands.rs` to handle usage queries.
- Created `UsageScript` and `UsageData` structs in `provider.rs` for managing usage script configurations and results.
- Added `execute_usage_script` function in `usage_script.rs` to run user-defined scripts for querying usage.
- Enhanced `ProviderList` component to include a button for configuring usage scripts and a modal for editing scripts.
- Introduced `UsageFooter` component to display usage information and status.
- Added `UsageScriptModal` for editing and testing usage scripts with preset templates.
- Updated Tauri API to support querying provider usage.
- Modified types in `types.ts` to include structures for usage scripts and results.

* feat(usage): support multi-plan usage display for providers

- 【Feature】
  - Update `UsageResult` to support an array of `UsageData` for displaying multiple usage plans per provider.
  - Refactor `query_provider_usage` command to parse both single `UsageData` objects (for backward compatibility) and arrays of `UsageData`.
  - Enhance `usage_script` validation to accept either a single usage object or an array of usage objects.
- 【Frontend】
  - Redesign `UsageFooter` to iterate and display details for all available usage plans, introducing `UsagePlanItem` for individual plan rendering.
  - Improve usage display with color-coded remaining balance and clear plan information.
  - Update `UsageScriptModal` test notification to summarize all returned plans.
  - Remove redundant `isCurrent` prop from `UsageFooter` in `ProviderList`.
- 【Build】
  - Change frontend development server port from `3000` to `3005` in `tauri.conf.json` and `vite.config.mts`.

* feat(usage): enhance query flexibility and display
- 【`src/types.ts`, `src-tauri/src/provider.rs`】Make `UsageData` fields optional and introduce `extra` and `invalidMessage` for more flexible reporting.
  - `expiresAt` replaced by generic `extra` field.
  - `isValid`, `remaining`, `unit` are now optional.
  - Added `invalidMessage` to provide specific reasons for invalid status.
- 【`src-tauri/src/usage_script.rs`】Relax usage script result validation to accommodate optional fields in `UsageData`.
- 【`src/components/UsageFooter.tsx`】Update UI to display `extra` field and `invalidMessage`, and conditionally render `remaining` and `unit` based on availability.
- 【`src/components/UsageScriptModal.tsx`】
  - Add a new `NewAPI` preset template demonstrating advanced extractor logic for complex API responses.
  - Update script instructions to reflect optional fields and new variable syntax (`{{apiKey}}`).
  - Remove old "DeepSeek" and "OpenAI" templates.
  - Remove basic syntax check for `return` statement.
- 【`.vscode/settings.json`】Add `dish-ai-commit.base.language` setting.
- 【`src-tauri/src/commands.rs`】Adjust usage logging to handle optional `remaining` and `unit` fields.

* chore(config): remove VS Code settings from version control

- delete .vscode/settings.json to remove editor-specific configurations
- add /.vscode to .gitignore to prevent tracking of local VS Code settings
- ensure personalized editor preferences are not committed to the repository

* fix(provider): preserve usage script during provider update

- When updating a provider, the `usage_script` configuration within `ProviderMeta` was not explicitly merged.
- This could lead to the accidental loss of `usage_script` settings if the incoming `provider` object in the update request did not contain this field.
- Ensure `usage_script` is cloned from the existing provider's meta when merging `ProviderMeta` during an update.

* refactor(provider): enforce base_url for usage scripts and update dev ports
- 【Backend】
    - `src-tauri/src/commands.rs`: Made `ANTHROPIC_BASE_URL` a required field for Claude providers and `base_url` a required field in `config.toml` for Codex providers when extracting credentials for usage script execution. This improves error handling by explicitly failing if these critical URLs are missing or malformed.
- 【Frontend】
    - `src/App.tsx`, `src/components/ProviderList.tsx`: Passed `appType` prop to `ProviderList` component to ensure `updateProvider` calls within `handleSaveUsageScript` correctly identify the application type.
- 【Config】
    - `src-tauri/tauri.conf.json`, `vite.config.mts`: Updated development server ports from `3005` to `3000` to standardize local development environment.

* refactor(usage): improve usage data fetching logic

- Prevent redundant API calls by tracking last fetched parameters in `useEffect`.
- Avoid concurrent API requests by adding a guard in `fetchUsage`.
- Clear usage data and last fetch parameters when usage query is disabled.
- Add `queryProviderUsage` API declaration to `window.api` interface.

* fix(usage-script): ensure usage script updates and improve reactivity

- correctly update `usage_script` from new provider meta during updates
- replace full page reload with targeted provider data refresh after saving usage script settings
- trigger usage data fetch or clear when `usageEnabled` status changes in `UsageFooter`
- reduce logging verbosity for usage script execution in backend commands and script execution

* style(usage-footer): adjust usage plan item layout

- Decrease width of extra field column from 35% to 30%
- Increase width of usage information column from 40% to 45%
- Improve visual balance and readability of usage plan items
2025-10-15 09:15:25 +08:00
Jason
59644b29e6 chore: bump version to 3.5.1 v3.5.1 2025-10-14 10:39:11 +08:00