* feat(db): add circuit breaker config table and provider proxy target APIs
Add database support for auto-failover feature:
- Add circuit_breaker_config table for storing failover thresholds
- Add get/update_circuit_breaker_config methods in proxy DAO
- Add reset_provider_health method for manual recovery
- Add set_proxy_target and get_proxy_targets methods in providers DAO
for managing multi-provider failover configuration
* feat(proxy): implement circuit breaker and provider router for auto-failover
Add core failover logic:
- CircuitBreaker: Tracks provider health with three states:
- Closed: Normal operation, requests pass through
- Open: Circuit broken after consecutive failures, skip provider
- HalfOpen: Testing recovery with limited requests
- ProviderRouter: Routes requests across multiple providers with:
- Health tracking and automatic failover
- Configurable failure/success thresholds
- Auto-disable proxy target after reaching failure threshold
- Support for manual circuit breaker reset
- Export new types in proxy module
* feat(proxy): add failover Tauri commands and integrate with forwarder
Expose failover functionality to frontend:
- Add Tauri commands: get_proxy_targets, set_proxy_target,
get_provider_health, reset_circuit_breaker,
get/update_circuit_breaker_config, get_circuit_breaker_stats
- Register all new commands in lib.rs invoke handler
- Update forwarder with improved error handling and logging
- Integrate ProviderRouter with proxy server startup
- Add provider health tracking in request handlers
* feat(frontend): add failover API layer and TanStack Query hooks
Add frontend data layer for failover management:
- Add failover.ts API: Tauri invoke wrappers for all failover commands
- Add failover.ts query hooks: TanStack Query mutations and queries
- useProxyTargets, useProviderHealth queries
- useSetProxyTarget, useResetCircuitBreaker mutations
- useCircuitBreakerConfig query and mutation
- Update queries.ts with provider health query key
- Update mutations.ts to invalidate health on provider changes
- Add CircuitBreakerConfig and ProviderHealth types
* feat(ui): add auto-failover configuration UI and provider health display
Add comprehensive UI for failover management:
Components:
- ProviderHealthBadge: Display provider health status with color coding
- CircuitBreakerConfigPanel: Configure failure/success thresholds,
timeout duration, and error rate limits
- AutoFailoverConfigPanel: Manage proxy targets with drag-and-drop
priority ordering and individual enable/disable controls
- ProxyPanel: Integrate failover tabs for unified proxy management
Provider enhancements:
- ProviderCard: Show health badge and proxy target indicator
- ProviderActions: Add "Set as Proxy Target" action
- EditProviderDialog: Add is_proxy_target toggle
- ProviderList: Support proxy target filtering mode
Other:
- Update App.tsx routing for settings integration
- Update useProviderActions hook with proxy target mutation
- Fix ProviderList tests for updated component API
* fix(usage): stabilize date range to prevent infinite re-renders
* feat(backend): add tool version check command
Add get_tool_versions command to check local and latest versions of
Claude, Codex, and Gemini CLI tools:
- Detect local installed versions via command line execution
- Fetch latest versions from npm registry (Claude, Gemini)
and GitHub releases API (Codex)
- Return comprehensive version info including error details
for uninstalled tools
- Register command in Tauri invoke handler
* style(ui): format accordion component code style
Apply consistent code formatting to accordion component:
- Convert double quotes to semicolons at line endings
- Adjust indentation to 2-space standard
- Align with project code style conventions
* refactor(providers): update provider card styling to use theme tokens
Replace hardcoded color classes with semantic design tokens:
- Use bg-card, border-border, text-card-foreground instead of glass-card
- Replace gray/white color literals with muted/foreground tokens
- Change proxy target indicator color from purple to green
- Improve hover states with border-border-active
- Ensure consistent dark mode support via CSS variables
* refactor(proxy): simplify auto-failover config panel structure
Restructure AutoFailoverConfigPanel for better integration:
- Remove internal Card wrapper and expansion toggle (now handled by parent)
- Extract enabled state to props for external control
- Simplify loading state display
- Clean up redundant CardHeader/CardContent wrappers
- ProxyPanel: reduce complexity by delegating to parent components
* feat(settings): enhance settings page with accordion layout and tool versions
Major settings page improvements:
AboutSection:
- Add local tool version detection (Claude, Codex, Gemini)
- Display installed vs latest version comparison with visual indicators
- Show update availability badges and environment check cards
SettingsPage:
- Reorganize advanced settings into collapsible accordion sections
- Add proxy control panel with inline status toggle
- Integrate auto-failover configuration with accordion UI
- Add database and cost calculation config sections
DirectorySettings & WindowSettings:
- Minor styling adjustments for consistency
settings.ts API:
- Add getToolVersions() wrapper for new backend command
* refactor(usage): restructure usage dashboard components
Comprehensive usage statistics panel refactoring:
UsageDashboard:
- Reorganize layout with improved section headers
- Add better loading states and empty state handling
ModelStatsTable & ProviderStatsTable:
- Minor styling updates for consistency
ModelTestConfigPanel & PricingConfigPanel:
- Simplify component structure
- Remove redundant Card wrappers
- Improve form field organization
RequestLogTable:
- Enhance table layout with better column sizing
- Improve pagination controls
UsageSummaryCards:
- Update card styling with semantic tokens
- Better responsive grid layout
UsageTrendChart:
- Refine chart container styling
- Improve legend and tooltip display
* chore(deps): add accordion and animation dependencies
Package updates:
- Add @radix-ui/react-accordion for collapsible sections
- Add cmdk for command palette support
- Add framer-motion for enhanced animations
Tailwind config:
- Add accordion-up/accordion-down animations
- Update darkMode config to support both selector and class
- Reorganize color and keyframe definitions for clarity
* style(app): update header and app switcher styling
App.tsx:
- Replace glass-header with explicit bg-background/80 backdrop-blur
- Update navigation button container to use bg-muted
AppSwitcher:
- Replace hardcoded gray colors with semantic muted/foreground tokens
- Ensure consistent dark mode support via CSS variables
- Add group class for better hover state transitions
Add staleTime and gcTime to useUsageQuery to avoid triggering
unnecessary API calls when switching between app tabs. The staleTime
is set dynamically based on the auto-refresh interval (or 5 minutes
by default), and gcTime is set to 10 minutes to preserve cache after
component unmount.
- Add `refetchIntervalInBackground: true` to usage query configuration
- Allows usage queries to continue running when app window is minimized or unfocused
- Existing safety mechanisms remain in place (timeout limits, minimum interval, no retry)
- Users have full control through autoQueryInterval setting
Problem:
- User configured 5-minute auto-query interval
- Actual queries executed every 10 minutes instead of 5
Root Cause:
- staleTime (5 min) conflicted with refetchInterval (5 min)
- React Query skipped refetch when data was still within staleTime
- First interval trigger at T+5min: data considered "fresh", skipped
- Second interval trigger at T+10min: data "stale", executed
Solution:
- Set staleTime to 0 for usage queries
- Ensures refetchInterval executes precisely as configured
- Auto-query is meant to fetch fresh data periodically, not use cache
Technical Details:
- Modified useUsageQuery in src/lib/query/queries.ts
- Changed: staleTime: 5 * 60 * 1000 → staleTime: 0
- Added explanatory comment in Chinese
- Manual queries still work via refetch() button
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
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`.
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
YoVinchen