Upgrade the enable toggle from native checkbox to shadcn/ui Switch component
for better UX and UI consistency with settings page.
**Improvements**:
1. Use modern toggle UI (Switch) instead of traditional checkbox
2. Adopt the same layout pattern as settings page (ToggleRow style)
3. Add bordered container with proper spacing for better visual hierarchy
4. Maintain full accessibility support (aria-label)
**Layout changes**:
- Before: Simple label + checkbox horizontal layout
- After: Bordered container, label on left, Switch on right, vertically centered
FormLabel component requires FormField context and throws error when used
standalone, causing the entire component to crash with a white screen.
Root cause:
- FormLabel internally calls useFormField() hook
- useFormField() requires FormFieldContext (must be within <FormField>)
- Without context, it throws: "useFormField should be used within <FormField>"
- Uncaught error crashes React rendering tree
Solution:
- Replace FormLabel with standalone Label component
- Label component from @/components/ui/label doesn't depend on form context
- Maintains same styling (text-sm font-medium) without requiring context
This fixes the white screen issue when clicking the usage panel.
Replace native HTML input elements with shadcn/ui Input and FormLabel
components to ensure consistent styling across the application.
Changes:
- Import Input, FormLabel, Eye, and EyeOff components
- Replace all credential input fields with Input component
- Add show/hide toggle buttons for password fields (API Key, Access Token)
- Replace label/span elements with FormLabel component
- Update timeout and auto-query interval inputs to use Input component
- Improve spacing consistency (space-y-4 for credential config)
- Add proper id attributes for accessibility
- Use muted-foreground for hint text
The form now matches the styling of provider configuration forms
throughout the application.
Add independent credential fields for usage query to support different
query endpoints and authentication methods.
Changes:
- Add `apiKey` and `baseUrl` fields to UsageScript struct
- Remove dependency on provider config credentials in query_usage
- Update test_usage_script to accept independent credential parameters
- Add credential input fields in UsageScriptModal based on template:
* General: apiKey + baseUrl
* NewAPI: baseUrl + accessToken + userId
* Custom: no additional fields (full freedom)
- Auto-clear irrelevant fields when switching templates
- Add i18n text for "credentialsConfig"
Benefits:
- Query API can use different endpoint/key than provider config
- Better separation of concerns
- More flexible for various usage query scenarios
Breaking Changes:
- Removed useAutoUsageQuery hook (119 lines)
- Unified all usage queries into single useUsageQuery hook
Technical Improvements:
- Eliminated duplicate state management (React Query + manual useState)
- Fixed single source of truth principle violation
- Replaced manual setInterval with React Query's built-in refetchInterval
- Reduced UsageFooter complexity by 28% (54 → 39 lines)
New Features:
- useUsageQuery now accepts autoQueryInterval option
- Automatic query interval control (0 = disabled, min 1 minute)
- Built-in lastQueriedAt timestamp from dataUpdatedAt
- Auto-query only enabled for currently active provider
Architecture Benefits:
- Single data source: manual and auto queries share same cache
- No more state inconsistency between manual/auto query results
- Leverages React Query's caching, deduplication, and background updates
- Cleaner separation of concerns
Code Changes:
- src/lib/query/queries.ts: Enhanced useUsageQuery with auto-query support
- src/components/UsageFooter.tsx: Simplified to use single query hook
- src/hooks/useAutoUsageQuery.ts: Deleted (redundant)
- All type checks passed
New Features:
- Users can configure auto-query interval in "Configure Usage Query" dialog
- Interval in minutes (0 = disabled, recommend 5-60 minutes)
- Auto-query only enabled for currently active provider
- Display last query timestamp in relative time format (e.g., "5 min ago")
- Execute first query immediately when enabled, then repeat at intervals
Technical Implementation:
- Backend: Add auto_query_interval field to UsageScript struct
- Frontend: Create useAutoUsageQuery Hook to manage timers and query state
- UI: Add auto-query interval input field in UsageScriptModal
- Integration: Display auto-query results and timestamp in UsageFooter
- i18n: Add Chinese and English translations
UX Improvements:
- Minimum interval protection (1 minute) to prevent API abuse
- Auto-cleanup timers on component unmount
- Silent failure handling for auto-queries, non-intrusive to users
- Prioritize auto-query results, fallback to manual query results
- Timestamp display positioned next to refresh button for better clarity
Fully internationalized the usage query feature to support both Chinese and English.
Frontend changes:
- Refactored UsageScriptModal to use i18n translation keys
- Replaced hardcoded Chinese template names with constants
- Implemented dynamic template generation with i18n support
- Internationalized all labels, placeholders, and code comments
- Added template name mapping for translation
Backend changes:
- Replaced all hardcoded Chinese error messages in usage_script.rs
- Converted 33 error instances from AppError::Message to AppError::localized
- Added bilingual error messages for runtime, parsing, HTTP, and validation errors
Translation updates:
- Added 11 new translation key pairs to zh.json and en.json
- Covered template names, field labels, placeholders, and code comments
Impact:
- 100% i18n coverage for usage query functionality
- All user-facing text and error messages now support language switching
- Better user experience for English-speaking users
- Add private helper method `execute_and_format_usage_result` to eliminate code duplication
- Refactor `query_usage` to use helper method instead of duplicating result processing
- Add new `test_usage_script` method to test temporary script without saving
- Add backend command `test_usage_script` accepting script content as parameter
- Register new command in lib.rs invoke_handler
- Add frontend `usageApi.testScript` method to call the new backend API
- Update `UsageScriptModal.handleTest` to test current editor content instead of saved script
- Improve DX: users can now test script changes before saving
- Add visual feedback for currently selected template
- Use blue background and white text for selected button
- Apply gray styling with hover effect for unselected buttons
- Support dark mode with appropriate color variants
- Match the same styling pattern used in provider preset selector
- Add "自定义" (Custom) template as the first preset option
- Provide minimal structure with empty URL and headers for full customization
- Include basic extractor function returning remaining and unit fields
- Allow users to build usage queries from scratch without starting from complex examples
- Add template tracking state to monitor which preset is selected
- Move advanced config (Access Token & User ID) before script editor for better visibility
- Show advanced config only when NewAPI template is selected
- Auto-detect NewAPI template on modal open if accessToken/userId exist
- Clear advanced fields when switching from NewAPI to other templates
- Improve UX by placing critical config fields at the top
Add optional accessToken and userId fields to usage query scripts,
enabling queries to authenticated endpoints like /api/user/self.
Changes:
- Add accessToken and userId fields to UsageScript type (frontend & backend)
- Extend script engine to support {{accessToken}} and {{userId}} placeholders
- Update NewAPI preset template to use /api/user/self endpoint
- Add UI inputs for access token and user ID in UsageScriptModal
- Pass new parameters through service layer to script executor
This allows users to query usage data from endpoints that require
login credentials, providing more accurate balance information for
services like NewAPI/OneAPI platforms.
Rename `AppType` to `AppId` across the entire frontend codebase to better
reflect its purpose as an application identifier rather than a type category.
This aligns frontend naming with backend command parameter conventions.
Changes:
- Rename type `AppType` to `AppId` in src/lib/api/types.ts
- Remove `AppType` export from src/lib/api/index.ts
- Update all component props from `appType` to `appId` (43 files)
- Update all variable names from `appType` to `appId`
- Synchronize documentation (CHANGELOG, refactoring plans)
- Update test files and MSW mocks
BREAKING CHANGE: `AppType` type is no longer exported. Use `AppId` instead.
All component props have been renamed from `appType` to `appId`.
- Define custom border utilities in @layer utilities for consistent theming
- Add border-default (1px gray), border-active (2px primary), border-hover (40% primary), and border-dragging (60% primary) classes
- Update all UI components (Input, Select, TextArea, Button, Dialog, Dropdown) to use unified border classes
- Replace hardcoded border colors (gray-200/300/600/700) with theme-responsive border-border-default
- Update provider cards, MCP components, settings, and forms with new border system
- Remove dark mode border overrides to simplify CSS and improve maintainability
- Ensure all borders automatically adapt to light/dark themes via CSS variables
* 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
