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

@@ -1,17 +1,23 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Plus } from "lucide-react";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { FullScreenPanel } from "@/components/common/FullScreenPanel";
-import type { Provider, CustomEndpoint } from "@/types";
+import type { Provider, CustomEndpoint, UniversalProvider } from "@/types";
 import type { AppId } from "@/lib/api";
+import { universalProvidersApi } from "@/lib/api";
 import {
   ProviderForm,
   type ProviderFormValues,
 } from "@/components/providers/forms/ProviderForm";
+import { UniversalProviderFormModal } from "@/components/universal/UniversalProviderFormModal";
+import { UniversalProviderPanel } from "@/components/universal";
 import { providerPresets } from "@/config/claudeProviderPresets";
 import { codexProviderPresets } from "@/config/codexProviderPresets";
 import { geminiProviderPresets } from "@/config/geminiProviderPresets";
+import type { UniversalProviderPreset } from "@/config/universalProviderPresets";
 
 interface AddProviderDialogProps {
   open: boolean;
@@ -27,6 +33,46 @@ export function AddProviderDialog({
   onSubmit,
 }: AddProviderDialogProps) {
   const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useState<"app-specific" | "universal">(
+    "app-specific",
+  );
+  const [universalFormOpen, setUniversalFormOpen] = useState(false);
+  const [selectedUniversalPreset, setSelectedUniversalPreset] =
+    useState<UniversalProviderPreset | null>(null);
+
+  // Handle universal provider save
+  const handleUniversalProviderSave = useCallback(
+    async (provider: UniversalProvider) => {
+      try {
+        await universalProvidersApi.upsert(provider);
+        toast.success(
+          t("universalProvider.addSuccess", {
+            defaultValue: "统一供应商添加成功",
+          }),
+        );
+        setUniversalFormOpen(false);
+        setSelectedUniversalPreset(null);
+        onOpenChange(false);
+      } catch (error) {
+        console.error(
+          "[AddProviderDialog] Failed to save universal provider",
+          error,
+        );
+        toast.error(
+          t("universalProvider.addFailed", {
+            defaultValue: "统一供应商添加失败",
+          }),
+        );
+      }
+    },
+    [t, onOpenChange],
+  );
+
+  // Close universal form and return to main dialog
+  const handleUniversalFormClose = useCallback(() => {
+    setUniversalFormOpen(false);
+    setSelectedUniversalPreset(null);
+  }, []);
 
   const handleSubmit = useCallback(
     async (values: ProviderFormValues) => {
@@ -156,46 +202,86 @@ export function AddProviderDialog({
     [appId, onSubmit, onOpenChange],
   );
 
-  const submitLabel =
-    appId === "claude"
-      ? t("provider.addClaudeProvider")
-      : appId === "codex"
-        ? t("provider.addCodexProvider")
-        : t("provider.addGeminiProvider");
-
-  const footer = (
-    <>
-      <Button
-        variant="outline"
-        onClick={() => onOpenChange(false)}
-        className="border-border/20 hover:bg-accent hover:text-accent-foreground"
-      >
-        {t("common.cancel")}
-      </Button>
-      <Button
-        type="submit"
-        form="provider-form"
-        className="bg-primary text-primary-foreground hover:bg-primary/90"
-      >
-        <Plus className="h-4 w-4 mr-2" />
-        {t("common.add")}
-      </Button>
-    </>
-  );
+  // 动态 footer：根据当前 Tab 显示不同按钮
+  const footer =
+    activeTab === "app-specific" ? (
+      <>
+        <Button
+          variant="outline"
+          onClick={() => onOpenChange(false)}
+          className="border-border/20 hover:bg-accent hover:text-accent-foreground"
+        >
+          {t("common.cancel")}
+        </Button>
+        <Button
+          type="submit"
+          form="provider-form"
+          className="bg-primary text-primary-foreground hover:bg-primary/90"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          {t("common.add")}
+        </Button>
+      </>
+    ) : (
+      <>
+        <Button
+          variant="outline"
+          onClick={() => onOpenChange(false)}
+          className="border-border/20 hover:bg-accent hover:text-accent-foreground"
+        >
+          {t("common.cancel")}
+        </Button>
+        <Button
+          onClick={() => setUniversalFormOpen(true)}
+          className="bg-primary text-primary-foreground hover:bg-primary/90"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          {t("universalProvider.add")}
+        </Button>
+      </>
+    );
 
   return (
     <FullScreenPanel
       isOpen={open}
-      title={submitLabel}
+      title={t("provider.addNewProvider")}
       onClose={() => onOpenChange(false)}
       footer={footer}
     >
-      <ProviderForm
-        appId={appId}
-        submitLabel={t("common.add")}
-        onSubmit={handleSubmit}
-        onCancel={() => onOpenChange(false)}
-        showButtons={false}
+      <Tabs
+        value={activeTab}
+        onValueChange={(v) => setActiveTab(v as "app-specific" | "universal")}
+      >
+        <TabsList className="grid w-full grid-cols-2 mb-6">
+          <TabsTrigger value="app-specific">
+            {t(`apps.${appId}`)} {t("provider.tabProvider")}
+          </TabsTrigger>
+          <TabsTrigger value="universal">
+            {t("provider.tabUniversal")}
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="app-specific" className="mt-0">
+          <ProviderForm
+            appId={appId}
+            submitLabel={t("common.add")}
+            onSubmit={handleSubmit}
+            onCancel={() => onOpenChange(false)}
+            showButtons={false}
+          />
+        </TabsContent>
+
+        <TabsContent value="universal" className="mt-0">
+          <UniversalProviderPanel />
+        </TabsContent>
+      </Tabs>
+
+      {/* Universal Provider Form Modal */}
+      <UniversalProviderFormModal
+        isOpen={universalFormOpen}
+        onClose={handleUniversalFormClose}
+        onSave={handleUniversalProviderSave}
+        initialPreset={selectedUniversalPreset}
       />
     </FullScreenPanel>
   );