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/ModelTestConfigPanel.tsx

@@ -1,17 +1,10 @@
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { ChevronDown, ChevronRight, Save, Loader2 } from "lucide-react";
+import { Save, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import {
   getModelTestConfig,
@@ -21,7 +14,6 @@ import {
 
 export function ModelTestConfigPanel() {
   const { t } = useTranslation();
-  const [isExpanded, setIsExpanded] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -66,160 +58,120 @@ export function ModelTestConfigPanel() {
 
   if (isLoading) {
     return (
-      <Card className="border rounded-lg">
-        <CardHeader
-          className="cursor-pointer"
-          onClick={() => setIsExpanded(!isExpanded)}
-        >
-          <div className="flex items-center gap-2">
-            <ChevronRight className="h-4 w-4" />
-            <CardTitle className="text-base">
-              {t("modelTest.configTitle", "模型测试配置")}
-            </CardTitle>
-          </div>
-        </CardHeader>
-      </Card>
+      <div className="flex items-center justify-center p-4">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
     );
   }
 
   return (
-    <Card className="border rounded-lg">
-      <CardHeader
-        className="cursor-pointer select-none"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        <div className="flex items-center gap-2">
-          {isExpanded ? (
-            <ChevronDown className="h-4 w-4 text-muted-foreground" />
-          ) : (
-            <ChevronRight className="h-4 w-4 text-muted-foreground" />
-          )}
-          <div>
-            <CardTitle className="text-base">
-              {t("modelTest.configTitle", "模型测试配置")}
-            </CardTitle>
-            {!isExpanded && (
-              <CardDescription className="mt-1">
-                {t(
-                  "modelTest.configDesc",
-                  "配置模型测试使用的默认模型和提示词",
-                )}
-              </CardDescription>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-
-      {isExpanded && (
-        <CardContent className="space-y-4">
-          {error && (
-            <Alert variant="destructive">
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="claudeModel">
-                {t("modelTest.claudeModel", "Claude 测试模型")}
-              </Label>
-              <Input
-                id="claudeModel"
-                value={config.claudeModel}
-                onChange={(e) =>
-                  setConfig({ ...config, claudeModel: e.target.value })
-                }
-                placeholder="claude-haiku-4-5-20251001"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="codexModel">
-                {t("modelTest.codexModel", "Codex 测试模型")}
-              </Label>
-              <Input
-                id="codexModel"
-                value={config.codexModel}
-                onChange={(e) =>
-                  setConfig({ ...config, codexModel: e.target.value })
-                }
-                placeholder="gpt-5.1-low"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="geminiModel">
-                {t("modelTest.geminiModel", "Gemini 测试模型")}
-              </Label>
-              <Input
-                id="geminiModel"
-                value={config.geminiModel}
-                onChange={(e) =>
-                  setConfig({ ...config, geminiModel: e.target.value })
-                }
-                placeholder="gemini-3-pro-low"
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="testPrompt">
-                {t("modelTest.testPrompt", "测试提示词")}
-              </Label>
-              <Input
-                id="testPrompt"
-                value={config.testPrompt}
-                onChange={(e) =>
-                  setConfig({ ...config, testPrompt: e.target.value })
-                }
-                placeholder="ping"
-              />
-              <p className="text-xs text-muted-foreground">
-                {t(
-                  "modelTest.testPromptHint",
-                  "发送给模型的测试消息，建议使用简短内容以减少 token 消耗",
-                )}
-              </p>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="timeoutSecs">
-                {t("modelTest.timeout", "超时时间（秒）")}
-              </Label>
-              <Input
-                id="timeoutSecs"
-                type="number"
-                min={5}
-                max={60}
-                value={config.timeoutSecs}
-                onChange={(e) =>
-                  setConfig({
-                    ...config,
-                    timeoutSecs: parseInt(e.target.value) || 15,
-                  })
-                }
-              />
-            </div>
-          </div>
-
-          <div className="flex justify-end">
-            <Button onClick={handleSave} disabled={isSaving}>
-              {isSaving ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t("common.saving", "保存中...")}
-                </>
-              ) : (
-                <>
-                  <Save className="mr-2 h-4 w-4" />
-                  {t("common.save", "保存")}
-                </>
-              )}
-            </Button>
-          </div>
-        </CardContent>
+    <div className="space-y-4">
+      {error && (
+        <Alert variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
       )}
-    </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="claudeModel">
+            {t("modelTest.claudeModel", "Claude 测试模型")}
+          </Label>
+          <Input
+            id="claudeModel"
+            value={config.claudeModel}
+            onChange={(e) =>
+              setConfig({ ...config, claudeModel: e.target.value })
+            }
+            placeholder="claude-haiku-4-5-20251001"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="codexModel">
+            {t("modelTest.codexModel", "Codex 测试模型")}
+          </Label>
+          <Input
+            id="codexModel"
+            value={config.codexModel}
+            onChange={(e) =>
+              setConfig({ ...config, codexModel: e.target.value })
+            }
+            placeholder="gpt-5.1-low"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="geminiModel">
+            {t("modelTest.geminiModel", "Gemini 测试模型")}
+          </Label>
+          <Input
+            id="geminiModel"
+            value={config.geminiModel}
+            onChange={(e) =>
+              setConfig({ ...config, geminiModel: e.target.value })
+            }
+            placeholder="gemini-3-pro-low"
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="testPrompt">
+            {t("modelTest.testPrompt", "测试提示词")}
+          </Label>
+          <Input
+            id="testPrompt"
+            value={config.testPrompt}
+            onChange={(e) =>
+              setConfig({ ...config, testPrompt: e.target.value })
+            }
+            placeholder="ping"
+          />
+          <p className="text-xs text-muted-foreground">
+            {t(
+              "modelTest.testPromptHint",
+              "发送给模型的测试消息，建议使用简短内容以减少 token 消耗",
+            )}
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="timeoutSecs">
+            {t("modelTest.timeout", "超时时间（秒）")}
+          </Label>
+          <Input
+            id="timeoutSecs"
+            type="number"
+            min={5}
+            max={60}
+            value={config.timeoutSecs}
+            onChange={(e) =>
+              setConfig({
+                ...config,
+                timeoutSecs: parseInt(e.target.value) || 15,
+              })
+            }
+          />
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <Button onClick={handleSave} disabled={isSaving}>
+          {isSaving ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              {t("common.saving", "保存中...")}
+            </>
+          ) : (
+            <>
+              <Save className="mr-2 h-4 w-4" />
+              {t("common.save", "保存")}
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
   );
 }