diff --git a/backend/app/agent/factory/browser.py b/backend/app/agent/factory/browser.py
index 4aa9f9a00..c825378f3 100644
--- a/backend/app/agent/factory/browser.py
+++ b/backend/app/agent/factory/browser.py
@@ -25,7 +25,10 @@
     attach_remote_sub_agent_if_enabled,
 )
 from app.agent.listen_chat_agent import logger
-from app.agent.prompt import BROWSER_SYS_PROMPT
+from app.agent.prompt import (
+    BROWSER_SYS_PROMPT,
+    append_connected_app_mcp_notice,
+)
 from app.agent.toolkit.human_toolkit import HumanToolkit
 from app.agent.toolkit.hybrid_browser_toolkit import HybridBrowserToolkit
 
@@ -382,6 +385,7 @@ def browser_agent(
         now_str=NOW_STR,
         external_browser_notice=external_browser_notice,
     )
+    system_message = append_connected_app_mcp_notice(system_message)
     system_message = attach_remote_sub_agent_if_enabled(
         options=options,
         agent_name=Agents.browser_agent,
diff --git a/backend/app/agent/factory/developer.py b/backend/app/agent/factory/developer.py
index 6cd1afbe2..53b6552e0 100644
--- a/backend/app/agent/factory/developer.py
+++ b/backend/app/agent/factory/developer.py
@@ -22,7 +22,10 @@
     attach_remote_sub_agent_if_enabled,
 )
 from app.agent.listen_chat_agent import logger
-from app.agent.prompt import DEVELOPER_SYS_PROMPT
+from app.agent.prompt import (
+    DEVELOPER_SYS_PROMPT,
+    append_connected_app_mcp_notice,
+)
 from app.agent.toolkit.human_toolkit import HumanToolkit
 
 # TODO: Remove NoteTakingToolkit and use TerminalToolkit instead
@@ -128,6 +131,7 @@ async def developer_agent(
         working_directory=working_directory,
         now_str=NOW_STR,
     )
+    system_message = append_connected_app_mcp_notice(system_message)
     system_message = attach_remote_sub_agent_if_enabled(
         options=options,
         agent_name=Agents.developer_agent,
diff --git a/backend/app/agent/factory/document.py b/backend/app/agent/factory/document.py
index 709e2f35d..83b973530 100644
--- a/backend/app/agent/factory/document.py
+++ b/backend/app/agent/factory/document.py
@@ -21,7 +21,10 @@
     attach_remote_sub_agent_if_enabled,
 )
 from app.agent.listen_chat_agent import logger
-from app.agent.prompt import DOCUMENT_SYS_PROMPT
+from app.agent.prompt import (
+    DOCUMENT_SYS_PROMPT,
+    append_connected_app_mcp_notice,
+)
 from app.agent.toolkit.excel_toolkit import ExcelToolkit
 from app.agent.toolkit.file_write_toolkit import FileToolkit
 from app.agent.toolkit.google_drive_mcp_toolkit import GoogleDriveMCPToolkit
@@ -154,6 +157,7 @@ async def document_agent(
         working_directory=working_directory,
         now_str=NOW_STR,
     )
+    system_message = append_connected_app_mcp_notice(system_message)
     system_message = attach_remote_sub_agent_if_enabled(
         options=options,
         agent_name=Agents.document_agent,
diff --git a/backend/app/agent/factory/mcp.py b/backend/app/agent/factory/mcp.py
index d066b1586..c5832c5bb 100644
--- a/backend/app/agent/factory/mcp.py
+++ b/backend/app/agent/factory/mcp.py
@@ -19,7 +19,7 @@
     remote_sub_agent_enabled,
 )
 from app.agent.listen_chat_agent import logger
-from app.agent.prompt import MCP_SYS_PROMPT
+from app.agent.prompt import MCP_SYS_PROMPT, append_connected_app_mcp_notice
 from app.agent.toolkit.human_toolkit import HumanToolkit
 from app.agent.toolkit.mcp_search_toolkit import McpSearchToolkit
 from app.agent.tools import get_mcp_tools
@@ -73,7 +73,7 @@ async def mcp_agent(options: Chat):
         working_directory=working_directory,
         tools=tools,
         tool_names=tool_names,
-        system_message=MCP_SYS_PROMPT,
+        system_message=append_connected_app_mcp_notice(MCP_SYS_PROMPT),
         local_tool_description="local MCP or search tools",
         message_integration=message_integration,
     )
diff --git a/backend/app/agent/factory/multi_modal.py b/backend/app/agent/factory/multi_modal.py
index 9b13c8432..56d244460 100644
--- a/backend/app/agent/factory/multi_modal.py
+++ b/backend/app/agent/factory/multi_modal.py
@@ -23,7 +23,10 @@
     attach_remote_sub_agent_if_enabled,
 )
 from app.agent.listen_chat_agent import logger
-from app.agent.prompt import MULTI_MODAL_SYS_PROMPT
+from app.agent.prompt import (
+    MULTI_MODAL_SYS_PROMPT,
+    append_connected_app_mcp_notice,
+)
 from app.agent.toolkit.audio_analysis_toolkit import AudioAnalysisToolkit
 from app.agent.toolkit.human_toolkit import HumanToolkit
 
@@ -202,6 +205,7 @@ def multi_modal_agent(
         working_directory=working_directory,
         now_str=NOW_STR,
     )
