From ed59420a83258d89773d3422089d953e6cb329ed Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 16 Nov 2025 16:50:07 +0800
Subject: [PATCH] feat(mcp): enhance form UX with default apps and JSON
 formatter

- Enable all apps (Claude, Codex, Gemini) by default when adding MCP servers
- Improve config label with clearer wording: "Full JSON configuration or use [Config Wizard]"
- Add JSON format button to beautify configuration with 2-space indentation
- Update tests to reflect new default behavior
- Clean up redundant explicit prop passing

This provides a more streamlined experience by enabling all apps out of the box
and making it easier to format JSON configurations.
---
 src/components/mcp/McpFormModal.tsx    | 46 ++++++++++++++++++++++----
 src/components/mcp/UnifiedMcpPanel.tsx |  1 -
 src/i18n/locales/en.json               |  2 ++
 src/i18n/locales/zh.json               |  2 ++
 tests/components/McpFormModal.test.tsx | 23 +++++++++++--
 5 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/src/components/mcp/McpFormModal.tsx b/src/components/mcp/McpFormModal.tsx
index 3361737..5da9460 100644
--- a/src/components/mcp/McpFormModal.tsx
+++ b/src/components/mcp/McpFormModal.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { Save, Plus, AlertCircle, ChevronDown, ChevronUp } from "lucide-react";
+import { Save, Plus, AlertCircle, ChevronDown, ChevronUp, Wand2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -27,6 +27,7 @@ import {
   mcpServerToToml,
 } from "@/utils/tomlUtils";
 import { normalizeTomlText } from "@/utils/textNormalization";
+import { formatJSON } from "@/utils/formatters";
 import { useMcpValidation } from "./useMcpValidation";
 import { useUpsertMcpServer } from "@/hooks/useMcp";
 
@@ -37,7 +38,7 @@ interface McpFormModalProps {
   onClose: () => void;
   existingIds?: string[];
   defaultFormat?: "json" | "toml"; // 默认配置格式（可选，默认为 JSON）
-  defaultEnabledApps?: AppId[]; // 默认启用到哪些应用（可选，默认为 Claude）
+  defaultEnabledApps?: AppId[]; // 默认启用到哪些应用（可选，默认为全部应用）
 }
 
 /**
@@ -52,7 +53,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
   onClose,
   existingIds = [],
   defaultFormat = "json",
-  defaultEnabledApps = ["claude"],
+  defaultEnabledApps = ["claude", "codex", "gemini"],
 }) => {
   const { t } = useTranslation();
   const { formatTomlError, validateTomlConfig, validateJsonConfig } =
@@ -251,6 +252,24 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
     setConfigError("");
   };
 
+  const handleFormatJson = () => {
+    if (!formConfig.trim()) return;
+
+    try {
+      const formatted = formatJSON(formConfig);
+      setFormConfig(formatted);
+      toast.success(t("common.formatSuccess"));
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      toast.error(
+        t("common.formatError", {
+          error: errorMessage,
+        }),
+      );
+    }
+  };
+
   const handleWizardApply = (title: string, json: string) => {
     setFormId(title);
     if (!formName.trim()) {
@@ -632,11 +651,11 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
 
             {/* 配置输入框（根据格式显示 JSON 或 TOML） */}
             <div>
