Feat/auto failover (#367)

* 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

src/components/usage/UsageDashboard.tsx

@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Card } from "@/components/ui/card";
 import { UsageSummaryCards } from "./UsageSummaryCards";
 import { UsageTrendChart } from "./UsageTrendChart";
 import { RequestLogTable } from "./RequestLogTable";
 import { ProviderStatsTable } from "./ProviderStatsTable";
 import { ModelStatsTable } from "./ModelStatsTable";
 import type { TimeRange } from "@/types/usage";
+import { motion } from "framer-motion";
+import { BarChart3, ListFilter, Activity } from "lucide-react";
 
 export function UsageDashboard() {
   const { t } = useTranslation();
@@ -16,50 +17,90 @@ export function UsageDashboard() {
   const days = timeRange === "1d" ? 1 : timeRange === "7d" ? 7 : 30;
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-end">
-        <select
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+      className="space-y-8 pb-8"
+    >
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-2xl font-bold">{t("usage.title", "使用统计")}</h2>
+          <p className="text-sm text-muted-foreground">
+            {t("usage.subtitle", "查看 AI 模型的使用情况和成本统计")}
+          </p>
+        </div>
+
+        <Tabs
           value={timeRange}
-          onChange={(e) => setTimeRange(e.target.value as TimeRange)}
-          className="rounded-md border px-3 py-1.5 text-sm"
+          onValueChange={(v) => setTimeRange(v as TimeRange)}
+          className="w-full sm:w-auto"
         >
-          <option value="1d">{t("usage.today", "今天")}</option>
-          <option value="7d">{t("usage.last7days", "过去 7 天")}</option>
-          <option value="30d">{t("usage.last30days", "过去 30 天")}</option>
-        </select>
+          <TabsList className="flex w-full sm:w-auto bg-card/60 border border-border/50 backdrop-blur-sm shadow-sm h-10 p-1">
+            <TabsTrigger
+              value="1d"
+              className="flex-1 sm:flex-none sm:px-6 data-[state=active]:bg-primary/10 data-[state=active]:text-primary hover:text-primary transition-colors"
+            >
+              {t("usage.today", "24小时")}
+            </TabsTrigger>
+            <TabsTrigger
+              value="7d"
+              className="flex-1 sm:flex-none sm:px-6 data-[state=active]:bg-primary/10 data-[state=active]:text-primary hover:text-primary transition-colors"
+            >
+              {t("usage.last7days", "7天")}
+            </TabsTrigger>
+            <TabsTrigger
+              value="30d"
+              className="flex-1 sm:flex-none sm:px-6 data-[state=active]:bg-primary/10 data-[state=active]:text-primary hover:text-primary transition-colors"
+            >
+              {t("usage.last30days", "30天")}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
       </div>
 
       <UsageSummaryCards days={days} />
 
-      <Card className="border-none bg-transparent p-0 shadow-none">
-        <UsageTrendChart days={days} />
-      </Card>
+      <UsageTrendChart days={days} />
 
-      <Tabs defaultValue="logs" className="w-full">
-        <TabsList>
-          <TabsTrigger value="logs">
-            {t("usage.requestLogs", "请求日志")}
-          </TabsTrigger>
-          <TabsTrigger value="providers">
-            {t("usage.providerStats", "Provider 统计")}
-          </TabsTrigger>
-          <TabsTrigger value="models">
-            {t("usage.modelStats", "模型统计")}
-          </TabsTrigger>
-        </TabsList>
+      <div className="space-y-4">
+        <Tabs defaultValue="logs" className="w-full">
+          <div className="flex items-center justify-between mb-4">
+            <TabsList className="bg-muted/50">
+              <TabsTrigger value="logs" className="gap-2">
+                <ListFilter className="h-4 w-4" />
+                {t("usage.requestLogs", "请求日志")}
+              </TabsTrigger>
+              <TabsTrigger value="providers" className="gap-2">
+                <Activity className="h-4 w-4" />
+                {t("usage.providerStats", "Provider 统计")}
+              </TabsTrigger>
+              <TabsTrigger value="models" className="gap-2">
+                <BarChart3 className="h-4 w-4" />
+                {t("usage.modelStats", "模型统计")}
+              </TabsTrigger>
+            </TabsList>
+          </div>
 
-        <TabsContent value="logs" className="mt-4">
-          <RequestLogTable />
-        </TabsContent>
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+          >
+            <TabsContent value="logs" className="mt-0">
+              <RequestLogTable />
+            </TabsContent>
 
-        <TabsContent value="providers" className="mt-4">
-          <ProviderStatsTable />
-        </TabsContent>
+            <TabsContent value="providers" className="mt-0">
+              <ProviderStatsTable />
+            </TabsContent>
 
-        <TabsContent value="models" className="mt-4">
-          <ModelStatsTable />
-        </TabsContent>
-      </Tabs>
-    </div>
+            <TabsContent value="models" className="mt-0">
+              <ModelStatsTable />
+            </TabsContent>
+          </motion.div>
+        </Tabs>
+      </div>
+    </motion.div>
   );
 }