+    system_message = append_connected_app_mcp_notice(system_message)
     system_message = attach_remote_sub_agent_if_enabled(
         options=options,
         agent_name=Agents.multi_modal_agent,
diff --git a/backend/app/agent/factory/question_confirm.py b/backend/app/agent/factory/question_confirm.py
index 3461f5238..dba387810 100644
--- a/backend/app/agent/factory/question_confirm.py
+++ b/backend/app/agent/factory/question_confirm.py
@@ -13,7 +13,10 @@
 # ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 from app.agent.agent_model import agent_model
-from app.agent.prompt import QUESTION_CONFIRM_SYS_PROMPT
+from app.agent.prompt import (
+    QUESTION_CONFIRM_SYS_PROMPT,
+    append_connected_app_mcp_notice,
+)
 from app.agent.utils import NOW_STR
 from app.model.chat import Chat
 
@@ -21,6 +24,8 @@
 def question_confirm_agent(options: Chat):
     return agent_model(
         "question_confirm_agent",
-        QUESTION_CONFIRM_SYS_PROMPT.format(now_str=NOW_STR),
+        append_connected_app_mcp_notice(
+            QUESTION_CONFIRM_SYS_PROMPT.format(now_str=NOW_STR)
+        ),
         options,
     )
diff --git a/backend/app/agent/factory/single_agent.py b/backend/app/agent/factory/single_agent.py
index ac5e3a747..229c50f4c 100644
--- a/backend/app/agent/factory/single_agent.py
+++ b/backend/app/agent/factory/single_agent.py
@@ -21,7 +21,10 @@
 
 from app.agent.agent_model import agent_model
 from app.agent.factory.toolkit_assembler import assemble_single_agent_toolkits
-from app.agent.prompt import SINGLE_AGENT_SYS_PROMPT
+from app.agent.prompt import (
+    SINGLE_AGENT_SYS_PROMPT,
+    append_connected_app_mcp_notice,
+)
 from app.agent.utils import NOW_STR
 from app.hands.interface import IHands
 from app.model.chat import Chat
@@ -70,6 +73,7 @@ async def single_agent(
         working_directory=working_directory,
         now_str=NOW_STR,
     )
+    system_message = append_connected_app_mcp_notice(system_message)
 
     agent = agent_model(
         Agents.single_agent,
diff --git a/backend/app/agent/factory/social_media.py b/backend/app/agent/factory/social_media.py
index d1cb32349..6b42ea031 100644
--- a/backend/app/agent/factory/social_media.py
+++ b/backend/app/agent/factory/social_media.py
@@ -19,7 +19,10 @@
     attach_remote_sub_agent_if_enabled,
 )
 from app.agent.listen_chat_agent import logger
-from app.agent.prompt import SOCIAL_MEDIA_SYS_PROMPT
+from app.agent.prompt import (
+    SOCIAL_MEDIA_SYS_PROMPT,
+    append_connected_app_mcp_notice,
+)
 from app.agent.toolkit.google_calendar_toolkit import GoogleCalendarToolkit
 from app.agent.toolkit.google_gmail_mcp_toolkit import GoogleGmailMCPToolkit
 from app.agent.toolkit.human_toolkit import HumanToolkit
@@ -110,6 +113,7 @@ async def social_media_agent(options: Chat):
     system_message = SOCIAL_MEDIA_SYS_PROMPT.format(
         working_directory=working_directory, now_str=NOW_STR
     )
+    system_message = append_connected_app_mcp_notice(system_message)
     system_message = attach_remote_sub_agent_if_enabled(
         options=options,
         agent_name=Agents.social_media_agent,
diff --git a/backend/app/agent/prompt.py b/backend/app/agent/prompt.py
index 7ee1f905b..127551f0f 100644
--- a/backend/app/agent/prompt.py
+++ b/backend/app/agent/prompt.py
@@ -109,6 +109,29 @@ def build_remote_sub_agent_planning_notice() -> str:
     return REMOTE_SUB_AGENT_PLANNING_NOTICE
 
 
+CONNECTED_APP_MCP_NOTICE = """\
+<connected_app_tools>
+When the user asks to query or operate a third-party app that may already be
+connected, use available MCP or connector tools before browser/manual-login
+flows. Examples include Clerk, Slack, Gmail, Notion, GitHub, Google Calendar,
+Google Drive, Jira, Linear, Lark, Airtable, HubSpot, and similar SaaS apps.
+
+- Search or list the app's available actions first.
+- Execute read/list/search/count actions directly when the user's intent is
+  clear and all required input is available or optional.
+- Execute write/send/update/delete/admin actions only when the user explicitly
+  asked for that change and the target details are clear.
+- Ask for dashboard links, API keys, or manual browser login only after the
+  connector tools show the app/account/action is unavailable or required input
+  is missing.
+</connected_app_tools>
+"""
+
+
+def append_connected_app_mcp_notice(system_message: str) -> str:
+    return f"{system_message.rstrip()}\n\n{CONNECTED_APP_MCP_NOTICE}"
+
+
 SOCIAL_MEDIA_SYS_PROMPT = """\
 You are a Social Media Management Assistant with comprehensive capabilities
 across multiple platforms. You MUST use the `send_message_to_user` tool to
diff --git a/backend/app/service/chat_service.py b/backend/app/service/chat_service.py
index 2b977df8c..1ebc1f08b 100644
--- a/backend/app/service/chat_service.py
+++ b/backend/app/service/chat_service.py
@@ -49,7 +49,10 @@
     remote_sub_agent_enabled,
 )
 from app.agent.listen_chat_agent import ListenChatAgent
-from app.agent.prompt import build_remote_sub_agent_planning_notice
+from app.agent.prompt import (
+    append_connected_app_mcp_notice,
+    build_remote_sub_agent_planning_notice,
+)
 from app.agent.toolkit.human_toolkit import HumanToolkit
 from app.agent.toolkit.note_taking_toolkit import NoteTakingToolkit
 from app.agent.toolkit.skill_toolkit import SkillToolkit
@@ -2867,6 +2870,9 @@ async def new_agent_model(
 For any date-related tasks, you MUST use this as \
 the current date.
 """
+    enhanced_description = append_connected_app_mcp_notice(
+        enhanced_description
+    )
     message_integration = ToolkitMessageIntegration(
         message_handler=HumanToolkit(
             options.project_id, data.name
diff --git a/src/api/connectors.ts b/src/api/connectors.ts
new file mode 100644
index 000000000..dd3d41350
--- /dev/null
+++ b/src/api/connectors.ts
@@ -0,0 +1,338 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import {
+  proxyFetchDelete,
+  proxyFetchGet,
+  proxyFetchPost,
+  proxyFetchPut,
+} from '@/api/http';
+
+export type ConnectorAuthType =
+  | 'no_auth'
+  | 'api_key'
+  | 'custom_credential'
+  | 'oauth2'
+  | string;
+
+export interface ConnectorCredentialField {
+  key: string;
+  label: string;
+  inputType: 'text' | 'password' | 'textarea' | 'json' | string;
+  required: boolean;
+  secret: boolean;
+  placeholder?: string | null;
+  description?: string | null;
+}
+
+export interface ConnectorAuthDefinition {
+  type: ConnectorAuthType;
+  label?: string | null;
+  placeholder?: string | null;
+  description?: string | null;
+  extraFields?: ConnectorCredentialField[];
+  fields?: ConnectorCredentialField[];
+  scopes?: string[];
+  clientConfigFields?: ConnectorCredentialField[];
+}
+
+export interface ConnectorAction {
+  id?: string;
+  name?: string;
+  description?: string;
+}
+
+export interface ConnectorConnection {
+  id?: string | null;
+  service: string;
+  connectionName: string;
+  authType: ConnectorAuthType;
+  configured: boolean;
+  virtual: boolean;
+  default: boolean;
+  profile?: {
+    displayName?: string | null;
+    grantedScopes?: string[];
+  } | null;
+}
+
+export interface ConnectorProvider {
+  service: string;
+  displayName?: string;
+  description?: string | null;
+  iconUrl?: string | null;
+  homepageUrl?: string | null;
+  categories?: string[];
+  authTypes?: ConnectorAuthType[];
+  auth?: ConnectorAuthDefinition[];
+  action_count?: number;
+  locally_executable_action_count?: number;
+  catalog_only_action_count?: number;
+  recommended?: boolean;
+  sort_rank?: number | null;
+  connection?: ConnectorConnection | null;
+  actions?: ConnectorAction[];
+}
+
+export interface ConnectorProvidersResponse {
+  enabled: boolean;
+  source: 'connector_gateway';
+  provider_count: number;
+  filtered_count: number;
+  connected_count: number;
+  page: number;
+  page_size: number;
+  total_pages: number;
+  providers: ConnectorProvider[];
+}
+
+export interface ConnectorProviderResponse {
+  enabled: boolean;
+  source: 'connector_gateway';
+  provider: ConnectorProvider;
+}
+
+export interface ConnectProviderRequest {
+  auth_type: ConnectorAuthType;
+  values?: Record<string, unknown>;
+  connection_name?: string;
+}
+
+export interface ConnectorOAuthAuthorization {
+  service: string;
+  authorizationUrl: string;
+  state?: string;
+}
+
+export interface FetchConnectorProvidersOptions {
+  page?: number;
+  pageSize?: number;
+  query?: string;
+}
+
+export function providerLabel(provider: ConnectorProvider): string {
+  return provider.displayName || provider.service;
+}
+
+export function isConnectedProvider(
+  provider: ConnectorProvider | null | undefined
+): boolean {
+  const connection = provider?.connection;
+  return connection?.configured === true && connection.virtual !== true;
+}
+
+export interface FetchConnectorProvidersRequestOptions {
+  /** Skip the short-lived list cache and force a network fetch. */
+  bypassCache?: boolean;
+}
+
+const PROVIDERS_LIST_CACHE_TTL_MS = 60_000;
+
+type ProvidersListCacheEntry = {
+  expiresAt: number;
+  data: ConnectorProvidersResponse;
+};
+
+const providersListCache = new Map<string, ProvidersListCacheEntry>();
+const providersListInflight = new Map<
+  string,
+  Promise<ConnectorProvidersResponse>
+>();
+
+function providersListCacheKey(
+  options: FetchConnectorProvidersOptions = {}
+): string {
+  return [
+    options.page || 1,
+    options.pageSize || 24,
+    options.query?.trim() || '',
+  ].join('::');
+}
+
+function normalizeProvidersResponse(
+  response: any,
+  options: FetchConnectorProvidersOptions = {}
+): ConnectorProvidersResponse {
+  const providers = Array.isArray(response?.providers)
+    ? response.providers
+    : [];
+  const providerCount =
+    typeof response?.provider_count === 'number'
+      ? response.provider_count
+      : providers.length;
+  const filteredCount =
+    typeof response?.filtered_count === 'number'
+      ? response.filtered_count
+      : providerCount;
+  const pageSize =
+    typeof response?.page_size === 'number'
+      ? response.page_size
+      : options.pageSize || 24;
+  return {
+    enabled: response?.enabled === true,
+    source: 'connector_gateway',
+    provider_count: providerCount,
+    filtered_count: filteredCount,
+    connected_count:
+      typeof response?.connected_count === 'number'
+        ? response.connected_count
+        : 0,
+    page:
+      typeof response?.page === 'number' ? response.page : options.page || 1,
+    page_size: pageSize,
+    total_pages:
+      typeof response?.total_pages === 'number'
+        ? response.total_pages
+        : Math.max(1, Math.ceil(filteredCount / pageSize)),
+    providers,
+  };
+}
+
+/** Synchronous cache read for instant UI hydration. */
+export function getCachedConnectorProviders(
+  options: FetchConnectorProvidersOptions = {}
+): ConnectorProvidersResponse | null {
+  const entry = providersListCache.get(providersListCacheKey(options));
+  if (!entry || entry.expiresAt <= Date.now()) return null;
+  return entry.data;
+}
+
+export function invalidateConnectorProvidersCache(): void {
+  providersListCache.clear();
+  providersListInflight.clear();
+}
+
+/** Warm the list cache without waiting for dialog open. */
+export function prefetchConnectorProviders(
+  options: FetchConnectorProvidersOptions = {}
+): Promise<ConnectorProvidersResponse> {
+  return fetchConnectorProviders(options);
+}
+
+export async function fetchConnectorProviders(
+  options: FetchConnectorProvidersOptions = {},
+  requestOptions: FetchConnectorProvidersRequestOptions = {}
+): Promise<ConnectorProvidersResponse> {
+  const cacheKey = providersListCacheKey(options);
+  if (!requestOptions.bypassCache) {
+    const cached = getCachedConnectorProviders(options);
+    if (cached) return cached;
+  }
+  // Always coalesce concurrent identical requests, even when bypassing cache.
+  const inflight = providersListInflight.get(cacheKey);
+  if (inflight) return inflight;
+
+  const request = (async () => {
+    const params: Record<string, string | number> = {
+      page: options.page || 1,
+      page_size: options.pageSize || 24,
+    };
+    const query = options.query?.trim();
+    if (query) {
+      params.q = query;
+    }
+    const response = await proxyFetchGet(
+      '/api/v1/connectors/providers',
+      params
+    );
+    const normalized = normalizeProvidersResponse(response, options);
+    providersListCache.set(cacheKey, {
+      expiresAt: Date.now() + PROVIDERS_LIST_CACHE_TTL_MS,
+      data: normalized,
+    });
+    return normalized;
+  })();
+
+  providersListInflight.set(cacheKey, request);
+  try {
+    return await request;
+  } finally {
+    if (providersListInflight.get(cacheKey) === request) {
+      providersListInflight.delete(cacheKey);
+    }
+  }
+}
+
+/** Fetch every provider page and return only connected providers. */
+export async function fetchConnectedProviders(): Promise<ConnectorProvider[]> {
+  const pageSize = 60;
+  const first = await fetchConnectorProviders({ page: 1, pageSize });
+  let providers = first.providers;
+  const connectedPages = Math.ceil(
+    first.connected_count / (first.page_size || pageSize)
+  );
+  for (let page = 2; page <= connectedPages; page += 1) {
+    const response = await fetchConnectorProviders({
+      page,
+      pageSize: first.page_size || pageSize,
+    });
+    providers = providers.concat(response.providers);
+  }
+  const unique = new Map(
+    providers.map((provider) => [provider.service, provider])
+  );
+  return Array.from(unique.values()).filter(isConnectedProvider);
+}
+
+export async function fetchConnectorProvider(
+  service: string
+): Promise<ConnectorProviderResponse> {
+  const response = await proxyFetchGet(
+    `/api/v1/connectors/providers/${encodeURIComponent(service)}`
+  );
+  return {
+    enabled: response?.enabled === true,
+    source: 'connector_gateway',
+    provider: response?.provider,
+  };
+}
+
+export async function connectProvider(
+  service: string,
+  request: ConnectProviderRequest
+) {
+  return proxyFetchPut(
+    `/api/v1/connectors/connections/${encodeURIComponent(service)}`,
+    request
+  );
+}
+
+export async function disconnectProvider(
+  service: string,
+  connectionName?: string
+) {
+  return proxyFetchDelete(
+    `/api/v1/connectors/connections/${encodeURIComponent(service)}`,
+    connectionName ? { connection_name: connectionName } : undefined
+  );
+}
+
+export async function createConnectorOAuthAuthorization(
+  service: string,
+  connectionName?: string
+): Promise<ConnectorOAuthAuthorization> {
+  const response = await proxyFetchPost(
+    '/api/v1/connectors/oauth/authorizations',
+    {
+      service,
+      connection_name: connectionName,
+    }
+  );
+  const authorization = response?.authorization;
+  return {
+    service: authorization?.service || service,
+    authorizationUrl: authorization?.authorizationUrl || '',
+    state: authorization?.state,
+  };
+}
diff --git a/src/components/AddWorker/ToolSelect.tsx b/src/components/AddWorker/ToolSelect.tsx
index 2fbe8ad89..930cef73a 100644
--- a/src/components/AddWorker/ToolSelect.tsx
+++ b/src/components/AddWorker/ToolSelect.tsx
@@ -22,6 +22,7 @@ import {
 } from '@/api/http';
 import IntegrationList from '@/components/Dashboard/IntegrationList';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import {
   useIntegrationManagement,
   type IntegrationItem,
@@ -42,6 +43,7 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import { Checkbox } from '../ui/checkbox';
 import { Textarea } from '../ui/textarea';
 import { TooltipSimple } from '../ui/tooltip';
@@ -258,6 +260,7 @@ const ToolSelect = forwardRef<
   const host = useHost();
   const electronAPI = host?.electronAPI;
   const { t } = useTranslation();
+  const navigate = useNavigate();
   // state management - remove internal selected state, use parent passed initialSelectedTools
   const [keyword, setKeyword] = useState<string>('');
   const { email } = useAuthStore();
@@ -783,36 +786,22 @@ const ToolSelect = forwardRef<
       });
   }, [integrations, webInstalled, keyword]);
 
-  const webNotConnectedItems = useMemo(() => {
+  // Align with the Connectors page: only connected built-ins and enabled
+  // custom MCPs are selectable as agent tools.
+  const ownPicks = useMemo(() => {
     const kw = keyword.trim().toLowerCase();
-    return integrations
-      .filter((i: IntegrationItem) => !webInstalled[i.key])
-      .filter((i: IntegrationItem) => {
+    return userMcpList
+      .filter((opt) => Number(opt.status) === 1)
+      .filter((opt) => {
         if (!kw) return true;
-        const descStr = typeof i.desc === 'string' ? i.desc.toLowerCase() : '';
-        return (
-          (i.key || '').toLowerCase().includes(kw) ||
-          (i.name || '').toLowerCase().includes(kw) ||
-          descStr.includes(kw)
-        );
+        const name = String(opt.mcp_name || '').toLowerCase();
+        const desc = String(opt.mcp_desc || '').toLowerCase();
+        const key = String(opt.mcp_key || '').toLowerCase();
+        return name.includes(kw) || desc.includes(kw) || key.includes(kw);
       });
-  }, [integrations, webInstalled, keyword]);
-
-  const ownPicks = useMemo(() => {
-    const kw = keyword.trim().toLowerCase();
-    return userMcpList.filter((opt) => {
-      if (!kw) return true;
-      const name = String(opt.mcp_name || '').toLowerCase();
-      const desc = String(opt.mcp_desc || '').toLowerCase();
-      const key = String(opt.mcp_key || '').toLowerCase();
-      return name.includes(kw) || desc.includes(kw) || key.includes(kw);
-    });
   }, [userMcpList, keyword]);
 
-  const listHasItems =
-    webConnectedItems.length > 0 ||
-    webNotConnectedItems.length > 0 ||
-    ownPicks.length > 0;
+  const listHasItems = webConnectedItems.length > 0 || ownPicks.length > 0;
 
   const showSearchPlaceholder =
     keyword.length === 0 && (initialSelectedTools?.length ?? 0) === 0;
@@ -944,29 +933,21 @@ const ToolSelect = forwardRef<
                     </div>
                   </div>
                 )}
-                {webNotConnectedItems.length > 0 && (
-                  <div>
-                    <div className="px-2 py-1 text-body-sm font-medium text-ds-text-neutral-subtle-default">
-                      {t('setting.mcp-sidebar-not-connected')}
-                    </div>
-                    <IntegrationList
-                      className="!space-y-1.5"
-                      variant="select"
-                      onShowEnvConfig={onShowEnvConfig}
-                      addOption={addOption}
-                      items={webNotConnectedItems}
-                      translationNamespace="layout"
-                      selectWithCheckbox
-                      isIntegrationSelected={isIntegrationInAgentSelection}
-                      onToggleIntegration={handleToggleIntegrationForAgent}
-                    />
-                  </div>
-                )}
               </div>
             ) : (
-              <p className="break-words px-2 py-2 text-center text-body-md text-ds-text-neutral-muted-default">
-                {t('dashboard.no-results')}
-              </p>
+              <div className="flex flex-col items-center gap-1 px-2 py-2">
+                <p className="break-words text-center text-body-md text-ds-text-neutral-muted-default">
+                  {t('dashboard.no-results')}
+                </p>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  buttonContent="text"
+                  onClick={() => navigate('/history?tab=connectors')}
+                >
+                  {t('chat.input-attach-manage-connectors')}
+                </Button>
+              </div>
             )}
           </div>
         </div>
diff --git a/src/components/ChatBox/BottomBox/PickerPanel.tsx b/src/components/ChatBox/BottomBox/PickerPanel.tsx
index 7a19e4b2b..4ce5cc3d0 100644
--- a/src/components/ChatBox/BottomBox/PickerPanel.tsx
+++ b/src/components/ChatBox/BottomBox/PickerPanel.tsx
@@ -12,9 +12,14 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
+import { fetchConnectedProviders, providerLabel } from '@/api/connectors';
 import { proxyFetchGet } from '@/api/http';
 import ellipseIcon from '@/assets/mcp/Ellipse-25.svg';
 import { Button } from '@/components/ui/button';
+import {
+  useIntegrationManagement,
+  type IntegrationItem,
+} from '@/hooks/useIntegrationManagement';
 import { integrationLeadingIconUrl } from '@/lib/connectorIcons';
 import {
   RICH_CONNECTOR_STYLE_CLASSES,
@@ -24,6 +29,7 @@ import {
 } from '@/lib/richText';
 import { skillNameToDirName } from '@/lib/skillToolkit';
 import { cn } from '@/lib/utils';
+import { useServerCapabilityStore } from '@/store/serverCapabilityStore';
 import { useSkillsStore } from '@/store/skillsStore';
 import { Check, Plus, Wrench } from 'lucide-react';
 import { Fragment, useEffect, useMemo, useState, type ReactNode } from 'react';
@@ -38,6 +44,8 @@ export interface PickerItem {
   id: string;
   name: string;
   token: string;
+  /** Provider icon URL for hosted connector items. */
+  iconUrl?: string;
 }
 
 /** A labelled section within a picker (e.g. built-in vs. your own connectors). */
@@ -205,9 +213,10 @@ interface WiredPickerPanelProps {
 const EXCLUDED_BUILTIN_CONNECTORS = ['Search', 'RAG'];
 
 /**
- * Full connector list matching the Connectors settings page: built-in
- * integrations (`/api/v1/config/info`) plus the user's own MCPs
- * (`/api/v1/mcp/users`), shown as two labelled sections.
+ * Connected connectors only, matching the Connectors page sidebar: connected
+ * hosted connectors (when the Connector Gateway is enabled), connected built-in
+ * integrations (`/api/v1/config/info` + configs), and the user's enabled MCPs
+ * (`/api/v1/mcp/users`), shown as labelled sections.
  */
 export function ConnectorPickerPanel({
   inputValue,
@@ -215,10 +224,27 @@ export function ConnectorPickerPanel({
 }: WiredPickerPanelProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const [builtIn, setBuiltIn] = useState<PickerItem[]>([]);
+  const [builtInItems, setBuiltInItems] = useState<IntegrationItem[]>([]);
+  const [openItems, setOpenItems] = useState<PickerItem[]>([]);
   const [yourMcps, setYourMcps] = useState<PickerItem[]>([]);
   const [loading, setLoading] = useState(true);
 
+  const capabilities = useServerCapabilityStore((state) => state.capabilities);
+  const capabilityStatus = useServerCapabilityStore((state) => state.status);
+  const fetchCapabilities = useServerCapabilityStore(
+    (state) => state.fetchCapabilities
+  );
+  const gatewayEnabled =
+    capabilities.features.connector_gateway.enabled === true;
+
+  // Reuse the Connectors page's connected-state rules (OAuth tokens, config
+  // groups, Google Search defaults) instead of duplicating them here.
+  const { installed } = useIntegrationManagement(builtInItems);
+
+  useEffect(() => {
+    void fetchCapabilities();
+  }, [fetchCapabilities]);
+
   useEffect(() => {
     let cancelled = false;
     Promise.allSettled([
@@ -232,13 +258,15 @@ export function ConnectorPickerPanel({
           infoRes.value &&
           typeof infoRes.value === 'object'
         ) {
-          setBuiltIn(
+          setBuiltInItems(
             Object.keys(infoRes.value)
               .filter((key) => !EXCLUDED_BUILTIN_CONNECTORS.includes(key))
               .map((key) => ({
-                id: `builtin-${key}`,
+                key,
                 name: key,
-                token: connectorNameToToken(key),
+                desc: '',
+                env_vars: [],
+                onInstall: () => undefined,
               }))
           );
         }
@@ -247,11 +275,13 @@ export function ConnectorPickerPanel({
             ? usersRes.value
             : (usersRes.value?.items ?? []);
           setYourMcps(
-            list.map((item: { id: number; mcp_name: string }) => ({
-              id: `user-${item.id}`,
-              name: item.mcp_name,
-              token: connectorNameToToken(item.mcp_name),
-            }))
+            list
+              .filter((item: { status?: number }) => Number(item.status) === 1)
+              .map((item: { id: number; mcp_name: string }) => ({
+                id: `user-${item.id}`,
+                name: item.mcp_name,
+                token: connectorNameToToken(item.mcp_name),
+              }))
           );
         }
       })
@@ -263,7 +293,46 @@ export function ConnectorPickerPanel({
     };
   }, []);
 
+  useEffect(() => {
+    if (capabilityStatus !== 'ready' || !gatewayEnabled) {
+      setOpenItems([]);
+      return;
+    }
+    let cancelled = false;
+    fetchConnectedProviders()
+      .then((providers) => {
+        if (cancelled) return;
+        setOpenItems(
+          providers.map((provider) => ({
+            id: `open-${provider.service}`,
+            name: providerLabel(provider),
+            token: connectorNameToToken(providerLabel(provider)),
+            iconUrl: provider.iconUrl || undefined,
+          }))
+        );
+      })
+      .catch(() => {
+        if (!cancelled) setOpenItems([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [capabilityStatus, gatewayEnabled]);
+
+  const builtIn = useMemo(
+    () =>
+      builtInItems
+        .filter((item) => installed[item.key])
+        .map((item) => ({
+          id: `builtin-${item.key}`,
+          name: item.name,
+          token: connectorNameToToken(item.key),
+        })),
+    [builtInItems, installed]
+  );
+
   const groups: PickerGroup[] = [
+    { id: 'open', label: t('connectors.gateway-connectors'), items: openItems },
     {
       id: 'builtin',
       label: t('setting.mcp-sidebar-built-in'),
@@ -289,6 +358,13 @@ export function ConnectorPickerPanel({
         </span>
       )}
       renderLogo={(item) => {
+        if (item.id.startsWith('open-')) {
+          return item.iconUrl ? (
+            <img src={item.iconUrl} alt="" className="h-4 w-4 object-contain" />
+          ) : (
+            <img src={ellipseIcon} alt="" className="h-3 w-3" />
+          );
+        }
         if (!item.id.startsWith('builtin-')) {
           return (
             <Wrench size={16} className="text-ds-icon-neutral-muted-default" />
diff --git a/src/i18n/locales/ar/connectors.json b/src/i18n/locales/ar/connectors.json
new file mode 100644
index 000000000..cec69c494
--- /dev/null
+++ b/src/i18n/locales/ar/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "الموصلات",
+  "search-placeholder": "البحث في موصلاتك",
+  "browse": "تصفح الموصلات",
+  "add-custom": "إضافة موصل مخصص",
+  "retry": "إعادة المحاولة",
+  "your-connectors": "موصلاتك",
+  "no-matching": "لا توجد موصلات مطابقة.",
+  "count-one": "موصل",
+  "count-other": "موصلات",
+  "recommended": "موصلات موصى بها لك.",
+  "no-recommended": "لا توجد موصلات موصى بها متاحة.",
+  "gateway-unavailable": "الموصلات غير متاحة.",
+  "gateway-unavailable-desc": "لم يتم تمكين Connector Gateway في هذا النشر.",
+  "gateway-connectors": "الموصلات",
+  "source-open": "السحابة",
+  "source-built-in": "مدمج",
+  "source-local": "محلي",
+  "source-remote": "بعيد",
+  "load-built-in-failed": "تعذر تحميل الموصلات المدمجة",
+  "load-custom-failed": "تعذر تحميل الموصلات المخصصة",
+  "load-gateway-failed": "تعذر تحميل الموصلات",
+  "disconnected": "تم قطع اتصال {{name}}",
+  "disconnect-failed": "تعذر قطع اتصال الموصل",
+  "update-failed": "تعذر تحديث الموصل",
+  "status-save-failed-enabled": "تم تمكين الموصل، ولكن تعذر حفظ حالته. حدّث الصفحة وحاول مرة أخرى.",
+  "status-save-failed-disabled": "تم تعطيل الموصل، ولكن تعذر حفظ حالته. حدّث الصفحة وحاول مرة أخرى.",
+  "updated": "تم تحديث الموصل",
+  "save-failed": "تعذر حفظ الموصل",
+  "deleted": "تم حذف الموصل",
+  "delete-failed": "تعذر حذف الموصل",
+  "enable-connector": "تمكين الموصل",
+  "disable-connector": "تعطيل الموصل",
+  "more-actions": "المزيد من الإجراءات",
+  "open": "فتح",
+  "edit": "تعديل",
+  "delete": "حذف",
+  "connected-account": "الحساب المتصل",
+  "supported-actions": "الإجراءات المدعومة",
+  "supported-actions-count": "{{num}} من الإجراءات المدعومة",
+  "show-more": "عرض المزيد",
+  "show-less": "عرض أقل",
+  "provider-website": "موقع المزود",
+  "built-in-title": "موصل توافق محلي",
+  "built-in-desc": "يستخدم هذا الموصل بيئة التكامل المحلية في Eigent. يُعد Connector Gateway السوق الأساسي للتكاملات المستضافة الجديدة.",
+  "configuration": "الإعداد: {{vars}}",
+  "status": "الحالة",
+  "active": "نشط",
+  "disabled": "معطّل",
+  "server-url": "عنوان URL للخادم",
+  "not-configured": "غير معدّ",
+  "command": "الأمر",
+  "arguments": "الوسائط",
+  "requires": "يتطلب {{vars}}",
+  "notion-desc": "اتصل بمساحة عمل Notion.",
+  "google-calendar-desc": "إدارة أحداث Google Calendar وجداوله.",
+  "generic-desc": "ربط {{name}} بـ Eigent.",
+  "google-search": "بحث Google",
+  "google-search-desc": "ربط Google Custom Search بمهام التصفح والبحث.",
+  "notion-install-failed": "تعذر تثبيت Notion",
+  "google-calendar-install-failed": "تعذر تثبيت Google Calendar",
+  "search-connectors": "البحث عن موصلات",
+  "auth-api-key": "مفتاح API",
+  "auth-credential": "بيانات الاعتماد",
+  "auth-oauth": "OAuth",
+  "auth-none": "دون مصادقة",
+  "unnamed-action": "إجراء بلا اسم",
+  "try-again": "حاول مرة أخرى",
+  "no-gateway-found": "لم يتم العثور على موصلات.",
+  "no-built-in-found": "لم يتم العثور على موصلات مدمجة.",
+  "loading": "جارٍ التحميل…",
+  "updating": "جارٍ التحديث…",
+  "loading-more": "جارٍ تحميل المزيد…",
+  "new": "جديد",
+  "installed": "مثبّت",
+  "local-integration": "تكامل محلي",
+  "authentication": "المصادقة",
+  "oauth-title": "الاتصال باستخدام OAuth",
+  "oauth-desc": "سيفتح Eigent صفحة تفويض المزود. ستُكمل نافذة الحوار هذه التثبيت عند اكتمال التفويض.",
+  "oauth-scopes": "الأذونات المطلوبة: {{scopes}}",
+  "no-auth-desc": "لا يتطلب هذا الموصل بيانات اعتماد.",
+  "waiting-authorization": "في انتظار اكتمال التفويض…",
+  "authorization-started": "بدأ التفويض",
+  "installed-toast": "تم تثبيت {{name}}",
+  "no-authorization-url": "لم يُرجع الموصل عنوان URL للتفويض",
+  "authorization-pending": "لا يزال التفويض معلقًا. أكمله في نافذة المزود، ثم حاول مرة أخرى.",
+  "install-failed": "تعذر تثبيت الموصل",
+  "detail-load-failed": "تعذر تحميل تفاصيل الموصل",
+  "authorization-incomplete": "لم يكتمل التفويض بعد. أكمله في نافذة المزود ثم حدّث الحالة مرة أخرى.",
+  "refresh-status-failed": "تعذر تحديث حالة الموصل",
+  "field-required": "الحقل {{field}} مطلوب",
+  "complete-authorization": "أكمل التفويض في نافذة المزود.",
+  "refresh-status": "تحديث الحالة",
+  "built-in-auth-desc": "يفتح التثبيت مسار تفويض المزود في نافذة منفصلة.",
+  "built-in-generic-desc": "تكامل Eigent محلي.",
+  "cancel": "إلغاء",
+  "install": "تثبيت",
+  "installing": "جارٍ التثبيت…",
+  "save": "حفظ",
+  "enter-value": "أدخل {{field}}",
+  "custom-title": "إضافة موصل مخصص",
+  "custom-subtitle": "ثبّت خادم MCP محليًا أو بعيدًا تثق به.",
+  "custom-warning": "يمكن لخوادم MCP المخصصة تنفيذ الأوامر أو الوصول إلى خدمات بعيدة. ثبّت الإعدادات التي تثق بها فقط.",
+  "local-json-desc": "أضف خادم MCP محليًا من خلال تقديم إعداد JSON صالح.",
+  "learn-more": "معرفة المزيد",
+  "connector-name": "اسم الموصل",
+  "remote-name-placeholder": "خادم MCP البعيد الخاص بي",
+  "remote-url": "عنوان URL لخادم MCP البعيد",
+  "remote-url-note": "استخدم HTTPS للخوادم الموجودة خارج شبكة محلية موثوقة.",
+  "invalid-json": "JSON غير صالح: {{message}}",
+  "json-format-error": "خطأ في تنسيق JSON: {{message}}",
+  "parse-failed": "فشل التحليل",
+  "missing-mcp-servers": "يجب أن يحتوي الإعداد على كائن mcpServers",
+  "add-at-least-one": "أضف خادم MCP واحدًا على الأقل",
+  "already-exists": "{{name}} موجود بالفعل",
+  "name-required": "اسم الموصل مطلوب",
+  "invalid-remote-url": "أدخل عنوان URL صالحًا لخادم MCP بعيد",
+  "remote-url-protocol": "يجب أن تستخدم عناوين URL لخوادم MCP البعيدة بروتوكول HTTP أو HTTPS",
+  "remote-missing-id": "تم إنشاء الموصل البعيد دون معرّف",
+  "custom-installed": "الموصلات المخصصة المثبّتة: {{num}}",
+  "install-custom-failed": "تعذر تثبيت الموصل المخصص",
+  "env-key-value": "متغيرات البيئة (مفتاح-قيمة)",
+  "value-placeholder": "القيمة",
+  "configuration-title": "الإعداد",
+  "google-api-key": "مفتاح Google API",
+  "google-api-key-placeholder": "أدخل مفتاح Google API من Google Cloud Console",
+  "google-api-key-note": "تعرّف على كيفية الحصول على مفتاح Google API ← https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "معرّف محرك البحث",
+  "search-engine-id-placeholder": "أدخل معرّف محرك البحث المخصص المرتبط بمفتاح API",
+  "google-search-custom-desc": "اتصل بـ Google Custom Search. يتطلب مفتاح Google API ومعرّف محرك بحث مخصص (CSE).",
+  "google-search-default-desc": "بحث Google مفعّل افتراضيًا. لا يلزم مفتاح API."
+}
diff --git a/src/i18n/locales/ar/index.ts b/src/i18n/locales/ar/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/ar/index.ts
+++ b/src/i18n/locales/ar/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/i18n/locales/de/connectors.json b/src/i18n/locales/de/connectors.json
new file mode 100644
index 000000000..44c847cf5
--- /dev/null
+++ b/src/i18n/locales/de/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "Konnektoren",
+  "search-placeholder": "Deine Konnektoren durchsuchen",
+  "browse": "Konnektoren durchsuchen",
+  "add-custom": "Benutzerdefinierten hinzufügen",
+  "retry": "Erneut versuchen",
+  "your-connectors": "Deine Konnektoren",
+  "no-matching": "Keine passenden Konnektoren.",
+  "count-one": "Konnektor",
+  "count-other": "Konnektoren",
+  "recommended": "Für dich empfohlene Konnektoren.",
+  "no-recommended": "Keine empfohlenen Konnektoren verfügbar.",
+  "gateway-unavailable": "Connectors ist nicht verfügbar.",
+  "gateway-unavailable-desc": "Für diese Bereitstellung ist das Connector Gateway nicht aktiviert.",
+  "gateway-connectors": "Connectors",
+  "source-open": "Cloud",
+  "source-built-in": "Integriert",
+  "source-local": "Lokal",
+  "source-remote": "Remote",
+  "load-built-in-failed": "Integrierte Konnektoren konnten nicht geladen werden",
+  "load-custom-failed": "Benutzerdefinierte Konnektoren konnten nicht geladen werden",
+  "load-gateway-failed": "Connectors konnten nicht geladen werden",
+  "disconnected": "Verbindung zu {{name}} getrennt",
+  "disconnect-failed": "Konnektor konnte nicht getrennt werden",
+  "update-failed": "Konnektor konnte nicht aktualisiert werden",
+  "status-save-failed-enabled": "Der Konnektor wurde aktiviert, sein Status konnte jedoch nicht gespeichert werden. Aktualisiere die Seite und versuche es erneut.",
+  "status-save-failed-disabled": "Der Konnektor wurde deaktiviert, sein Status konnte jedoch nicht gespeichert werden. Aktualisiere die Seite und versuche es erneut.",
+  "updated": "Konnektor aktualisiert",
+  "save-failed": "Konnektor konnte nicht gespeichert werden",
+  "deleted": "Konnektor gelöscht",
+  "delete-failed": "Konnektor konnte nicht gelöscht werden",
+  "enable-connector": "Konnektor aktivieren",
+  "disable-connector": "Konnektor deaktivieren",
+  "more-actions": "Weitere Aktionen",
+  "open": "Öffnen",
+  "edit": "Bearbeiten",
+  "delete": "Löschen",
+  "connected-account": "Verbundenes Konto",
+  "supported-actions": "Unterstützte Aktionen",
+  "supported-actions-count": "{{num}} unterstützte Aktionen",
+  "show-more": "Mehr anzeigen",
+  "show-less": "Weniger anzeigen",
+  "provider-website": "Website des Anbieters",
+  "built-in-title": "Lokaler Kompatibilitätskonnektor",
+  "built-in-desc": "Dieser Konnektor verwendet die lokale Integrationslaufzeit von Eigent. Connector Gateway ist der primäre Marktplatz für neue gehostete Integrationen.",
+  "configuration": "Konfiguration: {{vars}}",
+  "status": "Status",
+  "active": "Aktiv",
+  "disabled": "Deaktiviert",
+  "server-url": "Server-URL",
+  "not-configured": "Nicht konfiguriert",
+  "command": "Befehl",
+  "arguments": "Argumente",
+  "requires": "Erfordert {{vars}}",
+  "notion-desc": "Einen Notion-Arbeitsbereich verbinden.",
+  "google-calendar-desc": "Google-Kalendertermine und -zeitpläne verwalten.",
+  "generic-desc": "{{name}} mit Eigent verbinden.",
+  "google-search": "Google-Suche",
+  "google-search-desc": "Google Custom Search für Browser- und Rechercheaufgaben verbinden.",
+  "notion-install-failed": "Notion konnte nicht installiert werden",
+  "google-calendar-install-failed": "Google Kalender konnte nicht installiert werden",
+  "search-connectors": "Konnektoren suchen",
+  "auth-api-key": "API-Schlüssel",
+  "auth-credential": "Anmeldedaten",
+  "auth-oauth": "OAuth",
+  "auth-none": "Keine Authentifizierung",
+  "unnamed-action": "Unbenannte Aktion",
+  "try-again": "Erneut versuchen",
+  "no-gateway-found": "Keine Connectors gefunden.",
+  "no-built-in-found": "Keine integrierten Konnektoren gefunden.",
+  "loading": "Wird geladen…",
+  "updating": "Wird aktualisiert…",
+  "loading-more": "Weitere werden geladen…",
+  "new": "Neu",
+  "installed": "Installiert",
+  "local-integration": "Lokale Integration",
+  "authentication": "Authentifizierung",
+  "oauth-title": "Mit OAuth verbinden",
+  "oauth-desc": "Eigent öffnet die Autorisierungsseite des Anbieters. Dieses Dialogfeld schließt die Installation ab, sobald die Autorisierung abgeschlossen ist.",
+  "oauth-scopes": "Angeforderte Berechtigungen: {{scopes}}",
+  "no-auth-desc": "Dieser Konnektor benötigt keine Anmeldedaten.",
+  "waiting-authorization": "Warten auf Abschluss der Autorisierung…",
+  "authorization-started": "Autorisierung gestartet",
+  "installed-toast": "{{name}} installiert",
+  "no-authorization-url": "Der Konnektor hat keine Autorisierungs-URL zurückgegeben",
+  "authorization-pending": "Die Autorisierung steht noch aus. Schließe sie im Anbieterfenster ab und versuche es erneut.",
+  "install-failed": "Konnektor konnte nicht installiert werden",
+  "detail-load-failed": "Konnektordetails konnten nicht geladen werden",
+  "authorization-incomplete": "Die Autorisierung ist noch nicht abgeschlossen. Schließe sie im Anbieterfenster ab und aktualisiere den Status erneut.",
+  "refresh-status-failed": "Konnektorstatus konnte nicht aktualisiert werden",
+  "field-required": "{{field}} ist erforderlich",
+  "complete-authorization": "Schließe die Autorisierung im Anbieterfenster ab.",
+  "refresh-status": "Status aktualisieren",
+  "built-in-auth-desc": "Bei der Installation wird der Autorisierungsvorgang des Anbieters in einem separaten Fenster geöffnet.",
+  "built-in-generic-desc": "Eine lokale Eigent-Integration.",
+  "cancel": "Abbrechen",
+  "install": "Installieren",
+  "installing": "Wird installiert…",
+  "save": "Speichern",
+  "enter-value": "{{field}} eingeben",
+  "custom-title": "Benutzerdefinierten Konnektor hinzufügen",
+  "custom-subtitle": "Installiere einen vertrauenswürdigen lokalen oder Remote-MCP-Server.",
+  "custom-warning": "Benutzerdefinierte MCP-Server können Befehle ausführen oder auf Remote-Dienste zugreifen. Installiere nur Konfigurationen, denen du vertraust.",
+  "local-json-desc": "Füge einen lokalen MCP-Server mit einer gültigen JSON-Konfiguration hinzu.",
+  "learn-more": "Mehr erfahren",
+  "connector-name": "Konnektorname",
+  "remote-name-placeholder": "Mein Remote-MCP",
+  "remote-url": "Remote-MCP-URL",
+  "remote-url-note": "Verwende HTTPS für Server außerhalb eines vertrauenswürdigen lokalen Netzwerks.",
+  "invalid-json": "Ungültiges JSON: {{message}}",
+  "json-format-error": "JSON-Formatfehler: {{message}}",
+  "parse-failed": "Analyse fehlgeschlagen",
+  "missing-mcp-servers": "Die Konfiguration muss ein mcpServers-Objekt enthalten",
+  "add-at-least-one": "Füge mindestens einen MCP-Server hinzu",
+  "already-exists": "{{name}} ist bereits vorhanden",
+  "name-required": "Der Konnektorname ist erforderlich",
+  "invalid-remote-url": "Gib eine gültige Remote-MCP-URL ein",
+  "remote-url-protocol": "Remote-MCP-URLs müssen HTTP oder HTTPS verwenden",
+  "remote-missing-id": "Der Remote-Konnektor wurde ohne ID erstellt",
+  "custom-installed": "Installierte benutzerdefinierte Konnektoren: {{num}}",
+  "install-custom-failed": "Benutzerdefinierter Konnektor konnte nicht installiert werden",
+  "env-key-value": "Umgebungsvariablen (Schlüssel-Wert)",
+  "value-placeholder": "Wert",
+  "configuration-title": "Konfiguration",
+  "google-api-key": "Google-API-Schlüssel",
+  "google-api-key-placeholder": "Google-API-Schlüssel aus der Google Cloud Console eingeben",
+  "google-api-key-note": "So erhältst du deinen Google-API-Schlüssel → https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "Suchmaschinen-ID",
+  "search-engine-id-placeholder": "Die mit deinem API-Schlüssel verknüpfte ID der benutzerdefinierten Suchmaschine eingeben",
+  "google-search-custom-desc": "Mit Google Custom Search verbinden. Erfordert einen Google-API-Schlüssel und eine ID der benutzerdefinierten Suchmaschine (CSE).",
+  "google-search-default-desc": "Die Google-Suche ist standardmäßig aktiviert. Kein API-Schlüssel erforderlich."
+}
diff --git a/src/i18n/locales/de/index.ts b/src/i18n/locales/de/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/de/index.ts
+++ b/src/i18n/locales/de/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/i18n/locales/en-us/connectors.json b/src/i18n/locales/en-us/connectors.json
new file mode 100644
index 000000000..bd4ff2040
--- /dev/null
+++ b/src/i18n/locales/en-us/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "Connectors",
+  "search-placeholder": "Search your connectors",
+  "browse": "Browse connectors",
+  "add-custom": "Add custom",
+  "retry": "Retry",
+  "your-connectors": "Your connectors",
+  "no-matching": "No matching connectors.",
+  "count-one": "connector",
+  "count-other": "connectors",
+  "recommended": "Recommended connectors for you.",
+  "no-recommended": "No recommended connectors available.",
+  "gateway-unavailable": "Connectors is unavailable.",
+  "gateway-unavailable-desc": "This deployment does not have the Connector Gateway enabled.",
+  "gateway-connectors": "Connectors",
+  "source-open": "Cloud",
+  "source-built-in": "Built-in",
+  "source-local": "Local",
+  "source-remote": "Remote",
+  "load-built-in-failed": "Failed to load Built-in connectors",
+  "load-custom-failed": "Failed to load Custom connectors",
+  "load-gateway-failed": "Failed to load connectors",
+  "disconnected": "{{name}} disconnected",
+  "disconnect-failed": "Failed to disconnect connector",
+  "update-failed": "Failed to update connector",
+  "status-save-failed-enabled": "Connector enabled, but saving its state failed. Refresh and try again.",
+  "status-save-failed-disabled": "Connector disabled, but saving its state failed. Refresh and try again.",
+  "updated": "Connector updated",
+  "save-failed": "Failed to save connector",
+  "deleted": "Connector deleted",
+  "delete-failed": "Failed to delete connector",
+  "enable-connector": "Enable connector",
+  "disable-connector": "Disable connector",
+  "more-actions": "More actions",
+  "open": "Open",
+  "edit": "Edit",
+  "delete": "Delete",
+  "connected-account": "Connected account",
+  "supported-actions": "Supported actions",
+  "supported-actions-count": "{{num}} supported actions",
+  "show-more": "Show more",
+  "show-less": "Show less",
+  "provider-website": "Provider website",
+  "built-in-title": "Local compatibility connector",
+  "built-in-desc": "This connector uses Eigent's local integration runtime. Connector Gateway is the primary marketplace for new hosted integrations.",
+  "configuration": "Configuration: {{vars}}",
+  "status": "Status",
+  "active": "Active",
+  "disabled": "Disabled",
+  "server-url": "Server URL",
+  "not-configured": "Not configured",
+  "command": "Command",
+  "arguments": "Arguments",
+  "requires": "Requires {{vars}}",
+  "notion-desc": "Connect a Notion workspace.",
+  "google-calendar-desc": "Manage Google Calendar events and schedules.",
+  "generic-desc": "Connect {{name}} to Eigent.",
+  "google-search": "Google Search",
+  "google-search-desc": "Connect Google Custom Search for browser and research tasks.",
+  "notion-install-failed": "Failed to install Notion",
+  "google-calendar-install-failed": "Failed to install Google Calendar",
+  "search-connectors": "Search connectors",
+  "auth-api-key": "API key",
+  "auth-credential": "Credential",
+  "auth-oauth": "OAuth",
+  "auth-none": "No authentication",
+  "unnamed-action": "Unnamed action",
+  "try-again": "Try again",
+  "no-gateway-found": "No connectors found.",
+  "no-built-in-found": "No Built-in connectors found.",
+  "loading": "Loading…",
+  "updating": "Updating…",
+  "loading-more": "Loading more…",
+  "new": "New",
+  "installed": "Installed",
+  "local-integration": "Local integration",
+  "authentication": "Authentication",
+  "oauth-title": "Connect with OAuth",
+  "oauth-desc": "Eigent will open the provider authorization page. This dialog will finish installation when authorization is complete.",
+  "oauth-scopes": "Requested scopes: {{scopes}}",
+  "no-auth-desc": "This connector does not require credentials.",
+  "waiting-authorization": "Waiting for authorization to complete…",
+  "authorization-started": "Authorization started",
+  "installed-toast": "{{name}} installed",
+  "no-authorization-url": "The connector did not return an authorization URL",
+  "authorization-pending": "Authorization is still pending. Complete it in the provider window, then try again.",
+  "install-failed": "Failed to install connector",
+  "detail-load-failed": "Failed to load connector details",
+  "authorization-incomplete": "Authorization has not completed yet. Finish it in the provider window and refresh again.",
+  "refresh-status-failed": "Failed to refresh connector status",
+  "field-required": "{{field}} is required",
+  "complete-authorization": "Complete authorization in the provider window.",
+  "refresh-status": "Refresh status",
+  "built-in-auth-desc": "Installation opens the provider authorization flow in a separate window.",
+  "built-in-generic-desc": "A local Eigent integration.",
+  "cancel": "Cancel",
+  "install": "Install",
+  "installing": "Installing…",
+  "save": "Save",
+  "enter-value": "Enter {{field}}",
+  "custom-title": "Add custom connector",
+  "custom-subtitle": "Install a local or remote MCP server you trust.",
+  "custom-warning": "Custom MCP servers can execute commands or access remote services. Only install configurations you trust.",
+  "local-json-desc": "Add a local MCP server by providing a valid JSON configuration.",
+  "learn-more": "Learn more",
+  "connector-name": "Connector name",
+  "remote-name-placeholder": "My remote MCP",
+  "remote-url": "Remote MCP URL",
+  "remote-url-note": "Use HTTPS for servers outside a trusted local network.",
+  "invalid-json": "Invalid JSON: {{message}}",
+  "json-format-error": "JSON format error: {{message}}",
+  "parse-failed": "Parsing failed",
+  "missing-mcp-servers": "Configuration must contain an mcpServers object",
+  "add-at-least-one": "Add at least one MCP server",
+  "already-exists": "{{name}} already exists",
+  "name-required": "Connector name is required",
+  "invalid-remote-url": "Enter a valid remote MCP URL",
+  "remote-url-protocol": "Remote MCP URLs must use HTTP or HTTPS",
+  "remote-missing-id": "Remote connector was created without an ID",
+  "custom-installed": "Custom connectors installed: {{num}}",
+  "install-custom-failed": "Failed to install custom connector",
+  "env-key-value": "Env (key-value)",
+  "value-placeholder": "Value",
+  "configuration-title": "Configuration",
+  "google-api-key": "Google API Key",
+  "google-api-key-placeholder": "Enter your Google API key from Google Cloud Console",
+  "google-api-key-note": "Learn how to get your Google API key → https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "Search Engine ID",
+  "search-engine-id-placeholder": "Enter the Custom Search Engine ID associated with your API key",
+  "google-search-custom-desc": "Connect to Google Custom Search. Requires a Google API key and a Custom Search Engine (CSE) ID.",
+  "google-search-default-desc": "Google Search is enabled by default. No API key required."
+}
diff --git a/src/i18n/locales/en-us/index.ts b/src/i18n/locales/en-us/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/en-us/index.ts
+++ b/src/i18n/locales/en-us/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/i18n/locales/es/connectors.json b/src/i18n/locales/es/connectors.json
new file mode 100644
index 000000000..2e694fb45
--- /dev/null
+++ b/src/i18n/locales/es/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "Conectores",
+  "search-placeholder": "Busca tus conectores",
+  "browse": "Explorar conectores",
+  "add-custom": "Añadir personalizado",
+  "retry": "Reintentar",
+  "your-connectors": "Tus conectores",
+  "no-matching": "No hay conectores coincidentes.",
+  "count-one": "conector",
+  "count-other": "conectores",
+  "recommended": "Conectores recomendados para ti.",
+  "no-recommended": "No hay conectores recomendados disponibles.",
+  "gateway-unavailable": "Los conectores no están disponibles.",
+  "gateway-unavailable-desc": "Esta implementación no tiene habilitado el Connector Gateway.",
+  "gateway-connectors": "Conectores",
+  "source-open": "Nube",
+  "source-built-in": "Integrado",
+  "source-local": "Local",
+  "source-remote": "Remoto",
+  "load-built-in-failed": "Error al cargar los conectores integrados",
+  "load-custom-failed": "Error al cargar los conectores personalizados",
+  "load-gateway-failed": "Error al cargar conectores",
+  "disconnected": "{{name}} desconectado",
+  "disconnect-failed": "Error al desconectar el conector",
+  "update-failed": "Error al actualizar el conector",
+  "status-save-failed-enabled": "Conector habilitado, pero no se pudo guardar su estado. Actualiza e inténtalo de nuevo.",
+  "status-save-failed-disabled": "Conector deshabilitado, pero no se pudo guardar su estado. Actualiza e inténtalo de nuevo.",
+  "updated": "Conector actualizado",
+  "save-failed": "Error al guardar el conector",
+  "deleted": "Conector eliminado",
+  "delete-failed": "Error al eliminar el conector",
+  "enable-connector": "Habilitar conector",
+  "disable-connector": "Deshabilitar conector",
+  "more-actions": "Más acciones",
+  "open": "Abrir",
+  "edit": "Editar",
+  "delete": "Eliminar",
+  "connected-account": "Cuenta conectada",
+  "supported-actions": "Acciones compatibles",
+  "supported-actions-count": "{{num}} acciones compatibles",
+  "show-more": "Mostrar más",
+  "show-less": "Mostrar menos",
+  "provider-website": "Sitio web del proveedor",
+  "built-in-title": "Conector de compatibilidad local",
+  "built-in-desc": "Este conector usa el entorno de integración local de Eigent. Connector Gateway es el mercado principal para nuevas integraciones alojadas.",
+  "configuration": "Configuración: {{vars}}",
+  "status": "Estado",
+  "active": "Activo",
+  "disabled": "Deshabilitado",
+  "server-url": "URL del servidor",
+  "not-configured": "Sin configurar",
+  "command": "Comando",
+  "arguments": "Argumentos",
+  "requires": "Requiere {{vars}}",
+  "notion-desc": "Conecta un espacio de trabajo de Notion.",
+  "google-calendar-desc": "Gestiona eventos y horarios de Google Calendar.",
+  "generic-desc": "Conecta {{name}} a Eigent.",
+  "google-search": "Búsqueda de Google",
+  "google-search-desc": "Conecta Google Custom Search para tareas de navegación e investigación.",
+  "notion-install-failed": "Error al instalar Notion",
+  "google-calendar-install-failed": "Error al instalar Google Calendar",
+  "search-connectors": "Buscar conectores",
+  "auth-api-key": "Clave API",
+  "auth-credential": "Credencial",
+  "auth-oauth": "OAuth",
+  "auth-none": "Sin autenticación",
+  "unnamed-action": "Acción sin nombre",
+  "try-again": "Intentar de nuevo",
+  "no-gateway-found": "No se encontraron conectores.",
+  "no-built-in-found": "No se encontraron conectores integrados.",
+  "loading": "Cargando…",
+  "updating": "Actualizando…",
+  "loading-more": "Cargando más…",
+  "new": "Nuevo",
+  "installed": "Instalado",
+  "local-integration": "Integración local",
+  "authentication": "Autenticación",
+  "oauth-title": "Conectar con OAuth",
+  "oauth-desc": "Eigent abrirá la página de autorización del proveedor. Este cuadro de diálogo finalizará la instalación cuando se complete la autorización.",
+  "oauth-scopes": "Permisos solicitados: {{scopes}}",
+  "no-auth-desc": "Este conector no requiere credenciales.",
+  "waiting-authorization": "Esperando a que se complete la autorización…",
+  "authorization-started": "Autorización iniciada",
+  "installed-toast": "{{name}} instalado",
+  "no-authorization-url": "El conector no devolvió una URL de autorización",
+  "authorization-pending": "La autorización sigue pendiente. Complétala en la ventana del proveedor e inténtalo de nuevo.",
+  "install-failed": "Error al instalar el conector",
+  "detail-load-failed": "Error al cargar los detalles del conector",
+  "authorization-incomplete": "La autorización aún no se ha completado. Termínala en la ventana del proveedor y actualiza de nuevo.",
+  "refresh-status-failed": "Error al actualizar el estado del conector",
+  "field-required": "{{field}} es obligatorio",
+  "complete-authorization": "Completa la autorización en la ventana del proveedor.",
+  "refresh-status": "Actualizar estado",
+  "built-in-auth-desc": "La instalación abre el flujo de autorización del proveedor en una ventana aparte.",
+  "built-in-generic-desc": "Una integración local de Eigent.",
+  "cancel": "Cancelar",
+  "install": "Instalar",
+  "installing": "Instalando…",
+  "save": "Guardar",
+  "enter-value": "Introduce {{field}}",
+  "custom-title": "Añadir conector personalizado",
+  "custom-subtitle": "Instala un servidor MCP local o remoto de confianza.",
+  "custom-warning": "Los servidores MCP personalizados pueden ejecutar comandos o acceder a servicios remotos. Instala solo configuraciones de confianza.",
+  "local-json-desc": "Añade un servidor MCP local proporcionando una configuración JSON válida.",
+  "learn-more": "Más información",
+  "connector-name": "Nombre del conector",
+  "remote-name-placeholder": "Mi MCP remoto",
+  "remote-url": "URL del MCP remoto",
+  "remote-url-note": "Usa HTTPS para servidores fuera de una red local de confianza.",
+  "invalid-json": "JSON no válido: {{message}}",
+  "json-format-error": "Error de formato JSON: {{message}}",
+  "parse-failed": "Error al analizar",
+  "missing-mcp-servers": "La configuración debe contener un objeto mcpServers",
+  "add-at-least-one": "Añade al menos un servidor MCP",
+  "already-exists": "{{name}} ya existe",
+  "name-required": "El nombre del conector es obligatorio",
+  "invalid-remote-url": "Introduce una URL de MCP remoto válida",
+  "remote-url-protocol": "Las URL de MCP remoto deben usar HTTP o HTTPS",
+  "remote-missing-id": "El conector remoto se creó sin un ID",
+  "custom-installed": "Conectores personalizados instalados: {{num}}",
+  "install-custom-failed": "Error al instalar el conector personalizado",
+  "env-key-value": "Variables de entorno (clave-valor)",
+  "value-placeholder": "Valor",
+  "configuration-title": "Configuración",
+  "google-api-key": "Clave de API de Google",
+  "google-api-key-placeholder": "Introduce tu clave de API de Google Cloud Console",
+  "google-api-key-note": "Cómo obtener tu clave de API de Google → https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "ID del motor de búsqueda",
+  "search-engine-id-placeholder": "Introduce el ID del motor de búsqueda personalizado asociado a tu clave de API",
+  "google-search-custom-desc": "Conecta Google Custom Search. Requiere una clave de API de Google y un ID de motor de búsqueda personalizado (CSE).",
+  "google-search-default-desc": "Google Search está habilitado de forma predeterminada. No se requiere una clave de API."
+}
diff --git a/src/i18n/locales/es/index.ts b/src/i18n/locales/es/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/es/index.ts
+++ b/src/i18n/locales/es/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/i18n/locales/fr/connectors.json b/src/i18n/locales/fr/connectors.json
new file mode 100644
index 000000000..69dff289f
--- /dev/null
+++ b/src/i18n/locales/fr/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "Connecteurs",
+  "search-placeholder": "Rechercher dans vos connecteurs",
+  "browse": "Parcourir les connecteurs",
+  "add-custom": "Ajouter un connecteur personnalisé",
+  "retry": "Réessayer",
+  "your-connectors": "Vos connecteurs",
+  "no-matching": "Aucun connecteur correspondant.",
+  "count-one": "connecteur",
+  "count-other": "connecteurs",
+  "recommended": "Connecteurs recommandés pour vous.",
+  "no-recommended": "Aucun connecteur recommandé disponible.",
+  "gateway-unavailable": "Les connecteurs ne sont pas disponibles.",
+  "gateway-unavailable-desc": "Connector Gateway n’est pas activé pour ce déploiement.",
+  "gateway-connectors": "Connecteurs",
+  "source-open": "Cloud",
+  "source-built-in": "Intégré",
+  "source-local": "Local",
+  "source-remote": "Distant",
+  "load-built-in-failed": "Échec du chargement des connecteurs intégrés",
+  "load-custom-failed": "Échec du chargement des connecteurs personnalisés",
+  "load-gateway-failed": "Échec du chargement des connecteurs",
+  "disconnected": "{{name}} déconnecté",
+  "disconnect-failed": "Échec de la déconnexion du connecteur",
+  "update-failed": "Échec de la mise à jour du connecteur",
+  "status-save-failed-enabled": "Le connecteur a été activé, mais son état n’a pas pu être enregistré. Actualisez la page et réessayez.",
+  "status-save-failed-disabled": "Le connecteur a été désactivé, mais son état n’a pas pu être enregistré. Actualisez la page et réessayez.",
+  "updated": "Connecteur mis à jour",
+  "save-failed": "Échec de l’enregistrement du connecteur",
+  "deleted": "Connecteur supprimé",
+  "delete-failed": "Échec de la suppression du connecteur",
+  "enable-connector": "Activer le connecteur",
+  "disable-connector": "Désactiver le connecteur",
+  "more-actions": "Plus d’actions",
+  "open": "Ouvrir",
+  "edit": "Modifier",
+  "delete": "Supprimer",
+  "connected-account": "Compte connecté",
+  "supported-actions": "Actions prises en charge",
+  "supported-actions-count": "{{num}} actions prises en charge",
+  "show-more": "Afficher plus",
+  "show-less": "Afficher moins",
+  "provider-website": "Site web du fournisseur",
+  "built-in-title": "Connecteur de compatibilité locale",
+  "built-in-desc": "Ce connecteur utilise l’environnement d’intégration local d’Eigent. Connector Gateway est la place de marché principale pour les nouvelles intégrations hébergées.",
+  "configuration": "Configuration : {{vars}}",
+  "status": "État",
+  "active": "Actif",
+  "disabled": "Désactivé",
+  "server-url": "URL du serveur",
+  "not-configured": "Non configuré",
+  "command": "Commande",
+  "arguments": "Arguments",
+  "requires": "Nécessite {{vars}}",
+  "notion-desc": "Connecter un espace de travail Notion.",
+  "google-calendar-desc": "Gérer les événements et les calendriers Google Agenda.",
+  "generic-desc": "Connecter {{name}} à Eigent.",
+  "google-search": "Recherche Google",
+  "google-search-desc": "Connecter Google Custom Search pour les tâches de navigation et de recherche.",
+  "notion-install-failed": "Échec de l’installation de Notion",
+  "google-calendar-install-failed": "Échec de l’installation de Google Agenda",
+  "search-connectors": "Rechercher des connecteurs",
+  "auth-api-key": "Clé API",
+  "auth-credential": "Identifiants",
+  "auth-oauth": "OAuth",
+  "auth-none": "Aucune authentification",
+  "unnamed-action": "Action sans nom",
+  "try-again": "Réessayer",
+  "no-gateway-found": "Aucun connecteur trouvé.",
+  "no-built-in-found": "Aucun connecteur intégré trouvé.",
+  "loading": "Chargement…",
+  "updating": "Mise à jour…",
+  "loading-more": "Chargement d’autres éléments…",
+  "new": "Nouveau",
+  "installed": "Installé",
+  "local-integration": "Intégration locale",
+  "authentication": "Authentification",
+  "oauth-title": "Se connecter avec OAuth",
+  "oauth-desc": "Eigent ouvrira la page d’autorisation du fournisseur. Cette boîte de dialogue terminera l’installation une fois l’autorisation accordée.",
+  "oauth-scopes": "Autorisations demandées : {{scopes}}",
+  "no-auth-desc": "Ce connecteur ne nécessite aucun identifiant.",
+  "waiting-authorization": "En attente de l’autorisation…",
+  "authorization-started": "Autorisation démarrée",
+  "installed-toast": "{{name}} installé",
+  "no-authorization-url": "Le connecteur n’a pas renvoyé d’URL d’autorisation",
+  "authorization-pending": "L’autorisation est toujours en attente. Terminez-la dans la fenêtre du fournisseur, puis réessayez.",
+  "install-failed": "Échec de l’installation du connecteur",
+  "detail-load-failed": "Échec du chargement des détails du connecteur",
+  "authorization-incomplete": "L’autorisation n’est pas encore terminée. Terminez-la dans la fenêtre du fournisseur et actualisez à nouveau l’état.",
+  "refresh-status-failed": "Échec de l’actualisation de l’état du connecteur",
+  "field-required": "{{field}} est requis",
+  "complete-authorization": "Terminez l’autorisation dans la fenêtre du fournisseur.",
+  "refresh-status": "Actualiser l’état",
+  "built-in-auth-desc": "L’installation ouvre le processus d’autorisation du fournisseur dans une fenêtre séparée.",
+  "built-in-generic-desc": "Une intégration Eigent locale.",
+  "cancel": "Annuler",
+  "install": "Installer",
+  "installing": "Installation…",
+  "save": "Enregistrer",
+  "enter-value": "Saisir {{field}}",
+  "custom-title": "Ajouter un connecteur personnalisé",
+  "custom-subtitle": "Installez un serveur MCP local ou distant auquel vous faites confiance.",
+  "custom-warning": "Les serveurs MCP personnalisés peuvent exécuter des commandes ou accéder à des services distants. Installez uniquement des configurations auxquelles vous faites confiance.",
+  "local-json-desc": "Ajoutez un serveur MCP local en fournissant une configuration JSON valide.",
+  "learn-more": "En savoir plus",
+  "connector-name": "Nom du connecteur",
+  "remote-name-placeholder": "Mon MCP distant",
+  "remote-url": "URL du MCP distant",
+  "remote-url-note": "Utilisez HTTPS pour les serveurs situés hors d’un réseau local de confiance.",
+  "invalid-json": "JSON non valide : {{message}}",
+  "json-format-error": "Erreur de format JSON : {{message}}",
+  "parse-failed": "Échec de l’analyse",
+  "missing-mcp-servers": "La configuration doit contenir un objet mcpServers",
+  "add-at-least-one": "Ajoutez au moins un serveur MCP",
+  "already-exists": "{{name}} existe déjà",
+  "name-required": "Le nom du connecteur est requis",
+  "invalid-remote-url": "Saisissez une URL de MCP distant valide",
+  "remote-url-protocol": "Les URL de MCP distant doivent utiliser HTTP ou HTTPS",
+  "remote-missing-id": "Le connecteur distant a été créé sans identifiant",
+  "custom-installed": "Connecteurs personnalisés installés : {{num}}",
+  "install-custom-failed": "Échec de l’installation du connecteur personnalisé",
+  "env-key-value": "Variables d’environnement (clé-valeur)",
+  "value-placeholder": "Valeur",
+  "configuration-title": "Configuration",
+  "google-api-key": "Clé API Google",
+  "google-api-key-placeholder": "Saisissez votre clé API Google depuis Google Cloud Console",
+  "google-api-key-note": "Comment obtenir votre clé API Google → https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "Identifiant du moteur de recherche",
+  "search-engine-id-placeholder": "Saisissez l’identifiant du moteur de recherche personnalisé associé à votre clé API",
+  "google-search-custom-desc": "Connectez Google Custom Search. Une clé API Google et un identifiant de moteur de recherche personnalisé (CSE) sont requis.",
+  "google-search-default-desc": "La recherche Google est activée par défaut. Aucune clé API n’est requise."
+}
diff --git a/src/i18n/locales/fr/index.ts b/src/i18n/locales/fr/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/fr/index.ts
+++ b/src/i18n/locales/fr/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/i18n/locales/it/connectors.json b/src/i18n/locales/it/connectors.json
new file mode 100644
index 000000000..e15d90e0a
--- /dev/null
+++ b/src/i18n/locales/it/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "Connettori",
+  "search-placeholder": "Cerca nei tuoi connettori",
+  "browse": "Sfoglia i connettori",
+  "add-custom": "Aggiungi personalizzato",
+  "retry": "Riprova",
+  "your-connectors": "I tuoi connettori",
+  "no-matching": "Nessun connettore corrispondente.",
+  "count-one": "connettore",
+  "count-other": "connettori",
+  "recommended": "Connettori consigliati per te.",
+  "no-recommended": "Nessun connettore consigliato disponibile.",
+  "gateway-unavailable": "Connectors non è disponibile.",
+  "gateway-unavailable-desc": "Connector Gateway non è abilitato per questa distribuzione.",
+  "gateway-connectors": "Connectors",
+  "source-open": "Cloud",
+  "source-built-in": "Integrato",
+  "source-local": "Locale",
+  "source-remote": "Remoto",
+  "load-built-in-failed": "Impossibile caricare i connettori integrati",
+  "load-custom-failed": "Impossibile caricare i connettori personalizzati",
+  "load-gateway-failed": "Impossibile caricare i connectors",
+  "disconnected": "{{name}} disconnesso",
+  "disconnect-failed": "Impossibile disconnettere il connettore",
+  "update-failed": "Impossibile aggiornare il connettore",
+  "status-save-failed-enabled": "Il connettore è stato abilitato, ma non è stato possibile salvarne lo stato. Aggiorna la pagina e riprova.",
+  "status-save-failed-disabled": "Il connettore è stato disabilitato, ma non è stato possibile salvarne lo stato. Aggiorna la pagina e riprova.",
+  "updated": "Connettore aggiornato",
+  "save-failed": "Impossibile salvare il connettore",
+  "deleted": "Connettore eliminato",
+  "delete-failed": "Impossibile eliminare il connettore",
+  "enable-connector": "Abilita connettore",
+  "disable-connector": "Disabilita connettore",
+  "more-actions": "Altre azioni",
+  "open": "Apri",
+  "edit": "Modifica",
+  "delete": "Elimina",
+  "connected-account": "Account connesso",
+  "supported-actions": "Azioni supportate",
+  "supported-actions-count": "{{num}} azioni supportate",
+  "show-more": "Mostra altro",
+  "show-less": "Mostra meno",
+  "provider-website": "Sito web del fornitore",
+  "built-in-title": "Connettore di compatibilità locale",
+  "built-in-desc": "Questo connettore utilizza l’ambiente di integrazione locale di Eigent. Connector Gateway è il marketplace principale per le nuove integrazioni ospitate.",
+  "configuration": "Configurazione: {{vars}}",
+  "status": "Stato",
+  "active": "Attivo",
+  "disabled": "Disabilitato",
+  "server-url": "URL del server",
+  "not-configured": "Non configurato",
+  "command": "Comando",
+  "arguments": "Argomenti",
+  "requires": "Richiede {{vars}}",
+  "notion-desc": "Connetti uno spazio di lavoro Notion.",
+  "google-calendar-desc": "Gestisci eventi e pianificazioni di Google Calendar.",
+  "generic-desc": "Connetti {{name}} a Eigent.",
+  "google-search": "Ricerca Google",
+  "google-search-desc": "Connetti Google Custom Search per attività di navigazione e ricerca.",
+  "notion-install-failed": "Impossibile installare Notion",
+  "google-calendar-install-failed": "Impossibile installare Google Calendar",
+  "search-connectors": "Cerca connettori",
+  "auth-api-key": "Chiave API",
+  "auth-credential": "Credenziale",
+  "auth-oauth": "OAuth",
+  "auth-none": "Nessuna autenticazione",
+  "unnamed-action": "Azione senza nome",
+  "try-again": "Riprova",
+  "no-gateway-found": "Nessun connector trovato.",
+  "no-built-in-found": "Nessun connettore integrato trovato.",
+  "loading": "Caricamento…",
+  "updating": "Aggiornamento…",
+  "loading-more": "Caricamento di altri elementi…",
+  "new": "Nuovo",
+  "installed": "Installato",
+  "local-integration": "Integrazione locale",
+  "authentication": "Autenticazione",
+  "oauth-title": "Connetti con OAuth",
+  "oauth-desc": "Eigent aprirà la pagina di autorizzazione del fornitore. Questa finestra completerà l’installazione al termine dell’autorizzazione.",
+  "oauth-scopes": "Autorizzazioni richieste: {{scopes}}",
+  "no-auth-desc": "Questo connettore non richiede credenziali.",
+  "waiting-authorization": "In attesa del completamento dell’autorizzazione…",
+  "authorization-started": "Autorizzazione avviata",
+  "installed-toast": "{{name}} installato",
+  "no-authorization-url": "Il connettore non ha restituito un URL di autorizzazione",
+  "authorization-pending": "L’autorizzazione è ancora in sospeso. Completala nella finestra del fornitore, quindi riprova.",
+  "install-failed": "Impossibile installare il connettore",
+  "detail-load-failed": "Impossibile caricare i dettagli del connettore",
+  "authorization-incomplete": "L’autorizzazione non è ancora completa. Completala nella finestra del fornitore e aggiorna nuovamente lo stato.",
+  "refresh-status-failed": "Impossibile aggiornare lo stato del connettore",
+  "field-required": "{{field}} è obbligatorio",
+  "complete-authorization": "Completa l’autorizzazione nella finestra del fornitore.",
+  "refresh-status": "Aggiorna stato",
+  "built-in-auth-desc": "L’installazione apre il flusso di autorizzazione del fornitore in una finestra separata.",
+  "built-in-generic-desc": "Un’integrazione locale di Eigent.",
+  "cancel": "Annulla",
+  "install": "Installa",
+  "installing": "Installazione…",
+  "save": "Salva",
+  "enter-value": "Inserisci {{field}}",
+  "custom-title": "Aggiungi connettore personalizzato",
+  "custom-subtitle": "Installa un server MCP locale o remoto attendibile.",
+  "custom-warning": "I server MCP personalizzati possono eseguire comandi o accedere a servizi remoti. Installa solo configurazioni attendibili.",
+  "local-json-desc": "Aggiungi un server MCP locale fornendo una configurazione JSON valida.",
+  "learn-more": "Scopri di più",
+  "connector-name": "Nome del connettore",
+  "remote-name-placeholder": "Il mio MCP remoto",
+  "remote-url": "URL MCP remoto",
+  "remote-url-note": "Usa HTTPS per i server esterni a una rete locale attendibile.",
+  "invalid-json": "JSON non valido: {{message}}",
+  "json-format-error": "Errore di formato JSON: {{message}}",
+  "parse-failed": "Analisi non riuscita",
+  "missing-mcp-servers": "La configurazione deve contenere un oggetto mcpServers",
+  "add-at-least-one": "Aggiungi almeno un server MCP",
+  "already-exists": "{{name}} esiste già",
+  "name-required": "Il nome del connettore è obbligatorio",
+  "invalid-remote-url": "Inserisci un URL MCP remoto valido",
+  "remote-url-protocol": "Gli URL MCP remoti devono utilizzare HTTP o HTTPS",
+  "remote-missing-id": "Il connettore remoto è stato creato senza ID",
+  "custom-installed": "Connettori personalizzati installati: {{num}}",
+  "install-custom-failed": "Impossibile installare il connettore personalizzato",
+  "env-key-value": "Variabili d’ambiente (chiave-valore)",
+  "value-placeholder": "Valore",
+  "configuration-title": "Configurazione",
+  "google-api-key": "Chiave API Google",
+  "google-api-key-placeholder": "Inserisci la chiave API Google da Google Cloud Console",
+  "google-api-key-note": "Come ottenere la chiave API Google → https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "ID del motore di ricerca",
+  "search-engine-id-placeholder": "Inserisci l’ID del motore di ricerca personalizzato associato alla chiave API",
+  "google-search-custom-desc": "Connetti Google Custom Search. Sono richiesti una chiave API Google e un ID del motore di ricerca personalizzato (CSE).",
+  "google-search-default-desc": "La Ricerca Google è abilitata per impostazione predefinita. Non è richiesta alcuna chiave API."
+}
diff --git a/src/i18n/locales/it/index.ts b/src/i18n/locales/it/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/it/index.ts
+++ b/src/i18n/locales/it/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/i18n/locales/ja/connectors.json b/src/i18n/locales/ja/connectors.json
new file mode 100644
index 000000000..839d73540
--- /dev/null
+++ b/src/i18n/locales/ja/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "コネクタ",
+  "search-placeholder": "コネクタを検索",
+  "browse": "コネクタを探す",
+  "add-custom": "カスタムを追加",
+  "retry": "再試行",
+  "your-connectors": "あなたのコネクタ",
+  "no-matching": "一致するコネクタがありません。",
+  "count-one": "件のコネクタ",
+  "count-other": "件のコネクタ",
+  "recommended": "あなたへのおすすめコネクタ。",
+  "no-recommended": "おすすめのコネクタはありません。",
+  "gateway-unavailable": "Connectors は利用できません。",
+  "gateway-unavailable-desc": "このデプロイでは Connector Gateway が有効になっていません。",
+  "gateway-connectors": "Connectors",
+  "source-open": "クラウド",
+  "source-built-in": "組み込み",
+  "source-local": "ローカル",
+  "source-remote": "リモート",
+  "load-built-in-failed": "組み込みコネクタの読み込みに失敗しました",
+  "load-custom-failed": "カスタムコネクタの読み込みに失敗しました",
+  "load-gateway-failed": "Connectors の読み込みに失敗しました",
+  "disconnected": "{{name}} の接続を解除しました",
+  "disconnect-failed": "コネクタの接続解除に失敗しました",
+  "update-failed": "コネクタの更新に失敗しました",
+  "status-save-failed-enabled": "コネクタは有効になりましたが、状態の保存に失敗しました。更新して再試行してください。",
+  "status-save-failed-disabled": "コネクタは無効になりましたが、状態の保存に失敗しました。更新して再試行してください。",
+  "updated": "コネクタを更新しました",
+  "save-failed": "コネクタの保存に失敗しました",
+  "deleted": "コネクタを削除しました",
+  "delete-failed": "コネクタの削除に失敗しました",
+  "enable-connector": "コネクタを有効化",
+  "disable-connector": "コネクタを無効化",
+  "more-actions": "その他の操作",
+  "open": "開く",
+  "edit": "編集",
+  "delete": "削除",
+  "connected-account": "接続中のアカウント",
+  "supported-actions": "対応アクション",
+  "supported-actions-count": "{{num}} 件の対応アクション",
+  "show-more": "もっと見る",
+  "show-less": "折りたたむ",
+  "provider-website": "プロバイダーのウェブサイト",
+  "built-in-title": "ローカル互換コネクタ",
+  "built-in-desc": "このコネクタは Eigent のローカル統合ランタイムを使用します。Connector Gateway は新しいホスト型統合の主要マーケットプレイスです。",
+  "configuration": "設定項目：{{vars}}",
+  "status": "ステータス",
+  "active": "有効",
+  "disabled": "無効",
+  "server-url": "サーバー URL",
+  "not-configured": "未設定",
+  "command": "コマンド",
+  "arguments": "引数",
+  "requires": "{{vars}} が必要です",
+  "notion-desc": "Notion ワークスペースを接続します。",
+  "google-calendar-desc": "Google カレンダーの予定とスケジュールを管理します。",
+  "generic-desc": "{{name}} を Eigent に接続します。",
+  "google-search": "Google 検索",
+  "google-search-desc": "ブラウザやリサーチタスク用に Google カスタム検索を接続します。",
+  "notion-install-failed": "Notion のインストールに失敗しました",
+  "google-calendar-install-failed": "Google カレンダーのインストールに失敗しました",
+  "search-connectors": "コネクタを検索",
+  "auth-api-key": "API キー",
+  "auth-credential": "認証情報",
+  "auth-oauth": "OAuth",
+  "auth-none": "認証不要",
+  "unnamed-action": "名称未設定のアクション",
+  "try-again": "再試行",
+  "no-gateway-found": "Connectors が見つかりません。",
+  "no-built-in-found": "組み込みコネクタが見つかりません。",
+  "loading": "読み込み中…",
+  "updating": "更新中…",
+  "loading-more": "さらに読み込み中…",
+  "new": "新着",
+  "installed": "インストール済み",
+  "local-integration": "ローカル統合",
+  "authentication": "認証",
+  "oauth-title": "OAuth で接続",
+  "oauth-desc": "Eigent がプロバイダーの認可ページを開きます。認可が完了すると、このダイアログでインストールが完了します。",
+  "oauth-scopes": "要求されるスコープ：{{scopes}}",
+  "no-auth-desc": "このコネクタに認証情報は不要です。",
+  "waiting-authorization": "認可の完了を待っています…",
+  "authorization-started": "認可を開始しました",
+  "installed-toast": "{{name}} をインストールしました",
+  "no-authorization-url": "コネクタが認可 URL を返しませんでした",
+  "authorization-pending": "認可はまだ完了していません。プロバイダーのウィンドウで完了してから再試行してください。",
+  "install-failed": "コネクタのインストールに失敗しました",
+  "detail-load-failed": "コネクタの詳細の読み込みに失敗しました",
+  "authorization-incomplete": "認可がまだ完了していません。プロバイダーのウィンドウで完了してから再度更新してください。",
+  "refresh-status-failed": "コネクタの状態の更新に失敗しました",
+  "field-required": "{{field}} は必須です",
+  "complete-authorization": "プロバイダーのウィンドウで認可を完了してください。",
+  "refresh-status": "状態を更新",
+  "built-in-auth-desc": "インストール時に別ウィンドウでプロバイダーの認可フローが開きます。",
+  "built-in-generic-desc": "Eigent のローカル統合です。",
+  "cancel": "キャンセル",
+  "install": "インストール",
+  "installing": "インストール中…",
+  "save": "保存",
+  "enter-value": "{{field}} を入力",
+  "custom-title": "カスタムコネクタを追加",
+  "custom-subtitle": "信頼できるローカルまたはリモートの MCP サーバーをインストールします。",
+  "custom-warning": "カスタム MCP サーバーはコマンドの実行やリモートサービスへのアクセスが可能です。信頼できる設定のみをインストールしてください。",
+  "local-json-desc": "有効な JSON 設定を指定してローカル MCP サーバーを追加します。",
+  "learn-more": "詳細",
+  "connector-name": "コネクタ名",
+  "remote-name-placeholder": "マイリモート MCP",
+  "remote-url": "リモート MCP URL",
+  "remote-url-note": "信頼できるローカルネットワーク外のサーバーには HTTPS を使用してください。",
+  "invalid-json": "無効な JSON：{{message}}",
+  "json-format-error": "JSON 形式エラー：{{message}}",
+  "parse-failed": "解析に失敗しました",
+  "missing-mcp-servers": "設定には mcpServers オブジェクトが必要です",
+  "add-at-least-one": "MCP サーバーを少なくとも 1 つ追加してください",
+  "already-exists": "{{name}} は既に存在します",
+  "name-required": "コネクタ名は必須です",
+  "invalid-remote-url": "有効なリモート MCP URL を入力してください",
+  "remote-url-protocol": "リモート MCP URL は HTTP または HTTPS を使用する必要があります",
+  "remote-missing-id": "リモートコネクタが ID なしで作成されました",
+  "custom-installed": "{{num}} 件のカスタムコネクタをインストールしました",
+  "install-custom-failed": "カスタムコネクタのインストールに失敗しました",
+  "env-key-value": "環境変数（キーと値）",
+  "value-placeholder": "値",
+  "configuration-title": "設定",
+  "google-api-key": "Google API キー",
+  "google-api-key-placeholder": "Google Cloud Console の API キーを入力してください",
+  "google-api-key-note": "Google API キーの取得方法 → https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "検索エンジン ID",
+  "search-engine-id-placeholder": "API キーに関連付けられたカスタム検索エンジン ID を入力してください",
+  "google-search-custom-desc": "Google カスタム検索に接続します。Google API キーとカスタム検索エンジン（CSE）ID が必要です。",
+  "google-search-default-desc": "Google 検索はデフォルトで有効です。API キーは必要ありません。"
+}
diff --git a/src/i18n/locales/ja/index.ts b/src/i18n/locales/ja/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/ja/index.ts
+++ b/src/i18n/locales/ja/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/i18n/locales/ko/connectors.json b/src/i18n/locales/ko/connectors.json
new file mode 100644
index 000000000..43f70f2b7
--- /dev/null
+++ b/src/i18n/locales/ko/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "커넥터",
+  "search-placeholder": "내 커넥터 검색",
+  "browse": "커넥터 찾아보기",
+  "add-custom": "사용자 지정 추가",
+  "retry": "다시 시도",
+  "your-connectors": "내 커넥터",
+  "no-matching": "일치하는 커넥터가 없습니다.",
+  "count-one": "개 커넥터",
+  "count-other": "개 커넥터",
+  "recommended": "추천 커넥터입니다.",
+  "no-recommended": "사용 가능한 추천 커넥터가 없습니다.",
+  "gateway-unavailable": "Connectors를 사용할 수 없습니다.",
+  "gateway-unavailable-desc": "이 배포에서는 Connector Gateway가 활성화되어 있지 않습니다.",
+  "gateway-connectors": "Connectors",
+  "source-open": "클라우드",
+  "source-built-in": "기본 제공",
+  "source-local": "로컬",
+  "source-remote": "원격",
+  "load-built-in-failed": "기본 제공 커넥터를 불러오지 못했습니다",
+  "load-custom-failed": "사용자 지정 커넥터를 불러오지 못했습니다",
+  "load-gateway-failed": "Connectors를 불러오지 못했습니다",
+  "disconnected": "{{name}} 연결이 해제되었습니다",
+  "disconnect-failed": "커넥터 연결을 해제하지 못했습니다",
+  "update-failed": "커넥터를 업데이트하지 못했습니다",
+  "status-save-failed-enabled": "커넥터가 활성화되었지만 상태를 저장하지 못했습니다. 새로 고친 후 다시 시도하세요.",
+  "status-save-failed-disabled": "커넥터가 비활성화되었지만 상태를 저장하지 못했습니다. 새로 고친 후 다시 시도하세요.",
+  "updated": "커넥터가 업데이트되었습니다",
+  "save-failed": "커넥터를 저장하지 못했습니다",
+  "deleted": "커넥터가 삭제되었습니다",
+  "delete-failed": "커넥터를 삭제하지 못했습니다",
+  "enable-connector": "커넥터 활성화",
+  "disable-connector": "커넥터 비활성화",
+  "more-actions": "추가 작업",
+  "open": "열기",
+  "edit": "편집",
+  "delete": "삭제",
+  "connected-account": "연결된 계정",
+  "supported-actions": "지원되는 작업",
+  "supported-actions-count": "지원되는 작업 {{num}}개",
+  "show-more": "더 보기",
+  "show-less": "간략히 보기",
+  "provider-website": "제공업체 웹사이트",
+  "built-in-title": "로컬 호환 커넥터",
+  "built-in-desc": "이 커넥터는 Eigent의 로컬 통합 런타임을 사용합니다. Connector Gateway는 새로운 호스팅 통합을 위한 기본 마켓플레이스입니다.",
+  "configuration": "구성: {{vars}}",
+  "status": "상태",
+  "active": "활성",
+  "disabled": "비활성",
+  "server-url": "서버 URL",
+  "not-configured": "구성되지 않음",
+  "command": "명령어",
+  "arguments": "인수",
+  "requires": "{{vars}} 필요",
+  "notion-desc": "Notion 워크스페이스를 연결합니다.",
+  "google-calendar-desc": "Google Calendar 일정과 스케줄을 관리합니다.",
+  "generic-desc": "{{name}}을(를) Eigent에 연결합니다.",
+  "google-search": "Google 검색",
+  "google-search-desc": "브라우저 및 리서치 작업에 Google Custom Search를 연결합니다.",
+  "notion-install-failed": "Notion을 설치하지 못했습니다",
+  "google-calendar-install-failed": "Google Calendar를 설치하지 못했습니다",
+  "search-connectors": "커넥터 검색",
+  "auth-api-key": "API 키",
+  "auth-credential": "자격 증명",
+  "auth-oauth": "OAuth",
+  "auth-none": "인증 없음",
+  "unnamed-action": "이름 없는 작업",
+  "try-again": "다시 시도",
+  "no-gateway-found": "Connectors를 찾을 수 없습니다.",
+  "no-built-in-found": "기본 제공 커넥터를 찾을 수 없습니다.",
+  "loading": "불러오는 중…",
+  "updating": "업데이트 중…",
+  "loading-more": "더 불러오는 중…",
+  "new": "신규",
+  "installed": "설치됨",
+  "local-integration": "로컬 통합",
+  "authentication": "인증",
+  "oauth-title": "OAuth로 연결",
+  "oauth-desc": "Eigent가 제공업체의 인증 페이지를 엽니다. 인증이 완료되면 이 대화 상자에서 설치가 완료됩니다.",
+  "oauth-scopes": "요청된 권한: {{scopes}}",
+  "no-auth-desc": "이 커넥터에는 자격 증명이 필요하지 않습니다.",
+  "waiting-authorization": "인증 완료 대기 중…",
+  "authorization-started": "인증이 시작되었습니다",
+  "installed-toast": "{{name}}이(가) 설치되었습니다",
+  "no-authorization-url": "커넥터가 인증 URL을 반환하지 않았습니다",
+  "authorization-pending": "인증이 아직 진행 중입니다. 제공업체 창에서 완료한 후 다시 시도하세요.",
+  "install-failed": "커넥터를 설치하지 못했습니다",
+  "detail-load-failed": "커넥터 세부 정보를 불러오지 못했습니다",
+  "authorization-incomplete": "인증이 아직 완료되지 않았습니다. 제공업체 창에서 완료한 후 상태를 다시 새로 고치세요.",
+  "refresh-status-failed": "커넥터 상태를 새로 고치지 못했습니다",
+  "field-required": "{{field}}은(는) 필수입니다",
+  "complete-authorization": "제공업체 창에서 인증을 완료하세요.",
+  "refresh-status": "상태 새로 고침",
+  "built-in-auth-desc": "설치하면 별도 창에서 제공업체 인증 절차가 열립니다.",
+  "built-in-generic-desc": "Eigent 로컬 통합입니다.",
+  "cancel": "취소",
+  "install": "설치",
+  "installing": "설치 중…",
+  "save": "저장",
+  "enter-value": "{{field}} 입력",
+  "custom-title": "사용자 지정 커넥터 추가",
+  "custom-subtitle": "신뢰할 수 있는 로컬 또는 원격 MCP 서버를 설치합니다.",
+  "custom-warning": "사용자 지정 MCP 서버는 명령을 실행하거나 원격 서비스에 접근할 수 있습니다. 신뢰할 수 있는 구성만 설치하세요.",
+  "local-json-desc": "유효한 JSON 구성을 입력하여 로컬 MCP 서버를 추가합니다.",
+  "learn-more": "자세히 알아보기",
+  "connector-name": "커넥터 이름",
+  "remote-name-placeholder": "내 원격 MCP",
+  "remote-url": "원격 MCP URL",
+  "remote-url-note": "신뢰할 수 있는 로컬 네트워크 외부의 서버에는 HTTPS를 사용하세요.",
+  "invalid-json": "잘못된 JSON: {{message}}",
+  "json-format-error": "JSON 형식 오류: {{message}}",
+  "parse-failed": "구문 분석 실패",
+  "missing-mcp-servers": "구성에 mcpServers 객체가 있어야 합니다",
+  "add-at-least-one": "MCP 서버를 하나 이상 추가하세요",
+  "already-exists": "{{name}}이(가) 이미 있습니다",
+  "name-required": "커넥터 이름은 필수입니다",
+  "invalid-remote-url": "유효한 원격 MCP URL을 입력하세요",
+  "remote-url-protocol": "원격 MCP URL은 HTTP 또는 HTTPS를 사용해야 합니다",
+  "remote-missing-id": "원격 커넥터가 ID 없이 생성되었습니다",
+  "custom-installed": "사용자 지정 커넥터 {{num}}개가 설치되었습니다",
+  "install-custom-failed": "사용자 지정 커넥터를 설치하지 못했습니다",
+  "env-key-value": "환경 변수(키-값)",
+  "value-placeholder": "값",
+  "configuration-title": "구성",
+  "google-api-key": "Google API 키",
+  "google-api-key-placeholder": "Google Cloud Console의 Google API 키를 입력하세요",
+  "google-api-key-note": "Google API 키를 발급받는 방법 → https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "검색 엔진 ID",
+  "search-engine-id-placeholder": "API 키와 연결된 Custom Search Engine ID를 입력하세요",
+  "google-search-custom-desc": "Google Custom Search를 연결합니다. Google API 키와 Custom Search Engine(CSE) ID가 필요합니다.",
+  "google-search-default-desc": "Google 검색은 기본적으로 활성화되어 있습니다. API 키가 필요하지 않습니다."
+}
diff --git a/src/i18n/locales/ko/index.ts b/src/i18n/locales/ko/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/ko/index.ts
+++ b/src/i18n/locales/ko/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/i18n/locales/ru/connectors.json b/src/i18n/locales/ru/connectors.json
new file mode 100644
index 000000000..5549504ee
--- /dev/null
+++ b/src/i18n/locales/ru/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "Коннекторы",
+  "search-placeholder": "Поиск по вашим коннекторам",
+  "browse": "Обзор коннекторов",
+  "add-custom": "Добавить свой",
+  "retry": "Повторить",
+  "your-connectors": "Ваши коннекторы",
+  "no-matching": "Подходящие коннекторы не найдены.",
+  "count-one": "коннектор",
+  "count-other": "коннекторов",
+  "recommended": "Рекомендованные для вас коннекторы.",
+  "no-recommended": "Нет доступных рекомендованных коннекторов.",
+  "gateway-unavailable": "Connectors недоступны.",
+  "gateway-unavailable-desc": "Connector Gateway не включён для этого развёртывания.",
+  "gateway-connectors": "Connectors",
+  "source-open": "Облако",
+  "source-built-in": "Встроенный",
+  "source-local": "Локальный",
+  "source-remote": "Удалённый",
+  "load-built-in-failed": "Не удалось загрузить встроенные коннекторы",
+  "load-custom-failed": "Не удалось загрузить пользовательские коннекторы",
+  "load-gateway-failed": "Не удалось загрузить connectors",
+  "disconnected": "{{name}} отключён",
+  "disconnect-failed": "Не удалось отключить коннектор",
+  "update-failed": "Не удалось обновить коннектор",
+  "status-save-failed-enabled": "Коннектор включён, но сохранить его состояние не удалось. Обновите страницу и повторите попытку.",
+  "status-save-failed-disabled": "Коннектор отключён, но сохранить его состояние не удалось. Обновите страницу и повторите попытку.",
+  "updated": "Коннектор обновлён",
+  "save-failed": "Не удалось сохранить коннектор",
+  "deleted": "Коннектор удалён",
+  "delete-failed": "Не удалось удалить коннектор",
+  "enable-connector": "Включить коннектор",
+  "disable-connector": "Отключить коннектор",
+  "more-actions": "Другие действия",
+  "open": "Открыть",
+  "edit": "Изменить",
+  "delete": "Удалить",
+  "connected-account": "Подключённая учётная запись",
+  "supported-actions": "Поддерживаемые действия",
+  "supported-actions-count": "Поддерживаемых действий: {{num}}",
+  "show-more": "Показать больше",
+  "show-less": "Показать меньше",
+  "provider-website": "Сайт поставщика",
+  "built-in-title": "Локальный коннектор совместимости",
+  "built-in-desc": "Этот коннектор использует локальную среду интеграции Eigent. Connector Gateway — основной каталог новых облачных интеграций.",
+  "configuration": "Конфигурация: {{vars}}",
+  "status": "Состояние",
+  "active": "Активен",
+  "disabled": "Отключён",
+  "server-url": "URL сервера",
+  "not-configured": "Не настроено",
+  "command": "Команда",
+  "arguments": "Аргументы",
+  "requires": "Требуется: {{vars}}",
+  "notion-desc": "Подключить рабочее пространство Notion.",
+  "google-calendar-desc": "Управлять событиями и расписаниями Google Календаря.",
+  "generic-desc": "Подключить {{name}} к Eigent.",
+  "google-search": "Поиск Google",
+  "google-search-desc": "Подключить Google Custom Search для задач браузера и поиска информации.",
+  "notion-install-failed": "Не удалось установить Notion",
+  "google-calendar-install-failed": "Не удалось установить Google Календарь",
+  "search-connectors": "Поиск коннекторов",
+  "auth-api-key": "Ключ API",
+  "auth-credential": "Учётные данные",
+  "auth-oauth": "OAuth",
+  "auth-none": "Без аутентификации",
+  "unnamed-action": "Действие без названия",
+  "try-again": "Повторить",
+  "no-gateway-found": "Connectors не найдены.",
+  "no-built-in-found": "Встроенные коннекторы не найдены.",
+  "loading": "Загрузка…",
+  "updating": "Обновление…",
+  "loading-more": "Загрузка дополнительных элементов…",
+  "new": "Новый",
+  "installed": "Установлен",
+  "local-integration": "Локальная интеграция",
+  "authentication": "Аутентификация",
+  "oauth-title": "Подключение через OAuth",
+  "oauth-desc": "Eigent откроет страницу авторизации поставщика. После завершения авторизации установка будет завершена в этом диалоговом окне.",
+  "oauth-scopes": "Запрашиваемые разрешения: {{scopes}}",
+  "no-auth-desc": "Для этого коннектора не требуются учётные данные.",
+  "waiting-authorization": "Ожидание завершения авторизации…",
+  "authorization-started": "Авторизация начата",
+  "installed-toast": "{{name}} установлен",
+  "no-authorization-url": "Коннектор не вернул URL авторизации",
+  "authorization-pending": "Авторизация ещё не завершена. Завершите её в окне поставщика и повторите попытку.",
+  "install-failed": "Не удалось установить коннектор",
+  "detail-load-failed": "Не удалось загрузить сведения о коннекторе",
+  "authorization-incomplete": "Авторизация ещё не завершена. Завершите её в окне поставщика и снова обновите состояние.",
+  "refresh-status-failed": "Не удалось обновить состояние коннектора",
+  "field-required": "Поле {{field}} обязательно",
+  "complete-authorization": "Завершите авторизацию в окне поставщика.",
+  "refresh-status": "Обновить состояние",
+  "built-in-auth-desc": "При установке процесс авторизации поставщика откроется в отдельном окне.",
+  "built-in-generic-desc": "Локальная интеграция Eigent.",
+  "cancel": "Отмена",
+  "install": "Установить",
+  "installing": "Установка…",
+  "save": "Сохранить",
+  "enter-value": "Введите {{field}}",
+  "custom-title": "Добавить пользовательский коннектор",
+  "custom-subtitle": "Установите доверенный локальный или удалённый MCP-сервер.",
+  "custom-warning": "Пользовательские MCP-серверы могут выполнять команды или обращаться к удалённым службам. Устанавливайте только конфигурации, которым доверяете.",
+  "local-json-desc": "Добавьте локальный MCP-сервер, указав корректную конфигурацию JSON.",
+  "learn-more": "Подробнее",
+  "connector-name": "Название коннектора",
+  "remote-name-placeholder": "Мой удалённый MCP",
+  "remote-url": "URL удалённого MCP",
+  "remote-url-note": "Используйте HTTPS для серверов за пределами доверенной локальной сети.",
+  "invalid-json": "Недопустимый JSON: {{message}}",
+  "json-format-error": "Ошибка формата JSON: {{message}}",
+  "parse-failed": "Не удалось выполнить разбор",
+  "missing-mcp-servers": "Конфигурация должна содержать объект mcpServers",
+  "add-at-least-one": "Добавьте хотя бы один MCP-сервер",
+  "already-exists": "{{name}} уже существует",
+  "name-required": "Необходимо указать название коннектора",
+  "invalid-remote-url": "Введите корректный URL удалённого MCP",
+  "remote-url-protocol": "URL удалённого MCP должен использовать HTTP или HTTPS",
+  "remote-missing-id": "Удалённый коннектор создан без идентификатора",
+  "custom-installed": "Установленные пользовательские коннекторы: {{num}}",
+  "install-custom-failed": "Не удалось установить пользовательский коннектор",
+  "env-key-value": "Переменные среды (ключ-значение)",
+  "value-placeholder": "Значение",
+  "configuration-title": "Конфигурация",
+  "google-api-key": "Ключ API Google",
+  "google-api-key-placeholder": "Введите ключ API Google из Google Cloud Console",
+  "google-api-key-note": "Как получить ключ API Google → https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "Идентификатор поисковой системы",
+  "search-engine-id-placeholder": "Введите идентификатор пользовательской поисковой системы, связанный с ключом API",
+  "google-search-custom-desc": "Подключите Google Custom Search. Требуются ключ API Google и идентификатор пользовательской поисковой системы (CSE).",
+  "google-search-default-desc": "Поиск Google включён по умолчанию. Ключ API не требуется."
+}
diff --git a/src/i18n/locales/ru/index.ts b/src/i18n/locales/ru/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/ru/index.ts
+++ b/src/i18n/locales/ru/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/i18n/locales/zh-Hans/connectors.json b/src/i18n/locales/zh-Hans/connectors.json
new file mode 100644
index 000000000..c8bdb712b
--- /dev/null
+++ b/src/i18n/locales/zh-Hans/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "连接器",
+  "search-placeholder": "搜索你的连接器",
+  "browse": "浏览连接器",
+  "add-custom": "添加自定义",
+  "retry": "重试",
+  "your-connectors": "你的连接器",
+  "no-matching": "没有匹配的连接器。",
+  "count-one": "个连接器",
+  "count-other": "个连接器",
+  "recommended": "为你推荐的连接器。",
+  "no-recommended": "暂无推荐的连接器。",
+  "gateway-unavailable": "连接器不可用。",
+  "gateway-unavailable-desc": "当前部署未启用 Connector Gateway。",
+  "gateway-connectors": "连接器",
+  "source-open": "云端",
+  "source-built-in": "内置",
+  "source-local": "本地",
+  "source-remote": "远程",
+  "load-built-in-failed": "加载内置连接器失败",
+  "load-custom-failed": "加载自定义连接器失败",
+  "load-gateway-failed": "加载连接器失败",
+  "disconnected": "{{name}} 已断开连接",
+  "disconnect-failed": "断开连接器失败",
+  "update-failed": "更新连接器失败",
+  "status-save-failed-enabled": "连接器已启用，但保存状态失败。请刷新后重试。",
+  "status-save-failed-disabled": "连接器已禁用，但保存状态失败。请刷新后重试。",
+  "updated": "连接器已更新",
+  "save-failed": "保存连接器失败",
+  "deleted": "连接器已删除",
+  "delete-failed": "删除连接器失败",
+  "enable-connector": "启用连接器",
+  "disable-connector": "禁用连接器",
+  "more-actions": "更多操作",
+  "open": "打开",
+  "edit": "编辑",
+  "delete": "删除",
+  "connected-account": "已连接账户",
+  "supported-actions": "支持的操作",
+  "supported-actions-count": "支持 {{num}} 项操作",
+  "show-more": "展开更多",
+  "show-less": "收起",
+  "provider-website": "服务商网站",
+  "built-in-title": "本地兼容连接器",
+  "built-in-desc": "此连接器使用 Eigent 的本地集成运行时。Connector Gateway 是新托管集成的主要市场。",
+  "configuration": "配置项：{{vars}}",
+  "status": "状态",
+  "active": "已启用",
+  "disabled": "已禁用",
+  "server-url": "服务器 URL",
+  "not-configured": "未配置",
+  "command": "命令",
+  "arguments": "参数",
+  "requires": "需要 {{vars}}",
+  "notion-desc": "连接 Notion 工作区。",
+  "google-calendar-desc": "管理 Google 日历的事件和日程。",
+  "generic-desc": "将 {{name}} 连接到 Eigent。",
+  "google-search": "Google 搜索",
+  "google-search-desc": "连接 Google 自定义搜索，用于浏览器和研究任务。",
+  "notion-install-failed": "安装 Notion 失败",
+  "google-calendar-install-failed": "安装 Google 日历失败",
+  "search-connectors": "搜索连接器",
+  "auth-api-key": "API 密钥",
+  "auth-credential": "凭证",
+  "auth-oauth": "OAuth",
+  "auth-none": "无需认证",
+  "unnamed-action": "未命名操作",
+  "try-again": "重试",
+  "no-gateway-found": "未找到连接器。",
+  "no-built-in-found": "未找到内置连接器。",
+  "loading": "加载中…",
+  "updating": "更新中…",
+  "loading-more": "加载更多…",
+  "new": "新",
+  "installed": "已安装",
+  "local-integration": "本地集成",
+  "authentication": "认证方式",
+  "oauth-title": "使用 OAuth 连接",
+  "oauth-desc": "Eigent 将打开服务商授权页面。授权完成后，此对话框将自动完成安装。",
+  "oauth-scopes": "请求的权限范围：{{scopes}}",
+  "no-auth-desc": "此连接器无需凭证。",
+  "waiting-authorization": "等待授权完成…",
+  "authorization-started": "授权已开始",
+  "installed-toast": "{{name}} 已安装",
+  "no-authorization-url": "连接器未返回授权 URL",
+  "authorization-pending": "授权仍在进行中。请在服务商窗口中完成授权后重试。",
+  "install-failed": "安装连接器失败",
+  "detail-load-failed": "加载连接器详情失败",
+  "authorization-incomplete": "授权尚未完成。请在服务商窗口中完成授权后再次刷新。",
+  "refresh-status-failed": "刷新连接器状态失败",
+  "field-required": "{{field}} 为必填项",
+  "complete-authorization": "请在服务商窗口中完成授权。",
+  "refresh-status": "刷新状态",
+  "built-in-auth-desc": "安装时将在单独窗口中打开服务商授权流程。",
+  "built-in-generic-desc": "一个 Eigent 本地集成。",
+  "cancel": "取消",
+  "install": "安装",
+  "installing": "安装中…",
+  "save": "保存",
+  "enter-value": "请输入 {{field}}",
+  "custom-title": "添加自定义连接器",
+  "custom-subtitle": "安装你信任的本地或远程 MCP 服务器。",
+  "custom-warning": "自定义 MCP 服务器可以执行命令或访问远程服务。请仅安装你信任的配置。",
+  "local-json-desc": "通过提供有效的 JSON 配置来添加本地 MCP 服务器。",
+  "learn-more": "了解更多",
+  "connector-name": "连接器名称",
+  "remote-name-placeholder": "我的远程 MCP",
+  "remote-url": "远程 MCP URL",
+  "remote-url-note": "对于可信本地网络之外的服务器，请使用 HTTPS。",
+  "invalid-json": "无效的 JSON：{{message}}",
+  "json-format-error": "JSON 格式错误：{{message}}",
+  "parse-failed": "解析失败",
+  "missing-mcp-servers": "配置必须包含 mcpServers 对象",
+  "add-at-least-one": "请至少添加一个 MCP 服务器",
+  "already-exists": "{{name}} 已存在",
+  "name-required": "连接器名称为必填项",
+  "invalid-remote-url": "请输入有效的远程 MCP URL",
+  "remote-url-protocol": "远程 MCP URL 必须使用 HTTP 或 HTTPS",
+  "remote-missing-id": "创建远程连接器时未返回 ID",
+  "custom-installed": "已安装 {{num}} 个自定义连接器",
+  "install-custom-failed": "安装自定义连接器失败",
+  "env-key-value": "环境变量（键值对）",
+  "value-placeholder": "值",
+  "configuration-title": "配置",
+  "google-api-key": "Google API 密钥",
+  "google-api-key-placeholder": "输入 Google Cloud Console 中的 Google API 密钥",
+  "google-api-key-note": "了解如何获取 Google API 密钥 → https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "搜索引擎 ID",
+  "search-engine-id-placeholder": "输入与你的 API 密钥关联的自定义搜索引擎 ID",
+  "google-search-custom-desc": "连接 Google 自定义搜索。需要 Google API 密钥和自定义搜索引擎（CSE）ID。",
+  "google-search-default-desc": "Google 搜索默认已启用，无需 API 密钥。"
+}
diff --git a/src/i18n/locales/zh-Hans/index.ts b/src/i18n/locales/zh-Hans/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/zh-Hans/index.ts
+++ b/src/i18n/locales/zh-Hans/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/i18n/locales/zh-Hant/connectors.json b/src/i18n/locales/zh-Hant/connectors.json
new file mode 100644
index 000000000..55a6a97fe
--- /dev/null
+++ b/src/i18n/locales/zh-Hant/connectors.json
@@ -0,0 +1,132 @@
+{
+  "title": "連接器",
+  "search-placeholder": "搜尋你的連接器",
+  "browse": "瀏覽連接器",
+  "add-custom": "新增自訂",
+  "retry": "重試",
+  "your-connectors": "你的連接器",
+  "no-matching": "沒有符合的連接器。",
+  "count-one": "個連接器",
+  "count-other": "個連接器",
+  "recommended": "為你推薦的連接器。",
+  "no-recommended": "暫無推薦的連接器。",
+  "gateway-unavailable": "連接器無法使用。",
+  "gateway-unavailable-desc": "目前部署未啟用 Connector Gateway。",
+  "gateway-connectors": "連接器",
+  "source-open": "雲端",
+  "source-built-in": "內建",
+  "source-local": "本機",
+  "source-remote": "遠端",
+  "load-built-in-failed": "載入內建連接器失敗",
+  "load-custom-failed": "載入自訂連接器失敗",
+  "load-gateway-failed": "載入連接器失敗",
+  "disconnected": "{{name}} 已中斷連接",
+  "disconnect-failed": "中斷連接器失敗",
+  "update-failed": "更新連接器失敗",
+  "status-save-failed-enabled": "連接器已啟用，但儲存狀態失敗。請重新整理後再試。",
+  "status-save-failed-disabled": "連接器已停用，但儲存狀態失敗。請重新整理後再試。",
+  "updated": "連接器已更新",
+  "save-failed": "儲存連接器失敗",
+  "deleted": "連接器已刪除",
+  "delete-failed": "刪除連接器失敗",
+  "enable-connector": "啟用連接器",
+  "disable-connector": "停用連接器",
+  "more-actions": "更多操作",
+  "open": "開啟",
+  "edit": "編輯",
+  "delete": "刪除",
+  "connected-account": "已連接帳戶",
+  "supported-actions": "支援的操作",
+  "supported-actions-count": "支援 {{num}} 項操作",
+  "show-more": "顯示更多",
+  "show-less": "收合",
+  "provider-website": "服務商網站",
+  "built-in-title": "本機相容連接器",
+  "built-in-desc": "此連接器使用 Eigent 的本機整合執行環境。Connector Gateway 是新託管整合的主要市集。",
+  "configuration": "設定項目：{{vars}}",
+  "status": "狀態",
+  "active": "已啟用",
+  "disabled": "已停用",
+  "server-url": "伺服器 URL",
+  "not-configured": "未設定",
+  "command": "指令",
+  "arguments": "參數",
+  "requires": "需要 {{vars}}",
+  "notion-desc": "連接 Notion 工作區。",
+  "google-calendar-desc": "管理 Google 日曆的活動與行程。",
+  "generic-desc": "將 {{name}} 連接到 Eigent。",
+  "google-search": "Google 搜尋",
+  "google-search-desc": "連接 Google 自訂搜尋，用於瀏覽器與研究任務。",
+  "notion-install-failed": "安裝 Notion 失敗",
+  "google-calendar-install-failed": "安裝 Google 日曆失敗",
+  "search-connectors": "搜尋連接器",
+  "auth-api-key": "API 金鑰",
+  "auth-credential": "憑證",
+  "auth-oauth": "OAuth",
+  "auth-none": "無需驗證",
+  "unnamed-action": "未命名操作",
+  "try-again": "再試一次",
+  "no-gateway-found": "找不到連接器。",
+  "no-built-in-found": "找不到內建連接器。",
+  "loading": "載入中…",
+  "updating": "更新中…",
+  "loading-more": "載入更多…",
+  "new": "新",
+  "installed": "已安裝",
+  "local-integration": "本機整合",
+  "authentication": "驗證方式",
+  "oauth-title": "使用 OAuth 連接",
+  "oauth-desc": "Eigent 將開啟服務商授權頁面。授權完成後，此對話框將自動完成安裝。",
+  "oauth-scopes": "要求的權限範圍：{{scopes}}",
+  "no-auth-desc": "此連接器無需憑證。",
+  "waiting-authorization": "等待授權完成…",
+  "authorization-started": "授權已開始",
+  "installed-toast": "{{name}} 已安裝",
+  "no-authorization-url": "連接器未回傳授權 URL",
+  "authorization-pending": "授權仍在進行中。請在服務商視窗中完成授權後再試。",
+  "install-failed": "安裝連接器失敗",
+  "detail-load-failed": "載入連接器詳細資訊失敗",
+  "authorization-incomplete": "授權尚未完成。請在服務商視窗中完成授權後再次重新整理。",
+  "refresh-status-failed": "重新整理連接器狀態失敗",
+  "field-required": "{{field}} 為必填欄位",
+  "complete-authorization": "請在服務商視窗中完成授權。",
+  "refresh-status": "重新整理狀態",
+  "built-in-auth-desc": "安裝時將在獨立視窗中開啟服務商授權流程。",
+  "built-in-generic-desc": "一個 Eigent 本機整合。",
+  "cancel": "取消",
+  "install": "安裝",
+  "installing": "安裝中…",
+  "save": "儲存",
+  "enter-value": "請輸入 {{field}}",
+  "custom-title": "新增自訂連接器",
+  "custom-subtitle": "安裝你信任的本機或遠端 MCP 伺服器。",
+  "custom-warning": "自訂 MCP 伺服器可以執行指令或存取遠端服務。請僅安裝你信任的設定。",
+  "local-json-desc": "透過提供有效的 JSON 設定來新增本機 MCP 伺服器。",
+  "learn-more": "瞭解更多",
+  "connector-name": "連接器名稱",
+  "remote-name-placeholder": "我的遠端 MCP",
+  "remote-url": "遠端 MCP URL",
+  "remote-url-note": "對於可信本機網路以外的伺服器，請使用 HTTPS。",
+  "invalid-json": "無效的 JSON：{{message}}",
+  "json-format-error": "JSON 格式錯誤：{{message}}",
+  "parse-failed": "解析失敗",
+  "missing-mcp-servers": "設定必須包含 mcpServers 物件",
+  "add-at-least-one": "請至少新增一個 MCP 伺服器",
+  "already-exists": "{{name}} 已存在",
+  "name-required": "連接器名稱為必填",
+  "invalid-remote-url": "請輸入有效的遠端 MCP URL",
+  "remote-url-protocol": "遠端 MCP URL 必須使用 HTTP 或 HTTPS",
+  "remote-missing-id": "建立遠端連接器時未回傳 ID",
+  "custom-installed": "已安裝 {{num}} 個自訂連接器",
+  "install-custom-failed": "安裝自訂連接器失敗",
+  "env-key-value": "環境變數（鍵值對）",
+  "value-placeholder": "值",
+  "configuration-title": "設定",
+  "google-api-key": "Google API 金鑰",
+  "google-api-key-placeholder": "輸入 Google Cloud Console 中的 Google API 金鑰",
+  "google-api-key-note": "瞭解如何取得 Google API 金鑰 → https://developers.google.com/custom-search/v1/overview",
+  "search-engine-id": "搜尋引擎 ID",
+  "search-engine-id-placeholder": "輸入與你的 API 金鑰相關聯的自訂搜尋引擎 ID",
+  "google-search-custom-desc": "連接 Google 自訂搜尋。需要 Google API 金鑰和自訂搜尋引擎（CSE）ID。",
+  "google-search-default-desc": "Google 搜尋預設已啟用，無需 API 金鑰。"
+}
diff --git a/src/i18n/locales/zh-Hant/index.ts b/src/i18n/locales/zh-Hant/index.ts
index efa753446..ae235fb7b 100644
--- a/src/i18n/locales/zh-Hant/index.ts
+++ b/src/i18n/locales/zh-Hant/index.ts
@@ -14,6 +14,7 @@
 
 import agents from './agents.json';
 import chat from './chat.json';
+import connectors from './connectors.json';
 import dashboard from './dashboard.json';
 import layout from './layout.json';
 import setting from './setting.json';
@@ -26,6 +27,7 @@ export default {
   dashboard,
   workforce,
   chat,
+  connectors,
   setting,
   update,
   triggers,
diff --git a/src/pages/Connectors/ConnectorGateway.tsx b/src/pages/Connectors/ConnectorGateway.tsx
new file mode 100644
index 000000000..9acdcc639
--- /dev/null
+++ b/src/pages/Connectors/ConnectorGateway.tsx
@@ -0,0 +1,1425 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { mcpInstall, mcpRemove, mcpUpdate } from '@/api/brain';
+import {
+  disconnectProvider,
+  fetchConnectedProviders,
+  fetchConnectorProvider,
+  fetchConnectorProviders,
+  invalidateConnectorProvidersCache,
+  prefetchConnectorProviders,
+  type ConnectorProvider,
+} from '@/api/connectors';
+import {
+  fetchPost,
+  proxyFetchDelete,
+  proxyFetchGet,
+  proxyFetchPost,
+  proxyFetchPut,
+} from '@/api/http';
+import SearchInput from '@/components/Dashboard/SearchInput';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Switch } from '@/components/ui/switch';
+import {
+  useIntegrationManagement,
+  type IntegrationItem,
+} from '@/hooks/useIntegrationManagement';
+import { capitalizeFirstLetter, getProxyBaseURL } from '@/lib';
+import { integrationLeadingIconUrl } from '@/lib/connectorIcons';
+import { useAuthStore } from '@/store/authStore';
+import { useServerCapabilityStore } from '@/store/serverCapabilityStore';
+import type { TFunction } from 'i18next';
+import {
+  BadgeCheck,
+  ChevronDown,
+  Ellipsis,
+  ExternalLink,
+  Hammer,
+  Pencil,
+  Plus,
+  RefreshCw,
+  Server,
+  Settings,
+  Trash2,
+  Wrench,
+} from 'lucide-react';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import AddConnectorDialog, {
+  ProviderIcon,
+  actionLabel,
+  isConnectedProvider,
+  providerActionCount,
+  providerLabel,
+  type AddConnectorTarget,
+} from './components/AddConnectorDialog';
+import AddCustomConnectorDialog from './components/AddCustomConnectorDialog';
+import { GoogleSearchPanel } from './components/GoogleSearchPanel';
+import MCPConfigDialog from './components/MCPConfigDialog';
+import MCPDeleteDialog from './components/MCPDeleteDialog';
+import type {
+  ConnectorInstallHint,
+  MCPConfigForm,
+  MCPUserItem,
+} from './components/types';
+import { arrayToArgsJson, parseArgsToArray } from './components/utils';
+
+const IS_LOCAL_MODE = import.meta.env.VITE_USE_LOCAL_PROXY === 'true';
+const OVERVIEW_ID = '__overview__';
+const HIDDEN_BUILT_INS = new Set([
+  'RAG',
+  'X(Twitter)',
+  'WhatsApp',
+  'Reddit',
+  'Github',
+]);
+
+/** Preferred hosted connector service keys for the overview recommendations. */
+const RECOMMENDED_SERVICE_KEYS = [
+  ['slack'],
+  ['notion'],
+  ['gmail', 'google_gmail'],
+  ['google_drive', 'googledrive', 'google-drive'],
+  ['github'],
+  ['google_calendar', 'googlecalendar', 'google-calendar'],
+  ['stripe'],
+  ['feishu', 'lark'],
+] as const;
+
+type ConnectorListItem =
+  | {
+      id: string;
+      source: 'open';
+      name: string;
+      active: true;
+      provider: ConnectorProvider;
+    }
+  | {
+      id: string;
+      source: 'builtin';
+      name: string;
+      active: true;
+      item: IntegrationItem;
+    }
+  | {
+      id: string;
+      source: 'custom';
+      name: string;
+      active: boolean;
+      subtype: 'local' | 'remote';
+      item: MCPUserItem;
+    };
+
+async function upsertConfigValue(group: string, name: string, value: string) {
+  const response = await proxyFetchGet('/api/v1/configs');
+  const configs = Array.isArray(response) ? response : [];
+  const existing = configs.find((config: any) => config.config_name === name);
+  const payload = {
+    config_group: group,
+    config_name: name,
+    config_value: value,
+  };
+  if (existing) {
+    await proxyFetchPut(`/api/v1/configs/${existing.id}`, payload);
+  } else {
+    await proxyFetchPost('/api/v1/configs', payload);
+  }
+}
+
+function createBuiltInInstallAction(
+  key: string,
+  t: TFunction
+): () => Promise<void> | void {
+  if (key === 'Search') return () => undefined;
+  if (key === 'Notion') {
+    return async () => {
+      const response = await fetchPost('/install/tool/notion');
+      if (!response?.success) {
+        throw new Error(
+          response?.error || t('connectors.notion-install-failed')
+        );
+      }
+      await upsertConfigValue(
+        'Notion',
+        'MCP_REMOTE_CONFIG_DIR',
+        response.toolkit_name || 'NotionMCPToolkit'
+      );
+    };
+  }
+  if (key === 'Google Calendar') {
+    return async () => {
+      const response = await fetchPost('/install/tool/google_calendar');
+      if (response?.success) {
+        await upsertConfigValue(
+          'Google Calendar',
+          'GOOGLE_REFRESH_TOKEN',
+          'exists'
+        );
+        return;
+      }
+      if (response?.status !== 'authorizing') {
+        throw new Error(
+          response?.error ||
+            response?.message ||
+            t('connectors.google-calendar-install-failed')
+        );
+      }
+    };
+  }
+
+  return () => {
+    const baseUrl = getProxyBaseURL();
+    window.open(
+      `${baseUrl}/api/v1/oauth/${key.toLowerCase()}/login`,
+      '_blank',
+      'width=600,height=700'
+    );
+  };
+}
+
+function buildBuiltInItems(response: unknown, t: TFunction): IntegrationItem[] {
+  const info =
+    response && typeof response === 'object'
+      ? (response as Record<string, any>)
+      : {};
+  const items = Object.entries(info)
+    .filter(([key]) => !HIDDEN_BUILT_INS.has(key))
+    .map(([key, value]) => ({
+      key,
+      name: key,
+      env_vars: Array.isArray(value?.env_vars) ? value.env_vars : [],
+      toolkit: value?.toolkit,
+      desc:
+        Array.isArray(value?.env_vars) && value.env_vars.length
+          ? t('connectors.requires', { vars: value.env_vars.join(', ') })
+          : key === 'Notion'
+            ? t('connectors.notion-desc')
+            : key === 'Google Calendar'
+              ? t('connectors.google-calendar-desc')
+              : t('connectors.generic-desc', { name: key }),
+      onInstall: createBuiltInInstallAction(key, t),
+    }));
+
+  if (!items.some((item) => item.key === 'Search')) {
+    items.unshift({
+      key: 'Search',
+      name: t('connectors.google-search'),
+      env_vars: ['GOOGLE_API_KEY', 'SEARCH_ENGINE_ID'],
+      toolkit: undefined,
+      desc: t('connectors.google-search-desc'),
+      onInstall: createBuiltInInstallAction('Search', t),
+    });
+  }
+  return items;
+}
+
+function configuredSearch(configs: any[]): boolean {
+  const names = new Set(
+    configs
+      .filter((config) => String(config.config_value || '').trim())
+      .map((config) => config.config_name)
+  );
+  return names.has('GOOGLE_API_KEY') && names.has('SEARCH_ENGINE_ID');
+}
+
+function sourceLabel(item: ConnectorListItem, t: TFunction): string {
+  if (item.source === 'open') return t('connectors.source-open');
+  if (item.source === 'builtin') return t('connectors.source-built-in');
+  return item.subtype === 'remote'
+    ? t('connectors.source-remote')
+    : t('connectors.source-local');
+}
+
+function connectorListRank(item: ConnectorListItem): number {
+  if (item.source === 'custom') return 0;
+  if (item.source === 'open') return 1;
+  if (item.source === 'builtin' && item.item.key === 'Search') return 3;
+  return 2;
+}
+
+function normalizedProviderKey(value: string): string {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, '');
+}
+
+function findOpenProviderByKeys(
+  providers: ConnectorProvider[],
+  serviceKeys: readonly string[]
+): ConnectorProvider | null {
+  const keys = new Set(serviceKeys.map(normalizedProviderKey));
+  return (
+    providers.find((provider) => {
+      const service = normalizedProviderKey(provider.service);
+      const label = normalizedProviderKey(providerLabel(provider));
+      return keys.has(service) || keys.has(label);
+    }) || null
+  );
+}
+
+async function resolveOpenProviderByName(
+  name: string
+): Promise<ConnectorProvider | null> {
+  const normalized = name.toLowerCase().trim();
+  const candidates = Array.from(
+    new Set([
+      name,
+      normalized.replace(/\s+/g, '_'),
+      normalized.replace(/\s+/g, '-'),
+      normalized.replace(/\s+/g, ''),
+      normalized,
+    ])
+  );
+
+  for (const query of candidates) {
+    try {
+      const search = await fetchConnectorProviders({
+        page: 1,
+        pageSize: 24,
+        query,
+      });
+      const exact = findOpenProviderByKeys(search.providers, candidates);
+      if (exact) return exact;
+      const fuzzy =
+        search.providers.find((provider) => {
+          const service = provider.service.toLowerCase();
+          const label = providerLabel(provider).toLowerCase();
+          return service.includes(normalized) || label.includes(normalized);
+        }) || null;
+      if (fuzzy) return fuzzy;
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+
+export default function ConnectorGateway() {
+  const { t } = useTranslation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { checkAgentTool, modelType } = useAuthStore();
+  const capabilityStatus = useServerCapabilityStore((state) => state.status);
+  const connectorGatewayEnabled = useServerCapabilityStore((state) =>
+    state.isConnectorGatewayEnabled()
+  );
+  const fetchCapabilities = useServerCapabilityStore(
+    (state) => state.fetchCapabilities
+  );
+
+  const [builtInItems, setBuiltInItems] = useState<IntegrationItem[]>([]);
+  const [customMcps, setCustomMcps] = useState<MCPUserItem[]>([]);
+  const [openConnections, setOpenConnections] = useState<ConnectorProvider[]>(
+    []
+  );
+  const [selectedId, setSelectedId] = useState<string>(OVERVIEW_ID);
+  const [recommendedProviders, setRecommendedProviders] = useState<
+    ConnectorProvider[]
+  >([]);
+  const [recommendedLoading, setRecommendedLoading] = useState(false);
+  const [openDetail, setOpenDetail] = useState<ConnectorProvider | null>(null);
+  const [listQuery, setListQuery] = useState('');
+  const [loadingOpen, setLoadingOpen] = useState(false);
+  const [loadingCustom, setLoadingCustom] = useState(false);
+  const [loadingBuiltIns, setLoadingBuiltIns] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [actionLoading, setActionLoading] = useState(false);
+  const [pageError, setPageError] = useState<string | null>(null);
+  const [browseDialogOpen, setBrowseDialogOpen] = useState(false);
+  const [browseDialogTarget, setBrowseDialogTarget] =
+    useState<AddConnectorTarget>(null);
+  const [customDialogOpen, setCustomDialogOpen] = useState(false);
+  const [showConfig, setShowConfig] = useState<MCPUserItem | null>(null);
+  const [configForm, setConfigForm] = useState<MCPConfigForm | null>(null);
+  const [configError, setConfigError] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<MCPUserItem | null>(null);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const [actionsExpanded, setActionsExpanded] = useState(false);
+  const [actionsOverflow, setActionsOverflow] = useState(false);
+  const preferredSelectionRef = useRef<ConnectorInstallHint | null>(null);
+  const actionsListRef = useRef<HTMLDivElement | null>(null);
+
+  const {
+    installed: rawBuiltInInstalled,
+    configs,
+    fetchInstalled: refreshBuiltIns,
+    saveEnvAndConfig,
+    handleUninstall,
+  } = useIntegrationManagement(builtInItems);
+
+  // Google Search is enabled by default on managed models; custom-model users
+  // must provide their own Google Custom Search credentials.
+  const searchRequiresApiKey = modelType === 'custom';
+  const builtInInstalled = useMemo(() => {
+    const next = { ...rawBuiltInInstalled };
+    next.Search = searchRequiresApiKey ? configuredSearch(configs) : true;
+    return next;
+  }, [configs, rawBuiltInInstalled, searchRequiresApiKey]);
+
+  // When Google Search is enabled by default there is nothing to install, so
+  // keep it out of the Add-connector dialog; it still shows in the sidebar.
+  const dialogBuiltInItems = useMemo(
+    () =>
+      searchRequiresApiKey
+        ? builtInItems
+        : builtInItems.filter((item) => item.key !== 'Search'),
+    [builtInItems, searchRequiresApiKey]
+  );
+
+  const loadBuiltInCatalog = useCallback(async () => {
+    setLoadingBuiltIns(true);
+    try {
+      const response = await proxyFetchGet('/api/v1/config/info');
+      setBuiltInItems(buildBuiltInItems(response, t));
+    } catch (error: any) {
+      setPageError(error?.message || t('connectors.load-built-in-failed'));
+      setBuiltInItems(buildBuiltInItems({}, t));
+    } finally {
+      setLoadingBuiltIns(false);
+    }
+  }, [t]);
+
+  const loadCustomMcps = useCallback(async () => {
+    setLoadingCustom(true);
+    try {
+      const response = await proxyFetchGet('/api/v1/mcp/users');
+      setCustomMcps(
+        Array.isArray(response)
+          ? response
+          : Array.isArray(response?.items)
+            ? response.items
+            : []
+      );
+    } catch (error: any) {
+      setPageError(error?.message || t('connectors.load-custom-failed'));
+      setCustomMcps([]);
+    } finally {
+      setLoadingCustom(false);
+    }
+  }, [t]);
+
+  const loadOpenConnections = useCallback(async () => {
+    if (!connectorGatewayEnabled) {
+      setOpenConnections([]);
+      return;
+    }
+    setLoadingOpen(true);
+    try {
+      setOpenConnections(await fetchConnectedProviders());
+    } catch (error: any) {
+      setPageError(error?.message || t('connectors.load-gateway-failed'));
+      setOpenConnections([]);
+    } finally {
+      setLoadingOpen(false);
+    }
+  }, [connectorGatewayEnabled, t]);
+
+  const refreshAll = useCallback(async () => {
+    setPageError(null);
+    await Promise.all([
+      loadOpenConnections(),
+      loadCustomMcps(),
+      refreshBuiltIns(),
+    ]);
+  }, [loadCustomMcps, loadOpenConnections, refreshBuiltIns]);
+
+  useEffect(() => {
+    void fetchCapabilities();
+    void loadBuiltInCatalog();
+    void loadCustomMcps();
+  }, [fetchCapabilities, loadBuiltInCatalog, loadCustomMcps]);
+
+  useEffect(() => {
+    if (capabilityStatus !== 'ready' || !connectorGatewayEnabled) return;
+    // Warm the browse-dialog page-1 cache so Add Connector opens instantly.
+    void prefetchConnectorProviders({ page: 1, pageSize: 60 });
+    void loadOpenConnections();
+  }, [capabilityStatus, connectorGatewayEnabled, loadOpenConnections]);
+
+  useEffect(() => {
+    if (capabilityStatus !== 'ready' || !connectorGatewayEnabled) {
+      setRecommendedProviders([]);
+      setRecommendedLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setRecommendedLoading(true);
+    void (async () => {
+      const catalog = await fetchConnectorProviders({
+        page: 1,
+        pageSize: 60,
+      });
+      if (cancelled) return;
+      const providers: ConnectorProvider[] = [];
+      const seen = new Set<string>();
+      for (const serviceKeys of RECOMMENDED_SERVICE_KEYS) {
+        const provider = findOpenProviderByKeys(catalog.providers, serviceKeys);
+        if (
+          !provider ||
+          seen.has(provider.service) ||
+          isConnectedProvider(provider)
+        ) {
+          continue;
+        }
+        seen.add(provider.service);
+        providers.push(provider);
+      }
+      for (const provider of catalog.providers) {
+        if (providers.length >= RECOMMENDED_SERVICE_KEYS.length) break;
+        if (seen.has(provider.service) || isConnectedProvider(provider)) {
+          continue;
+        }
+        seen.add(provider.service);
+        providers.push(provider);
+      }
+      setRecommendedProviders(providers);
+      setRecommendedLoading(false);
+    })().catch(() => {
+      if (cancelled) return;
+      setRecommendedProviders([]);
+      setRecommendedLoading(false);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [capabilityStatus, connectorGatewayEnabled]);
+
+  const connectorItems = useMemo<ConnectorListItem[]>(() => {
+    const openItems: ConnectorListItem[] = openConnections.map((provider) => ({
+      id: `open:${provider.service}`,
+      source: 'open',
+      name: providerLabel(provider),
+      active: true,
+      provider,
+    }));
+    const builtIns: ConnectorListItem[] = builtInItems
+      .filter((item) => builtInInstalled[item.key])
+      .map((item) => ({
+        id: `builtin:${item.key}`,
+        source: 'builtin',
+        name: item.name,
+        active: true,
+        item,
+      }));
+    const custom: ConnectorListItem[] = customMcps.map((item) => ({
+      id: `custom:${item.id}`,
+      source: 'custom',
+      name: capitalizeFirstLetter(item.mcp_name || item.mcp_key || ''),
+      active: Number(item.status) === 1,
+      subtype: Number(item.type) === 2 ? 'remote' : 'local',
+      item,
+    }));
+    return [...openItems, ...builtIns, ...custom].sort((left, right) => {
+      const rankDelta = connectorListRank(left) - connectorListRank(right);
+      if (rankDelta !== 0) return rankDelta;
+      if (left.active !== right.active) return left.active ? -1 : 1;
+      return left.name.localeCompare(right.name);
+    });
+  }, [builtInInstalled, builtInItems, customMcps, openConnections]);
+
+  useEffect(() => {
+    const preferred = preferredSelectionRef.current;
+    if (preferred) {
+      const match = connectorItems.find((item) => {
+        if (preferred.source === 'open') {
+          return item.id === `open:${preferred.key}`;
+        }
+        if (preferred.source === 'builtin') {
+          return item.id === `builtin:${preferred.key}`;
+        }
+        return (
+          item.source === 'custom' &&
+          (item.item.mcp_name === preferred.key ||
+            item.item.mcp_key === preferred.key)
+        );
+      });
+      if (match) {
+        setSelectedId(match.id);
+        preferredSelectionRef.current = null;
+        return;
+      }
+    }
+
+    if (selectedId === OVERVIEW_ID) return;
+    if (connectorItems.some((item) => item.id === selectedId)) return;
+    setSelectedId(OVERVIEW_ID);
+  }, [connectorItems, selectedId]);
+
+  const selected = useMemo(
+    () => connectorItems.find((item) => item.id === selectedId) || null,
+    [connectorItems, selectedId]
+  );
+
+  const selectedOpenService =
+    selected?.source === 'open' ? selected.provider.service : null;
+
+  useEffect(() => {
+    if (!selectedOpenService) {
+      setOpenDetail(null);
+      return;
+    }
+    let cancelled = false;
+    setDetailLoading(true);
+    setActionsExpanded(false);
+    void fetchConnectorProvider(selectedOpenService)
+      .then((response) => {
+        if (!cancelled) setOpenDetail(response.provider);
+      })
+      .catch(() => {
+        // Fall back to the list-provider data via `openDetail || item.provider`.
+        if (!cancelled) setOpenDetail(null);
+      })
+      .finally(() => {
+        if (!cancelled) setDetailLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedOpenService]);
+
+  const openDetailProvider =
+    selected?.source === 'open' ? openDetail || selected.provider : null;
+
+  useLayoutEffect(() => {
+    const element = actionsListRef.current;
+    if (!element || !openDetailProvider?.actions?.length) {
+      setActionsOverflow(false);
+      return;
+    }
+    setActionsOverflow(element.scrollHeight > 200);
+  }, [openDetailProvider?.actions, openDetailProvider?.service, detailLoading]);
+
+  useEffect(() => {
+    const action = searchParams.get('connectorAction');
+    const section = searchParams.get('connectorSection');
+    if (action !== 'add' && section !== 'mcp-tools' && section !== 'your-mcp') {
+      return;
+    }
+    if (section === 'your-mcp') {
+      setCustomDialogOpen(true);
+    } else {
+      setBrowseDialogTarget(null);
+      setBrowseDialogOpen(true);
+    }
+    const next = new URLSearchParams(searchParams);
+    next.delete('connectorAction');
+    next.delete('connectorSection');
+    setSearchParams(next, { replace: true });
+  }, [searchParams, setSearchParams]);
+
+  useEffect(() => {
+    if (!showConfig) {
+      setConfigForm(null);
+      setConfigError(null);
+      return;
+    }
+    setConfigForm({
+      mcp_name: showConfig.mcp_name || '',
+      mcp_desc: showConfig.mcp_desc || '',
+      command: showConfig.command || '',
+      argsArr: showConfig.args ? parseArgsToArray(showConfig.args) : [],
+      env: showConfig.env ? { ...showConfig.env } : {},
+      server_url: showConfig.server_url || '',
+    });
+  }, [showConfig]);
+
+  const visibleItems = useMemo(() => {
+    const query = listQuery.trim().toLowerCase();
+    if (!query) return connectorItems;
+    return connectorItems.filter(
+      (item) =>
+        item.name.toLowerCase().includes(query) ||
+        sourceLabel(item, t).toLowerCase().includes(query)
+    );
+  }, [connectorItems, listQuery, t]);
+
+  const openBrowseDialog = (target: AddConnectorTarget = null) => {
+    // Non-local hosts always use Connector Gateway providers — never Built-in.
+    // Open the dialog immediately and resolve the matching hosted provider in the
+    // background so the button never feels dead.
+    if (!IS_LOCAL_MODE && target?.source === 'builtin') {
+      setBrowseDialogTarget(null);
+      setBrowseDialogOpen(true);
+      if (connectorGatewayEnabled) {
+        const builtInKey = target.item.key;
+        void resolveOpenProviderByName(builtInKey).then((provider) => {
+          if (provider) {
+            setBrowseDialogTarget({ source: 'open', provider });
+          }
+        });
+      }
+      return;
+    }
+    setBrowseDialogTarget(target);
+    setBrowseDialogOpen(true);
+  };
+
+  const openCustomDialog = () => {
+    setCustomDialogOpen(true);
+  };
+
+  const openRecommendedConnector = (provider: ConnectorProvider) => {
+    const existing = connectorItems.find(
+      (item) =>
+        item.source === 'open' && item.provider.service === provider.service
+    );
+    if (existing) {
+      setSelectedId(existing.id);
+      return;
+    }
+    openBrowseDialog({ source: 'open', provider });
+  };
+
+  const handleInstalled = useCallback(
+    async (hint: ConnectorInstallHint) => {
+      preferredSelectionRef.current = hint;
+      invalidateConnectorProvidersCache();
+      await refreshAll();
+    },
+    [refreshAll]
+  );
+
+  const handleDisconnectOpen = async (provider: ConnectorProvider) => {
+    setActionLoading(true);
+    try {
+      await disconnectProvider(
+        provider.service,
+        provider.connection?.connectionName
+      );
+      invalidateConnectorProvidersCache();
+      toast.success(
+        t('connectors.disconnected', { name: providerLabel(provider) })
+      );
+      await loadOpenConnections();
+    } catch (error: any) {
+      toast.error(error?.message || t('connectors.disconnect-failed'));
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleDisconnectBuiltIn = async (item: IntegrationItem) => {
+    setActionLoading(true);
+    try {
+      await handleUninstall(item);
+      await refreshBuiltIns();
+      toast.success(t('connectors.disconnected', { name: item.name }));
+    } catch (error: any) {
+      toast.error(error?.message || t('connectors.disconnect-failed'));
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleCustomSwitch = async (item: MCPUserItem, checked: boolean) => {
+    setActionLoading(true);
+    try {
+      const key = item.mcp_key || item.mcp_name;
+      if (checked) {
+        if (Number(item.type) === 2) {
+          await mcpInstall(key, { url: item.server_url || '' });
+        } else {
+          await mcpInstall(key, {
+            description: item.mcp_desc || '',
+            command: item.command || '',
+            args: item.args ? parseArgsToArray(item.args) : [],
+            ...(item.env && Object.keys(item.env).length
+              ? { env: item.env }
+              : {}),
+          });
+        }
+      } else {
+        await mcpRemove(key);
+      }
+      try {
+        await proxyFetchPut(`/api/v1/mcp/users/${item.id}`, {
+          status: checked ? 1 : 2,
+        });
+      } catch {
+        // The runtime install/remove already succeeded; only the saved status
+        // is stale now, so surface that specifically.
+        toast.error(
+          t(
+            checked
+              ? 'connectors.status-save-failed-enabled'
+              : 'connectors.status-save-failed-disabled'
+          )
+        );
+      }
+      await loadCustomMcps();
+    } catch (error: any) {
+      toast.error(error?.message || t('connectors.update-failed'));
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleConfigSave = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!configForm || !showConfig) return;
+    setActionLoading(true);
+    setConfigError(null);
+    try {
+      const isRemote = Number(showConfig.type) === 2;
+      const payload = isRemote
+        ? {
+            mcp_name: configForm.mcp_name,
+            mcp_desc: configForm.mcp_desc,
+            server_url: configForm.server_url,
+          }
+        : {
+            mcp_name: configForm.mcp_name,
+            mcp_desc: configForm.mcp_desc,
+            command: configForm.command,
+            args: arrayToArgsJson(configForm.argsArr),
+            env: configForm.env,
+          };
+      await proxyFetchPut(`/api/v1/mcp/users/${showConfig.id}`, payload);
+      if (isRemote) {
+        await mcpUpdate(showConfig.mcp_key || showConfig.mcp_name, {
+          url: configForm.server_url,
+        });
+      } else {
+        const brainPayload: Record<string, unknown> = {
+          description: configForm.mcp_desc,
+          command: configForm.command,
+          args: arrayToArgsJson(configForm.argsArr),
+        };
+        if (Object.keys(configForm.env).length) {
+          brainPayload.env = configForm.env;
+        }
+        await mcpUpdate(
+          showConfig.mcp_key || showConfig.mcp_name,
+          brainPayload
+        );
+      }
+      setShowConfig(null);
+      await loadCustomMcps();
+      toast.success(t('connectors.updated'));
+    } catch (error: any) {
+      setConfigError(error?.message || t('connectors.save-failed'));
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    setDeleteLoading(true);
+    try {
+      checkAgentTool(deleteTarget.mcp_name);
+      await proxyFetchDelete(`/api/v1/mcp/users/${deleteTarget.id}`);
+      const key = deleteTarget.mcp_key || deleteTarget.mcp_name;
+      if (key) await mcpRemove(key);
+      setDeleteTarget(null);
+      await loadCustomMcps();
+      toast.success(t('connectors.deleted'));
+    } catch (error: any) {
+      toast.error(error?.message || t('connectors.delete-failed'));
+    } finally {
+      setDeleteLoading(false);
+    }
+  };
+
+  const pageLoading = loadingOpen || loadingCustom || loadingBuiltIns;
+
+  const renderListIcon = (item: ConnectorListItem) => {
+    if (item.source === 'open') {
+      return <ProviderIcon provider={item.provider} size="list" />;
+    }
+    if (item.source === 'builtin') {
+      const iconUrl = integrationLeadingIconUrl(item.item.key);
+      return iconUrl ? (
+        <img src={iconUrl} alt="" className="h-5 w-5 shrink-0 object-contain" />
+      ) : (
+        <Server className="h-5 w-5 shrink-0 text-ds-icon-neutral-muted-default" />
+      );
+    }
+    return item.subtype === 'remote' ? (
+      <Server className="h-5 w-5 shrink-0 text-ds-icon-neutral-muted-default" />
+    ) : (
+      <Wrench className="h-5 w-5 shrink-0 text-ds-icon-neutral-muted-default" />
+    );
+  };
+
+  const isDefaultEnabledSearch = (item: ConnectorListItem) =>
+    item.source === 'builtin' &&
+    item.item.key === 'Search' &&
+    !searchRequiresApiKey;
+
+  const renderDetailHeader = (item: ConnectorListItem) => (
+    <div className="mx-6 flex items-center gap-3 border-x-0 border-b border-t-0 border-solid border-ds-border-neutral-default-default py-4">
+      {item.source === 'open' ? (
+        <ProviderIcon provider={openDetail || item.provider} size="detail" />
+      ) : (
+        renderListIcon(item)
+      )}
+      <span className="text-body-base min-w-0 flex-1 truncate font-bold text-ds-text-neutral-default-default">
+        {item.name}
+      </span>
+      {item.source !== 'open' ? (
+        <Badge
+          size="xs"
+          variant="outline"
+          className="shrink-0 whitespace-nowrap"
+        >
+          {sourceLabel(item, t)}
+        </Badge>
+      ) : null}
+      <div className="flex shrink-0 items-center gap-1">
+        {item.source === 'custom' ? (
+          <Switch
+            variant="outline"
+            checked={item.active}
+            disabled={actionLoading}
+            onCheckedChange={(checked) =>
+              void handleCustomSwitch(item.item, checked)
+            }
+            aria-label={
+              item.active
+                ? t('connectors.disable-connector')
+                : t('connectors.enable-connector')
+            }
+          />
+        ) : item.source === 'builtin' && item.item.key === 'Search' ? null : (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() =>
+              openBrowseDialog(
+                item.source === 'open'
+                  ? { source: 'open', provider: item.provider }
+                  : { source: 'builtin', item: item.item }
+              )
+            }
+          >
+            <ExternalLink className="h-4 w-4" />
+            {t('connectors.open')}
+          </Button>
+        )}
+        {isDefaultEnabledSearch(item) ? null : (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                buttonContent="icon-only"
+                size="sm"
+                disabled={actionLoading}
+                aria-label={t('connectors.more-actions')}
+              >
+                <Ellipsis className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {item.source === 'custom' ? (
+                <DropdownMenuItem onClick={() => setShowConfig(item.item)}>
+                  <Pencil className="h-4 w-4" />
+                  {t('connectors.edit')}
+                </DropdownMenuItem>
+              ) : null}
+              <DropdownMenuItem
+                disabled={actionLoading}
+                className="text-ds-text-error-default-default focus:text-ds-text-error-default-default"
+                onClick={() => {
+                  if (item.source === 'open') {
+                    void handleDisconnectOpen(item.provider);
+                    return;
+                  }
+                  if (item.source === 'builtin') {
+                    void handleDisconnectBuiltIn(item.item);
+                    return;
+                  }
+                  setDeleteTarget(item.item);
+                }}
+              >
+                <Trash2 className="h-4 w-4" />
+                {t('connectors.delete')}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    </div>
+  );
+
+  const renderOpenDetailBody = (
+    item: Extract<ConnectorListItem, { source: 'open' }>
+  ) => {
+    const provider = openDetail || item.provider;
+    if (detailLoading) {
+      return (
+        <div className="h-32 animate-pulse rounded-xl bg-ds-bg-neutral-strong-default" />
+      );
+    }
+    return (
+      <>
+        {provider.connection?.profile?.displayName ? (
+          <div className="rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default p-4">
+            <span className="block text-body-xs font-bold uppercase tracking-wide text-ds-text-neutral-muted-default">
+              {t('connectors.connected-account')}
+            </span>
+            <span className="mt-1 block text-body-sm font-bold text-ds-text-neutral-default-default">
+              {provider.connection.profile.displayName}
+            </span>
+          </div>
+        ) : null}
+
+        {provider.actions?.length ? (
+          <div className="space-y-2">
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-body-sm font-bold text-ds-text-neutral-default-default">
+                {t('connectors.supported-actions')}
+              </span>
+              <span className="text-body-sm text-ds-text-neutral-muted-default">
+                {provider.actions.length || providerActionCount(provider)}
+              </span>
+            </div>
+            <div className="overflow-hidden rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default">
+              <div className="relative">
+                <div
+                  ref={actionsListRef}
+                  className={`flex flex-wrap gap-2 p-4 ${
+                    actionsExpanded ? '' : 'max-h-[200px] overflow-hidden'
+                  }`}
+                >
+                  {provider.actions.map((action, index) => (
+                    <span
+                      key={action.id || action.name || index}
+                      className="inline-flex items-center rounded-full bg-ds-bg-neutral-subtle-default px-3 py-1 text-label-xs text-ds-text-neutral-default-default"
+                    >
+                      {actionLabel(action, t)}
+                    </span>
+                  ))}
+                </div>
+                {!actionsExpanded && actionsOverflow ? (
+                  <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-ds-bg-neutral-default-default to-transparent" />
+                ) : null}
+              </div>
+              {actionsOverflow ? (
+                <button
+                  type="button"
+                  onClick={() => setActionsExpanded((value) => !value)}
+                  className="flex w-full items-center justify-center gap-1.5 border-0 bg-transparent px-4 py-2.5 text-label-xs text-ds-text-neutral-muted-default transition-colors hover:bg-ds-bg-neutral-default-hover hover:text-ds-text-neutral-default-default"
+                >
+                  {actionsExpanded
+                    ? t('connectors.show-less')
+                    : t('connectors.show-more')}
+                  <ChevronDown
+                    className={`h-4 w-4 transition-transform ${
+                      actionsExpanded ? 'rotate-180' : ''
+                    }`}
+                  />
+                </button>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+
+        {provider.homepageUrl ? (
+          <a
+            href={provider.homepageUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1 text-label-sm text-ds-text-neutral-muted-default underline-offset-2 hover:underline"
+          >
+            {t('connectors.provider-website')}
+            <ExternalLink className="h-3.5 w-3.5" />
+          </a>
+        ) : null}
+      </>
+    );
+  };
+
+  const renderBuiltInDetailBody = (
+    item: Extract<ConnectorListItem, { source: 'builtin' }>
+  ) => {
+    if (item.item.key === 'Search') {
+      return (
+        <div className="rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default">
+          <GoogleSearchPanel onConfigured={() => void refreshBuiltIns()} />
+        </div>
+      );
+    }
+    return (
+      <div className="rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default p-4">
+        <span className="block text-body-sm font-bold text-ds-text-neutral-default-default">
+          {t('connectors.built-in-title')}
+        </span>
+        <span className="mt-1 block text-body-sm leading-6 text-ds-text-neutral-muted-default">
+          {t('connectors.built-in-desc')}
+        </span>
+        {item.item.env_vars.length ? (
+          <span className="mt-3 block text-body-xs text-ds-text-neutral-muted-default">
+            {t('connectors.configuration', {
+              vars: item.item.env_vars.join(', '),
+            })}
+          </span>
+        ) : null}
+      </div>
+    );
+  };
+
+  const renderCustomDetailBody = (
+    item: Extract<ConnectorListItem, { source: 'custom' }>
+  ) => {
+    const mcp = item.item;
+    return (
+      <div className="rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default p-4">
+        <div className="flex items-center justify-between gap-3">
+          <span className="text-body-sm font-bold text-ds-text-neutral-default-default">
+            {t('connectors.status')}
+          </span>
+          <Badge
+            size="sm"
+            variant="secondary"
+            tone={item.active ? 'success' : 'neutral'}
+          >
+            {item.active ? t('connectors.active') : t('connectors.disabled')}
+          </Badge>
+        </div>
+        {item.subtype === 'remote' ? (
+          <div className="mt-4">
+            <span className="block text-body-xs font-bold uppercase tracking-wide text-ds-text-neutral-muted-default">
+              {t('connectors.server-url')}
+            </span>
+            <span className="mt-1 block break-all font-mono text-body-sm text-ds-text-neutral-default-default">
+              {mcp.server_url || t('connectors.not-configured')}
+            </span>
+          </div>
+        ) : (
+          <div className="mt-4 space-y-3">
+            <div>
+              <span className="block text-body-xs font-bold uppercase tracking-wide text-ds-text-neutral-muted-default">
+                {t('connectors.command')}
+              </span>
+              <span className="mt-1 block font-mono text-body-sm text-ds-text-neutral-default-default">
+                {mcp.command || t('connectors.not-configured')}
+              </span>
+            </div>
+            {mcp.args ? (
+              <div>
+                <span className="block text-body-xs font-bold uppercase tracking-wide text-ds-text-neutral-muted-default">
+                  {t('connectors.arguments')}
+                </span>
+                <span className="mt-1 block break-words font-mono text-body-sm text-ds-text-neutral-default-default">
+                  {parseArgsToArray(mcp.args).join(' ')}
+                </span>
+              </div>
+            ) : null}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderDetailPanel = (item: ConnectorListItem) => (
+    <div className="flex h-full w-full flex-col rounded-2xl bg-ds-bg-neutral-subtle-default">
+      {renderDetailHeader(item)}
+      <div className="space-y-5 px-6 py-4">
+        {item.source === 'open'
+          ? renderOpenDetailBody(item)
+          : item.source === 'builtin'
+            ? renderBuiltInDetailBody(item)
+            : renderCustomDetailBody(item)}
+      </div>
+    </div>
+  );
+
+  const renderOverviewPanel = () => {
+    const count = connectorItems.length;
+    return (
+      <div className="flex h-full w-full flex-col rounded-2xl bg-ds-bg-neutral-subtle-default">
+        <div className="flex flex-col items-center px-6 pb-2 pt-8 text-center">
+          <span className="text-heading-sm font-bold text-ds-text-neutral-default-default">
+            {pageLoading && count === 0 ? '—' : count}
+          </span>
+          <span className="mt-1 text-body-sm text-ds-text-neutral-muted-default">
+            {count === 1
+              ? t('connectors.count-one')
+              : t('connectors.count-other')}
+          </span>
+        </div>
+
+        <div className="space-y-3 px-6 py-5">
+          <span className="block text-center text-body-sm text-ds-text-neutral-muted-default">
+            {t('connectors.recommended')}
+          </span>
+          {recommendedLoading && recommendedProviders.length === 0 ? (
+            <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+              {Array.from({ length: 8 }).map((_, index) => (
+                <div
+                  key={index}
+                  className="h-20 animate-pulse rounded-2xl bg-ds-bg-neutral-default-default"
+                />
+              ))}
+            </div>
+          ) : recommendedProviders.length === 0 ? (
+            <div className="flex min-h-24 items-center justify-center text-body-sm text-ds-text-neutral-muted-default">
+              {connectorGatewayEnabled
+                ? t('connectors.no-recommended')
+                : t('connectors.gateway-unavailable')}
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+              {recommendedProviders.map((provider) => {
+                const liveProvider =
+                  openConnections.find(
+                    (item) => item.service === provider.service
+                  ) || provider;
+                const connected = isConnectedProvider(liveProvider);
+                const existing = connectorItems.find(
+                  (item) =>
+                    item.source === 'open' &&
+                    item.provider.service === provider.service
+                );
+                return (
+                  <button
+                    key={provider.service}
+                    type="button"
+                    onClick={() => {
+                      if (existing) {
+                        setSelectedId(existing.id);
+                        return;
+                      }
+                      openRecommendedConnector(liveProvider);
+                    }}
+                    className="group flex h-20 items-center gap-3 rounded-2xl border border-solid border-transparent bg-ds-bg-neutral-default-default px-4 py-3 text-left transition-colors hover:border-ds-border-neutral-default-default hover:bg-ds-bg-neutral-default-hover"
+                  >
+                    <ProviderIcon provider={liveProvider} />
+                    <div className="min-w-0 flex-1">
+                      <div className="flex min-w-0 items-center gap-1.5">
+                        <span className="text-body-base truncate font-bold text-ds-text-neutral-default-default">
+                          {providerLabel(liveProvider)}
+                        </span>
+                        <BadgeCheck
+                          className={`h-3.5 w-3.5 shrink-0 ${
+                            connected || existing
+                              ? 'text-ds-icon-success-default-default'
+                              : 'text-ds-icon-neutral-muted-default'
+                          }`}
+                        />
+                      </div>
+                      {liveProvider.description?.trim() ? (
+                        <span className="mt-1 line-clamp-1 block text-body-xs text-ds-text-neutral-muted-default">
+                          {liveProvider.description.trim()}
+                        </span>
+                      ) : null}
+                    </div>
+                    {connected || existing ? (
+                      <Settings className="h-4 w-4 shrink-0 text-ds-icon-neutral-muted-default" />
+                    ) : (
+                      <Plus className="h-4 w-4 shrink-0 text-ds-icon-neutral-muted-default" />
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="m-auto flex h-full w-full flex-1 flex-col pb-12">
+      <div className="flex w-full flex-wrap items-center justify-between gap-3 px-6 pb-6 pt-8">
+        <h1 className="text-heading-sm font-bold text-ds-text-neutral-default-default">
+          {t('connectors.title')}
+        </h1>
+        <div className="flex items-center gap-2">
+          <SearchInput
+            variant="icon"
+            value={listQuery}
+            onChange={(event) => setListQuery(event.target.value)}
+            placeholder={t('connectors.search-placeholder')}
+          />
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => openBrowseDialog()}
+          >
+            {t('connectors.browse')}
+          </Button>
+          <Button variant="secondary" size="sm" onClick={openCustomDialog}>
+            <Plus className="h-4 w-4" />
+            {t('connectors.add-custom')}
+          </Button>
+        </div>
+      </div>
+
+      {pageError ? (
+        <div className="mx-6 mb-4 flex items-center justify-between gap-3 rounded-xl bg-ds-bg-error-subtle-default px-4 py-3 text-body-sm text-ds-text-error-strong-default">
+          <span>{pageError}</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={pageLoading}
+            onClick={() => void refreshAll()}
+          >
+            <RefreshCw className="h-4 w-4" />
+            {t('connectors.retry')}
+          </Button>
+        </div>
+      ) : null}
+
+      <div className="mb-12 flex min-h-[54vh] w-full flex-col items-start gap-4 rounded-2xl bg-ds-bg-neutral-default-default px-3 py-2 lg:flex-row">
+        <aside className="w-full shrink-0 lg:sticky lg:top-[var(--home-hub-history-tabs-offset,49px)] lg:w-[240px]">
+          <div className="scrollbar-always-visible max-h-[calc(100vh-var(--home-hub-history-tabs-offset,49px)-10rem)] space-y-1 overflow-y-auto py-1">
+            <button
+              type="button"
+              onClick={() => setSelectedId(OVERVIEW_ID)}
+              className={`flex w-full items-center gap-3 rounded-xl border-0 px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-ring-brand-default-focus ${
+                selectedId === OVERVIEW_ID
+                  ? 'bg-ds-bg-neutral-subtle-default'
+                  : 'bg-transparent hover:bg-ds-bg-neutral-default-hover'
+              }`}
+            >
+              <Hammer className="h-5 w-5 shrink-0 text-ds-icon-neutral-muted-default" />
+              <span
+                className={`min-w-0 flex-1 truncate text-body-sm font-medium ${
+                  selectedId === OVERVIEW_ID
+                    ? 'text-ds-text-neutral-default-default'
+                    : 'text-ds-text-neutral-muted-default'
+                }`}
+              >
+                {t('connectors.your-connectors')}
+              </span>
+              <Badge size="xs" variant="secondary" className="shrink-0">
+                {connectorItems.length}
+              </Badge>
+            </button>
+
+            {pageLoading && connectorItems.length === 0 ? (
+              Array.from({ length: 4 }).map((_, index) => (
+                <div
+                  key={index}
+                  className="mx-1 h-9 animate-pulse rounded-xl bg-ds-bg-neutral-strong-default"
+                />
+              ))
+            ) : visibleItems.length === 0 ? (
+              listQuery.trim() ? (
+                <div className="px-3 py-6 text-center">
+                  <span className="text-body-sm text-ds-text-neutral-muted-default">
+                    {t('connectors.no-matching')}
+                  </span>
+                </div>
+              ) : null
+            ) : (
+              visibleItems.map((item) => {
+                const active = selectedId === item.id;
+                return (
+                  <button
+                    key={item.id}
+                    type="button"
+                    onClick={() => setSelectedId(item.id)}
+                    className={`flex w-full items-center gap-3 rounded-xl border-0 px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-ring-brand-default-focus ${
+                      active
+                        ? 'bg-ds-bg-neutral-subtle-default'
+                        : 'bg-transparent hover:bg-ds-bg-neutral-default-hover'
+                    }`}
+                  >
+                    {renderListIcon(item)}
+                    <span
+                      className={`min-w-0 flex-1 truncate text-body-sm font-medium ${
+                        active
+                          ? 'text-ds-text-neutral-default-default'
+                          : 'text-ds-text-neutral-muted-default'
+                      }`}
+                    >
+                      {item.name}
+                    </span>
+                    <span
+                      className={`h-2 w-2 shrink-0 rounded-full ${
+                        item.active
+                          ? 'bg-ds-text-success-default-default'
+                          : 'bg-ds-icon-neutral-muted-default'
+                      }`}
+                    />
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </aside>
+
+        <main className="flex h-full w-full min-w-0 flex-1">
+          {selectedId === OVERVIEW_ID || !selected
+            ? renderOverviewPanel()
+            : renderDetailPanel(selected)}
+        </main>
+      </div>
+
+      <AddConnectorDialog
+        open={browseDialogOpen}
+        connectorGatewayEnabled={connectorGatewayEnabled}
+        localMode={IS_LOCAL_MODE}
+        builtInItems={dialogBuiltInItems}
+        builtInInstalled={builtInInstalled}
+        configs={configs}
+        initialTarget={browseDialogTarget}
+        onOpenChange={(next) => {
+          setBrowseDialogOpen(next);
+          if (!next) setBrowseDialogTarget(null);
+        }}
+        onInstalled={handleInstalled}
+        saveBuiltInValue={saveEnvAndConfig}
+        refreshBuiltIns={refreshBuiltIns}
+      />
+
+      <AddCustomConnectorDialog
+        open={customDialogOpen}
+        customMcps={customMcps}
+        onOpenChange={setCustomDialogOpen}
+        onInstalled={handleInstalled}
+      />
+
+      <MCPConfigDialog
+        open={Boolean(showConfig)}
+        form={configForm}
+        mcp={showConfig}
+        onChange={setConfigForm as (form: MCPConfigForm) => void}
+        onSave={handleConfigSave}
+        onClose={() => setShowConfig(null)}
+        loading={actionLoading}
+        errorMsg={configError}
+        onSwitchStatus={() => undefined}
+      />
+      <MCPDeleteDialog
+        open={Boolean(deleteTarget)}
+        target={deleteTarget}
+        onCancel={() => setDeleteTarget(null)}
+        onConfirm={handleDelete}
+        loading={deleteLoading}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/Connectors/MCP.tsx b/src/pages/Connectors/MCP.tsx
deleted file mode 100644
index dfde0273f..000000000
--- a/src/pages/Connectors/MCP.tsx
+++ /dev/null
@@ -1,1351 +0,0 @@
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-
-import { mcpInstall, mcpRemove, mcpUpdate } from '@/api/brain';
-import {
-  fetchGet,
-  fetchPost,
-  proxyFetchDelete,
-  proxyFetchGet,
-  proxyFetchPost,
-  proxyFetchPut,
-} from '@/api/http';
-import googleIcon from '@/assets/icon/google.svg';
-import ellipseIcon from '@/assets/mcp/Ellipse-25.svg';
-import SearchInput from '@/components/Dashboard/SearchInput';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Switch } from '@/components/ui/switch';
-import { TooltipSimple } from '@/components/ui/tooltip';
-import {
-  useIntegrationManagement,
-  type IntegrationItem,
-} from '@/hooks/useIntegrationManagement';
-import { capitalizeFirstLetter, getProxyBaseURL } from '@/lib';
-import { integrationLeadingIconUrl } from '@/lib/connectorIcons';
-import { useAuthStore } from '@/store/authStore';
-import { motion } from 'framer-motion';
-import {
-  ChevronDown,
-  ChevronUp,
-  MoreHorizontal,
-  Pencil,
-  Plus,
-  Settings2,
-  Trash2,
-  Wrench,
-} from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
-import { GoogleSearchPanel } from './components/GoogleSearchPanel';
-import MCPAddDialog from './components/MCPAddDialog';
-import MCPConfigDialog from './components/MCPConfigDialog';
-import MCPDeleteDialog from './components/MCPDeleteDialog';
-import { MCPEnvDialog } from './components/MCPEnvDialog';
-import type { MCPConfigForm, MCPUserItem } from './components/types';
-import { arrayToArgsJson, parseArgsToArray } from './components/utils';
-
-import { ConfigFile } from 'electron/main/utils/mcpConfig';
-import { toast } from 'sonner';
-
-// Filter out Search from integrations (it's now a hardcoded connector item below)
-const EXCLUDED_FROM_MCP = ['Search', 'RAG'];
-
-const GOOGLE_SEARCH_ID = 'google-search' as const;
-
-const COMING_SOON_NAMES = [
-  'X(Twitter)',
-  'WhatsApp',
-  'Reddit',
-  'Github',
-] as const;
-
-export default function SettingMCP() {
-  const { checkAgentTool } = useAuthStore();
-  const { t } = useTranslation();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [items, setItems] = useState<MCPUserItem[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [showConfig, setShowConfig] = useState<MCPUserItem | null>(null);
-  const [configForm, setConfigForm] = useState<MCPConfigForm | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [errorMsg, setErrorMsg] = useState<string | null>(null);
-  const [showAdd, setShowAdd] = useState(false);
-  const [addType, setAddType] = useState<'local' | 'remote'>('local');
-  const [localJson, setLocalJson] = useState(
-    `{
-  "mcpServers": {
-    "sequential-thinking": {
-      "command": "npx",
-      "args": [
-        "-y",
-        "@modelcontextprotocol/server-sequential-thinking"
-      ]
-    }
-  }
-}`
-  );
-  const [remoteName, setRemoteName] = useState('');
-  const [remoteUrl, setRemoteUrl] = useState('');
-  const [installing, setInstalling] = useState(false);
-  const [deleteTarget, setDeleteTarget] = useState<MCPUserItem | null>(null);
-  const [deleting, setDeleting] = useState(false);
-  const [switchLoading, setSwitchLoading] = useState<Record<number, boolean>>(
-    {}
-  );
-  const [searchQuery, setSearchQuery] = useState('');
-  const [webCollapsed, setWebCollapsed] = useState(false);
-  const [yourCollapsed, setYourCollapsed] = useState(false);
-  const [selected, setSelected] = useState<
-    | { type: 'web'; key: string }
-    | { type: 'your'; id: number }
-    | { type: typeof GOOGLE_SEARCH_ID }
-    | null
-  >(null);
-  const [showEnvConfig, setShowEnvConfig] = useState(false);
-  const [activeMcp, setActiveMcp] = useState<any | null>(null);
-  const [folderHint, setFolderHint] = useState<'web' | 'your' | null>(null);
-
-  const [integrations, setIntegrations] = useState<any[]>([]);
-  const [isLoadingIntegrations, setIsLoadingIntegrations] = useState(true);
-
-  const integrationItems = useMemo((): IntegrationItem[] => {
-    const searchItem: IntegrationItem = {
-      key: 'Search',
-      name: 'Search',
-      desc: '',
-      env_vars: [],
-      onInstall: async () => {},
-    };
-    return [searchItem, ...(integrations as IntegrationItem[])];
-  }, [integrations]);
-
-  const {
-    installed,
-    fetchInstalled,
-    saveEnvAndConfig,
-    handleUninstall,
-    createMcpFromItem,
-  } = useIntegrationManagement(integrationItems);
-
-  const searchConnected = !!installed.Search;
-
-  const refreshConnectorConfigs = useCallback(() => {
-    void fetchInstalled();
-  }, [fetchInstalled]);
-
-  useEffect(() => {
-    const action = searchParams.get('connectorAction');
-    const section = searchParams.get('connectorSection');
-    if (action !== 'add' && section !== 'mcp-tools' && section !== 'your-mcp') {
-      return;
-    }
-    const next = new URLSearchParams(searchParams);
-    if (action === 'add') {
-      setShowAdd(true);
-      next.delete('connectorAction');
-    }
-    if (section === 'mcp-tools') {
-      setFolderHint('web');
-      setWebCollapsed(false);
-      setYourCollapsed(true);
-      next.delete('connectorSection');
-    }
-    if (section === 'your-mcp') {
-      setFolderHint('your');
-      setYourCollapsed(false);
-      setWebCollapsed(true);
-      next.delete('connectorSection');
-    }
-    setSearchParams(next, { replace: true });
-  }, [searchParams, setSearchParams]);
-
-  // Filter integrations (MCP & Tools) by search
-  const filteredIntegrations = useMemo(() => {
-    if (!searchQuery.trim()) return integrations;
-    const q = searchQuery.toLowerCase().trim();
-    return integrations.filter(
-      (item) =>
-        (item.key || '').toLowerCase().includes(q) ||
-        (item.name || '').toLowerCase().includes(q) ||
-        (item.desc || '').toLowerCase().includes(q)
-    );
-  }, [integrations, searchQuery]);
-
-  // Filter your MCPs by search
-  const filteredItems = useMemo(() => {
-    if (!searchQuery.trim()) return items;
-    const q = searchQuery.toLowerCase().trim();
-    return items.filter(
-      (item) =>
-        (item.mcp_name || '').toLowerCase().includes(q) ||
-        (item.mcp_desc || '').toLowerCase().includes(q) ||
-        (item.mcp_key || '').toLowerCase().includes(q)
-    );
-  }, [items, searchQuery]);
-
-  const webConnected = useMemo(
-    () => filteredIntegrations.filter((i) => installed[i.key]),
-    [filteredIntegrations, installed]
-  );
-
-  type SortedWebItem =
-    | { kind: 'google-search'; connected: boolean }
-    | {
-        kind: 'integration';
-        item: IntegrationItem;
-        connected: boolean;
-        comingSoon: boolean;
-      };
-
-  const sortedWebItems = useMemo((): SortedWebItem[] => {
-    const all: SortedWebItem[] = [
-      { kind: 'google-search', connected: searchConnected },
-      ...filteredIntegrations.map((item) => ({
-        kind: 'integration' as const,
-        item,
-        connected: !!installed[item.key],
-        comingSoon: (COMING_SOON_NAMES as readonly string[]).includes(
-          item.name
-        ),
-      })),
-    ];
-
-    const priority = (w: SortedWebItem) => {
-      if (w.kind === 'integration' && w.comingSoon) return 2;
-      return w.connected ? 0 : 1;
-    };
-    const getName = (w: SortedWebItem) =>
-      w.kind === 'google-search' ? 'Google Search' : w.item.name;
-
-    return [...all].sort((a, b) => {
-      const diff = priority(a) - priority(b);
-      return diff !== 0 ? diff : getName(a).localeCompare(getName(b));
-    });
-  }, [filteredIntegrations, installed, searchConnected]);
-
-  // get list
-  const fetchList = useCallback(() => {
-    setIsLoading(true);
-    setError('');
-    proxyFetchGet('/api/v1/mcp/users')
-      .then((res) => {
-        if (Array.isArray(res)) {
-          setItems(res);
-        } else if (Array.isArray(res.items)) {
-          setItems(res.items);
-        } else {
-          setItems([]);
-        }
-      })
-      .catch((err) => {
-        setError(err?.message || t('setting.load-failed'));
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
-  }, [t]);
-
-  // get integrations
-  useEffect(() => {
-    setIsLoadingIntegrations(true);
-    proxyFetchGet('/api/v1/config/info')
-      .then((res) => {
-        if (res && typeof res === 'object') {
-          const baseURL = getProxyBaseURL();
-          const list = Object.entries(res).map(
-            ([key, value]: [string, any]) => {
-              let onInstall = null;
-
-              // Special handling for Notion MCP
-              if (key.toLowerCase() === 'notion') {
-                onInstall = async () => {
-                  try {
-                    const response = await fetchPost('/install/tool/notion');
-                    if (response.success) {
-                      // Check if there's a warning (connection failed but installation marked as complete)
-                      if (response.warning) {
-                        toast.warning(response.warning, { duration: 5000 });
-                      } else {
-                        toast.success(
-                          t('setting.notion-mcp-installed-successfully')
-                        );
-                      }
-                      // Save to config to mark as installed
-                      await proxyFetchPost('/api/v1/configs', {
-                        config_group: 'Notion',
-                        config_name: 'MCP_REMOTE_CONFIG_DIR',
-                        config_value:
-                          response.toolkit_name || 'NotionMCPToolkit',
-                      });
-                      // Refresh the integrations list to show the installed state
-                      fetchList();
-                      void fetchInstalled();
-                    } else {
-                      toast.error(
-                        response.error ||
-                          t('setting.failed-to-install-notion-mcp')
-                      );
-                    }
-                  } catch (error: any) {
-                    toast.error(
-                      error.message || t('setting.failed-to-install-notion-mcp')
-                    );
-                  }
-                };
-              } else if (key.toLowerCase() === 'google calendar') {
-                onInstall = async () => {
-                  try {
-                    const response = await fetchPost(
-                      '/install/tool/google_calendar'
-                    );
-                    if (response.success) {
-                      // Check if there's a warning (connection failed but installation marked as complete)
-                      if (response.warning) {
-                        toast.warning(response.warning, { duration: 5000 });
-                      } else {
-                        toast.success(
-                          t('setting.google-calendar-installed-successfully')
-                        );
-                      }
-                      try {
-                        // Ensure we persist a marker config to indicate installation
-                        const existingConfigs =
-                          await proxyFetchGet('/api/v1/configs');
-                        const existing = Array.isArray(existingConfigs)
-                          ? existingConfigs.find(
-                              (c: any) =>
-                                c.config_group?.toLowerCase() ===
-                                  'google calendar' &&
-                                c.config_name === 'GOOGLE_REFRESH_TOKEN'
-                            )
-                          : null;
-
-                        const configPayload = {
-                          config_group: 'Google Calendar',
-                          config_name: 'GOOGLE_REFRESH_TOKEN',
-                          config_value: 'exists',
-                        };
-
-                        if (existing) {
-                          await proxyFetchPut(
-                            `/api/v1/configs/${existing.id}`,
-                            configPayload
-                          );
-                        } else {
-                          await proxyFetchPost(
-                            '/api/v1/configs',
-                            configPayload
-                          );
-                        }
-                      } catch (configError) {
-                        console.warn(
-                          'Failed to persist Google Calendar config',
-                          configError
-                        );
-                      }
-                      // Refresh the integrations list to show the installed state
-                      fetchList();
-                      void fetchInstalled();
-                    } else if (response.status === 'authorizing') {
-                      // Authorization in progress - start polling for completion
-                      toast.info(
-                        t('setting.please-complete-authorization-in-browser')
-                      );
-
-                      // Poll for authorization completion via oauth status endpoint
-                      const pollInterval = setInterval(async () => {
-                        try {
-                          const statusResp = await fetchGet(
-                            '/oauth/status/google_calendar'
-                          );
-                          if (statusResp?.status === 'success') {
-                            clearInterval(pollInterval);
-                            // Now that auth succeeded, run install again to initialize toolkit
-                            const finalize = await fetchPost(
-                              '/install/tool/google_calendar'
-                            );
-                            if (finalize?.success) {
-                              const configs =
-                                await proxyFetchGet('/api/v1/configs');
-                              const existing = Array.isArray(configs)
-                                ? configs.find(
-                                    (c: any) =>
-                                      c.config_group?.toLowerCase() ===
-                                        'google calendar' &&
-                                      c.config_name === 'GOOGLE_REFRESH_TOKEN'
-                                  )
-                                : null;
-
-                              const payload = {
-                                config_group: 'Google Calendar',
-                                config_name: 'GOOGLE_REFRESH_TOKEN',
-                                config_value: 'exists',
-                              };
-
-                              if (existing) {
-                                await proxyFetchPut(
-                                  `/api/v1/configs/${existing.id}`,
-                                  payload
-                                );
-                              } else {
-                                await proxyFetchPost(
-                                  '/api/v1/configs',
-                                  payload
-                                );
-                              }
-
-                              toast.success(
-                                t(
-                                  'setting.google-calendar-installed-successfully'
-                                )
-                              );
-                              fetchList();
-                              void fetchInstalled();
-                            }
-                          } else if (
-                            statusResp?.status === 'failed' ||
-                            statusResp?.status === 'cancelled'
-                          ) {
-                            clearInterval(pollInterval);
-                            const msg =
-                              statusResp?.error ||
-                              (statusResp?.status === 'cancelled'
-                                ? t('setting.authorization-cancelled')
-                                : t('setting.authorization-failed'));
-                            toast.error(msg);
-                          }
-                          // if still authorizing, continue polling
-                        } catch (err) {
-                          console.error('Polling oauth status failed', err);
-                        }
-                      }, 2000);
-
-                      // Safety timeout
-                      setTimeout(
-                        () => clearInterval(pollInterval),
-                        5 * 60 * 1000
-                      );
-                    } else {
-                      toast.error(
-                        response.error ||
-                          response.message ||
-                          t('setting.failed-to-install-google-calendar')
-                      );
-                    }
-                  } catch (error: any) {
-                    toast.error(
-                      error.message ||
-                        t('setting.failed-to-install-google-calendar')
-                    );
-                  }
-                };
-              } else {
-                onInstall = () => {
-                  const url = `${baseURL}/api/v1/oauth/${key.toLowerCase()}/login`;
-                  // Open in a new window to avoid navigating the app/webview
-                  window.open(url, '_blank');
-                };
-              }
-
-              return {
-                key,
-                name: key,
-                env_vars: value.env_vars,
-                desc:
-                  value.env_vars && value.env_vars.length > 0
-                    ? `${t(
-                        'setting.environmental-variables-required'
-                      )}: ${value.env_vars.join(', ')}`
-                    : key.toLowerCase() === 'notion'
-                      ? t('setting.notion-workspace-integration')
-                      : key.toLowerCase() === 'google calendar'
-                        ? t('setting.google-calendar-integration')
-                        : '',
-                onInstall,
-              };
-            }
-          );
-          setIntegrations(
-            list.filter((item) => !EXCLUDED_FROM_MCP.includes(item.key))
-          );
-        }
-      })
-      .finally(() => {
-        setIsLoadingIntegrations(false);
-        void fetchInstalled();
-      });
-  }, [fetchList, t, fetchInstalled]);
-
-  useEffect(() => {
-    fetchList();
-  }, [fetchList]);
-
-  // MCP list switch
-  const handleSwitch = async (id: number, checked: boolean) => {
-    setSwitchLoading((l) => ({ ...l, [id]: true }));
-    try {
-      await proxyFetchPut(`/api/v1/mcp/users/${id}`, {
-        status: checked ? 1 : 2,
-      });
-      fetchList();
-    } finally {
-      setSwitchLoading((l) => ({ ...l, [id]: false }));
-    }
-  };
-
-  const onCloseEnv = useCallback(() => {
-    setShowEnvConfig(false);
-    setActiveMcp(null);
-  }, []);
-
-  const handleWebInstall = useCallback(
-    async (item: IntegrationItem) => {
-      if (item.key === 'Lark' || item.key === 'RAG') {
-        const mcp = createMcpFromItem(item, item.key === 'Lark' ? 15 : 16);
-        setActiveMcp(mcp);
-        setShowEnvConfig(true);
-        return;
-      }
-
-      if (item.key === 'Google Calendar') {
-        const mcp = createMcpFromItem(item, 14);
-        setActiveMcp(mcp);
-        setShowEnvConfig(true);
-        return;
-      }
-
-      if (item.key === 'LinkedIn') {
-        const baseUrl = getProxyBaseURL();
-        window.open(
-          `${baseUrl}/api/v1/oauth/linkedin/login`,
-          '_blank',
-          'width=600,height=700'
-        );
-        return;
-      }
-
-      if (installed[item.key]) return;
-      await item.onInstall();
-      await fetchInstalled();
-      fetchList();
-    },
-    [installed, createMcpFromItem, fetchInstalled, fetchList]
-  );
-
-  const onEnvConnect = useCallback(
-    async (mcp: any) => {
-      await fetchInstalled();
-      await Promise.all(
-        Object.keys(mcp.install_command.env).map(async (k) => {
-          return saveEnvAndConfig(mcp.key, k, mcp.install_command.env[k]);
-        })
-      );
-
-      if (mcp.key === 'Google Calendar') {
-        const calendarItem = integrations.find(
-          (it: IntegrationItem) => it.key === 'Google Calendar'
-        );
-        try {
-          if (calendarItem?.onInstall) await calendarItem.onInstall();
-          else await fetchPost('/install/tool/google_calendar');
-        } catch (_) {}
-      }
-
-      await fetchInstalled();
-      fetchList();
-      onCloseEnv();
-    },
-    [fetchInstalled, saveEnvAndConfig, integrations, fetchList, onCloseEnv]
-  );
-
-  const handleOpenWebConfig = useCallback(
-    (item: IntegrationItem) => {
-      if (item.env_vars?.length > 0) {
-        const mcp = createMcpFromItem(item, -1);
-        setActiveMcp(mcp);
-        setShowEnvConfig(true);
-      }
-    },
-    [createMcpFromItem]
-  );
-
-  const renderSidebarRow = (
-    tabId: string,
-    label: string,
-    kind: 'web' | 'your',
-    isActive: boolean,
-    onSelect: () => void,
-    webInstalled?: boolean,
-    yourEnabled?: boolean,
-    integrationKey?: string
-  ) => {
-    const assetUrl =
-      kind === 'web' && integrationKey
-        ? integrationLeadingIconUrl(integrationKey)
-        : undefined;
-
-    return (
-      <button
-        key={tabId}
-        type="button"
-        onClick={onSelect}
-        className={`flex w-full items-center justify-between rounded-xl px-3 py-2 transition-all duration-200 ${
-          isActive
-            ? 'bg-ds-bg-neutral-subtle-default hover:bg-ds-bg-neutral-subtle-default'
-            : 'bg-fill-fill-transparent hover:bg-fill-fill-transparent-hover'
-        } `}
-      >
-        <div className="flex min-w-0 items-center justify-center gap-3">
-          {kind === 'web' ? (
-            assetUrl ? (
-              <img
-                src={assetUrl}
-                alt=""
-                className="h-5 w-5 shrink-0 object-contain"
-              />
-            ) : (
-              <img
-                src={ellipseIcon}
-                alt=""
-                className="h-3 w-3 shrink-0"
-                style={{
-                  filter: webInstalled
-                    ? 'grayscale(0%) brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(81deg) brightness(95%) contrast(92%)'
-                    : 'none',
-                }}
-              />
-            )
-          ) : (
-            <Wrench className="h-5 w-5 shrink-0 text-ds-icon-neutral-muted-default" />
-          )}
-          <span
-            className={`truncate text-left text-body-sm font-medium ${isActive ? 'text-ds-text-neutral-default-default' : 'text-ds-text-neutral-muted-default'}`}
-          >
-            {label}
-          </span>
-        </div>
-        {kind === 'your' && yourEnabled ? (
-          <div className="m-1 h-2 w-2 shrink-0 rounded-full bg-ds-text-success-default-default" />
-        ) : null}
-      </button>
-    );
-  };
-
-  useEffect(() => {
-    if (!folderHint) return;
-    if (folderHint === 'your') {
-      if (isLoading) return;
-      if (filteredItems.length > 0) {
-        setSelected({ type: 'your', id: filteredItems[0].id });
-      }
-      setFolderHint(null);
-      return;
-    }
-    if (folderHint === 'web') {
-      if (isLoadingIntegrations) return;
-      const pick = filteredIntegrations[0];
-      if (pick) setSelected({ type: 'web', key: pick.key });
-      setFolderHint(null);
-    }
-  }, [
-    folderHint,
-    filteredItems,
-    filteredIntegrations,
-    isLoading,
-    isLoadingIntegrations,
-  ]);
-
-  useEffect(() => {
-    if (!selected) return;
-    if (selected.type === GOOGLE_SEARCH_ID) return;
-    if (selected.type === 'web') {
-      if (!integrations.some((i) => i.key === selected.key)) {
-        setSelected(null);
-      }
-      return;
-    }
-    if (!items.some((i) => i.id === selected.id)) {
-      setSelected(null);
-    }
-  }, [selected, integrations, items]);
-
-  useEffect(() => {
-    if (selected || isLoadingIntegrations || isLoading || folderHint) return;
-    const pick = webConnected[0] || filteredItems[0] || filteredIntegrations[0];
-    if (!pick) return;
-    if ('mcp_name' in pick) {
-      setSelected({ type: 'your', id: pick.id });
-    } else {
-      setSelected({ type: 'web', key: pick.key });
-    }
-  }, [
-    selected,
-    webConnected,
-    filteredIntegrations,
-    filteredItems,
-    isLoadingIntegrations,
-    isLoading,
-    folderHint,
-  ]);
-
-  const renderConnectionPanel = () => {
-    if (!selected) {
-      return (
-        <div className="py-16 text-center text-body-md text-ds-text-neutral-muted-default">
-          {t('setting.mcp-select-connection')}
-        </div>
-      );
-    }
-
-    if (selected.type === GOOGLE_SEARCH_ID) {
-      return (
-        <div className="flex w-full flex-col rounded-2xl bg-ds-bg-neutral-subtle-default">
-          <div className="mx-6 flex flex-row flex-wrap items-center justify-between gap-4 border-x-0 border-b-[0.5px] border-t-0 border-solid border-ds-border-neutral-default-default py-4">
-            <div className="flex min-w-0 items-center gap-2">
-              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-ds-bg-neutral-default-default p-1">
-                <img
-                  src={googleIcon}
-                  alt=""
-                  className="h-5 w-5 object-contain"
-                />
-              </div>
-              <div className="text-body-base min-w-0 truncate font-bold text-ds-text-neutral-default-default">
-                Google Search
-              </div>
-            </div>
-            {searchConnected && (
-              <span className="rounded-full bg-ds-bg-success-subtle-default px-2.5 py-0.5 text-label-xs font-medium text-ds-text-success-default-default">
-                {t('setting.configured', { defaultValue: 'Configured' })}
-              </span>
-            )}
-          </div>
-          <GoogleSearchPanel onConfigured={refreshConnectorConfigs} />
-        </div>
-      );
-    }
-
-    if (selected.type === 'web') {
-      const item = integrations.find((i) => i.key === selected.key) as
-        | IntegrationItem
-        | undefined;
-      if (!item) return null;
-      const isConn = !!installed[item.key];
-      const isComingSoon = (COMING_SOON_NAMES as readonly string[]).includes(
-        item.name
-      );
-      const headerAssetUrl = integrationLeadingIconUrl(item.key);
-
-      return (
-        <div className="flex w-full flex-col rounded-2xl bg-ds-bg-neutral-subtle-default">
-          <div className="mx-6 flex flex-row flex-wrap items-center justify-between gap-4 border-x-0 border-b-[0.5px] border-t-0 border-solid border-ds-border-neutral-default-default py-4">
-            <div className="flex min-w-0 items-center gap-2">
-              {headerAssetUrl ? (
-                <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-ds-bg-neutral-default-default p-1">
-                  <img
-                    src={headerAssetUrl}
-                    alt=""
-                    className="h-5 w-5 object-contain"
-                  />
-                </div>
-              ) : (
-                <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-ds-bg-neutral-default-default p-1">
-                  <img
-                    src={ellipseIcon}
-                    alt=""
-                    className="h-3 w-3"
-                    style={{
-                      filter: isConn
-                        ? 'grayscale(0%) brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(81deg) brightness(95%) contrast(92%)'
-                        : 'none',
-                    }}
-                  />
-                </div>
-              )}
-              <div className="text-body-base min-w-0 truncate font-bold text-ds-text-neutral-default-default">
-                {item.name}
-              </div>
-            </div>
-            <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
-              <Button
-                type="button"
-                disabled={isComingSoon}
-                variant={
-                  isComingSoon ? 'ghost' : isConn ? 'outline' : 'primary'
-                }
-                size="sm"
-                onClick={() => {
-                  if (isComingSoon) return;
-                  if (isConn) void handleUninstall(item);
-                  else void handleWebInstall(item);
-                }}
-              >
-                {isComingSoon
-                  ? t('setting.coming-soon')
-                  : isConn
-                    ? t('setting.disconnect')
-                    : t('setting.connect')}
-              </Button>
-              {item.env_vars?.length > 0 ? (
-                <TooltipSimple content={t('setting.setting')}>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    buttonContent="icon-only"
-                    aria-label={t('setting.setting')}
-                    onClick={() => handleOpenWebConfig(item)}
-                  >
-                    <Settings2 className="h-4 w-4" />
-                  </Button>
-                </TooltipSimple>
-              ) : null}
-            </div>
-          </div>
-          {item.desc ? (
-            <div className="px-6 py-4">
-              <span className="whitespace-pre-wrap text-body-sm text-ds-text-neutral-muted-default">
-                {item.desc}
-              </span>
-            </div>
-          ) : null}
-        </div>
-      );
-    }
-
-    const userItem = items.find((i) => i.id === selected.id);
-    if (!userItem) return null;
-    const enabled = userItem.status === 1;
-
-    return (
-      <div className="flex w-full flex-col rounded-2xl bg-ds-bg-neutral-subtle-default">
-        <div className="mx-6 flex flex-row flex-wrap items-center justify-between gap-4 border-x-0 border-b-[0.5px] border-t-0 border-solid border-ds-border-neutral-default-default py-4">
-          <div className="flex min-w-0 items-center gap-2">
-            <Wrench className="h-7 w-7 shrink-0 rounded-lg bg-ds-bg-neutral-default-default p-1 text-ds-icon-neutral-muted-default" />
-            <div className="text-body-base min-w-0 truncate font-bold text-ds-text-neutral-default-default">
-              {capitalizeFirstLetter(userItem.mcp_name || '')}
-            </div>
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            <Switch
-              variant="outline"
-              size="default"
-              checked={enabled}
-              disabled={!!switchLoading[userItem.id]}
-              onCheckedChange={(checked) =>
-                void handleSwitch(userItem.id, checked)
-              }
-              aria-label={enabled ? t('setting.disable') : t('setting.enable')}
-            />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  buttonContent="icon-only"
-                  aria-label={t('setting.more-options', {
-                    defaultValue: 'More options',
-                  })}
-                >
-                  <MoreHorizontal className="h-4 w-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  className="cursor-pointer"
-                  onClick={() => setShowConfig(userItem)}
-                >
-                  <Pencil className="h-4 w-4" />
-                  {t('setting.edit', { defaultValue: 'Edit' })}
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  className="cursor-pointer text-ds-text-status-error-strong-default focus:text-ds-text-status-error-strong-default"
-                  onClick={() => setDeleteTarget(userItem)}
-                >
-                  <Trash2 className="h-4 w-4 text-ds-text-status-error-strong-default" />
-                  {t('setting.delete', { defaultValue: 'Delete' })}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  // config dialog
-  useEffect(() => {
-    if (showConfig) {
-      setConfigForm({
-        mcp_name: showConfig.mcp_name || '',
-        mcp_desc: showConfig.mcp_desc || '',
-        command: showConfig.command || '',
-        argsArr: showConfig.args ? parseArgsToArray(showConfig.args) : [],
-        env: showConfig.env ? { ...showConfig.env } : {},
-      });
-      setErrorMsg(null);
-    } else {
-      setConfigForm(null);
-      setErrorMsg(null);
-    }
-  }, [showConfig]);
-
-  const handleConfigSave = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!configForm || !showConfig) return;
-    setSaving(true);
-    setErrorMsg(null);
-    try {
-      const mcpData = {
-        mcp_name: configForm.mcp_name,
-        mcp_desc: configForm.mcp_desc,
-        command: configForm.command,
-        args: arrayToArgsJson(configForm.argsArr),
-        env: configForm.env,
-      };
-      await proxyFetchPut(`/api/v1/mcp/users/${showConfig.id}`, mcpData);
-
-      const payload: Record<string, unknown> = {
-        description: configForm.mcp_desc,
-        command: configForm.command,
-        args: arrayToArgsJson(configForm.argsArr),
-      };
-      if (configForm.env && Object.keys(configForm.env).length > 0) {
-        payload.env = configForm.env;
-      }
-      await mcpUpdate(mcpData.mcp_name, payload);
-
-      setShowConfig(null);
-      fetchList();
-    } catch (err: any) {
-      setErrorMsg(err?.message || t('setting.save-failed'));
-    } finally {
-      setSaving(false);
-    }
-  };
-  const handleConfigClose = () => {
-    setShowConfig(null);
-    setConfigForm(null);
-    setErrorMsg(null);
-  };
-  const handleConfigSwitch = async (checked: boolean) => {
-    if (!showConfig) return;
-    setSaving(true);
-    try {
-      await proxyFetchPut(`/api/v1/mcp/users/${showConfig.id}`, {
-        status: checked ? 1 : 0,
-      });
-      setShowConfig((prev) =>
-        prev ? { ...prev, status: checked ? 1 : 0 } : prev
-      );
-      fetchList();
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  // add MCP dialog
-  const handleInstall = async () => {
-    setInstalling(true);
-    try {
-      if (addType === 'local') {
-        let data: ConfigFile;
-        try {
-          data = JSON.parse(localJson);
-
-          // validate mcpServers structure
-          if (!data.mcpServers || typeof data.mcpServers !== 'object') {
-            throw new Error('Invalid mcpServers');
-          }
-
-          // check for name conflicts with existing items
-          const serverNames = Object.keys(data.mcpServers);
-          const conflict = serverNames.find((name) =>
-            items.some((d) => d.mcp_name === name)
-          );
-          if (conflict) {
-            toast.error(
-              t('setting.mcp-server-already-exists', { name: conflict }),
-              {
-                closeButton: true,
-              }
-            );
-            setInstalling(false);
-            return;
-          }
-        } catch (e) {
-          console.error('Invalid JSON:', e);
-          toast.error(t('setting.invalid-json'), { closeButton: true });
-          setInstalling(false);
-          return;
-        }
-        let res = await proxyFetchPost('/api/v1/mcp/import/local', data);
-        if (res.detail) {
-          toast.error(t('setting.invalid-json'), { closeButton: true });
-          setInstalling(false);
-          return;
-        }
-        const mcpServers = data['mcpServers'];
-        if (mcpServers && typeof mcpServers === 'object') {
-          for (const [key, value] of Object.entries(mcpServers)) {
-            await mcpInstall(key, value as Record<string, unknown>);
-          }
-        }
-      }
-      setShowAdd(false);
-      setLocalJson(`{
-				"mcpServers": {}
-			}`);
-      setRemoteName('');
-      setRemoteUrl('');
-      fetchList();
-    } finally {
-      setInstalling(false);
-    }
-  };
-
-  // delete dialog
-  const handleDelete = async () => {
-    if (!deleteTarget) return;
-    setDeleting(true);
-    try {
-      checkAgentTool(deleteTarget.mcp_name);
-      await proxyFetchDelete(`/api/v1/mcp/users/${deleteTarget.id}`);
-      await mcpRemove(deleteTarget.mcp_key);
-      if (selected?.type === 'your' && selected.id === deleteTarget.id) {
-        setSelected(null);
-      }
-      setDeleteTarget(null);
-      fetchList();
-    } finally {
-      setDeleting(false);
-    }
-  };
-
-  return (
-    <div className="m-auto flex h-auto w-full flex-1 flex-col">
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
-        <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
-          {t('setting.mcps-and-tools')}
-        </div>
-      </div>
-
-      <div className="mb-12 flex flex-col gap-6">
-        <div className="flex w-full flex-col items-start justify-between rounded-2xl bg-ds-bg-neutral-default-default px-3 py-2">
-          <div className="z-10 mb-4 flex w-full flex-wrap items-center justify-between gap-3 border-x-0 border-b-[0.5px] border-t-0 border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default px-3 py-2">
-            <div className="text-body-base font-bold text-ds-text-neutral-default-default">
-              {t('setting.connectors')}
-            </div>
-            <div className="flex items-center gap-2">
-              <SearchInput
-                variant="icon"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder={t('setting.search-mcp')}
-              />
-              <Button
-                variant="primary"
-                size="sm"
-                onClick={() => setShowAdd(true)}
-              >
-                <Plus className="h-4 w-4" />
-                {t('setting.mcp-add')}
-              </Button>
-            </div>
-          </div>
-
-          <div className="flex w-full flex-row items-start justify-between gap-4 px-3">
-            <div className="sticky top-[var(--home-hub-history-tabs-offset,49px)] z-10 -ml-2 mr-4 h-fit max-h-[calc(100vh-var(--home-hub-history-tabs-offset,49px)-2rem)] w-[240px] shrink-0 self-start overflow-y-auto rounded-2xl bg-ds-bg-neutral-default-default">
-              <div className="flex flex-col gap-4">
-                <div className="flex flex-col gap-1">
-                  <button
-                    type="button"
-                    onClick={() => setWebCollapsed(!webCollapsed)}
-                    className="flex items-center justify-between rounded-lg bg-transparent px-3 py-2 transition-colors hover:bg-ds-bg-neutral-default-default"
-                  >
-                    <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
-                      {t('setting.mcp-sidebar-built-in')}
-                    </div>
-                    {webCollapsed ? (
-                      <ChevronDown className="h-4 w-4 text-ds-text-neutral-muted-default" />
-                    ) : (
-                      <ChevronUp className="h-4 w-4 text-ds-text-neutral-muted-default" />
-                    )}
-                  </button>
-                  <div
-                    className={`overflow-hidden transition-all duration-300 ease-in-out ${
-                      webCollapsed
-                        ? 'max-h-0 opacity-0'
-                        : 'max-h-[2000px] opacity-100'
-                    }`}
-                  >
-                    {isLoadingIntegrations ? (
-                      <div className="flex flex-col gap-2 px-1">
-                        {[1, 2, 3].map((i) => (
-                          <div
-                            key={i}
-                            className="h-9 rounded-xl bg-ds-bg-neutral-strong-default"
-                          />
-                        ))}
-                      </div>
-                    ) : (
-                      <>
-                        {sortedWebItems.map((wi) => {
-                          if (wi.kind === 'google-search') {
-                            const isActive =
-                              selected?.type === GOOGLE_SEARCH_ID;
-                            return (
-                              <button
-                                key="google-search"
-                                type="button"
-                                onClick={() =>
-                                  setSelected({ type: GOOGLE_SEARCH_ID })
-                                }
-                                className={`flex w-full items-center justify-between rounded-xl px-3 py-2 transition-all duration-200 ${
-                                  isActive
-                                    ? 'bg-ds-bg-neutral-subtle-default hover:bg-ds-bg-neutral-subtle-default'
-                                    : 'bg-fill-fill-transparent hover:bg-fill-fill-transparent-hover'
-                                }`}
-                              >
-                                <div className="flex min-w-0 items-center gap-3">
-                                  <img
-                                    src={googleIcon}
-                                    alt=""
-                                    className="h-5 w-5 shrink-0 object-contain"
-                                  />
-                                  <span
-                                    className={`truncate text-left text-body-sm font-medium ${
-                                      isActive
-                                        ? 'text-ds-text-neutral-default-default'
-                                        : 'text-ds-text-neutral-muted-default'
-                                    }`}
-                                  >
-                                    Google Search
-                                  </span>
-                                </div>
-                                {wi.connected && (
-                                  <div className="m-1 h-2 w-2 shrink-0 rounded-full bg-ds-text-success-default-default" />
-                                )}
-                              </button>
-                            );
-                          }
-
-                          const {
-                            item,
-                            connected: isConn,
-                            comingSoon: isComingSoon,
-                          } = wi;
-                          const assetUrl = integrationLeadingIconUrl(item.key);
-                          const isActive =
-                            selected?.type === 'web' &&
-                            selected.key === item.key;
-                          return (
-                            <button
-                              key={`web-${item.key}`}
-                              type="button"
-                              disabled={isComingSoon}
-                              onClick={() =>
-                                !isComingSoon &&
-                                setSelected({ type: 'web', key: item.key })
-                              }
-                              className={`flex w-full items-center justify-between rounded-xl px-3 py-2 transition-all duration-200 ${
-                                isActive
-                                  ? 'bg-ds-bg-neutral-subtle-default hover:bg-ds-bg-neutral-subtle-default'
-                                  : 'bg-fill-fill-transparent hover:bg-fill-fill-transparent-hover'
-                              } ${isComingSoon ? 'cursor-not-allowed opacity-40' : ''}`}
-                            >
-                              <div className="flex min-w-0 items-center gap-3">
-                                {assetUrl ? (
-                                  <img
-                                    src={assetUrl}
-                                    alt=""
-                                    className="h-5 w-5 shrink-0 object-contain"
-                                  />
-                                ) : (
-                                  <img
-                                    src={ellipseIcon}
-                                    alt=""
-                                    className="h-3 w-3 shrink-0"
-                                    style={{
-                                      filter: isConn
-                                        ? 'grayscale(0%) brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(81deg) brightness(95%) contrast(92%)'
-                                        : 'none',
-                                    }}
-                                  />
-                                )}
-                                <span
-                                  className={`truncate text-left text-body-sm font-medium ${
-                                    isActive
-                                      ? 'text-ds-text-neutral-default-default'
-                                      : 'text-ds-text-neutral-muted-default'
-                                  }`}
-                                >
-                                  {item.name}
-                                </span>
-                              </div>
-                              {isConn && (
-                                <div className="m-1 h-2 w-2 shrink-0 rounded-full bg-ds-text-success-default-default" />
-                              )}
-                            </button>
-                          );
-                        })}
-                      </>
-                    )}
-                  </div>
-                </div>
-
-                <div className="flex flex-col gap-1">
-                  <button
-                    type="button"
-                    onClick={() => setYourCollapsed(!yourCollapsed)}
-                    className="flex items-center justify-between rounded-lg bg-transparent px-3 py-2 transition-colors hover:bg-ds-bg-neutral-default-default"
-                  >
-                    <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
-                      {t('setting.your-own-mcps')}
-                    </div>
-                    {yourCollapsed ? (
-                      <ChevronDown className="h-4 w-4 text-ds-text-neutral-muted-default" />
-                    ) : (
-                      <ChevronUp className="h-4 w-4 text-ds-text-neutral-muted-default" />
-                    )}
-                  </button>
-                  <div
-                    className={`overflow-hidden transition-all duration-300 ease-in-out ${
-                      yourCollapsed
-                        ? 'max-h-0 opacity-0'
-                        : 'max-h-[2000px] opacity-100'
-                    }`}
-                  >
-                    {isLoading ? (
-                      <div className="px-3 py-1 text-body-xs text-ds-text-neutral-muted-default">
-                        {t('setting.loading')}
-                      </div>
-                    ) : error ? (
-                      <div className="px-3 py-1 text-body-xs text-ds-text-status-error-strong-default">
-                        {error}
-                      </div>
-                    ) : filteredItems.length === 0 ? (
-                      <div className="px-3 py-2">
-                        <p className="text-body-xs text-ds-text-neutral-muted-default">
-                          {items.length === 0
-                            ? t('setting.no-mcp-servers', {
-                                defaultValue: 'No MCPs',
-                              })
-                            : t('dashboard.no-results')}
-                        </p>
-                      </div>
-                    ) : (
-                      filteredItems.map((item) =>
-                        renderSidebarRow(
-                          `your-${item.id}`,
-                          capitalizeFirstLetter(item.mcp_name || ''),
-                          'your',
-                          selected?.type === 'your' && selected.id === item.id,
-                          () => setSelected({ type: 'your', id: item.id }),
-                          undefined,
-                          item.status === 1
-                        )
-                      )
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="sticky top-[80px] z-10 min-w-0 flex-1">
-              {isLoadingIntegrations && !selected ? (
-                <div className="flex w-full flex-col items-start justify-start gap-4">
-                  {[1, 2, 3, 4].map((i) => (
-                    <div
-                      key={i}
-                      className="relative w-full overflow-hidden rounded-2xl bg-ds-bg-neutral-strong-default px-6 py-4"
-                    >
-                      <div className="flex w-full flex-row items-center justify-between gap-xs">
-                        <div className="flex flex-row items-center gap-xs">
-                          <div className="mr-2 h-3 w-3 rounded-full bg-ds-bg-neutral-default-hover" />
-                          <div className="h-5 w-32 rounded-md bg-ds-bg-neutral-default-hover" />
-                        </div>
-                        <div className="h-9 w-20 rounded-lg bg-ds-bg-neutral-default-hover" />
-                      </div>
-                      <motion.div
-                        className="via-white/20 absolute inset-0 w-1/2 bg-gradient-to-r from-transparent to-transparent"
-                        initial={{ x: '-100%' }}
-                        animate={{ x: '200%' }}
-                        transition={{
-                          repeat: Infinity,
-                          duration: 1.5,
-                          ease: 'linear',
-                        }}
-                      />
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                renderConnectionPanel()
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <MCPEnvDialog
-        showEnvConfig={showEnvConfig}
-        onClose={onCloseEnv}
-        onConnect={onEnvConnect}
-        activeMcp={activeMcp}
-      />
-
-      <MCPConfigDialog
-        open={!!showConfig}
-        form={configForm}
-        mcp={showConfig}
-        onChange={setConfigForm as any}
-        onSave={handleConfigSave}
-        onClose={handleConfigClose}
-        loading={saving}
-        errorMsg={errorMsg}
-        onSwitchStatus={handleConfigSwitch}
-      />
-      <MCPAddDialog
-        open={showAdd}
-        addType={addType}
-        setAddType={setAddType}
-        localJson={localJson}
-        setLocalJson={setLocalJson}
-        remoteName={remoteName}
-        setRemoteName={setRemoteName}
-        remoteUrl={remoteUrl}
-        setRemoteUrl={setRemoteUrl}
-        installing={installing}
-        onClose={() => setShowAdd(false)}
-        onInstall={handleInstall}
-      />
-      <MCPDeleteDialog
-        open={!!deleteTarget}
-        target={deleteTarget}
-        onCancel={() => setDeleteTarget(null)}
-        onConfirm={handleDelete}
-        loading={deleting}
-      />
-    </div>
-  );
-}
diff --git a/src/pages/Connectors/components/AddConnectorDialog.tsx b/src/pages/Connectors/components/AddConnectorDialog.tsx
new file mode 100644
index 000000000..95733e0fe
--- /dev/null
+++ b/src/pages/Connectors/components/AddConnectorDialog.tsx
@@ -0,0 +1,1390 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import {
+  connectProvider,
+  createConnectorOAuthAuthorization,
+  fetchConnectorProvider,
+  fetchConnectorProviders,
+  getCachedConnectorProviders,
+  isConnectedProvider,
+  providerLabel,
+  type ConnectorAction,
+  type ConnectorAuthDefinition,
+  type ConnectorCredentialField,
+  type ConnectorProvider,
+} from '@/api/connectors';
+import { proxyFetchGet } from '@/api/http';
+import SearchInput from '@/components/Dashboard/SearchInput';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogContentSection,
+  DialogFooter,
+  DialogHeader,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import type { IntegrationItem } from '@/hooks/useIntegrationManagement';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { TFunction } from 'i18next';
+import {
+  BadgeCheck,
+  ChevronDown,
+  ExternalLink,
+  KeyRound,
+  Loader2,
+  PlugZap,
+  Plus,
+  RefreshCw,
+  Server,
+  Settings,
+  ShieldCheck,
+} from 'lucide-react';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type UIEvent,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import type { ConnectorInstallHint } from './types';
+
+export type { ConnectorInstallHint };
+
+/** Large enough to fill the dialog viewport and avoid immediate load-more waterfalls. */
+const MARKET_PAGE_SIZE = 60;
+
+export type AddConnectorTarget =
+  | { source: 'open'; provider: ConnectorProvider }
+  | { source: 'builtin'; item: IntegrationItem }
+  | null;
+
+interface StoredConfig {
+  id: number;
+  config_group?: string;
+  config_name?: string;
+  config_value?: string;
+}
+
+interface AddConnectorDialogProps {
+  open: boolean;
+  connectorGatewayEnabled: boolean;
+  localMode: boolean;
+  builtInItems: IntegrationItem[];
+  builtInInstalled: Record<string, boolean>;
+  configs: StoredConfig[];
+  initialTarget?: AddConnectorTarget;
+  onOpenChange: (open: boolean) => void;
+  onInstalled: (hint: ConnectorInstallHint) => void | Promise<void>;
+  saveBuiltInValue: (
+    provider: string,
+    key: string,
+    value: string
+  ) => Promise<void>;
+  refreshBuiltIns: () => Promise<unknown>;
+}
+
+export { isConnectedProvider, providerLabel };
+
+export function providerActionCount(provider: ConnectorProvider): number {
+  return typeof provider.action_count === 'number'
+    ? provider.action_count
+    : Array.isArray(provider.actions)
+      ? provider.actions.length
+      : 0;
+}
+
+export function actionLabel(action: ConnectorAction, t: TFunction): string {
+  return action.name || action.id || t('connectors.unnamed-action');
+}
+
+function authLabel(authType: string, t: TFunction): string {
+  if (authType === 'api_key') return t('connectors.auth-api-key');
+  if (authType === 'custom_credential') return t('connectors.auth-credential');
+  if (authType === 'oauth2') return t('connectors.auth-oauth');
+  if (authType === 'no_auth') return t('connectors.auth-none');
+  return authType;
+}
+
+function authPriority(authType: string): number {
+  if (authType === 'api_key') return 0;
+  if (authType === 'custom_credential') return 1;
+  if (authType === 'no_auth') return 2;
+  if (authType === 'oauth2') return 3;
+  return 10;
+}
+
+function authDefinitions(
+  provider: ConnectorProvider | null
+): ConnectorAuthDefinition[] {
+  if (!provider) return [];
+  if (provider.auth?.length) {
+    return [...provider.auth].sort(
+      (left, right) => authPriority(left.type) - authPriority(right.type)
+    );
+  }
+  return (provider.authTypes || []).map((type) => ({ type }));
+}
+
+function preferredAuthType(provider: ConnectorProvider | null): string | null {
+  const definitions = authDefinitions(provider);
+  if (!definitions.length) return null;
+  const connectedAuth = provider?.connection?.authType;
+  if (
+    connectedAuth &&
+    definitions.some((auth) => auth.type === connectedAuth)
+  ) {
+    return connectedAuth;
+  }
+  return definitions[0].type;
+}
+
+function credentialFieldsFor(
+  auth: ConnectorAuthDefinition | undefined,
+  t: TFunction
+): ConnectorCredentialField[] {
+  if (!auth) return [];
+  if (auth.type === 'api_key') {
+    return [
+      {
+        key: 'apiKey',
+        label: auth.label || t('connectors.auth-api-key'),
+        inputType: 'password',
+        required: true,
+        secret: true,
+        placeholder: auth.placeholder,
+        description: auth.description,
+      },
+      ...(auth.extraFields || []),
+    ];
+  }
+  if (auth.type === 'custom_credential') return auth.fields || [];
+  return [];
+}
+
+function isBuiltInConfigured(
+  item: IntegrationItem,
+  configs: StoredConfig[]
+): boolean {
+  if (item.key === 'Search') {
+    const names = new Set(
+      configs
+        .filter((config) => String(config.config_value || '').trim())
+        .map((config) => config.config_name)
+    );
+    return names.has('GOOGLE_API_KEY') && names.has('SEARCH_ENGINE_ID');
+  }
+  return configs.some(
+    (config) =>
+      config.config_group?.toLowerCase() === item.key.toLowerCase() &&
+      String(config.config_value || '').trim().length > 0
+  );
+}
+
+export function ProviderIcon({
+  provider,
+  size = 'sm',
+}: {
+  provider: ConnectorProvider | null | undefined;
+  size?: 'list' | 'sm' | 'detail' | 'lg';
+}) {
+  const iconUrl = provider?.iconUrl || '';
+  const [iconFailed, setIconFailed] = useState(false);
+
+  useEffect(() => setIconFailed(false), [iconUrl]);
+
+  const shellClass =
+    size === 'list'
+      ? 'h-5 w-5'
+      : size === 'detail'
+        ? 'h-7 w-7 rounded-lg border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-subtle-default'
+        : size === 'lg'
+          ? 'h-12 w-12 rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-subtle-default'
+          : 'h-10 w-10 rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-subtle-default';
+  const imageClass =
+    size === 'list' || size === 'detail'
+      ? 'h-5 w-5'
+      : size === 'lg'
+        ? 'h-7 w-7 rounded-lg'
+        : 'h-6 w-6 rounded-lg';
+
+  return (
+    <div className={`flex shrink-0 items-center justify-center ${shellClass}`}>
+      {iconUrl && !iconFailed ? (
+        <img
+          src={iconUrl}
+          alt=""
+          className={`${imageClass} object-contain`}
+          loading="lazy"
+          decoding="async"
+          onError={() => setIconFailed(true)}
+        />
+      ) : (
+        <PlugZap
+          className={`${size === 'list' ? 'h-5 w-5' : 'h-4 w-4'} text-ds-icon-neutral-muted-default`}
+        />
+      )}
+    </div>
+  );
+}
+
+function CatalogCardSkeleton() {
+  return (
+    <div className="flex h-20 items-center gap-3 rounded-2xl bg-ds-bg-neutral-default-default px-4 py-3">
+      <Skeleton className="h-10 w-10 shrink-0 rounded-xl" />
+      <div className="min-w-0 flex-1 space-y-2">
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-3 w-48 max-w-full" />
+      </div>
+      <Skeleton className="h-4 w-4 shrink-0 rounded" />
+    </div>
+  );
+}
+
+function CatalogLoadingGrid({ count = 8 }: { count?: number }) {
+  return (
+    <div className="grid w-full grid-cols-1 gap-3 md:grid-cols-2">
+      {Array.from({ length: count }).map((_, index) => (
+        <CatalogCardSkeleton key={index} />
+      ))}
+    </div>
+  );
+}
+
+function CatalogLoadingBanner({ label }: { label: string }) {
+  return (
+    <motion.div
+      key="catalog-loading-banner"
+      initial={{ opacity: 0, y: -8, height: 0 }}
+      animate={{ opacity: 1, y: 0, height: 'auto' }}
+      exit={{ opacity: 0, y: -12, height: 0 }}
+      transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
+      className="overflow-hidden"
+    >
+      <div className="flex flex-col items-center justify-center gap-2 py-3 text-ds-text-neutral-muted-default">
+        <Loader2 className="h-5 w-5 animate-spin" />
+        <span className="text-body-xs">{label}</span>
+      </div>
+    </motion.div>
+  );
+}
+
+export default function AddConnectorDialog({
+  open,
+  connectorGatewayEnabled,
+  localMode,
+  builtInItems,
+  builtInInstalled,
+  configs,
+  initialTarget = null,
+  onOpenChange,
+  onInstalled,
+  saveBuiltInValue,
+  refreshBuiltIns,
+}: AddConnectorDialogProps) {
+  const { t } = useTranslation();
+  const [browseSource, setBrowseSource] = useState<'open' | 'builtin'>(
+    connectorGatewayEnabled || !localMode ? 'open' : 'builtin'
+  );
+  const [query, setQuery] = useState('');
+  const [debouncedQuery, setDebouncedQuery] = useState('');
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [catalog, setCatalog] = useState<ConnectorProvider[]>([]);
+  const [catalogLoading, setCatalogLoading] = useState(false);
+  const [catalogRefreshing, setCatalogRefreshing] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [catalogError, setCatalogError] = useState<string | null>(null);
+  const [selectedProvider, setSelectedProvider] =
+    useState<ConnectorProvider | null>(null);
+  const [selectedBuiltIn, setSelectedBuiltIn] =
+    useState<IntegrationItem | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [selectedAuthType, setSelectedAuthType] = useState<string | null>(null);
+  const [credentialValues, setCredentialValues] = useState<
+    Record<string, string>
+  >({});
+  const [builtInValues, setBuiltInValues] = useState<Record<string, string>>(
+    {}
+  );
+  const [saving, setSaving] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [authorizationPending, setAuthorizationPending] = useState(false);
+  const [actionsExpanded, setActionsExpanded] = useState(false);
+  const [actionsOverflow, setActionsOverflow] = useState(false);
+  const browseScrollRef = useRef<HTMLDivElement | null>(null);
+  const loadMoreSentinelRef = useRef<HTMLDivElement | null>(null);
+  const actionsListRef = useRef<HTMLDivElement | null>(null);
+  const savedScrollTopRef = useRef(0);
+  const catalogRequestIdRef = useRef(0);
+  const oauthPollRef = useRef<number | null>(null);
+  const oauthTimeoutRef = useRef<number | null>(null);
+  // Poll responses can still be in flight after the interval is cleared, so
+  // guard against finishing the install more than once.
+  const oauthFinishedRef = useRef(false);
+
+  const stopOAuthPolling = useCallback(() => {
+    if (oauthPollRef.current !== null) {
+      window.clearInterval(oauthPollRef.current);
+      oauthPollRef.current = null;
+    }
+    if (oauthTimeoutRef.current !== null) {
+      window.clearTimeout(oauthTimeoutRef.current);
+      oauthTimeoutRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => stopOAuthPolling, [stopOAuthPolling]);
+
+  useEffect(() => {
+    if (!open) return;
+    // Built-in is only available in local mode. Hosted / non-local always uses
+    // Connector Gateway providers.
+    const allowBuiltin = localMode;
+    const targetSource =
+      allowBuiltin && initialTarget?.source === 'builtin'
+        ? 'builtin'
+        : connectorGatewayEnabled || !localMode
+          ? 'open'
+          : 'builtin';
+    setBrowseSource(targetSource);
+    setSelectedProvider(
+      initialTarget?.source === 'open' ? initialTarget.provider : null
+    );
+    setSelectedBuiltIn(
+      allowBuiltin && initialTarget?.source === 'builtin'
+        ? initialTarget.item
+        : null
+    );
+    setSelectedAuthType(
+      initialTarget?.source === 'open'
+        ? preferredAuthType(initialTarget.provider)
+        : null
+    );
+    setCredentialValues({});
+    setFormError(null);
+    setAuthorizationPending(false);
+    setActionsExpanded(false);
+  }, [connectorGatewayEnabled, initialTarget, localMode, open]);
+
+  useEffect(() => {
+    setActionsExpanded(false);
+  }, [selectedProvider?.service]);
+
+  useLayoutEffect(() => {
+    const element = actionsListRef.current;
+    if (!element || !selectedProvider?.actions?.length) {
+      setActionsOverflow(false);
+      return;
+    }
+    setActionsOverflow(element.scrollHeight > 200);
+  }, [selectedProvider?.actions, selectedProvider?.service, detailLoading]);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedQuery(query.trim()), 250);
+    return () => window.clearTimeout(timer);
+  }, [query]);
+
+  const applyCatalogPage = useCallback(
+    (
+      response: Awaited<ReturnType<typeof fetchConnectorProviders>>,
+      pageToLoad: number,
+      append: boolean
+    ) => {
+      setCatalog((current) => {
+        if (!append) return response.providers;
+        const seen = new Set(current.map((provider) => provider.service));
+        return [
+          ...current,
+          ...response.providers.filter(
+            (provider) => !seen.has(provider.service)
+          ),
+        ];
+      });
+      setHasMore(pageToLoad < response.total_pages);
+      setPage(pageToLoad);
+      setCatalogError(null);
+    },
+    []
+  );
+
+  const loadCatalogPage = useCallback(
+    async (
+      pageToLoad: number,
+      append: boolean,
+      options: { soft?: boolean; bypassCache?: boolean } = {}
+    ) => {
+      if (!open || !connectorGatewayEnabled || browseSource !== 'open') return;
+      const requestId = ++catalogRequestIdRef.current;
+      const soft = options.soft === true;
+      if (append) {
+        setLoadingMore(true);
+      } else if (soft) {
+        setCatalogRefreshing(true);
+      } else {
+        setCatalogLoading(true);
+        setCatalogError(null);
+      }
+      try {
+        const response = await fetchConnectorProviders(
+          {
+            page: pageToLoad,
+            pageSize: MARKET_PAGE_SIZE,
+            query: debouncedQuery,
+          },
+          { bypassCache: options.bypassCache === true || soft }
+        );
+        if (requestId !== catalogRequestIdRef.current) return;
+        applyCatalogPage(response, pageToLoad, append);
+      } catch (error: any) {
+        if (requestId !== catalogRequestIdRef.current) return;
+        if (!append && !soft) {
+          setCatalog([]);
+          setHasMore(false);
+          setCatalogError(
+            error?.message || t('connectors.load-gateway-failed')
+          );
+        }
+      } finally {
+        if (requestId === catalogRequestIdRef.current) {
+          setCatalogLoading(false);
+          setCatalogRefreshing(false);
+          setLoadingMore(false);
+        }
+      }
+    },
+    [
+      applyCatalogPage,
+      browseSource,
+      connectorGatewayEnabled,
+      debouncedQuery,
+      open,
+      t,
+    ]
+  );
+
+  const loadNextCatalogPage = useCallback(() => {
+    if (
+      browseSource !== 'open' ||
+      selectedProvider ||
+      selectedBuiltIn ||
+      !hasMore ||
+      catalogLoading ||
+      loadingMore ||
+      catalogError ||
+      catalog.length === 0
+    ) {
+      return;
+    }
+    void loadCatalogPage(page + 1, true);
+  }, [
+    browseSource,
+    catalog.length,
+    catalogError,
+    catalogLoading,
+    hasMore,
+    loadCatalogPage,
+    loadingMore,
+    page,
+    selectedBuiltIn,
+    selectedProvider,
+  ]);
+
+  const handleBrowseScroll = useCallback(
+    (event: UIEvent<HTMLDivElement>) => {
+      if (browseSource !== 'open') return;
+      const element = event.currentTarget;
+      const distanceToBottom =
+        element.scrollHeight - element.scrollTop - element.clientHeight;
+      if (distanceToBottom <= 280) {
+        loadNextCatalogPage();
+      }
+    },
+    [browseSource, loadNextCatalogPage]
+  );
+
+  // Hydrate from cache before paint to avoid empty-state / skeleton flash on open.
+  useLayoutEffect(() => {
+    if (!open || !connectorGatewayEnabled || browseSource !== 'open') return;
+    const cached = getCachedConnectorProviders({
+      page: 1,
+      pageSize: MARKET_PAGE_SIZE,
+      query: debouncedQuery,
+    });
+    if (cached) {
+      applyCatalogPage(cached, 1, false);
+      setCatalogLoading(false);
+      return;
+    }
+    setCatalog([]);
+    setHasMore(true);
+    setPage(1);
+    setCatalogError(null);
+    setCatalogLoading(true);
+  }, [
+    applyCatalogPage,
+    browseSource,
+    connectorGatewayEnabled,
+    debouncedQuery,
+    open,
+  ]);
+
+  useEffect(() => {
+    if (!open || !connectorGatewayEnabled || browseSource !== 'open') return;
+    const cached = getCachedConnectorProviders({
+      page: 1,
+      pageSize: MARKET_PAGE_SIZE,
+      query: debouncedQuery,
+    });
+    if (cached) {
+      void loadCatalogPage(1, false, { soft: true });
+      return;
+    }
+    void loadCatalogPage(1, false);
+  }, [
+    browseSource,
+    connectorGatewayEnabled,
+    debouncedQuery,
+    loadCatalogPage,
+    open,
+  ]);
+
+  useEffect(() => {
+    if (browseSource !== 'open') return;
+    const root = browseScrollRef.current;
+    const sentinel = loadMoreSentinelRef.current;
+    if (!root || !sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0]?.isIntersecting) return;
+        loadNextCatalogPage();
+      },
+      { root, rootMargin: '160px' }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [browseSource, loadNextCatalogPage]);
+
+  const selectedProviderService = selectedProvider?.service;
+
+  useEffect(() => {
+    if (!selectedProviderService) return;
+    let cancelled = false;
+    setDetailLoading(true);
+    void fetchConnectorProvider(selectedProviderService)
+      .then((response) => {
+        if (cancelled) return;
+        setSelectedProvider(response.provider);
+        setSelectedAuthType(preferredAuthType(response.provider));
+      })
+      .catch((error: any) => {
+        if (!cancelled) {
+          setFormError(error?.message || t('connectors.detail-load-failed'));
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setDetailLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedProviderService, t]);
+
+  useEffect(() => {
+    if (!selectedBuiltIn) {
+      setBuiltInValues({});
+      return;
+    }
+    const next: Record<string, string> = {};
+    selectedBuiltIn.env_vars.forEach((key) => {
+      const match = configs.find((config) => config.config_name === key);
+      next[key] = String(match?.config_value || '');
+    });
+    setBuiltInValues(next);
+  }, [configs, selectedBuiltIn]);
+
+  const selectedAuth = useMemo(
+    () =>
+      authDefinitions(selectedProvider).find(
+        (auth) => auth.type === selectedAuthType
+      ),
+    [selectedAuthType, selectedProvider]
+  );
+  const credentialFields = useMemo(
+    () => credentialFieldsFor(selectedAuth, t),
+    [selectedAuth, t]
+  );
+  const canInstallProvider =
+    Boolean(selectedProvider && selectedAuth) &&
+    (selectedAuth?.type === 'oauth2' ||
+      selectedAuth?.type === 'no_auth' ||
+      credentialFields.every(
+        (field) => !field.required || credentialValues[field.key]?.trim()
+      ));
+
+  const filteredBuiltIns = useMemo(() => {
+    const normalized = debouncedQuery.toLowerCase();
+    if (!normalized) return builtInItems;
+    return builtInItems.filter((item) => {
+      const description =
+        typeof item.desc === 'string' ? item.desc.toLowerCase() : '';
+      return (
+        item.name.toLowerCase().includes(normalized) ||
+        item.key.toLowerCase().includes(normalized) ||
+        description.includes(normalized)
+      );
+    });
+  }, [builtInItems, debouncedQuery]);
+
+  const closeDialog = useCallback(() => {
+    stopOAuthPolling();
+    onOpenChange(false);
+  }, [onOpenChange, stopOAuthPolling]);
+
+  const finishInstall = useCallback(
+    async (hint: ConnectorInstallHint) => {
+      stopOAuthPolling();
+      await onInstalled(hint);
+      closeDialog();
+    },
+    [closeDialog, onInstalled, stopOAuthPolling]
+  );
+
+  const startOAuthPolling = useCallback(
+    (service: string) => {
+      stopOAuthPolling();
+      oauthFinishedRef.current = false;
+      setAuthorizationPending(true);
+      oauthPollRef.current = window.setInterval(() => {
+        void fetchConnectorProvider(service)
+          .then((response) => {
+            if (oauthFinishedRef.current) return;
+            setSelectedProvider(response.provider);
+            if (isConnectedProvider(response.provider)) {
+              oauthFinishedRef.current = true;
+              toast.success(
+                t('connectors.installed-toast', {
+                  name: providerLabel(response.provider),
+                })
+              );
+              void finishInstall({ source: 'open', key: service });
+            }
+          })
+          .catch(() => undefined);
+      }, 1500);
+      oauthTimeoutRef.current = window.setTimeout(
+        () => {
+          stopOAuthPolling();
+          setAuthorizationPending(false);
+          setFormError(t('connectors.authorization-pending'));
+        },
+        5 * 60 * 1000
+      );
+    },
+    [finishInstall, stopOAuthPolling, t]
+  );
+
+  const installOpenProvider = useCallback(async () => {
+    if (!selectedProvider || !selectedAuth) return;
+    setSaving(true);
+    setFormError(null);
+    try {
+      if (selectedAuth.type === 'oauth2') {
+        const authorization = await createConnectorOAuthAuthorization(
+          selectedProvider.service,
+          selectedProvider.connection?.connectionName
+        );
+        if (!authorization.authorizationUrl) {
+          throw new Error(t('connectors.no-authorization-url'));
+        }
+        window.open(
+          authorization.authorizationUrl,
+          'eigent_connector_oauth',
+          'popup=yes,width=720,height=760,menubar=no,toolbar=no,location=yes,status=no'
+        );
+        startOAuthPolling(selectedProvider.service);
+        toast.success(t('connectors.authorization-started'));
+        return;
+      }
+
+      await connectProvider(selectedProvider.service, {
+        auth_type: selectedAuth.type,
+        values:
+          selectedAuth.type === 'no_auth'
+            ? {}
+            : credentialFields.reduce<Record<string, string>>((acc, field) => {
+                acc[field.key] = credentialValues[field.key] || '';
+                return acc;
+              }, {}),
+      });
+      toast.success(
+        t('connectors.installed-toast', {
+          name: providerLabel(selectedProvider),
+        })
+      );
+      await finishInstall({
+        source: 'open',
+        key: selectedProvider.service,
+      });
+    } catch (error: any) {
+      setFormError(error?.message || t('connectors.install-failed'));
+    } finally {
+      setSaving(false);
+    }
+  }, [
+    credentialFields,
+    credentialValues,
+    finishInstall,
+    selectedAuth,
+    selectedProvider,
+    startOAuthPolling,
+    t,
+  ]);
+
+  const verifyBuiltInAuthorization = useCallback(async () => {
+    if (!selectedBuiltIn) return;
+    setSaving(true);
+    setFormError(null);
+    try {
+      const response = await proxyFetchGet('/api/v1/configs');
+      const nextConfigs = Array.isArray(response) ? response : [];
+      await refreshBuiltIns();
+      if (!isBuiltInConfigured(selectedBuiltIn, nextConfigs)) {
+        throw new Error(t('connectors.authorization-incomplete'));
+      }
+      await finishInstall({ source: 'builtin', key: selectedBuiltIn.key });
+    } catch (error: any) {
+      setFormError(error?.message || t('connectors.refresh-status-failed'));
+    } finally {
+      setSaving(false);
+    }
+  }, [finishInstall, refreshBuiltIns, selectedBuiltIn, t]);
+
+  const installBuiltIn = useCallback(async () => {
+    if (!selectedBuiltIn) return;
+    setSaving(true);
+    setFormError(null);
+    try {
+      if (selectedBuiltIn.env_vars.length > 0) {
+        for (const key of selectedBuiltIn.env_vars) {
+          const value = builtInValues[key]?.trim();
+          if (!value) {
+            throw new Error(t('connectors.field-required', { field: key }));
+          }
+          await saveBuiltInValue(selectedBuiltIn.key, key, value);
+        }
+      }
+
+      if (
+        selectedBuiltIn.key === 'Google Calendar' ||
+        selectedBuiltIn.env_vars.length === 0
+      ) {
+        await selectedBuiltIn.onInstall();
+      }
+
+      await refreshBuiltIns();
+      if (
+        selectedBuiltIn.key === 'Google Calendar' ||
+        (selectedBuiltIn.env_vars.length === 0 &&
+          selectedBuiltIn.key !== 'Notion')
+      ) {
+        setAuthorizationPending(true);
+        toast.success(t('connectors.authorization-started'));
+        return;
+      }
+
+      toast.success(
+        t('connectors.installed-toast', { name: selectedBuiltIn.name })
+      );
+      await finishInstall({ source: 'builtin', key: selectedBuiltIn.key });
+    } catch (error: any) {
+      setFormError(error?.message || t('connectors.install-failed'));
+    } finally {
+      setSaving(false);
+    }
+  }, [
+    builtInValues,
+    finishInstall,
+    refreshBuiltIns,
+    saveBuiltInValue,
+    selectedBuiltIn,
+    t,
+  ]);
+
+  const openProvider = (provider: ConnectorProvider) => {
+    savedScrollTopRef.current = browseScrollRef.current?.scrollTop || 0;
+    setSelectedProvider(provider);
+    setSelectedAuthType(preferredAuthType(provider));
+    setCredentialValues({});
+    setFormError(null);
+  };
+
+  const goBackToBrowse = () => {
+    stopOAuthPolling();
+    setSelectedProvider(null);
+    setSelectedBuiltIn(null);
+    setSelectedAuthType(null);
+    setCredentialValues({});
+    setBuiltInValues({});
+    setFormError(null);
+    setAuthorizationPending(false);
+    window.setTimeout(() => {
+      if (browseScrollRef.current) {
+        browseScrollRef.current.scrollTop = savedScrollTopRef.current;
+      }
+    }, 0);
+  };
+
+  const showingDetail = Boolean(selectedProvider || selectedBuiltIn);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) closeDialog();
+      }}
+    >
+      <DialogContent
+        size="lg"
+        showCloseButton
+        onClose={closeDialog}
+        overlayVariant="dimmed"
+        className="h-[min(760px,90vh)] !max-w-[960px]"
+      >
+        <DialogHeader
+          title={
+            selectedProvider
+              ? providerLabel(selectedProvider)
+              : selectedBuiltIn
+                ? selectedBuiltIn.name
+                : t('connectors.browse')
+          }
+          showBackButton={showingDetail}
+          onBackClick={goBackToBrowse}
+          className="pr-12"
+        />
+
+        {!showingDetail ? (
+          <DialogContentSection className="flex min-h-0 flex-col overflow-hidden p-0">
+            <div className="px-4 py-3">
+              <SearchInput
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={t('connectors.search-connectors')}
+              />
+            </div>
+
+            {localMode ? (
+              <div className="flex items-center gap-2 px-4 pt-3">
+                {connectorGatewayEnabled ? (
+                  <Button
+                    type="button"
+                    variant={browseSource === 'open' ? 'secondary' : 'ghost'}
+                    size="sm"
+                    onClick={() => setBrowseSource('open')}
+                  >
+                    <PlugZap className="h-4 w-4" />
+                    {t('connectors.gateway-connectors')}
+                  </Button>
+                ) : null}
+                <Button
+                  type="button"
+                  variant={browseSource === 'builtin' ? 'secondary' : 'ghost'}
+                  size="sm"
+                  onClick={() => setBrowseSource('builtin')}
+                >
+                  <Server className="h-4 w-4" />
+                  {t('connectors.source-built-in')}
+                </Button>
+              </div>
+            ) : null}
+
+            <div
+              ref={browseScrollRef}
+              onScroll={handleBrowseScroll}
+              className="scrollbar-always-visible min-h-0 flex-1 overflow-y-auto py-4 pl-4 pr-2"
+            >
+              {browseSource === 'open' ? (
+                !connectorGatewayEnabled ? (
+                  <div className="flex min-h-48 flex-col items-center justify-center gap-1 px-6 text-center">
+                    <span className="text-body-sm font-bold text-ds-text-neutral-default-default">
+                      {t('connectors.gateway-unavailable')}
+                    </span>
+                    <span className="text-body-sm text-ds-text-neutral-muted-default">
+                      {t('connectors.gateway-unavailable-desc')}
+                    </span>
+                  </div>
+                ) : catalogError && catalog.length === 0 && !catalogLoading ? (
+                  <div className="flex min-h-48 flex-col items-center justify-center gap-3 text-center">
+                    <span className="block text-body-sm text-ds-text-error-default-default">
+                      {catalogError}
+                    </span>
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() =>
+                        void loadCatalogPage(1, false, { bypassCache: true })
+                      }
+                    >
+                      <RefreshCw className="h-4 w-4" />
+                      {t('connectors.try-again')}
+                    </Button>
+                  </div>
+                ) : !catalogLoading &&
+                  !catalogRefreshing &&
+                  catalog.length === 0 ? (
+                  <div className="flex min-h-48 items-center justify-center text-body-sm text-ds-text-neutral-muted-default">
+                    {t('connectors.no-gateway-found')}
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    <AnimatePresence initial={false}>
+                      {catalogLoading || catalogRefreshing ? (
+                        <CatalogLoadingBanner
+                          label={
+                            catalogRefreshing
+                              ? t('connectors.updating')
+                              : t('connectors.loading')
+                          }
+                        />
+                      ) : null}
+                    </AnimatePresence>
+                    {catalogLoading && catalog.length === 0 ? (
+                      <CatalogLoadingGrid />
+                    ) : (
+                      <>
+                        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+                          {catalog.map((provider) => {
+                            const installed = isConnectedProvider(provider);
+                            return (
+                              <button
+                                key={provider.service}
+                                type="button"
+                                onClick={() => openProvider(provider)}
+                                className="group flex h-20 items-center gap-3 rounded-2xl border border-solid border-transparent bg-ds-bg-neutral-default-default px-4 py-3 text-left transition-colors hover:border-ds-border-neutral-default-default hover:bg-ds-bg-neutral-default-hover"
+                              >
+                                <ProviderIcon provider={provider} />
+                                <div className="min-w-0 flex-1">
+                                  <div className="flex min-w-0 items-center gap-1.5">
+                                    <span className="text-body-base truncate font-bold text-ds-text-neutral-default-default">
+                                      {providerLabel(provider)}
+                                    </span>
+                                    <BadgeCheck
+                                      className={`h-3.5 w-3.5 shrink-0 ${
+                                        installed
+                                          ? 'text-ds-icon-success-default-default'
+                                          : 'text-ds-icon-neutral-muted-default'
+                                      }`}
+                                    />
+                                    {provider.recommended ? (
+                                      <span className="shrink-0 text-label-xs font-bold text-ds-text-warning-strong-default">
+                                        {t('connectors.new')}
+                                      </span>
+                                    ) : null}
+                                  </div>
+                                  {provider.description?.trim() ? (
+                                    <span className="mt-1 line-clamp-1 block text-body-xs text-ds-text-neutral-muted-default">
+                                      {provider.description.trim()}
+                                    </span>
+                                  ) : null}
+                                </div>
+                                {installed ? (
+                                  <Settings className="h-4 w-4 shrink-0 text-ds-icon-neutral-muted-default" />
+                                ) : (
+                                  <Plus className="h-4 w-4 shrink-0 text-ds-icon-neutral-muted-default" />
+                                )}
+                              </button>
+                            );
+                          })}
+                        </div>
+                        {hasMore ? (
+                          <div
+                            ref={loadMoreSentinelRef}
+                            className="flex w-full flex-col gap-3 py-4"
+                          >
+                            {loadingMore ? (
+                              <>
+                                <div className="flex flex-col items-center gap-2 text-body-xs text-ds-text-neutral-muted-default">
+                                  <Loader2 className="h-4 w-4 animate-spin" />
+                                  {t('connectors.loading-more')}
+                                </div>
+                                <CatalogLoadingGrid count={2} />
+                              </>
+                            ) : (
+                              <div className="h-4 w-full" aria-hidden />
+                            )}
+                          </div>
+                        ) : null}
+                      </>
+                    )}
+                  </div>
+                )
+              ) : filteredBuiltIns.length === 0 ? (
+                <div className="flex min-h-48 items-center justify-center text-body-sm text-ds-text-neutral-muted-default">
+                  {t('connectors.no-built-in-found')}
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+                  {filteredBuiltIns.map((item) => {
+                    const installed = Boolean(builtInInstalled[item.key]);
+                    return (
+                      <button
+                        key={item.key}
+                        type="button"
+                        onClick={() => {
+                          savedScrollTopRef.current =
+                            browseScrollRef.current?.scrollTop || 0;
+                          setSelectedBuiltIn(item);
+                          setFormError(null);
+                        }}
+                        className="group flex h-20 items-center gap-3 rounded-2xl border border-solid border-transparent bg-ds-bg-neutral-default-default px-4 py-3 text-left transition-colors hover:border-ds-border-neutral-default-default hover:bg-ds-bg-neutral-subtle-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-ring-brand-default-focus"
+                      >
+                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-subtle-default">
+                          <Server className="h-5 w-5 text-ds-icon-neutral-muted-default" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="flex min-w-0 items-center gap-1.5">
+                            <span className="truncate text-body-sm font-bold text-ds-text-neutral-default-default">
+                              {item.name}
+                            </span>
+                            <Badge size="xs" variant="outline">
+                              {t('connectors.source-built-in')}
+                            </Badge>
+                          </div>
+                          <span className="mt-1 line-clamp-1 block text-body-xs text-ds-text-neutral-muted-default">
+                            {typeof item.desc === 'string'
+                              ? item.desc
+                              : t('connectors.local-integration')}
+                          </span>
+                        </div>
+                        {installed ? (
+                          <Settings className="h-4 w-4 shrink-0 text-ds-icon-neutral-muted-default" />
+                        ) : (
+                          <Plus className="h-4 w-4 shrink-0 text-ds-icon-neutral-muted-default" />
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </DialogContentSection>
+        ) : selectedProvider ? (
+          <>
+            <DialogContentSection className="scrollbar-always-visible overflow-y-auto p-6">
+              {detailLoading ? (
+                <div className="space-y-3">
+                  <div className="h-24 animate-pulse rounded-xl bg-ds-bg-neutral-strong-default" />
+                  <div className="h-44 animate-pulse rounded-xl bg-ds-bg-neutral-strong-default" />
+                </div>
+              ) : (
+                <div className="mx-auto flex max-w-3xl flex-col gap-5">
+                  <div className="flex items-center gap-3">
+                    <ProviderIcon provider={selectedProvider} size="lg" />
+                    <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">
+                      <span className="text-heading-xs truncate font-bold text-ds-text-neutral-default-default">
+                        {providerLabel(selectedProvider)}
+                      </span>
+                      <span className="shrink-0 text-body-sm text-ds-text-neutral-muted-default">
+                        {t('connectors.supported-actions-count', {
+                          num: providerActionCount(selectedProvider),
+                        })}
+                      </span>
+                    </div>
+                    {selectedProvider.homepageUrl ? (
+                      <a
+                        href={selectedProvider.homepageUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex shrink-0 items-center gap-1 text-label-sm text-ds-text-neutral-muted-default underline-offset-2 hover:underline"
+                      >
+                        {t('connectors.provider-website')}
+                        <ExternalLink className="h-3.5 w-3.5" />
+                      </a>
+                    ) : null}
+                  </div>
+
+                  {selectedProvider.actions?.length ? (
+                    <div className="overflow-hidden rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default">
+                      <div className="relative">
+                        <div
+                          ref={actionsListRef}
+                          className={`flex flex-wrap gap-2 p-4 ${
+                            actionsExpanded
+                              ? ''
+                              : 'max-h-[200px] overflow-hidden'
+                          }`}
+                        >
+                          {selectedProvider.actions.map((action, index) => (
+                            <span
+                              key={action.id || action.name || index}
+                              className="inline-flex items-center rounded-full bg-ds-bg-neutral-subtle-default px-3 py-1 text-label-xs text-ds-text-neutral-default-default"
+                            >
+                              {actionLabel(action, t)}
+                            </span>
+                          ))}
+                        </div>
+                        {!actionsExpanded && actionsOverflow ? (
+                          <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-ds-bg-neutral-default-default to-transparent" />
+                        ) : null}
+                      </div>
+                      {actionsOverflow ? (
+                        <button
+                          type="button"
+                          onClick={() => setActionsExpanded((value) => !value)}
+                          className="flex w-full items-center justify-center gap-1.5 border-0 bg-transparent px-4 py-2.5 text-label-xs text-ds-text-neutral-muted-default transition-colors hover:bg-ds-bg-neutral-default-hover hover:text-ds-text-neutral-default-default"
+                        >
+                          {actionsExpanded
+                            ? t('connectors.show-less')
+                            : t('connectors.show-more')}
+                          <ChevronDown
+                            className={`h-4 w-4 transition-transform ${
+                              actionsExpanded ? 'rotate-180' : ''
+                            }`}
+                          />
+                        </button>
+                      ) : null}
+                    </div>
+                  ) : null}
+
+                  {authDefinitions(selectedProvider).length > 1 ? (
+                    <div className="space-y-2">
+                      <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
+                        {t('connectors.authentication')}
+                      </div>
+                      <Tabs
+                        value={selectedAuthType || undefined}
+                        onValueChange={(value) => {
+                          setSelectedAuthType(value);
+                          setCredentialValues({});
+                          setFormError(null);
+                        }}
+                      >
+                        <TabsList appearance="default">
+                          {authDefinitions(selectedProvider).map((auth) => (
+                            <TabsTrigger
+                              key={auth.type}
+                              value={auth.type}
+                              className="!text-label-sm"
+                            >
+                              {authLabel(auth.type, t)}
+                            </TabsTrigger>
+                          ))}
+                        </TabsList>
+                      </Tabs>
+                    </div>
+                  ) : null}
+
+                  {selectedAuth?.type === 'oauth2' ? (
+                    <div className="rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default p-4 text-body-sm text-ds-text-neutral-muted-default">
+                      <div className="mb-2 font-bold text-ds-text-neutral-default-default">
+                        {t('connectors.oauth-title')}
+                      </div>
+                      {t('connectors.oauth-desc')}
+                      {selectedAuth.scopes?.length ? (
+                        <span className="mt-3 block text-body-xs">
+                          {t('connectors.oauth-scopes', {
+                            scopes: selectedAuth.scopes.join(', '),
+                          })}
+                        </span>
+                      ) : null}
+                    </div>
+                  ) : selectedAuth?.type === 'no_auth' ? (
+                    <div className="flex items-start gap-3 rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default p-4 text-body-sm text-ds-text-neutral-muted-default">
+                      <ShieldCheck className="mt-0.5 h-4 w-4 shrink-0" />
+                      {t('connectors.no-auth-desc')}
+                    </div>
+                  ) : credentialFields.length ? (
+                    <div className="space-y-3">
+                      {credentialFields.map((field) =>
+                        field.inputType === 'textarea' ||
+                        field.inputType === 'json' ? (
+                          <Textarea
+                            key={field.key}
+                            variant="enhanced"
+                            title={field.label}
+                            required={field.required}
+                            placeholder={field.placeholder || undefined}
+                            note={field.description || undefined}
+                            value={credentialValues[field.key] || ''}
+                            onChange={(event) =>
+                              setCredentialValues((current) => ({
+                                ...current,
+                                [field.key]: event.target.value,
+                              }))
+                            }
+                          />
+                        ) : (
+                          <Input
+                            key={field.key}
+                            title={field.label}
+                            required={field.required}
+                            type={field.secret ? 'password' : 'text'}
+                            placeholder={field.placeholder || undefined}
+                            note={field.description || undefined}
+                            leadingIcon={<KeyRound className="h-4 w-4" />}
+                            value={credentialValues[field.key] || ''}
+                            onChange={(event) =>
+                              setCredentialValues((current) => ({
+                                ...current,
+                                [field.key]: event.target.value,
+                              }))
+                            }
+                          />
+                        )
+                      )}
+                    </div>
+                  ) : null}
+
+                  {authorizationPending ? (
+                    <div className="flex items-center gap-2 rounded-xl bg-ds-bg-information-subtle-default p-3 text-body-sm text-ds-text-information-strong-default">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      {t('connectors.waiting-authorization')}
+                    </div>
+                  ) : null}
+                  {formError ? (
+                    <div className="rounded-xl bg-ds-bg-error-subtle-default p-3 text-body-sm text-ds-text-error-strong-default">
+                      {formError}
+                    </div>
+                  ) : null}
+                </div>
+              )}
+            </DialogContentSection>
+            <DialogFooter
+              showCancelButton
+              cancelButtonText={t('connectors.cancel')}
+              cancelButtonVariant="ghost"
+              onCancel={closeDialog}
+              showConfirmButton
+              confirmButtonText={
+                saving
+                  ? t('connectors.installing')
+                  : isConnectedProvider(selectedProvider)
+                    ? t('connectors.save')
+                    : t('connectors.install')
+              }
+              onConfirm={() => void installOpenProvider()}
+              confirmButtonDisabled={
+                !canInstallProvider || saving || authorizationPending
+              }
+            />
+          </>
+        ) : selectedBuiltIn ? (
+          <>
+            <DialogContentSection className="scrollbar-always-visible overflow-y-auto p-6">
+              <div className="mx-auto flex max-w-2xl flex-col gap-5">
+                <div className="flex items-start gap-4">
+                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default">
+                    <Server className="h-6 w-6 text-ds-icon-neutral-muted-default" />
+                  </div>
+                  <div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="text-heading-xs text-ds-text-neutral-default-default">
+                        {selectedBuiltIn.name}
+                      </span>
+                      <Badge size="sm" variant="outline">
+                        {t('connectors.source-built-in')}
+                      </Badge>
+                      {builtInInstalled[selectedBuiltIn.key] ? (
+                        <Badge size="sm" variant="secondary" tone="success">
+                          {t('connectors.installed')}
+                        </Badge>
+                      ) : null}
+                    </div>
+                    <span className="mt-2 block text-body-sm text-ds-text-neutral-muted-default">
+                      {typeof selectedBuiltIn.desc === 'string'
+                        ? selectedBuiltIn.desc
+                        : t('connectors.built-in-generic-desc')}
+                    </span>
+                  </div>
+                </div>
+
+                {selectedBuiltIn.env_vars.length ? (
+                  <div className="space-y-3">
+                    {selectedBuiltIn.env_vars.map((key) => (
+                      <Input
+                        key={key}
+                        title={key}
+                        required
+                        type="password"
+                        leadingIcon={<KeyRound className="h-4 w-4" />}
+                        value={builtInValues[key] || ''}
+                        onChange={(event) =>
+                          setBuiltInValues((current) => ({
+                            ...current,
+                            [key]: event.target.value,
+                          }))
+                        }
+                        placeholder={t('connectors.enter-value', {
+                          field: key,
+                        })}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="rounded-xl border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default p-4 text-body-sm text-ds-text-neutral-muted-default">
+                    {t('connectors.built-in-auth-desc')}
+                  </div>
+                )}
+
+                {authorizationPending ? (
+                  <div className="flex items-center justify-between gap-3 rounded-xl bg-ds-bg-information-subtle-default p-3 text-body-sm text-ds-text-information-strong-default">
+                    <span>{t('connectors.complete-authorization')}</span>
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      disabled={saving}
+                      onClick={() => void verifyBuiltInAuthorization()}
+                    >
+                      <RefreshCw className="h-4 w-4" />
+                      {t('connectors.refresh-status')}
+                    </Button>
+                  </div>
+                ) : null}
+                {formError ? (
+                  <div className="rounded-xl bg-ds-bg-error-subtle-default p-3 text-body-sm text-ds-text-error-strong-default">
+                    {formError}
+                  </div>
+                ) : null}
+              </div>
+            </DialogContentSection>
+            <DialogFooter
+              showCancelButton
+              cancelButtonText={t('connectors.cancel')}
+              cancelButtonVariant="ghost"
+              onCancel={closeDialog}
+              showConfirmButton
+              confirmButtonText={
+                saving ? t('connectors.installing') : t('connectors.install')
+              }
+              onConfirm={() => void installBuiltIn()}
+              confirmButtonDisabled={saving || authorizationPending}
+            />
+          </>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/pages/Connectors/components/AddCustomConnectorDialog.tsx b/src/pages/Connectors/components/AddCustomConnectorDialog.tsx
new file mode 100644
index 000000000..24f0db455
--- /dev/null
+++ b/src/pages/Connectors/components/AddCustomConnectorDialog.tsx
@@ -0,0 +1,411 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { mcpInstall, mcpRemove } from '@/api/brain';
+import {
+  proxyFetchDelete,
+  proxyFetchGet,
+  proxyFetchPost,
+  proxyFetchPut,
+} from '@/api/http';
+import {
+  Dialog,
+  DialogContent,
+  DialogContentSection,
+  DialogFooter,
+  DialogHeader,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import loader from '@monaco-editor/loader';
+import MonacoEditor from '@monaco-editor/react';
+import { Server, Wrench } from 'lucide-react';
+import * as monaco from 'monaco-editor';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import type { ConnectorInstallHint, MCPUserItem } from './types';
+
+if (typeof globalThis !== 'undefined') {
+  (globalThis as any).MonacoEnvironment = {
+    // Vite does not bundle Monaco's language workers, so hand every label a
+    // no-op worker: language services (JSON diagnostics etc.) stay disabled,
+    // but the editor itself works and Monaco never throws for a missing
+    // worker. Our own parse errors surface via installCustom's JSON.parse.
+    getWorker() {
+      return new Worker(
+        URL.createObjectURL(
+          new Blob([`self.onmessage = function () {};`], {
+            type: 'application/javascript',
+          })
+        )
+      );
+    },
+  };
+}
+
+loader.config({ monaco });
+
+const LOCAL_MCP_EXAMPLE = `{
+  "mcpServers": {
+    "sequential-thinking": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@modelcontextprotocol/server-sequential-thinking"
+      ]
+    }
+  }
+}`;
+
+interface AddCustomConnectorDialogProps {
+  open: boolean;
+  customMcps: MCPUserItem[];
+  onOpenChange: (open: boolean) => void;
+  onInstalled: (hint: ConnectorInstallHint) => void | Promise<void>;
+}
+
+export default function AddCustomConnectorDialog({
+  open,
+  customMcps,
+  onOpenChange,
+  onInstalled,
+}: AddCustomConnectorDialogProps) {
+  const { t } = useTranslation();
+  const [customType, setCustomType] = useState<'local' | 'remote'>('local');
+  const [localJson, setLocalJson] = useState(LOCAL_MCP_EXAMPLE);
+  const [remoteName, setRemoteName] = useState('');
+  const [remoteUrl, setRemoteUrl] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [jsonError, setJsonError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setCustomType('local');
+    setRemoteName('');
+    setRemoteUrl('');
+    setFormError(null);
+    setJsonError(null);
+    setSaving(false);
+    try {
+      setLocalJson(JSON.stringify(JSON.parse(LOCAL_MCP_EXAMPLE), null, 4));
+    } catch {
+      setLocalJson(LOCAL_MCP_EXAMPLE);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    setJsonError(null);
+  }, [localJson]);
+
+  const closeDialog = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  const installCustom = useCallback(async () => {
+    setSaving(true);
+    setFormError(null);
+    try {
+      if (customType === 'local') {
+        let parsed: {
+          mcpServers?: Record<string, Record<string, unknown>>;
+        };
+        try {
+          parsed = JSON.parse(localJson);
+        } catch (error: any) {
+          throw new Error(
+            t('connectors.invalid-json', {
+              message: error?.message || t('connectors.parse-failed'),
+            })
+          );
+        }
+        if (!parsed.mcpServers || typeof parsed.mcpServers !== 'object') {
+          throw new Error(t('connectors.missing-mcp-servers'));
+        }
+        const names = Object.keys(parsed.mcpServers);
+        if (!names.length) {
+          throw new Error(t('connectors.add-at-least-one'));
+        }
+        const duplicate = names.find((name) =>
+          customMcps.some(
+            (item) => item.mcp_name.toLowerCase() === name.toLowerCase()
+          )
+        );
+        if (duplicate) {
+          throw new Error(t('connectors.already-exists', { name: duplicate }));
+        }
+
+        const response = await proxyFetchPost(
+          '/api/v1/mcp/import/local',
+          parsed
+        );
+        if (response?.detail) throw new Error(String(response.detail));
+        const installedNames: string[] = [];
+        try {
+          for (const [name, config] of Object.entries(parsed.mcpServers)) {
+            await mcpInstall(name, config);
+            installedNames.push(name);
+          }
+        } catch (installError) {
+          // The import already created DB records; remove them so a retry
+          // does not fail the duplicate-name check. Cleanup is best-effort.
+          for (const name of installedNames) {
+            try {
+              await mcpRemove(name);
+            } catch {
+              // Preserve the install error.
+            }
+          }
+          try {
+            const users = await proxyFetchGet('/api/v1/mcp/users');
+            const rows: MCPUserItem[] = Array.isArray(users)
+              ? users
+              : Array.isArray(users?.items)
+                ? users.items
+                : [];
+            const lowerNames = new Set(names.map((n) => n.toLowerCase()));
+            for (const row of rows) {
+              if (lowerNames.has((row.mcp_name || '').toLowerCase())) {
+                await proxyFetchDelete(`/api/v1/mcp/users/${row.id}`);
+              }
+            }
+          } catch {
+            // Preserve the install error.
+          }
+          throw installError;
+        }
+        toast.success(t('connectors.custom-installed', { num: names.length }));
+        await onInstalled({ source: 'custom', key: names[0] });
+        closeDialog();
+        return;
+      }
+
+      const name = remoteName.trim();
+      const url = remoteUrl.trim();
+      if (!name) throw new Error(t('connectors.name-required'));
+      if (
+        customMcps.some(
+          (item) => item.mcp_name.toLowerCase() === name.toLowerCase()
+        )
+      ) {
+        throw new Error(t('connectors.already-exists', { name }));
+      }
+      let parsedUrl: URL;
+      try {
+        parsedUrl = new URL(url);
+      } catch {
+        throw new Error(t('connectors.invalid-remote-url'));
+      }
+      if (!['http:', 'https:'].includes(parsedUrl.protocol)) {
+        throw new Error(t('connectors.remote-url-protocol'));
+      }
+
+      const response = await proxyFetchPost('/api/v1/mcp/import/remote', {
+        server_name: name,
+        server_url: url,
+      });
+      if (response?.detail) throw new Error(String(response.detail));
+      const importedId = Number(response?.mcp_user?.id);
+      if (!Number.isInteger(importedId) || importedId <= 0) {
+        throw new Error(t('connectors.remote-missing-id'));
+      }
+      try {
+        await proxyFetchPut(`/api/v1/mcp/users/${importedId}`, {
+          mcp_key: name,
+          mcp_desc: name,
+        });
+      } catch (error) {
+        try {
+          await proxyFetchDelete(`/api/v1/mcp/users/${importedId}`);
+        } catch {
+          // Preserve the update error; cleanup is best-effort.
+        }
+        throw error;
+      }
+      try {
+        await mcpInstall(name, { url });
+      } catch (installError) {
+        try {
+          await proxyFetchDelete(`/api/v1/mcp/users/${importedId}`);
+        } catch {
+          // Preserve the runtime install error; cleanup is best-effort.
+        }
+        throw installError;
+      }
+      toast.success(t('connectors.installed-toast', { name }));
+      await onInstalled({ source: 'custom', key: name });
+      closeDialog();
+    } catch (error: any) {
+      setFormError(error?.message || t('connectors.install-custom-failed'));
+    } finally {
+      setSaving(false);
+    }
+  }, [
+    closeDialog,
+    customMcps,
+    customType,
+    localJson,
+    onInstalled,
+    remoteName,
+    remoteUrl,
+    t,
+  ]);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) closeDialog();
+      }}
+    >
+      <DialogContent
+        size="lg"
+        showCloseButton
+        onClose={closeDialog}
+        overlayVariant="dimmed"
+        className="h-[min(640px,90vh)] !max-w-[720px]"
+      >
+        <DialogHeader
+          title={t('connectors.custom-title')}
+          subtitle={t('connectors.custom-subtitle')}
+          className="pr-12"
+        />
+
+        <DialogContentSection className="flex min-h-0 flex-col overflow-hidden p-0">
+          <div className="scrollbar-always-visible min-h-0 flex-1 overflow-y-auto p-5">
+            <div className="mx-auto flex max-w-3xl flex-col gap-5">
+              <Tabs
+                value={customType}
+                onValueChange={(value) => {
+                  const next = value as 'local' | 'remote';
+                  setCustomType(next);
+                  setFormError(null);
+                  if (next !== 'local') return;
+                  try {
+                    setLocalJson(
+                      JSON.stringify(JSON.parse(localJson), null, 4)
+                    );
+                    setJsonError(null);
+                  } catch (error: any) {
+                    setJsonError(
+                      t('connectors.json-format-error', {
+                        message: error?.message || String(error),
+                      })
+                    );
+                  }
+                }}
+              >
+                <TabsList appearance="default">
+                  <TabsTrigger value="local">
+                    <Wrench className="h-3.5 w-3.5" />
+                    <span className="!text-body-sm font-bold text-ds-text-neutral-default-default">
+                      {t('connectors.source-local')}
+                    </span>
+                  </TabsTrigger>
+                  <TabsTrigger value="remote">
+                    <Server className="h-3.5 w-3.5" />
+                    <span className="!text-body-sm font-bold text-ds-text-neutral-default-default">
+                      {t('connectors.source-remote')}
+                    </span>
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+
+              <div className="rounded-xl border border-solid border-ds-border-warning-default-default bg-ds-bg-warning-subtle-default p-4 text-body-sm text-ds-text-warning-strong-default">
+                {t('connectors.custom-warning')}
+              </div>
+
+              {customType === 'local' ? (
+                <div className="space-y-2">
+                  <span className="block text-body-sm text-ds-text-neutral-muted-default">
+                    {t('connectors.local-json-desc')}{' '}
+                    <a
+                      href="https://modelcontextprotocol.io/docs/getting-started/intro"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-ds-text-information-strong-default underline underline-offset-2"
+                    >
+                      {t('connectors.learn-more')}
+                    </a>
+                  </span>
+                  {jsonError ? (
+                    <span className="block text-label-sm text-ds-text-error-strong-default">
+                      {jsonError}
+                    </span>
+                  ) : null}
+                  <div className="overflow-hidden rounded-xl border border-solid border-ds-border-neutral-strong-default">
+                    <MonacoEditor
+                      height="300px"
+                      width="100%"
+                      language="json"
+                      theme="vs-dark"
+                      value={localJson}
+                      onChange={(value) => setLocalJson(value ?? '')}
+                      options={{
+                        minimap: { enabled: false },
+                        fontSize: 14,
+                        scrollBeyondLastLine: false,
+                        readOnly: saving,
+                        automaticLayout: true,
+                      }}
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  <Input
+                    title={t('connectors.connector-name')}
+                    required
+                    value={remoteName}
+                    onChange={(event) => setRemoteName(event.target.value)}
+                    placeholder={t('connectors.remote-name-placeholder')}
+                    leadingIcon={<Wrench className="h-4 w-4" />}
+                  />
+                  <Input
+                    title={t('connectors.remote-url')}
+                    required
+                    value={remoteUrl}
+                    onChange={(event) => setRemoteUrl(event.target.value)}
+                    placeholder="https://example.com/mcp"
+                    leadingIcon={<Server className="h-4 w-4" />}
+                    note={t('connectors.remote-url-note')}
+                  />
+                </div>
+              )}
+
+              {formError ? (
+                <div className="rounded-xl bg-ds-bg-error-subtle-default p-3 text-body-sm text-ds-text-error-strong-default">
+                  {formError}
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          <DialogFooter
+            showCancelButton
+            cancelButtonText={t('connectors.cancel')}
+            onCancel={closeDialog}
+            showConfirmButton
+            confirmButtonText={
+              saving ? t('connectors.installing') : t('connectors.install')
+            }
+            onConfirm={() => void installCustom()}
+            confirmButtonDisabled={saving}
+          />
+        </DialogContentSection>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/pages/Connectors/components/GoogleSearchPanel.tsx b/src/pages/Connectors/components/GoogleSearchPanel.tsx
index 3ed7f00a6..4d1ad7f69 100644
--- a/src/pages/Connectors/components/GoogleSearchPanel.tsx
+++ b/src/pages/Connectors/components/GoogleSearchPanel.tsx
@@ -24,15 +24,14 @@ import { toast } from 'sonner';
 const FIELDS = [
   {
     key: 'GOOGLE_API_KEY',
-    label: 'Google API Key',
-    placeholder: 'Enter your Google API key from Google Cloud Console',
-    note: 'Learn how to get your Google API key → https://developers.google.com/custom-search/v1/overview',
+    labelKey: 'connectors.google-api-key',
+    placeholderKey: 'connectors.google-api-key-placeholder',
+    noteKey: 'connectors.google-api-key-note',
   },
   {
     key: 'SEARCH_ENGINE_ID',
-    label: 'Search Engine ID',
-    placeholder:
-      'Enter the Custom Search Engine ID associated with your API key',
+    labelKey: 'connectors.search-engine-id',
+    placeholderKey: 'connectors.search-engine-id-placeholder',
   },
 ] as const;
 
@@ -99,14 +98,11 @@ export function GoogleSearchPanel({ onConfigured }: GoogleSearchPanelProps) {
       {requiresApiKey ? (
         <>
           <span className="whitespace-pre-wrap text-body-sm text-ds-text-neutral-muted-default">
-            {t('setting.google-search-custom-desc', {
-              defaultValue:
-                'Connect to Google Custom Search. Requires a Google API key and a Custom Search Engine (CSE) ID.',
-            })}
+            {t('connectors.google-search-custom-desc')}
           </span>
 
           <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
-            {t('setting.tools', { defaultValue: 'Configuration' })}
+            {t('connectors.configuration-title')}
           </div>
 
           <div className="space-y-3">
@@ -115,9 +111,9 @@ export function GoogleSearchPanel({ onConfigured }: GoogleSearchPanelProps) {
                 key={field.key}
                 id={field.key}
                 size="default"
-                title={field.label}
+                title={t(field.labelKey)}
                 type={showKeys[field.key] ? 'text' : 'password'}
-                placeholder={field.placeholder}
+                placeholder={t(field.placeholderKey)}
                 value={formData[field.key] || ''}
                 onChange={(e) =>
                   setFormData((prev) => ({
@@ -125,7 +121,7 @@ export function GoogleSearchPanel({ onConfigured }: GoogleSearchPanelProps) {
                     [field.key]: e.target.value,
                   }))
                 }
-                note={'note' in field ? field.note : undefined}
+                note={'noteKey' in field ? t(field.noteKey) : undefined}
                 backIcon={<Eye className="h-5 w-5" />}
                 onBackIconClick={() =>
                   setShowKeys((prev) => ({
@@ -145,10 +141,7 @@ export function GoogleSearchPanel({ onConfigured }: GoogleSearchPanelProps) {
         </>
       ) : (
         <div className="rounded-lg bg-ds-bg-neutral-default-default px-4 py-3 text-body-sm text-ds-text-neutral-muted-default">
-          {t('setting.google-search-default-desc', {
-            defaultValue:
-              'Google Search is enabled by default. No API key required.',
-          })}
+          {t('connectors.google-search-default-desc')}
         </div>
       )}
     </div>
diff --git a/src/pages/Connectors/components/MCPAddDialog.tsx b/src/pages/Connectors/components/MCPAddDialog.tsx
deleted file mode 100644
index a09e59301..000000000
--- a/src/pages/Connectors/components/MCPAddDialog.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-
-import {
-  Dialog,
-  DialogContent,
-  DialogContentSection,
-  DialogFooter,
-  DialogHeader,
-} from '@/components/ui/dialog';
-import loader from '@monaco-editor/loader';
-import MonacoEditor from '@monaco-editor/react';
-import * as monaco from 'monaco-editor';
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-if (typeof globalThis !== 'undefined') {
-  (globalThis as any).MonacoEnvironment = {
-    getWorker(_: string, label: string) {
-      if (['json', 'css', 'html', 'typescript', 'javascript'].includes(label)) {
-        return new Worker(
-          URL.createObjectURL(
-            new Blob(
-              [
-                `
-								self.onmessage = function () {};
-								`,
-              ],
-              { type: 'application/javascript' }
-            )
-          )
-        );
-      }
-    },
-  };
-}
-
-loader.config({ monaco }); // put at the top of the MCPAddDialog component file
-
-interface MCPAddDialogProps {
-  open: boolean;
-  addType: 'local' | 'remote';
-  setAddType: (type: 'local' | 'remote') => void;
-  localJson: string;
-  setLocalJson: (v: string) => void;
-  remoteName: string;
-  setRemoteName: (v: string) => void;
-  remoteUrl: string;
-  setRemoteUrl: (v: string) => void;
-  installing: boolean;
-  onClose: () => void;
-  onInstall: () => void;
-}
-
-export default function MCPAddDialog({
-  open,
-  localJson,
-  setLocalJson,
-  installing,
-  onClose,
-  onInstall,
-}: MCPAddDialogProps) {
-  const [jsonError, setJsonError] = useState<string | null>(null);
-  const { t } = useTranslation();
-  // when the dialog is opened, automatically format the JSON
-  React.useEffect(() => {
-    if (open && localJson) {
-      try {
-        const obj = JSON.parse(localJson);
-        setLocalJson(JSON.stringify(obj, null, 4));
-        setJsonError(null);
-      } catch (e: any) {
-        // do not format invalid JSON, keep the original content
-        setJsonError('JSON format error: ' + (e.message || e.toString()));
-      }
-    } else if (open) {
-      setJsonError(null);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-
-  // when localJson changes, clear the error prompt
-  React.useEffect(() => {
-    setJsonError(null);
-  }, [localJson]);
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(v) => {
-        if (!v) onClose();
-      }}
-    >
-      <DialogContent
-        size="lg"
-        showCloseButton
-        onClose={onClose}
-        className="p-0"
-      >
-        <DialogHeader title={t('setting.add-your-agent')} />
-        <DialogContentSection>
-          <div className="mb-4 text-body-sm text-ds-text-neutral-muted-default">
-            {t(
-              'setting.add-a-local-mcp-server-by-providing-a-valid-json-configuration'
-            )}
-            <a
-              href="https://modelcontextprotocol.io/docs/getting-started/intro"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-ds-text-status-splitting-strong-default underline"
-            >
-              {t('setting.learn-more')}
-            </a>
-          </div>
-          {jsonError && (
-            <div className="mb-2 text-label-md text-ds-text-status-error-strong-default">
-              {jsonError}
-            </div>
-          )}
-          <div className="rounded-xl border-ds-border-neutral-strong-default overflow-hidden border">
-            <MonacoEditor
-              height="300px"
-              width="100%"
-              language="json"
-              theme="vs-dark"
-              value={localJson}
-              onChange={(v) => {
-                setLocalJson(v ?? '');
-              }}
-              options={{
-                minimap: { enabled: false },
-                fontSize: 14,
-                scrollBeyondLastLine: false,
-                readOnly: installing,
-                automaticLayout: true,
-              }}
-            />
-          </div>
-        </DialogContentSection>
-        <DialogFooter
-          showConfirmButton
-          confirmButtonText={
-            installing ? t('setting.installing') : t('setting.install')
-          }
-          onConfirm={onInstall}
-          confirmButtonVariant="primary"
-        />
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/pages/Connectors/components/MCPConfigDialog.tsx b/src/pages/Connectors/components/MCPConfigDialog.tsx
index e3407963b..7bbe9dba9 100644
--- a/src/pages/Connectors/components/MCPConfigDialog.tsx
+++ b/src/pages/Connectors/components/MCPConfigDialog.tsx
@@ -52,6 +52,7 @@ export default function MCPConfigDialog({
   const { t } = useTranslation();
   const formRef = useRef<HTMLFormElement | null>(null);
   if (!form || !mcp) return null;
+  const isRemote = Number(mcp.type) === 2;
   return (
     <Dialog
       open={open}
@@ -64,7 +65,7 @@ export default function MCPConfigDialog({
         <form
           ref={formRef}
           onSubmit={onSave}
-          className="gap-4 p-md flex flex-col"
+          className="flex flex-col gap-4 p-md"
         >
           <Input
             title={t('setting.name')}
@@ -81,59 +82,81 @@ export default function MCPConfigDialog({
             disabled={loading}
             placeholder={t('setting.description') as string}
           />
-          <Input
-            title={t('setting.command')}
-            value={form.command}
-            onChange={(e) => onChange({ ...form, command: e.target.value })}
-            disabled={loading}
-            placeholder={t('setting.command') as string}
-          />
-
-          <Textarea
-            variant="enhanced"
-            title={t('setting.args-one-per-line')}
-            value={Array.isArray(form.argsArr) ? form.argsArr.join('\n') : ''}
-            onChange={(e) =>
-              onChange({ ...form, argsArr: e.target.value.split(/\r?\n/) })
-            }
-            disabled={loading}
-            placeholder={t('setting.args-one-per-line') as string}
-            rows={Math.max(
-              3,
-              form.argsArr && form.argsArr.length > 0 ? form.argsArr.length : 3
-            )}
-          />
-
-          <div className="mb-1 text-label-sm font-normal block">
-            Env (key-value)
-          </div>
-          {Object.entries(form.env).map(([k, v], idx) => (
-            <div className="mb-2" key={k + idx}>
+          {isRemote ? (
+            <Input
+              title={t('connectors.remote-url')}
+              value={form.server_url}
+              onChange={(e) =>
+                onChange({ ...form, server_url: e.target.value })
+              }
+              disabled={loading}
+              placeholder="https://example.com/mcp"
+              required
+            />
+          ) : (
+            <>
               <Input
-                title={k}
-                type={showEnvValues[k] ? 'text' : 'password'}
-                value={String(v)}
-                onChange={(e) => {
-                  const newEnv = { ...form.env };
-                  newEnv[k] = e.target.value;
-                  onChange({ ...form, env: newEnv });
-                }}
+                title={t('setting.command')}
+                value={form.command}
+                onChange={(e) => onChange({ ...form, command: e.target.value })}
                 disabled={loading}
-                backIcon={
-                  showEnvValues[k] ? (
-                    <Eye className="h-5 w-5" />
-                  ) : (
-                    <EyeOff className="h-5 w-5" />
-                  )
+                placeholder={t('setting.command') as string}
+              />
+
+              <Textarea
+                variant="enhanced"
+                title={t('setting.args-one-per-line')}
+                value={
+                  Array.isArray(form.argsArr) ? form.argsArr.join('\n') : ''
                 }
-                onBackIconClick={() =>
-                  setShowEnvValues((prev) => ({ ...prev, [k]: !prev[k] }))
+                onChange={(e) =>
+                  onChange({ ...form, argsArr: e.target.value.split(/\r?\n/) })
                 }
-                size="default"
-                placeholder="Value"
+                disabled={loading}
+                placeholder={t('setting.args-one-per-line') as string}
+                rows={Math.max(
+                  3,
+                  form.argsArr && form.argsArr.length > 0
+                    ? form.argsArr.length
+                    : 3
+                )}
               />
-            </div>
-          ))}
+
+              <div className="mb-1 block text-label-sm font-normal">
+                {t('connectors.env-key-value')}
+              </div>
+              {Object.entries(form.env).map(([k, v], idx) => (
+                <div className="mb-2" key={k + idx}>
+                  <Input
+                    title={k}
+                    type={showEnvValues[k] ? 'text' : 'password'}
+                    value={String(v)}
+                    onChange={(e) => {
+                      const newEnv = { ...form.env };
+                      newEnv[k] = e.target.value;
+                      onChange({ ...form, env: newEnv });
+                    }}
+                    disabled={loading}
+                    backIcon={
+                      showEnvValues[k] ? (
+                        <Eye className="h-5 w-5" />
+                      ) : (
+                        <EyeOff className="h-5 w-5" />
+                      )
+                    }
+                    onBackIconClick={() =>
+                      setShowEnvValues((prev) => ({
+                        ...prev,
+                        [k]: !prev[k],
+                      }))
+                    }
+                    size="default"
+                    placeholder={t('connectors.value-placeholder')}
+                  />
+                </div>
+              ))}
+            </>
+          )}
           {errorMsg && (
             <div className="mb-2 text-label-md text-ds-text-status-error-strong-default">
               {errorMsg}
diff --git a/src/pages/Connectors/components/MCPList.tsx b/src/pages/Connectors/components/MCPList.tsx
deleted file mode 100644
index c40b02eee..000000000
--- a/src/pages/Connectors/components/MCPList.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-
-import MCPListItem from './MCPListItem';
-import type { MCPUserItem } from './types';
-
-interface MCPListProps {
-  items: MCPUserItem[];
-  onSetting: (item: MCPUserItem) => void;
-  onDelete: (item: MCPUserItem) => void;
-  onSwitch: (id: number, checked: boolean) => Promise<void>;
-  switchLoading: Record<number, boolean>;
-}
-
-export default function MCPList({
-  items,
-  onSetting,
-  onDelete,
-  onSwitch,
-  switchLoading,
-}: MCPListProps) {
-  return (
-    <div className="pt-4">
-      {items.map((item) => (
-        <MCPListItem
-          key={item.id}
-          item={item}
-          onSetting={onSetting}
-          onDelete={onDelete}
-          onSwitch={onSwitch}
-          loading={!!switchLoading[item.id]}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/src/pages/Connectors/components/MCPListItem.tsx b/src/pages/Connectors/components/MCPListItem.tsx
deleted file mode 100644
index a87bbd528..000000000
--- a/src/pages/Connectors/components/MCPListItem.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-
-import { Button } from '@/components/ui/button';
-import { TooltipSimple } from '@/components/ui/tooltip';
-import { capitalizeFirstLetter } from '@/lib';
-import { CircleAlert, Trash2 } from 'lucide-react';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { MCPUserItem } from './types';
-
-interface MCPListItemProps {
-  item: MCPUserItem;
-  onSetting: (item: MCPUserItem) => void;
-  onDelete: (item: MCPUserItem) => void;
-  onSwitch: (id: number, checked: boolean) => Promise<void>;
-  loading: boolean;
-}
-
-export default function MCPListItem({
-  item,
-  onSetting: _onSetting,
-  onDelete,
-  onSwitch: _onSwitch,
-  loading: _loading,
-}: MCPListItemProps) {
-  const [_showMenu, setShowMenu] = useState(false);
-  const { t } = useTranslation();
-  return (
-    <div className="mb-4 gap-4 rounded-2xl bg-ds-bg-neutral-strong-default p-4 flex items-center justify-between">
-      <div className="gap-4 flex items-center">
-        <div className="mx-xs h-3 w-3 bg-green-500 rounded-full"></div>
-        <div className="text-base font-bold leading-9 text-ds-text-neutral-default-default">
-          {capitalizeFirstLetter(item.mcp_name)}
-        </div>
-        <div className="flex items-center">
-          <TooltipSimple content={item.mcp_desc}>
-            <CircleAlert className="h-4 w-4 text-ds-icon-neutral-muted-default" />
-          </TooltipSimple>
-        </div>
-      </div>
-      <div className="gap-2 flex items-center">
-        {/* <Switch
-					checked={item.status === 1}
-					disabled={loading}
-					onCheckedChange={(checked) => onSwitch(item.id, checked)}
-				/> */}
-        <Button
-          variant="ghost"
-          size="sm"
-          textWeight="medium"
-          buttonRadius="lg"
-          tone="error"
-          className="w-full"
-          onClick={() => {
-            onDelete(item);
-            setShowMenu(false);
-          }}
-        >
-          <Trash2 className="h-4 w-4" /> {t('setting.delete')}
-        </Button>
-        {/* <div className="relative">
-					<Popover>
-						<PopoverTrigger asChild>
-							<Button
-								variant="ghost"
-								size="xs" buttonContent="icon-only"
-								onClick={() => setShowMenu((v) => !v)}
-								disabled={loading}
-							>
-								<Ellipsis className="w-4 h-4 text-ds-icon-neutral-default-default" />
-							</Button>
-						</PopoverTrigger>
-						<PopoverContent className="w-[98px] p-sm rounded-[12px] bg-dropdown-bg border border-solid border-ds-border-neutral-default-default">
-							<div className="space-y-1">
-								<PopoverClose asChild>
-									<Button
-										variant="ghost"
-										size="sm"
-										className="w-full"
-										onClick={() => {
-                      onSetting(item);
-                      setShowMenu(false);
-                    }}
-									>
-										<Settings className="w-4 h-4" /> {t("setting.setting")}
-									</Button>
-								</PopoverClose>
-								<PopoverClose asChild>
-									<Button
-										variant="ghost"
-										size="sm"
-										className="w-full !text-ds-text-status-error-strong-default"
-										onClick={() => {
-											onDelete(item);
-											setShowMenu(false);
-										}}
-									>
-										<Trash2 className="w-4 h-4" /> {t("setting.delete")}
-									</Button>
-								</PopoverClose>
-							</div>
-						</PopoverContent>
-					</Popover>
-				</div> */}
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/Connectors/components/MCPMarket.tsx b/src/pages/Connectors/components/MCPMarket.tsx
deleted file mode 100644
index 28bab11db..000000000
--- a/src/pages/Connectors/components/MCPMarket.tsx
+++ /dev/null
@@ -1,443 +0,0 @@
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
-
-import { mcpInstall, mcpRemove } from '@/api/brain';
-import { proxyFetchDelete, proxyFetchGet, proxyFetchPost } from '@/api/http';
-import githubIcon from '@/assets/icon/github.svg';
-import AnthropicIcon from '@/assets/mcp/Anthropic.svg?url';
-import CamelIcon from '@/assets/mcp/Camel.svg?url';
-import CommunityIcon from '@/assets/mcp/Community.svg?url';
-import OfficialIcon from '@/assets/mcp/Official.svg?url';
-import SearchInput from '@/components/Dashboard/SearchInput';
-import { Button } from '@/components/ui/button';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { TooltipSimple } from '@/components/ui/tooltip';
-import { classifyError } from '@/lib/events/appEventClassifiers';
-import {
-  recordMcpInstalled,
-  recordMcpInstallFailed,
-} from '@/lib/events/appEvents';
-import { useAuthStore } from '@/store/authStore';
-import { ChevronLeft, CircleAlert, Store } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { MCPEnvDialog } from './MCPEnvDialog';
-interface MCPItem {
-  id: number;
-  name: string;
-  key: string;
-  description: string;
-  status: number | string;
-  category?: { name: string };
-  home_page?: string;
-  install_command?: {
-    command: string;
-    args: string[];
-    env?: Record<string, string>;
-  };
-  homepage?: string;
-}
-
-function useDebounce<T>(value: T, delay: number): T {
-  const [debounced, setDebounced] = useState(value);
-  useEffect(() => {
-    const handler = setTimeout(() => setDebounced(value), delay);
-    return () => clearTimeout(handler);
-  }, [value, delay]);
-  return debounced;
-}
-// map category name to svg file name
-const categoryIconMap: Record<string, string> = {
-  anthropic: 'Anthropic',
-  community: 'Community',
-  official: 'Official',
-  camel: 'Camel',
-};
-
-// load all svg files
-const svgIcons: Record<string, string> = {
-  Anthropic: AnthropicIcon,
-  Community: CommunityIcon,
-  Official: OfficialIcon,
-  Camel: CamelIcon,
-};
-
-type MCPMarketProps = {
-  onBack?: () => void;
-  keyword?: string;
-};
-
-export default function MCPMarket({
-  onBack,
-  keyword: externalKeyword,
-}: MCPMarketProps) {
-  const { t } = useTranslation();
-  const { checkAgentTool } = useAuthStore();
-  const [items, setItems] = useState<MCPItem[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
-  const [keyword, setKeyword] = useState('');
-  const effectiveKeyword =
-    externalKeyword !== undefined ? externalKeyword : keyword;
-  const debouncedKeyword = useDebounce(effectiveKeyword, 400);
-  const loader = useRef<HTMLDivElement | null>(null);
-  const [installing, setInstalling] = useState<{ [id: number]: boolean }>({});
-  const [installed, setInstalled] = useState<{ [id: number]: boolean }>({});
-  const [installedIds, setInstalledIds] = useState<number[]>([]);
-  const [mcpCategory, setMcpCategory] = useState<
-    { id: number; name: string }[]
-  >([]);
-
-  // environment variable configuration
-  const [showEnvConfig, setShowEnvConfig] = useState(false);
-  const [activeMcp, setActiveMcp] = useState<MCPItem | null>(null);
-
-  const [categoryId, setCategoryId] = useState<number | undefined>(undefined);
-  const effectiveCategoryId = categoryId;
-  const [userInstallMcp, setUserInstallMcp] = useState<any | undefined>([]);
-  // get installed MCP list
-  useEffect(() => {
-    proxyFetchGet('/api/v1/mcp/users').then((res) => {
-      let ids: number[] = [];
-      if (Array.isArray(res)) {
-        setUserInstallMcp(res);
-        ids = res.map((item: any) => item.mcp_id);
-      } else if (Array.isArray(res.items)) {
-        setUserInstallMcp(res.items);
-        ids = res.items.map((item: any) => item.mcp_id);
-      }
-      setInstalledIds(ids);
-    });
-  }, []);
-
-  // get MCP categories
-  useEffect(() => {
-    proxyFetchGet('/api/v1/mcp/categories').then((res) => {
-      if (Array.isArray(res)) {
-        setMcpCategory(res);
-      }
-    });
-  }, []);
-
-  // load data
-  const loadData = useCallback(
-    async (pageNum: number, kw: string, catId?: number, pageSize = 20) => {
-      setIsLoading(true);
-      setError('');
-      try {
-        const params: any = { page: pageNum, size: pageSize, keyword: kw };
-        if (catId) params.category_id = catId;
-        const res = await proxyFetchGet('/api/v1/mcps', params);
-        if (res && Array.isArray(res.items)) {
-          // frontend deduplication
-          const all: MCPItem[] =
-            pageNum === 1 ? res.items : [...items, ...res.items];
-          const unique: MCPItem[] = Array.from(
-            new Map(all.map((i: MCPItem) => [i.id, i])).values()
-          );
-          setItems(unique);
-          setHasMore(res.items.length === pageSize);
-        } else {
-          if (pageNum === 1) setItems([]);
-          setHasMore(false);
-        }
-      } catch (err: any) {
-        setError(err?.message || 'Load failed');
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [items]
-  );
-
-  useEffect(() => {
-    setPage(1);
-    loadData(1, debouncedKeyword, effectiveCategoryId);
-    // eslint-disable-next-line
-  }, [debouncedKeyword, effectiveCategoryId]);
-
-  useEffect(() => {
-    if (page > 1) loadData(page, debouncedKeyword, effectiveCategoryId);
-    // eslint-disable-next-line
-  }, [page]);
-
-  useEffect(() => {
-    if (!hasMore || isLoading) return;
-    const node = loader.current;
-    if (!node) return;
-    const observer = new window.IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
-          setPage((p) => (isLoading || !hasMore ? p : p + 1));
-        }
-      },
-      { root: null, rootMargin: '0px', threshold: 0.1 }
-    );
-    observer.observe(node);
-    return () => {
-      observer.disconnect();
-    };
-  }, [hasMore, isLoading]);
-
-  const checkEnv = (id: number) => {
-    const mcp = items.find((mcp) => mcp.id === id);
-    if (mcp && Object.keys(mcp?.install_command?.env || {}).length > 0) {
-      setActiveMcp(mcp);
-      setShowEnvConfig(true);
-    } else {
-      installMcp(id);
-    }
-  };
-  const onConnect = (mcp: MCPItem) => {
-    console.log(mcp);
-    setItems((prev) =>
-      prev.map((item) => (item.id === mcp.id ? { ...item, ...mcp } : item))
-    );
-    installMcp(mcp.id);
-    onClose();
-  };
-  const onClose = () => {
-    setShowEnvConfig(false);
-    setActiveMcp(null);
-  };
-  const installMcp = async (id: number) => {
-    setInstalling((prev) => ({ ...prev, [id]: true }));
-    const mcpItem = items.find((item) => item.id === id);
-    try {
-      const res = await proxyFetchPost('/api/v1/mcp/install?mcp_id=' + id);
-      if (res) {
-        console.log(res);
-        setUserInstallMcp((prev: any) => [...prev, res]);
-      }
-      setInstalled((prev) => ({ ...prev, [id]: true }));
-      setInstalledIds((prev) => [...prev, id]);
-      if (mcpItem?.install_command) {
-        await mcpInstall(mcpItem.key, mcpItem.install_command);
-      }
-      recordMcpInstalled({
-        mcp_id: id,
-        mcp_key: mcpItem?.key,
-      });
-    } catch (e) {
-      console.error('Error installing MCP:', e);
-      recordMcpInstallFailed({
-        mcp_id: id,
-        mcp_key: mcpItem?.key,
-        // Bucketed on-device: raw messages can embed local paths / command
-        // output (user content) and are unbounded-cardinality.
-        error_type: classifyError(e instanceof Error ? e.message : String(e)),
-        error_name: e instanceof Error ? e.name : 'unknown',
-      });
-    } finally {
-      setInstalling((prev) => ({ ...prev, [id]: false }));
-    }
-  };
-
-  const handleBack = () => {
-    if (onBack) onBack();
-    else window.history.back();
-  };
-
-  const handleDelete = async (deleteTarget: MCPItem) => {
-    if (!deleteTarget) return;
-    try {
-      checkAgentTool(deleteTarget.name);
-      console.log(userInstallMcp, deleteTarget);
-      const userMcpRecord = userInstallMcp.find(
-        (item: any) => item.mcp_id === deleteTarget.id
-      );
-      const id = userMcpRecord?.id;
-      if (id === undefined || id === null) {
-        console.warn(
-          'No matching user MCP record found for delete target:',
-          deleteTarget
-        );
-        return;
-      }
-      console.log('deleteTarget', deleteTarget);
-      await proxyFetchDelete(`/api/v1/mcp/users/${id}`);
-      await mcpRemove(deleteTarget.key);
-      setInstalledIds((prev) =>
-        prev.filter((item) => item !== deleteTarget.id)
-      );
-      setInstalled((prev) => ({ ...prev, [deleteTarget.id]: false }));
-      loadData(1, debouncedKeyword, categoryId, page * 20);
-    } catch (e) {
-      console.log(e);
-    }
-  };
-  return (
-    <div className="flex h-full flex-col items-center">
-      {externalKeyword === undefined && (
-        <>
-          <div className="text-body sticky top-0 z-[20] mb-0 flex w-full max-w-4xl items-center justify-between py-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleBack}
-              className="mr-2"
-            >
-              <ChevronLeft className="h-6 w-6" />
-            </Button>
-            <span className="text-base font-bold leading-12 text-ds-text-neutral-default-default">
-              {t('setting.mcp-market')}
-            </span>
-          </div>
-          <div className="w-40 max-w-4xl">
-            <SearchInput
-              value={keyword}
-              onChange={(e) => setKeyword(e.target.value)}
-            />
-          </div>
-        </>
-      )}
-
-      {/* Category toggle row */}
-      <div className="flex w-full py-2">
-        <ToggleGroup
-          type="single"
-          value={categoryId ? String(categoryId) : 'all'}
-          onValueChange={(val) =>
-            setCategoryId(!val || val === 'all' ? undefined : Number(val))
-          }
-          className="flex flex-wrap"
-        >
-          <ToggleGroupItem value="all">{t('setting.all')}</ToggleGroupItem>
-          {mcpCategory.map((cat) => (
-            <ToggleGroupItem key={cat.id} value={String(cat.id)}>
-              {cat.name}
-            </ToggleGroupItem>
-          ))}
-        </ToggleGroup>
-      </div>
-
-      {/* list */}
-      <MCPEnvDialog
-        showEnvConfig={showEnvConfig}
-        onClose={onClose}
-        onConnect={onConnect}
-        activeMcp={activeMcp}
-      ></MCPEnvDialog>
-      <div className="flex w-full flex-col gap-4 pt-4">
-        {isLoading && items.length === 0 && (
-          <div className="py-8 text-center text-ds-text-neutral-muted-default">
-            {t('setting.loading')}
-          </div>
-        )}
-        {error && (
-          <div className="py-8 text-center text-ds-text-status-error-strong-default">
-            {error}
-          </div>
-        )}
-        {!isLoading && !error && items.length === 0 && (
-          <div className="py-8 text-center text-ds-text-neutral-muted-default">
-            {t('setting.no-mcp-services')}
-          </div>
-        )}
-        {items.map((item) => (
-          <div
-            key={item.id}
-            className="flex items-center rounded-2xl bg-ds-bg-neutral-default-default p-4"
-          >
-            {/* Left: Icon */}
-            <div className="mr-4 flex items-center">
-              {(() => {
-                const catName = item.category?.name;
-                const normalizedName = catName?.toLowerCase() || '';
-                const iconKey = normalizedName
-                  ? categoryIconMap[normalizedName]
-                  : undefined;
-                const iconUrl = iconKey ? svgIcons[iconKey] : undefined;
-                return iconUrl ? (
-                  <img src={iconUrl} alt={catName} className="h-11 w-9" />
-                ) : (
-                  <Store className="h-11 w-9 text-ds-icon-neutral-default-default" />
-                );
-              })()}
-            </div>
-            <div className="flex min-w-0 flex-1 flex-col justify-center">
-              <div className="flex w-full items-center gap-xs pb-1">
-                <div className="flex flex-1 items-center gap-xs">
-                  <span className="truncate text-base font-bold leading-9 text-ds-text-neutral-default-default">
-                    {item.name}
-                  </span>
-                  <TooltipSimple content={item.description}>
-                    <CircleAlert className="h-4 w-4 text-ds-icon-neutral-muted-default" />
-                  </TooltipSimple>
-                </div>
-                <Button
-                  variant={
-                    !installedIds.includes(item.id) ? 'primary' : 'secondary'
-                  }
-                  size="sm"
-                  onClick={() =>
-                    installedIds.includes(item.id)
-                      ? handleDelete(item)
-                      : checkEnv(item.id)
-                  }
-                >
-                  {installedIds.includes(item.id)
-                    ? t('setting.uninstall')
-                    : installing[item.id]
-                      ? t('setting.installing')
-                      : installed[item.id]
-                        ? t('setting.uninstall')
-                        : t('setting.install')}
-                </Button>
-              </div>
-              {item.home_page &&
-                item.home_page.startsWith('https://github.com/') && (
-                  <div className="flex items-center">
-                    <img
-                      src={githubIcon}
-                      alt="github"
-                      style={{
-                        width: 14.7,
-                        height: 14.7,
-                        marginRight: 4,
-                        display: 'inline-block',
-                        verticalAlign: 'middle',
-                      }}
-                    />
-                    <span className="items-center justify-center self-stretch text-xs font-medium leading-3">
-                      {(() => {
-                        const parts = item.home_page.split('/');
-                        return parts.length > 4 ? parts[4] : item.home_page;
-                      })()}
-                    </span>
-                  </div>
-                )}
-              <div className="mt-1 whitespace-pre-line break-words text-sm text-ds-text-neutral-muted-default">
-                {item.description}
-              </div>
-            </div>
-          </div>
-        ))}
-        <div ref={loader} />
-        {isLoading && items.length > 0 && (
-          <div className="py-4 text-center text-ds-text-neutral-muted-default">
-            {t('setting.loading-more')}
-          </div>
-        )}
-        {!hasMore && items.length > 0 && (
-          <div className="py-4 text-center text-ds-text-neutral-muted-default">
-            {t('setting.no-more-mcp-servers')}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/Connectors/components/types.ts b/src/pages/Connectors/components/types.ts
index 4ffcd9a00..301ae7c12 100644
--- a/src/pages/Connectors/components/types.ts
+++ b/src/pages/Connectors/components/types.ts
@@ -32,4 +32,10 @@ export interface MCPConfigForm {
   command: string;
   argsArr: string[];
   env: Record<string, string>;
+  server_url: string;
 }
+
+export type ConnectorInstallHint =
+  | { source: 'open'; key: string }
+  | { source: 'builtin'; key: string }
+  | { source: 'custom'; key: string };
diff --git a/src/pages/Connectors/index.tsx b/src/pages/Connectors/index.tsx
index b9bb8af6a..9abaa9b3b 100644
--- a/src/pages/Connectors/index.tsx
+++ b/src/pages/Connectors/index.tsx
@@ -12,12 +12,8 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import MCP from './MCP';
+import ConnectorGateway from './ConnectorGateway';
 
 export default function Connectors() {
-  return (
-    <div className="flex h-auto w-full flex-1 flex-col">
-      <MCP />
-    </div>
-  );
+  return <ConnectorGateway />;
 }
diff --git a/src/store/chatStore.ts b/src/store/chatStore.ts
index 757078020..f5b7a059c 100644
--- a/src/store/chatStore.ts
+++ b/src/store/chatStore.ts
@@ -69,9 +69,11 @@ import { getAuthStore, getWorkerList } from './authStore';
 import { getCloudModelStore } from './cloudModelStore';
 import { usePageTabStore } from './pageTabStore';
 import { useProjectStore } from './projectStore';
+import { getServerCapabilityStore } from './serverCapabilityStore';
 import { legacySpaceIdForUser, useSpaceStore } from './spaceStore';
 
 const API_CODE_TRIAL_LIMIT = '22';
+const CONNECTOR_GATEWAY_MCP_NAME = 'connector_gateway';
 const PROJECT_CONTEXT_MAX_CHARS = 24_000;
 const PROJECT_CONTEXT_MAX_RUNS = 8;
 // chat_history.summary is a bounded database column; an over-long value
@@ -208,6 +210,73 @@ function getDirectServerApiBaseUrl(): string | undefined {
   return normalizeServerApiBaseUrl(import.meta.env.VITE_BASE_URL);
 }
 
+function hasMcpServers(config: any): boolean {
+  return Boolean(
+    config &&
+    typeof config === 'object' &&
+    config.mcpServers &&
+    typeof config.mcpServers === 'object' &&
+    Object.keys(config.mcpServers).length > 0
+  );
+}
+
+function mergeMcpConfigs(...configs: any[]): {
+  mcpServers: Record<string, any>;
+} {
+  const mcpServers: Record<string, any> = {};
+  configs.forEach((config) => {
+    if (!hasMcpServers(config)) {
+      return;
+    }
+    Object.assign(mcpServers, config.mcpServers);
+  });
+  return { mcpServers };
+}
+
+async function buildConnectorGatewayMcpConfig(
+  token?: string | null
+): Promise<{ mcpServers: Record<string, any> } | null> {
+  if (!token) {
+    return null;
+  }
+
+  try {
+    if (import.meta.env.VITE_USE_LOCAL_PROXY === 'true') {
+      return null;
+    }
+
+    const capabilities =
+      await getServerCapabilityStore().fetchCapabilities(false);
+    if (capabilities.features.connector_gateway.enabled !== true) {
+      return null;
+    }
+  } catch (error) {
+    console.warn(
+      'Failed to resolve Connector Gateway capability for MCP:',
+      error
+    );
+    return null;
+  }
+
+  const serverApiBaseUrl = getDirectServerApiBaseUrl();
+  if (!serverApiBaseUrl) {
+    return null;
+  }
+
+  return {
+    mcpServers: {
+      [CONNECTOR_GATEWAY_MCP_NAME]: {
+        type: 'streamable_http',
+        url: `${serverApiBaseUrl}/connectors/mcp`,
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        timeout: 180,
+      },
+    },
+  };
+}
+
 function getHostElectronAPI() {
   return _host?.electronAPI ?? null;
 }
@@ -1873,6 +1942,10 @@ const chatStore = (initial?: Partial<ChatStore>) =>
         }
       }
 
+      const connectorGatewayMcpConfig = !type
+        ? await buildConnectorGatewayMcpConfig(token)
+        : null;
+
       const addWorkers = workerList.map((worker) => {
         const providerId = worker.workerInfo?.model_provider_id;
         const provider = Number.isInteger(providerId)
@@ -1882,7 +1955,10 @@ const chatStore = (initial?: Partial<ChatStore>) =>
           name: worker.workerInfo?.name,
           description: worker.workerInfo?.description,
           tools: worker.workerInfo?.tools,
-          mcp_tools: worker.workerInfo?.mcp_tools,
+          mcp_tools: mergeMcpConfigs(
+            worker.workerInfo?.mcp_tools,
+            connectorGatewayMcpConfig
+          ),
           custom_model_config: provider
             ? buildAgentModelConfigFromProvider(provider)
             : undefined,
@@ -2042,7 +2118,7 @@ const chatStore = (initial?: Partial<ChatStore>) =>
             model_config_dict: apiModel.model_config_dict,
             extra_params: apiModel.extra_params,
             auth_source: apiModel.auth_source,
-            installed_mcp: { mcpServers: {} },
+            installed_mcp: connectorGatewayMcpConfig || { mcpServers: {} },
             language: systemLanguage,
             allow_local_system: true,
             attaches: (
diff --git a/src/store/serverCapabilityStore.ts b/src/store/serverCapabilityStore.ts
new file mode 100644
index 000000000..cf1226cc7
--- /dev/null
+++ b/src/store/serverCapabilityStore.ts
@@ -0,0 +1,143 @@
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
+
+import { proxyFetchGet } from '@/api/http';
+import { create } from 'zustand';
+
+const CAPABILITY_CACHE_TTL_MS = 60 * 1000;
+let capabilityRefreshPromise: Promise<ServerCapabilities> | null = null;
+
+export interface FeatureCapability {
+  enabled: boolean;
+  provider?: string | null;
+  reason?: string | null;
+}
+
+export interface ServerCapabilities {
+  features: {
+    connector_gateway: FeatureCapability;
+  };
+}
+
+type CapabilityStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+interface ServerCapabilityState {
+  capabilities: ServerCapabilities;
+  status: CapabilityStatus;
+  lastFetchedAt: number;
+  error: string | null;
+  fetchCapabilities: (force?: boolean) => Promise<ServerCapabilities>;
+  isConnectorGatewayEnabled: () => boolean;
+}
+
+const disabledCapabilities = (reason: string): ServerCapabilities => ({
+  features: {
+    connector_gateway: {
+      enabled: false,
+      provider: null,
+      reason,
+    },
+  },
+});
+
+function normalizeCapabilities(raw: unknown): ServerCapabilities {
+  const input = raw as Partial<ServerCapabilities> | undefined;
+  const connectorGateway = input?.features?.connector_gateway;
+  return {
+    features: {
+      connector_gateway: {
+        enabled: connectorGateway?.enabled === true,
+        provider:
+          typeof connectorGateway?.provider === 'string'
+            ? connectorGateway.provider
+            : null,
+        reason:
+          typeof connectorGateway?.reason === 'string'
+            ? connectorGateway.reason
+            : null,
+      },
+    },
+  };
+}
+
+export const useServerCapabilityStore = create<ServerCapabilityState>()(
+  (set, get) => ({
+    capabilities: disabledCapabilities('not_loaded'),
+    status: 'idle',
+    lastFetchedAt: 0,
+    error: null,
+
+    fetchCapabilities: async (force = false) => {
+      if (import.meta.env.VITE_USE_LOCAL_PROXY === 'true') {
+        const localCapabilities = disabledCapabilities('local_proxy');
+        set({
+          capabilities: localCapabilities,
+          status: 'ready',
+          lastFetchedAt: Date.now(),
+          error: null,
+        });
+        return localCapabilities;
+      }
+
+      const state = get();
+      const now = Date.now();
+      if (
+        !force &&
+        state.status === 'ready' &&
+        now - state.lastFetchedAt < CAPABILITY_CACHE_TTL_MS
+      ) {
+        return state.capabilities;
+      }
+      if (capabilityRefreshPromise) {
+        return capabilityRefreshPromise;
+      }
+
+      capabilityRefreshPromise = (async () => {
+        set({ status: 'loading', error: null });
+        try {
+          const capabilities = normalizeCapabilities(
+            await proxyFetchGet('/api/v1/server/capabilities')
+          );
+          set({
+            capabilities,
+            status: 'ready',
+            lastFetchedAt: Date.now(),
+            error: null,
+          });
+          return capabilities;
+        } catch (error: any) {
+          const fallback = disabledCapabilities('capability_request_failed');
+          set({
+            capabilities: fallback,
+            status: 'error',
+            lastFetchedAt: Date.now(),
+            error: error?.message || 'Failed to load server capabilities',
+          });
+          return fallback;
+        } finally {
+          capabilityRefreshPromise = null;
+        }
+      })();
+
+      return capabilityRefreshPromise;
+    },
+
+    isConnectorGatewayEnabled: () =>
+      import.meta.env.VITE_USE_LOCAL_PROXY !== 'true' &&
+      get().capabilities.features.connector_gateway.enabled === true,
+  })
+);
+
+export const getServerCapabilityStore = () =>
+  useServerCapabilityStore.getState();