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/proxy/AutoFailoverConfigPanel.tsx

@@ -0,0 +1,336 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+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 { Save, Loader2, Info } from "lucide-react";
+import { toast } from "sonner";
+import {
+  useCircuitBreakerConfig,
+  useUpdateCircuitBreakerConfig,
+} from "@/lib/query/failover";
+
+export interface AutoFailoverConfigPanelProps {
+  enabled: boolean;
+  onEnabledChange: (enabled: boolean) => void;
+}
+
+export function AutoFailoverConfigPanel({
+  enabled,
+  onEnabledChange,
+}: AutoFailoverConfigPanelProps) {
+  const { t } = useTranslation();
+  const { data: config, isLoading, error } = useCircuitBreakerConfig();
+  const updateConfig = useUpdateCircuitBreakerConfig();
+
+  const [formData, setFormData] = useState({
+    failureThreshold: 5,
+    successThreshold: 2,
+    timeoutSeconds: 60,
+    errorRateThreshold: 0.5,
+    minRequests: 10,
+  });
+
+  useEffect(() => {
+    if (config) {
+      setFormData({
+        ...config,
+      });
+    }
+  }, [config]);
+
+  const handleSave = async () => {
+    try {
+      await updateConfig.mutateAsync({
+        failureThreshold: formData.failureThreshold,
+        successThreshold: formData.successThreshold,
+        timeoutSeconds: formData.timeoutSeconds,
+        errorRateThreshold: formData.errorRateThreshold,
+        minRequests: formData.minRequests,
+      });
+      toast.success(
+        t("proxy.autoFailover.configSaved", "自动故障转移配置已保存"),
+      );
+    } catch (e) {
+      toast.error(
+        t("proxy.autoFailover.configSaveFailed", "保存失败") + ": " + String(e),
+      );
+    }
+  };
+
+  const handleReset = () => {
+    if (config) {
+      setFormData({
+        ...config,
+      });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-4">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="border-0 rounded-none shadow-none bg-transparent">
+      {/* Header Switch moved to parent accordion logic or kept here absolutely positioned if styling permits. 
+            Since we need it in the accordion header, and this component is inside the content, we can use a portal or 
+            absolute positioning trick similar to ProxyPanel, OR cleaner, just duplicate the switch logic in SettingsPage 
+            and pass it down. But for now, let's use the absolute positioning trick to "lift" it visually. 
+            Better yet, let's just render the content directly without the wrapping Card header/collapse logic 
+            since the user requested "click to expand is detailed info, no need to fold again" (implying the accordion handles folding).
+        */}
+
+      <div className="space-y-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{String(error)}</AlertDescription>
+          </Alert>
+        )}
+
+        <Alert className="border-blue-500/40 bg-blue-500/10">
+          <Info className="h-4 w-4" />
+          <AlertDescription className="text-sm">
+            {t(
+              "proxy.autoFailover.info",
+              "当启用多个代理目标时，系统会按优先级顺序依次尝试。当某个供应商连续失败达到阈值时，熔断器会自动打开，跳过该供应商。",
+            )}
+          </AlertDescription>
+        </Alert>
+
+        {/* 重试与超时配置 */}
+        <div className="space-y-4 rounded-lg border border-white/10 bg-muted/30 p-4">
+          <h4 className="text-sm font-semibold">
+            {t("proxy.autoFailover.retrySettings", "重试与超时设置")}
+          </h4>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="failureThreshold">
+                {t("proxy.autoFailover.failureThreshold", "失败阈值")}
+              </Label>
+              <Input
+                id="failureThreshold"
+                type="number"
+                min="1"
+                max="20"
+                value={formData.failureThreshold}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    failureThreshold: parseInt(e.target.value) || 5,
+                  })
+                }
+                disabled={!enabled}
+              />
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "proxy.autoFailover.failureThresholdHint",
+                  "连续失败多少次后打开熔断器（建议: 3-10）",
+                )}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="timeoutSeconds">
+                {t("proxy.autoFailover.timeout", "恢复等待时间（秒）")}
+              </Label>
+              <Input
+                id="timeoutSeconds"
+                type="number"
+                min="10"
+                max="300"
+                value={formData.timeoutSeconds}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    timeoutSeconds: parseInt(e.target.value) || 60,
+                  })
+                }
+                disabled={!enabled}
+              />
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "proxy.autoFailover.timeoutHint",
+                  "熔断器打开后，等待多久后尝试恢复（建议: 30-120）",
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* 熔断器高级配置 */}
+        <div className="space-y-4 rounded-lg border border-white/10 bg-muted/30 p-4">
+          <h4 className="text-sm font-semibold">
+            {t("proxy.autoFailover.circuitBreakerSettings", "熔断器高级设置")}
+          </h4>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="successThreshold">
+                {t("proxy.autoFailover.successThreshold", "恢复成功阈值")}
+              </Label>
+              <Input
+                id="successThreshold"
+                type="number"
+                min="1"
+                max="10"
+                value={formData.successThreshold}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    successThreshold: parseInt(e.target.value) || 2,
+                  })
+                }
+                disabled={!enabled}
+              />
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "proxy.autoFailover.successThresholdHint",
+                  "半开状态下成功多少次后关闭熔断器",
+                )}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="errorRateThreshold">
+                {t("proxy.autoFailover.errorRate", "错误率阈值 (%)")}
+              </Label>
+              <Input
+                id="errorRateThreshold"
+                type="number"
+                min="0"
+                max="100"
+                step="5"
+                value={Math.round(formData.errorRateThreshold * 100)}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    errorRateThreshold: (parseInt(e.target.value) || 50) / 100,
+                  })
+                }
+                disabled={!enabled}
+              />
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "proxy.autoFailover.errorRateHint",
+                  "错误率超过此值时打开熔断器",
+                )}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="minRequests">
+                {t("proxy.autoFailover.minRequests", "最小请求数")}
+              </Label>
+              <Input
+                id="minRequests"
+                type="number"
+                min="5"
+                max="100"
+                value={formData.minRequests}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    minRequests: parseInt(e.target.value) || 10,
+                  })
+                }
+                disabled={!enabled}
+              />
+              <p className="text-xs text-muted-foreground">
+                {t(
+                  "proxy.autoFailover.minRequestsHint",
+                  "计算错误率前的最小请求数",
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* 操作按钮 */}
+        <div className="flex justify-end gap-3 pt-2">
+          <Button
+            variant="outline"
+            onClick={handleReset}
+            disabled={updateConfig.isPending || !enabled}
+          >
+            {t("common.reset", "重置")}
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={updateConfig.isPending || !formData.enabled}
+          >
+            {updateConfig.isPending ? (
+              <>
+                <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 className="p-4 bg-muted/50 rounded-lg space-y-2 text-sm">
+          <h4 className="font-medium">
+            {t("proxy.autoFailover.explanationTitle", "工作原理")}
+          </h4>
+          <ul className="space-y-1 text-muted-foreground">
+            <li>
+              •{" "}
+              <strong>
+                {t("proxy.autoFailover.failureThresholdLabel", "失败阈值")}
+              </strong>
+              ：
+              {t(
+                "proxy.autoFailover.failureThresholdExplain",
+                "连续失败达到此次数时，熔断器打开，该供应商暂时不可用",
+              )}
+            </li>
+            <li>
+              •{" "}
+              <strong>
+                {t("proxy.autoFailover.timeoutLabel", "恢复等待时间")}
+              </strong>
+              ：
+              {t(
+                "proxy.autoFailover.timeoutExplain",
+                "熔断器打开后，等待此时间后尝试半开状态",
+              )}
+            </li>
+            <li>
+              •{" "}
+              <strong>
+                {t("proxy.autoFailover.successThresholdLabel", "恢复成功阈值")}
+              </strong>
+              ：
+              {t(
+                "proxy.autoFailover.successThresholdExplain",
+                "半开状态下，成功达到此次数时关闭熔断器，供应商恢复可用",
+              )}
+            </li>
+            <li>
+              •{" "}
+              <strong>
+                {t("proxy.autoFailover.errorRateLabel", "错误率阈值")}
+              </strong>
+              ：
+              {t(
+                "proxy.autoFailover.errorRateExplain",
+                "错误率超过此值时，即使未达到失败阈值也会打开熔断器",
+              )}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}