-              <div className="flex items-center justify-between mb-2">
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              <div className="flex items-baseline gap-1 mb-2">
+                <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
                   {useToml
-                    ? t("mcp.form.tomlConfig")
-                    : t("mcp.form.jsonConfig")}
+                    ? t("mcp.form.tomlConfigOrPrefix")
+                    : t("mcp.form.jsonConfigOrPrefix")}
                 </label>
                 {(isEditing || selectedPreset === -1) && (
                   <button
@@ -658,6 +677,19 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                 value={formConfig}
                 onChange={(e) => handleConfigChange(e.target.value)}
               />
+              {/* 格式化按钮（仅 JSON 模式） */}
+              {!useToml && (
+                <div className="flex items-center justify-between mt-2">
+                  <button
+                    type="button"
+                    onClick={handleFormatJson}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                  >
+                    <Wand2 className="w-3.5 h-3.5" />
+                    {t("common.format")}
+                  </button>
+                </div>
+              )}
               {configError && (
                 <div className="flex items-center gap-2 mt-2 text-red-500 dark:text-red-400 text-sm">
                   <AlertCircle size={16} />
diff --git a/src/components/mcp/UnifiedMcpPanel.tsx b/src/components/mcp/UnifiedMcpPanel.tsx
index ab96746..b0134ad 100644
--- a/src/components/mcp/UnifiedMcpPanel.tsx
+++ b/src/components/mcp/UnifiedMcpPanel.tsx
@@ -197,7 +197,6 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
           }
           existingIds={serversMap ? Object.keys(serversMap) : []}
           defaultFormat="json"
-          defaultEnabledApps={["claude"]} // 默认启用 Claude
           onSave={async () => {
             setIsFormOpen(false);
             setEditingId(null);
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 8fa2f60..ed9ef02 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -469,6 +469,8 @@
       "docsPlaceholder": "https://example.com/docs",
       "additionalInfo": "Additional Info",
       "jsonConfig": "JSON Configuration",
+      "jsonConfigOrPrefix": "Full JSON configuration or use",
+      "tomlConfigOrPrefix": "Full TOML configuration or use",
       "jsonPlaceholder": "{\n  \"type\": \"stdio\",\n  \"command\": \"uvx\",\n  \"args\": [\"mcp-server-fetch\"]\n}",
       "tomlConfig": "TOML Configuration",
       "tomlPlaceholder": "type = \"stdio\"\ncommand = \"uvx\"\nargs = [\"mcp-server-fetch\"]",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index 24b397d..7ce7d27 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -469,6 +469,8 @@
       "docsPlaceholder": "https://example.com/docs",
       "additionalInfo": "附加信息",
       "jsonConfig": "JSON 配置",
+      "jsonConfigOrPrefix": "完整的 JSON 配置或者使用",
+      "tomlConfigOrPrefix": "完整的 TOML 配置或者使用",
       "jsonPlaceholder": "{\n  \"type\": \"stdio\",\n  \"command\": \"uvx\",\n  \"args\": [\"mcp-server-fetch\"]\n}",
       "tomlConfig": "TOML 配置",
       "tomlPlaceholder": "type = \"stdio\"\ncommand = \"uvx\"\nargs = [\"mcp-server-fetch\"]",
diff --git a/tests/components/McpFormModal.test.tsx b/tests/components/McpFormModal.test.tsx
index af211ac..4f75237 100644
--- a/tests/components/McpFormModal.test.tsx
+++ b/tests/components/McpFormModal.test.tsx
@@ -139,7 +139,6 @@ describe("McpFormModal", () => {
         onClose={onClose}
         existingIds={[]}
         defaultFormat="json"
-        defaultEnabledApps={["claude"]}
         {...rest}
       />,
     );
@@ -211,8 +210,8 @@ describe("McpFormModal", () => {
       },
       apps: {
         claude: true,
-        codex: false,
-        gemini: false,
+        codex: true,
+        gemini: true,
       },
     });
     expect(onSave).toHaveBeenCalledTimes(1);
@@ -291,6 +290,11 @@ command = "run"
   it("TOML 模式下缺少命令时展示错误提示并阻止提交", async () => {
     const { onSave } = renderForm({ defaultFormat: "toml" });
 
+    // 填写 ID 字段
+    fireEvent.change(screen.getByPlaceholderText("mcp.form.titlePlaceholder"), {
+      target: { value: "test-toml" },
+    });
+
     const configTextarea = screen.getByPlaceholderText(
       "mcp.form.tomlPlaceholder",
     ) as HTMLTextAreaElement;
@@ -317,6 +321,7 @@ type = "stdio"
       enabled: true,
       description: "Old desc",
       server: { type: "stdio", command: "old" },
+      apps: { claude: true, codex: false, gemini: false },
     } as McpServer;
 
     const { onSave } = renderForm({
@@ -371,6 +376,18 @@ type = "stdio"
     expect(claudeCheckbox.checked).toBe(true);
     fireEvent.click(claudeCheckbox);
 
+    const codexCheckbox = screen.getByLabelText(
+      "mcp.unifiedPanel.apps.codex",
+    ) as HTMLInputElement;
+    expect(codexCheckbox.checked).toBe(true);
+    fireEvent.click(codexCheckbox);
+
+    const geminiCheckbox = screen.getByLabelText(
+      "mcp.unifiedPanel.apps.gemini",
+    ) as HTMLInputElement;
+    expect(geminiCheckbox.checked).toBe(true);
+    fireEvent.click(geminiCheckbox);
+
     fireEvent.click(screen.getByText("common.add"));
 
     await waitFor(() => expect(upsertMock).toHaveBeenCalledTimes(1));