feat: add Universal Provider feature (#348)

* feat: add Universal Provider feature

- Add Universal Provider data structures and type definitions
- Implement backend CRUD operations and sync functionality
- Add frontend UI components (UniversalProviderPanel, Card, FormModal)
- Add NewAPI icon and preset configuration
- Support cross-app (Claude/Codex/Gemini) configuration sync
- Add website URL field for providers
- Implement real-time refresh via event notifications
- Add i18n support (Chinese/English/Japanese)

* feat: integrate universal provider presets into add provider dialog

- Add universal provider presets (NewAPI, Custom Gateway) to preset selector
- Show universal presets with Layers icon badge in preset selector
- Open UniversalProviderFormModal when universal preset is clicked
- Pass initialPreset to auto-fill form when opened from add dialog
- Add i18n keys for addSuccess/addFailed messages
- Keep separate universal provider panel for management

* refactor: move universal provider management to add dialog

- Remove Layers button from main navigation header
- Add 'Manage' button next to universal provider presets
- Open UniversalProviderPanel from within add provider dialog
- Add i18n keys for 'manage' in all locales

* style: display universal provider presets on separate line

- Move universal provider section to a new row with border separator
- Add label '统一供应商:' to clarify the section

* style: unify universal provider label style with preset label

- Use FormLabel component for consistent styling
- Add background to 'Manage' button matching preset buttons
- Update icon size and button padding for consistency

* feat: add sync functionality and JSON preview for Universal Provider

* fix: add missing in_failover_queue field to Provider structs

After rebasing to main, the Provider struct gained a new
`in_failover_queue` field. This fix adds the missing field
to the three to_*_provider() methods in UniversalProvider.

* refactor: redesign AddProviderDialog with tab-based layout

- Add tabs to separate app-specific providers and universal providers
- Move "Add Universal Provider" button from panel header to footer
- Remove unused handleAdd callback and clean up imports
- Update emptyHint i18n text to reference the footer button

* fix: append /v1 suffix to Codex base_url in Universal Provider

Codex uses OpenAI-compatible API which requires the /v1 endpoint suffix.
The Universal Provider now automatically appends /v1 to base_url when
generating Codex provider config if not already present.

- Handle trailing slashes to avoid double slashes
- Apply fix to both backend (to_codex_provider) and frontend preview

* feat: auto-sync universal provider to apps on creation

Previously, users had to manually click sync after adding a universal
provider. Now it automatically syncs to Claude/Codex/Gemini on creation,
providing a smoother user experience.

---------

Co-authored-by: Jason <farion1231@gmail.com>

src/components/providers/forms/ApiKeyInput.tsx

@@ -36,10 +36,7 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
 
   return (
     <div className="space-y-2">
-      <label
-        htmlFor={id}
-        className="block text-sm font-medium text-foreground"
-      >
+      <label htmlFor={id} className="block text-sm font-medium text-foreground">
         {label} {required && "*"}
       </label>
       <div className="relative">

src/components/providers/forms/ProviderForm.tsx

@@ -20,6 +20,7 @@ import {
   geminiProviderPresets,
   type GeminiProviderPreset,
 } from "@/config/geminiProviderPresets";
+import type { UniversalProviderPreset } from "@/config/universalProviderPresets";
 import { applyTemplateValues } from "@/utils/providerConfigUtils";
 import { mergeProviderMeta } from "@/utils/providerMetaUtils";
 import { getCodexCustomTemplate } from "@/config/codexTemplates";
@@ -72,6 +73,8 @@ interface ProviderFormProps {
   submitLabel: string;
   onSubmit: (values: ProviderFormValues) => void;
   onCancel: () => void;
+  onUniversalPresetSelect?: (preset: UniversalProviderPreset) => void;
+  onManageUniversalProviders?: () => void;
   initialData?: {
     name?: string;
     websiteUrl?: string;
@@ -91,6 +94,8 @@ export function ProviderForm({
   submitLabel,
   onSubmit,
   onCancel,
+  onUniversalPresetSelect,
+  onManageUniversalProviders,
   initialData,
   showButtons = true,
 }: ProviderFormProps) {
@@ -803,6 +808,8 @@ export function ProviderForm({
             categoryKeys={categoryKeys}
             presetCategoryLabels={presetCategoryLabels}
             onPresetChange={handlePresetChange}
+            onUniversalPresetSelect={onUniversalPresetSelect}
+            onManageUniversalProviders={onManageUniversalProviders}
             category={category}
           />
         )}

src/components/providers/forms/ProviderPresetSelector.tsx

@@ -1,11 +1,16 @@
 import { useTranslation } from "react-i18next";
 import { FormLabel } from "@/components/ui/form";
 import { ClaudeIcon, CodexIcon, GeminiIcon } from "@/components/BrandIcons";
-import { Zap, Star } from "lucide-react";
+import { Zap, Star, Layers, Settings2 } from "lucide-react";
 import type { ProviderPreset } from "@/config/claudeProviderPresets";
 import type { CodexProviderPreset } from "@/config/codexProviderPresets";
 import type { GeminiProviderPreset } from "@/config/geminiProviderPresets";
 import type { ProviderCategory } from "@/types";
+import {
+  universalProviderPresets,
+  type UniversalProviderPreset,
+} from "@/config/universalProviderPresets";
+import { ProviderIcon } from "@/components/ProviderIcon";
 
 type PresetEntry = {
   id: string;
@@ -18,6 +23,8 @@ interface ProviderPresetSelectorProps {
   categoryKeys: string[];
   presetCategoryLabels: Record<string, string>;
   onPresetChange: (value: string) => void;
+  onUniversalPresetSelect?: (preset: UniversalProviderPreset) => void;
+  onManageUniversalProviders?: () => void;
   category?: ProviderCategory; // 当前选中的分类
 }
 
@@ -27,6 +34,8 @@ export function ProviderPresetSelector({
   categoryKeys,
   presetCategoryLabels,
   onPresetChange,
+  onUniversalPresetSelect,
+  onManageUniversalProviders,
   category,
 }: ProviderPresetSelectorProps) {
   const { t } = useTranslation();
@@ -164,6 +173,49 @@ export function ProviderPresetSelector({
           });
         })}
       </div>
+
+      {/* 统一供应商预设（新的一行） */}
+      {onUniversalPresetSelect && universalProviderPresets.length > 0 && (
+        <>
+          <div className="flex flex-wrap items-center gap-2">
+            {universalProviderPresets.map((preset) => (
+              <button
+                key={`universal-${preset.providerType}`}
+                type="button"
+                onClick={() => onUniversalPresetSelect(preset)}
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-accent text-muted-foreground hover:bg-accent/80 relative"
+                title={t("universalProvider.hint", {
+                  defaultValue:
+                    "跨应用统一配置，自动同步到 Claude/Codex/Gemini",
+                })}
+              >
+                <ProviderIcon icon={preset.icon} name={preset.name} size={14} />
+                {preset.name}
+                <span className="absolute -top-1 -right-1 flex items-center gap-0.5 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 px-1.5 py-0.5 text-[10px] font-bold text-white shadow-md">
+                  <Layers className="h-2.5 w-2.5" />
+                </span>
+              </button>
+            ))}
+            {/* 管理统一供应商按钮 */}
+            {onManageUniversalProviders && (
+              <button
+                type="button"
+                onClick={onManageUniversalProviders}
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-accent text-muted-foreground hover:bg-accent/80"
+                title={t("universalProvider.manage", {
+                  defaultValue: "管理统一供应商",
+                })}
+              >
+                <Settings2 className="h-4 w-4" />
+                {t("universalProvider.manage", {
+                  defaultValue: "管理",
+                })}
+              </button>
+            )}
+          </div>
+        </>
+      )}
+
       <p className="text-xs text-muted-foreground">{getCategoryHint()}</p>
     </div>
   );