diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e212312..11961e4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { Layout, Button, ConfigProvider, theme, message, Spin, Slider, Progress, Switch, Input, InputNumber, Select, Segmented, Tooltip } from 'antd';
 import { PlusOutlined, ConsoleSqlOutlined, UploadOutlined, DownloadOutlined, CloudDownloadOutlined, BugOutlined, ToolOutlined, GlobalOutlined, InfoCircleOutlined, GithubOutlined, SkinOutlined, CheckOutlined, MinusOutlined, BorderOutlined, CloseOutlined, SettingOutlined, LinkOutlined, BgColorsOutlined, AppstoreOutlined, RobotOutlined, FolderOpenOutlined, HddOutlined, SafetyCertificateOutlined, SwitcherOutlined, CodeOutlined, RightOutlined } from '@ant-design/icons';
-import { BrowserOpenURL, Environment, EventsOn, Quit, WindowFullscreen, WindowGetPosition, WindowGetSize, WindowIsFullscreen, WindowIsMaximised, WindowIsMinimised, WindowIsNormal, WindowMaximise, WindowMinimise, WindowSetPosition, WindowSetSize, WindowUnfullscreen, WindowUnmaximise } from '../wailsjs/runtime';
+import { BrowserOpenURL, Environment, Quit, WindowFullscreen, WindowGetPosition, WindowGetSize, WindowIsFullscreen, WindowIsMaximised, WindowIsMinimised, WindowIsNormal, WindowMaximise, WindowMinimise, WindowSetPosition, WindowSetSize, WindowUnfullscreen, WindowUnmaximise } from '../wailsjs/runtime';
 import Sidebar from './components/Sidebar';
 import SlowQueryRailButton from './components/sidebar/SlowQueryRailButton';
 import TabManager from './components/TabManager';
@@ -24,7 +24,7 @@ import SecurityUpdateSettingsModal from './components/SecurityUpdateSettingsModa
 import LanguageSettingsPanel from './components/LanguageSettingsPanel';
 import { DEFAULT_APPEARANCE, useStore } from './store';
 import { SavedConnection, SecurityUpdateIssue, SecurityUpdateStatus } from './types';
-import { blurToFilter, isMacLikePlatform, normalizeBlurForPlatform, normalizeOpacityForPlatform, isWindowsPlatform, resolveAppearanceValues } from './utils/appearance';
+import { blurToFilter, normalizeBlurForPlatform, normalizeOpacityForPlatform, isWindowsPlatform, resolveAppearanceValues } from './utils/appearance';
 import { buildFontFamilyOptions, DEFAULT_MONO_FONT_FAMILY, DEFAULT_UI_FONT_FAMILY, getLinuxCJKFontInstallHint, matchFontFamilyOption, resolveMonoFontFamily, resolveUIFontFamily, sanitizeFontFamilyInput, type FontFamilyOption, type InstalledFontFamily } from './utils/fontFamilies';
 import {
   DENSITY_OPTIONS,
@@ -45,8 +45,6 @@ import {
 } from './utils/tabDisplay';
 import { getMacNativeTitlebarPaddingLeft, getMacNativeTitlebarPaddingRight, shouldHandleMacNativeFullscreenShortcut, shouldSuppressMacNativeEscapeExit } from './utils/macWindow';
 import { shouldEnableMacWindowDiagnostics } from './utils/macWindowDiagnostics';
-import { resolveAboutDisplayVersion } from './utils/appVersionDisplay';
-import { buildOverlayWorkbenchTheme } from './utils/overlayWorkbenchTheme';
 import { getConnectionWorkbenchState } from './utils/startupReadiness';
 import { toSaveGlobalProxyInput } from './utils/globalProxyDraft';
 import {
@@ -110,15 +108,18 @@ import {
 } from './utils/aiEntryLayout';
 import { DEFAULT_AI_PANEL_WIDTH, resolveOverlayAIPanelWidth, shouldOverlayAIPanel } from './utils/aiPanelLayout';
 import { safeWindowRuntimeCall } from './utils/wailsRuntime';
+import { useAppUpdateManager } from './hooks/useAppUpdateManager';
+import { useAppLogPanelResize } from './hooks/useAppLogPanelResize';
+import { useAppSidebarResize } from './hooks/useAppSidebarResize';
+import { useAppUtilityStyles } from './hooks/useAppUtilityStyles';
 import { ApplyDataRootDirectory, GetDataRootDirectoryInfo, GetSavedConnections, ListInstalledFontFamilies, OpenDataRootDirectory, SelectDataRootDirectory, SetMacNativeWindowControls, SetWindowTranslucency } from '../wailsjs/go/app/App';
 import { getAntdLocale } from './i18n/frameworkLocale';
 import { useI18n } from './i18n/provider';
 import './App.css';
 import './v2-theme.css';
+import './styles/v2-theme-workbench.css';
 
 const { Sider, Content } = Layout;
-const SIDEBAR_RESIZE_MIN_WIDTH = 200;
-const SIDEBAR_RESIZE_MAX_WIDTH = 600;
 const MIN_UI_SCALE = 0.8;
 const MAX_UI_SCALE = 1.25;
 const MIN_FONT_SIZE = 12;
@@ -126,33 +127,6 @@ const MAX_FONT_SIZE = 20;
 const DEFAULT_UI_SCALE = 1.0;
 const DEFAULT_FONT_SIZE = 14;
 const EMPTY_INSTALLED_FONT_FAMILIES: InstalledFontFamily[] = [];
-type SidebarResizeBounds = { minWidth: number; maxWidth: number };
-type SidebarResizeDragState = SidebarResizeBounds & {
-  startX: number;
-  startWidth: number;
-  startGuideLeft: number;
-};
-
-const parseCssPixelValue = (value: string | null | undefined): number | null => {
-  const parsed = Number.parseFloat(String(value || ''));
-  return Number.isFinite(parsed) ? parsed : null;
-};
-
-const resolveSidebarResizeBounds = (siderElement: Element | null): SidebarResizeBounds => {
-  if (typeof window === 'undefined' || !(siderElement instanceof HTMLElement)) {
-    return { minWidth: SIDEBAR_RESIZE_MIN_WIDTH, maxWidth: SIDEBAR_RESIZE_MAX_WIDTH };
-  }
-  const computed = window.getComputedStyle(siderElement);
-  const cssMinWidth = parseCssPixelValue(computed.minWidth);
-  const cssMaxWidth = parseCssPixelValue(computed.maxWidth);
-  const minWidth = Math.max(SIDEBAR_RESIZE_MIN_WIDTH, cssMinWidth && cssMinWidth > 0 ? cssMinWidth : SIDEBAR_RESIZE_MIN_WIDTH);
-  const maxWidth = Math.max(minWidth, Math.min(SIDEBAR_RESIZE_MAX_WIDTH, cssMaxWidth && cssMaxWidth > 0 ? cssMaxWidth : SIDEBAR_RESIZE_MAX_WIDTH));
-  return { minWidth, maxWidth };
-};
-
-const clampSidebarResizeWidth = (width: number, bounds: SidebarResizeBounds): number => (
-  Math.max(bounds.minWidth, Math.min(bounds.maxWidth, width))
-);
 
 const createEmptySecurityUpdateStatus = (): SecurityUpdateStatus => ({
   overallStatus: 'not_detected',
@@ -1182,252 +1156,25 @@ function App() {
       };
   }, []);
 
-  // Background Helper
-  const getBg = (darkHex: string) => {
-      if (!darkMode) return `rgba(255, 255, 255, ${effectiveOpacity})`; // Light mode usually white
-      
-      // Parse hex to rgb
-      const hex = darkHex.replace('#', '');
-      const r = parseInt(hex.substring(0, 2), 16);
-      const g = parseInt(hex.substring(2, 4), 16);
-      const b = parseInt(hex.substring(4, 6), 16);
-      return `rgba(${r}, ${g}, ${b}, ${effectiveOpacity})`;
-  };
-  // Specific colors
-  const bgMain = getBg('#141414');
-  const bgContent = getBg('#1d1d1d');
-  const floatingLogButtonBorderColor = darkMode ? 'rgba(255,255,255,0.20)' : 'rgba(0,0,0,0.16)';
-  const floatingLogButtonTextColor = darkMode ? 'rgba(255,255,255,0.92)' : 'rgba(0,0,0,0.82)';
-  const floatingLogButtonBgColor = darkMode
-      ? `rgba(34, 34, 34, ${Math.max(effectiveOpacity, 0.82)})`
-      : `rgba(255, 255, 255, ${Math.max(effectiveOpacity, 0.9)})`;
-  const floatingLogButtonShadow = darkMode
-      ? '0 8px 22px rgba(0,0,0,0.38)'
-      : '0 8px 20px rgba(0,0,0,0.16)';
-  const isOpaqueUtilityMode = resolvedAppearance.opacity >= 0.999 && resolvedAppearance.blur <= 0;
-  const utilityButtonBgAlpha = darkMode
-      ? Math.max(0.28, Math.min(0.76, effectiveOpacity * 0.72))
-      : Math.max(0.52, Math.min(0.92, effectiveOpacity * 0.9));
-  const utilityButtonBgColor = isOpaqueUtilityMode
-      ? 'transparent'
-      : (darkMode
-          ? `rgba(20, 26, 38, ${utilityButtonBgAlpha})`
-          : `rgba(255, 255, 255, ${utilityButtonBgAlpha})`);
-  const utilityButtonBorderColor = isOpaqueUtilityMode
-      ? (darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(16,24,40,0.10)')
-      : (darkMode
-          ? `rgba(255,255,255,${Math.max(0.08, Math.min(0.18, effectiveOpacity * 0.16))})`
-          : `rgba(16,24,40,${Math.max(0.06, Math.min(0.14, effectiveOpacity * 0.12))})`);
-  const utilityButtonShadow = isOpaqueUtilityMode
-      ? 'none'
-      : (darkMode
-          ? `0 8px 18px rgba(0,0,0,${Math.max(0.10, Math.min(0.22, effectiveOpacity * 0.24))})`
-          : `0 8px 18px rgba(15,23,42,${Math.max(0.04, Math.min(0.12, effectiveOpacity * 0.12))})`);
-  const isSidebarNarrow = sidebarWidth < 360;
-  const isSidebarCompact = sidebarWidth < 320;
-  const isSidebarUltraCompact = sidebarWidth < 260;
-  const utilityButtonStyle = useMemo(() => ({
-      height: Math.max(30, Math.round(32 * effectiveUiScale)),
-      width: '100%',
-      paddingInline: isSidebarCompact ? Math.max(8, Math.round(9 * effectiveUiScale)) : Math.max(10, Math.round(12 * effectiveUiScale)),
-      borderRadius: 10,
-      border: `1px solid ${utilityButtonBorderColor}`,
-      background: utilityButtonBgColor,
-      color: darkMode ? 'rgba(255,255,255,0.94)' : '#162033',
-      boxShadow: utilityButtonShadow,
-      backdropFilter: isOpaqueUtilityMode ? 'none' : blurFilter,
-      WebkitBackdropFilter: isOpaqueUtilityMode ? 'none' : blurFilter,
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: isSidebarCompact ? 4 : 6,
-      minWidth: 0,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      fontSize: isSidebarCompact ? 13 : 14,
-  }), [blurFilter, darkMode, effectiveUiScale, isOpaqueUtilityMode, isSidebarCompact, utilityButtonBgColor, utilityButtonBorderColor, utilityButtonShadow]);
-  const disableLocalBackdropFilter = isMacLikePlatform();
-  const overlayTheme = useMemo(
-      () => buildOverlayWorkbenchTheme(darkMode, { disableBackdropFilter: disableLocalBackdropFilter }),
-      [darkMode, disableLocalBackdropFilter],
-  );
-
-  const sidebarQuickActionBaseStyle = useMemo(() => ({
-      height: Math.max(34, Math.round(36 * effectiveUiScale)),
-      borderRadius: 12,
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 8,
-      paddingInline: Math.max(12, Math.round(14 * effectiveUiScale)),
-      fontWeight: 700,
-      boxShadow: darkMode ? '0 8px 18px rgba(0,0,0,0.16)' : '0 8px 16px rgba(15,23,42,0.08)',
-      backdropFilter: blurFilter,
-      WebkitBackdropFilter: blurFilter,
-      minWidth: 0,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-    }), [blurFilter, darkMode, effectiveUiScale]);
-  const sidebarQueryActionStyle = useMemo(() => ({
-      ...sidebarQuickActionBaseStyle,
-      flex: '1 1 0',
-      border: `1px solid ${darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(16,24,40,0.10)'}`,
-      background: darkMode ? `rgba(255,255,255,0.05)` : 'rgba(255,255,255,0.88)',
-      color: darkMode ? 'rgba(255,255,255,0.92)' : '#162033',
-    }), [darkMode, sidebarQuickActionBaseStyle]);
-  const sidebarCreateConnectionActionStyle = useMemo(() => ({
-      ...sidebarQuickActionBaseStyle,
-      flex: '1 1 0',
-      border: 'none',
-      background: 'linear-gradient(135deg, rgba(34,197,94,0.96) 0%, rgba(22,163,74,0.92) 100%)',
-      color: '#f3fff7',
-    }), [sidebarQuickActionBaseStyle]);
-
-  const utilityModalShellStyle = useMemo(() => ({
-      background: overlayTheme.shellBg,
-      border: overlayTheme.shellBorder,
-      boxShadow: overlayTheme.shellShadow,
-      backdropFilter: overlayTheme.shellBackdropFilter,
-  }), [overlayTheme]);
-  const utilityPanelStyle = useMemo(() => ({
-      padding: 16,
-      borderRadius: 14,
-      border: overlayTheme.sectionBorder,
-      background: overlayTheme.sectionBg,
-  }), [overlayTheme]);
-  const toolCenterModalContentStyle = useMemo<React.CSSProperties>(() => ({
-      ...utilityModalShellStyle,
-      height: 'min(820px, calc(100vh - 64px))',
-      display: 'flex',
-      flexDirection: 'column',
-  }), [utilityModalShellStyle]);
-  const toolCenterModalWorkspaceStyle = useMemo<React.CSSProperties>(() => ({
-      display: 'flex',
-      flexDirection: 'column',
-      padding: '10px 0 2px',
-      height: '100%',
-      minHeight: 0,
-  }), []);
-  const toolCenterModalSplitStyle = useMemo<React.CSSProperties>(() => ({
-      display: 'grid',
-      gridTemplateColumns: '232px minmax(0, 1fr)',
-      gap: 18,
-      flex: 1,
-      minHeight: 0,
-  }), []);
-  const toolCenterNavPanelStyle = useMemo<React.CSSProperties>(() => ({
-      padding: '4px 12px 4px 0',
-      display: 'flex',
-      flexDirection: 'column',
-      minHeight: 0,
-      borderRight: `1px solid ${overlayTheme.divider}`,
-  }), [overlayTheme.divider]);
-  const toolCenterNavScrollStyle = useMemo<React.CSSProperties>(() => ({
-      display: 'grid',
-      alignContent: 'start',
-      gap: 4,
-      minHeight: 0,
-      overflowY: 'auto',
-      overflowX: 'hidden',
-      paddingRight: 8,
-  }), []);
-  const toolCenterContentPanelStyle = useMemo<React.CSSProperties>(() => ({
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 12,
-      minHeight: 0,
-      overflow: 'hidden',
-  }), []);
-  const toolCenterDetailPanelStyle = useMemo<React.CSSProperties>(() => ({
-      ...utilityPanelStyle,
-      flex: 1,
-      minHeight: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden',
-  }), [utilityPanelStyle]);
-  const toolCenterDetailBodyStyle = useMemo<React.CSSProperties>(() => ({
-      flex: 1,
-      minHeight: 0,
-      overflowY: 'auto',
-      overflowX: 'hidden',
-      paddingRight: 6,
-      overscrollBehavior: 'contain',
-  }), []);
-  const toolCenterScrollableListStyle = useMemo<React.CSSProperties>(() => ({
-      flex: 1,
-      minHeight: 0,
-      overflowY: 'auto',
-      overflowX: 'hidden',
-      overscrollBehavior: 'contain',
-  }), []);
-  const utilityMutedTextStyle = useMemo(() => ({
-      color: overlayTheme.mutedText,
-      fontSize: 12,
-      lineHeight: 1.6,
-  }), [overlayTheme]);
-  const renderUtilityModalTitle = (
-      icon: React.ReactNode,
-      title: string,
-      description: string,
-  ) => (
-      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, minWidth: 0 }}>
-          <div style={{ width: 36, height: 36, borderRadius: 12, display: 'grid', placeItems: 'center', background: overlayTheme.iconBg, color: overlayTheme.iconColor, flexShrink: 0 }}>
-              {icon}
-          </div>
-          <div style={{ minWidth: 0 }}>
-              <div style={{ fontSize: 16, fontWeight: 700, color: overlayTheme.titleText }}>{title}</div>
-              <div style={{ marginTop: 4, color: overlayTheme.mutedText, fontSize: 12, lineHeight: 1.6 }}>{description}</div>
-          </div>
-      </div>
-  );
-  const utilityActionCardStyle = useMemo(() => ({
-      width: '100%',
-      minHeight: 68,
-      borderRadius: 14,
-      border: overlayTheme.sectionBorder,
-      background: overlayTheme.sectionBg,
-      color: overlayTheme.titleText,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      gap: 14,
-      paddingInline: 16,
-      boxShadow: 'none',
-      fontSize: 15,
-      fontWeight: 600,
-  }), [overlayTheme]);
-  const utilityActionHintStyle = useMemo(() => ({
-      fontSize: 12,
-      color: overlayTheme.mutedText,
-      fontWeight: 400,
-      marginTop: 2,
-  }), [overlayTheme]);
-  const toolCenterRowStyle = useMemo(() => ({
-      width: '100%',
-      minHeight: 82,
-      borderRadius: 0,
-      color: overlayTheme.titleText,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: 16,
-      paddingInline: 8,
-      boxShadow: 'none',
-      fontSize: 15,
-      fontWeight: 600,
-  }), [overlayTheme]);
-  const toolCenterRowDescriptionStyle = useMemo(() => ({
-      ...utilityActionHintStyle,
-      marginTop: 4,
-      textAlign: 'left' as const,
-      whiteSpace: 'normal' as const,
-      lineHeight: 1.55,
-  }), [utilityActionHintStyle]);
-
-  const sidebarHorizontalPadding = isSidebarCompact ? 8 : 10;
+  const {
+      bgContent, bgMain,
+      floatingLogButtonBgColor, floatingLogButtonBorderColor, floatingLogButtonShadow, floatingLogButtonTextColor,
+      isSidebarCompact, isSidebarNarrow, isSidebarUltraCompact,
+      overlayTheme, renderUtilityModalTitle,
+      sidebarCreateConnectionActionStyle, sidebarHorizontalPadding, sidebarQueryActionStyle,
+      toolCenterContentPanelStyle, toolCenterDetailBodyStyle, toolCenterDetailPanelStyle,
+      toolCenterModalContentStyle, toolCenterModalSplitStyle, toolCenterModalWorkspaceStyle,
+      toolCenterNavPanelStyle, toolCenterNavScrollStyle, toolCenterRowDescriptionStyle, toolCenterRowStyle,
+      toolCenterScrollableListStyle, utilityActionCardStyle, utilityActionHintStyle, utilityButtonStyle,
+      utilityModalShellStyle, utilityMutedTextStyle, utilityPanelStyle,
+  } = useAppUtilityStyles({
+      blurFilter,
+      darkMode,
+      effectiveOpacity,
+      effectiveUiScale,
+      resolvedAppearance,
+      sidebarWidth,
+  });
   
   const addTab = useStore(state => state.addTab);
   const activeContext = useStore(state => state.activeContext);
@@ -1621,84 +1368,6 @@ function App() {
       setSecurityUpdateRepairSource(null);
       openSecurityUpdateSettings(repairEntry.focusTarget);
   }, [connections, openSecurityUpdateSettings, runSecurityUpdateRound, securityUpdateStatus, t]);
-  const updateCheckInFlightRef = React.useRef(false);
-  const updateDownloadInFlightRef = React.useRef(false);
-  const updateUserDismissedRef = React.useRef(false);
-  const updateDownloadedVersionRef = React.useRef<string | null>(null);
-  const updateInstallTriggeredVersionRef = React.useRef<string | null>(null);
-  const updateDownloadMetaRef = React.useRef<UpdateDownloadResultData | null>(null);
-  const updateNotifiedVersionRef = React.useRef<string | null>(null);
-  const updateMutedVersionRef = React.useRef<string | null>(null);
-  const [isAboutOpen, setIsAboutOpen] = useState(false);
-  const isAboutOpenRef = React.useRef(false);
-  const [aboutLoading, setAboutLoading] = useState(false);
-  const [aboutInfo, setAboutInfo] = useState<{ version: string; author: string; buildTime?: string; repoUrl?: string; issueUrl?: string; releaseUrl?: string; communityUrl?: string } | null>(null);
-  const aboutDisplayVersion = resolveAboutDisplayVersion(runtimeBuildType, aboutInfo?.version);
-  const [aboutUpdateStatus, setAboutUpdateStatus] = useState<string>('');
-  const [lastUpdateInfo, setLastUpdateInfo] = useState<UpdateInfo | null>(null);
-  const [updateDownloadProgress, setUpdateDownloadProgress] = useState<{
-      open: boolean;
-      version: string;
-      status: 'idle' | 'start' | 'downloading' | 'done' | 'error';
-      percent: number;
-      downloaded: number;
-      total: number;
-      message: string;
-  }>({
-      open: false,
-      version: '',
-      status: 'idle',
-      percent: 0,
-      downloaded: 0,
-      total: 0,
-      message: ''
-  });
-
-  type UpdateInfo = {
-      hasUpdate: boolean;
-      currentVersion: string;
-      latestVersion: string;
-      releaseName?: string;
-      releaseNotesUrl?: string;
-      assetName?: string;
-      assetUrl?: string;
-      assetSize?: number;
-      sha256?: string;
-      downloaded?: boolean;
-      downloadPath?: string;
-  };
-
-  type UpdateDownloadProgressEvent = {
-      status?: 'start' | 'downloading' | 'done' | 'error';
-      percent?: number;
-      downloaded?: number;
-      total?: number;
-      message?: string;
-  };
-
-  const formatAboutUpdateStatus = useCallback((info: UpdateInfo | null): string => {
-      if (!info) {
-          return t('app.about.update_status.not_checked');
-      }
-      if (info.hasUpdate) {
-          const localDownloaded = updateDownloadedVersionRef.current === info.latestVersion;
-          const hasDownloaded = Boolean(info.downloaded) || localDownloaded;
-          return hasDownloaded
-              ? t('app.about.update_status.new_version_downloaded', { version: info.latestVersion })
-              : t('app.about.update_status.new_version_not_downloaded', { version: info.latestVersion });
-      }
-      return t('app.about.update_status.latest', { version: info.currentVersion || t('common.unknown') });
-  }, [t]);
-
-  type UpdateDownloadResultData = {
-      info?: UpdateInfo;
-      downloadPath?: string;
-      installLogPath?: string;
-      installTarget?: string;
-      platform?: string;
-      autoRelaunch?: boolean;
-  };
-
   const isMacRuntime = runtimePlatform === 'darwin'
       || (runtimePlatform === '' && /mac/i.test(detectNavigatorPlatform()));
   const isWindowsRuntime = runtimePlatform === 'windows'
@@ -1710,6 +1379,31 @@ function App() {
       import.meta.env.DEV,
       import.meta.env.VITE_GONAVI_ENABLE_MAC_WINDOW_DIAGNOSTICS,
   );
+  const {
+      aboutDisplayVersion,
+      aboutInfo,
+      aboutLoading,
+      aboutUpdateStatus,
+      canShowProgressEntry,
+      checkForUpdates,
+      downloadUpdate,
+      formatBytes,
+      handleInstallFromProgress,
+      hideUpdateDownloadProgress,
+      isAboutOpen,
+      isBackgroundProgressForLatestUpdate,
+      isLatestUpdateDownloaded,
+      lastUpdateInfo,
+      markUpdateProgressDismissed,
+      muteLatestUpdate,
+      setIsAboutOpen,
+      showUpdateDownloadProgress,
+      updateDownloadProgress,
+  } = useAppUpdateManager({
+      isMacRuntime,
+      runtimeBuildType,
+      t,
+  });
 
   const emitWindowDiagnostic = useCallback(async (stage: string, extra: Record<string, unknown> = {}) => {
       if (!macWindowDiagnosticsEnabled) {
@@ -1877,308 +1571,6 @@ function App() {
       };
   }, [emitWindowDiagnostic, macWindowDiagnosticsEnabled]);
 
-  const formatBytes = (bytes?: number) => {
-      if (!bytes || bytes <= 0) return '0 B';
-      const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-      let value = bytes;
-      let idx = 0;
-      while (value >= 1024 && idx < units.length - 1) {
-          value /= 1024;
-          idx++;
-      }
-      return `${value.toFixed(idx === 0 ? 0 : 1)} ${units[idx]}`;
-  };
-
-  const downloadUpdate = React.useCallback(async (info: UpdateInfo, silent: boolean) => {
-      if (updateDownloadInFlightRef.current) return;
-      if (updateDownloadedVersionRef.current === info.latestVersion) {
-          if (!silent) {
-              const cachedDownloadPath = updateDownloadMetaRef.current?.downloadPath;
-              void message.info(cachedDownloadPath
-                  ? t('app.about.message.update_package_ready_with_path', { version: info.latestVersion, path: cachedDownloadPath })
-                  : t('app.about.message.update_package_ready', { version: info.latestVersion }));
-              showUpdateDownloadProgress();
-          }
-          return;
-      }
-      updateDownloadInFlightRef.current = true;
-      updateUserDismissedRef.current = false;
-      updateDownloadMetaRef.current = null;
-      setUpdateDownloadProgress({
-          open: true,
-          version: info.latestVersion,
-          status: 'start',
-          percent: 0,
-          downloaded: 0,
-          total: info.assetSize || 0,
-          message: ''
-      });
-      let res: any = null;
-      try {
-          res = await (window as any).go.app.App.DownloadUpdate();
-      } catch (e) {
-          console.warn("Wails API: DownloadUpdate unavailable", e);
-      }
-      updateDownloadInFlightRef.current = false;
-      if (res?.success) {
-          const resultData = (res?.data || {}) as UpdateDownloadResultData;
-          updateDownloadMetaRef.current = resultData;
-          updateDownloadedVersionRef.current = info.latestVersion;
-          setUpdateDownloadProgress(prev => {
-              const total = prev.total > 0 ? prev.total : (info.assetSize || 0);
-              return { ...prev, status: 'done', percent: 100, downloaded: total, total, message: '', open: false };
-          });
-          setLastUpdateInfo((prev) => {
-              if (!prev || prev.latestVersion !== info.latestVersion) {
-                  return {
-                      ...info,
-                      downloaded: true,
-                      downloadPath: resultData?.downloadPath || info.downloadPath,
-                  };
-              }
-              return {
-                  ...prev,
-                  downloaded: true,
-                  downloadPath: resultData?.downloadPath || prev.downloadPath || info.downloadPath,
-              };
-          });
-          if (resultData?.downloadPath) {
-              void message.success({ content: t('app.about.message.download_completed_with_path', { path: resultData.downloadPath }), duration: 5 });
-          } else {
-              void message.success({ content: t('app.about.message.download_completed'), duration: 2 });
-          }
-          setAboutUpdateStatus(formatAboutUpdateStatus({ ...info, downloaded: true }));
-          // macOS：如果用户没有主动隐藏进度弹窗，则下载完成后自动打开下载目录
-          if (isMacRuntime && !updateUserDismissedRef.current) {
-              try {
-                  const openRes = await (window as any).go.app.App.OpenDownloadedUpdateDirectory();
-                  if (openRes?.success) {
-                      void message.success(openRes?.message || t('app.about.message.install_directory_opened_manual_replace'));
-                  }
-              } catch (e) {
-                  console.warn('自动打开下载目录失败', e);
-              }
-          }
-      } else {
-          setUpdateDownloadProgress(prev => ({
-              ...prev,
-              status: 'error',
-              message: res?.message || t('common.unknown')
-          }));
-          void message.error({ content: t('app.about.message.download_failed_with_error', { error: res?.message || t('common.unknown') }), duration: 4 });
-      }
-  }, [formatAboutUpdateStatus, isMacRuntime, t]);
-
-  const showUpdateDownloadProgress = React.useCallback(() => {
-      setUpdateDownloadProgress((prev) => {
-          if (prev.status === 'idle') return prev;
-          return { ...prev, open: true };
-      });
-  }, []);
-
-  const hideUpdateDownloadProgress = React.useCallback(() => {
-      setUpdateDownloadProgress((prev) => ({ ...prev, open: false }));
-  }, []);
-
-  const isLatestUpdateDownloaded = Boolean(lastUpdateInfo?.hasUpdate) && (
-      Boolean(lastUpdateInfo?.downloaded)
-      || (Boolean(lastUpdateInfo?.latestVersion) && updateDownloadedVersionRef.current === lastUpdateInfo?.latestVersion)
-  );
-  const isBackgroundProgressForLatestUpdate = Boolean(lastUpdateInfo?.hasUpdate)
-      && Boolean(lastUpdateInfo?.latestVersion)
-      && updateDownloadProgress.version === lastUpdateInfo?.latestVersion
-      && (updateDownloadProgress.status === 'start'
-          || updateDownloadProgress.status === 'downloading'
-          || updateDownloadProgress.status === 'done'
-          || updateDownloadProgress.status === 'error');
-  const canShowProgressEntry = (isLatestUpdateDownloaded || isBackgroundProgressForLatestUpdate)
-      && updateInstallTriggeredVersionRef.current !== (lastUpdateInfo?.latestVersion || null);
-
-  const handleInstallFromProgress = React.useCallback(async () => {
-      // 允许从下载进度弹窗（status=done）或关于弹窗（isLatestUpdateDownloaded=true）触发
-      const canInstall = updateDownloadProgress.status === 'done'
-          || (Boolean(lastUpdateInfo?.hasUpdate) && (Boolean(lastUpdateInfo?.downloaded) || updateDownloadedVersionRef.current === lastUpdateInfo?.latestVersion));
-      if (!canInstall) {
-          return;
-      }
-      if (isMacRuntime) {
-          const res = await (window as any).go.app.App.OpenDownloadedUpdateDirectory();
-          if (!res?.success) {
-              void message.error(t('app.about.message.open_install_directory_failed_with_error', { error: res?.message || t('common.unknown') }));
-              // 文件可能已被用户删除，清除已下载状态以允许重新下载
-              updateDownloadedVersionRef.current = null;
-              updateDownloadMetaRef.current = null;
-              setUpdateDownloadProgress(prev => ({
-                  ...prev,
-                  status: 'idle',
-                  percent: 0,
-                  downloaded: 0,
-                  open: false,
-              }));
-              setLastUpdateInfo(prev => prev ? { ...prev, downloaded: false, downloadPath: undefined } : prev);
-              setAboutUpdateStatus((prev) => lastUpdateInfo ? formatAboutUpdateStatus({ ...lastUpdateInfo, downloaded: false, downloadPath: undefined }) : prev);
-              return;
-          }
-          updateInstallTriggeredVersionRef.current = updateDownloadProgress.version || lastUpdateInfo?.latestVersion || null;
-          hideUpdateDownloadProgress();
-          void message.success(res?.message || t('app.about.message.install_directory_opened_manual_replace'));
-          return;
-      }
-      const res = await (window as any).go.app.App.InstallUpdateAndRestart();
-      if (!res?.success) {
-          void message.error(t('app.about.message.install_failed_with_error', { error: res?.message || t('common.unknown') }));
-          return;
-      }
-      updateInstallTriggeredVersionRef.current = updateDownloadProgress.version || lastUpdateInfo?.latestVersion || null;
-      hideUpdateDownloadProgress();
-  }, [formatAboutUpdateStatus, hideUpdateDownloadProgress, isMacRuntime, lastUpdateInfo, updateDownloadProgress.status, updateDownloadProgress.version, t]);
-
-  const checkForUpdates = React.useCallback(async (silent: boolean) => {
-      if (updateCheckInFlightRef.current) return;
-      updateCheckInFlightRef.current = true;
-      if (!silent) {
-          setAboutUpdateStatus(t('app.about.update_status.checking'));
-      }
-      const updateAPI = (window as any).go.app.App;
-      const checkFn = silent && typeof updateAPI.CheckForUpdatesSilently === 'function'
-          ? updateAPI.CheckForUpdatesSilently
-          : updateAPI.CheckForUpdates;
-      const res = await checkFn();
-      updateCheckInFlightRef.current = false;
-      if (!res?.success) {
-          if (!silent) {
-              const error = res?.message || t('common.unknown');
-              void message.error(t('app.about.message.check_failed_with_error', { error }));
-              setAboutUpdateStatus(t('app.about.update_status.check_failed', { error }));
-          }
-          return;
-      }
-      const info: UpdateInfo = res.data;
-      if (!info) return;
-      const aboutOpen = isAboutOpenRef.current;
-      if (info.hasUpdate) {
-          // 以后端校验为准：如果后端确认文件不存在（downloaded=false），清除本地 ref
-          if (!info.downloaded && updateDownloadedVersionRef.current === info.latestVersion) {
-              updateDownloadedVersionRef.current = null;
-              updateDownloadMetaRef.current = null;
-          }
-          const localDownloaded = updateDownloadedVersionRef.current === info.latestVersion;
-          const hasDownloaded = Boolean(info.downloaded) || localDownloaded;
-          if (hasDownloaded) {
-              const downloadPath = info.downloadPath || updateDownloadMetaRef.current?.downloadPath || '';
-              updateDownloadedVersionRef.current = info.latestVersion;
-              updateDownloadMetaRef.current = {
-                  ...(updateDownloadMetaRef.current || {}),
-                  info,
-                  downloadPath: downloadPath || undefined,
-              };
-              setUpdateDownloadProgress((prev) => {
-                  if (prev.status === 'start' || prev.status === 'downloading') {
-                      return prev;
-                  }
-                  const total = info.assetSize || prev.total || 0;
-                  return {
-                      ...prev,
-                      open: prev.open && prev.version === info.latestVersion,
-                      version: info.latestVersion,
-                      status: 'done',
-                      percent: 100,
-                      downloaded: total,
-                      total,
-                      message: '',
-                  };
-              });
-              setLastUpdateInfo({
-                  ...info,
-                  downloaded: true,
-                  downloadPath: downloadPath || undefined,
-              });
-          } else {
-              if (updateDownloadedVersionRef.current !== info.latestVersion) {
-                  updateDownloadMetaRef.current = null;
-              }
-              setUpdateDownloadProgress((prev) => {
-                  if (prev.status === 'start' || prev.status === 'downloading') {
-                      return prev;
-                  }
-                  return {
-                      ...prev,
-                      open: false,
-                      version: info.latestVersion,
-                      status: 'idle',
-                      percent: 0,
-                      downloaded: 0,
-                      total: info.assetSize || 0,
-                      message: '',
-                  };
-              });
-              setLastUpdateInfo(info);
-          }
-          const statusText = formatAboutUpdateStatus({ ...info, downloaded: hasDownloaded });
-          if (!silent) {
-              void message.info(t('app.about.message.new_version_found', { version: info.latestVersion }));
-              setAboutUpdateStatus(statusText);
-          }
-          if (silent && aboutOpen) {
-              setAboutUpdateStatus(statusText);
-          }
-          if (silent && !aboutOpen && updateMutedVersionRef.current !== info.latestVersion && updateNotifiedVersionRef.current !== info.latestVersion) {
-              updateNotifiedVersionRef.current = info.latestVersion;
-              setIsAboutOpen(true);
-          }
-      } else if (!silent) {
-          setUpdateDownloadProgress((prev) => {
-              if (prev.status === 'start' || prev.status === 'downloading') {
-                  return prev;
-              }
-              return {
-                  open: false,
-                  version: '',
-                  status: 'idle',
-                  percent: 0,
-                  downloaded: 0,
-                  total: 0,
-                  message: '',
-              };
-          });
-          setLastUpdateInfo(info);
-          const text = formatAboutUpdateStatus(info);
-          void message.success(text);
-          setAboutUpdateStatus(text);
-      } else if (silent && aboutOpen) {
-          setUpdateDownloadProgress((prev) => {
-              if (prev.status === 'start' || prev.status === 'downloading') {
-                  return prev;
-              }
-              return {
-                  open: false,
-                  version: '',
-                  status: 'idle',
-                  percent: 0,
-                  downloaded: 0,
-                  total: 0,
-                  message: '',
-              };
-          });
-          setLastUpdateInfo(info);
-          const text = formatAboutUpdateStatus(info);
-          setAboutUpdateStatus(text);
-      } else {
-          setLastUpdateInfo(info);
-      }
-  }, [formatAboutUpdateStatus, t]);
-
-  const loadAboutInfo = React.useCallback(async () => {
-      setAboutLoading(true);
-      const res = await (window as any).go.app.App.GetAppInfo();
-      if (res?.success) {
-          setAboutInfo(res.data);
-      } else {
-          void message.error(t('app.about.message.load_failed', { error: res?.message || t('common.unknown') }));
-      }
-      setAboutLoading(false);
-  }, [t]);
-
   const handleNewQuery = useCallback(() => {
       let connId = '';
       let db = '';
@@ -2695,59 +2087,14 @@ function App() {
   }, [t]);
 
 
-  // Log Panel: 最小高度按“工具栏 + 1 条日志行（微增）”限制
-  const LOG_PANEL_TOOLBAR_HEIGHT = 32;
-  const LOG_PANEL_SINGLE_ROW_HEIGHT = 39;
-  const LOG_PANEL_MIN_VISIBLE_ROWS = 1;
-  const LOG_PANEL_MIN_HEIGHT = LOG_PANEL_TOOLBAR_HEIGHT + (LOG_PANEL_SINGLE_ROW_HEIGHT * LOG_PANEL_MIN_VISIBLE_ROWS);
-  const LOG_PANEL_MAX_HEIGHT = 800;
-  const [logPanelHeight, setLogPanelHeight] = useState(Math.max(200, LOG_PANEL_MIN_HEIGHT));
-  const [isLogPanelOpen, setIsLogPanelOpen] = useState(false);
-  const logResizeRef = React.useRef<{ startY: number, startHeight: number } | null>(null);
-  const logGhostRef = React.useRef<HTMLDivElement>(null);
-  const handleToggleLogPanel = useCallback(() => {
-      setIsLogPanelOpen((prev) => !prev);
-  }, []);
-
-  const handleLogResizeStart = (e: React.MouseEvent) => {
-      e.preventDefault();
-      logResizeRef.current = { startY: e.clientY, startHeight: logPanelHeight };
-      
-      if (logGhostRef.current) {
-          logGhostRef.current.style.top = `${e.clientY}px`;
-          logGhostRef.current.style.display = 'block';
-      }
-
-      document.addEventListener('mousemove', handleLogResizeMove);
-      document.addEventListener('mouseup', handleLogResizeUp);
-  };
-
-  const handleLogResizeMove = (e: MouseEvent) => {
-      if (!logResizeRef.current) return;
-      // Just update ghost line, no state update
-      if (logGhostRef.current) {
-          logGhostRef.current.style.top = `${e.clientY}px`;
-      }
-  };
-
-  const handleLogResizeUp = (e: MouseEvent) => {
-      if (logResizeRef.current) {
-          const delta = logResizeRef.current.startY - e.clientY; 
-          const newHeight = Math.max(
-              LOG_PANEL_MIN_HEIGHT,
-              Math.min(LOG_PANEL_MAX_HEIGHT, logResizeRef.current.startHeight + delta)
-          );
-          setLogPanelHeight(newHeight);
-      }
-      
-      if (logGhostRef.current) {
-          logGhostRef.current.style.display = 'none';
-      }
-
-      logResizeRef.current = null;
-      document.removeEventListener('mousemove', handleLogResizeMove);
-      document.removeEventListener('mouseup', handleLogResizeUp);
-  };
+  const {
+      handleCloseLogPanel,
+      handleLogResizeStart,
+      handleToggleLogPanel,
+      isLogPanelOpen,
+      logGhostRef,
+      logPanelHeight,
+  } = useAppLogPanelResize();
   
   const handleCreateConnection = useCallback(() => {
       setSecurityUpdateRepairSource(null);
@@ -3054,111 +2401,16 @@ function App() {
       }
   }, [t]);
   
-  // Sidebar Resizing
-  const sidebarDragRef = React.useRef<SidebarResizeDragState | null>(null);
-  const rafRef = React.useRef<number | null>(null);
-  const ghostRef = React.useRef<HTMLDivElement>(null);
-  const siderRef = React.useRef<HTMLDivElement | null>(null);
-  const sidebarDragBodyStyleRef = React.useRef<{ cursor: string; userSelect: string; webkitUserSelect: string } | null>(null);
-  const latestMouseX = React.useRef<number>(0); // Store latest mouse position
-  const sidebarResizeHandleWidth = Math.max(16, Math.round(16 * effectiveUiScale));
-
-  const restoreSidebarDragBodyStyles = () => {
-      if (!sidebarDragBodyStyleRef.current || typeof document === 'undefined') {
-          sidebarDragBodyStyleRef.current = null;
-          return;
-      }
-
-      const previous = sidebarDragBodyStyleRef.current;
-      document.body.style.cursor = previous.cursor;
-      document.body.style.userSelect = previous.userSelect;
-      (document.body.style as any).WebkitUserSelect = previous.webkitUserSelect;
-      sidebarDragBodyStyleRef.current = null;
-  };
-
-  const handleSidebarMouseDown = (e: React.MouseEvent) => {
-      if (e.button !== 0) {
-          e.preventDefault();
-          e.stopPropagation();
-          return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (typeof document !== 'undefined') {
-          sidebarDragBodyStyleRef.current = {
-              cursor: document.body.style.cursor,
-              userSelect: document.body.style.userSelect,
-              webkitUserSelect: (document.body.style as any).WebkitUserSelect || '',
-          };
-          document.body.style.cursor = 'col-resize';
-          document.body.style.userSelect = 'none';
-          (document.body.style as any).WebkitUserSelect = 'none';
-      }
-      
-      const siderRect = siderRef.current?.getBoundingClientRect();
-      const startGuideLeft = siderRect?.right ?? sidebarWidth;
-      const startWidth = siderRect?.width ?? sidebarWidth;
-      const resizeBounds = resolveSidebarResizeBounds(siderRef.current);
-
-      if (ghostRef.current) {
-          ghostRef.current.style.left = `${startGuideLeft}px`;
-          ghostRef.current.style.display = 'block';
-      }
-
-      sidebarDragRef.current = {
-          startX: e.clientX,
-          startWidth,
-          startGuideLeft,
-          ...resizeBounds,
-      };
-      latestMouseX.current = e.clientX; // Init
-      document.addEventListener('mousemove', handleSidebarMouseMove);
-      document.addEventListener('mouseup', handleSidebarMouseUp);
-  };
-
-  const handleSidebarMouseMove = (e: MouseEvent) => {
-      if (!sidebarDragRef.current) return;
-      
-      latestMouseX.current = e.clientX; // Always update latest pos
-
-      if (rafRef.current) return; // Schedule once per frame
-
-      rafRef.current = requestAnimationFrame(() => {
-          if (!sidebarDragRef.current || !ghostRef.current) return;
-          // Use latestMouseX.current instead of stale closure 'e.clientX'
-          const { startX, startWidth, startGuideLeft, minWidth, maxWidth } = sidebarDragRef.current;
-          const delta = latestMouseX.current - startX;
-          const newWidth = clampSidebarResizeWidth(startWidth + delta, { minWidth, maxWidth });
-          ghostRef.current.style.left = `${startGuideLeft + (newWidth - startWidth)}px`;
-          rafRef.current = null;
-      });
-  };
-
-  const handleSidebarMouseUp = (e: MouseEvent) => {
-      if (rafRef.current) {
-          cancelAnimationFrame(rafRef.current);
-          rafRef.current = null;
-      }
-      
-      if (sidebarDragRef.current) {
-          // Use latest position for final commit too
-          const { startX, startWidth, minWidth, maxWidth } = sidebarDragRef.current;
-          const delta = e.clientX - startX;
-          const newWidth = clampSidebarResizeWidth(startWidth + delta, { minWidth, maxWidth });
-          setSidebarWidth(newWidth);
-      }
-
-      if (ghostRef.current) {
-          ghostRef.current.style.display = 'none';
-      }
-      restoreSidebarDragBodyStyles();
-      
-      sidebarDragRef.current = null;
-      document.removeEventListener('mousemove', handleSidebarMouseMove);
-      document.removeEventListener('mouseup', handleSidebarMouseUp);
-  };
+  const {
+      ghostRef,
+      handleSidebarMouseDown,
+      sidebarResizeHandleWidth,
+      siderRef,
+  } = useAppSidebarResize({
+      effectiveUiScale,
+      setSidebarWidth,
+      sidebarWidth,
+  });
 
   useEffect(() => {
     document.body.style.backgroundColor = 'transparent';
@@ -3195,64 +2447,6 @@ function App() {
     tokenControlHeightSM,
   ]);
 
-  useEffect(() => {
-      isAboutOpenRef.current = isAboutOpen;
-  }, [isAboutOpen]);
-
-  useEffect(() => {
-      if (isAboutOpen) {
-          setAboutUpdateStatus(formatAboutUpdateStatus(lastUpdateInfo));
-          void loadAboutInfo();
-      }
-  }, [formatAboutUpdateStatus, isAboutOpen, lastUpdateInfo, loadAboutInfo]);
-
-  useEffect(() => {
-      const startupTimer = window.setTimeout(() => {
-          void checkForUpdates(true);
-      }, 2000);
-      const interval = window.setInterval(() => {
-          void checkForUpdates(true);
-      }, 30 * 60 * 1000);
-      return () => {
-          window.clearTimeout(startupTimer);
-          window.clearInterval(interval);
-      };
-  }, [checkForUpdates]);
-
-  useEffect(() => {
-      let offDownloadProgress: any = null;
-      try {
-          offDownloadProgress = EventsOn('update:download-progress', (event: UpdateDownloadProgressEvent) => {
-          if (!event) return;
-          const status = event.status || 'downloading';
-          const nextStatus: 'idle' | 'start' | 'downloading' | 'done' | 'error' =
-              status === 'start' || status === 'downloading' || status === 'done' || status === 'error'
-                  ? status
-                  : 'downloading';
-          const downloaded = typeof event.downloaded === 'number' ? event.downloaded : 0;
-          const total = typeof event.total === 'number' ? event.total : 0;
-          const percentRaw = typeof event.percent === 'number'
-              ? event.percent
-              : (total > 0 ? (downloaded / total) * 100 : 0);
-          const percent = Math.max(0, Math.min(100, percentRaw));
-          setUpdateDownloadProgress(prev => ({
-              open: prev.open,
-              version: prev.version,
-              status: nextStatus,
-              percent,
-              downloaded,
-              total,
-              message: String(event.message || '')
-          }));
-      });
-      } catch (e) {
-          console.warn("Wails API: EventsOn unavailable", e);
-      }
-      return () => {
-          if (offDownloadProgress) offDownloadProgress();
-      };
-  }, []);
-
   useEffect(() => {
       const handleOpenShortcutSettingsEvent = () => {
           setIsShortcutModalOpen(true);
@@ -3945,9 +3139,9 @@ function App() {
                )}
              </div>
              {isLogPanelOpen && (
-                 <LogPanel 
-                    height={logPanelHeight} 
-                    onClose={() => setIsLogPanelOpen(false)} 
+                 <LogPanel
+                    height={logPanelHeight}
+                    onClose={handleCloseLogPanel}
                     onResizeStart={handleLogResizeStart} 
                 />
             )}
@@ -4910,7 +4104,7 @@ function App() {
                     <Button key="progress" icon={<DownloadOutlined />} onClick={showUpdateDownloadProgress}>{t('app.about.action.download_progress')}</Button>
                 ) : null,
                 lastUpdateInfo?.hasUpdate && !isLatestUpdateDownloaded && !isBackgroundProgressForLatestUpdate ? (
-                    <Button key="mute" onClick={() => { updateMutedVersionRef.current = lastUpdateInfo.latestVersion; setIsAboutOpen(false); }}>{t('app.about.action.mute_this_version')}</Button>
+                    <Button key="mute" onClick={muteLatestUpdate}>{t('app.about.action.mute_this_version')}</Button>
                 ) : null,
                 <Button key="check" icon={<CloudDownloadOutlined />} onClick={() => checkForUpdates(false)}>{t('app.about.action.check_updates')}</Button>,
                 <Button key="close" onClick={() => setIsAboutOpen(false)}>{t('common.close')}</Button>,
@@ -5907,7 +5101,7 @@ function App() {
                   <Button
                       key="background"
                       onClick={() => {
-                          updateUserDismissedRef.current = true;
+                          markUpdateProgressDismissed();
                           hideUpdateDownloadProgress();
                       }}
                   >
diff --git a/frontend/src/components/ConnectionModal.edit-password.test.tsx b/frontend/src/components/ConnectionModal.edit-password.test.tsx
index 68688b5..e4d4b34 100644
--- a/frontend/src/components/ConnectionModal.edit-password.test.tsx
+++ b/frontend/src/components/ConnectionModal.edit-password.test.tsx
@@ -2,11 +2,15 @@ import { describe, expect, it } from 'vitest';
 import { readFileSync } from 'node:fs';
 
 const connectionModalSource = readFileSync(new URL('./ConnectionModal.tsx', import.meta.url), 'utf8');
+const connectionModalConfigSource = readFileSync(new URL('./connectionModal/connectionModalConfig.ts', import.meta.url), 'utf8');
+const connectionModalStep2Source = readFileSync(new URL('./connectionModal/ConnectionModalStep2.tsx', import.meta.url), 'utf8');
+const connectionModalNetworkSecuritySource = readFileSync(new URL('./connectionModal/ConnectionModalNetworkSecuritySection.tsx', import.meta.url), 'utf8');
+const connectionModalUriSource = readFileSync(new URL('./connectionModal/connectionModalUri.ts', import.meta.url), 'utf8');
 const redisSectionsSource = readFileSync(new URL('./ConnectionModalRedisSections.tsx', import.meta.url), 'utf8');
 const mongoSectionsSource = readFileSync(new URL('./ConnectionModalMongoSections.tsx', import.meta.url), 'utf8');
 const connectionTypeCatalogSource = readFileSync(new URL('../utils/connectionTypeCatalog.ts', import.meta.url), 'utf8');
 const connectionTypeCapabilitiesSource = readFileSync(new URL('../utils/connectionTypeCapabilities.ts', import.meta.url), 'utf8');
-const source = `${connectionModalSource}\n${redisSectionsSource}\n${mongoSectionsSource}\n${connectionTypeCatalogSource}\n${connectionTypeCapabilitiesSource}`;
+const source = `${connectionModalSource}\n${connectionModalConfigSource}\n${connectionModalStep2Source}\n${connectionModalNetworkSecuritySource}\n${connectionModalUriSource}\n${redisSectionsSource}\n${mongoSectionsSource}\n${connectionTypeCatalogSource}\n${connectionTypeCapabilitiesSource}`;
 
 describe('ConnectionModal edit password behavior', () => {
   it('keeps the prefilled primary password masked by default', () => {
@@ -186,7 +190,7 @@ describe('ConnectionModal data source registry', () => {
 
   it('keeps OceanBase Oracle service name optional for OBClient/MySQL-wire connections', () => {
     expect(source).toContain('connection.modal.field.oceanBaseServiceName.label');
-    expect(source).toContain('isOceanBaseOracle\n                          ? []');
+    expect(source).toMatch(/isOceanBaseOracle\s*\?\s*\[\]/);
     expect(source).toContain('connection.modal.field.oceanBaseServiceName.help');
     expect(source).toContain('connection.modal.field.serviceName.help');
     expect(source).toContain('connection.modal.field.serviceName.required');
@@ -301,7 +305,7 @@ describe('ConnectionModal Redis Sentinel configuration', () => {
       'connection.modal.error.unknown',
       'connection.modal.field.username.optional_placeholder',
     ].forEach((key) => {
-      expect(connectionModalSource).toContain(key);
+      expect(source).toContain(key);
     });
   });
 
diff --git a/frontend/src/components/ConnectionModal.tsx b/frontend/src/components/ConnectionModal.tsx
index b03e642..e14ea80 100644
--- a/frontend/src/components/ConnectionModal.tsx
+++ b/frontend/src/components/ConnectionModal.tsx
@@ -59,17 +59,38 @@ import {
   summarizeConnectionTestFailureMessage,
   type ConnectionConfigSectionKey,
 } from "../utils/connectionModalPresentation";
-import { resolveConnectionSecretDraft } from "../utils/connectionSecretDraft";
 import { getCustomConnectionDsnValidationMessage } from "../utils/customConnectionDsn";
 import { mergeParsedUriValuesForForm } from "../utils/connectionUriMerge";
 import { buildRpcConnectionConfig } from "../utils/connectionRpcConfig";
 import { getCustomConnectionDriverHelp } from "../utils/driverImportGuidance";
 import { isBackendCancelledResult } from "../utils/connectionExport";
 import {
-  buildRedisUriFromValues,
-  parseRedisUriToFormValues,
-  resolveRedisConfigDraft,
-} from "../utils/redisConnectionUri";
+  buildUriFromValues,
+  getConnectionParamsPlaceholder,
+  getUriPlaceholder,
+  normalizeAddressList,
+  normalizeClickHouseProtocolValue,
+  normalizeConnectionParamsText,
+  normalizeFileDbPath,
+  normalizeMongoSrvHostList,
+  normalizeOceanBaseConnectionParamsText,
+  normalizeOceanBaseProtocolValue,
+  parseClickHouseHTTPUriToValues,
+  parseHostPort,
+  parseUriToValues,
+  toAddress,
+  type ClickHouseProtocolChoice,
+  type OceanBaseProtocolChoice,
+} from "./connectionModal/connectionModalUri";
+import {
+  buildConnectionConfig,
+  buildSavedConnectionInput,
+  createEmptyConnectionSecretClearState,
+  getBlockingSecretClearMessage,
+  type ConnectionSecretClearState,
+  type ConnectionSecretKey,
+} from "./connectionModal/connectionModalConfig";
+import ConnectionModalStep2 from "./connectionModal/ConnectionModalStep2";
 import {
   CONNECTION_TYPE_GROUPS,
   getAllConnectionTypeCatalogItems,
@@ -79,8 +100,6 @@ import {
 import {
   isFileDatabaseType,
   isMySQLCompatibleType,
-  isPostgresCompatibleSSLType,
-  singleHostUriSchemesByType,
   supportsConnectionParamsForType,
   supportsSSLCAPathForType,
   supportsSSLClientCertificateForType,
@@ -92,11 +111,8 @@ import {
   type DriverStatusSnapshot,
 } from "../utils/connectionDriverType";
 import {
-  describeUnsupportedOceanBaseProtocol,
   normalizeOceanBaseProtocol,
-  OCEANBASE_PROTOCOL_PARAM_KEYS,
   resolveOceanBaseProtocolFromQueryText as resolveOceanBaseProtocolQueryText,
-  type OceanBaseProtocol,
 } from "../utils/oceanBaseProtocol";
 import {
   applyNoAutoCapAttributes,
@@ -104,8 +120,6 @@ import {
 } from "../utils/inputAutoCap";
 import {
   buildDefaultJVMConnectionValues,
-  buildJVMConnectionConfig,
-  hasUnsupportedJVMDiagnosticTransport,
   hasUnsupportedJVMEditableModes,
   JVM_EDITABLE_MODES,
   normalizeEditableJVMModes,
@@ -133,11 +147,6 @@ type ChoiceCardOption = {
   label: string;
   description?: string;
 };
-type ClickHouseProtocolChoice = "auto" | "http" | "native";
-type OceanBaseProtocolChoice = OceanBaseProtocol;
-const MAX_URI_LENGTH = 4096;
-const MAX_CONNECTION_PARAMS_LENGTH = 4096;
-const MAX_URI_HOSTS = 32;
 const MAX_TIMEOUT_SECONDS = 3600;
 const PRIMARY_USERNAME_OPTIONAL_TYPES = new Set([
   "mongodb",
@@ -226,21 +235,6 @@ const normalizeRedisDatabaseSelection = (
   return selected.length > 0 ? selected : undefined;
 };
 
-const normalizeClickHouseProtocolValue = (
-  value: unknown,
-): ClickHouseProtocolChoice => {
-  const text = String(value || "")
-    .trim()
-    .toLowerCase();
-  if (text === "http" || text === "https") return "http";
-  if (text === "native" || text === "tcp") return "native";
-  return "auto";
-};
-const normalizeOceanBaseProtocolValue = (
-  value: unknown,
-): OceanBaseProtocolChoice => {
-  return normalizeOceanBaseProtocol(value) || "mysql";
-};
 const resolveOceanBaseProtocolValue = (
   value: unknown,
 ): OceanBaseProtocolChoice | undefined => {
@@ -265,19 +259,6 @@ const resolveOceanBaseProtocolForConfig = (
     "mysql"
   );
 };
-type ConnectionSecretKey =
-  | "primaryPassword"
-  | "sshPassword"
-  | "proxyPassword"
-  | "httpTunnelPassword"
-  | "mysqlReplicaPassword"
-  | "mongoReplicaPassword"
-  | "redisSentinelPassword"
-  | "opaqueURI"
-  | "opaqueDSN";
-
-type ConnectionSecretClearState = Record<ConnectionSecretKey, boolean>;
-
 type UriFeedbackState = {
   type: "success" | "warning" | "error";
   messageKey: string;
@@ -301,19 +282,6 @@ type TestResultState =
       fallbackKey: string;
     };
 
-const createEmptyConnectionSecretClearState =
-  (): ConnectionSecretClearState => ({
-    primaryPassword: false,
-    sshPassword: false,
-    proxyPassword: false,
-    httpTunnelPassword: false,
-    mysqlReplicaPassword: false,
-    mongoReplicaPassword: false,
-    redisSentinelPassword: false,
-    opaqueURI: false,
-    opaqueDSN: false,
-  });
-
 const resolveInitialSecretFieldValue = (
   initialValues: SavedConnection | null | undefined,
   fieldName: string,
@@ -1075,1010 +1043,6 @@ const ConnectionModal: React.FC<{
     });
   };
 
-  const parseHostPort = (
-    raw: string,
-    defaultPort: number,
-  ): { host: string; port: number } | null => {
-    const text = String(raw || "").trim();
-    if (!text) {
-      return null;
-    }
-    if (text.startsWith("[")) {
-      const closingBracket = text.indexOf("]");
-      if (closingBracket > 0) {
-        const host = text.slice(1, closingBracket).trim();
-        const portText = text
-          .slice(closingBracket + 1)
-          .trim()
-          .replace(/^:/, "");
-        const parsedPort = Number(portText);
-        return {
-          host: host || "localhost",
-          port:
-            Number.isFinite(parsedPort) && parsedPort > 0 && parsedPort <= 65535
-              ? parsedPort
-              : defaultPort,
-        };
-      }
-    }
-
-    const colonCount = (text.match(/:/g) || []).length;
-    if (colonCount === 1) {
-      const splitIndex = text.lastIndexOf(":");
-      const host = text.slice(0, splitIndex).trim();
-      const portText = text.slice(splitIndex + 1).trim();
-      const parsedPort = Number(portText);
-      return {
-        host: host || "localhost",
-        port:
-          Number.isFinite(parsedPort) && parsedPort > 0 && parsedPort <= 65535
-            ? parsedPort
-            : defaultPort,
-      };
-    }
-
-    return { host: text, port: defaultPort };
-  };
-
-  const toAddress = (host: string, port: number, defaultPort: number) => {
-    const safeHost = String(host || "").trim() || "localhost";
-    const safePort =
-      Number.isFinite(Number(port)) && Number(port) > 0
-        ? Number(port)
-        : defaultPort;
-    return `${safeHost}:${safePort}`;
-  };
-
-  const normalizeAddressList = (
-    rawList: unknown,
-    defaultPort: number,
-  ): string[] => {
-    const list = Array.isArray(rawList) ? rawList : [];
-    const seen = new Set<string>();
-    const result: string[] = [];
-    list.forEach((entry) => {
-      const parsed = parseHostPort(String(entry || ""), defaultPort);
-      if (!parsed) {
-        return;
-      }
-      const normalized = toAddress(parsed.host, parsed.port, defaultPort);
-      if (seen.has(normalized)) {
-        return;
-      }
-      seen.add(normalized);
-      result.push(normalized);
-    });
-    return result;
-  };
-
-  const isValidUriHostEntry = (entry: string): boolean => {
-    const text = String(entry || "").trim();
-    if (!text) return false;
-    if (text.length > 255) return false;
-    // 拒绝明显的 DSN 片段或路径/空白，避免把非 URI 主机段误判为合法地址。
-    if (/[()\\/\s]/.test(text)) return false;
-    return true;
-  };
-
-  const normalizeMongoSrvHostList = (
-    rawList: unknown,
-    defaultPort: number,
-  ): string[] => {
-    const list = Array.isArray(rawList) ? rawList : [];
-    const seen = new Set<string>();
-    const result: string[] = [];
-    list.forEach((entry) => {
-      const parsed = parseHostPort(String(entry || ""), defaultPort);
-      if (!parsed?.host) {
-        return;
-      }
-      const host = String(parsed.host).trim();
-      if (!host || seen.has(host)) {
-        return;
-      }
-      seen.add(host);
-      result.push(host);
-    });
-    return result;
-  };
-
-  const safeDecode = (text: string) => {
-    try {
-      return decodeURIComponent(text);
-    } catch {
-      return text;
-    }
-  };
-
-  const normalizeUriBool = (raw: unknown) => {
-    const text = String(raw ?? "")
-      .trim()
-      .toLowerCase();
-    return text === "1" || text === "true" || text === "yes" || text === "on";
-  };
-
-  const normalizeConnectionParamsText = (raw: unknown) => {
-    let text = String(raw || "").trim();
-    if (!text) return "";
-    const queryIndex = text.indexOf("?");
-    if (queryIndex >= 0) {
-      text = text.slice(queryIndex + 1);
-    }
-    const hashIndex = text.indexOf("#");
-    if (hashIndex >= 0) {
-      text = text.slice(0, hashIndex);
-    }
-    return text.replace(/^[?&]+/, "").trim().slice(0, MAX_CONNECTION_PARAMS_LENGTH);
-  };
-
-  const serializeConnectionParams = (params: URLSearchParams) => {
-    const cloned = new URLSearchParams();
-    params.forEach((value, key) => {
-      if (String(key || "").trim()) {
-        cloned.append(key, value);
-      }
-    });
-    return cloned.toString().slice(0, MAX_CONNECTION_PARAMS_LENGTH);
-  };
-
-  const normalizeOceanBaseConnectionParamsText = (
-    rawParams: unknown,
-    selectedProtocol: OceanBaseProtocolChoice,
-  ) => {
-    const normalizedParamsText = normalizeConnectionParamsText(rawParams);
-    const protocolFromParams = resolveOceanBaseProtocolQueryText(normalizedParamsText);
-    if (protocolFromParams.unsupportedValue) {
-      throw new Error(describeUnsupportedOceanBaseProtocol(protocolFromParams.unsupportedValue));
-    }
-    const params = new URLSearchParams(normalizedParamsText);
-    for (const key of OCEANBASE_PROTOCOL_PARAM_KEYS) {
-      params.delete(key);
-    }
-    params.set("protocol", selectedProtocol);
-    return params.toString().slice(0, MAX_CONNECTION_PARAMS_LENGTH);
-  };
-
-  const mergeConnectionParams = (
-    params: URLSearchParams,
-    rawParams: unknown,
-  ) => {
-    const text = normalizeConnectionParamsText(rawParams);
-    if (!text) return;
-    const extra = new URLSearchParams(text);
-    extra.forEach((value, key) => {
-      if (String(key || "").trim()) {
-        params.set(key, value);
-      }
-    });
-  };
-
-  const normalizeFileDbPath = (rawPath: string): string => {
-    let pathText = String(rawPath || "").trim();
-    if (!pathText) {
-      return "";
-    }
-    // 兼容 sqlite:///C:/... 或 sqlite:///C:\... 解析后多出的前导斜杠。
-    if (/^\/[a-zA-Z]:[\\/]/.test(pathText)) {
-      pathText = pathText.slice(1);
-    }
-    // 兼容历史版本把 Windows 文件路径误拼成 :3306:3306。
-    const legacyMatch = pathText.match(/^([a-zA-Z]:[\\/].*?)(?::\d+)+$/);
-    if (legacyMatch?.[1]) {
-      return legacyMatch[1];
-    }
-    return pathText;
-  };
-
-  const parseMultiHostUri = (uriText: string, expectedScheme: string) => {
-    const prefix = `${expectedScheme}://`;
-    if (!uriText.toLowerCase().startsWith(prefix)) {
-      return null;
-    }
-    let rest = uriText.slice(prefix.length);
-    const hashIndex = rest.indexOf("#");
-    if (hashIndex >= 0) {
-      rest = rest.slice(0, hashIndex);
-    }
-    let queryText = "";
-    const queryIndex = rest.indexOf("?");
-    if (queryIndex >= 0) {
-      queryText = rest.slice(queryIndex + 1);
-      rest = rest.slice(0, queryIndex);
-    }
-
-    let pathText = "";
-    const slashIndex = rest.indexOf("/");
-    if (slashIndex >= 0) {
-      pathText = rest.slice(slashIndex + 1);
-      rest = rest.slice(0, slashIndex);
-    }
-
-    let hostText = rest;
-    let username = "";
-    let password = "";
-    const atIndex = rest.lastIndexOf("@");
-    if (atIndex >= 0) {
-      const userInfo = rest.slice(0, atIndex);
-      hostText = rest.slice(atIndex + 1);
-      const colonIndex = userInfo.indexOf(":");
-      if (colonIndex >= 0) {
-        username = safeDecode(userInfo.slice(0, colonIndex));
-        password = safeDecode(userInfo.slice(colonIndex + 1));
-      } else {
-        username = safeDecode(userInfo);
-      }
-    }
-
-    const hosts = hostText
-      .split(",")
-      .map((item) => item.trim())
-      .filter(Boolean);
-
-    return {
-      username,
-      password,
-      hosts,
-      database: safeDecode(pathText),
-      params: new URLSearchParams(queryText),
-    };
-  };
-
-  const parseSingleHostUri = (
-    uriText: string,
-    expectedSchemes: string[],
-    defaultPort: number,
-  ): {
-    host: string;
-    port: number;
-    username: string;
-    password: string;
-    database: string;
-    params: URLSearchParams;
-  } | null => {
-    let parsed: ReturnType<typeof parseMultiHostUri> | null = null;
-    for (const scheme of expectedSchemes) {
-      parsed = parseMultiHostUri(uriText, scheme);
-      if (parsed) {
-        break;
-      }
-    }
-    if (!parsed) {
-      return null;
-    }
-    if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
-      return null;
-    }
-    if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
-      return null;
-    }
-    const hostList = normalizeAddressList(parsed.hosts, defaultPort);
-    if (!hostList.length) {
-      return null;
-    }
-    const primary = parseHostPort(
-      hostList[0] || `localhost:${defaultPort}`,
-      defaultPort,
-    );
-    return {
-      host: primary?.host || "localhost",
-      port: primary?.port || defaultPort,
-      username: parsed.username,
-      password: parsed.password,
-      database: parsed.database || "",
-      params: parsed.params,
-    };
-  };
-
-  const parseClickHouseHTTPUriToValues = (
-    uriText: string,
-    fallbackPort?: number,
-  ): Record<string, any> | null => {
-    const trimmed = String(uriText || "").trim();
-    const lower = trimmed.toLowerCase();
-    const isHttps = lower.startsWith("https://");
-    const isHttp = lower.startsWith("http://");
-    if (!isHttp && !isHttps) {
-      return null;
-    }
-    const defaultPort =
-      Number.isFinite(Number(fallbackPort)) && Number(fallbackPort) > 0
-        ? Number(fallbackPort)
-        : isHttps
-          ? 8443
-          : 8123;
-    const parsed = parseSingleHostUri(
-      trimmed,
-      [isHttps ? "https" : "http"],
-      defaultPort,
-    );
-    if (!parsed) {
-      return null;
-    }
-    const skipVerify = normalizeUriBool(parsed.params.get("skip_verify"));
-    return {
-      host: parsed.host,
-      port: parsed.port,
-      user: parsed.username,
-      password: parsed.password,
-      database: parsed.database || "",
-      clickHouseProtocol: "http",
-      useSSL: isHttps,
-      sslMode: isHttps ? (skipVerify ? "skip-verify" : "required") : "disable",
-      ...extractSSLPathValuesFromParams(parsed.params, "clickhouse"),
-      connectionParams: serializeConnectionParams(parsed.params),
-    };
-  };
-
-  const firstConnectionParamValue = (
-    params: URLSearchParams,
-    names: string[],
-  ): string => {
-    for (const name of names) {
-      const value = String(params.get(name) || "").trim();
-      if (value) return value;
-    }
-    return "";
-  };
-
-  const extractSSLPathValuesFromParams = (
-    params: URLSearchParams,
-    type: string,
-  ): Record<string, string> => {
-    const caPath = firstConnectionParamValue(params, [
-      "sslCAPath",
-      "ssl_ca_path",
-      "sslrootcert",
-      "sslRootCert",
-      "tlsCAFile",
-      "caFile",
-      "certificate",
-      "servercertificate",
-      "serverCertificate",
-    ]);
-    const certPath = firstConnectionParamValue(params, [
-      "sslCertPath",
-      "ssl_cert_path",
-      "SSL_CERT_PATH",
-      "sslcert",
-      "sslCert",
-      "tlsCertificateFile",
-    ]);
-    const keyPath = firstConnectionParamValue(params, [
-      "sslKeyPath",
-      "ssl_key_path",
-      "SSL_KEY_PATH",
-      "sslkey",
-      "sslKey",
-      "tlsKeyFile",
-    ]);
-    return {
-      ...(supportsSSLCAPathForType(type) && caPath ? { sslCAPath: caPath } : {}),
-      ...(supportsSSLClientCertificateForType(type) && certPath ? { sslCertPath: certPath } : {}),
-      ...(supportsSSLClientCertificateForType(type) && keyPath ? { sslKeyPath: keyPath } : {}),
-    };
-  };
-
-  const appendSSLPathParamsForUri = (
-    params: URLSearchParams,
-    type: string,
-    values: Record<string, any>,
-  ) => {
-    const caPath = String(values.sslCAPath || "").trim();
-    const certPath = String(values.sslCertPath || "").trim();
-    const keyPath = String(values.sslKeyPath || "").trim();
-    const mode = String(values.sslMode || "preferred")
-      .trim()
-      .toLowerCase();
-    if (supportsSSLCAPathForType(type) && caPath) {
-      if (isPostgresCompatibleSSLType(type)) {
-        if (mode !== "skip-verify" && mode !== "disable") {
-          params.set("sslrootcert", caPath);
-        }
-      } else if (type === "sqlserver") {
-        params.set("certificate", caPath);
-      } else {
-        params.set("sslCAPath", caPath);
-      }
-    }
-    if (supportsSSLClientCertificateForType(type) && certPath) {
-      if (type === "dameng") {
-        params.set("SSL_CERT_PATH", certPath);
-      } else if (isPostgresCompatibleSSLType(type)) {
-        params.set("sslcert", certPath);
-      } else {
-        params.set("sslCertPath", certPath);
-      }
-    }
-    if (supportsSSLClientCertificateForType(type) && keyPath) {
-      if (type === "dameng") {
-        params.set("SSL_KEY_PATH", keyPath);
-      } else if (isPostgresCompatibleSSLType(type)) {
-        params.set("sslkey", keyPath);
-      } else {
-        params.set("sslKeyPath", keyPath);
-      }
-    }
-  };
-
-  const parseUriToValues = (
-    uriText: string,
-    type: string,
-  ): Record<string, any> | null => {
-    const trimmedUri = String(uriText || "").trim();
-    if (!trimmedUri) {
-      return null;
-    }
-    if (trimmedUri.length > MAX_URI_LENGTH) {
-      return null;
-    }
-
-    if (isMySQLCompatibleType(type)) {
-      const mysqlDefaultPort = getDefaultPortByType(type);
-      const parsed =
-        parseMultiHostUri(trimmedUri, "mysql") ||
-        parseMultiHostUri(trimmedUri, "goldendb") ||
-        parseMultiHostUri(trimmedUri, "greatdb") ||
-        parseMultiHostUri(trimmedUri, "gdb") ||
-        parseMultiHostUri(trimmedUri, "jdbc:mysql") ||
-        parseMultiHostUri(trimmedUri, "oceanbase") ||
-        parseMultiHostUri(trimmedUri, "jdbc:oceanbase") ||
-        parseMultiHostUri(trimmedUri, "starrocks") ||
-        parseMultiHostUri(trimmedUri, "jdbc:starrocks") ||
-        parseMultiHostUri(trimmedUri, "diros") ||
-        parseMultiHostUri(trimmedUri, "doris");
-      if (!parsed) {
-        return null;
-      }
-      if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
-        return null;
-      }
-      if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
-        return null;
-      }
-      const hostList = normalizeAddressList(parsed.hosts, mysqlDefaultPort);
-      if (!hostList.length) {
-        return null;
-      }
-      const primary = parseHostPort(
-        hostList[0] || `localhost:${mysqlDefaultPort}`,
-        mysqlDefaultPort,
-      );
-      const timeoutValue = Number(parsed.params.get("timeout"));
-      const topology = String(
-        parsed.params.get("topology") || "",
-      ).toLowerCase();
-      const tlsValue = String(
-        parsed.params.get("tls") || parsed.params.get("useSSL") || "",
-      )
-        .trim()
-        .toLowerCase();
-      const parsedOceanBaseProtocol =
-        type === "oceanbase"
-          ? normalizeOceanBaseProtocolValue(
-              parsed.params.get("protocol") ||
-                parsed.params.get("oceanBaseProtocol") ||
-                parsed.params.get("oceanbaseProtocol") ||
-                parsed.params.get("tenantMode") ||
-                parsed.params.get("compatMode") ||
-                parsed.params.get("mode"),
-            )
-          : undefined;
-      const sslMode =
-        tlsValue === "true"
-          ? "required"
-          : tlsValue === "skip-verify"
-            ? "skip-verify"
-            : tlsValue === "preferred"
-              ? "preferred"
-              : "disable";
-      return {
-        host: primary?.host || "localhost",
-        port: primary?.port || mysqlDefaultPort,
-        user: parsed.username,
-        password: parsed.password,
-        database: parsed.database || "",
-        useSSL: sslMode !== "disable",
-        sslMode,
-        ...extractSSLPathValuesFromParams(parsed.params, type),
-        oceanBaseProtocol: parsedOceanBaseProtocol,
-        mysqlTopology:
-          parsedOceanBaseProtocol === "oracle"
-            ? "single"
-            : hostList.length > 1 || topology === "replica"
-              ? "replica"
-              : "single",
-        mysqlReplicaHosts: hostList.slice(1),
-        connectionParams: serializeConnectionParams(parsed.params),
-        timeout:
-          Number.isFinite(timeoutValue) && timeoutValue > 0
-            ? Math.min(3600, Math.trunc(timeoutValue))
-            : undefined,
-      };
-    }
-
-    if (isFileDatabaseType(type)) {
-      const rawPath = trimmedUri
-        .replace(/^sqlite:\/\//i, "")
-        .replace(/^duckdb:\/\//i, "")
-        .trim();
-      if (!rawPath) {
-        return null;
-      }
-      return { host: normalizeFileDbPath(safeDecode(rawPath)) };
-    }
-
-    if (type === "redis") {
-      return parseRedisUriToFormValues(trimmedUri);
-    }
-
-    if (type === "mongodb") {
-      const parsed =
-        parseMultiHostUri(trimmedUri, "mongodb") ||
-        parseMultiHostUri(trimmedUri, "mongodb+srv");
-      if (!parsed) {
-        return null;
-      }
-      if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
-        return null;
-      }
-      if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
-        return null;
-      }
-      const isSrv = trimmedUri.toLowerCase().startsWith("mongodb+srv://");
-      const hostList = isSrv
-        ? normalizeMongoSrvHostList(parsed.hosts, 27017)
-        : normalizeAddressList(parsed.hosts, 27017);
-      if (!hostList.length) {
-        return null;
-      }
-      const primary = isSrv
-        ? { host: hostList[0] || "localhost", port: 27017 }
-        : parseHostPort(hostList[0] || "localhost:27017", 27017);
-      const timeoutMs = Number(
-        parsed.params.get("connectTimeoutMS") ||
-          parsed.params.get("serverSelectionTimeoutMS"),
-      );
-      const tlsText = String(
-        parsed.params.get("tls") || parsed.params.get("ssl") || "",
-      )
-        .trim()
-        .toLowerCase();
-      const tlsInsecureText = String(
-        parsed.params.get("tlsInsecure") ||
-          parsed.params.get("sslInsecure") ||
-          "",
-      )
-        .trim()
-        .toLowerCase();
-      const tlsEnabled =
-        tlsText === "1" ||
-        tlsText === "true" ||
-        tlsText === "yes" ||
-        tlsText === "on";
-      const tlsInsecure =
-        tlsInsecureText === "1" ||
-        tlsInsecureText === "true" ||
-        tlsInsecureText === "yes" ||
-        tlsInsecureText === "on";
-      return {
-        host: primary?.host || "localhost",
-        port: primary?.port || 27017,
-        user: parsed.username,
-        password: parsed.password,
-        database: parsed.database || "",
-        useSSL: tlsEnabled,
-        sslMode: tlsEnabled
-          ? tlsInsecure
-            ? "skip-verify"
-            : "required"
-          : "disable",
-        ...extractSSLPathValuesFromParams(parsed.params, type),
-        mongoTopology:
-          hostList.length > 1 || !!parsed.params.get("replicaSet")
-            ? "replica"
-            : "single",
-        mongoHosts: hostList.slice(1),
-        mongoSrv: isSrv,
-        mongoReplicaSet: parsed.params.get("replicaSet") || "",
-        mongoAuthSource: parsed.params.get("authSource") || "",
-        mongoReadPreference: parsed.params.get("readPreference") || "primary",
-        mongoAuthMechanism: parsed.params.get("authMechanism") || "",
-        connectionParams: serializeConnectionParams(parsed.params),
-        timeout:
-          Number.isFinite(timeoutMs) && timeoutMs > 0
-            ? Math.min(MAX_TIMEOUT_SECONDS, Math.ceil(timeoutMs / 1000))
-            : undefined,
-        savePassword: true,
-      };
-    }
-
-    if (type === "kafka") {
-      const defaultPort = getDefaultPortByType(type);
-      const parsed =
-        parseMultiHostUri(trimmedUri, "kafka") ||
-        parseMultiHostUri(trimmedUri, "apache-kafka") ||
-        parseMultiHostUri(trimmedUri, "apache_kafka");
-      if (!parsed) {
-        return null;
-      }
-      if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
-        return null;
-      }
-      if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
-        return null;
-      }
-      const hostList = normalizeAddressList(parsed.hosts, defaultPort);
-      if (!hostList.length) {
-        return null;
-      }
-      const primary = parseHostPort(
-        hostList[0] || `localhost:${defaultPort}`,
-        defaultPort,
-      );
-      const tlsEnabled = normalizeUriBool(
-        parsed.params.get("tls") ||
-          parsed.params.get("ssl") ||
-          parsed.params.get("useSSL") ||
-          parsed.params.get("use_ssl"),
-      );
-      const skipVerify = normalizeUriBool(
-        parsed.params.get("skip_verify") || parsed.params.get("skipVerify"),
-      );
-      const topology = String(parsed.params.get("topology") || "")
-        .trim()
-        .toLowerCase();
-      const timeoutValue = Number(parsed.params.get("timeout"));
-      return {
-        host: primary?.host || "localhost",
-        port: primary?.port || defaultPort,
-        user: parsed.username,
-        password: parsed.password,
-        database: parsed.database || "",
-        useSSL: tlsEnabled,
-        sslMode: tlsEnabled ? (skipVerify ? "skip-verify" : "required") : "disable",
-        ...extractSSLPathValuesFromParams(parsed.params, type),
-        kafkaTopology:
-          topology === "cluster" || hostList.length > 1 ? "cluster" : "single",
-        kafkaHosts: hostList.slice(1),
-        connectionParams: serializeConnectionParams(parsed.params),
-        timeout:
-          Number.isFinite(timeoutValue) && timeoutValue > 0
-            ? Math.min(MAX_TIMEOUT_SECONDS, Math.trunc(timeoutValue))
-            : undefined,
-      };
-    }
-
-    if (type === "mqtt") {
-      const defaultPort = getDefaultPortByType(type);
-      const parsed =
-        parseMultiHostUri(trimmedUri, "mqtt") ||
-        parseMultiHostUri(trimmedUri, "mqtts") ||
-        parseMultiHostUri(trimmedUri, "tcp") ||
-        parseMultiHostUri(trimmedUri, "ssl") ||
-        parseMultiHostUri(trimmedUri, "tls");
-      if (!parsed) {
-        return null;
-      }
-      if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
-        return null;
-      }
-      if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
-        return null;
-      }
-      const hostList = normalizeAddressList(parsed.hosts, defaultPort);
-      if (!hostList.length) {
-        return null;
-      }
-      const primary = parseHostPort(
-        hostList[0] || `localhost:${defaultPort}`,
-        defaultPort,
-      );
-      const lowerUri = trimmedUri.toLowerCase();
-      const tlsEnabled =
-        lowerUri.startsWith("mqtts://") ||
-        lowerUri.startsWith("ssl://") ||
-        lowerUri.startsWith("tls://") ||
-        normalizeUriBool(
-          parsed.params.get("tls") ||
-            parsed.params.get("ssl") ||
-            parsed.params.get("useSSL") ||
-            parsed.params.get("use_ssl"),
-        );
-      const skipVerify = normalizeUriBool(
-        parsed.params.get("skip_verify") || parsed.params.get("skipVerify"),
-      );
-      const topology = String(parsed.params.get("topology") || "")
-        .trim()
-        .toLowerCase();
-      const timeoutValue = Number(parsed.params.get("timeout"));
-      return {
-        host: primary?.host || "localhost",
-        port: primary?.port || defaultPort,
-        user: parsed.username,
-        password: parsed.password,
-        database: parsed.database || "",
-        useSSL: tlsEnabled,
-        sslMode: tlsEnabled ? (skipVerify ? "skip-verify" : "required") : "disable",
-        ...extractSSLPathValuesFromParams(parsed.params, type),
-        mqttTopology:
-          topology === "cluster" || hostList.length > 1 ? "cluster" : "single",
-        mqttHosts: hostList.slice(1),
-        connectionParams: serializeConnectionParams(parsed.params),
-        timeout:
-          Number.isFinite(timeoutValue) && timeoutValue > 0
-            ? Math.min(MAX_TIMEOUT_SECONDS, Math.trunc(timeoutValue))
-            : undefined,
-      };
-    }
-
-    if (type === "rocketmq") {
-      const defaultPort = getDefaultPortByType(type);
-      const parsed =
-        parseMultiHostUri(trimmedUri, "rocketmq") ||
-        parseMultiHostUri(trimmedUri, "rmq");
-      if (!parsed) {
-        return null;
-      }
-      if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
-        return null;
-      }
-      if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
-        return null;
-      }
-      const hostList = normalizeAddressList(parsed.hosts, defaultPort);
-      if (!hostList.length) {
-        return null;
-      }
-      const primary = parseHostPort(
-        hostList[0] || `localhost:${defaultPort}`,
-        defaultPort,
-      );
-      const topology = String(parsed.params.get("topology") || "")
-        .trim()
-        .toLowerCase();
-      const timeoutValue = Number(parsed.params.get("timeout"));
-      return {
-        host: primary?.host || "localhost",
-        port: primary?.port || defaultPort,
-        user: parsed.username,
-        password: parsed.password,
-        database: parsed.database || "",
-        rocketmqTopology:
-          topology === "cluster" || hostList.length > 1 ? "cluster" : "single",
-        rocketmqHosts: hostList.slice(1),
-        connectionParams: serializeConnectionParams(parsed.params),
-        timeout:
-          Number.isFinite(timeoutValue) && timeoutValue > 0
-            ? Math.min(MAX_TIMEOUT_SECONDS, Math.trunc(timeoutValue))
-            : undefined,
-      };
-    }
-
-    if (type === "rabbitmq") {
-      const defaultPort = getDefaultPortByType(type);
-      const parsed = parseSingleHostUri(
-        trimmedUri,
-        ["rabbitmq", "http", "https"],
-        defaultPort,
-      );
-      if (!parsed) {
-        return null;
-      }
-      const lowerUri = trimmedUri.toLowerCase();
-      const tlsEnabled =
-        lowerUri.startsWith("https://") ||
-        normalizeUriBool(
-          parsed.params.get("tls") ||
-            parsed.params.get("ssl") ||
-            parsed.params.get("useSSL") ||
-            parsed.params.get("use_ssl"),
-        );
-      const skipVerify = normalizeUriBool(
-        parsed.params.get("skip_verify") || parsed.params.get("skipVerify"),
-      );
-      const timeoutValue = Number(parsed.params.get("timeout"));
-      return {
-        host: parsed.host,
-        port: parsed.port,
-        user: parsed.username,
-        password: parsed.password,
-        database: parsed.database || "",
-        useSSL: tlsEnabled,
-        sslMode: tlsEnabled ? (skipVerify ? "skip-verify" : "required") : "disable",
-        ...extractSSLPathValuesFromParams(parsed.params, type),
-        connectionParams: serializeConnectionParams(parsed.params),
-        timeout:
-          Number.isFinite(timeoutValue) && timeoutValue > 0
-            ? Math.min(MAX_TIMEOUT_SECONDS, Math.trunc(timeoutValue))
-            : undefined,
-      };
-    }
-
-    if (type === "clickhouse") {
-      const httpValues = parseClickHouseHTTPUriToValues(trimmedUri);
-      if (httpValues) {
-        return httpValues;
-      }
-    }
-
-    const singleHostSchemes = singleHostUriSchemesByType[type];
-    if (singleHostSchemes && singleHostSchemes.length > 0) {
-      const parsed = parseSingleHostUri(
-        trimmedUri,
-        singleHostSchemes,
-        getDefaultPortByType(type),
-      );
-      if (!parsed) {
-        return null;
-      }
-      if (type === "oracle" && !String(parsed.database || "").trim()) {
-        // Oracle 需要显式 service name，避免 URI 解析后放过必填校验。
-        return null;
-      }
-      const parsedValues: Record<string, any> = {
-        host: parsed.host,
-        port: parsed.port,
-        user: parsed.username,
-        password: parsed.password,
-        database: parsed.database,
-      };
-      if (supportsConnectionParamsForType(type)) {
-        parsedValues.connectionParams = serializeConnectionParams(parsed.params);
-      }
-
-      if (supportsSSLForType(type)) {
-        Object.assign(parsedValues, extractSSLPathValuesFromParams(parsed.params, type));
-        const normalizeBool = (raw: unknown) => {
-          const text = String(raw ?? "")
-            .trim()
-            .toLowerCase();
-          return (
-            text === "1" || text === "true" || text === "yes" || text === "on"
-          );
-        };
-        if (
-          type === "postgres" ||
-          type === "kingbase" ||
-          type === "highgo" ||
-          type === "vastbase" ||
-          type === "opengauss" ||
-          type === "gaussdb"
-        ) {
-          const sslMode = String(parsed.params.get("sslmode") || "")
-            .trim()
-            .toLowerCase();
-          if (sslMode) {
-            parsedValues.useSSL = sslMode !== "disable" && sslMode !== "false";
-            parsedValues.sslMode =
-              sslMode === "disable" || sslMode === "false"
-                ? "disable"
-                : "required";
-          }
-        } else if (type === "sqlserver") {
-          const encrypt = String(parsed.params.get("encrypt") || "")
-            .trim()
-            .toLowerCase();
-          const trust = String(
-            parsed.params.get("TrustServerCertificate") ||
-              parsed.params.get("trustservercertificate") ||
-              "",
-          )
-            .trim()
-            .toLowerCase();
-          const encrypted =
-            encrypt === "true" ||
-            encrypt === "mandatory" ||
-            encrypt === "yes" ||
-            encrypt === "1" ||
-            encrypt === "strict";
-          if (encrypted) {
-            parsedValues.useSSL = true;
-            parsedValues.sslMode =
-              trust === "true" || trust === "1" || trust === "yes"
-                ? "skip-verify"
-                : "required";
-          } else if (encrypt) {
-            parsedValues.useSSL = false;
-            parsedValues.sslMode = "disable";
-          }
-        } else if (type === "clickhouse") {
-          parsedValues.clickHouseProtocol = normalizeClickHouseProtocolValue(
-            parsed.params.get("protocol"),
-          );
-          const secure = String(
-            parsed.params.get("secure") || parsed.params.get("tls") || "",
-          )
-            .trim()
-            .toLowerCase();
-          const skipVerify = normalizeBool(parsed.params.get("skip_verify"));
-          if (secure) {
-            parsedValues.useSSL = normalizeBool(secure);
-            parsedValues.sslMode = skipVerify
-              ? "skip-verify"
-              : parsedValues.useSSL
-                ? "required"
-                : "disable";
-          }
-        } else if (type === "dameng") {
-          const certPath = String(
-            parsed.params.get("SSL_CERT_PATH") ||
-              parsed.params.get("ssl_cert_path") ||
-              parsed.params.get("sslCertPath") ||
-              "",
-          ).trim();
-          const keyPath = String(
-            parsed.params.get("SSL_KEY_PATH") ||
-              parsed.params.get("ssl_key_path") ||
-              parsed.params.get("sslKeyPath") ||
-              "",
-          ).trim();
-          parsedValues.sslCertPath = certPath;
-          parsedValues.sslKeyPath = keyPath;
-          if (certPath || keyPath) {
-            parsedValues.useSSL = true;
-            parsedValues.sslMode = "required";
-          }
-        } else if (type === "oracle") {
-          const ssl = String(
-            parsed.params.get("SSL") || parsed.params.get("ssl") || "",
-          )
-            .trim()
-            .toLowerCase();
-          const sslVerify = String(
-            parsed.params.get("SSL VERIFY") ||
-              parsed.params.get("ssl verify") ||
-              parsed.params.get("SSL_VERIFY") ||
-              parsed.params.get("ssl_verify") ||
-              "",
-          )
-            .trim()
-            .toLowerCase();
-          if (ssl) {
-            parsedValues.useSSL = normalizeBool(ssl);
-            if (!parsedValues.useSSL) {
-              parsedValues.sslMode = "disable";
-            } else {
-              parsedValues.sslMode = normalizeBool(sslVerify || "true")
-                ? "required"
-                : "skip-verify";
-            }
-          }
-        } else if (type === "tdengine") {
-          const protocol = String(parsed.params.get("protocol") || "")
-            .trim()
-            .toLowerCase();
-          const skipVerify = normalizeBool(parsed.params.get("skip_verify"));
-          if (protocol === "wss") {
-            parsedValues.useSSL = true;
-            parsedValues.sslMode = skipVerify ? "skip-verify" : "required";
-          } else if (protocol === "ws") {
-            parsedValues.useSSL = false;
-            parsedValues.sslMode = "disable";
-          }
-        } else if (type === "chroma" || type === "qdrant") {
-          const tls = String(
-            parsed.params.get("tls") ||
-              parsed.params.get("ssl") ||
-              parsed.params.get("useSSL") ||
-              parsed.params.get("use_ssl") ||
-              "",
-          )
-            .trim()
-            .toLowerCase();
-          const skipVerify = normalizeBool(
-            parsed.params.get("skip_verify") || parsed.params.get("skipVerify"),
-          );
-          const enabled = tls ? normalizeBool(tls) : trimmedUri.toLowerCase().startsWith("https://");
-          parsedValues.useSSL = enabled;
-          parsedValues.sslMode = enabled ? (skipVerify ? "skip-verify" : "required") : "disable";
-        }
-      }
-      return parsedValues;
-    }
-
-    return null;
-  };
-
   const createUriAwareRequiredRule =
     (messageText: string, validateValue?: (value: unknown) => boolean) =>
     ({ getFieldValue }: { getFieldValue: (name: string) => unknown }) => ({
@@ -2112,434 +1076,6 @@ const ConnectionModal: React.FC<{
     },
   });
 
-  const getUriPlaceholder = () => {
-    if (isMySQLCompatibleType(dbType)) {
-      const defaultPort = getDefaultPortByType(dbType);
-      const scheme =
-        dbType === "diros" ? "doris" : dbType === "starrocks" ? "starrocks" : dbType === "oceanbase" ? "oceanbase" : dbType === "goldendb" ? "goldendb" : "mysql";
-      if (dbType === "oceanbase") {
-        return `${scheme}://sys%40oracle001:pass@127.0.0.1:${defaultPort}?protocol=oracle`;
-      }
-      return `${scheme}://user:pass@127.0.0.1:${defaultPort},127.0.0.2:${defaultPort}/db_name?topology=replica`;
-    }
-    if (isFileDatabaseType(dbType)) {
-      return dbType === "duckdb"
-        ? "duckdb:///Users/name/demo.duckdb"
-        : "sqlite:///Users/name/demo.sqlite";
-    }
-    if (dbType === "mongodb") {
-      return "mongodb+srv://user:pass@cluster0.example.com/db_name?authSource=admin&authMechanism=SCRAM-SHA-256";
-    }
-    if (dbType === "clickhouse") {
-      return "clickhouse://default:pass@127.0.0.1:9000/default";
-    }
-    if (dbType === "chroma") {
-      return "http://127.0.0.1:8000/default_database?tenant=default_tenant";
-    }
-    if (dbType === "qdrant") {
-      return "http://127.0.0.1:6333";
-    }
-    if (dbType === "iotdb") {
-      return "iotdb://root:root@127.0.0.1:6667/root.sg";
-    }
-    if (dbType === "rocketmq") {
-      return "rocketmq://accessKey:secretKey@127.0.0.1:9876,127.0.0.2:9876/orders.events?topology=cluster&groupId=gonavi&namespace=prod&tag=TagA&pullBatchSize=32&startOffset=latest";
-    }
-    if (dbType === "mqtt") {
-      return "mqtt://user:pass@127.0.0.1:1883/devices%2F%2B%2Ftelemetry?topology=cluster&clientId=gonavi-desktop&qos=1";
-    }
-    if (dbType === "kafka") {
-      return "kafka://user:pass@127.0.0.1:9092,127.0.0.2:9092/orders.events?topology=cluster&groupId=analytics&mechanism=scram-sha-256";
-    }
-    if (dbType === "rabbitmq") {
-      return "rabbitmq://guest:guest@127.0.0.1:15672/%2F?defaultQueue=orders.queue&exchange=events.topic&timeout=30";
-    }
-    if (dbType === "redis") {
-      return "redis://:pass@127.0.0.1:6379,127.0.0.2:6379/0?topology=cluster 或 redis://:pass@10.0.0.1:26379,10.0.0.2:26379/0?topology=sentinel&master=mymaster";
-    }
-    if (dbType === "oracle") {
-      return "oracle://user:pass@127.0.0.1:1521/ORCLPDB1";
-    }
-    if (dbType === "iris") {
-      return "iris://user:pass@127.0.0.1:1972/USER";
-    }
-    if (dbType === "opengauss") {
-      return "opengauss://user:pass@127.0.0.1:5432/db_name";
-    }
-    if (dbType === "gaussdb") {
-      return "gaussdb://user:pass@127.0.0.1:5432/db_name";
-    }
-    return t("connection.modal.example", {
-      value: "postgres://user:pass@127.0.0.1:5432/db_name",
-    });
-  };
-
-  const getConnectionParamsPlaceholder = () => {
-    if (dbType === "oceanbase") {
-      return oceanBaseProtocol === "oracle"
-        ? "PREFETCH_ROWS=5000"
-        : "useUnicode=true&characterEncoding=utf8&autoReconnect=true&useSSL=false";
-    }
-    if (isMySQLCompatibleType(dbType)) {
-      return "useUnicode=true&characterEncoding=utf8&autoReconnect=true&useSSL=false";
-    }
-    switch (dbType) {
-      case "postgres":
-      case "kingbase":
-      case "highgo":
-      case "vastbase":
-      case "opengauss":
-      case "gaussdb":
-        return "application_name=GoNavi&statement_timeout=30000";
-      case "oracle":
-        return "PREFETCH_ROWS=5000&TRACE FILE=/tmp/go-ora.trc";
-      case "sqlserver":
-        return "app name=GoNavi&packet size=32767";
-      case "iris":
-        return "timeout=30";
-      case "clickhouse":
-        return "max_execution_time=60&compress=lz4";
-      case "mongodb":
-        return "retryWrites=true&readPreference=secondaryPreferred";
-      case "chroma":
-        return "tenant=default_tenant&apiKey=...";
-      case "qdrant":
-        return "apiKey=...";
-      case "dameng":
-        return "schema=SYSDBA";
-      case "tdengine":
-        return "timezone=Asia%2FShanghai";
-      case "iotdb":
-        return "fetchSize=1024&timeZone=Asia%2FShanghai";
-      case "rocketmq":
-        return "groupId=gonavi&namespace=prod&tag=TagA&pullBatchSize=32&startOffset=latest";
-      case "mqtt":
-        return "topics=devices%2F%2B%2Ftelemetry,%24SYS%2F%23&clientId=gonavi-desktop&qos=1&cleanSession=true&fetchWaitMs=4000";
-      case "kafka":
-        return "groupId=gonavi&mechanism=scram-sha-256&clientId=gonavi-desktop&startOffset=latest";
-      case "rabbitmq":
-        return "defaultQueue=orders.queue&exchange=events.topic&managementPathPrefix=/rabbitmq";
-      default:
-        return "key=value&another=value";
-    }
-  };
-
-  const buildUriFromValues = (values: any) => {
-    const type = String(values.type || "")
-      .trim()
-      .toLowerCase();
-    const defaultPort = getDefaultPortByType(type);
-    const host = String(values.host || "localhost").trim();
-    const port = Number(values.port || defaultPort);
-    const user = String(values.user || "").trim();
-    const password = String(values.password || "");
-    const database = String(values.database || "").trim();
-    const timeout = Number(values.timeout || 30);
-    const encodedAuth = user
-      ? `${encodeURIComponent(user)}${password ? `:${encodeURIComponent(password)}` : ""}@`
-      : "";
-
-    if (isMySQLCompatibleType(type)) {
-      const selectedOceanBaseProtocol =
-        type === "oceanbase"
-          ? normalizeOceanBaseProtocolValue(values.oceanBaseProtocol)
-          : "mysql";
-      const primary = toAddress(host, port, defaultPort);
-      const replicas =
-        selectedOceanBaseProtocol !== "oracle" && values.mysqlTopology === "replica"
-          ? normalizeAddressList(values.mysqlReplicaHosts, defaultPort)
-          : [];
-      const hosts = normalizeAddressList([primary, ...replicas], defaultPort);
-      const params = new URLSearchParams();
-      if (hosts.length > 1 || values.mysqlTopology === "replica") {
-        params.set("topology", "replica");
-      }
-      if (values.useSSL) {
-        const mode = String(values.sslMode || "preferred")
-          .trim()
-          .toLowerCase();
-        if (mode === "required") {
-          params.set("tls", "true");
-        } else if (mode === "skip-verify") {
-          params.set("tls", "skip-verify");
-        } else {
-          params.set("tls", "preferred");
-        }
-      }
-      appendSSLPathParamsForUri(params, type, values);
-      if (Number.isFinite(timeout) && timeout > 0) {
-        params.set("timeout", String(timeout));
-      }
-      mergeConnectionParams(params, values.connectionParams);
-      if (type === "oceanbase") {
-        params.set("protocol", selectedOceanBaseProtocol);
-      }
-      const dbPath = database ? `/${encodeURIComponent(database)}` : "/";
-      const query = params.toString();
-      const scheme =
-        type === "diros" ? "doris" : type === "starrocks" ? "starrocks" : type === "oceanbase" ? "oceanbase" : type === "goldendb" ? "goldendb" : "mysql";
-      return `${scheme}://${encodedAuth}${hosts.join(",")}${dbPath}${query ? `?${query}` : ""}`;
-    }
-
-    if (type === "kafka") {
-      const primary = toAddress(host, port, defaultPort);
-      const brokers =
-        values.kafkaTopology === "cluster"
-          ? normalizeAddressList(values.kafkaHosts, defaultPort)
-          : [];
-      const allBrokers = normalizeAddressList([primary, ...brokers], defaultPort);
-      const params = new URLSearchParams();
-      if (allBrokers.length > 1 || values.kafkaTopology === "cluster") {
-        params.set("topology", "cluster");
-      }
-      if (values.useSSL) {
-        const mode = String(values.sslMode || "preferred")
-          .trim()
-          .toLowerCase();
-        params.set("tls", "true");
-        if (mode === "skip-verify" || mode === "preferred") {
-          params.set("skip_verify", "true");
-        }
-        appendSSLPathParamsForUri(params, type, values);
-      }
-      if (Number.isFinite(timeout) && timeout > 0) {
-        params.set("timeout", String(timeout));
-      }
-      mergeConnectionParams(params, values.connectionParams);
-      const topicPath = database ? `/${encodeURIComponent(database)}` : "";
-      const query = params.toString();
-      return `kafka://${encodedAuth}${allBrokers.join(",")}${topicPath}${query ? `?${query}` : ""}`;
-    }
-
-    if (type === "mqtt") {
-      const primary = toAddress(host, port, defaultPort);
-      const brokers =
-        values.mqttTopology === "cluster"
-          ? normalizeAddressList(values.mqttHosts, defaultPort)
-          : [];
-      const allBrokers = normalizeAddressList([primary, ...brokers], defaultPort);
-      const params = new URLSearchParams();
-      if (allBrokers.length > 1 || values.mqttTopology === "cluster") {
-        params.set("topology", "cluster");
-      }
-      if (values.useSSL) {
-        const mode = String(values.sslMode || "preferred")
-          .trim()
-          .toLowerCase();
-        params.set("tls", "true");
-        if (mode === "skip-verify" || mode === "preferred") {
-          params.set("skip_verify", "true");
-        }
-        appendSSLPathParamsForUri(params, type, values);
-      }
-      if (Number.isFinite(timeout) && timeout > 0) {
-        params.set("timeout", String(timeout));
-      }
-      mergeConnectionParams(params, values.connectionParams);
-      const topicPath = database ? `/${encodeURIComponent(database)}` : "";
-      const query = params.toString();
-      return `mqtt://${encodedAuth}${allBrokers.join(",")}${topicPath}${query ? `?${query}` : ""}`;
-    }
-
-    if (type === "rocketmq") {
-      const primary = toAddress(host, port, defaultPort);
-      const nameservers =
-        values.rocketmqTopology === "cluster"
-          ? normalizeAddressList(values.rocketmqHosts, defaultPort)
-          : [];
-      const allNameServers = normalizeAddressList([primary, ...nameservers], defaultPort);
-      const params = new URLSearchParams();
-      if (allNameServers.length > 1 || values.rocketmqTopology === "cluster") {
-        params.set("topology", "cluster");
-      }
-      if (Number.isFinite(timeout) && timeout > 0) {
-        params.set("timeout", String(timeout));
-      }
-      mergeConnectionParams(params, values.connectionParams);
-      const topicPath = database ? `/${encodeURIComponent(database)}` : "";
-      const query = params.toString();
-      return `rocketmq://${encodedAuth}${allNameServers.join(",")}${topicPath}${query ? `?${query}` : ""}`;
-    }
-
-    if (type === "rabbitmq") {
-      const address = toAddress(host, port, defaultPort);
-      const params = new URLSearchParams();
-      if (values.useSSL) {
-        const mode = String(values.sslMode || "preferred")
-          .trim()
-          .toLowerCase();
-        params.set("tls", "true");
-        if (mode === "skip-verify" || mode === "preferred") {
-          params.set("skip_verify", "true");
-        }
-        appendSSLPathParamsForUri(params, type, values);
-      }
-      if (Number.isFinite(timeout) && timeout > 0) {
-        params.set("timeout", String(timeout));
-      }
-      mergeConnectionParams(params, values.connectionParams);
-      const vhostPath = database ? `/${encodeURIComponent(database)}` : "";
-      const query = params.toString();
-      return `rabbitmq://${encodedAuth}${address}${vhostPath}${query ? `?${query}` : ""}`;
-    }
-
-    if (type === "redis") {
-      return buildRedisUriFromValues(values);
-    }
-
-    if (isFileDatabaseType(type)) {
-      const pathText = normalizeFileDbPath(String(values.host || "").trim());
-      if (!pathText) {
-        return `${type}://`;
-      }
-      return `${type}://${encodeURI(pathText)}`;
-    }
-
-    if (type === "mongodb") {
-      const useSrv = !!values.mongoSrv;
-      const primaryAddress = useSrv
-        ? parseHostPort(host, 27017)?.host || host || "localhost"
-        : toAddress(host, port, 27017);
-      const extraNodes =
-        values.mongoTopology === "replica"
-          ? useSrv
-            ? normalizeMongoSrvHostList(values.mongoHosts, 27017)
-            : normalizeAddressList(values.mongoHosts, 27017)
-          : [];
-      const hosts = useSrv
-        ? normalizeMongoSrvHostList([primaryAddress, ...extraNodes], 27017)
-        : normalizeAddressList([primaryAddress, ...extraNodes], 27017);
-      const scheme = useSrv ? "mongodb+srv" : "mongodb";
-      const params = new URLSearchParams();
-      const authSource = String(
-        values.mongoAuthSource || database || "admin",
-      ).trim();
-      if (authSource) {
-        params.set("authSource", authSource);
-      }
-      const replicaSet = String(values.mongoReplicaSet || "").trim();
-      if (replicaSet) {
-        params.set("replicaSet", replicaSet);
-      }
-      const readPreference = String(values.mongoReadPreference || "").trim();
-      if (readPreference) {
-        params.set("readPreference", readPreference);
-      }
-      const authMechanism = String(values.mongoAuthMechanism || "").trim();
-      if (authMechanism) {
-        params.set("authMechanism", authMechanism);
-      }
-      if (values.useSSL) {
-        const mode = String(values.sslMode || "preferred")
-          .trim()
-          .toLowerCase();
-        params.set("tls", "true");
-        if (mode === "skip-verify" || mode === "preferred") {
-          params.set("tlsInsecure", "true");
-        } else {
-          params.delete("tlsInsecure");
-        }
-      }
-      appendSSLPathParamsForUri(params, type, values);
-      if (Number.isFinite(timeout) && timeout > 0) {
-        params.set("connectTimeoutMS", String(timeout * 1000));
-        params.set("serverSelectionTimeoutMS", String(timeout * 1000));
-      }
-      mergeConnectionParams(params, values.connectionParams);
-      const dbPath = database ? `/${encodeURIComponent(database)}` : "/";
-      const query = params.toString();
-      return `${scheme}://${encodedAuth}${hosts.join(",")}${dbPath}${query ? `?${query}` : ""}`;
-    }
-
-    const clickHouseProtocol =
-      type === "clickhouse"
-        ? normalizeClickHouseProtocolValue(values.clickHouseProtocol)
-        : "auto";
-    const scheme =
-      type === "gaussdb"
-        ? "gaussdb"
-        : type === "postgres"
-        ? "postgresql"
-        : type === "chroma" || type === "qdrant"
-          ? values.useSSL
-            ? "https"
-            : "http"
-        : type === "clickhouse" && clickHouseProtocol === "http"
-          ? values.useSSL
-            ? "https"
-            : "http"
-          : type;
-    const dbPath = database ? `/${encodeURIComponent(database)}` : "";
-    const params = new URLSearchParams();
-    if (supportsSSLForType(type) && values.useSSL) {
-      const mode = String(values.sslMode || "preferred")
-        .trim()
-        .toLowerCase();
-      if (isPostgresCompatibleSSLType(type)) {
-        params.set(
-          "sslmode",
-          mode === "skip-verify"
-            ? "require"
-            : String(values.sslCAPath || "").trim()
-              ? "verify-ca"
-              : "require",
-        );
-        appendSSLPathParamsForUri(params, type, values);
-      } else if (type === "sqlserver") {
-        params.set("encrypt", "true");
-        params.set(
-          "TrustServerCertificate",
-          mode === "skip-verify" || mode === "preferred" ? "true" : "false",
-        );
-        appendSSLPathParamsForUri(params, type, values);
-      } else if (type === "clickhouse") {
-        if (clickHouseProtocol === "http") {
-          if (mode === "skip-verify" || mode === "preferred") {
-            params.set("skip_verify", "true");
-          }
-        } else {
-          params.set("secure", "true");
-          if (mode === "skip-verify" || mode === "preferred") {
-            params.set("skip_verify", "true");
-          }
-        }
-        appendSSLPathParamsForUri(params, type, values);
-      } else if (type === "dameng") {
-        appendSSLPathParamsForUri(params, type, values);
-      } else if (type === "oracle") {
-        params.set("SSL", "TRUE");
-        params.set("SSL VERIFY", mode === "required" ? "TRUE" : "FALSE");
-      } else if (type === "tdengine") {
-        params.set("protocol", "wss");
-        if (mode === "skip-verify" || mode === "preferred") {
-          params.set("skip_verify", "true");
-        }
-      } else if (type === "chroma" || type === "qdrant") {
-        if (mode === "skip-verify" || mode === "preferred") {
-          params.set("skip_verify", "true");
-        }
-        appendSSLPathParamsForUri(params, type, values);
-      }
-    } else if (supportsSSLForType(type)) {
-      if (isPostgresCompatibleSSLType(type)) {
-        params.set("sslmode", "disable");
-      } else if (type === "sqlserver") {
-        params.set("encrypt", "disable");
-        params.set("TrustServerCertificate", "true");
-      } else if (type === "tdengine") {
-        params.set("protocol", "ws");
-      }
-    }
-    if (type === "clickhouse" && clickHouseProtocol !== "auto") {
-      params.set("protocol", clickHouseProtocol);
-    }
-    if (supportsConnectionParamsForType(type)) {
-      mergeConnectionParams(params, values.connectionParams);
-    }
-    const query = params.toString();
-    return `${scheme}://${encodedAuth}${toAddress(host, port, defaultPort)}${dbPath}${query ? `?${query}` : ""}`;
-  };
-
   const handleGenerateURI = () => {
     try {
       const values = form.getFieldsValue(true);
@@ -3065,151 +1601,6 @@ const ConnectionModal: React.FC<{
     };
   }, []);
 
-  const buildSavedConnectionInput = (config: ConnectionConfig, values: any) => {
-    const connectionId =
-      initialValues?.id || config.id || Date.now().toString();
-    const primaryDraft = resolveConnectionSecretDraft({
-      hasSecret: initialValues?.hasPrimaryPassword,
-      valueInput: config.password,
-      clearSecret:
-        clearSecrets.primaryPassword ||
-        (initialValues?.hasPrimaryPassword === true &&
-          String(config.password || "") === ""),
-      forceClear: values.type === "mongodb" && values.savePassword === false,
-    });
-    const sshDraft = resolveConnectionSecretDraft({
-      hasSecret: initialValues?.hasSSHPassword,
-      valueInput: config.ssh?.password,
-      clearSecret: clearSecrets.sshPassword,
-      forceClear: !config.useSSH,
-    });
-    const proxyDraft = resolveConnectionSecretDraft({
-      hasSecret: initialValues?.hasProxyPassword,
-      valueInput: config.proxy?.password,
-      clearSecret: clearSecrets.proxyPassword,
-      forceClear: !config.useProxy,
-    });
-    const httpTunnelDraft = resolveConnectionSecretDraft({
-      hasSecret: initialValues?.hasHttpTunnelPassword,
-      valueInput: config.httpTunnel?.password,
-      clearSecret: clearSecrets.httpTunnelPassword,
-      forceClear: !config.useHttpTunnel,
-    });
-    const mysqlReplicaEnabled =
-      isMySQLCompatibleType(config.type) && config.topology === "replica";
-    const mysqlReplicaDraft = resolveConnectionSecretDraft({
-      hasSecret: initialValues?.hasMySQLReplicaPassword,
-      valueInput: config.mysqlReplicaPassword,
-      clearSecret: clearSecrets.mysqlReplicaPassword,
-      forceClear: !mysqlReplicaEnabled,
-    });
-    const mongoReplicaEnabled =
-      config.type === "mongodb" &&
-      config.topology === "replica" &&
-      values.savePassword !== false;
-    const mongoReplicaDraft = resolveConnectionSecretDraft({
-      hasSecret: initialValues?.hasMongoReplicaPassword,
-      valueInput: config.mongoReplicaPassword,
-      clearSecret: clearSecrets.mongoReplicaPassword,
-      forceClear: !mongoReplicaEnabled,
-    });
-    const redisSentinelEnabled =
-      config.type === "redis" &&
-      config.topology === "sentinel" &&
-      values.savePassword !== false;
-    const redisSentinelDraft = resolveConnectionSecretDraft({
-      hasSecret: initialValues?.hasRedisSentinelPassword,
-      valueInput: config.redisSentinelPassword,
-      clearSecret: clearSecrets.redisSentinelPassword,
-      forceClear: !redisSentinelEnabled,
-    });
-    const opaqueUriDraft = resolveConnectionSecretDraft({
-      hasSecret: initialValues?.hasOpaqueURI,
-      valueInput: config.uri,
-      clearSecret: clearSecrets.opaqueURI,
-      forceClear: values.type === "custom",
-      trimInput: true,
-    });
-    const opaqueDsnDraft = resolveConnectionSecretDraft({
-      hasSecret: initialValues?.hasOpaqueDSN,
-      valueInput: config.dsn,
-      clearSecret: clearSecrets.opaqueDSN,
-      forceClear: values.type !== "custom",
-      trimInput: true,
-    });
-    const isRedisType = values.type === "redis";
-    const displayHost = String(
-      (config as any).host || values.host || "",
-    ).trim();
-    const nextName =
-      values.name ||
-      (isFileDatabaseType(values.type)
-        ? values.type === "duckdb"
-          ? "DuckDB DB"
-          : "SQLite DB"
-        : values.type === "redis"
-          ? `Redis ${displayHost}`
-          : displayHost);
-
-    return {
-      id: connectionId,
-      name: nextName,
-      config: {
-        ...config,
-        id: connectionId,
-        password: primaryDraft.value,
-        ssh: {
-          ...(config.ssh || {
-            host: "",
-            port: 22,
-            user: "",
-            password: "",
-            keyPath: "",
-          }),
-          password: sshDraft.value,
-        },
-        proxy: {
-          ...(config.proxy || {
-            type: "socks5",
-            host: "",
-            port: 1080,
-            user: "",
-            password: "",
-          }),
-          password: proxyDraft.value,
-        },
-        httpTunnel: {
-          ...(config.httpTunnel || {
-            host: "",
-            port: 8080,
-            user: "",
-            password: "",
-          }),
-          password: httpTunnelDraft.value,
-        },
-        uri: opaqueUriDraft.value,
-        dsn: opaqueDsnDraft.value,
-        mysqlReplicaPassword: mysqlReplicaDraft.value,
-        mongoReplicaPassword: mongoReplicaDraft.value,
-        redisSentinelPassword: redisSentinelDraft.value,
-      },
-      includeDatabases: values.includeDatabases,
-      includeRedisDatabases: isRedisType
-        ? values.includeRedisDatabases
-        : undefined,
-      iconType: customIconType || "",
-      iconColor: customIconColor || "",
-      clearPrimaryPassword: primaryDraft.clearStoredSecret,
-      clearSSHPassword: sshDraft.clearStoredSecret,
-      clearProxyPassword: proxyDraft.clearStoredSecret,
-      clearHttpTunnelPassword: httpTunnelDraft.clearStoredSecret,
-      clearMySQLReplicaPassword: mysqlReplicaDraft.clearStoredSecret,
-      clearMongoReplicaPassword: mongoReplicaDraft.clearStoredSecret,
-      clearRedisSentinelPassword: redisSentinelDraft.clearStoredSecret,
-      clearOpaqueURI: opaqueUriDraft.clearStoredSecret,
-      clearOpaqueDSN: opaqueDsnDraft.clearStoredSecret,
-    };
-  };
   const handleOk = async () => {
     try {
       await form.validateFields();
@@ -3228,8 +1619,20 @@ const ConnectionModal: React.FC<{
       }
       setLoading(true);
 
-      const config = await buildConfig(values, true);
-      const payload = buildSavedConnectionInput(config, values);
+      const config = await buildConnectionConfig({
+        values,
+        forPersist: true,
+        initialValues,
+        translate: t,
+      });
+      const payload = buildSavedConnectionInput({
+        config,
+        values,
+        initialValues,
+        clearSecrets,
+        customIconType,
+        customIconColor,
+      });
       const backendApp = (window as any).go?.app?.App;
       const savedConnection = await backendApp?.SaveConnection?.(payload);
       if (!savedConnection) {
@@ -3308,71 +1711,6 @@ const ConnectionModal: React.FC<{
     }
   };
 
-  const getBlockingSecretClearMessage = (values: any): string | null => {
-    if (
-      clearSecrets.primaryPassword &&
-      values.type !== "custom" &&
-      !isFileDatabaseType(values.type) &&
-      String(values.password ?? "") === ""
-    ) {
-      return t("connection.modal.secret.blocking.primary");
-    }
-    if (
-      clearSecrets.sshPassword &&
-      values.useSSH &&
-      String(values.sshPassword ?? "") === ""
-    ) {
-      return t("connection.modal.secret.blocking.ssh");
-    }
-    if (
-      clearSecrets.proxyPassword &&
-      values.useProxy &&
-      !values.useHttpTunnel &&
-      String(values.proxyPassword ?? "") === ""
-    ) {
-      return t("connection.modal.secret.blocking.proxy");
-    }
-    if (
-      clearSecrets.httpTunnelPassword &&
-      values.useHttpTunnel &&
-      String(values.httpTunnelPassword ?? "") === ""
-    ) {
-      return t("connection.modal.secret.blocking.httpTunnel");
-    }
-    if (
-      clearSecrets.mysqlReplicaPassword &&
-      isMySQLCompatibleType(values.type) &&
-      values.mysqlTopology === "replica" &&
-      String(values.mysqlReplicaPassword ?? "") === ""
-    ) {
-      return t("connection.modal.secret.blocking.mysqlReplica");
-    }
-    if (
-      clearSecrets.mongoReplicaPassword &&
-      values.type === "mongodb" &&
-      values.mongoTopology === "replica" &&
-      String(values.mongoReplicaPassword ?? "") === ""
-    ) {
-      return t("connection.modal.secret.blocking.mongoReplica");
-    }
-    if (
-      clearSecrets.redisSentinelPassword &&
-      values.type === "redis" &&
-      values.redisTopology === "sentinel" &&
-      String(values.redisSentinelPassword ?? "") === ""
-    ) {
-      return t("connection.modal.secret.blocking.redis_sentinel");
-    }
-    if (
-      values.type === "mongodb" &&
-      values.savePassword === false &&
-      initialValues?.hasPrimaryPassword &&
-      String(values.password ?? "") === ""
-    ) {
-      return t("connection.modal.secret.blocking.mongoPrimary");
-    }
-    return null;
-  };
   const applyTestFailureFeedback = ({
     kind,
     reason,
@@ -3413,7 +1751,12 @@ const ConnectionModal: React.FC<{
         );
         return;
       }
-      const blockingSecretClearMessage = getBlockingSecretClearMessage(values);
+      const blockingSecretClearMessage = getBlockingSecretClearMessage({
+        values,
+        clearSecrets,
+        initialValues,
+        translate: t,
+      });
       if (blockingSecretClearMessage) {
         applyTestFailureFeedback({
           kind: "secret_blocked",
@@ -3424,7 +1767,12 @@ const ConnectionModal: React.FC<{
       }
       setLoading(true);
       setTestResult(null);
-      const config = await buildConfig(values, false);
+      const config = await buildConnectionConfig({
+        values,
+        forPersist: false,
+        initialValues,
+        translate: t,
+      });
       if (initialValues?.id) {
         config.id = initialValues.id;
       }
@@ -3563,12 +1911,22 @@ const ConnectionModal: React.FC<{
       await form.validateFields();
       const values = form.getFieldsValue(true);
       setDiscoveringMembers(true);
-      const blockingSecretClearMessage = getBlockingSecretClearMessage(values);
+      const blockingSecretClearMessage = getBlockingSecretClearMessage({
+        values,
+        clearSecrets,
+        initialValues,
+        translate: t,
+      });
       if (blockingSecretClearMessage) {
         message.error(blockingSecretClearMessage);
         return;
       }
-      const config = await buildConfig(values, false);
+      const config = await buildConnectionConfig({
+        values,
+        forPersist: false,
+        initialValues,
+        translate: t,
+      });
       if (initialValues?.id) {
         config.id = initialValues.id;
       }
@@ -3619,504 +1977,6 @@ const ConnectionModal: React.FC<{
     }
   };
 
-  const buildConfig = async (
-    values: any,
-    forPersist: boolean,
-  ): Promise<ConnectionConfig> => {
-    const mergedValues = { ...values };
-    if (
-      String(mergedValues.type || "")
-        .trim()
-        .toLowerCase() === "jvm"
-    ) {
-      if (
-        hasUnsupportedJVMEditableModes({
-          allowedModes: mergedValues.jvmAllowedModes,
-          preferredMode: mergedValues.jvmPreferredMode,
-        })
-      ) {
-        throw new Error(t("connection.modal.jvm.unsupportedMode.saveTest"));
-      }
-      if (
-        hasUnsupportedJVMDiagnosticTransport(
-          mergedValues.jvmDiagnosticTransport,
-        )
-      ) {
-        throw new Error(
-          t("connection.modal.jvm.unsupportedTransport.saveTest"),
-        );
-      }
-      const existingDiagnostic = initialValues?.config?.jvm?.diagnostic;
-      if (
-        mergedValues.jvmDiagnosticEnabled === undefined &&
-        existingDiagnostic?.enabled !== undefined
-      ) {
-        mergedValues.jvmDiagnosticEnabled = existingDiagnostic.enabled;
-      }
-      if (
-        String(mergedValues.jvmDiagnosticTransport || "").trim() === "" &&
-        existingDiagnostic?.transport
-      ) {
-        mergedValues.jvmDiagnosticTransport = existingDiagnostic.transport;
-      }
-      if (
-        String(mergedValues.jvmDiagnosticBaseUrl || "").trim() === "" &&
-        existingDiagnostic?.baseUrl
-      ) {
-        mergedValues.jvmDiagnosticBaseUrl = existingDiagnostic.baseUrl;
-      }
-      if (
-        String(mergedValues.jvmDiagnosticTargetId || "").trim() === "" &&
-        existingDiagnostic?.targetId
-      ) {
-        mergedValues.jvmDiagnosticTargetId = existingDiagnostic.targetId;
-      }
-      if (
-        String(mergedValues.jvmDiagnosticApiKey || "").trim() === "" &&
-        existingDiagnostic?.apiKey
-      ) {
-        mergedValues.jvmDiagnosticApiKey = existingDiagnostic.apiKey;
-      }
-      if (
-        mergedValues.jvmDiagnosticAllowObserveCommands === undefined &&
-        existingDiagnostic?.allowObserveCommands !== undefined
-      ) {
-        mergedValues.jvmDiagnosticAllowObserveCommands =
-          existingDiagnostic.allowObserveCommands;
-      }
-      if (
-        mergedValues.jvmDiagnosticAllowTraceCommands === undefined &&
-        existingDiagnostic?.allowTraceCommands !== undefined
-      ) {
-        mergedValues.jvmDiagnosticAllowTraceCommands =
-          existingDiagnostic.allowTraceCommands;
-      }
-      if (
-        mergedValues.jvmDiagnosticAllowMutatingCommands === undefined &&
-        existingDiagnostic?.allowMutatingCommands !== undefined
-      ) {
-        mergedValues.jvmDiagnosticAllowMutatingCommands =
-          existingDiagnostic.allowMutatingCommands;
-      }
-      if (
-        (mergedValues.jvmDiagnosticTimeoutSeconds === undefined ||
-          mergedValues.jvmDiagnosticTimeoutSeconds === null ||
-          mergedValues.jvmDiagnosticTimeoutSeconds === "") &&
-        Number(existingDiagnostic?.timeoutSeconds) > 0
-      ) {
-        mergedValues.jvmDiagnosticTimeoutSeconds = Number(
-          existingDiagnostic?.timeoutSeconds,
-        );
-      }
-      const resolvedJvmAllowedModes = normalizeEditableJVMModes(
-        mergedValues.jvmAllowedModes,
-      );
-      const resolvedJvmTimeout = Number(mergedValues.timeout || 30);
-      const preferredJvmMode = String(mergedValues.jvmPreferredMode || "")
-        .trim()
-        .toLowerCase();
-      const resolvedJvmPreferredMode =
-        resolvedJvmAllowedModes.find((mode) => mode === preferredJvmMode) ||
-        resolvedJvmAllowedModes[0];
-      return buildJVMConnectionConfig({
-        ...buildDefaultJVMConnectionValues(),
-        ...mergedValues,
-        jvmAllowedModes: resolvedJvmAllowedModes,
-        jvmPreferredMode: resolvedJvmPreferredMode,
-        jvmEndpointEnabled: resolvedJvmAllowedModes.includes("endpoint"),
-        jvmAgentEnabled: resolvedJvmAllowedModes.includes("agent"),
-        timeout: resolvedJvmTimeout,
-        jvmEndpointTimeoutSeconds: resolvedJvmTimeout,
-      });
-    }
-    const parsedUriValues = parseUriToValues(
-      mergedValues.uri,
-      mergedValues.type,
-    );
-    const isEmptyField = (value: unknown) =>
-      value === undefined ||
-      value === null ||
-      value === "" ||
-      value === 0 ||
-      (Array.isArray(value) && value.length === 0);
-    if (parsedUriValues) {
-      Object.entries(parsedUriValues).forEach(([key, value]) => {
-        if (
-          key === "clickHouseProtocol" &&
-          normalizeClickHouseProtocolValue((mergedValues as any)[key]) ===
-            "auto" &&
-          normalizeClickHouseProtocolValue(value) !== "auto"
-        ) {
-          (mergedValues as any)[key] = value;
-          return;
-        }
-        if (isEmptyField((mergedValues as any)[key])) {
-          (mergedValues as any)[key] = value;
-        }
-      });
-    }
-
-    const type = String(mergedValues.type || "").toLowerCase();
-    const defaultPort = getDefaultPortByType(type);
-    const selectedOceanBaseProtocol =
-      type === "oceanbase"
-        ? normalizeOceanBaseProtocolValue(mergedValues.oceanBaseProtocol)
-        : "mysql";
-    if (type === "clickhouse") {
-      const requestedProtocol = normalizeClickHouseProtocolValue(
-        mergedValues.clickHouseProtocol,
-      );
-      const hostSchemeValues = parseClickHouseHTTPUriToValues(
-        mergedValues.host,
-        Number(mergedValues.port || defaultPort),
-      );
-      if (hostSchemeValues) {
-        mergedValues.host = hostSchemeValues.host;
-        mergedValues.port = hostSchemeValues.port;
-        if (requestedProtocol !== "native") {
-          mergedValues.clickHouseProtocol = "http";
-          mergedValues.useSSL = hostSchemeValues.useSSL;
-          mergedValues.sslMode = hostSchemeValues.sslMode;
-        } else {
-          mergedValues.clickHouseProtocol = "native";
-        }
-        if (isEmptyField(mergedValues.user)) {
-          mergedValues.user = hostSchemeValues.user;
-        }
-        if (isEmptyField(mergedValues.password)) {
-          mergedValues.password = hostSchemeValues.password;
-        }
-        if (isEmptyField(mergedValues.database)) {
-          mergedValues.database = hostSchemeValues.database;
-        }
-      }
-    }
-    const isFileDbType = isFileDatabaseType(type);
-    const sslCapableType = supportsSSLForType(type);
-
-    // Redis 默认不展示用户名字段；若 URI 可解析则以 URI 为准覆盖 user，
-    // 同时清理历史默认值 root，避免 go-redis 发送 ACL AUTH(user, pass) 导致 WRONGPASS。
-    if (type === "redis") {
-      if (
-        parsedUriValues &&
-        Object.prototype.hasOwnProperty.call(parsedUriValues, "user")
-      ) {
-        mergedValues.user = String((parsedUriValues as any).user || "");
-      } else if (String(mergedValues.user || "").trim() === "root") {
-        mergedValues.user = "";
-      }
-    }
-    const sslModeRaw = String(mergedValues.sslMode || "preferred")
-      .trim()
-      .toLowerCase();
-    const sslMode: "preferred" | "required" | "skip-verify" | "disable" =
-      sslModeRaw === "required"
-        ? "required"
-        : sslModeRaw === "skip-verify"
-          ? "skip-verify"
-          : sslModeRaw === "disable"
-            ? "disable"
-            : "preferred";
-    const effectiveUseSSL = sslCapableType && !!mergedValues.useSSL;
-    const sslCAPath = sslCapableType
-      ? String(mergedValues.sslCAPath || "").trim()
-      : "";
-    const sslCertPath = sslCapableType
-      ? String(mergedValues.sslCertPath || "").trim()
-      : "";
-    const sslKeyPath = sslCapableType
-      ? String(mergedValues.sslKeyPath || "").trim()
-      : "";
-    if (type === "dameng" && effectiveUseSSL && (!sslCertPath || !sslKeyPath)) {
-      throw new Error(t("connection.modal.validation.ssl.damengRequired"));
-    }
-    if (effectiveUseSSL && supportsSSLClientCertificateForType(type) && (!!sslCertPath !== !!sslKeyPath)) {
-      throw new Error(t("connection.modal.validation.ssl.clientPairRequired"));
-    }
-
-    let primaryHost = "localhost";
-    let primaryPort = defaultPort;
-    if (isFileDbType) {
-      // 文件型数据库（sqlite/duckdb）这里的 host 即数据库文件路径，不应参与 host:port 拼接与解析。
-      primaryHost = normalizeFileDbPath(String(mergedValues.host || "").trim());
-      primaryPort = 0;
-    } else {
-      const parsedPrimary = parseHostPort(
-        toAddress(
-          mergedValues.host || "localhost",
-          Number(mergedValues.port || defaultPort),
-          defaultPort,
-        ),
-        defaultPort,
-      );
-      primaryHost = parsedPrimary?.host || "localhost";
-      primaryPort = parsedPrimary?.port || defaultPort;
-    }
-
-    let hosts: string[] = [];
-    let topology: "single" | "replica" | "cluster" | "sentinel" | undefined;
-    let replicaSet = "";
-    let authSource = "";
-    let readPreference = "";
-    let mysqlReplicaUser = "";
-    let mysqlReplicaPassword = "";
-    let mongoSrvEnabled = false;
-    let mongoAuthMechanism = "";
-    let mongoReplicaUser = "";
-    let mongoReplicaPassword = "";
-    let redisSentinelMaster = "";
-    let redisSentinelUser = "";
-    let redisSentinelPassword = "";
-    const savePassword =
-      type === "mongodb" ? mergedValues.savePassword !== false : true;
-
-    if (isMySQLCompatibleType(type) && selectedOceanBaseProtocol !== "oracle") {
-      const replicas =
-        mergedValues.mysqlTopology === "replica"
-          ? normalizeAddressList(mergedValues.mysqlReplicaHosts, defaultPort)
-          : [];
-      const allHosts = normalizeAddressList(
-        [`${primaryHost}:${primaryPort}`, ...replicas],
-        defaultPort,
-      );
-      if (mergedValues.mysqlTopology === "replica" || allHosts.length > 1) {
-        hosts = allHosts;
-        topology = "replica";
-        mysqlReplicaUser = String(mergedValues.mysqlReplicaUser || "").trim();
-        mysqlReplicaPassword = String(mergedValues.mysqlReplicaPassword || "");
-      } else {
-        topology = "single";
-      }
-    }
-
-    if (type === "kafka") {
-      const brokers =
-        mergedValues.kafkaTopology === "cluster"
-          ? normalizeAddressList(mergedValues.kafkaHosts, defaultPort)
-          : [];
-      const allHosts = normalizeAddressList(
-        [`${primaryHost}:${primaryPort}`, ...brokers],
-        defaultPort,
-      );
-      if (mergedValues.kafkaTopology === "cluster" || allHosts.length > 1) {
-        hosts = allHosts;
-        topology = "cluster";
-      } else {
-        topology = "single";
-      }
-    }
-
-    if (type === "mqtt") {
-      const brokers =
-        mergedValues.mqttTopology === "cluster"
-          ? normalizeAddressList(mergedValues.mqttHosts, defaultPort)
-          : [];
-      const allHosts = normalizeAddressList(
-        [`${primaryHost}:${primaryPort}`, ...brokers],
-        defaultPort,
-      );
-      if (mergedValues.mqttTopology === "cluster" || allHosts.length > 1) {
-        hosts = allHosts;
-        topology = "cluster";
-      } else {
-        topology = "single";
-      }
-    }
-
-    if (type === "rocketmq") {
-      const nameservers =
-        mergedValues.rocketmqTopology === "cluster"
-          ? normalizeAddressList(mergedValues.rocketmqHosts, defaultPort)
-          : [];
-      const allHosts = normalizeAddressList(
-        [`${primaryHost}:${primaryPort}`, ...nameservers],
-        defaultPort,
-      );
-      if (mergedValues.rocketmqTopology === "cluster" || allHosts.length > 1) {
-        hosts = allHosts;
-        topology = "cluster";
-      } else {
-        topology = "single";
-      }
-    }
-
-    if (type === "mongodb") {
-      mongoSrvEnabled = !!mergedValues.mongoSrv;
-      const extraHosts =
-        mergedValues.mongoTopology === "replica"
-          ? mongoSrvEnabled
-            ? normalizeMongoSrvHostList(mergedValues.mongoHosts, defaultPort)
-            : normalizeAddressList(mergedValues.mongoHosts, defaultPort)
-          : [];
-      const primarySeed = mongoSrvEnabled
-        ? primaryHost
-        : `${primaryHost}:${primaryPort}`;
-      const allHosts = mongoSrvEnabled
-        ? normalizeMongoSrvHostList([primarySeed, ...extraHosts], defaultPort)
-        : normalizeAddressList([primarySeed, ...extraHosts], defaultPort);
-      if (
-        mergedValues.mongoTopology === "replica" ||
-        allHosts.length > 1 ||
-        mergedValues.mongoReplicaSet
-      ) {
-        hosts = allHosts;
-        topology = "replica";
-        mongoReplicaUser = String(mergedValues.mongoReplicaUser || "").trim();
-        mongoReplicaPassword = String(mergedValues.mongoReplicaPassword || "");
-      } else {
-        topology = "single";
-      }
-      replicaSet = String(mergedValues.mongoReplicaSet || "").trim();
-      authSource = String(
-        mergedValues.mongoAuthSource || mergedValues.database || "admin",
-      ).trim();
-      readPreference = String(
-        mergedValues.mongoReadPreference || "primary",
-      ).trim();
-      mongoAuthMechanism = String(mergedValues.mongoAuthMechanism || "")
-        .trim()
-        .toUpperCase();
-    }
-
-    if (type === "redis") {
-      const redisDraft = resolveRedisConfigDraft(
-        mergedValues,
-        primaryHost,
-        primaryPort,
-        defaultPort,
-      );
-      primaryPort = redisDraft.primaryPort;
-      hosts = redisDraft.hosts;
-      topology = redisDraft.topology;
-      redisSentinelMaster = redisDraft.redisSentinelMaster;
-      redisSentinelUser = redisDraft.redisSentinelUser;
-      redisSentinelPassword = redisDraft.redisSentinelPassword;
-      mergedValues.redisDB = redisDraft.redisDB;
-    }
-
-    const sshConfig = mergedValues.useSSH
-      ? {
-          host: mergedValues.sshHost,
-          port: Number(mergedValues.sshPort),
-          user: mergedValues.sshUser,
-          password: mergedValues.sshPassword || "",
-          keyPath: mergedValues.sshKeyPath || "",
-        }
-      : { host: "", port: 22, user: "", password: "", keyPath: "" };
-    const effectiveUseHttpTunnel =
-      !isFileDbType && !!mergedValues.useHttpTunnel;
-    const effectiveUseProxy =
-      !isFileDbType && !!mergedValues.useProxy && !effectiveUseHttpTunnel;
-    const proxyTypeRaw = String(
-      mergedValues.proxyType || "socks5",
-    ).toLowerCase();
-    const proxyType: "socks5" | "http" =
-      proxyTypeRaw === "http" ? "http" : "socks5";
-    const proxyConfig: NonNullable<ConnectionConfig["proxy"]> =
-      effectiveUseProxy
-        ? {
-            type: proxyType,
-            host: String(mergedValues.proxyHost || "").trim(),
-            port: Number(
-              mergedValues.proxyPort || (proxyTypeRaw === "http" ? 8080 : 1080),
-            ),
-            user: String(mergedValues.proxyUser || "").trim(),
-            password: mergedValues.proxyPassword || "",
-          }
-        : {
-            type: "socks5",
-            host: "",
-            port: 1080,
-            user: "",
-            password: "",
-          };
-    const httpTunnelConfig: NonNullable<ConnectionConfig["httpTunnel"]> =
-      effectiveUseHttpTunnel
-        ? {
-            host: String(mergedValues.httpTunnelHost || "").trim(),
-            port: Number(mergedValues.httpTunnelPort || 8080),
-            user: String(mergedValues.httpTunnelUser || "").trim(),
-            password: mergedValues.httpTunnelPassword || "",
-          }
-        : {
-            host: "",
-            port: 8080,
-            user: "",
-            password: "",
-          };
-    if (effectiveUseHttpTunnel) {
-      if (!httpTunnelConfig.host) {
-        throw new Error(t("connection.modal.validation.httpTunnel.hostRequired"));
-      }
-      if (
-        !Number.isFinite(httpTunnelConfig.port) ||
-        httpTunnelConfig.port <= 0 ||
-        httpTunnelConfig.port > 65535
-      ) {
-        throw new Error(t("connection.modal.validation.httpTunnel.portRange"));
-      }
-    }
-
-    const keepPassword = !forPersist || savePassword;
-    const normalizedConnectionParams = supportsConnectionParamsForType(type)
-      ? type === "oceanbase"
-        ? normalizeOceanBaseConnectionParamsText(
-            mergedValues.connectionParams,
-            selectedOceanBaseProtocol,
-          )
-        : normalizeConnectionParamsText(mergedValues.connectionParams)
-      : "";
-
-    return {
-      type: mergedValues.type,
-      host: primaryHost,
-      port: Number(primaryPort || 0),
-      user: mergedValues.user || "",
-      password: keepPassword ? mergedValues.password || "" : "",
-      savePassword: savePassword,
-      database: mergedValues.database || "",
-      useSSL: effectiveUseSSL,
-      sslMode: effectiveUseSSL ? sslMode : "disable",
-      sslCAPath: sslCAPath,
-      sslCertPath: sslCertPath,
-      sslKeyPath: sslKeyPath,
-      useSSH: !!mergedValues.useSSH,
-      ssh: sshConfig,
-      useProxy: effectiveUseProxy,
-      proxy: proxyConfig,
-      useHttpTunnel: effectiveUseHttpTunnel,
-      httpTunnel: httpTunnelConfig,
-      driver: mergedValues.driver,
-      dsn: mergedValues.dsn,
-      connectionParams: normalizedConnectionParams,
-      timeout: Number(mergedValues.timeout || 30),
-      redisDB: Number.isFinite(Number(mergedValues.redisDB))
-        ? Math.max(0, Math.trunc(Number(mergedValues.redisDB)))
-        : 0,
-      redisSentinelMaster: redisSentinelMaster,
-      redisSentinelUser: redisSentinelUser,
-      redisSentinelPassword: keepPassword ? redisSentinelPassword : "",
-      uri: String(mergedValues.uri || "").trim(),
-      clickHouseProtocol:
-        type === "clickhouse"
-          ? normalizeClickHouseProtocolValue(mergedValues.clickHouseProtocol)
-          : undefined,
-      oceanBaseProtocol:
-        type === "oceanbase" ? selectedOceanBaseProtocol : undefined,
-      hosts: hosts,
-      topology: topology,
-      mysqlReplicaUser: mysqlReplicaUser,
-      mysqlReplicaPassword: keepPassword ? mysqlReplicaPassword : "",
-      replicaSet: replicaSet,
-      authSource: authSource,
-      readPreference: readPreference,
-      mongoSrv: mongoSrvEnabled,
-      mongoAuthMechanism: mongoAuthMechanism,
-      mongoReplicaUser: mongoReplicaUser,
-      mongoReplicaPassword: keepPassword ? mongoReplicaPassword : "",
-    };
-  };
-
   const handleTypeSelect = (type: string) => {
     const normalized = normalizeDriverType(type);
     const snapshot = driverStatusMap[normalized];
@@ -4549,3670 +2409,111 @@ const ConnectionModal: React.FC<{
     </div>
   );
 
-  const renderStep2 = () => {
-    const baseInfoSection = (
-      <div style={modalInnerSectionStyle}>
-        <div
-          style={{
-            marginBottom: 12,
-            color: darkMode ? "#f5f7ff" : "#162033",
-            fontSize: 14,
-            fontWeight: 700,
-          }}
-        >
-          {t("connection.modal.config.basic.title")}
-        </div>
-        <div style={{ ...modalMutedTextStyle, marginBottom: 16 }}>
-          {t("connection.modal.config.basic.description")}
-        </div>
-
-        <div style={{ display: "grid", gap: 16 }}>
-          {renderConfigSectionCard({
-            sectionKey: "identity",
-            icon: <ApiOutlined />,
-            badge: (
-              <Tag>
-                {getConnectionConfigLayoutKindLabel(connectionConfigLayout.kind)}
-              </Tag>
-            ),
-            children: (
-              <Form.Item
-                name="name"
-                label={t("connection.modal.field.name.label")}
-                style={{ marginBottom: 0 }}
-              >
-                <Input
-                  {...noAutoCapInputProps}
-                  placeholder={
-                    isJVM
-                      ? t("connection.modal.field.name.placeholder.jvm")
-                      : t("connection.modal.field.name.placeholder.default")
-                  }
-                />
-              </Form.Item>
-            ),
-          })}
-
-          {!isCustom &&
-            !isJVM &&
-            renderConfigSectionCard({
-              sectionKey: "uri",
-              icon: <LinkOutlined />,
-              children: (
-                <>
-                  <Form.Item
-                    name="uri"
-                    label={t("connection.modal.uri.label")}
-                    help={t("connection.modal.uri.help")}
-                  >
-                    <Input.TextArea
-                      {...noAutoCapInputProps}
-                      rows={3}
-                      placeholder={getUriPlaceholder()}
-                    />
-                  </Form.Item>
-                  {supportsConnectionParams && (
-                    <Form.Item
-                      name="connectionParams"
-                      label={t("connection.modal.connectionParams.label")}
-                      help={t("connection.modal.connectionParams.help")}
-                    >
-                      <Input.TextArea
-                        {...noAutoCapInputProps}
-                        rows={2}
-                        placeholder={getConnectionParamsPlaceholder()}
-                      />
-                    </Form.Item>
-                  )}
-                  <Space
-                    size={8}
-                    style={{ marginBottom: uriFeedback ? 12 : 16 }}
-                    wrap
-                  >
-                    <Button onClick={handleGenerateURI}>
-                      {t("connection.modal.uri.action.generate")}
-                    </Button>
-                    <Button onClick={handleParseURI}>
-                      {t("connection.modal.uri.action.parse")}
-                    </Button>
-                    <Button onClick={handleCopyURI}>
-                      {t("connection.modal.uri.action.copy")}
-                    </Button>
-                  </Space>
-                  {uriFeedback && (
-                    <Alert
-                      showIcon
-                      closable
-                      type={uriFeedback.type}
-                      message={resolvedUriFeedbackMessage}
-                      onClose={() => setUriFeedback(null)}
-                      style={{ marginBottom: 16 }}
-                    />
-                  )}
-                  {renderStoredSecretControls({
-                    fieldName: "uri",
-                    clearKey: "opaqueURI",
-                    hasStoredSecret: initialValues?.hasOpaqueURI,
-                    clearLabel: t("connection.modal.uri.stored.clear"),
-                    description: t("connection.modal.uri.stored.description"),
-                  })}
-                </>
-              ),
-            })}
-
-          {isCustom ? (
-            <>
-              {renderConfigSectionCard({
-                sectionKey: "customDriver",
-                icon: <CodeOutlined />,
-                children: (
-                  <Form.Item
-                    name="driver"
-                    label={t("connection.modal.field.driver.label")}
-                    rules={[
-                      {
-                        required: true,
-                        message: t("connection.modal.field.driver.required"),
-                      },
-                    ]}
-                    help={getCustomConnectionDriverHelp()}
-                    style={{ marginBottom: 0 }}
-                  >
-                    <Input
-                      {...noAutoCapInputProps}
-                      placeholder={t("connection.modal.field.driver.placeholder")}
-                    />
-                  </Form.Item>
-                ),
-              })}
-              {renderConfigSectionCard({
-                sectionKey: "customDsn",
-                icon: <FileTextOutlined />,
-                children: (
-                  <>
-                    <Form.Item
-                      name="dsn"
-                      label={t("connection.modal.field.dsn.label")}
-                      rules={[createCustomDsnRule()]}
-                    >
-                      <Input.TextArea
-                        {...noAutoCapInputProps}
-                        rows={4}
-                        placeholder={t("connection.modal.field.dsn.placeholder")}
-                      />
-                    </Form.Item>
-                    {renderStoredSecretControls({
-                      fieldName: "dsn",
-                      clearKey: "opaqueDSN",
-                      hasStoredSecret: initialValues?.hasOpaqueDSN,
-                      clearLabel: t("connection.modal.field.dsn.clearSaved"),
-                      description: t(
-                        "connection.modal.field.dsn.savedDescription",
-                      ),
-                    })}
-                  </>
-                ),
-              })}
-            </>
-          ) : isJVM ? (
-          <>
-            {unsupportedJvmModeMessage && (
-              <Alert
-                type="warning"
-                showIcon
-                style={{ marginBottom: 16 }}
-                message={t("connection.modal.jvm.unsupportedMode.alert")}
-                description={unsupportedJvmModeMessage}
-              />
-            )}
-            <div style={{ display: "grid", gap: 16 }}>
-              <div style={jvmSectionCardStyle()}>
-                {renderJvmSectionHeader(
-                  <GatewayOutlined />,
-                  t("connection.modal.jvm.target.title"),
-                  t("connection.modal.jvm.target.description"),
-                )}
-                <div
-                  style={{
-                    display: "grid",
-                    gridTemplateColumns: "minmax(0, 1fr) 120px",
-                    gap: 16,
-                    alignItems: "start",
-                  }}
-                >
-                  <Form.Item
-                    name="host"
-                    label={t("connection.modal.jvm.host.label")}
-                    rules={[
-                      {
-                        required: true,
-                        message: t("connection.modal.jvm.host.required"),
-                      },
-                    ]}
-                    style={{ marginBottom: 0 }}
-                  >
-                    <Input
-                      {...noAutoCapInputProps}
-                      placeholder={t("connection.modal.example", {
-                        value: "localhost",
-                      })}
-                    />
-                  </Form.Item>
-                  <Form.Item
-                    name="port"
-                    label={t("connection.modal.jvm.port.label")}
-                    rules={[
-                      {
-                        required: true,
-                        message: t("connection.modal.jvm.port.required"),
-                      },
-                    ]}
-                    style={{ marginBottom: 0 }}
-                  >
-                    <InputNumber style={{ width: "100%" }} min={1} max={65535} />
-                  </Form.Item>
-                </div>
-                <div
-                  style={{
-                    display: "grid",
-                    gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
-                    gap: 16,
-                    marginTop: 16,
-                  }}
-                >
-                  <div style={{ display: "grid", gap: 8 }}>
-                    <Text strong>
-                      {t("connection.modal.jvm.environment.title")}
-                    </Text>
-                    {renderChoiceCards({
-                      fieldName: "jvmEnvironment",
-                      value: String(jvmEnvironment),
-                      minWidth: 120,
-                      options: [
-                        {
-                          value: "dev",
-                          label: t(
-                            "connection.modal.jvm.environment.dev.label",
-                          ),
-                          description: t(
-                            "connection.modal.jvm.environment.dev.description",
-                          ),
-                        },
-                        {
-                          value: "uat",
-                          label: t(
-                            "connection.modal.jvm.environment.staging.label",
-                          ),
-                          description: t(
-                            "connection.modal.jvm.environment.staging.description",
-                          ),
-                        },
-                        {
-                          value: "prod",
-                          label: t(
-                            "connection.modal.jvm.environment.prod.label",
-                          ),
-                          description: t(
-                            "connection.modal.jvm.environment.prod.description",
-                          ),
-                        },
-                      ],
-                    })}
-                  </div>
-                  <Form.Item
-                    name="timeout"
-                    label={t("connection.modal.network.timeout.label")}
-                    rules={[
-                      {
-                        type: "number",
-                        min: 1,
-                        max: 300,
-                        message: t("connection.modal.network.timeout.range"),
-                      },
-                    ]}
-                    style={{ marginBottom: 0 }}
-                  >
-                    <InputNumber
-                      style={{ width: "100%" }}
-                      min={1}
-                      max={300}
-                      placeholder={t("connection.modal.example", {
-                        value: "30",
-                      })}
-                    />
-                  </Form.Item>
-                  <Form.Item
-                    name="jvmReadOnly"
-                    label={t("connection.modal.jvm.securityPolicy.label")}
-                    valuePropName="checked"
-                    style={{ marginBottom: 0 }}
-                  >
-                    <Checkbox>{t("connection.modal.jvm.readonlyPreferred")}</Checkbox>
-                  </Form.Item>
-                </div>
-              </div>
-
-              <div style={jvmSectionCardStyle()}>
-                {renderJvmSectionHeader(
-                  <ClusterOutlined />,
-                  t("connection.modal.jvm.accessMode.title"),
-                  t("connection.modal.jvm.accessMode.description"),
-                )}
-                <Form.Item
-                  name="jvmAllowedModes"
-                  hidden
-                  rules={[
-                    {
-                      required: true,
-                      message: t("connection.modal.jvm.accessMode.required"),
-                    },
-                  ]}
-                >
-                  <Select mode="multiple" />
-                </Form.Item>
-                <Form.Item
-                  name="jvmPreferredMode"
-                  hidden
-                  rules={[
-                    {
-                      required: true,
-                      message: t("connection.modal.jvm.preferredMode.required"),
-                    },
-                  ]}
-                >
-                  <Input {...noAutoCapInputProps} />
-                </Form.Item>
-                <div
-                  style={{
-                    display: "grid",
-                    gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
-                    gap: 14,
-                  }}
-                >
-                  {JVM_EDITABLE_MODES.map((mode) => {
-                    const meta = resolveJVMModeMeta(mode);
-                    const enabled = normalizedJvmAllowedModes.includes(mode);
-                    const preferred = jvmPreferredMode === mode;
-                    return (
-                      <div
-                        key={mode}
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => handleJvmModeCardSelect(mode)}
-                        onKeyDown={(event) => {
-                          if (event.key === "Enter" || event.key === " ") {
-                            event.preventDefault();
-                            handleJvmModeCardSelect(mode);
-                          }
-                        }}
-                        aria-pressed={enabled}
-                        style={{
-                          textAlign: "left",
-                          padding: 14,
-                          borderRadius: 16,
-                          border: enabled
-                            ? darkMode
-                              ? "1px solid rgba(255,214,102,0.36)"
-                              : "1px solid rgba(22,119,255,0.34)"
-                            : darkMode
-                              ? "1px solid rgba(255,255,255,0.08)"
-                              : "1px solid rgba(16,24,40,0.08)",
-                          background: enabled
-                            ? darkMode
-                              ? "rgba(255,214,102,0.08)"
-                              : "rgba(22,119,255,0.06)"
-                            : darkMode
-                              ? "rgba(255,255,255,0.03)"
-                              : "rgba(16,24,40,0.03)",
-                          boxShadow: preferred
-                            ? darkMode
-                              ? "0 0 0 2px rgba(255,214,102,0.12)"
-                              : "0 0 0 2px rgba(22,119,255,0.10)"
-                            : "none",
-                          color: darkMode ? "#f5f7ff" : "#162033",
-                          cursor: "pointer",
-                          transition: "all 120ms ease",
-                        }}
-                      >
-                        <Space size={8} wrap>
-                          <Tag color={enabled ? "blue" : "default"}>
-                            {meta.label}
-                          </Tag>
-                          {preferred ? (
-                            <Tag color="green">
-                              {t("connection.modal.jvm.tag.preferred")}
-                            </Tag>
-                          ) : null}
-                          {!enabled ? (
-                            <Tag>{t("connection.modal.jvm.tag.notEnabled")}</Tag>
-                          ) : null}
-                        </Space>
-                        <div style={{ ...modalMutedTextStyle, marginTop: 8 }}>
-                          {mode === "jmx"
-                            ? t("connection.modal.jvm.mode.jmx.description")
-                            : mode === "endpoint"
-                              ? t(
-                                  "connection.modal.jvm.mode.endpoint.description",
-                                )
-                              : t("connection.modal.jvm.mode.agent.description")}
-                        </div>
-                        <Button
-                          size="small"
-                          type={enabled ? "default" : "primary"}
-                          disabled={enabled && normalizedJvmAllowedModes.length <= 1}
-                          onClick={(event) => handleJvmModeToggle(mode, event)}
-                          style={{ marginTop: 12, borderRadius: 999 }}
-                        >
-                          {enabled
-                            ? t("connection.modal.jvm.mode.disable")
-                            : t("connection.modal.jvm.mode.enablePreferred")}
-                        </Button>
-                      </div>
-                    );
-                  })}
-                </div>
-                <div style={{ ...modalMutedTextStyle, marginTop: 12 }}>
-                  {t("connection.modal.jvm.preferredSummary", {
-                    mode: resolveJVMModeMeta(String(jvmPreferredMode || "jmx"))
-                      .label,
-                  })}
-                </div>
-              </div>
-
-              <div style={jvmSectionCardStyle()}>
-                {renderJvmSectionHeader(
-                  <ApiOutlined />,
-                  "JMX",
-                  t("connection.modal.jvm.jmx.description"),
-                  <Tag color={normalizedJvmAllowedModes.includes("jmx") ? "green" : "default"}>
-                    {normalizedJvmAllowedModes.includes("jmx")
-                      ? t("connection.modal.jvm.tag.enabled")
-                      : t("connection.modal.jvm.tag.notEnabled")}
-                  </Tag>,
-                )}
-                <div
-                  style={{
-                    display: "grid",
-                    gridTemplateColumns: "minmax(0, 1fr) 120px",
-                    gap: 16,
-                  }}
-                >
-                  <Form.Item
-                    name="jvmJmxHost"
-                    label={t("connection.modal.jvm.jmx.host.label")}
-                    style={{ marginBottom: 0 }}
-                  >
-                    <Input
-                      {...noAutoCapInputProps}
-                      disabled={!normalizedJvmAllowedModes.includes("jmx")}
-                      placeholder={t("connection.modal.jvm.jmx.host.placeholder")}
-                    />
-                  </Form.Item>
-                  <Form.Item
-                    name="jvmJmxPort"
-                    label={t("connection.modal.jvm.jmx.port.label")}
-                    style={{ marginBottom: 0 }}
-                  >
-                    <InputNumber
-                      style={{ width: "100%" }}
-                      min={1}
-                      max={65535}
-                      disabled={!normalizedJvmAllowedModes.includes("jmx")}
-                      placeholder={t("connection.modal.jvm.jmx.port.placeholder")}
-                    />
-                  </Form.Item>
-                </div>
-                <div
-                  style={{
-                    display: "grid",
-                    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                    gap: 16,
-                    marginTop: 16,
-                  }}
-                >
-                  <Form.Item
-                    name="jvmJmxUsername"
-                    label={t("connection.modal.jvm.jmx.username.label")}
-                    style={{ marginBottom: 0 }}
-                  >
-                    <Input
-                      {...noAutoCapInputProps}
-                      disabled={!normalizedJvmAllowedModes.includes("jmx")}
-                      placeholder={t(
-                        "connection.modal.jvm.jmx.username.placeholder",
-                      )}
-                    />
-                  </Form.Item>
-                  <Form.Item
-                    name="jvmJmxPassword"
-                    label={t("connection.modal.jvm.jmx.password.label")}
-                    style={{ marginBottom: 0 }}
-                  >
-                    <Input.Password
-                      {...noAutoCapInputProps}
-                      disabled={!normalizedJvmAllowedModes.includes("jmx")}
-                      placeholder={t(
-                        "connection.modal.jvm.jmx.password.placeholder",
-                      )}
-                    />
-                  </Form.Item>
-                </div>
-              </div>
-
-              <div style={jvmSectionCardStyle()}>
-                {renderJvmSectionHeader(
-                  <CodeOutlined />,
-                  "Endpoint",
-                  t("connection.modal.jvm.endpoint.description"),
-                  <Tag
-                    color={
-                      normalizedJvmAllowedModes.includes("endpoint")
-                        ? "green"
-                        : "default"
-                    }
-                  >
-                    {normalizedJvmAllowedModes.includes("endpoint")
-                      ? t("connection.modal.jvm.tag.enabled")
-                      : t("connection.modal.jvm.tag.notEnabled")}
-                  </Tag>,
-                )}
-                <Form.Item
-                  name="jvmEndpointBaseUrl"
-                  label={t("connection.modal.jvm.endpoint.address.label")}
-                  rules={[
-                    {
-                      required: jvmPreferredMode === "endpoint",
-                      message: t(
-                        "connection.modal.jvm.endpoint.address.required",
-                      ),
-                    },
-                  ]}
-                  help={t("connection.modal.jvm.endpoint.address.help")}
-                >
-                  <Input
-                    {...noAutoCapInputProps}
-                    disabled={!normalizedJvmAllowedModes.includes("endpoint")}
-                    placeholder={t(
-                      "connection.modal.jvm.endpoint.address.placeholder",
-                    )}
-                  />
-                </Form.Item>
-                <Form.Item
-                  name="jvmEndpointApiKey"
-                  label={t("connection.modal.jvm.endpoint.apiKey.label")}
-                  style={{ marginBottom: 0 }}
-                >
-                  <Input.Password
-                    {...noAutoCapInputProps}
-                    disabled={!normalizedJvmAllowedModes.includes("endpoint")}
-                    placeholder={t(
-                      "connection.modal.jvm.endpoint.apiKey.placeholder",
-                    )}
-                  />
-                </Form.Item>
-              </div>
-
-              <div style={jvmSectionCardStyle()}>
-                {renderJvmSectionHeader(
-                  <ThunderboltOutlined />,
-                  "Agent",
-                  t("connection.modal.jvm.agent.description"),
-                  <Tag color={normalizedJvmAllowedModes.includes("agent") ? "green" : "default"}>
-                    {normalizedJvmAllowedModes.includes("agent")
-                      ? t("connection.modal.jvm.tag.enabled")
-                      : t("connection.modal.jvm.tag.notEnabled")}
-                  </Tag>,
-                )}
-                <Form.Item
-                  name="jvmAgentBaseUrl"
-                  label={t("connection.modal.jvm.agent.address.label")}
-                  rules={[
-                    {
-                      required: jvmPreferredMode === "agent",
-                      message: t("connection.modal.jvm.agent.address.required"),
-                    },
-                  ]}
-                  help={t("connection.modal.jvm.agent.address.help")}
-                >
-                  <Input
-                    {...noAutoCapInputProps}
-                    disabled={!normalizedJvmAllowedModes.includes("agent")}
-                    placeholder={t(
-                      "connection.modal.jvm.agent.address.placeholder",
-                    )}
-                  />
-                </Form.Item>
-                <Form.Item
-                  name="jvmAgentApiKey"
-                  label={t("connection.modal.jvm.agent.apiKey.label")}
-                  style={{ marginBottom: 0 }}
-                >
-                  <Input.Password
-                    {...noAutoCapInputProps}
-                    disabled={!normalizedJvmAllowedModes.includes("agent")}
-                    placeholder={t(
-                      "connection.modal.jvm.agent.apiKey.placeholder",
-                    )}
-                  />
-                </Form.Item>
-              </div>
-
-              <div style={jvmSectionCardStyle()}>
-                {renderJvmSectionHeader(
-                  <SafetyCertificateOutlined />,
-                  t("connection.modal.jvm.diagnostic.title"),
-                  t("connection.modal.jvm.diagnostic.description"),
-                  <Form.Item
-                    name="jvmDiagnosticEnabled"
-                    valuePropName="checked"
-                    style={{ marginBottom: 0 }}
-                  >
-                    <Switch
-                      checkedChildren={t("connection.modal.jvm.switch.on")}
-                      unCheckedChildren={t("connection.modal.jvm.switch.off")}
-                    />
-                  </Form.Item>,
-                )}
-                {jvmDiagnosticEnabled ? (
-                  <>
-                    <div
-                      style={{
-                        display: "grid",
-                        gridTemplateColumns: "220px minmax(0, 1fr)",
-                        gap: 16,
-                      }}
-                    >
-                      <div style={{ display: "grid", gap: 8 }}>
-                        <Text strong>
-                          {t("connection.modal.jvm.diagnostic.transport.label")}
-                        </Text>
-                        {renderChoiceCards({
-                          fieldName: "jvmDiagnosticTransport",
-                          value: String(jvmDiagnosticTransport),
-                          options: [
-                            {
-                              value: "agent-bridge",
-                              label: t(
-                                "connection.modal.jvm.diagnostic.transport.agent_bridge",
-                              ),
-                              description: t(
-                                "connection.modal.jvm.diagnostic.transport.agentBridge.description",
-                              ),
-                            },
-                            {
-                              value: "arthas-tunnel",
-                              label: t(
-                                "connection.modal.jvm.diagnostic.transport.arthas_tunnel",
-                              ),
-                              description: t(
-                                "connection.modal.jvm.diagnostic.transport.arthasTunnel.description",
-                              ),
-                            },
-                          ],
-                        })}
-                      </div>
-                      <Form.Item
-                        name="jvmDiagnosticBaseUrl"
-                        label={
-                          jvmDiagnosticTransport === "arthas-tunnel"
-                            ? t(
-                                "connection.modal.jvm.diagnostic.arthasTunnelAddress.label",
-                              )
-                            : t(
-                                "connection.modal.jvm.diagnostic.bridgeAddress.label",
-                              )
-                        }
-                        rules={[
-                          {
-                            required: true,
-                            message:
-                              jvmDiagnosticTransport === "arthas-tunnel"
-                                ? t(
-                                    "connection.modal.jvm.diagnostic.arthasTunnelAddress.required",
-                                  )
-                                : t(
-                                    "connection.modal.jvm.diagnostic.bridgeAddress.required",
-                                  ),
-                          },
-                        ]}
-                        help={
-                          jvmDiagnosticTransport === "arthas-tunnel"
-                            ? t(
-                                "connection.modal.jvm.diagnostic.arthasTunnelAddress.help",
-                              )
-                            : t(
-                                "connection.modal.jvm.diagnostic.bridgeAddress.help",
-                              )
-                        }
-                      >
-                        <Input
-                          {...noAutoCapInputProps}
-                          placeholder={
-                            jvmDiagnosticTransport === "arthas-tunnel"
-                              ? "http://127.0.0.1:7777"
-                              : "http://127.0.0.1:19091/gonavi/diag"
-                          }
-                        />
-                      </Form.Item>
-                    </div>
-                    <div
-                      style={{
-                        display: "grid",
-                        gridTemplateColumns: "minmax(0, 1fr) 220px",
-                        gap: 16,
-                      }}
-                    >
-                      <Form.Item
-                        name="jvmDiagnosticTargetId"
-                        label={
-                          jvmDiagnosticTransport === "arthas-tunnel"
-                            ? t(
-                                "connection.modal.jvm.diagnostic.targetId.agentId.label",
-                              )
-                            : t(
-                                "connection.modal.jvm.diagnostic.targetId.label",
-                              )
-                        }
-                        rules={
-                          jvmDiagnosticTransport === "arthas-tunnel"
-                            ? [
-                                {
-                                  required: true,
-                                  message: t(
-                                    "connection.modal.jvm.diagnostic.targetId.required",
-                                  ),
-                                },
-                              ]
-                            : undefined
-                        }
-                        help={
-                          jvmDiagnosticTransport === "arthas-tunnel"
-                            ? t(
-                                "connection.modal.jvm.diagnostic.targetId.arthasHelp",
-                              )
-                            : t(
-                                "connection.modal.jvm.diagnostic.targetId.bridgeHelp",
-                              )
-                        }
-                      >
-                        <Input
-                          {...noAutoCapInputProps}
-                          placeholder={
-                            jvmDiagnosticTransport === "arthas-tunnel"
-                              ? t("connection.modal.example", {
-                                  value: "orders-app_A1B2C3D4E5",
-                                })
-                              : t("connection.modal.example", {
-                                  value: "orders-prod-01",
-                                })
-                          }
-                        />
-                      </Form.Item>
-                      <Form.Item
-                        name="jvmDiagnosticTimeoutSeconds"
-                        label={t(
-                          "connection.modal.jvm.diagnostic.timeout.label",
-                        )}
-                        rules={[
-                          {
-                            type: "number",
-                            min: 1,
-                            max: 300,
-                            message: t(
-                              "connection.modal.jvm.diagnostic.timeout.range",
-                            ),
-                          },
-                        ]}
-                      >
-                        <InputNumber style={{ width: "100%" }} min={1} max={300} />
-                      </Form.Item>
-                    </div>
-                    <Form.Item
-                      name="jvmDiagnosticApiKey"
-                      label={t("connection.modal.jvm.diagnostic.apiKey.label")}
-                    >
-                      <Input.Password
-                        {...noAutoCapInputProps}
-                        placeholder={t(
-                          "connection.modal.jvm.diagnostic.apiKey.placeholder",
-                        )}
-                      />
-                    </Form.Item>
-                    <div
-                      style={{
-                        display: "grid",
-                        gridTemplateColumns:
-                          "repeat(auto-fit, minmax(180px, 1fr))",
-                        gap: 10,
-                      }}
-                    >
-                      {[
-                        {
-                          name: "jvmDiagnosticAllowObserveCommands",
-                          label: t(
-                            "connection.modal.jvm.diagnostic.command.observe.label",
-                          ),
-                          description: t(
-                            "connection.modal.jvm.diagnostic.command.observe.description",
-                          ),
-                        },
-                        {
-                          name: "jvmDiagnosticAllowTraceCommands",
-                          label: t(
-                            "connection.modal.jvm.diagnostic.command.trace.label",
-                          ),
-                          description: t(
-                            "connection.modal.jvm.diagnostic.command.trace.description",
-                          ),
-                        },
-                        {
-                          name: "jvmDiagnosticAllowMutatingCommands",
-                          label: t(
-                            "connection.modal.jvm.diagnostic.command.mutating.label",
-                          ),
-                          description: t(
-                            "connection.modal.jvm.diagnostic.command.mutating.description",
-                          ),
-                        },
-                      ].map((item) => (
-                        <div
-                          key={item.name}
-                          style={{
-                            padding: 12,
-                            borderRadius: 14,
-                            background: darkMode
-                              ? "rgba(255,255,255,0.04)"
-                              : "rgba(16,24,40,0.04)",
-                          }}
-                        >
-                          <Form.Item
-                            name={item.name}
-                            valuePropName="checked"
-                            style={{ marginBottom: 6 }}
-                          >
-                            <Checkbox>{item.label}</Checkbox>
-                          </Form.Item>
-                          <div style={modalMutedTextStyle}>
-                            {item.description}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </>
-                ) : (
-                  <div
-                    style={{
-                      ...modalMutedTextStyle,
-                      padding: "10px 12px",
-                      borderRadius: 12,
-                      background: darkMode
-                        ? "rgba(255,255,255,0.04)"
-                        : "rgba(16,24,40,0.04)",
-                    }}
-                  >
-                    {t("connection.modal.jvm.diagnostic.disabledHint")}
-                  </div>
-                )}
-              </div>
-            </div>
-          </>
-          ) : (
-            <>
-              {renderConfigSectionCard({
-                sectionKey: isFileDb ? "fileTarget" : "target",
-                icon: isFileDb ? <FileTextOutlined /> : <GatewayOutlined />,
-                children: (
-                  <div
-                    style={{
-                      display: "grid",
-                      gridTemplateColumns: "minmax(0, 1fr) 120px",
-                      gap: 16,
-                      alignItems: "start",
-                    }}
-                  >
-                    <Form.Item
-                      name="host"
-                      label={
-                        isFileDb
-                          ? t("connection.modal.field.filePath.label")
-                          : t("connection.modal.field.host.label")
-                      }
-                      rules={[
-                        createUriAwareRequiredRule(
-                          t("connection.modal.field.addressPath.required"),
-                        ),
-                      ]}
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Input
-                        {...noAutoCapInputProps}
-                        placeholder={
-                          isFileDb
-                            ? dbType === "duckdb"
-                              ? "/path/to/db.duckdb"
-                              : "/path/to/db.sqlite"
-                            : "localhost"
-                        }
-                      />
-                    </Form.Item>
-                    {isFileDb ? (
-                      <Form.Item label=" " style={{ marginBottom: 0 }}>
-                        <Button
-                          style={{ width: "100%" }}
-                          onClick={handleSelectDatabaseFile}
-                          loading={selectingDbFile}
-                        >
-                          {t("connection.modal.action.browse")}
-                        </Button>
-                      </Form.Item>
-                    ) : (
-                      <Form.Item
-                        name="port"
-                        label={t("connection.modal.field.port.label")}
-                        rules={[
-                          createUriAwareRequiredRule(
-                            t("connection.modal.field.port.required"),
-                            (value) => Number(value) > 0,
-                          ),
-                        ]}
-                        style={{ marginBottom: 0 }}
-                      >
-                        <InputNumber style={{ width: "100%" }} />
-                      </Form.Item>
-                    )}
-                  </div>
-                ),
-              })}
-
-              {dbType === "clickhouse" &&
-                renderConfigSectionCard({
-                  sectionKey: "connectionMode",
-                  icon: <ClusterOutlined />,
-                  children: (
-                    <Form.Item
-                      name="clickHouseProtocol"
-                      label={t("connection.modal.field.protocol.label")}
-                      help={t("connection.modal.field.clickHouseProtocol.help")}
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Select
-                        options={CLICKHOUSE_PROTOCOL_OPTIONS.map((option) => ({
-                          ...option,
-                          label: option.labelKey
-                            ? t(option.labelKey)
-                            : option.label,
-                        }))}
-                        onChange={() => clearConnectionTestResultForChoice()}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {dbType === "oceanbase" &&
-                renderConfigSectionCard({
-                  sectionKey: "oceanBaseProtocol",
-                  icon: <ClusterOutlined />,
-                  children: (
-                    <Form.Item
-                      name="oceanBaseProtocol"
-                      label={t("connection.modal.field.oceanBaseProtocol.label")}
-                      help={
-                        <span>
-                          {t(
-                            "connection.modal.field.oceanBaseProtocol.help.primary",
-                          )}
-                          <br />
-                          {t(
-                            "connection.modal.field.oceanBaseProtocol.help.connectionAttributes",
-                            {
-                              attributes:
-                                "connectionAttributes=key1:value1,key2:value2",
-                            },
-                          )}
-                        </span>
-                      }
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Select
-                        options={OCEANBASE_PROTOCOL_OPTIONS}
-                        onChange={() => {
-                          form.setFieldsValue({ mysqlTopology: "single" });
-                          clearConnectionTestResultForChoice();
-                        }}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {(dbType === "postgres" ||
-                dbType === "kingbase" ||
-                dbType === "highgo" ||
-                dbType === "vastbase" ||
-                dbType === "opengauss" ||
-                dbType === "gaussdb") &&
-                renderConfigSectionCard({
-                  sectionKey: "service",
-                  icon: <DatabaseOutlined />,
-                  children: (
-                    <Form.Item
-                      name="database"
-                      label={t("connection.modal.field.defaultDatabase.label")}
-                      help={t("connection.modal.field.defaultDatabase.help")}
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Input
-                        {...noAutoCapInputProps}
-                        placeholder={t(
-                          "connection.modal.field.defaultDatabase.placeholder",
-                        )}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {dbType === "kafka" &&
-                renderConfigSectionCard({
-                  sectionKey: "service",
-                  icon: <DatabaseOutlined />,
-                  children: (
-                    <Form.Item
-                      name="database"
-                      label={t("connection.modal.messageQueue.kafka.defaultTopic.label")}
-                      help={t("connection.modal.messageQueue.kafka.defaultTopic.help")}
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Input
-                        {...noAutoCapInputProps}
-                        placeholder={t(
-                          "connection.modal.messageQueue.kafka.defaultTopic.placeholder",
-                        )}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {dbType === "rocketmq" &&
-                renderConfigSectionCard({
-                  sectionKey: "service",
-                  icon: <DatabaseOutlined />,
-                  children: (
-                    <Form.Item
-                      name="database"
-                      label={t("connection.modal.messageQueue.rocketmq.defaultTopic.label")}
-                      help={t("connection.modal.messageQueue.rocketmq.defaultTopic.help")}
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Input
-                        {...noAutoCapInputProps}
-                        placeholder={t(
-                          "connection.modal.messageQueue.rocketmq.defaultTopic.placeholder",
-                        )}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {dbType === "mqtt" &&
-                renderConfigSectionCard({
-                  sectionKey: "service",
-                  icon: <DatabaseOutlined />,
-                  children: (
-                    <Form.Item
-                      name="database"
-                      label={t("connection.modal.messageQueue.mqtt.defaultTopicFilter.label")}
-                      help={t("connection.modal.messageQueue.mqtt.defaultTopicFilter.help")}
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Input
-                        {...noAutoCapInputProps}
-                        placeholder={t(
-                          "connection.modal.messageQueue.mqtt.defaultTopicFilter.placeholder",
-                        )}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {dbType === "rabbitmq" &&
-                renderConfigSectionCard({
-                  sectionKey: "service",
-                  icon: <DatabaseOutlined />,
-                  children: (
-                    <Form.Item
-                      name="database"
-                      label={t("connection.modal.messageQueue.rabbitmq.defaultVirtualHost.label")}
-                      help={t("connection.modal.messageQueue.rabbitmq.defaultVirtualHost.help")}
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Input
-                        {...noAutoCapInputProps}
-                        placeholder={t(
-                          "connection.modal.messageQueue.rabbitmq.defaultVirtualHost.placeholder",
-                        )}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {(dbType === "oracle" || isOceanBaseOracle) &&
-                renderConfigSectionCard({
-                  sectionKey: "service",
-                  icon: <DatabaseOutlined />,
-                  children: (
-                    <Form.Item
-                      name="database"
-                      label={
-                        isOceanBaseOracle
-                          ? t(
-                              "connection.modal.field.oceanBaseServiceName.label",
-                            )
-                          : t("connection.modal.field.serviceName.label")
-                      }
-                      rules={
-                        isOceanBaseOracle
-                          ? []
-                          : [
-                              createUriAwareRequiredRule(
-                                t("connection.modal.field.serviceName.required"),
-                              ),
-                            ]
-                      }
-                      help={
-                        isOceanBaseOracle
-                          ? t(
-                              "connection.modal.field.oceanBaseServiceName.help",
-                            )
-                          : t("connection.modal.field.serviceName.help")
-                      }
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Input
-                        {...noAutoCapInputProps}
-                        placeholder={t(
-                          "connection.modal.field.serviceName.placeholder",
-                        )}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {isMySQLLike &&
-                renderConfigSectionCard({
-                  sectionKey: "connectionMode",
-                  icon: <ClusterOutlined />,
-                  children: renderChoiceCards({
-                    fieldName: "mysqlTopology",
-                    value: String(mysqlTopology),
-                    options: [
-                      {
-                        value: "single",
-                        label: t("connection.modal.topology.single.label"),
-                        description: t(
-                          "connection.modal.topology.mysql.single.description",
-                        ),
-                      },
-                      {
-                        value: "replica",
-                        label: t(
-                          "connection.modal.topology.mysql.replica.label",
-                        ),
-                        description: t(
-                          "connection.modal.topology.mysql.replica.description",
-                        ),
-                      },
-                    ],
-                  }),
-                })}
-
-              {isKafka &&
-                renderConfigSectionCard({
-                  sectionKey: "connectionMode",
-                  icon: <ClusterOutlined />,
-                  children: renderChoiceCards({
-                    fieldName: "kafkaTopology",
-                    value: String(kafkaTopology),
-                    options: [
-                      {
-                        value: "single",
-                        label: t("connection.modal.messageQueue.kafka.topology.single.label"),
-                        description: t(
-                          "connection.modal.messageQueue.kafka.topology.single.description",
-                        ),
-                      },
-                      {
-                        value: "cluster",
-                        label: t("connection.modal.messageQueue.topology.cluster.label"),
-                        description: t(
-                          "connection.modal.messageQueue.kafka.topology.cluster.description",
-                        ),
-                      },
-                    ],
-                  }),
-                })}
-
-              {isRocketMQ &&
-                renderConfigSectionCard({
-                  sectionKey: "connectionMode",
-                  icon: <ClusterOutlined />,
-                  children: renderChoiceCards({
-                    fieldName: "rocketmqTopology",
-                    value: String(rocketmqTopology),
-                    options: [
-                      {
-                        value: "single",
-                        label: t("connection.modal.messageQueue.rocketmq.topology.single.label"),
-                        description: t(
-                          "connection.modal.messageQueue.rocketmq.topology.single.description",
-                        ),
-                      },
-                      {
-                        value: "cluster",
-                        label: t("connection.modal.messageQueue.topology.cluster.label"),
-                        description: t(
-                          "connection.modal.messageQueue.rocketmq.topology.cluster.description",
-                        ),
-                      },
-                    ],
-                  }),
-                })}
-
-              {isMQTT &&
-                renderConfigSectionCard({
-                  sectionKey: "connectionMode",
-                  icon: <ClusterOutlined />,
-                  children: renderChoiceCards({
-                    fieldName: "mqttTopology",
-                    value: String(mqttTopology),
-                    options: [
-                      {
-                        value: "single",
-                        label: t("connection.modal.messageQueue.mqtt.topology.single.label"),
-                        description: t(
-                          "connection.modal.messageQueue.mqtt.topology.single.description",
-                        ),
-                      },
-                      {
-                        value: "cluster",
-                        label: t("connection.modal.messageQueue.topology.cluster.label"),
-                        description: t(
-                          "connection.modal.messageQueue.mqtt.topology.cluster.description",
-                        ),
-                      },
-                    ],
-                  }),
-                })}
-
-              {isKafka &&
-                kafkaTopology === "cluster" &&
-                renderConfigSectionCard({
-                  sectionKey: "replica",
-                  icon: <ClusterOutlined />,
-                  children: (
-                    <Form.Item
-                      name="kafkaHosts"
-                      label={t("connection.modal.messageQueue.kafka.extraBrokers.label")}
-                      help={t("connection.modal.messageQueue.kafka.extraBrokers.help")}
-                    >
-                      <Select
-                        mode="tags"
-                        placeholder={t(
-                          "connection.modal.messageQueue.kafka.extraBrokers.placeholder",
-                        )}
-                        tokenSeparators={[",", ";", " "]}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {isRocketMQ &&
-                rocketmqTopology === "cluster" &&
-                renderConfigSectionCard({
-                  sectionKey: "replica",
-                  icon: <ClusterOutlined />,
-                  children: (
-                    <Form.Item
-                      name="rocketmqHosts"
-                      label={t("connection.modal.messageQueue.rocketmq.extraNameServers.label")}
-                      help={t("connection.modal.messageQueue.rocketmq.extraNameServers.help")}
-                    >
-                      <Select
-                        mode="tags"
-                        placeholder={t(
-                          "connection.modal.messageQueue.rocketmq.extraNameServers.placeholder",
-                        )}
-                        tokenSeparators={[",", ";", " "]}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {isMQTT &&
-                mqttTopology === "cluster" &&
-                renderConfigSectionCard({
-                  sectionKey: "replica",
-                  icon: <ClusterOutlined />,
-                  children: (
-                    <Form.Item
-                      name="mqttHosts"
-                      label={t("connection.modal.messageQueue.mqtt.extraBrokers.label")}
-                      help={t("connection.modal.messageQueue.mqtt.extraBrokers.help")}
-                    >
-                      <Select
-                        mode="tags"
-                        placeholder={t(
-                          "connection.modal.messageQueue.mqtt.extraBrokers.placeholder",
-                        )}
-                        tokenSeparators={[",", ";", " "]}
-                      />
-                    </Form.Item>
-                  ),
-                })}
-
-              {isMySQLLike &&
-                mysqlTopology === "replica" &&
-                renderConfigSectionCard({
-                  sectionKey: "replica",
-                  icon: <ClusterOutlined />,
-                  children: (
-                    <>
-                      <Form.Item
-                        name="mysqlReplicaHosts"
-                        label={t(
-                          "connection.modal.field.mysqlReplicaHosts.label",
-                        )}
-                        help={t(
-                          "connection.modal.field.mysqlReplicaHosts.help",
-                        )}
-                      >
-                        <Select
-                          mode="tags"
-                          placeholder={t(
-                            "connection.modal.field.mysqlReplicaHosts.placeholder",
-                          )}
-                          tokenSeparators={[",", ";", " "]}
-                        />
-                      </Form.Item>
-                      <div
-                        style={{
-                          display: "grid",
-                          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                          gap: 16,
-                        }}
-                      >
-                        <Form.Item
-                          name="mysqlReplicaUser"
-                          label={t(
-                            "connection.modal.field.mysqlReplicaUser.label",
-                          )}
-                          style={{ marginBottom: 0 }}
-                        >
-                          <Input
-                            {...noAutoCapInputProps}
-                            placeholder={t(
-                              "connection.modal.field.mysqlReplicaUser.placeholder",
-                            )}
-                          />
-                        </Form.Item>
-                        <Form.Item
-                          name="mysqlReplicaPassword"
-                          label={t(
-                            "connection.modal.field.mysqlReplicaPassword.label",
-                          )}
-                          style={{ marginBottom: 0 }}
-                        >
-                          <Input.Password
-                            {...noAutoCapInputProps}
-                            placeholder={getStoredSecretPlaceholder({
-                              hasStoredSecret:
-                                initialValues?.hasMySQLReplicaPassword,
-                              emptyPlaceholder: t(
-                                "connection.modal.field.mysqlReplicaPassword.placeholder",
-                              ),
-                              retainedLabel: t(
-                                "connection.modal.field.mysqlReplicaPassword.retained",
-                              ),
-                            })}
-                          />
-                        </Form.Item>
-                      </div>
-                      {renderStoredSecretControls({
-                        fieldName: "mysqlReplicaPassword",
-                        clearKey: "mysqlReplicaPassword",
-                        hasStoredSecret: initialValues?.hasMySQLReplicaPassword,
-                        clearLabel: t(
-                          "connection.modal.field.mysqlReplicaPassword.clear",
-                        ),
-                        description: t(
-                          "connection.modal.field.mysqlReplicaPassword.savedDescription",
-                        ),
-                      })}
-                    </>
-                  ),
-                })}
-
-              {dbType === "mongodb" &&
-                renderConfigSectionCard({
-                  sectionKey: "connectionMode",
-                  icon: <ClusterOutlined />,
-                  children: renderChoiceCards({
-                    fieldName: "mongoTopology",
-                    value: String(mongoTopology),
-                    options: [
-                      {
-                        value: "single",
-                        label: t("connection.modal.topology.single.label"),
-                        description: t(
-                          "connection.modal.topology.mongodb.single.description",
-                        ),
-                      },
-                      {
-                        value: "replica",
-                        label: t(
-                          "connection.modal.topology.mongodb.replica.label",
-                        ),
-                        description: t(
-                          "connection.modal.topology.mongodb.replica.description",
-                        ),
-                      },
-                    ],
-                  }),
-                })}
-
-              {dbType === "mongodb" &&
-                renderConfigSectionCard({
-                  sectionKey: "mongoDiscovery",
-                  icon: <ApiOutlined />,
-                  children: (
-                    <>
-                      <Form.Item name="mongoSrv" hidden valuePropName="checked">
-                        <Checkbox />
-                      </Form.Item>
-                      <div
-                        style={{
-                          display: "grid",
-                          gridTemplateColumns:
-                            "repeat(auto-fit, minmax(180px, 1fr))",
-                          gap: 10,
-                        }}
-                      >
-                        {[
-                          {
-                            value: false,
-                            label: t(
-                              "connection.modal.mongo.discovery.standard.label",
-                            ),
-                            description: t(
-                              "connection.modal.mongo.discovery.standard.description",
-                            ),
-                          },
-                          {
-                            value: true,
-                            label: t(
-                              "connection.modal.mongo.discovery.srv.label",
-                            ),
-                            description: t(
-                              "connection.modal.mongo.discovery.srv.description",
-                            ),
-                          },
-                        ].map((option) => {
-                          const active = mongoSrv === option.value;
-                          return (
-                            <button
-                              key={String(option.value)}
-                              type="button"
-                              aria-pressed={active}
-                              onClick={() =>
-                                setChoiceFieldValue("mongoSrv", option.value)
-                              }
-                              style={{
-                                textAlign: "left",
-                                padding: "12px 14px",
-                                borderRadius: 14,
-                                border: active
-                                  ? darkMode
-                                    ? "1px solid rgba(255,214,102,0.42)"
-                                    : "1px solid rgba(22,119,255,0.36)"
-                                  : darkMode
-                                    ? "1px solid rgba(255,255,255,0.08)"
-                                    : "1px solid rgba(16,24,40,0.08)",
-                                background: active
-                                  ? darkMode
-                                    ? "rgba(255,214,102,0.10)"
-                                    : "rgba(22,119,255,0.07)"
-                                  : darkMode
-                                    ? "rgba(255,255,255,0.03)"
-                                    : "rgba(16,24,40,0.03)",
-                                color: darkMode ? "#f5f7ff" : "#162033",
-                                cursor: "pointer",
-                              }}
-                            >
-                              <Space size={8} wrap>
-                                <Text strong>{option.label}</Text>
-                                {active ? (
-                                  <Tag color="blue">
-                                    {t("connection.modal.network.currentEditing")}
-                                  </Tag>
-                                ) : null}
-                              </Space>
-                              <div
-                                style={{
-                                  ...modalMutedTextStyle,
-                                  marginTop: 6,
-                                }}
-                              >
-                                {option.description}
-                              </div>
-                            </button>
-                          );
-                        })}
-                      </div>
-                      {mongoSrv && useSSH && (
-                        <Alert
-                          type="warning"
-                          showIcon
-                          style={{ marginTop: 12 }}
-                          message={t(
-                            "connection.modal.mongo.discovery.srvSshWarning",
-                          )}
-                        />
-                      )}
-                    </>
-                  ),
-                })}
-
-              {dbType === "mongodb" &&
-                mongoTopology === "replica" &&
-                renderConfigSectionCard({
-                  sectionKey: "replica",
-                  icon: <ClusterOutlined />,
-                  children: (
-                    <>
-                      <Form.Item
-                        name="mongoHosts"
-                        label={
-                          mongoSrv
-                            ? t("connection.modal.field.mongoSrvHosts.label")
-                            : t("connection.modal.field.mongoHosts.label")
-                        }
-                        help={
-                          mongoSrv
-                            ? t("connection.modal.field.mongoSrvHosts.help")
-                            : t("connection.modal.field.mongoHosts.help")
-                        }
-                      >
-                        <Select
-                          mode="tags"
-                          placeholder={
-                            mongoSrv
-                              ? t(
-                                  "connection.modal.field.mongoSrvHosts.placeholder",
-                                )
-                              : t(
-                                  "connection.modal.field.mongoHosts.placeholder",
-                                )
-                          }
-                          tokenSeparators={[",", ";", " "]}
-                        />
-                      </Form.Item>
-                      <div
-                        style={{
-                          display: "grid",
-                          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                          gap: 16,
-                        }}
-                      >
-                        <Form.Item
-                          name="mongoReplicaSet"
-                          label={t(
-                            "connection.modal.field.mongoReplicaSet.label",
-                          )}
-                          style={{ marginBottom: 0 }}
-                        >
-                          <Input
-                            {...noAutoCapInputProps}
-                            placeholder={t(
-                              "connection.modal.field.mongoReplicaSet.placeholder",
-                            )}
-                          />
-                        </Form.Item>
-                        <Form.Item
-                          name="mongoReplicaUser"
-                          label={t(
-                            "connection.modal.field.mongoReplicaUser.label",
-                          )}
-                          style={{ marginBottom: 0 }}
-                        >
-                          <Input
-                            {...noAutoCapInputProps}
-                            placeholder={t(
-                              "connection.modal.field.mongoReplicaUser.placeholder",
-                            )}
-                          />
-                        </Form.Item>
-                      </div>
-                      <Form.Item
-                        name="mongoReplicaPassword"
-                        label={t(
-                          "connection.modal.field.mongoReplicaPassword.label",
-                        )}
-                        style={{ marginTop: 16, marginBottom: 0 }}
-                      >
-                        <Input.Password
-                          {...noAutoCapInputProps}
-                          placeholder={getStoredSecretPlaceholder({
-                            hasStoredSecret:
-                              initialValues?.hasMongoReplicaPassword,
-                            emptyPlaceholder: t(
-                              "connection.modal.field.mongoReplicaPassword.placeholder",
-                            ),
-                            retainedLabel: t(
-                              "connection.modal.field.mongoReplicaPassword.retained",
-                            ),
-                          })}
-                        />
-                      </Form.Item>
-                      {renderStoredSecretControls({
-                        fieldName: "mongoReplicaPassword",
-                        clearKey: "mongoReplicaPassword",
-                        hasStoredSecret: initialValues?.hasMongoReplicaPassword,
-                        clearLabel: t(
-                          "connection.modal.field.mongoReplicaPassword.clear",
-                        ),
-                        description: t(
-                          "connection.modal.field.mongoReplicaPassword.savedDescription",
-                        ),
-                      })}
-                      <Space
-                        size={8}
-                        style={{ marginTop: 12, marginBottom: 12 }}
-                      >
-                        <Button
-                          onClick={handleDiscoverMongoMembers}
-                          loading={discoveringMembers}
-                        >
-                          {t("connection.modal.mongo.discoverMembers")}
-                        </Button>
-                      </Space>
-                      {mongoMembers.length > 0 && (
-                        <Table
-                          size="small"
-                          rowKey={(record) => record.host}
-                          pagination={false}
-                          dataSource={mongoMembers}
-                          style={{ marginBottom: 12 }}
-                          columns={[
-                            {
-                              title: t("connection.modal.field.host.label"),
-                              dataIndex: "host",
-                              width: "48%",
-                            },
-                            {
-                              title: t("connection.modal.mongo.member.role"),
-                              dataIndex: "role",
-                              width: "32%",
-                              render: (
-                                value: string,
-                                record: MongoMemberInfo,
-                              ) => (
-                                <Tag
-                                  color={record.isSelf ? "blue" : "default"}
-                                >
-                                  {value ||
-                                    record.state ||
-                                    t("common.unknown")}
-                                </Tag>
-                              ),
-                            },
-                            {
-                              title: t("connection.modal.mongo.member.health"),
-                              dataIndex: "healthy",
-                              width: "20%",
-                              render: (value: boolean) => (
-                                <Tag color={value ? "success" : "error"}>
-                                  {value
-                                    ? t("connection.modal.mongo.member.healthy")
-                                    : t(
-                                        "connection.modal.mongo.member.unhealthy",
-                                      )}
-                                </Tag>
-                              ),
-                            },
-                          ]}
-                        />
-                      )}
-                    </>
-                  ),
-                })}
-
-              {dbType === "mongodb" &&
-                renderConfigSectionCard({
-                  sectionKey: "mongoPolicy",
-                  icon: <ThunderboltOutlined />,
-                  children: (
-                    <div
-                      style={{
-                        display: "grid",
-                        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                        gap: 16,
-                      }}
-                    >
-                      <Form.Item
-                        name="mongoAuthSource"
-                        label={t(
-                          "connection.modal.field.mongoAuthSource.label",
-                        )}
-                        style={{ marginBottom: 0 }}
-                      >
-                        <Input
-                          {...noAutoCapInputProps}
-                          placeholder={t(
-                            "connection.modal.field.mongoAuthSource.placeholder",
-                          )}
-                        />
-                      </Form.Item>
-                      <div style={{ display: "grid", gap: 8 }}>
-                        <Text strong>
-                          {t("connection.modal.mongo.readPreference.label")}
-                        </Text>
-                        {renderChoiceCards({
-                          fieldName: "mongoReadPreference",
-                          value: String(mongoReadPreference),
-                          minWidth: 130,
-                          options: [
-                            {
-                              value: "primary",
-                              label: "primary",
-                              description: t(
-                                "connection.modal.mongo.readPreference.primary.description",
-                              ),
-                            },
-                            {
-                              value: "primaryPreferred",
-                              label: "primaryPreferred",
-                              description: t(
-                                "connection.modal.mongo.readPreference.primaryPreferred.description",
-                              ),
-                            },
-                            {
-                              value: "secondary",
-                              label: "secondary",
-                              description: t(
-                                "connection.modal.mongo.readPreference.secondary.description",
-                              ),
-                            },
-                            {
-                              value: "secondaryPreferred",
-                              label: "secondaryPreferred",
-                              description: t(
-                                "connection.modal.mongo.readPreference.secondaryPreferred.description",
-                              ),
-                            },
-                            {
-                              value: "nearest",
-                              label: "nearest",
-                              description: t(
-                                "connection.modal.mongo.readPreference.nearest.description",
-                              ),
-                            },
-                          ],
-                        })}
-                      </div>
-                    </div>
-                  ),
-                })}
-
-              {isRedis &&
-                renderConfigSectionCard({
-                  sectionKey: "connectionMode",
-                  icon: <ClusterOutlined />,
-                  children: (
-                    <>
-                      {renderChoiceCards({
-                        fieldName: "redisTopology",
-                        value: String(redisTopology),
-                        options: [
-                          {
-                            value: "single",
-                            label: t("connection.modal.topology.single.label"),
-                            description: t(
-                              "connection.modal.topology.redis.single.description",
-                            ),
-                          },
-                          {
-                            value: "cluster",
-                            label: t(
-                              "connection.modal.topology.redis.cluster.label",
-                            ),
-                            description: t(
-                              "connection.modal.topology.redis.cluster.description",
-                            ),
-                          },
-                        ],
-                      })}
-                      {redisTopology === "cluster" && (
-                        <Form.Item
-                          name="redisHosts"
-                          label={t("connection.modal.field.redisHosts.label")}
-                          help={t("connection.modal.field.redisHosts.help")}
-                          style={{ marginTop: 16, marginBottom: 0 }}
-                        >
-                          <Select
-                            mode="tags"
-                            placeholder={t(
-                              "connection.modal.field.redisHosts.placeholder",
-                            )}
-                            tokenSeparators={[",", ";", " "]}
-                          />
-                        </Form.Item>
-                      )}
-                    </>
-                  ),
-                })}
-
-              {isRedis &&
-                renderConfigSectionCard({
-                  sectionKey: "credentials",
-                  icon: <SafetyCertificateOutlined />,
-                  children: (
-                    <>
-                      <Form.Item
-                        name="password"
-                        label={t("connection.modal.field.redisPassword.label")}
-                      >
-                        <Input.Password
-                          {...noAutoCapInputProps}
-                          visibilityToggle={{
-                            visible: primaryPasswordVisible,
-                            onVisibleChange: setPrimaryPasswordVisible,
-                          }}
-                          placeholder={getStoredSecretPlaceholder({
-                            hasStoredSecret: initialValues?.hasPrimaryPassword,
-                            emptyPlaceholder: t(
-                              "connection.modal.field.redisPassword.placeholder",
-                            ),
-                            retainedLabel: t(
-                              "connection.modal.field.redisPassword.retained",
-                            ),
-                          })}
-                        />
-                      </Form.Item>
-                    </>
-                  ),
-                })}
-
-              {isRedis &&
-                renderConfigSectionCard({
-                  sectionKey: "databaseScope",
-                  icon: <DatabaseOutlined />,
-                  children: (
-                    <Form.Item
-                      name="includeRedisDatabases"
-                      label={t(
-                        "connection.modal.field.displayDatabases.label",
-                      )}
-                      help={t("connection.modal.field.displayDatabases.help")}
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Select
-                        mode="multiple"
-                        placeholder={t(
-                          "connection.modal.field.displayRedisDatabases.placeholder",
-                        )}
-                        allowClear
-                      >
-                        {redisDbList.map((db) => (
-                          <Select.Option key={db} value={db}>
-                            db{db}
-                          </Select.Option>
-                        ))}
-                      </Select>
-                    </Form.Item>
-                  ),
-                })}
-
-              {!isFileDb &&
-                !isRedis &&
-                renderConfigSectionCard({
-                  sectionKey: "credentials",
-                  icon: <SafetyCertificateOutlined />,
-                  children: (
-                    <>
-                      <div
-                        style={{
-                          display: "grid",
-                          gridTemplateColumns:
-                            dbType === "mongodb"
-                              ? "minmax(0, 1fr) minmax(0, 1fr) 180px"
-                              : "repeat(2, minmax(0, 1fr))",
-                          gap: 16,
-                        }}
-                      >
-                        <Form.Item
-                          name="user"
-                          label={t("connection.modal.field.username.label")}
-                          rules={
-                            PRIMARY_USERNAME_OPTIONAL_TYPES.has(dbType)
-                              ? []
-                              : [
-                                  createUriAwareRequiredRule(
-                                    t(
-                                      "connection.modal.field.username.required",
-                                    ),
-                                  ),
-                                ]
-                          }
-                          style={{ marginBottom: 0 }}
-                        >
-                          <Input
-                            {...noAutoCapInputProps}
-                            placeholder={
-                              PRIMARY_USERNAME_OPTIONAL_TYPES.has(dbType)
-                                ? t("connection.modal.field.username.optional_placeholder")
-                                : undefined
-                            }
-                          />
-                        </Form.Item>
-                        <Form.Item
-                          name="password"
-                          label={t("connection.modal.field.password.label")}
-                          style={{ marginBottom: 0 }}
-                        >
-                          <Input.Password
-                            {...noAutoCapInputProps}
-                            visibilityToggle={{
-                              visible: primaryPasswordVisible,
-                              onVisibleChange: setPrimaryPasswordVisible,
-                            }}
-                            placeholder={getStoredSecretPlaceholder({
-                              hasStoredSecret:
-                                initialValues?.hasPrimaryPassword,
-                              emptyPlaceholder: t(
-                                "connection.modal.field.password.placeholder",
-                              ),
-                              retainedLabel: t(
-                                "connection.modal.field.password.retained",
-                              ),
-                            })}
-                          />
-                        </Form.Item>
-                        {dbType === "mongodb" && (
-                          <div style={{ display: "grid", gap: 8 }}>
-                            <Text strong>
-                              {t(
-                                "connection.modal.mongo.authMechanism.label",
-                              )}
-                            </Text>
-                            {renderChoiceCards({
-                              fieldName: "mongoAuthMechanism",
-                              value: String(mongoAuthMechanism),
-                              minWidth: 150,
-                              options: [
-                                {
-                                  value: "",
-                                  label: t(
-                                    "connection.modal.mongo.authMechanism.auto.label",
-                                  ),
-                                  description: t(
-                                    "connection.modal.mongo.authMechanism.auto.description",
-                                  ),
-                                },
-                                {
-                                  value: "NONE",
-                                  label: t(
-                                    "connection.modal.mongo.authMechanism.none.label",
-                                  ),
-                                  description: t(
-                                    "connection.modal.mongo.authMechanism.none.description",
-                                  ),
-                                },
-                                {
-                                  value: "SCRAM-SHA-1",
-                                  label: "SCRAM-SHA-1",
-                                  description: t(
-                                    "connection.modal.mongo.authMechanism.scramSha1.description",
-                                  ),
-                                },
-                                {
-                                  value: "SCRAM-SHA-256",
-                                  label: "SCRAM-SHA-256",
-                                  description: t(
-                                    "connection.modal.mongo.authMechanism.scramSha256.description",
-                                  ),
-                                },
-                                {
-                                  value: "MONGODB-AWS",
-                                  label: "MONGODB-AWS",
-                                  description: t(
-                                    "connection.modal.mongo.authMechanism.aws.description",
-                                  ),
-                                },
-                              ],
-                            })}
-                          </div>
-                        )}
-                      </div>
-                      {dbType === "mongodb" && (
-                        <Form.Item
-                          name="savePassword"
-                          valuePropName="checked"
-                          style={{ marginTop: 12, marginBottom: 0 }}
-                        >
-                          <Checkbox>
-                            {t("connection.modal.field.savePassword")}
-                          </Checkbox>
-                        </Form.Item>
-                      )}
-                    </>
-                  ),
-                })}
-
-              {!isFileDb &&
-                !isRedis &&
-                !isKafka &&
-                renderConfigSectionCard({
-                  sectionKey: "databaseScope",
-                  icon: <DatabaseOutlined />,
-                  children: (
-                    <Form.Item
-                      name="includeDatabases"
-                      label={t(
-                        "connection.modal.field.displayDatabases.label",
-                      )}
-                      help={t("connection.modal.field.displayDatabases.help")}
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Select
-                        mode="multiple"
-                        placeholder={t(
-                          "connection.modal.field.displayDatabases.placeholder",
-                        )}
-                        allowClear
-                      >
-                        {dbList.map((db) => (
-                          <Select.Option key={db} value={db}>
-                            {db}
-                          </Select.Option>
-                        ))}
-                      </Select>
-                    </Form.Item>
-                  ),
-                })}
-            </>
-          )}
-        </div>
-      </div>
-    );
-
-    const networkSecuritySection =
-      !isFileDb && !isJVM
-        ? (() => {
-            const effectiveUseSSL = useSSL || !!form.getFieldValue("useSSL");
-            const effectiveUseSSH = useSSH || !!form.getFieldValue("useSSH");
-            const effectiveUseHttpTunnel =
-              useHttpTunnel ||
-              !!form.getFieldValue("useHttpTunnel");
-            const effectiveUseProxy =
-              !effectiveUseHttpTunnel &&
-              (useProxy || !!form.getFieldValue("useProxy"));
-            const networkItems: Array<{
-              key: "ssl" | "ssh" | "proxy" | "httpTunnel";
-              title: string;
-              description: string;
-              enabled: boolean;
-            }> = [
-              ...(isSSLType
-                ? [
-                    {
-                      key: "ssl" as const,
-                      title: t("connection.modal.network.ssl_tls"),
-                      description: t(
-                        "connection.modal.network.ssl.description",
-                      ),
-                      enabled: effectiveUseSSL,
-                    },
-                  ]
-                : []),
-              {
-                key: "ssh",
-                title: t("connection.modal.network.ssh.title"),
-                description: t("connection.modal.network.ssh.description"),
-                enabled: effectiveUseSSH,
-              },
-              {
-                key: "proxy",
-                title: t("connection.modal.network.proxy.title"),
-                description: t("connection.modal.network.proxy.description"),
-                enabled: effectiveUseProxy,
-              },
-              {
-                key: "httpTunnel",
-                title: t("connection.modal.network.httpTunnel.title"),
-                description: t(
-                  "connection.modal.network.httpTunnel.description",
-                ),
-                enabled: effectiveUseHttpTunnel,
-              },
-            ];
-            const resolvedNetworkConfig =
-              activeNetworkConfig === "ssl" && !effectiveUseSSL
-                ? networkItems.find((item) => item.enabled)?.key ||
-                  (networkItems.some((item) => item.key === activeNetworkConfig)
-                    ? activeNetworkConfig
-                    : networkItems[0]?.key || "ssh")
-                : networkItems.some((item) => item.key === activeNetworkConfig)
-                  ? activeNetworkConfig
-                  : networkItems[0]?.key || "ssh";
-            const renderNetworkPanel = () => {
-              if (resolvedNetworkConfig === "ssl") {
-                return (
-                  <div style={{ ...modalInnerSectionStyle, padding: 14 }}>
-                    <div
-                      style={{
-                        marginBottom: 8,
-                        color: darkMode ? "#f5f7ff" : "#162033",
-                        fontSize: 14,
-                        fontWeight: 700,
-                      }}
-                    >
-                      {t("connection.modal.network.ssl_tls")}
-                    </div>
-                    <div style={{ ...modalMutedTextStyle, marginBottom: 14 }}>
-                      {t("connection.modal.network.ssl.panelDescription")}
-                    </div>
-                    {!effectiveUseSSL ? (
-                      <div
-                        style={{
-                          ...modalMutedTextStyle,
-                          padding: "10px 12px",
-                          borderRadius: 12,
-                          background: darkMode
-                            ? "rgba(255,255,255,0.03)"
-                            : "rgba(16,24,40,0.04)",
-                        }}
-                      >
-                        <div>{t("connection.modal.network.ssl.disabledHint")}</div>
-                        <div style={{ marginTop: 8 }}>{sslHintText}</div>
-                      </div>
-                    ) : (
-                      <div style={tunnelSectionStyle}>
-                        <div style={{ display: "grid", gap: 8, marginBottom: 14 }}>
-                          <Text strong>
-                            {t("connection.modal.network.ssl.mode")}
-                          </Text>
-                          {renderChoiceCards({
-                            fieldName: "sslMode",
-                            value: String(sslMode),
-                            options: [
-                              {
-                                value: "preferred",
-                                label: t(
-                                  "connection.modal.network.ssl_mode.preferred",
-                                ),
-                                description: t(
-                                  "connection.modal.network.ssl.preferred.description",
-                                ),
-                              },
-                              {
-                                value: "required",
-                                label: t(
-                                  "connection.modal.network.ssl_mode.required",
-                                ),
-                                description: t(
-                                  "connection.modal.network.ssl.required.description",
-                                ),
-                              },
-                              {
-                                value: "skip-verify",
-                                label: t(
-                                  "connection.modal.network.ssl_mode.skip_verify",
-                                ),
-                                description: t(
-                                  "connection.modal.network.ssl.skipVerify.description",
-                                ),
-                              },
-                            ],
-                          })}
-                        </div>
-                        {(supportsSSLCAPath || supportsSSLClientCertificate) && (
-                          <div style={{ display: "grid", gap: 8, marginBottom: 12 }}>
-                            {supportsSSLCAPath && (
-                              <Form.Item
-                                label={
-                                  dbType === "sqlserver"
-                                    ? t(
-                                        "connection.modal.network.ssl.serverCaPath",
-                                      )
-                                    : t(
-                                        "connection.modal.network.ssl.caPath",
-                                      )
-                                }
-                                style={{ marginBottom: 0 }}
-                              >
-                                <Space.Compact style={{ width: "100%" }}>
-                                  <Form.Item name="sslCAPath" noStyle>
-                                    <Input
-                                      {...noAutoCapInputProps}
-                                      placeholder={t(
-                                        "connection.modal.example",
-                                        { value: "C:\\certs\\ca.pem" },
-                                      )}
-                                    />
-                                  </Form.Item>
-                                  <Button
-                                    onClick={() => handleSelectCertificateFile("sslCAPath", "ca")}
-                                    loading={selectingCertificateField === "sslCAPath"}
-                                  >
-                                    {t("connection.modal.action.browse")}
-                                  </Button>
-                                </Space.Compact>
-                              </Form.Item>
-                            )}
-                            {supportsSSLClientCertificate && (
-                              <>
-                                <Form.Item
-                                  label={
-                                    dbType === "dameng"
-                                      ? t(
-                                          "connection.modal.network.ssl.damengCertPath",
-                                        )
-                                      : t(
-                                          "connection.modal.network.ssl.certPath",
-                                        )
-                                  }
-                                  rules={[
-                                    {
-                                      required: dbType === "dameng",
-                                      message: t(
-                                        "connection.modal.network.ssl.certRequired",
-                                      ),
-                                    },
-                                  ]}
-                                  style={{ marginBottom: 0 }}
-                                >
-                                  <Space.Compact style={{ width: "100%" }}>
-                                    <Form.Item name="sslCertPath" noStyle>
-                                      <Input
-                                        {...noAutoCapInputProps}
-                                        placeholder={t(
-                                          "connection.modal.example",
-                                          {
-                                            value:
-                                              "C:\\certs\\client-cert.pem",
-                                          },
-                                        )}
-                                      />
-                                    </Form.Item>
-                                    <Button
-                                      onClick={() => handleSelectCertificateFile("sslCertPath", "client-cert")}
-                                      loading={selectingCertificateField === "sslCertPath"}
-                                    >
-                                      {t("connection.modal.action.browse")}
-                                    </Button>
-                                  </Space.Compact>
-                                </Form.Item>
-                                <Form.Item
-                                  label={
-                                    dbType === "dameng"
-                                      ? t(
-                                          "connection.modal.network.ssl.damengKeyPath",
-                                        )
-                                      : t(
-                                          "connection.modal.network.ssl.keyPath",
-                                        )
-                                  }
-                                  rules={[
-                                    {
-                                      required: dbType === "dameng",
-                                      message: t(
-                                        "connection.modal.network.ssl.keyRequired",
-                                      ),
-                                    },
-                                  ]}
-                                  style={{ marginBottom: 0 }}
-                                >
-                                  <Space.Compact style={{ width: "100%" }}>
-                                    <Form.Item name="sslKeyPath" noStyle>
-                                      <Input
-                                        {...noAutoCapInputProps}
-                                        placeholder={t(
-                                          "connection.modal.example",
-                                          {
-                                            value:
-                                              "C:\\certs\\client-key.pem",
-                                          },
-                                        )}
-                                      />
-                                    </Form.Item>
-                                    <Button
-                                      onClick={() => handleSelectCertificateFile("sslKeyPath", "client-key")}
-                                      loading={selectingCertificateField === "sslKeyPath"}
-                                    >
-                                      {t("connection.modal.action.browse")}
-                                    </Button>
-                                  </Space.Compact>
-                                </Form.Item>
-                              </>
-                            )}
-                          </div>
-                        )}
-                        <Text type="secondary" style={{ fontSize: 12 }}>
-                          {sslHintText}
-                        </Text>
-                      </div>
-                    )}
-                  </div>
-                );
-              }
-              if (resolvedNetworkConfig === "ssh") {
-                return (
-                  <div style={{ ...modalInnerSectionStyle, padding: 14 }}>
-                    <div
-                      style={{
-                        marginBottom: 8,
-                        color: darkMode ? "#f5f7ff" : "#162033",
-                        fontSize: 14,
-                        fontWeight: 700,
-                      }}
-                    >
-                      {t("connection.modal.network.ssh.title")}
-                    </div>
-                    <div style={{ ...modalMutedTextStyle, marginBottom: 14 }}>
-                      {t("connection.modal.network.ssh.panelDescription")}
-                    </div>
-                  {!effectiveUseSSH ? (
-                      <div
-                        style={{
-                          ...modalMutedTextStyle,
-                          padding: "10px 12px",
-                          borderRadius: 12,
-                          background: darkMode
-                            ? "rgba(255,255,255,0.03)"
-                            : "rgba(16,24,40,0.04)",
-                        }}
-                      >
-                        {t("connection.modal.network.ssh.disabledHint")}
-                      </div>
-                    ) : (
-                      <div style={tunnelSectionStyle}>
-                        <div
-                          style={{
-                            display: "grid",
-                            gridTemplateColumns: "minmax(0, 1fr) 120px",
-                            gap: 16,
-                          }}
-                        >
-                          <Form.Item
-                            name="sshHost"
-                            label={t("connection.modal.network.ssh.host")}
-                            rules={[
-                              {
-                                required: useSSH,
-                                message: t(
-                                  "connection.modal.network.ssh.hostRequired",
-                                ),
-                              },
-                            ]}
-                            style={{ flex: 1 }}
-                          >
-                            <Input
-                              {...noAutoCapInputProps}
-                              placeholder={t("connection.modal.example.or", {
-                                first: "ssh.example.com",
-                                second: "192.168.1.100",
-                              })}
-                            />
-                          </Form.Item>
-                          <Form.Item
-                            name="sshPort"
-                            label={t("connection.modal.field.port.label")}
-                            rules={[
-                              {
-                                required: useSSH,
-                                message: t(
-                                  "connection.modal.network.ssh.portRequired",
-                                ),
-                              },
-                            ]}
-                            style={{ width: 100 }}
-                          >
-                            <InputNumber style={{ width: "100%" }} />
-                          </Form.Item>
-                        </div>
-                        <div
-                          style={{
-                            display: "grid",
-                            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                            gap: 16,
-                          }}
-                        >
-                          <Form.Item
-                            name="sshUser"
-                            label={t("connection.modal.network.ssh.user")}
-                            rules={[
-                              {
-                                required: useSSH,
-                                message: t(
-                                  "connection.modal.network.ssh.userRequired",
-                                ),
-                              },
-                            ]}
-                            style={{ flex: 1 }}
-                          >
-                            <Input
-                              {...noAutoCapInputProps}
-                              placeholder={t("connection.modal.example", {
-                                value: "root",
-                              })}
-                            />
-                          </Form.Item>
-                          <Form.Item
-                            name="sshPassword"
-                            label={t("connection.modal.network.ssh.password")}
-                            style={{ flex: 1 }}
-                          >
-                            <Input.Password
-                              {...noAutoCapInputProps}
-                              placeholder={getStoredSecretPlaceholder({
-                                hasStoredSecret: initialValues?.hasSSHPassword,
-                                emptyPlaceholder: t(
-                                  "connection.modal.field.password.placeholder",
-                                ),
-                                retainedLabel: t(
-                                  "connection.modal.network.ssh.retained",
-                                ),
-                              })}
-                            />
-                          </Form.Item>
-                        </div>
-                      <Form.Item
-                        label={t("connection.modal.network.ssh.keyPath")}
-                          help={t("connection.modal.example", {
-                            value: "/Users/name/.ssh/id_rsa",
-                          })}
-                      >
-                          <Space.Compact style={{ width: "100%" }}>
-                            <Form.Item name="sshKeyPath" noStyle>
-                              <Input
-                                {...noAutoCapInputProps}
-                                placeholder={t(
-                                  "connection.modal.network.ssh.keyPathPlaceholder",
-                                )}
-                              />
-                            </Form.Item>
-                            <Button
-                              onClick={handleSelectSSHKeyFile}
-                              loading={selectingSSHKey}
-                            >
-                              {t("connection.modal.action.browse")}
-                            </Button>
-                          </Space.Compact>
-                        </Form.Item>
-                        {renderStoredSecretControls({
-                          fieldName: "sshPassword",
-                          clearKey: "sshPassword",
-                          hasStoredSecret: initialValues?.hasSSHPassword,
-                          clearLabel: t(
-                            "connection.modal.network.ssh.clearPassword",
-                          ),
-                          description: t(
-                            "connection.modal.network.ssh.savedDescription",
-                          ),
-                        })}
-                      </div>
-                    )}
-                  </div>
-                );
-              }
-              if (resolvedNetworkConfig === "proxy") {
-                return (
-                  <div style={{ ...modalInnerSectionStyle, padding: 14 }}>
-                    <div
-                      style={{
-                        marginBottom: 8,
-                        color: darkMode ? "#f5f7ff" : "#162033",
-                        fontSize: 14,
-                        fontWeight: 700,
-                      }}
-                    >
-                      {t("connection.modal.network.proxy.title")}
-                    </div>
-                    <div style={{ ...modalMutedTextStyle, marginBottom: 14 }}>
-                      {t("connection.modal.network.proxy.panelDescription")}
-                    </div>
-                    {!effectiveUseProxy ? (
-                      <div
-                        style={{
-                          ...modalMutedTextStyle,
-                          padding: "10px 12px",
-                          borderRadius: 12,
-                          background: darkMode
-                            ? "rgba(255,255,255,0.03)"
-                            : "rgba(16,24,40,0.04)",
-                        }}
-                      >
-                        {t("connection.modal.network.proxy.disabledHint")}
-                      </div>
-                    ) : (
-                      <div style={tunnelSectionStyle}>
-                        <Form.Item
-                          name="proxyHost"
-                          label={t("connection.modal.network.proxy.host")}
-                          rules={[
-                            {
-                              required: useProxy,
-                              message: t(
-                                "connection.modal.network.proxy.hostRequired",
-                              ),
-                            },
-                          ]}
-                        >
-                          <Input
-                            {...noAutoCapInputProps}
-                            placeholder={t("connection.modal.example.or", {
-                              first: "127.0.0.1",
-                              second: "proxy.company.com",
-                            })}
-                          />
-                        </Form.Item>
-                        <div
-                          style={{
-                            display: "grid",
-                            gridTemplateColumns: "minmax(0, 1fr) 120px",
-                            gap: 16,
-                          }}
-                        >
-                          <div style={{ display: "grid", gap: 8 }}>
-                            <Text strong>
-                              {t("connection.modal.network.proxy.type")}
-                            </Text>
-                            {renderChoiceCards({
-                              fieldName: "proxyType",
-                              value: String(proxyType),
-                              minWidth: 150,
-                              options: [
-                                {
-                                  value: "socks5",
-                                  label: "SOCKS5",
-                                  description: t(
-                                    "connection.modal.network.proxy.socks5.description",
-                                  ),
-                                },
-                                {
-                                  value: "http",
-                                  label: "HTTP CONNECT",
-                                  description: t(
-                                    "connection.modal.network.proxy.http.description",
-                                  ),
-                                },
-                              ],
-                            })}
-                          </div>
-                          <Form.Item
-                            name="proxyPort"
-                            label={t("connection.modal.field.port.label")}
-                            rules={[
-                              {
-                                required: useProxy,
-                                message: t(
-                                  "connection.modal.network.proxy.portRequired",
-                                ),
-                              },
-                            ]}
-                            style={{ marginBottom: 0 }}
-                          >
-                            <InputNumber
-                              style={{ width: "100%" }}
-                              min={1}
-                              max={65535}
-                            />
-                          </Form.Item>
-                        </div>
-                        <div
-                          style={{
-                            display: "grid",
-                            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                            gap: 16,
-                          }}
-                        >
-                          <Form.Item
-                            name="proxyUser"
-                            label={t("connection.modal.network.proxy.user")}
-                            style={{ flex: 1 }}
-                          >
-                            <Input
-                              {...noAutoCapInputProps}
-                              placeholder={t(
-                                "connection.modal.network.proxy.noAuth",
-                              )}
-                            />
-                          </Form.Item>
-                          <Form.Item
-                            name="proxyPassword"
-                            label={t(
-                              "connection.modal.network.proxy.password",
-                            )}
-                            style={{ flex: 1 }}
-                          >
-                            <Input.Password
-                              {...noAutoCapInputProps}
-                              placeholder={getStoredSecretPlaceholder({
-                                hasStoredSecret:
-                                  initialValues?.hasProxyPassword,
-                                emptyPlaceholder: t(
-                                  "connection.modal.network.proxy.noAuth",
-                                ),
-                                retainedLabel: t(
-                                  "connection.modal.network.proxy.retained",
-                                ),
-                              })}
-                            />
-                          </Form.Item>
-                        </div>
-                        {renderStoredSecretControls({
-                          fieldName: "proxyPassword",
-                          clearKey: "proxyPassword",
-                          hasStoredSecret: initialValues?.hasProxyPassword,
-                          clearLabel: t(
-                            "connection.modal.network.proxy.clearPassword",
-                          ),
-                          description: t(
-                            "connection.modal.network.proxy.savedDescription",
-                          ),
-                        })}
-                      </div>
-                    )}
-                  </div>
-                );
-              }
-              return (
-                <div style={{ ...modalInnerSectionStyle, padding: 14 }}>
-                  <div
-                    style={{
-                      marginBottom: 8,
-                      color: darkMode ? "#f5f7ff" : "#162033",
-                      fontSize: 14,
-                      fontWeight: 700,
-                    }}
-                  >
-                    {t("connection.modal.network.httpTunnel.title")}
-                  </div>
-                  <div style={{ ...modalMutedTextStyle, marginBottom: 14 }}>
-                    {t(
-                      "connection.modal.network.httpTunnel.panelDescription",
-                    )}
-                  </div>
-                  {!effectiveUseHttpTunnel ? (
-                    <div
-                      style={{
-                        ...modalMutedTextStyle,
-                        padding: "10px 12px",
-                        borderRadius: 12,
-                        background: darkMode
-                          ? "rgba(255,255,255,0.03)"
-                          : "rgba(16,24,40,0.04)",
-                      }}
-                    >
-                      {t("connection.modal.network.httpTunnel.disabledHint")}
-                    </div>
-                  ) : (
-                    <div style={tunnelSectionStyle}>
-                      <div
-                        style={{
-                          display: "grid",
-                          gridTemplateColumns: "minmax(0, 1fr) 120px",
-                          gap: 16,
-                        }}
-                      >
-                        <Form.Item
-                          name="httpTunnelHost"
-                          label={t(
-                            "connection.modal.network.httpTunnel.host",
-                          )}
-                          rules={[
-                            {
-                              required: useHttpTunnel,
-                              message: t(
-                                "connection.modal.network.httpTunnel.hostRequired",
-                              ),
-                            },
-                          ]}
-                          style={{ flex: 1 }}
-                        >
-                          <Input
-                            {...noAutoCapInputProps}
-                            placeholder={t("connection.modal.example.or", {
-                              first: "tunnel.company.com",
-                              second: "127.0.0.1",
-                            })}
-                          />
-                        </Form.Item>
-                        <Form.Item
-                          name="httpTunnelPort"
-                          label={t("connection.modal.field.port.label")}
-                          rules={[
-                            {
-                              required: useHttpTunnel,
-                              message: t(
-                                "connection.modal.network.httpTunnel.portRequired",
-                              ),
-                            },
-                          ]}
-                          style={{ width: 120 }}
-                        >
-                          <InputNumber
-                            style={{ width: "100%" }}
-                            min={1}
-                            max={65535}
-                          />
-                        </Form.Item>
-                      </div>
-                      <div
-                        style={{
-                          display: "grid",
-                          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                          gap: 16,
-                        }}
-                      >
-                        <Form.Item
-                          name="httpTunnelUser"
-                          label={t(
-                            "connection.modal.network.httpTunnel.user",
-                          )}
-                          style={{ flex: 1 }}
-                        >
-                          <Input
-                            {...noAutoCapInputProps}
-                            placeholder={t(
-                              "connection.modal.network.proxy.noAuth",
-                            )}
-                          />
-                        </Form.Item>
-                        <Form.Item
-                          name="httpTunnelPassword"
-                          label={t(
-                            "connection.modal.network.httpTunnel.password",
-                          )}
-                          style={{ flex: 1 }}
-                        >
-                          <Input.Password
-                            {...noAutoCapInputProps}
-                            placeholder={getStoredSecretPlaceholder({
-                              hasStoredSecret:
-                                initialValues?.hasHttpTunnelPassword,
-                              emptyPlaceholder: t(
-                                "connection.modal.network.proxy.noAuth",
-                              ),
-                              retainedLabel: t(
-                                "connection.modal.network.httpTunnel.retained",
-                              ),
-                            })}
-                          />
-                        </Form.Item>
-                      </div>
-                      {renderStoredSecretControls({
-                        fieldName: "httpTunnelPassword",
-                        clearKey: "httpTunnelPassword",
-                        hasStoredSecret: initialValues?.hasHttpTunnelPassword,
-                        clearLabel: t(
-                          "connection.modal.network.httpTunnel.clearPassword",
-                        ),
-                        description: t(
-                          "connection.modal.network.httpTunnel.savedDescription",
-                        ),
-                      })}
-                      <Text type="secondary" style={{ fontSize: 12 }}>
-                        {t(
-                          "connection.modal.network.httpTunnel.exclusiveHint",
-                        )}
-                      </Text>
-                    </div>
-                  )}
-                </div>
-              );
-            };
-
-            return (
-              <div style={modalInnerSectionStyle}>
-                <div
-                  style={{
-                    marginBottom: 12,
-                    color: darkMode ? "#f5f7ff" : "#162033",
-                    fontSize: 14,
-                    fontWeight: 700,
-                  }}
-                >
-                  {t("connection.modal.network.title")}
-                </div>
-                <div style={{ ...modalMutedTextStyle, marginBottom: 16 }}>
-                  {t("connection.modal.network.description")}
-                </div>
-                <div
-                  style={{
-                    display: "grid",
-                    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                    gap: 12,
-                    marginBottom: 16,
-                  }}
-                >
-                  {networkItems.map((item) => {
-                    const active = item.key === resolvedNetworkConfig;
-                    const activeColor = darkMode ? "#ffd666" : "#1677ff";
-                    return (
-                      <div
-                        key={item.key}
-                        role="button"
-                        tabIndex={0}
-                        onClick={() => setActiveNetworkConfig(item.key)}
-                        onKeyDown={(event) => {
-                          if (event.key === "Enter" || event.key === " ") {
-                            event.preventDefault();
-                            setActiveNetworkConfig(item.key);
-                          }
-                        }}
-                        style={{
-                          ...getConnectionOptionCardStyle(item.enabled),
-                          borderColor: active
-                            ? darkMode
-                              ? "rgba(255,214,102,0.46)"
-                              : "rgba(24,144,255,0.36)"
-                            : "transparent",
-                          background: active
-                            ? darkMode
-                              ? "linear-gradient(180deg, rgba(255,214,102,0.14) 0%, rgba(255,214,102,0.08) 100%)"
-                              : "linear-gradient(180deg, rgba(24,144,255,0.12) 0%, rgba(24,144,255,0.06) 100%)"
-                            : getConnectionOptionCardStyle(item.enabled)
-                                .background,
-                          boxShadow: active
-                            ? darkMode
-                              ? "0 0 0 1px rgba(255,214,102,0.18) inset, 0 12px 26px rgba(0,0,0,0.16)"
-                              : "0 0 0 1px rgba(24,144,255,0.14) inset, 0 12px 22px rgba(24,144,255,0.10)"
-                            : "none",
-                          cursor: "pointer",
-                          outline: "none",
-                        }}
-                      >
-                        <div
-                          style={{
-                            display: "flex",
-                            alignItems: "flex-start",
-                            gap: 10,
-                          }}
-                        >
-                          <div
-                            style={{
-                              width: 8,
-                              height: 8,
-                              marginTop: 8,
-                              borderRadius: 999,
-                              background: active ? activeColor : "transparent",
-                              border: active
-                                ? "none"
-                                : darkMode
-                                  ? "1px solid rgba(255,255,255,0.12)"
-                                  : "1px solid rgba(16,24,40,0.12)",
-                              flexShrink: 0,
-                            }}
-                          />
-                          <div
-                            style={{
-                              display: "flex",
-                              alignItems: "flex-start",
-                              gap: 10,
-                              minWidth: 0,
-                              flex: 1,
-                            }}
-                          >
-                            <Form.Item
-                              name={
-                                item.key === "ssl"
-                                  ? "useSSL"
-                                  : item.key === "ssh"
-                                    ? "useSSH"
-                                    : item.key === "proxy"
-                                      ? "useProxy"
-                                      : "useHttpTunnel"
-                              }
-                              valuePropName="checked"
-                              noStyle
-                            >
-                              <Checkbox />
-                            </Form.Item>
-                            <div style={{ minWidth: 0, flex: 1 }}>
-                              <div
-                                style={{
-                                  display: "flex",
-                                  alignItems: "center",
-                                  justifyContent: "space-between",
-                                  gap: 8,
-                                }}
-                              >
-                                <span
-                                  style={{
-                                    fontSize: 14,
-                                    fontWeight: 700,
-                                    color: darkMode ? "#f5f7ff" : "#162033",
-                                  }}
-                                >
-                                  {item.title}
-                                </span>
-                                <div
-                                  style={{
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: 8,
-                                  }}
-                                >
-                                  {active && (
-                                    <span
-                                      style={{
-                                        padding: "2px 8px",
-                                        borderRadius: 999,
-                                        fontSize: 11,
-                                        fontWeight: 700,
-                                        color: activeColor,
-                                        background: darkMode
-                                          ? "rgba(255,214,102,0.16)"
-                                          : "rgba(24,144,255,0.12)",
-                                      }}
-                                    >
-                                      {t(
-                                        "connection.modal.network.currentEditing",
-                                      )}
-                                    </span>
-                                  )}
-                                  <span
-                                    style={{
-                                      fontSize: 11,
-                                      fontWeight: 700,
-                                      color: item.enabled
-                                        ? activeColor
-                                        : darkMode
-                                          ? "rgba(255,255,255,0.38)"
-                                          : "rgba(16,24,40,0.36)",
-                                    }}
-                                  >
-                                    {item.enabled
-                                      ? t("connection.modal.network.enabled")
-                                      : t(
-                                          "connection.modal.network.notEnabled",
-                                        )}
-                                  </span>
-                                </div>
-                              </div>
-                              <div
-                                style={{
-                                  marginTop: 4,
-                                  ...modalMutedTextStyle,
-                                  color: active
-                                    ? darkMode
-                                      ? "rgba(255,255,255,0.72)"
-                                      : "rgba(22,32,51,0.68)"
-                                    : modalMutedTextStyle.color,
-                                }}
-                              >
-                                {item.description}
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-                <div style={{ marginBottom: 16 }}>{renderNetworkPanel()}</div>
-                <div style={{ ...modalInnerSectionStyle, padding: 12 }}>
-                  <div
-                    style={{
-                      marginBottom: 10,
-                      color: darkMode ? "#f5f7ff" : "#162033",
-                      fontSize: 13,
-                      fontWeight: 700,
-                    }}
-                  >
-                    {t("connection.modal.network.advanced.title")}
-                  </div>
-                  <Form.Item
-                    name="timeout"
-                    label={t("connection.modal.network.timeout.label")}
-                    help={t("connection.modal.network.timeout.help")}
-                    rules={[
-                      {
-                        type: "number",
-                        min: 1,
-                        max: 300,
-                        message: t("connection.modal.network.timeout.range"),
-                      },
-                    ]}
-                    style={{ marginBottom: 0 }}
-                  >
-                    <InputNumber
-                      style={{ width: "100%" }}
-                      min={1}
-                      max={300}
-                      placeholder={t("connection.modal.example", {
-                        value: "30",
-                      })}
-                    />
-                  </Form.Item>
-                </div>
-              </div>
-            );
-          })()
-        : null;
-
-    return (
-      <Form
-        form={form}
-        layout="vertical"
-        initialValues={{
-          type: "mysql",
-          host: "localhost",
-          port: 3306,
-          database: "",
-          user: "root",
-          useSSL: false,
-          sslMode: "preferred",
-          sslCAPath: "",
-          sslCertPath: "",
-          sslKeyPath: "",
-          useSSH: false,
-          sshPort: 22,
-          useProxy: false,
-          proxyType: "socks5",
-          proxyPort: 1080,
-          useHttpTunnel: false,
-          httpTunnelPort: 8080,
-          timeout: 30,
-          uri: "",
-          connectionParams: "",
-          oceanBaseProtocol: "mysql",
-          mysqlTopology: "single",
-          rocketmqTopology: "single",
-          mqttTopology: "single",
-          kafkaTopology: "single",
-          redisTopology: "single",
-          mongoTopology: "single",
-          mongoSrv: false,
-          mongoReadPreference: "primary",
-          mongoAuthMechanism: "",
-          savePassword: true,
-          mysqlReplicaHosts: [],
-          rocketmqHosts: [],
-          mqttHosts: [],
-          kafkaHosts: [],
-          redisHosts: [],
-          redisSentinelMaster: "",
-          redisSentinelUser: "",
-          redisSentinelPassword: "",
-          mongoHosts: [],
-          mysqlReplicaUser: "",
-          mysqlReplicaPassword: "",
-          mongoReplicaUser: "",
-          mongoReplicaPassword: "",
-          redisDB: 0,
-          jvmReadOnly: true,
-          jvmAllowedModes: ["jmx"],
-          jvmPreferredMode: "jmx",
-          jvmEnvironment: "dev",
-          jvmEndpointEnabled: false,
-          jvmEndpointBaseUrl: "",
-          jvmEndpointApiKey: "",
-          jvmAgentEnabled: false,
-          jvmAgentBaseUrl: "",
-          jvmAgentApiKey: "",
-          jvmDiagnosticEnabled: false,
-          jvmDiagnosticTransport: "agent-bridge",
-          jvmDiagnosticBaseUrl: "",
-          jvmDiagnosticTargetId: "",
-          jvmDiagnosticApiKey: "",
-          jvmDiagnosticAllowObserveCommands: true,
-          jvmDiagnosticAllowTraceCommands: false,
-          jvmDiagnosticAllowMutatingCommands: false,
-          jvmDiagnosticTimeoutSeconds: 15,
-          jvmEndpointTimeoutSeconds: 30,
-          jvmJmxHost: "",
-          jvmJmxPort: undefined,
-          jvmJmxUsername: "",
-          jvmJmxPassword: "",
-        }}
-        onValuesChange={(changed) => {
-          if (testResult) {
-            setTestResult(null);
-            setTestErrorLogOpen(false);
-          }
-          if (
-            changed.uri !== undefined ||
-            changed.connectionParams !== undefined ||
-            changed.type !== undefined ||
-            changed.oceanBaseProtocol !== undefined
-          ) {
-            setUriFeedback(null);
-          }
-          if (changed.useSSL !== undefined) {
-            setUseSSL(changed.useSSL);
-            if (changed.useSSL) setActiveNetworkConfig("ssl");
-          }
-          if (changed.useSSH !== undefined) {
-            setUseSSH(changed.useSSH);
-            if (changed.useSSH) setActiveNetworkConfig("ssh");
-          }
-          if (changed.useProxy !== undefined) {
-            const enabledProxy = !!changed.useProxy;
-            setUseProxy(enabledProxy);
-            if (enabledProxy) setActiveNetworkConfig("proxy");
-            if (enabledProxy && form.getFieldValue("useHttpTunnel")) {
-              form.setFieldValue("useHttpTunnel", false);
-              setUseHttpTunnel(false);
-            }
-          }
-          if (changed.proxyType !== undefined) {
-            const nextType = String(
-              changed.proxyType || "socks5",
-            ).toLowerCase();
-            if (nextType === "http") {
-              const currentPort = Number(form.getFieldValue("proxyPort") || 0);
-              if (!currentPort || currentPort === 1080) {
-                form.setFieldValue("proxyPort", 8080);
-              }
-            } else {
-              const currentPort = Number(form.getFieldValue("proxyPort") || 0);
-              if (!currentPort || currentPort === 8080) {
-                form.setFieldValue("proxyPort", 1080);
-              }
-            }
-          }
-          if (changed.useHttpTunnel !== undefined) {
-            const enabledHttpTunnel = !!changed.useHttpTunnel;
-            setUseHttpTunnel(enabledHttpTunnel);
-            if (enabledHttpTunnel) setActiveNetworkConfig("httpTunnel");
-            if (enabledHttpTunnel && form.getFieldValue("useProxy")) {
-              form.setFieldValue("useProxy", false);
-              setUseProxy(false);
-            }
-            if (enabledHttpTunnel) {
-              const currentPort = Number(
-                form.getFieldValue("httpTunnelPort") || 0,
-              );
-              if (!currentPort || currentPort <= 0) {
-                form.setFieldValue("httpTunnelPort", 8080);
-              }
-            }
-          }
-          if (changed.type !== undefined) setDbType(changed.type);
-          if (changed.jvmAllowedModes !== undefined) {
-            const resolvedModes = normalizeEditableJVMModes(
-              changed.jvmAllowedModes,
-            );
-            const currentPreferredMode = String(
-              form.getFieldValue("jvmPreferredMode") || "",
-            )
-              .trim()
-              .toLowerCase();
-            const resolvedPreferredMode =
-              resolvedModes.find((mode) => mode === currentPreferredMode) ||
-              resolvedModes[0];
-            form.setFieldValue("jvmAllowedModes", resolvedModes);
-            form.setFieldValue("jvmPreferredMode", resolvedPreferredMode);
-            form.setFieldValue(
-              "jvmEndpointEnabled",
-              resolvedModes.includes("endpoint"),
-            );
-            form.setFieldValue(
-              "jvmAgentEnabled",
-              resolvedModes.includes("agent"),
-            );
-          }
-          if (changed.redisTopology !== undefined) {
-            const nextRedisTopology = String(
-              changed.redisTopology || "single",
-            ).toLowerCase();
-            const currentRedisPort = Number(form.getFieldValue("port") || 0);
-            if (
-              nextRedisTopology === "sentinel" &&
-              (!currentRedisPort || currentRedisPort === 6379)
-            ) {
-              form.setFieldValue("port", 26379);
-            } else if (
-              nextRedisTopology !== "sentinel" &&
-              currentRedisPort === 26379
-            ) {
-              form.setFieldValue("port", 6379);
-            }
-            const supportedDbs = buildRedisDatabaseList(
-              form.getFieldValue("redisDB"),
-              form.getFieldValue("includeRedisDatabases"),
-            );
-            setRedisDbList(supportedDbs);
-            form.setFieldValue(
-              "includeRedisDatabases",
-              normalizeRedisDatabaseSelection(
-                form.getFieldValue("includeRedisDatabases"),
-                supportedDbs,
-              ),
-            );
-          }
-          if (
-            changed.type !== undefined ||
-            changed.host !== undefined ||
-            changed.port !== undefined ||
-            changed.mongoHosts !== undefined ||
-            changed.mongoTopology !== undefined ||
-            changed.mongoSrv !== undefined
-          ) {
-            setMongoMembers([]);
-          }
-        }}
-      >
-        <Form.Item name="type" hidden>
-          <Input {...noAutoCapInputProps} />
-        </Form.Item>
-        {currentDriverUnavailableReason && (
-          <Alert
-            showIcon
-            type="warning"
-            style={{ marginBottom: 12 }}
-            message={t("connection.modal.driver.unavailableTitle", {
-              name: currentDriverSnapshot?.name || dbType,
-            })}
-            description={
-              <Space size={8}>
-                <span>{currentDriverUnavailableReason}</span>
-                <Button
-                  type="link"
-                  size="small"
-                  onClick={() => onOpenDriverManager?.()}
-                >
-                  {t("connection.modal.driver.installAction")}
-                </Button>
-              </Space>
-            }
-          />
-        )}
-        {currentDriverUpdateReason && (
-          <Alert
-            showIcon
-            type="warning"
-            style={{ marginBottom: 12 }}
-            message={t("connection.modal.driver.updateFallback", {
-              name: currentDriverSnapshot?.name || dbType,
-            })}
-            description={
-              <Space size={8}>
-                <span>{currentDriverUpdateReason}</span>
-                <Button
-                  type="link"
-                  size="small"
-                  onClick={() => onOpenDriverManager?.()}
-                >
-                  {t("connection.modal.driver.reinstallAction")}
-                </Button>
-              </Space>
-            }
-          />
-        )}
-        {(() => {
-          const sectionItems: Array<{
-            key: "basic" | "network" | "appearance";
-            title: string;
-            description: string;
-            icon: React.ReactNode;
-          }> = [
-            {
-              key: "basic",
-              title: t("connection.modal.config.basic.title"),
-              description: isJVM
-                ? t("connection.modal.config.basic.jvmNavDescription")
-                : t("connection.modal.config.basic.navDescription"),
-              icon: <DatabaseOutlined />,
-            },
-            ...(!isCustom && !isFileDb && !isJVM
-              ? [
-                  {
-                    key: "network" as const,
-                    title: t("connection.modal.network.title"),
-                    description: t(
-                      "connection.modal.network.navDescription",
-                    ),
-                    icon: <CloudOutlined />,
-                  },
-                ]
-              : []),
-            {
-              key: "appearance",
-              title: t("connection.modal.appearance.title"),
-              description: t("connection.modal.appearance.description"),
-              icon: <BgColorsOutlined />,
-            },
-          ];
-          const resolvedSection = sectionItems.some(
-            (item) => item.key === activeConfigSection,
-          )
-            ? activeConfigSection
-            : sectionItems[0]?.key || "basic";
-
-          const effectiveIconType = customIconType || dbType;
-          const effectiveIconColor =
-            customIconColor || getDbDefaultColor(effectiveIconType);
-
-          const appearanceSection = (
-            <div style={{ display: "grid", gap: 18 }}>
-              <div style={{ ...modalInnerSectionStyle, padding: 16 }}>
-                <div
-                  style={{
-                    marginBottom: 12,
-                    fontSize: 13,
-                    fontWeight: 700,
-                    color: darkMode ? "#f5f7ff" : "#162033",
-                  }}
-                >
-                  {t("connection.modal.appearance.icon")}
-                </div>
-                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
-                  {DB_ICON_TYPES.map((iconKey) => {
-                    const isActive = effectiveIconType === iconKey;
-                    return (
-                      <button
-                        key={iconKey}
-                        type="button"
-                        title={getDbIconLabel(iconKey)}
-                        onClick={() =>
-                          setCustomIconType(
-                            iconKey === dbType ? undefined : iconKey,
-                          )
-                        }
-                        style={{
-                          width: 44,
-                          height: 44,
-                          borderRadius: 10,
-                          display: "grid",
-                          placeItems: "center",
-                          border: `2px solid ${isActive ? effectiveIconColor : darkMode ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)"}`,
-                          background: isActive
-                            ? darkMode
-                              ? "rgba(255,255,255,0.08)"
-                              : "rgba(24,144,255,0.06)"
-                            : "transparent",
-                          cursor: "pointer",
-                          transition: "all 120ms ease",
-                        }}
-                      >
-                        {getDbIcon(
-                          iconKey,
-                          isActive ? effectiveIconColor : undefined,
-                          22,
-                        )}
-                      </button>
-                    );
-                  })}
-                </div>
-                <div
-                  style={{
-                    marginTop: 6,
-                    fontSize: 11,
-                    color: darkMode
-                      ? "rgba(255,255,255,0.45)"
-                      : "rgba(0,0,0,0.35)",
-                  }}
-                >
-                  {t("connection.modal.appearance.current", {
-                    name: getDbIconLabel(effectiveIconType),
-                  })}
-                </div>
-              </div>
-              <div style={{ ...modalInnerSectionStyle, padding: 16 }}>
-                <div
-                  style={{
-                    marginBottom: 12,
-                    fontSize: 13,
-                    fontWeight: 700,
-                    color: darkMode ? "#f5f7ff" : "#162033",
-                  }}
-                >
-                  {t("connection.modal.appearance.color")}
-                </div>
-                <div
-                  style={{
-                    display: "flex",
-                    flexWrap: "wrap",
-                    gap: 8,
-                    alignItems: "center",
-                  }}
-                >
-                  {PRESET_ICON_COLORS.map((presetColor) => {
-                    const isActive = effectiveIconColor === presetColor;
-                    return (
-                      <button
-                        key={presetColor}
-                        type="button"
-                        onClick={() =>
-                          setCustomIconColor(
-                            presetColor === getDbDefaultColor(effectiveIconType)
-                              ? undefined
-                              : presetColor,
-                          )
-                        }
-                        style={{
-                          width: 28,
-                          height: 28,
-                          borderRadius: 8,
-                          background: presetColor,
-                          border: isActive
-                            ? `2.5px solid ${darkMode ? "#fff" : "#162033"}`
-                            : "2px solid transparent",
-                          cursor: "pointer",
-                          transition: "all 120ms ease",
-                          boxShadow: isActive
-                            ? `0 0 0 2px ${presetColor}40`
-                            : "none",
-                        }}
-                      />
-                    );
-                  })}
-                  <input
-                    type="color"
-                    value={effectiveIconColor}
-                    onChange={(e) =>
-                      setCustomIconColor(
-                        e.target.value === getDbDefaultColor(effectiveIconType)
-                          ? undefined
-                          : e.target.value,
-                      )
-                    }
-                    title={t("connection.modal.appearance.customColor")}
-                    style={{
-                      width: 28,
-                      height: 28,
-                      border: "none",
-                      padding: 0,
-                      cursor: "pointer",
-                      borderRadius: 6,
-                      background: "transparent",
-                    }}
-                  />
-                </div>
-              </div>
-              <div
-                style={{
-                  ...modalInnerSectionStyle,
-                  padding: 16,
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 14,
-                }}
-              >
-                <div
-                  style={{
-                    fontSize: 13,
-                    fontWeight: 700,
-                    color: darkMode ? "#f5f7ff" : "#162033",
-                  }}
-                >
-                  {t("connection.modal.appearance.preview")}
-                </div>
-                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-                  {getDbIcon(effectiveIconType, effectiveIconColor, 24)}
-                  <span
-                    style={{
-                      fontSize: 14,
-                      color: darkMode ? "#e0e0e0" : "#333",
-                    }}
-                  >
-                    {form.getFieldValue("name") ||
-                      t("connection.modal.appearance.previewName")}
-                  </span>
-                </div>
-                {(customIconType || customIconColor) && (
-                  <Button
-                    size="small"
-                    type="link"
-                    onClick={() => {
-                      setCustomIconType(undefined);
-                      setCustomIconColor(undefined);
-                    }}
-                  >
-                    {t("connection.modal.appearance.reset")}
-                  </Button>
-                )}
-              </div>
-            </div>
-          );
-
-          const currentSectionContent =
-            resolvedSection === "basic"
-              ? baseInfoSection
-              : resolvedSection === "appearance"
-                ? appearanceSection
-                : networkSecuritySection;
-
-          if (sectionItems.length <= 1) {
-            return currentSectionContent;
-          }
-
-          return (
-            <div
-              style={{
-                display: "grid",
-                gridTemplateColumns: "220px minmax(0, 1fr)",
-                gap: 18,
-                alignItems: "start",
-              }}
-            >
-              <div
-                style={{
-                  ...modalInnerSectionStyle,
-                  padding: 12,
-                  position: "sticky",
-                  top: 0,
-                }}
-              >
-                <div
-                  style={{
-                    marginBottom: 12,
-                    color: darkMode ? "#f5f7ff" : "#162033",
-                    fontSize: 13,
-                    fontWeight: 700,
-                    letterSpacing: 0.2,
-                  }}
-                >
-                  {t("connection.modal.config.sections")}
-                </div>
-                <div style={{ display: "grid", gap: 10 }}>
-                  {sectionItems.map((item) => {
-                    const active = item.key === resolvedSection;
-                    return (
-                      <button
-                        key={item.key}
-                        type="button"
-                        onClick={() => setActiveConfigSection(item.key)}
-                        style={{
-                          textAlign: "left",
-                          padding: "12px 12px 12px 14px",
-                          borderRadius: 14,
-                          border: `1px solid ${
-                            active
-                              ? darkMode
-                                ? "rgba(255,214,102,0.3)"
-                                : "rgba(24,144,255,0.24)"
-                              : darkMode
-                                ? "rgba(255,255,255,0.045)"
-                                : "rgba(16,24,40,0.055)"
-                          }`,
-                          background: active
-                            ? darkMode
-                              ? "linear-gradient(180deg, rgba(255,214,102,0.12) 0%, rgba(255,214,102,0.06) 100%)"
-                              : "linear-gradient(180deg, rgba(24,144,255,0.10) 0%, rgba(24,144,255,0.05) 100%)"
-                            : darkMode
-                              ? "rgba(255,255,255,0.02)"
-                              : "rgba(255,255,255,0.7)",
-                          color: active
-                            ? darkMode
-                              ? "#f5f7ff"
-                              : "#162033"
-                            : darkMode
-                              ? "rgba(255,255,255,0.76)"
-                              : "#3f4b5e",
-                          cursor: "pointer",
-                          transition: "all 120ms ease",
-                          boxShadow: active
-                            ? darkMode
-                              ? "0 10px 24px rgba(0,0,0,0.18)"
-                              : "0 10px 22px rgba(24,144,255,0.08)"
-                            : "none",
-                        }}
-                      >
-                        <div
-                          style={{
-                            display: "flex",
-                            alignItems: "flex-start",
-                            gap: 10,
-                          }}
-                        >
-                          <div
-                            style={{
-                              width: 30,
-                              height: 30,
-                              borderRadius: 10,
-                              display: "grid",
-                              placeItems: "center",
-                              flexShrink: 0,
-                              background: active
-                                ? darkMode
-                                  ? "rgba(255,214,102,0.16)"
-                                  : "rgba(24,144,255,0.14)"
-                                : darkMode
-                                  ? "rgba(255,255,255,0.05)"
-                                  : "rgba(16,24,40,0.05)",
-                              color: active
-                                ? darkMode
-                                  ? "#ffd666"
-                                  : "#1677ff"
-                                : darkMode
-                                  ? "rgba(255,255,255,0.55)"
-                                  : "#627089",
-                            }}
-                          >
-                            {item.icon}
-                          </div>
-                          <div style={{ minWidth: 0, flex: 1 }}>
-                            <div
-                              style={{
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "space-between",
-                                gap: 8,
-                              }}
-                            >
-                              <span style={{ fontSize: 14, fontWeight: 700 }}>
-                                {item.title}
-                              </span>
-                              <span
-                                style={{
-                                  width: 8,
-                                  height: 8,
-                                  borderRadius: 999,
-                                  background: active
-                                    ? darkMode
-                                      ? "#ffd666"
-                                      : "#1677ff"
-                                    : "transparent",
-                                  border: active
-                                    ? "none"
-                                    : darkMode
-                                      ? "1px solid rgba(255,255,255,0.12)"
-                                      : "1px solid rgba(16,24,40,0.12)",
-                                }}
-                              />
-                            </div>
-                            <div
-                              style={{
-                                marginTop: 5,
-                                fontSize: 12,
-                                lineHeight: 1.55,
-                                color: active
-                                  ? darkMode
-                                    ? "rgba(255,255,255,0.68)"
-                                    : "rgba(22,32,51,0.68)"
-                                  : darkMode
-                                    ? "rgba(255,255,255,0.42)"
-                                    : "rgba(63,75,94,0.62)",
-                              }}
-                            >
-                              {item.description}
-                            </div>
-                          </div>
-                        </div>
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-              <div style={{ minWidth: 0 }}>{currentSectionContent}</div>
-            </div>
-          );
-        })()}
-      </Form>
-    );
-  };
+  const renderStep2 = () => (
+    <ConnectionModalStep2
+      {...{
+        activeConfigSection,
+        activeNetworkConfig,
+        buildRedisDatabaseList,
+        clearConnectionTestResultForChoice,
+        connectionConfigLayout,
+        createCustomDsnRule,
+        createUriAwareRequiredRule,
+        currentDriverSnapshot,
+        currentDriverUnavailableReason,
+        currentDriverUpdateReason,
+        customIconColor,
+        customIconType,
+        darkMode,
+        dbList,
+        dbType,
+        discoveringMembers,
+        form,
+        getConnectionOptionCardStyle,
+        handleCopyURI,
+        handleDiscoverMongoMembers,
+        handleGenerateURI,
+        handleJvmModeCardSelect,
+        handleJvmModeToggle,
+        handleParseURI,
+        handleSelectCertificateFile,
+        handleSelectDatabaseFile,
+        handleSelectSSHKeyFile,
+        initialValues,
+        isCustom,
+        isFileDb,
+        isJVM,
+        isKafka,
+        isMQTT,
+        isMySQLLike,
+        isOceanBaseOracle,
+        isRedis,
+        isRocketMQ,
+        isSSLType,
+        jvmDiagnosticEnabled,
+        jvmDiagnosticTransport,
+        jvmEnvironment,
+        jvmPreferredMode,
+        jvmSectionCardStyle,
+        kafkaTopology,
+        modalInnerSectionStyle,
+        modalMutedTextStyle,
+        mongoAuthMechanism,
+        mongoMembers,
+        mongoReadPreference,
+        mongoSrv,
+        mongoTopology,
+        mqttTopology,
+        mysqlTopology,
+        normalizeRedisDatabaseSelection,
+        normalizedJvmAllowedModes,
+        oceanBaseProtocol,
+        onOpenDriverManager,
+        primaryPasswordVisible,
+        proxyType,
+        redisDbList,
+        redisTopology,
+        renderChoiceCards,
+        renderConfigSectionCard,
+        renderJvmSectionHeader,
+        renderStoredSecretControls,
+        resolvedUriFeedbackMessage,
+        rocketmqTopology,
+        selectingCertificateField,
+        selectingDbFile,
+        selectingSSHKey,
+        setActiveConfigSection,
+        setActiveNetworkConfig,
+        setChoiceFieldValue,
+        setCustomIconColor,
+        setCustomIconType,
+        setDbType,
+        setMongoMembers,
+        setPrimaryPasswordVisible,
+        setRedisDbList,
+        setTestErrorLogOpen,
+        setTestResult,
+        setUriFeedback,
+        setUseHttpTunnel,
+        setUseProxy,
+        setUseSSH,
+        setUseSSL,
+        sslHintText,
+        sslMode,
+        supportsConnectionParams,
+        supportsSSLCAPath,
+        supportsSSLClientCertificate,
+        testResult,
+        tunnelSectionStyle,
+        unsupportedJvmModeMessage,
+        uriFeedback,
+        useHttpTunnel,
+        useProxy,
+        useSSH,
+        useSSL,
+      }}
+    />
+  );
 
   const getFooter = () => {
     if (step === 1) {
diff --git a/frontend/src/components/DataGrid.layout.test.tsx b/frontend/src/components/DataGrid.layout.test.tsx
index 3902d89..2e79517 100644
--- a/frontend/src/components/DataGrid.layout.test.tsx
+++ b/frontend/src/components/DataGrid.layout.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { readFileSync } from 'node:fs';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, expect, it, vi } from 'vitest';
+import { readV2ThemeCss } from '../test/readV2ThemeCss';
 
 import DataGrid, {
   buildGridFieldSelectOptions,
@@ -23,6 +24,17 @@ import { getCurrentLanguage, setCurrentLanguage, type LanguagePreference } from
 import { V2CellContextMenuView } from './V2TableContextMenu';
 import { cloneShortcutOptions, DEFAULT_SHORTCUT_OPTIONS } from '../utils/shortcuts';
 
+const readDataGridSource = () => [
+  './useDataGridBatchActions.ts',
+  './DataGrid.tsx',
+  './useDataGridV2Actions.ts',
+  './useDataGridMetadata.ts',
+  './useDataGridColumnResize.ts',
+  './dataGridStyles.ts',
+  './DataGridCore.tsx',
+  './DataGridShell.tsx',
+].map((file) => readFileSync(new URL(file, import.meta.url), 'utf8')).join('\n');
+
 const mockStoreState = vi.hoisted(() => ({
   languagePreference: 'system' as LanguagePreference,
   uiVersion: 'v2',
@@ -88,6 +100,21 @@ vi.mock('@monaco-editor/react', () => ({
   ),
 }));
 
+const requestAnimationFrameMock = vi.fn((callback: FrameRequestCallback) => {
+  callback(0);
+  return 1;
+});
+const cancelAnimationFrameMock = vi.fn();
+
+vi.stubGlobal('requestAnimationFrame', requestAnimationFrameMock);
+vi.stubGlobal('cancelAnimationFrame', cancelAnimationFrameMock);
+vi.stubGlobal('window', {
+  requestAnimationFrame: requestAnimationFrameMock,
+  cancelAnimationFrame: cancelAnimationFrameMock,
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+});
+
 const renderDataGridWithI18n = (
   element: React.ReactElement,
   options: { preference?: LanguagePreference; systemLanguages?: readonly string[] } = {},
@@ -164,7 +191,7 @@ describe('DataGrid layout', () => {
   });
 
   it('localizes DataGrid error boundary, column drag affordances, and legacy row context menu labels through i18n keys', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const expectedKeys = [
       'data_grid.error_boundary.title',
       'data_grid.error_boundary.description',
@@ -230,7 +257,7 @@ describe('DataGrid layout', () => {
   });
 
   it('localizes legacy cell context menu labels through translateDataGrid', () => {
-    const dataGridSource = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const dataGridSource = readDataGridSource();
     const legacyMenuSource = readFileSync(new URL('./DataGridLegacyCellContextMenu.tsx', import.meta.url), 'utf8');
     const legacyMountStart = dataGridSource.indexOf('<DataGridLegacyCellContextMenu');
     const legacyMountSource = dataGridSource.slice(
@@ -296,7 +323,7 @@ describe('DataGrid layout', () => {
   });
 
   it('localizes row copy and paste feedback through DataGrid i18n keys', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const rowCopyPasteFeedbackKeys = [
       'data_grid.message.select_rows_to_copy',
       'data_grid.message.copied_rows',
@@ -345,7 +372,7 @@ describe('DataGrid layout', () => {
   });
 
   it('localizes selected-column copy and paste feedback through DataGrid i18n keys', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const columnCopyPasteFeedbackKeys = [
       'data_grid.message.select_same_row_cells_to_copy',
       'data_grid.message.no_copyable_cells',
@@ -423,7 +450,7 @@ describe('DataGrid layout', () => {
   });
 
   it('localizes commit, preview SQL, and basic copy feedback in the scoped DataGrid windows', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const previewCommitCopyStart = source.indexOf('const handlePreviewChanges = useCallback');
     const clipboardRowsStart = source.indexOf('const getClipboardRows = useCallback', previewCommitCopyStart);
     expect(previewCommitCopyStart).toBeGreaterThan(-1);
@@ -478,7 +505,7 @@ describe('DataGrid layout', () => {
   });
 
   it('localizes Preview SQL Modal chrome while preserving raw SQL text and operation labels', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const previewModalStart = source.indexOf('{/* Preview SQL Modal */}');
     const importPreviewStart = source.indexOf('{/* Import Preview Modal */}', previewModalStart);
     expect(previewModalStart).toBeGreaterThan(-1);
@@ -514,7 +541,7 @@ describe('DataGrid layout', () => {
   });
 
   it('localizes query-result, selected-cell, copy-SQL, and current-row copy feedback', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const copyFeedbackStart = source.indexOf('const getClipboardRows = useCallback');
     const copyFeedbackEnd = source.indexOf('const buildConnConfig = useCallback', copyFeedbackStart);
     expect(copyFeedbackStart).toBeGreaterThan(-1);
@@ -552,7 +579,7 @@ describe('DataGrid layout', () => {
   });
 
   it('localizes batch fill feedback through DataGrid i18n keys', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const batchFillCellsKeys = [
       'data_grid.message.select_cells_to_fill',
       'data_grid.message.selected_cells_no_update',
@@ -631,7 +658,7 @@ describe('DataGrid layout', () => {
   });
 
   it('localizes editor and JSON feedback through DataGrid i18n keys', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const sliceCallback = (startMarker: string, endMarker: string) => {
       const start = source.indexOf(startMarker);
       expect(start).toBeGreaterThan(-1);
@@ -780,7 +807,7 @@ describe('DataGrid layout', () => {
       mockStoreState.uiVersion = previousUiVersion;
     }
 
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
 
     expect(source).toMatch(/import\s+\{\s*getCurrentLanguage,\s*t\s*\}\s+from\s+['"]\.\.\/i18n['"]/);
     expect(source).toMatch(/import\s+\{\s*useOptionalI18n\s*\}\s+from\s+['"]\.\.\/i18n\/provider['"]/);
@@ -942,7 +969,7 @@ describe('DataGrid layout', () => {
   });
 
   it('hides current-page find in JSON and text record views', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
 
     expect(source).toContain("const visiblePageFindContent = viewMode === 'table' ? pageFindContent : null;");
     expect(source).toContain('pageFindContent={visiblePageFindContent}');
@@ -952,7 +979,7 @@ describe('DataGrid layout', () => {
     const source = readFileSync(new URL('./DataGridSecondaryActions.tsx', import.meta.url), 'utf8');
     const columnQuickFindSource = readFileSync(new URL('./DataGridColumnQuickFind.tsx', import.meta.url), 'utf8');
     const pageFindSource = readFileSync(new URL('./DataGridPageFind.tsx', import.meta.url), 'utf8');
-    const dataGridSource = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const dataGridSource = readDataGridSource();
     const paginationSource = readFileSync(new URL('./DataGridPaginationBar.tsx', import.meta.url), 'utf8');
 
     expect(source).toContain('data-grid-legacy-secondary-actions="true"');
@@ -1028,7 +1055,7 @@ describe('DataGrid layout', () => {
   });
 
   it('keeps detached DataGrid chrome text behind translateDataGrid', () => {
-    const dataGridSource = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const dataGridSource = readDataGridSource();
     const toolbarFrameSource = readFileSync(new URL('./DataGridToolbarFrame.tsx', import.meta.url), 'utf8');
     const pageFindSource = readFileSync(new URL('./DataGridPageFind.tsx', import.meta.url), 'utf8');
     const resultViewSource = readFileSync(new URL('./DataGridResultViewSwitcher.tsx', import.meta.url), 'utf8');
@@ -1524,7 +1551,7 @@ describe('DataGrid layout', () => {
   });
 
   it('localizes DataGrid filter option labels through the filter hook translator', () => {
-    const dataGridSource = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const dataGridSource = readDataGridSource();
     const filterHookSource = readFileSync(new URL('./useDataGridFilters.tsx', import.meta.url), 'utf8');
     const filterOpOptionsStart = filterHookSource.indexOf('const filterOpOptions = React.useMemo');
     const filterLogicOptionsStart = filterHookSource.indexOf('const filterLogicOptions = React.useMemo');
@@ -1965,13 +1992,13 @@ describe('DataGrid layout', () => {
   });
 
   it('clears modified cell markers when refreshing the grid', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
 
-    expect(source).toMatch(/const handleRefreshGrid = useCallback\(\(\) => \{[\s\S]*setModifiedColumns\(\{\}\);[\s\S]*if \(onReload\) onReload\(\);[\s\S]*\}, \[clearAutoCommitTimer, onReload\]\);/);
+    expect(source).toMatch(/const handleRefreshGrid = useCallback\(\(\) => \{[\s\S]*setModifiedColumns\(\{\}\);[\s\S]*if \(onReload\) onReload\(\);[\s\S]*\}, \[[\s\S]*clearAutoCommitTimer[\s\S]*onReload[\s\S]*\]\);/);
   });
 
   it('routes temporal inline editors through the current connection config', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
 
     expect(source).toContain('const pickerType = getTemporalPickerType(columnType, dbType, connectionConfig);');
     expect(source).toContain('const pickerType = getTemporalPickerType(columnType, dbType, currentConnConfig);');
@@ -2174,7 +2201,7 @@ describe('DataGrid layout', () => {
   });
 
   it('keeps export and import chrome behind translateDataGrid while preserving raw details', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const exportDialogSource = readFileSync(new URL('./DataExportDialog.tsx', import.meta.url), 'utf8');
 
     expect(source).toContain("type DataGridExportScope = 'selected' | 'page' | 'all' | 'filteredAll';");
@@ -2200,7 +2227,7 @@ describe('DataGrid layout', () => {
   });
 
   it('keeps inline cell editors stretched to the full cell width', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
 
     expect(source).toContain('const INLINE_EDIT_FORM_ITEM_STYLE: React.CSSProperties = { margin: 0, width: \'100%\', minWidth: 0 };');
     expect(source).toContain('className="data-grid-inline-editor-form-item"');
@@ -2211,7 +2238,7 @@ describe('DataGrid layout', () => {
   });
 
   it('disables browser autocapitalization for inline cell editors', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
 
     const editorInputCount = source.match(/\{\.\.\.noAutoCapInputProps\}[\s\S]{0,180}className="data-grid-inline-editor-input"/g)?.length || 0;
 
@@ -2265,10 +2292,10 @@ describe('DataGrid layout', () => {
   });
 
   it('keeps quick WHERE input clipboard editing isolated from grid shortcuts', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const toolbarSource = readFileSync(new URL('./DataGridToolbarFrame.tsx', import.meta.url), 'utf8');
     const filterHookSource = readFileSync(new URL('./useDataGridFilters.tsx', import.meta.url), 'utf8');
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
 
     expect(filterHookSource).toContain('const handleQuickWherePaste = React.useCallback');
     expect(filterHookSource).toContain("event.clipboardData.getData('text/plain')");
@@ -2286,12 +2313,12 @@ describe('DataGrid layout', () => {
   });
 
   it('keeps DataGrid scroll synchronization throttled to animation frames', () => {
-    const source = readFileSync(new URL('./DataGrid.tsx', import.meta.url), 'utf8');
+    const source = readDataGridSource();
     const secondaryActionsSource = readFileSync(new URL('./DataGridSecondaryActions.tsx', import.meta.url), 'utf8');
     const columnTitleSource = readFileSync(new URL('./DataGridColumnTitle.tsx', import.meta.url), 'utf8');
     const columnQuickFindSource = readFileSync(new URL('./DataGridColumnQuickFind.tsx', import.meta.url), 'utf8');
     const paginationBarSource = readFileSync(new URL('./DataGridPaginationBar.tsx', import.meta.url), 'utf8');
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
 
     expect(source).toContain('virtualHorizontalElementsRef');
     expect(source).toContain('const handleSubmitColumnQuickFind = useCallback((submittedValue?: string) => {');
diff --git a/frontend/src/components/DataGrid.tsx b/frontend/src/components/DataGrid.tsx
index d038b7c..3b05716 100644
--- a/frontend/src/components/DataGrid.tsx
+++ b/frontend/src/components/DataGrid.tsx
@@ -131,6 +131,7 @@ import DataGridPaginationBar from './DataGridPaginationBar';
 import DataGridResultViewSwitcher from './DataGridResultViewSwitcher';
 import DataGridSecondaryActions from './DataGridSecondaryActions';
 import DataGridToolbarFrame from './DataGridToolbarFrame';
+import DataGridShell from './DataGridShell';
 import DataGridModals from './DataGridModals';
 import DataGridLegacyCellContextMenu from './DataGridLegacyCellContextMenu';
 import DataGridPreviewPanel from './DataGridPreviewPanel';
@@ -150,1458 +151,133 @@ import { useExportProgressDialog } from './ExportProgressModal';
 import { useDataGridFilters } from './useDataGridFilters';
 import { useDataGridDdlView } from './useDataGridDdlView';
 import { useDataGridModalEditors } from './useDataGridModalEditors';
+import { useDataGridBatchActions } from './useDataGridBatchActions';
+import { useDataGridV2Actions } from './useDataGridV2Actions';
+import { useDataGridMetadata } from './useDataGridMetadata';
+import { useDataGridColumnResize } from './useDataGridColumnResize';
 import { useDataGridPreviewPanel } from './useDataGridPreviewPanel';
 import { buildTableExportTab } from '../utils/tableExportTab';
+import { buildDataGridCssText } from './dataGridStyles';
 
 // --- Error Boundary ---
-interface DataGridErrorBoundaryState {
-    hasError: boolean;
-    error: Error | null;
-}
-
-interface DataGridErrorBoundaryProps {
-    children: React.ReactNode;
-    i18nLanguage?: string;
-}
-
-class DataGridErrorBoundary extends React.Component<
+import {
+    DataGridErrorBoundary,
+    GONAVI_ROW_KEY,
+    GONAVI_ROW_NUMBER_COLUMN_KEY,
+    CELL_KEY_SEP,
+    CELL_SELECTION_DRAG_THRESHOLD_PX,
+    DATE_TIME_CACHE_LIMIT,
+    TABLE_CELL_PREVIEW_MAX_CHARS,
+    ROW_NUMBER_COLUMN_WIDTH,
+    DATA_EDIT_AUTO_COMMIT_DELAY_OPTIONS,
+    DATA_GRID_DISPLAY_RENDER_VERSION,
+    DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION,
+    DEFAULT_GRID_MONO_FONT_FAMILY,
+    normalizedDateTimeCache,
+    objectCellPreviewCache,
+    useDataGridI18nLanguage,
+    makeCellKey,
+    splitCellKey,
+    resolveContextMenuFieldName,
+    trimSimpleCache,
+    looksLikeDateTimeText,
+    normalizeDateTimeString,
+    normalizeBitHexDisplayText,
+    isDateOnlyColumnType,
+    isOceanBaseOracleDisplayConnection,
+    normalizeOceanBaseOracleDateDisplayText,
+    formatCellDisplayText,
+    formatClipboardCellText,
+    normalizeClipboardTsvCell,
+    buildClipboardTsv,
+    renderHighlightedCellText,
+    renderCellDisplayValue,
+    formatCellValue,
+    attachDataGridVirtualEditRenderVersion,
+    attachDataGridDisplayRenderVersion,
+    hasDataGridDisplayRenderVersionChanged,
+    hasDataGridVirtualEditRenderVersionChanged,
+    toEditableText,
+    toFormText,
+    isCellValueEqualForDiff,
+    isCellValueEqualForRender,
+    INLINE_EDIT_MAX_CHARS,
+    shouldOpenModalEditor,
+    getCellFieldName,
+    setCellFieldValue,
+    looksLikeJsonText,
+    isPlainObject,
+    normalizeValueForJsonView,
+    isJsonViewValueEqual,
+    coerceJsonEditorValueForStorage,
+    ResizableTitle,
+    sortableHeaderStaticStyles,
+    SortableHeaderCell,
+    EditableContext,
+    CellContextMenuContext,
+    DataContext,
+    setGlobalDeletedRowKeys,
+    resolveEditableCellRowKey,
+    isEditableCellDeleted,
+    isEditableCellModified,
+    areEditableCellPropsEqual,
+    EditableCell,
+    ContextMenuRow,
+    buildColumnMetaMap,
+    hasUsableColumnMeta,
+    EXACT_GRID_FILTER_OPERATOR,
+    CONTAINS_GRID_FILTER_OPERATOR,
+    FILTER_FIELD_SELECT_STYLE,
+    FILTER_FIELD_POPUP_WIDTH,
+    FILTER_FIELD_OPTION_STYLE,
+    STRING_LIKE_GRID_FILTER_TYPES,
+    normalizeGridFilterColumnType,
+    isStringLikeGridFilterColumnType,
+    resolveDefaultGridFilterOperator,
+    resolveNextGridFilterOperatorForColumnChange,
+    buildGridFieldSelectOptions,
+    renderGridFieldSelectOption,
+    buildDataGridCommitChangeSet,
+    CELL_ELLIPSIS_STYLE,
+    VIRTUAL_CELL_TEXT_STYLE,
+    READONLY_CELL_WRAP_STYLE,
+    INLINE_EDIT_FORM_ITEM_STYLE,
+    VIRTUAL_EDITING_CELL_STYLE,
+} from './DataGridCore';
+import type {
+    DataGridErrorBoundaryState,
     DataGridErrorBoundaryProps,
-    DataGridErrorBoundaryState
-> {
-    constructor(props: DataGridErrorBoundaryProps) {
-        super(props);
-        this.state = { hasError: false, error: null };
-    }
-
-    static getDerivedStateFromError(error: Error): DataGridErrorBoundaryState {
-        return { hasError: true, error };
-    }
-
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-        console.error('DataGrid render error:', error, errorInfo);
-    }
-
-    render() {
-        if (this.state.hasError) {
-            return (
-                <div style={{ padding: 16, color: '#ff4d4f' }}>
-                    <h4>{t('data_grid.error_boundary.title', undefined, this.props.i18nLanguage)}</h4>
-                    <p>{t('data_grid.error_boundary.description', undefined, this.props.i18nLanguage)}</p>
-                    <pre style={{ fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
-                        {this.state.error?.message}
-                    </pre>
-                    <Button
-                        size="small"
-                        onClick={() => this.setState({ hasError: false, error: null })}
-                    >
-                        {t('data_grid.error_boundary.retry', undefined, this.props.i18nLanguage)}
-                    </Button>
-                </div>
-            );
-        }
-        return this.props.children;
-    }
-}
-
-// 内部行标识字段：避免与真实业务字段（如 `key` 列）冲突。
-export const GONAVI_ROW_KEY = '__gonavi_row_key__';
-export const GONAVI_ROW_NUMBER_COLUMN_KEY = '__gonavi_row_number__';
-
-// Cell key helpers for batch selection/fill.
-// Use a control character separator to avoid collisions with rowKey/columnName contents (e.g. `new-123`).
-const CELL_KEY_SEP = '\u0001';
-const CELL_SELECTION_DRAG_THRESHOLD_PX = 4;
-const DATE_TIME_CACHE_LIMIT = 2000;
-const TABLE_CELL_PREVIEW_MAX_CHARS = 240;
-const ROW_NUMBER_COLUMN_WIDTH = 58;
-const DATA_EDIT_AUTO_COMMIT_DELAY_OPTIONS = [
-    { value: 3000, seconds: 3 },
-    { value: 5000, seconds: 5 },
-    { value: 10000, seconds: 10 },
-    { value: 30000, seconds: 30 },
-];
-const DATA_GRID_DISPLAY_RENDER_VERSION = Symbol('DATA_GRID_DISPLAY_RENDER_VERSION');
-const DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION = Symbol('DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION');
-const DEFAULT_GRID_MONO_FONT_FAMILY = '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace';
-const normalizedDateTimeCache = new Map<string, string>();
-const objectCellPreviewCache = new WeakMap<object, string>();
-const useDataGridI18nLanguage = () => {
-    const i18n = useOptionalI18n();
-    return i18n?.language ?? getCurrentLanguage();
-};
-const makeCellKey = (rowKey: string, colName: string) => `${rowKey}${CELL_KEY_SEP}${colName}`;
-const splitCellKey = (cellKey: string): { rowKey: string; colName: string } | null => {
-    const sepIndex = cellKey.indexOf(CELL_KEY_SEP);
-    if (sepIndex === -1) return null;
-    return {
-        rowKey: cellKey.slice(0, sepIndex),
-        colName: cellKey.slice(sepIndex + CELL_KEY_SEP.length),
-    };
-};
-export const resolveContextMenuFieldName = (dataIndex: string, title?: string): string => {
-    const name = String(dataIndex || title || '').trim();
-    return name;
-};
-
-const trimSimpleCache = (cache: Map<string, string>, limit: number) => {
-    if (cache.size < limit) return;
-    const firstKey = cache.keys().next().value;
-    if (typeof firstKey === 'string') {
-        cache.delete(firstKey);
-    }
-};
-
-const looksLikeDateTimeText = (val: string): boolean => {
-    if (!val) return false;
-    const len = val.length;
-    if (len < 19 || len > 48) return false;
-    const charCode0 = val.charCodeAt(0);
-    if (charCode0 < 48 || charCode0 > 57) return false;
-    return (
-        val[4] === '-' &&
-        val[7] === '-' &&
-        (val[10] === ' ' || val[10] === 'T') &&
-        val[13] === ':' &&
-        val[16] === ':'
-    );
-};
-
-// Normalize common datetime strings to `YYYY-MM-DD HH:mm:ss[.fraction]` for display/editing.
-// Handles RFC3339 and Go-style datetime text like `2024-05-13 08:32:47 +0800 CST`.
-// Also keep invalid datetime values like `0000-00-00 00:00:00` unchanged.
-const normalizeDateTimeString = (val: string) => {
-    if (!looksLikeDateTimeText(val)) {
-        return val;
-    }
-
-    const cached = normalizedDateTimeCache.get(val);
-    if (cached !== undefined) {
-        return cached;
-    }
-
-    // 检查是否为无效日期时间（0000-00-00 或类似格式）
-    if (/^0{4}-0{2}-0{2}/.test(val)) {
-        return val; // 保持原样显示，不尝试转换
-    }
-
-    const match = val.match(
-        /^(\d{4}-\d{2}-\d{2})[T ](\d{2}:\d{2}:\d{2})(\.\d+)?(?:\s*(?:Z|[+-]\d{2}:?\d{2})(?:\s+[A-Za-z_\/+-]+)?)?$/
-    );
-    const normalized = match ? `${match[1]} ${match[2]}${match[3] || ''}` : val;
-    trimSimpleCache(normalizedDateTimeCache, DATE_TIME_CACHE_LIMIT);
-    normalizedDateTimeCache.set(val, normalized);
-    return normalized;
-};
-
-// --- Helper: Format Value ---
-const normalizeBitHexDisplayText = (val: any, columnType?: string): string | null => {
-    const typeText = String(columnType || '').trim().toLowerCase();
-    if (!/^varbit(?:\s*\(\s*\d+\s*\))?$/.test(typeText)
-        && !/^bit(?:\s+varying)?(?:\s*\(\s*\d+\s*\))?$/.test(typeText)) {
-        return null;
-    }
-    if (typeof val !== 'string') return null;
-    const raw = val.trim();
-    if (!/^0x[0-9a-f]+$/i.test(raw)) return null;
-    try {
-        return BigInt(raw).toString(10);
-    } catch {
-        return null;
-    }
-};
-
-type CellDisplayConnectionLike = TemporalConnectionLike;
-
-const isDateOnlyColumnType = (columnType?: string): boolean => {
-    const normalized = String(columnType || '').trim().toLowerCase();
-    if (!normalized) return false;
-    const base = normalized.split(/[ (]/)[0];
-    return base === 'date' || base === 'newdate';
-};
-
-const isOceanBaseOracleDisplayConnection = (connectionConfig?: CellDisplayConnectionLike): boolean => {
-    if (!connectionConfig) return false;
-    const type = String(connectionConfig.type || '').trim().toLowerCase();
-    const driver = String(connectionConfig.driver || '').trim().toLowerCase();
-    return (type === 'oceanbase' || driver === 'oceanbase')
-        && normalizeOceanBaseProtocol(connectionConfig.oceanBaseProtocol) === 'oracle';
-};
-
-const normalizeOceanBaseOracleDateDisplayText = (
-    val: string,
-    columnType?: string,
-    connectionConfig?: CellDisplayConnectionLike,
-): string | null => {
-    if (!isDateOnlyColumnType(columnType) || !isOceanBaseOracleDisplayConnection(connectionConfig)) {
-        return null;
-    }
-    const trimmed = String(val || '').trim();
-    if (!trimmed) return trimmed;
-    const match = trimmed.match(
-        /^(\d{4}-\d{2}-\d{2})(?:[T ](\d{2}:\d{2}:\d{2})(\.\d+)?(?:\s*(?:Z|[+-]\d{2}:?\d{2})(?:\s+[A-Za-z_\/+-]+)?)?)?$/
-    );
-    if (!match) return null;
-    const [, datePart, timePart, fractionPart] = match;
-    if (!timePart) return datePart;
-    if (timePart === '00:00:00' && (!fractionPart || /^\.0+$/.test(fractionPart))) {
-        return datePart;
-    }
-    return null;
-};
-
-export const formatCellDisplayText = (val: any, columnType?: string, connectionConfig?: CellDisplayConnectionLike): string => {
-    try {
-        if (val === null) return 'NULL';
-        const bitText = normalizeBitHexDisplayText(val, columnType);
-        if (bitText !== null) return bitText;
-        if (typeof val === 'object') {
-            if (!Array.isArray(val) && !isPlainObject(val)) {
-                return String(val);
-            }
-            const cached = objectCellPreviewCache.get(val);
-            if (cached !== undefined) {
-                return cached;
-            }
-            const topLevelSize = Array.isArray(val) ? val.length : Object.keys(val || {}).length;
-            if (topLevelSize > 80) {
-                const summary = Array.isArray(val) ? `[Array(${topLevelSize})]` : `{Object(${topLevelSize})}`;
-                objectCellPreviewCache.set(val, summary);
-                return summary;
-            }
-            try {
-                const nextText = JSON.stringify(val);
-                const previewText = nextText.length > TABLE_CELL_PREVIEW_MAX_CHARS ? `${nextText.slice(0, TABLE_CELL_PREVIEW_MAX_CHARS)}…` : nextText;
-                objectCellPreviewCache.set(val, previewText);
-                return previewText;
-            } catch {
-                return '[Object]';
-            }
-        }
-        if (typeof val === 'string') {
-            const oceanBaseDateOnly = normalizeOceanBaseOracleDateDisplayText(val, columnType, connectionConfig);
-            if (oceanBaseDateOnly !== null) {
-                return oceanBaseDateOnly.length > TABLE_CELL_PREVIEW_MAX_CHARS ? `${oceanBaseDateOnly.slice(0, TABLE_CELL_PREVIEW_MAX_CHARS)}…` : oceanBaseDateOnly;
-            }
-            const normalized = normalizeDateTimeString(val);
-            return normalized.length > TABLE_CELL_PREVIEW_MAX_CHARS ? `${normalized.slice(0, TABLE_CELL_PREVIEW_MAX_CHARS)}…` : normalized;
-        }
-        return String(val);
-    } catch (e) {
-        console.error('formatCellValue error:', e);
-        return '[Error]';
-    }
-};
-
-const formatClipboardCellText = (val: any, columnType?: string, connectionConfig?: CellDisplayConnectionLike): string => {
-    try {
-        if (val === null || val === undefined) return 'NULL';
-        const bitText = normalizeBitHexDisplayText(val, columnType);
-        if (bitText !== null) return bitText;
-        if (typeof val === 'string') {
-            const oceanBaseDateOnly = normalizeOceanBaseOracleDateDisplayText(val, columnType, connectionConfig);
-            if (oceanBaseDateOnly !== null) return oceanBaseDateOnly;
-            return normalizeDateTimeString(val);
-        }
-        if (typeof val === 'object') {
-            try {
-                return JSON.stringify(val);
-            } catch {
-                return String(val);
-            }
-        }
-        return String(val);
-    } catch (e) {
-        console.error('formatClipboardCellText error:', e);
-        return '[Error]';
-    }
-};
-
-const normalizeClipboardTsvCell = (text: string): string => text.replace(/\t/g, ' ').replace(/\r?\n/g, ' ');
-
-const buildClipboardTsv = (
-    rows: Array<Record<string, any>>,
-    columnNames: string[],
-    getColumnType?: (columnName: string) => string | undefined,
-    connectionConfig?: CellDisplayConnectionLike,
-): string => {
-    if (!Array.isArray(rows) || rows.length === 0 || !Array.isArray(columnNames) || columnNames.length === 0) {
-        return '';
-    }
-    const header = columnNames.map(normalizeClipboardTsvCell).join('\t');
-    const lines = rows.map((row) => (
-        columnNames
-            .map((columnName) => normalizeClipboardTsvCell(formatClipboardCellText(row?.[columnName], getColumnType?.(columnName), connectionConfig)))
-            .join('\t')
-    ));
-    return [header, ...lines].join('\n');
-};
-
-const renderHighlightedCellText = (text: string, query: string): React.ReactNode => {
-    const ranges = findDataGridTextRanges(text, query);
-    if (ranges.length === 0) return text;
-
-    const nodes: React.ReactNode[] = [];
-    let cursor = 0;
-    ranges.forEach((range, index) => {
-        if (range.start > cursor) {
-            nodes.push(text.slice(cursor, range.start));
-        }
-        nodes.push(
-            <mark key={`${range.start}-${range.end}-${index}`} className="data-grid-find-highlight">
-                {text.slice(range.start, range.end)}
-            </mark>,
-        );
-        cursor = range.end;
-    });
-    if (cursor < text.length) {
-        nodes.push(text.slice(cursor));
-    }
-    return <>{nodes}</>;
-};
-
-const renderCellDisplayValue = (val: any, query: string, columnType?: string, connectionConfig?: CellDisplayConnectionLike): React.ReactNode => {
-    const text = formatCellDisplayText(val, columnType, connectionConfig);
-    const content = renderHighlightedCellText(text, query);
-    if (val === null) return <span style={{ color: '#ccc' }}>{content}</span>;
-    return content;
-};
-
-const formatCellValue = (val: any) => renderCellDisplayValue(val, '');
-
-export const attachDataGridVirtualEditRenderVersion = <T extends Item>(
-    rows: T[],
-    editingCell: VirtualEditingCellState | null,
-): T[] => {
-    if (!editingCell) return rows;
-
-    return rows.map((row) => {
-        const rowKey = row?.[GONAVI_ROW_KEY];
-        if (rowKey === undefined || rowKey === null || String(rowKey) !== editingCell.rowKey) {
-            return row;
-        }
-        const nextRow = { ...(row as object) } as T;
-        Object.defineProperty(nextRow, DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION, {
-            value: `${editingCell.rowKey}${CELL_KEY_SEP}${editingCell.dataIndex}`,
-            enumerable: true,
-        });
-        return nextRow;
-    });
-};
-
-export const attachDataGridDisplayRenderVersion = <T extends Item>(
-    rows: T[],
-    renderVersion: string,
-): T[] => {
-    if (!renderVersion) return rows;
-
-    return rows.map((row) => {
-        if (!row || typeof row !== 'object') return row;
-        const nextRow = { ...(row as object) } as T;
-        Object.defineProperty(nextRow, DATA_GRID_DISPLAY_RENDER_VERSION, {
-            value: renderVersion,
-            enumerable: true,
-        });
-        return nextRow;
-    });
-};
-
-export const hasDataGridDisplayRenderVersionChanged = (nextRecord: unknown, previousRecord: unknown): boolean => {
-    const nextVersion = nextRecord && typeof nextRecord === 'object'
-        ? (nextRecord as Record<symbol, unknown>)[DATA_GRID_DISPLAY_RENDER_VERSION]
-        : undefined;
-    const previousVersion = previousRecord && typeof previousRecord === 'object'
-        ? (previousRecord as Record<symbol, unknown>)[DATA_GRID_DISPLAY_RENDER_VERSION]
-        : undefined;
-    return nextVersion !== previousVersion;
-};
-
-export const hasDataGridVirtualEditRenderVersionChanged = (nextRecord: unknown, previousRecord: unknown): boolean => {
-    const nextVersion = nextRecord && typeof nextRecord === 'object'
-        ? (nextRecord as Record<symbol, unknown>)[DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION]
-        : undefined;
-    const previousVersion = previousRecord && typeof previousRecord === 'object'
-        ? (previousRecord as Record<symbol, unknown>)[DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION]
-        : undefined;
-    return nextVersion !== previousVersion;
-};
-
-const toEditableText = (val: any): string => {
-    if (val === null || val === undefined) return '';
-    if (typeof val === 'string') return val;
-    try {
-        return JSON.stringify(val, null, 2);
-    } catch {
-        return String(val);
-    }
-};
-
-const toFormText = (val: any): string => {
-    if (val === null || val === undefined) return '';
-    if (typeof val === 'string') return normalizeDateTimeString(val);
-    return toEditableText(val);
-};
-
-// 用于变更比较：NULL 与 undefined 视为同类空值；与空字符串严格区分。
-const isCellValueEqualForDiff = (left: any, right: any): boolean => {
-    if (left === right) return true;
-    const leftNullish = left === null || left === undefined;
-    const rightNullish = right === null || right === undefined;
-    if (leftNullish || rightNullish) return leftNullish && rightNullish;
-    return toFormText(left) === toFormText(right);
-};
-
-// 渲染阶段轻量比较：避免对象值在 shouldCellUpdate 中反复深度序列化导致卡顿。
-const isCellValueEqualForRender = (left: any, right: any): boolean => {
-    if (left === right) return true;
-    const leftNullish = left === null || left === undefined;
-    const rightNullish = right === null || right === undefined;
-    if (leftNullish || rightNullish) return leftNullish && rightNullish;
-
-    const leftType = typeof left;
-    const rightType = typeof right;
-    if (leftType === 'object' || rightType === 'object') {
-        // 对象仅按引用比较；真正的值差异在提交保存时再做严格比对。
-        return false;
-    }
-
-    if (leftType === 'string' || rightType === 'string') {
-        return normalizeDateTimeString(String(left)) === normalizeDateTimeString(String(right));
-    }
-    return left === right;
-};
-
-const INLINE_EDIT_MAX_CHARS = 2000;
-
-const shouldOpenModalEditor = (val: any): boolean => {
-    if (val === null || val === undefined) return false;
-    if (typeof val === 'string') {
-        if (val.length > INLINE_EDIT_MAX_CHARS || val.includes('\n')) return true;
-        const trimmed = val.trimStart();
-        return trimmed.startsWith('{') || trimmed.startsWith('[');
-    }
-    return typeof val === 'object';
-};
-
-const getCellFieldName = (record: Item, dataIndex: string) => {
-    const rowKey = record?.[GONAVI_ROW_KEY];
-    if (rowKey === undefined || rowKey === null) return dataIndex;
-    return [String(rowKey), dataIndex];
-};
-
-const setCellFieldValue = (form: any, fieldName: string | (string | number)[], value: any) => {
-    if (!form) return;
-    if (Array.isArray(fieldName)) {
-        const [rowKey, colKey] = fieldName;
-        form.setFieldsValue({ [rowKey]: { [colKey]: value } });
-        return;
-    }
-    form.setFieldsValue({ [fieldName]: value });
-};
-
-const looksLikeJsonText = (text: string): boolean => {
-    const raw = (text || '').trim();
-    if (!raw) return false;
-    const first = raw[0];
-    const last = raw[raw.length - 1];
-    return (first === '{' && last === '}') || (first === '[' && last === ']');
-};
-
-const isPlainObject = (value: any): value is Record<string, any> => {
-    return Object.prototype.toString.call(value) === '[object Object]';
-};
-
-const normalizeValueForJsonView = (value: any): any => {
-    if (value === null || value === undefined) return value;
-
-    if (typeof value === 'string') {
-        const normalizedText = normalizeDateTimeString(value);
-        if (!looksLikeJsonText(normalizedText)) return normalizedText;
-        try {
-            return normalizeValueForJsonView(JSON.parse(normalizedText));
-        } catch {
-            return normalizedText;
-        }
-    }
-
-    if (Array.isArray(value)) {
-        return value.map((item) => normalizeValueForJsonView(item));
-    }
-
-    if (isPlainObject(value)) {
-        const next: Record<string, any> = {};
-        Object.entries(value).forEach(([key, val]) => {
-            next[key] = normalizeValueForJsonView(val);
-        });
-        return next;
-    }
-
-    return value;
-};
-
-const isJsonViewValueEqual = (left: any, right: any): boolean => {
-    const leftNormalized = normalizeValueForJsonView(left);
-    const rightNormalized = normalizeValueForJsonView(right);
-
-    if (leftNormalized === rightNormalized) return true;
-    if (leftNormalized === null || rightNormalized === null) return leftNormalized === rightNormalized;
-    if (leftNormalized === undefined || rightNormalized === undefined) return leftNormalized === rightNormalized;
-
-    if (typeof leftNormalized !== 'object' && typeof rightNormalized !== 'object') {
-        return String(leftNormalized) === String(rightNormalized);
-    }
-
-    try {
-        return JSON.stringify(leftNormalized) === JSON.stringify(rightNormalized);
-    } catch {
-        return false;
-    }
-};
-
-const coerceJsonEditorValueForStorage = (currentValue: any, editedValue: any): any => {
-    if (typeof currentValue === 'string') {
-        const raw = currentValue.trim();
-        const parsedCurrent = looksLikeJsonText(raw);
-        if (parsedCurrent && (isPlainObject(editedValue) || Array.isArray(editedValue))) {
-            return JSON.stringify(editedValue);
-        }
-    }
-    return editedValue;
-};
-
-// --- Resizable Header (Native Implementation) ---
-const ResizableTitle = React.forwardRef<HTMLTableCellElement, any>((props, ref) => {
-  const { onResizeStart, onResizeAutoFit, width, ...restProps } = props;
-
-  const nextStyle = { ...(restProps.style || {}) } as React.CSSProperties;
-  if (width) {
-    nextStyle.width = width;
-  }
-
-  // 注意：virtual table 模式下，rc-table 会依赖 header cell 的 width 样式来渲染选择列。
-  // 若这里丢失 width，可能导致左上角“全选”checkbox 不显示。
-  if (!width || typeof onResizeStart !== 'function') {
-    return <th ref={ref} {...restProps} style={nextStyle} />;
-  }
-
-  return (
-    <th ref={ref} {...restProps} style={{ ...nextStyle, position: 'relative' }}>
-      {restProps.children}
-      <span
-        className="react-resizable-handle"
-        onMouseDown={(e) => {
-            e.stopPropagation();
-            // Pass the header element reference implicitly via event target
-            onResizeStart(e);
-        }}
-        onDoubleClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (typeof onResizeAutoFit === 'function') {
-                onResizeAutoFit(e);
-            }
-        }}
-        onPointerDown={(e) => {
-            // 阻止 pointerdown 冒泡到 @dnd-kit 的 PointerSensor，
-            // 避免调整列宽时意外触发列拖拽排序
-            e.stopPropagation();
-        }}
-        onClick={(e) => e.stopPropagation()}
-        title={t('data_grid.column.resize_tooltip')}
-        style={{
-            position: 'absolute',
-            right: 0, // Align to right edge
-            bottom: 0,
-            top: 0,
-            width: 10,
-            cursor: 'col-resize',
-            zIndex: 10,
-            touchAction: 'none'
-        }}
-      />
-    </th>
-  );
-});
-
-// --- Sortable Header Cell ---
-interface SortableHeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
-    id?: string;
-}
-
-// --- Sortable Header Cell ---
-interface SortableHeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
-    id?: string;
-}
-
-// 静态 CSS 移到组件外，强制去除 th 内边距并确保指针穿透
-const sortableHeaderStaticStyles = `
-    .gonavi-sortable-header-cell {
-        padding: 0 !important;
-        overflow: hidden;
-    }
-    .gonavi-sortable-header-cell[data-cursor-grabbing="true"],
-    .gonavi-sortable-header-cell[data-cursor-grabbing="true"] *,
-    .gonavi-sortable-header-cell.is-dragging,
-    .gonavi-sortable-header-cell.is-dragging * {
-        cursor: grabbing !important;
-    }
-    .sortable-header-cell-drag-handle {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        min-height: var(--gonavi-header-min-height, 40px);
-        padding: 0 10px;
-        user-select: none;
-        cursor: inherit;
-        overflow: hidden;
-    }
-`;
-
-const SortableHeaderCell: React.FC<SortableHeaderCellProps> = React.memo((props) => {
-    const { id, children, style: propStyle, className: propClassName, ...restProps } = props;
-    const [isPressed, setIsPressed] = useState(false);
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-        isDragging,
-    } = useSortable({ id: id || '' });
-
-    const style: React.CSSProperties = {
-        ...propStyle,
-        transform: CSS.Transform.toString(transform),
-        transition,
-        ...(isDragging ? { 
-            position: 'relative', 
-            zIndex: 9999, 
-            opacity: 0.6, 
-            backgroundColor: 'rgba(24, 144, 255, 0.15)',
-            boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
-        } : {}),
-        touchAction: 'none',
-        willChange: 'transform',
-        // 核心修复：将指针直接绑定到 th 级别，并由 isPressed 控制
-        cursor: (isDragging || isPressed) ? 'grabbing' : 'pointer',
-    };
-
-    useEffect(() => {
-        const handleGlobalMouseUp = () => setIsPressed(false);
-        window.addEventListener('mouseup', handleGlobalMouseUp);
-        return () => window.removeEventListener('mouseup', handleGlobalMouseUp);
-    }, []);
-
-    if (!id || id === 'GONAVI_SELECTION_COLUMN') {
-        return <ResizableTitle {...restProps} style={{ ...propStyle, ...style }}>{children}</ResizableTitle>;
-    }
-
-    return (
-        <ResizableTitle 
-            ref={setNodeRef} 
-            style={style} 
-            className={`${propClassName || ''} ${isDragging ? 'is-dragging' : ''}`}
-            data-cursor-grabbing={isDragging || isPressed}
-            {...restProps} 
-            {...attributes} 
-            {...listeners}
-            onPointerDown={(e: any) => {
-                setIsPressed(true);
-                if (listeners?.onPointerDown) listeners.onPointerDown(e);
-            }}
-        >
-            <style>{sortableHeaderStaticStyles}</style>
-            <div className="sortable-header-cell-drag-handle" title={t('data_grid.column.drag_tooltip')}>
-                <div style={{ flex: 1, display: 'flex', alignItems: 'center', minWidth: 0, cursor: 'inherit' }}>
-                    {children}
-                </div>
-            </div>
-        </ResizableTitle>
-    );
-});
-
-// --- Contexts ---
-const EditableContext = React.createContext<any>(null);
-const CellContextMenuContext = React.createContext<{
-    showMenu: (e: React.MouseEvent, record: Item, dataIndex: string, title: React.ReactNode) => void;
-    handleBatchFillToSelected: (record: Item, dataIndex: string) => void;
-} | null>(null);
-const DataContext = React.createContext<{
-    selectedRowKeysRef: React.MutableRefObject<React.Key[]>;
-    displayDataRef: React.MutableRefObject<any[]>;
-    handleCopyInsert: (r: any) => void;
-    handleCopyUpdate: (r: any) => void;
-    handleCopyDelete: (r: any) => void;
-    handleCopyJson: (r: any) => void;
-    handleCopyCsv: (r: any) => void;
-    handleExportSelected: (options: DataExportFileOptions, r: any) => Promise<void>;
-    copyToClipboard: (t: string) => void;
-    tableName?: string;
-    enableRowContextMenu: boolean;
-    supportsCopyInsert: boolean;
-} | null>(null);
-
-interface Item {
-  [key: string]: any;
-}
-
-interface EditableCellProps {
-  title: React.ReactNode;
-  editable: boolean;
-  children: React.ReactNode;
-  dataIndex: string;
-  record: Item;
-  handleSave: (record: Item) => void;
-  focusCell?: (record: Item, dataIndex: string, title: React.ReactNode) => void;
-  columnType?: string;
-  dbType?: string;
-  connectionConfig?: CellDisplayConnectionLike;
-  inputCellPadding?: React.CSSProperties;
-  as?: any;
-  modifiedColumns?: Record<string, Set<string>>;
-  rowKeyStr?: (k: React.Key) => string;
-  deletedRowKeys?: Set<string>;
-  darkMode?: boolean;
-  [key: string]: any;
-}
-
-// 模块级变量：绕过 React 渲染链条，在事件处理器中直接读取最新删除状态。
-// EditableCell 内部通过 React.memo 包裹，且 Ant Design rc-table 有多层 memo 缓存，
-// 仅靠 props 传递 deletedRowKeys 可能因缓存而不触发重渲染。
-let globalDeletedRowKeys: Set<string> = new Set();
-
-const resolveEditableCellRowKey = (
-  record: Item | undefined,
-  rowKeyStr?: (k: React.Key) => string,
-): string | null => {
-  const rowKey = record?.[GONAVI_ROW_KEY];
-  if (rowKey === undefined || rowKey === null || typeof rowKeyStr !== 'function') {
-      return null;
-  }
-  return rowKeyStr(rowKey);
-};
-
-const isEditableCellDeleted = (
-  record: Item | undefined,
-  deletedRowKeys?: Set<string>,
-  rowKeyStr?: (k: React.Key) => string,
-): boolean => {
-  const rowKey = resolveEditableCellRowKey(record, rowKeyStr);
-  return rowKey ? !!deletedRowKeys?.has(rowKey) : false;
-};
-
-const isEditableCellModified = (
-  record: Item | undefined,
-  dataIndex: string,
-  modifiedColumns?: Record<string, Set<string>>,
-  rowKeyStr?: (k: React.Key) => string,
-): boolean => {
-  const rowKey = resolveEditableCellRowKey(record, rowKeyStr);
-  return rowKey ? !!modifiedColumns?.[rowKey]?.has(dataIndex) : false;
-};
-
-const areEditableCellPropsEqual = (prevProps: EditableCellProps, nextProps: EditableCellProps): boolean => {
-  if (prevProps.editable !== nextProps.editable) return false;
-  if (prevProps.dataIndex !== nextProps.dataIndex) return false;
-  if (prevProps.title !== nextProps.title) return false;
-  if (prevProps.columnType !== nextProps.columnType) return false;
-  if (prevProps.dbType !== nextProps.dbType) return false;
-  if ((prevProps.connectionConfig?.type ?? null) !== (nextProps.connectionConfig?.type ?? null)) return false;
-  if ((prevProps.connectionConfig?.driver ?? null) !== (nextProps.connectionConfig?.driver ?? null)) return false;
-  if ((prevProps.connectionConfig?.oceanBaseProtocol ?? null) !== (nextProps.connectionConfig?.oceanBaseProtocol ?? null)) return false;
-  if (prevProps.darkMode !== nextProps.darkMode) return false;
-  if (prevProps.as !== nextProps.as) return false;
-  if (prevProps.handleSave !== nextProps.handleSave) return false;
-  if (prevProps.focusCell !== nextProps.focusCell) return false;
-  if ((prevProps.inputCellPadding?.padding ?? null) !== (nextProps.inputCellPadding?.padding ?? null)) return false;
-  if (prevProps.style !== nextProps.style) return false;
-
-  const prevRecord = prevProps.record;
-  const nextRecord = nextProps.record;
-  if (resolveEditableCellRowKey(prevRecord, prevProps.rowKeyStr) !== resolveEditableCellRowKey(nextRecord, nextProps.rowKeyStr)) {
-      return false;
-  }
-  if (hasDataGridFindRenderVersionChanged(nextRecord, prevRecord)) {
-      return false;
-  }
-  if (!isCellValueEqualForRender(prevRecord?.[prevProps.dataIndex], nextRecord?.[nextProps.dataIndex])) {
-      return false;
-  }
-  if (isEditableCellDeleted(prevRecord, prevProps.deletedRowKeys, prevProps.rowKeyStr) !== isEditableCellDeleted(nextRecord, nextProps.deletedRowKeys, nextProps.rowKeyStr)) {
-      return false;
-  }
-  if (isEditableCellModified(prevRecord, prevProps.dataIndex, prevProps.modifiedColumns, prevProps.rowKeyStr) !== isEditableCellModified(nextRecord, nextProps.dataIndex, nextProps.modifiedColumns, nextProps.rowKeyStr)) {
-      return false;
-  }
-
-  return true;
-};
-
-const EditableCell: React.FC<EditableCellProps> = React.memo(({
-  title,
-  editable,
-  children,
-  dataIndex,
-  record,
-  handleSave,
-  focusCell,
-  columnType,
-  dbType,
-  connectionConfig,
-  inputCellPadding,
-  as: Component = 'td',
-  modifiedColumns,
-  rowKeyStr,
-  deletedRowKeys,
-  darkMode,
-  ...restProps
-}) => {
-  const [editing, setEditing] = useState(false);
-  const inputRef = useRef<any>(null);
-  const cellRef = useRef<HTMLElement>(null);
-  const pickerOpenRef = useRef(false);
-  const scrollLockRef = useRef<{ el: HTMLElement; handler: (e: WheelEvent) => void } | null>(null);
-  const form = useContext(EditableContext);
-  const cellContextMenuContext = useContext(CellContextMenuContext);
-  const i18nLanguage = useDataGridI18nLanguage();
-  const dateTimePickerNowLabel = t('data_grid.datetime_picker.now', undefined, i18nLanguage);
-
-  /** DatePicker 面板打开时锁定表格滚动，关闭时恢复 */
-  const lockTableScroll = useCallback((lock: boolean) => {
-      if (lock) {
-          // 查找虚拟滚动容器或常规滚动容器
-          const tableWrapper = cellRef.current?.closest?.('.ant-table-wrapper') as HTMLElement | null;
-          if (tableWrapper) {
-              const handler = (e: WheelEvent) => { e.preventDefault(); e.stopPropagation(); };
-              tableWrapper.addEventListener('wheel', handler, { capture: true, passive: false });
-              scrollLockRef.current = { el: tableWrapper, handler };
-          }
-      } else if (scrollLockRef.current) {
-          const { el, handler } = scrollLockRef.current;
-          el.removeEventListener('wheel', handler, { capture: true } as any);
-          scrollLockRef.current = null;
-      }
-  }, []);
-
-  useEffect(() => {
-    if (editing) {
-      // 每次进入编辑时强制设置表单值（覆盖 form store 中可能残留的旧值）
-      const raw = record[dataIndex];
-      const fieldName = getCellFieldName(record, dataIndex);
-      if (isDateTimeField) {
-        const dayjsVal = parseToDayjs(raw, pickerType);
-        setCellFieldValue(form, fieldName, dayjsVal);
-      } else {
-        const initialValue = typeof raw === 'string' ? normalizeDateTimeString(raw) : raw;
-        setCellFieldValue(form, fieldName, initialValue);
-      }
-      inputRef.current?.focus();
-    }
-  }, [editing]);
-
-  const toggleEdit = () => {
-    setEditing(!editing);
-  };
-
-  const save = async (pickerValue?: dayjs.Dayjs | null) => {
-    try {
-      if (!form || !editing) return;
-      const fieldName = getCellFieldName(record, dataIndex);
-      await form.validateFields([fieldName]);
-      let nextValue = form.getFieldValue(fieldName);
-      if (isDateTimeField) {
-        nextValue = resolveTemporalEditorSaveValue(nextValue, pickerValue, pickerType);
-      }
-      toggleEdit();
-      // 仅当值发生变化时才标记为修改，避免“双击-失焦”导致整行进入 modified 状态（蓝色高亮不清除）。
-      if (!isCellValueEqualForDiff(record?.[dataIndex], nextValue)) {
-        handleSave({ ...record, [dataIndex]: nextValue });
-      }
-      // 保存后移除焦点
-      if (inputRef.current) {
-        inputRef.current.blur();
-      }
-    } catch (errInfo) {
-      console.log('Save failed:', errInfo);
-      // 日期时间类型保存失败时兜底退出编辑，避免 DatePicker 卡在编辑态
-      if (isDateTimeField && editing) setEditing(false);
-    }
-  };
-
-  const handleContextMenu = (e: React.MouseEvent) => {
-    if (!cellContextMenuContext) return;
-    e.preventDefault();
-    e.stopPropagation(); // 阻止冒泡到行级菜单
-    cellContextMenuContext.showMenu(e, record, dataIndex, title);
-  };
-
-  let childNode = children;
-
-  const pickerType = getTemporalPickerType(columnType, dbType, connectionConfig);
-  const isDateTimeField = !!pickerType && !(/^0{4}-0{2}-0{2}/.test(String(record?.[dataIndex] || '')));
-
-  const isRowDeleted = deletedRowKeys && rowKeyStr && record?.[GONAVI_ROW_KEY] !== undefined
-    ? deletedRowKeys.has(rowKeyStr(record[GONAVI_ROW_KEY]))
-    : false;
-
-  const isModified = !editing && modifiedColumns && rowKeyStr && record?.[GONAVI_ROW_KEY] !== undefined
-    ? modifiedColumns[rowKeyStr(record[GONAVI_ROW_KEY])]?.has(dataIndex)
-    : false;
-
-  const modifiedStyle: React.CSSProperties | undefined = isModified
-    ? { backgroundColor: darkMode ? 'rgba(255, 214, 102, 0.16)' : '#FFF3B0' }
-    : undefined;
-
-  if (editable) {
-    childNode = editing ? (
-      <Form.Item className="data-grid-inline-editor-form-item" style={INLINE_EDIT_FORM_ITEM_STYLE} name={getCellFieldName(record, dataIndex)}>
-        {isDateTimeField ? (
-          pickerType === 'time' ? (
-            <TimePicker
-              ref={inputRef}
-              style={{ width: '100%' }}
-              format={TEMPORAL_FORMATS[pickerType]}
-              onChange={(value) => setTimeout(() => { void save(value); }, 0)}
-              onOpenChange={lockTableScroll}
-              onBlur={() => setTimeout(() => { void save(); }, 0)}
-              needConfirm={false}
-            />
-          ) : pickerType === 'datetime' ? (
-            <DatePicker
-              ref={inputRef}
-              style={{ width: '100%' }}
-              showTime
-              showNow={false}
-              format={getTemporalPickerFormat(pickerType)}
-              renderExtraFooter={() => (
-                <a
-                  style={{ padding: '0 2px' }}
-                  onClick={() => {
-                    // 自定义"此刻"：仅将当前时间填入表单字段，面板保持打开。
-                    // 用户需点击"确定"才真正保存，替代内置 showNow 的自动提交行为。
-                    const fieldName = getCellFieldName(record, dataIndex);
-                    setCellFieldValue(form, fieldName, dayjs());
-                  }}
-                >{dateTimePickerNowLabel}</a>
-              )}
-              onOk={(value) => setTimeout(() => { void save((value as dayjs.Dayjs | null | undefined) ?? undefined); }, 0)}
-              onOpenChange={(open) => {
-                pickerOpenRef.current = open;
-                lockTableScroll(open);
-                // 面板关闭（点击外部）时退出编辑，不保存；仅"确定"按钮（onOk）触发保存
-                if (!open) setTimeout(() => { if (editing) toggleEdit(); }, 0);
-              }}
-              onBlur={() => {
-                // 兜底：面板未打开或已关闭时，点击外部通过 blur 退出编辑。
-                // 延迟检查面板状态，避免点击自定义"此刻"按钮时误退出（此时面板仍打开）。
-                setTimeout(() => { if (editing && !pickerOpenRef.current) setEditing(false); }, 150);
-              }}
-              needConfirm
-            />
-          ) : (
-            <DatePicker
-              ref={inputRef}
-              style={{ width: '100%' }}
-              format={TEMPORAL_FORMATS[pickerType]}
-              picker={pickerType as any}
-              onChange={(value) => setTimeout(() => { void save(value); }, 0)}
-              onOpenChange={lockTableScroll}
-              onBlur={() => setTimeout(() => { void save(); }, 0)}
-              needConfirm={false}
-            />
-          )
-        ) : (
-          <Input
-            {...noAutoCapInputProps}
-            ref={inputRef}
-            className="data-grid-inline-editor-input"
-            style={{ width: '100%', ...inputCellPadding }}
-            onPressEnter={() => { void save(); }}
-            onBlur={() => { void save(); }}
-            onFocus={(e) => {
-              try {
-                (e.target as HTMLInputElement)?.select?.();
-              } catch {
-                // ignore
-              }
-            }}
-            onDoubleClick={(e) => {
-              e.stopPropagation();
-              try {
-                (e.target as HTMLInputElement)?.select?.();
-              } catch {
-                // ignore
-              }
-            }}
-          />
-        )}
-      </Form.Item>
-    ) : (
-      <div
-        className="editable-cell-value-wrap"
-        style={modifiedStyle}
-        onContextMenu={handleContextMenu}
-      >
-        {children}
-      </div>
-    );
-  } else if (cellContextMenuContext) {
-    // 非编辑模式（只读查询结果）也绑定右键菜单，支持复制为 INSERT/JSON/CSV 等操作
-    childNode = (
-      <div onContextMenu={handleContextMenu} style={modifiedStyle ? { ...READONLY_CELL_WRAP_STYLE, ...modifiedStyle } : READONLY_CELL_WRAP_STYLE}>
-        {children}
-      </div>
-    );
-  } else if (isModified) {
-    childNode = (
-      <div style={modifiedStyle}>
-        {children}
-      </div>
-    );
-  }
-
-  const handleDoubleClick = () => {
-      if (!editable) return;
-      if (isRowDeleted) return;
-      // 模块级检查：绕过 React 渲染链条，确保即使组件因 memo 缓存未重渲染也能拿到最新状态
-      if (record?.[GONAVI_ROW_KEY] !== undefined
-          && rowKeyStr
-          && globalDeletedRowKeys.has(rowKeyStr(record[GONAVI_ROW_KEY]))) return;
-      // 已在编辑态时再次双击不应退出编辑；双击应支持在 Input 内进行全选。
-      if (editing) return;
-      const raw = record?.[dataIndex];
-      if (focusCell && shouldOpenModalEditor(raw)) {
-          focusCell(record, dataIndex, title);
-          return;
-      }
-      toggleEdit();
-  };
-
-  return (
-      <Component
-          ref={cellRef}
-          {...restProps}
-          data-row-key={record ? String(record?.[GONAVI_ROW_KEY]) : undefined}
-          data-col-name={dataIndex || undefined}
-          onDoubleClick={editable ? handleDoubleClick : restProps?.onDoubleClick}
-      >
-          {childNode}
-      </Component>
-  );
-}, areEditableCellPropsEqual);
-
-const ContextMenuRow = React.memo(({ children, record, ...props }: any) => {
-    const context = useContext(DataContext);
-    
-    if (!record || !context) return <tr {...props}>{children}</tr>;
-
-    const {
-        selectedRowKeysRef,
-        displayDataRef,
-        handleCopyInsert,
-        handleCopyUpdate,
-        handleCopyDelete,
-        handleCopyJson,
-        handleCopyCsv,
-        handleExportSelected,
-        copyToClipboard,
-        enableRowContextMenu,
-        supportsCopyInsert,
-    } = context;
-
-    if (!enableRowContextMenu) {
-        return <tr {...props}>{children}</tr>;
-    }
-
-    const getTargets = () => {
-        const keys = selectedRowKeysRef.current;
-        const recordKey = record?.[GONAVI_ROW_KEY];
-        if (recordKey !== undefined && keys.includes(recordKey)) {
-            return displayDataRef.current.filter(d => keys.includes(d?.[GONAVI_ROW_KEY]));
-        }
-        return [record];
-    };
-
-    const menuItems: MenuProps['items'] = [
-        ...(supportsCopyInsert ? [{
-            key: 'insert',
-            label: t('data_grid.context_menu.copy_as_insert'),
-            icon: <ConsoleSqlOutlined />,
-            onClick: () => handleCopyInsert(record),
-        }, {
-            key: 'update',
-            label: t('data_grid.context_menu.copy_as_update'),
-            icon: <ConsoleSqlOutlined />,
-            onClick: () => handleCopyUpdate(record),
-        }, {
-            key: 'delete',
-            label: t('data_grid.context_menu.copy_as_delete'),
-            icon: <ConsoleSqlOutlined />,
-            onClick: () => handleCopyDelete(record),
-        }] : []),
-        { key: 'json', label: t('data_grid.context_menu.copy_as_json'), icon: <FileTextOutlined />, onClick: () => handleCopyJson(record) },
-        { key: 'csv', label: t('data_grid.context_menu.copy_as_csv'), icon: <FileTextOutlined />, onClick: () => handleCopyCsv(record) },
-        { key: 'copy', label: t('data_grid.context_menu.copy_as_markdown'), icon: <CopyOutlined />, onClick: () => {
-            const records = getTargets();
-            const orderedCols = displayDataRef.current.length > 0
-                ? Object.keys(displayDataRef.current[0]).filter(c => c !== GONAVI_ROW_KEY)
-                : [];
-            const header = `| ${orderedCols.join(' | ')} |`;
-            const separator = `| ${orderedCols.map(() => '---').join(' | ')} |`;
-            const rows = records.map((r: any) => {
-                const values = orderedCols.map(c => {
-                    const v = r[c];
-                    if (v === null || v === undefined) return 'NULL';
-                    return String(v).replace(/\|/g, '\\|').replace(/\n/g, ' ');
-                });
-                return `| ${values.join(' | ')} |`;
-            });
-            copyToClipboard([header, separator, ...rows].join('\n'));
-        } },
-        { type: 'divider' },
-        {
-            key: 'export-selected',
-            label: t('data_grid.context_menu.export_selected'),
-            icon: <ExportOutlined />,
-            children: [
-                { key: 'exp-csv', label: 'CSV', onClick: () => handleExportSelected({ format: 'csv' }, record).catch(console.error) },
-                { key: 'exp-xlsx', label: 'Excel', onClick: () => handleExportSelected({ format: 'xlsx' }, record).catch(console.error) },
-                { key: 'exp-json', label: 'JSON', onClick: () => handleExportSelected({ format: 'json' }, record).catch(console.error) },
-                { key: 'exp-md', label: 'Markdown', onClick: () => handleExportSelected({ format: 'md' }, record).catch(console.error) },
-                { key: 'exp-html', label: 'HTML', onClick: () => handleExportSelected({ format: 'html' }, record).catch(console.error) },
-            ]
-        }
-    ];
-
-    return (
-        <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']} getPopupContainer={() => document.body} autoAdjustOverflow>
-            <tr {...props}>{children}</tr>
-        </Dropdown>
-    );
-});
-
-interface DataGridProps {
-    data: any[];
-    columnNames: string[];
-    loading: boolean;
-    tableName?: string;
-    objectType?: 'table' | 'view' | 'materialized-view';
-    exportScope?: 'table' | 'queryResult';
-    resultSql?: string;
-    resultExportAllSql?: string;
-    dbName?: string;
-    connectionId?: string;
-    pkColumns?: string[];
-    editLocator?: EditRowLocator;
-    readOnly?: boolean;
-    showRowNumberColumn?: boolean;
-    onReload?: () => void;
-    onSort?: (field: string, order: string) => void;
-    onPageChange?: (page: number, size: number) => void;
-    pagination?: {
-        current: number,
-        pageSize: number,
-        total: number,
-        totalKnown?: boolean,
-        totalApprox?: boolean,
-        approximateTotal?: number,
-        totalCountLoading?: boolean,
-        totalCountCancelled?: boolean,
-    };
-    onRequestTotalCount?: () => void;
-    onCancelTotalCount?: () => void;
-    sortInfoExternal?: Array<{ columnKey: string, order: string, enabled?: boolean }>;
-    // Filtering
-    showFilter?: boolean;
-    onToggleFilter?: () => void;
-    exportSqlWithFilter?: string;
-    onApplyFilter?: (conditions: GridFilterCondition[]) => void;
-    appliedFilterConditions?: FilterCondition[];
-    quickWhereCondition?: string;
-    onApplyQuickWhereCondition?: (condition: string) => void;
-    scrollSnapshot?: { top: number; left: number };
-    onScrollSnapshotChange?: (snapshot: { top: number; left: number }) => void;
-    toolbarExtraActions?: React.ReactNode;
-}
-
-type GridFilterCondition = FilterCondition & {
-    id: number;
-    column: string;
-    op: string;
-    value: string;
-    value2?: string;
-};
-
-type GridViewMode = 'table' | 'json' | 'text' | 'fields' | 'ddl' | 'er';
-type DdlViewLayoutMode = 'bottom' | 'side';
-type DataGridExportScope = 'selected' | 'page' | 'all' | 'filteredAll';
-type VirtualEditingCellState = {
-    rowKey: string;
-    dataIndex: string;
-    title: React.ReactNode;
-    columnType?: string;
-};
-
-type ColumnMeta = {
-    type: string;
-    comment: string;
-};
-
-const buildColumnMetaMap = (columns: ColumnDefinition[]): Record<string, ColumnMeta> => {
-    const nextMap: Record<string, ColumnMeta> = {};
-    (columns || []).forEach((column: any) => {
-        const name = getColumnDefinitionName(column);
-        if (!name) return;
-        nextMap[name] = {
-            type: getColumnDefinitionType(column),
-            comment: getColumnDefinitionComment(column),
-        };
-    });
-    return nextMap;
-};
-
-const hasUsableColumnMeta = (metaMap: Record<string, ColumnMeta>): boolean => (
-    Object.values(metaMap || {}).some((meta) => {
-        const type = String(meta?.type || '').trim();
-        const comment = String(meta?.comment || '').trim();
-        return type.length > 0 || comment.length > 0;
-    })
-);
-
-type ForeignKeyTarget = {
-    columnName: string;
-    refTableName: string;
-    refColumnName: string;
-    constraintName: string;
-};
-
-type VirtualTableScrollReference = TableReference & {
-    scrollTo: (config: { left?: number; top?: number; index?: number; key?: React.Key }) => void;
-};
-
-const EXACT_GRID_FILTER_OPERATOR = '=';
-const CONTAINS_GRID_FILTER_OPERATOR = 'CONTAINS';
-const FILTER_FIELD_SELECT_STYLE: React.CSSProperties = {
-    width: 320,
-    flex: '0 1 320px',
-    minWidth: 260,
-    maxWidth: 'min(460px, 100%)',
-};
-const FILTER_FIELD_POPUP_WIDTH = 520;
-const FILTER_FIELD_OPTION_STYLE: React.CSSProperties = {
-    display: 'block',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-};
-const STRING_LIKE_GRID_FILTER_TYPES = new Set([
-    'bpchar',
-    'char',
-    'character',
-    'character varying',
-    'citext',
-    'clob',
-    'fixedstring',
-    'long nvarchar',
-    'long varchar',
-    'longtext',
-    'mediumtext',
-    'nchar',
-    'nclob',
-    'ntext',
-    'nvarchar',
-    'nvarchar2',
-    'string',
-    'text',
-    'tinytext',
-    'varchar',
-    'varchar2',
-]);
-
-const normalizeGridFilterColumnType = (columnType: unknown): string => {
-    let normalized = String(columnType ?? '').trim().toLowerCase().replace(/\s+/g, ' ');
-    for (let i = 0; i < 4; i += 1) {
-        const wrapped = normalized.match(/^(?:nullable|lowcardinality)\((.+)\)$/);
-        if (!wrapped) break;
-        normalized = wrapped[1].trim().replace(/\s+/g, ' ');
-    }
-    return normalized;
-};
-
-export const isStringLikeGridFilterColumnType = (columnType: unknown): boolean => {
-    const normalized = normalizeGridFilterColumnType(columnType);
-    if (!normalized) return false;
-    const baseType = normalized.replace(/\(.*/, '').trim();
-    return STRING_LIKE_GRID_FILTER_TYPES.has(baseType);
-};
-
-export const resolveDefaultGridFilterOperator = (columnType: unknown): string => (
-    isStringLikeGridFilterColumnType(columnType) ? CONTAINS_GRID_FILTER_OPERATOR : EXACT_GRID_FILTER_OPERATOR
-);
-
-export const resolveNextGridFilterOperatorForColumnChange = ({
-    currentOperator,
-    previousColumnType,
-    nextColumnType,
-}: {
-    currentOperator: unknown;
-    previousColumnType: unknown;
-    nextColumnType: unknown;
-}): string => {
-    const current = String(currentOperator || '').trim();
-    if (!current) return resolveDefaultGridFilterOperator(nextColumnType);
-    const previousDefault = resolveDefaultGridFilterOperator(previousColumnType);
-    return current === previousDefault ? resolveDefaultGridFilterOperator(nextColumnType) : current;
-};
-
-export const buildGridFieldSelectOptions = (columnNames: string[]) => (
-    (columnNames || []).map((columnName) => {
-        const text = String(columnName || '');
-        return {
-            value: text,
-            label: text,
-            title: text,
-        };
-    })
-);
-
-const renderGridFieldSelectOption = (option: { label?: React.ReactNode; value?: unknown; title?: unknown }) => {
-    const text = String(option?.title ?? option?.label ?? option?.value ?? '');
-    return (
-        <span title={text} style={FILTER_FIELD_OPTION_STYLE}>
-            {text}
-        </span>
-    );
-};
-
-type NormalizeCommitCellValue = (columnName: string, value: any, mode: 'insert' | 'update') => any;
-
-type DataGridCommitChangeSet = {
-    inserts: any[];
-    updates: any[];
-    deletes: any[];
-};
-
-export const buildDataGridCommitChangeSet = ({
-    addedRows,
-    modifiedRows,
-    deletedRowKeys,
-    data,
-    editLocator,
-    visibleColumnNames,
-    rowKeyToString,
-    normalizeCommitCellValue,
-    shouldCommitColumn,
-    rowLocatorMessages,
-}: {
-    addedRows: any[];
-    modifiedRows: Record<string, any>;
-    deletedRowKeys: Set<string>;
-    data: any[];
-    editLocator?: EditRowLocator;
-    visibleColumnNames: string[];
-    rowKeyToString: (key: any) => string;
-    normalizeCommitCellValue: NormalizeCommitCellValue;
-    shouldCommitColumn: (columnName: string) => boolean;
-    rowLocatorMessages?: RowLocatorMessages;
-}): { ok: true; changes: DataGridCommitChangeSet } | { ok: false; error: string } => {
-    if (!editLocator || editLocator.readOnly || editLocator.strategy === 'none') {
-        return { ok: false, error: editLocator?.reason || rowLocatorMessages?.noSafeLocator?.() || 'No safe row locator is available for this result set.' };
-    }
-
-    const normalizeValues = (values: Record<string, any>, mode: 'insert' | 'update') => {
-        const normalizedValues: Record<string, any> = {};
-        Object.entries(values).forEach(([col, val]) => {
-            if (!shouldCommitColumn(col)) return;
-            const commitColumnName = resolveWritableColumnName(col, editLocator);
-            if (!commitColumnName) return;
-            const normalizedVal = normalizeCommitCellValue(col, val, mode);
-            if (normalizedVal !== undefined) {
-                normalizedValues[commitColumnName] = normalizedVal;
-            }
-        });
-        return normalizedValues;
-    };
-
-    const originalRowsByKey = new Map<string, any>();
-    data.forEach((row) => {
-        const key = row?.[GONAVI_ROW_KEY];
-        if (key === undefined || key === null) return;
-        originalRowsByKey.set(rowKeyToString(key), row);
-    });
-
-    const inserts: any[] = [];
-    const updates: any[] = [];
-    const deletes: any[] = [];
-
-    addedRows.forEach(row => {
-        const key = row?.[GONAVI_ROW_KEY];
-        if (key !== undefined && key !== null && deletedRowKeys.has(rowKeyToString(key))) return;
-        inserts.push(normalizeValues(row, 'insert'));
-    });
-
-    for (const keyStr of deletedRowKeys) {
-        const originalRow = originalRowsByKey.get(keyStr);
-        if (!originalRow) continue;
-        const locatorValues = resolveRowLocatorValues(editLocator, originalRow, rowLocatorMessages);
-        if (!locatorValues.ok) return { ok: false, error: locatorValues.error };
-        deletes.push(locatorValues.values);
-    }
-
-    for (const [keyStr, newRow] of Object.entries(modifiedRows)) {
-        if (deletedRowKeys.has(keyStr)) continue;
-        const originalRow = originalRowsByKey.get(keyStr);
-        if (!originalRow) continue;
-
-        const locatorValues = resolveRowLocatorValues(editLocator, originalRow, rowLocatorMessages);
-        if (!locatorValues.ok) return { ok: false, error: locatorValues.error };
-
-        const hasRowKey = Object.prototype.hasOwnProperty.call(newRow as any, GONAVI_ROW_KEY);
-        let values: Record<string, any> = {};
-        if (!hasRowKey) {
-            values = { ...(newRow as any) };
-        } else {
-            visibleColumnNames.forEach((col) => {
-                const nextVal = (newRow as any)?.[col];
-                const prevVal = (originalRow as any)?.[col];
-                if (!isCellValueEqualForDiff(prevVal, nextVal)) values[col] = nextVal;
-            });
-        }
-
-        const normalizedValues = normalizeValues(values, 'update');
-        if (Object.keys(normalizedValues).length === 0) continue;
-        updates.push({ keys: locatorValues.values, values: normalizedValues });
-    }
-
-    return { ok: true, changes: { inserts, updates, deletes } };
-};
-
-// P2 性能优化：提取内联 style 对象为模块级常量，避免每次 render 创建新对象
-const CELL_ELLIPSIS_STYLE: React.CSSProperties = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0, width: '100%' };
-const VIRTUAL_CELL_TEXT_STYLE: React.CSSProperties = {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    minWidth: 0,
-    width: '100%',
-};
-const READONLY_CELL_WRAP_STYLE: React.CSSProperties = { minHeight: 20, display: 'flex', alignItems: 'center', width: '100%', minWidth: 0 };
-const INLINE_EDIT_FORM_ITEM_STYLE: React.CSSProperties = { margin: 0, width: '100%', minWidth: 0 };
-const VIRTUAL_EDITING_CELL_STYLE: React.CSSProperties = {
-    margin: 0,
-    padding: 0,
-    display: 'flex',
-    flex: '1 1 auto',
-    alignItems: 'center',
-    width: '100%',
-    minWidth: 0,
-    minHeight: 'calc(28px * var(--gn-ui-scale, 1))',
-    height: 'calc(28px * var(--gn-ui-scale, 1))',
-    overflow: 'visible',
-    whiteSpace: 'nowrap',
-    boxSizing: 'border-box',
-};
-
+    CellDisplayConnectionLike,
+    SortableHeaderCellProps,
+    Item,
+    EditableCellProps,
+    DataGridProps,
+    GridFilterCondition,
+    GridViewMode,
+    DdlViewLayoutMode,
+    DataGridExportScope,
+    VirtualEditingCellState,
+    ColumnMeta,
+    ForeignKeyTarget,
+    VirtualTableScrollReference,
+    NormalizeCommitCellValue,
+    DataGridCommitChangeSet,
+} from './DataGridCore';
+export {
+    GONAVI_ROW_KEY,
+    GONAVI_ROW_NUMBER_COLUMN_KEY,
+    resolveContextMenuFieldName,
+    formatCellDisplayText,
+    attachDataGridVirtualEditRenderVersion,
+    attachDataGridDisplayRenderVersion,
+    hasDataGridDisplayRenderVersionChanged,
+    hasDataGridVirtualEditRenderVersionChanged,
+    isStringLikeGridFilterColumnType,
+    resolveDefaultGridFilterOperator,
+    resolveNextGridFilterOperatorForColumnChange,
+    buildGridFieldSelectOptions,
+    buildDataGridCommitChangeSet,
+} from './DataGridCore';
 const DataGrid: React.FC<DataGridProps> = ({
     data, columnNames, loading, tableName, objectType = 'table', exportScope = 'table', dbName, connectionId, pkColumns = [], editLocator, readOnly = false,
     resultSql,
@@ -2229,20 +905,10 @@ const DataGrid: React.FC<DataGridProps> = ({
   
   const [sortInfo, setSortInfo] = useState<Array<{ columnKey: string, order: string, enabled?: boolean }>>([]);
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
-  const [columnMetaMap, setColumnMetaMap] = useState<Record<string, ColumnMeta>>({});
-  const [foreignKeyMap, setForeignKeyMap] = useState<Record<string, ForeignKeyTarget>>({});
-  const [uniqueKeyGroups, setUniqueKeyGroups] = useState<string[][]>([]);
-  const [metadataReloadVersion, setMetadataReloadVersion] = useState(0);
   const mergedDisplayDataRef = useRef<Item[]>([]);
   const closeCellEditModeRef = useRef<() => void>(() => {});
   const formRef = useRef(form);
   formRef.current = form;
-  const columnMetaCacheRef = useRef<Record<string, Record<string, ColumnMeta>>>({});
-  const columnMetaSeqRef = useRef(0);
-  const foreignKeyCacheRef = useRef<Record<string, Record<string, ForeignKeyTarget>>>({});
-  const foreignKeySeqRef = useRef(0);
-  const uniqueKeyGroupsCacheRef = useRef<Record<string, string[][]>>({});
-  const uniqueKeyGroupsSeqRef = useRef(0);
 
   useEffect(() => {
       const ext = sortInfoExternal || [];
@@ -2252,191 +918,28 @@ const DataGrid: React.FC<DataGridProps> = ({
       setSortInfo(ext);
   }, [sortInfoExternal, sortInfo]);
 
-  useEffect(() => {
-      const normalizedTableName = String(tableName || '').trim();
-      const normalizedDbName = String(dbName || '').trim();
-      if (!connectionId || !normalizedTableName) {
-          setColumnMetaMap({});
-          setForeignKeyMap({});
-          setUniqueKeyGroups([]);
-          return;
-      }
-      const cacheKey = `${connectionId}|${normalizedDbName}|${normalizedTableName}`;
-      setColumnMetaMap(columnMetaCacheRef.current[cacheKey] || {});
-      foreignKeySeqRef.current += 1;
-      setForeignKeyMap(exportScope === 'table' ? (foreignKeyCacheRef.current[cacheKey] || {}) : {});
-      setUniqueKeyGroups(uniqueKeyGroupsCacheRef.current[cacheKey] || []);
-  }, [connectionId, dbName, tableName, exportScope]);
-
-  useEffect(() => {
-      const normalizedTableName = String(tableName || '').trim();
-      const normalizedDbName = String(dbName || '').trim();
-      if (!connectionId || !normalizedTableName) return;
-
-      const cacheKey = `${connectionId}|${normalizedDbName}|${normalizedTableName}`;
-      if (columnMetaCacheRef.current[cacheKey]) return;
-
-      const conn = connections.find(c => c.id === connectionId);
-      if (!conn) {
-          setColumnMetaMap({});
-          return;
-      }
-
-      const config = {
-          ...conn.config,
-          port: Number(conn.config.port),
-          password: conn.config.password || "",
-          database: conn.config.database || "",
-          useSSH: conn.config.useSSH || false,
-          ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
-      };
-
-      const seq = ++columnMetaSeqRef.current;
-      const loadColumnMeta = async () => {
-          let nextMap: Record<string, ColumnMeta> | null = null;
-          for (let attempt = 0; attempt < 2; attempt += 1) {
-              try {
-                  const res = await DBGetColumns(buildRpcConnectionConfig(config) as any, normalizedDbName, normalizedTableName);
-                  if (seq !== columnMetaSeqRef.current) return;
-                  if (!res.success || !Array.isArray(res.data)) {
-                      continue;
-                  }
-                  const candidateMap = buildColumnMetaMap(res.data as ColumnDefinition[]);
-                  if (!hasUsableColumnMeta(candidateMap)) {
-                      continue;
-                  }
-                  nextMap = candidateMap;
-                  break;
-              } catch {
-                  if (seq !== columnMetaSeqRef.current) return;
-              }
-          }
-
-          if (seq !== columnMetaSeqRef.current) return;
-          if (nextMap) {
-              columnMetaCacheRef.current[cacheKey] = nextMap;
-              setColumnMetaMap(nextMap);
-              return;
-          }
-          setColumnMetaMap({});
-      };
-
-      void loadColumnMeta();
-  }, [connections, connectionId, dbName, tableName, metadataReloadVersion]);
-
-  useEffect(() => {
-      const normalizedTableName = String(tableName || '').trim();
-      const normalizedDbName = String(dbName || '').trim();
-      if (!connectionId || !normalizedTableName || exportScope !== 'table') return;
-
-      const cacheKey = `${connectionId}|${normalizedDbName}|${normalizedTableName}`;
-      if (foreignKeyCacheRef.current[cacheKey]) return;
-
-      const conn = connections.find(c => c.id === connectionId);
-      if (!conn) {
-          setForeignKeyMap({});
-          return;
-      }
-
-      const config = {
-          ...conn.config,
-          port: Number(conn.config.port),
-          password: conn.config.password || "",
-          database: conn.config.database || "",
-          useSSH: conn.config.useSSH || false,
-          ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
-      };
-
-      const seq = ++foreignKeySeqRef.current;
-      DBGetForeignKeys(buildRpcConnectionConfig(config) as any, normalizedDbName, normalizedTableName)
-          .then((res) => {
-              if (seq !== foreignKeySeqRef.current) return;
-              if (!res.success || !Array.isArray(res.data)) {
-                  setForeignKeyMap({});
-                  return;
-              }
-              const nextMap: Record<string, ForeignKeyTarget> = {};
-              (res.data as ForeignKeyDefinition[]).forEach((fk: any) => {
-                  const columnName = String(fk?.columnName ?? fk?.ColumnName ?? '').trim();
-                  const refTableName = String(fk?.refTableName ?? fk?.RefTableName ?? '').trim();
-                  if (!columnName || !refTableName || refTableName === '-') return;
-                  const target: ForeignKeyTarget = {
-                      columnName,
-                      refTableName,
-                      refColumnName: String(fk?.refColumnName ?? fk?.RefColumnName ?? '').trim(),
-                      constraintName: String(fk?.constraintName ?? fk?.ConstraintName ?? fk?.name ?? fk?.Name ?? '').trim(),
-                  };
-                  nextMap[columnName] = target;
-              });
-              foreignKeyCacheRef.current[cacheKey] = nextMap;
-              setForeignKeyMap(nextMap);
-          })
-          .catch(() => {
-              if (seq !== foreignKeySeqRef.current) return;
-              setForeignKeyMap({});
-          });
-  }, [connections, connectionId, dbName, tableName, exportScope, metadataReloadVersion]);
-
-  useEffect(() => {
-      const normalizedTableName = String(tableName || '').trim();
-      const normalizedDbName = String(dbName || '').trim();
-      if (!connectionId || !normalizedTableName) return;
-
-      const cacheKey = `${connectionId}|${normalizedDbName}|${normalizedTableName}`;
-      if (uniqueKeyGroupsCacheRef.current[cacheKey]) return;
-
-      const conn = connections.find(c => c.id === connectionId);
-      if (!conn) {
-          setUniqueKeyGroups([]);
-          return;
-      }
-
-      const config = {
-          ...conn.config,
-          port: Number(conn.config.port),
-          password: conn.config.password || "",
-          database: conn.config.database || "",
-          useSSH: conn.config.useSSH || false,
-          ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
-      };
-
-      const seq = ++uniqueKeyGroupsSeqRef.current;
-      DBGetIndexes(config as any, normalizedDbName, normalizedTableName)
-          .then((res) => {
-              if (seq !== uniqueKeyGroupsSeqRef.current) return;
-              if (!res.success || !Array.isArray(res.data)) {
-                  setUniqueKeyGroups([]);
-                  return;
-              }
-              const nextGroups = resolveUniqueKeyGroupsFromIndexes(res.data as IndexDefinition[]);
-              uniqueKeyGroupsCacheRef.current[cacheKey] = nextGroups;
-              setUniqueKeyGroups(nextGroups);
-          })
-          .catch(() => {
-              if (seq !== uniqueKeyGroupsSeqRef.current) return;
-              setUniqueKeyGroups([]);
-          });
-  }, [connections, connectionId, dbName, tableName, metadataReloadVersion]);
-
-  const columnMetaMapByLowerName = useMemo(() => {
-      const next: Record<string, ColumnMeta> = {};
-      Object.entries(columnMetaMap).forEach(([name, meta]) => {
-          const lowerName = String(name || '').toLowerCase();
-          if (!lowerName || next[lowerName]) return;
-          next[lowerName] = meta;
-      });
-      return next;
-  }, [columnMetaMap]);
-
-  const columnTypeMapByLowerName = useMemo(() => {
-      const next: Record<string, string> = {};
-      Object.entries(columnMetaMapByLowerName).forEach(([name, meta]) => {
-          const type = String(meta?.type || '').trim();
-          if (!name || !type) return;
-          next[name] = type;
-      });
-      return next;
-  }, [columnMetaMapByLowerName]);
+  const {
+      allTableColumnNames,
+      columnMetaCacheRef,
+      columnMetaMap,
+      columnMetaMapByLowerName,
+      columnTypeMapByLowerName,
+      foreignKeyCacheRef,
+      foreignKeyMap,
+      foreignKeyMapByLowerName,
+      getColumnFilterType,
+      metadataReloadVersion,
+      setMetadataReloadVersion,
+      uniqueKeyGroups,
+      uniqueKeyGroupsCacheRef,
+  } = useDataGridMetadata({
+      connections,
+      connectionId,
+      dbName,
+      tableName,
+      exportScope,
+      visibleColumnNames,
+  });
 
   const displayColumnTypeMap = useMemo(() => {
       const next: Record<string, string> = {};
@@ -2448,33 +951,6 @@ const DataGrid: React.FC<DataGridProps> = ({
       return next;
   }, [displayColumnNames, columnMetaMap, columnTypeMapByLowerName]);
 
-  const foreignKeyMapByLowerName = useMemo(() => {
-      const next: Record<string, ForeignKeyTarget> = {};
-      Object.entries(foreignKeyMap).forEach(([name, target]) => {
-          const lowerName = String(name || '').toLowerCase();
-          if (!lowerName || next[lowerName]) return;
-          next[lowerName] = target;
-      });
-      return next;
-  }, [foreignKeyMap]);
-
-  const getColumnFilterType = useCallback((columnName: string): string => {
-      const normalizedName = String(columnName || '').trim();
-      if (!normalizedName) return '';
-      return (columnMetaMap[normalizedName] || columnMetaMapByLowerName[normalizedName.toLowerCase()])?.type || '';
-  }, [columnMetaMap, columnMetaMapByLowerName]);
-
-  const allTableColumnNames = useMemo(() => {
-      const metaColumns = Object.keys(columnMetaMap);
-      if (metaColumns.length > 0) {
-          return metaColumns;
-      }
-      if (exportScope === 'table') {
-          return visibleColumnNames.filter((columnName) => columnName !== GONAVI_ROW_KEY);
-      }
-      return [];
-  }, [columnMetaMap, exportScope, visibleColumnNames]);
-
   const normalizeCommitCellValue = useCallback(
       (columnName: string, value: any, mode: 'insert' | 'update') => {
           if (value === undefined) return undefined;
@@ -2581,649 +1057,56 @@ const DataGrid: React.FC<DataGridProps> = ({
   const [tableBodyBottomPadding, setTableBodyBottomPadding] = useState(0);
 
   // P0 性能优化：CSS 模板字符串 memoize，仅在主题/布局变量变化时重算
-  const gridCssText = useMemo(() => `
-                .${gridId} .data-grid-toolbar-scroll > * {
-                    flex-shrink: 0;
-                }
-                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar {
-                    height: 7px;
-                }
-                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar-thumb {
-                    background: ${darkMode ? 'rgba(255,255,255,0.28)' : 'rgba(0,0,0,0.22)'};
-                    border: 0;
-                    background-clip: border-box;
-                    border-radius: 999px;
-                }
-                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar-thumb:hover {
-                    background: ${darkMode ? 'rgba(255,255,255,0.38)' : 'rgba(0,0,0,0.32)'};
-                    border: 0;
-                    background-clip: border-box;
-                }
-                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar-track {
-                    background: transparent;
-                }
-                .${gridId} .ant-table,
-                .${gridId} .ant-table-wrapper,
-                .${gridId} .ant-table-container {
-                    background: transparent !important;
-                    border-radius: ${panelRadius}px !important;
-                }
-                .${gridId} .ant-table-wrapper,
-                .${gridId} .ant-table-container {
-                    border: none !important;
-                    overflow: hidden !important;
-                }
-                .${gridId} .ant-table-tbody > tr > td,
-                .${gridId} .ant-table-tbody .ant-table-row > .ant-table-cell,
-                .${gridId} .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell { background: transparent !important; border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'} !important; border-inline-end: ${dataTableVerticalBorderRule} !important; font-size: ${densityParams.dataFontSize}px !important; vertical-align: middle !important; }
-                .${gridId} .ant-table-thead > tr > th { background: transparent !important; border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'} !important; border-inline-end: ${dataTableVerticalBorderRule} !important; font-size: ${densityParams.dataFontSize}px !important; }
-                .${gridId} .ant-table-tbody > tr > td:last-child,
-                .${gridId} .ant-table-tbody .ant-table-row > .ant-table-cell:last-child,
-                .${gridId} .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell:last-child,
-                .${gridId} .ant-table-thead > tr > th:last-child {
-                    border-inline-end-color: transparent !important;
-                }
-                /* 选择列对齐：header TH 无 class（Ant Design 虚拟模式），需用 :first-child 匹配 */
-                .${gridId} .ant-table-header th:first-child,
-                .${gridId} .ant-table-thead > tr > th:first-child {
-                    text-align: center !important;
-                    padding-inline-start: 0 !important;
-                    padding-inline-end: 0 !important;
-                    padding-left: 0 !important;
-                    padding-right: 0 !important;
-                }
-                .${gridId} .ant-table-selection-column {
-                    vertical-align: middle !important;
-                    text-align: center !important;
-                    padding-inline-start: 0 !important;
-                    padding-inline-end: 0 !important;
-                }
-                .${gridId} .ant-table-selection-column .ant-checkbox-wrapper {
-                    display: inline-flex !important;
-                    align-items: center !important;
-                    justify-content: center !important;
-                    margin-right: 0 !important;
-                }
-                /* 窄表场景下 rc-table 会按视口等比放大选择列宽度，不能再额外锁死 header 宽度；
-                   这里只统一 header/body 的内边距与对齐方式，避免第一列把后续数据列整体顶偏。 */
-                .${gridId} .ant-table-tbody > tr > td.ant-table-selection-column,
-                .${gridId} .ant-table-tbody .ant-table-row > .ant-table-cell.ant-table-selection-column {
-                    text-align: center !important;
-                    vertical-align: middle !important;
-                    padding-inline-start: 0 !important;
-                    padding-inline-end: 0 !important;
-                    padding-left: 0 !important;
-                    padding-right: 0 !important;
-                }
-                .${gridId} .ant-table-tbody > tr > td.ant-table-selection-column .ant-checkbox-wrapper,
-                .${gridId} .ant-table-tbody .ant-table-row > .ant-table-cell.ant-table-selection-column .ant-checkbox-wrapper {
-                    display: inline-flex !important;
-                    align-items: center !important;
-                    justify-content: center !important;
-                    margin-right: 0 !important;
-                }
-                .${gridId} .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell.ant-table-selection-column {
-                    display: flex !important;
-                    align-items: center !important;
-                    justify-content: center !important;
-                    padding-inline-start: 0 !important;
-                    padding-inline-end: 0 !important;
-                    padding-left: 0 !important;
-                    padding-right: 0 !important;
-                }
-                .${gridId} .ant-table-thead > tr:first-child > th:first-child,
-                .${gridId} .ant-table-header table > thead > tr:first-child > th:first-child {
-                    border-top-left-radius: ${panelRadius}px !important;
-                }
-                .${gridId} .ant-table-thead > tr:first-child > th:last-child,
-                .${gridId} .ant-table-header table > thead > tr:first-child > th:last-child {
-                    border-top-right-radius: ${panelRadius}px !important;
-                }
-                .${gridId} .ant-table-body {
-                    border-bottom-left-radius: ${panelRadius}px !important;
-                    border-bottom-right-radius: ${panelRadius}px !important;
-                }
-                .${gridId} .ant-table-thead > tr > th::before { display: none !important; }
-                .${gridId} .ant-table-thead > tr > th .ant-table-column-sorters { cursor: default !important; }
-                .${gridId} .ant-table-thead > tr > th .ant-table-column-sorter,
-                .${gridId} .ant-table-thead > tr > th .ant-table-column-sorter * { cursor: pointer !important; }
-                .${gridId} .ant-table-tbody > tr:hover > td,
-                .${gridId} .ant-table-tbody .ant-table-row:hover > .ant-table-cell { background-color: ${darkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.02)'} !important; }
-                .${gridId} .ant-table-tbody > tr.ant-table-row-selected > td,
-                .${gridId} .ant-table-tbody .ant-table-row.ant-table-row-selected > .ant-table-cell { background-color: ${darkMode ? `rgba(${selectionAccentRgb}, 0.18)` : `rgba(${selectionAccentRgb}, 0.08)`} !important; }
-                .${gridId} .ant-table-tbody > tr.ant-table-row-selected:hover > td,
-                .${gridId} .ant-table-tbody .ant-table-row.ant-table-row-selected:hover > .ant-table-cell { background-color: ${darkMode ? `rgba(${selectionAccentRgb}, 0.28)` : `rgba(${selectionAccentRgb}, 0.12)`} !important; }
-                .${gridId} .row-added td,
-                .${gridId} .row-added > .ant-table-cell { background-color: ${rowAddedBg} !important; color: ${darkMode ? '#e6fffb' : 'inherit'}; }
-                .${gridId} .row-modified td,
-                .${gridId} .row-modified > .ant-table-cell { background-color: ${rowModBg} !important; color: ${darkMode ? '#e6f7ff' : 'inherit'}; }
-                .${gridId} .row-deleted td,
-                .${gridId} .row-deleted > .ant-table-cell { background-color: ${darkMode ? '#1f1f1f' : '#f0f0f0'} !important; color: ${darkMode ? '#595959' : '#bfbfbf'} !important; text-decoration: line-through; }
-                .${gridId} .ant-table-tbody > tr.row-added:hover > td,
-                .${gridId} .ant-table-tbody .ant-table-row.row-added:hover > .ant-table-cell { background-color: ${rowAddedHover} !important; }
-                .${gridId} .ant-table-tbody > tr.row-modified:hover > td,
-                .${gridId} .ant-table-tbody .ant-table-row.row-modified:hover > .ant-table-cell { background-color: ${rowModHover} !important; }
-                .${gridId} .ant-table-tbody > tr.row-deleted:hover > td,
-                .${gridId} .ant-table-tbody .ant-table-row.row-deleted:hover > .ant-table-cell { background-color: ${darkMode ? '#2a2a2a' : '#e8e8e8'} !important; }
-                .${gridId}.cell-edit-mode .ant-table-tbody > tr > td[data-col-name],
-                .${gridId}.cell-edit-mode .ant-table-tbody .ant-table-row > .ant-table-cell[data-col-name] { user-select: none; -webkit-user-select: none; cursor: crosshair; }
-                .${gridId} .ant-table-tbody > tr > td[data-cell-selected="true"],
-                .${gridId} .ant-table-tbody .ant-table-row > .ant-table-cell[data-cell-selected="true"],
-                .${gridId} [data-cell-selected="true"] {
-                    box-shadow: inset 0 0 0 2px ${selectionAccentHex} !important;
-                    background-image: linear-gradient(${darkMode ? `rgba(${selectionAccentRgb}, 0.20)` : `rgba(${selectionAccentRgb}, 0.08)`}, ${darkMode ? `rgba(${selectionAccentRgb}, 0.20)` : `rgba(${selectionAccentRgb}, 0.08)`}) !important;
-                }
-                .${gridId} .ant-table-content,
-                .${gridId} .ant-table-body {
-                    scrollbar-gutter: stable;
-                }
-                .${gridId} .ant-table-body {
-                    padding-bottom: ${tableBodyBottomPadding}px;
-                    box-sizing: border-box;
-                    scroll-padding-bottom: ${tableBodyBottomPadding}px;
-                    contain: layout paint style;
-                }
-                .${gridId} .ant-table-tbody-virtual-holder,
-                .${gridId} .rc-virtual-list-holder {
-                    padding-bottom: ${tableBodyBottomPadding}px;
-                    box-sizing: border-box;
-                    scroll-padding-bottom: ${tableBodyBottomPadding}px;
-                    contain: ${useVirtualHolderPaintHints ? 'layout paint style' : 'layout style'};
-                    content-visibility: ${useVirtualHolderPaintHints ? 'auto' : 'visible'};
-                }
-                .${gridId} .ant-table-tbody-virtual-holder-inner {
-                    padding-bottom: ${tableBodyBottomPadding}px;
-                    box-sizing: border-box;
-                    contain: ${useVirtualHolderPaintHints ? 'layout paint style' : 'layout style'};
-                }
-                .${gridId} .ant-table-tbody-virtual-holder .ant-table-row,
-                .${gridId} .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell {
-                    contain: ${useVirtualRowCellContain ? 'layout paint style' : 'none'};
-                }
-                .${gridId}.gn-v2-data-grid .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
-                .${gridId}.gn-v2-data-grid .ant-table-tbody > tr > td,
-                .${gridId}.gn-v2-data-grid .ant-table-tbody .ant-table-row > .ant-table-cell,
-                .${gridId}.gn-v2-data-grid .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell {
-                    vertical-align: middle !important;
-                }
-                .${gridId}.gn-v2-data-grid .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell.ant-table-cell-row-hover,
-                .${gridId}.gn-v2-data-grid .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell.data-grid-virtual-inline-editing {
-                    overflow: visible;
-                    text-overflow: clip;
-                    white-space: normal;
-                }
-                .${gridId} .data-grid-table-wrap {
-                    width: 100%;
-                    max-width: 100%;
-                    overflow: hidden;
-                }
-                .${gridId} .ant-table-sticky-scroll {
-                    display: none !important;
-                }
-                .${gridId} .data-grid-find-highlight {
-                    padding: 0 1px;
-                    border-radius: 3px;
-                    background: ${darkMode ? 'rgba(246, 196, 83, 0.42)' : 'rgba(255, 193, 7, 0.42)'};
-                    color: inherit;
-                }
-                .${gridId} .editable-cell-value-wrap {
-                    display: block;
-                    width: 100%;
-                    min-width: 0;
-                    min-height: 20px;
-                    padding-right: 0;
-                    position: relative;
-                    contain: ${useVirtualEditablePaintContain ? 'layout paint style' : 'layout style'};
-                }
-                .${gridId} .editable-cell-value-wrap > * {
-                    min-width: 0;
-                }
-                .${gridId} .data-grid-inline-editor-form-item,
-                .${gridId} .data-grid-inline-editor-form-item .ant-form-item-row,
-                .${gridId} .data-grid-inline-editor-form-item .ant-form-item-control,
-                .${gridId} .data-grid-inline-editor-form-item .ant-form-item-control-input,
-                .${gridId} .data-grid-inline-editor-form-item .ant-form-item-control-input-content {
-                    width: 100%;
-                    min-width: 0;
-                }
-                .${gridId} .data-grid-inline-editor-input,
-                .${gridId} .data-grid-inline-editor-form-item .ant-picker {
-                    width: 100% !important;
-                    min-width: 0;
-                }
-                .${gridId} .ant-table-tbody-virtual-holder .editable-cell-value-wrap {
-                    content-visibility: ${useVirtualEditableVisibilityHints ? 'auto' : 'visible'};
-                    contain-intrinsic-size: ${useVirtualEditableVisibilityHints ? '24px 160px' : 'auto'};
-                }
-                /* 虚拟表列对齐：阻止 header <table> 通过 min-width:100% 拉伸到视口，
-                   使 header 列宽与虚拟 body 单元格宽度精确一致 */
-                .${gridId} .ant-table-header > table {
-                    min-width: 0 !important;
-                }
-                .${gridId} .ant-table-tbody-virtual-scrollbar.ant-table-tbody-virtual-scrollbar-horizontal {
-                    display: none !important;
-                }
-                .${gridId} .data-grid-table-wrap.data-grid-table-wrap-external-active .ant-table-content {
-                    overflow-x: hidden !important;
-                }
-                .${gridId} .data-grid-table-wrap.data-grid-table-wrap-external-active .ant-table-body {
-                    overflow-x: hidden !important;
-                    overflow-y: auto !important;
-                }
-                .${gridId} .data-grid-table-wrap.data-grid-table-wrap-external-active .ant-table-tbody-virtual-holder,
-                .${gridId} .data-grid-table-wrap.data-grid-table-wrap-external-active .rc-virtual-list-holder {
-                    overflow-x: hidden !important;
-                }
-                .${gridId} .ant-table-body {
-                    scrollbar-width: thin;
-                    scrollbar-color: ${floatingScrollbarThumbBg} transparent;
-                }
-                .${gridId} .ant-table-body::-webkit-scrollbar {
-                    width: ${floatingScrollbarHeight}px;
-                    height: 0;
-                }
-                .${gridId} .ant-table-body::-webkit-scrollbar-track {
-                    background: ${verticalScrollbarTrackBg};
-                    margin: 8px 0;
-                    border-radius: 999px;
-                }
-                .${gridId} .ant-table-body::-webkit-scrollbar-thumb {
-                    background: ${floatingScrollbarThumbBg};
-                    border: 1px solid ${floatingScrollbarThumbBorderColor};
-                    background-clip: border-box;
-                    border-radius: 999px;
-                    box-shadow: ${floatingScrollbarThumbShadow};
-                }
-                .${gridId} .ant-table-body::-webkit-scrollbar-thumb:hover {
-                    background: ${floatingScrollbarThumbHoverBg};
-                    border: 1px solid ${floatingScrollbarThumbBorderColor};
-                    background-clip: border-box;
-                    box-shadow: ${floatingScrollbarThumbShadow};
-                }
-                .${gridId} .rc-virtual-list-holder {
-                    scrollbar-width: thin;
-                    scrollbar-color: ${floatingScrollbarThumbBg} transparent;
-                }
-                .${gridId} .rc-virtual-list-holder::-webkit-scrollbar {
-                    width: ${floatingScrollbarHeight}px;
-                    height: 0;
-                }
-                .${gridId} .rc-virtual-list-holder::-webkit-scrollbar-track {
-                    background: ${verticalScrollbarTrackBg};
-                    margin: 8px 0;
-                    border-radius: 999px;
-                }
-                .${gridId} .rc-virtual-list-holder::-webkit-scrollbar-thumb {
-                    background: ${floatingScrollbarThumbBg};
-                    border: 1px solid ${floatingScrollbarThumbBorderColor};
-                    background-clip: border-box;
-                    border-radius: 999px;
-                    box-shadow: ${floatingScrollbarThumbShadow};
-                }
-                .${gridId} .rc-virtual-list-holder::-webkit-scrollbar-thumb:hover {
-                    background: ${floatingScrollbarThumbHoverBg};
-                    border: 1px solid ${floatingScrollbarThumbBorderColor};
-                    background-clip: border-box;
-                    box-shadow: ${floatingScrollbarThumbShadow};
-                }
-                .${gridId} .data-grid-external-horizontal-scroll {
-                    position: absolute;
-                    left: ${floatingScrollbarInset}px;
-                    right: ${floatingScrollbarInset}px;
-                    bottom: ${floatingScrollbarBottomOffset}px;
-                    height: ${floatingScrollbarHeight + 4}px;
-                    overflow-x: auto;
-                    overflow-y: hidden;
-                    background: transparent;
-                    z-index: 24;
-                }
-                .${gridId} .data-grid-external-horizontal-scroll::-webkit-scrollbar {
-                    height: ${floatingScrollbarHeight}px;
-                }
-                .${gridId} .data-grid-external-horizontal-scroll::-webkit-scrollbar-track {
-                    background: ${horizontalScrollbarTrackBg};
-                    border: 1px solid ${horizontalScrollbarTrackBorderColor};
-                    border-radius: 999px;
-                    box-shadow: ${horizontalScrollbarTrackShadow};
-                }
-                .${gridId} .data-grid-external-horizontal-scroll::-webkit-scrollbar-thumb {
-                    background: ${horizontalScrollbarThumbBg};
-                    border: 1px solid ${horizontalScrollbarThumbBorderColor};
-                    background-clip: border-box;
-                    border-radius: 999px;
-                    box-shadow: ${horizontalScrollbarThumbShadow};
-                }
-                .${gridId} .data-grid-external-horizontal-scroll::-webkit-scrollbar-thumb:hover {
-                    background: ${horizontalScrollbarThumbHoverBg};
-                    border: 1px solid ${horizontalScrollbarThumbBorderColor};
-                    background-clip: border-box;
-                    box-shadow: ${horizontalScrollbarThumbShadow};
-                }
-                .${gridId} .data-grid-external-horizontal-scroll-inner {
-                    height: 1px;
-                }
-                .${gridId} .data-grid-pagination-shell {
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: flex-end;
-                    gap: 10px;
-                    flex-wrap: wrap;
-                    max-width: 100%;
-                    padding: 8px 10px;
-                    border-radius: 16px;
-                    border: 1px solid ${paginationShellBorderColor};
-                    background: ${paginationShellBg};
-                    box-shadow: ${paginationShellShadow};
-                    backdrop-filter: ${dataGridBackdropFilter};
-                    -webkit-backdrop-filter: ${dataGridBackdropFilter};
-                }
-                .${gridId} .data-grid-pagination-summary,
-                .${gridId} .data-grid-pagination-page-chip {
-                    display: inline-flex;
-                    align-items: center;
-                    gap: 8px;
-                    min-height: 34px;
-                    padding: 0 12px;
-                    border-radius: 999px;
-                    border: 1px solid ${paginationChipBorderColor};
-                    background: ${paginationChipBg};
-                    color: ${paginationPrimaryTextColor};
-                    font-size: 12px;
-                    line-height: 1;
-                    font-variant-numeric: tabular-nums;
-                    white-space: nowrap;
-                }
-                .${gridId} .data-grid-pagination-kicker {
-                    display: inline-flex;
-                    align-items: center;
-                    height: 20px;
-                    padding: 0 8px;
-                    border-radius: 999px;
-                    background: ${paginationAccentBg};
-                    border: 1px solid ${paginationAccentBorderColor};
-                    color: ${paginationActiveItemTextColor};
-                    font-size: 11px;
-                    font-weight: 700;
-                    letter-spacing: 0.02em;
-                }
-                .${gridId} .data-grid-pagination-summary-value {
-                    color: ${paginationPrimaryTextColor};
-                    font-weight: 600;
-                    font-variant-numeric: tabular-nums;
-                }
-                .${gridId} .data-grid-pagination-page-chip {
-                    color: ${paginationSecondaryTextColor};
-                    font-weight: 600;
-                }
-                .${gridId} .ant-pagination {
-                    display: inline-flex;
-                    align-items: center;
-                    gap: 6px;
-                    margin: 0;
-                    color: ${paginationPrimaryTextColor};
-                }
-                .${gridId} .ant-pagination .ant-pagination-item,
-                .${gridId} .ant-pagination .ant-pagination-prev,
-                .${gridId} .ant-pagination .ant-pagination-next,
-                .${gridId} .ant-pagination .ant-pagination-jump-prev,
-                .${gridId} .ant-pagination .ant-pagination-jump-next {
-                    min-width: 34px;
-                    height: 34px;
-                    margin-inline-end: 0;
-                    border-radius: 12px;
-                    border: 1px solid ${paginationChipBorderColor};
-                    background: ${paginationChipBg};
-                    box-shadow: none;
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    overflow: hidden;
-                    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
-                }
-                .${gridId} .ant-pagination .ant-pagination-item a,
-                .${gridId} .ant-pagination .ant-pagination-prev .ant-pagination-item-link,
-                .${gridId} .ant-pagination .ant-pagination-next .ant-pagination-item-link,
-                .${gridId} .ant-pagination .ant-pagination-prev > *,
-                .${gridId} .ant-pagination .ant-pagination-next > * {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    width: 100%;
-                    height: 100%;
-                    color: ${paginationPrimaryTextColor};
-                    font-weight: 600;
-                    border: none;
-                    background: transparent;
-                    border-radius: inherit;
-                    line-height: 1;
-                }
-                .${gridId} .ant-pagination .ant-pagination-item:hover,
-                .${gridId} .ant-pagination .ant-pagination-prev:hover,
-                .${gridId} .ant-pagination .ant-pagination-next:hover {
-                    background: ${paginationHoverBg};
-                    border-color: ${paginationActiveItemBorderColor};
-                    transform: translateY(-1px);
-                }
-                .${gridId} .ant-pagination .ant-pagination-item-active {
-                    border-color: ${paginationActiveItemBorderColor};
-                    background: ${paginationActiveItemBg};
-                    box-shadow: inset 0 0 0 1px ${paginationAccentBorderColor};
-                }
-                .${gridId} .ant-pagination .ant-pagination-item-active a {
-                    color: ${paginationActiveItemTextColor};
-                }
-                .${gridId} .ant-pagination .ant-pagination-disabled,
-                .${gridId} .ant-pagination .ant-pagination-disabled:hover {
-                    background: transparent;
-                    border-color: ${paginationChipBorderColor};
-                    transform: none;
-                    opacity: 0.42;
-                }
-                .${gridId} .ant-pagination .ant-pagination-jump-prev,
-                .${gridId} .ant-pagination .ant-pagination-jump-next {
-                    padding: 0;
-                }
-                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link,
-                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link {
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    width: 100%;
-                    height: 100%;
-                    padding: 0;
-                    margin: 0;
-                    line-height: 1;
-                }
-                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-container,
-                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-container {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    width: 100%;
-                    height: 100%;
-                    position: relative;
-                    line-height: 1;
-                }
-                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-ellipsis,
-                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-ellipsis,
-                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link-icon,
-                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link-icon {
-                    position: absolute !important;
-                    top: 0 !important;
-                    right: 0 !important;
-                    bottom: 0 !important;
-                    left: 0 !important;
-                    inset: 0 !important;
-                    width: fit-content !important;
-                    height: fit-content !important;
-                    min-width: 0 !important;
-                    min-height: 0 !important;
-                    margin: auto !important;
-                    padding: 0 !important;
-                    transform: none !important;
-                    display: inline-flex !important;
-                    align-items: center !important;
-                    justify-content: center !important;
-                    line-height: 1 !important;
-                    color: ${paginationSecondaryTextColor};
-                }
-                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-ellipsis,
-                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-ellipsis {
-                    letter-spacing: 0.18em;
-                    text-indent: 0.18em;
-                    text-align: center;
-                }
-                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link-icon .anticon,
-                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link-icon .anticon,
-                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link-icon svg,
-                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link-icon svg {
-                    display: inline-flex !important;
-                    align-items: center !important;
-                    justify-content: center !important;
-                    width: 1em;
-                    height: 1em;
-                    line-height: 1;
-                }
-                .${gridId} .data-grid-pagination-nav-icon {
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    width: 100%;
-                    height: 100%;
-                    font-size: 12px;
-                    line-height: 1;
-                }
-                .${gridId} .data-grid-pagination-nav-icon .anticon {
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    width: 100%;
-                    height: 100%;
-                }
-                .${gridId} .data-grid-pagination-jump {
-                    display: inline-flex;
-                    align-items: center;
-                    gap: 6px;
-                    height: 34px;
-                    color: ${paginationSecondaryTextColor};
-                    font-size: 12px;
-                    font-weight: 600;
-                    white-space: nowrap;
-                }
-                .${gridId} .data-grid-pagination-jump-label {
-                    color: ${paginationSecondaryTextColor};
-                    font-variant-numeric: tabular-nums;
-                }
-                .${gridId} .data-grid-pagination-jump-input,
-                .${gridId} .data-grid-pagination-jump-input.ant-input-number {
-                    width: 64px;
-                    min-width: 64px;
-                    height: 34px;
-                    display: inline-flex;
-                    align-items: stretch;
-                }
-                .${gridId} .data-grid-pagination-jump-input .ant-input-number-input-wrap,
-                .${gridId} .data-grid-pagination-jump-input .ant-input-number-input {
-                    height: 100%;
-                }
-                .${gridId} .data-grid-pagination-jump-input .ant-input-number-input {
-                    padding: 0 10px;
-                    text-align: center;
-                    color: ${paginationPrimaryTextColor};
-                    font-weight: 600;
-                    font-variant-numeric: tabular-nums;
-                    line-height: 34px;
-                }
-                .${gridId} .data-grid-pagination-jump-input.ant-input-number {
-                    border-radius: 12px;
-                    border: 1px solid ${paginationChipBorderColor};
-                    background: ${paginationChipBg};
-                    box-shadow: none;
-                }
-                .${gridId} .data-grid-pagination-jump-button.ant-btn {
-                    height: 34px;
-                    min-width: 34px;
-                    padding: 0 10px;
-                    border-radius: 12px;
-                    border-color: ${paginationChipBorderColor};
-                    background: ${paginationChipBg};
-                    color: ${paginationPrimaryTextColor};
-                    font-weight: 700;
-                    box-shadow: none;
-                }
-                .${gridId} .data-grid-pagination-size-select {
-                    width: 72px;
-                    min-width: 72px;
-                    max-width: 72px;
-                    height: 34px;
-                    display: inline-flex;
-                    align-items: stretch;
-                }
-                .${gridId} .data-grid-pagination-size-select.ant-select-single,
-                .${gridId} .data-grid-pagination-size-select.ant-select-single.ant-select-sm {
-                    width: 72px;
-                    min-width: 72px;
-                    max-width: 72px;
-                    height: 34px;
-                }
-                .${gridId} .data-grid-pagination-size-select .ant-select-selector {
-                    height: 34px !important;
-                    border-radius: 12px !important;
-                    border: 1px solid ${paginationChipBorderColor} !important;
-                    background: ${paginationChipBg} !important;
-                    box-shadow: none !important;
-                    padding: 0 24px 0 10px !important;
-                    display: flex !important;
-                    align-items: center !important;
-                }
-                .${gridId} .data-grid-pagination-size-select .ant-select-selection-wrap {
-                    display: flex !important;
-                    align-items: center !important;
-                    height: 100%;
-                }
-                .${gridId} .data-grid-pagination-size-select .ant-select-selection-search,
-                .${gridId} .data-grid-pagination-size-select .ant-select-selection-search-input {
-                    height: 100% !important;
-                }
-                .${gridId} .data-grid-pagination-size-select .ant-select-selection-item,
-                .${gridId} .data-grid-pagination-size-select .ant-select-selection-placeholder {
-                    display: flex;
-                    align-items: center;
-                    height: 100%;
-                    line-height: 34px !important;
-                    color: ${paginationPrimaryTextColor};
-                    font-weight: 600;
-                    justify-content: flex-start;
-                    font-variant-numeric: tabular-nums;
-                }
-                .${gridId} .data-grid-pagination-size-select .ant-select-selection-search {
-                    inset-inline-start: 10px !important;
-                    inset-inline-end: 24px !important;
-                }
-                .${gridId} .data-grid-pagination-size-select .ant-select-arrow {
-                    color: ${paginationSecondaryTextColor};
-                    inset-inline-end: 10px;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    margin-top: 0;
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    height: 16px;
-                    line-height: 1;
-                }
-                .${gridId} .data-grid-pagination-size-select .ant-select-arrow .anticon {
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    line-height: 1;
-                }
-  `, [themeStyles, gridId, tableBodyBottomPadding, darkMode, opacity, dataTableVerticalBorderColor, densityParams]);
+  const gridCssText = useMemo(
+      () => buildDataGridCssText({
+          darkMode,
+          dataGridBackdropFilter,
+          dataTableVerticalBorderRule,
+          densityParams,
+          floatingScrollbarBottomOffset,
+          floatingScrollbarHeight,
+          floatingScrollbarInset,
+          floatingScrollbarThumbBg,
+          floatingScrollbarThumbBorderColor,
+          floatingScrollbarThumbHoverBg,
+          floatingScrollbarThumbShadow,
+          gridId,
+          horizontalScrollbarThumbBg,
+          horizontalScrollbarThumbBorderColor,
+          horizontalScrollbarThumbHoverBg,
+          horizontalScrollbarThumbShadow,
+          horizontalScrollbarTrackBg,
+          horizontalScrollbarTrackBorderColor,
+          horizontalScrollbarTrackShadow,
+          paginationAccentBg,
+          paginationAccentBorderColor,
+          paginationActiveItemBg,
+          paginationActiveItemBorderColor,
+          paginationActiveItemTextColor,
+          paginationChipBg,
+          paginationChipBorderColor,
+          paginationHoverBg,
+          paginationPrimaryTextColor,
+          paginationSecondaryTextColor,
+          paginationShellBg,
+          paginationShellBorderColor,
+          paginationShellShadow,
+          panelRadius,
+          rowAddedBg,
+          rowAddedHover,
+          rowModBg,
+          rowModHover,
+          selectionAccentHex,
+          selectionAccentRgb,
+          tableBodyBottomPadding,
+          useVirtualEditablePaintContain,
+          useVirtualEditableVisibilityHints,
+          useVirtualHolderPaintHints,
+          useVirtualRowCellContain,
+          verticalScrollbarTrackBg,
+      }),
+      [themeStyles, gridId, tableBodyBottomPadding, darkMode, opacity, dataTableVerticalBorderColor, densityParams],
+  );
 
   const recalculateTableMetrics = useCallback((targetElement?: HTMLElement | null) => {
       const target = targetElement || containerRef.current;
@@ -3301,7 +1184,7 @@ const DataGrid: React.FC<DataGridProps> = ({
   const [modifiedRows, setModifiedRows] = useState<Record<string, any>>({});
   const [deletedRowKeys, setDeletedRowKeys] = useState<Set<string>>(new Set());
   // 同步到模块级变量，确保 EditableCell 事件处理器始终读取最新删除状态
-  globalDeletedRowKeys = deletedRowKeys;
+  setGlobalDeletedRowKeys(deletedRowKeys);
   const [modifiedColumns, setModifiedColumns] = useState<Record<string, Set<string>>>({});
   const [previewModalOpen, setPreviewModalOpen] = useState(false);
   const [previewSqlData, setPreviewSqlData] = useState<{
@@ -3520,625 +1403,56 @@ const DataGrid: React.FC<DataGridProps> = ({
   }, [closeCellEditMode]);
 
   // 批量填充选中的单元格
-  const handleBatchFillCells = useCallback(() => {
-    const cellsToFill = currentSelectionRef.current;
-    if (cellsToFill.size === 0) {
-      void message.info(translateDataGrid('data_grid.message.select_cells_to_fill'));
-      return;
-    }
-
-    const fillValue = batchEditSetNull ? null : batchEditValue;
-
-    const addedRowMap = new Map<string, any>();
-    addedRows.forEach((r) => {
-      const k = r?.[GONAVI_ROW_KEY];
-      if (k === undefined) return;
-      addedRowMap.set(rowKeyStr(k), r);
-    });
-
-    const baseRowMap = new Map<string, any>();
-    displayDataRef.current.forEach((r) => {
-      const k = r?.[GONAVI_ROW_KEY];
-      if (k === undefined) return;
-      baseRowMap.set(rowKeyStr(k), r);
-    });
-
-    const patchesByRow = new Map<string, Record<string, any>>();
-    let updatedCount = 0;
-
-    cellsToFill.forEach((cellKey) => {
-      const parts = splitCellKey(cellKey);
-      if (!parts) return;
-      const { rowKey, colName } = parts;
-
-      const existing = modifiedRows[rowKey];
-      const baseRow = baseRowMap.get(rowKey);
-      let currentVal: any;
-
-      const addedRow = addedRowMap.get(rowKey);
-      if (addedRow) {
-        currentVal = addedRow?.[colName];
-      } else if (existing && Object.prototype.hasOwnProperty.call(existing as any, GONAVI_ROW_KEY)) {
-        currentVal = (existing as any)?.[colName];
-      } else if (existing && Object.prototype.hasOwnProperty.call(existing as any, colName)) {
-        currentVal = (existing as any)?.[colName];
-      } else {
-        currentVal = baseRow?.[colName];
-      }
-
-      const isSame = isCellValueEqualForDiff(currentVal, fillValue);
-      if (isSame) return;
-
-      const patch = patchesByRow.get(rowKey) || {};
-      patch[colName] = fillValue;
-      patchesByRow.set(rowKey, patch);
-      updatedCount++;
-    });
-
-    if (updatedCount === 0) {
-      void message.info(translateDataGrid('data_grid.message.selected_cells_no_update'));
-      return;
-    }
-
-    // 仅做一次状态提交，避免大量 setState 循环
-    setAddedRows(prev => prev.map(r => {
-      const k = r?.[GONAVI_ROW_KEY];
-      if (k === undefined) return r;
-      const patch = patchesByRow.get(rowKeyStr(k));
-      if (!patch) return r;
-      return { ...r, ...patch };
-    }));
-
-    setModifiedRows(prev => {
-      let next: Record<string, any> | null = null;
-
-      patchesByRow.forEach((patch, keyStr) => {
-        if (addedRowMap.has(keyStr)) return;
-
-        const existing = prev[keyStr];
-        const merged = existing ? { ...(existing as any), ...patch } : patch;
-        if (!next) next = { ...prev };
-        next[keyStr] = merged;
-      });
-
-      return next || prev;
-    });
-
-    void message.success(translateDataGrid('data_grid.message.filled_cells', { count: updatedCount }));
-    closeBatchEditModal();
-
-    // 清除选中状态
-    setSelectedCells(new Set());
-    currentSelectionRef.current = new Set();
-    selectionStartRef.current = null;
-    isDraggingRef.current = false;
-    cellSelectionPointerRef.current = null;
-    if (cellSelectionAutoScrollRafRef.current !== null) {
-      cancelAnimationFrame(cellSelectionAutoScrollRafRef.current);
-      cellSelectionAutoScrollRafRef.current = null;
-    }
-    updateCellSelection(new Set());
-  }, [batchEditValue, batchEditSetNull, addedRows, modifiedRows, rowKeyStr, updateCellSelection, closeBatchEditModal, translateDataGrid]);
-
-  // 事件委托：在容器级别处理单元格拖选；未开启模式时，拖拽超过阈值会自动进入单元格编辑模式。
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!canModifyData || !isTableSurfaceActive) return;
-    if (!container) return;
-    const EDGE_THRESHOLD_PX = 28;
-    const MIN_SCROLL_STEP = 8;
-    const MAX_SCROLL_STEP = 24;
-
-    const isInteractiveTarget = (target: HTMLElement | null): boolean => {
-      if (!target) return false;
-      return !!target.closest('input, textarea, button, select, [contenteditable="true"], .ant-checkbox, .ant-picker, .ant-select, .ant-dropdown, .ant-modal');
-    };
-
-    const getCellElement = (target: HTMLElement | null): HTMLElement | null => {
-      if (!target) return null;
-      const cell = target.closest('[data-row-key][data-col-name]') as HTMLElement;
-      if (!cell || !container.contains(cell)) return null;
-      const colName = cell.getAttribute('data-col-name');
-      if (!colName || !isWritableResultColumn(colName, effectiveEditLocator)) return null;
-      return cell;
-    };
-
-    const getCellInfo = (target: HTMLElement | null): { rowKey: string; colName: string } | null => {
-      const cell = getCellElement(target);
-      if (!cell) return null;
-      const rowKey = cell.getAttribute('data-row-key');
-      const colName = cell.getAttribute('data-col-name');
-      if (!rowKey || !colName) return null;
-      return { rowKey, colName };
-    };
-
-    const getCellInfoFromPoint = (x: number, y: number): { rowKey: string; colName: string } | null => {
-      const target = document.elementFromPoint(x, y) as HTMLElement | null;
-      return getCellInfo(target);
-    };
-
-    const applySelectionUpdate = (cellInfo: { rowKey: string; colName: string }) => {
-      const start = selectionStartRef.current;
-      if (!start) return;
-
-      const currentData = displayDataRef.current;
-      const rowIndexMap = rowIndexMapRef.current;
-      const startRowIndex = start.rowIndex;
-      const endRowIndex = rowIndexMap.get(cellInfo.rowKey) ?? -1;
-      if (startRowIndex === -1 || endRowIndex === -1) return;
-
-      const startColIndex = start.colIndex;
-      const endColIndex = columnIndexMap.get(cellInfo.colName) ?? -1;
-      if (startColIndex === -1 || endColIndex === -1) return;
-
-      const minRowIndex = Math.min(startRowIndex, endRowIndex);
-      const maxRowIndex = Math.max(startRowIndex, endRowIndex);
-      const minColIndex = Math.min(startColIndex, endColIndex);
-      const maxColIndex = Math.max(startColIndex, endColIndex);
-
-      const newSelectedCells = new Set<string>();
-      for (let i = minRowIndex; i <= maxRowIndex; i++) {
-        const row = currentData[i];
-        const rKey = String(row?.[GONAVI_ROW_KEY]);
-        for (let j = minColIndex; j <= maxColIndex; j++) {
-          newSelectedCells.add(makeCellKey(rKey, displayColumnNames[j]));
-        }
-      }
-
-      currentSelectionRef.current = newSelectedCells;
-      updateCellSelection(newSelectedCells);
-    };
-
-    const scheduleSelectionUpdate = (cellInfo: { rowKey: string; colName: string }) => {
-      if (cellSelectionRafRef.current !== null) {
-        cancelAnimationFrame(cellSelectionRafRef.current);
-      }
-
-      cellSelectionRafRef.current = requestAnimationFrame(() => {
-        cellSelectionRafRef.current = null;
-        applySelectionUpdate(cellInfo);
-      });
-    };
-
-    const stopAutoScroll = () => {
-      if (cellSelectionAutoScrollRafRef.current !== null) {
-        cancelAnimationFrame(cellSelectionAutoScrollRafRef.current);
-        cellSelectionAutoScrollRafRef.current = null;
-      }
-    };
-
-    const getScrollStep = (distanceToEdge: number): number => {
-      const ratio = Math.min(1, Math.max(0, distanceToEdge / EDGE_THRESHOLD_PX));
-      return Math.round(MIN_SCROLL_STEP + (MAX_SCROLL_STEP - MIN_SCROLL_STEP) * ratio);
-    };
-
-    const autoScrollTick = () => {
-      if (!isDraggingRef.current || !selectionStartRef.current) {
-        stopAutoScroll();
-        return;
-      }
-
-      const pointer = cellSelectionPointerRef.current;
-      const tableBody = container.querySelector('.ant-table-body') as HTMLElement | null;
-      if (!pointer || !tableBody) {
-        cellSelectionAutoScrollRafRef.current = requestAnimationFrame(autoScrollTick);
-        return;
-      }
-
-      const rect = tableBody.getBoundingClientRect();
-      const maxScrollTop = Math.max(0, tableBody.scrollHeight - tableBody.clientHeight);
-      const maxScrollLeft = Math.max(0, tableBody.scrollWidth - tableBody.clientWidth);
-      let deltaY = 0;
-      let deltaX = 0;
-
-      if (pointer.y < rect.top + EDGE_THRESHOLD_PX && tableBody.scrollTop > 0) {
-        const distance = rect.top + EDGE_THRESHOLD_PX - pointer.y;
-        deltaY = -getScrollStep(distance);
-      } else if (pointer.y > rect.bottom - EDGE_THRESHOLD_PX && tableBody.scrollTop < maxScrollTop) {
-        const distance = pointer.y - (rect.bottom - EDGE_THRESHOLD_PX);
-        deltaY = getScrollStep(distance);
-      }
-
-      if (pointer.x < rect.left + EDGE_THRESHOLD_PX && tableBody.scrollLeft > 0) {
-        const distance = rect.left + EDGE_THRESHOLD_PX - pointer.x;
-        deltaX = -getScrollStep(distance);
-      } else if (pointer.x > rect.right - EDGE_THRESHOLD_PX && tableBody.scrollLeft < maxScrollLeft) {
-        const distance = pointer.x - (rect.right - EDGE_THRESHOLD_PX);
-        deltaX = getScrollStep(distance);
-      }
-
-      let didScroll = false;
-      if (deltaY !== 0) {
-        const nextTop = Math.max(0, Math.min(maxScrollTop, tableBody.scrollTop + deltaY));
-        if (nextTop !== tableBody.scrollTop) {
-          tableBody.scrollTop = nextTop;
-          didScroll = true;
-        }
-      }
-
-      if (deltaX !== 0) {
-        const nextLeft = Math.max(0, Math.min(maxScrollLeft, tableBody.scrollLeft + deltaX));
-        if (nextLeft !== tableBody.scrollLeft) {
-          tableBody.scrollLeft = nextLeft;
-          didScroll = true;
-        }
-      }
-
-      if (didScroll) {
-        const cellInfo = getCellInfoFromPoint(pointer.x, pointer.y);
-        if (cellInfo) scheduleSelectionUpdate(cellInfo);
-      }
-
-      cellSelectionAutoScrollRafRef.current = requestAnimationFrame(autoScrollTick);
-    };
-
-    const ensureAutoScroll = () => {
-      if (cellSelectionAutoScrollRafRef.current !== null) return;
-      cellSelectionAutoScrollRafRef.current = requestAnimationFrame(autoScrollTick);
-    };
-
-    const beginCellSelection = (cellInfo: { rowKey: string; colName: string }, x: number, y: number) => {
-      if (!cellEditModeRef.current) {
-        cellEditModeRef.current = true;
-        setCellEditMode(true);
-      }
-      suppressCellSelectionClickRef.current = true;
-      pendingCellSelectionStartRef.current = null;
-      isDraggingRef.current = true;
-      cellSelectionPointerRef.current = { x, y };
-
-      const currentData = displayDataRef.current;
-      const nextRowIndexMap = new Map<string, number>();
-      currentData.forEach((r, idx) => {
-        const k = r?.[GONAVI_ROW_KEY];
-        if (k === undefined) return;
-        nextRowIndexMap.set(String(k), idx);
-      });
-      rowIndexMapRef.current = nextRowIndexMap;
-
-      const startRowIndex = nextRowIndexMap.get(cellInfo.rowKey) ?? -1;
-      const startColIndex = columnIndexMap.get(cellInfo.colName) ?? -1;
-      selectionStartRef.current = { rowKey: cellInfo.rowKey, colName: cellInfo.colName, rowIndex: startRowIndex, colIndex: startColIndex };
-      currentSelectionRef.current = new Set([makeCellKey(cellInfo.rowKey, cellInfo.colName)]);
-      updateCellSelection(currentSelectionRef.current);
-      ensureAutoScroll();
-    };
-
-    const onMouseDown = (e: MouseEvent) => {
-      if (e.button !== 0) return;
-      const target = e.target instanceof HTMLElement ? e.target : null;
-      if (isInteractiveTarget(target)) return;
-      const cellInfo = getCellInfo(target);
-      if (!cellInfo) return;
-
-      if (cellEditModeRef.current) {
-        e.preventDefault();
-        beginCellSelection(cellInfo, e.clientX, e.clientY);
-        return;
-      }
-
-      pendingCellSelectionStartRef.current = { ...cellInfo, x: e.clientX, y: e.clientY };
-    };
-
-    const onMouseMove = (e: MouseEvent) => {
-      const pendingStart = pendingCellSelectionStartRef.current;
-      if (!isDraggingRef.current && pendingStart) {
-        const dx = e.clientX - pendingStart.x;
-        const dy = e.clientY - pendingStart.y;
-        if (Math.hypot(dx, dy) < CELL_SELECTION_DRAG_THRESHOLD_PX) return;
-
-        e.preventDefault();
-        beginCellSelection(
-          { rowKey: pendingStart.rowKey, colName: pendingStart.colName },
-          e.clientX,
-          e.clientY,
-        );
-      }
-
-      if (!isDraggingRef.current || !selectionStartRef.current) return;
-      e.preventDefault();
-      cellSelectionPointerRef.current = { x: e.clientX, y: e.clientY };
-      ensureAutoScroll();
-
-      const target = e.target instanceof HTMLElement ? e.target : null;
-      const cellInfo = getCellInfo(target) || getCellInfoFromPoint(e.clientX, e.clientY);
-      if (!cellInfo) return;
-      scheduleSelectionUpdate(cellInfo);
-    };
-
-    const onMouseUp = (e: MouseEvent) => {
-      pendingCellSelectionStartRef.current = null;
-      if (!isDraggingRef.current) return;
-      isDraggingRef.current = false;
-      cellSelectionPointerRef.current = null;
-      stopAutoScroll();
-
-      if (cellSelectionRafRef.current !== null) {
-        cancelAnimationFrame(cellSelectionRafRef.current);
-        cellSelectionRafRef.current = null;
-      }
-
-      const target = e.target instanceof HTMLElement ? e.target : null;
-      const cellInfo = getCellInfo(target) || getCellInfoFromPoint(e.clientX, e.clientY);
-      if (cellInfo) applySelectionUpdate(cellInfo);
-
-      if (currentSelectionRef.current.size > 0) {
-        setSelectedCells(new Set(currentSelectionRef.current));
-      }
-    };
-
-    const onClickCapture = (e: MouseEvent) => {
-      if (!suppressCellSelectionClickRef.current) return;
-      suppressCellSelectionClickRef.current = false;
-      e.preventDefault();
-      e.stopPropagation();
-    };
-
-    const onScroll = () => {
-      if (currentSelectionRef.current.size === 0) return;
-      if (cellSelectionScrollRafRef.current !== null) {
-        cancelAnimationFrame(cellSelectionScrollRafRef.current);
-      }
-      cellSelectionScrollRafRef.current = requestAnimationFrame(() => {
-        cellSelectionScrollRafRef.current = null;
-        updateCellSelection(currentSelectionRef.current);
-      });
-    };
-
-    container.addEventListener('mousedown', onMouseDown);
-    container.addEventListener('mousemove', onMouseMove);
-    container.addEventListener('click', onClickCapture, true);
-    container.addEventListener('scroll', onScroll, true);
-    document.addEventListener('mouseup', onMouseUp);
-
-    return () => {
-      container.removeEventListener('mousedown', onMouseDown);
-      container.removeEventListener('mousemove', onMouseMove);
-      container.removeEventListener('click', onClickCapture, true);
-      container.removeEventListener('scroll', onScroll, true);
-      document.removeEventListener('mouseup', onMouseUp);
-      if (cellSelectionRafRef.current !== null) {
-        cancelAnimationFrame(cellSelectionRafRef.current);
-        cellSelectionRafRef.current = null;
-      }
-      if (cellSelectionScrollRafRef.current !== null) {
-        cancelAnimationFrame(cellSelectionScrollRafRef.current);
-        cellSelectionScrollRafRef.current = null;
-      }
-      stopAutoScroll();
-      pendingCellSelectionStartRef.current = null;
-      cellSelectionPointerRef.current = null;
-      isDraggingRef.current = false;
-    };
-  }, [canModifyData, isTableSurfaceActive, displayColumnNames, columnIndexMap, effectiveEditLocator, updateCellSelection]);
-
-  const handleCopySelectedColumnsFromRow = useCallback(() => {
-    const activeSelection = currentSelectionRef.current.size > 0 ? currentSelectionRef.current : selectedCells;
-    if (activeSelection.size === 0) {
-      void message.info(translateDataGrid('data_grid.message.select_same_row_cells_to_copy'));
-      return;
-    }
-
-    const parsed = Array.from(activeSelection)
-      .map((cellKey) => splitCellKey(cellKey))
-      .filter((item): item is { rowKey: string; colName: string } => !!item);
-    if (parsed.length === 0) {
-      void message.info(translateDataGrid('data_grid.message.no_copyable_cells'));
-      return;
-    }
-
-    const sourceRowKeySet = new Set(parsed.map((item) => item.rowKey));
-    if (sourceRowKeySet.size !== 1) {
-      void message.info(translateDataGrid('data_grid.message.copy_columns_same_row_only'));
-      return;
-    }
-
-    const sourceRowKey = parsed[0].rowKey;
-    const selectedColumnNames = Array.from(new Set(parsed.map((item) => item.colName)));
-    if (selectedColumnNames.length === 0) {
-      void message.info(translateDataGrid('data_grid.message.no_copyable_columns'));
-      return;
-    }
-
-    const sourceBaseRow = displayDataRef.current.find((row) => {
-      const key = row?.[GONAVI_ROW_KEY];
-      return key !== undefined && key !== null && rowKeyStr(key) === sourceRowKey;
-    });
-    const sourceAddedRow = addedRows.find((row) => {
-      const key = row?.[GONAVI_ROW_KEY];
-      return key !== undefined && key !== null && rowKeyStr(key) === sourceRowKey;
-    });
-    const sourceModified = modifiedRows[sourceRowKey];
-
-    const values: Record<string, any> = {};
-    selectedColumnNames.forEach((colName) => {
-      if (sourceAddedRow) {
-        values[colName] = sourceAddedRow[colName];
-        return;
-      }
-
-      if (sourceModified && Object.prototype.hasOwnProperty.call(sourceModified as any, colName)) {
-        values[colName] = (sourceModified as any)[colName];
-        return;
-      }
-
-      values[colName] = sourceBaseRow?.[colName];
-    });
-
-    setCopiedCellPatch({ sourceRowKey, values });
-    void message.success(translateDataGrid('data_grid.message.copied_columns', { count: selectedColumnNames.length }));
-  }, [selectedCells, rowKeyStr, addedRows, modifiedRows, translateDataGrid]);
-
-  const handlePasteCopiedColumnsToSelectedRows = useCallback((fallbackRowKey?: React.Key) => {
-    if (!copiedCellPatch || Object.keys(copiedCellPatch.values).length === 0) {
-      void message.info(translateDataGrid('data_grid.message.copy_columns_first'));
-      return;
-    }
-
-    const writablePatchValues = Object.fromEntries(
-      Object.entries(copiedCellPatch.values)
-        .filter(([colName]) => isWritableResultColumn(colName, effectiveEditLocator))
-    );
-    if (Object.keys(writablePatchValues).length === 0) {
-      void message.info(translateDataGrid('data_grid.message.no_pasteable_editable_fields'));
-      return;
-    }
-
-    const targetKeySet = new Set<string>();
-    const selectedKeys = selectedRowKeysRef.current;
-    if (selectedKeys.length > 0) {
-      selectedKeys.forEach((key) => targetKeySet.add(rowKeyStr(key)));
-    } else if (fallbackRowKey !== undefined && fallbackRowKey !== null) {
-      targetKeySet.add(rowKeyStr(fallbackRowKey));
-    } else {
-      void message.info(translateDataGrid('data_grid.message.select_target_rows'));
-      return;
-    }
-
-    targetKeySet.delete(copiedCellPatch.sourceRowKey);
-    if (targetKeySet.size === 0) {
-      void message.info(translateDataGrid('data_grid.message.target_rows_cannot_only_source'));
-      return;
-    }
-
-    const addedRowMap = new Map<string, any>();
-    addedRows.forEach((row) => {
-      const key = row?.[GONAVI_ROW_KEY];
-      if (key === undefined || key === null) return;
-      addedRowMap.set(rowKeyStr(key), row);
-    });
-
-    const baseRowMap = new Map<string, any>();
-    displayDataRef.current.forEach((row) => {
-      const key = row?.[GONAVI_ROW_KEY];
-      if (key === undefined || key === null) return;
-      baseRowMap.set(rowKeyStr(key), row);
-    });
-
-    const patchesByRow = new Map<string, Record<string, any>>();
-    let updatedCellCount = 0;
-
-    targetKeySet.forEach((targetRowKey) => {
-      const patch: Record<string, any> = {};
-      const existing = modifiedRows[targetRowKey];
-      const addedRow = addedRowMap.get(targetRowKey);
-      const baseRow = baseRowMap.get(targetRowKey);
-
-      Object.entries(writablePatchValues).forEach(([colName, nextValue]) => {
-        let currentValue: any;
-
-        if (addedRow) {
-          currentValue = addedRow[colName];
-        } else if (existing && Object.prototype.hasOwnProperty.call(existing as any, GONAVI_ROW_KEY)) {
-          currentValue = (existing as any)[colName];
-        } else if (existing && Object.prototype.hasOwnProperty.call(existing as any, colName)) {
-          currentValue = (existing as any)[colName];
-        } else {
-          currentValue = baseRow?.[colName];
-        }
-
-        if (isCellValueEqualForDiff(currentValue, nextValue)) return;
-        patch[colName] = nextValue;
-        updatedCellCount++;
-      });
-
-      if (Object.keys(patch).length > 0) {
-        patchesByRow.set(targetRowKey, patch);
-      }
-    });
-
-    if (patchesByRow.size === 0 || updatedCellCount === 0) {
-      void message.info(translateDataGrid('data_grid.message.target_rows_no_update'));
-      return;
-    }
-
-    setAddedRows(prev => prev.map((row) => {
-      const key = row?.[GONAVI_ROW_KEY];
-      if (key === undefined || key === null) return row;
-      const patch = patchesByRow.get(rowKeyStr(key));
-      if (!patch) return row;
-      return { ...row, ...patch };
-    }));
-
-    setModifiedRows(prev => {
-      let next: Record<string, any> | null = null;
-
-      patchesByRow.forEach((patch, keyStr) => {
-        if (addedRowMap.has(keyStr)) return;
-        const existing = prev[keyStr];
-        const merged = existing ? { ...(existing as any), ...patch } : patch;
-        if (!next) next = { ...prev };
-        next[keyStr] = merged;
-      });
-
-      return next || prev;
-    });
-
-    void message.success(translateDataGrid('data_grid.message.pasted_columns_to_rows', { rows: patchesByRow.size, cells: updatedCellCount }));
-    setCellContextMenu(prev => ({ ...prev, visible: false }));
-  }, [copiedCellPatch, addedRows, modifiedRows, rowKeyStr, effectiveEditLocator, translateDataGrid]);
-
-  // 批量填充到选中行
-  const handleBatchFillToSelected = useCallback((sourceRecord: Item, dataIndex: string) => {
-    if (!isWritableResultColumn(dataIndex, effectiveEditLocator)) {
-      void message.info(translateDataGrid('data_grid.message.current_field_not_editable'));
-      return;
-    }
-    const sourceValue = sourceRecord[dataIndex];
-    const selKeys = selectedRowKeysRef.current;
-
-    if (selKeys.length === 0) {
-      void message.info(translateDataGrid('data_grid.message.select_rows_to_fill'));
-      return;
-    }
-
-    const sourceKey = sourceRecord?.[GONAVI_ROW_KEY];
-    // 过滤掉源行本身
-    const targetKeys = selKeys.filter(k => k !== sourceKey);
-
-    if (targetKeys.length === 0) {
-      void message.info(translateDataGrid('data_grid.message.no_other_rows_to_fill'));
-      return;
-    }
-
-    // 批量更新
-    const addedKeySet = new Set<string>();
-    addedRows.forEach((r) => {
-      const k = r?.[GONAVI_ROW_KEY];
-      if (k === undefined) return;
-      addedKeySet.add(rowKeyStr(k));
-    });
-
-    const targetKeyStrList = targetKeys.map(rowKeyStr);
-    const targetKeyStrSet = new Set(targetKeyStrList);
-    const updatedCount = targetKeyStrSet.size;
-
-    setAddedRows(prev => prev.map(r => {
-      const k = r?.[GONAVI_ROW_KEY];
-      if (k === undefined) return r;
-      const keyStr = rowKeyStr(k);
-      if (!targetKeyStrSet.has(keyStr)) return r;
-      return { ...r, [dataIndex]: sourceValue };
-    }));
-
-    setModifiedRows(prev => {
-      let next: Record<string, any> | null = null;
-
-      targetKeyStrSet.forEach((keyStr) => {
-        if (addedKeySet.has(keyStr)) return;
-        const existing = prev[keyStr];
-        const patch = { [dataIndex]: sourceValue };
-        const merged = existing ? { ...(existing as any), ...patch } : patch;
-        if (!next) next = { ...prev };
-        next[keyStr] = merged;
-      });
-
-      return next || prev;
-    });
-
-    void message.success(translateDataGrid('data_grid.message.filled_rows', { count: updatedCount }));
-    setCellContextMenu(prev => ({ ...prev, visible: false }));
-  }, [addedRows, rowKeyStr, effectiveEditLocator, translateDataGrid]);
+    const {
+    handleBatchFillCells,
+    handleCopySelectedColumnsFromRow,
+    handlePasteCopiedColumnsToSelectedRows,
+    handleBatchFillToSelected,
+  } = useDataGridBatchActions({
+    CELL_SELECTION_DRAG_THRESHOLD_PX,
+    GONAVI_ROW_KEY,
+    addedRows,
+    batchEditSetNull,
+    batchEditValue,
+    canModifyData,
+    cancelAnimationFrame,
+    cellEditModeRef,
+    cellSelectionAutoScrollRafRef,
+    cellSelectionPointerRef,
+    cellSelectionRafRef,
+    cellSelectionScrollRafRef,
+    closeBatchEditModal,
+    columnIndexMap,
+    containerRef,
+    copiedCellPatch,
+    currentSelectionRef,
+    displayColumnNames,
+    displayDataRef,
+    effectiveEditLocator,
+    isCellValueEqualForDiff,
+    isDraggingRef,
+    isTableSurfaceActive,
+    isWritableResultColumn,
+    makeCellKey,
+    modifiedRows,
+    pendingCellSelectionStartRef,
+    requestAnimationFrame,
+    rowIndexMapRef,
+    rowKeyStr,
+    selectedCells,
+    selectedRowKeysRef,
+    selectionStartRef,
+    setAddedRows,
+    setCellContextMenu,
+    setCellEditMode,
+    setCopiedCellPatch,
+    setModifiedRows,
+    setSelectedCells,
+    splitCellKey,
+    suppressCellSelectionClickRef,
+    translateDataGrid,
+    updateCellSelection,
+  });
 
   const displayData = useMemo(() => {
       return [...data, ...addedRows];
@@ -4222,213 +1536,26 @@ const DataGrid: React.FC<DataGridProps> = ({
       applySortInfo(next);
   }, [applySortInfo, sortInfo]);
 
-    // Native Drag State
-    const draggingRef = useRef<{
-        startX: number,
-        startWidth: number,
-        key: string,
-        containerLeft: number
-    } | null>(null);
-    const ghostRef = useRef<HTMLDivElement>(null);
-    const resizeRafRef = useRef<number | null>(null);
-    const latestClientXRef = useRef<number | null>(null);
-    const isResizingRef = useRef(false); // Lock for sorting
-    const autoFitCanvasRef = useRef<HTMLCanvasElement | null>(null);
-
-    const flushGhostPosition = useCallback(() => {
-        resizeRafRef.current = null;
-        if (!draggingRef.current || !ghostRef.current) return;
-        if (latestClientXRef.current === null) return;
-        const relativeLeft = latestClientXRef.current - draggingRef.current.containerLeft;
-        ghostRef.current.style.transform = `translateX(${relativeLeft}px)`;
-    }, []);
-  
-        // 1. Drag Start
-  
-        const handleResizeStart = useCallback((key: string) => (e: React.MouseEvent) => {
-  
-            e.preventDefault(); 
-  
-            e.stopPropagation(); 
-  
-            
-  
-            isResizingRef.current = true; // Engage lock
-  
-      
-  
-            const startX = e.clientX;
-  
-            const currentWidth = resolveDataTableColumnWidth({
-                manualWidth: columnWidths[key],
-                density: dataTableDensity,
-            });
-  
-            const containerLeft = containerRef.current?.getBoundingClientRect().left ?? 0;
-  
-            draggingRef.current = { startX, startWidth: currentWidth, key, containerLeft };
-            latestClientXRef.current = startX;
-  
-      
-  
-            // Show Ghost Line at initial position
-  
-            if (ghostRef.current && containerRef.current) {
-                const relativeLeft = startX - containerLeft;
-                ghostRef.current.style.transform = `translateX(${relativeLeft}px)`;
-  
-                ghostRef.current.style.display = 'block';
-  
-            }
-  
-      
-  
-            // Add global listeners
-  
-            document.addEventListener('mousemove', handleResizeMove);
-  
-            document.addEventListener('mouseup', handleResizeStop);
-  
-            document.body.style.cursor = 'col-resize'; 
-  
-            document.body.style.userSelect = 'none'; 
-  
-        }, [columnWidths, dataTableDensity]);
-
-  const measureTextWidth = useCallback((text: string, font: string) => {
-      if (typeof document === 'undefined') {
-          return text.length * 8;
-      }
-      if (!autoFitCanvasRef.current) {
-          autoFitCanvasRef.current = document.createElement('canvas');
-      }
-      const context = autoFitCanvasRef.current.getContext('2d');
-      if (!context) {
-          return text.length * 8;
-      }
-      context.font = font;
-      return context.measureText(text).width;
-  }, []);
-
-  const buildAutoFitMeasurer = useCallback((element: HTMLElement | null, fallbackFont: string) => {
-      let font = fallbackFont;
-      if (typeof window !== 'undefined' && element) {
-          const computed = window.getComputedStyle(element);
-          const weight = computed.fontWeight || '400';
-          const size = computed.fontSize || '13px';
-          const family = computed.fontFamily || DEFAULT_GRID_MONO_FONT_FAMILY;
-          font = `${weight} ${size} ${family}`;
-      }
-      return (text: string) => measureTextWidth(text, font);
-  }, [measureTextWidth]);
-
-  const autoFitDoneRef = useRef<string>('');
-  useEffect(() => {
-      if (displayColumnNames.length === 0 || displayData.length === 0) return;
-      const sig = displayColumnNames.join(',');
-      if (autoFitDoneRef.current === sig) return;
-      const font = `${densityParams.dataFontSize}px ${DEFAULT_GRID_MONO_FONT_FAMILY}`;
-      const newWidths: Record<string, number> = {};
-      displayColumnNames.forEach((key) => {
-          const autoWidth = calculateAutoFitColumnWidth({
-              headerTexts: [key],
-              valueTexts: displayData.slice(0, 200).map((row) => row?.[key]),
-              measureHeaderText: (t) => measureTextWidth(t, `600 ${font}`),
-              measureCellText: (t) => measureTextWidth(t, `400 ${font}`),
-              minWidth: 40,
-              maxWidth: 600,
-              defaultWidth: densityParams.defaultColumnWidth,
-          });
-          newWidths[key] = autoWidth;
-      });
-      autoFitDoneRef.current = sig;
-      setColumnWidths((prev) => ({ ...newWidths, ...prev }));
-  }, [displayColumnNames, displayData, densityParams, measureTextWidth]);
-
-  const autoFitColumnWidth = useCallback((key: string, headerEl?: HTMLElement | null) => {
-      const normalizedKey = String(key || '').trim();
-      if (!normalizedKey) return;
-      const sampleCell = Array.from(
-          containerRef.current?.querySelectorAll('.ant-table-cell[data-col-name]') || []
-      ).find((node) => (node as HTMLElement).getAttribute('data-col-name') === normalizedKey) as HTMLElement | undefined;
-
-      const meta = columnMetaMap[normalizedKey] || columnMetaMapByLowerName[normalizedKey.toLowerCase()];
-      const headerTexts = [normalizedKey];
-      if (showColumnType && meta?.type) headerTexts.push(meta.type);
-      if (showColumnComment && meta?.comment) headerTexts.push(meta.comment);
-
-      const defaultWidth = resolveDataTableColumnWidth({
-          manualWidth: columnWidths[normalizedKey],
-          density: dataTableDensity,
-      });
-      const containerWidth = containerRef.current?.clientWidth ?? 0;
-      const nextWidth = calculateAutoFitColumnWidth({
-          headerTexts,
-          valueTexts: displayDataRef.current.slice(0, 200).map((row) => row?.[normalizedKey]),
-          measureHeaderText: buildAutoFitMeasurer(headerEl ?? null, `600 ${densityParams.dataFontSize}px ${DEFAULT_GRID_MONO_FONT_FAMILY}`),
-          measureCellText: buildAutoFitMeasurer(sampleCell ?? null, `400 ${densityParams.dataFontSize}px ${DEFAULT_GRID_MONO_FONT_FAMILY}`),
-          defaultWidth,
-          minWidth: 80,
-          maxWidth: Math.max(720, Math.floor(containerWidth * 0.85)),
-      });
-
-      setColumnWidths((prev) => ({ ...prev, [normalizedKey]: nextWidth }));
-  }, [
-      buildAutoFitMeasurer,
+  const {
+      autoFitColumnWidth,
+      ghostRef,
+      handleResizeAutoFit,
+      handleResizeStart,
+      isResizingRef,
+  } = useDataGridColumnResize({
       columnMetaMap,
       columnMetaMapByLowerName,
       columnWidths,
+      containerRef,
       dataTableDensity,
-      densityParams.dataFontSize,
+      densityParams,
+      displayColumnNames,
+      displayData,
+      displayDataRef,
+      setColumnWidths,
       showColumnComment,
       showColumnType,
-  ]);
-
-  const handleResizeAutoFit = useCallback((key: string) => (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const handleEl = e.currentTarget as HTMLElement | null;
-      const headerEl = handleEl?.closest('th') as HTMLElement | null;
-      autoFitColumnWidth(key, headerEl);
-  }, [autoFitColumnWidth]);
-
-  // 2. Drag Move (Global)
-  const handleResizeMove = useCallback((e: MouseEvent) => {
-      if (!draggingRef.current) return;
-      latestClientXRef.current = e.clientX;
-      if (resizeRafRef.current !== null) return;
-      resizeRafRef.current = requestAnimationFrame(flushGhostPosition);
-  }, [flushGhostPosition]);
-
-  // 3. Drag Stop (Global)
-  const handleResizeStop = useCallback((e: MouseEvent) => {
-      if (!draggingRef.current) return;
-
-      const { startX, startWidth, key } = draggingRef.current;
-      const deltaX = e.clientX - startX;
-      const newWidth = Math.max(50, startWidth + deltaX);
-
-      // Commit State
-      setColumnWidths(prev => ({ ...prev, [key]: newWidth }));
-
-      // Cleanup
-      if (resizeRafRef.current !== null) {
-          cancelAnimationFrame(resizeRafRef.current);
-          resizeRafRef.current = null;
-      }
-      latestClientXRef.current = null;
-      if (ghostRef.current) ghostRef.current.style.display = 'none';
-      document.removeEventListener('mousemove', handleResizeMove);
-      document.removeEventListener('mouseup', handleResizeStop);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      draggingRef.current = null;
-      
-      // Release lock after a short delay to block subsequent click events (sorting)
-      setTimeout(() => {
-          isResizingRef.current = false;
-      }, 100);
-  }, []);
+  });
 
   const handleCellSave = useCallback((row: any) => {
       const rowKey = row?.[GONAVI_ROW_KEY];
@@ -5755,802 +2882,115 @@ const DataGrid: React.FC<DataGridProps> = ({
       copyToClipboard(text);
   }, [columnMetaMap, columnMetaMapByLowerName, copyToClipboard, currentConnConfig, displayOutputColumnNames, mergedDisplayData, translateDataGrid]);
 
-  const handleV2ColumnHeaderContextMenuAction = useCallback((action: V2ColumnHeaderContextMenuActionKey) => {
-      const columnName = resolveContextMenuFieldName(cellContextMenu.dataIndex, cellContextMenu.title);
-      if (!columnName) {
-          void message.info(translateDataGrid('data_grid.message.no_field_name'));
-          setCellContextMenu(prev => ({ ...prev, visible: false }));
-          return;
-      }
-
-      switch (action) {
-          case 'copy-field-name':
-              copyToClipboard(columnName);
-              break;
-          case 'copy-column-data':
-              handleCopyColumnData(columnName);
-              break;
-          case 'sort-asc':
-              applyColumnSort(columnName, 'ascend');
-              break;
-          case 'sort-desc':
-              applyColumnSort(columnName, 'descend');
-              break;
-          case 'clear-sort':
-              applyColumnSort(columnName, null);
-              break;
-          case 'auto-fit-column':
-              autoFitColumnWidth(columnName);
-              break;
-          case 'hide-column':
-              if (displayColumnNames.length <= 1) {
-                  void message.info(translateDataGrid('data_grid.message.keep_one_visible_column'));
-                  break;
-              }
-              toggleColumnVisibility(columnName, false);
-              break;
-          case 'show-column-type':
-              setQueryOptions({ showColumnType: true });
-              break;
-          case 'hide-column-type':
-              setQueryOptions({ showColumnType: false });
-              break;
-          case 'show-column-comment':
-              setQueryOptions({ showColumnComment: true });
-              break;
-          case 'hide-column-comment':
-              setQueryOptions({ showColumnComment: false });
-              break;
-          default:
-              break;
-      }
-      setCellContextMenu(prev => ({ ...prev, visible: false }));
-  }, [
-      applyColumnSort,
-      autoFitColumnWidth,
-      cellContextMenu.dataIndex,
-      cellContextMenu.title,
-      copyToClipboard,
-      displayColumnNames.length,
-      handleCopyColumnData,
-      setQueryOptions,
-      translateDataGrid,
-      toggleColumnVisibility,
-  ]);
-
-  const getClipboardRows = useCallback(() => (
-      pickRowsForClipboard({
-          rows: mergedDisplayData as Array<Record<string, unknown>>,
-          selectedRowKeys,
-          columnNames: displayOutputColumnNames,
-          rowKeyField: GONAVI_ROW_KEY,
-          rowKeyToString: rowKeyStr,
-      })
-  ), [mergedDisplayData, selectedRowKeys, displayOutputColumnNames, rowKeyStr]);
-
-  const getClipboardColumnNames = useCallback((rows: Array<Record<string, unknown>>) => {
-      if (rows.length === 0) return [];
-      return displayOutputColumnNames;
-  }, [displayOutputColumnNames]);
-
-  const handleCopyQueryResultCsv = useCallback(() => {
-      const rows = getClipboardRows();
-      const columns = getClipboardColumnNames(rows);
-      const text = buildClipboardCsv(rows, columns);
-      if (!text) {
-          void message.info(translateDataGrid('data_grid.message.result_set_no_copyable_content'));
-          return;
-      }
-      copyToClipboard(text);
-  }, [copyToClipboard, getClipboardColumnNames, getClipboardRows, translateDataGrid]);
-
-  const handleCopyQueryResultJson = useCallback(() => {
-      const rows = getClipboardRows();
-      const text = buildClipboardJson(rows);
-      if (!text) {
-          void message.info(translateDataGrid('data_grid.message.result_set_no_copyable_content'));
-          return;
-      }
-      copyToClipboard(text);
-  }, [copyToClipboard, getClipboardRows, translateDataGrid]);
-
-  const handleCopyQueryResultMarkdown = useCallback(() => {
-      const rows = getClipboardRows();
-      const columns = getClipboardColumnNames(rows);
-      const text = buildClipboardMarkdown(rows, columns);
-      if (!text) {
-          void message.info(translateDataGrid('data_grid.message.result_set_no_copyable_content'));
-          return;
-      }
-      copyToClipboard(text);
-  }, [copyToClipboard, getClipboardColumnNames, getClipboardRows, translateDataGrid]);
-
-  const handleCopyDdl = useCallback(() => {
-      if (!ddlText.trim()) {
-          void message.info(translateDataGrid('data_grid.message.no_ddl_to_copy'));
-          return;
-      }
-      navigator.clipboard.writeText(ddlText)
-          .then(() => message.success(translateDataGrid('data_grid.message.ddl_copied')))
-          .catch(() => message.error(translateDataGrid('data_grid.message.ddl_copy_failed')));
-  }, [ddlText, translateDataGrid]);
-
-  const handleCopySelectedCellsToClipboard = useCallback(() => {
-      const activeSelection = currentSelectionRef.current.size > 0 ? currentSelectionRef.current : selectedCells;
-      if (activeSelection.size === 0) {
-          void message.info(translateDataGrid('data_grid.message.drag_select_cells_to_copy'));
-          return;
-      }
-
-      const parsed = Array.from(activeSelection)
-          .map((cellKey) => splitCellKey(cellKey))
-          .filter((item): item is { rowKey: string; colName: string } => !!item);
-      if (parsed.length === 0) {
-          void message.info(translateDataGrid('data_grid.message.no_copyable_cells'));
-          return;
-      }
-
-      const text = buildSelectedCellClipboardText({
-          selectedCells: parsed,
-          rows: mergedDisplayData as Array<Record<string, any>>,
-          columnOrder: displayColumnNames,
-          rowKeyField: GONAVI_ROW_KEY,
-      });
-      if (!text) {
-          void message.info(translateDataGrid('data_grid.message.selection_no_copyable_content'));
-          return;
-      }
-
-      copyToClipboard(text);
-  }, [selectedCells, mergedDisplayData, displayColumnNames, copyToClipboard, translateDataGrid]);
-
-  useEffect(() => {
-      if (!cellEditMode) return;
-
-      const onKeyDown = (event: KeyboardEvent) => {
-          const activeElement = document.activeElement as HTMLElement | null;
-          const tagName = String(activeElement?.tagName || '').toLowerCase();
-          if (tagName === 'input' || tagName === 'textarea' || activeElement?.isContentEditable) {
-              return;
-          }
-
-          if (event.key === 'Escape') {
-              const activeSelection = currentSelectionRef.current.size > 0 ? currentSelectionRef.current : selectedCells;
-              event.preventDefault();
-              if (activeSelection.size === 0) {
-                  closeCellEditMode();
-                  return;
-              }
-              resetCellSelection();
-              return;
-          }
-
-          const isCopy = (event.ctrlKey || event.metaKey) && !event.altKey && String(event.key || '').toLowerCase() === 'c';
-          if (!isCopy) return;
-
-          const activeSelection = currentSelectionRef.current.size > 0 ? currentSelectionRef.current : selectedCells;
-          if (activeSelection.size === 0) return;
-
-          event.preventDefault();
-          handleCopySelectedCellsToClipboard();
-      };
-
-      window.addEventListener('keydown', onKeyDown);
-      return () => window.removeEventListener('keydown', onKeyDown);
-  }, [cellEditMode, selectedCells, handleCopySelectedCellsToClipboard, resetCellSelection, closeCellEditMode]);
-
-  useEffect(() => {
-      if (!cellEditMode) return;
-
-      const onPointerDown = (event: MouseEvent) => {
-          const root = rootRef.current;
-          const target = event.target instanceof Node ? event.target : null;
-          if (!root || !target || root.contains(target)) return;
-          if (target instanceof HTMLElement
-              && target.closest('.ant-modal, .ant-dropdown, .ant-select-dropdown, .ant-picker-dropdown, .ant-popover')) {
-              return;
-          }
-          closeCellEditMode();
-      };
-
-      document.addEventListener('mousedown', onPointerDown);
-      return () => document.removeEventListener('mousedown', onPointerDown);
-  }, [cellEditMode, closeCellEditMode]);
-  
-  const getTargets = useCallback((clickedRecord: any) => {
-      const selKeys = selectedRowKeysRef.current;
-      const currentData = displayDataRef.current;
-      const clickedKey = clickedRecord?.[GONAVI_ROW_KEY];
-      if (clickedKey !== undefined && selKeys.includes(clickedKey)) {
-          return currentData.filter(d => selKeys.includes(d?.[GONAVI_ROW_KEY]));
-      }
-      return [clickedRecord];
-  }, []);
-
-  const getContextMenuTargetRows = useCallback((clickedRecord: any) => {
-      if (!clickedRecord) return [];
-      const selKeys = selectedRowKeysRef.current;
-      const clickedKey = clickedRecord?.[GONAVI_ROW_KEY];
-      const clickedKeyStr = clickedKey === undefined || clickedKey === null ? '' : rowKeyStr(clickedKey);
-      const selectedKeyStrSet = new Set(selKeys.map(rowKeyStr));
-      if (clickedKeyStr && selectedKeyStrSet.has(clickedKeyStr)) {
-          return mergedDisplayData.filter((row) => {
-              const rowKey = row?.[GONAVI_ROW_KEY];
-              return rowKey !== undefined && rowKey !== null && selectedKeyStrSet.has(rowKeyStr(rowKey));
-          });
-      }
-      return [clickedRecord];
-  }, [mergedDisplayData, rowKeyStr]);
-
-  const translateCopySqlError = useCallback((error: CopySqlError): string => {
-      if (typeof error === 'string') {
-          return error;
-      }
-      switch (error.key) {
-          case 'data_grid.copy_sql.error.missing_table_name':
-              return translateDataGrid('data_grid.copy_sql.error.missing_table_name', error.params);
-          case 'data_grid.copy_sql.error.no_copyable_fields':
-              return translateDataGrid('data_grid.copy_sql.error.no_copyable_fields');
-          case 'data_grid.copy_sql.error.missing_safe_where':
-          default:
-              return translateDataGrid('data_grid.copy_sql.error.missing_safe_where');
-      }
-  }, [translateDataGrid]);
-
-  const buildCopySqlBatchText = useCallback((mode: 'insert' | 'update' | 'delete', record: any): string | null => {
-      if (!supportsCopyInsert) {
-          void message.warning(translateDataGrid('data_grid.message.copy_sql_not_supported'));
-          return null;
-      }
-      const records = getTargets(record);
-      const orderedCols = displayOutputColumnNames;
-      if (mode === 'insert') {
-          return records.map((row: any) => buildCopyInsertSQL({
-              dbType,
-              tableName,
-              orderedCols,
-              record: row,
-              columnTypesByLowerName: columnTypeMapByLowerName,
-          })).join('\n\n');
-      }
-
-      const sqlResults = records.map((row: any) => (
-          mode === 'update'
-              ? buildCopyUpdateSQL({
-                  dbType,
-                  tableName,
-                  orderedCols,
-                  record: row,
-                  pkColumns,
-                  uniqueKeyGroups,
-                  allTableColumns: allTableColumnNames,
-                  columnTypesByLowerName: columnTypeMapByLowerName,
-              })
-              : buildCopyDeleteSQL({
-                  dbType,
-                  tableName,
-                  orderedCols,
-                  record: row,
-                  pkColumns,
-                  uniqueKeyGroups,
-                  allTableColumns: allTableColumnNames,
-                  columnTypesByLowerName: columnTypeMapByLowerName,
-              })
-      ));
-      const failedResult = sqlResults.find((result) => result.ok === false);
-      if (failedResult && failedResult.ok === false) {
-          void message.warning(translateCopySqlError(failedResult.error));
-          return null;
-      }
-      const sqlTexts: string[] = [];
-      sqlResults.forEach((result) => {
-          if (result.ok) {
-              sqlTexts.push(result.sql);
-          }
-      });
-      return sqlTexts.join('\n\n');
-  }, [
-      supportsCopyInsert,
-      getTargets,
-      displayOutputColumnNames,
-      dbType,
-      tableName,
-      columnTypeMapByLowerName,
-      pkColumns,
-      uniqueKeyGroups,
-      allTableColumnNames,
-      translateCopySqlError,
-      translateDataGrid,
-  ]);
-
-  const handleCopyInsert = useCallback((record: any) => {
-      const batchText = buildCopySqlBatchText('insert', record);
-      if (!batchText) return;
-      copyToClipboard(batchText);
-  }, [buildCopySqlBatchText, copyToClipboard]);
-
-  const handleCopyUpdate = useCallback((record: any) => {
-      const batchText = buildCopySqlBatchText('update', record);
-      if (!batchText) return;
-      copyToClipboard(batchText);
-  }, [buildCopySqlBatchText, copyToClipboard]);
-
-  const handleCopyDelete = useCallback((record: any) => {
-      const batchText = buildCopySqlBatchText('delete', record);
-      if (!batchText) return;
-      copyToClipboard(batchText);
-  }, [buildCopySqlBatchText, copyToClipboard]);
-
-  const handleCopyJson = useCallback((record: any) => {
-      const records = getTargets(record);
-      const cleanRecords = pickDataGridOutputRows(records, displayOutputColumnNames);
-      copyToClipboard(JSON.stringify(cleanRecords, null, 2));
-  }, [getTargets, displayOutputColumnNames, copyToClipboard]);
-
-  const handleCopyCsv = useCallback((record: any) => {
-      const records = getTargets(record);
-      const orderedCols = displayOutputColumnNames;
-      const header = orderedCols.map(c => `"${c}"`).join(',');
-      const lines = records.map((r: any) => {
-          const values = orderedCols.map(c => {
-              const v = r[c];
-              if (v === null || v === undefined) return 'NULL';
-              // CSV 标准：值中的双引号转义为两个双引号
-              const escaped = String(v).replace(/"/g, '""');
-              return `"${escaped}"`;
-          });
-          return values.join(',');
-      });
-      copyToClipboard([header, ...lines].join('\n'));
-  }, [getTargets, displayOutputColumnNames, copyToClipboard]);
-
-  const handleCopyRowData = useCallback((record: any) => {
-      const rows = getContextMenuTargetRows(record);
-      const columns = displayOutputColumnNames;
-      const text = buildClipboardTsv(
-          rows,
-          columns,
-          (columnName) => (columnMetaMap[columnName] || columnMetaMapByLowerName[columnName.toLowerCase()])?.type,
-          currentConnConfig,
-      );
-      if (!text) {
-          void message.info(translateDataGrid('data_grid.message.current_row_no_copyable_content'));
-          return;
-      }
-      copyToClipboard(text);
-  }, [columnMetaMap, columnMetaMapByLowerName, copyToClipboard, currentConnConfig, displayOutputColumnNames, getContextMenuTargetRows, translateDataGrid]);
-
-  const buildConnConfig = useCallback(() => {
-      if (!connectionId) return null;
-      const conn = connections.find(c => c.id === connectionId);
-      if (!conn) return null;
-      return {
-          ...conn.config,
-          port: Number(conn.config.port),
-          password: conn.config.password || "",
-          database: conn.config.database || "",
-          useSSH: conn.config.useSSH || false,
-          ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
-      };
-  }, [connections, connectionId]);
-
-  const exportByQuery = useCallback(async (sql: string, defaultName: string, options: DataExportFileOptions, totalRows?: number) => {
-      const config = buildConnConfig();
-      if (!config) return;
-      const totalRowsKnown = Number.isFinite(totalRows) && Number(totalRows) >= 0;
-      await runExportWithProgress({
-          title: `导出 ${defaultName || '查询结果'}`,
-          targetName: defaultName || 'export',
-          format: options.format,
-          totalRows: totalRowsKnown ? Number(totalRows) : undefined,
-          run: (jobId) => ExportQueryWithOptions(
-              buildRpcConnectionConfig(config) as any,
-              dbName || '',
-              sql,
-              defaultName || 'export',
-              {
-                  ...options,
-                  jobId,
-                  totalRowsHint: totalRowsKnown ? Number(totalRows) : 0,
-                  totalRowsKnown,
-              } as any,
-          ),
-      });
-  }, [buildConnConfig, dbName, runExportWithProgress]);
-
-  const buildPkWhereSql = useCallback((rows: any[], dbType: string) => {
-      if (!tableName || pkColumns.length === 0) return '';
-      const targets = (rows || []).filter(Boolean);
-      if (targets.length === 0) return '';
-
-      const clauses: string[] = [];
-      for (const r of targets) {
-          const andParts: string[] = [];
-          for (const pk of pkColumns) {
-              const col = quoteIdentPart(dbType, pk);
-              const v = r?.[pk];
-              if (v === null || v === undefined) return '';
-              andParts.push(`${col} = '${escapeLiteral(String(v))}'`);
-          }
-          if (andParts.length === pkColumns.length) {
-              clauses.push(`(${andParts.join(' AND ')})`);
-          }
-      }
-      if (clauses.length === 0) return '';
-      return clauses.join(' OR ');
-  }, [pkColumns, tableName]);
-
-  const buildCurrentPageSql = useCallback((dbType: string) => {
-      if (!tableName || !pagination) return '';
-      const effectiveFilterConditions = buildEffectiveFilterConditions(filterConditions, quickWhereCondition);
-      const whereSQL = buildWhereSQL(dbType, effectiveFilterConditions);
-      const baseSql = buildDataGridSelectBaseSql({
-          dbType,
-          tableName,
-          columnNames: displayOutputColumnNames,
-          whereSql: whereSQL,
-      });
-      const orderBySQL = buildOrderBySQL(dbType, sortInfo, pkColumns);
-      const normalizedType = String(dbType || '').trim().toLowerCase();
-      const hasSortForBuffer = hasExplicitSort(sortInfo);
-      const offset = (pagination.current - 1) * pagination.pageSize;
-      let sql = buildPaginatedSelectSQL(dbType, baseSql, orderBySQL, pagination.pageSize, offset);
-      if (hasSortForBuffer && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
-          sql = withSortBufferTuningSQL(normalizedType, sql, 32 * 1024 * 1024);
-      }
-      return sql;
-  }, [tableName, pagination, filterConditions, quickWhereCondition, sortInfo, pkColumns, displayOutputColumnNames]);
-
-  const buildAllRowsSql = useCallback((dbType: string) => {
-      if (!tableName) return '';
-      return buildDataGridSelectBaseSql({
-          dbType,
-          tableName,
-          columnNames: displayOutputColumnNames,
-      });
-  }, [tableName, displayOutputColumnNames]);
-
-  const buildFilteredAllSql = useCallback((dbType: string) => {
-      if (!tableName) return '';
-      const effectiveFilterConditions = buildEffectiveFilterConditions(filterConditions, quickWhereCondition);
-      const whereSQL = buildWhereSQL(dbType, effectiveFilterConditions);
-      if (!whereSQL) return '';
-      let sql = buildDataGridSelectBaseSql({
-          dbType,
-          tableName,
-          columnNames: displayOutputColumnNames,
-          whereSql: whereSQL,
-      });
-      sql += buildOrderBySQL(dbType, sortInfo, pkColumns);
-      const normalizedType = String(dbType || '').trim().toLowerCase();
-      const hasSortForBuffer = hasExplicitSort(sortInfo);
-      if (hasSortForBuffer && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
-          sql = withSortBufferTuningSQL(normalizedType, sql, 32 * 1024 * 1024);
-      }
-      return sql;
-  }, [tableName, filterConditions, quickWhereCondition, sortInfo, pkColumns, displayOutputColumnNames]);
-
-  const queryResultCurrentPageRows = useMemo(() => {
-      if (isQueryResultExport) {
-          return mergedDisplayData;
-      }
-      if (!pagination) {
-          return mergedDisplayData;
-      }
-      const offset = Math.max(0, (pagination.current - 1) * pagination.pageSize);
-      return mergedDisplayData.slice(offset, offset + pagination.pageSize);
-  }, [isQueryResultExport, mergedDisplayData, pagination]);
-
-  const exportQueryResultRows = useCallback(async (options: DataExportFileOptions, scope: Exclude<DataGridExportScope, 'filteredAll'>) => {
-      if (scope === 'selected') {
-          const selectedKeySet = new Set(selectedRowKeys.map((key) => rowKeyStr(key)));
-          const rows = mergedDisplayData.filter((row) => {
-              const key = row?.[GONAVI_ROW_KEY];
-              return key !== undefined && key !== null && selectedKeySet.has(rowKeyStr(key));
-          });
-          if (rows.length === 0) {
-              void message.info(translateDataGrid('data_grid.message.no_rows_selected'));
-              return;
-          }
-          await exportData(rows, options);
-          return;
-      }
-      if (scope === 'page') {
-          await exportData(queryResultCurrentPageRows, options);
-          return;
-      }
-      const exportAllSql = String(resultExportAllSql || '').trim();
-      const fallbackAllSql = String(resultSql || '').trim();
-      const backendExportSql = exportAllSql || fallbackAllSql;
-      if (backendExportSql && connectionId) {
-          const totalRows = pagination && pagination.totalKnown !== false ? Number(pagination.total) : undefined;
-          await exportByQuery(backendExportSql, tableName || 'query_result', options, totalRows);
-          return;
-      }
-      await exportData(mergedDisplayData, options);
-  }, [connectionId, exportByQuery, exportData, mergedDisplayData, pagination, queryResultCurrentPageRows, resultExportAllSql, resultSql, rowKeyStr, selectedRowKeys, tableName]);
-
-  // Context Menu Export
-  const handleExportSelected = useCallback(async (options: DataExportFileOptions, record: any) => {
-      if (isQueryResultExport) {
-          await exportData(getContextMenuTargetRows(record), options);
-          return;
-      }
-      const records = getTargets(record);
-      if (!connectionId || !tableName) {
-          await exportData(records, options);
-          return;
-      }
-
-      // 有未提交修改时，优先按界面数据导出，避免与数据库不一致。
-      if (hasChanges) {
-          await exportData(records, options);
-          void message.warning(translateDataGrid('data_grid.message.export_with_uncommitted_changes'));
-          return;
-      }
-
-      const config = buildConnConfig();
-      if (!config) {
-          await exportData(records, options);
-          return;
-      }
-
-      const dbType = resolveDataSourceType(config);
-      const pkWhere = buildPkWhereSql(records, dbType);
-      if (!pkWhere) {
-          await exportData(records, options);
-          return;
-      }
-
-      const sql = buildDataGridSelectBaseSql({
-          dbType,
-          tableName,
-          columnNames: displayOutputColumnNames,
-          whereSql: `WHERE ${pkWhere}`,
-      });
-      await exportByQuery(sql, tableName || 'export', options, records.length);
-  }, [getTargets, isQueryResultExport, connectionId, tableName, hasChanges, exportData, buildConnConfig, buildPkWhereSql, exportByQuery, displayOutputColumnNames, translateDataGrid]);
-
-  const handleV2CellContextMenuAction = useCallback((action: V2CellContextMenuActionKey) => {
-      const record = cellContextMenu.record;
-      const closeMenu = () => setCellContextMenu(prev => ({ ...prev, visible: false }));
-
-      switch (action) {
-          case 'copy-field-name':
-              handleCopyContextMenuFieldName();
-              return;
-          case 'copy-row-data':
-              if (record) handleCopyRowData(record);
-              closeMenu();
-              return;
-          case 'copy-row-for-paste':
-              if (record) {
-                  const rowKey = record?.[GONAVI_ROW_KEY];
-                  if (rowKey === undefined || rowKey === null) {
-                      void message.info(translateDataGrid('data_grid.message.no_copyable_rows'));
-                  } else {
-                      setSelectedRowKeys([rowKey]);
-                      copyRowsForPaste([rowKey]);
-                  }
-              }
-              closeMenu();
-              return;
-          case 'paste-row-as-new':
-              handlePasteCopiedRowsAsNew();
-              closeMenu();
-              return;
-          case 'copy-column-data':
-              handleCopyColumnData(cellContextMenu.dataIndex);
-              closeMenu();
-              return;
-          case 'undo-cell-change':
-              handleUndoContextMenuCellChange();
-              return;
-          case 'set-null':
-              handleCellSetNull();
-              return;
-          case 'edit-row':
-              handleOpenContextMenuRowEditor();
-              return;
-          case 'fill-selected':
-              if (selectedRowKeys.length > 0 && record) {
-                  handleBatchFillToSelected(record, cellContextMenu.dataIndex);
-              }
-              closeMenu();
-              return;
-          case 'paste-copied-columns':
-              if (copiedCellPatch) {
-                  handlePasteCopiedColumnsToSelectedRows(record?.[GONAVI_ROW_KEY]);
-              }
-              closeMenu();
-              return;
-          case 'copy-insert':
-              if (record) handleCopyInsert(record);
-              closeMenu();
-              return;
-          case 'copy-update':
-              if (record) handleCopyUpdate(record);
-              closeMenu();
-              return;
-          case 'copy-delete':
-              if (record) handleCopyDelete(record);
-              closeMenu();
-              return;
-          case 'copy-json':
-              if (record) handleCopyJson(record);
-              closeMenu();
-              return;
-          case 'copy-csv':
-              if (record) handleCopyCsv(record);
-              closeMenu();
-              return;
-          case 'copy-markdown':
-              if (record) {
-                  const records = getTargets(record);
-                  const columns = getClipboardColumnNames(records);
-                  copyToClipboard(buildClipboardMarkdown(records, columns));
-              }
-              closeMenu();
-              return;
-          case 'export-csv':
-          case 'export-xlsx':
-          case 'export-json':
-          case 'export-html':
-              if (record) {
-                  const format = action.replace('export-', '') as DataExportDialogValues['format'];
-                  handleExportSelected({ format }, record).catch(console.error);
-              }
-              closeMenu();
-              return;
-          default:
-              closeMenu();
-      }
-  }, [
-      cellContextMenu.record,
-      cellContextMenu.dataIndex,
-      copiedCellPatch,
-      copyRowsForPaste,
-      copyToClipboard,
-      getClipboardColumnNames,
-      getTargets,
-      handleBatchFillToSelected,
-      handleCellSetNull,
-      handleUndoContextMenuCellChange,
-      handleCopyContextMenuFieldName,
-      handleCopyCsv,
-      handleCopyDelete,
-      handleCopyInsert,
-      handleCopyJson,
-      handleCopyColumnData,
-      handleCopyRowData,
-      handleCopyUpdate,
-      handleExportSelected,
-      handleOpenContextMenuRowEditor,
-      handlePasteCopiedColumnsToSelectedRows,
-      handlePasteCopiedRowsAsNew,
-      selectedRowKeys.length,
-      translateDataGrid,
-  ]);
-
-  // Export
-  const handleOpenExportDialog = useCallback(async () => {
-      const selectedCount = selectedRowKeys.length;
-      const allRowsLabel = (resultExportAllSql || resultSql)
-          ? '全部结果（重新查询）'
-          : `全部结果（当前缓存 ${mergedDisplayData.length} 条）`;
-      const commonInitialValues: Partial<DataExportDialogValues> = {
-          format: DEFAULT_DATA_EXPORT_FORMAT,
-          xlsxMaxRowsPerSheet: DEFAULT_XLSX_ROWS_PER_SHEET,
-      };
-
-      if (isQueryResultExport) {
-          const scopeOptions: DataExportScopeOption[] = [
-              {
-                  value: 'selected',
-                  label: selectedCount > 0 ? `选中行 (${selectedCount} 条)` : '选中行',
-                  description: '仅导出当前结果集中已勾选的行。',
-                  disabled: selectedCount <= 0,
-              },
-              {
-                  value: 'page',
-                  label: `当前页 (${queryResultCurrentPageRows.length} 条)`,
-                  description: '直接按当前结果页缓存导出。',
-              },
-              {
-                  value: 'all',
-                  label: allRowsLabel,
-                  description: (resultExportAllSql || resultSql)
-                      ? '后台会重新执行 SQL，避免只导出当前页或当前缓存。'
-                      : '当前查询缺少可重放 SQL 时，将导出当前缓存的全部结果。',
-              },
-          ];
-          const values = await showDataExportDialog(modal, {
-              title: '导出查询结果',
-              scopeOptions,
-              initialValues: {
-                  ...commonInitialValues,
-                  scope: (resultExportAllSql || resultSql) ? 'all' : (selectedCount > 0 ? 'selected' : 'page'),
-              },
-          });
-          if (!values) return;
-          await exportQueryResultRows(values, values.scope as Exclude<DataGridExportScope, 'filteredAll'>);
-          return;
-      }
-
-      if (!connectionId) return;
-      const config = buildConnConfig();
-      const dbType = config ? resolveDataSourceType(config) : '';
-      const currentPageSql = config && !hasChanges ? buildCurrentPageSql(dbType) : '';
-      const filteredAllSql = config && supportsSqlQueryExport ? buildFilteredAllSql(dbType) : '';
-      const allRowsSql = config && objectType !== 'table' ? buildAllRowsSql(dbType) : '';
-      const hasKnownFilteredTotal = hasFilteredExportSql && pagination && pagination.totalKnown !== false;
-      const hasKnownAllTotal = !hasFilteredExportSql && pagination && pagination.totalKnown !== false;
-
-      addTab(buildTableExportTab({
-          connectionId,
-          dbName,
-          tableName: tableName || 'export',
-          title: `导出 ${tableName || '数据'}`,
-          objectType,
-          scopeOptions: [
-              {
-                  value: 'page',
-                  label: `当前页 (${displayData.length} 条)`,
-                  description: currentPageSql
-                      ? '后台按当前分页条件重新查询后导出当前页。'
-                      : '当前页依赖前端临时状态，建议直接使用快捷导出。',
-                  disabled: !currentPageSql,
-              },
-              ...(hasFilteredExportSql ? [{
-                  value: 'filteredAll' as const,
-                  label: '筛选结果（全部）',
-                  description: filteredAllSql
-                      ? '按当前筛选条件重新查询数据库并导出全部筛选结果。'
-                      : '当前数据源或当前状态暂不支持在工作台重放筛选导出。',
-                  disabled: !filteredAllSql,
-              }] : []),
-              {
-                  value: 'all',
-                  label: '全表数据',
-                  description: '后台重新查询整张表并导出全部数据。',
-              },
-          ],
-          initialScope: hasFilteredExportSql && filteredAllSql ? 'filteredAll' : 'all',
-          queryByScope: {
-              ...(currentPageSql ? { page: currentPageSql } : {}),
-              ...(filteredAllSql ? { filteredAll: filteredAllSql } : {}),
-              ...(allRowsSql ? { all: allRowsSql } : {}),
-          },
-          rowCountByScope: {
-              page: displayData.length,
-              ...(hasKnownFilteredTotal ? { filteredAll: Number(pagination?.total) } : {}),
-              ...(hasKnownAllTotal ? { all: Number(pagination?.total) } : {}),
-          },
-      }));
-  }, [
-      addTab,
-      buildAllRowsSql,
-      buildConnConfig,
-      buildCurrentPageSql,
-      buildFilteredAllSql,
-      connectionId,
-      dbName,
-      displayData.length,
-      exportQueryResultRows,
-      hasFilteredExportSql,
-      objectType,
-      isQueryResultExport,
-      mergedDisplayData.length,
-      modal,
-      pagination,
-      queryResultCurrentPageRows.length,
-      resultExportAllSql,
-      resultSql,
-      selectedRowKeys.length,
-      supportsSqlQueryExport,
-      tableName,
-      hasChanges,
-  ]);
+  const {
+    handleV2ColumnHeaderContextMenuAction,
+    buildConnConfig,
+    buildCopySqlBatchText,
+    getTargets,
+    handleCopyCsv,
+    handleCopyDdl,
+    handleCopyDelete,
+    handleCopyInsert,
+    handleCopyJson,
+    handleCopyQueryResultCsv,
+    handleCopyQueryResultJson,
+    handleCopyQueryResultMarkdown,
+    handleCopyRowData,
+    handleCopySelectedCellsToClipboard,
+    handleCopyUpdate,
+    handleExportSelected,
+    handleV2CellContextMenuAction,
+    handleOpenExportDialog,
+  } = useDataGridV2Actions({
+    GONAVI_ROW_KEY,
+    addTab,
+    allTableColumnNames,
+    applyColumnSort,
+    autoFitColumnWidth,
+    buildClipboardCsv,
+    buildClipboardJson,
+    buildClipboardMarkdown,
+    buildClipboardTsv,
+    buildCopyDeleteSQL,
+    buildCopyInsertSQL,
+    buildCopyUpdateSQL,
+    buildDataGridSelectBaseSql,
+    buildEffectiveFilterConditions,
+    buildOrderBySQL,
+    buildPaginatedSelectSQL,
+    buildRpcConnectionConfig,
+    buildSelectedCellClipboardText,
+    buildTableExportTab,
+    buildWhereSQL,
+    cellContextMenu,
+    cellEditMode,
+    closeCellEditMode,
+    columnMetaMap,
+    columnMetaMapByLowerName,
+    columnTypeMapByLowerName,
+    connectionId,
+    connections,
+    copiedCellPatch,
+    copyRowsForPaste,
+    copyToClipboard,
+    currentConnConfig,
+    currentSelectionRef,
+    dbName,
+    dbType,
+    ddlText,
+    displayColumnNames,
+    displayData,
+    displayDataRef,
+    displayOutputColumnNames,
+    escapeLiteral,
+    exportData,
+    filterConditions,
+    handleBatchFillToSelected,
+    handleCellSetNull,
+    handleCopyColumnData,
+    handleCopyContextMenuFieldName,
+    handleOpenContextMenuRowEditor,
+    handlePasteCopiedColumnsToSelectedRows,
+    handlePasteCopiedRowsAsNew,
+    handleUndoContextMenuCellChange,
+    hasChanges,
+    hasExplicitSort,
+    hasFilteredExportSql,
+    isQueryResultExport,
+    mergedDisplayData,
+    modal,
+    navigator,
+    objectType,
+    pagination,
+    pickDataGridOutputRows,
+    pickRowsForClipboard,
+    pkColumns,
+    quickWhereCondition,
+    quoteIdentPart,
+    resetCellSelection,
+    resolveContextMenuFieldName,
+    resolveDataSourceType,
+    resultExportAllSql,
+    resultSql,
+    rootRef,
+    rowKeyStr,
+    runExportWithProgress,
+    selectedCells,
+    selectedRowKeys,
+    selectedRowKeysRef,
+    setCellContextMenu,
+    setQueryOptions,
+    setSelectedRowKeys,
+    sortInfo,
+    splitCellKey,
+    supportsCopyInsert,
+    supportsSqlQueryExport,
+    tableName,
+    toggleColumnVisibility,
+    translateDataGrid,
+    uniqueKeyGroups,
+    withSortBufferTuningSQL,
+  });
 
   const handleImport = async () => {
       if (!connectionId || !tableName) return;
@@ -7613,799 +4053,308 @@ const DataGrid: React.FC<DataGridProps> = ({
       fontWeight: 500,
       boxShadow: darkMode ? '0 2px 8px rgba(16,185,129,0.1)' : '0 2px 6px rgba(16,185,129,0.05)',
   };
-  const renderDataTableView = () => (
-      <div
-          ref={tableContainerRef}
-          className={`${isV2Ui ? 'gn-v2-data-grid-table-shell gn-v2-data-grid-table-wrap ' : ''}data-grid-table-wrap${horizontalScrollVisible ? ' data-grid-table-wrap-external-active' : ''}`}
-          onClickCapture={enableVirtual ? handleVirtualTableClickCapture : undefined}
-          onDoubleClickCapture={enableVirtual ? handleVirtualTableDoubleClickCapture : undefined}
-          onContextMenuCapture={enableVirtual ? handleVirtualTableContextMenuCapture : undefined}
-          style={{
-              flex: '1 1 auto',
-              minHeight: 0,
-              position: 'relative',
-              boxSizing: 'border-box',
-              paddingBottom: enableVirtual ? tableBodyBottomPadding : 0,
-          }}
-      >
-          <Form component={false} form={form}>
-              <DataContext.Provider value={dataContextValue}>
-                  <CellContextMenuContext.Provider value={cellContextMenuValue}>
-                      <EditableContext.Provider value={form}>
-                          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-                              <SortableContext items={displayColumnNames} strategy={horizontalListSortingStrategy}>
-                                  <Table
-                                      ref={tableRef}
-                                      components={tableComponents}
-                                      dataSource={tableRenderData}
-                                      columns={tableColumns}
-                                      {...(enableVirtual && typeof virtualListItemHeight === 'number'
-                                          ? { listItemHeight: virtualListItemHeight }
-                                          : {})}
-                                      showSorterTooltip={{ target: 'sorter-icon' }}
-                                      size="small"
-                                      tableLayout="fixed"
-                                      scroll={tableScrollConfig}
-                                      sticky={false}
-                                      virtual={enableVirtual}
-                                      loading={loading}
-                                      rowKey={GONAVI_ROW_KEY}
-                                      pagination={false}
-                                      onChange={handleTableChange}
-                                      rowHoverable={!enableVirtual}
-                                      bordered
-                                      rowSelection={rowSelectionConfig}
-                                      rowClassName={rowClassName}
-                                      onRow={tableOnRow}
-                                  />
-                              </SortableContext>
-                          </DndContext>
-                      </EditableContext.Provider>
-                  </CellContextMenuContext.Provider>
-              </DataContext.Provider>
-          </Form>
-          <div
-              ref={externalHorizontalScrollRef}
-              className="data-grid-external-horizontal-scroll"
-              aria-hidden={!horizontalScrollVisible}
-              onScroll={applyExternalScrollToTableTargets}
-              style={{
-                  opacity: horizontalScrollVisible ? 1 : 0,
-                  pointerEvents: horizontalScrollVisible ? 'auto' : 'none',
-              }}
-          >
-              <div
-                  className="data-grid-external-horizontal-scroll-inner"
-                  style={{ width: `${Math.max(horizontalScrollWidth, externalScrollbarMinWidth)}px` }}
-              />
-          </div>
-      </div>
-  );
-  const pageFindContent = (
-      <DataGridPageFind
-          isV2Ui={isV2Ui}
-          darkMode={darkMode}
-          inputProps={noAutoCapInputProps as Record<string, unknown>}
-          pageFindText={pageFindText}
-          normalizedPageFindText={normalizedPageFindText}
-          hasMatches={pageFindMatches.length > 0}
-          activePageFindPosition={activePageFindPosition}
-          matchCount={pageFindMatches.length}
-          occurrenceCount={pageFindSummary.occurrenceCount}
-          matchedCellCount={pageFindSummary.matchedCellCount}
-          onPageFindTextChange={setPageFindText}
-          onCancel={() => setPageFindText('')}
-          onNavigatePrevious={() => handleNavigatePageFind('previous')}
-          onNavigateNext={() => handleNavigatePageFind('next')}
-          translate={translateDataGrid}
-      />
-  );
-  const visiblePageFindContent = viewMode === 'table' ? pageFindContent : null;
-  const columnQuickFindContent = isTableSurfaceActive ? (
-      <DataGridColumnQuickFind
-          isV2Ui={isV2Ui}
-          darkMode={darkMode}
-          inputProps={noAutoCapInputProps as Record<string, unknown>}
-          value={columnQuickFindText}
-          options={columnQuickFindOptions}
-          hasTarget={!!resolveColumnQuickFindTarget(columnQuickFindText)}
-          translate={translateDataGrid}
-          onChange={setColumnQuickFindText}
-          onSubmit={handleSubmitColumnQuickFind}
-      />
-  ) : null;
-  const resultViewSwitcher = (
-      <DataGridResultViewSwitcher
-          isV2Ui={isV2Ui}
-          darkMode={darkMode}
-          viewMode={viewMode}
-          onViewModeChange={handleViewModeChange}
-          translate={translateDataGrid}
-      />
-  );
-  const paginationContent = (
-      <DataGridPaginationBar
-          isV2Ui={isV2Ui}
-          pagination={pagination}
-          paginationV2SummaryText={paginationV2SummaryText}
-          paginationSummaryText={paginationSummaryText}
-          paginationControlTotal={paginationControlTotal}
-          paginationTotalPages={paginationTotalPages}
-          paginationPageText={paginationPageText}
-          paginationPageSizeOptions={paginationPageSizeOptions}
-          showKnownPageCount={paginationHasKnownTotalPages}
-          onPageChange={onPageChange}
-          onPageSizeChange={handlePageSizeChange}
-          onV2PageStep={handleV2PageStep}
-          translate={translateDataGrid}
-      />
-  );
-
-  const rowEditorFields = useMemo(() => (
-      displayColumnNames.map((col) => {
-          const sample = rowEditorDisplayRef.current?.[col] ?? '';
-          const placeholder = rowEditorNullColsRef.current?.has(col) ? '(NULL)' : undefined;
-          const isJson = looksLikeJsonText(sample);
-          const useTextArea = isJson || sample.includes('\n') || sample.length >= 160;
-          const colMeta = columnMetaMap[col] || columnMetaMapByLowerName[col.toLowerCase()];
-          const pickerType = getTemporalPickerType(colMeta?.type, dbType, currentConnConfig);
-          const isTemporalValue = !!pickerType && !(/^0{4}-0{2}-0{2}/.test(String(sample || '')));
-          const isWritable = isWritableResultColumn(col, effectiveEditLocator);
-          return {
-              columnName: col,
-              sample,
-              placeholder,
-              isJson,
-              useTextArea,
-              pickerType,
-              isTemporalValue,
-              isWritable,
-          };
-      })
-  ), [columnMetaMap, columnMetaMapByLowerName, currentConnConfig, dbType, displayColumnNames, effectiveEditLocator, rowEditorOpen, rowEditorRowKey]);
-
-  const handleRefreshGrid = useCallback(() => {
-      clearAutoCommitTimer();
-      autoCommitFailedTokenRef.current = -1;
-      setAddedRows([]);
-      setModifiedRows({});
-      setDeletedRowKeys(new Set());
-      setModifiedColumns({});
-      setSelectedRowKeys([]);
-      const normalizedTableName = String(tableName || '').trim();
-      const normalizedDbName = String(dbName || '').trim();
-      if (connectionId && normalizedTableName) {
-          const cacheKey = `${connectionId}|${normalizedDbName}|${normalizedTableName}`;
-          delete columnMetaCacheRef.current[cacheKey];
-          delete foreignKeyCacheRef.current[cacheKey];
-          delete uniqueKeyGroupsCacheRef.current[cacheKey];
-          setMetadataReloadVersion((value) => value + 1);
-      }
-      if (onReload) onReload();
-  }, [clearAutoCommitTimer, connectionId, dbName, onReload, tableName]);
-
-  const handleResetPendingChanges = useCallback(() => {
-      clearAutoCommitTimer();
-      autoCommitFailedTokenRef.current = -1;
-      setAddedRows([]);
-      setModifiedRows({});
-      setDeletedRowKeys(new Set());
-      setModifiedColumns({});
-  }, [clearAutoCommitTimer]);
-
-  const handleToggleFilterWithDefault = useCallback(() => {
-      if (!onToggleFilter) return;
-      onToggleFilter();
-      if (filterConditions.length === 0 && !showFilter) addFilter();
-  }, [onToggleFilter, filterConditions.length, showFilter]);
-
-  const handleToggleCellEditMode = useCallback(() => {
-      const next = !cellEditMode;
-      if (!next) {
-          closeCellEditMode();
-      } else {
-          cellEditModeRef.current = true;
-          setCellEditMode(true);
-          resetCellSelection();
-      }
-      void message.info(next
-          ? translateDataGrid('data_grid.message.cell_edit_mode_entered')
-          : translateDataGrid('data_grid.message.cell_edit_mode_exited')).then();
-  }, [cellEditMode, closeCellEditMode, resetCellSelection, translateDataGrid]);
-
-  const handleRequestAiInsight = useCallback(() => {
-      const sampleData = mergedDisplayData.slice(0, 10);
-      const prompt = translateDataGrid('data_grid.ai_insight.prompt', {
-          count: sampleData.length,
-          json: JSON.stringify(sampleData, null, 2),
-      });
-      const store = useStore.getState();
-      const wasClosed = !store.aiPanelVisible;
-      if (wasClosed) store.setAIPanelVisible(true);
-      setTimeout(() => {
-          window.dispatchEvent(new CustomEvent('gonavi:ai:inject-prompt', { detail: { prompt } }));
-      }, wasClosed ? 350 : 0);
-  }, [mergedDisplayData, translateDataGrid]);
-
-  const handleToggleTotalCount = useCallback(() => {
-      if (!onRequestTotalCount) return;
-      if (pagination?.totalCountLoading) {
-          if (onCancelTotalCount) onCancelTotalCount();
-          return;
-      }
-      onRequestTotalCount();
-  }, [onCancelTotalCount, onRequestTotalCount, pagination?.totalCountLoading]);
-
-  return (
-    <div ref={rootRef} className={`${gridId}${cellEditMode ? ' cell-edit-mode' : ''} data-grid-root${isV2Ui ? ' gn-v2-data-grid' : ''}`} style={{ '--gonavi-header-min-height': `${headerCellMinHeight}px`, flex: '1 1 auto', height: '100%', overflow: 'hidden', padding: 0, display: 'flex', flexDirection: 'column', minHeight: 0, minWidth: 0, background: 'transparent' } as React.CSSProperties}>
-        <DataGridToolbarFrame
-            isV2Ui={isV2Ui}
-            tableName={tableName}
-            dbName={dbName}
-            translate={translateDataGrid}
-            loading={loading}
-            darkMode={darkMode}
-            bgFilter={bgFilter}
-            panelFrameColor={panelFrameColor}
-            panelRadius={panelRadius}
-            panelOuterGap={panelOuterGap}
-            panelPaddingY={panelPaddingY}
-            panelPaddingX={panelPaddingX}
-            toolbarBottomPadding={toolbarBottomPadding}
-            filterTopPadding={filterTopPadding}
-            selectionAccentHex={selectionAccentHex}
-            toolbarDividerColor={toolbarDividerColor}
-            showFilter={showFilter}
-            filterPanelRef={filterPanelRef}
-            onReload={onReload}
-            onToggleFilter={onToggleFilter}
-            canModifyData={canModifyData}
-            selectedRowKeysLength={selectedRowKeys.length}
-            allSelectedAreDeleted={allSelectedAreDeleted}
-            cellEditMode={cellEditMode}
-            selectedCellsSize={selectedCells.size}
-            copiedCellPatchColumnCount={copiedCellPatch ? Object.keys(copiedCellPatch.values).length : 0}
-            hasChanges={hasChanges}
-            pendingChangeCount={pendingChangeCount}
-            dataEditCommitMode={dataEditCommitMode}
-            dataEditAutoCommitDelayMs={dataEditAutoCommitDelayMs}
-            dataEditAutoCommitDelayOptions={localizedDataEditAutoCommitDelayOptions}
-            autoCommitRemainingSeconds={autoCommitRemainingSeconds}
-            canImport={canImport}
-            canExport={canExport}
-            isQueryResultExport={isQueryResultExport}
-            canCopyQueryResult={canCopyQueryResult}
-            prefersManualTotalCount={prefersManualTotalCount && !!onRequestTotalCount}
-            aiShortcutLabel={aiShortcutLabel}
-            legacyAiButtonStyle={legacyAiButtonStyle}
-            paginationTotalCountLoading={pagination?.totalCountLoading}
-            toolbarExtraActions={toolbarExtraActions}
-            filterConditions={filterConditions}
-            sortInfo={sortInfo}
-            displayColumnNames={displayColumnNames}
-            quickWhereDraft={quickWhereDraft}
-            quickWhereCondition={quickWhereCondition}
-            quickWhereSuggestionsOpen={quickWhereSuggestionsOpen}
-            quickWhereSuggestionOptions={quickWhereSuggestionOptions}
-            gridFieldSelectOptions={gridFieldSelectOptions}
-            filterLogicOptions={filterLogicOptions}
-            filterOpOptions={filterOpOptions}
-            renderGridFieldSelectOption={renderGridFieldSelectOption}
-            noAutoCapInputProps={noAutoCapInputProps as Record<string, unknown>}
-            filterFieldSelectStyle={FILTER_FIELD_SELECT_STYLE}
-            filterFieldPopupWidth={FILTER_FIELD_POPUP_WIDTH}
-            queryResultCopyMenu={queryResultCopyMenu}
-            dbType={dbType}
-            onResetPendingChanges={handleResetPendingChanges}
-            onDataEditCommitModeChange={(mode) => setDataEditTransactionOptions({ commitMode: mode })}
-            onDataEditAutoCommitDelayChange={(delayMs) => setDataEditTransactionOptions({ autoCommitDelayMs: delayMs })}
-            onRefresh={handleRefreshGrid}
-            onToggleFilterClick={handleToggleFilterWithDefault}
-            onAddRow={handleAddRow}
-            onUndoDeleteSelected={handleUndoDeleteSelected}
-            onDeleteSelected={handleDeleteSelected}
-            onToggleCellEditMode={handleToggleCellEditMode}
-            onCopySelectedCellsToClipboard={handleCopySelectedCellsToClipboard}
-            onCopySelectedColumnsFromRow={handleCopySelectedColumnsFromRow}
-            onOpenBatchEditModal={openBatchEditModal}
-            onPasteCopiedColumnsToSelectedRows={() => handlePasteCopiedColumnsToSelectedRows()}
-            onCommit={handleCommit}
-            onPreviewChanges={handlePreviewChanges}
-            onImport={handleImport}
-            onOpenExportModal={handleOpenExportDialog}
-            onCopyQueryResultCsv={handleCopyQueryResultCsv}
-            onRequestAiInsight={handleRequestAiInsight}
-            onToggleTotalCount={handleToggleTotalCount}
-            onQuickWhereDraftChange={setQuickWhereDraft}
-            onQuickWhereSuggestionsOpenChange={setQuickWhereSuggestionsOpen}
-            onQuickWhereKeyDown={(event) => {
-                const isClipboardShortcut = (event.metaKey || event.ctrlKey) && !event.altKey && ['c', 'v', 'x'].includes(String(event.key || '').toLowerCase());
-                if (isClipboardShortcut) {
-                    event.stopPropagation();
-                    return;
-                }
-                if (!shouldApplyQuickWhereOnEnter({
-                    key: event.key,
-                    shiftKey: event.shiftKey,
-                    isComposing: Boolean((event.nativeEvent as any)?.isComposing),
-                    suggestionsOpen: quickWhereSuggestionsOpen,
-                    suggestionCount: quickWhereSuggestionOptions.length,
-                    activeSuggestionId: event.currentTarget.getAttribute('aria-activedescendant'),
-                })) {
-                    return;
-                }
-                event.preventDefault();
-                applyQuickWhereCondition();
-            }}
-            onQuickWhereSelect={(value, option) => {
-                setQuickWhereDraft(resolveWhereConditionSelectedValue({
-                    selectedValue: value,
-                    currentInput: quickWhereDraft,
-                    insertText: (option as any)?.insertText,
-                }));
-            }}
-            onQuickWhereCopy={stopQuickWhereClipboardPropagation}
-            onQuickWhereCut={stopQuickWhereClipboardPropagation}
-            onQuickWherePaste={handleQuickWherePaste}
-            onApplyQuickWhere={() => applyQuickWhereCondition()}
-            onClearQuickWhere={clearQuickWhereCondition}
-            updateFilter={updateFilter}
-            removeFilter={removeFilter}
-            addFilter={addFilter}
-            isListOp={isListOp}
-            isBetweenOp={isBetweenOp}
-            isNoValueOp={isNoValueOp}
-            enableSortControls={!!onSort}
-            onApplySortInfo={applySortInfo}
-            onApplyFilters={applyFilters}
-            onEnableAllFilters={applyAllFiltersEnabled}
-            onDisableAllFilters={applyAllFiltersDisabled}
-            onClearFiltersAndSorts={clearAllFiltersAndSorts}
-        />
-
-	       <div ref={containerRef} style={{ flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0, display: 'flex', flexDirection: 'column', background: bgContent, borderRadius: panelRadius, border: `1px solid ${panelFrameColor}`, boxSizing: 'border-box' }}>
-	        {contextHolder}
-            {exportProgressModal}
-            <DataGridModals
-                tableName={tableName}
-                darkMode={darkMode}
-                translate={translateDataGrid}
-                displayColumnNames={displayColumnNames}
-                rowEditorOpen={rowEditorOpen}
-                rowEditorRowKey={rowEditorRowKey}
-                rowEditorForm={rowEditorForm}
-                rowEditorFields={rowEditorFields}
-                onCloseRowEditor={closeRowEditor}
-                onApplyRowEditor={applyRowEditor}
-                onOpenRowEditorFieldEditor={openRowEditorFieldEditor}
-                cellEditorOpen={cellEditorOpen}
-                cellEditorMeta={cellEditorMeta}
-                cellEditorIsJson={cellEditorIsJson}
-                cellEditorValue={cellEditorValue}
-                onCloseCellEditor={closeCellEditor}
-                onFormatJsonInEditor={handleFormatJsonInEditor}
-                onSaveCellEditor={handleCellEditorSave}
-                onCellEditorValueChange={setCellEditorValue}
-                batchEditModalOpen={batchEditModalOpen}
-                selectedCellsSize={selectedCells.size}
-                batchEditSetNull={batchEditSetNull}
-                batchEditValue={batchEditValue}
-                onCloseBatchEditModal={closeBatchEditModal}
-                onApplyBatchFill={handleBatchFillCells}
-                onBatchEditSetNullChange={setBatchEditSetNull}
-                onBatchEditValueChange={setBatchEditValue}
-                jsonEditorOpen={jsonEditorOpen}
-                jsonEditorValue={jsonEditorValue}
-                onCloseJsonEditor={closeJsonEditor}
-                onFormatJsonEditor={handleFormatJsonEditor}
-                onApplyJsonEditor={applyJsonEditor}
-                onJsonEditorValueChange={setJsonEditorValue}
-                ddlModalOpen={ddlModalOpen}
-                ddlLoading={ddlLoading}
-                ddlText={ddlText}
-                onCloseDdlModal={() => setDdlModalOpen(false)}
-                onCopyDdl={handleCopyDdl}
-            />
-
-        {viewMode === 'table' ? (
-            renderDataTableView()
-        ) : isV2Ui && viewMode === 'fields' ? (
-            canOpenObjectDesigner ? (
-                <TableDesigner
-                    embedded
-                    tab={{
-                        id: `embedded-design-${connectionId || ''}-${dbName || ''}-${tableName || ''}`,
-                        title: translateDataGrid('data_grid.embedded_designer.title', { tableName: tableName || '' }),
-                        type: 'design',
-                        connectionId: String(connectionId || ''),
-                        dbName,
-                        tableName,
-                        initialTab: 'columns',
-                        readOnly,
-                        objectType: 'table',
-                    }}
-                />
-            ) : (
-                <DataGridV2FieldsView
-                    tableName={tableName}
-                    displayOutputColumnNames={displayOutputColumnNames}
-                    pkColumns={pkColumns}
-                    locatorColumns={effectiveEditLocator?.columns}
-                    columnMetaMap={columnMetaMap}
-                    columnMetaMapByLowerName={columnMetaMapByLowerName}
-                    translate={translateDataGrid}
-                />
-            )
-        ) : isV2Ui && viewMode === 'ddl' && ddlViewLayout === 'side' ? (
-            <DataGridV2DdlSideWorkspace
-                tableContent={renderDataTableView()}
-                translate={translateDataGrid}
-                tableName={tableName}
-                ddlViewLayout={ddlViewLayout}
-                ddlLoading={ddlLoading}
-                ddlText={ddlText}
-                darkMode={darkMode}
-                onDdlViewLayoutChange={setDdlViewLayout}
-                onReload={() => {
-                    void handleOpenTableDdl({ asView: true });
-                }}
-                onCopy={handleCopyDdl}
-                ddlSidebarWidth={ddlSidebarWidth}
-                ddlSidebarResizePreviewX={ddlSidebarResizePreviewX}
-                onResizeStart={handleDdlSidebarResizeStart}
-            />
-        ) : isV2Ui && viewMode === 'ddl' ? (
-            <DataGridV2DdlView
-                layout="bottom"
-                translate={translateDataGrid}
-                tableName={tableName}
-                ddlViewLayout={ddlViewLayout}
-                ddlLoading={ddlLoading}
-                ddlText={ddlText}
-                darkMode={darkMode}
-                onDdlViewLayoutChange={setDdlViewLayout}
-                onReload={() => {
-                    void handleOpenTableDdl({ asView: true });
-                }}
-                onCopy={handleCopyDdl}
-            />
-        ) : isV2Ui && viewMode === 'er' ? (
-            <DataGridV2ErView
-                tableName={tableName}
-                displayOutputColumnNames={displayOutputColumnNames}
-                columnMetaMap={columnMetaMap}
-                columnMetaMapByLowerName={columnMetaMapByLowerName}
-                translate={translateDataGrid}
-            />
-        ) : viewMode === 'json' ? (
-            <DataGridJsonView
-                darkMode={darkMode}
-                rowCount={mergedDisplayData.length}
-                canModifyData={canModifyData}
-                jsonViewText={jsonViewText}
-                translate={translateDataGrid}
-                onOpenJsonEditor={handleOpenJsonEditor}
-            />
-	        ) : (
-	            <DataGridTextView
-                darkMode={darkMode}
-                rowCount={textViewRows.length}
-                textRecordIndex={textRecordIndex}
-                canModifyData={canModifyData}
-                currentTextRow={currentTextRow}
-                displayOutputColumnNames={displayOutputColumnNames}
-                translate={translateDataGrid}
-                onPrev={() => setTextRecordIndex(i => Math.max(0, i - 1))}
-                onNext={() => setTextRecordIndex(i => Math.min(textViewRows.length - 1, i + 1))}
-                onEditCurrent={openCurrentViewRowEditor}
-                formatTextViewValue={formatTextViewValue}
-            />
-        )}
-
-        <DataGridPreviewPanel
-            visible={dataPanelOpen}
-            isTableSurfaceActive={isTableSurfaceActive}
-            darkMode={darkMode}
-            focusedCellInfo={focusedCellInfo}
-            dataPanelIsJson={dataPanelIsJson}
-            focusedCellWritable={focusedCellWritable}
-            dataPanelValue={dataPanelValue}
-            columnMetaMap={columnMetaMap}
-            columnMetaMapByLowerName={columnMetaMapByLowerName}
-            translate={translateDataGrid}
-            onFormatJson={() => {
-                handleDataPanelFormatJson((errorMessage) => {
-                    void message.error(translateDataGrid('data_grid.json_editor.invalid_format', { error: errorMessage }));
-                });
-            }}
-            onSave={handleDataPanelSave}
-            onValueChange={setDataPanelValue}
-            onDirtyChange={(dirty) => {
-                dataPanelDirtyRef.current = dirty;
-            }}
-            isDirtyComparedToOriginal={(value) => value !== dataPanelOriginalRef.current}
-        />
-
-        {isTableSurfaceActive && isV2Ui && cellContextMenu.visible && createPortal(
-            <div
-                ref={cellContextMenuPortalRef}
-                className="gn-v2-table-context-menu-portal"
-                style={{
-                    position: 'fixed',
-                    left: cellContextMenu.x,
-                    top: cellContextMenu.y,
-                    zIndex: 10000,
-                }}
-                onClick={(e) => e.stopPropagation()}
-            >
-                {cellContextMenu.kind === 'column' ? (() => {
-                    const fieldName = resolveContextMenuFieldName(cellContextMenu.dataIndex, cellContextMenu.title);
-                    const meta = columnMetaMap[fieldName] || columnMetaMapByLowerName[fieldName.toLowerCase()];
-                    const activeSort = sortInfo.find((item) => item.columnKey === fieldName && item.enabled !== false);
-                    return (
-                        <V2ColumnHeaderContextMenuView
-                            fieldName={fieldName}
-                            shortcutPlatform={activeShortcutPlatform}
-                            columnType={meta?.type}
-                            columnComment={meta?.comment}
-                            sortOrder={(activeSort?.order === 'ascend' || activeSort?.order === 'descend') ? activeSort.order : null}
-                            showColumnType={showColumnType}
-                            showColumnComment={showColumnComment}
-                            onAction={handleV2ColumnHeaderContextMenuAction}
-                        />
-                    );
-                })() : (
-                    <V2CellContextMenuView
-                        fieldName={resolveContextMenuFieldName(cellContextMenu.dataIndex, cellContextMenu.title)}
-                        shortcutPlatform={activeShortcutPlatform}
-                        tableName={tableName}
-                        rowLabel={cellContextMenu.record?.[GONAVI_ROW_KEY] === undefined ? undefined : `row ${String(cellContextMenu.record?.[GONAVI_ROW_KEY])}`}
-                        selectedRowCount={selectedRowKeys.length}
-                        canModifyData={canModifyData}
-                        canUndoCellChange={canUndoContextMenuCellChange}
-                        copiedRowCount={copiedRowsForPaste.length}
-                        canPasteCopiedColumns={!!copiedCellPatch}
-                        supportsCopyInsert={supportsCopyInsert}
-                        onAction={handleV2CellContextMenuAction}
-                    />
-                )}
-            </div>,
-            document.body
-        )}
-
-        <DataGridLegacyCellContextMenu
-            visible={isTableSurfaceActive && !isV2Ui && cellContextMenu.visible}
-            darkMode={darkMode}
-            bgContextMenu={bgContextMenu}
-            cellContextMenu={cellContextMenu}
-            canModifyData={canModifyData}
-            copiedRowsForPasteLength={copiedRowsForPaste.length}
-            selectedRowKeysLength={selectedRowKeys.length}
-            copiedCellPatchAvailable={!!copiedCellPatch}
-            canUndoCellChange={canUndoContextMenuCellChange}
-            supportsCopyInsert={supportsCopyInsert}
-            translate={translateDataGrid}
-            onClose={() => setCellContextMenu(prev => ({ ...prev, visible: false }))}
-            onCopyFieldName={handleCopyContextMenuFieldName}
-            onCopyRowData={() => {
-                if (cellContextMenu.record) handleCopyRowData(cellContextMenu.record);
-            }}
-            onCopyRowForPaste={() => {
-                const rowKey = cellContextMenu.record?.[GONAVI_ROW_KEY];
-                if (rowKey === undefined || rowKey === null) {
-                    void message.info(translateDataGrid('data_grid.message.no_copyable_rows'));
-                    return;
-                }
-                setSelectedRowKeys([rowKey]);
-                copyRowsForPaste([rowKey]);
-            }}
-            onPasteCopiedRowsAsNew={handlePasteCopiedRowsAsNew}
-            onUndoCellChange={handleUndoContextMenuCellChange}
-            onSetNull={handleCellSetNull}
-            onEditRow={handleOpenContextMenuRowEditor}
-            onFillToSelected={() => {
-                if (selectedRowKeys.length > 0 && cellContextMenu.record) {
-                    handleBatchFillToSelected(cellContextMenu.record, cellContextMenu.dataIndex);
-                }
-            }}
-            onPasteCopiedColumns={() => {
-                const fallbackKey = cellContextMenu.record?.[GONAVI_ROW_KEY];
-                handlePasteCopiedColumnsToSelectedRows(fallbackKey);
-            }}
-            onCopyInsert={() => {
-                if (cellContextMenu.record) handleCopyInsert(cellContextMenu.record);
-            }}
-            onCopyUpdate={() => {
-                if (cellContextMenu.record) handleCopyUpdate(cellContextMenu.record);
-            }}
-            onCopyDelete={() => {
-                if (cellContextMenu.record) handleCopyDelete(cellContextMenu.record);
-            }}
-            onCopyJson={() => {
-                if (cellContextMenu.record) handleCopyJson(cellContextMenu.record);
-            }}
-            onCopyCsv={() => {
-                if (cellContextMenu.record) handleCopyCsv(cellContextMenu.record);
-            }}
-            onCopyMarkdown={() => {
-                if (cellContextMenu.record) {
-                    const records = getTargets(cellContextMenu.record);
-                    const lines = records.map((r: any) => {
-                        const { [GONAVI_ROW_KEY]: _rowKey, ...vals } = r;
-                        return `| ${Object.values(vals).join(' | ')} |`;
-                    });
-                    copyToClipboard(lines.join('\n'));
-                }
-            }}
-            onExportCsv={() => {
-                if (cellContextMenu.record) handleExportSelected({ format: 'csv' }, cellContextMenu.record).catch(console.error);
-            }}
-            onExportXlsx={() => {
-                if (cellContextMenu.record) handleExportSelected({ format: 'xlsx' }, cellContextMenu.record).catch(console.error);
-            }}
-            onExportJson={() => {
-                if (cellContextMenu.record) handleExportSelected({ format: 'json' }, cellContextMenu.record).catch(console.error);
-            }}
-            onExportHtml={() => {
-                if (cellContextMenu.record) handleExportSelected({ format: 'html' }, cellContextMenu.record).catch(console.error);
-            }}
-        />
-       </div>
-
-	       <DataGridSecondaryActions
-                isV2Ui={isV2Ui}
-                canViewDdl={canViewDdl}
-                canOpenObjectDesigner={canOpenObjectDesigner}
-                viewMode={viewMode}
-                ddlLoading={ddlLoading}
-                showColumnComment={showColumnComment}
-                showColumnType={showColumnType}
-                mergedDisplayCount={mergedDisplayData.length}
-                pendingChangeCount={pendingChangeCount}
-                resultViewSwitcher={resultViewSwitcher}
-                columnInfoSettingContent={columnInfoSettingContent}
-                columnQuickFindContent={columnQuickFindContent}
-                pageFindContent={visiblePageFindContent}
-                paginationContent={paginationContent}
-                onViewModeChange={handleViewModeChange}
-                dataPanelOpen={dataPanelOpen}
-                isTableSurfaceActive={isTableSurfaceActive}
-                onToggleDataPanel={toggleDataPanel}
-                onOpenTableDdl={() => {
-                    void handleOpenTableDdl();
-                }}
-                translate={translateDataGrid}
-            />
-
-		        <style>{gridCssText}</style>
-       
-       {/* Ghost Resize Line for Columns */}
-       <div
-           ref={ghostRef}
-           style={{
-               position: 'absolute',
-               top: 0,
-               bottom: 0, // Fits container height
-               left: 0,
-               width: '2px',
-               background: selectionAccentHex,
-               zIndex: 9999,
-               display: 'none',
-               pointerEvents: 'none',
-               willChange: 'transform'
-           }}
-       />
-
-       {/* Preview SQL Modal */}
-       <Modal
-           title={translateDataGrid('data_grid.preview_sql.title')}
-           open={previewModalOpen}
-           onCancel={() => setPreviewModalOpen(false)}
-           width={800}
-           footer={null}
-       >
-           <div style={{ marginBottom: 16 }}>
-               {previewSqlData.deletes.length > 0 && (
-                   <div style={{ marginBottom: 12 }}>
-                       <div style={{ fontWeight: 'bold', color: '#ff4d4f', marginBottom: 8 }}>
-                           DELETE ({previewSqlData.deletes.length})
-                       </div>
-                       {previewSqlData.deletes.map((sql, i) => (
-                           <div key={`del-${i}`} style={{ position: 'relative', marginBottom: 8 }}>
-                               <pre style={{
-                                   background: darkMode ? 'rgba(255, 77, 79, 0.10)' : '#fff2f0',
-                                   border: darkMode ? '1px solid rgba(255, 77, 79, 0.25)' : '1px solid #ffccc7',
-                                   padding: '8px 40px 8px 12px', borderRadius: 4,
-                                   fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-all',
-                                   margin: 0,
-                               }}>{sql}</pre>
-                               <Button
-                                   size="small" type="text"
-                                   icon={<CopyOutlined />}
-                                   style={{ position: 'absolute', top: 4, right: 4 }}
-                                   onClick={() => { navigator.clipboard.writeText(sql).then(() => message.success(translateDataGrid('data_grid.preview_sql.copied'))); }}
-                               />
-                           </div>
-                       ))}
-                   </div>
-               )}
-               {previewSqlData.updates.length > 0 && (
-                   <div style={{ marginBottom: 12 }}>
-                       <div style={{ fontWeight: 'bold', color: '#fa8c16', marginBottom: 8 }}>
-                           UPDATE ({previewSqlData.updates.length})
-                       </div>
-                       {previewSqlData.updates.map((sql, i) => (
-                           <div key={`upd-${i}`} style={{ position: 'relative', marginBottom: 8 }}>
-                               <pre style={{
-                                   background: darkMode ? 'rgba(250, 140, 22, 0.10)' : '#fff7e6',
-                                   border: darkMode ? '1px solid rgba(250, 140, 22, 0.25)' : '1px solid #ffd591',
-                                   padding: '8px 40px 8px 12px', borderRadius: 4,
-                                   fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-all',
-                                   margin: 0,
-                               }}>{sql}</pre>
-                               <Button
-                                   size="small" type="text"
-                                   icon={<CopyOutlined />}
-                                   style={{ position: 'absolute', top: 4, right: 4 }}
-                                   onClick={() => { navigator.clipboard.writeText(sql).then(() => message.success(translateDataGrid('data_grid.preview_sql.copied'))); }}
-                               />
-                           </div>
-                       ))}
-                   </div>
-               )}
-               {previewSqlData.inserts.length > 0 && (
-                   <div style={{ marginBottom: 12 }}>
-                       <div style={{ fontWeight: 'bold', color: '#52c41a', marginBottom: 8 }}>
-                           INSERT ({previewSqlData.inserts.length})
-                       </div>
-                       {previewSqlData.inserts.map((sql, i) => (
-                           <div key={`ins-${i}`} style={{ position: 'relative', marginBottom: 8 }}>
-                               <pre style={{
-                                   background: darkMode ? 'rgba(82, 196, 26, 0.10)' : '#f6ffed',
-                                   border: darkMode ? '1px solid rgba(82, 196, 26, 0.25)' : '1px solid #b7eb8f',
-                                   padding: '8px 40px 8px 12px', borderRadius: 4,
-                                   fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-all',
-                                   margin: 0,
-                               }}>{sql}</pre>
-                               <Button
-                                   size="small" type="text"
-                                   icon={<CopyOutlined />}
-                                   style={{ position: 'absolute', top: 4, right: 4 }}
-                                   onClick={() => { navigator.clipboard.writeText(sql).then(() => message.success(translateDataGrid('data_grid.preview_sql.copied'))); }}
-                               />
-                           </div>
-                       ))}
-                   </div>
-               )}
-               {previewSqlData.deletes.length === 0 && previewSqlData.updates.length === 0 && previewSqlData.inserts.length === 0 && (
-                   <div style={{ color: darkMode ? '#888' : '#999', textAlign: 'center', padding: 24 }}>
-                       {translateDataGrid('data_grid.preview_sql.no_changes')}
-                   </div>
-               )}
-           </div>
-           <div style={{ color: darkMode ? '#999' : '#888', fontSize: 12, borderTop: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', paddingTop: 8 }}>
-               {translateDataGrid('data_grid.preview_sql.summary', {
-                   deletes: previewSqlData.deletes.length,
-                   updates: previewSqlData.updates.length,
-                   inserts: previewSqlData.inserts.length
-               })}
-           </div>
-       </Modal>
-
-       {/* Import Preview Modal */}
-       <ImportPreviewModal
-           visible={importPreviewVisible}
-           filePath={importFilePath}
-           connectionId={connectionId || ''}
-           dbName={dbName || ''}
-           tableName={tableName || ''}
-           onClose={() => {
-               setImportPreviewVisible(false);
-               setImportFilePath('');
-           }}
-           onSuccess={handleImportSuccess}
-       />
-    </div>
+    return (
+    <DataGridShell
+      {...{
+        CellContextMenuContext,
+        CustomEvent,
+        DataContext,
+        DataGridColumnQuickFind,
+        DataGridPageFind,
+        DataGridPaginationBar,
+        DataGridResultViewSwitcher,
+        DndContext,
+        EditableContext,
+        Form,
+        JSON,
+        Set,
+        SortableContext,
+        Table,
+        activePageFindPosition,
+        activeShortcutPlatform,
+        addFilter,
+        aiShortcutLabel,
+        allSelectedAreDeleted,
+        applyAllFiltersDisabled,
+        applyAllFiltersEnabled,
+        applyExternalScrollToTableTargets,
+        applyFilters,
+        applyJsonEditor,
+        applyQuickWhereCondition,
+        applyRowEditor,
+        applySortInfo,
+        autoCommitFailedTokenRef,
+        autoCommitRemainingSeconds,
+        batchEditModalOpen,
+        batchEditSetNull,
+        batchEditValue,
+        bgContent,
+        bgContextMenu,
+        bgFilter,
+        canCopyQueryResult,
+        canExport,
+        canImport,
+        canModifyData,
+        canOpenObjectDesigner,
+        canUndoContextMenuCellChange,
+        canViewDdl,
+        cellContextMenu,
+        cellContextMenuPortalRef,
+        cellContextMenuValue,
+        cellEditMode,
+        cellEditModeRef,
+        cellEditorIsJson,
+        cellEditorMeta,
+        cellEditorOpen,
+        cellEditorValue,
+        clearAllFiltersAndSorts,
+        clearAutoCommitTimer,
+        clearQuickWhereCondition,
+        closeBatchEditModal,
+        closeCellEditMode,
+        closeCellEditor,
+        closeJsonEditor,
+        closeRowEditor,
+        closestCenter,
+        columnInfoSettingContent,
+        columnMetaCacheRef,
+        columnMetaMap,
+        columnMetaMapByLowerName,
+        columnQuickFindOptions,
+        columnQuickFindText,
+        connectionId,
+        containerRef,
+        contextHolder,
+        copiedCellPatch,
+        copiedRowsForPaste,
+        copyRowsForPaste,
+        copyToClipboard,
+        currentConnConfig,
+        currentTextRow,
+        darkMode,
+        dataContextValue,
+        dataEditAutoCommitDelayMs,
+        dataEditCommitMode,
+        dataPanelDirtyRef,
+        dataPanelIsJson,
+        dataPanelOpen,
+        dataPanelOriginalRef,
+        dataPanelValue,
+        dbName,
+        dbType,
+        ddlLoading,
+        ddlModalOpen,
+        ddlSidebarResizePreviewX,
+        ddlSidebarWidth,
+        ddlText,
+        ddlViewLayout,
+        displayColumnNames,
+        displayOutputColumnNames,
+        effectiveEditLocator,
+        enableVirtual,
+        exportProgressModal,
+        externalHorizontalScrollRef,
+        externalScrollbarMinWidth,
+        filterConditions,
+        filterLogicOptions,
+        filterOpOptions,
+        filterPanelRef,
+        filterTopPadding,
+        focusedCellInfo,
+        focusedCellWritable,
+        foreignKeyCacheRef,
+        form,
+        formatTextViewValue,
+        getTargets,
+        getTemporalPickerType,
+        ghostRef,
+        gridCssText,
+        gridFieldSelectOptions,
+        gridId,
+        handleAddRow,
+        handleBatchFillCells,
+        handleBatchFillToSelected,
+        handleCellEditorSave,
+        handleCellSetNull,
+        handleCommit,
+        handleCopyContextMenuFieldName,
+        handleCopyCsv,
+        handleCopyDdl,
+        handleCopyDelete,
+        handleCopyInsert,
+        handleCopyJson,
+        handleCopyQueryResultCsv,
+        handleCopyRowData,
+        handleCopySelectedCellsToClipboard,
+        handleCopySelectedColumnsFromRow,
+        handleCopyUpdate,
+        handleDataPanelFormatJson,
+        handleDataPanelSave,
+        handleDdlSidebarResizeStart,
+        handleDeleteSelected,
+        handleDragEnd,
+        handleExportSelected,
+        handleFormatJsonEditor,
+        handleFormatJsonInEditor,
+        handleImport,
+        handleImportSuccess,
+        handleNavigatePageFind,
+        handleOpenContextMenuRowEditor,
+        handleOpenExportDialog,
+        handleOpenJsonEditor,
+        handleOpenTableDdl,
+        handlePageSizeChange,
+        handlePasteCopiedColumnsToSelectedRows,
+        handlePasteCopiedRowsAsNew,
+        handlePreviewChanges,
+        handleQuickWherePaste,
+        handleSubmitColumnQuickFind,
+        handleTableChange,
+        handleUndoContextMenuCellChange,
+        handleUndoDeleteSelected,
+        handleV2CellContextMenuAction,
+        handleV2ColumnHeaderContextMenuAction,
+        handleV2PageStep,
+        handleViewModeChange,
+        handleVirtualTableClickCapture,
+        handleVirtualTableContextMenuCapture,
+        handleVirtualTableDoubleClickCapture,
+        hasChanges,
+        headerCellMinHeight,
+        horizontalListSortingStrategy,
+        horizontalScrollVisible,
+        horizontalScrollWidth,
+        importFilePath,
+        importPreviewVisible,
+        isBetweenOp,
+        isListOp,
+        isNoValueOp,
+        isQueryResultExport,
+        isTableSurfaceActive,
+        isV2Ui,
+        isWritableResultColumn,
+        jsonEditorOpen,
+        jsonEditorValue,
+        jsonViewText,
+        legacyAiButtonStyle,
+        loading,
+        localizedDataEditAutoCommitDelayOptions,
+        looksLikeJsonText,
+        mergedDisplayData,
+        noAutoCapInputProps,
+        normalizedPageFindText,
+        onCancelTotalCount,
+        onPageChange,
+        onReload,
+        onRequestTotalCount,
+        onSort,
+        onToggleFilter,
+        openBatchEditModal,
+        openCurrentViewRowEditor,
+        openRowEditorFieldEditor,
+        pageFindMatches,
+        pageFindSummary,
+        pageFindText,
+        pagination,
+        paginationControlTotal,
+        paginationHasKnownTotalPages,
+        paginationPageSizeOptions,
+        paginationPageText,
+        paginationSummaryText,
+        paginationTotalPages,
+        paginationV2SummaryText,
+        panelFrameColor,
+        panelOuterGap,
+        panelPaddingX,
+        panelPaddingY,
+        panelRadius,
+        pendingChangeCount,
+        pkColumns,
+        prefersManualTotalCount,
+        previewModalOpen,
+        previewSqlData,
+        queryResultCopyMenu,
+        quickWhereCondition,
+        quickWhereDraft,
+        quickWhereSuggestionOptions,
+        quickWhereSuggestionsOpen,
+        readOnly,
+        removeFilter,
+        renderGridFieldSelectOption,
+        resetCellSelection,
+        resolveColumnQuickFindTarget,
+        resolveContextMenuFieldName,
+        resolveWhereConditionSelectedValue,
+        rootRef,
+        rowClassName,
+        rowEditorDisplayRef,
+        rowEditorForm,
+        rowEditorNullColsRef,
+        rowEditorOpen,
+        rowEditorRowKey,
+        rowSelectionConfig,
+        selectedCells,
+        selectedRowKeys,
+        selectionAccentHex,
+        sensors,
+        setAddedRows,
+        setBatchEditSetNull,
+        setBatchEditValue,
+        setCellContextMenu,
+        setCellEditMode,
+        setCellEditorValue,
+        setColumnQuickFindText,
+        setDataEditTransactionOptions,
+        setDataPanelValue,
+        setDdlModalOpen,
+        setDdlViewLayout,
+        setDeletedRowKeys,
+        setImportFilePath,
+        setImportPreviewVisible,
+        setJsonEditorValue,
+        setMetadataReloadVersion,
+        setModifiedColumns,
+        setModifiedRows,
+        setPageFindText,
+        setPreviewModalOpen,
+        setQuickWhereDraft,
+        setQuickWhereSuggestionsOpen,
+        setSelectedRowKeys,
+        setTextRecordIndex,
+        setTimeout,
+        shouldApplyQuickWhereOnEnter,
+        showColumnComment,
+        showColumnType,
+        showFilter,
+        sortInfo,
+        stopQuickWhereClipboardPropagation,
+        supportsCopyInsert,
+        tableBodyBottomPadding,
+        tableColumns,
+        tableComponents,
+        tableContainerRef,
+        tableName,
+        tableOnRow,
+        tableRef,
+        tableRenderData,
+        tableScrollConfig,
+        textRecordIndex,
+        textViewRows,
+        toggleDataPanel,
+        toolbarBottomPadding,
+        toolbarDividerColor,
+        toolbarExtraActions,
+        translateDataGrid,
+        uniqueKeyGroupsCacheRef,
+        updateFilter,
+        useCallback,
+        useMemo,
+        useStore,
+        viewMode,
+        virtualListItemHeight,
+        window,
+      }}
+    />
   );
 };
 
diff --git a/frontend/src/components/DataGridCore.tsx b/frontend/src/components/DataGridCore.tsx
new file mode 100644
index 0000000..047a3fa
--- /dev/null
+++ b/frontend/src/components/DataGridCore.tsx
@@ -0,0 +1,1700 @@
+import Modal from './common/ResizableDraggableModal';
+// cspell:ignore anticon sqls uuidv uuidv4 hscroll
+import React, { useState, useEffect, useRef, useContext, useMemo, useCallback, useDeferredValue } from 'react';
+import { createPortal } from 'react-dom';
+import { Table, message, Input, Button, Dropdown, MenuProps, Form, Pagination, Select, Checkbox, Segmented, Tooltip, Popover, DatePicker, TimePicker } from 'antd';
+import dayjs from 'dayjs';
+import type { SortOrder, ColumnType } from 'antd/es/table/interface';
+import type { Reference as TableReference } from 'rc-table';
+import { CloseOutlined, ConsoleSqlOutlined, CopyOutlined, EditOutlined, ExportOutlined, FileTextOutlined, LeftOutlined, RightOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { 
+    DndContext, 
+    DragEndEvent, 
+    PointerSensor, 
+    useSensor, 
+    useSensors, 
+    closestCenter 
+} from '@dnd-kit/core';
+import { 
+    SortableContext, 
+    useSortable, 
+    horizontalListSortingStrategy, 
+    arrayMove 
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ImportData, ExportDataWithOptions, ExportQueryWithOptions, ApplyChanges, PreviewChanges, DBGetColumns, DBGetIndexes, DBGetForeignKeys, DBShowCreateTable } from '../../wailsjs/go/app/App';
+import ImportPreviewModal from './ImportPreviewModal';
+import { useStore } from '../store';
+import { getCurrentLanguage, t } from '../i18n';
+import { useOptionalI18n } from '../i18n/provider';
+import type { ColumnDefinition, ForeignKeyDefinition, IndexDefinition } from '../types';
+import { v4 as generateUuid } from 'uuid';
+import 'react-resizable/css/styles.css';
+import { buildOrderBySQL, buildPaginatedSelectSQL, buildWhereSQL, escapeLiteral, hasExplicitSort, quoteIdentPart, withSortBufferTuningSQL, type FilterCondition } from '../utils/sql';
+import { isMacLikePlatform, normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
+import { getDataSourceCapabilities, resolveDataSourceType } from '../utils/dataSourceCapabilities';
+import { buildRpcConnectionConfig } from '../utils/connectionRpcConfig';
+import { normalizeOceanBaseProtocol } from '../utils/oceanBaseProtocol';
+import {
+    getDensityParams,
+    resolveDataTableColumnWidth,
+    resolveDataTableVerticalBorderColor,
+} from '../utils/dataGridDisplay';
+import { resolvePaginationPageText, resolvePaginationSummaryText, resolvePaginationTotalForControl } from '../utils/dataGridPagination';
+import { resolveGridSortInfoFromTableSorter } from '../utils/dataGridSort';
+import {
+    calculateExternalHorizontalScrollInnerWidth,
+    calculateTableBodyBottomPadding,
+    calculateVirtualTableScrollX,
+    resolveDataGridColumnQuickFindScrollLeft,
+    resolveDataGridHorizontalWheelDelta,
+} from './dataGridLayout';
+import {
+    buildCopyDeleteSQL,
+    buildCopyInsertSQL,
+    buildCopyUpdateSQL,
+    normalizeTemporalLiteralText,
+    resolveUniqueKeyGroupsFromIndexes,
+    type CopySqlError,
+} from './dataGridCopyInsert';
+import { calculateAutoFitColumnWidth } from './dataGridAutoWidth';
+import { buildSelectedCellClipboardText } from './dataGridSelectionCopy';
+import { buildCopiedRowsForPaste, buildPastedRowsFromCopiedRows } from './dataGridRowClipboard';
+import {
+    buildDataGridSelectBaseSql,
+    pickDataGridOutputRows,
+    resolveDataGridOutputColumnNames,
+} from './dataGridOutput';
+import {
+    buildClipboardCsv,
+    buildClipboardJson,
+    buildClipboardMarkdown,
+    pickRowsForClipboard,
+} from './dataGridClipboardExport';
+import { applyNoAutoCapAttributesWithin, noAutoCapInputProps } from '../utils/inputAutoCap';
+import { DEFAULT_SHORTCUT_OPTIONS, getShortcutPlatform, resolveShortcutDisplay } from '../utils/shortcuts';
+import {
+    TEMPORAL_FORMATS,
+    formatFromDayjs,
+    getTemporalPickerFormat,
+    getTemporalPickerType,
+    isTemporalColumnType,
+    parseToDayjs,
+    resolveTemporalEditorSaveValue,
+    type TemporalConnectionLike,
+    type TemporalPickerType,
+} from './dataGridTemporal';
+import {
+    buildEffectiveFilterConditions,
+    normalizeQuickWhereCondition,
+    resolveWhereConditionSelectedValue,
+    resolveWhereConditionSuggestions,
+    shouldApplyQuickWhereOnEnter,
+    validateQuickWhereCondition,
+} from '../utils/dataGridWhereFilter';
+import {
+    attachDataGridFindRenderVersion,
+    collectDataGridFindMatches,
+    findDataGridTextRanges,
+    hasDataGridFindRenderVersionChanged,
+    normalizeDataGridFindQuery,
+    resolveDataGridColumnQuickFindTarget,
+    resolveDataGridFindNavigationIndex,
+    summarizeDataGridFindMatches,
+    type DataGridFindMatch,
+    type DataGridFindNavigationDirection,
+} from '../utils/dataGridFind';
+import {
+    filterHiddenLocatorColumns,
+    isWritableResultColumn,
+    resolveWritableColumnName,
+    resolveRowLocatorValues,
+    type EditRowLocator,
+    type RowLocatorMessages,
+} from '../utils/rowLocator';
+import {
+    getColumnDefinitionComment,
+    getColumnDefinitionName,
+    getColumnDefinitionType,
+} from '../utils/columnDefinition';
+import {
+    V2CellContextMenuView,
+    V2ColumnHeaderContextMenuView,
+    type V2CellContextMenuActionKey,
+    type V2ColumnHeaderContextMenuActionKey,
+} from './V2TableContextMenu';
+import DataGridColumnTitle from './DataGridColumnTitle';
+import DataGridColumnInfoPopoverContent from './DataGridColumnInfoPopoverContent';
+import DataGridColumnQuickFind from './DataGridColumnQuickFind';
+import DataGridPageFind from './DataGridPageFind';
+import DataGridPaginationBar from './DataGridPaginationBar';
+import DataGridResultViewSwitcher from './DataGridResultViewSwitcher';
+import DataGridSecondaryActions from './DataGridSecondaryActions';
+import DataGridToolbarFrame from './DataGridToolbarFrame';
+import DataGridModals from './DataGridModals';
+import DataGridLegacyCellContextMenu from './DataGridLegacyCellContextMenu';
+import DataGridPreviewPanel from './DataGridPreviewPanel';
+import {
+    DEFAULT_DATA_EXPORT_FORMAT,
+    DEFAULT_XLSX_ROWS_PER_SHEET,
+    showDataExportDialog,
+    type DataExportDialogValues,
+    type DataExportFileOptions,
+    type DataExportScopeOption,
+} from './DataExportDialog';
+import { DataGridJsonView, DataGridTextView } from './DataGridRecordViews';
+import { DataGridV2DdlSideWorkspace, DataGridV2DdlView } from './DataGridV2DdlWorkspace';
+import { DataGridV2ErView, DataGridV2FieldsView } from './DataGridV2MetadataViews';
+import TableDesigner from './TableDesigner';
+import { useExportProgressDialog } from './ExportProgressModal';
+import { useDataGridFilters } from './useDataGridFilters';
+import { useDataGridDdlView } from './useDataGridDdlView';
+import { useDataGridModalEditors } from './useDataGridModalEditors';
+import { useDataGridPreviewPanel } from './useDataGridPreviewPanel';
+import { buildTableExportTab } from '../utils/tableExportTab';
+import { buildDataGridCssText } from './dataGridStyles';
+
+// --- Error Boundary ---
+interface DataGridErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+
+interface DataGridErrorBoundaryProps {
+    children: React.ReactNode;
+    i18nLanguage?: string;
+}
+
+class DataGridErrorBoundary extends React.Component<
+    DataGridErrorBoundaryProps,
+    DataGridErrorBoundaryState
+> {
+    constructor(props: DataGridErrorBoundaryProps) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error: Error): DataGridErrorBoundaryState {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+        console.error('DataGrid render error:', error, errorInfo);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div style={{ padding: 16, color: '#ff4d4f' }}>
+                    <h4>{t('data_grid.error_boundary.title', undefined, this.props.i18nLanguage)}</h4>
+                    <p>{t('data_grid.error_boundary.description', undefined, this.props.i18nLanguage)}</p>
+                    <pre style={{ fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+                        {this.state.error?.message}
+                    </pre>
+                    <Button
+                        size="small"
+                        onClick={() => this.setState({ hasError: false, error: null })}
+                    >
+                        {t('data_grid.error_boundary.retry', undefined, this.props.i18nLanguage)}
+                    </Button>
+                </div>
+            );
+        }
+        return this.props.children;
+    }
+}
+
+// 内部行标识字段：避免与真实业务字段（如 `key` 列）冲突。
+export const GONAVI_ROW_KEY = '__gonavi_row_key__';
+export const GONAVI_ROW_NUMBER_COLUMN_KEY = '__gonavi_row_number__';
+
+// Cell key helpers for batch selection/fill.
+// Use a control character separator to avoid collisions with rowKey/columnName contents (e.g. `new-123`).
+const CELL_KEY_SEP = '\u0001';
+const CELL_SELECTION_DRAG_THRESHOLD_PX = 4;
+const DATE_TIME_CACHE_LIMIT = 2000;
+const TABLE_CELL_PREVIEW_MAX_CHARS = 240;
+const ROW_NUMBER_COLUMN_WIDTH = 58;
+const DATA_EDIT_AUTO_COMMIT_DELAY_OPTIONS = [
+    { value: 3000, seconds: 3 },
+    { value: 5000, seconds: 5 },
+    { value: 10000, seconds: 10 },
+    { value: 30000, seconds: 30 },
+];
+const DATA_GRID_DISPLAY_RENDER_VERSION = Symbol('DATA_GRID_DISPLAY_RENDER_VERSION');
+const DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION = Symbol('DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION');
+const DEFAULT_GRID_MONO_FONT_FAMILY = '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace';
+const normalizedDateTimeCache = new Map<string, string>();
+const objectCellPreviewCache = new WeakMap<object, string>();
+const useDataGridI18nLanguage = () => {
+    const i18n = useOptionalI18n();
+    return i18n?.language ?? getCurrentLanguage();
+};
+const makeCellKey = (rowKey: string, colName: string) => `${rowKey}${CELL_KEY_SEP}${colName}`;
+const splitCellKey = (cellKey: string): { rowKey: string; colName: string } | null => {
+    const sepIndex = cellKey.indexOf(CELL_KEY_SEP);
+    if (sepIndex === -1) return null;
+    return {
+        rowKey: cellKey.slice(0, sepIndex),
+        colName: cellKey.slice(sepIndex + CELL_KEY_SEP.length),
+    };
+};
+export const resolveContextMenuFieldName = (dataIndex: string, title?: string): string => {
+    const name = String(dataIndex || title || '').trim();
+    return name;
+};
+
+const trimSimpleCache = (cache: Map<string, string>, limit: number) => {
+    if (cache.size < limit) return;
+    const firstKey = cache.keys().next().value;
+    if (typeof firstKey === 'string') {
+        cache.delete(firstKey);
+    }
+};
+
+const looksLikeDateTimeText = (val: string): boolean => {
+    if (!val) return false;
+    const len = val.length;
+    if (len < 19 || len > 48) return false;
+    const charCode0 = val.charCodeAt(0);
+    if (charCode0 < 48 || charCode0 > 57) return false;
+    return (
+        val[4] === '-' &&
+        val[7] === '-' &&
+        (val[10] === ' ' || val[10] === 'T') &&
+        val[13] === ':' &&
+        val[16] === ':'
+    );
+};
+
+// Normalize common datetime strings to `YYYY-MM-DD HH:mm:ss[.fraction]` for display/editing.
+// Handles RFC3339 and Go-style datetime text like `2024-05-13 08:32:47 +0800 CST`.
+// Also keep invalid datetime values like `0000-00-00 00:00:00` unchanged.
+const normalizeDateTimeString = (val: string) => {
+    if (!looksLikeDateTimeText(val)) {
+        return val;
+    }
+
+    const cached = normalizedDateTimeCache.get(val);
+    if (cached !== undefined) {
+        return cached;
+    }
+
+    // 检查是否为无效日期时间（0000-00-00 或类似格式）
+    if (/^0{4}-0{2}-0{2}/.test(val)) {
+        return val; // 保持原样显示，不尝试转换
+    }
+
+    const match = val.match(
+        /^(\d{4}-\d{2}-\d{2})[T ](\d{2}:\d{2}:\d{2})(\.\d+)?(?:\s*(?:Z|[+-]\d{2}:?\d{2})(?:\s+[A-Za-z_\/+-]+)?)?$/
+    );
+    const normalized = match ? `${match[1]} ${match[2]}${match[3] || ''}` : val;
+    trimSimpleCache(normalizedDateTimeCache, DATE_TIME_CACHE_LIMIT);
+    normalizedDateTimeCache.set(val, normalized);
+    return normalized;
+};
+
+// --- Helper: Format Value ---
+const normalizeBitHexDisplayText = (val: any, columnType?: string): string | null => {
+    const typeText = String(columnType || '').trim().toLowerCase();
+    if (!/^varbit(?:\s*\(\s*\d+\s*\))?$/.test(typeText)
+        && !/^bit(?:\s+varying)?(?:\s*\(\s*\d+\s*\))?$/.test(typeText)) {
+        return null;
+    }
+    if (typeof val !== 'string') return null;
+    const raw = val.trim();
+    if (!/^0x[0-9a-f]+$/i.test(raw)) return null;
+    try {
+        return BigInt(raw).toString(10);
+    } catch {
+        return null;
+    }
+};
+
+type CellDisplayConnectionLike = TemporalConnectionLike;
+
+const isDateOnlyColumnType = (columnType?: string): boolean => {
+    const normalized = String(columnType || '').trim().toLowerCase();
+    if (!normalized) return false;
+    const base = normalized.split(/[ (]/)[0];
+    return base === 'date' || base === 'newdate';
+};
+
+const isOceanBaseOracleDisplayConnection = (connectionConfig?: CellDisplayConnectionLike): boolean => {
+    if (!connectionConfig) return false;
+    const type = String(connectionConfig.type || '').trim().toLowerCase();
+    const driver = String(connectionConfig.driver || '').trim().toLowerCase();
+    return (type === 'oceanbase' || driver === 'oceanbase')
+        && normalizeOceanBaseProtocol(connectionConfig.oceanBaseProtocol) === 'oracle';
+};
+
+const normalizeOceanBaseOracleDateDisplayText = (
+    val: string,
+    columnType?: string,
+    connectionConfig?: CellDisplayConnectionLike,
+): string | null => {
+    if (!isDateOnlyColumnType(columnType) || !isOceanBaseOracleDisplayConnection(connectionConfig)) {
+        return null;
+    }
+    const trimmed = String(val || '').trim();
+    if (!trimmed) return trimmed;
+    const match = trimmed.match(
+        /^(\d{4}-\d{2}-\d{2})(?:[T ](\d{2}:\d{2}:\d{2})(\.\d+)?(?:\s*(?:Z|[+-]\d{2}:?\d{2})(?:\s+[A-Za-z_\/+-]+)?)?)?$/
+    );
+    if (!match) return null;
+    const [, datePart, timePart, fractionPart] = match;
+    if (!timePart) return datePart;
+    if (timePart === '00:00:00' && (!fractionPart || /^\.0+$/.test(fractionPart))) {
+        return datePart;
+    }
+    return null;
+};
+
+export const formatCellDisplayText = (val: any, columnType?: string, connectionConfig?: CellDisplayConnectionLike): string => {
+    try {
+        if (val === null) return 'NULL';
+        const bitText = normalizeBitHexDisplayText(val, columnType);
+        if (bitText !== null) return bitText;
+        if (typeof val === 'object') {
+            if (!Array.isArray(val) && !isPlainObject(val)) {
+                return String(val);
+            }
+            const cached = objectCellPreviewCache.get(val);
+            if (cached !== undefined) {
+                return cached;
+            }
+            const topLevelSize = Array.isArray(val) ? val.length : Object.keys(val || {}).length;
+            if (topLevelSize > 80) {
+                const summary = Array.isArray(val) ? `[Array(${topLevelSize})]` : `{Object(${topLevelSize})}`;
+                objectCellPreviewCache.set(val, summary);
+                return summary;
+            }
+            try {
+                const nextText = JSON.stringify(val);
+                const previewText = nextText.length > TABLE_CELL_PREVIEW_MAX_CHARS ? `${nextText.slice(0, TABLE_CELL_PREVIEW_MAX_CHARS)}…` : nextText;
+                objectCellPreviewCache.set(val, previewText);
+                return previewText;
+            } catch {
+                return '[Object]';
+            }
+        }
+        if (typeof val === 'string') {
+            const oceanBaseDateOnly = normalizeOceanBaseOracleDateDisplayText(val, columnType, connectionConfig);
+            if (oceanBaseDateOnly !== null) {
+                return oceanBaseDateOnly.length > TABLE_CELL_PREVIEW_MAX_CHARS ? `${oceanBaseDateOnly.slice(0, TABLE_CELL_PREVIEW_MAX_CHARS)}…` : oceanBaseDateOnly;
+            }
+            const normalized = normalizeDateTimeString(val);
+            return normalized.length > TABLE_CELL_PREVIEW_MAX_CHARS ? `${normalized.slice(0, TABLE_CELL_PREVIEW_MAX_CHARS)}…` : normalized;
+        }
+        return String(val);
+    } catch (e) {
+        console.error('formatCellValue error:', e);
+        return '[Error]';
+    }
+};
+
+const formatClipboardCellText = (val: any, columnType?: string, connectionConfig?: CellDisplayConnectionLike): string => {
+    try {
+        if (val === null || val === undefined) return 'NULL';
+        const bitText = normalizeBitHexDisplayText(val, columnType);
+        if (bitText !== null) return bitText;
+        if (typeof val === 'string') {
+            const oceanBaseDateOnly = normalizeOceanBaseOracleDateDisplayText(val, columnType, connectionConfig);
+            if (oceanBaseDateOnly !== null) return oceanBaseDateOnly;
+            return normalizeDateTimeString(val);
+        }
+        if (typeof val === 'object') {
+            try {
+                return JSON.stringify(val);
+            } catch {
+                return String(val);
+            }
+        }
+        return String(val);
+    } catch (e) {
+        console.error('formatClipboardCellText error:', e);
+        return '[Error]';
+    }
+};
+
+const normalizeClipboardTsvCell = (text: string): string => text.replace(/\t/g, ' ').replace(/\r?\n/g, ' ');
+
+const buildClipboardTsv = (
+    rows: Array<Record<string, any>>,
+    columnNames: string[],
+    getColumnType?: (columnName: string) => string | undefined,
+    connectionConfig?: CellDisplayConnectionLike,
+): string => {
+    if (!Array.isArray(rows) || rows.length === 0 || !Array.isArray(columnNames) || columnNames.length === 0) {
+        return '';
+    }
+    const header = columnNames.map(normalizeClipboardTsvCell).join('\t');
+    const lines = rows.map((row) => (
+        columnNames
+            .map((columnName) => normalizeClipboardTsvCell(formatClipboardCellText(row?.[columnName], getColumnType?.(columnName), connectionConfig)))
+            .join('\t')
+    ));
+    return [header, ...lines].join('\n');
+};
+
+const renderHighlightedCellText = (text: string, query: string): React.ReactNode => {
+    const ranges = findDataGridTextRanges(text, query);
+    if (ranges.length === 0) return text;
+
+    const nodes: React.ReactNode[] = [];
+    let cursor = 0;
+    ranges.forEach((range, index) => {
+        if (range.start > cursor) {
+            nodes.push(text.slice(cursor, range.start));
+        }
+        nodes.push(
+            <mark key={`${range.start}-${range.end}-${index}`} className="data-grid-find-highlight">
+                {text.slice(range.start, range.end)}
+            </mark>,
+        );
+        cursor = range.end;
+    });
+    if (cursor < text.length) {
+        nodes.push(text.slice(cursor));
+    }
+    return <>{nodes}</>;
+};
+
+const renderCellDisplayValue = (val: any, query: string, columnType?: string, connectionConfig?: CellDisplayConnectionLike): React.ReactNode => {
+    const text = formatCellDisplayText(val, columnType, connectionConfig);
+    const content = renderHighlightedCellText(text, query);
+    if (val === null) return <span style={{ color: '#ccc' }}>{content}</span>;
+    return content;
+};
+
+const formatCellValue = (val: any) => renderCellDisplayValue(val, '');
+
+export const attachDataGridVirtualEditRenderVersion = <T extends Item>(
+    rows: T[],
+    editingCell: VirtualEditingCellState | null,
+): T[] => {
+    if (!editingCell) return rows;
+
+    return rows.map((row) => {
+        const rowKey = row?.[GONAVI_ROW_KEY];
+        if (rowKey === undefined || rowKey === null || String(rowKey) !== editingCell.rowKey) {
+            return row;
+        }
+        const nextRow = { ...(row as object) } as T;
+        Object.defineProperty(nextRow, DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION, {
+            value: `${editingCell.rowKey}${CELL_KEY_SEP}${editingCell.dataIndex}`,
+            enumerable: true,
+        });
+        return nextRow;
+    });
+};
+
+export const attachDataGridDisplayRenderVersion = <T extends Item>(
+    rows: T[],
+    renderVersion: string,
+): T[] => {
+    if (!renderVersion) return rows;
+
+    return rows.map((row) => {
+        if (!row || typeof row !== 'object') return row;
+        const nextRow = { ...(row as object) } as T;
+        Object.defineProperty(nextRow, DATA_GRID_DISPLAY_RENDER_VERSION, {
+            value: renderVersion,
+            enumerable: true,
+        });
+        return nextRow;
+    });
+};
+
+export const hasDataGridDisplayRenderVersionChanged = (nextRecord: unknown, previousRecord: unknown): boolean => {
+    const nextVersion = nextRecord && typeof nextRecord === 'object'
+        ? (nextRecord as Record<symbol, unknown>)[DATA_GRID_DISPLAY_RENDER_VERSION]
+        : undefined;
+    const previousVersion = previousRecord && typeof previousRecord === 'object'
+        ? (previousRecord as Record<symbol, unknown>)[DATA_GRID_DISPLAY_RENDER_VERSION]
+        : undefined;
+    return nextVersion !== previousVersion;
+};
+
+export const hasDataGridVirtualEditRenderVersionChanged = (nextRecord: unknown, previousRecord: unknown): boolean => {
+    const nextVersion = nextRecord && typeof nextRecord === 'object'
+        ? (nextRecord as Record<symbol, unknown>)[DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION]
+        : undefined;
+    const previousVersion = previousRecord && typeof previousRecord === 'object'
+        ? (previousRecord as Record<symbol, unknown>)[DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION]
+        : undefined;
+    return nextVersion !== previousVersion;
+};
+
+const toEditableText = (val: any): string => {
+    if (val === null || val === undefined) return '';
+    if (typeof val === 'string') return val;
+    try {
+        return JSON.stringify(val, null, 2);
+    } catch {
+        return String(val);
+    }
+};
+
+const toFormText = (val: any): string => {
+    if (val === null || val === undefined) return '';
+    if (typeof val === 'string') return normalizeDateTimeString(val);
+    return toEditableText(val);
+};
+
+// 用于变更比较：NULL 与 undefined 视为同类空值；与空字符串严格区分。
+const isCellValueEqualForDiff = (left: any, right: any): boolean => {
+    if (left === right) return true;
+    const leftNullish = left === null || left === undefined;
+    const rightNullish = right === null || right === undefined;
+    if (leftNullish || rightNullish) return leftNullish && rightNullish;
+    return toFormText(left) === toFormText(right);
+};
+
+// 渲染阶段轻量比较：避免对象值在 shouldCellUpdate 中反复深度序列化导致卡顿。
+const isCellValueEqualForRender = (left: any, right: any): boolean => {
+    if (left === right) return true;
+    const leftNullish = left === null || left === undefined;
+    const rightNullish = right === null || right === undefined;
+    if (leftNullish || rightNullish) return leftNullish && rightNullish;
+
+    const leftType = typeof left;
+    const rightType = typeof right;
+    if (leftType === 'object' || rightType === 'object') {
+        // 对象仅按引用比较；真正的值差异在提交保存时再做严格比对。
+        return false;
+    }
+
+    if (leftType === 'string' || rightType === 'string') {
+        return normalizeDateTimeString(String(left)) === normalizeDateTimeString(String(right));
+    }
+    return left === right;
+};
+
+const INLINE_EDIT_MAX_CHARS = 2000;
+
+const shouldOpenModalEditor = (val: any): boolean => {
+    if (val === null || val === undefined) return false;
+    if (typeof val === 'string') {
+        if (val.length > INLINE_EDIT_MAX_CHARS || val.includes('\n')) return true;
+        const trimmed = val.trimStart();
+        return trimmed.startsWith('{') || trimmed.startsWith('[');
+    }
+    return typeof val === 'object';
+};
+
+const getCellFieldName = (record: Item, dataIndex: string) => {
+    const rowKey = record?.[GONAVI_ROW_KEY];
+    if (rowKey === undefined || rowKey === null) return dataIndex;
+    return [String(rowKey), dataIndex];
+};
+
+const setCellFieldValue = (form: any, fieldName: string | (string | number)[], value: any) => {
+    if (!form) return;
+    if (Array.isArray(fieldName)) {
+        const [rowKey, colKey] = fieldName;
+        form.setFieldsValue({ [rowKey]: { [colKey]: value } });
+        return;
+    }
+    form.setFieldsValue({ [fieldName]: value });
+};
+
+const looksLikeJsonText = (text: string): boolean => {
+    const raw = (text || '').trim();
+    if (!raw) return false;
+    const first = raw[0];
+    const last = raw[raw.length - 1];
+    return (first === '{' && last === '}') || (first === '[' && last === ']');
+};
+
+const isPlainObject = (value: any): value is Record<string, any> => {
+    return Object.prototype.toString.call(value) === '[object Object]';
+};
+
+const normalizeValueForJsonView = (value: any): any => {
+    if (value === null || value === undefined) return value;
+
+    if (typeof value === 'string') {
+        const normalizedText = normalizeDateTimeString(value);
+        if (!looksLikeJsonText(normalizedText)) return normalizedText;
+        try {
+            return normalizeValueForJsonView(JSON.parse(normalizedText));
+        } catch {
+            return normalizedText;
+        }
+    }
+
+    if (Array.isArray(value)) {
+        return value.map((item) => normalizeValueForJsonView(item));
+    }
+
+    if (isPlainObject(value)) {
+        const next: Record<string, any> = {};
+        Object.entries(value).forEach(([key, val]) => {
+            next[key] = normalizeValueForJsonView(val);
+        });
+        return next;
+    }
+
+    return value;
+};
+
+const isJsonViewValueEqual = (left: any, right: any): boolean => {
+    const leftNormalized = normalizeValueForJsonView(left);
+    const rightNormalized = normalizeValueForJsonView(right);
+
+    if (leftNormalized === rightNormalized) return true;
+    if (leftNormalized === null || rightNormalized === null) return leftNormalized === rightNormalized;
+    if (leftNormalized === undefined || rightNormalized === undefined) return leftNormalized === rightNormalized;
+
+    if (typeof leftNormalized !== 'object' && typeof rightNormalized !== 'object') {
+        return String(leftNormalized) === String(rightNormalized);
+    }
+
+    try {
+        return JSON.stringify(leftNormalized) === JSON.stringify(rightNormalized);
+    } catch {
+        return false;
+    }
+};
+
+const coerceJsonEditorValueForStorage = (currentValue: any, editedValue: any): any => {
+    if (typeof currentValue === 'string') {
+        const raw = currentValue.trim();
+        const parsedCurrent = looksLikeJsonText(raw);
+        if (parsedCurrent && (isPlainObject(editedValue) || Array.isArray(editedValue))) {
+            return JSON.stringify(editedValue);
+        }
+    }
+    return editedValue;
+};
+
+// --- Resizable Header (Native Implementation) ---
+const ResizableTitle = React.forwardRef<HTMLTableCellElement, any>((props, ref) => {
+  const { onResizeStart, onResizeAutoFit, width, ...restProps } = props;
+
+  const nextStyle = { ...(restProps.style || {}) } as React.CSSProperties;
+  if (width) {
+    nextStyle.width = width;
+  }
+
+  // 注意：virtual table 模式下，rc-table 会依赖 header cell 的 width 样式来渲染选择列。
+  // 若这里丢失 width，可能导致左上角“全选”checkbox 不显示。
+  if (!width || typeof onResizeStart !== 'function') {
+    return <th ref={ref} {...restProps} style={nextStyle} />;
+  }
+
+  return (
+    <th ref={ref} {...restProps} style={{ ...nextStyle, position: 'relative' }}>
+      {restProps.children}
+      <span
+        className="react-resizable-handle"
+        onMouseDown={(e) => {
+            e.stopPropagation();
+            // Pass the header element reference implicitly via event target
+            onResizeStart(e);
+        }}
+        onDoubleClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (typeof onResizeAutoFit === 'function') {
+                onResizeAutoFit(e);
+            }
+        }}
+        onPointerDown={(e) => {
+            // 阻止 pointerdown 冒泡到 @dnd-kit 的 PointerSensor，
+            // 避免调整列宽时意外触发列拖拽排序
+            e.stopPropagation();
+        }}
+        onClick={(e) => e.stopPropagation()}
+        title={t('data_grid.column.resize_tooltip')}
+        style={{
+            position: 'absolute',
+            right: 0, // Align to right edge
+            bottom: 0,
+            top: 0,
+            width: 10,
+            cursor: 'col-resize',
+            zIndex: 10,
+            touchAction: 'none'
+        }}
+      />
+    </th>
+  );
+});
+
+// --- Sortable Header Cell ---
+interface SortableHeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    id?: string;
+}
+
+// --- Sortable Header Cell ---
+interface SortableHeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    id?: string;
+}
+
+// 静态 CSS 移到组件外，强制去除 th 内边距并确保指针穿透
+const sortableHeaderStaticStyles = `
+    .gonavi-sortable-header-cell {
+        padding: 0 !important;
+        overflow: hidden;
+    }
+    .gonavi-sortable-header-cell[data-cursor-grabbing="true"],
+    .gonavi-sortable-header-cell[data-cursor-grabbing="true"] *,
+    .gonavi-sortable-header-cell.is-dragging,
+    .gonavi-sortable-header-cell.is-dragging * {
+        cursor: grabbing !important;
+    }
+    .sortable-header-cell-drag-handle {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        min-height: var(--gonavi-header-min-height, 40px);
+        padding: 0 10px;
+        user-select: none;
+        cursor: inherit;
+        overflow: hidden;
+    }
+`;
+
+const SortableHeaderCell: React.FC<SortableHeaderCellProps> = React.memo((props) => {
+    const { id, children, style: propStyle, className: propClassName, ...restProps } = props;
+    const [isPressed, setIsPressed] = useState(false);
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({ id: id || '' });
+
+    const style: React.CSSProperties = {
+        ...propStyle,
+        transform: CSS.Transform.toString(transform),
+        transition,
+        ...(isDragging ? { 
+            position: 'relative', 
+            zIndex: 9999, 
+            opacity: 0.6, 
+            backgroundColor: 'rgba(24, 144, 255, 0.15)',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
+        } : {}),
+        touchAction: 'none',
+        willChange: 'transform',
+        // 核心修复：将指针直接绑定到 th 级别，并由 isPressed 控制
+        cursor: (isDragging || isPressed) ? 'grabbing' : 'pointer',
+    };
+
+    useEffect(() => {
+        const handleGlobalMouseUp = () => setIsPressed(false);
+        window.addEventListener('mouseup', handleGlobalMouseUp);
+        return () => window.removeEventListener('mouseup', handleGlobalMouseUp);
+    }, []);
+
+    if (!id || id === 'GONAVI_SELECTION_COLUMN') {
+        return <ResizableTitle {...restProps} style={{ ...propStyle, ...style }}>{children}</ResizableTitle>;
+    }
+
+    return (
+        <ResizableTitle 
+            ref={setNodeRef} 
+            style={style} 
+            className={`${propClassName || ''} ${isDragging ? 'is-dragging' : ''}`}
+            data-cursor-grabbing={isDragging || isPressed}
+            {...restProps} 
+            {...attributes} 
+            {...listeners}
+            onPointerDown={(e: any) => {
+                setIsPressed(true);
+                if (listeners?.onPointerDown) listeners.onPointerDown(e);
+            }}
+        >
+            <style>{sortableHeaderStaticStyles}</style>
+            <div className="sortable-header-cell-drag-handle" title={t('data_grid.column.drag_tooltip')}>
+                <div style={{ flex: 1, display: 'flex', alignItems: 'center', minWidth: 0, cursor: 'inherit' }}>
+                    {children}
+                </div>
+            </div>
+        </ResizableTitle>
+    );
+});
+
+// --- Contexts ---
+const EditableContext = React.createContext<any>(null);
+const CellContextMenuContext = React.createContext<{
+    showMenu: (e: React.MouseEvent, record: Item, dataIndex: string, title: React.ReactNode) => void;
+    handleBatchFillToSelected: (record: Item, dataIndex: string) => void;
+} | null>(null);
+const DataContext = React.createContext<{
+    selectedRowKeysRef: React.MutableRefObject<React.Key[]>;
+    displayDataRef: React.MutableRefObject<any[]>;
+    handleCopyInsert: (r: any) => void;
+    handleCopyUpdate: (r: any) => void;
+    handleCopyDelete: (r: any) => void;
+    handleCopyJson: (r: any) => void;
+    handleCopyCsv: (r: any) => void;
+    handleExportSelected: (options: DataExportFileOptions, r: any) => Promise<void>;
+    copyToClipboard: (t: string) => void;
+    tableName?: string;
+    enableRowContextMenu: boolean;
+    supportsCopyInsert: boolean;
+} | null>(null);
+
+interface Item {
+  [key: string]: any;
+}
+
+interface EditableCellProps {
+  title: React.ReactNode;
+  editable: boolean;
+  children: React.ReactNode;
+  dataIndex: string;
+  record: Item;
+  handleSave: (record: Item) => void;
+  focusCell?: (record: Item, dataIndex: string, title: React.ReactNode) => void;
+  columnType?: string;
+  dbType?: string;
+  connectionConfig?: CellDisplayConnectionLike;
+  inputCellPadding?: React.CSSProperties;
+  as?: any;
+  modifiedColumns?: Record<string, Set<string>>;
+  rowKeyStr?: (k: React.Key) => string;
+  deletedRowKeys?: Set<string>;
+  darkMode?: boolean;
+  [key: string]: any;
+}
+
+// 模块级变量：绕过 React 渲染链条，在事件处理器中直接读取最新删除状态。
+// EditableCell 内部通过 React.memo 包裹，且 Ant Design rc-table 有多层 memo 缓存，
+// 仅靠 props 传递 deletedRowKeys 可能因缓存而不触发重渲染。
+let globalDeletedRowKeys: Set<string> = new Set();
+const setGlobalDeletedRowKeys = (next: Set<string>) => {
+  globalDeletedRowKeys = next;
+};
+
+const resolveEditableCellRowKey = (
+  record: Item | undefined,
+  rowKeyStr?: (k: React.Key) => string,
+): string | null => {
+  const rowKey = record?.[GONAVI_ROW_KEY];
+  if (rowKey === undefined || rowKey === null || typeof rowKeyStr !== 'function') {
+      return null;
+  }
+  return rowKeyStr(rowKey);
+};
+
+const isEditableCellDeleted = (
+  record: Item | undefined,
+  deletedRowKeys?: Set<string>,
+  rowKeyStr?: (k: React.Key) => string,
+): boolean => {
+  const rowKey = resolveEditableCellRowKey(record, rowKeyStr);
+  return rowKey ? !!deletedRowKeys?.has(rowKey) : false;
+};
+
+const isEditableCellModified = (
+  record: Item | undefined,
+  dataIndex: string,
+  modifiedColumns?: Record<string, Set<string>>,
+  rowKeyStr?: (k: React.Key) => string,
+): boolean => {
+  const rowKey = resolveEditableCellRowKey(record, rowKeyStr);
+  return rowKey ? !!modifiedColumns?.[rowKey]?.has(dataIndex) : false;
+};
+
+const areEditableCellPropsEqual = (prevProps: EditableCellProps, nextProps: EditableCellProps): boolean => {
+  if (prevProps.editable !== nextProps.editable) return false;
+  if (prevProps.dataIndex !== nextProps.dataIndex) return false;
+  if (prevProps.title !== nextProps.title) return false;
+  if (prevProps.columnType !== nextProps.columnType) return false;
+  if (prevProps.dbType !== nextProps.dbType) return false;
+  if ((prevProps.connectionConfig?.type ?? null) !== (nextProps.connectionConfig?.type ?? null)) return false;
+  if ((prevProps.connectionConfig?.driver ?? null) !== (nextProps.connectionConfig?.driver ?? null)) return false;
+  if ((prevProps.connectionConfig?.oceanBaseProtocol ?? null) !== (nextProps.connectionConfig?.oceanBaseProtocol ?? null)) return false;
+  if (prevProps.darkMode !== nextProps.darkMode) return false;
+  if (prevProps.as !== nextProps.as) return false;
+  if (prevProps.handleSave !== nextProps.handleSave) return false;
+  if (prevProps.focusCell !== nextProps.focusCell) return false;
+  if ((prevProps.inputCellPadding?.padding ?? null) !== (nextProps.inputCellPadding?.padding ?? null)) return false;
+  if (prevProps.style !== nextProps.style) return false;
+
+  const prevRecord = prevProps.record;
+  const nextRecord = nextProps.record;
+  if (resolveEditableCellRowKey(prevRecord, prevProps.rowKeyStr) !== resolveEditableCellRowKey(nextRecord, nextProps.rowKeyStr)) {
+      return false;
+  }
+  if (hasDataGridFindRenderVersionChanged(nextRecord, prevRecord)) {
+      return false;
+  }
+  if (!isCellValueEqualForRender(prevRecord?.[prevProps.dataIndex], nextRecord?.[nextProps.dataIndex])) {
+      return false;
+  }
+  if (isEditableCellDeleted(prevRecord, prevProps.deletedRowKeys, prevProps.rowKeyStr) !== isEditableCellDeleted(nextRecord, nextProps.deletedRowKeys, nextProps.rowKeyStr)) {
+      return false;
+  }
+  if (isEditableCellModified(prevRecord, prevProps.dataIndex, prevProps.modifiedColumns, prevProps.rowKeyStr) !== isEditableCellModified(nextRecord, nextProps.dataIndex, nextProps.modifiedColumns, nextProps.rowKeyStr)) {
+      return false;
+  }
+
+  return true;
+};
+
+const EditableCell: React.FC<EditableCellProps> = React.memo(({
+  title,
+  editable,
+  children,
+  dataIndex,
+  record,
+  handleSave,
+  focusCell,
+  columnType,
+  dbType,
+  connectionConfig,
+  inputCellPadding,
+  as: Component = 'td',
+  modifiedColumns,
+  rowKeyStr,
+  deletedRowKeys,
+  darkMode,
+  ...restProps
+}) => {
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef<any>(null);
+  const cellRef = useRef<HTMLElement>(null);
+  const pickerOpenRef = useRef(false);
+  const scrollLockRef = useRef<{ el: HTMLElement; handler: (e: WheelEvent) => void } | null>(null);
+  const form = useContext(EditableContext);
+  const cellContextMenuContext = useContext(CellContextMenuContext);
+  const i18nLanguage = useDataGridI18nLanguage();
+  const dateTimePickerNowLabel = t('data_grid.datetime_picker.now', undefined, i18nLanguage);
+
+  /** DatePicker 面板打开时锁定表格滚动，关闭时恢复 */
+  const lockTableScroll = useCallback((lock: boolean) => {
+      if (lock) {
+          // 查找虚拟滚动容器或常规滚动容器
+          const tableWrapper = cellRef.current?.closest?.('.ant-table-wrapper') as HTMLElement | null;
+          if (tableWrapper) {
+              const handler = (e: WheelEvent) => { e.preventDefault(); e.stopPropagation(); };
+              tableWrapper.addEventListener('wheel', handler, { capture: true, passive: false });
+              scrollLockRef.current = { el: tableWrapper, handler };
+          }
+      } else if (scrollLockRef.current) {
+          const { el, handler } = scrollLockRef.current;
+          el.removeEventListener('wheel', handler, { capture: true } as any);
+          scrollLockRef.current = null;
+      }
+  }, []);
+
+  useEffect(() => {
+    if (editing) {
+      // 每次进入编辑时强制设置表单值（覆盖 form store 中可能残留的旧值）
+      const raw = record[dataIndex];
+      const fieldName = getCellFieldName(record, dataIndex);
+      if (isDateTimeField) {
+        const dayjsVal = parseToDayjs(raw, pickerType);
+        setCellFieldValue(form, fieldName, dayjsVal);
+      } else {
+        const initialValue = typeof raw === 'string' ? normalizeDateTimeString(raw) : raw;
+        setCellFieldValue(form, fieldName, initialValue);
+      }
+      inputRef.current?.focus();
+    }
+  }, [editing]);
+
+  const toggleEdit = () => {
+    setEditing(!editing);
+  };
+
+  const save = async (pickerValue?: dayjs.Dayjs | null) => {
+    try {
+      if (!form || !editing) return;
+      const fieldName = getCellFieldName(record, dataIndex);
+      await form.validateFields([fieldName]);
+      let nextValue = form.getFieldValue(fieldName);
+      if (isDateTimeField) {
+        nextValue = resolveTemporalEditorSaveValue(nextValue, pickerValue, pickerType);
+      }
+      toggleEdit();
+      // 仅当值发生变化时才标记为修改，避免“双击-失焦”导致整行进入 modified 状态（蓝色高亮不清除）。
+      if (!isCellValueEqualForDiff(record?.[dataIndex], nextValue)) {
+        handleSave({ ...record, [dataIndex]: nextValue });
+      }
+      // 保存后移除焦点
+      if (inputRef.current) {
+        inputRef.current.blur();
+      }
+    } catch (errInfo) {
+      console.log('Save failed:', errInfo);
+      // 日期时间类型保存失败时兜底退出编辑，避免 DatePicker 卡在编辑态
+      if (isDateTimeField && editing) setEditing(false);
+    }
+  };
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    if (!cellContextMenuContext) return;
+    e.preventDefault();
+    e.stopPropagation(); // 阻止冒泡到行级菜单
+    cellContextMenuContext.showMenu(e, record, dataIndex, title);
+  };
+
+  let childNode = children;
+
+  const pickerType = getTemporalPickerType(columnType, dbType, connectionConfig);
+  const isDateTimeField = !!pickerType && !(/^0{4}-0{2}-0{2}/.test(String(record?.[dataIndex] || '')));
+
+  const isRowDeleted = deletedRowKeys && rowKeyStr && record?.[GONAVI_ROW_KEY] !== undefined
+    ? deletedRowKeys.has(rowKeyStr(record[GONAVI_ROW_KEY]))
+    : false;
+
+  const isModified = !editing && modifiedColumns && rowKeyStr && record?.[GONAVI_ROW_KEY] !== undefined
+    ? modifiedColumns[rowKeyStr(record[GONAVI_ROW_KEY])]?.has(dataIndex)
+    : false;
+
+  const modifiedStyle: React.CSSProperties | undefined = isModified
+    ? { backgroundColor: darkMode ? 'rgba(255, 214, 102, 0.16)' : '#FFF3B0' }
+    : undefined;
+
+  if (editable) {
+    childNode = editing ? (
+      <Form.Item className="data-grid-inline-editor-form-item" style={INLINE_EDIT_FORM_ITEM_STYLE} name={getCellFieldName(record, dataIndex)}>
+        {isDateTimeField ? (
+          pickerType === 'time' ? (
+            <TimePicker
+              ref={inputRef}
+              style={{ width: '100%' }}
+              format={TEMPORAL_FORMATS[pickerType]}
+              onChange={(value) => setTimeout(() => { void save(value); }, 0)}
+              onOpenChange={lockTableScroll}
+              onBlur={() => setTimeout(() => { void save(); }, 0)}
+              needConfirm={false}
+            />
+          ) : pickerType === 'datetime' ? (
+            <DatePicker
+              ref={inputRef}
+              style={{ width: '100%' }}
+              showTime
+              showNow={false}
+              format={getTemporalPickerFormat(pickerType)}
+              renderExtraFooter={() => (
+                <a
+                  style={{ padding: '0 2px' }}
+                  onClick={() => {
+                    // 自定义"此刻"：仅将当前时间填入表单字段，面板保持打开。
+                    // 用户需点击"确定"才真正保存，替代内置 showNow 的自动提交行为。
+                    const fieldName = getCellFieldName(record, dataIndex);
+                    setCellFieldValue(form, fieldName, dayjs());
+                  }}
+                >{dateTimePickerNowLabel}</a>
+              )}
+              onOk={(value) => setTimeout(() => { void save((value as dayjs.Dayjs | null | undefined) ?? undefined); }, 0)}
+              onOpenChange={(open) => {
+                pickerOpenRef.current = open;
+                lockTableScroll(open);
+                // 面板关闭（点击外部）时退出编辑，不保存；仅"确定"按钮（onOk）触发保存
+                if (!open) setTimeout(() => { if (editing) toggleEdit(); }, 0);
+              }}
+              onBlur={() => {
+                // 兜底：面板未打开或已关闭时，点击外部通过 blur 退出编辑。
+                // 延迟检查面板状态，避免点击自定义"此刻"按钮时误退出（此时面板仍打开）。
+                setTimeout(() => { if (editing && !pickerOpenRef.current) setEditing(false); }, 150);
+              }}
+              needConfirm
+            />
+          ) : (
+            <DatePicker
+              ref={inputRef}
+              style={{ width: '100%' }}
+              format={TEMPORAL_FORMATS[pickerType]}
+              picker={pickerType as any}
+              onChange={(value) => setTimeout(() => { void save(value); }, 0)}
+              onOpenChange={lockTableScroll}
+              onBlur={() => setTimeout(() => { void save(); }, 0)}
+              needConfirm={false}
+            />
+          )
+        ) : (
+          <Input
+            {...noAutoCapInputProps}
+            ref={inputRef}
+            className="data-grid-inline-editor-input"
+            style={{ width: '100%', ...inputCellPadding }}
+            onPressEnter={() => { void save(); }}
+            onBlur={() => { void save(); }}
+            onFocus={(e) => {
+              try {
+                (e.target as HTMLInputElement)?.select?.();
+              } catch {
+                // ignore
+              }
+            }}
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+              try {
+                (e.target as HTMLInputElement)?.select?.();
+              } catch {
+                // ignore
+              }
+            }}
+          />
+        )}
+      </Form.Item>
+    ) : (
+      <div
+        className="editable-cell-value-wrap"
+        style={modifiedStyle}
+        onContextMenu={handleContextMenu}
+      >
+        {children}
+      </div>
+    );
+  } else if (cellContextMenuContext) {
+    // 非编辑模式（只读查询结果）也绑定右键菜单，支持复制为 INSERT/JSON/CSV 等操作
+    childNode = (
+      <div onContextMenu={handleContextMenu} style={modifiedStyle ? { ...READONLY_CELL_WRAP_STYLE, ...modifiedStyle } : READONLY_CELL_WRAP_STYLE}>
+        {children}
+      </div>
+    );
+  } else if (isModified) {
+    childNode = (
+      <div style={modifiedStyle}>
+        {children}
+      </div>
+    );
+  }
+
+  const handleDoubleClick = () => {
+      if (!editable) return;
+      if (isRowDeleted) return;
+      // 模块级检查：绕过 React 渲染链条，确保即使组件因 memo 缓存未重渲染也能拿到最新状态
+      if (record?.[GONAVI_ROW_KEY] !== undefined
+          && rowKeyStr
+          && globalDeletedRowKeys.has(rowKeyStr(record[GONAVI_ROW_KEY]))) return;
+      // 已在编辑态时再次双击不应退出编辑；双击应支持在 Input 内进行全选。
+      if (editing) return;
+      const raw = record?.[dataIndex];
+      if (focusCell && shouldOpenModalEditor(raw)) {
+          focusCell(record, dataIndex, title);
+          return;
+      }
+      toggleEdit();
+  };
+
+  return (
+      <Component
+          ref={cellRef}
+          {...restProps}
+          data-row-key={record ? String(record?.[GONAVI_ROW_KEY]) : undefined}
+          data-col-name={dataIndex || undefined}
+          onDoubleClick={editable ? handleDoubleClick : restProps?.onDoubleClick}
+      >
+          {childNode}
+      </Component>
+  );
+}, areEditableCellPropsEqual);
+
+const ContextMenuRow = React.memo(({ children, record, ...props }: any) => {
+    const context = useContext(DataContext);
+    
+    if (!record || !context) return <tr {...props}>{children}</tr>;
+
+    const {
+        selectedRowKeysRef,
+        displayDataRef,
+        handleCopyInsert,
+        handleCopyUpdate,
+        handleCopyDelete,
+        handleCopyJson,
+        handleCopyCsv,
+        handleExportSelected,
+        copyToClipboard,
+        enableRowContextMenu,
+        supportsCopyInsert,
+    } = context;
+
+    if (!enableRowContextMenu) {
+        return <tr {...props}>{children}</tr>;
+    }
+
+    const getTargets = () => {
+        const keys = selectedRowKeysRef.current;
+        const recordKey = record?.[GONAVI_ROW_KEY];
+        if (recordKey !== undefined && keys.includes(recordKey)) {
+            return displayDataRef.current.filter(d => keys.includes(d?.[GONAVI_ROW_KEY]));
+        }
+        return [record];
+    };
+
+    const menuItems: MenuProps['items'] = [
+        ...(supportsCopyInsert ? [{
+            key: 'insert',
+            label: t('data_grid.context_menu.copy_as_insert'),
+            icon: <ConsoleSqlOutlined />,
+            onClick: () => handleCopyInsert(record),
+        }, {
+            key: 'update',
+            label: t('data_grid.context_menu.copy_as_update'),
+            icon: <ConsoleSqlOutlined />,
+            onClick: () => handleCopyUpdate(record),
+        }, {
+            key: 'delete',
+            label: t('data_grid.context_menu.copy_as_delete'),
+            icon: <ConsoleSqlOutlined />,
+            onClick: () => handleCopyDelete(record),
+        }] : []),
+        { key: 'json', label: t('data_grid.context_menu.copy_as_json'), icon: <FileTextOutlined />, onClick: () => handleCopyJson(record) },
+        { key: 'csv', label: t('data_grid.context_menu.copy_as_csv'), icon: <FileTextOutlined />, onClick: () => handleCopyCsv(record) },
+        { key: 'copy', label: t('data_grid.context_menu.copy_as_markdown'), icon: <CopyOutlined />, onClick: () => {
+            const records = getTargets();
+            const orderedCols = displayDataRef.current.length > 0
+                ? Object.keys(displayDataRef.current[0]).filter(c => c !== GONAVI_ROW_KEY)
+                : [];
+            const header = `| ${orderedCols.join(' | ')} |`;
+            const separator = `| ${orderedCols.map(() => '---').join(' | ')} |`;
+            const rows = records.map((r: any) => {
+                const values = orderedCols.map(c => {
+                    const v = r[c];
+                    if (v === null || v === undefined) return 'NULL';
+                    return String(v).replace(/\|/g, '\\|').replace(/\n/g, ' ');
+                });
+                return `| ${values.join(' | ')} |`;
+            });
+            copyToClipboard([header, separator, ...rows].join('\n'));
+        } },
+        { type: 'divider' },
+        {
+            key: 'export-selected',
+            label: t('data_grid.context_menu.export_selected'),
+            icon: <ExportOutlined />,
+            children: [
+                { key: 'exp-csv', label: 'CSV', onClick: () => handleExportSelected({ format: 'csv' }, record).catch(console.error) },
+                { key: 'exp-xlsx', label: 'Excel', onClick: () => handleExportSelected({ format: 'xlsx' }, record).catch(console.error) },
+                { key: 'exp-json', label: 'JSON', onClick: () => handleExportSelected({ format: 'json' }, record).catch(console.error) },
+                { key: 'exp-md', label: 'Markdown', onClick: () => handleExportSelected({ format: 'md' }, record).catch(console.error) },
+                { key: 'exp-html', label: 'HTML', onClick: () => handleExportSelected({ format: 'html' }, record).catch(console.error) },
+            ]
+        }
+    ];
+
+    return (
+        <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']} getPopupContainer={() => document.body} autoAdjustOverflow>
+            <tr {...props}>{children}</tr>
+        </Dropdown>
+    );
+});
+
+interface DataGridProps {
+    data: any[];
+    columnNames: string[];
+    loading: boolean;
+    tableName?: string;
+    objectType?: 'table' | 'view' | 'materialized-view';
+    exportScope?: 'table' | 'queryResult';
+    resultSql?: string;
+    resultExportAllSql?: string;
+    dbName?: string;
+    connectionId?: string;
+    pkColumns?: string[];
+    editLocator?: EditRowLocator;
+    readOnly?: boolean;
+    showRowNumberColumn?: boolean;
+    onReload?: () => void;
+    onSort?: (field: string, order: string) => void;
+    onPageChange?: (page: number, size: number) => void;
+    pagination?: {
+        current: number,
+        pageSize: number,
+        total: number,
+        totalKnown?: boolean,
+        totalApprox?: boolean,
+        approximateTotal?: number,
+        totalCountLoading?: boolean,
+        totalCountCancelled?: boolean,
+    };
+    onRequestTotalCount?: () => void;
+    onCancelTotalCount?: () => void;
+    sortInfoExternal?: Array<{ columnKey: string, order: string, enabled?: boolean }>;
+    // Filtering
+    showFilter?: boolean;
+    onToggleFilter?: () => void;
+    exportSqlWithFilter?: string;
+    onApplyFilter?: (conditions: GridFilterCondition[]) => void;
+    appliedFilterConditions?: FilterCondition[];
+    quickWhereCondition?: string;
+    onApplyQuickWhereCondition?: (condition: string) => void;
+    scrollSnapshot?: { top: number; left: number };
+    onScrollSnapshotChange?: (snapshot: { top: number; left: number }) => void;
+    toolbarExtraActions?: React.ReactNode;
+}
+
+type GridFilterCondition = FilterCondition & {
+    id: number;
+    column: string;
+    op: string;
+    value: string;
+    value2?: string;
+};
+
+type GridViewMode = 'table' | 'json' | 'text' | 'fields' | 'ddl' | 'er';
+type DdlViewLayoutMode = 'bottom' | 'side';
+type DataGridExportScope = 'selected' | 'page' | 'all' | 'filteredAll';
+type VirtualEditingCellState = {
+    rowKey: string;
+    dataIndex: string;
+    title: React.ReactNode;
+    columnType?: string;
+};
+
+type ColumnMeta = {
+    type: string;
+    comment: string;
+};
+
+const buildColumnMetaMap = (columns: ColumnDefinition[]): Record<string, ColumnMeta> => {
+    const nextMap: Record<string, ColumnMeta> = {};
+    (columns || []).forEach((column: any) => {
+        const name = getColumnDefinitionName(column);
+        if (!name) return;
+        nextMap[name] = {
+            type: getColumnDefinitionType(column),
+            comment: getColumnDefinitionComment(column),
+        };
+    });
+    return nextMap;
+};
+
+const hasUsableColumnMeta = (metaMap: Record<string, ColumnMeta>): boolean => (
+    Object.values(metaMap || {}).some((meta) => {
+        const type = String(meta?.type || '').trim();
+        const comment = String(meta?.comment || '').trim();
+        return type.length > 0 || comment.length > 0;
+    })
+);
+
+type ForeignKeyTarget = {
+    columnName: string;
+    refTableName: string;
+    refColumnName: string;
+    constraintName: string;
+};
+
+type VirtualTableScrollReference = TableReference & {
+    scrollTo: (config: { left?: number; top?: number; index?: number; key?: React.Key }) => void;
+};
+
+const EXACT_GRID_FILTER_OPERATOR = '=';
+const CONTAINS_GRID_FILTER_OPERATOR = 'CONTAINS';
+const FILTER_FIELD_SELECT_STYLE: React.CSSProperties = {
+    width: 320,
+    flex: '0 1 320px',
+    minWidth: 260,
+    maxWidth: 'min(460px, 100%)',
+};
+const FILTER_FIELD_POPUP_WIDTH = 520;
+const FILTER_FIELD_OPTION_STYLE: React.CSSProperties = {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const STRING_LIKE_GRID_FILTER_TYPES = new Set([
+    'bpchar',
+    'char',
+    'character',
+    'character varying',
+    'citext',
+    'clob',
+    'fixedstring',
+    'long nvarchar',
+    'long varchar',
+    'longtext',
+    'mediumtext',
+    'nchar',
+    'nclob',
+    'ntext',
+    'nvarchar',
+    'nvarchar2',
+    'string',
+    'text',
+    'tinytext',
+    'varchar',
+    'varchar2',
+]);
+
+const normalizeGridFilterColumnType = (columnType: unknown): string => {
+    let normalized = String(columnType ?? '').trim().toLowerCase().replace(/\s+/g, ' ');
+    for (let i = 0; i < 4; i += 1) {
+        const wrapped = normalized.match(/^(?:nullable|lowcardinality)\((.+)\)$/);
+        if (!wrapped) break;
+        normalized = wrapped[1].trim().replace(/\s+/g, ' ');
+    }
+    return normalized;
+};
+
+export const isStringLikeGridFilterColumnType = (columnType: unknown): boolean => {
+    const normalized = normalizeGridFilterColumnType(columnType);
+    if (!normalized) return false;
+    const baseType = normalized.replace(/\(.*/, '').trim();
+    return STRING_LIKE_GRID_FILTER_TYPES.has(baseType);
+};
+
+export const resolveDefaultGridFilterOperator = (columnType: unknown): string => (
+    isStringLikeGridFilterColumnType(columnType) ? CONTAINS_GRID_FILTER_OPERATOR : EXACT_GRID_FILTER_OPERATOR
+);
+
+export const resolveNextGridFilterOperatorForColumnChange = ({
+    currentOperator,
+    previousColumnType,
+    nextColumnType,
+}: {
+    currentOperator: unknown;
+    previousColumnType: unknown;
+    nextColumnType: unknown;
+}): string => {
+    const current = String(currentOperator || '').trim();
+    if (!current) return resolveDefaultGridFilterOperator(nextColumnType);
+    const previousDefault = resolveDefaultGridFilterOperator(previousColumnType);
+    return current === previousDefault ? resolveDefaultGridFilterOperator(nextColumnType) : current;
+};
+
+export const buildGridFieldSelectOptions = (columnNames: string[]) => (
+    (columnNames || []).map((columnName) => {
+        const text = String(columnName || '');
+        return {
+            value: text,
+            label: text,
+            title: text,
+        };
+    })
+);
+
+const renderGridFieldSelectOption = (option: { label?: React.ReactNode; value?: unknown; title?: unknown }) => {
+    const text = String(option?.title ?? option?.label ?? option?.value ?? '');
+    return (
+        <span title={text} style={FILTER_FIELD_OPTION_STYLE}>
+            {text}
+        </span>
+    );
+};
+
+type NormalizeCommitCellValue = (columnName: string, value: any, mode: 'insert' | 'update') => any;
+
+type DataGridCommitChangeSet = {
+    inserts: any[];
+    updates: any[];
+    deletes: any[];
+};
+
+export const buildDataGridCommitChangeSet = ({
+    addedRows,
+    modifiedRows,
+    deletedRowKeys,
+    data,
+    editLocator,
+    visibleColumnNames,
+    rowKeyToString,
+    normalizeCommitCellValue,
+    shouldCommitColumn,
+    rowLocatorMessages,
+}: {
+    addedRows: any[];
+    modifiedRows: Record<string, any>;
+    deletedRowKeys: Set<string>;
+    data: any[];
+    editLocator?: EditRowLocator;
+    visibleColumnNames: string[];
+    rowKeyToString: (key: any) => string;
+    normalizeCommitCellValue: NormalizeCommitCellValue;
+    shouldCommitColumn: (columnName: string) => boolean;
+    rowLocatorMessages?: RowLocatorMessages;
+}): { ok: true; changes: DataGridCommitChangeSet } | { ok: false; error: string } => {
+    if (!editLocator || editLocator.readOnly || editLocator.strategy === 'none') {
+        return { ok: false, error: editLocator?.reason || rowLocatorMessages?.noSafeLocator?.() || 'No safe row locator is available for this result set.' };
+    }
+
+    const normalizeValues = (values: Record<string, any>, mode: 'insert' | 'update') => {
+        const normalizedValues: Record<string, any> = {};
+        Object.entries(values).forEach(([col, val]) => {
+            if (!shouldCommitColumn(col)) return;
+            const commitColumnName = resolveWritableColumnName(col, editLocator);
+            if (!commitColumnName) return;
+            const normalizedVal = normalizeCommitCellValue(col, val, mode);
+            if (normalizedVal !== undefined) {
+                normalizedValues[commitColumnName] = normalizedVal;
+            }
+        });
+        return normalizedValues;
+    };
+
+    const originalRowsByKey = new Map<string, any>();
+    data.forEach((row) => {
+        const key = row?.[GONAVI_ROW_KEY];
+        if (key === undefined || key === null) return;
+        originalRowsByKey.set(rowKeyToString(key), row);
+    });
+
+    const inserts: any[] = [];
+    const updates: any[] = [];
+    const deletes: any[] = [];
+
+    addedRows.forEach(row => {
+        const key = row?.[GONAVI_ROW_KEY];
+        if (key !== undefined && key !== null && deletedRowKeys.has(rowKeyToString(key))) return;
+        inserts.push(normalizeValues(row, 'insert'));
+    });
+
+    for (const keyStr of deletedRowKeys) {
+        const originalRow = originalRowsByKey.get(keyStr);
+        if (!originalRow) continue;
+        const locatorValues = resolveRowLocatorValues(editLocator, originalRow, rowLocatorMessages);
+        if (!locatorValues.ok) return { ok: false, error: locatorValues.error };
+        deletes.push(locatorValues.values);
+    }
+
+    for (const [keyStr, newRow] of Object.entries(modifiedRows)) {
+        if (deletedRowKeys.has(keyStr)) continue;
+        const originalRow = originalRowsByKey.get(keyStr);
+        if (!originalRow) continue;
+
+        const locatorValues = resolveRowLocatorValues(editLocator, originalRow, rowLocatorMessages);
+        if (!locatorValues.ok) return { ok: false, error: locatorValues.error };
+
+        const hasRowKey = Object.prototype.hasOwnProperty.call(newRow as any, GONAVI_ROW_KEY);
+        let values: Record<string, any> = {};
+        if (!hasRowKey) {
+            values = { ...(newRow as any) };
+        } else {
+            visibleColumnNames.forEach((col) => {
+                const nextVal = (newRow as any)?.[col];
+                const prevVal = (originalRow as any)?.[col];
+                if (!isCellValueEqualForDiff(prevVal, nextVal)) values[col] = nextVal;
+            });
+        }
+
+        const normalizedValues = normalizeValues(values, 'update');
+        if (Object.keys(normalizedValues).length === 0) continue;
+        updates.push({ keys: locatorValues.values, values: normalizedValues });
+    }
+
+    return { ok: true, changes: { inserts, updates, deletes } };
+};
+
+// P2 性能优化：提取内联 style 对象为模块级常量，避免每次 render 创建新对象
+const CELL_ELLIPSIS_STYLE: React.CSSProperties = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0, width: '100%' };
+const VIRTUAL_CELL_TEXT_STYLE: React.CSSProperties = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 0,
+    width: '100%',
+};
+const READONLY_CELL_WRAP_STYLE: React.CSSProperties = { minHeight: 20, display: 'flex', alignItems: 'center', width: '100%', minWidth: 0 };
+const INLINE_EDIT_FORM_ITEM_STYLE: React.CSSProperties = { margin: 0, width: '100%', minWidth: 0 };
+const VIRTUAL_EDITING_CELL_STYLE: React.CSSProperties = {
+    margin: 0,
+    padding: 0,
+    display: 'flex',
+    flex: '1 1 auto',
+    alignItems: 'center',
+    width: '100%',
+    minWidth: 0,
+    minHeight: 'calc(28px * var(--gn-ui-scale, 1))',
+    height: 'calc(28px * var(--gn-ui-scale, 1))',
+    overflow: 'visible',
+    whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
+};
+
+
+export {
+    DataGridErrorBoundary,
+    CELL_KEY_SEP,
+    CELL_SELECTION_DRAG_THRESHOLD_PX,
+    DATE_TIME_CACHE_LIMIT,
+    TABLE_CELL_PREVIEW_MAX_CHARS,
+    ROW_NUMBER_COLUMN_WIDTH,
+    DATA_EDIT_AUTO_COMMIT_DELAY_OPTIONS,
+    DATA_GRID_DISPLAY_RENDER_VERSION,
+    DATA_GRID_VIRTUAL_EDIT_RENDER_VERSION,
+    DEFAULT_GRID_MONO_FONT_FAMILY,
+    normalizedDateTimeCache,
+    objectCellPreviewCache,
+    useDataGridI18nLanguage,
+    makeCellKey,
+    splitCellKey,
+    trimSimpleCache,
+    looksLikeDateTimeText,
+    normalizeDateTimeString,
+    normalizeBitHexDisplayText,
+    isDateOnlyColumnType,
+    isOceanBaseOracleDisplayConnection,
+    normalizeOceanBaseOracleDateDisplayText,
+    formatClipboardCellText,
+    normalizeClipboardTsvCell,
+    buildClipboardTsv,
+    renderHighlightedCellText,
+    renderCellDisplayValue,
+    formatCellValue,
+    toEditableText,
+    toFormText,
+    isCellValueEqualForDiff,
+    isCellValueEqualForRender,
+    INLINE_EDIT_MAX_CHARS,
+    shouldOpenModalEditor,
+    getCellFieldName,
+    setCellFieldValue,
+    looksLikeJsonText,
+    isPlainObject,
+    normalizeValueForJsonView,
+    isJsonViewValueEqual,
+    coerceJsonEditorValueForStorage,
+    ResizableTitle,
+    sortableHeaderStaticStyles,
+    SortableHeaderCell,
+    EditableContext,
+    CellContextMenuContext,
+    DataContext,
+    setGlobalDeletedRowKeys,
+    resolveEditableCellRowKey,
+    isEditableCellDeleted,
+    isEditableCellModified,
+    areEditableCellPropsEqual,
+    EditableCell,
+    ContextMenuRow,
+    buildColumnMetaMap,
+    hasUsableColumnMeta,
+    EXACT_GRID_FILTER_OPERATOR,
+    CONTAINS_GRID_FILTER_OPERATOR,
+    FILTER_FIELD_SELECT_STYLE,
+    FILTER_FIELD_POPUP_WIDTH,
+    FILTER_FIELD_OPTION_STYLE,
+    STRING_LIKE_GRID_FILTER_TYPES,
+    normalizeGridFilterColumnType,
+    renderGridFieldSelectOption,
+    CELL_ELLIPSIS_STYLE,
+    VIRTUAL_CELL_TEXT_STYLE,
+    READONLY_CELL_WRAP_STYLE,
+    INLINE_EDIT_FORM_ITEM_STYLE,
+    VIRTUAL_EDITING_CELL_STYLE,
+};
+
+export type {
+    DataGridErrorBoundaryState,
+    DataGridErrorBoundaryProps,
+    CellDisplayConnectionLike,
+    SortableHeaderCellProps,
+    Item,
+    EditableCellProps,
+    DataGridProps,
+    GridFilterCondition,
+    GridViewMode,
+    DdlViewLayoutMode,
+    DataGridExportScope,
+    VirtualEditingCellState,
+    ColumnMeta,
+    ForeignKeyTarget,
+    VirtualTableScrollReference,
+    NormalizeCommitCellValue,
+    DataGridCommitChangeSet,
+};
diff --git a/frontend/src/components/DataGridShell.tsx b/frontend/src/components/DataGridShell.tsx
new file mode 100644
index 0000000..3f063e5
--- /dev/null
+++ b/frontend/src/components/DataGridShell.tsx
@@ -0,0 +1,1123 @@
+import React from 'react';
+import { Button, message } from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
+import { createPortal } from 'react-dom';
+
+import Modal from './common/ResizableDraggableModal';
+import ImportPreviewModal from './ImportPreviewModal';
+import DataGridModals from './DataGridModals';
+import DataGridPreviewPanel from './DataGridPreviewPanel';
+import DataGridSecondaryActions from './DataGridSecondaryActions';
+import DataGridToolbarFrame from './DataGridToolbarFrame';
+import { DataGridJsonView, DataGridTextView } from './DataGridRecordViews';
+import { DataGridV2DdlSideWorkspace, DataGridV2DdlView } from './DataGridV2DdlWorkspace';
+import { DataGridV2ErView, DataGridV2FieldsView } from './DataGridV2MetadataViews';
+import DataGridLegacyCellContextMenu from './DataGridLegacyCellContextMenu';
+import TableDesigner from './TableDesigner';
+import { V2CellContextMenuView, V2ColumnHeaderContextMenuView } from './V2TableContextMenu';
+import {
+  FILTER_FIELD_POPUP_WIDTH,
+  FILTER_FIELD_SELECT_STYLE,
+  GONAVI_ROW_KEY,
+} from './DataGridCore';
+
+type DataGridShellProps = Record<string, any>;
+
+const DataGridShell: React.FC<DataGridShellProps> = (props) => {
+  const {
+    CellContextMenuContext,
+    CustomEvent,
+    DataContext,
+    DataGridColumnQuickFind,
+    DataGridPageFind,
+    DataGridPaginationBar,
+    DataGridResultViewSwitcher,
+    DndContext,
+    EditableContext,
+    Form,
+    JSON,
+    Set,
+    SortableContext,
+    Table,
+    activePageFindPosition,
+    activeShortcutPlatform,
+    addFilter,
+    aiShortcutLabel,
+    allSelectedAreDeleted,
+    applyAllFiltersDisabled,
+    applyAllFiltersEnabled,
+    applyExternalScrollToTableTargets,
+    applyFilters,
+    applyJsonEditor,
+    applyQuickWhereCondition,
+    applyRowEditor,
+    applySortInfo,
+    autoCommitFailedTokenRef,
+    autoCommitRemainingSeconds,
+    batchEditModalOpen,
+    batchEditSetNull,
+    batchEditValue,
+    bgContent,
+    bgContextMenu,
+    bgFilter,
+    canCopyQueryResult,
+    canExport,
+    canImport,
+    canModifyData,
+    canOpenObjectDesigner,
+    canUndoContextMenuCellChange,
+    canViewDdl,
+    cellContextMenu,
+    cellContextMenuPortalRef,
+    cellContextMenuValue,
+    cellEditMode,
+    cellEditModeRef,
+    cellEditorIsJson,
+    cellEditorMeta,
+    cellEditorOpen,
+    cellEditorValue,
+    clearAllFiltersAndSorts,
+    clearAutoCommitTimer,
+    clearQuickWhereCondition,
+    closeBatchEditModal,
+    closeCellEditMode,
+    closeCellEditor,
+    closeJsonEditor,
+    closeRowEditor,
+    closestCenter,
+    columnInfoSettingContent,
+    columnMetaCacheRef,
+    columnMetaMap,
+    columnMetaMapByLowerName,
+    columnQuickFindOptions,
+    columnQuickFindText,
+    connectionId,
+    containerRef,
+    contextHolder,
+    copiedCellPatch,
+    copiedRowsForPaste,
+    copyRowsForPaste,
+    copyToClipboard,
+    currentConnConfig,
+    currentTextRow,
+    darkMode,
+    dataContextValue,
+    dataEditAutoCommitDelayMs,
+    dataEditCommitMode,
+    dataPanelDirtyRef,
+    dataPanelIsJson,
+    dataPanelOpen,
+    dataPanelOriginalRef,
+    dataPanelValue,
+    dbName,
+    dbType,
+    ddlLoading,
+    ddlModalOpen,
+    ddlSidebarResizePreviewX,
+    ddlSidebarWidth,
+    ddlText,
+    ddlViewLayout,
+    displayColumnNames,
+    displayOutputColumnNames,
+    effectiveEditLocator,
+    enableVirtual,
+    exportProgressModal,
+    externalHorizontalScrollRef,
+    externalScrollbarMinWidth,
+    filterConditions,
+    filterLogicOptions,
+    filterOpOptions,
+    filterPanelRef,
+    filterTopPadding,
+    focusedCellInfo,
+    focusedCellWritable,
+    foreignKeyCacheRef,
+    form,
+    formatTextViewValue,
+    getTargets,
+    getTemporalPickerType,
+    ghostRef,
+    gridCssText,
+    gridFieldSelectOptions,
+    gridId,
+    handleAddRow,
+    handleBatchFillCells,
+    handleBatchFillToSelected,
+    handleCellEditorSave,
+    handleCellSetNull,
+    handleCommit,
+    handleCopyContextMenuFieldName,
+    handleCopyCsv,
+    handleCopyDdl,
+    handleCopyDelete,
+    handleCopyInsert,
+    handleCopyJson,
+    handleCopyQueryResultCsv,
+    handleCopyRowData,
+    handleCopySelectedCellsToClipboard,
+    handleCopySelectedColumnsFromRow,
+    handleCopyUpdate,
+    handleDataPanelFormatJson,
+    handleDataPanelSave,
+    handleDdlSidebarResizeStart,
+    handleDeleteSelected,
+    handleDragEnd,
+    handleExportSelected,
+    handleFormatJsonEditor,
+    handleFormatJsonInEditor,
+    handleImport,
+    handleImportSuccess,
+    handleNavigatePageFind,
+    handleOpenContextMenuRowEditor,
+    handleOpenExportDialog,
+    handleOpenJsonEditor,
+    handleOpenTableDdl,
+    handlePageSizeChange,
+    handlePasteCopiedColumnsToSelectedRows,
+    handlePasteCopiedRowsAsNew,
+    handlePreviewChanges,
+    handleQuickWherePaste,
+    handleSubmitColumnQuickFind,
+    handleTableChange,
+    handleUndoContextMenuCellChange,
+    handleUndoDeleteSelected,
+    handleV2CellContextMenuAction,
+    handleV2ColumnHeaderContextMenuAction,
+    handleV2PageStep,
+    handleViewModeChange,
+    handleVirtualTableClickCapture,
+    handleVirtualTableContextMenuCapture,
+    handleVirtualTableDoubleClickCapture,
+    hasChanges,
+    headerCellMinHeight,
+    horizontalListSortingStrategy,
+    horizontalScrollVisible,
+    horizontalScrollWidth,
+    importFilePath,
+    importPreviewVisible,
+    isBetweenOp,
+    isListOp,
+    isNoValueOp,
+    isQueryResultExport,
+    isTableSurfaceActive,
+    isV2Ui,
+    isWritableResultColumn,
+    jsonEditorOpen,
+    jsonEditorValue,
+    jsonViewText,
+    legacyAiButtonStyle,
+    loading,
+    localizedDataEditAutoCommitDelayOptions,
+    looksLikeJsonText,
+    mergedDisplayData,
+    noAutoCapInputProps,
+    normalizedPageFindText,
+    onCancelTotalCount,
+    onPageChange,
+    onReload,
+    onRequestTotalCount,
+    onSort,
+    onToggleFilter,
+    openBatchEditModal,
+    openCurrentViewRowEditor,
+    openRowEditorFieldEditor,
+    pageFindMatches,
+    pageFindSummary,
+    pageFindText,
+    pagination,
+    paginationControlTotal,
+    paginationHasKnownTotalPages,
+    paginationPageSizeOptions,
+    paginationPageText,
+    paginationSummaryText,
+    paginationTotalPages,
+    paginationV2SummaryText,
+    panelFrameColor,
+    panelOuterGap,
+    panelPaddingX,
+    panelPaddingY,
+    panelRadius,
+    pendingChangeCount,
+    pkColumns,
+    prefersManualTotalCount,
+    previewModalOpen,
+    previewSqlData,
+    queryResultCopyMenu,
+    quickWhereCondition,
+    quickWhereDraft,
+    quickWhereSuggestionOptions,
+    quickWhereSuggestionsOpen,
+    readOnly,
+    removeFilter,
+    renderGridFieldSelectOption,
+    resetCellSelection,
+    resolveColumnQuickFindTarget,
+    resolveContextMenuFieldName,
+    resolveWhereConditionSelectedValue,
+    rootRef,
+    rowClassName,
+    rowEditorDisplayRef,
+    rowEditorForm,
+    rowEditorNullColsRef,
+    rowEditorOpen,
+    rowEditorRowKey,
+    rowSelectionConfig,
+    selectedCells,
+    selectedRowKeys,
+    selectionAccentHex,
+    sensors,
+    setAddedRows,
+    setBatchEditSetNull,
+    setBatchEditValue,
+    setCellContextMenu,
+    setCellEditMode,
+    setCellEditorValue,
+    setColumnQuickFindText,
+    setDataEditTransactionOptions,
+    setDataPanelValue,
+    setDdlModalOpen,
+    setDdlViewLayout,
+    setDeletedRowKeys,
+    setImportFilePath,
+    setImportPreviewVisible,
+    setJsonEditorValue,
+    setMetadataReloadVersion,
+    setModifiedColumns,
+    setModifiedRows,
+    setPageFindText,
+    setPreviewModalOpen,
+    setQuickWhereDraft,
+    setQuickWhereSuggestionsOpen,
+    setSelectedRowKeys,
+    setTextRecordIndex,
+    setTimeout,
+    shouldApplyQuickWhereOnEnter,
+    showColumnComment,
+    showColumnType,
+    showFilter,
+    sortInfo,
+    stopQuickWhereClipboardPropagation,
+    supportsCopyInsert,
+    tableBodyBottomPadding,
+    tableColumns,
+    tableComponents,
+    tableContainerRef,
+    tableName,
+    tableOnRow,
+    tableRef,
+    tableRenderData,
+    tableScrollConfig,
+    textRecordIndex,
+    textViewRows,
+    toggleDataPanel,
+    toolbarBottomPadding,
+    toolbarDividerColor,
+    toolbarExtraActions,
+    translateDataGrid,
+    uniqueKeyGroupsCacheRef,
+    updateFilter,
+    useCallback,
+    useMemo,
+    useStore,
+    viewMode,
+    virtualListItemHeight,
+    window,
+  } = props;
+
+const renderDataTableView = () => (
+      <div
+          ref={tableContainerRef}
+          className={`${isV2Ui ? 'gn-v2-data-grid-table-shell gn-v2-data-grid-table-wrap ' : ''}data-grid-table-wrap${horizontalScrollVisible ? ' data-grid-table-wrap-external-active' : ''}`}
+          onClickCapture={enableVirtual ? handleVirtualTableClickCapture : undefined}
+          onDoubleClickCapture={enableVirtual ? handleVirtualTableDoubleClickCapture : undefined}
+          onContextMenuCapture={enableVirtual ? handleVirtualTableContextMenuCapture : undefined}
+          style={{
+              flex: '1 1 auto',
+              minHeight: 0,
+              position: 'relative',
+              boxSizing: 'border-box',
+              paddingBottom: enableVirtual ? tableBodyBottomPadding : 0,
+          }}
+      >
+          <Form component={false} form={form}>
+              <DataContext.Provider value={dataContextValue}>
+                  <CellContextMenuContext.Provider value={cellContextMenuValue}>
+                      <EditableContext.Provider value={form}>
+                          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+                              <SortableContext items={displayColumnNames} strategy={horizontalListSortingStrategy}>
+                                  <Table
+                                      ref={tableRef}
+                                      components={tableComponents}
+                                      dataSource={tableRenderData}
+                                      columns={tableColumns}
+                                      {...(enableVirtual && typeof virtualListItemHeight === 'number'
+                                          ? { listItemHeight: virtualListItemHeight }
+                                          : {})}
+                                      showSorterTooltip={{ target: 'sorter-icon' }}
+                                      size="small"
+                                      tableLayout="fixed"
+                                      scroll={tableScrollConfig}
+                                      sticky={false}
+                                      virtual={enableVirtual}
+                                      loading={loading}
+                                      rowKey={GONAVI_ROW_KEY}
+                                      pagination={false}
+                                      onChange={handleTableChange}
+                                      rowHoverable={!enableVirtual}
+                                      bordered
+                                      rowSelection={rowSelectionConfig}
+                                      rowClassName={rowClassName}
+                                      onRow={tableOnRow}
+                                  />
+                              </SortableContext>
+                          </DndContext>
+                      </EditableContext.Provider>
+                  </CellContextMenuContext.Provider>
+              </DataContext.Provider>
+          </Form>
+          <div
+              ref={externalHorizontalScrollRef}
+              className="data-grid-external-horizontal-scroll"
+              aria-hidden={!horizontalScrollVisible}
+              onScroll={applyExternalScrollToTableTargets}
+              style={{
+                  opacity: horizontalScrollVisible ? 1 : 0,
+                  pointerEvents: horizontalScrollVisible ? 'auto' : 'none',
+              }}
+          >
+              <div
+                  className="data-grid-external-horizontal-scroll-inner"
+                  style={{ width: `${Math.max(horizontalScrollWidth, externalScrollbarMinWidth)}px` }}
+              />
+          </div>
+      </div>
+  );
+  const pageFindContent = (
+      <DataGridPageFind
+          isV2Ui={isV2Ui}
+          darkMode={darkMode}
+          inputProps={noAutoCapInputProps as Record<string, unknown>}
+          pageFindText={pageFindText}
+          normalizedPageFindText={normalizedPageFindText}
+          hasMatches={pageFindMatches.length > 0}
+          activePageFindPosition={activePageFindPosition}
+          matchCount={pageFindMatches.length}
+          occurrenceCount={pageFindSummary.occurrenceCount}
+          matchedCellCount={pageFindSummary.matchedCellCount}
+          onPageFindTextChange={setPageFindText}
+          onCancel={() => setPageFindText('')}
+          onNavigatePrevious={() => handleNavigatePageFind('previous')}
+          onNavigateNext={() => handleNavigatePageFind('next')}
+          translate={translateDataGrid}
+      />
+  );
+  const visiblePageFindContent = viewMode === 'table' ? pageFindContent : null;
+  const columnQuickFindContent = isTableSurfaceActive ? (
+      <DataGridColumnQuickFind
+          isV2Ui={isV2Ui}
+          darkMode={darkMode}
+          inputProps={noAutoCapInputProps as Record<string, unknown>}
+          value={columnQuickFindText}
+          options={columnQuickFindOptions}
+          hasTarget={!!resolveColumnQuickFindTarget(columnQuickFindText)}
+          translate={translateDataGrid}
+          onChange={setColumnQuickFindText}
+          onSubmit={handleSubmitColumnQuickFind}
+      />
+  ) : null;
+  const resultViewSwitcher = (
+      <DataGridResultViewSwitcher
+          isV2Ui={isV2Ui}
+          darkMode={darkMode}
+          viewMode={viewMode}
+          onViewModeChange={handleViewModeChange}
+          translate={translateDataGrid}
+      />
+  );
+  const paginationContent = (
+      <DataGridPaginationBar
+          isV2Ui={isV2Ui}
+          pagination={pagination}
+          paginationV2SummaryText={paginationV2SummaryText}
+          paginationSummaryText={paginationSummaryText}
+          paginationControlTotal={paginationControlTotal}
+          paginationTotalPages={paginationTotalPages}
+          paginationPageText={paginationPageText}
+          paginationPageSizeOptions={paginationPageSizeOptions}
+          showKnownPageCount={paginationHasKnownTotalPages}
+          onPageChange={onPageChange}
+          onPageSizeChange={handlePageSizeChange}
+          onV2PageStep={handleV2PageStep}
+          translate={translateDataGrid}
+      />
+  );
+
+  const rowEditorFields = useMemo(() => (
+      displayColumnNames.map((col: string) => {
+          const sample = rowEditorDisplayRef.current?.[col] ?? '';
+          const placeholder = rowEditorNullColsRef.current?.has(col) ? '(NULL)' : undefined;
+          const isJson = looksLikeJsonText(sample);
+          const useTextArea = isJson || sample.includes('\n') || sample.length >= 160;
+          const colMeta = columnMetaMap[col] || columnMetaMapByLowerName[col.toLowerCase()];
+          const pickerType = getTemporalPickerType(colMeta?.type, dbType, currentConnConfig);
+          const isTemporalValue = !!pickerType && !(/^0{4}-0{2}-0{2}/.test(String(sample || '')));
+          const isWritable = isWritableResultColumn(col, effectiveEditLocator);
+          return {
+              columnName: col,
+              sample,
+              placeholder,
+              isJson,
+              useTextArea,
+              pickerType,
+              isTemporalValue,
+              isWritable,
+          };
+      })
+  ), [columnMetaMap, columnMetaMapByLowerName, currentConnConfig, dbType, displayColumnNames, effectiveEditLocator, rowEditorOpen, rowEditorRowKey]);
+
+  const handleRefreshGrid = useCallback(() => {
+      clearAutoCommitTimer();
+      autoCommitFailedTokenRef.current = -1;
+      setAddedRows([]);
+      setModifiedRows({});
+      setDeletedRowKeys(new Set());
+      setModifiedColumns({});
+      setSelectedRowKeys([]);
+      const normalizedTableName = String(tableName || '').trim();
+      const normalizedDbName = String(dbName || '').trim();
+      if (connectionId && normalizedTableName) {
+          const cacheKey = `${connectionId}|${normalizedDbName}|${normalizedTableName}`;
+          delete columnMetaCacheRef.current[cacheKey];
+          delete foreignKeyCacheRef.current[cacheKey];
+          delete uniqueKeyGroupsCacheRef.current[cacheKey];
+          setMetadataReloadVersion((value: number) => value + 1);
+      }
+      if (onReload) onReload();
+  }, [clearAutoCommitTimer, connectionId, dbName, onReload, tableName]);
+
+  const handleResetPendingChanges = useCallback(() => {
+      clearAutoCommitTimer();
+      autoCommitFailedTokenRef.current = -1;
+      setAddedRows([]);
+      setModifiedRows({});
+      setDeletedRowKeys(new Set());
+      setModifiedColumns({});
+  }, [clearAutoCommitTimer]);
+
+  const handleToggleFilterWithDefault = useCallback(() => {
+      if (!onToggleFilter) return;
+      onToggleFilter();
+      if (filterConditions.length === 0 && !showFilter) addFilter();
+  }, [onToggleFilter, filterConditions.length, showFilter]);
+
+  const handleToggleCellEditMode = useCallback(() => {
+      const next = !cellEditMode;
+      if (!next) {
+          closeCellEditMode();
+      } else {
+          cellEditModeRef.current = true;
+          setCellEditMode(true);
+          resetCellSelection();
+      }
+      void message.info(next
+          ? translateDataGrid('data_grid.message.cell_edit_mode_entered')
+          : translateDataGrid('data_grid.message.cell_edit_mode_exited')).then();
+  }, [cellEditMode, closeCellEditMode, resetCellSelection, translateDataGrid]);
+
+  const handleRequestAiInsight = useCallback(() => {
+      const sampleData = mergedDisplayData.slice(0, 10);
+      const prompt = translateDataGrid('data_grid.ai_insight.prompt', {
+          count: sampleData.length,
+          json: JSON.stringify(sampleData, null, 2),
+      });
+      const store = useStore.getState();
+      const wasClosed = !store.aiPanelVisible;
+      if (wasClosed) store.setAIPanelVisible(true);
+      setTimeout(() => {
+          window.dispatchEvent(new CustomEvent('gonavi:ai:inject-prompt', { detail: { prompt } }));
+      }, wasClosed ? 350 : 0);
+  }, [mergedDisplayData, translateDataGrid]);
+
+  const handleToggleTotalCount = useCallback(() => {
+      if (!onRequestTotalCount) return;
+      if (pagination?.totalCountLoading) {
+          if (onCancelTotalCount) onCancelTotalCount();
+          return;
+      }
+      onRequestTotalCount();
+  }, [onCancelTotalCount, onRequestTotalCount, pagination?.totalCountLoading]);
+
+  return (
+    <div ref={rootRef} className={`${gridId}${cellEditMode ? ' cell-edit-mode' : ''} data-grid-root${isV2Ui ? ' gn-v2-data-grid' : ''}`} style={{ '--gonavi-header-min-height': `${headerCellMinHeight}px`, flex: '1 1 auto', height: '100%', overflow: 'hidden', padding: 0, display: 'flex', flexDirection: 'column', minHeight: 0, minWidth: 0, background: 'transparent' } as React.CSSProperties}>
+        <DataGridToolbarFrame
+            isV2Ui={isV2Ui}
+            tableName={tableName}
+            dbName={dbName}
+            translate={translateDataGrid}
+            loading={loading}
+            darkMode={darkMode}
+            bgFilter={bgFilter}
+            panelFrameColor={panelFrameColor}
+            panelRadius={panelRadius}
+            panelOuterGap={panelOuterGap}
+            panelPaddingY={panelPaddingY}
+            panelPaddingX={panelPaddingX}
+            toolbarBottomPadding={toolbarBottomPadding}
+            filterTopPadding={filterTopPadding}
+            selectionAccentHex={selectionAccentHex}
+            toolbarDividerColor={toolbarDividerColor}
+            showFilter={showFilter}
+            filterPanelRef={filterPanelRef}
+            onReload={onReload}
+            onToggleFilter={onToggleFilter}
+            canModifyData={canModifyData}
+            selectedRowKeysLength={selectedRowKeys.length}
+            allSelectedAreDeleted={allSelectedAreDeleted}
+            cellEditMode={cellEditMode}
+            selectedCellsSize={selectedCells.size}
+            copiedCellPatchColumnCount={copiedCellPatch ? Object.keys(copiedCellPatch.values).length : 0}
+            hasChanges={hasChanges}
+            pendingChangeCount={pendingChangeCount}
+            dataEditCommitMode={dataEditCommitMode}
+            dataEditAutoCommitDelayMs={dataEditAutoCommitDelayMs}
+            dataEditAutoCommitDelayOptions={localizedDataEditAutoCommitDelayOptions}
+            autoCommitRemainingSeconds={autoCommitRemainingSeconds}
+            canImport={canImport}
+            canExport={canExport}
+            isQueryResultExport={isQueryResultExport}
+            canCopyQueryResult={canCopyQueryResult}
+            prefersManualTotalCount={prefersManualTotalCount && !!onRequestTotalCount}
+            aiShortcutLabel={aiShortcutLabel}
+            legacyAiButtonStyle={legacyAiButtonStyle}
+            paginationTotalCountLoading={pagination?.totalCountLoading}
+            toolbarExtraActions={toolbarExtraActions}
+            filterConditions={filterConditions}
+            sortInfo={sortInfo}
+            displayColumnNames={displayColumnNames}
+            quickWhereDraft={quickWhereDraft}
+            quickWhereCondition={quickWhereCondition}
+            quickWhereSuggestionsOpen={quickWhereSuggestionsOpen}
+            quickWhereSuggestionOptions={quickWhereSuggestionOptions}
+            gridFieldSelectOptions={gridFieldSelectOptions}
+            filterLogicOptions={filterLogicOptions}
+            filterOpOptions={filterOpOptions}
+            renderGridFieldSelectOption={renderGridFieldSelectOption}
+            noAutoCapInputProps={noAutoCapInputProps as Record<string, unknown>}
+            filterFieldSelectStyle={FILTER_FIELD_SELECT_STYLE}
+            filterFieldPopupWidth={FILTER_FIELD_POPUP_WIDTH}
+            queryResultCopyMenu={queryResultCopyMenu}
+            dbType={dbType}
+            onResetPendingChanges={handleResetPendingChanges}
+            onDataEditCommitModeChange={(mode) => setDataEditTransactionOptions({ commitMode: mode })}
+            onDataEditAutoCommitDelayChange={(delayMs) => setDataEditTransactionOptions({ autoCommitDelayMs: delayMs })}
+            onRefresh={handleRefreshGrid}
+            onToggleFilterClick={handleToggleFilterWithDefault}
+            onAddRow={handleAddRow}
+            onUndoDeleteSelected={handleUndoDeleteSelected}
+            onDeleteSelected={handleDeleteSelected}
+            onToggleCellEditMode={handleToggleCellEditMode}
+            onCopySelectedCellsToClipboard={handleCopySelectedCellsToClipboard}
+            onCopySelectedColumnsFromRow={handleCopySelectedColumnsFromRow}
+            onOpenBatchEditModal={openBatchEditModal}
+            onPasteCopiedColumnsToSelectedRows={() => handlePasteCopiedColumnsToSelectedRows()}
+            onCommit={handleCommit}
+            onPreviewChanges={handlePreviewChanges}
+            onImport={handleImport}
+            onOpenExportModal={handleOpenExportDialog}
+            onCopyQueryResultCsv={handleCopyQueryResultCsv}
+            onRequestAiInsight={handleRequestAiInsight}
+            onToggleTotalCount={handleToggleTotalCount}
+            onQuickWhereDraftChange={setQuickWhereDraft}
+            onQuickWhereSuggestionsOpenChange={setQuickWhereSuggestionsOpen}
+            onQuickWhereKeyDown={(event) => {
+                const isClipboardShortcut = (event.metaKey || event.ctrlKey) && !event.altKey && ['c', 'v', 'x'].includes(String(event.key || '').toLowerCase());
+                if (isClipboardShortcut) {
+                    event.stopPropagation();
+                    return;
+                }
+                if (!shouldApplyQuickWhereOnEnter({
+                    key: event.key,
+                    shiftKey: event.shiftKey,
+                    isComposing: Boolean((event.nativeEvent as any)?.isComposing),
+                    suggestionsOpen: quickWhereSuggestionsOpen,
+                    suggestionCount: quickWhereSuggestionOptions.length,
+                    activeSuggestionId: event.currentTarget.getAttribute('aria-activedescendant'),
+                })) {
+                    return;
+                }
+                event.preventDefault();
+                applyQuickWhereCondition();
+            }}
+            onQuickWhereSelect={(value, option) => {
+                setQuickWhereDraft(resolveWhereConditionSelectedValue({
+                    selectedValue: value,
+                    currentInput: quickWhereDraft,
+                    insertText: (option as any)?.insertText,
+                }));
+            }}
+            onQuickWhereCopy={stopQuickWhereClipboardPropagation}
+            onQuickWhereCut={stopQuickWhereClipboardPropagation}
+            onQuickWherePaste={handleQuickWherePaste}
+            onApplyQuickWhere={() => applyQuickWhereCondition()}
+            onClearQuickWhere={clearQuickWhereCondition}
+            updateFilter={updateFilter}
+            removeFilter={removeFilter}
+            addFilter={addFilter}
+            isListOp={isListOp}
+            isBetweenOp={isBetweenOp}
+            isNoValueOp={isNoValueOp}
+            enableSortControls={!!onSort}
+            onApplySortInfo={applySortInfo}
+            onApplyFilters={applyFilters}
+            onEnableAllFilters={applyAllFiltersEnabled}
+            onDisableAllFilters={applyAllFiltersDisabled}
+            onClearFiltersAndSorts={clearAllFiltersAndSorts}
+        />
+
+	       <div ref={containerRef} style={{ flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0, display: 'flex', flexDirection: 'column', background: bgContent, borderRadius: panelRadius, border: `1px solid ${panelFrameColor}`, boxSizing: 'border-box' }}>
+	        {contextHolder}
+            {exportProgressModal}
+            <DataGridModals
+                tableName={tableName}
+                darkMode={darkMode}
+                translate={translateDataGrid}
+                displayColumnNames={displayColumnNames}
+                rowEditorOpen={rowEditorOpen}
+                rowEditorRowKey={rowEditorRowKey}
+                rowEditorForm={rowEditorForm}
+                rowEditorFields={rowEditorFields}
+                onCloseRowEditor={closeRowEditor}
+                onApplyRowEditor={applyRowEditor}
+                onOpenRowEditorFieldEditor={openRowEditorFieldEditor}
+                cellEditorOpen={cellEditorOpen}
+                cellEditorMeta={cellEditorMeta}
+                cellEditorIsJson={cellEditorIsJson}
+                cellEditorValue={cellEditorValue}
+                onCloseCellEditor={closeCellEditor}
+                onFormatJsonInEditor={handleFormatJsonInEditor}
+                onSaveCellEditor={handleCellEditorSave}
+                onCellEditorValueChange={setCellEditorValue}
+                batchEditModalOpen={batchEditModalOpen}
+                selectedCellsSize={selectedCells.size}
+                batchEditSetNull={batchEditSetNull}
+                batchEditValue={batchEditValue}
+                onCloseBatchEditModal={closeBatchEditModal}
+                onApplyBatchFill={handleBatchFillCells}
+                onBatchEditSetNullChange={setBatchEditSetNull}
+                onBatchEditValueChange={setBatchEditValue}
+                jsonEditorOpen={jsonEditorOpen}
+                jsonEditorValue={jsonEditorValue}
+                onCloseJsonEditor={closeJsonEditor}
+                onFormatJsonEditor={handleFormatJsonEditor}
+                onApplyJsonEditor={applyJsonEditor}
+                onJsonEditorValueChange={setJsonEditorValue}
+                ddlModalOpen={ddlModalOpen}
+                ddlLoading={ddlLoading}
+                ddlText={ddlText}
+                onCloseDdlModal={() => setDdlModalOpen(false)}
+                onCopyDdl={handleCopyDdl}
+            />
+
+        {viewMode === 'table' ? (
+            renderDataTableView()
+        ) : isV2Ui && viewMode === 'fields' ? (
+            canOpenObjectDesigner ? (
+                <TableDesigner
+                    embedded
+                    tab={{
+                        id: `embedded-design-${connectionId || ''}-${dbName || ''}-${tableName || ''}`,
+                        title: translateDataGrid('data_grid.embedded_designer.title', { tableName: tableName || '' }),
+                        type: 'design',
+                        connectionId: String(connectionId || ''),
+                        dbName,
+                        tableName,
+                        initialTab: 'columns',
+                        readOnly,
+                        objectType: 'table',
+                    }}
+                />
+            ) : (
+                <DataGridV2FieldsView
+                    tableName={tableName}
+                    displayOutputColumnNames={displayOutputColumnNames}
+                    pkColumns={pkColumns}
+                    locatorColumns={effectiveEditLocator?.columns}
+                    columnMetaMap={columnMetaMap}
+                    columnMetaMapByLowerName={columnMetaMapByLowerName}
+                    translate={translateDataGrid}
+                />
+            )
+        ) : isV2Ui && viewMode === 'ddl' && ddlViewLayout === 'side' ? (
+            <DataGridV2DdlSideWorkspace
+                tableContent={renderDataTableView()}
+                translate={translateDataGrid}
+                tableName={tableName}
+                ddlViewLayout={ddlViewLayout}
+                ddlLoading={ddlLoading}
+                ddlText={ddlText}
+                darkMode={darkMode}
+                onDdlViewLayoutChange={setDdlViewLayout}
+                onReload={() => {
+                    void handleOpenTableDdl({ asView: true });
+                }}
+                onCopy={handleCopyDdl}
+                ddlSidebarWidth={ddlSidebarWidth}
+                ddlSidebarResizePreviewX={ddlSidebarResizePreviewX}
+                onResizeStart={handleDdlSidebarResizeStart}
+            />
+        ) : isV2Ui && viewMode === 'ddl' ? (
+            <DataGridV2DdlView
+                layout="bottom"
+                translate={translateDataGrid}
+                tableName={tableName}
+                ddlViewLayout={ddlViewLayout}
+                ddlLoading={ddlLoading}
+                ddlText={ddlText}
+                darkMode={darkMode}
+                onDdlViewLayoutChange={setDdlViewLayout}
+                onReload={() => {
+                    void handleOpenTableDdl({ asView: true });
+                }}
+                onCopy={handleCopyDdl}
+            />
+        ) : isV2Ui && viewMode === 'er' ? (
+            <DataGridV2ErView
+                tableName={tableName}
+                displayOutputColumnNames={displayOutputColumnNames}
+                columnMetaMap={columnMetaMap}
+                columnMetaMapByLowerName={columnMetaMapByLowerName}
+                translate={translateDataGrid}
+            />
+        ) : viewMode === 'json' ? (
+            <DataGridJsonView
+                darkMode={darkMode}
+                rowCount={mergedDisplayData.length}
+                canModifyData={canModifyData}
+                jsonViewText={jsonViewText}
+                translate={translateDataGrid}
+                onOpenJsonEditor={handleOpenJsonEditor}
+            />
+	        ) : (
+	            <DataGridTextView
+                darkMode={darkMode}
+                rowCount={textViewRows.length}
+                textRecordIndex={textRecordIndex}
+                canModifyData={canModifyData}
+                currentTextRow={currentTextRow}
+                displayOutputColumnNames={displayOutputColumnNames}
+                translate={translateDataGrid}
+                onPrev={() => setTextRecordIndex((i: number) => Math.max(0, i - 1))}
+                onNext={() => setTextRecordIndex((i: number) => Math.min(textViewRows.length - 1, i + 1))}
+                onEditCurrent={openCurrentViewRowEditor}
+                formatTextViewValue={formatTextViewValue}
+            />
+        )}
+
+        <DataGridPreviewPanel
+            visible={dataPanelOpen}
+            isTableSurfaceActive={isTableSurfaceActive}
+            darkMode={darkMode}
+            focusedCellInfo={focusedCellInfo}
+            dataPanelIsJson={dataPanelIsJson}
+            focusedCellWritable={focusedCellWritable}
+            dataPanelValue={dataPanelValue}
+            columnMetaMap={columnMetaMap}
+            columnMetaMapByLowerName={columnMetaMapByLowerName}
+            translate={translateDataGrid}
+            onFormatJson={() => {
+                handleDataPanelFormatJson((errorMessage: string) => {
+                    void message.error(translateDataGrid('data_grid.json_editor.invalid_format', { error: errorMessage }));
+                });
+            }}
+            onSave={handleDataPanelSave}
+            onValueChange={setDataPanelValue}
+            onDirtyChange={(dirty) => {
+                dataPanelDirtyRef.current = dirty;
+            }}
+            isDirtyComparedToOriginal={(value) => value !== dataPanelOriginalRef.current}
+        />
+
+        {isTableSurfaceActive && isV2Ui && cellContextMenu.visible && createPortal(
+            <div
+                ref={cellContextMenuPortalRef}
+                className="gn-v2-table-context-menu-portal"
+                style={{
+                    position: 'fixed',
+                    left: cellContextMenu.x,
+                    top: cellContextMenu.y,
+                    zIndex: 10000,
+                }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {cellContextMenu.kind === 'column' ? (() => {
+                    const fieldName = resolveContextMenuFieldName(cellContextMenu.dataIndex, cellContextMenu.title);
+                    const meta = columnMetaMap[fieldName] || columnMetaMapByLowerName[fieldName.toLowerCase()];
+                    const activeSort = sortInfo.find((item: any) => item.columnKey === fieldName && item.enabled !== false);
+                    return (
+                        <V2ColumnHeaderContextMenuView
+                            fieldName={fieldName}
+                            shortcutPlatform={activeShortcutPlatform}
+                            columnType={meta?.type}
+                            columnComment={meta?.comment}
+                            sortOrder={(activeSort?.order === 'ascend' || activeSort?.order === 'descend') ? activeSort.order : null}
+                            showColumnType={showColumnType}
+                            showColumnComment={showColumnComment}
+                            onAction={handleV2ColumnHeaderContextMenuAction}
+                        />
+                    );
+                })() : (
+                    <V2CellContextMenuView
+                        fieldName={resolveContextMenuFieldName(cellContextMenu.dataIndex, cellContextMenu.title)}
+                        shortcutPlatform={activeShortcutPlatform}
+                        tableName={tableName}
+                        rowLabel={cellContextMenu.record?.[GONAVI_ROW_KEY] === undefined ? undefined : `row ${String(cellContextMenu.record?.[GONAVI_ROW_KEY])}`}
+                        selectedRowCount={selectedRowKeys.length}
+                        canModifyData={canModifyData}
+                        canUndoCellChange={canUndoContextMenuCellChange}
+                        copiedRowCount={copiedRowsForPaste.length}
+                        canPasteCopiedColumns={!!copiedCellPatch}
+                        supportsCopyInsert={supportsCopyInsert}
+                        onAction={handleV2CellContextMenuAction}
+                    />
+                )}
+            </div>,
+            document.body
+        )}
+
+        <DataGridLegacyCellContextMenu
+            visible={isTableSurfaceActive && !isV2Ui && cellContextMenu.visible}
+            darkMode={darkMode}
+            bgContextMenu={bgContextMenu}
+            cellContextMenu={cellContextMenu}
+            canModifyData={canModifyData}
+            copiedRowsForPasteLength={copiedRowsForPaste.length}
+            selectedRowKeysLength={selectedRowKeys.length}
+            copiedCellPatchAvailable={!!copiedCellPatch}
+            canUndoCellChange={canUndoContextMenuCellChange}
+            supportsCopyInsert={supportsCopyInsert}
+            translate={translateDataGrid}
+            onClose={() => setCellContextMenu((prev: any) => ({ ...prev, visible: false }))}
+            onCopyFieldName={handleCopyContextMenuFieldName}
+            onCopyRowData={() => {
+                if (cellContextMenu.record) handleCopyRowData(cellContextMenu.record);
+            }}
+            onCopyRowForPaste={() => {
+                const rowKey = cellContextMenu.record?.[GONAVI_ROW_KEY];
+                if (rowKey === undefined || rowKey === null) {
+                    void message.info(translateDataGrid('data_grid.message.no_copyable_rows'));
+                    return;
+                }
+                setSelectedRowKeys([rowKey]);
+                copyRowsForPaste([rowKey]);
+            }}
+            onPasteCopiedRowsAsNew={handlePasteCopiedRowsAsNew}
+            onUndoCellChange={handleUndoContextMenuCellChange}
+            onSetNull={handleCellSetNull}
+            onEditRow={handleOpenContextMenuRowEditor}
+            onFillToSelected={() => {
+                if (selectedRowKeys.length > 0 && cellContextMenu.record) {
+                    handleBatchFillToSelected(cellContextMenu.record, cellContextMenu.dataIndex);
+                }
+            }}
+            onPasteCopiedColumns={() => {
+                const fallbackKey = cellContextMenu.record?.[GONAVI_ROW_KEY];
+                handlePasteCopiedColumnsToSelectedRows(fallbackKey);
+            }}
+            onCopyInsert={() => {
+                if (cellContextMenu.record) handleCopyInsert(cellContextMenu.record);
+            }}
+            onCopyUpdate={() => {
+                if (cellContextMenu.record) handleCopyUpdate(cellContextMenu.record);
+            }}
+            onCopyDelete={() => {
+                if (cellContextMenu.record) handleCopyDelete(cellContextMenu.record);
+            }}
+            onCopyJson={() => {
+                if (cellContextMenu.record) handleCopyJson(cellContextMenu.record);
+            }}
+            onCopyCsv={() => {
+                if (cellContextMenu.record) handleCopyCsv(cellContextMenu.record);
+            }}
+            onCopyMarkdown={() => {
+                if (cellContextMenu.record) {
+                    const records = getTargets(cellContextMenu.record);
+                    const lines = records.map((r: any) => {
+                        const { [GONAVI_ROW_KEY]: _rowKey, ...vals } = r;
+                        return `| ${Object.values(vals).join(' | ')} |`;
+                    });
+                    copyToClipboard(lines.join('\n'));
+                }
+            }}
+            onExportCsv={() => {
+                if (cellContextMenu.record) handleExportSelected({ format: 'csv' }, cellContextMenu.record).catch(console.error);
+            }}
+            onExportXlsx={() => {
+                if (cellContextMenu.record) handleExportSelected({ format: 'xlsx' }, cellContextMenu.record).catch(console.error);
+            }}
+            onExportJson={() => {
+                if (cellContextMenu.record) handleExportSelected({ format: 'json' }, cellContextMenu.record).catch(console.error);
+            }}
+            onExportHtml={() => {
+                if (cellContextMenu.record) handleExportSelected({ format: 'html' }, cellContextMenu.record).catch(console.error);
+            }}
+        />
+       </div>
+
+	       <DataGridSecondaryActions
+                isV2Ui={isV2Ui}
+                canViewDdl={canViewDdl}
+                canOpenObjectDesigner={canOpenObjectDesigner}
+                viewMode={viewMode}
+                ddlLoading={ddlLoading}
+                showColumnComment={showColumnComment}
+                showColumnType={showColumnType}
+                mergedDisplayCount={mergedDisplayData.length}
+                pendingChangeCount={pendingChangeCount}
+                resultViewSwitcher={resultViewSwitcher}
+                columnInfoSettingContent={columnInfoSettingContent}
+                columnQuickFindContent={columnQuickFindContent}
+                pageFindContent={visiblePageFindContent}
+                paginationContent={paginationContent}
+                onViewModeChange={handleViewModeChange}
+                dataPanelOpen={dataPanelOpen}
+                isTableSurfaceActive={isTableSurfaceActive}
+                onToggleDataPanel={toggleDataPanel}
+                onOpenTableDdl={() => {
+                    void handleOpenTableDdl();
+                }}
+                translate={translateDataGrid}
+            />
+
+		        <style>{gridCssText}</style>
+       
+       {/* Ghost Resize Line for Columns */}
+       <div
+           ref={ghostRef}
+           style={{
+               position: 'absolute',
+               top: 0,
+               bottom: 0, // Fits container height
+               left: 0,
+               width: '2px',
+               background: selectionAccentHex,
+               zIndex: 9999,
+               display: 'none',
+               pointerEvents: 'none',
+               willChange: 'transform'
+           }}
+       />
+
+       {/* Preview SQL Modal */}
+       <Modal
+           title={translateDataGrid('data_grid.preview_sql.title')}
+           open={previewModalOpen}
+           onCancel={() => setPreviewModalOpen(false)}
+           width={800}
+           footer={null}
+       >
+           <div style={{ marginBottom: 16 }}>
+               {previewSqlData.deletes.length > 0 && (
+                   <div style={{ marginBottom: 12 }}>
+                       <div style={{ fontWeight: 'bold', color: '#ff4d4f', marginBottom: 8 }}>
+                           DELETE ({previewSqlData.deletes.length})
+                       </div>
+                        {previewSqlData.deletes.map((sql: string, i: number) => (
+                           <div key={`del-${i}`} style={{ position: 'relative', marginBottom: 8 }}>
+                               <pre style={{
+                                   background: darkMode ? 'rgba(255, 77, 79, 0.10)' : '#fff2f0',
+                                   border: darkMode ? '1px solid rgba(255, 77, 79, 0.25)' : '1px solid #ffccc7',
+                                   padding: '8px 40px 8px 12px', borderRadius: 4,
+                                   fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-all',
+                                   margin: 0,
+                               }}>{sql}</pre>
+                               <Button
+                                   size="small" type="text"
+                                   icon={<CopyOutlined />}
+                                   style={{ position: 'absolute', top: 4, right: 4 }}
+                                   onClick={() => { navigator.clipboard.writeText(sql).then(() => message.success(translateDataGrid('data_grid.preview_sql.copied'))); }}
+                               />
+                           </div>
+                       ))}
+                   </div>
+               )}
+               {previewSqlData.updates.length > 0 && (
+                   <div style={{ marginBottom: 12 }}>
+                       <div style={{ fontWeight: 'bold', color: '#fa8c16', marginBottom: 8 }}>
+                           UPDATE ({previewSqlData.updates.length})
+                       </div>
+                        {previewSqlData.updates.map((sql: string, i: number) => (
+                           <div key={`upd-${i}`} style={{ position: 'relative', marginBottom: 8 }}>
+                               <pre style={{
+                                   background: darkMode ? 'rgba(250, 140, 22, 0.10)' : '#fff7e6',
+                                   border: darkMode ? '1px solid rgba(250, 140, 22, 0.25)' : '1px solid #ffd591',
+                                   padding: '8px 40px 8px 12px', borderRadius: 4,
+                                   fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-all',
+                                   margin: 0,
+                               }}>{sql}</pre>
+                               <Button
+                                   size="small" type="text"
+                                   icon={<CopyOutlined />}
+                                   style={{ position: 'absolute', top: 4, right: 4 }}
+                                   onClick={() => { navigator.clipboard.writeText(sql).then(() => message.success(translateDataGrid('data_grid.preview_sql.copied'))); }}
+                               />
+                           </div>
+                       ))}
+                   </div>
+               )}
+               {previewSqlData.inserts.length > 0 && (
+                   <div style={{ marginBottom: 12 }}>
+                       <div style={{ fontWeight: 'bold', color: '#52c41a', marginBottom: 8 }}>
+                           INSERT ({previewSqlData.inserts.length})
+                       </div>
+                        {previewSqlData.inserts.map((sql: string, i: number) => (
+                           <div key={`ins-${i}`} style={{ position: 'relative', marginBottom: 8 }}>
+                               <pre style={{
+                                   background: darkMode ? 'rgba(82, 196, 26, 0.10)' : '#f6ffed',
+                                   border: darkMode ? '1px solid rgba(82, 196, 26, 0.25)' : '1px solid #b7eb8f',
+                                   padding: '8px 40px 8px 12px', borderRadius: 4,
+                                   fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-all',
+                                   margin: 0,
+                               }}>{sql}</pre>
+                               <Button
+                                   size="small" type="text"
+                                   icon={<CopyOutlined />}
+                                   style={{ position: 'absolute', top: 4, right: 4 }}
+                                   onClick={() => { navigator.clipboard.writeText(sql).then(() => message.success(translateDataGrid('data_grid.preview_sql.copied'))); }}
+                               />
+                           </div>
+                       ))}
+                   </div>
+               )}
+               {previewSqlData.deletes.length === 0 && previewSqlData.updates.length === 0 && previewSqlData.inserts.length === 0 && (
+                   <div style={{ color: darkMode ? '#888' : '#999', textAlign: 'center', padding: 24 }}>
+                       {translateDataGrid('data_grid.preview_sql.no_changes')}
+                   </div>
+               )}
+           </div>
+           <div style={{ color: darkMode ? '#999' : '#888', fontSize: 12, borderTop: darkMode ? '1px solid #303030' : '1px solid #f0f0f0', paddingTop: 8 }}>
+               {translateDataGrid('data_grid.preview_sql.summary', {
+                   deletes: previewSqlData.deletes.length,
+                   updates: previewSqlData.updates.length,
+                   inserts: previewSqlData.inserts.length
+               })}
+           </div>
+       </Modal>
+
+       {/* Import Preview Modal */}
+       <ImportPreviewModal
+           visible={importPreviewVisible}
+           filePath={importFilePath}
+           connectionId={connectionId || ''}
+           dbName={dbName || ''}
+           tableName={tableName || ''}
+           onClose={() => {
+               setImportPreviewVisible(false);
+               setImportFilePath('');
+           }}
+           onSuccess={handleImportSuccess}
+       />
+    </div>
+  );
+};
+
+export default DataGridShell;
diff --git a/frontend/src/components/QueryEditor.external-sql-save.test.tsx b/frontend/src/components/QueryEditor.external-sql-save.test.tsx
index 757a363..4329786 100644
--- a/frontend/src/components/QueryEditor.external-sql-save.test.tsx
+++ b/frontend/src/components/QueryEditor.external-sql-save.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { readFileSync } from 'node:fs';
 import { act, create, type ReactTestRenderer } from 'react-test-renderer';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { readV2ThemeCss } from '../test/readV2ThemeCss';
 
 import { setCurrentLanguage } from '../i18n';
 import type { SavedQuery, TabData } from '../types';
@@ -618,6 +619,7 @@ describe('QueryEditor external SQL save', () => {
     editorState.position = { lineNumber: 1, column: 1 };
     editorState.selection = null;
     editorState.domNode.style.cursor = '';
+    editorState.providers = [];
     editorState.hoverProviders = [];
     editorState.contentChangeListeners = [];
     editorState.cursorPositionListeners = [];
@@ -4919,2237 +4921,4 @@ describe('QueryEditor external SQL save', () => {
     renderer?.unmount();
   });
 
-  it('keeps Oracle anonymous PL/SQL blocks intact when running from the editor', async () => {
-    storeState.connections[0].config.type = 'oracle';
-    storeState.connections[0].config.database = 'ORCLPDB1';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['affectedRows'], rows: [{ affectedRows: 1 }] }],
-    });
-    const plsql = [
-      'BEGIN',
-      "    INSERT INTO tmp_disable_trigger (table_name) VALUES ('t_memcard_reg');",
-      "    UPDATE t_memcard_reg SET CARDLEVEL = 1 WHERE MEMCARDNO = '8032277312';",
-      "    DELETE FROM tmp_disable_trigger WHERE table_name = 't_memcard_reg';",
-      'END;',
-    ].join('\n');
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'ORCLPDB1', query: plsql })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'ORCLPDB1', plsql, 'query-1');
-    expect(storeState.addSqlLog).toHaveBeenCalledWith(expect.objectContaining({
-      sql: plsql,
-      status: 'success',
-    }));
-    renderer?.unmount();
-  });
-
-  it('renders result grid for sqlserver exec statements that return rows', async () => {
-    storeState.connections[0].config.type = 'sqlserver';
-    storeState.connections[0].config.database = 'master';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['SPID', 'STATUS'], rows: [{ SPID: 52, STATUS: 'RUNNABLE' }] }],
-    });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'master', query: 'EXEC sp_who2' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(textContent(renderer!.toJSON())).toContain('结果 1');
-    expect(textContent(renderer!.toJSON())).not.toContain('影响行数：');
-    expect(dataGridState.latestProps?.columnNames).toEqual(['SPID', 'STATUS']);
-    expect(Array.isArray(dataGridState.latestProps?.data)).toBe(true);
-    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({ SPID: 52, STATUS: 'RUNNABLE' });
-  });
-
-  it('renders standalone message result for sqlserver statistics statements', async () => {
-    storeState.connections[0].config.type = 'sqlserver';
-    storeState.connections[0].config.database = 'master';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{
-        columns: [],
-        rows: [],
-        messages: ["Table 'users'. Scan count 1, logical reads 3."],
-      }],
-    });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'master', query: 'SET STATISTICS IO ON;' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(textContent(renderer!.toJSON())).toContain('消息 1');
-    expect(textContent(renderer!.toJSON())).toContain("Table 'users'. Scan count 1, logical reads 3.");
-    expect(dataGridState.latestProps?.columnNames).not.toEqual([]);
-  });
-
-  it('keeps multiple result sets from a single sqlserver statement', async () => {
-    storeState.connections[0].config.type = 'sqlserver';
-    storeState.connections[0].config.database = 'master';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [
-        { statementIndex: 1, columns: ['name'], rows: [{ name: 'master' }] },
-        { statementIndex: 1, columns: ['owner'], rows: [{ owner: 'sa' }] },
-      ],
-    });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'master', query: 'EXEC sp_helpdb' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(textContent(renderer!.toJSON())).toContain('结果 1');
-    expect(textContent(renderer!.toJSON())).toContain('结果 2');
-    expect(dataGridState.latestProps?.columnNames).toEqual(['name']);
-  });
-
-  it('prefers the first displayable sqlserver procedure result when empty result sets are returned', async () => {
-    storeState.connections[0].config.type = 'sqlserver';
-    storeState.connections[0].config.database = 'hydee';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [
-        { statementIndex: 1, columns: [], rows: [] },
-        {
-          statementIndex: 1,
-          columns: ['insert_sql'],
-          rows: [
-            { insert_sql: "insert into c_user(userid) values('168')" },
-            { insert_sql: "insert into c_user(userid) values('169')" },
-          ],
-        },
-        { statementIndex: 1, columns: [], rows: [] },
-        { statementIndex: 1, columns: [], rows: [] },
-      ],
-    });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'hydee', query: "p_get_select 'c_user','userid = ''168''',1" })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(textContent(renderer!.toJSON())).toContain('结果 4');
-    expect(dataGridState.latestProps?.columnNames).toEqual(['insert_sql']);
-    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({
-      insert_sql: "insert into c_user(userid) values('168')",
-    });
-  });
-
-  it('prefers concrete sqlserver procedure rows over affected-row status results', async () => {
-    storeState.connections[0].config.type = 'sqlserver';
-    storeState.connections[0].config.database = 'hydee';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [
-        { statementIndex: 1, columns: ['affectedRows'], rows: [{ affectedRows: 0 }] },
-        { statementIndex: 1, columns: [], rows: [] },
-        {
-          statementIndex: 1,
-          columns: ['insert_sql'],
-          rows: [
-            { insert_sql: "insert into c_user(userid) values('168')" },
-          ],
-        },
-      ],
-    });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'hydee', query: "p_get_select 'c_user','userid = ''168''',1" })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(dataGridState.latestProps?.columnNames).toEqual(['insert_sql']);
-    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({
-      insert_sql: "insert into c_user(userid) values('168')",
-    });
-    expect(textContent(renderer!.toJSON())).not.toContain('影响行数：0');
-  });
-
-  it('prefers sqlserver print output messages over affected-row status results', async () => {
-    storeState.connections[0].config.type = 'sqlserver';
-    storeState.connections[0].config.database = 'hydee';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [
-        { statementIndex: 1, columns: ['affectedRows'], rows: [{ affectedRows: 0 }] },
-        {
-          statementIndex: 1,
-          columns: [],
-          rows: [],
-          messages: [
-            "insert into c_dyscript(projectid,name) values (1,'demo')",
-            "insert into c_dyscript(projectid,name) values (2,'next')",
-          ],
-        },
-      ],
-    });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'hydee', query: "p_get_select c_dyscript,'projectid = 1',1" })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(textContent(renderer!.toJSON())).toContain('消息 2');
-    expect(textContent(renderer!.toJSON())).toContain("insert into c_dyscript(projectid,name) values (1,'demo')");
-    expect(textContent(renderer!.toJSON())).not.toContain('影响行数：0');
-    expect(dataGridState.latestProps).toBeNull();
-  });
-
-  it('renders top-level sqlserver print messages when result sets contain only status rows', async () => {
-    storeState.connections[0].config.type = 'sqlserver';
-    storeState.connections[0].config.database = 'hydee';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [
-        { statementIndex: 1, columns: ['affectedRows'], rows: [{ affectedRows: 0 }] },
-      ],
-      messages: [
-        "insert into c_dyscript(projectid,name) values (1,'demo')",
-      ],
-    });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'hydee', query: "p_get_select c_dyscript,'projectid = 1',1" })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(textContent(renderer!.toJSON())).toContain('消息 2');
-    expect(textContent(renderer!.toJSON())).toContain("insert into c_dyscript(projectid,name) values (1,'demo')");
-    expect(textContent(renderer!.toJSON())).not.toContain('影响行数：0');
-    expect(dataGridState.latestProps).toBeNull();
-  });
-
-  it('keeps both tabs when rerunning the same single sqlserver statement with multiple result sets', async () => {
-    storeState.connections[0].config.type = 'sqlserver';
-    storeState.connections[0].config.database = 'master';
-    backendApp.DBQueryMulti
-      .mockResolvedValueOnce({
-        success: true,
-        data: [
-          { statementIndex: 1, columns: ['name'], rows: [{ name: 'master' }] },
-          { statementIndex: 1, columns: ['owner'], rows: [{ owner: 'sa' }] },
-        ],
-      })
-      .mockResolvedValueOnce({
-        success: true,
-        data: [
-          { statementIndex: 1, columns: ['name'], rows: [{ name: 'tempdb' }] },
-          { statementIndex: 1, columns: ['owner'], rows: [{ owner: 'dbo' }] },
-        ],
-      });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'master', query: 'EXEC sp_helpdb' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    const tabLabels = renderer!.root.findAll((node) => {
-      const className = String(node.props?.className || '');
-      return className.includes('query-result-tab-label');
-    });
-    expect(tabLabels).toHaveLength(2);
-    expect(dataGridState.latestProps?.columnNames).toEqual(['name']);
-    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({ name: 'tempdb' });
-  });
-
-  it('reloads the active secondary result set for a single sqlserver statement', async () => {
-    storeState.connections[0].config.type = 'sqlserver';
-    storeState.connections[0].config.database = 'master';
-    backendApp.DBQueryMulti
-      .mockResolvedValueOnce({
-        success: true,
-        data: [
-          { statementIndex: 1, columns: ['name'], rows: [{ name: 'master' }] },
-          { statementIndex: 1, columns: ['owner'], rows: [{ owner: 'sa' }] },
-        ],
-      })
-      .mockResolvedValueOnce({
-        success: true,
-        data: [
-          { statementIndex: 1, columns: ['name'], rows: [{ name: 'master' }] },
-          { statementIndex: 1, columns: ['owner'], rows: [{ owner: 'dbo' }] },
-        ],
-      });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'master', query: 'EXEC sp_helpdb' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    const resultTabButtons = renderer!.root.findAll((node) => node.type === 'button' && node.props['data-tab-key']);
-    expect(resultTabButtons).toHaveLength(2);
-
-    await act(async () => {
-      resultTabButtons[1].props.onClick();
-    });
-
-    expect(dataGridState.latestProps?.columnNames).toEqual(['owner']);
-    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({ owner: 'sa' });
-
-    await act(async () => {
-      await dataGridState.latestProps?.onReload?.();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(2);
-    expect(dataGridState.latestProps?.columnNames).toEqual(['owner']);
-    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({ owner: 'dbo' });
-    expect(dataGridState.latestProps?.data).not.toEqual(expect.arrayContaining([expect.objectContaining({ name: 'master' })]));
-  });
-
-  it('localizes the non-Oracle no-safe-locator read-only warning in English while preserving the raw table name', async () => {
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['NAME'], rows: [{ NAME: 'old-name' }] }],
-    });
-    backendApp.DBGetColumns.mockResolvedValueOnce({
-      success: true,
-      data: [{ name: 'NAME', key: '' }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM users' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, 'Run').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(dataGridState.latestProps?.tableName).toBe('users');
-    expect(dataGridState.latestProps?.pkColumns).toEqual([]);
-    expect(dataGridState.latestProps?.editLocator).toMatchObject({
-      strategy: 'none',
-      readOnly: true,
-      reason: 'No primary key or usable unique index was detected, so changes cannot be committed safely.',
-    });
-    expect(dataGridState.latestProps?.readOnly).toBe(true);
-    expect(messageApi.warning).toHaveBeenCalledWith(
-      'Query results remain read-only: main.users No primary key or usable unique index was detected, so changes cannot be committed safely.',
-    );
-    expect(messageApi.warning).not.toHaveBeenCalledWith(
-      '查询结果保持只读：main.users 未检测到主键或可用唯一索引，无法安全提交修改。',
-    );
-  });
-
-  it('localizes the non-Oracle index-metadata-unavailable read-only warning in English while preserving the raw table name', async () => {
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['NAME'], rows: [{ NAME: 'old-name' }] }],
-    });
-    backendApp.DBGetColumns.mockResolvedValueOnce({
-      success: true,
-      data: [{ name: 'NAME', key: '' }],
-    });
-    backendApp.DBGetIndexes.mockResolvedValueOnce({
-      success: false,
-      data: [],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM users' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, 'Run').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(dataGridState.latestProps?.tableName).toBe('users');
-    expect(dataGridState.latestProps?.editLocator).toMatchObject({
-      strategy: 'none',
-      readOnly: true,
-      reason: 'Unable to load unique index metadata, so changes cannot be committed safely.',
-    });
-    expect(dataGridState.latestProps?.readOnly).toBe(true);
-    expect(messageApi.warning).toHaveBeenCalledWith(
-      'Query results remain read-only: main.users Unable to load unique index metadata, so changes cannot be committed safely.',
-    );
-    expect(messageApi.warning).not.toHaveBeenCalledWith(
-      '查询结果保持只读：main.users 无法加载唯一索引元数据，无法安全提交修改。',
-    );
-  });
-
-  it('localizes the table-locator-metadata-unavailable read-only warning in English while preserving the raw table name', async () => {
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['NAME'], rows: [{ NAME: 'old-name' }] }],
-    });
-    backendApp.DBGetColumns.mockResolvedValueOnce({
-      success: false,
-      data: [],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM users' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, 'Run').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(dataGridState.latestProps?.tableName).toBe('users');
-    expect(dataGridState.latestProps?.editLocator).toMatchObject({
-      strategy: 'none',
-      readOnly: true,
-      reason: 'Unable to load primary key/unique index metadata for main.users, so changes cannot be committed safely.',
-    });
-    expect(dataGridState.latestProps?.readOnly).toBe(true);
-    expect(messageApi.warning).toHaveBeenCalledWith(
-      'Query results remain read-only: Unable to load primary key/unique index metadata for main.users, so changes cannot be committed safely.',
-    );
-    expect(messageApi.warning).not.toHaveBeenCalledWith(
-      '查询结果保持只读：无法加载 main.users 的主键/唯一索引元数据，无法安全提交修改。',
-    );
-  });
-
-  it('keeps MySQL information_schema routine results read-only without a locator warning', async () => {
-    const sql = [
-      'SELECT ROUTINE_SCHEMA, ROUTINE_NAME, DEFINER, SECURITY_TYPE',
-      'FROM information_schema.ROUTINES',
-      "WHERE ROUTINE_SCHEMA = 'mkefu_location_dev_local'",
-      "  AND ROUTINE_NAME = 'init_orgi'",
-    ].join('\n');
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{
-        columns: ['ROUTINE_SCHEMA', 'ROUTINE_NAME', 'DEFINER', 'SECURITY_TYPE'],
-        rows: [{
-          ROUTINE_SCHEMA: 'mkefu_location_dev_local',
-          ROUTINE_NAME: 'init_orgi',
-          DEFINER: 'root@%',
-          SECURITY_TYPE: 'DEFINER',
-        }],
-      }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'mkefu_location_dev_local', query: sql })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(dataGridState.latestProps?.tableName).toBe('ROUTINES');
-    expect(dataGridState.latestProps?.readOnly).toBe(true);
-    expect(backendApp.DBGetColumns).not.toHaveBeenCalled();
-    expect(backendApp.DBGetIndexes).not.toHaveBeenCalled();
-    expect(messageApi.warning).not.toHaveBeenCalled();
-  });
-
-  it('runs the SQL statement at the cursor instead of the whole editor when nothing is selected', async () => {
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['two'], rows: [{ two: 2 }] }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1;\nselect 2 as two;\nselect 3;',
-      })} />);
-    });
-
-    editorState.position = { lineNumber: 2, column: 8 };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.();
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as two'), 'query-1');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 1');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3');
-    expect(storeState.addSqlLog).toHaveBeenCalledWith(expect.objectContaining({
-      sql: expect.stringContaining('select 2 as two'),
-    }));
-  });
-
-  it('keeps cursor statement execution available in v2 UI', async () => {
-    storeState.appearance.uiVersion = 'v2';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['two'], rows: [{ two: 2 }] }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1;\nselect 2 as two;\nselect 3;',
-      })} />);
-    });
-
-    editorState.position = { lineNumber: 2, column: 8 };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.();
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as two'), 'query-1');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 1');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3');
-  });
-
-  it('renders V2 empty state copy for the active non-Chinese language', async () => {
-    storeState.appearance.uiVersion = 'v2';
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab()} />);
-    });
-
-    const rendered = textContent(renderer!.toJSON());
-    expect(rendered).toContain('Awaiting SQL execution');
-    expect(rendered).toContain('Run a query to display results below in the new data grid.');
-    expect(rendered).not.toContain('等待执行 SQL');
-    expect(rendered).not.toContain('运行查询后，结果会在下方以新版数据网格展示。');
-  });
-
-  it('uses the last editor cursor position when the run button takes focus', async () => {
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['two'], rows: [{ two: 2 }] }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1 as a;\nselect 2 as b;\nselect 3 as c;',
-      })} />);
-    });
-
-    editorState.cursorPositionListeners.forEach((listener) => {
-      listener({ position: { lineNumber: 2, column: 'select 2 as b;'.length + 1 } });
-    });
-    editorState.hasTextFocus = false;
-    editorState.position = { lineNumber: 3, column: 'select 3 as c;'.length + 1 };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as b'), 'query-1');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3 as c');
-  });
-
-  it('prefers the last editor cursor event even if Monaco still reports text focus', async () => {
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['two'], rows: [{ two: 2 }] }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1 as a;\nselect 2 as b;\nselect 3 as c;',
-      })} />);
-    });
-
-    editorState.cursorPositionListeners.forEach((listener) => {
-      listener({ position: { lineNumber: 2, column: 'select 2 as b;'.length + 1 } });
-    });
-    editorState.hasTextFocus = true;
-    editorState.position = { lineNumber: 3, column: 'select 3 as c;'.length + 1 };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as b'), 'query-1');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3 as c');
-  });
-
-  it('uses Monaco active selection position when run button focus drifts onto a blank line', async () => {
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['b'], rows: [{ b: 2 }] }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1 as a;\nselect 2 as b;\n\nselect 3 as c;',
-      })} />);
-    });
-
-    editorState.selection = {
-      startLineNumber: 2,
-      startColumn: 'select 2 as b;'.length + 1,
-      endLineNumber: 2,
-      endColumn: 'select 2 as b;'.length + 1,
-      positionLineNumber: 2,
-      positionColumn: 'select 2 as b;'.length + 1,
-    };
-    editorState.position = { lineNumber: 3, column: 1 };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, 'Run');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as b'), 'query-1');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 1 as a');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3 as c');
-    expect(messageApi.info).not.toHaveBeenCalledWith('没有可执行的 SQL。');
-  });
-
-  it('keeps cursor statement execution when CRLF line endings put the cursor after a semicolon', async () => {
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['b'], rows: [{ b: 2 }] }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1 as a;\r\nselect 2 as b;\r\n\r\nselect 3 as c;',
-      })} />);
-    });
-
-    editorState.position = { lineNumber: 2, column: 'select 2 as b;'.length + 1 };
-    editorState.selection = {
-      startLineNumber: 2,
-      startColumn: 'select 2 as b;'.length + 1,
-      endLineNumber: 2,
-      endColumn: 'select 2 as b;'.length + 1,
-      positionLineNumber: 2,
-      positionColumn: 'select 2 as b;'.length + 1,
-    };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, 'Run');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as b'), 'query-1');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 1 as a');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3 as c');
-    expect(messageApi.info).not.toHaveBeenCalledWith('没有可执行的 SQL。');
-  });
-
-  it('shows "No executable SQL." in English when the cursor is on a blank line', async () => {
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['a'], rows: [{ a: 1 }] }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1 as a;\nselect 2 as b;\n\nselect 3 as c;',
-      })} />);
-    });
-
-    editorState.position = { lineNumber: 1, column: 'select 1 as a;'.length + 1 };
-    editorState.selection = {
-      startLineNumber: 1,
-      startColumn: 'select 1 as a;'.length + 1,
-      endLineNumber: 1,
-      endColumn: 'select 1 as a;'.length + 1,
-      positionLineNumber: 1,
-      positionColumn: 'select 1 as a;'.length + 1,
-    };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(textContent(renderer!.toJSON())).toContain('结果 1');
-    backendApp.DBQueryMulti.mockClear();
-    messageApi.info.mockClear();
-
-    editorState.position = { lineNumber: 3, column: 1 };
-    editorState.selection = {
-      startLineNumber: 3,
-      startColumn: 1,
-      endLineNumber: 3,
-      endColumn: 1,
-      positionLineNumber: 3,
-      positionColumn: 1,
-    };
-    editorState.cursorPositionListeners.forEach((listener) => {
-      listener({ position: { lineNumber: 3, column: 1 } });
-    });
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).not.toHaveBeenCalled();
-    expect(messageApi.info).toHaveBeenCalledWith('No executable SQL.');
-    expect(messageApi.info).not.toHaveBeenCalledWith('没有可执行的 SQL。');
-    expect(dataGridState.latestProps?.data).toEqual(expect.arrayContaining([expect.objectContaining({ a: 1 })]));
-  });
-
-  it('shows "Select a database first." in English before running without a database', async () => {
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: '', query: 'select 1;' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer, 'Run').props.onClick();
-    });
-
-    expect(messageApi.error).toHaveBeenCalledWith('Select a database first.');
-    expect(messageApi.error).not.toHaveBeenCalledWith('请先选择数据库');
-  });
-
-  it('shows "Connection not found." in English before running without a matching connection', async () => {
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-    storeState.connections = [];
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ connectionId: 'missing', dbName: 'main', query: 'select 1;' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer, 'Run').props.onClick();
-    });
-
-    expect(messageApi.error).toHaveBeenCalledWith('Connection not found.');
-    expect(messageApi.error).not.toHaveBeenCalledWith('Connection not found');
-  });
-
-  it('shows the unsupported source guard in English before running', async () => {
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-    storeState.connections[0].config.type = 'redis';
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'select 1;' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer, 'Run').props.onClick();
-    });
-
-    expect(messageApi.error).toHaveBeenCalledWith(
-      'This data source does not support the SQL query editor. Use its dedicated page instead.',
-    );
-    expect(messageApi.error).not.toHaveBeenCalledWith('当前数据源不支持 SQL 查询编辑器，请使用对应专用页面。');
-  });
-
-  describe('execution toast localization', () => {
-    it('shows the Mongo multi-statement success toast in English', async () => {
-      storeState.languagePreference = 'en-US';
-      setCurrentLanguage('en-US');
-      storeState.connections[0].config.type = 'mongodb';
-      const query = 'db.users.find({});\ndb.logs.find({});';
-      backendApp.DBQueryWithCancel
-        .mockResolvedValueOnce({ success: true, data: [{ _id: 1 }], fields: ['_id'] })
-        .mockResolvedValueOnce({ success: true, data: [{ _id: 2 }], fields: ['_id'] });
-
-      let renderer!: ReactTestRenderer;
-      await act(async () => {
-        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
-      });
-      editorState.selection = {
-        startLineNumber: 1,
-        startColumn: 1,
-        endLineNumber: 2,
-        endColumn: 'db.logs.find({});'.length + 1,
-        positionLineNumber: 2,
-        positionColumn: 'db.logs.find({});'.length + 1,
-      };
-
-      await act(async () => {
-        await findButton(renderer, 'Run').props.onClick();
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(messageApi.success).toHaveBeenCalledWith('Executed 2 statements and produced 2 result sets.');
-      expect(messageApi.success).not.toHaveBeenCalledWith('已执行 2 条语句，生成 2 个结果集。');
-    });
-
-    it('shows the Mongo multi-statement failure prefix localization in English', async () => {
-      storeState.languagePreference = 'en-US';
-      setCurrentLanguage('en-US');
-      storeState.connections[0].config.type = 'mongodb';
-      const query = 'db.users.find({});\ndb.logs.find({});';
-      backendApp.DBQueryWithCancel
-        .mockResolvedValueOnce({ success: true, data: [{ _id: 1 }], fields: ['_id'] })
-        .mockResolvedValueOnce({ success: false, message: 'driver exploded' });
-
-      let renderer!: ReactTestRenderer;
-      await act(async () => {
-        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
-      });
-      editorState.selection = {
-        startLineNumber: 1,
-        startColumn: 1,
-        endLineNumber: 2,
-        endColumn: 'db.logs.find({});'.length + 1,
-        positionLineNumber: 2,
-        positionColumn: 'db.logs.find({});'.length + 1,
-      };
-
-      await act(async () => {
-        await findButton(renderer, 'Run').props.onClick();
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      const rendered = textContent(renderer.toJSON());
-      expect(rendered).toContain('Statement 2 failed: driver exploded');
-      expect(rendered).not.toContain('第 2 条语句执行失败：driver exploded');
-    });
-
-    it('shows the Mongo zero-result success toast in English', async () => {
-      storeState.languagePreference = 'en-US';
-      setCurrentLanguage('en-US');
-      storeState.connections[0].config.type = 'mongodb';
-      const query = '{"ping":1}';
-      backendApp.DBQueryWithCancel.mockResolvedValueOnce({ success: true, data: { ok: 1 } });
-
-      let renderer!: ReactTestRenderer;
-      await act(async () => {
-        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
-      });
-      editorState.position = { lineNumber: 1, column: query.length + 1 };
-
-      await act(async () => {
-        await findButton(renderer, 'Run').props.onClick();
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(messageApi.success).toHaveBeenCalledWith('Execution succeeded.');
-      expect(messageApi.success).not.toHaveBeenCalledWith('执行成功。');
-    });
-
-    it('shows the non-Mongo multi-result success toast in English', async () => {
-      storeState.languagePreference = 'en-US';
-      setCurrentLanguage('en-US');
-      const query = 'select 1 as a; select 2 as b;';
-      backendApp.DBQueryMulti.mockResolvedValueOnce({
-        success: true,
-        data: [
-          { columns: ['a'], rows: [{ a: 1 }] },
-          { columns: ['b'], rows: [{ b: 2 }] },
-        ],
-      });
-
-      let renderer!: ReactTestRenderer;
-      await act(async () => {
-        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
-      });
-      editorState.selection = {
-        startLineNumber: 1,
-        startColumn: 1,
-        endLineNumber: 1,
-        endColumn: query.length + 1,
-        positionLineNumber: 1,
-        positionColumn: query.length + 1,
-      };
-
-      await act(async () => {
-        const runButton = findButton(renderer, 'Run');
-        runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-        await runButton.props.onClick();
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(backendApp.DBQueryWithCancel).not.toHaveBeenCalled();
-      expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(1);
-      expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('select 1 as a');
-      expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('select 2 as b');
-      expect(messageApi.success).toHaveBeenCalledWith('Execution finished and produced 2 result sets.');
-      expect(messageApi.success).not.toHaveBeenCalledWith('已执行完成，生成 2 个结果集。');
-    });
-
-    it('shows the non-Mongo zero-result success toast in English', async () => {
-      storeState.languagePreference = 'en-US';
-      setCurrentLanguage('en-US');
-      const query = 'update users set active = 1 where 1 = 0;';
-      backendApp.DBQueryMulti.mockResolvedValueOnce({ success: true, data: [] });
-
-      let renderer!: ReactTestRenderer;
-      await act(async () => {
-        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
-      });
-      editorState.selection = {
-        startLineNumber: 1,
-        startColumn: 1,
-        endLineNumber: 1,
-        endColumn: query.length + 1,
-        positionLineNumber: 1,
-        positionColumn: query.length + 1,
-      };
-
-      await act(async () => {
-        const runButton = findButton(renderer, 'Run');
-        runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-        await runButton.props.onClick();
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(backendApp.DBQueryWithCancel).not.toHaveBeenCalled();
-      expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(1);
-      expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('update users set active = 1 where 1 = 0');
-      expect(messageApi.success).toHaveBeenCalledWith('Execution succeeded.');
-      expect(messageApi.success).not.toHaveBeenCalledWith('执行成功。');
-    });
-
-    it('shows the wrapped execution failure toast in English while preserving raw error detail', async () => {
-      storeState.languagePreference = 'en-US';
-      setCurrentLanguage('en-US');
-      const query = 'select 1;';
-      backendApp.DBQueryMulti.mockRejectedValueOnce(new Error('driver exploded'));
-
-      let renderer!: ReactTestRenderer;
-      await act(async () => {
-        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
-      });
-      editorState.selection = {
-        startLineNumber: 1,
-        startColumn: 1,
-        endLineNumber: 1,
-        endColumn: query.length + 1,
-        positionLineNumber: 1,
-        positionColumn: query.length + 1,
-      };
-
-      await act(async () => {
-        const runButton = findButton(renderer, 'Run');
-        runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-        await runButton.props.onClick();
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(backendApp.DBQueryWithCancel).not.toHaveBeenCalled();
-      expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(1);
-      expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('select 1');
-      expect(messageApi.error).toHaveBeenCalledWith('Query execution failed: driver exploded');
-      expect(messageApi.error).not.toHaveBeenCalledWith('Error executing query: driver exploded');
-    });
-  });
-
-  describe('result refresh toast localization', () => {
-    const renderAndRunQuery = async (query: string) => {
-      let renderer!: ReactTestRenderer;
-      await act(async () => {
-        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
-      });
-      editorState.selection = {
-        startLineNumber: 1,
-        startColumn: 1,
-        endLineNumber: 1,
-        endColumn: query.length + 1,
-        positionLineNumber: 1,
-        positionColumn: query.length + 1,
-      };
-
-      await act(async () => {
-        const runButton = findButton(renderer, 'Run');
-        runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-        await runButton.props.onClick();
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(dataGridState.latestProps?.onReload).toEqual(expect.any(Function));
-    };
-
-    it('shows the response refresh failure toast in English while preserving raw error detail', async () => {
-      storeState.languagePreference = 'en-US';
-      setCurrentLanguage('en-US');
-      const query = 'select 1 as a;';
-      backendApp.DBQueryMulti
-        .mockResolvedValueOnce({
-          success: true,
-          data: [{ columns: ['a'], rows: [{ a: 1 }] }],
-        })
-        .mockResolvedValueOnce({ success: false, message: 'network down' });
-
-      await renderAndRunQuery(query);
-      messageApi.error.mockClear();
-
-      await act(async () => {
-        await dataGridState.latestProps.onReload();
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(messageApi.error).toHaveBeenCalledWith('Refresh failed: network down');
-      expect(messageApi.error).not.toHaveBeenCalledWith('刷新失败: network down');
-    });
-
-    it('shows the rejected refresh failure toast in English while preserving raw error detail', async () => {
-      storeState.languagePreference = 'en-US';
-      setCurrentLanguage('en-US');
-      const query = 'select 1 as a;';
-      backendApp.DBQueryMulti
-        .mockResolvedValueOnce({
-          success: true,
-          data: [{ columns: ['a'], rows: [{ a: 1 }] }],
-        })
-        .mockRejectedValueOnce(new Error('socket closed'));
-
-      await renderAndRunQuery(query);
-      messageApi.error.mockClear();
-
-      await act(async () => {
-        await dataGridState.latestProps.onReload();
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      expect(messageApi.error).toHaveBeenCalledWith('Refresh failed: socket closed');
-      expect(messageApi.error).not.toHaveBeenCalledWith('刷新失败: socket closed');
-    });
-  });
-
-  it('shows "No running query to cancel." in English when stop is clicked before a query id exists', async () => {
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-
-    backendApp.GenerateQueryID.mockReturnValueOnce(new Promise(() => {}));
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'select 1;' })} />);
-    });
-
-    await act(async () => {
-      findButton(renderer, 'Run').props.onClick();
-      await Promise.resolve();
-    });
-
-    await act(async () => {
-      await findButton(renderer, 'Stop').props.onClick();
-    });
-
-    expect(messageApi.warning).toHaveBeenCalledWith('No running query to cancel.');
-    expect(messageApi.warning).not.toHaveBeenCalledWith('没有正在运行的查询可取消');
-  });
-
-  it('shows "Query canceled." in English when stop cancels a running query', async () => {
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-
-    backendApp.GenerateQueryID.mockResolvedValueOnce('query-1');
-    backendApp.DBQueryMulti.mockReturnValueOnce(new Promise(() => {}));
-    backendApp.CancelQuery.mockResolvedValueOnce({ success: true });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'select 1;' })} />);
-    });
-
-    await act(async () => {
-      findButton(renderer, 'Run').props.onClick();
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    await act(async () => {
-      await findButton(renderer, 'Stop').props.onClick();
-    });
-
-    expect(messageApi.success).toHaveBeenCalledWith('Query canceled.');
-    expect(messageApi.success).not.toHaveBeenCalledWith('查询已取消');
-  });
-
-  it('shows "Failed to cancel query" in English while preserving the raw error detail', async () => {
-    storeState.languagePreference = 'en-US';
-    setCurrentLanguage('en-US');
-
-    backendApp.GenerateQueryID.mockResolvedValueOnce('query-1');
-    backendApp.DBQueryMulti.mockReturnValueOnce(new Promise(() => {}));
-    backendApp.CancelQuery.mockRejectedValueOnce(new Error('network down'));
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'select 1;' })} />);
-    });
-
-    await act(async () => {
-      findButton(renderer, 'Run').props.onClick();
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    await act(async () => {
-      await findButton(renderer, 'Stop').props.onClick();
-    });
-
-    expect(messageApi.error).toHaveBeenCalledWith('Failed to cancel query: network down');
-    expect(messageApi.error).not.toHaveBeenCalledWith('取消查询失败: network down');
-  });
-
-  it('runs only appended SQL and keeps existing results after a full editor execution', async () => {
-    backendApp.DBQueryMulti
-      .mockResolvedValueOnce({
-        success: true,
-        data: [{ columns: ['a'], rows: [{ a: 1 }] }],
-      })
-      .mockResolvedValueOnce({
-        success: true,
-        data: [{ columns: ['b'], rows: [{ b: 2 }] }],
-      });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1 as a;',
-      })} />);
-    });
-
-    editorState.position = { lineNumber: 1, column: 'select 1 as a;'.length + 1 };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    editorState.value = 'select 1 as a;\nselect 2 as b;';
-    editorState.position = { lineNumber: 2, column: 'select 2 as b;'.length + 1 };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(2);
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('select 1 as a');
-    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).toContain('select 2 as b');
-    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).not.toContain('select 1 as a');
-    expect(textContent(renderer!.toJSON())).toContain('结果 1');
-    expect(textContent(renderer!.toJSON())).toContain('结果 2');
-    expect(renderer!.root.findAll((node) => {
-      const className = String(node.props?.className || '');
-      return className.includes('query-result-tab-count') && textContent(node) === '1';
-    })).toHaveLength(2);
-  });
-
-  it('replaces existing result tabs when rerunning the same formatted SQL', async () => {
-    backendApp.DBQueryMulti
-      .mockResolvedValueOnce({
-        success: true,
-        data: [
-          { columns: ['id'], rows: [{ id: 1 }, { id: 2 }, { id: 3 }] },
-          { columns: ['id'], rows: Array.from({ length: 10 }, (_, index) => ({ id: index + 1 })) },
-        ],
-      })
-      .mockResolvedValueOnce({
-        success: true,
-        data: [
-          { columns: ['id'], rows: [{ id: 11 }, { id: 12 }, { id: 13 }] },
-          { columns: ['id'], rows: Array.from({ length: 10 }, (_, index) => ({ id: index + 11 })) },
-        ],
-      });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'SELECT * FROM fs_org_auth_application;\nSELECT * FROM fs_bcp_auth_info;',
-      })} />);
-    });
-
-    editorState.position = { lineNumber: 1, column: 'SELECT * FROM fs_org_auth_application;'.length + 1 };
-    editorState.selection = null;
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(textContent(renderer!.toJSON())).toContain('结果 1');
-    expect(textContent(renderer!.toJSON())).toContain('结果 2');
-
-    editorState.value = [
-      'SELECT',
-      '    *',
-      'FROM',
-      '    fs_org_auth_application;',
-      '',
-      'SELECT',
-      '    *',
-      'FROM',
-      '    fs_bcp_auth_info;',
-    ].join('\n');
-    editorState.position = { lineNumber: 4, column: '    fs_org_auth_application;'.length + 1 };
-    editorState.selection = null;
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(2);
-    expect(textContent(renderer!.toJSON())).toContain('结果 1');
-    expect(textContent(renderer!.toJSON())).toContain('结果 2');
-    expect(textContent(renderer!.toJSON())).not.toContain('结果 3');
-    expect(textContent(renderer!.toJSON())).not.toContain('结果 4');
-    expect(renderer!.root.findAll((node) => {
-      const className = String(node.props?.className || '');
-      return className.includes('query-result-tab-label');
-    })).toHaveLength(2);
-  });
-
-  it('provides context menu actions for query result tabs', async () => {
-    backendApp.DBQueryMulti.mockResolvedValue({
-      success: true,
-      data: [
-        { columns: ['a'], rows: [{ a: 1 }] },
-        { columns: ['b'], rows: [{ b: 2 }] },
-        { columns: ['c'], rows: [{ c: 3 }] },
-      ],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1 as a;\nselect 2 as b;\nselect 3 as c;',
-      })} />);
-    });
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(renderer!.root.findAll((node) => {
-      const className = String(node.props?.className || '');
-      return className.includes('query-result-tab-label');
-    })).toHaveLength(3);
-
-    await act(async () => {
-      renderer!.root.findAll((node) => node.type === 'button' && textContent(node) === '关闭右侧')[1].props.onClick();
-    });
-    expect(renderer!.root.findAll((node) => {
-      const className = String(node.props?.className || '');
-      return className.includes('query-result-tab-label');
-    })).toHaveLength(2);
-    expect(textContent(renderer!.toJSON())).not.toContain('结果 3');
-
-    await act(async () => {
-      renderer!.root.findAll((node) => node.type === 'button' && textContent(node) === '关闭左侧')[1].props.onClick();
-    });
-    expect(renderer!.root.findAll((node) => {
-      const className = String(node.props?.className || '');
-      return className.includes('query-result-tab-label');
-    })).toHaveLength(1);
-    expect(dataGridState.latestProps?.data).toEqual(expect.arrayContaining([expect.objectContaining({ b: 2 })]));
-    expect(dataGridState.latestProps?.data).not.toEqual(expect.arrayContaining([expect.objectContaining({ a: 1 })]));
-    expect(dataGridState.latestProps?.data).not.toEqual(expect.arrayContaining([expect.objectContaining({ c: 3 })]));
-
-    await act(async () => {
-      renderer!.root.findAll((node) => node.type === 'button' && textContent(node) === '关闭所有')[0].props.onClick();
-    });
-    expect(renderer!.root.findAll((node) => {
-      const className = String(node.props?.className || '');
-      return className.includes('query-result-tab-label');
-    })).toHaveLength(0);
-  });
-
-  it('replaces the current result when rerunning the same cursor SQL', async () => {
-    backendApp.DBQueryMulti
-      .mockResolvedValueOnce({
-        success: true,
-        data: [{ columns: ['a'], rows: [{ a: 1 }] }],
-      })
-      .mockResolvedValueOnce({
-        success: true,
-        data: [{ columns: ['a'], rows: [{ a: 10 }] }],
-      });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1 as a;\nselect 2 as b;\nselect 3 as c;',
-      })} />);
-    });
-
-    editorState.position = { lineNumber: 1, column: 'select 1 as a;'.length + 1 };
-    editorState.selection = {
-      startLineNumber: 1,
-      startColumn: 'select 1 as a;'.length + 1,
-      endLineNumber: 1,
-      endColumn: 'select 1 as a;'.length + 1,
-      positionLineNumber: 1,
-      positionColumn: 'select 1 as a;'.length + 1,
-    };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    const tabLabels = renderer!.root.findAll((node) => textContent(node).includes('结果 '));
-    expect(textContent(renderer!.toJSON())).toContain('结果 1');
-    expect(textContent(renderer!.toJSON())).not.toContain('结果 2');
-    expect(tabLabels.length).toBeGreaterThan(0);
-    expect(dataGridState.latestProps?.data).toEqual(expect.arrayContaining([expect.objectContaining({ a: 10 })]));
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(2);
-    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).toContain('select 1 as a');
-    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).not.toContain('select 2 as b');
-  });
-
-  it('appends a result when running a different cursor SQL after an existing result', async () => {
-    backendApp.DBQueryMulti
-      .mockResolvedValueOnce({
-        success: true,
-        data: [{ columns: ['a'], rows: [{ a: 1 }] }],
-      })
-      .mockResolvedValueOnce({
-        success: true,
-        data: [{ columns: ['b'], rows: [{ b: 2 }] }],
-      });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1 as a;\nselect 2 as b;\nselect 3 as c;',
-      })} />);
-    });
-
-    editorState.position = { lineNumber: 1, column: 'select 1 as a;'.length + 1 };
-    editorState.selection = {
-      startLineNumber: 1,
-      startColumn: 'select 1 as a;'.length + 1,
-      endLineNumber: 1,
-      endColumn: 'select 1 as a;'.length + 1,
-      positionLineNumber: 1,
-      positionColumn: 'select 1 as a;'.length + 1,
-    };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    editorState.position = { lineNumber: 2, column: 'select 2 as b;'.length + 1 };
-    editorState.selection = {
-      startLineNumber: 2,
-      startColumn: 'select 2 as b;'.length + 1,
-      endLineNumber: 2,
-      endColumn: 'select 2 as b;'.length + 1,
-      positionLineNumber: 2,
-      positionColumn: 'select 2 as b;'.length + 1,
-    };
-
-    await act(async () => {
-      const runButton = findButton(renderer!, '运行');
-      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
-      await runButton.props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(2);
-    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).toContain('select 2 as b');
-    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).not.toContain('select 1 as a');
-    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).not.toContain('select 3 as c');
-    expect(textContent(renderer!.toJSON())).toContain('结果 1');
-    expect(textContent(renderer!.toJSON())).toContain('结果 2');
-    expect(dataGridState.latestProps?.data).toEqual(expect.arrayContaining([expect.objectContaining({ b: 2 })]));
-    expect(dataGridState.latestProps?.data).not.toEqual(expect.arrayContaining([expect.objectContaining({ a: 1 })]));
-  });
-
-  it('renders compact result tab labels with row counts outside the title text', async () => {
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [
-        { columns: ['a'], rows: [{ a: 1 }, { a: 2 }] },
-        { columns: ['b'], rows: [{ b: 3 }] },
-      ],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1 as a;\nselect 2 as b;',
-      })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    const tabLabels = renderer!.root.findAll((node) => {
-      const className = String(node.props?.className || '');
-      return className.includes('query-result-tab-label');
-    });
-    const counts = renderer!.root.findAll((node) => {
-      const className = String(node.props?.className || '');
-      return className.includes('query-result-tab-count');
-    });
-    const titles = renderer!.root.findAll((node) => {
-      const className = String(node.props?.className || '');
-      return className.includes('query-result-tab-text');
-    });
-
-    expect(tabLabels).toHaveLength(2);
-    expect(titles.map((node) => textContent(node))).toEqual(['结果 1', '结果 2']);
-    expect(counts.map((node) => textContent(node))).toEqual(['2', '1']);
-    expect(textContent(renderer!.toJSON())).not.toContain('结果 1 (2)');
-  });
-
-  it('keeps query result tabs compact, centered, and readable in v2 UI', () => {
-    const source = readFileSync(new URL('./QueryEditorResultsPanel.tsx', import.meta.url), 'utf8');
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
-
-    expect(source).toContain('.query-result-tabs .ant-tabs-tab {');
-    expect(source).toContain('width: auto !important;');
-    expect(source).toContain('max-width: 148px !important;');
-    expect(source).toContain('height: 30px !important;');
-    expect(source).toContain('align-items: center !important;');
-    expect(source).toContain('font-size: 14px !important;');
-    expect(source).toContain('.query-result-tab-text {');
-    expect(source).toContain('user-select: none;');
-    expect(source).toContain('font-weight: 700;');
-    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab {');
-    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab-btn {');
-    expect(css).toContain('user-select: none;');
-    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-results .query-result-tab-text {');
-  });
-
-  it('keeps the v2 query editor toolbar grouped and compact', () => {
-    const source = readFileSync(new URL('./QueryEditor.tsx', import.meta.url), 'utf8');
-    const toolbarSource = readFileSync(new URL('./QueryEditorToolbar.tsx', import.meta.url), 'utf8');
-    const resultsPanelSource = readFileSync(new URL('./QueryEditorResultsPanel.tsx', import.meta.url), 'utf8');
-    const transactionSettingsSource = readFileSync(new URL('./QueryEditorTransactionSettings.tsx', import.meta.url), 'utf8');
-    const transactionToolbarSource = readFileSync(new URL('./QueryEditorTransactionToolbar.tsx', import.meta.url), 'utf8');
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
-
-    expect(source).toContain('QueryEditorToolbar');
-    expect(toolbarSource).toContain('gn-v2-query-toolbar-selects');
-    expect(toolbarSource).toContain('gn-v2-query-toolbar-actions');
-    expect(toolbarSource).toContain('gn-v2-query-toolbar-connection-select');
-    expect(toolbarSource).toContain('gn-v2-query-toolbar-database-select');
-    expect(toolbarSource).toContain('gn-v2-query-toolbar-max-rows-select');
-    expect(toolbarSource).toContain('QueryEditorTransactionSettings');
-    expect(transactionSettingsSource).toContain('gn-v2-query-toolbar-transaction-mode-select');
-    expect(transactionSettingsSource).toContain('gn-v2-query-toolbar-transaction-delay-select');
-    expect(transactionSettingsSource).toContain('query_editor.transaction.mode.tooltip');
-    expect(transactionSettingsSource).toContain('query_editor.transaction.mode.manual');
-    expect(transactionSettingsSource).toContain('query_editor.transaction.mode.auto');
-    expect(transactionSettingsSource).not.toContain("label: '手动提交'");
-    expect(transactionSettingsSource).not.toContain("label: '自动提交'");
-    expect(transactionSettingsSource).toContain('query_editor.transaction.delay.immediate');
-    expect(transactionSettingsSource).toContain("label: '3s'");
-    expect(source).toContain('QueryEditorTransactionToolbar');
-    expect(transactionToolbarSource).toContain("className={isV2Ui ? 'gn-v2-query-transaction-toolbar' : undefined}");
-    expect(transactionToolbarSource).toContain(": null;");
-    expect(transactionToolbarSource).toContain('gn-v2-query-transaction-commit-button');
-    expect(transactionToolbarSource).toContain('gn-v2-toolbar-kbd');
-    expect(transactionToolbarSource).toContain('query_editor.transaction.status.auto_committing');
-    expect(transactionToolbarSource).toContain('onFinish');
-    expect(toolbarSource).toContain('{isV2Ui && pendingTransactionToolbar}');
-    expect(toolbarSource).not.toContain('gn-v2-query-toolbar-transaction-row');
-    expect(resultsPanelSource).not.toContain('transactionToolbar?: React.ReactNode;');
-    expect(toolbarSource).toContain('gn-v2-query-toolbar-action-group');
-    expect(toolbarSource).toContain('gn-v2-query-toolbar-action-pair');
-    expect(toolbarSource).toContain('const aiMenuItems');
-    expect(toolbarSource).toContain('key: "toggle-result-panel"');
-    expect(toolbarSource).toContain('{!isV2Ui && (');
-    expect(toolbarSource).toContain('trigger={["click"]}');
-    expect(toolbarSource.indexOf('onClick={onQuickSave}')).toBeLessThan(toolbarSource.indexOf('menu={{ items: aiMenuItems }}'));
-    expect(toolbarSource.indexOf('menu={{ items: aiMenuItems }}')).toBeLessThan(toolbarSource.indexOf('menu={{ items: moreMenuItems }}'));
-    expect(toolbarSource.indexOf('menu={{ items: moreMenuItems }}')).toBeLessThan(toolbarSource.indexOf('icon={<FormatPainterOutlined />}'));
-    expect(transactionSettingsSource).toContain('style={isV2Ui ? undefined : { width: 78 }}');
-    expect(transactionSettingsSource).toContain('style={isV2Ui ? undefined : { width: 68 }}');
-    expect(toolbarSource).toContain('style={isV2Ui ? undefined : { width: 200 }}');
-    expect(toolbarSource).toContain('style={isV2Ui ? undefined : { width: 170 }}');
-
-    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-selects');
-    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-actions');
-    expect(css).toContain('width: 74px !important;');
-    expect(css).toContain('width: 62px !important;');
-    expect(css).toContain('flex: 0 0 auto !important;');
-    expect(css).toContain('justify-content: flex-start;');
-    expect(css).toContain('height: 32px !important;');
-    expect(css).toContain('line-height: 30px !important;');
-    expect(css).toContain('display: inline-flex !important;');
-    expect(css).toContain('gap: 6px;');
-    expect(css).toContain('overflow-x: auto;');
-    expect(css).toContain('overflow-y: hidden;');
-    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-action-pair');
-    expect(css).toContain('gap: 8px;');
-    expect(css).toContain('margin-left: 0 !important;');
-    expect(css).toContain('max-width: 760px;');
-    expect(css).toContain('width: 140px !important;');
-    expect(css).toContain('width: 166px !important;');
-    expect(css).toContain('width: 132px !important;');
-    expect(css).toContain('width: 34px !important;');
-    expect(css).toContain('@media (max-width: 900px)');
-    expect(css).not.toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-transaction-row {');
-
-    const queryToolbarMainCss = css.slice(css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-main {'), css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-selects {'));
-    expect(queryToolbarMainCss).toContain('flex-wrap: nowrap;');
-    expect(queryToolbarMainCss).toContain('width: max-content;');
-    expect(queryToolbarMainCss).not.toContain('flex-wrap: wrap;');
-    expect(queryToolbarMainCss).not.toContain('margin-left: auto;');
-    expect(queryToolbarMainCss).not.toContain('justify-content: flex-end;');
-  });
-
-  it('keeps custom SQL snippet syntax help editable and uses it in completion details', () => {
-    const modalSource = readFileSync(new URL('./SnippetSettingsModal.tsx', import.meta.url), 'utf8');
-    const source = readFileSync(new URL('./QueryEditor.tsx', import.meta.url), 'utf8');
-
-    expect(modalSource).toContain('片段语法说明（可编辑）');
-    expect(modalSource).toContain('data-sql-snippet-syntax-help-editor="true"');
-    expect(modalSource).toContain("defaultActiveKey={['snippet-help']}");
-    expect(modalSource).toContain('footer={null}');
-    expect(modalSource).toContain('data-sql-snippet-action-row="true"');
-    expect(modalSource).toContain('body: { paddingTop: 8, paddingBottom: 24 }');
-    expect(modalSource).toContain("size=\"large\"");
-    expect(modalSource).toContain('minWidth: 96');
-    expect(modalSource).toContain('syntaxHelp');
-    expect(modalSource).toContain('占位符语法参考');
-    expect(source).toContain('s.syntaxHelp || s.description || s.body');
-  });
-
-  it('coalesces editor result splitter dragging through requestAnimationFrame', async () => {
-    const moveListeners: Array<(event: MouseEvent) => void> = [];
-    const upListeners: Array<() => void> = [];
-    const frameCallbacks: FrameRequestCallback[] = [];
-    vi.mocked(document.addEventListener).mockImplementation((type: string, listener: any) => {
-      if (type === 'mousemove') moveListeners.push(listener);
-      if (type === 'mouseup') upListeners.push(listener);
-    });
-    vi.mocked(window.requestAnimationFrame).mockImplementation((callback: FrameRequestCallback) => {
-      frameCallbacks.push(callback);
-      return frameCallbacks.length;
-    });
-
-    let renderer!: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ resultPanelVisible: true })} />);
-    });
-
-    const resizer = renderer.root.find((node) => node.props?.title === '拖动调整高度');
-    await act(async () => {
-      resizer.props.onMouseDown({ clientY: 300, preventDefault: vi.fn() });
-      moveListeners.forEach((listener) => listener({ clientY: 340 } as MouseEvent));
-      moveListeners.forEach((listener) => listener({ clientY: 380 } as MouseEvent));
-    });
-
-    expect(window.requestAnimationFrame).toHaveBeenCalledTimes(1);
-    expect(editorState.editor.layout).not.toHaveBeenCalled();
-
-    await act(async () => {
-      frameCallbacks.splice(0).forEach((callback) => callback(16));
-    });
-    expect(editorState.editor.layout).toHaveBeenCalledTimes(1);
-
-    await act(async () => {
-      upListeners.forEach((listener) => listener());
-    });
-    expect(editorState.editor.layout).toHaveBeenCalledTimes(2);
-    expect(document.removeEventListener).toHaveBeenCalledWith('mousemove', expect.any(Function));
-    expect(document.removeEventListener).toHaveBeenCalledWith('mouseup', expect.any(Function));
-  });
-
-  it('inserts sidebar object text when dropped into the SQL editor', async () => {
-    const domListeners: Record<string, ((event?: any) => void)[]> = {};
-    editorState.domNode = {
-      style: { cursor: '' },
-      addEventListener: vi.fn((type: string, listener: (event?: any) => void) => {
-        domListeners[type] ||= [];
-        domListeners[type].push(listener);
-      }),
-      removeEventListener: vi.fn(),
-    } as any;
-
-    await act(async () => {
-      create(<QueryEditor tab={createTab({ query: 'select * from ' })} />);
-    });
-
-    editorState.position = { lineNumber: 1, column: 'select * from '.length + 1 };
-
-    await act(async () => {
-      domListeners.drop?.forEach((listener) => listener({
-        clientX: 10,
-        clientY: 10,
-        preventDefault: vi.fn(),
-        stopPropagation: vi.fn(),
-        dataTransfer: {
-          types: ['application/x-gonavi-sql-object', 'text/plain'],
-          getData: (type: string) => {
-            if (type === 'application/x-gonavi-sql-object') {
-              return JSON.stringify({ text: 'reporting.active_users' });
-            }
-            if (type === 'text/plain') {
-              return 'reporting.active_users';
-            }
-            return '';
-          },
-        },
-      }));
-    });
-
-    expect(editorState.editor.executeEdits).toHaveBeenCalledWith(
-      'gonavi-sidebar-drop',
-      [expect.objectContaining({ text: 'reporting.active_users' })],
-    );
-    expect(editorState.value).toContain('reporting.active_users');
-  });
-
-  it('prevents Monaco native drag marker and keeps metadata hover after sidebar object drops', async () => {
-    const domListeners: Record<string, ((event?: any) => void)[]> = {};
-    editorState.domNode = {
-      style: { cursor: '' },
-      addEventListener: vi.fn((type: string, listener: (event?: any) => void) => {
-        domListeners[type] ||= [];
-        domListeners[type].push(listener);
-      }),
-      removeEventListener: vi.fn(),
-    } as any;
-    editorState.editor.getTargetAtClientPoint = vi.fn(() => ({
-      position: { lineNumber: 1, column: 'SELECT * FROM '.length + 1 },
-    }));
-    editorState.value = 'SELECT * FROM ';
-    autoFetchState.visible = true;
-    backendApp.DBGetDatabases.mockResolvedValueOnce({ success: true, data: [{ Database: 'front_end_sys' }] });
-    backendApp.DBGetTables.mockResolvedValueOnce({ success: true, data: [{ Tables_in_front_end_sys: 'fs_mkefu_regist_record' }] });
-    backendApp.DBGetAllColumns.mockResolvedValueOnce({ success: true, data: [] });
-
-    await act(async () => {
-      create(<QueryEditor tab={createTab({ query: editorState.value, dbName: 'front_end_sys' })} />);
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    const dragOverEvent = {
-      preventDefault: vi.fn(),
-      stopPropagation: vi.fn(),
-      dataTransfer: {
-        types: ['application/x-gonavi-sql-object', 'text/plain'],
-        dropEffect: 'none',
-        getData: vi.fn(() => ''),
-      },
-    };
-    await act(async () => {
-      domListeners.dragover?.forEach((listener) => listener(dragOverEvent));
-    });
-
-    expect(dragOverEvent.preventDefault).toHaveBeenCalled();
-    expect(dragOverEvent.stopPropagation).toHaveBeenCalled();
-    expect(dragOverEvent.dataTransfer.dropEffect).toBe('copy');
-    expect(dragOverEvent.dataTransfer.getData).not.toHaveBeenCalled();
-
-    await act(async () => {
-      domListeners.drop?.forEach((listener) => listener({
-        clientX: 10,
-        clientY: 10,
-        preventDefault: vi.fn(),
-        stopPropagation: vi.fn(),
-        dataTransfer: {
-          types: ['application/x-gonavi-sql-object', 'text/plain'],
-          getData: (type: string) => {
-            if (type === 'application/x-gonavi-sql-object') {
-              return JSON.stringify({ text: 'fs_mkefu_regist_record' });
-            }
-            if (type === 'text/plain') {
-              return 'fs_mkefu_regist_record';
-            }
-            return '';
-          },
-        },
-      }));
-    });
-
-    const hover = editorState.hoverProviders[0]?.provideHover(
-      editorState.editor.getModel(),
-      { lineNumber: 1, column: 'SELECT * FROM fs_mkefu_regist_record'.length },
-    );
-    expect(editorState.value).toContain('fs_mkefu_regist_record');
-    expect(hover?.contents?.[0]?.value).toContain('**表** `fs_mkefu_regist_record`');
-
-    await act(async () => {
-      editorState.mouseDownListeners[0]?.({
-        target: { position: { lineNumber: 1, column: 'SELECT * FROM fs_mkefu_regist_record'.length } },
-        event: {
-          leftButton: true,
-          ctrlKey: true,
-          metaKey: false,
-          preventDefault: vi.fn(),
-          stopPropagation: vi.fn(),
-        },
-      });
-    });
-
-    expect(storeState.setActiveContext).toHaveBeenCalledWith({ connectionId: 'conn-1', dbName: 'front_end_sys' });
-    expect(storeState.addTab).toHaveBeenCalledWith(expect.objectContaining({
-      type: 'table',
-      connectionId: 'conn-1',
-      dbName: 'front_end_sys',
-      tableName: 'fs_mkefu_regist_record',
-      objectType: 'table',
-    }));
-  });
-
-  it('keeps sidebar object navigation tied to the dragged database after drop', async () => {
-    const domListeners: Record<string, ((event?: any) => void)[]> = {};
-    editorState.domNode = {
-      style: { cursor: '' },
-      addEventListener: vi.fn((type: string, listener: (event?: any) => void) => {
-        domListeners[type] ||= [];
-        domListeners[type].push(listener);
-      }),
-      removeEventListener: vi.fn(),
-    } as any;
-    editorState.editor.getTargetAtClientPoint = vi.fn(() => ({
-      position: { lineNumber: 1, column: 'SELECT * FROM '.length + 1 },
-    }));
-    editorState.value = 'SELECT * FROM ';
-    autoFetchState.visible = true;
-    backendApp.DBGetDatabases.mockResolvedValueOnce({ success: true, data: [{ Database: 'main' }, { Database: 'front_end_sys' }] });
-    backendApp.DBGetTables
-      .mockResolvedValueOnce({ success: true, data: [{ Tables_in_main: 'users' }] })
-      .mockResolvedValueOnce({ success: true, data: [{ Tables_in_front_end_sys: 'fs_mkefu_regist_record' }] });
-    backendApp.DBGetAllColumns
-      .mockResolvedValueOnce({ success: true, data: [] })
-      .mockResolvedValueOnce({ success: true, data: [] });
-
-    await act(async () => {
-      create(<QueryEditor tab={createTab({ query: editorState.value, dbName: 'main' })} />);
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    await act(async () => {
-      domListeners.drop?.forEach((listener) => listener({
-        clientX: 10,
-        clientY: 10,
-        preventDefault: vi.fn(),
-        stopPropagation: vi.fn(),
-        dataTransfer: {
-          types: ['application/x-gonavi-sql-object', 'text/plain'],
-          getData: (type: string) => {
-            if (type === 'application/x-gonavi-sql-object') {
-              return JSON.stringify({
-                text: 'fs_mkefu_regist_record',
-                nodeType: 'table',
-                connectionId: 'conn-1',
-                dbName: 'front_end_sys',
-              });
-            }
-            if (type === 'text/plain') {
-              return 'fs_mkefu_regist_record';
-            }
-            return '';
-          },
-        },
-      }));
-    });
-
-    expect(editorState.value).toContain('front_end_sys.fs_mkefu_regist_record');
-
-    await act(async () => {
-      editorState.mouseDownListeners[0]?.({
-        target: { position: { lineNumber: 1, column: 'SELECT * FROM front_end_sys.fs_mkefu_regist_record'.length } },
-        event: {
-          leftButton: true,
-          ctrlKey: true,
-          metaKey: false,
-          preventDefault: vi.fn(),
-          stopPropagation: vi.fn(),
-        },
-      });
-    });
-
-    expect(storeState.setActiveContext).toHaveBeenCalledWith({ connectionId: 'conn-1', dbName: 'front_end_sys' });
-    expect(storeState.addTab).toHaveBeenCalledWith(expect.objectContaining({
-      type: 'table',
-      connectionId: 'conn-1',
-      dbName: 'front_end_sys',
-      tableName: 'fs_mkefu_regist_record',
-      objectType: 'table',
-    }));
-  });
-
-  it('runs selected SQL before cursor SQL', async () => {
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['selected'], rows: [{ selected: 2 }] }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'select 1;\nselect 2 as selected;\nselect 3;',
-      })} />);
-    });
-
-    editorState.position = { lineNumber: 1, column: 4 };
-    editorState.selection = {
-      startLineNumber: 2,
-      startColumn: 1,
-      endLineNumber: 2,
-      endColumn: 'select 2 as selected'.length + 1,
-    };
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as selected'), 'query-1');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 1');
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3');
-  });
-
-  it('allows editable table columns while leaving expression columns out of commits', async () => {
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{
-        columns: ['DISPLAY_NAME', 'NAME_UPPER', '__gonavi_locator_1_ID'],
-        rows: [{ DISPLAY_NAME: 'old-name', NAME_UPPER: 'OLD-NAME', __gonavi_locator_1_ID: 7 }],
-      }],
-    });
-    backendApp.DBGetColumns.mockResolvedValueOnce({
-      success: true,
-      data: [{ name: 'ID', key: 'PRI' }, { name: 'NAME', key: '' }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({
-        dbName: 'main',
-        query: 'SELECT NAME AS DISPLAY_NAME, UPPER(NAME) AS NAME_UPPER FROM users',
-      })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(dataGridState.latestProps?.tableName).toBe('users');
-    expect(dataGridState.latestProps?.editLocator).toMatchObject({
-      strategy: 'primary-key',
-      columns: ['ID'],
-      valueColumns: ['__gonavi_locator_1_ID'],
-      hiddenColumns: ['__gonavi_locator_1_ID'],
-      writableColumns: {
-        DISPLAY_NAME: 'NAME',
-      },
-      readOnly: false,
-    });
-    expect(dataGridState.latestProps?.readOnly).toBe(false);
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('`ID` AS `__gonavi_locator_1_ID`');
-    expect(messageApi.warning).not.toHaveBeenCalled();
-  });
-
-  it('keeps DuckDB qualified table query results writable when primary key metadata arrives', async () => {
-    storeState.connections[0].config.type = 'duckdb';
-    storeState.connections[0].config.database = 'main';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['NAME', '__gonavi_locator_1_id'], rows: [{ NAME: 'launch', __gonavi_locator_1_id: 7 }] }],
-    });
-    backendApp.DBGetColumns.mockResolvedValueOnce({
-      success: true,
-      data: [{ name: 'id', key: 'PRI' }, { name: 'name', key: '' }],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM main.events' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(backendApp.DBGetColumns).toHaveBeenCalledWith(expect.anything(), 'main', 'main.events');
-    expect(dataGridState.latestProps?.tableName).toBe('main.events');
-    expect(dataGridState.latestProps?.pkColumns).toEqual(['id']);
-    expect(dataGridState.latestProps?.editLocator).toMatchObject({
-      strategy: 'primary-key',
-      columns: ['id'],
-      valueColumns: ['__gonavi_locator_1_id'],
-      hiddenColumns: ['__gonavi_locator_1_id'],
-      writableColumns: {
-        NAME: 'name',
-      },
-      readOnly: false,
-    });
-    expect(dataGridState.latestProps?.readOnly).toBe(false);
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('"id" AS "__gonavi_locator_1_id"');
-    expect(messageApi.warning).not.toHaveBeenCalled();
-  });
-
-  it('uses hidden DuckDB rowid when query results have no primary or unique key', async () => {
-    storeState.connections[0].config.type = 'duckdb';
-    storeState.connections[0].config.database = 'main';
-    backendApp.DBQueryMulti.mockResolvedValueOnce({
-      success: true,
-      data: [{ columns: ['NAME', '__gonavi_duckdb_rowid__'], rows: [{ NAME: 'launch', __gonavi_duckdb_rowid__: 17 }] }],
-    });
-    backendApp.DBGetColumns.mockResolvedValueOnce({
-      success: true,
-      data: [{ name: 'name', key: '' }],
-    });
-    backendApp.DBGetIndexes.mockResolvedValueOnce({
-      success: true,
-      data: [],
-    });
-
-    let renderer: ReactTestRenderer;
-    await act(async () => {
-      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM main.events' })} />);
-    });
-
-    await act(async () => {
-      await findButton(renderer!, '运行').props.onClick();
-    });
-    await act(async () => {
-      await Promise.resolve();
-      await Promise.resolve();
-    });
-
-    expect(dataGridState.latestProps?.tableName).toBe('main.events');
-    expect(dataGridState.latestProps?.pkColumns).toEqual([]);
-    expect(dataGridState.latestProps?.editLocator).toMatchObject({
-      strategy: 'duckdb-rowid',
-      columns: ['rowid'],
-      valueColumns: ['__gonavi_duckdb_rowid__'],
-      hiddenColumns: ['__gonavi_duckdb_rowid__'],
-      writableColumns: {
-        NAME: 'name',
-      },
-      readOnly: false,
-    });
-    expect(dataGridState.latestProps?.readOnly).toBe(false);
-    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('rowid AS "__gonavi_duckdb_rowid__"');
-    expect(messageApi.warning).not.toHaveBeenCalled();
-  });
-
-  it.each([
-    'mysql',
-    'mariadb',
-    'oceanbase',
-    'diros',
-    'sphinx',
-    'postgres',
-    'kingbase',
-    'highgo',
-    'vastbase',
-    'opengauss',
-    'gaussdb',
-    'sqlserver',
-    'sqlite',
-    'duckdb',
-    'oracle',
-    'dameng',
-    'tdengine',
-    'clickhouse',
-  ])(
-    'keeps aggregate query results silently read-only for %s',
-    async (dbType) => {
-      storeState.connections[0].config.type = dbType;
-      storeState.connections[0].config.database = dbType === 'oracle' || dbType === 'dameng' ? 'APP' : 'main';
-      const forceReadOnlyQueryResult = dbType === 'tdengine' || dbType === 'clickhouse';
-      backendApp.DBQueryMulti.mockResolvedValueOnce({
-        success: true,
-        data: [{ columns: ['COUNT'], rows: [{ COUNT: 1 }] }],
-      });
-
-      let renderer: ReactTestRenderer;
-      await act(async () => {
-        renderer = create(<QueryEditor tab={createTab({
-          dbName: storeState.connections[0].config.database,
-          query: 'SELECT count(1) FROM users',
-        })} />);
-      });
-
-      await act(async () => {
-        await findButton(renderer!, '运行').props.onClick();
-      });
-      await act(async () => {
-        await Promise.resolve();
-        await Promise.resolve();
-      });
-
-      const expectedTableName = dbType === 'oracle' || dbType === 'dameng' ? 'USERS' : 'users';
-      expect(dataGridState.latestProps?.tableName).toBe(forceReadOnlyQueryResult ? undefined : expectedTableName);
-      expect(dataGridState.latestProps?.editLocator).toBeUndefined();
-      expect(dataGridState.latestProps?.readOnly).toBe(true);
-      expect(backendApp.DBGetColumns).not.toHaveBeenCalled();
-      expect(backendApp.DBGetIndexes).not.toHaveBeenCalled();
-      expect(messageApi.warning).not.toHaveBeenCalled();
-    },
-  );
 });
diff --git a/frontend/src/components/QueryEditor.results-and-drop.test.tsx b/frontend/src/components/QueryEditor.results-and-drop.test.tsx
new file mode 100644
index 0000000..b339419
--- /dev/null
+++ b/frontend/src/components/QueryEditor.results-and-drop.test.tsx
@@ -0,0 +1,2890 @@
+import React from 'react';
+import { readFileSync } from 'node:fs';
+import { act, create, type ReactTestRenderer } from 'react-test-renderer';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { readV2ThemeCss } from '../test/readV2ThemeCss';
+
+import { setCurrentLanguage } from '../i18n';
+import type { SavedQuery, TabData } from '../types';
+import { ORACLE_ROWID_LOCATOR_COLUMN } from '../utils/rowLocator';
+import { clearQueryTabDraft, clearSQLFileTabDraft, getQueryTabDraft, getSQLFileTabDraft } from '../utils/sqlFileTabDrafts';
+import QueryEditor, {
+  collectQueryEditorObjectDecorationCandidates,
+  resolveQueryEditorNavigationDecorations,
+  resolveQueryEditorNavigationTarget,
+} from './QueryEditor';
+
+const storeState = vi.hoisted(() => ({
+  connections: [
+    {
+      id: 'conn-1',
+      name: 'local',
+      config: {
+        type: 'mysql',
+        host: '127.0.0.1',
+        port: 3306,
+        user: 'root',
+        password: '',
+        database: 'main',
+      },
+    },
+  ],
+  addSqlLog: vi.fn(),
+  addTab: vi.fn(),
+  setActiveContext: vi.fn(),
+  updateQueryTabDraft: vi.fn(),
+  savedQueries: [] as SavedQuery[],
+  saveQuery: vi.fn(),
+  theme: 'light',
+  languagePreference: 'zh-CN' as 'zh-CN' | 'en-US',
+  appearance: { uiVersion: 'legacy' as 'legacy' | 'v2' },
+  sqlFormatOptions: { keywordCase: 'upper' as const },
+  setSqlFormatOptions: vi.fn(),
+  queryOptions: {
+    maxRows: 5000,
+    showColumnComment: true,
+    showColumnType: true,
+    showQueryResultsPanel: false,
+  },
+  setQueryOptions: vi.fn(),
+  sqlEditorTransactionOptions: {
+    commitMode: 'manual' as 'manual' | 'auto',
+    autoCommitDelayMs: 0,
+  },
+  setSqlEditorTransactionOptions: vi.fn(),
+  sqlEditorPendingTransactions: {} as Record<string, unknown>,
+  setSqlEditorPendingTransaction: vi.fn(),
+  shortcutOptions: {
+    runQuery: {
+      mac: { enabled: false, combo: '' },
+      windows: { enabled: false, combo: '' },
+    },
+    selectCurrentStatement: {
+      mac: { enabled: false, combo: '' },
+      windows: { enabled: false, combo: '' },
+    },
+    saveQuery: {
+      mac: { enabled: true, combo: 'Meta+S' },
+      windows: { enabled: true, combo: 'Ctrl+S' },
+    },
+    toggleQueryResultsPanel: {
+      mac: { enabled: true, combo: 'Meta+Shift+M' },
+      windows: { enabled: true, combo: 'Ctrl+Shift+M' },
+    },
+  },
+  activeTabId: 'tab-1',
+  aiPanelVisible: false,
+  setAIPanelVisible: vi.fn(),
+  sqlSnippets: [] as any[],
+}));
+
+const storeSubscribers = vi.hoisted(() => new Set<() => void>());
+
+const notifyStoreSubscribers = () => {
+  storeSubscribers.forEach((subscriber) => subscriber());
+};
+
+const backendApp = vi.hoisted(() => ({
+  DBQuery: vi.fn(),
+  DBQueryWithCancel: vi.fn(),
+  DBQueryMulti: vi.fn(),
+  DBQueryMultiTransactional: vi.fn(),
+  DBCommitTransaction: vi.fn(),
+  DBRollbackTransaction: vi.fn(),
+  DBGetTables: vi.fn(),
+  DBGetAllColumns: vi.fn(),
+  DBGetDatabases: vi.fn(),
+  DBGetColumns: vi.fn(),
+  DBGetIndexes: vi.fn(),
+  CancelQuery: vi.fn(),
+  GenerateQueryID: vi.fn(),
+  WriteSQLFile: vi.fn(),
+  ExportSQLFile: vi.fn(),
+}));
+
+const messageApi = vi.hoisted(() => ({
+  error: vi.fn(),
+  info: vi.fn(),
+  success: vi.fn(),
+  warning: vi.fn(),
+}));
+
+const dataGridState = vi.hoisted(() => ({
+  latestProps: null as any,
+}));
+
+const tabsState = vi.hoisted(() => ({
+  activeKey: undefined as string | undefined,
+}));
+
+const autoFetchState = vi.hoisted(() => ({
+  visible: false,
+}));
+
+const editorState = vi.hoisted(() => {
+  const state = {
+    value: '',
+    editor: null as any,
+    domNode: { style: { cursor: '' }, addEventListener: vi.fn(), removeEventListener: vi.fn() },
+    position: { lineNumber: 1, column: 1 },
+    selection: null as any,
+    providers: [] as any[],
+    hoverProviders: [] as any[],
+    contentChangeListeners: [] as Array<() => void>,
+    cursorPositionListeners: [] as Array<(event: any) => void>,
+    modelContentListeners: [] as Array<(event: any) => void>,
+    mouseMoveListeners: [] as Array<(event: any) => void>,
+    mouseDownListeners: [] as Array<(event: any) => void>,
+    mouseLeaveListeners: [] as Array<() => void>,
+    hasTextFocus: true,
+    decorationIds: [] as string[],
+    contentHoverCalls: [] as any[],
+    latestOnChange: null as null | ((value?: string) => void),
+  };
+  const offsetAt = (position: { lineNumber: number; column: number }) => {
+    const text = state.value;
+    let offset = 0;
+    for (let lineNumber = 1; lineNumber < Math.max(1, position.lineNumber); lineNumber++) {
+      const nextLineBreak = text.indexOf('\n', offset);
+      if (nextLineBreak === -1) {
+        return text.length;
+      }
+      offset = nextLineBreak + 1;
+    }
+    return Math.min(text.length, offset + Math.max(0, position.column - 1));
+  };
+  const positionAt = (offset: number) => {
+    const text = state.value.replace(/\r\n/g, '\n');
+    const safeOffset = Math.max(0, Math.min(text.length, Number(offset) || 0));
+    const prefix = text.slice(0, safeOffset);
+    const lines = prefix.split('\n');
+    return { lineNumber: lines.length, column: (lines[lines.length - 1]?.length || 0) + 1 };
+  };
+  const valueInRange = (range: any) => {
+    if (!range) return '';
+    const start = offsetAt({ lineNumber: range.startLineNumber, column: range.startColumn });
+    const end = offsetAt({ lineNumber: range.endLineNumber, column: range.endColumn });
+    return state.value.slice(Math.min(start, end), Math.max(start, end));
+  };
+  const model = {
+    getValue: vi.fn(() => state.value),
+    getValueLength: vi.fn(() => state.value.length),
+    setValue: (value: string) => {
+      state.value = value;
+    },
+    getValueInRange: valueInRange,
+    getLineContent: (lineNumber: number) => state.value.replace(/\r\n/g, '\n').split('\n')[lineNumber - 1] || '',
+    getLineCount: () => state.value.replace(/\r\n/g, '\n').split('\n').length,
+    getLineMaxColumn: (lineNumber: number) => (state.value.replace(/\r\n/g, '\n').split('\n')[lineNumber - 1] || '').length + 1,
+    getWordUntilPosition: (position: { lineNumber: number; column: number }) => {
+      const lineContent = model.getLineContent(position.lineNumber);
+      const beforeCursor = lineContent.slice(0, Math.max(0, position.column - 1));
+      const word = beforeCursor.match(/[A-Za-z0-9_$]*$/)?.[0] || '';
+      return {
+        startColumn: position.column - word.length,
+        endColumn: position.column,
+        word,
+      };
+    },
+    getOffsetAt: offsetAt,
+    getPositionAt: positionAt,
+  };
+  state.editor = {
+    getValue: vi.fn(() => state.value),
+    setValue: vi.fn((value: string) => {
+      state.value = value;
+    }),
+    getModel: vi.fn(() => model),
+    getPosition: vi.fn(() => state.position),
+    setPosition: vi.fn((position: any) => {
+      state.position = position;
+    }),
+    getSelection: vi.fn(() => state.selection),
+    getDomNode: vi.fn(() => state.domNode),
+    getContribution: vi.fn((id: string) => {
+      if (id === 'editor.contrib.contentHover') {
+        return {
+          showContentHover: vi.fn((range: any, mode: any, source: any, focus: any) => {
+            state.contentHoverCalls.push({ range, mode, source, focus });
+          }),
+        };
+      }
+      return null;
+    }),
+    setSelection: vi.fn((selection: any) => {
+      state.selection = selection;
+    }),
+    executeEdits: vi.fn((_source: string, edits: any[]) => {
+      edits.forEach((edit) => {
+        const start = offsetAt({ lineNumber: edit.range.startLineNumber, column: edit.range.startColumn });
+        const end = offsetAt({ lineNumber: edit.range.endLineNumber, column: edit.range.endColumn });
+        state.value = state.value.slice(0, start) + edit.text + state.value.slice(end);
+      });
+    }),
+    addAction: vi.fn(),
+    onDidChangeModelContent: vi.fn((listener: (event?: any) => void) => {
+      state.contentChangeListeners.push(listener);
+      state.modelContentListeners.push(listener);
+      return { dispose: vi.fn() };
+    }),
+    onDidChangeCursorPosition: vi.fn((listener: (event: any) => void) => {
+      state.cursorPositionListeners.push(listener);
+      return { dispose: vi.fn() };
+    }),
+    onMouseMove: vi.fn((listener: (event: any) => void) => {
+      state.mouseMoveListeners.push(listener);
+      return { dispose: vi.fn() };
+    }),
+    onMouseDown: vi.fn((listener: (event: any) => void) => {
+      state.mouseDownListeners.push(listener);
+      return { dispose: vi.fn() };
+    }),
+    onMouseLeave: vi.fn((listener: () => void) => {
+      state.mouseLeaveListeners.push(listener);
+      return { dispose: vi.fn() };
+    }),
+    deltaDecorations: vi.fn((oldDecorations: string[], newDecorations: any[]) => {
+      state.decorationIds = newDecorations.map((_: any, index: number) => `decoration-${index + 1}`);
+      return state.decorationIds;
+    }),
+    updateOptions: vi.fn(),
+    pushUndoStop: vi.fn(),
+    onDidDispose: vi.fn(),
+    hasTextFocus: vi.fn(() => state.hasTextFocus),
+    revealLineInCenterIfOutsideViewport: vi.fn(),
+    revealRangeInCenterIfOutsideViewport: vi.fn(),
+    layout: vi.fn(),
+    focus: vi.fn(),
+    trigger: vi.fn(),
+  };
+  return state;
+});
+
+vi.mock('../store', () => {
+  const useStore = Object.assign(
+    (selector: (state: typeof storeState) => any) => React.useSyncExternalStore(
+      (subscriber) => {
+        storeSubscribers.add(subscriber);
+        return () => {
+          storeSubscribers.delete(subscriber);
+        };
+      },
+      () => selector(storeState),
+      () => selector(storeState),
+    ),
+    { getState: () => storeState },
+  );
+  return { useStore };
+});
+
+vi.mock('../../wailsjs/go/app/App', () => backendApp);
+
+vi.mock('../utils/autoFetchVisibility', () => ({
+  useAutoFetchVisibility: () => autoFetchState.visible,
+}));
+
+vi.mock('@monaco-editor/react', () => ({
+  default: ({ defaultValue, onChange, onMount }: any) => {
+    React.useEffect(() => {
+      editorState.value = String(defaultValue || '');
+      editorState.latestOnChange = onChange;
+      onMount?.(editorState.editor, {
+        editor: { setTheme: vi.fn() },
+        KeyMod: { CtrlCmd: 2048, WinCtrl: 256 },
+        KeyCode: { KeyM: 77, KeyQ: 81, KeyS: 83 },
+        languages: {
+          CompletionItemKind: { Keyword: 1, Function: 2, Field: 3 },
+          CompletionItemInsertTextRule: { InsertAsSnippet: 1 },
+          registerCompletionItemProvider: vi.fn((_language: string, provider: any) => {
+            editorState.providers.push(provider);
+            return { dispose: vi.fn() };
+          }),
+          registerHoverProvider: vi.fn((_language: string, provider: any) => {
+            editorState.hoverProviders.push(provider);
+            return { dispose: vi.fn() };
+          }),
+        },
+        Range: class {
+          startLineNumber: number;
+          startColumn: number;
+          endLineNumber: number;
+          endColumn: number;
+          constructor(startLineNumber: number, startColumn: number, endLineNumber: number, endColumn: number) {
+            this.startLineNumber = startLineNumber;
+            this.startColumn = startColumn;
+            this.endLineNumber = endLineNumber;
+            this.endColumn = endColumn;
+          }
+        },
+        MarkdownString: class {
+          value: string;
+          constructor(value: string) {
+            this.value = value;
+          }
+        },
+        Position: class {
+          lineNumber: number;
+          column: number;
+          constructor(lineNumber: number, column: number) {
+            this.lineNumber = lineNumber;
+            this.column = column;
+          }
+        },
+      });
+    }, []);
+    return <textarea data-editor value={editorState.value} readOnly />;
+  },
+}));
+
+vi.mock('./DataGrid', () => ({
+  default: (props: any) => {
+    dataGridState.latestProps = props;
+    return (
+      <div data-grid="true">
+        {props.toolbarExtraActions ?? null}
+      </div>
+    );
+  },
+  GONAVI_ROW_KEY: '__gonavi_row_key__',
+}));
+
+vi.mock('@ant-design/icons', () => {
+  const Icon = () => <span />;
+  return {
+    PlayCircleOutlined: Icon,
+    SaveOutlined: Icon,
+    FormatPainterOutlined: Icon,
+    SettingOutlined: Icon,
+    CloseOutlined: Icon,
+    StopOutlined: Icon,
+    RobotOutlined: Icon,
+    DatabaseOutlined: Icon,
+    EyeOutlined: Icon,
+    EyeInvisibleOutlined: Icon,
+  };
+});
+
+vi.mock('antd', () => {
+  const Button: any = ({ children, disabled, loading, onClick, onMouseDown, ...rest }: any) => (
+    <button type="button" disabled={disabled || loading} onClick={onClick} onMouseDown={onMouseDown} {...rest}>
+      {children}
+    </button>
+  );
+  Button.Group = ({ children }: any) => <div>{children}</div>;
+  const Space: any = ({ children }: any) => <div>{children}</div>;
+  Space.Compact = ({ children, className }: any) => <div className={className}>{children}</div>;
+
+  const Form: any = ({ children }: any) => <form>{children}</form>;
+  Form.Item = ({ children }: any) => <>{children}</>;
+  Form.useForm = () => [{ setFieldsValue: vi.fn(), validateFields: vi.fn(() => Promise.resolve({ name: '查询' })) }];
+
+  return {
+    Button,
+    Space,
+    message: messageApi,
+    Modal: ({ children, open, onOk, okText = '确认' }: any) => (open ? (
+      <section>
+        {children}
+        <button type="button" onClick={onOk}>{okText}</button>
+      </section>
+    ) : null),
+    Input: ({ value, onChange, placeholder }: any) => <input value={value} onChange={onChange} placeholder={placeholder} />,
+    Form,
+    Dropdown: ({ children, menu }: any) => (
+      <>
+        {children}
+        {menu?.items?.map((item: any) => (
+          item?.type === 'divider'
+            ? null
+            : <button key={item.key} type="button" disabled={item.disabled} onClick={item.onClick}>{item.label}</button>
+        ))}
+      </>
+    ),
+    Tooltip: ({ children }: any) => <>{children}</>,
+    Select: () => null,
+    Tabs: ({ activeKey, items, onChange, tabBarExtraContent }: any) => {
+      const resolvedActiveKey = tabsState.activeKey ?? activeKey ?? items?.[0]?.key;
+      const activeItem = items?.find((item: any) => item.key === resolvedActiveKey) || items?.[0];
+      return (
+        <div>
+          <div>
+            {items?.map((item: any) => (
+              <button
+                key={item.key}
+                type="button"
+                data-tab-key={item.key}
+                onClick={() => {
+                  tabsState.activeKey = item.key;
+                  onChange?.(item.key);
+                }}
+              >
+                {item.label}
+              </button>
+            ))}
+            {tabBarExtraContent?.right ?? null}
+          </div>
+          <div>{activeItem?.children}</div>
+        </div>
+      );
+    },
+  };
+});
+
+const textContent = (node: any): string =>
+  (node.children || [])
+    .map((item: any) => (typeof item === 'string' ? item : textContent(item)))
+    .join('');
+
+const findButton = (renderer: ReactTestRenderer, text: string) =>
+  renderer.root.findAll((node) => node.type === 'button' && textContent(node).includes(text))[0];
+
+const findButtons = (renderer: ReactTestRenderer, text: string) =>
+  renderer.root.findAll((node) => node.type === 'button' && textContent(node).includes(text));
+
+const findExactButton = (renderer: ReactTestRenderer, text: string) =>
+  renderer.root.findAll((node) => node.type === 'button' && textContent(node) === text)[0];
+
+const findEditorAction = (id: string) =>
+  editorState.editor.addAction.mock.calls
+    .map((call: any[]) => call[0])
+    .reverse()
+    .find((action: any) => action?.id === id);
+
+const findEditorActionLabels = (id: string) =>
+  editorState.editor.addAction.mock.calls
+    .map((call: any[]) => call[0])
+    .filter((action: any) => action?.id === id)
+    .map((action: any) => action.label);
+
+const findSqlCompletionProvider = () =>
+  [...editorState.providers]
+    .reverse()
+    .find((provider: any) =>
+      Array.isArray(provider?.triggerCharacters) && provider.triggerCharacters.includes('.'),
+    );
+
+const createSqlCompletionModel = (line: string, word: string) => ({
+  getWordUntilPosition: () => ({
+    word,
+    startColumn: 1,
+    endColumn: word.length + 1,
+  }),
+  getValue: () => line,
+  getLineContent: () => line,
+});
+
+const getLastInjectedPrompt = (): string => {
+  const dispatchCalls = (window.dispatchEvent as any).mock.calls;
+  expect(dispatchCalls.length).toBeGreaterThan(0);
+  const event = dispatchCalls[dispatchCalls.length - 1]?.[0];
+  expect(event?.type).toBe('gonavi:ai:inject-prompt');
+  return event?.detail?.prompt;
+};
+
+const createTab = (overrides: Partial<TabData> = {}): TabData => ({
+  id: 'tab-1',
+  title: 'query.sql',
+  type: 'query',
+  connectionId: 'conn-1',
+  dbName: 'main',
+  query: 'select 1;',
+  ...overrides,
+});
+
+const createDefaultConnections = () => ([
+  {
+    id: 'conn-1',
+    name: 'local',
+    config: {
+      type: 'mysql',
+      host: '127.0.0.1',
+      port: 3306,
+      user: 'root',
+      password: '',
+      database: 'main',
+    },
+  },
+]);
+
+describe('QueryEditor external SQL save', () => {
+  beforeEach(() => {
+    const completionState = (globalThis as any).__gonaviSqlCompletionState;
+    if (completionState) {
+      completionState.registered = false;
+      completionState.disposables = [];
+    }
+    vi.stubGlobal('window', {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+      requestAnimationFrame: vi.fn((callback: FrameRequestCallback) => {
+        callback(0);
+        return 1;
+      }),
+      cancelAnimationFrame: vi.fn(),
+      innerHeight: 900,
+    });
+    vi.stubGlobal('document', {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+    setCurrentLanguage('zh-CN');
+    storeState.languagePreference = 'zh-CN';
+    storeState.shortcutOptions.runQuery.mac = { enabled: false, combo: '' };
+    storeState.shortcutOptions.runQuery.windows = { enabled: false, combo: '' };
+    storeState.shortcutOptions.selectCurrentStatement.mac = { enabled: false, combo: '' };
+    storeState.shortcutOptions.selectCurrentStatement.windows = { enabled: false, combo: '' };
+    storeState.shortcutOptions.saveQuery.mac = { enabled: true, combo: 'Meta+S' };
+    storeState.shortcutOptions.saveQuery.windows = { enabled: true, combo: 'Ctrl+S' };
+    storeState.addTab.mockReset();
+    storeState.setActiveContext.mockReset();
+    storeState.saveQuery.mockReset();
+    storeState.saveQuery.mockImplementation(async (query: SavedQuery) => query);
+    storeState.savedQueries = [];
+    storeState.activeTabId = 'tab-1';
+    storeState.aiPanelVisible = false;
+    storeState.setAIPanelVisible.mockReset();
+    storeState.queryOptions = {
+      maxRows: 5000,
+      showColumnComment: true,
+      showColumnType: true,
+      showQueryResultsPanel: false,
+    };
+    storeState.sqlEditorTransactionOptions = {
+      commitMode: 'manual',
+      autoCommitDelayMs: 0,
+    };
+    storeState.shortcutOptions = {
+      runQuery: {
+        mac: { enabled: false, combo: '' },
+        windows: { enabled: false, combo: '' },
+      },
+      selectCurrentStatement: {
+        mac: { enabled: false, combo: '' },
+        windows: { enabled: false, combo: '' },
+      },
+      saveQuery: {
+        mac: { enabled: true, combo: 'Meta+S' },
+        windows: { enabled: true, combo: 'Ctrl+S' },
+      },
+      toggleQueryResultsPanel: {
+        mac: { enabled: true, combo: 'Meta+Shift+M' },
+        windows: { enabled: true, combo: 'Ctrl+Shift+M' },
+      },
+    };
+    storeState.setQueryOptions.mockReset();
+    storeState.setQueryOptions.mockImplementation((options: Record<string, unknown>) => {
+      storeState.queryOptions = { ...storeState.queryOptions, ...options };
+    });
+    storeState.setSqlEditorTransactionOptions.mockReset();
+    storeState.setSqlEditorTransactionOptions.mockImplementation((options: Record<string, unknown>) => {
+      storeState.sqlEditorTransactionOptions = { ...storeState.sqlEditorTransactionOptions, ...options };
+    });
+    storeState.sqlEditorPendingTransactions = {};
+    storeState.setSqlEditorPendingTransaction.mockReset();
+    storeState.setSqlEditorPendingTransaction.mockImplementation((tabId: string, transaction: unknown) => {
+      if (!transaction) {
+        delete storeState.sqlEditorPendingTransactions[tabId];
+        return;
+      }
+      storeState.sqlEditorPendingTransactions[tabId] = transaction;
+    });
+    Object.values(backendApp).forEach((fn) => fn.mockReset());
+    messageApi.success.mockReset();
+    messageApi.error.mockReset();
+    messageApi.info.mockReset();
+    messageApi.warning.mockReset();
+    backendApp.DBQuery.mockResolvedValue({ success: true, data: [] });
+    backendApp.WriteSQLFile.mockResolvedValue({ success: true });
+    backendApp.ExportSQLFile.mockResolvedValue({ success: true });
+    backendApp.DBQueryWithCancel.mockResolvedValue({ success: true, data: [] });
+    backendApp.DBQueryMulti.mockResolvedValue({ success: true, data: [] });
+    backendApp.DBQueryMultiTransactional.mockResolvedValue({ success: true, data: [] });
+    backendApp.DBCommitTransaction.mockResolvedValue({ success: true, message: '事务已提交' });
+    backendApp.DBRollbackTransaction.mockResolvedValue({ success: true, message: '事务已回滚' });
+    backendApp.DBGetColumns.mockResolvedValue({ success: true, data: [] });
+    backendApp.DBGetIndexes.mockResolvedValue({ success: true, data: [] });
+    backendApp.DBGetAllColumns.mockResolvedValue({ success: true, data: [] });
+    backendApp.DBGetDatabases.mockResolvedValue({ success: true, data: [] });
+    backendApp.DBGetTables.mockResolvedValue({ success: true, data: [] });
+    backendApp.GenerateQueryID.mockResolvedValue('query-1');
+    storeState.connections = createDefaultConnections();
+    storeState.connections[0].config.type = 'mysql';
+    storeState.connections[0].config.database = 'main';
+    storeState.appearance.uiVersion = 'legacy';
+    autoFetchState.visible = false;
+    dataGridState.latestProps = null;
+    tabsState.activeKey = undefined;
+    editorState.value = '';
+    editorState.position = { lineNumber: 1, column: 1 };
+    editorState.selection = null;
+    editorState.domNode.style.cursor = '';
+    editorState.providers = [];
+    editorState.hoverProviders = [];
+    editorState.contentChangeListeners = [];
+    editorState.cursorPositionListeners = [];
+    editorState.modelContentListeners = [];
+    editorState.mouseMoveListeners = [];
+    editorState.mouseDownListeners = [];
+    editorState.mouseLeaveListeners = [];
+    editorState.hasTextFocus = true;
+    editorState.decorationIds = [];
+    editorState.contentHoverCalls = [];
+    editorState.latestOnChange = null;
+    editorState.editor.getValue.mockClear();
+    editorState.editor.getModel().getValue.mockClear();
+    editorState.editor.getModel().getValueLength.mockClear();
+    editorState.editor.setValue.mockClear();
+    editorState.editor.executeEdits.mockClear();
+    editorState.editor.deltaDecorations.mockClear();
+    editorState.editor.updateOptions.mockClear();
+    editorState.editor.pushUndoStop.mockClear();
+    editorState.editor.addAction.mockClear();
+    storeState.updateQueryTabDraft.mockReset();
+    storeSubscribers.clear();
+    editorState.editor.layout.mockClear();
+    clearQueryTabDraft('tab-1');
+    clearQueryTabDraft('tab-2');
+    clearSQLFileTabDraft('tab-1');
+    clearSQLFileTabDraft('tab-2');
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it('keeps Oracle anonymous PL/SQL blocks intact when running from the editor', async () => {
+    storeState.connections[0].config.type = 'oracle';
+    storeState.connections[0].config.database = 'ORCLPDB1';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['affectedRows'], rows: [{ affectedRows: 1 }] }],
+    });
+    const plsql = [
+      'BEGIN',
+      "    INSERT INTO tmp_disable_trigger (table_name) VALUES ('t_memcard_reg');",
+      "    UPDATE t_memcard_reg SET CARDLEVEL = 1 WHERE MEMCARDNO = '8032277312';",
+      "    DELETE FROM tmp_disable_trigger WHERE table_name = 't_memcard_reg';",
+      'END;',
+    ].join('\n');
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'ORCLPDB1', query: plsql })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'ORCLPDB1', plsql, 'query-1');
+    expect(storeState.addSqlLog).toHaveBeenCalledWith(expect.objectContaining({
+      sql: plsql,
+      status: 'success',
+    }));
+    renderer?.unmount();
+  });
+
+  it('renders result grid for sqlserver exec statements that return rows', async () => {
+    storeState.connections[0].config.type = 'sqlserver';
+    storeState.connections[0].config.database = 'master';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['SPID', 'STATUS'], rows: [{ SPID: 52, STATUS: 'RUNNABLE' }] }],
+    });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'master', query: 'EXEC sp_who2' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(textContent(renderer!.toJSON())).toContain('结果 1');
+    expect(textContent(renderer!.toJSON())).not.toContain('影响行数：');
+    expect(dataGridState.latestProps?.columnNames).toEqual(['SPID', 'STATUS']);
+    expect(Array.isArray(dataGridState.latestProps?.data)).toBe(true);
+    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({ SPID: 52, STATUS: 'RUNNABLE' });
+  });
+
+  it('renders standalone message result for sqlserver statistics statements', async () => {
+    storeState.connections[0].config.type = 'sqlserver';
+    storeState.connections[0].config.database = 'master';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{
+        columns: [],
+        rows: [],
+        messages: ["Table 'users'. Scan count 1, logical reads 3."],
+      }],
+    });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'master', query: 'SET STATISTICS IO ON;' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(textContent(renderer!.toJSON())).toContain('消息 1');
+    expect(textContent(renderer!.toJSON())).toContain("Table 'users'. Scan count 1, logical reads 3.");
+    expect(dataGridState.latestProps?.columnNames).not.toEqual([]);
+  });
+
+  it('keeps multiple result sets from a single sqlserver statement', async () => {
+    storeState.connections[0].config.type = 'sqlserver';
+    storeState.connections[0].config.database = 'master';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [
+        { statementIndex: 1, columns: ['name'], rows: [{ name: 'master' }] },
+        { statementIndex: 1, columns: ['owner'], rows: [{ owner: 'sa' }] },
+      ],
+    });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'master', query: 'EXEC sp_helpdb' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(textContent(renderer!.toJSON())).toContain('结果 1');
+    expect(textContent(renderer!.toJSON())).toContain('结果 2');
+    expect(dataGridState.latestProps?.columnNames).toEqual(['name']);
+  });
+
+  it('prefers the first displayable sqlserver procedure result when empty result sets are returned', async () => {
+    storeState.connections[0].config.type = 'sqlserver';
+    storeState.connections[0].config.database = 'hydee';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [
+        { statementIndex: 1, columns: [], rows: [] },
+        {
+          statementIndex: 1,
+          columns: ['insert_sql'],
+          rows: [
+            { insert_sql: "insert into c_user(userid) values('168')" },
+            { insert_sql: "insert into c_user(userid) values('169')" },
+          ],
+        },
+        { statementIndex: 1, columns: [], rows: [] },
+        { statementIndex: 1, columns: [], rows: [] },
+      ],
+    });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'hydee', query: "p_get_select 'c_user','userid = ''168''',1" })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(textContent(renderer!.toJSON())).toContain('结果 4');
+    expect(dataGridState.latestProps?.columnNames).toEqual(['insert_sql']);
+    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({
+      insert_sql: "insert into c_user(userid) values('168')",
+    });
+  });
+
+  it('prefers concrete sqlserver procedure rows over affected-row status results', async () => {
+    storeState.connections[0].config.type = 'sqlserver';
+    storeState.connections[0].config.database = 'hydee';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [
+        { statementIndex: 1, columns: ['affectedRows'], rows: [{ affectedRows: 0 }] },
+        { statementIndex: 1, columns: [], rows: [] },
+        {
+          statementIndex: 1,
+          columns: ['insert_sql'],
+          rows: [
+            { insert_sql: "insert into c_user(userid) values('168')" },
+          ],
+        },
+      ],
+    });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'hydee', query: "p_get_select 'c_user','userid = ''168''',1" })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(dataGridState.latestProps?.columnNames).toEqual(['insert_sql']);
+    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({
+      insert_sql: "insert into c_user(userid) values('168')",
+    });
+    expect(textContent(renderer!.toJSON())).not.toContain('影响行数：0');
+  });
+
+  it('prefers sqlserver print output messages over affected-row status results', async () => {
+    storeState.connections[0].config.type = 'sqlserver';
+    storeState.connections[0].config.database = 'hydee';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [
+        { statementIndex: 1, columns: ['affectedRows'], rows: [{ affectedRows: 0 }] },
+        {
+          statementIndex: 1,
+          columns: [],
+          rows: [],
+          messages: [
+            "insert into c_dyscript(projectid,name) values (1,'demo')",
+            "insert into c_dyscript(projectid,name) values (2,'next')",
+          ],
+        },
+      ],
+    });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'hydee', query: "p_get_select c_dyscript,'projectid = 1',1" })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(textContent(renderer!.toJSON())).toContain('消息 2');
+    expect(textContent(renderer!.toJSON())).toContain("insert into c_dyscript(projectid,name) values (1,'demo')");
+    expect(textContent(renderer!.toJSON())).not.toContain('影响行数：0');
+    expect(dataGridState.latestProps).toBeNull();
+  });
+
+  it('renders top-level sqlserver print messages when result sets contain only status rows', async () => {
+    storeState.connections[0].config.type = 'sqlserver';
+    storeState.connections[0].config.database = 'hydee';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [
+        { statementIndex: 1, columns: ['affectedRows'], rows: [{ affectedRows: 0 }] },
+      ],
+      messages: [
+        "insert into c_dyscript(projectid,name) values (1,'demo')",
+      ],
+    });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'hydee', query: "p_get_select c_dyscript,'projectid = 1',1" })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(textContent(renderer!.toJSON())).toContain('消息 2');
+    expect(textContent(renderer!.toJSON())).toContain("insert into c_dyscript(projectid,name) values (1,'demo')");
+    expect(textContent(renderer!.toJSON())).not.toContain('影响行数：0');
+    expect(dataGridState.latestProps).toBeNull();
+  });
+
+  it('keeps both tabs when rerunning the same single sqlserver statement with multiple result sets', async () => {
+    storeState.connections[0].config.type = 'sqlserver';
+    storeState.connections[0].config.database = 'master';
+    backendApp.DBQueryMulti
+      .mockResolvedValueOnce({
+        success: true,
+        data: [
+          { statementIndex: 1, columns: ['name'], rows: [{ name: 'master' }] },
+          { statementIndex: 1, columns: ['owner'], rows: [{ owner: 'sa' }] },
+        ],
+      })
+      .mockResolvedValueOnce({
+        success: true,
+        data: [
+          { statementIndex: 1, columns: ['name'], rows: [{ name: 'tempdb' }] },
+          { statementIndex: 1, columns: ['owner'], rows: [{ owner: 'dbo' }] },
+        ],
+      });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'master', query: 'EXEC sp_helpdb' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const tabLabels = renderer!.root.findAll((node) => {
+      const className = String(node.props?.className || '');
+      return className.includes('query-result-tab-label');
+    });
+    expect(tabLabels).toHaveLength(2);
+    expect(dataGridState.latestProps?.columnNames).toEqual(['name']);
+    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({ name: 'tempdb' });
+  });
+
+  it('reloads the active secondary result set for a single sqlserver statement', async () => {
+    storeState.connections[0].config.type = 'sqlserver';
+    storeState.connections[0].config.database = 'master';
+    backendApp.DBQueryMulti
+      .mockResolvedValueOnce({
+        success: true,
+        data: [
+          { statementIndex: 1, columns: ['name'], rows: [{ name: 'master' }] },
+          { statementIndex: 1, columns: ['owner'], rows: [{ owner: 'sa' }] },
+        ],
+      })
+      .mockResolvedValueOnce({
+        success: true,
+        data: [
+          { statementIndex: 1, columns: ['name'], rows: [{ name: 'master' }] },
+          { statementIndex: 1, columns: ['owner'], rows: [{ owner: 'dbo' }] },
+        ],
+      });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'master', query: 'EXEC sp_helpdb' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const resultTabButtons = renderer!.root.findAll((node) => node.type === 'button' && node.props['data-tab-key']);
+    expect(resultTabButtons).toHaveLength(2);
+
+    await act(async () => {
+      resultTabButtons[1].props.onClick();
+    });
+
+    expect(dataGridState.latestProps?.columnNames).toEqual(['owner']);
+    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({ owner: 'sa' });
+
+    await act(async () => {
+      await dataGridState.latestProps?.onReload?.();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(2);
+    expect(dataGridState.latestProps?.columnNames).toEqual(['owner']);
+    expect(dataGridState.latestProps?.data?.[0]).toMatchObject({ owner: 'dbo' });
+    expect(dataGridState.latestProps?.data).not.toEqual(expect.arrayContaining([expect.objectContaining({ name: 'master' })]));
+  });
+
+  it('localizes the non-Oracle no-safe-locator read-only warning in English while preserving the raw table name', async () => {
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['NAME'], rows: [{ NAME: 'old-name' }] }],
+    });
+    backendApp.DBGetColumns.mockResolvedValueOnce({
+      success: true,
+      data: [{ name: 'NAME', key: '' }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM users' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, 'Run').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(dataGridState.latestProps?.tableName).toBe('users');
+    expect(dataGridState.latestProps?.pkColumns).toEqual([]);
+    expect(dataGridState.latestProps?.editLocator).toMatchObject({
+      strategy: 'none',
+      readOnly: true,
+      reason: 'No primary key or usable unique index was detected, so changes cannot be committed safely.',
+    });
+    expect(dataGridState.latestProps?.readOnly).toBe(true);
+    expect(messageApi.warning).toHaveBeenCalledWith(
+      'Query results remain read-only: main.users No primary key or usable unique index was detected, so changes cannot be committed safely.',
+    );
+    expect(messageApi.warning).not.toHaveBeenCalledWith(
+      '查询结果保持只读：main.users 未检测到主键或可用唯一索引，无法安全提交修改。',
+    );
+  });
+
+  it('localizes the non-Oracle index-metadata-unavailable read-only warning in English while preserving the raw table name', async () => {
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['NAME'], rows: [{ NAME: 'old-name' }] }],
+    });
+    backendApp.DBGetColumns.mockResolvedValueOnce({
+      success: true,
+      data: [{ name: 'NAME', key: '' }],
+    });
+    backendApp.DBGetIndexes.mockResolvedValueOnce({
+      success: false,
+      data: [],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM users' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, 'Run').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(dataGridState.latestProps?.tableName).toBe('users');
+    expect(dataGridState.latestProps?.editLocator).toMatchObject({
+      strategy: 'none',
+      readOnly: true,
+      reason: 'Unable to load unique index metadata, so changes cannot be committed safely.',
+    });
+    expect(dataGridState.latestProps?.readOnly).toBe(true);
+    expect(messageApi.warning).toHaveBeenCalledWith(
+      'Query results remain read-only: main.users Unable to load unique index metadata, so changes cannot be committed safely.',
+    );
+    expect(messageApi.warning).not.toHaveBeenCalledWith(
+      '查询结果保持只读：main.users 无法加载唯一索引元数据，无法安全提交修改。',
+    );
+  });
+
+  it('localizes the table-locator-metadata-unavailable read-only warning in English while preserving the raw table name', async () => {
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['NAME'], rows: [{ NAME: 'old-name' }] }],
+    });
+    backendApp.DBGetColumns.mockResolvedValueOnce({
+      success: false,
+      data: [],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM users' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, 'Run').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(dataGridState.latestProps?.tableName).toBe('users');
+    expect(dataGridState.latestProps?.editLocator).toMatchObject({
+      strategy: 'none',
+      readOnly: true,
+      reason: 'Unable to load primary key/unique index metadata for main.users, so changes cannot be committed safely.',
+    });
+    expect(dataGridState.latestProps?.readOnly).toBe(true);
+    expect(messageApi.warning).toHaveBeenCalledWith(
+      'Query results remain read-only: Unable to load primary key/unique index metadata for main.users, so changes cannot be committed safely.',
+    );
+    expect(messageApi.warning).not.toHaveBeenCalledWith(
+      '查询结果保持只读：无法加载 main.users 的主键/唯一索引元数据，无法安全提交修改。',
+    );
+  });
+
+  it('keeps MySQL information_schema routine results read-only without a locator warning', async () => {
+    const sql = [
+      'SELECT ROUTINE_SCHEMA, ROUTINE_NAME, DEFINER, SECURITY_TYPE',
+      'FROM information_schema.ROUTINES',
+      "WHERE ROUTINE_SCHEMA = 'mkefu_location_dev_local'",
+      "  AND ROUTINE_NAME = 'init_orgi'",
+    ].join('\n');
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{
+        columns: ['ROUTINE_SCHEMA', 'ROUTINE_NAME', 'DEFINER', 'SECURITY_TYPE'],
+        rows: [{
+          ROUTINE_SCHEMA: 'mkefu_location_dev_local',
+          ROUTINE_NAME: 'init_orgi',
+          DEFINER: 'root@%',
+          SECURITY_TYPE: 'DEFINER',
+        }],
+      }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'mkefu_location_dev_local', query: sql })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(dataGridState.latestProps?.tableName).toBe('ROUTINES');
+    expect(dataGridState.latestProps?.readOnly).toBe(true);
+    expect(backendApp.DBGetColumns).not.toHaveBeenCalled();
+    expect(backendApp.DBGetIndexes).not.toHaveBeenCalled();
+    expect(messageApi.warning).not.toHaveBeenCalled();
+  });
+
+  it('runs the SQL statement at the cursor instead of the whole editor when nothing is selected', async () => {
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['two'], rows: [{ two: 2 }] }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1;\nselect 2 as two;\nselect 3;',
+      })} />);
+    });
+
+    editorState.position = { lineNumber: 2, column: 8 };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.();
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as two'), 'query-1');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 1');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3');
+    expect(storeState.addSqlLog).toHaveBeenCalledWith(expect.objectContaining({
+      sql: expect.stringContaining('select 2 as two'),
+    }));
+  });
+
+  it('keeps cursor statement execution available in v2 UI', async () => {
+    storeState.appearance.uiVersion = 'v2';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['two'], rows: [{ two: 2 }] }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1;\nselect 2 as two;\nselect 3;',
+      })} />);
+    });
+
+    editorState.position = { lineNumber: 2, column: 8 };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.();
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as two'), 'query-1');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 1');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3');
+  });
+
+  it('renders V2 empty state copy for the active non-Chinese language', async () => {
+    storeState.appearance.uiVersion = 'v2';
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab()} />);
+    });
+
+    const rendered = textContent(renderer!.toJSON());
+    expect(rendered).toContain('Awaiting SQL execution');
+    expect(rendered).toContain('Run a query to display results below in the new data grid.');
+    expect(rendered).not.toContain('等待执行 SQL');
+    expect(rendered).not.toContain('运行查询后，结果会在下方以新版数据网格展示。');
+  });
+
+  it('uses the last editor cursor position when the run button takes focus', async () => {
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['two'], rows: [{ two: 2 }] }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1 as a;\nselect 2 as b;\nselect 3 as c;',
+      })} />);
+    });
+
+    editorState.cursorPositionListeners.forEach((listener) => {
+      listener({ position: { lineNumber: 2, column: 'select 2 as b;'.length + 1 } });
+    });
+    editorState.hasTextFocus = false;
+    editorState.position = { lineNumber: 3, column: 'select 3 as c;'.length + 1 };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as b'), 'query-1');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3 as c');
+  });
+
+  it('prefers the last editor cursor event even if Monaco still reports text focus', async () => {
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['two'], rows: [{ two: 2 }] }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1 as a;\nselect 2 as b;\nselect 3 as c;',
+      })} />);
+    });
+
+    editorState.cursorPositionListeners.forEach((listener) => {
+      listener({ position: { lineNumber: 2, column: 'select 2 as b;'.length + 1 } });
+    });
+    editorState.hasTextFocus = true;
+    editorState.position = { lineNumber: 3, column: 'select 3 as c;'.length + 1 };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as b'), 'query-1');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3 as c');
+  });
+
+  it('uses Monaco active selection position when run button focus drifts onto a blank line', async () => {
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['b'], rows: [{ b: 2 }] }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1 as a;\nselect 2 as b;\n\nselect 3 as c;',
+      })} />);
+    });
+
+    editorState.selection = {
+      startLineNumber: 2,
+      startColumn: 'select 2 as b;'.length + 1,
+      endLineNumber: 2,
+      endColumn: 'select 2 as b;'.length + 1,
+      positionLineNumber: 2,
+      positionColumn: 'select 2 as b;'.length + 1,
+    };
+    editorState.position = { lineNumber: 3, column: 1 };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, 'Run');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as b'), 'query-1');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 1 as a');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3 as c');
+    expect(messageApi.info).not.toHaveBeenCalledWith('没有可执行的 SQL。');
+  });
+
+  it('keeps cursor statement execution when CRLF line endings put the cursor after a semicolon', async () => {
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['b'], rows: [{ b: 2 }] }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1 as a;\r\nselect 2 as b;\r\n\r\nselect 3 as c;',
+      })} />);
+    });
+
+    editorState.position = { lineNumber: 2, column: 'select 2 as b;'.length + 1 };
+    editorState.selection = {
+      startLineNumber: 2,
+      startColumn: 'select 2 as b;'.length + 1,
+      endLineNumber: 2,
+      endColumn: 'select 2 as b;'.length + 1,
+      positionLineNumber: 2,
+      positionColumn: 'select 2 as b;'.length + 1,
+    };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, 'Run');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as b'), 'query-1');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 1 as a');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3 as c');
+    expect(messageApi.info).not.toHaveBeenCalledWith('没有可执行的 SQL。');
+  });
+
+  it('shows "No executable SQL." in English when the cursor is on a blank line', async () => {
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['a'], rows: [{ a: 1 }] }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1 as a;\nselect 2 as b;\n\nselect 3 as c;',
+      })} />);
+    });
+
+    editorState.position = { lineNumber: 1, column: 'select 1 as a;'.length + 1 };
+    editorState.selection = {
+      startLineNumber: 1,
+      startColumn: 'select 1 as a;'.length + 1,
+      endLineNumber: 1,
+      endColumn: 'select 1 as a;'.length + 1,
+      positionLineNumber: 1,
+      positionColumn: 'select 1 as a;'.length + 1,
+    };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(textContent(renderer!.toJSON())).toContain('结果 1');
+    backendApp.DBQueryMulti.mockClear();
+    messageApi.info.mockClear();
+
+    editorState.position = { lineNumber: 3, column: 1 };
+    editorState.selection = {
+      startLineNumber: 3,
+      startColumn: 1,
+      endLineNumber: 3,
+      endColumn: 1,
+      positionLineNumber: 3,
+      positionColumn: 1,
+    };
+    editorState.cursorPositionListeners.forEach((listener) => {
+      listener({ position: { lineNumber: 3, column: 1 } });
+    });
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).not.toHaveBeenCalled();
+    expect(messageApi.info).toHaveBeenCalledWith('No executable SQL.');
+    expect(messageApi.info).not.toHaveBeenCalledWith('没有可执行的 SQL。');
+    expect(dataGridState.latestProps?.data).toEqual(expect.arrayContaining([expect.objectContaining({ a: 1 })]));
+  });
+
+  it('shows "Select a database first." in English before running without a database', async () => {
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: '', query: 'select 1;' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer, 'Run').props.onClick();
+    });
+
+    expect(messageApi.error).toHaveBeenCalledWith('Select a database first.');
+    expect(messageApi.error).not.toHaveBeenCalledWith('请先选择数据库');
+  });
+
+  it('shows "Connection not found." in English before running without a matching connection', async () => {
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+    storeState.connections = [];
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ connectionId: 'missing', dbName: 'main', query: 'select 1;' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer, 'Run').props.onClick();
+    });
+
+    expect(messageApi.error).toHaveBeenCalledWith('Connection not found.');
+    expect(messageApi.error).not.toHaveBeenCalledWith('Connection not found');
+  });
+
+  it('shows the unsupported source guard in English before running', async () => {
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+    storeState.connections[0].config.type = 'redis';
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'select 1;' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer, 'Run').props.onClick();
+    });
+
+    expect(messageApi.error).toHaveBeenCalledWith(
+      'This data source does not support the SQL query editor. Use its dedicated page instead.',
+    );
+    expect(messageApi.error).not.toHaveBeenCalledWith('当前数据源不支持 SQL 查询编辑器，请使用对应专用页面。');
+  });
+
+  describe('execution toast localization', () => {
+    it('shows the Mongo multi-statement success toast in English', async () => {
+      storeState.languagePreference = 'en-US';
+      setCurrentLanguage('en-US');
+      storeState.connections[0].config.type = 'mongodb';
+      const query = 'db.users.find({});\ndb.logs.find({});';
+      backendApp.DBQueryWithCancel
+        .mockResolvedValueOnce({ success: true, data: [{ _id: 1 }], fields: ['_id'] })
+        .mockResolvedValueOnce({ success: true, data: [{ _id: 2 }], fields: ['_id'] });
+
+      let renderer!: ReactTestRenderer;
+      await act(async () => {
+        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
+      });
+      editorState.selection = {
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: 2,
+        endColumn: 'db.logs.find({});'.length + 1,
+        positionLineNumber: 2,
+        positionColumn: 'db.logs.find({});'.length + 1,
+      };
+
+      await act(async () => {
+        await findButton(renderer, 'Run').props.onClick();
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(messageApi.success).toHaveBeenCalledWith('Executed 2 statements and produced 2 result sets.');
+      expect(messageApi.success).not.toHaveBeenCalledWith('已执行 2 条语句，生成 2 个结果集。');
+    });
+
+    it('shows the Mongo multi-statement failure prefix localization in English', async () => {
+      storeState.languagePreference = 'en-US';
+      setCurrentLanguage('en-US');
+      storeState.connections[0].config.type = 'mongodb';
+      const query = 'db.users.find({});\ndb.logs.find({});';
+      backendApp.DBQueryWithCancel
+        .mockResolvedValueOnce({ success: true, data: [{ _id: 1 }], fields: ['_id'] })
+        .mockResolvedValueOnce({ success: false, message: 'driver exploded' });
+
+      let renderer!: ReactTestRenderer;
+      await act(async () => {
+        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
+      });
+      editorState.selection = {
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: 2,
+        endColumn: 'db.logs.find({});'.length + 1,
+        positionLineNumber: 2,
+        positionColumn: 'db.logs.find({});'.length + 1,
+      };
+
+      await act(async () => {
+        await findButton(renderer, 'Run').props.onClick();
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      const rendered = textContent(renderer.toJSON());
+      expect(rendered).toContain('Statement 2 failed: driver exploded');
+      expect(rendered).not.toContain('第 2 条语句执行失败：driver exploded');
+    });
+
+    it('shows the Mongo zero-result success toast in English', async () => {
+      storeState.languagePreference = 'en-US';
+      setCurrentLanguage('en-US');
+      storeState.connections[0].config.type = 'mongodb';
+      const query = '{"ping":1}';
+      backendApp.DBQueryWithCancel.mockResolvedValueOnce({ success: true, data: { ok: 1 } });
+
+      let renderer!: ReactTestRenderer;
+      await act(async () => {
+        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
+      });
+      editorState.position = { lineNumber: 1, column: query.length + 1 };
+
+      await act(async () => {
+        await findButton(renderer, 'Run').props.onClick();
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(messageApi.success).toHaveBeenCalledWith('Execution succeeded.');
+      expect(messageApi.success).not.toHaveBeenCalledWith('执行成功。');
+    });
+
+    it('shows the non-Mongo multi-result success toast in English', async () => {
+      storeState.languagePreference = 'en-US';
+      setCurrentLanguage('en-US');
+      const query = 'select 1 as a; select 2 as b;';
+      backendApp.DBQueryMulti.mockResolvedValueOnce({
+        success: true,
+        data: [
+          { columns: ['a'], rows: [{ a: 1 }] },
+          { columns: ['b'], rows: [{ b: 2 }] },
+        ],
+      });
+
+      let renderer!: ReactTestRenderer;
+      await act(async () => {
+        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
+      });
+      editorState.selection = {
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: 1,
+        endColumn: query.length + 1,
+        positionLineNumber: 1,
+        positionColumn: query.length + 1,
+      };
+
+      await act(async () => {
+        const runButton = findButton(renderer, 'Run');
+        runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+        await runButton.props.onClick();
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(backendApp.DBQueryWithCancel).not.toHaveBeenCalled();
+      expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(1);
+      expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('select 1 as a');
+      expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('select 2 as b');
+      expect(messageApi.success).toHaveBeenCalledWith('Execution finished and produced 2 result sets.');
+      expect(messageApi.success).not.toHaveBeenCalledWith('已执行完成，生成 2 个结果集。');
+    });
+
+    it('shows the non-Mongo zero-result success toast in English', async () => {
+      storeState.languagePreference = 'en-US';
+      setCurrentLanguage('en-US');
+      const query = 'update users set active = 1 where 1 = 0;';
+      backendApp.DBQueryMulti.mockResolvedValueOnce({ success: true, data: [] });
+
+      let renderer!: ReactTestRenderer;
+      await act(async () => {
+        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
+      });
+      editorState.selection = {
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: 1,
+        endColumn: query.length + 1,
+        positionLineNumber: 1,
+        positionColumn: query.length + 1,
+      };
+
+      await act(async () => {
+        const runButton = findButton(renderer, 'Run');
+        runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+        await runButton.props.onClick();
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(backendApp.DBQueryWithCancel).not.toHaveBeenCalled();
+      expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(1);
+      expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('update users set active = 1 where 1 = 0');
+      expect(messageApi.success).toHaveBeenCalledWith('Execution succeeded.');
+      expect(messageApi.success).not.toHaveBeenCalledWith('执行成功。');
+    });
+
+    it('shows the wrapped execution failure toast in English while preserving raw error detail', async () => {
+      storeState.languagePreference = 'en-US';
+      setCurrentLanguage('en-US');
+      const query = 'select 1;';
+      backendApp.DBQueryMulti.mockRejectedValueOnce(new Error('driver exploded'));
+
+      let renderer!: ReactTestRenderer;
+      await act(async () => {
+        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
+      });
+      editorState.selection = {
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: 1,
+        endColumn: query.length + 1,
+        positionLineNumber: 1,
+        positionColumn: query.length + 1,
+      };
+
+      await act(async () => {
+        const runButton = findButton(renderer, 'Run');
+        runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+        await runButton.props.onClick();
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(backendApp.DBQueryWithCancel).not.toHaveBeenCalled();
+      expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(1);
+      expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('select 1');
+      expect(messageApi.error).toHaveBeenCalledWith('Query execution failed: driver exploded');
+      expect(messageApi.error).not.toHaveBeenCalledWith('Error executing query: driver exploded');
+    });
+  });
+
+  describe('result refresh toast localization', () => {
+    const renderAndRunQuery = async (query: string) => {
+      let renderer!: ReactTestRenderer;
+      await act(async () => {
+        renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query })} />);
+      });
+      editorState.selection = {
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: 1,
+        endColumn: query.length + 1,
+        positionLineNumber: 1,
+        positionColumn: query.length + 1,
+      };
+
+      await act(async () => {
+        const runButton = findButton(renderer, 'Run');
+        runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+        await runButton.props.onClick();
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(dataGridState.latestProps?.onReload).toEqual(expect.any(Function));
+    };
+
+    it('shows the response refresh failure toast in English while preserving raw error detail', async () => {
+      storeState.languagePreference = 'en-US';
+      setCurrentLanguage('en-US');
+      const query = 'select 1 as a;';
+      backendApp.DBQueryMulti
+        .mockResolvedValueOnce({
+          success: true,
+          data: [{ columns: ['a'], rows: [{ a: 1 }] }],
+        })
+        .mockResolvedValueOnce({ success: false, message: 'network down' });
+
+      await renderAndRunQuery(query);
+      messageApi.error.mockClear();
+
+      await act(async () => {
+        await dataGridState.latestProps.onReload();
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(messageApi.error).toHaveBeenCalledWith('Refresh failed: network down');
+      expect(messageApi.error).not.toHaveBeenCalledWith('刷新失败: network down');
+    });
+
+    it('shows the rejected refresh failure toast in English while preserving raw error detail', async () => {
+      storeState.languagePreference = 'en-US';
+      setCurrentLanguage('en-US');
+      const query = 'select 1 as a;';
+      backendApp.DBQueryMulti
+        .mockResolvedValueOnce({
+          success: true,
+          data: [{ columns: ['a'], rows: [{ a: 1 }] }],
+        })
+        .mockRejectedValueOnce(new Error('socket closed'));
+
+      await renderAndRunQuery(query);
+      messageApi.error.mockClear();
+
+      await act(async () => {
+        await dataGridState.latestProps.onReload();
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      expect(messageApi.error).toHaveBeenCalledWith('Refresh failed: socket closed');
+      expect(messageApi.error).not.toHaveBeenCalledWith('刷新失败: socket closed');
+    });
+  });
+
+  it('shows "No running query to cancel." in English when stop is clicked before a query id exists', async () => {
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+
+    backendApp.GenerateQueryID.mockReturnValueOnce(new Promise(() => {}));
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'select 1;' })} />);
+    });
+
+    await act(async () => {
+      findButton(renderer, 'Run').props.onClick();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      await findButton(renderer, 'Stop').props.onClick();
+    });
+
+    expect(messageApi.warning).toHaveBeenCalledWith('No running query to cancel.');
+    expect(messageApi.warning).not.toHaveBeenCalledWith('没有正在运行的查询可取消');
+  });
+
+  it('shows "Query canceled." in English when stop cancels a running query', async () => {
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+
+    backendApp.GenerateQueryID.mockResolvedValueOnce('query-1');
+    backendApp.DBQueryMulti.mockReturnValueOnce(new Promise(() => {}));
+    backendApp.CancelQuery.mockResolvedValueOnce({ success: true });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'select 1;' })} />);
+    });
+
+    await act(async () => {
+      findButton(renderer, 'Run').props.onClick();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      await findButton(renderer, 'Stop').props.onClick();
+    });
+
+    expect(messageApi.success).toHaveBeenCalledWith('Query canceled.');
+    expect(messageApi.success).not.toHaveBeenCalledWith('查询已取消');
+  });
+
+  it('shows "Failed to cancel query" in English while preserving the raw error detail', async () => {
+    storeState.languagePreference = 'en-US';
+    setCurrentLanguage('en-US');
+
+    backendApp.GenerateQueryID.mockResolvedValueOnce('query-1');
+    backendApp.DBQueryMulti.mockReturnValueOnce(new Promise(() => {}));
+    backendApp.CancelQuery.mockRejectedValueOnce(new Error('network down'));
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'select 1;' })} />);
+    });
+
+    await act(async () => {
+      findButton(renderer, 'Run').props.onClick();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      await findButton(renderer, 'Stop').props.onClick();
+    });
+
+    expect(messageApi.error).toHaveBeenCalledWith('Failed to cancel query: network down');
+    expect(messageApi.error).not.toHaveBeenCalledWith('取消查询失败: network down');
+  });
+
+  it('runs only appended SQL and keeps existing results after a full editor execution', async () => {
+    backendApp.DBQueryMulti
+      .mockResolvedValueOnce({
+        success: true,
+        data: [{ columns: ['a'], rows: [{ a: 1 }] }],
+      })
+      .mockResolvedValueOnce({
+        success: true,
+        data: [{ columns: ['b'], rows: [{ b: 2 }] }],
+      });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1 as a;',
+      })} />);
+    });
+
+    editorState.position = { lineNumber: 1, column: 'select 1 as a;'.length + 1 };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    editorState.value = 'select 1 as a;\nselect 2 as b;';
+    editorState.position = { lineNumber: 2, column: 'select 2 as b;'.length + 1 };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(2);
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('select 1 as a');
+    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).toContain('select 2 as b');
+    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).not.toContain('select 1 as a');
+    expect(textContent(renderer!.toJSON())).toContain('结果 1');
+    expect(textContent(renderer!.toJSON())).toContain('结果 2');
+    expect(renderer!.root.findAll((node) => {
+      const className = String(node.props?.className || '');
+      return className.includes('query-result-tab-count') && textContent(node) === '1';
+    })).toHaveLength(2);
+  });
+
+  it('replaces existing result tabs when rerunning the same formatted SQL', async () => {
+    backendApp.DBQueryMulti
+      .mockResolvedValueOnce({
+        success: true,
+        data: [
+          { columns: ['id'], rows: [{ id: 1 }, { id: 2 }, { id: 3 }] },
+          { columns: ['id'], rows: Array.from({ length: 10 }, (_, index) => ({ id: index + 1 })) },
+        ],
+      })
+      .mockResolvedValueOnce({
+        success: true,
+        data: [
+          { columns: ['id'], rows: [{ id: 11 }, { id: 12 }, { id: 13 }] },
+          { columns: ['id'], rows: Array.from({ length: 10 }, (_, index) => ({ id: index + 11 })) },
+        ],
+      });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'SELECT * FROM fs_org_auth_application;\nSELECT * FROM fs_bcp_auth_info;',
+      })} />);
+    });
+
+    editorState.position = { lineNumber: 1, column: 'SELECT * FROM fs_org_auth_application;'.length + 1 };
+    editorState.selection = null;
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(textContent(renderer!.toJSON())).toContain('结果 1');
+    expect(textContent(renderer!.toJSON())).toContain('结果 2');
+
+    editorState.value = [
+      'SELECT',
+      '    *',
+      'FROM',
+      '    fs_org_auth_application;',
+      '',
+      'SELECT',
+      '    *',
+      'FROM',
+      '    fs_bcp_auth_info;',
+    ].join('\n');
+    editorState.position = { lineNumber: 4, column: '    fs_org_auth_application;'.length + 1 };
+    editorState.selection = null;
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(2);
+    expect(textContent(renderer!.toJSON())).toContain('结果 1');
+    expect(textContent(renderer!.toJSON())).toContain('结果 2');
+    expect(textContent(renderer!.toJSON())).not.toContain('结果 3');
+    expect(textContent(renderer!.toJSON())).not.toContain('结果 4');
+    expect(renderer!.root.findAll((node) => {
+      const className = String(node.props?.className || '');
+      return className.includes('query-result-tab-label');
+    })).toHaveLength(2);
+  });
+
+  it('provides context menu actions for query result tabs', async () => {
+    backendApp.DBQueryMulti.mockResolvedValue({
+      success: true,
+      data: [
+        { columns: ['a'], rows: [{ a: 1 }] },
+        { columns: ['b'], rows: [{ b: 2 }] },
+        { columns: ['c'], rows: [{ c: 3 }] },
+      ],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1 as a;\nselect 2 as b;\nselect 3 as c;',
+      })} />);
+    });
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(renderer!.root.findAll((node) => {
+      const className = String(node.props?.className || '');
+      return className.includes('query-result-tab-label');
+    })).toHaveLength(3);
+
+    await act(async () => {
+      renderer!.root.findAll((node) => node.type === 'button' && textContent(node) === '关闭右侧')[1].props.onClick();
+    });
+    expect(renderer!.root.findAll((node) => {
+      const className = String(node.props?.className || '');
+      return className.includes('query-result-tab-label');
+    })).toHaveLength(2);
+    expect(textContent(renderer!.toJSON())).not.toContain('结果 3');
+
+    await act(async () => {
+      renderer!.root.findAll((node) => node.type === 'button' && textContent(node) === '关闭左侧')[1].props.onClick();
+    });
+    expect(renderer!.root.findAll((node) => {
+      const className = String(node.props?.className || '');
+      return className.includes('query-result-tab-label');
+    })).toHaveLength(1);
+    expect(dataGridState.latestProps?.data).toEqual(expect.arrayContaining([expect.objectContaining({ b: 2 })]));
+    expect(dataGridState.latestProps?.data).not.toEqual(expect.arrayContaining([expect.objectContaining({ a: 1 })]));
+    expect(dataGridState.latestProps?.data).not.toEqual(expect.arrayContaining([expect.objectContaining({ c: 3 })]));
+
+    await act(async () => {
+      renderer!.root.findAll((node) => node.type === 'button' && textContent(node) === '关闭所有')[0].props.onClick();
+    });
+    expect(renderer!.root.findAll((node) => {
+      const className = String(node.props?.className || '');
+      return className.includes('query-result-tab-label');
+    })).toHaveLength(0);
+  });
+
+  it('replaces the current result when rerunning the same cursor SQL', async () => {
+    backendApp.DBQueryMulti
+      .mockResolvedValueOnce({
+        success: true,
+        data: [{ columns: ['a'], rows: [{ a: 1 }] }],
+      })
+      .mockResolvedValueOnce({
+        success: true,
+        data: [{ columns: ['a'], rows: [{ a: 10 }] }],
+      });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1 as a;\nselect 2 as b;\nselect 3 as c;',
+      })} />);
+    });
+
+    editorState.position = { lineNumber: 1, column: 'select 1 as a;'.length + 1 };
+    editorState.selection = {
+      startLineNumber: 1,
+      startColumn: 'select 1 as a;'.length + 1,
+      endLineNumber: 1,
+      endColumn: 'select 1 as a;'.length + 1,
+      positionLineNumber: 1,
+      positionColumn: 'select 1 as a;'.length + 1,
+    };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const tabLabels = renderer!.root.findAll((node) => textContent(node).includes('结果 '));
+    expect(textContent(renderer!.toJSON())).toContain('结果 1');
+    expect(textContent(renderer!.toJSON())).not.toContain('结果 2');
+    expect(tabLabels.length).toBeGreaterThan(0);
+    expect(dataGridState.latestProps?.data).toEqual(expect.arrayContaining([expect.objectContaining({ a: 10 })]));
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(2);
+    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).toContain('select 1 as a');
+    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).not.toContain('select 2 as b');
+  });
+
+  it('appends a result when running a different cursor SQL after an existing result', async () => {
+    backendApp.DBQueryMulti
+      .mockResolvedValueOnce({
+        success: true,
+        data: [{ columns: ['a'], rows: [{ a: 1 }] }],
+      })
+      .mockResolvedValueOnce({
+        success: true,
+        data: [{ columns: ['b'], rows: [{ b: 2 }] }],
+      });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1 as a;\nselect 2 as b;\nselect 3 as c;',
+      })} />);
+    });
+
+    editorState.position = { lineNumber: 1, column: 'select 1 as a;'.length + 1 };
+    editorState.selection = {
+      startLineNumber: 1,
+      startColumn: 'select 1 as a;'.length + 1,
+      endLineNumber: 1,
+      endColumn: 'select 1 as a;'.length + 1,
+      positionLineNumber: 1,
+      positionColumn: 'select 1 as a;'.length + 1,
+    };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    editorState.position = { lineNumber: 2, column: 'select 2 as b;'.length + 1 };
+    editorState.selection = {
+      startLineNumber: 2,
+      startColumn: 'select 2 as b;'.length + 1,
+      endLineNumber: 2,
+      endColumn: 'select 2 as b;'.length + 1,
+      positionLineNumber: 2,
+      positionColumn: 'select 2 as b;'.length + 1,
+    };
+
+    await act(async () => {
+      const runButton = findButton(renderer!, '运行');
+      runButton.props.onMouseDown?.({ preventDefault: vi.fn() });
+      await runButton.props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledTimes(2);
+    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).toContain('select 2 as b');
+    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).not.toContain('select 1 as a');
+    expect(String(backendApp.DBQueryMulti.mock.calls[1][2])).not.toContain('select 3 as c');
+    expect(textContent(renderer!.toJSON())).toContain('结果 1');
+    expect(textContent(renderer!.toJSON())).toContain('结果 2');
+    expect(dataGridState.latestProps?.data).toEqual(expect.arrayContaining([expect.objectContaining({ b: 2 })]));
+    expect(dataGridState.latestProps?.data).not.toEqual(expect.arrayContaining([expect.objectContaining({ a: 1 })]));
+  });
+
+  it('renders compact result tab labels with row counts outside the title text', async () => {
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [
+        { columns: ['a'], rows: [{ a: 1 }, { a: 2 }] },
+        { columns: ['b'], rows: [{ b: 3 }] },
+      ],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1 as a;\nselect 2 as b;',
+      })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const tabLabels = renderer!.root.findAll((node) => {
+      const className = String(node.props?.className || '');
+      return className.includes('query-result-tab-label');
+    });
+    const counts = renderer!.root.findAll((node) => {
+      const className = String(node.props?.className || '');
+      return className.includes('query-result-tab-count');
+    });
+    const titles = renderer!.root.findAll((node) => {
+      const className = String(node.props?.className || '');
+      return className.includes('query-result-tab-text');
+    });
+
+    expect(tabLabels).toHaveLength(2);
+    expect(titles.map((node) => textContent(node))).toEqual(['结果 1', '结果 2']);
+    expect(counts.map((node) => textContent(node))).toEqual(['2', '1']);
+    expect(textContent(renderer!.toJSON())).not.toContain('结果 1 (2)');
+  });
+
+  it('keeps query result tabs compact, centered, and readable in v2 UI', () => {
+    const source = readFileSync(new URL('./QueryEditorResultsPanel.tsx', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
+
+    expect(source).toContain('.query-result-tabs .ant-tabs-tab {');
+    expect(source).toContain('width: auto !important;');
+    expect(source).toContain('max-width: 148px !important;');
+    expect(source).toContain('height: 30px !important;');
+    expect(source).toContain('align-items: center !important;');
+    expect(source).toContain('font-size: 14px !important;');
+    expect(source).toContain('.query-result-tab-text {');
+    expect(source).toContain('user-select: none;');
+    expect(source).toContain('font-weight: 700;');
+    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab {');
+    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab-btn {');
+    expect(css).toContain('user-select: none;');
+    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-results .query-result-tab-text {');
+  });
+
+  it('keeps the v2 query editor toolbar grouped and compact', () => {
+    const source = readFileSync(new URL('./QueryEditor.tsx', import.meta.url), 'utf8');
+    const toolbarSource = readFileSync(new URL('./QueryEditorToolbar.tsx', import.meta.url), 'utf8');
+    const resultsPanelSource = readFileSync(new URL('./QueryEditorResultsPanel.tsx', import.meta.url), 'utf8');
+    const transactionSettingsSource = readFileSync(new URL('./QueryEditorTransactionSettings.tsx', import.meta.url), 'utf8');
+    const transactionToolbarSource = readFileSync(new URL('./QueryEditorTransactionToolbar.tsx', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
+
+    expect(source).toContain('QueryEditorToolbar');
+    expect(toolbarSource).toContain('gn-v2-query-toolbar-selects');
+    expect(toolbarSource).toContain('gn-v2-query-toolbar-actions');
+    expect(toolbarSource).toContain('gn-v2-query-toolbar-connection-select');
+    expect(toolbarSource).toContain('gn-v2-query-toolbar-database-select');
+    expect(toolbarSource).toContain('gn-v2-query-toolbar-max-rows-select');
+    expect(toolbarSource).toContain('QueryEditorTransactionSettings');
+    expect(transactionSettingsSource).toContain('gn-v2-query-toolbar-transaction-mode-select');
+    expect(transactionSettingsSource).toContain('gn-v2-query-toolbar-transaction-delay-select');
+    expect(transactionSettingsSource).toContain('query_editor.transaction.mode.tooltip');
+    expect(transactionSettingsSource).toContain('query_editor.transaction.mode.manual');
+    expect(transactionSettingsSource).toContain('query_editor.transaction.mode.auto');
+    expect(transactionSettingsSource).not.toContain("label: '手动提交'");
+    expect(transactionSettingsSource).not.toContain("label: '自动提交'");
+    expect(transactionSettingsSource).toContain('query_editor.transaction.delay.immediate');
+    expect(transactionSettingsSource).toContain("label: '3s'");
+    expect(source).toContain('QueryEditorTransactionToolbar');
+    expect(transactionToolbarSource).toContain("className={isV2Ui ? 'gn-v2-query-transaction-toolbar' : undefined}");
+    expect(transactionToolbarSource).toContain(": null;");
+    expect(transactionToolbarSource).toContain('gn-v2-query-transaction-commit-button');
+    expect(transactionToolbarSource).toContain('gn-v2-toolbar-kbd');
+    expect(transactionToolbarSource).toContain('query_editor.transaction.status.auto_committing');
+    expect(transactionToolbarSource).toContain('onFinish');
+    expect(toolbarSource).toContain('{isV2Ui && pendingTransactionToolbar}');
+    expect(toolbarSource).not.toContain('gn-v2-query-toolbar-transaction-row');
+    expect(resultsPanelSource).not.toContain('transactionToolbar?: React.ReactNode;');
+    expect(toolbarSource).toContain('gn-v2-query-toolbar-action-group');
+    expect(toolbarSource).toContain('gn-v2-query-toolbar-action-pair');
+    expect(toolbarSource).toContain('const aiMenuItems');
+    expect(toolbarSource).toContain('key: "toggle-result-panel"');
+    expect(toolbarSource).toContain('{!isV2Ui && (');
+    expect(toolbarSource).toContain('trigger={["click"]}');
+    expect(toolbarSource.indexOf('onClick={onQuickSave}')).toBeLessThan(toolbarSource.indexOf('menu={{ items: aiMenuItems }}'));
+    expect(toolbarSource.indexOf('menu={{ items: aiMenuItems }}')).toBeLessThan(toolbarSource.indexOf('menu={{ items: moreMenuItems }}'));
+    expect(toolbarSource.indexOf('menu={{ items: moreMenuItems }}')).toBeLessThan(toolbarSource.indexOf('icon={<FormatPainterOutlined />}'));
+    expect(transactionSettingsSource).toContain('style={isV2Ui ? undefined : { width: 78 }}');
+    expect(transactionSettingsSource).toContain('style={isV2Ui ? undefined : { width: 68 }}');
+    expect(toolbarSource).toContain('style={isV2Ui ? undefined : { width: 200 }}');
+    expect(toolbarSource).toContain('style={isV2Ui ? undefined : { width: 170 }}');
+
+    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-selects');
+    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-actions');
+    expect(css).toContain('width: 74px !important;');
+    expect(css).toContain('width: 62px !important;');
+    expect(css).toContain('flex: 0 0 auto !important;');
+    expect(css).toContain('justify-content: flex-start;');
+    expect(css).toContain('height: 32px !important;');
+    expect(css).toContain('line-height: 30px !important;');
+    expect(css).toContain('display: inline-flex !important;');
+    expect(css).toContain('gap: 6px;');
+    expect(css).toContain('overflow-x: auto;');
+    expect(css).toContain('overflow-y: hidden;');
+    expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-action-pair');
+    expect(css).toContain('gap: 8px;');
+    expect(css).toContain('margin-left: 0 !important;');
+    expect(css).toContain('max-width: 760px;');
+    expect(css).toContain('width: 140px !important;');
+    expect(css).toContain('width: 166px !important;');
+    expect(css).toContain('width: 132px !important;');
+    expect(css).toContain('width: 34px !important;');
+    expect(css).toContain('@media (max-width: 900px)');
+    expect(css).not.toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-transaction-row {');
+
+    const queryToolbarMainCss = css.slice(css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-main {'), css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-selects {'));
+    expect(queryToolbarMainCss).toContain('flex-wrap: nowrap;');
+    expect(queryToolbarMainCss).toContain('width: max-content;');
+    expect(queryToolbarMainCss).not.toContain('flex-wrap: wrap;');
+    expect(queryToolbarMainCss).not.toContain('margin-left: auto;');
+    expect(queryToolbarMainCss).not.toContain('justify-content: flex-end;');
+  });
+
+  it('keeps custom SQL snippet syntax help editable and uses it in completion details', () => {
+    const modalSource = readFileSync(new URL('./SnippetSettingsModal.tsx', import.meta.url), 'utf8');
+    const source = readFileSync(new URL('./QueryEditor.tsx', import.meta.url), 'utf8');
+
+    expect(modalSource).toContain('片段语法说明（可编辑）');
+    expect(modalSource).toContain('data-sql-snippet-syntax-help-editor="true"');
+    expect(modalSource).toContain("defaultActiveKey={['snippet-help']}");
+    expect(modalSource).toContain('footer={null}');
+    expect(modalSource).toContain('data-sql-snippet-action-row="true"');
+    expect(modalSource).toContain('body: { paddingTop: 8, paddingBottom: 24 }');
+    expect(modalSource).toContain("size=\"large\"");
+    expect(modalSource).toContain('minWidth: 96');
+    expect(modalSource).toContain('syntaxHelp');
+    expect(modalSource).toContain('占位符语法参考');
+    expect(source).toContain('s.syntaxHelp || s.description || s.body');
+  });
+
+  it('coalesces editor result splitter dragging through requestAnimationFrame', async () => {
+    const moveListeners: Array<(event: MouseEvent) => void> = [];
+    const upListeners: Array<() => void> = [];
+    const frameCallbacks: FrameRequestCallback[] = [];
+    vi.mocked(document.addEventListener).mockImplementation((type: string, listener: any) => {
+      if (type === 'mousemove') moveListeners.push(listener);
+      if (type === 'mouseup') upListeners.push(listener);
+    });
+    vi.mocked(window.requestAnimationFrame).mockImplementation((callback: FrameRequestCallback) => {
+      frameCallbacks.push(callback);
+      return frameCallbacks.length;
+    });
+
+    let renderer!: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ resultPanelVisible: true })} />);
+    });
+
+    const resizer = renderer.root.find((node) => node.props?.title === '拖动调整高度');
+    await act(async () => {
+      resizer.props.onMouseDown({ clientY: 300, preventDefault: vi.fn() });
+      moveListeners.forEach((listener) => listener({ clientY: 340 } as MouseEvent));
+      moveListeners.forEach((listener) => listener({ clientY: 380 } as MouseEvent));
+    });
+
+    expect(window.requestAnimationFrame).toHaveBeenCalledTimes(1);
+    expect(editorState.editor.layout).not.toHaveBeenCalled();
+
+    await act(async () => {
+      frameCallbacks.splice(0).forEach((callback) => callback(16));
+    });
+    expect(editorState.editor.layout).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      upListeners.forEach((listener) => listener());
+    });
+    expect(editorState.editor.layout).toHaveBeenCalledTimes(2);
+    expect(document.removeEventListener).toHaveBeenCalledWith('mousemove', expect.any(Function));
+    expect(document.removeEventListener).toHaveBeenCalledWith('mouseup', expect.any(Function));
+  });
+
+  it('inserts sidebar object text when dropped into the SQL editor', async () => {
+    const domListeners: Record<string, ((event?: any) => void)[]> = {};
+    editorState.domNode = {
+      style: { cursor: '' },
+      addEventListener: vi.fn((type: string, listener: (event?: any) => void) => {
+        domListeners[type] ||= [];
+        domListeners[type].push(listener);
+      }),
+      removeEventListener: vi.fn(),
+    } as any;
+
+    await act(async () => {
+      create(<QueryEditor tab={createTab({ query: 'select * from ' })} />);
+    });
+
+    editorState.position = { lineNumber: 1, column: 'select * from '.length + 1 };
+
+    await act(async () => {
+      domListeners.drop?.forEach((listener) => listener({
+        clientX: 10,
+        clientY: 10,
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn(),
+        dataTransfer: {
+          types: ['application/x-gonavi-sql-object', 'text/plain'],
+          getData: (type: string) => {
+            if (type === 'application/x-gonavi-sql-object') {
+              return JSON.stringify({ text: 'reporting.active_users' });
+            }
+            if (type === 'text/plain') {
+              return 'reporting.active_users';
+            }
+            return '';
+          },
+        },
+      }));
+    });
+
+    expect(editorState.editor.executeEdits).toHaveBeenCalledWith(
+      'gonavi-sidebar-drop',
+      [expect.objectContaining({ text: 'reporting.active_users' })],
+    );
+    expect(editorState.value).toContain('reporting.active_users');
+  });
+
+  it('prevents Monaco native drag marker and keeps metadata hover after sidebar object drops', async () => {
+    const domListeners: Record<string, ((event?: any) => void)[]> = {};
+    editorState.domNode = {
+      style: { cursor: '' },
+      addEventListener: vi.fn((type: string, listener: (event?: any) => void) => {
+        domListeners[type] ||= [];
+        domListeners[type].push(listener);
+      }),
+      removeEventListener: vi.fn(),
+    } as any;
+    editorState.editor.getTargetAtClientPoint = vi.fn(() => ({
+      position: { lineNumber: 1, column: 'SELECT * FROM '.length + 1 },
+    }));
+    editorState.value = 'SELECT * FROM ';
+    autoFetchState.visible = true;
+    backendApp.DBGetDatabases.mockResolvedValueOnce({ success: true, data: [{ Database: 'front_end_sys' }] });
+    backendApp.DBGetTables.mockResolvedValueOnce({ success: true, data: [{ Tables_in_front_end_sys: 'fs_mkefu_regist_record' }] });
+    backendApp.DBGetAllColumns.mockResolvedValueOnce({ success: true, data: [] });
+
+    await act(async () => {
+      create(<QueryEditor tab={createTab({ query: editorState.value, dbName: 'front_end_sys' })} />);
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const dragOverEvent = {
+      preventDefault: vi.fn(),
+      stopPropagation: vi.fn(),
+      dataTransfer: {
+        types: ['application/x-gonavi-sql-object', 'text/plain'],
+        dropEffect: 'none',
+        getData: vi.fn(() => ''),
+      },
+    };
+    await act(async () => {
+      domListeners.dragover?.forEach((listener) => listener(dragOverEvent));
+    });
+
+    expect(dragOverEvent.preventDefault).toHaveBeenCalled();
+    expect(dragOverEvent.stopPropagation).toHaveBeenCalled();
+    expect(dragOverEvent.dataTransfer.dropEffect).toBe('copy');
+    expect(dragOverEvent.dataTransfer.getData).not.toHaveBeenCalled();
+
+    await act(async () => {
+      domListeners.drop?.forEach((listener) => listener({
+        clientX: 10,
+        clientY: 10,
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn(),
+        dataTransfer: {
+          types: ['application/x-gonavi-sql-object', 'text/plain'],
+          getData: (type: string) => {
+            if (type === 'application/x-gonavi-sql-object') {
+              return JSON.stringify({ text: 'fs_mkefu_regist_record' });
+            }
+            if (type === 'text/plain') {
+              return 'fs_mkefu_regist_record';
+            }
+            return '';
+          },
+        },
+      }));
+    });
+
+    const hover = editorState.hoverProviders[0]?.provideHover(
+      editorState.editor.getModel(),
+      { lineNumber: 1, column: 'SELECT * FROM fs_mkefu_regist_record'.length },
+    );
+    expect(editorState.value).toContain('fs_mkefu_regist_record');
+    expect(hover?.contents?.[0]?.value).toContain('**表** `fs_mkefu_regist_record`');
+
+    await act(async () => {
+      editorState.mouseDownListeners[0]?.({
+        target: { position: { lineNumber: 1, column: 'SELECT * FROM fs_mkefu_regist_record'.length } },
+        event: {
+          leftButton: true,
+          ctrlKey: true,
+          metaKey: false,
+          preventDefault: vi.fn(),
+          stopPropagation: vi.fn(),
+        },
+      });
+    });
+
+    expect(storeState.setActiveContext).toHaveBeenCalledWith({ connectionId: 'conn-1', dbName: 'front_end_sys' });
+    expect(storeState.addTab).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'table',
+      connectionId: 'conn-1',
+      dbName: 'front_end_sys',
+      tableName: 'fs_mkefu_regist_record',
+      objectType: 'table',
+    }));
+  });
+
+  it('keeps sidebar object navigation tied to the dragged database after drop', async () => {
+    const domListeners: Record<string, ((event?: any) => void)[]> = {};
+    editorState.domNode = {
+      style: { cursor: '' },
+      addEventListener: vi.fn((type: string, listener: (event?: any) => void) => {
+        domListeners[type] ||= [];
+        domListeners[type].push(listener);
+      }),
+      removeEventListener: vi.fn(),
+    } as any;
+    editorState.editor.getTargetAtClientPoint = vi.fn(() => ({
+      position: { lineNumber: 1, column: 'SELECT * FROM '.length + 1 },
+    }));
+    editorState.value = 'SELECT * FROM ';
+    autoFetchState.visible = true;
+    backendApp.DBGetDatabases.mockResolvedValueOnce({ success: true, data: [{ Database: 'main' }, { Database: 'front_end_sys' }] });
+    backendApp.DBGetTables
+      .mockResolvedValueOnce({ success: true, data: [{ Tables_in_main: 'users' }] })
+      .mockResolvedValueOnce({ success: true, data: [{ Tables_in_front_end_sys: 'fs_mkefu_regist_record' }] });
+    backendApp.DBGetAllColumns
+      .mockResolvedValueOnce({ success: true, data: [] })
+      .mockResolvedValueOnce({ success: true, data: [] });
+
+    await act(async () => {
+      create(<QueryEditor tab={createTab({ query: editorState.value, dbName: 'main' })} />);
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    await act(async () => {
+      domListeners.drop?.forEach((listener) => listener({
+        clientX: 10,
+        clientY: 10,
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn(),
+        dataTransfer: {
+          types: ['application/x-gonavi-sql-object', 'text/plain'],
+          getData: (type: string) => {
+            if (type === 'application/x-gonavi-sql-object') {
+              return JSON.stringify({
+                text: 'fs_mkefu_regist_record',
+                nodeType: 'table',
+                connectionId: 'conn-1',
+                dbName: 'front_end_sys',
+              });
+            }
+            if (type === 'text/plain') {
+              return 'fs_mkefu_regist_record';
+            }
+            return '';
+          },
+        },
+      }));
+    });
+
+    expect(editorState.value).toContain('front_end_sys.fs_mkefu_regist_record');
+
+    await act(async () => {
+      editorState.mouseDownListeners[0]?.({
+        target: { position: { lineNumber: 1, column: 'SELECT * FROM front_end_sys.fs_mkefu_regist_record'.length } },
+        event: {
+          leftButton: true,
+          ctrlKey: true,
+          metaKey: false,
+          preventDefault: vi.fn(),
+          stopPropagation: vi.fn(),
+        },
+      });
+    });
+
+    expect(storeState.setActiveContext).toHaveBeenCalledWith({ connectionId: 'conn-1', dbName: 'front_end_sys' });
+    expect(storeState.addTab).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'table',
+      connectionId: 'conn-1',
+      dbName: 'front_end_sys',
+      tableName: 'fs_mkefu_regist_record',
+      objectType: 'table',
+    }));
+  });
+
+  it('runs selected SQL before cursor SQL', async () => {
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['selected'], rows: [{ selected: 2 }] }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'select 1;\nselect 2 as selected;\nselect 3;',
+      })} />);
+    });
+
+    editorState.position = { lineNumber: 1, column: 4 };
+    editorState.selection = {
+      startLineNumber: 2,
+      startColumn: 1,
+      endLineNumber: 2,
+      endColumn: 'select 2 as selected'.length + 1,
+    };
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBQueryMulti).toHaveBeenCalledWith(expect.anything(), 'main', expect.stringContaining('select 2 as selected'), 'query-1');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 1');
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).not.toContain('select 3');
+  });
+
+  it('allows editable table columns while leaving expression columns out of commits', async () => {
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{
+        columns: ['DISPLAY_NAME', 'NAME_UPPER', '__gonavi_locator_1_ID'],
+        rows: [{ DISPLAY_NAME: 'old-name', NAME_UPPER: 'OLD-NAME', __gonavi_locator_1_ID: 7 }],
+      }],
+    });
+    backendApp.DBGetColumns.mockResolvedValueOnce({
+      success: true,
+      data: [{ name: 'ID', key: 'PRI' }, { name: 'NAME', key: '' }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({
+        dbName: 'main',
+        query: 'SELECT NAME AS DISPLAY_NAME, UPPER(NAME) AS NAME_UPPER FROM users',
+      })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(dataGridState.latestProps?.tableName).toBe('users');
+    expect(dataGridState.latestProps?.editLocator).toMatchObject({
+      strategy: 'primary-key',
+      columns: ['ID'],
+      valueColumns: ['__gonavi_locator_1_ID'],
+      hiddenColumns: ['__gonavi_locator_1_ID'],
+      writableColumns: {
+        DISPLAY_NAME: 'NAME',
+      },
+      readOnly: false,
+    });
+    expect(dataGridState.latestProps?.readOnly).toBe(false);
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('`ID` AS `__gonavi_locator_1_ID`');
+    expect(messageApi.warning).not.toHaveBeenCalled();
+  });
+
+  it('keeps DuckDB qualified table query results writable when primary key metadata arrives', async () => {
+    storeState.connections[0].config.type = 'duckdb';
+    storeState.connections[0].config.database = 'main';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['NAME', '__gonavi_locator_1_id'], rows: [{ NAME: 'launch', __gonavi_locator_1_id: 7 }] }],
+    });
+    backendApp.DBGetColumns.mockResolvedValueOnce({
+      success: true,
+      data: [{ name: 'id', key: 'PRI' }, { name: 'name', key: '' }],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM main.events' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(backendApp.DBGetColumns).toHaveBeenCalledWith(expect.anything(), 'main', 'main.events');
+    expect(dataGridState.latestProps?.tableName).toBe('main.events');
+    expect(dataGridState.latestProps?.pkColumns).toEqual(['id']);
+    expect(dataGridState.latestProps?.editLocator).toMatchObject({
+      strategy: 'primary-key',
+      columns: ['id'],
+      valueColumns: ['__gonavi_locator_1_id'],
+      hiddenColumns: ['__gonavi_locator_1_id'],
+      writableColumns: {
+        NAME: 'name',
+      },
+      readOnly: false,
+    });
+    expect(dataGridState.latestProps?.readOnly).toBe(false);
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('"id" AS "__gonavi_locator_1_id"');
+    expect(messageApi.warning).not.toHaveBeenCalled();
+  });
+
+  it('uses hidden DuckDB rowid when query results have no primary or unique key', async () => {
+    storeState.connections[0].config.type = 'duckdb';
+    storeState.connections[0].config.database = 'main';
+    backendApp.DBQueryMulti.mockResolvedValueOnce({
+      success: true,
+      data: [{ columns: ['NAME', '__gonavi_duckdb_rowid__'], rows: [{ NAME: 'launch', __gonavi_duckdb_rowid__: 17 }] }],
+    });
+    backendApp.DBGetColumns.mockResolvedValueOnce({
+      success: true,
+      data: [{ name: 'name', key: '' }],
+    });
+    backendApp.DBGetIndexes.mockResolvedValueOnce({
+      success: true,
+      data: [],
+    });
+
+    let renderer: ReactTestRenderer;
+    await act(async () => {
+      renderer = create(<QueryEditor tab={createTab({ dbName: 'main', query: 'SELECT NAME FROM main.events' })} />);
+    });
+
+    await act(async () => {
+      await findButton(renderer!, '运行').props.onClick();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(dataGridState.latestProps?.tableName).toBe('main.events');
+    expect(dataGridState.latestProps?.pkColumns).toEqual([]);
+    expect(dataGridState.latestProps?.editLocator).toMatchObject({
+      strategy: 'duckdb-rowid',
+      columns: ['rowid'],
+      valueColumns: ['__gonavi_duckdb_rowid__'],
+      hiddenColumns: ['__gonavi_duckdb_rowid__'],
+      writableColumns: {
+        NAME: 'name',
+      },
+      readOnly: false,
+    });
+    expect(dataGridState.latestProps?.readOnly).toBe(false);
+    expect(String(backendApp.DBQueryMulti.mock.calls[0][2])).toContain('rowid AS "__gonavi_duckdb_rowid__"');
+    expect(messageApi.warning).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    'mysql',
+    'mariadb',
+    'oceanbase',
+    'diros',
+    'sphinx',
+    'postgres',
+    'kingbase',
+    'highgo',
+    'vastbase',
+    'opengauss',
+    'gaussdb',
+    'sqlserver',
+    'sqlite',
+    'duckdb',
+    'oracle',
+    'dameng',
+    'tdengine',
+    'clickhouse',
+  ])(
+    'keeps aggregate query results silently read-only for %s',
+    async (dbType) => {
+      storeState.connections[0].config.type = dbType;
+      storeState.connections[0].config.database = dbType === 'oracle' || dbType === 'dameng' ? 'APP' : 'main';
+      const forceReadOnlyQueryResult = dbType === 'tdengine' || dbType === 'clickhouse';
+      backendApp.DBQueryMulti.mockResolvedValueOnce({
+        success: true,
+        data: [{ columns: ['COUNT'], rows: [{ COUNT: 1 }] }],
+      });
+
+      let renderer: ReactTestRenderer;
+      await act(async () => {
+        renderer = create(<QueryEditor tab={createTab({
+          dbName: storeState.connections[0].config.database,
+          query: 'SELECT count(1) FROM users',
+        })} />);
+      });
+
+      await act(async () => {
+        await findButton(renderer!, '运行').props.onClick();
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await Promise.resolve();
+      });
+
+      const expectedTableName = dbType === 'oracle' || dbType === 'dameng' ? 'USERS' : 'users';
+      expect(dataGridState.latestProps?.tableName).toBe(forceReadOnlyQueryResult ? undefined : expectedTableName);
+      expect(dataGridState.latestProps?.editLocator).toBeUndefined();
+      expect(dataGridState.latestProps?.readOnly).toBe(true);
+      expect(backendApp.DBGetColumns).not.toHaveBeenCalled();
+      expect(backendApp.DBGetIndexes).not.toHaveBeenCalled();
+      expect(messageApi.warning).not.toHaveBeenCalled();
+    },
+  );
+});
diff --git a/frontend/src/components/QueryEditor.tsx b/frontend/src/components/QueryEditor.tsx
index 79292bd..91de3e6 100644
--- a/frontend/src/components/QueryEditor.tsx
+++ b/frontend/src/components/QueryEditor.tsx
@@ -2,11 +2,11 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback, lazy, Suspense } from 'react';
 import Editor, { type OnMount } from './MonacoEditor';
 import { message, Input, Form, MenuProps } from 'antd';
-import { format, type SqlLanguage } from 'sql-formatter';
+import { format } from 'sql-formatter';
 import { v4 as uuidv4 } from 'uuid';
-import { TabData, ColumnDefinition, IndexDefinition } from '../types';
+import { TabData, ColumnDefinition } from '../types';
 import { useStore } from '../store';
-import { DBQuery, DBQueryWithCancel, DBQueryMulti, DBQueryMultiTransactional, DBGetTables, DBGetAllColumns, DBGetDatabases, DBGetColumns, DBGetIndexes, CancelQuery, GenerateQueryID, WriteSQLFile, ExportSQLFile } from '../../wailsjs/go/app/App';
+import { DBQuery, DBQueryWithCancel, DBQueryMulti, DBQueryMultiTransactional, DBGetTables, DBGetAllColumns, DBGetDatabases, DBGetColumns, CancelQuery, GenerateQueryID, WriteSQLFile, ExportSQLFile } from '../../wailsjs/go/app/App';
 import { GONAVI_ROW_KEY } from './DataGrid';
 import { getDataSourceCapabilities, shouldShowOceanBaseRowNumberColumn } from '../utils/dataSourceCapabilities';
 import { applyMongoQueryAutoLimit, convertMongoShellToJsonCommand } from "../utils/mongodb";
@@ -53,6 +53,73 @@ import { SQL_EDITOR_AUTO_COMMIT_DELAY_OPTIONS } from './QueryEditorTransactionSe
 import QueryEditorTransactionToolbar from './QueryEditorTransactionToolbar';
 import QueryEditorToolbar from './QueryEditorToolbar';
 import { useSqlEditorTransactionController } from './useSqlEditorTransactionController';
+import {
+    type CompletionColumnMeta,
+    type CompletionRoutineMeta,
+    type CompletionTableMeta,
+    type CompletionTriggerMeta,
+    type CompletionViewMeta,
+    type QueryStatementPlan,
+    QUERY_EDITOR_HOVER_DELAY_MS,
+    QUERY_EDITOR_LIVE_DECORATION_MAX_TEXT_LENGTH,
+    QUERY_EDITOR_OBJECT_DECORATION_MAX_TEXT_LENGTH,
+    QUERY_EDITOR_PERSISTED_DRAFT_MAX_TEXT_LENGTH,
+    QUERY_EDITOR_SQL_QUALIFIER_COMPLETION_REGEX,
+    QUERY_EDITOR_SQL_TABLE_REFERENCE_REGEX,
+    QUERY_EDITOR_SQL_THREE_PART_COMPLETION_REGEX,
+    appendCommentToDetail,
+    areSqlStatementListsEqual,
+    buildCompletionDocumentation,
+    buildCompletionFunctionsMetadataQuerySpecs,
+    buildCompletionMaterializedViewsMetadataQuerySpecs,
+    buildCompletionTableCommentSQL,
+    buildCompletionTriggersMetadataQuerySpecs,
+    buildCompletionViewsMetadataQuerySpecs,
+    buildQueryEditorAliasMap,
+    buildQueryEditorHoverMarkdown,
+    buildQualifiedCompletionName,
+    clearQueryEditorLinkDecorations,
+    clearQueryEditorObjectDecorations,
+    collectQueryEditorObjectDecorationCandidates,
+    collectQueryEditorReferencedDatabaseNames,
+    dispatchQueryEditorSidebarLocate,
+    getCaseInsensitiveValue,
+    getFirstRowValue,
+    getInitialEditorQuery,
+    getMySQLShowTablesName,
+    getNormalizedOffsetAtPosition,
+    getQueryEditorDecorationModelTextIfLightweight,
+    getQueryEditorObjectResolveText,
+    getTabQueryValue,
+    isDocumentLevelShortcutTarget,
+    isQueryEditorPrimaryMouseButton,
+    normalizeCommentText,
+    normalizeCompletionQualifiedName,
+    normalizeEditorPosition,
+    normalizeExecutedSqlKey,
+    normalizeMetadataDialect,
+    queryCompletionMetadataRowsBySpecs,
+    readSidebarSqlDropText,
+    matchLeadingSelectTableReference,
+    resolveEventTargetNode,
+    resolveNextResultSetIndex,
+    resolveOracleExactCaseTableReference,
+    resolveOracleLikeDefaultSchemaName,
+    resolveQueryEditorFormatterLanguage,
+    resolveQueryEditorHoverTarget,
+    resolveQueryEditorNavigationDecorations,
+    resolveQueryEditorNavigationTarget,
+    resolveQueryLocatorPlan,
+    rewriteLeadingSelectTableReference,
+    splitCompletionSchemaAndTable,
+    splitQueryIdentifierPathSegments,
+    stripCompletionIdentifierQuotes,
+} from './queryEditor/QueryEditorHelpers';
+export {
+    collectQueryEditorObjectDecorationCandidates,
+    resolveQueryEditorNavigationDecorations,
+    resolveQueryEditorNavigationTarget,
+} from './queryEditor/QueryEditorHelpers';
 
 const UNTITLED_QUERY_DATABASE_PLACEHOLDER = '__GONAVI_QUERY_DATABASE__';
 
@@ -113,11 +180,6 @@ let sqlCompletionDisposables = _g.__gonaviSqlCompletionState.disposables;
 let sharedCurrentDb = '';
 let sharedCurrentConnectionId = '';
 let sharedConnections: any[] = [];
-type CompletionTableMeta = {dbName: string, tableName: string, comment?: string};
-type CompletionColumnMeta = {dbName: string, tableName: string, name: string, type: string, comment?: string};
-type CompletionViewMeta = {dbName: string, viewName: string, schemaName?: string};
-type CompletionTriggerMeta = {dbName: string, triggerName: string, tableName: string, schemaName?: string};
-type CompletionRoutineMeta = {dbName: string, routineName: string, routineType: string, schemaName?: string};
 let sharedTablesData: CompletionTableMeta[] = [];
 let sharedAllColumnsData: CompletionColumnMeta[] = [];
 let sharedVisibleDbs: string[] = [];
@@ -148,2049 +210,6 @@ const resetSharedQueryEditorMetadata = () => {
     clearRecord(sharedLazyTablesInFlight);
 };
 
-const QUERY_LOCATOR_ALIAS_PREFIX = '__gonavi_locator_';
-
-const buildQueryReadOnlyLocator = (reason: string): EditRowLocator => ({
-    strategy: 'none',
-    columns: [],
-    valueColumns: [],
-    readOnly: true,
-    reason,
-});
-
-type SimpleSelectInfo = {
-    selectsAll: boolean;
-    selectsBareAll: boolean;
-    writableColumns: Record<string, string>;
-};
-
-type QueryStatementPlan = {
-    originalSql: string;
-    executedSql: string;
-    tableRef?: QueryResultTableRef;
-    pkColumns: string[];
-    editLocator?: EditRowLocator;
-    warning?: string;
-};
-
-const stripSidebarDropIdentifierQuotes = (part: string): string => {
-    const text = String(part || '').trim();
-    if (!text) return '';
-    if ((text.startsWith('`') && text.endsWith('`')) || (text.startsWith('"') && text.endsWith('"')) || (text.startsWith('[') && text.endsWith(']'))) {
-        return text.slice(1, -1).trim();
-    }
-    return text;
-};
-
-const shouldPrefixSidebarDropDatabase = (
-    payloadConnectionId: string,
-    payloadDbName: string,
-    payloadText: string,
-    currentConnectionId: string,
-    currentDb: string,
-): boolean => {
-    const sourceDbName = String(payloadDbName || '').trim();
-    if (!sourceDbName) return false;
-    const normalizedSourceDbName = sourceDbName.toLowerCase();
-    if (String(currentDb || '').trim().toLowerCase() === normalizedSourceDbName) return false;
-
-    const sourceConnectionId = String(payloadConnectionId || '').trim();
-    const targetConnectionId = String(currentConnectionId || '').trim();
-    if (sourceConnectionId && targetConnectionId && sourceConnectionId !== targetConnectionId) return false;
-
-    const parts = String(payloadText || '')
-        .split('.')
-        .map(stripSidebarDropIdentifierQuotes)
-        .filter(Boolean);
-    return parts[0]?.toLowerCase() !== normalizedSourceDbName;
-};
-
-const isQueryEditorPrimaryMouseButton = (event: any): boolean => {
-    if (event?.leftButton === true) return true;
-    if (event?.leftButton === false) return false;
-
-    const browserEvent = event?.browserEvent || event?.nativeEvent || event;
-    if (browserEvent?.button === 0) return true;
-    if (event?.button === 0) return true;
-    if (browserEvent?.buttons === 1) return true;
-    if (event?.buttons === 1) return true;
-    return false;
-};
-
-const readSidebarSqlDropText = (
-    event: DragEvent,
-    currentConnectionId = '',
-    currentDb = '',
-): string => {
-    const payload = decodeSidebarSqlEditorDragPayload(String(event.dataTransfer?.getData(SIDEBAR_SQL_EDITOR_DRAG_MIME) || ''));
-    if (payload?.text) {
-        if (shouldPrefixSidebarDropDatabase(payload.connectionId || '', payload.dbName || '', payload.text, currentConnectionId, currentDb)) {
-            return `${String(payload.dbName || '').trim()}.${payload.text}`;
-        }
-        return payload.text;
-    }
-    return String(event.dataTransfer?.getData('text/plain') || '').trim();
-};
-
-const stripQueryIdentifierQuotes = (part: string): string => {
-    const text = String(part || '').trim();
-    if (!text) return '';
-    if ((text.startsWith('`') && text.endsWith('`')) || (text.startsWith('"') && text.endsWith('"'))) {
-        return text.slice(1, -1).trim();
-    }
-    if (text.startsWith('[') && text.endsWith(']')) {
-        return text.slice(1, -1).trim();
-    }
-    return text;
-};
-
-const MYSQL_SYSTEM_METADATA_SCHEMAS = new Set(['information_schema', 'performance_schema', 'mysql', 'sys']);
-const POSTGRES_SYSTEM_METADATA_SCHEMAS = new Set(['information_schema', 'pg_catalog']);
-const SQLITE_SYSTEM_METADATA_TABLES = new Set(['sqlite_master', 'sqlite_schema', 'sqlite_temp_master', 'sqlite_temp_schema']);
-
-const isSystemMetadataQueryResult = (tableRef: QueryResultTableRef, dbType: string): boolean => {
-    const normalizedDbType = String(dbType || '').trim().toLowerCase();
-    const metadataDbName = stripQueryIdentifierQuotes(tableRef.metadataDbName).toLowerCase();
-    const metadataTableName = stripQueryIdentifierQuotes(tableRef.metadataTableName).toLowerCase();
-
-    if (['mysql', 'goldendb', 'mariadb', 'oceanbase', 'diros', 'starrocks', 'sphinx', 'tidb'].includes(normalizedDbType)) {
-        return MYSQL_SYSTEM_METADATA_SCHEMAS.has(metadataDbName);
-    }
-    if (['postgres', 'kingbase', 'highgo', 'vastbase', 'opengauss', 'gaussdb'].includes(normalizedDbType)) {
-        return POSTGRES_SYSTEM_METADATA_SCHEMAS.has(metadataDbName);
-    }
-    if (normalizedDbType === 'sqlite' || normalizedDbType === 'duckdb') {
-        return SQLITE_SYSTEM_METADATA_TABLES.has(metadataTableName) || metadataDbName === 'information_schema';
-    }
-    if (normalizedDbType === 'sqlserver') {
-        return metadataDbName === 'information_schema' || metadataDbName === 'sys';
-    }
-    if (normalizedDbType === 'clickhouse') {
-        return metadataDbName === 'system' || metadataDbName === 'information_schema';
-    }
-    return false;
-};
-
-const splitTopLevelComma = (text: string): string[] => {
-    const parts: string[] = [];
-    let current = '';
-    let parenDepth = 0;
-    let inSingle = false;
-    let inDouble = false;
-    let inBacktick = false;
-    let escaped = false;
-
-    for (let index = 0; index < text.length; index++) {
-        const ch = text[index];
-        if (escaped) {
-            current += ch;
-            escaped = false;
-            continue;
-        }
-        if ((inSingle || inDouble) && ch === '\\') {
-            current += ch;
-            escaped = true;
-            continue;
-        }
-        if (!inDouble && !inBacktick && ch === "'") {
-            inSingle = !inSingle;
-            current += ch;
-            continue;
-        }
-        if (!inSingle && !inBacktick && ch === '"') {
-            inDouble = !inDouble;
-            current += ch;
-            continue;
-        }
-        if (!inSingle && !inDouble && ch === '`') {
-            inBacktick = !inBacktick;
-            current += ch;
-            continue;
-        }
-        if (!inSingle && !inDouble && !inBacktick) {
-            if (ch === '(') parenDepth++;
-            if (ch === ')' && parenDepth > 0) parenDepth--;
-            if (ch === ',' && parenDepth === 0) {
-                parts.push(current.trim());
-                current = '';
-                continue;
-            }
-        }
-        current += ch;
-    }
-
-    if (current.trim()) parts.push(current.trim());
-    return parts;
-};
-
-const SIMPLE_IDENTIFIER_PATH_RE = /^(?:[`"\[]?[A-Za-z_][\w$]*[`"\]]?\s*\.\s*){0,2}[`"\[]?[A-Za-z_][\w$]*[`"\]]?$/;
-const QUERY_ALIAS_RESERVED = new Set([
-    'where', 'group', 'order', 'having', 'limit', 'fetch', 'offset', 'join', 'left', 'right', 'inner', 'outer', 'on', 'union',
-    'for', 'connect', 'start', 'window', 'sample', 'pivot', 'unpivot', 'qualify', 'model',
-]);
-
-const getLastIdentifierPart = (path: string): string => {
-    const parts = String(path || '').split('.').map((part) => stripQueryIdentifierQuotes(part.trim())).filter(Boolean);
-    return parts[parts.length - 1] || '';
-};
-
-const resolveSimpleSelectItemColumn = (item: string): { resultName: string; sourceName: string } | 'all' | undefined => {
-    const text = String(item || '').trim();
-    if (!text) return undefined;
-    if (text === '*' || /\.\s*\*$/.test(text)) return 'all';
-
-    let expr = text;
-    let alias = '';
-    const asMatch = text.match(/^(.*?)\s+AS\s+([`"\[]?[A-Za-z_][\w$]*[`"\]]?)$/i);
-    if (asMatch) {
-        expr = asMatch[1].trim();
-        alias = stripQueryIdentifierQuotes(asMatch[2]);
-    } else {
-        const bareAliasMatch = text.match(/^(.*?)\s+([`"\[]?[A-Za-z_][\w$]*[`"\]]?)$/);
-        if (bareAliasMatch && SIMPLE_IDENTIFIER_PATH_RE.test(bareAliasMatch[1].trim())) {
-            const candidateAlias = stripQueryIdentifierQuotes(bareAliasMatch[2]);
-            if (candidateAlias && !QUERY_ALIAS_RESERVED.has(candidateAlias.toLowerCase())) {
-                expr = bareAliasMatch[1].trim();
-                alias = candidateAlias;
-            }
-        }
-    }
-
-    if (!SIMPLE_IDENTIFIER_PATH_RE.test(expr)) return undefined;
-    const sourceName = getLastIdentifierPart(expr);
-    const resultName = alias || sourceName;
-    return sourceName && resultName ? { resultName, sourceName } : undefined;
-};
-
-const parseSimpleSelectInfo = (sql: string): SimpleSelectInfo | undefined => {
-    const match = String(sql || '').match(/^\s*SELECT\s+([\s\S]+?)\s+FROM\s+/i);
-    if (!match) return undefined;
-    const selectList = match[1].trim();
-    if (!selectList || /^DISTINCT\b/i.test(selectList)) return undefined;
-
-    const writableColumns: Record<string, string> = {};
-    let selectsAll = false;
-    let selectsBareAll = false;
-    for (const item of splitTopLevelComma(selectList)) {
-        const trimmedItem = String(item || '').trim();
-        const resolved = resolveSimpleSelectItemColumn(item);
-        if (!resolved) continue;
-        if (resolved === 'all') {
-            selectsAll = true;
-            if (trimmedItem === '*') {
-                selectsBareAll = true;
-            }
-            continue;
-        }
-        writableColumns[resolved.resultName] = resolved.sourceName;
-    }
-    return { selectsAll, selectsBareAll, writableColumns };
-};
-
-const appendQuerySelectExpressions = (sql: string, expressions: string[]): string => {
-    if (expressions.length === 0) return sql;
-    return String(sql || '').replace(
-        /^(\s*SELECT\s+)([\s\S]+?)(\s+FROM\s+[\s\S]*)$/i,
-        (_match, prefix, selectList, rest) => `${prefix}${String(selectList).trimEnd()}, ${expressions.join(', ')}${rest}`,
-    );
-};
-
-const QUERY_LOCATOR_SOURCE_ALIAS = 'gonavi_query_source';
-
-const rewriteOracleSelectAllWithExpressions = (sql: string, expressions: string[]): string | undefined => {
-    if (expressions.length === 0) return undefined;
-
-    const match = String(sql || '').match(/^(\s*SELECT\s+)([\s\S]+?)(\s+FROM\s+)([\s\S]*)$/i);
-    if (!match) return undefined;
-
-    const prefix = match[1];
-    const selectList = match[2].trim();
-    const fromKeyword = match[3];
-    const fromTail = match[4];
-    const selectItems = splitTopLevelComma(selectList);
-    if (selectItems.length === 0) return undefined;
-
-    let selectAllFound = false;
-    for (const item of selectItems) {
-        if (String(item || '').trim() === '*') {
-            selectAllFound = true;
-            break;
-        }
-    }
-    if (!selectAllFound) return undefined;
-
-    const fromTrimmed = fromTail.trimStart();
-    const tableMatch = fromTrimmed.match(QUERY_EDITOR_SQL_LEADING_IDENTIFIER_PATH_REGEX);
-    if (!tableMatch) return undefined;
-
-    const tableText = tableMatch[1];
-    const afterTable = tableMatch[2] || '';
-
-    const parseAlias = (tail: string): { alias: string; remainder: string } => {
-        const trimmedTail = String(tail || '').trimStart();
-        if (!trimmedTail) {
-            return { alias: '', remainder: tail };
-        }
-
-        const asMatch = trimmedTail.match(/^AS\s+([`"\[]?[A-Za-z_][\w$]*[`"\]]?)([\s\S]*)$/i);
-        if (asMatch) {
-            const candidate = stripQueryIdentifierQuotes(asMatch[1]);
-            if (candidate && !QUERY_ALIAS_RESERVED.has(candidate.toLowerCase())) {
-                return { alias: candidate, remainder: asMatch[2] || '' };
-            }
-        }
-
-        const bareMatch = trimmedTail.match(/^([`"\[]?[A-Za-z_][\w$]*[`"\]]?)([\s\S]*)$/);
-        if (bareMatch) {
-            const candidate = stripQueryIdentifierQuotes(bareMatch[1]);
-            if (candidate && !QUERY_ALIAS_RESERVED.has(candidate.toLowerCase())) {
-                return { alias: candidate, remainder: bareMatch[2] || '' };
-            }
-        }
-
-        return { alias: '', remainder: tail };
-    };
-
-    const parsedAlias = parseAlias(afterTable);
-    const sourceAlias = parsedAlias.alias || QUERY_LOCATOR_SOURCE_ALIAS;
-    const qualifiedExpressions = expressions
-        .map((expression) => {
-            const trimmed = String(expression || '').trim();
-            if (!trimmed) return '';
-            if (/^ROWID\b/i.test(trimmed)) {
-                return trimmed.replace(/^(\s*)ROWID\b/i, `$1${sourceAlias}.ROWID`);
-            }
-            return trimmed;
-        })
-        .filter(Boolean);
-    if (qualifiedExpressions.length === 0) return undefined;
-
-    const rewrittenSelectItems = selectItems.map((item) => {
-        const trimmed = String(item || '').trim();
-        if (trimmed === '*') {
-            return `${sourceAlias}.*`;
-        }
-        return item.trimEnd();
-    });
-
-    const aliasClause = parsedAlias.alias ? ` ${parsedAlias.alias}` : ` ${sourceAlias}`;
-    const finalSelectItems = [...rewrittenSelectItems, ...qualifiedExpressions];
-    return `${prefix}${finalSelectItems.join(', ')}${fromKeyword}${tableText}${aliasClause}${parsedAlias.remainder}`;
-};
-
-const findWritableResultColumnForSource = (writableColumns: Record<string, string>, target: string): string | undefined => {
-    const normalizedTarget = String(target || '').trim().toLowerCase();
-    return Object.entries(writableColumns || {}).find(([, sourceColumn]) => (
-        String(sourceColumn || '').trim().toLowerCase() === normalizedTarget
-    ))?.[0];
-};
-
-const resolveMetadataColumnName = (tableColumnNames: string[], sourceColumn: string): string => {
-    const normalizedSource = String(sourceColumn || '').trim();
-    if (!normalizedSource) return '';
-    return tableColumnNames.find((column) => String(column || '').trim().toLowerCase() === normalizedSource.toLowerCase())
-        || normalizedSource;
-};
-
-const buildQueryLocatorAlias = (column: string, index: number): string => {
-    const normalized = String(column || '').trim().replace(/[^A-Za-z0-9_]/g, '_').slice(0, 48) || 'column';
-    return `${QUERY_LOCATOR_ALIAS_PREFIX}${index}_${normalized}`;
-};
-
-const buildQueryLocatorColumnExpression = (dbType: string, column: string, alias: string): string => (
-    `${quoteIdentPart(dbType, column)} AS ${quoteIdentPart(dbType, alias)}`
-);
-
-const buildQueryRowIDExpression = (dbType: string, sourceAlias?: string): string => (
-    `${sourceAlias ? `${sourceAlias}.` : ''}ROWID AS ${quoteIdentPart(dbType, ORACLE_ROWID_LOCATOR_COLUMN)}`
-);
-
-const buildDuckDBRowIDExpression = (dbType: string, sourceAlias?: string): string => (
-    `${sourceAlias ? `${sourceAlias}.` : ''}rowid AS ${quoteIdentPart(dbType, DUCKDB_ROWID_LOCATOR_COLUMN)}`
-);
-
-const escapeMetadataSqlLiteral = (raw: string): string => String(raw || '').replace(/'/g, "''");
-
-const quoteSqlServerDbIdentifier = (raw: string): string => `[${String(raw || '').replace(/]/g, ']]')}]`;
-
-type MetadataQuerySpec = {
-    sql: string;
-    inferredType?: 'FUNCTION' | 'PROCEDURE';
-};
-
-type MetadataQueryResult = {
-    rows: Record<string, any>[];
-    inferredType?: 'FUNCTION' | 'PROCEDURE';
-};
-
-const normalizeMetadataDialect = (conn: any): string => {
-    const type = String(conn?.config?.type || '').trim().toLowerCase();
-    const driver = String(conn?.config?.driver || '').trim();
-    const dialect = resolveSqlDialect(type, driver, {
-        oceanBaseProtocol: conn?.config?.oceanBaseProtocol,
-    });
-    if (dialect === 'diros' || dialect === 'sphinx' || dialect === 'mariadb' || dialect === 'oceanbase') return 'mysql';
-    if (dialect === 'dameng') return 'oracle';
-    return String(dialect || '').toLowerCase();
-};
-
-const resolveQueryEditorFormatterLanguage = (conn: any): SqlLanguage => {
-    const dialect = normalizeMetadataDialect(conn);
-    switch (dialect) {
-        case 'postgres':
-        case 'kingbase':
-        case 'highgo':
-        case 'vastbase':
-        case 'opengauss':
-        case 'gaussdb':
-            return 'postgresql';
-        case 'duckdb':
-            return 'duckdb';
-        case 'sqlite':
-            return 'sqlite';
-        case 'sqlserver':
-            return 'transactsql';
-        case 'oracle':
-        case 'dameng':
-            return 'plsql';
-        case 'clickhouse':
-            return 'clickhouse';
-        case 'mysql':
-        case 'goldendb':
-        case 'sphinx':
-            return 'mysql';
-        case 'mariadb':
-            return 'mariadb';
-        default:
-            return 'sql';
-    }
-};
-
-const buildCompletionTableCommentSQL = (dialect: string, dbName: string): string => {
-    const db = String(dbName || '').trim();
-    const escapedDb = escapeMetadataSqlLiteral(db);
-    switch (dialect) {
-        case 'mysql':
-        case 'starrocks':
-            return `SELECT TABLE_NAME AS table_name, TABLE_COMMENT AS table_comment FROM information_schema.tables WHERE table_schema = '${escapedDb}' AND table_type = 'BASE TABLE' ORDER BY table_name`;
-        case 'postgres':
-        case 'kingbase':
-        case 'vastbase':
-        case 'highgo':
-        case 'opengauss':
-        case 'gaussdb':
-            return `SELECT n.nspname || '.' || c.relname AS table_name, obj_description(c.oid, 'pg_class') AS table_comment FROM pg_class c JOIN pg_namespace n ON n.oid = c.relnamespace WHERE c.relkind IN ('r', 'p') AND n.nspname NOT IN ('pg_catalog', 'information_schema') AND n.nspname NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY n.nspname, c.relname`;
-        case 'sqlserver': {
-            const safeDb = quoteSqlServerDbIdentifier(db);
-            return `SELECT s.name + '.' + t.name AS table_name, ep.value AS table_comment FROM ${safeDb}.sys.tables t JOIN ${safeDb}.sys.schemas s ON t.schema_id = s.schema_id LEFT JOIN ${safeDb}.sys.extended_properties ep ON ep.major_id = t.object_id AND ep.minor_id = 0 AND ep.name = 'MS_Description' WHERE t.type = 'U' ORDER BY s.name, t.name`;
-        }
-        case 'clickhouse':
-            return `SELECT name AS table_name, comment AS table_comment FROM system.tables WHERE database = '${escapedDb}' AND engine NOT IN ('View', 'MaterializedView') ORDER BY name`;
-        case 'oracle': {
-            const owner = escapedDb.toUpperCase();
-            return `SELECT table_name, comments AS table_comment FROM all_tab_comments WHERE owner = '${owner}' ORDER BY table_name`;
-        }
-        default:
-            return '';
-    }
-};
-
-const getCaseInsensitiveValue = (row: Record<string, any>, keys: string[]): any => {
-    for (const key of keys) {
-        for (const rowKey of Object.keys(row || {})) {
-            if (rowKey.toLowerCase() === key.toLowerCase()) {
-                return row[rowKey];
-            }
-        }
-    }
-    return undefined;
-};
-
-const normalizeCommentText = (value: unknown): string => {
-    if (value === null || value === undefined) return '';
-    const text = String(value).trim();
-    if (!text || text.toLowerCase() === '<nil>') return '';
-    return text;
-};
-
-const buildCompletionDocumentation = (comment?: string): string | undefined => {
-    const text = normalizeCommentText(comment);
-    return text ? translate('query_editor.completion.documentation.comment', { comment: text }) : undefined;
-};
-
-const appendCommentToDetail = (detail: string, comment?: string): string => {
-    const text = normalizeCommentText(comment);
-    return text ? `${detail} - ${text}` : detail;
-};
-
-const stripCompletionIdentifierQuotes = (ident: string): string => {
-    let raw = String(ident || '').trim();
-    if (!raw) return raw;
-    const first = raw[0];
-    const last = raw[raw.length - 1];
-    if ((first === '`' && last === '`') || (first === '"' && last === '"')) {
-        raw = raw.slice(1, -1);
-    }
-    return raw.trim();
-};
-
-const normalizeCompletionQualifiedName = (ident: string): string => {
-    const raw = String(ident || '').trim();
-    if (!raw) return raw;
-    return raw
-        .split('.')
-        .map(p => stripCompletionIdentifierQuotes(p.trim()))
-        .filter(Boolean)
-        .join('.');
-};
-
-const getCompletionQualifiedNameLastPart = (qualified: string): string => {
-    const raw = normalizeCompletionQualifiedName(qualified);
-    if (!raw) return raw;
-    const parts = raw.split('.').filter(Boolean);
-    return parts[parts.length - 1] || raw;
-};
-
-const splitCompletionSchemaAndTable = (qualified: string): { schema: string; table: string } => {
-    const raw = normalizeCompletionQualifiedName(qualified);
-    if (!raw) return { schema: '', table: '' };
-    const parts = raw.split('.').filter(Boolean);
-    if (parts.length >= 2) {
-        return {
-            schema: parts[parts.length - 2] || '',
-            table: parts[parts.length - 1] || '',
-        };
-    }
-    return { schema: '', table: parts[0] || '' };
-};
-
-const DEFAULT_QUERY_TEMPLATE = 'SELECT * FROM ';
-
-const getTabQueryValue = (tab: TabData): string => (
-    typeof tab.query === 'string' ? tab.query : ''
-);
-
-const getInitialEditorQuery = (tab: TabData): string => {
-    if (hasQueryTabDraft(tab.id)) {
-        return getQueryTabDraft(tab.id);
-    }
-    const tabQuery = getTabQueryValue(tab);
-    if (tabQuery || tab.filePath || tab.savedQueryId || tab.readOnly) {
-        return tabQuery;
-    }
-    return DEFAULT_QUERY_TEMPLATE;
-};
-
-const resolveNextResultSetIndex = (sets: Array<{ key?: string }>): number => {
-    const maxIndex = sets.reduce((max, item) => {
-        const match = String(item?.key || '').match(/^result-(\d+)$/);
-        const index = match ? Number(match[1]) : 0;
-        return Number.isFinite(index) ? Math.max(max, index) : max;
-    }, 0);
-    return maxIndex + 1;
-};
-
-const normalizeExecutedSqlKey = (sql: string): string => String(sql || '')
-    .replace(/\r\n/g, '\n')
-    .replace(/；/g, ';')
-    .trim()
-    .replace(/;+\s*$/g, '')
-    .trim()
-    .replace(/\s+/g, ' ')
-    .toLowerCase();
-
-const areSqlStatementListsEqual = (left: string[], right: string[]): boolean => (
-    left.length === right.length
-    && left.every((statement, index) => normalizeExecutedSqlKey(statement) === normalizeExecutedSqlKey(right[index]))
-);
-
-const normalizeEditorPosition = (position: any): { lineNumber: number; column: number } | null => {
-    if (!position) return null;
-    const lineNumber = Number(position.positionLineNumber ?? position.lineNumber ?? position.endLineNumber ?? position.startLineNumber ?? position.selectionStartLineNumber);
-    const column = Number(position.positionColumn ?? position.column ?? position.endColumn ?? position.startColumn ?? position.selectionStartColumn);
-    if (!Number.isFinite(lineNumber) || !Number.isFinite(column) || lineNumber < 1 || column < 1) {
-        return null;
-    }
-    return { lineNumber, column };
-};
-
-const getNormalizedOffsetAtPosition = (
-    sqlText: string,
-    position: { lineNumber: number; column: number },
-): number => {
-    const text = String(sqlText || '').replace(/\r\n/g, '\n');
-    const lines = text.split('\n');
-    const targetLineIndex = Math.max(0, Math.min(lines.length - 1, position.lineNumber - 1));
-    let offset = 0;
-    for (let index = 0; index < targetLineIndex; index++) {
-        offset += (lines[index]?.length || 0) + 1;
-    }
-    return Math.max(0, Math.min(text.length, offset + Math.max(0, position.column - 1)));
-};
-
-const getFirstRowValue = (row: Record<string, any>): string => {
-    for (const value of Object.values(row || {})) {
-        if (value !== undefined && value !== null) {
-            const normalized = String(value).trim();
-            if (normalized !== '') return normalized;
-        }
-    }
-    return '';
-};
-
-const getMySQLShowTablesName = (row: Record<string, any>): string => {
-    for (const key of Object.keys(row || {})) {
-        if (!key.toLowerCase().startsWith('tables_in_')) continue;
-        const value = row[key];
-        if (value === undefined || value === null) continue;
-        const normalized = String(value).trim();
-        if (normalized !== '') return normalized;
-    }
-    return '';
-};
-
-const normalizeMetadataQuerySpecs = (specs: MetadataQuerySpec[]): MetadataQuerySpec[] => {
-    const seen = new Set<string>();
-    const normalized: MetadataQuerySpec[] = [];
-    specs.forEach((spec) => {
-        const sql = String(spec.sql || '').trim();
-        if (!sql) return;
-        const key = `${spec.inferredType || ''}@@${sql}`;
-        if (seen.has(key)) return;
-        seen.add(key);
-        normalized.push({ sql, inferredType: spec.inferredType });
-    });
-    return normalized;
-};
-
-const buildQualifiedCompletionName = (schemaName: string, objectName: string): string => {
-    const schema = String(schemaName || '').trim();
-    const object = String(objectName || '').trim();
-    if (!object) return '';
-    if (!schema || object.includes('.')) return object;
-    return `${schema}.${object}`;
-};
-
-const buildCompletionViewsMetadataQuerySpecs = (dialect: string, dbName: string): MetadataQuerySpec[] => {
-    const safeDbName = escapeMetadataSqlLiteral(dbName);
-    switch (dialect) {
-        case 'mysql':
-        case 'starrocks': {
-            return normalizeMetadataQuerySpecs(
-                buildMySQLCompatibleViewMetadataSqls(dbName).map((sql) => ({ sql })),
-            );
-        }
-        case 'postgres':
-        case 'kingbase':
-        case 'highgo':
-        case 'vastbase':
-        case 'opengauss':
-        case 'gaussdb':
-            return [{ sql: `SELECT schemaname AS schema_name, viewname AS view_name FROM pg_catalog.pg_views WHERE schemaname != 'information_schema' AND schemaname NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY schemaname, viewname` }];
-        case 'sqlserver': {
-            const safeDb = quoteSqlServerDbIdentifier(dbName || 'master');
-            return [{ sql: `SELECT s.name AS schema_name, v.name AS view_name FROM ${safeDb}.sys.views v JOIN ${safeDb}.sys.schemas s ON v.schema_id = s.schema_id ORDER BY s.name, v.name` }];
-        }
-        case 'oracle': {
-            return normalizeMetadataQuerySpecs([
-                { sql: 'SELECT VIEW_NAME AS view_name FROM USER_VIEWS ORDER BY VIEW_NAME' },
-                { sql: 'SELECT OWNER AS schema_name, VIEW_NAME AS view_name FROM ALL_VIEWS WHERE OWNER = USER ORDER BY VIEW_NAME' },
-                {
-                    sql: safeDbName
-                        ? `SELECT OWNER AS schema_name, VIEW_NAME AS view_name FROM ALL_VIEWS WHERE OWNER = '${safeDbName.toUpperCase()}' ORDER BY VIEW_NAME`
-                        : '',
-                },
-            ]);
-        }
-        case 'sqlite':
-            return [{ sql: 'SELECT name AS view_name FROM sqlite_master WHERE type = \'view\' ORDER BY name' }];
-        case 'duckdb':
-            return [{ sql: `SELECT table_schema AS schema_name, table_name AS view_name FROM information_schema.views WHERE table_schema NOT IN ('information_schema', 'pg_catalog') ORDER BY table_schema, table_name` }];
-        default:
-            return [];
-    }
-};
-
-const buildCompletionMaterializedViewsMetadataQuerySpecs = (dialect: string, dbName: string): MetadataQuerySpec[] => {
-    if (dialect !== 'starrocks') {
-        return [];
-    }
-    const safeDbName = escapeMetadataSqlLiteral(dbName);
-    const dbIdent = String(dbName || '').replace(/`/g, '``').trim();
-    return normalizeMetadataQuerySpecs([
-        {
-            sql: safeDbName
-                ? `SELECT TABLE_SCHEMA AS schema_name, TABLE_NAME AS object_name FROM information_schema.tables WHERE TABLE_SCHEMA = '${safeDbName}' AND UPPER(TABLE_TYPE) LIKE '%MATERIALIZED%' ORDER BY TABLE_NAME`
-                : '',
-        },
-        { sql: dbIdent ? `SHOW MATERIALIZED VIEWS FROM \`${dbIdent}\`` : '' },
-        { sql: 'SHOW MATERIALIZED VIEWS' },
-    ]);
-};
-
-const buildCompletionTriggersMetadataQuerySpecs = (dialect: string, dbName: string): MetadataQuerySpec[] => {
-    const safeDbName = escapeMetadataSqlLiteral(dbName);
-    switch (dialect) {
-        case 'mysql':
-        case 'starrocks': {
-            const dbIdent = String(dbName || '').replace(/`/g, '``').trim();
-            return normalizeMetadataQuerySpecs([
-                {
-                    sql: safeDbName
-                        ? `SELECT TRIGGER_NAME AS trigger_name, EVENT_OBJECT_TABLE AS table_name, TRIGGER_SCHEMA AS schema_name FROM information_schema.triggers WHERE trigger_schema = '${safeDbName}' ORDER BY EVENT_OBJECT_TABLE, TRIGGER_NAME`
-                        : '',
-                },
-                { sql: dbIdent ? `SHOW TRIGGERS FROM \`${dbIdent}\`` : '' },
-                { sql: 'SHOW TRIGGERS' },
-            ]);
-        }
-        case 'postgres':
-        case 'kingbase':
-        case 'highgo':
-        case 'vastbase':
-        case 'opengauss':
-        case 'gaussdb':
-            return [{ sql: `SELECT DISTINCT event_object_schema AS schema_name, event_object_table AS table_name, trigger_name FROM information_schema.triggers WHERE trigger_schema NOT IN ('pg_catalog', 'information_schema') AND trigger_schema NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY event_object_schema, event_object_table, trigger_name` }];
-        case 'sqlserver': {
-            const safeDb = quoteSqlServerDbIdentifier(dbName || 'master');
-            return [{ sql: `SELECT s.name AS schema_name, t.name AS table_name, tr.name AS trigger_name FROM ${safeDb}.sys.triggers tr JOIN ${safeDb}.sys.tables t ON tr.parent_id = t.object_id JOIN ${safeDb}.sys.schemas s ON t.schema_id = s.schema_id WHERE tr.parent_class = 1 ORDER BY s.name, t.name, tr.name` }];
-        }
-        case 'oracle':
-            if (!safeDbName) {
-                return [{ sql: 'SELECT TRIGGER_NAME AS trigger_name, TABLE_NAME AS table_name FROM USER_TRIGGERS ORDER BY TABLE_NAME, TRIGGER_NAME' }];
-            }
-            return [{ sql: `SELECT OWNER AS schema_name, TABLE_NAME AS table_name, TRIGGER_NAME AS trigger_name FROM ALL_TRIGGERS WHERE OWNER = '${safeDbName.toUpperCase()}' ORDER BY TABLE_NAME, TRIGGER_NAME` }];
-        case 'sqlite':
-            return [{ sql: 'SELECT name AS trigger_name, tbl_name AS table_name FROM sqlite_master WHERE type = \'trigger\' ORDER BY tbl_name, name' }];
-        default:
-            return [];
-    }
-};
-
-const buildCompletionFunctionsMetadataQuerySpecs = (dialect: string, dbName: string): MetadataQuerySpec[] => {
-    const safeDbName = escapeMetadataSqlLiteral(dbName);
-    switch (dialect) {
-        case 'mysql':
-        case 'starrocks':
-            return normalizeMetadataQuerySpecs([
-                {
-                    sql: safeDbName
-                        ? `SELECT ROUTINE_NAME AS routine_name, ROUTINE_TYPE AS routine_type, ROUTINE_SCHEMA AS schema_name FROM information_schema.routines WHERE routine_schema = '${safeDbName}' ORDER BY ROUTINE_TYPE, ROUTINE_NAME`
-                        : '',
-                },
-                {
-                    sql: safeDbName ? `SHOW FUNCTION STATUS WHERE Db = '${safeDbName}'` : 'SHOW FUNCTION STATUS',
-                    inferredType: 'FUNCTION',
-                },
-                {
-                    sql: safeDbName ? `SHOW PROCEDURE STATUS WHERE Db = '${safeDbName}'` : 'SHOW PROCEDURE STATUS',
-                    inferredType: 'PROCEDURE',
-                },
-            ]);
-        case 'postgres':
-        case 'kingbase':
-        case 'highgo':
-        case 'vastbase':
-        case 'opengauss':
-        case 'gaussdb':
-            return normalizeMetadataQuerySpecs([
-                {
-                    sql: `SELECT n.nspname AS schema_name, p.proname AS routine_name, CASE WHEN p.prokind = 'p' THEN 'PROCEDURE' ELSE 'FUNCTION' END AS routine_type FROM pg_proc p JOIN pg_namespace n ON p.pronamespace = n.oid WHERE n.nspname NOT IN ('pg_catalog', 'information_schema') AND n.nspname NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY n.nspname, routine_type, p.proname`,
-                },
-                {
-                    sql: `SELECT r.routine_schema AS schema_name, r.routine_name AS routine_name, COALESCE(NULLIF(UPPER(r.routine_type), ''), 'FUNCTION') AS routine_type FROM information_schema.routines r WHERE r.routine_schema NOT IN ('pg_catalog', 'information_schema') AND r.routine_schema NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY r.routine_schema, routine_type, r.routine_name`,
-                },
-                {
-                    sql: `SELECT n.nspname AS schema_name, p.proname AS routine_name, 'FUNCTION' AS routine_type FROM pg_proc p JOIN pg_namespace n ON p.pronamespace = n.oid WHERE n.nspname NOT IN ('pg_catalog', 'information_schema') AND n.nspname NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY n.nspname, p.proname`,
-                },
-            ]);
-        case 'sqlserver': {
-            const safeDb = quoteSqlServerDbIdentifier(dbName || 'master');
-            return [{ sql: `SELECT s.name AS schema_name, o.name AS routine_name, CASE o.type WHEN 'P' THEN 'PROCEDURE' WHEN 'FN' THEN 'FUNCTION' WHEN 'IF' THEN 'FUNCTION' WHEN 'TF' THEN 'FUNCTION' END AS routine_type FROM ${safeDb}.sys.objects o JOIN ${safeDb}.sys.schemas s ON o.schema_id = s.schema_id WHERE o.type IN ('P','FN','IF','TF') ORDER BY o.type, s.name, o.name` }];
-        }
-        case 'oracle':
-            return normalizeMetadataQuerySpecs([
-                { sql: `SELECT OBJECT_NAME AS routine_name, OBJECT_TYPE AS routine_type FROM USER_OBJECTS WHERE OBJECT_TYPE IN ('FUNCTION','PROCEDURE') ORDER BY OBJECT_TYPE, OBJECT_NAME` },
-                { sql: `SELECT OWNER AS schema_name, OBJECT_NAME AS routine_name, OBJECT_TYPE AS routine_type FROM ALL_OBJECTS WHERE OWNER = USER AND OBJECT_TYPE IN ('FUNCTION','PROCEDURE') ORDER BY OBJECT_TYPE, OBJECT_NAME` },
-                {
-                    sql: safeDbName
-                        ? `SELECT OWNER AS schema_name, OBJECT_NAME AS routine_name, OBJECT_TYPE AS routine_type FROM ALL_OBJECTS WHERE OWNER = '${safeDbName.toUpperCase()}' AND OBJECT_TYPE IN ('FUNCTION','PROCEDURE') ORDER BY OBJECT_TYPE, OBJECT_NAME`
-                        : '',
-                },
-            ]);
-        case 'duckdb':
-            return [{
-                sql: `SELECT schema_name, function_name AS routine_name, 'FUNCTION' AS routine_type FROM duckdb_functions() WHERE internal = false AND lower(function_type) = 'macro' AND COALESCE(macro_definition, '') <> '' ORDER BY schema_name, function_name`,
-                inferredType: 'FUNCTION',
-            }];
-        default:
-            return [];
-    }
-};
-
-const queryCompletionMetadataRowsBySpecs = async (
-    config: Record<string, any>,
-    dbName: string,
-    specs: MetadataQuerySpec[],
-): Promise<MetadataQueryResult[]> => {
-    const normalizedSpecs = normalizeMetadataQuerySpecs(specs);
-    if (normalizedSpecs.length === 0) {
-        return [];
-    }
-    const results: MetadataQueryResult[] = [];
-    for (const spec of normalizedSpecs) {
-        try {
-            const result = await DBQuery(buildRpcConnectionConfig(config) as any, dbName, spec.sql);
-            if (!result.success || !Array.isArray(result.data)) {
-                continue;
-            }
-            results.push({
-                rows: result.data as Record<string, any>[],
-                inferredType: spec.inferredType,
-            });
-        } catch {
-            // 忽略单条元数据查询失败，继续走兼容查询。
-        }
-    }
-    return results;
-};
-
-type QueryEditorNavigationTarget =
-    | { type: 'database'; dbName: string }
-    | { type: 'table'; dbName: string; tableName: string; schemaName?: string }
-    | { type: 'view'; dbName: string; viewName: string; schemaName?: string }
-    | { type: 'materialized-view'; dbName: string; viewName: string; schemaName?: string }
-    | { type: 'trigger'; dbName: string; triggerName: string; tableName: string; schemaName?: string }
-    | { type: 'routine'; dbName: string; routineName: string; routineType: string; schemaName?: string };
-
-type QueryEditorHoverTarget =
-    | { kind: 'database'; dbName: string; range: { startColumn: number; endColumn: number } }
-    | { kind: 'table'; dbName: string; tableName: string; schemaName?: string; comment?: string; range: { startColumn: number; endColumn: number } }
-    | { kind: 'view'; dbName: string; viewName: string; schemaName?: string; range: { startColumn: number; endColumn: number } }
-    | { kind: 'materialized-view'; dbName: string; viewName: string; schemaName?: string; range: { startColumn: number; endColumn: number } }
-    | { kind: 'trigger'; dbName: string; triggerName: string; tableName: string; schemaName?: string; range: { startColumn: number; endColumn: number } }
-    | { kind: 'routine'; dbName: string; routineName: string; routineType: string; schemaName?: string; range: { startColumn: number; endColumn: number } }
-    | { kind: 'column'; dbName: string; tableName: string; columnName: string; type?: string; comment?: string; schemaName?: string; range: { startColumn: number; endColumn: number } };
-
-const QUERY_EDITOR_IDENTIFIER_CHAR_REGEX = /[A-Za-z0-9_$`"\[\].]/;
-const QUERY_EDITOR_SQL_UNQUOTED_IDENTIFIER_PATTERN = '[A-Za-z_][A-Za-z0-9_$]*';
-const QUERY_EDITOR_SQL_QUOTED_IDENTIFIER_PATTERN = '(?:`[^`]+`|"[^"]+"|\\[[^\\]]+\\])';
-const QUERY_EDITOR_SQL_IDENTIFIER_PATTERN = `(?:${QUERY_EDITOR_SQL_QUOTED_IDENTIFIER_PATTERN}|${QUERY_EDITOR_SQL_UNQUOTED_IDENTIFIER_PATTERN})`;
-const QUERY_EDITOR_SQL_IDENTIFIER_PATH_PATTERN = `${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN}(?:\\s*\\.\\s*${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN}){0,2}`;
-const QUERY_EDITOR_SQL_THREE_PART_COMPLETION_REGEX = new RegExp(
-    `(${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*(${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*([A-Za-z0-9_$]*)$`,
-);
-const QUERY_EDITOR_SQL_QUALIFIER_COMPLETION_REGEX = new RegExp(
-    `(${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*([A-Za-z0-9_$]*)$`,
-);
-const QUERY_EDITOR_SQL_TABLE_REFERENCE_REGEX = new RegExp(
-    `\\b(?:FROM|JOIN|UPDATE|INTO|DELETE\\s+FROM)\\s+(${QUERY_EDITOR_SQL_IDENTIFIER_PATH_PATTERN})`,
-    'gi',
-);
-const QUERY_EDITOR_SQL_ALIAS_REFERENCE_REGEX = new RegExp(
-    `\\b(?:FROM|JOIN|UPDATE|INTO|DELETE\\s+FROM)\\s+(${QUERY_EDITOR_SQL_IDENTIFIER_PATH_PATTERN})(?:\\s+(?:AS\\s+)?(${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN}))?`,
-    'gi',
-);
-const QUERY_EDITOR_SQL_LEADING_IDENTIFIER_PATH_REGEX = new RegExp(`^(${QUERY_EDITOR_SQL_IDENTIFIER_PATH_PATTERN})([\\s\\S]*)$`);
-const QUERY_EDITOR_HOVER_DELAY_MS = 1000;
-const QUERY_EDITOR_OBJECT_DECORATION_MAX_TEXT_LENGTH = 200_000;
-const QUERY_EDITOR_OBJECT_DECORATION_MAX_IDENTIFIERS = 800;
-const QUERY_EDITOR_OBJECT_DECORATION_MAX_LINES = 1_000;
-const QUERY_EDITOR_LIVE_DECORATION_MAX_TEXT_LENGTH = 50_000;
-const QUERY_EDITOR_PERSISTED_DRAFT_MAX_TEXT_LENGTH = 50_000;
-
-const getQueryEditorModelValueLength = (model: any): number | null => {
-    if (!model || typeof model.getValueLength !== 'function') {
-        return null;
-    }
-    try {
-        const length = Number(model.getValueLength());
-        return Number.isFinite(length) ? length : null;
-    } catch {
-        return null;
-    }
-};
-
-type QueryIdentifierPathSegment = {
-    raw: string;
-    value: string;
-    quoted: boolean;
-};
-
-const isQuotedQueryIdentifierPart = (part: string): boolean => {
-    const text = String(part || '').trim();
-    if (!text) return false;
-    return (text.startsWith('`') && text.endsWith('`'))
-        || (text.startsWith('"') && text.endsWith('"'))
-        || (text.startsWith('[') && text.endsWith(']'));
-};
-
-const splitQueryIdentifierPathSegments = (qualifiedName: string): QueryIdentifierPathSegment[] => {
-    const text = String(qualifiedName || '').trim();
-    if (!text) return [];
-
-    const segments: QueryIdentifierPathSegment[] = [];
-    let current = '';
-    let inDouble = false;
-    let inBacktick = false;
-    let inBracket = false;
-
-    const flush = () => {
-        const raw = current.trim();
-        current = '';
-        if (!raw) return;
-        segments.push({
-            raw,
-            value: stripQueryIdentifierQuotes(raw),
-            quoted: isQuotedQueryIdentifierPart(raw),
-        });
-    };
-
-    for (let index = 0; index < text.length; index += 1) {
-        const ch = text[index];
-        const next = index + 1 < text.length ? text[index + 1] : '';
-
-        if (inDouble) {
-            current += ch;
-            if (ch === '"' && next === '"') {
-                current += next;
-                index += 1;
-                continue;
-            }
-            if (ch === '"') inDouble = false;
-            continue;
-        }
-
-        if (inBacktick) {
-            current += ch;
-            if (ch === '`' && next === '`') {
-                current += next;
-                index += 1;
-                continue;
-            }
-            if (ch === '`') inBacktick = false;
-            continue;
-        }
-
-        if (inBracket) {
-            current += ch;
-            if (ch === ']' && next === ']') {
-                current += next;
-                index += 1;
-                continue;
-            }
-            if (ch === ']') inBracket = false;
-            continue;
-        }
-
-        if (ch === '"') {
-            inDouble = true;
-            current += ch;
-            continue;
-        }
-        if (ch === '`') {
-            inBacktick = true;
-            current += ch;
-            continue;
-        }
-        if (ch === '[') {
-            inBracket = true;
-            current += ch;
-            continue;
-        }
-        if (ch === '.') {
-            flush();
-            continue;
-        }
-        current += ch;
-    }
-
-    flush();
-    return segments;
-};
-
-const matchLeadingSelectTableReference = (sql: string): { prefix: string; tableText: string; suffix: string } | null => {
-    const match = String(sql || '').match(new RegExp(`^(\\s*SELECT\\s+[\\s\\S]+?\\s+FROM\\s+)(${QUERY_EDITOR_SQL_IDENTIFIER_PATH_PATTERN})([\\s\\S]*)$`, 'i'));
-    if (!match) return null;
-    return {
-        prefix: match[1],
-        tableText: match[2],
-        suffix: match[3] || '',
-    };
-};
-
-const rewriteLeadingSelectTableReference = (sql: string, replacement: string): string | undefined => {
-    const match = matchLeadingSelectTableReference(sql);
-    if (!match || !replacement) return undefined;
-    return `${match.prefix}${replacement}${match.suffix}`;
-};
-
-const resolveOracleExactCaseTableReference = (
-    statement: string,
-    currentDb: string,
-    tables: CompletionTableMeta[],
-): string | undefined => {
-    const leadingTable = matchLeadingSelectTableReference(statement);
-    if (!leadingTable) return undefined;
-
-    const segments = splitQueryIdentifierPathSegments(leadingTable.tableText);
-    if (segments.length === 0 || segments.length > 2 || segments.some((segment) => segment.quoted)) {
-        return undefined;
-    }
-    if (!segments.some((segment) => /[a-z]/.test(segment.value))) {
-        return undefined;
-    }
-
-    const rawSchemaName = segments.length === 2 ? String(segments[0]?.value || '').trim() : '';
-    const rawObjectName = String(segments[segments.length - 1]?.value || '').trim();
-    const targetDbName = String(rawSchemaName || currentDb || '').trim();
-    if (!rawObjectName || !targetDbName) return undefined;
-
-    const normalizedTargetDbName = targetDbName.toLowerCase();
-    const matched = tables.find((table) => {
-        if (String(table.dbName || '').trim().toLowerCase() !== normalizedTargetDbName) return false;
-        const parsed = splitSidebarQualifiedName(String(table.tableName || ''));
-        const objectName = String(parsed.objectName || table.tableName || '').trim();
-        const schemaName = String(parsed.schemaName || table.dbName || '').trim();
-        if (objectName !== rawObjectName) return false;
-        if (!rawSchemaName) return true;
-        return schemaName.toLowerCase() === rawSchemaName.toLowerCase();
-    });
-    if (!matched) return undefined;
-
-    const matchedParsed = splitSidebarQualifiedName(String(matched.tableName || ''));
-    const exactObjectName = String(matchedParsed.objectName || matched.tableName || '').trim();
-    const exactSchemaName = String(matchedParsed.schemaName || matched.dbName || rawSchemaName).trim();
-    const quotedParts = rawSchemaName
-        ? [exactSchemaName, exactObjectName]
-        : [exactObjectName];
-    if (quotedParts.some((part) => !String(part || '').trim())) {
-        return undefined;
-    }
-    return quotedParts.map((part) => quoteIdentPart('oracle', part)).join('.');
-};
-
-const resolveOracleLikeDefaultSchemaName = (config: any): string => {
-    const rawUser = String(config?.user || '').trim();
-    if (!rawUser) return '';
-    const userPart = rawUser.split('@')[0] || rawUser;
-    return String(userPart || '').trim();
-};
-
-const getQueryEditorModelTextIfWithinLimit = (model: any, maxTextLength: number): string | null => {
-    const modelLength = getQueryEditorModelValueLength(model);
-    if (modelLength !== null && modelLength > maxTextLength) {
-        return null;
-    }
-    const text = String(model?.getValue?.() || '');
-    return text.length <= maxTextLength ? text : null;
-};
-
-const getQueryEditorObjectResolveText = (
-    model: any,
-    lineContent: string,
-    maxTextLength = QUERY_EDITOR_OBJECT_DECORATION_MAX_TEXT_LENGTH,
-): string => getQueryEditorModelTextIfWithinLimit(model, maxTextLength) ?? lineContent;
-
-const getQueryEditorDecorationModelTextIfLightweight = (
-    model: any,
-    maxTextLength: number,
-): string | null => {
-    if (!model || typeof model.getLineCount !== 'function' || typeof model.getLineContent !== 'function') {
-        return getQueryEditorModelTextIfWithinLimit(model, maxTextLength);
-    }
-
-    const lineCount = Number(model.getLineCount());
-    if (!Number.isFinite(lineCount) || lineCount <= 0 || lineCount > QUERY_EDITOR_OBJECT_DECORATION_MAX_LINES) {
-        return null;
-    }
-
-    const lines: string[] = [];
-    let textLength = 0;
-    for (let lineNumber = 1; lineNumber <= lineCount; lineNumber += 1) {
-        const lineContent = String(model.getLineContent(lineNumber) || '');
-        textLength += lineContent.length + (lineNumber < lineCount ? 1 : 0);
-        if (textLength > maxTextLength) {
-            return null;
-        }
-        lines.push(lineContent);
-    }
-
-    return lines.join('\n');
-};
-
-const maskQueryEditorSqlLiteralsAndComments = (source: string): string => {
-    const text = String(source || '').replace(/\r\n/g, '\n');
-    if (!text) return '';
-
-    const chars = text.split('');
-    let inSingle = false;
-    let inLineComment = false;
-    let inBlockComment = false;
-    let escaped = false;
-
-    const maskAt = (index: number) => {
-        if (chars[index] !== '\n') {
-            chars[index] = ' ';
-        }
-    };
-
-    for (let i = 0; i < text.length; i += 1) {
-        const ch = text[i];
-        const next = i + 1 < text.length ? text[i + 1] : '';
-        const prev = i > 0 ? text[i - 1] : '';
-
-        if (inLineComment) {
-            if (ch === '\n') {
-                inLineComment = false;
-            } else {
-                maskAt(i);
-            }
-            continue;
-        }
-
-        if (inBlockComment) {
-            maskAt(i);
-            if (ch === '*' && next === '/') {
-                maskAt(i + 1);
-                i += 1;
-                inBlockComment = false;
-            }
-            continue;
-        }
-
-        if (inSingle) {
-            maskAt(i);
-            if (escaped) {
-                escaped = false;
-                continue;
-            }
-            if (ch === '\\') {
-                escaped = true;
-                continue;
-            }
-            if (ch === '\'' && next === '\'') {
-                maskAt(i + 1);
-                i += 1;
-                continue;
-            }
-            if (ch === '\'') {
-                inSingle = false;
-            }
-            continue;
-        }
-
-        if (ch === '/' && next === '*') {
-            maskAt(i);
-            maskAt(i + 1);
-            i += 1;
-            inBlockComment = true;
-            continue;
-        }
-
-        if (ch === '#') {
-            maskAt(i);
-            inLineComment = true;
-            continue;
-        }
-
-        if (ch === '-' && next === '-' && (i === 0 || /\s/.test(prev))) {
-            maskAt(i);
-            maskAt(i + 1);
-            i += 1;
-            inLineComment = true;
-            continue;
-        }
-
-        if (ch === '\'') {
-            maskAt(i);
-            inSingle = true;
-        }
-    }
-
-    return chars.join('');
-};
-
-export const collectQueryEditorObjectDecorationCandidates = (
-    source: string,
-    maxIdentifiers = QUERY_EDITOR_OBJECT_DECORATION_MAX_IDENTIFIERS,
-): Array<{ lineNumber: number; lineContent: string; positionColumn: number }> => {
-    const text = String(source || '').replace(/\r\n/g, '\n');
-    if (!text) return [];
-
-    const maskedText = maskQueryEditorSqlLiteralsAndComments(text);
-    const lines = text.split('\n');
-    const maskedLines = maskedText.split('\n');
-    const candidates: Array<{ lineNumber: number; lineContent: string; positionColumn: number }> = [];
-    const identifierRegex = /[`"\[]?[A-Za-z_][A-Za-z0-9_$]*(?:[`"\]]?\s*\.\s*[`"\[]?[A-Za-z_][A-Za-z0-9_$]*){0,2}[`"\]]?/g;
-
-    for (const [lineIndex, maskedLine] of maskedLines.entries()) {
-        let match: RegExpExecArray | null;
-        identifierRegex.lastIndex = 0;
-        while ((match = identifierRegex.exec(maskedLine)) !== null) {
-            candidates.push({
-                lineNumber: lineIndex + 1,
-                lineContent: lines[lineIndex] || '',
-                positionColumn: match.index + 2,
-            });
-            if (candidates.length >= maxIdentifiers) {
-                return candidates;
-            }
-        }
-    }
-
-    return candidates;
-};
-
-const findIdentifierWindowAtOffset = (
-    lineContent: string,
-    rawOffset: number,
-): { start: number; end: number } | null => {
-    const text = String(lineContent || '');
-    if (!text) return null;
-    const searchableText = maskQueryEditorSqlLiteralsAndComments(text);
-    const maxIndex = text.length - 1;
-    if (maxIndex < 0) return null;
-    let offset = Math.max(0, Math.min(maxIndex, Number.isFinite(rawOffset) ? rawOffset : 0));
-
-    if (!QUERY_EDITOR_IDENTIFIER_CHAR_REGEX.test(searchableText[offset] || '')) {
-        if (offset > 0 && QUERY_EDITOR_IDENTIFIER_CHAR_REGEX.test(searchableText[offset - 1] || '')) {
-            offset -= 1;
-        } else if (offset < maxIndex && QUERY_EDITOR_IDENTIFIER_CHAR_REGEX.test(searchableText[offset + 1] || '')) {
-            offset += 1;
-        } else {
-            return null;
-        }
-    }
-
-    let start = offset;
-    while (start > 0 && QUERY_EDITOR_IDENTIFIER_CHAR_REGEX.test(searchableText[start - 1] || '')) {
-        start -= 1;
-    }
-
-    let end = offset + 1;
-    while (end < text.length && QUERY_EDITOR_IDENTIFIER_CHAR_REGEX.test(searchableText[end] || '')) {
-        end += 1;
-    }
-
-    return start < end ? { start, end } : null;
-};
-
-const normalizeNavigationIdentifierParts = (text: string): string[] => (
-    String(text || '')
-        .split('.')
-        .map((part) => stripCompletionIdentifierQuotes(part))
-        .map((part) => part.trim())
-        .filter(Boolean)
-);
-
-const buildQueryEditorHoverMarkdown = (target: QueryEditorHoverTarget): string => {
-    const appendComment = (comment?: string): string => {
-        const normalized = normalizeCommentText(comment);
-        return normalized ? `\n\n${normalized}` : '';
-    };
-    const objectInfoLabelSeparator = translate('query_editor.object_info.label.separator');
-    const buildObjectInfoTitle = (key: string, value: string): string =>
-        `**${translate(key)}** \`${value}\``;
-    const buildObjectInfoLabel = (key: string, value: string): string =>
-        `${translate(key)}${objectInfoLabelSeparator}\`${value}\``;
-    switch (target.kind) {
-        case 'database':
-            return buildObjectInfoTitle('query_editor.object_info.database', target.dbName);
-        case 'table':
-            return `${buildObjectInfoTitle('query_editor.object_info.table', target.tableName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}${appendComment(target.comment)}`;
-        case 'view':
-            return `${buildObjectInfoTitle('sidebar.object.view', target.viewName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}`;
-        case 'materialized-view':
-            return `${buildObjectInfoTitle('query_editor.object_info.materialized_view', target.viewName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}`;
-        case 'trigger':
-            return `${buildObjectInfoTitle('trigger_viewer.field.trigger', target.triggerName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.table', target.tableName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}`;
-        case 'routine':
-            return `${buildObjectInfoTitle(target.routineType === 'PROCEDURE' ? 'sidebar.object.procedure' : 'sidebar.object.function', target.routineName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}`;
-        case 'column':
-            return `${buildObjectInfoTitle('query_editor.object_info.column', target.columnName)}${target.type ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.type', target.type)}` : ''}\n\n${buildObjectInfoLabel('query_editor.object_info.label.table', target.tableName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}${appendComment(target.comment)}`;
-        default:
-            return '';
-    }
-};
-
-const buildQueryEditorAliasMap = (
-    fullText: string,
-    currentDb: string,
-): Record<string, { dbName: string; tableName: string }> => {
-    const aliasMap: Record<string, { dbName: string; tableName: string }> = {};
-    const reserved = new Set([
-        'where', 'on', 'group', 'order', 'limit', 'having',
-        'left', 'right', 'inner', 'outer', 'full', 'cross', 'join',
-        'union', 'except', 'intersect', 'as', 'set', 'values', 'returning',
-    ]);
-    const aliasRegex = QUERY_EDITOR_SQL_ALIAS_REFERENCE_REGEX;
-    aliasRegex.lastIndex = 0;
-    let match: RegExpExecArray | null;
-    while ((match = aliasRegex.exec(fullText)) !== null) {
-        const tableIdent = normalizeCompletionQualifiedName(match[1] || '');
-        if (!tableIdent) continue;
-        const parts = tableIdent.split('.');
-        let dbName = currentDb || '';
-        let tableName = tableIdent;
-        if (parts.length === 2) {
-            dbName = parts[0];
-            tableName = parts[1];
-        } else if (parts.length >= 3) {
-            dbName = parts[0];
-            tableName = parts.slice(1).join('.');
-        }
-        const shortTable = getCompletionQualifiedNameLastPart(tableIdent);
-        if (shortTable) aliasMap[shortTable.toLowerCase()] = { dbName, tableName };
-
-        const alias = stripCompletionIdentifierQuotes(match[2] || '').trim();
-        if (!alias) continue;
-        const loweredAlias = alias.toLowerCase();
-        if (reserved.has(loweredAlias)) continue;
-        aliasMap[loweredAlias] = { dbName, tableName };
-    }
-    return aliasMap;
-};
-
-const collectQueryEditorReferencedDatabaseNames = (
-    fullText: string,
-    currentDb: string,
-    visibleDbs: string[],
-): string[] => {
-    const result: string[] = [];
-    const seen = new Set<string>();
-    const addDb = (dbName: string) => {
-        const normalized = String(dbName || '').trim();
-        if (!normalized) return;
-        const key = normalized.toLowerCase();
-        if (seen.has(key)) return;
-        seen.add(key);
-        result.push(normalized);
-    };
-
-    addDb(currentDb);
-
-    const visibleDbByLower = new Map(
-        visibleDbs
-            .map((db) => String(db || '').trim())
-            .filter(Boolean)
-            .map((db) => [db.toLowerCase(), db] as const),
-    );
-    const commonSchemaNames = new Set(['public', 'dbo', 'sys', 'information_schema', 'pg_catalog', 'mysql', 'performance_schema']);
-    const tableRegex = QUERY_EDITOR_SQL_TABLE_REFERENCE_REGEX;
-    tableRegex.lastIndex = 0;
-    let match: RegExpExecArray | null;
-    while ((match = tableRegex.exec(String(fullText || ''))) !== null) {
-        const tableIdent = normalizeCompletionQualifiedName(match[1] || '');
-        if (!tableIdent) continue;
-        const parts = tableIdent.split('.');
-        if (parts.length < 2) continue;
-        const candidate = visibleDbByLower.get(String(parts[0] || '').toLowerCase());
-        if (candidate) {
-            addDb(candidate);
-        } else if (visibleDbByLower.size === 0) {
-            const inferredDb = String(parts[0] || '').trim();
-            const inferredKey = inferredDb.toLowerCase();
-            if (inferredDb && inferredKey !== String(currentDb || '').trim().toLowerCase() && !commonSchemaNames.has(inferredKey)) {
-                addDb(inferredDb);
-            }
-        }
-    }
-    return result;
-};
-
-export const resolveQueryEditorNavigationTarget = (
-    lineContent: string,
-    column: number,
-    currentDb: string,
-    visibleDbs: string[],
-    tables: CompletionTableMeta[],
-    views: CompletionViewMeta[] = [],
-    materializedViews: CompletionViewMeta[] = [],
-    triggers: CompletionTriggerMeta[] = [],
-    routines: CompletionRoutineMeta[] = [],
-): QueryEditorNavigationTarget | null => {
-    const text = String(lineContent || '');
-    if (!text) return null;
-
-    const offset = Math.max(0, Number(column || 1) - 2);
-    const windowRange = findIdentifierWindowAtOffset(text, offset);
-    if (!windowRange) return null;
-
-    const rawIdentifier = text.slice(windowRange.start, windowRange.end).trim();
-    if (!rawIdentifier) return null;
-
-    const parts = normalizeNavigationIdentifierParts(rawIdentifier);
-    if (parts.length === 0 || parts.length > 3) return null;
-
-    const currentDbName = String(currentDb || '').trim();
-    const visibleDbSet = new Set(visibleDbs.map((db) => String(db || '').trim().toLowerCase()).filter(Boolean));
-    const tableMetas = tables.map((table) => {
-        const dbName = String(table.dbName || '').trim();
-        const rawTableName = String(table.tableName || '').trim();
-        const parsed = splitSidebarQualifiedName(rawTableName);
-        return {
-            dbName,
-            rawTableName,
-            normalizedDbName: dbName.toLowerCase(),
-            normalizedRawTableName: rawTableName.toLowerCase(),
-            normalizedObjectName: String(parsed.objectName || rawTableName).trim().toLowerCase(),
-            schemaName: String(parsed.schemaName || '').trim(),
-            normalizedSchemaName: String(parsed.schemaName || '').trim().toLowerCase(),
-        };
-    });
-
-    const buildObjectNameMeta = (
-        dbName: string,
-        rawObjectName: string,
-        explicitSchemaName = '',
-    ) => {
-        const parsed = splitSidebarQualifiedName(rawObjectName);
-        const schemaName = String(explicitSchemaName || parsed.schemaName || '').trim();
-        const objectName = String(parsed.objectName || rawObjectName).trim();
-        return {
-            dbName: String(dbName || '').trim(),
-            rawObjectName: String(rawObjectName || '').trim(),
-            objectName,
-            schemaName,
-            normalizedDbName: String(dbName || '').trim().toLowerCase(),
-            normalizedRawObjectName: String(rawObjectName || '').trim().toLowerCase(),
-            normalizedObjectName: objectName.toLowerCase(),
-            normalizedSchemaName: schemaName.toLowerCase(),
-        };
-    };
-
-    const viewMetas = views.map((view) => buildObjectNameMeta(view.dbName, view.viewName, view.schemaName));
-    const materializedViewMetas = materializedViews.map((view) => buildObjectNameMeta(view.dbName, view.viewName, view.schemaName));
-    const triggerMetas = triggers.map((trigger) => ({
-        ...buildObjectNameMeta(trigger.dbName, trigger.triggerName, trigger.schemaName),
-        tableName: String(trigger.tableName || '').trim(),
-    }));
-    const routineMetas = routines.map((routine) => ({
-        ...buildObjectNameMeta(routine.dbName, routine.routineName, routine.schemaName),
-        routineType: String(routine.routineType || 'FUNCTION').trim().toUpperCase() || 'FUNCTION',
-    }));
-
-    const findTable = (candidateDbName: string, candidateTableName: string, schemaName = ''): QueryEditorNavigationTarget | null => {
-        const normalizedDbName = String(candidateDbName || '').trim().toLowerCase();
-        const normalizedTableName = String(candidateTableName || '').trim().toLowerCase();
-        const normalizedSchemaName = String(schemaName || '').trim().toLowerCase();
-        if (!normalizedDbName || !normalizedTableName) return null;
-
-        const exactQualifiedName = normalizedSchemaName ? `${normalizedSchemaName}.${normalizedTableName}` : normalizedTableName;
-        const exact = tableMetas.find((meta) =>
-            meta.normalizedDbName === normalizedDbName
-            && meta.normalizedRawTableName === exactQualifiedName
-        );
-        if (exact) {
-            return {
-                type: 'table',
-                dbName: exact.dbName,
-                tableName: exact.rawTableName,
-                schemaName: exact.schemaName || undefined,
-            };
-        }
-
-        const matched = tableMetas.find((meta) =>
-            meta.normalizedDbName === normalizedDbName
-            && meta.normalizedObjectName === normalizedTableName
-            && (!normalizedSchemaName || meta.normalizedSchemaName === normalizedSchemaName)
-        );
-        if (!matched) return null;
-        return {
-            type: 'table',
-            dbName: matched.dbName,
-            tableName: matched.rawTableName,
-            schemaName: matched.schemaName || undefined,
-        };
-    };
-
-    const findNamedObject = <TMeta extends {
-        dbName: string;
-        rawObjectName: string;
-        objectName: string;
-        normalizedDbName: string;
-        normalizedRawObjectName: string;
-        normalizedObjectName: string;
-        normalizedSchemaName: string;
-        schemaName: string;
-    }>(
-        metas: TMeta[],
-        candidateDbName: string,
-        candidateObjectName: string,
-        schemaName = '',
-    ): TMeta | null => {
-        const normalizedDbName = String(candidateDbName || '').trim().toLowerCase();
-        const normalizedObjectName = String(candidateObjectName || '').trim().toLowerCase();
-        const normalizedSchemaName = String(schemaName || '').trim().toLowerCase();
-        if (!normalizedDbName || !normalizedObjectName) return null;
-
-        const exactQualifiedName = normalizedSchemaName ? `${normalizedSchemaName}.${normalizedObjectName}` : normalizedObjectName;
-        const exact = metas.find((meta) =>
-            meta.normalizedDbName === normalizedDbName
-            && meta.normalizedRawObjectName === exactQualifiedName
-        );
-        if (exact) {
-            if (!normalizedSchemaName && !exact.normalizedSchemaName) {
-                const schemaQualifiedMatches = metas.filter((meta) =>
-                    meta.normalizedDbName === normalizedDbName
-                    && meta.normalizedObjectName === normalizedObjectName
-                    && Boolean(meta.normalizedSchemaName)
-                );
-                if (schemaQualifiedMatches.length === 1) {
-                    return schemaQualifiedMatches[0];
-                }
-            }
-            return exact;
-        }
-
-        return metas.find((meta) =>
-            meta.normalizedDbName === normalizedDbName
-            && meta.normalizedObjectName === normalizedObjectName
-            && (!normalizedSchemaName || meta.normalizedSchemaName === normalizedSchemaName)
-        ) || null;
-    };
-
-    const findView = (candidateDbName: string, candidateViewName: string, schemaName = ''): QueryEditorNavigationTarget | null => {
-        const matched = findNamedObject(viewMetas, candidateDbName, candidateViewName, schemaName);
-        if (!matched) return null;
-        return {
-            type: 'view',
-            dbName: matched.dbName,
-            viewName: matched.rawObjectName,
-            schemaName: matched.schemaName || undefined,
-        };
-    };
-
-    const findMaterializedView = (candidateDbName: string, candidateViewName: string, schemaName = ''): QueryEditorNavigationTarget | null => {
-        const matched = findNamedObject(materializedViewMetas, candidateDbName, candidateViewName, schemaName);
-        if (!matched) return null;
-        return {
-            type: 'materialized-view',
-            dbName: matched.dbName,
-            viewName: matched.rawObjectName,
-            schemaName: matched.schemaName || undefined,
-        };
-    };
-
-    const findTrigger = (candidateDbName: string, candidateTriggerName: string, schemaName = ''): QueryEditorNavigationTarget | null => {
-        const matched = findNamedObject(triggerMetas, candidateDbName, candidateTriggerName, schemaName);
-        if (!matched) return null;
-        return {
-            type: 'trigger',
-            dbName: matched.dbName,
-            triggerName: matched.rawObjectName,
-            tableName: matched.tableName,
-            schemaName: matched.schemaName || undefined,
-        };
-    };
-
-    const findRoutine = (candidateDbName: string, candidateRoutineName: string, schemaName = ''): QueryEditorNavigationTarget | null => {
-        const matched = findNamedObject(routineMetas, candidateDbName, candidateRoutineName, schemaName);
-        if (!matched) return null;
-        return {
-            type: 'routine',
-            dbName: matched.dbName,
-            routineName: matched.rawObjectName,
-            routineType: matched.routineType,
-            schemaName: matched.schemaName || undefined,
-        };
-    };
-
-    const findObjectInPriorityOrder = (candidateDbName: string, candidateObjectName: string, schemaName = ''): QueryEditorNavigationTarget | null => (
-        findTable(candidateDbName, candidateObjectName, schemaName)
-        || findView(candidateDbName, candidateObjectName, schemaName)
-        || findMaterializedView(candidateDbName, candidateObjectName, schemaName)
-        || findTrigger(candidateDbName, candidateObjectName, schemaName)
-        || findRoutine(candidateDbName, candidateObjectName, schemaName)
-    );
-
-    if (parts.length === 1) {
-        const [singlePart] = parts;
-        const normalizedSingle = singlePart.toLowerCase();
-        if (visibleDbSet.has(normalizedSingle)) {
-            return { type: 'database', dbName: singlePart };
-        }
-        return findObjectInPriorityOrder(currentDbName, singlePart);
-    }
-
-    if (parts.length === 2) {
-        const [firstPart, secondPart] = parts;
-        if (visibleDbSet.has(firstPart.toLowerCase())) {
-            return findObjectInPriorityOrder(firstPart, secondPart);
-        }
-        return findObjectInPriorityOrder(currentDbName, secondPart, firstPart);
-    }
-
-    const [dbName, schemaName, tableName] = parts;
-    if (!visibleDbSet.has(dbName.toLowerCase())) {
-        return null;
-    }
-    return findObjectInPriorityOrder(dbName, tableName, schemaName);
-};
-
-const resolveQueryEditorHoverTarget = (
-    fullText: string,
-    lineContent: string,
-    column: number,
-    currentDb: string,
-    visibleDbs: string[],
-    tables: CompletionTableMeta[],
-    allColumns: CompletionColumnMeta[],
-    views: CompletionViewMeta[] = [],
-    materializedViews: CompletionViewMeta[] = [],
-    triggers: CompletionTriggerMeta[] = [],
-    routines: CompletionRoutineMeta[] = [],
-): QueryEditorHoverTarget | null => {
-    const text = String(lineContent || '');
-    if (!text) return null;
-
-    const offset = Math.max(0, Number(column || 1) - 2);
-    const windowRange = findIdentifierWindowAtOffset(text, offset);
-    if (!windowRange) return null;
-
-    const rawIdentifier = text.slice(windowRange.start, windowRange.end).trim();
-    if (!rawIdentifier) return null;
-
-    const range = { startColumn: windowRange.start + 1, endColumn: windowRange.end + 1 };
-    const parts = normalizeNavigationIdentifierParts(rawIdentifier);
-    if (parts.length === 0 || parts.length > 3) return null;
-
-    const findMatchingTable = (dbName: string, rawTableName: string, schemaName = ''): CompletionTableMeta | null => {
-        const normalizedDbName = String(dbName || '').trim().toLowerCase();
-        const normalizedRawTableName = String(rawTableName || '').trim().toLowerCase();
-        const normalizedSchemaName = String(schemaName || '').trim().toLowerCase();
-        return tables.find((item) => {
-            if (String(item.dbName || '').trim().toLowerCase() !== normalizedDbName) return false;
-            const itemRawName = String(item.tableName || '').trim();
-            const parsed = splitSidebarQualifiedName(itemRawName);
-            const itemObjectName = String(parsed.objectName || itemRawName).trim().toLowerCase();
-            const itemSchemaName = String(parsed.schemaName || '').trim().toLowerCase();
-            if (normalizedSchemaName) {
-                const normalizedItemRawName = String(itemRawName).trim().toLowerCase();
-                return itemSchemaName === normalizedSchemaName
-                    && (
-                        itemObjectName === normalizedRawTableName
-                        || normalizedItemRawName === normalizedRawTableName
-                        || normalizedItemRawName === `${normalizedSchemaName}.${normalizedRawTableName}`
-                    );
-            }
-            return itemObjectName === normalizedRawTableName || String(itemRawName).trim().toLowerCase() === normalizedRawTableName;
-        }) || null;
-    };
-
-    const navigationTarget = resolveQueryEditorNavigationTarget(
-        lineContent,
-        column,
-        currentDb,
-        visibleDbs,
-        tables,
-        views,
-        materializedViews,
-        triggers,
-        routines,
-    );
-    if (navigationTarget) {
-        if (navigationTarget.type === 'database') {
-            return { kind: 'database', dbName: navigationTarget.dbName, range };
-        }
-        if (navigationTarget.type === 'table') {
-            const meta = findMatchingTable(navigationTarget.dbName, navigationTarget.tableName, navigationTarget.schemaName || '');
-            return {
-                kind: 'table',
-                dbName: navigationTarget.dbName,
-                tableName: navigationTarget.tableName,
-                schemaName: navigationTarget.schemaName,
-                comment: meta?.comment,
-                range,
-            };
-        }
-        if (navigationTarget.type === 'view') {
-            return { kind: 'view', dbName: navigationTarget.dbName, viewName: navigationTarget.viewName, schemaName: navigationTarget.schemaName, range };
-        }
-        if (navigationTarget.type === 'materialized-view') {
-            return { kind: 'materialized-view', dbName: navigationTarget.dbName, viewName: navigationTarget.viewName, schemaName: navigationTarget.schemaName, range };
-        }
-        if (navigationTarget.type === 'trigger') {
-            return { kind: 'trigger', dbName: navigationTarget.dbName, triggerName: navigationTarget.triggerName, tableName: navigationTarget.tableName, schemaName: navigationTarget.schemaName, range };
-        }
-        return { kind: 'routine', dbName: navigationTarget.dbName, routineName: navigationTarget.routineName, routineType: navigationTarget.routineType, schemaName: navigationTarget.schemaName, range };
-    }
-
-    const findColumnTarget = (dbName: string, tableName: string, columnName: string): QueryEditorHoverTarget | null => {
-        const normalizedDbName = String(dbName || '').trim().toLowerCase();
-        const normalizedTableName = String(tableName || '').trim().toLowerCase();
-        const normalizedColumnName = String(columnName || '').trim().toLowerCase();
-        const column = allColumns.find((item) => {
-            if (String(item.dbName || '').trim().toLowerCase() !== normalizedDbName) return false;
-            if (String(item.name || '').trim().toLowerCase() !== normalizedColumnName) return false;
-            const rawTable = String(item.tableName || '').trim().toLowerCase();
-            const parsed = splitCompletionSchemaAndTable(item.tableName || '');
-            return rawTable === normalizedTableName || String(parsed.table || '').trim().toLowerCase() === normalizedTableName;
-        });
-        if (!column) return null;
-        const parsedTable = splitCompletionSchemaAndTable(column.tableName || '');
-        return {
-            kind: 'column',
-            dbName: column.dbName,
-            tableName: column.tableName,
-            columnName: column.name,
-            type: column.type,
-            comment: column.comment,
-            schemaName: parsedTable.schema || undefined,
-            range,
-        };
-    };
-
-    if (parts.length === 2) {
-        const [firstPart, secondPart] = parts;
-        const aliasMap = buildQueryEditorAliasMap(fullText, currentDb);
-        const aliasInfo = aliasMap[firstPart.toLowerCase()];
-        if (aliasInfo) {
-            const aliasedColumn = findColumnTarget(aliasInfo.dbName, aliasInfo.tableName, secondPart);
-            if (aliasedColumn) return aliasedColumn;
-        }
-        const qualifiedTable = findMatchingTable(currentDb, secondPart, firstPart);
-        if (qualifiedTable) {
-            return {
-                kind: 'table',
-                dbName: qualifiedTable.dbName,
-                tableName: qualifiedTable.tableName,
-                schemaName: firstPart,
-                comment: qualifiedTable.comment,
-                range,
-            };
-        }
-    }
-
-    if (parts.length === 1) {
-        const [columnName] = parts;
-        const normalizedCurrentDb = String(currentDb || '').trim().toLowerCase();
-        const directColumns = allColumns.filter((item) =>
-            String(item.dbName || '').trim().toLowerCase() === normalizedCurrentDb
-            && String(item.name || '').trim().toLowerCase() === columnName.toLowerCase()
-        );
-        if (directColumns.length === 1) {
-            const column = directColumns[0];
-            const parsedTable = splitCompletionSchemaAndTable(column.tableName || '');
-            return {
-                kind: 'column',
-                dbName: column.dbName,
-                tableName: column.tableName,
-                columnName: column.name,
-                type: column.type,
-                comment: column.comment,
-                schemaName: parsedTable.schema || undefined,
-                range,
-            };
-        }
-    }
-
-    return null;
-};
-
-export const resolveQueryEditorNavigationDecorations = (
-    lineContent: string,
-    column: number,
-    currentDb: string,
-    visibleDbs: string[],
-    tables: CompletionTableMeta[],
-    views: CompletionViewMeta[] = [],
-    materializedViews: CompletionViewMeta[] = [],
-    triggers: CompletionTriggerMeta[] = [],
-    routines: CompletionRoutineMeta[] = [],
-    shortcutModifierLabel = 'Ctrl/Cmd',
-): Array<{ startColumn: number; endColumn: number; hoverMessage: string }> => {
-    const text = String(lineContent || '');
-    if (!text) return [];
-    const offset = Math.max(0, Number(column || 1) - 2);
-    const windowRange = findIdentifierWindowAtOffset(text, offset);
-    if (!windowRange) return [];
-
-    const navigationTarget = resolveQueryEditorNavigationTarget(
-        lineContent,
-        column,
-        currentDb,
-        visibleDbs,
-        tables,
-        views,
-        materializedViews,
-        triggers,
-        routines,
-    );
-    if (!navigationTarget) return [];
-
-    const hoverMessage = (() => {
-        if (navigationTarget.type === 'database') {
-            return translate('query_editor.hover.switch_database_with_shortcut', {
-                shortcut: shortcutModifierLabel,
-            });
-        }
-        if (navigationTarget.type === 'table') {
-            return translate('query_editor.hover.open_table_with_shortcut', {
-                shortcut: shortcutModifierLabel,
-            });
-        }
-        if (navigationTarget.type === 'view') {
-            return translate('query_editor.hover.open_view_with_shortcut', {
-                shortcut: shortcutModifierLabel,
-            });
-        }
-        if (navigationTarget.type === 'materialized-view') {
-            return translate('query_editor.hover.open_materialized_view_with_shortcut', {
-                shortcut: shortcutModifierLabel,
-            });
-        }
-        if (navigationTarget.type === 'trigger') {
-            return translate('query_editor.hover.open_trigger_with_shortcut', {
-                shortcut: shortcutModifierLabel,
-            });
-        }
-        return navigationTarget.routineType === 'PROCEDURE'
-            ? translate('query_editor.hover.open_procedure_with_shortcut', {
-                shortcut: shortcutModifierLabel,
-            })
-            : translate('query_editor.hover.open_function_with_shortcut', {
-                shortcut: shortcutModifierLabel,
-            });
-    })();
-
-    return [{
-        startColumn: windowRange.start + 1,
-        endColumn: windowRange.end + 1,
-        hoverMessage,
-    }];
-};
-
-const dispatchQueryEditorSidebarLocate = (detail: Record<string, unknown>) => {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    const connectionId = String(detail.connectionId || '').trim();
-    const dbName = String(detail.dbName || '').trim();
-    const objectName = String(detail.tableName || detail.viewName || detail.triggerName || detail.routineName || detail.objectName || '').trim();
-    if (!connectionId || !dbName || !objectName) {
-        return;
-    }
-    window.dispatchEvent(new CustomEvent('gonavi:locate-sidebar-object', {
-        detail,
-    }));
-};
-
-const resolveEventTargetNode = (target: EventTarget | null): Node | null => (
-    typeof Node !== 'undefined' && target instanceof Node ? target : null
-);
-
-const isDocumentLevelShortcutTarget = (targetNode: Node | null): boolean => {
-    if (!targetNode) {
-        return true;
-    }
-    if (typeof document === 'undefined') {
-        return false;
-    }
-    return targetNode === document.body || targetNode === document.documentElement;
-};
-
-const clearQueryEditorLinkDecorations = (
-    editor: any,
-    decorationIdsRef: React.MutableRefObject<string[]>,
-) => {
-    if (!editor?.deltaDecorations) {
-        decorationIdsRef.current = [];
-        return;
-    }
-    decorationIdsRef.current = editor.deltaDecorations(decorationIdsRef.current, []);
-};
-
-const clearQueryEditorObjectDecorations = (
-    editor: any,
-    decorationIdsRef: React.MutableRefObject<string[]>,
-) => {
-    if (!editor?.deltaDecorations) {
-        decorationIdsRef.current = [];
-        return;
-    }
-    decorationIdsRef.current = editor.deltaDecorations(decorationIdsRef.current, []);
-};
-
-const resolveQueryLocatorPlan = async ({
-    statement,
-    originalStatement,
-    dbType,
-    currentDb,
-    config,
-    forceReadOnly,
-}: {
-    statement: string;
-    originalStatement?: string;
-    dbType: string;
-    currentDb: string;
-    config: any;
-    forceReadOnly: boolean;
-}): Promise<QueryStatementPlan> => {
-    const plan: QueryStatementPlan = {
-        originalSql: originalStatement || statement,
-        executedSql: statement,
-        pkColumns: [],
-    };
-    if (forceReadOnly) return plan;
-
-    const defaultSchema = isOracleLikeDialect(dbType) ? resolveOracleLikeDefaultSchemaName(config) : '';
-    let tableRef = extractQueryResultTableRef(statement, dbType, currentDb, defaultSchema);
-    if (!tableRef) return plan;
-    plan.tableRef = tableRef;
-    if (isSystemMetadataQueryResult(tableRef, dbType)) {
-        plan.editLocator = buildQueryReadOnlyLocator(translate('query_editor.message.read_only_system_metadata'));
-        return plan;
-    }
-
-    const selectInfo = parseSimpleSelectInfo(statement);
-    if (!selectInfo) {
-        // 聚合、函数和表达式结果天然无法安全回写到单行，静默保持只读即可。
-        return plan;
-    }
-    if (!selectInfo.selectsAll && Object.keys(selectInfo.writableColumns).length === 0) {
-        return plan;
-    }
-
-    if (isOracleLikeDialect(dbType) && defaultSchema && !String(tableRef.tableName || '').includes('.')) {
-        tableRef = {
-            ...tableRef,
-            tableName: `${tableRef.metadataDbName}.${tableRef.metadataTableName}`,
-        };
-        plan.tableRef = tableRef;
-    }
-
-    try {
-        const [resCols, resIndexes] = await Promise.all([
-            DBGetColumns(buildRpcConnectionConfig(config) as any, tableRef.metadataDbName, tableRef.metadataTableName),
-            DBGetIndexes(buildRpcConnectionConfig(config) as any, tableRef.metadataDbName, tableRef.metadataTableName)
-                .catch((error: any) => ({ success: false, message: String(error?.message || error || 'Failed to load indexes'), data: [] })),
-        ]);
-        if (!resCols?.success || !Array.isArray(resCols.data)) {
-            const reason = translate('query_editor.message.read_only_table_locator_metadata_unavailable', {
-                table: `${tableRef.metadataDbName}.${tableRef.metadataTableName}`,
-            });
-            plan.editLocator = buildQueryReadOnlyLocator(reason);
-            plan.warning = translate('query_editor.message.read_only_warning_with_detail', { detail: reason });
-            return plan;
-        }
-
-        const tableColumns = resCols.data as ColumnDefinition[];
-        const tableColumnNames = tableColumns.map(getColumnDefinitionName).filter(Boolean);
-        const primaryKeys = tableColumns
-            .filter((column: any) => getColumnDefinitionKey(column) === 'PRI')
-            .map(getColumnDefinitionName)
-            .filter(Boolean);
-        const indexes = resIndexes?.success && Array.isArray(resIndexes.data)
-            ? resIndexes.data as IndexDefinition[]
-            : [];
-        const writableColumns: Record<string, string> = selectInfo.selectsAll
-            ? Object.fromEntries(tableColumnNames.map((column) => [column, column]))
-            : {};
-        Object.entries(selectInfo.writableColumns).forEach(([resultColumn, sourceColumn]) => {
-            const metadataColumn = resolveMetadataColumnName(tableColumnNames, sourceColumn);
-            if (metadataColumn) writableColumns[resultColumn] = metadataColumn;
-        });
-        const appendExpressions: string[] = [];
-        const hiddenColumns: string[] = [];
-        let needsOracleRowIDExpression = false;
-        let needsDuckDBRowIDExpression = false;
-
-        const buildColumnLocator = (strategy: 'primary-key' | 'unique-key', locatorColumns: string[]): EditRowLocator => {
-            const valueColumns = locatorColumns.map((column, index) => {
-                const selectedColumn = findWritableResultColumnForSource(writableColumns, column);
-                if (selectedColumn) return selectedColumn;
-                const alias = buildQueryLocatorAlias(column, index + 1);
-                appendExpressions.push(buildQueryLocatorColumnExpression(dbType, column, alias));
-                hiddenColumns.push(alias);
-                return alias;
-            });
-            return {
-                strategy,
-                columns: locatorColumns,
-                valueColumns,
-                hiddenColumns: hiddenColumns.length > 0 ? [...hiddenColumns] : undefined,
-                writableColumns,
-                readOnly: false,
-            };
-        };
-
-        if (primaryKeys.length > 0) {
-            plan.pkColumns = primaryKeys;
-            plan.editLocator = buildColumnLocator('primary-key', primaryKeys);
-        } else {
-            const uniqueKeyGroups = resolveUniqueKeyGroupsFromIndexes(indexes);
-            const uniqueKeyGroup = uniqueKeyGroups.find((group) => group.length > 0);
-            if (uniqueKeyGroup) {
-                plan.editLocator = buildColumnLocator('unique-key', uniqueKeyGroup);
-            } else if (isOracleLikeDialect(dbType)) {
-                needsOracleRowIDExpression = true;
-                plan.editLocator = {
-                    strategy: 'oracle-rowid',
-                    columns: ['ROWID'],
-                    valueColumns: [ORACLE_ROWID_LOCATOR_COLUMN],
-                    hiddenColumns: [ORACLE_ROWID_LOCATOR_COLUMN],
-                    writableColumns,
-                    readOnly: false,
-                };
-            } else if (String(dbType || '').trim().toLowerCase() === 'duckdb') {
-                needsDuckDBRowIDExpression = true;
-                plan.editLocator = {
-                    strategy: 'duckdb-rowid',
-                    columns: ['rowid'],
-                    valueColumns: [DUCKDB_ROWID_LOCATOR_COLUMN],
-                    hiddenColumns: [DUCKDB_ROWID_LOCATOR_COLUMN],
-                    writableColumns,
-                    readOnly: false,
-                };
-            } else {
-                if (!resIndexes?.success) {
-                    const reason = translate('query_editor.message.read_only_index_metadata_unavailable');
-                    plan.editLocator = buildQueryReadOnlyLocator(reason);
-                    plan.warning = translate('query_editor.message.read_only_warning_with_detail', {
-                        detail: `${tableRef.metadataDbName}.${tableRef.metadataTableName} ${reason}`,
-                    });
-                } else {
-                    const reason = translate('query_editor.message.read_only_no_safe_locator');
-                    plan.editLocator = buildQueryReadOnlyLocator(reason);
-                    plan.warning = translate('query_editor.message.read_only_warning_with_detail', {
-                        detail: `${tableRef.metadataDbName}.${tableRef.metadataTableName} ${reason}`,
-                    });
-                }
-            }
-        }
-
-        const executableAppendExpressions = [
-            ...(needsOracleRowIDExpression ? [buildQueryRowIDExpression(dbType)] : []),
-            ...(needsDuckDBRowIDExpression ? [buildDuckDBRowIDExpression(dbType)] : []),
-            ...appendExpressions,
-        ];
-
-        if (executableAppendExpressions.length > 0 && isOracleLikeDialect(dbType) && selectInfo.selectsBareAll) {
-            const rewritten = rewriteOracleSelectAllWithExpressions(statement, executableAppendExpressions);
-            if (rewritten) {
-                plan.executedSql = rewritten;
-                return plan;
-            }
-
-            const reason = translate('query_editor.message.read_only_oracle_rowid_injection_unavailable');
-            plan.editLocator = buildQueryReadOnlyLocator(reason);
-            plan.warning = translate('query_editor.message.read_only_warning_with_detail', { detail: reason });
-            return plan;
-        }
-
-        plan.executedSql = appendQuerySelectExpressions(statement, executableAppendExpressions);
-        return plan;
-    } catch {
-        const reason = translate('query_editor.message.read_only_table_locator_metadata_unavailable', {
-            table: `${tableRef.metadataDbName}.${tableRef.metadataTableName}`,
-        });
-        plan.editLocator = buildQueryReadOnlyLocator(reason);
-        plan.warning = translate('query_editor.message.read_only_warning_with_detail', { detail: reason });
-        return plan;
-    }
-};
 
 const QueryEditor: React.FC<{ tab: TabData; isActive?: boolean }> = ({ tab, isActive = true }) => {
   const [query, setQuery] = useState(getInitialEditorQuery(tab));
diff --git a/frontend/src/components/QueryEditorToolbar.layout.test.tsx b/frontend/src/components/QueryEditorToolbar.layout.test.tsx
index 858d26c..38dcc78 100644
--- a/frontend/src/components/QueryEditorToolbar.layout.test.tsx
+++ b/frontend/src/components/QueryEditorToolbar.layout.test.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { readFileSync } from 'node:fs';
 import { describe, expect, it } from 'vitest';
+import { readV2ThemeCss } from '../test/readV2ThemeCss';
 
 describe('QueryEditorToolbar layout', () => {
   it('keeps the v2 toolbar on a single scrollable row in small windows', () => {
     const toolbarSource = readFileSync(new URL('./QueryEditorToolbar.tsx', import.meta.url), 'utf8');
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
     const toolbarCss = css.slice(
       css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar {'),
       css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-main {'),
@@ -30,7 +31,7 @@ describe('QueryEditorToolbar layout', () => {
 
   it('keeps run and stop buttons separated in the v2 toolbar action group', () => {
     const toolbarSource = readFileSync(new URL('./QueryEditorToolbar.tsx', import.meta.url), 'utf8');
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
 
     expect(toolbarSource).toContain('gn-v2-query-toolbar-action-group');
     expect(toolbarSource).not.toContain('Space.Compact');
@@ -40,7 +41,7 @@ describe('QueryEditorToolbar layout', () => {
   });
 
   it('keeps commit button hover styling in source and v2 css', () => {
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
     const commitBaseCss = css.slice(
       css.indexOf('body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button {'),
       css.indexOf('body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:hover,'),
diff --git a/frontend/src/components/Sidebar.locate-toolbar.test.tsx b/frontend/src/components/Sidebar.locate-toolbar.test.tsx
index 83e0e5a..ba63e6a 100644
--- a/frontend/src/components/Sidebar.locate-toolbar.test.tsx
+++ b/frontend/src/components/Sidebar.locate-toolbar.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { readFileSync } from 'node:fs';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { readV2ThemeCss } from '../test/readV2ThemeCss';
 
 import Sidebar, {
   buildAllSavedQueriesTreeNode,
@@ -912,7 +913,7 @@ describe('Sidebar locate toolbar', () => {
   });
 
   it('scales the v2 rail and footer tools from global appearance tokens', () => {
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
 
     expect(css).toMatch(/\.gn-v2-rail-action-group,\s*body\[data-ui-version="v2"\] \.gn-v2-rail-system-actions \{[^}]*flex-direction: column;/s);
     expect(css).toMatch(/\.gn-v2-rail-action-group,\s*body\[data-ui-version="v2"\] \.gn-v2-rail-system-actions \{[^}]*flex-direction: column;/s);
@@ -932,7 +933,7 @@ describe('Sidebar locate toolbar', () => {
   });
 
   it('keeps v2 tree status dots circular while using virtual horizontal scroll for long labels', () => {
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
     const source = readSidebarSource();
     const utilsSource = readFileSync(new URL('./sidebarV2Utils.ts', import.meta.url), 'utf8');
 
@@ -1696,7 +1697,7 @@ describe('Sidebar locate toolbar', () => {
 
   it('keeps the v2 table pin action on sidebar table rows', () => {
     const source = readSidebarSource();
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
 
     expect(source).toContain('data-v2-sidebar-table-pin-action="true"');
     expect(source).toContain('node?.dataRef?.pinnedSidebarTable ? <StarFilled /> : <StarOutlined />');
@@ -1770,7 +1771,7 @@ describe('Sidebar locate toolbar', () => {
 
   it('renders v2 table section labels as tree children instead of group header badges', () => {
     const source = readSidebarSource();
-    const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
+    const css = readV2ThemeCss();
 
     expect(source).toContain("node.type === 'v2-table-section'");
     expect(source).toContain('className="gn-v2-tree-section-title"');
diff --git a/frontend/src/components/ai/AIChatHeader.test.tsx b/frontend/src/components/ai/AIChatHeader.test.tsx
index b3a4edc..c9839cf 100644
--- a/frontend/src/components/ai/AIChatHeader.test.tsx
+++ b/frontend/src/components/ai/AIChatHeader.test.tsx
@@ -1,8 +1,9 @@
 import { readFileSync } from 'node:fs';
 import { describe, expect, it } from 'vitest';
+import { readV2ThemeCss } from '../../test/readV2ThemeCss';
 
 const headerSource = readFileSync(new URL('./AIChatHeader.tsx', import.meta.url), 'utf8');
-const v2ThemeCss = readFileSync(new URL('../../v2-theme.css', import.meta.url), 'utf8');
+const v2ThemeCss = readV2ThemeCss();
 
 describe('AIChatHeader export affordance', () => {
   it('does not expose chat export UI or markdown export implementation', () => {
diff --git a/frontend/src/components/connectionModal/ConnectionModalNetworkSecuritySection.tsx b/frontend/src/components/connectionModal/ConnectionModalNetworkSecuritySection.tsx
new file mode 100644
index 0000000..5121809
--- /dev/null
+++ b/frontend/src/components/connectionModal/ConnectionModalNetworkSecuritySection.tsx
@@ -0,0 +1,1001 @@
+import React from "react";
+import { Button, Checkbox, Form, Input, InputNumber, Space, Typography } from "antd";
+
+import { t } from "../../i18n";
+import { getStoredSecretPlaceholder } from "../../utils/connectionModalPresentation";
+import { noAutoCapInputProps } from "../../utils/inputAutoCap";
+
+const { Text } = Typography;
+
+type ConnectionModalNetworkSecuritySectionProps = Record<string, any>;
+
+const ConnectionModalNetworkSecuritySection: React.FC<ConnectionModalNetworkSecuritySectionProps> = (props) => {
+  const {
+    activeNetworkConfig,
+    darkMode,
+    dbType,
+    form,
+    getConnectionOptionCardStyle,
+    handleSelectCertificateFile,
+    handleSelectSSHKeyFile,
+    initialValues,
+    isFileDb,
+    isJVM,
+    isSSLType,
+    modalInnerSectionStyle,
+    modalMutedTextStyle,
+    renderChoiceCards,
+    renderStoredSecretControls,
+    proxyType,
+    selectingCertificateField,
+    selectingSSHKey,
+    setActiveNetworkConfig,
+    sslHintText,
+    sslMode,
+    supportsSSLCAPath,
+    supportsSSLClientCertificate,
+    tunnelSectionStyle,
+    useHttpTunnel,
+    useProxy,
+    useSSH,
+    useSSL,
+  } = props;
+
+  if (isFileDb || isJVM) {
+    return null;
+  }
+
+  const effectiveUseSSL = useSSL || !!form.getFieldValue("useSSL");
+  const effectiveUseSSH = useSSH || !!form.getFieldValue("useSSH");
+  const effectiveUseHttpTunnel =
+    useHttpTunnel ||
+    !!form.getFieldValue("useHttpTunnel");
+  const effectiveUseProxy =
+    !effectiveUseHttpTunnel &&
+    (useProxy || !!form.getFieldValue("useProxy"));
+  const networkItems: Array<{
+    key: "ssl" | "ssh" | "proxy" | "httpTunnel";
+    title: string;
+    description: string;
+    enabled: boolean;
+  }> = [
+    ...(isSSLType
+      ? [
+          {
+            key: "ssl" as const,
+            title: t("connection.modal.network.ssl_tls"),
+            description: t(
+              "connection.modal.network.ssl.description",
+            ),
+            enabled: effectiveUseSSL,
+          },
+        ]
+      : []),
+    {
+      key: "ssh",
+      title: t("connection.modal.network.ssh.title"),
+      description: t("connection.modal.network.ssh.description"),
+      enabled: effectiveUseSSH,
+    },
+    {
+      key: "proxy",
+      title: t("connection.modal.network.proxy.title"),
+      description: t("connection.modal.network.proxy.description"),
+      enabled: effectiveUseProxy,
+    },
+    {
+      key: "httpTunnel",
+      title: t("connection.modal.network.httpTunnel.title"),
+      description: t(
+        "connection.modal.network.httpTunnel.description",
+      ),
+      enabled: effectiveUseHttpTunnel,
+    },
+  ];
+  const resolvedNetworkConfig =
+    activeNetworkConfig === "ssl" && !effectiveUseSSL
+      ? networkItems.find((item) => item.enabled)?.key ||
+        (networkItems.some((item) => item.key === activeNetworkConfig)
+          ? activeNetworkConfig
+          : networkItems[0]?.key || "ssh")
+      : networkItems.some((item) => item.key === activeNetworkConfig)
+        ? activeNetworkConfig
+        : networkItems[0]?.key || "ssh";
+  const renderNetworkPanel = () => {
+    if (resolvedNetworkConfig === "ssl") {
+      return (
+        <div style={{ ...modalInnerSectionStyle, padding: 14 }}>
+          <div
+            style={{
+              marginBottom: 8,
+              color: darkMode ? "#f5f7ff" : "#162033",
+              fontSize: 14,
+              fontWeight: 700,
+            }}
+          >
+            {t("connection.modal.network.ssl_tls")}
+          </div>
+          <div style={{ ...modalMutedTextStyle, marginBottom: 14 }}>
+            {t("connection.modal.network.ssl.panelDescription")}
+          </div>
+          {!effectiveUseSSL ? (
+            <div
+              style={{
+                ...modalMutedTextStyle,
+                padding: "10px 12px",
+                borderRadius: 12,
+                background: darkMode
+                  ? "rgba(255,255,255,0.03)"
+                  : "rgba(16,24,40,0.04)",
+              }}
+            >
+              <div>{t("connection.modal.network.ssl.disabledHint")}</div>
+              <div style={{ marginTop: 8 }}>{sslHintText}</div>
+            </div>
+          ) : (
+            <div style={tunnelSectionStyle}>
+              <div style={{ display: "grid", gap: 8, marginBottom: 14 }}>
+                <Text strong>
+                  {t("connection.modal.network.ssl.mode")}
+                </Text>
+                {renderChoiceCards({
+                  fieldName: "sslMode",
+                  value: String(sslMode),
+                  options: [
+                    {
+                      value: "preferred",
+                      label: t(
+                        "connection.modal.network.ssl_mode.preferred",
+                      ),
+                      description: t(
+                        "connection.modal.network.ssl.preferred.description",
+                      ),
+                    },
+                    {
+                      value: "required",
+                      label: t(
+                        "connection.modal.network.ssl_mode.required",
+                      ),
+                      description: t(
+                        "connection.modal.network.ssl.required.description",
+                      ),
+                    },
+                    {
+                      value: "skip-verify",
+                      label: t(
+                        "connection.modal.network.ssl_mode.skip_verify",
+                      ),
+                      description: t(
+                        "connection.modal.network.ssl.skipVerify.description",
+                      ),
+                    },
+                  ],
+                })}
+              </div>
+              {(supportsSSLCAPath || supportsSSLClientCertificate) && (
+                <div style={{ display: "grid", gap: 8, marginBottom: 12 }}>
+                  {supportsSSLCAPath && (
+                    <Form.Item
+                      label={
+                        dbType === "sqlserver"
+                          ? t(
+                              "connection.modal.network.ssl.serverCaPath",
+                            )
+                          : t(
+                              "connection.modal.network.ssl.caPath",
+                            )
+                      }
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Space.Compact style={{ width: "100%" }}>
+                        <Form.Item name="sslCAPath" noStyle>
+                          <Input
+                            {...noAutoCapInputProps}
+                            placeholder={t(
+                              "connection.modal.example",
+                              { value: "C:\\certs\\ca.pem" },
+                            )}
+                          />
+                        </Form.Item>
+                        <Button
+                          onClick={() => handleSelectCertificateFile("sslCAPath", "ca")}
+                          loading={selectingCertificateField === "sslCAPath"}
+                        >
+                          {t("connection.modal.action.browse")}
+                        </Button>
+                      </Space.Compact>
+                    </Form.Item>
+                  )}
+                  {supportsSSLClientCertificate && (
+                    <>
+                      <Form.Item
+                        label={
+                          dbType === "dameng"
+                            ? t(
+                                "connection.modal.network.ssl.damengCertPath",
+                              )
+                            : t(
+                                "connection.modal.network.ssl.certPath",
+                              )
+                        }
+                        rules={[
+                          {
+                            required: dbType === "dameng",
+                            message: t(
+                              "connection.modal.network.ssl.certRequired",
+                            ),
+                          },
+                        ]}
+                        style={{ marginBottom: 0 }}
+                      >
+                        <Space.Compact style={{ width: "100%" }}>
+                          <Form.Item name="sslCertPath" noStyle>
+                            <Input
+                              {...noAutoCapInputProps}
+                              placeholder={t(
+                                "connection.modal.example",
+                                {
+                                  value:
+                                    "C:\\certs\\client-cert.pem",
+                                },
+                              )}
+                            />
+                          </Form.Item>
+                          <Button
+                            onClick={() => handleSelectCertificateFile("sslCertPath", "client-cert")}
+                            loading={selectingCertificateField === "sslCertPath"}
+                          >
+                            {t("connection.modal.action.browse")}
+                          </Button>
+                        </Space.Compact>
+                      </Form.Item>
+                      <Form.Item
+                        label={
+                          dbType === "dameng"
+                            ? t(
+                                "connection.modal.network.ssl.damengKeyPath",
+                              )
+                            : t(
+                                "connection.modal.network.ssl.keyPath",
+                              )
+                        }
+                        rules={[
+                          {
+                            required: dbType === "dameng",
+                            message: t(
+                              "connection.modal.network.ssl.keyRequired",
+                            ),
+                          },
+                        ]}
+                        style={{ marginBottom: 0 }}
+                      >
+                        <Space.Compact style={{ width: "100%" }}>
+                          <Form.Item name="sslKeyPath" noStyle>
+                            <Input
+                              {...noAutoCapInputProps}
+                              placeholder={t(
+                                "connection.modal.example",
+                                {
+                                  value:
+                                    "C:\\certs\\client-key.pem",
+                                },
+                              )}
+                            />
+                          </Form.Item>
+                          <Button
+                            onClick={() => handleSelectCertificateFile("sslKeyPath", "client-key")}
+                            loading={selectingCertificateField === "sslKeyPath"}
+                          >
+                            {t("connection.modal.action.browse")}
+                          </Button>
+                        </Space.Compact>
+                      </Form.Item>
+                    </>
+                  )}
+                </div>
+              )}
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                {sslHintText}
+              </Text>
+            </div>
+          )}
+        </div>
+      );
+    }
+    if (resolvedNetworkConfig === "ssh") {
+      return (
+        <div style={{ ...modalInnerSectionStyle, padding: 14 }}>
+          <div
+            style={{
+              marginBottom: 8,
+              color: darkMode ? "#f5f7ff" : "#162033",
+              fontSize: 14,
+              fontWeight: 700,
+            }}
+          >
+            {t("connection.modal.network.ssh.title")}
+          </div>
+          <div style={{ ...modalMutedTextStyle, marginBottom: 14 }}>
+            {t("connection.modal.network.ssh.panelDescription")}
+          </div>
+        {!effectiveUseSSH ? (
+            <div
+              style={{
+                ...modalMutedTextStyle,
+                padding: "10px 12px",
+                borderRadius: 12,
+                background: darkMode
+                  ? "rgba(255,255,255,0.03)"
+                  : "rgba(16,24,40,0.04)",
+              }}
+            >
+              {t("connection.modal.network.ssh.disabledHint")}
+            </div>
+          ) : (
+            <div style={tunnelSectionStyle}>
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "minmax(0, 1fr) 120px",
+                  gap: 16,
+                }}
+              >
+                <Form.Item
+                  name="sshHost"
+                  label={t("connection.modal.network.ssh.host")}
+                  rules={[
+                    {
+                      required: useSSH,
+                      message: t(
+                        "connection.modal.network.ssh.hostRequired",
+                      ),
+                    },
+                  ]}
+                  style={{ flex: 1 }}
+                >
+                  <Input
+                    {...noAutoCapInputProps}
+                    placeholder={t("connection.modal.example.or", {
+                      first: "ssh.example.com",
+                      second: "192.168.1.100",
+                    })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  name="sshPort"
+                  label={t("connection.modal.field.port.label")}
+                  rules={[
+                    {
+                      required: useSSH,
+                      message: t(
+                        "connection.modal.network.ssh.portRequired",
+                      ),
+                    },
+                  ]}
+                  style={{ width: 100 }}
+                >
+                  <InputNumber style={{ width: "100%" }} />
+                </Form.Item>
+              </div>
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                  gap: 16,
+                }}
+              >
+                <Form.Item
+                  name="sshUser"
+                  label={t("connection.modal.network.ssh.user")}
+                  rules={[
+                    {
+                      required: useSSH,
+                      message: t(
+                        "connection.modal.network.ssh.userRequired",
+                      ),
+                    },
+                  ]}
+                  style={{ flex: 1 }}
+                >
+                  <Input
+                    {...noAutoCapInputProps}
+                    placeholder={t("connection.modal.example", {
+                      value: "root",
+                    })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  name="sshPassword"
+                  label={t("connection.modal.network.ssh.password")}
+                  style={{ flex: 1 }}
+                >
+                  <Input.Password
+                    {...noAutoCapInputProps}
+                    placeholder={getStoredSecretPlaceholder({
+                      hasStoredSecret: initialValues?.hasSSHPassword,
+                      emptyPlaceholder: t(
+                        "connection.modal.field.password.placeholder",
+                      ),
+                      retainedLabel: t(
+                        "connection.modal.network.ssh.retained",
+                      ),
+                    })}
+                  />
+                </Form.Item>
+              </div>
+            <Form.Item
+              label={t("connection.modal.network.ssh.keyPath")}
+                help={t("connection.modal.example", {
+                  value: "/Users/name/.ssh/id_rsa",
+                })}
+            >
+                <Space.Compact style={{ width: "100%" }}>
+                  <Form.Item name="sshKeyPath" noStyle>
+                    <Input
+                      {...noAutoCapInputProps}
+                      placeholder={t(
+                        "connection.modal.network.ssh.keyPathPlaceholder",
+                      )}
+                    />
+                  </Form.Item>
+                  <Button
+                    onClick={handleSelectSSHKeyFile}
+                    loading={selectingSSHKey}
+                  >
+                    {t("connection.modal.action.browse")}
+                  </Button>
+                </Space.Compact>
+              </Form.Item>
+              {renderStoredSecretControls({
+                fieldName: "sshPassword",
+                clearKey: "sshPassword",
+                hasStoredSecret: initialValues?.hasSSHPassword,
+                clearLabel: t(
+                  "connection.modal.network.ssh.clearPassword",
+                ),
+                description: t(
+                  "connection.modal.network.ssh.savedDescription",
+                ),
+              })}
+            </div>
+          )}
+        </div>
+      );
+    }
+    if (resolvedNetworkConfig === "proxy") {
+      return (
+        <div style={{ ...modalInnerSectionStyle, padding: 14 }}>
+          <div
+            style={{
+              marginBottom: 8,
+              color: darkMode ? "#f5f7ff" : "#162033",
+              fontSize: 14,
+              fontWeight: 700,
+            }}
+          >
+            {t("connection.modal.network.proxy.title")}
+          </div>
+          <div style={{ ...modalMutedTextStyle, marginBottom: 14 }}>
+            {t("connection.modal.network.proxy.panelDescription")}
+          </div>
+          {!effectiveUseProxy ? (
+            <div
+              style={{
+                ...modalMutedTextStyle,
+                padding: "10px 12px",
+                borderRadius: 12,
+                background: darkMode
+                  ? "rgba(255,255,255,0.03)"
+                  : "rgba(16,24,40,0.04)",
+              }}
+            >
+              {t("connection.modal.network.proxy.disabledHint")}
+            </div>
+          ) : (
+            <div style={tunnelSectionStyle}>
+              <Form.Item
+                name="proxyHost"
+                label={t("connection.modal.network.proxy.host")}
+                rules={[
+                  {
+                    required: useProxy,
+                    message: t(
+                      "connection.modal.network.proxy.hostRequired",
+                    ),
+                  },
+                ]}
+              >
+                <Input
+                  {...noAutoCapInputProps}
+                  placeholder={t("connection.modal.example.or", {
+                    first: "127.0.0.1",
+                    second: "proxy.company.com",
+                  })}
+                />
+              </Form.Item>
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "minmax(0, 1fr) 120px",
+                  gap: 16,
+                }}
+              >
+                <div style={{ display: "grid", gap: 8 }}>
+                  <Text strong>
+                    {t("connection.modal.network.proxy.type")}
+                  </Text>
+                  {renderChoiceCards({
+                    fieldName: "proxyType",
+                    value: String(proxyType),
+                    minWidth: 150,
+                    options: [
+                      {
+                        value: "socks5",
+                        label: "SOCKS5",
+                        description: t(
+                          "connection.modal.network.proxy.socks5.description",
+                        ),
+                      },
+                      {
+                        value: "http",
+                        label: "HTTP CONNECT",
+                        description: t(
+                          "connection.modal.network.proxy.http.description",
+                        ),
+                      },
+                    ],
+                  })}
+                </div>
+                <Form.Item
+                  name="proxyPort"
+                  label={t("connection.modal.field.port.label")}
+                  rules={[
+                    {
+                      required: useProxy,
+                      message: t(
+                        "connection.modal.network.proxy.portRequired",
+                      ),
+                    },
+                  ]}
+                  style={{ marginBottom: 0 }}
+                >
+                  <InputNumber
+                    style={{ width: "100%" }}
+                    min={1}
+                    max={65535}
+                  />
+                </Form.Item>
+              </div>
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                  gap: 16,
+                }}
+              >
+                <Form.Item
+                  name="proxyUser"
+                  label={t("connection.modal.network.proxy.user")}
+                  style={{ flex: 1 }}
+                >
+                  <Input
+                    {...noAutoCapInputProps}
+                    placeholder={t(
+                      "connection.modal.network.proxy.noAuth",
+                    )}
+                  />
+                </Form.Item>
+                <Form.Item
+                  name="proxyPassword"
+                  label={t(
+                    "connection.modal.network.proxy.password",
+                  )}
+                  style={{ flex: 1 }}
+                >
+                  <Input.Password
+                    {...noAutoCapInputProps}
+                    placeholder={getStoredSecretPlaceholder({
+                      hasStoredSecret:
+                        initialValues?.hasProxyPassword,
+                      emptyPlaceholder: t(
+                        "connection.modal.network.proxy.noAuth",
+                      ),
+                      retainedLabel: t(
+                        "connection.modal.network.proxy.retained",
+                      ),
+                    })}
+                  />
+                </Form.Item>
+              </div>
+              {renderStoredSecretControls({
+                fieldName: "proxyPassword",
+                clearKey: "proxyPassword",
+                hasStoredSecret: initialValues?.hasProxyPassword,
+                clearLabel: t(
+                  "connection.modal.network.proxy.clearPassword",
+                ),
+                description: t(
+                  "connection.modal.network.proxy.savedDescription",
+                ),
+              })}
+            </div>
+          )}
+        </div>
+      );
+    }
+    return (
+      <div style={{ ...modalInnerSectionStyle, padding: 14 }}>
+        <div
+          style={{
+            marginBottom: 8,
+            color: darkMode ? "#f5f7ff" : "#162033",
+            fontSize: 14,
+            fontWeight: 700,
+          }}
+        >
+          {t("connection.modal.network.httpTunnel.title")}
+        </div>
+        <div style={{ ...modalMutedTextStyle, marginBottom: 14 }}>
+          {t(
+            "connection.modal.network.httpTunnel.panelDescription",
+          )}
+        </div>
+        {!effectiveUseHttpTunnel ? (
+          <div
+            style={{
+              ...modalMutedTextStyle,
+              padding: "10px 12px",
+              borderRadius: 12,
+              background: darkMode
+                ? "rgba(255,255,255,0.03)"
+                : "rgba(16,24,40,0.04)",
+            }}
+          >
+            {t("connection.modal.network.httpTunnel.disabledHint")}
+          </div>
+        ) : (
+          <div style={tunnelSectionStyle}>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "minmax(0, 1fr) 120px",
+                gap: 16,
+              }}
+            >
+              <Form.Item
+                name="httpTunnelHost"
+                label={t(
+                  "connection.modal.network.httpTunnel.host",
+                )}
+                rules={[
+                  {
+                    required: useHttpTunnel,
+                    message: t(
+                      "connection.modal.network.httpTunnel.hostRequired",
+                    ),
+                  },
+                ]}
+                style={{ flex: 1 }}
+              >
+                <Input
+                  {...noAutoCapInputProps}
+                  placeholder={t("connection.modal.example.or", {
+                    first: "tunnel.company.com",
+                    second: "127.0.0.1",
+                  })}
+                />
+              </Form.Item>
+              <Form.Item
+                name="httpTunnelPort"
+                label={t("connection.modal.field.port.label")}
+                rules={[
+                  {
+                    required: useHttpTunnel,
+                    message: t(
+                      "connection.modal.network.httpTunnel.portRequired",
+                    ),
+                  },
+                ]}
+                style={{ width: 120 }}
+              >
+                <InputNumber
+                  style={{ width: "100%" }}
+                  min={1}
+                  max={65535}
+                />
+              </Form.Item>
+            </div>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                gap: 16,
+              }}
+            >
+              <Form.Item
+                name="httpTunnelUser"
+                label={t(
+                  "connection.modal.network.httpTunnel.user",
+                )}
+                style={{ flex: 1 }}
+              >
+                <Input
+                  {...noAutoCapInputProps}
+                  placeholder={t(
+                    "connection.modal.network.proxy.noAuth",
+                  )}
+                />
+              </Form.Item>
+              <Form.Item
+                name="httpTunnelPassword"
+                label={t(
+                  "connection.modal.network.httpTunnel.password",
+                )}
+                style={{ flex: 1 }}
+              >
+                <Input.Password
+                  {...noAutoCapInputProps}
+                  placeholder={getStoredSecretPlaceholder({
+                    hasStoredSecret:
+                      initialValues?.hasHttpTunnelPassword,
+                    emptyPlaceholder: t(
+                      "connection.modal.network.proxy.noAuth",
+                    ),
+                    retainedLabel: t(
+                      "connection.modal.network.httpTunnel.retained",
+                    ),
+                  })}
+                />
+              </Form.Item>
+            </div>
+            {renderStoredSecretControls({
+              fieldName: "httpTunnelPassword",
+              clearKey: "httpTunnelPassword",
+              hasStoredSecret: initialValues?.hasHttpTunnelPassword,
+              clearLabel: t(
+                "connection.modal.network.httpTunnel.clearPassword",
+              ),
+              description: t(
+                "connection.modal.network.httpTunnel.savedDescription",
+              ),
+            })}
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              {t(
+                "connection.modal.network.httpTunnel.exclusiveHint",
+              )}
+            </Text>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div style={modalInnerSectionStyle}>
+      <div
+        style={{
+          marginBottom: 12,
+          color: darkMode ? "#f5f7ff" : "#162033",
+          fontSize: 14,
+          fontWeight: 700,
+        }}
+      >
+        {t("connection.modal.network.title")}
+      </div>
+      <div style={{ ...modalMutedTextStyle, marginBottom: 16 }}>
+        {t("connection.modal.network.description")}
+      </div>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+          gap: 12,
+          marginBottom: 16,
+        }}
+      >
+        {networkItems.map((item) => {
+          const active = item.key === resolvedNetworkConfig;
+          const activeColor = darkMode ? "#ffd666" : "#1677ff";
+          return (
+            <div
+              key={item.key}
+              role="button"
+              tabIndex={0}
+              onClick={() => setActiveNetworkConfig(item.key)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  setActiveNetworkConfig(item.key);
+                }
+              }}
+              style={{
+                ...getConnectionOptionCardStyle(item.enabled),
+                borderColor: active
+                  ? darkMode
+                    ? "rgba(255,214,102,0.46)"
+                    : "rgba(24,144,255,0.36)"
+                  : "transparent",
+                background: active
+                  ? darkMode
+                    ? "linear-gradient(180deg, rgba(255,214,102,0.14) 0%, rgba(255,214,102,0.08) 100%)"
+                    : "linear-gradient(180deg, rgba(24,144,255,0.12) 0%, rgba(24,144,255,0.06) 100%)"
+                  : getConnectionOptionCardStyle(item.enabled)
+                      .background,
+                boxShadow: active
+                  ? darkMode
+                    ? "0 0 0 1px rgba(255,214,102,0.18) inset, 0 12px 26px rgba(0,0,0,0.16)"
+                    : "0 0 0 1px rgba(24,144,255,0.14) inset, 0 12px 22px rgba(24,144,255,0.10)"
+                  : "none",
+                cursor: "pointer",
+                outline: "none",
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: 10,
+                }}
+              >
+                <div
+                  style={{
+                    width: 8,
+                    height: 8,
+                    marginTop: 8,
+                    borderRadius: 999,
+                    background: active ? activeColor : "transparent",
+                    border: active
+                      ? "none"
+                      : darkMode
+                        ? "1px solid rgba(255,255,255,0.12)"
+                        : "1px solid rgba(16,24,40,0.12)",
+                    flexShrink: 0,
+                  }}
+                />
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: 10,
+                    minWidth: 0,
+                    flex: 1,
+                  }}
+                >
+                  <Form.Item
+                    name={
+                      item.key === "ssl"
+                        ? "useSSL"
+                        : item.key === "ssh"
+                          ? "useSSH"
+                          : item.key === "proxy"
+                            ? "useProxy"
+                            : "useHttpTunnel"
+                    }
+                    valuePropName="checked"
+                    noStyle
+                  >
+                    <Checkbox />
+                  </Form.Item>
+                  <div style={{ minWidth: 0, flex: 1 }}>
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: 8,
+                      }}
+                    >
+                      <span
+                        style={{
+                          fontSize: 14,
+                          fontWeight: 700,
+                          color: darkMode ? "#f5f7ff" : "#162033",
+                        }}
+                      >
+                        {item.title}
+                      </span>
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 8,
+                        }}
+                      >
+                        {active && (
+                          <span
+                            style={{
+                              padding: "2px 8px",
+                              borderRadius: 999,
+                              fontSize: 11,
+                              fontWeight: 700,
+                              color: activeColor,
+                              background: darkMode
+                                ? "rgba(255,214,102,0.16)"
+                                : "rgba(24,144,255,0.12)",
+                            }}
+                          >
+                            {t(
+                              "connection.modal.network.currentEditing",
+                            )}
+                          </span>
+                        )}
+                        <span
+                          style={{
+                            fontSize: 11,
+                            fontWeight: 700,
+                            color: item.enabled
+                              ? activeColor
+                              : darkMode
+                                ? "rgba(255,255,255,0.38)"
+                                : "rgba(16,24,40,0.36)",
+                          }}
+                        >
+                          {item.enabled
+                            ? t("connection.modal.network.enabled")
+                            : t(
+                                "connection.modal.network.notEnabled",
+                              )}
+                        </span>
+                      </div>
+                    </div>
+                    <div
+                      style={{
+                        marginTop: 4,
+                        ...modalMutedTextStyle,
+                        color: active
+                          ? darkMode
+                            ? "rgba(255,255,255,0.72)"
+                            : "rgba(22,32,51,0.68)"
+                          : modalMutedTextStyle.color,
+                      }}
+                    >
+                      {item.description}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <div style={{ marginBottom: 16 }}>{renderNetworkPanel()}</div>
+      <div style={{ ...modalInnerSectionStyle, padding: 12 }}>
+        <div
+          style={{
+            marginBottom: 10,
+            color: darkMode ? "#f5f7ff" : "#162033",
+            fontSize: 13,
+            fontWeight: 700,
+          }}
+        >
+          {t("connection.modal.network.advanced.title")}
+        </div>
+        <Form.Item
+          name="timeout"
+          label={t("connection.modal.network.timeout.label")}
+          help={t("connection.modal.network.timeout.help")}
+          rules={[
+            {
+              type: "number",
+              min: 1,
+              max: 300,
+              message: t("connection.modal.network.timeout.range"),
+            },
+          ]}
+          style={{ marginBottom: 0 }}
+        >
+          <InputNumber
+            style={{ width: "100%" }}
+            min={1}
+            max={300}
+            placeholder={t("connection.modal.example", {
+              value: "30",
+            })}
+          />
+        </Form.Item>
+      </div>
+    </div>
+  );
+};
+
+export default ConnectionModalNetworkSecuritySection;
diff --git a/frontend/src/components/connectionModal/ConnectionModalStep2.tsx b/frontend/src/components/connectionModal/ConnectionModalStep2.tsx
new file mode 100644
index 0000000..aaa34db
--- /dev/null
+++ b/frontend/src/components/connectionModal/ConnectionModalStep2.tsx
@@ -0,0 +1,2938 @@
+import React, { type ReactNode } from "react";
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  Space,
+  Switch,
+  Table,
+  Tag,
+  Typography,
+} from "antd";
+import {
+  ApiOutlined,
+  BgColorsOutlined,
+  CloudOutlined,
+  ClusterOutlined,
+  CodeOutlined,
+  DatabaseOutlined,
+  FileTextOutlined,
+  GatewayOutlined,
+  LinkOutlined,
+  SafetyCertificateOutlined,
+  ThunderboltOutlined,
+} from "@ant-design/icons";
+
+import {
+  DB_ICON_TYPES,
+  PRESET_ICON_COLORS,
+  getDbDefaultColor,
+  getDbIcon,
+  getDbIconLabel,
+} from "../DatabaseIcons";
+import ConnectionModalMongoSections from "../ConnectionModalMongoSections";
+import ConnectionModalRedisSections from "../ConnectionModalRedisSections";
+import { t } from "../../i18n";
+import {
+  getConnectionConfigLayoutKindLabel,
+  getStoredSecretPlaceholder,
+} from "../../utils/connectionModalPresentation";
+import { getCustomConnectionDriverHelp } from "../../utils/driverImportGuidance";
+import { noAutoCapInputProps } from "../../utils/inputAutoCap";
+import {
+  JVM_EDITABLE_MODES,
+  normalizeEditableJVMModes,
+} from "../../utils/jvmConnectionConfig";
+import { resolveJVMModeMeta } from "../../utils/jvmRuntimePresentation";
+import {
+  getConnectionParamsPlaceholder,
+  getUriPlaceholder,
+} from "./connectionModalUri";
+import ConnectionModalNetworkSecuritySection from "./ConnectionModalNetworkSecuritySection";
+import type { MongoMemberInfo } from "../../types";
+
+const { Text } = Typography;
+
+const CLICKHOUSE_PROTOCOL_OPTIONS: Array<{
+  value: "auto" | "http" | "native";
+  label?: string;
+  labelKey?: string;
+}> = [
+  { value: "auto", labelKey: "connection.modal.field.clickHouseProtocol.auto" },
+  { value: "http", label: "HTTP" },
+  { value: "native", label: "Native" },
+];
+
+const OCEANBASE_PROTOCOL_OPTIONS: Array<{
+  value: "mysql" | "oracle";
+  label: string;
+}> = [
+  { value: "mysql", label: "MySQL" },
+  { value: "oracle", label: "Oracle" },
+];
+
+const PRIMARY_USERNAME_OPTIONAL_TYPES = new Set([
+  "mongodb",
+  "elasticsearch",
+  "chroma",
+  "qdrant",
+  "rocketmq",
+  "mqtt",
+  "kafka",
+  "rabbitmq",
+]);
+
+type ConnectionModalStep2Props = Record<string, any>;
+
+const ConnectionModalStep2: React.FC<ConnectionModalStep2Props> = (props) => {
+  const {
+    activeConfigSection,
+    activeNetworkConfig,
+    buildRedisDatabaseList,
+    clearConnectionTestResultForChoice,
+    connectionConfigLayout,
+    createCustomDsnRule,
+    createUriAwareRequiredRule,
+    currentDriverSnapshot,
+    currentDriverUnavailableReason,
+    currentDriverUpdateReason,
+    customIconColor,
+    customIconType,
+    darkMode,
+    dbList,
+    dbType,
+    discoveringMembers,
+    form,
+    getConnectionOptionCardStyle,
+    handleCopyURI,
+    handleDiscoverMongoMembers,
+    handleGenerateURI,
+    handleJvmModeCardSelect,
+    handleJvmModeToggle,
+    handleParseURI,
+    handleSelectCertificateFile,
+    handleSelectDatabaseFile,
+    handleSelectSSHKeyFile,
+    initialValues,
+    isCustom,
+    isFileDb,
+    isJVM,
+    isKafka,
+    isMQTT,
+    isMySQLLike,
+    isOceanBaseOracle,
+    isRedis,
+    isRocketMQ,
+    isSSLType,
+    jvmDiagnosticEnabled,
+    jvmDiagnosticTransport,
+    jvmEnvironment,
+    jvmPreferredMode,
+    jvmSectionCardStyle,
+    kafkaTopology,
+    modalInnerSectionStyle,
+    modalMutedTextStyle,
+    mongoAuthMechanism,
+    mongoMembers,
+    mongoReadPreference,
+    mongoSrv,
+    mongoTopology,
+    mqttTopology,
+    mysqlTopology,
+    normalizeRedisDatabaseSelection,
+    normalizedJvmAllowedModes,
+    oceanBaseProtocol,
+    onOpenDriverManager,
+    primaryPasswordVisible,
+    proxyType,
+    redisDbList,
+    redisTopology,
+    renderChoiceCards,
+    renderConfigSectionCard,
+    renderJvmSectionHeader,
+    renderStoredSecretControls,
+    resolvedUriFeedbackMessage,
+    rocketmqTopology,
+    selectingCertificateField,
+    selectingDbFile,
+    selectingSSHKey,
+    setActiveConfigSection,
+    setActiveNetworkConfig,
+    setChoiceFieldValue,
+    setCustomIconColor,
+    setCustomIconType,
+    setDbType,
+    setMongoMembers,
+    setPrimaryPasswordVisible,
+    setRedisDbList,
+    setTestErrorLogOpen,
+    setTestResult,
+    setUriFeedback,
+    setUseHttpTunnel,
+    setUseProxy,
+    setUseSSH,
+    setUseSSL,
+    sslHintText,
+    sslMode,
+    supportsConnectionParams,
+    supportsSSLCAPath,
+    supportsSSLClientCertificate,
+    testResult,
+    tunnelSectionStyle,
+    unsupportedJvmModeMessage,
+    uriFeedback,
+    useHttpTunnel,
+    useProxy,
+    useSSH,
+    useSSL,
+  } = props;
+
+const renderStep2 = () => {
+  const baseInfoSection = (
+    <div style={modalInnerSectionStyle}>
+      <div
+        style={{
+          marginBottom: 12,
+          color: darkMode ? "#f5f7ff" : "#162033",
+          fontSize: 14,
+          fontWeight: 700,
+        }}
+      >
+        {t("connection.modal.config.basic.title")}
+      </div>
+      <div style={{ ...modalMutedTextStyle, marginBottom: 16 }}>
+        {t("connection.modal.config.basic.description")}
+      </div>
+
+      <div style={{ display: "grid", gap: 16 }}>
+        {renderConfigSectionCard({
+          sectionKey: "identity",
+          icon: <ApiOutlined />,
+          badge: (
+            <Tag>
+              {getConnectionConfigLayoutKindLabel(connectionConfigLayout.kind)}
+            </Tag>
+          ),
+          children: (
+            <Form.Item
+              name="name"
+              label={t("connection.modal.field.name.label")}
+              style={{ marginBottom: 0 }}
+            >
+              <Input
+                {...noAutoCapInputProps}
+                placeholder={
+                  isJVM
+                    ? t("connection.modal.field.name.placeholder.jvm")
+                    : t("connection.modal.field.name.placeholder.default")
+                }
+              />
+            </Form.Item>
+          ),
+        })}
+
+        {!isCustom &&
+          !isJVM &&
+          renderConfigSectionCard({
+            sectionKey: "uri",
+            icon: <LinkOutlined />,
+            children: (
+              <>
+                <Form.Item
+                  name="uri"
+                  label={t("connection.modal.uri.label")}
+                  help={t("connection.modal.uri.help")}
+                >
+                  <Input.TextArea
+                    {...noAutoCapInputProps}
+                    rows={3}
+                    placeholder={getUriPlaceholder(dbType)}
+                  />
+                </Form.Item>
+                {supportsConnectionParams && (
+                  <Form.Item
+                    name="connectionParams"
+                    label={t("connection.modal.connectionParams.label")}
+                    help={t("connection.modal.connectionParams.help")}
+                  >
+                    <Input.TextArea
+                      {...noAutoCapInputProps}
+                      rows={2}
+                      placeholder={getConnectionParamsPlaceholder(dbType, oceanBaseProtocol)}
+                    />
+                  </Form.Item>
+                )}
+                <Space
+                  size={8}
+                  style={{ marginBottom: uriFeedback ? 12 : 16 }}
+                  wrap
+                >
+                  <Button onClick={handleGenerateURI}>
+                    {t("connection.modal.uri.action.generate")}
+                  </Button>
+                  <Button onClick={handleParseURI}>
+                    {t("connection.modal.uri.action.parse")}
+                  </Button>
+                  <Button onClick={handleCopyURI}>
+                    {t("connection.modal.uri.action.copy")}
+                  </Button>
+                </Space>
+                {uriFeedback && (
+                  <Alert
+                    showIcon
+                    closable
+                    type={uriFeedback.type}
+                    message={resolvedUriFeedbackMessage}
+                    onClose={() => setUriFeedback(null)}
+                    style={{ marginBottom: 16 }}
+                  />
+                )}
+                {renderStoredSecretControls({
+                  fieldName: "uri",
+                  clearKey: "opaqueURI",
+                  hasStoredSecret: initialValues?.hasOpaqueURI,
+                  clearLabel: t("connection.modal.uri.stored.clear"),
+                  description: t("connection.modal.uri.stored.description"),
+                })}
+              </>
+            ),
+          })}
+
+        {isCustom ? (
+          <>
+            {renderConfigSectionCard({
+              sectionKey: "customDriver",
+              icon: <CodeOutlined />,
+              children: (
+                <Form.Item
+                  name="driver"
+                  label={t("connection.modal.field.driver.label")}
+                  rules={[
+                    {
+                      required: true,
+                      message: t("connection.modal.field.driver.required"),
+                    },
+                  ]}
+                  help={getCustomConnectionDriverHelp()}
+                  style={{ marginBottom: 0 }}
+                >
+                  <Input
+                    {...noAutoCapInputProps}
+                    placeholder={t("connection.modal.field.driver.placeholder")}
+                  />
+                </Form.Item>
+              ),
+            })}
+            {renderConfigSectionCard({
+              sectionKey: "customDsn",
+              icon: <FileTextOutlined />,
+              children: (
+                <>
+                  <Form.Item
+                    name="dsn"
+                    label={t("connection.modal.field.dsn.label")}
+                    rules={[createCustomDsnRule()]}
+                  >
+                    <Input.TextArea
+                      {...noAutoCapInputProps}
+                      rows={4}
+                      placeholder={t("connection.modal.field.dsn.placeholder")}
+                    />
+                  </Form.Item>
+                  {renderStoredSecretControls({
+                    fieldName: "dsn",
+                    clearKey: "opaqueDSN",
+                    hasStoredSecret: initialValues?.hasOpaqueDSN,
+                    clearLabel: t("connection.modal.field.dsn.clearSaved"),
+                    description: t(
+                      "connection.modal.field.dsn.savedDescription",
+                    ),
+                  })}
+                </>
+              ),
+            })}
+          </>
+        ) : isJVM ? (
+        <>
+          {unsupportedJvmModeMessage && (
+            <Alert
+              type="warning"
+              showIcon
+              style={{ marginBottom: 16 }}
+              message={t("connection.modal.jvm.unsupportedMode.alert")}
+              description={unsupportedJvmModeMessage}
+            />
+          )}
+          <div style={{ display: "grid", gap: 16 }}>
+            <div style={jvmSectionCardStyle()}>
+              {renderJvmSectionHeader(
+                <GatewayOutlined />,
+                t("connection.modal.jvm.target.title"),
+                t("connection.modal.jvm.target.description"),
+              )}
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "minmax(0, 1fr) 120px",
+                  gap: 16,
+                  alignItems: "start",
+                }}
+              >
+                <Form.Item
+                  name="host"
+                  label={t("connection.modal.jvm.host.label")}
+                  rules={[
+                    {
+                      required: true,
+                      message: t("connection.modal.jvm.host.required"),
+                    },
+                  ]}
+                  style={{ marginBottom: 0 }}
+                >
+                  <Input
+                    {...noAutoCapInputProps}
+                    placeholder={t("connection.modal.example", {
+                      value: "localhost",
+                    })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  name="port"
+                  label={t("connection.modal.jvm.port.label")}
+                  rules={[
+                    {
+                      required: true,
+                      message: t("connection.modal.jvm.port.required"),
+                    },
+                  ]}
+                  style={{ marginBottom: 0 }}
+                >
+                  <InputNumber style={{ width: "100%" }} min={1} max={65535} />
+                </Form.Item>
+              </div>
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+                  gap: 16,
+                  marginTop: 16,
+                }}
+              >
+                <div style={{ display: "grid", gap: 8 }}>
+                  <Text strong>
+                    {t("connection.modal.jvm.environment.title")}
+                  </Text>
+                  {renderChoiceCards({
+                    fieldName: "jvmEnvironment",
+                    value: String(jvmEnvironment),
+                    minWidth: 120,
+                    options: [
+                      {
+                        value: "dev",
+                        label: t(
+                          "connection.modal.jvm.environment.dev.label",
+                        ),
+                        description: t(
+                          "connection.modal.jvm.environment.dev.description",
+                        ),
+                      },
+                      {
+                        value: "uat",
+                        label: t(
+                          "connection.modal.jvm.environment.staging.label",
+                        ),
+                        description: t(
+                          "connection.modal.jvm.environment.staging.description",
+                        ),
+                      },
+                      {
+                        value: "prod",
+                        label: t(
+                          "connection.modal.jvm.environment.prod.label",
+                        ),
+                        description: t(
+                          "connection.modal.jvm.environment.prod.description",
+                        ),
+                      },
+                    ],
+                  })}
+                </div>
+                <Form.Item
+                  name="timeout"
+                  label={t("connection.modal.network.timeout.label")}
+                  rules={[
+                    {
+                      type: "number",
+                      min: 1,
+                      max: 300,
+                      message: t("connection.modal.network.timeout.range"),
+                    },
+                  ]}
+                  style={{ marginBottom: 0 }}
+                >
+                  <InputNumber
+                    style={{ width: "100%" }}
+                    min={1}
+                    max={300}
+                    placeholder={t("connection.modal.example", {
+                      value: "30",
+                    })}
+                  />
+                </Form.Item>
+                <Form.Item
+                  name="jvmReadOnly"
+                  label={t("connection.modal.jvm.securityPolicy.label")}
+                  valuePropName="checked"
+                  style={{ marginBottom: 0 }}
+                >
+                  <Checkbox>{t("connection.modal.jvm.readonlyPreferred")}</Checkbox>
+                </Form.Item>
+              </div>
+            </div>
+
+            <div style={jvmSectionCardStyle()}>
+              {renderJvmSectionHeader(
+                <ClusterOutlined />,
+                t("connection.modal.jvm.accessMode.title"),
+                t("connection.modal.jvm.accessMode.description"),
+              )}
+              <Form.Item
+                name="jvmAllowedModes"
+                hidden
+                rules={[
+                  {
+                    required: true,
+                    message: t("connection.modal.jvm.accessMode.required"),
+                  },
+                ]}
+              >
+                <Select mode="multiple" />
+              </Form.Item>
+              <Form.Item
+                name="jvmPreferredMode"
+                hidden
+                rules={[
+                  {
+                    required: true,
+                    message: t("connection.modal.jvm.preferredMode.required"),
+                  },
+                ]}
+              >
+                <Input {...noAutoCapInputProps} />
+              </Form.Item>
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+                  gap: 14,
+                }}
+              >
+                {JVM_EDITABLE_MODES.map((mode) => {
+                  const meta = resolveJVMModeMeta(mode);
+                  const enabled = normalizedJvmAllowedModes.includes(mode);
+                  const preferred = jvmPreferredMode === mode;
+                  return (
+                    <div
+                      key={mode}
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => handleJvmModeCardSelect(mode)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          handleJvmModeCardSelect(mode);
+                        }
+                      }}
+                      aria-pressed={enabled}
+                      style={{
+                        textAlign: "left",
+                        padding: 14,
+                        borderRadius: 16,
+                        border: enabled
+                          ? darkMode
+                            ? "1px solid rgba(255,214,102,0.36)"
+                            : "1px solid rgba(22,119,255,0.34)"
+                          : darkMode
+                            ? "1px solid rgba(255,255,255,0.08)"
+                            : "1px solid rgba(16,24,40,0.08)",
+                        background: enabled
+                          ? darkMode
+                            ? "rgba(255,214,102,0.08)"
+                            : "rgba(22,119,255,0.06)"
+                          : darkMode
+                            ? "rgba(255,255,255,0.03)"
+                            : "rgba(16,24,40,0.03)",
+                        boxShadow: preferred
+                          ? darkMode
+                            ? "0 0 0 2px rgba(255,214,102,0.12)"
+                            : "0 0 0 2px rgba(22,119,255,0.10)"
+                          : "none",
+                        color: darkMode ? "#f5f7ff" : "#162033",
+                        cursor: "pointer",
+                        transition: "all 120ms ease",
+                      }}
+                    >
+                      <Space size={8} wrap>
+                        <Tag color={enabled ? "blue" : "default"}>
+                          {meta.label}
+                        </Tag>
+                        {preferred ? (
+                          <Tag color="green">
+                            {t("connection.modal.jvm.tag.preferred")}
+                          </Tag>
+                        ) : null}
+                        {!enabled ? (
+                          <Tag>{t("connection.modal.jvm.tag.notEnabled")}</Tag>
+                        ) : null}
+                      </Space>
+                      <div style={{ ...modalMutedTextStyle, marginTop: 8 }}>
+                        {mode === "jmx"
+                          ? t("connection.modal.jvm.mode.jmx.description")
+                          : mode === "endpoint"
+                            ? t(
+                                "connection.modal.jvm.mode.endpoint.description",
+                              )
+                            : t("connection.modal.jvm.mode.agent.description")}
+                      </div>
+                      <Button
+                        size="small"
+                        type={enabled ? "default" : "primary"}
+                        disabled={enabled && normalizedJvmAllowedModes.length <= 1}
+                        onClick={(event) => handleJvmModeToggle(mode, event)}
+                        style={{ marginTop: 12, borderRadius: 999 }}
+                      >
+                        {enabled
+                          ? t("connection.modal.jvm.mode.disable")
+                          : t("connection.modal.jvm.mode.enablePreferred")}
+                      </Button>
+                    </div>
+                  );
+                })}
+              </div>
+              <div style={{ ...modalMutedTextStyle, marginTop: 12 }}>
+                {t("connection.modal.jvm.preferredSummary", {
+                  mode: resolveJVMModeMeta(String(jvmPreferredMode || "jmx"))
+                    .label,
+                })}
+              </div>
+            </div>
+
+            <div style={jvmSectionCardStyle()}>
+              {renderJvmSectionHeader(
+                <ApiOutlined />,
+                "JMX",
+                t("connection.modal.jvm.jmx.description"),
+                <Tag color={normalizedJvmAllowedModes.includes("jmx") ? "green" : "default"}>
+                  {normalizedJvmAllowedModes.includes("jmx")
+                    ? t("connection.modal.jvm.tag.enabled")
+                    : t("connection.modal.jvm.tag.notEnabled")}
+                </Tag>,
+              )}
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "minmax(0, 1fr) 120px",
+                  gap: 16,
+                }}
+              >
+                <Form.Item
+                  name="jvmJmxHost"
+                  label={t("connection.modal.jvm.jmx.host.label")}
+                  style={{ marginBottom: 0 }}
+                >
+                  <Input
+                    {...noAutoCapInputProps}
+                    disabled={!normalizedJvmAllowedModes.includes("jmx")}
+                    placeholder={t("connection.modal.jvm.jmx.host.placeholder")}
+                  />
+                </Form.Item>
+                <Form.Item
+                  name="jvmJmxPort"
+                  label={t("connection.modal.jvm.jmx.port.label")}
+                  style={{ marginBottom: 0 }}
+                >
+                  <InputNumber
+                    style={{ width: "100%" }}
+                    min={1}
+                    max={65535}
+                    disabled={!normalizedJvmAllowedModes.includes("jmx")}
+                    placeholder={t("connection.modal.jvm.jmx.port.placeholder")}
+                  />
+                </Form.Item>
+              </div>
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                  gap: 16,
+                  marginTop: 16,
+                }}
+              >
+                <Form.Item
+                  name="jvmJmxUsername"
+                  label={t("connection.modal.jvm.jmx.username.label")}
+                  style={{ marginBottom: 0 }}
+                >
+                  <Input
+                    {...noAutoCapInputProps}
+                    disabled={!normalizedJvmAllowedModes.includes("jmx")}
+                    placeholder={t(
+                      "connection.modal.jvm.jmx.username.placeholder",
+                    )}
+                  />
+                </Form.Item>
+                <Form.Item
+                  name="jvmJmxPassword"
+                  label={t("connection.modal.jvm.jmx.password.label")}
+                  style={{ marginBottom: 0 }}
+                >
+                  <Input.Password
+                    {...noAutoCapInputProps}
+                    disabled={!normalizedJvmAllowedModes.includes("jmx")}
+                    placeholder={t(
+                      "connection.modal.jvm.jmx.password.placeholder",
+                    )}
+                  />
+                </Form.Item>
+              </div>
+            </div>
+
+            <div style={jvmSectionCardStyle()}>
+              {renderJvmSectionHeader(
+                <CodeOutlined />,
+                "Endpoint",
+                t("connection.modal.jvm.endpoint.description"),
+                <Tag
+                  color={
+                    normalizedJvmAllowedModes.includes("endpoint")
+                      ? "green"
+                      : "default"
+                  }
+                >
+                  {normalizedJvmAllowedModes.includes("endpoint")
+                    ? t("connection.modal.jvm.tag.enabled")
+                    : t("connection.modal.jvm.tag.notEnabled")}
+                </Tag>,
+              )}
+              <Form.Item
+                name="jvmEndpointBaseUrl"
+                label={t("connection.modal.jvm.endpoint.address.label")}
+                rules={[
+                  {
+                    required: jvmPreferredMode === "endpoint",
+                    message: t(
+                      "connection.modal.jvm.endpoint.address.required",
+                    ),
+                  },
+                ]}
+                help={t("connection.modal.jvm.endpoint.address.help")}
+              >
+                <Input
+                  {...noAutoCapInputProps}
+                  disabled={!normalizedJvmAllowedModes.includes("endpoint")}
+                  placeholder={t(
+                    "connection.modal.jvm.endpoint.address.placeholder",
+                  )}
+                />
+              </Form.Item>
+              <Form.Item
+                name="jvmEndpointApiKey"
+                label={t("connection.modal.jvm.endpoint.apiKey.label")}
+                style={{ marginBottom: 0 }}
+              >
+                <Input.Password
+                  {...noAutoCapInputProps}
+                  disabled={!normalizedJvmAllowedModes.includes("endpoint")}
+                  placeholder={t(
+                    "connection.modal.jvm.endpoint.apiKey.placeholder",
+                  )}
+                />
+              </Form.Item>
+            </div>
+
+            <div style={jvmSectionCardStyle()}>
+              {renderJvmSectionHeader(
+                <ThunderboltOutlined />,
+                "Agent",
+                t("connection.modal.jvm.agent.description"),
+                <Tag color={normalizedJvmAllowedModes.includes("agent") ? "green" : "default"}>
+                  {normalizedJvmAllowedModes.includes("agent")
+                    ? t("connection.modal.jvm.tag.enabled")
+                    : t("connection.modal.jvm.tag.notEnabled")}
+                </Tag>,
+              )}
+              <Form.Item
+                name="jvmAgentBaseUrl"
+                label={t("connection.modal.jvm.agent.address.label")}
+                rules={[
+                  {
+                    required: jvmPreferredMode === "agent",
+                    message: t("connection.modal.jvm.agent.address.required"),
+                  },
+                ]}
+                help={t("connection.modal.jvm.agent.address.help")}
+              >
+                <Input
+                  {...noAutoCapInputProps}
+                  disabled={!normalizedJvmAllowedModes.includes("agent")}
+                  placeholder={t(
+                    "connection.modal.jvm.agent.address.placeholder",
+                  )}
+                />
+              </Form.Item>
+              <Form.Item
+                name="jvmAgentApiKey"
+                label={t("connection.modal.jvm.agent.apiKey.label")}
+                style={{ marginBottom: 0 }}
+              >
+                <Input.Password
+                  {...noAutoCapInputProps}
+                  disabled={!normalizedJvmAllowedModes.includes("agent")}
+                  placeholder={t(
+                    "connection.modal.jvm.agent.apiKey.placeholder",
+                  )}
+                />
+              </Form.Item>
+            </div>
+
+            <div style={jvmSectionCardStyle()}>
+              {renderJvmSectionHeader(
+                <SafetyCertificateOutlined />,
+                t("connection.modal.jvm.diagnostic.title"),
+                t("connection.modal.jvm.diagnostic.description"),
+                <Form.Item
+                  name="jvmDiagnosticEnabled"
+                  valuePropName="checked"
+                  style={{ marginBottom: 0 }}
+                >
+                  <Switch
+                    checkedChildren={t("connection.modal.jvm.switch.on")}
+                    unCheckedChildren={t("connection.modal.jvm.switch.off")}
+                  />
+                </Form.Item>,
+              )}
+              {jvmDiagnosticEnabled ? (
+                <>
+                  <div
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns: "220px minmax(0, 1fr)",
+                      gap: 16,
+                    }}
+                  >
+                    <div style={{ display: "grid", gap: 8 }}>
+                      <Text strong>
+                        {t("connection.modal.jvm.diagnostic.transport.label")}
+                      </Text>
+                      {renderChoiceCards({
+                        fieldName: "jvmDiagnosticTransport",
+                        value: String(jvmDiagnosticTransport),
+                        options: [
+                          {
+                            value: "agent-bridge",
+                            label: t(
+                              "connection.modal.jvm.diagnostic.transport.agent_bridge",
+                            ),
+                            description: t(
+                              "connection.modal.jvm.diagnostic.transport.agentBridge.description",
+                            ),
+                          },
+                          {
+                            value: "arthas-tunnel",
+                            label: t(
+                              "connection.modal.jvm.diagnostic.transport.arthas_tunnel",
+                            ),
+                            description: t(
+                              "connection.modal.jvm.diagnostic.transport.arthasTunnel.description",
+                            ),
+                          },
+                        ],
+                      })}
+                    </div>
+                    <Form.Item
+                      name="jvmDiagnosticBaseUrl"
+                      label={
+                        jvmDiagnosticTransport === "arthas-tunnel"
+                          ? t(
+                              "connection.modal.jvm.diagnostic.arthasTunnelAddress.label",
+                            )
+                          : t(
+                              "connection.modal.jvm.diagnostic.bridgeAddress.label",
+                            )
+                      }
+                      rules={[
+                        {
+                          required: true,
+                          message:
+                            jvmDiagnosticTransport === "arthas-tunnel"
+                              ? t(
+                                  "connection.modal.jvm.diagnostic.arthasTunnelAddress.required",
+                                )
+                              : t(
+                                  "connection.modal.jvm.diagnostic.bridgeAddress.required",
+                                ),
+                        },
+                      ]}
+                      help={
+                        jvmDiagnosticTransport === "arthas-tunnel"
+                          ? t(
+                              "connection.modal.jvm.diagnostic.arthasTunnelAddress.help",
+                            )
+                          : t(
+                              "connection.modal.jvm.diagnostic.bridgeAddress.help",
+                            )
+                      }
+                    >
+                      <Input
+                        {...noAutoCapInputProps}
+                        placeholder={
+                          jvmDiagnosticTransport === "arthas-tunnel"
+                            ? "http://127.0.0.1:7777"
+                            : "http://127.0.0.1:19091/gonavi/diag"
+                        }
+                      />
+                    </Form.Item>
+                  </div>
+                  <div
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns: "minmax(0, 1fr) 220px",
+                      gap: 16,
+                    }}
+                  >
+                    <Form.Item
+                      name="jvmDiagnosticTargetId"
+                      label={
+                        jvmDiagnosticTransport === "arthas-tunnel"
+                          ? t(
+                              "connection.modal.jvm.diagnostic.targetId.agentId.label",
+                            )
+                          : t(
+                              "connection.modal.jvm.diagnostic.targetId.label",
+                            )
+                      }
+                      rules={
+                        jvmDiagnosticTransport === "arthas-tunnel"
+                          ? [
+                              {
+                                required: true,
+                                message: t(
+                                  "connection.modal.jvm.diagnostic.targetId.required",
+                                ),
+                              },
+                            ]
+                          : undefined
+                      }
+                      help={
+                        jvmDiagnosticTransport === "arthas-tunnel"
+                          ? t(
+                              "connection.modal.jvm.diagnostic.targetId.arthasHelp",
+                            )
+                          : t(
+                              "connection.modal.jvm.diagnostic.targetId.bridgeHelp",
+                            )
+                      }
+                    >
+                      <Input
+                        {...noAutoCapInputProps}
+                        placeholder={
+                          jvmDiagnosticTransport === "arthas-tunnel"
+                            ? t("connection.modal.example", {
+                                value: "orders-app_A1B2C3D4E5",
+                              })
+                            : t("connection.modal.example", {
+                                value: "orders-prod-01",
+                              })
+                        }
+                      />
+                    </Form.Item>
+                    <Form.Item
+                      name="jvmDiagnosticTimeoutSeconds"
+                      label={t(
+                        "connection.modal.jvm.diagnostic.timeout.label",
+                      )}
+                      rules={[
+                        {
+                          type: "number",
+                          min: 1,
+                          max: 300,
+                          message: t(
+                            "connection.modal.jvm.diagnostic.timeout.range",
+                          ),
+                        },
+                      ]}
+                    >
+                      <InputNumber style={{ width: "100%" }} min={1} max={300} />
+                    </Form.Item>
+                  </div>
+                  <Form.Item
+                    name="jvmDiagnosticApiKey"
+                    label={t("connection.modal.jvm.diagnostic.apiKey.label")}
+                  >
+                    <Input.Password
+                      {...noAutoCapInputProps}
+                      placeholder={t(
+                        "connection.modal.jvm.diagnostic.apiKey.placeholder",
+                      )}
+                    />
+                  </Form.Item>
+                  <div
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns:
+                        "repeat(auto-fit, minmax(180px, 1fr))",
+                      gap: 10,
+                    }}
+                  >
+                    {[
+                      {
+                        name: "jvmDiagnosticAllowObserveCommands",
+                        label: t(
+                          "connection.modal.jvm.diagnostic.command.observe.label",
+                        ),
+                        description: t(
+                          "connection.modal.jvm.diagnostic.command.observe.description",
+                        ),
+                      },
+                      {
+                        name: "jvmDiagnosticAllowTraceCommands",
+                        label: t(
+                          "connection.modal.jvm.diagnostic.command.trace.label",
+                        ),
+                        description: t(
+                          "connection.modal.jvm.diagnostic.command.trace.description",
+                        ),
+                      },
+                      {
+                        name: "jvmDiagnosticAllowMutatingCommands",
+                        label: t(
+                          "connection.modal.jvm.diagnostic.command.mutating.label",
+                        ),
+                        description: t(
+                          "connection.modal.jvm.diagnostic.command.mutating.description",
+                        ),
+                      },
+                    ].map((item) => (
+                      <div
+                        key={item.name}
+                        style={{
+                          padding: 12,
+                          borderRadius: 14,
+                          background: darkMode
+                            ? "rgba(255,255,255,0.04)"
+                            : "rgba(16,24,40,0.04)",
+                        }}
+                      >
+                        <Form.Item
+                          name={item.name}
+                          valuePropName="checked"
+                          style={{ marginBottom: 6 }}
+                        >
+                          <Checkbox>{item.label}</Checkbox>
+                        </Form.Item>
+                        <div style={modalMutedTextStyle}>
+                          {item.description}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              ) : (
+                <div
+                  style={{
+                    ...modalMutedTextStyle,
+                    padding: "10px 12px",
+                    borderRadius: 12,
+                    background: darkMode
+                      ? "rgba(255,255,255,0.04)"
+                      : "rgba(16,24,40,0.04)",
+                  }}
+                >
+                  {t("connection.modal.jvm.diagnostic.disabledHint")}
+                </div>
+              )}
+            </div>
+          </div>
+        </>
+        ) : (
+          <>
+            {renderConfigSectionCard({
+              sectionKey: isFileDb ? "fileTarget" : "target",
+              icon: isFileDb ? <FileTextOutlined /> : <GatewayOutlined />,
+              children: (
+                <div
+                  style={{
+                    display: "grid",
+                    gridTemplateColumns: "minmax(0, 1fr) 120px",
+                    gap: 16,
+                    alignItems: "start",
+                  }}
+                >
+                  <Form.Item
+                    name="host"
+                    label={
+                      isFileDb
+                        ? t("connection.modal.field.filePath.label")
+                        : t("connection.modal.field.host.label")
+                    }
+                    rules={[
+                      createUriAwareRequiredRule(
+                        t("connection.modal.field.addressPath.required"),
+                      ),
+                    ]}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Input
+                      {...noAutoCapInputProps}
+                      placeholder={
+                        isFileDb
+                          ? dbType === "duckdb"
+                            ? "/path/to/db.duckdb"
+                            : "/path/to/db.sqlite"
+                          : "localhost"
+                      }
+                    />
+                  </Form.Item>
+                  {isFileDb ? (
+                    <Form.Item label=" " style={{ marginBottom: 0 }}>
+                      <Button
+                        style={{ width: "100%" }}
+                        onClick={handleSelectDatabaseFile}
+                        loading={selectingDbFile}
+                      >
+                        {t("connection.modal.action.browse")}
+                      </Button>
+                    </Form.Item>
+                  ) : (
+                    <Form.Item
+                      name="port"
+                      label={t("connection.modal.field.port.label")}
+                      rules={[
+                        createUriAwareRequiredRule(
+                          t("connection.modal.field.port.required"),
+                          (value: unknown) => Number(value) > 0,
+                        ),
+                      ]}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <InputNumber style={{ width: "100%" }} />
+                    </Form.Item>
+                  )}
+                </div>
+              ),
+            })}
+
+            {dbType === "clickhouse" &&
+              renderConfigSectionCard({
+                sectionKey: "connectionMode",
+                icon: <ClusterOutlined />,
+                children: (
+                  <Form.Item
+                    name="clickHouseProtocol"
+                    label={t("connection.modal.field.protocol.label")}
+                    help={t("connection.modal.field.clickHouseProtocol.help")}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Select
+                      options={CLICKHOUSE_PROTOCOL_OPTIONS.map((option) => ({
+                        ...option,
+                        label: option.labelKey
+                          ? t(option.labelKey)
+                          : option.label,
+                      }))}
+                      onChange={() => clearConnectionTestResultForChoice()}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {dbType === "oceanbase" &&
+              renderConfigSectionCard({
+                sectionKey: "oceanBaseProtocol",
+                icon: <ClusterOutlined />,
+                children: (
+                  <Form.Item
+                    name="oceanBaseProtocol"
+                    label={t("connection.modal.field.oceanBaseProtocol.label")}
+                    help={
+                      <span>
+                        {t(
+                          "connection.modal.field.oceanBaseProtocol.help.primary",
+                        )}
+                        <br />
+                        {t(
+                          "connection.modal.field.oceanBaseProtocol.help.connectionAttributes",
+                          {
+                            attributes:
+                              "connectionAttributes=key1:value1,key2:value2",
+                          },
+                        )}
+                      </span>
+                    }
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Select
+                      options={OCEANBASE_PROTOCOL_OPTIONS}
+                      onChange={() => {
+                        form.setFieldsValue({ mysqlTopology: "single" });
+                        clearConnectionTestResultForChoice();
+                      }}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {(dbType === "postgres" ||
+              dbType === "kingbase" ||
+              dbType === "highgo" ||
+              dbType === "vastbase" ||
+              dbType === "opengauss" ||
+              dbType === "gaussdb") &&
+              renderConfigSectionCard({
+                sectionKey: "service",
+                icon: <DatabaseOutlined />,
+                children: (
+                  <Form.Item
+                    name="database"
+                    label={t("connection.modal.field.defaultDatabase.label")}
+                    help={t("connection.modal.field.defaultDatabase.help")}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Input
+                      {...noAutoCapInputProps}
+                      placeholder={t(
+                        "connection.modal.field.defaultDatabase.placeholder",
+                      )}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {dbType === "kafka" &&
+              renderConfigSectionCard({
+                sectionKey: "service",
+                icon: <DatabaseOutlined />,
+                children: (
+                  <Form.Item
+                    name="database"
+                    label={t("connection.modal.messageQueue.kafka.defaultTopic.label")}
+                    help={t("connection.modal.messageQueue.kafka.defaultTopic.help")}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Input
+                      {...noAutoCapInputProps}
+                      placeholder={t(
+                        "connection.modal.messageQueue.kafka.defaultTopic.placeholder",
+                      )}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {dbType === "rocketmq" &&
+              renderConfigSectionCard({
+                sectionKey: "service",
+                icon: <DatabaseOutlined />,
+                children: (
+                  <Form.Item
+                    name="database"
+                    label={t("connection.modal.messageQueue.rocketmq.defaultTopic.label")}
+                    help={t("connection.modal.messageQueue.rocketmq.defaultTopic.help")}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Input
+                      {...noAutoCapInputProps}
+                      placeholder={t(
+                        "connection.modal.messageQueue.rocketmq.defaultTopic.placeholder",
+                      )}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {dbType === "mqtt" &&
+              renderConfigSectionCard({
+                sectionKey: "service",
+                icon: <DatabaseOutlined />,
+                children: (
+                  <Form.Item
+                    name="database"
+                    label={t("connection.modal.messageQueue.mqtt.defaultTopicFilter.label")}
+                    help={t("connection.modal.messageQueue.mqtt.defaultTopicFilter.help")}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Input
+                      {...noAutoCapInputProps}
+                      placeholder={t(
+                        "connection.modal.messageQueue.mqtt.defaultTopicFilter.placeholder",
+                      )}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {dbType === "rabbitmq" &&
+              renderConfigSectionCard({
+                sectionKey: "service",
+                icon: <DatabaseOutlined />,
+                children: (
+                  <Form.Item
+                    name="database"
+                    label={t("connection.modal.messageQueue.rabbitmq.defaultVirtualHost.label")}
+                    help={t("connection.modal.messageQueue.rabbitmq.defaultVirtualHost.help")}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Input
+                      {...noAutoCapInputProps}
+                      placeholder={t(
+                        "connection.modal.messageQueue.rabbitmq.defaultVirtualHost.placeholder",
+                      )}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {(dbType === "oracle" || isOceanBaseOracle) &&
+              renderConfigSectionCard({
+                sectionKey: "service",
+                icon: <DatabaseOutlined />,
+                children: (
+                  <Form.Item
+                    name="database"
+                    label={
+                      isOceanBaseOracle
+                        ? t(
+                            "connection.modal.field.oceanBaseServiceName.label",
+                          )
+                        : t("connection.modal.field.serviceName.label")
+                    }
+                    rules={
+                      isOceanBaseOracle
+                        ? []
+                        : [
+                            createUriAwareRequiredRule(
+                              t("connection.modal.field.serviceName.required"),
+                            ),
+                          ]
+                    }
+                    help={
+                      isOceanBaseOracle
+                        ? t(
+                            "connection.modal.field.oceanBaseServiceName.help",
+                          )
+                        : t("connection.modal.field.serviceName.help")
+                    }
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Input
+                      {...noAutoCapInputProps}
+                      placeholder={t(
+                        "connection.modal.field.serviceName.placeholder",
+                      )}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {isMySQLLike &&
+              renderConfigSectionCard({
+                sectionKey: "connectionMode",
+                icon: <ClusterOutlined />,
+                children: renderChoiceCards({
+                  fieldName: "mysqlTopology",
+                  value: String(mysqlTopology),
+                  options: [
+                    {
+                      value: "single",
+                      label: t("connection.modal.topology.single.label"),
+                      description: t(
+                        "connection.modal.topology.mysql.single.description",
+                      ),
+                    },
+                    {
+                      value: "replica",
+                      label: t(
+                        "connection.modal.topology.mysql.replica.label",
+                      ),
+                      description: t(
+                        "connection.modal.topology.mysql.replica.description",
+                      ),
+                    },
+                  ],
+                }),
+              })}
+
+            {isKafka &&
+              renderConfigSectionCard({
+                sectionKey: "connectionMode",
+                icon: <ClusterOutlined />,
+                children: renderChoiceCards({
+                  fieldName: "kafkaTopology",
+                  value: String(kafkaTopology),
+                  options: [
+                    {
+                      value: "single",
+                      label: t("connection.modal.messageQueue.kafka.topology.single.label"),
+                      description: t(
+                        "connection.modal.messageQueue.kafka.topology.single.description",
+                      ),
+                    },
+                    {
+                      value: "cluster",
+                      label: t("connection.modal.messageQueue.topology.cluster.label"),
+                      description: t(
+                        "connection.modal.messageQueue.kafka.topology.cluster.description",
+                      ),
+                    },
+                  ],
+                }),
+              })}
+
+            {isRocketMQ &&
+              renderConfigSectionCard({
+                sectionKey: "connectionMode",
+                icon: <ClusterOutlined />,
+                children: renderChoiceCards({
+                  fieldName: "rocketmqTopology",
+                  value: String(rocketmqTopology),
+                  options: [
+                    {
+                      value: "single",
+                      label: t("connection.modal.messageQueue.rocketmq.topology.single.label"),
+                      description: t(
+                        "connection.modal.messageQueue.rocketmq.topology.single.description",
+                      ),
+                    },
+                    {
+                      value: "cluster",
+                      label: t("connection.modal.messageQueue.topology.cluster.label"),
+                      description: t(
+                        "connection.modal.messageQueue.rocketmq.topology.cluster.description",
+                      ),
+                    },
+                  ],
+                }),
+              })}
+
+            {isMQTT &&
+              renderConfigSectionCard({
+                sectionKey: "connectionMode",
+                icon: <ClusterOutlined />,
+                children: renderChoiceCards({
+                  fieldName: "mqttTopology",
+                  value: String(mqttTopology),
+                  options: [
+                    {
+                      value: "single",
+                      label: t("connection.modal.messageQueue.mqtt.topology.single.label"),
+                      description: t(
+                        "connection.modal.messageQueue.mqtt.topology.single.description",
+                      ),
+                    },
+                    {
+                      value: "cluster",
+                      label: t("connection.modal.messageQueue.topology.cluster.label"),
+                      description: t(
+                        "connection.modal.messageQueue.mqtt.topology.cluster.description",
+                      ),
+                    },
+                  ],
+                }),
+              })}
+
+            {isKafka &&
+              kafkaTopology === "cluster" &&
+              renderConfigSectionCard({
+                sectionKey: "replica",
+                icon: <ClusterOutlined />,
+                children: (
+                  <Form.Item
+                    name="kafkaHosts"
+                    label={t("connection.modal.messageQueue.kafka.extraBrokers.label")}
+                    help={t("connection.modal.messageQueue.kafka.extraBrokers.help")}
+                  >
+                    <Select
+                      mode="tags"
+                      placeholder={t(
+                        "connection.modal.messageQueue.kafka.extraBrokers.placeholder",
+                      )}
+                      tokenSeparators={[",", ";", " "]}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {isRocketMQ &&
+              rocketmqTopology === "cluster" &&
+              renderConfigSectionCard({
+                sectionKey: "replica",
+                icon: <ClusterOutlined />,
+                children: (
+                  <Form.Item
+                    name="rocketmqHosts"
+                    label={t("connection.modal.messageQueue.rocketmq.extraNameServers.label")}
+                    help={t("connection.modal.messageQueue.rocketmq.extraNameServers.help")}
+                  >
+                    <Select
+                      mode="tags"
+                      placeholder={t(
+                        "connection.modal.messageQueue.rocketmq.extraNameServers.placeholder",
+                      )}
+                      tokenSeparators={[",", ";", " "]}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {isMQTT &&
+              mqttTopology === "cluster" &&
+              renderConfigSectionCard({
+                sectionKey: "replica",
+                icon: <ClusterOutlined />,
+                children: (
+                  <Form.Item
+                    name="mqttHosts"
+                    label={t("connection.modal.messageQueue.mqtt.extraBrokers.label")}
+                    help={t("connection.modal.messageQueue.mqtt.extraBrokers.help")}
+                  >
+                    <Select
+                      mode="tags"
+                      placeholder={t(
+                        "connection.modal.messageQueue.mqtt.extraBrokers.placeholder",
+                      )}
+                      tokenSeparators={[",", ";", " "]}
+                    />
+                  </Form.Item>
+                ),
+              })}
+
+            {isMySQLLike &&
+              mysqlTopology === "replica" &&
+              renderConfigSectionCard({
+                sectionKey: "replica",
+                icon: <ClusterOutlined />,
+                children: (
+                  <>
+                    <Form.Item
+                      name="mysqlReplicaHosts"
+                      label={t(
+                        "connection.modal.field.mysqlReplicaHosts.label",
+                      )}
+                      help={t(
+                        "connection.modal.field.mysqlReplicaHosts.help",
+                      )}
+                    >
+                      <Select
+                        mode="tags"
+                        placeholder={t(
+                          "connection.modal.field.mysqlReplicaHosts.placeholder",
+                        )}
+                        tokenSeparators={[",", ";", " "]}
+                      />
+                    </Form.Item>
+                    <div
+                      style={{
+                        display: "grid",
+                        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                        gap: 16,
+                      }}
+                    >
+                      <Form.Item
+                        name="mysqlReplicaUser"
+                        label={t(
+                          "connection.modal.field.mysqlReplicaUser.label",
+                        )}
+                        style={{ marginBottom: 0 }}
+                      >
+                        <Input
+                          {...noAutoCapInputProps}
+                          placeholder={t(
+                            "connection.modal.field.mysqlReplicaUser.placeholder",
+                          )}
+                        />
+                      </Form.Item>
+                      <Form.Item
+                        name="mysqlReplicaPassword"
+                        label={t(
+                          "connection.modal.field.mysqlReplicaPassword.label",
+                        )}
+                        style={{ marginBottom: 0 }}
+                      >
+                        <Input.Password
+                          {...noAutoCapInputProps}
+                          placeholder={getStoredSecretPlaceholder({
+                            hasStoredSecret:
+                              initialValues?.hasMySQLReplicaPassword,
+                            emptyPlaceholder: t(
+                              "connection.modal.field.mysqlReplicaPassword.placeholder",
+                            ),
+                            retainedLabel: t(
+                              "connection.modal.field.mysqlReplicaPassword.retained",
+                            ),
+                          })}
+                        />
+                      </Form.Item>
+                    </div>
+                    {renderStoredSecretControls({
+                      fieldName: "mysqlReplicaPassword",
+                      clearKey: "mysqlReplicaPassword",
+                      hasStoredSecret: initialValues?.hasMySQLReplicaPassword,
+                      clearLabel: t(
+                        "connection.modal.field.mysqlReplicaPassword.clear",
+                      ),
+                      description: t(
+                        "connection.modal.field.mysqlReplicaPassword.savedDescription",
+                      ),
+                    })}
+                  </>
+                ),
+              })}
+
+            {dbType === "mongodb" &&
+              renderConfigSectionCard({
+                sectionKey: "connectionMode",
+                icon: <ClusterOutlined />,
+                children: renderChoiceCards({
+                  fieldName: "mongoTopology",
+                  value: String(mongoTopology),
+                  options: [
+                    {
+                      value: "single",
+                      label: t("connection.modal.topology.single.label"),
+                      description: t(
+                        "connection.modal.topology.mongodb.single.description",
+                      ),
+                    },
+                    {
+                      value: "replica",
+                      label: t(
+                        "connection.modal.topology.mongodb.replica.label",
+                      ),
+                      description: t(
+                        "connection.modal.topology.mongodb.replica.description",
+                      ),
+                    },
+                  ],
+                }),
+              })}
+
+            {dbType === "mongodb" &&
+              renderConfigSectionCard({
+                sectionKey: "mongoDiscovery",
+                icon: <ApiOutlined />,
+                children: (
+                  <>
+                    <Form.Item name="mongoSrv" hidden valuePropName="checked">
+                      <Checkbox />
+                    </Form.Item>
+                    <div
+                      style={{
+                        display: "grid",
+                        gridTemplateColumns:
+                          "repeat(auto-fit, minmax(180px, 1fr))",
+                        gap: 10,
+                      }}
+                    >
+                      {[
+                        {
+                          value: false,
+                          label: t(
+                            "connection.modal.mongo.discovery.standard.label",
+                          ),
+                          description: t(
+                            "connection.modal.mongo.discovery.standard.description",
+                          ),
+                        },
+                        {
+                          value: true,
+                          label: t(
+                            "connection.modal.mongo.discovery.srv.label",
+                          ),
+                          description: t(
+                            "connection.modal.mongo.discovery.srv.description",
+                          ),
+                        },
+                      ].map((option) => {
+                        const active = mongoSrv === option.value;
+                        return (
+                          <button
+                            key={String(option.value)}
+                            type="button"
+                            aria-pressed={active}
+                            onClick={() =>
+                              setChoiceFieldValue("mongoSrv", option.value)
+                            }
+                            style={{
+                              textAlign: "left",
+                              padding: "12px 14px",
+                              borderRadius: 14,
+                              border: active
+                                ? darkMode
+                                  ? "1px solid rgba(255,214,102,0.42)"
+                                  : "1px solid rgba(22,119,255,0.36)"
+                                : darkMode
+                                  ? "1px solid rgba(255,255,255,0.08)"
+                                  : "1px solid rgba(16,24,40,0.08)",
+                              background: active
+                                ? darkMode
+                                  ? "rgba(255,214,102,0.10)"
+                                  : "rgba(22,119,255,0.07)"
+                                : darkMode
+                                  ? "rgba(255,255,255,0.03)"
+                                  : "rgba(16,24,40,0.03)",
+                              color: darkMode ? "#f5f7ff" : "#162033",
+                              cursor: "pointer",
+                            }}
+                          >
+                            <Space size={8} wrap>
+                              <Text strong>{option.label}</Text>
+                              {active ? (
+                                <Tag color="blue">
+                                  {t("connection.modal.network.currentEditing")}
+                                </Tag>
+                              ) : null}
+                            </Space>
+                            <div
+                              style={{
+                                ...modalMutedTextStyle,
+                                marginTop: 6,
+                              }}
+                            >
+                              {option.description}
+                            </div>
+                          </button>
+                        );
+                      })}
+                    </div>
+                    {mongoSrv && useSSH && (
+                      <Alert
+                        type="warning"
+                        showIcon
+                        style={{ marginTop: 12 }}
+                        message={t(
+                          "connection.modal.mongo.discovery.srvSshWarning",
+                        )}
+                      />
+                    )}
+                  </>
+                ),
+              })}
+
+            {dbType === "mongodb" &&
+              mongoTopology === "replica" &&
+              renderConfigSectionCard({
+                sectionKey: "replica",
+                icon: <ClusterOutlined />,
+                children: (
+                  <>
+                    <Form.Item
+                      name="mongoHosts"
+                      label={
+                        mongoSrv
+                          ? t("connection.modal.field.mongoSrvHosts.label")
+                          : t("connection.modal.field.mongoHosts.label")
+                      }
+                      help={
+                        mongoSrv
+                          ? t("connection.modal.field.mongoSrvHosts.help")
+                          : t("connection.modal.field.mongoHosts.help")
+                      }
+                    >
+                      <Select
+                        mode="tags"
+                        placeholder={
+                          mongoSrv
+                            ? t(
+                                "connection.modal.field.mongoSrvHosts.placeholder",
+                              )
+                            : t(
+                                "connection.modal.field.mongoHosts.placeholder",
+                              )
+                        }
+                        tokenSeparators={[",", ";", " "]}
+                      />
+                    </Form.Item>
+                    <div
+                      style={{
+                        display: "grid",
+                        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                        gap: 16,
+                      }}
+                    >
+                      <Form.Item
+                        name="mongoReplicaSet"
+                        label={t(
+                          "connection.modal.field.mongoReplicaSet.label",
+                        )}
+                        style={{ marginBottom: 0 }}
+                      >
+                        <Input
+                          {...noAutoCapInputProps}
+                          placeholder={t(
+                            "connection.modal.field.mongoReplicaSet.placeholder",
+                          )}
+                        />
+                      </Form.Item>
+                      <Form.Item
+                        name="mongoReplicaUser"
+                        label={t(
+                          "connection.modal.field.mongoReplicaUser.label",
+                        )}
+                        style={{ marginBottom: 0 }}
+                      >
+                        <Input
+                          {...noAutoCapInputProps}
+                          placeholder={t(
+                            "connection.modal.field.mongoReplicaUser.placeholder",
+                          )}
+                        />
+                      </Form.Item>
+                    </div>
+                    <Form.Item
+                      name="mongoReplicaPassword"
+                      label={t(
+                        "connection.modal.field.mongoReplicaPassword.label",
+                      )}
+                      style={{ marginTop: 16, marginBottom: 0 }}
+                    >
+                      <Input.Password
+                        {...noAutoCapInputProps}
+                        placeholder={getStoredSecretPlaceholder({
+                          hasStoredSecret:
+                            initialValues?.hasMongoReplicaPassword,
+                          emptyPlaceholder: t(
+                            "connection.modal.field.mongoReplicaPassword.placeholder",
+                          ),
+                          retainedLabel: t(
+                            "connection.modal.field.mongoReplicaPassword.retained",
+                          ),
+                        })}
+                      />
+                    </Form.Item>
+                    {renderStoredSecretControls({
+                      fieldName: "mongoReplicaPassword",
+                      clearKey: "mongoReplicaPassword",
+                      hasStoredSecret: initialValues?.hasMongoReplicaPassword,
+                      clearLabel: t(
+                        "connection.modal.field.mongoReplicaPassword.clear",
+                      ),
+                      description: t(
+                        "connection.modal.field.mongoReplicaPassword.savedDescription",
+                      ),
+                    })}
+                    <Space
+                      size={8}
+                      style={{ marginTop: 12, marginBottom: 12 }}
+                    >
+                      <Button
+                        onClick={handleDiscoverMongoMembers}
+                        loading={discoveringMembers}
+                      >
+                        {t("connection.modal.mongo.discoverMembers")}
+                      </Button>
+                    </Space>
+                    {mongoMembers.length > 0 && (
+                      <Table
+                        size="small"
+                        rowKey={(record) => record.host}
+                        pagination={false}
+                        dataSource={mongoMembers}
+                        style={{ marginBottom: 12 }}
+                        columns={[
+                          {
+                            title: t("connection.modal.field.host.label"),
+                            dataIndex: "host",
+                            width: "48%",
+                          },
+                          {
+                            title: t("connection.modal.mongo.member.role"),
+                            dataIndex: "role",
+                            width: "32%",
+                            render: (
+                              value: string,
+                              record: MongoMemberInfo,
+                            ) => (
+                              <Tag
+                                color={record.isSelf ? "blue" : "default"}
+                              >
+                                {value ||
+                                  record.state ||
+                                  t("common.unknown")}
+                              </Tag>
+                            ),
+                          },
+                          {
+                            title: t("connection.modal.mongo.member.health"),
+                            dataIndex: "healthy",
+                            width: "20%",
+                            render: (value: boolean) => (
+                              <Tag color={value ? "success" : "error"}>
+                                {value
+                                  ? t("connection.modal.mongo.member.healthy")
+                                  : t(
+                                      "connection.modal.mongo.member.unhealthy",
+                                    )}
+                              </Tag>
+                            ),
+                          },
+                        ]}
+                      />
+                    )}
+                  </>
+                ),
+              })}
+
+            {dbType === "mongodb" &&
+              renderConfigSectionCard({
+                sectionKey: "mongoPolicy",
+                icon: <ThunderboltOutlined />,
+                children: (
+                  <div
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                      gap: 16,
+                    }}
+                  >
+                    <Form.Item
+                      name="mongoAuthSource"
+                      label={t(
+                        "connection.modal.field.mongoAuthSource.label",
+                      )}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Input
+                        {...noAutoCapInputProps}
+                        placeholder={t(
+                          "connection.modal.field.mongoAuthSource.placeholder",
+                        )}
+                      />
+                    </Form.Item>
+                    <div style={{ display: "grid", gap: 8 }}>
+                      <Text strong>
+                        {t("connection.modal.mongo.readPreference.label")}
+                      </Text>
+                      {renderChoiceCards({
+                        fieldName: "mongoReadPreference",
+                        value: String(mongoReadPreference),
+                        minWidth: 130,
+                        options: [
+                          {
+                            value: "primary",
+                            label: "primary",
+                            description: t(
+                              "connection.modal.mongo.readPreference.primary.description",
+                            ),
+                          },
+                          {
+                            value: "primaryPreferred",
+                            label: "primaryPreferred",
+                            description: t(
+                              "connection.modal.mongo.readPreference.primaryPreferred.description",
+                            ),
+                          },
+                          {
+                            value: "secondary",
+                            label: "secondary",
+                            description: t(
+                              "connection.modal.mongo.readPreference.secondary.description",
+                            ),
+                          },
+                          {
+                            value: "secondaryPreferred",
+                            label: "secondaryPreferred",
+                            description: t(
+                              "connection.modal.mongo.readPreference.secondaryPreferred.description",
+                            ),
+                          },
+                          {
+                            value: "nearest",
+                            label: "nearest",
+                            description: t(
+                              "connection.modal.mongo.readPreference.nearest.description",
+                            ),
+                          },
+                        ],
+                      })}
+                    </div>
+                  </div>
+                ),
+              })}
+
+            {isRedis &&
+              renderConfigSectionCard({
+                sectionKey: "connectionMode",
+                icon: <ClusterOutlined />,
+                children: (
+                  <>
+                    {renderChoiceCards({
+                      fieldName: "redisTopology",
+                      value: String(redisTopology),
+                      options: [
+                        {
+                          value: "single",
+                          label: t("connection.modal.topology.single.label"),
+                          description: t(
+                            "connection.modal.topology.redis.single.description",
+                          ),
+                        },
+                        {
+                          value: "cluster",
+                          label: t(
+                            "connection.modal.topology.redis.cluster.label",
+                          ),
+                          description: t(
+                            "connection.modal.topology.redis.cluster.description",
+                          ),
+                        },
+                      ],
+                    })}
+                    {redisTopology === "cluster" && (
+                      <Form.Item
+                        name="redisHosts"
+                        label={t("connection.modal.field.redisHosts.label")}
+                        help={t("connection.modal.field.redisHosts.help")}
+                        style={{ marginTop: 16, marginBottom: 0 }}
+                      >
+                        <Select
+                          mode="tags"
+                          placeholder={t(
+                            "connection.modal.field.redisHosts.placeholder",
+                          )}
+                          tokenSeparators={[",", ";", " "]}
+                        />
+                      </Form.Item>
+                    )}
+                  </>
+                ),
+              })}
+
+            {isRedis &&
+              renderConfigSectionCard({
+                sectionKey: "credentials",
+                icon: <SafetyCertificateOutlined />,
+                children: (
+                  <>
+                    <Form.Item
+                      name="password"
+                      label={t("connection.modal.field.redisPassword.label")}
+                    >
+                      <Input.Password
+                        {...noAutoCapInputProps}
+                        visibilityToggle={{
+                          visible: primaryPasswordVisible,
+                          onVisibleChange: setPrimaryPasswordVisible,
+                        }}
+                        placeholder={getStoredSecretPlaceholder({
+                          hasStoredSecret: initialValues?.hasPrimaryPassword,
+                          emptyPlaceholder: t(
+                            "connection.modal.field.redisPassword.placeholder",
+                          ),
+                          retainedLabel: t(
+                            "connection.modal.field.redisPassword.retained",
+                          ),
+                        })}
+                      />
+                    </Form.Item>
+                  </>
+                ),
+              })}
+
+            {isRedis &&
+              renderConfigSectionCard({
+                sectionKey: "databaseScope",
+                icon: <DatabaseOutlined />,
+                children: (
+                  <Form.Item
+                    name="includeRedisDatabases"
+                    label={t(
+                      "connection.modal.field.displayDatabases.label",
+                    )}
+                    help={t("connection.modal.field.displayDatabases.help")}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Select
+                      mode="multiple"
+                      placeholder={t(
+                        "connection.modal.field.displayRedisDatabases.placeholder",
+                      )}
+                      allowClear
+                    >
+                      {redisDbList.map((db: number) => (
+                        <Select.Option key={db} value={db}>
+                          db{db}
+                        </Select.Option>
+                      ))}
+                    </Select>
+                  </Form.Item>
+                ),
+              })}
+
+            {!isFileDb &&
+              !isRedis &&
+              renderConfigSectionCard({
+                sectionKey: "credentials",
+                icon: <SafetyCertificateOutlined />,
+                children: (
+                  <>
+                    <div
+                      style={{
+                        display: "grid",
+                        gridTemplateColumns:
+                          dbType === "mongodb"
+                            ? "minmax(0, 1fr) minmax(0, 1fr) 180px"
+                            : "repeat(2, minmax(0, 1fr))",
+                        gap: 16,
+                      }}
+                    >
+                      <Form.Item
+                        name="user"
+                        label={t("connection.modal.field.username.label")}
+                        rules={
+                          PRIMARY_USERNAME_OPTIONAL_TYPES.has(dbType)
+                            ? []
+                            : [
+                                createUriAwareRequiredRule(
+                                  t(
+                                    "connection.modal.field.username.required",
+                                  ),
+                                ),
+                              ]
+                        }
+                        style={{ marginBottom: 0 }}
+                      >
+                        <Input
+                          {...noAutoCapInputProps}
+                          placeholder={
+                            PRIMARY_USERNAME_OPTIONAL_TYPES.has(dbType)
+                              ? t("connection.modal.field.username.optional_placeholder")
+                              : undefined
+                          }
+                        />
+                      </Form.Item>
+                      <Form.Item
+                        name="password"
+                        label={t("connection.modal.field.password.label")}
+                        style={{ marginBottom: 0 }}
+                      >
+                        <Input.Password
+                          {...noAutoCapInputProps}
+                          visibilityToggle={{
+                            visible: primaryPasswordVisible,
+                            onVisibleChange: setPrimaryPasswordVisible,
+                          }}
+                          placeholder={getStoredSecretPlaceholder({
+                            hasStoredSecret:
+                              initialValues?.hasPrimaryPassword,
+                            emptyPlaceholder: t(
+                              "connection.modal.field.password.placeholder",
+                            ),
+                            retainedLabel: t(
+                              "connection.modal.field.password.retained",
+                            ),
+                          })}
+                        />
+                      </Form.Item>
+                      {dbType === "mongodb" && (
+                        <div style={{ display: "grid", gap: 8 }}>
+                          <Text strong>
+                            {t(
+                              "connection.modal.mongo.authMechanism.label",
+                            )}
+                          </Text>
+                          {renderChoiceCards({
+                            fieldName: "mongoAuthMechanism",
+                            value: String(mongoAuthMechanism),
+                            minWidth: 150,
+                            options: [
+                              {
+                                value: "",
+                                label: t(
+                                  "connection.modal.mongo.authMechanism.auto.label",
+                                ),
+                                description: t(
+                                  "connection.modal.mongo.authMechanism.auto.description",
+                                ),
+                              },
+                              {
+                                value: "NONE",
+                                label: t(
+                                  "connection.modal.mongo.authMechanism.none.label",
+                                ),
+                                description: t(
+                                  "connection.modal.mongo.authMechanism.none.description",
+                                ),
+                              },
+                              {
+                                value: "SCRAM-SHA-1",
+                                label: "SCRAM-SHA-1",
+                                description: t(
+                                  "connection.modal.mongo.authMechanism.scramSha1.description",
+                                ),
+                              },
+                              {
+                                value: "SCRAM-SHA-256",
+                                label: "SCRAM-SHA-256",
+                                description: t(
+                                  "connection.modal.mongo.authMechanism.scramSha256.description",
+                                ),
+                              },
+                              {
+                                value: "MONGODB-AWS",
+                                label: "MONGODB-AWS",
+                                description: t(
+                                  "connection.modal.mongo.authMechanism.aws.description",
+                                ),
+                              },
+                            ],
+                          })}
+                        </div>
+                      )}
+                    </div>
+                    {dbType === "mongodb" && (
+                      <Form.Item
+                        name="savePassword"
+                        valuePropName="checked"
+                        style={{ marginTop: 12, marginBottom: 0 }}
+                      >
+                        <Checkbox>
+                          {t("connection.modal.field.savePassword")}
+                        </Checkbox>
+                      </Form.Item>
+                    )}
+                  </>
+                ),
+              })}
+
+            {!isFileDb &&
+              !isRedis &&
+              !isKafka &&
+              renderConfigSectionCard({
+                sectionKey: "databaseScope",
+                icon: <DatabaseOutlined />,
+                children: (
+                  <Form.Item
+                    name="includeDatabases"
+                    label={t(
+                      "connection.modal.field.displayDatabases.label",
+                    )}
+                    help={t("connection.modal.field.displayDatabases.help")}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Select
+                      mode="multiple"
+                      placeholder={t(
+                        "connection.modal.field.displayDatabases.placeholder",
+                      )}
+                      allowClear
+                    >
+                      {dbList.map((db: string) => (
+                        <Select.Option key={db} value={db}>
+                          {db}
+                        </Select.Option>
+                      ))}
+                    </Select>
+                  </Form.Item>
+                ),
+              })}
+          </>
+        )}
+      </div>
+    </div>
+  );
+
+  const networkSecuritySection = (
+    <ConnectionModalNetworkSecuritySection
+      activeNetworkConfig={activeNetworkConfig}
+      darkMode={darkMode}
+      dbType={dbType}
+      form={form}
+      getConnectionOptionCardStyle={getConnectionOptionCardStyle}
+      handleSelectCertificateFile={handleSelectCertificateFile}
+      handleSelectSSHKeyFile={handleSelectSSHKeyFile}
+      initialValues={initialValues}
+      isFileDb={isFileDb}
+      isJVM={isJVM}
+      isSSLType={isSSLType}
+      modalInnerSectionStyle={modalInnerSectionStyle}
+      modalMutedTextStyle={modalMutedTextStyle}
+      renderChoiceCards={renderChoiceCards}
+      renderStoredSecretControls={renderStoredSecretControls}
+      proxyType={proxyType}
+      selectingCertificateField={selectingCertificateField}
+      selectingSSHKey={selectingSSHKey}
+      setActiveNetworkConfig={setActiveNetworkConfig}
+      sslHintText={sslHintText}
+      sslMode={sslMode}
+      supportsSSLCAPath={supportsSSLCAPath}
+      supportsSSLClientCertificate={supportsSSLClientCertificate}
+      tunnelSectionStyle={tunnelSectionStyle}
+      useHttpTunnel={useHttpTunnel}
+      useProxy={useProxy}
+      useSSH={useSSH}
+      useSSL={useSSL}
+    />
+  );
+
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      initialValues={{
+        type: "mysql",
+        host: "localhost",
+        port: 3306,
+        database: "",
+        user: "root",
+        useSSL: false,
+        sslMode: "preferred",
+        sslCAPath: "",
+        sslCertPath: "",
+        sslKeyPath: "",
+        useSSH: false,
+        sshPort: 22,
+        useProxy: false,
+        proxyType: "socks5",
+        proxyPort: 1080,
+        useHttpTunnel: false,
+        httpTunnelPort: 8080,
+        timeout: 30,
+        uri: "",
+        connectionParams: "",
+        oceanBaseProtocol: "mysql",
+        mysqlTopology: "single",
+        rocketmqTopology: "single",
+        mqttTopology: "single",
+        kafkaTopology: "single",
+        redisTopology: "single",
+        mongoTopology: "single",
+        mongoSrv: false,
+        mongoReadPreference: "primary",
+        mongoAuthMechanism: "",
+        savePassword: true,
+        mysqlReplicaHosts: [],
+        rocketmqHosts: [],
+        mqttHosts: [],
+        kafkaHosts: [],
+        redisHosts: [],
+        redisSentinelMaster: "",
+        redisSentinelUser: "",
+        redisSentinelPassword: "",
+        mongoHosts: [],
+        mysqlReplicaUser: "",
+        mysqlReplicaPassword: "",
+        mongoReplicaUser: "",
+        mongoReplicaPassword: "",
+        redisDB: 0,
+        jvmReadOnly: true,
+        jvmAllowedModes: ["jmx"],
+        jvmPreferredMode: "jmx",
+        jvmEnvironment: "dev",
+        jvmEndpointEnabled: false,
+        jvmEndpointBaseUrl: "",
+        jvmEndpointApiKey: "",
+        jvmAgentEnabled: false,
+        jvmAgentBaseUrl: "",
+        jvmAgentApiKey: "",
+        jvmDiagnosticEnabled: false,
+        jvmDiagnosticTransport: "agent-bridge",
+        jvmDiagnosticBaseUrl: "",
+        jvmDiagnosticTargetId: "",
+        jvmDiagnosticApiKey: "",
+        jvmDiagnosticAllowObserveCommands: true,
+        jvmDiagnosticAllowTraceCommands: false,
+        jvmDiagnosticAllowMutatingCommands: false,
+        jvmDiagnosticTimeoutSeconds: 15,
+        jvmEndpointTimeoutSeconds: 30,
+        jvmJmxHost: "",
+        jvmJmxPort: undefined,
+        jvmJmxUsername: "",
+        jvmJmxPassword: "",
+      }}
+      onValuesChange={(changed) => {
+        if (testResult) {
+          setTestResult(null);
+          setTestErrorLogOpen(false);
+        }
+        if (
+          changed.uri !== undefined ||
+          changed.connectionParams !== undefined ||
+          changed.type !== undefined ||
+          changed.oceanBaseProtocol !== undefined
+        ) {
+          setUriFeedback(null);
+        }
+        if (changed.useSSL !== undefined) {
+          setUseSSL(changed.useSSL);
+          if (changed.useSSL) setActiveNetworkConfig("ssl");
+        }
+        if (changed.useSSH !== undefined) {
+          setUseSSH(changed.useSSH);
+          if (changed.useSSH) setActiveNetworkConfig("ssh");
+        }
+        if (changed.useProxy !== undefined) {
+          const enabledProxy = !!changed.useProxy;
+          setUseProxy(enabledProxy);
+          if (enabledProxy) setActiveNetworkConfig("proxy");
+          if (enabledProxy && form.getFieldValue("useHttpTunnel")) {
+            form.setFieldValue("useHttpTunnel", false);
+            setUseHttpTunnel(false);
+          }
+        }
+        if (changed.proxyType !== undefined) {
+          const nextType = String(
+            changed.proxyType || "socks5",
+          ).toLowerCase();
+          if (nextType === "http") {
+            const currentPort = Number(form.getFieldValue("proxyPort") || 0);
+            if (!currentPort || currentPort === 1080) {
+              form.setFieldValue("proxyPort", 8080);
+            }
+          } else {
+            const currentPort = Number(form.getFieldValue("proxyPort") || 0);
+            if (!currentPort || currentPort === 8080) {
+              form.setFieldValue("proxyPort", 1080);
+            }
+          }
+        }
+        if (changed.useHttpTunnel !== undefined) {
+          const enabledHttpTunnel = !!changed.useHttpTunnel;
+          setUseHttpTunnel(enabledHttpTunnel);
+          if (enabledHttpTunnel) setActiveNetworkConfig("httpTunnel");
+          if (enabledHttpTunnel && form.getFieldValue("useProxy")) {
+            form.setFieldValue("useProxy", false);
+            setUseProxy(false);
+          }
+          if (enabledHttpTunnel) {
+            const currentPort = Number(
+              form.getFieldValue("httpTunnelPort") || 0,
+            );
+            if (!currentPort || currentPort <= 0) {
+              form.setFieldValue("httpTunnelPort", 8080);
+            }
+          }
+        }
+        if (changed.type !== undefined) setDbType(changed.type);
+        if (changed.jvmAllowedModes !== undefined) {
+          const resolvedModes = normalizeEditableJVMModes(
+            changed.jvmAllowedModes,
+          );
+          const currentPreferredMode = String(
+            form.getFieldValue("jvmPreferredMode") || "",
+          )
+            .trim()
+            .toLowerCase();
+          const resolvedPreferredMode =
+            resolvedModes.find((mode) => mode === currentPreferredMode) ||
+            resolvedModes[0];
+          form.setFieldValue("jvmAllowedModes", resolvedModes);
+          form.setFieldValue("jvmPreferredMode", resolvedPreferredMode);
+          form.setFieldValue(
+            "jvmEndpointEnabled",
+            resolvedModes.includes("endpoint"),
+          );
+          form.setFieldValue(
+            "jvmAgentEnabled",
+            resolvedModes.includes("agent"),
+          );
+        }
+        if (changed.redisTopology !== undefined) {
+          const nextRedisTopology = String(
+            changed.redisTopology || "single",
+          ).toLowerCase();
+          const currentRedisPort = Number(form.getFieldValue("port") || 0);
+          if (
+            nextRedisTopology === "sentinel" &&
+            (!currentRedisPort || currentRedisPort === 6379)
+          ) {
+            form.setFieldValue("port", 26379);
+          } else if (
+            nextRedisTopology !== "sentinel" &&
+            currentRedisPort === 26379
+          ) {
+            form.setFieldValue("port", 6379);
+          }
+          const supportedDbs = buildRedisDatabaseList(
+            form.getFieldValue("redisDB"),
+            form.getFieldValue("includeRedisDatabases"),
+          );
+          setRedisDbList(supportedDbs);
+          form.setFieldValue(
+            "includeRedisDatabases",
+            normalizeRedisDatabaseSelection(
+              form.getFieldValue("includeRedisDatabases"),
+              supportedDbs,
+            ),
+          );
+        }
+        if (
+          changed.type !== undefined ||
+          changed.host !== undefined ||
+          changed.port !== undefined ||
+          changed.mongoHosts !== undefined ||
+          changed.mongoTopology !== undefined ||
+          changed.mongoSrv !== undefined
+        ) {
+          setMongoMembers([]);
+        }
+      }}
+    >
+      <Form.Item name="type" hidden>
+        <Input {...noAutoCapInputProps} />
+      </Form.Item>
+      {currentDriverUnavailableReason && (
+        <Alert
+          showIcon
+          type="warning"
+          style={{ marginBottom: 12 }}
+          message={t("connection.modal.driver.unavailableTitle", {
+            name: currentDriverSnapshot?.name || dbType,
+          })}
+          description={
+            <Space size={8}>
+              <span>{currentDriverUnavailableReason}</span>
+              <Button
+                type="link"
+                size="small"
+                onClick={() => onOpenDriverManager?.()}
+              >
+                {t("connection.modal.driver.installAction")}
+              </Button>
+            </Space>
+          }
+        />
+      )}
+      {currentDriverUpdateReason && (
+        <Alert
+          showIcon
+          type="warning"
+          style={{ marginBottom: 12 }}
+          message={t("connection.modal.driver.updateFallback", {
+            name: currentDriverSnapshot?.name || dbType,
+          })}
+          description={
+            <Space size={8}>
+              <span>{currentDriverUpdateReason}</span>
+              <Button
+                type="link"
+                size="small"
+                onClick={() => onOpenDriverManager?.()}
+              >
+                {t("connection.modal.driver.reinstallAction")}
+              </Button>
+            </Space>
+          }
+        />
+      )}
+      {(() => {
+        const sectionItems: Array<{
+          key: "basic" | "network" | "appearance";
+          title: string;
+          description: string;
+          icon: React.ReactNode;
+        }> = [
+          {
+            key: "basic",
+            title: t("connection.modal.config.basic.title"),
+            description: isJVM
+              ? t("connection.modal.config.basic.jvmNavDescription")
+              : t("connection.modal.config.basic.navDescription"),
+            icon: <DatabaseOutlined />,
+          },
+          ...(!isCustom && !isFileDb && !isJVM
+            ? [
+                {
+                  key: "network" as const,
+                  title: t("connection.modal.network.title"),
+                  description: t(
+                    "connection.modal.network.navDescription",
+                  ),
+                  icon: <CloudOutlined />,
+                },
+              ]
+            : []),
+          {
+            key: "appearance",
+            title: t("connection.modal.appearance.title"),
+            description: t("connection.modal.appearance.description"),
+            icon: <BgColorsOutlined />,
+          },
+        ];
+        const resolvedSection = sectionItems.some(
+          (item) => item.key === activeConfigSection,
+        )
+          ? activeConfigSection
+          : sectionItems[0]?.key || "basic";
+
+        const effectiveIconType = customIconType || dbType;
+        const effectiveIconColor =
+          customIconColor || getDbDefaultColor(effectiveIconType);
+
+        const appearanceSection = (
+          <div style={{ display: "grid", gap: 18 }}>
+            <div style={{ ...modalInnerSectionStyle, padding: 16 }}>
+              <div
+                style={{
+                  marginBottom: 12,
+                  fontSize: 13,
+                  fontWeight: 700,
+                  color: darkMode ? "#f5f7ff" : "#162033",
+                }}
+              >
+                {t("connection.modal.appearance.icon")}
+              </div>
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+                {DB_ICON_TYPES.map((iconKey) => {
+                  const isActive = effectiveIconType === iconKey;
+                  return (
+                    <button
+                      key={iconKey}
+                      type="button"
+                      title={getDbIconLabel(iconKey)}
+                      onClick={() =>
+                        setCustomIconType(
+                          iconKey === dbType ? undefined : iconKey,
+                        )
+                      }
+                      style={{
+                        width: 44,
+                        height: 44,
+                        borderRadius: 10,
+                        display: "grid",
+                        placeItems: "center",
+                        border: `2px solid ${isActive ? effectiveIconColor : darkMode ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)"}`,
+                        background: isActive
+                          ? darkMode
+                            ? "rgba(255,255,255,0.08)"
+                            : "rgba(24,144,255,0.06)"
+                          : "transparent",
+                        cursor: "pointer",
+                        transition: "all 120ms ease",
+                      }}
+                    >
+                      {getDbIcon(
+                        iconKey,
+                        isActive ? effectiveIconColor : undefined,
+                        22,
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+              <div
+                style={{
+                  marginTop: 6,
+                  fontSize: 11,
+                  color: darkMode
+                    ? "rgba(255,255,255,0.45)"
+                    : "rgba(0,0,0,0.35)",
+                }}
+              >
+                {t("connection.modal.appearance.current", {
+                  name: getDbIconLabel(effectiveIconType),
+                })}
+              </div>
+            </div>
+            <div style={{ ...modalInnerSectionStyle, padding: 16 }}>
+              <div
+                style={{
+                  marginBottom: 12,
+                  fontSize: 13,
+                  fontWeight: 700,
+                  color: darkMode ? "#f5f7ff" : "#162033",
+                }}
+              >
+                {t("connection.modal.appearance.color")}
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: 8,
+                  alignItems: "center",
+                }}
+              >
+                {PRESET_ICON_COLORS.map((presetColor) => {
+                  const isActive = effectiveIconColor === presetColor;
+                  return (
+                    <button
+                      key={presetColor}
+                      type="button"
+                      onClick={() =>
+                        setCustomIconColor(
+                          presetColor === getDbDefaultColor(effectiveIconType)
+                            ? undefined
+                            : presetColor,
+                        )
+                      }
+                      style={{
+                        width: 28,
+                        height: 28,
+                        borderRadius: 8,
+                        background: presetColor,
+                        border: isActive
+                          ? `2.5px solid ${darkMode ? "#fff" : "#162033"}`
+                          : "2px solid transparent",
+                        cursor: "pointer",
+                        transition: "all 120ms ease",
+                        boxShadow: isActive
+                          ? `0 0 0 2px ${presetColor}40`
+                          : "none",
+                      }}
+                    />
+                  );
+                })}
+                <input
+                  type="color"
+                  value={effectiveIconColor}
+                  onChange={(e) =>
+                    setCustomIconColor(
+                      e.target.value === getDbDefaultColor(effectiveIconType)
+                        ? undefined
+                        : e.target.value,
+                    )
+                  }
+                  title={t("connection.modal.appearance.customColor")}
+                  style={{
+                    width: 28,
+                    height: 28,
+                    border: "none",
+                    padding: 0,
+                    cursor: "pointer",
+                    borderRadius: 6,
+                    background: "transparent",
+                  }}
+                />
+              </div>
+            </div>
+            <div
+              style={{
+                ...modalInnerSectionStyle,
+                padding: 16,
+                display: "flex",
+                alignItems: "center",
+                gap: 14,
+              }}
+            >
+              <div
+                style={{
+                  fontSize: 13,
+                  fontWeight: 700,
+                  color: darkMode ? "#f5f7ff" : "#162033",
+                }}
+              >
+                {t("connection.modal.appearance.preview")}
+              </div>
+              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                {getDbIcon(effectiveIconType, effectiveIconColor, 24)}
+                <span
+                  style={{
+                    fontSize: 14,
+                    color: darkMode ? "#e0e0e0" : "#333",
+                  }}
+                >
+                  {form.getFieldValue("name") ||
+                    t("connection.modal.appearance.previewName")}
+                </span>
+              </div>
+              {(customIconType || customIconColor) && (
+                <Button
+                  size="small"
+                  type="link"
+                  onClick={() => {
+                    setCustomIconType(undefined);
+                    setCustomIconColor(undefined);
+                  }}
+                >
+                  {t("connection.modal.appearance.reset")}
+                </Button>
+              )}
+            </div>
+          </div>
+        );
+
+        const currentSectionContent =
+          resolvedSection === "basic"
+            ? baseInfoSection
+            : resolvedSection === "appearance"
+              ? appearanceSection
+              : networkSecuritySection;
+
+        if (sectionItems.length <= 1) {
+          return currentSectionContent;
+        }
+
+        return (
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "220px minmax(0, 1fr)",
+              gap: 18,
+              alignItems: "start",
+            }}
+          >
+            <div
+              style={{
+                ...modalInnerSectionStyle,
+                padding: 12,
+                position: "sticky",
+                top: 0,
+              }}
+            >
+              <div
+                style={{
+                  marginBottom: 12,
+                  color: darkMode ? "#f5f7ff" : "#162033",
+                  fontSize: 13,
+                  fontWeight: 700,
+                  letterSpacing: 0.2,
+                }}
+              >
+                {t("connection.modal.config.sections")}
+              </div>
+              <div style={{ display: "grid", gap: 10 }}>
+                {sectionItems.map((item) => {
+                  const active = item.key === resolvedSection;
+                  return (
+                    <button
+                      key={item.key}
+                      type="button"
+                      onClick={() => setActiveConfigSection(item.key)}
+                      style={{
+                        textAlign: "left",
+                        padding: "12px 12px 12px 14px",
+                        borderRadius: 14,
+                        border: `1px solid ${
+                          active
+                            ? darkMode
+                              ? "rgba(255,214,102,0.3)"
+                              : "rgba(24,144,255,0.24)"
+                            : darkMode
+                              ? "rgba(255,255,255,0.045)"
+                              : "rgba(16,24,40,0.055)"
+                        }`,
+                        background: active
+                          ? darkMode
+                            ? "linear-gradient(180deg, rgba(255,214,102,0.12) 0%, rgba(255,214,102,0.06) 100%)"
+                            : "linear-gradient(180deg, rgba(24,144,255,0.10) 0%, rgba(24,144,255,0.05) 100%)"
+                          : darkMode
+                            ? "rgba(255,255,255,0.02)"
+                            : "rgba(255,255,255,0.7)",
+                        color: active
+                          ? darkMode
+                            ? "#f5f7ff"
+                            : "#162033"
+                          : darkMode
+                            ? "rgba(255,255,255,0.76)"
+                            : "#3f4b5e",
+                        cursor: "pointer",
+                        transition: "all 120ms ease",
+                        boxShadow: active
+                          ? darkMode
+                            ? "0 10px 24px rgba(0,0,0,0.18)"
+                            : "0 10px 22px rgba(24,144,255,0.08)"
+                          : "none",
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "flex-start",
+                          gap: 10,
+                        }}
+                      >
+                        <div
+                          style={{
+                            width: 30,
+                            height: 30,
+                            borderRadius: 10,
+                            display: "grid",
+                            placeItems: "center",
+                            flexShrink: 0,
+                            background: active
+                              ? darkMode
+                                ? "rgba(255,214,102,0.16)"
+                                : "rgba(24,144,255,0.14)"
+                              : darkMode
+                                ? "rgba(255,255,255,0.05)"
+                                : "rgba(16,24,40,0.05)",
+                            color: active
+                              ? darkMode
+                                ? "#ffd666"
+                                : "#1677ff"
+                              : darkMode
+                                ? "rgba(255,255,255,0.55)"
+                                : "#627089",
+                          }}
+                        >
+                          {item.icon}
+                        </div>
+                        <div style={{ minWidth: 0, flex: 1 }}>
+                          <div
+                            style={{
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "space-between",
+                              gap: 8,
+                            }}
+                          >
+                            <span style={{ fontSize: 14, fontWeight: 700 }}>
+                              {item.title}
+                            </span>
+                            <span
+                              style={{
+                                width: 8,
+                                height: 8,
+                                borderRadius: 999,
+                                background: active
+                                  ? darkMode
+                                    ? "#ffd666"
+                                    : "#1677ff"
+                                  : "transparent",
+                                border: active
+                                  ? "none"
+                                  : darkMode
+                                    ? "1px solid rgba(255,255,255,0.12)"
+                                    : "1px solid rgba(16,24,40,0.12)",
+                              }}
+                            />
+                          </div>
+                          <div
+                            style={{
+                              marginTop: 5,
+                              fontSize: 12,
+                              lineHeight: 1.55,
+                              color: active
+                                ? darkMode
+                                  ? "rgba(255,255,255,0.68)"
+                                  : "rgba(22,32,51,0.68)"
+                                : darkMode
+                                  ? "rgba(255,255,255,0.42)"
+                                  : "rgba(63,75,94,0.62)",
+                            }}
+                          >
+                            {item.description}
+                          </div>
+                        </div>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+            <div style={{ minWidth: 0 }}>{currentSectionContent}</div>
+          </div>
+        );
+      })()}
+    </Form>
+  );
+};
+
+  return renderStep2();
+};
+
+export default ConnectionModalStep2;
diff --git a/frontend/src/components/connectionModal/connectionModalConfig.ts b/frontend/src/components/connectionModal/connectionModalConfig.ts
new file mode 100644
index 0000000..d515adb
--- /dev/null
+++ b/frontend/src/components/connectionModal/connectionModalConfig.ts
@@ -0,0 +1,807 @@
+import type { ConnectionConfig, SavedConnection } from "../../types";
+import { resolveConnectionSecretDraft } from "../../utils/connectionSecretDraft";
+import {
+  getConnectionTypeDefaultPort as getDefaultPortByType,
+} from "../../utils/connectionTypeCatalog";
+import {
+  isFileDatabaseType,
+  isMySQLCompatibleType,
+  supportsConnectionParamsForType,
+  supportsSSLClientCertificateForType,
+  supportsSSLForType,
+} from "../../utils/connectionTypeCapabilities";
+import {
+  buildDefaultJVMConnectionValues,
+  buildJVMConnectionConfig,
+  hasUnsupportedJVMDiagnosticTransport,
+  hasUnsupportedJVMEditableModes,
+  normalizeEditableJVMModes,
+} from "../../utils/jvmConnectionConfig";
+import { resolveRedisConfigDraft } from "../../utils/redisConnectionUri";
+import {
+  normalizeAddressList,
+  normalizeClickHouseProtocolValue,
+  normalizeConnectionParamsText,
+  normalizeFileDbPath,
+  normalizeMongoSrvHostList,
+  normalizeOceanBaseConnectionParamsText,
+  normalizeOceanBaseProtocolValue,
+  parseClickHouseHTTPUriToValues,
+  parseHostPort,
+  parseUriToValues,
+  toAddress,
+} from "./connectionModalUri";
+
+type Translate = (key: string, params?: any) => string;
+
+export type ConnectionSecretKey =

+  | "primaryPassword"

+  | "sshPassword"

+  | "proxyPassword"

+  | "httpTunnelPassword"

+  | "mysqlReplicaPassword"

+  | "mongoReplicaPassword"

+  | "redisSentinelPassword"

+  | "opaqueURI"

+  | "opaqueDSN";

+

+export type ConnectionSecretClearState = Record<ConnectionSecretKey, boolean>;
+
+export const createEmptyConnectionSecretClearState =

+  (): ConnectionSecretClearState => ({

+    primaryPassword: false,

+    sshPassword: false,

+    proxyPassword: false,

+    httpTunnelPassword: false,

+    mysqlReplicaPassword: false,

+    mongoReplicaPassword: false,

+    redisSentinelPassword: false,

+    opaqueURI: false,

+    opaqueDSN: false,

+  });
+type BuildSavedConnectionInputParams = {
+  config: ConnectionConfig;
+  values: any;
+  initialValues?: SavedConnection | null;
+  clearSecrets: ConnectionSecretClearState;
+  customIconType?: string;
+  customIconColor?: string;
+};
+
+type GetBlockingSecretClearMessageParams = {
+  values: any;
+  clearSecrets: ConnectionSecretClearState;
+  initialValues?: SavedConnection | null;
+  translate: Translate;
+};
+
+type BuildConnectionConfigParams = {
+  values: any;
+  forPersist: boolean;
+  initialValues?: SavedConnection | null;
+  translate: Translate;
+};
+
+export const buildSavedConnectionInput = ({
+  config,
+  values,
+  initialValues,
+  clearSecrets,
+  customIconType,
+  customIconColor,
+}: BuildSavedConnectionInputParams) => {
+  const connectionId =
+    initialValues?.id || config.id || Date.now().toString();
+  const primaryDraft = resolveConnectionSecretDraft({
+    hasSecret: initialValues?.hasPrimaryPassword,
+    valueInput: config.password,
+    clearSecret:
+      clearSecrets.primaryPassword ||
+      (initialValues?.hasPrimaryPassword === true &&
+        String(config.password || "") === ""),
+    forceClear: values.type === "mongodb" && values.savePassword === false,
+  });
+  const sshDraft = resolveConnectionSecretDraft({
+    hasSecret: initialValues?.hasSSHPassword,
+    valueInput: config.ssh?.password,
+    clearSecret: clearSecrets.sshPassword,
+    forceClear: !config.useSSH,
+  });
+  const proxyDraft = resolveConnectionSecretDraft({
+    hasSecret: initialValues?.hasProxyPassword,
+    valueInput: config.proxy?.password,
+    clearSecret: clearSecrets.proxyPassword,
+    forceClear: !config.useProxy,
+  });
+  const httpTunnelDraft = resolveConnectionSecretDraft({
+    hasSecret: initialValues?.hasHttpTunnelPassword,
+    valueInput: config.httpTunnel?.password,
+    clearSecret: clearSecrets.httpTunnelPassword,
+    forceClear: !config.useHttpTunnel,
+  });
+  const mysqlReplicaEnabled =
+    isMySQLCompatibleType(config.type) && config.topology === "replica";
+  const mysqlReplicaDraft = resolveConnectionSecretDraft({
+    hasSecret: initialValues?.hasMySQLReplicaPassword,
+    valueInput: config.mysqlReplicaPassword,
+    clearSecret: clearSecrets.mysqlReplicaPassword,
+    forceClear: !mysqlReplicaEnabled,
+  });
+  const mongoReplicaEnabled =
+    config.type === "mongodb" &&
+    config.topology === "replica" &&
+    values.savePassword !== false;
+  const mongoReplicaDraft = resolveConnectionSecretDraft({
+    hasSecret: initialValues?.hasMongoReplicaPassword,
+    valueInput: config.mongoReplicaPassword,
+    clearSecret: clearSecrets.mongoReplicaPassword,
+    forceClear: !mongoReplicaEnabled,
+  });
+  const redisSentinelEnabled =
+    config.type === "redis" &&
+    config.topology === "sentinel" &&
+    values.savePassword !== false;
+  const redisSentinelDraft = resolveConnectionSecretDraft({
+    hasSecret: initialValues?.hasRedisSentinelPassword,
+    valueInput: config.redisSentinelPassword,
+    clearSecret: clearSecrets.redisSentinelPassword,
+    forceClear: !redisSentinelEnabled,
+  });
+  const opaqueUriDraft = resolveConnectionSecretDraft({
+    hasSecret: initialValues?.hasOpaqueURI,
+    valueInput: config.uri,
+    clearSecret: clearSecrets.opaqueURI,
+    forceClear: values.type === "custom",
+    trimInput: true,
+  });
+  const opaqueDsnDraft = resolveConnectionSecretDraft({
+    hasSecret: initialValues?.hasOpaqueDSN,
+    valueInput: config.dsn,
+    clearSecret: clearSecrets.opaqueDSN,
+    forceClear: values.type !== "custom",
+    trimInput: true,
+  });
+  const isRedisType = values.type === "redis";
+  const displayHost = String(
+    (config as any).host || values.host || "",
+  ).trim();
+  const nextName =
+    values.name ||
+    (isFileDatabaseType(values.type)
+      ? values.type === "duckdb"
+        ? "DuckDB DB"
+        : "SQLite DB"
+      : values.type === "redis"
+        ? `Redis ${displayHost}`
+        : displayHost);
+
+  return {
+    id: connectionId,
+    name: nextName,
+    config: {
+      ...config,
+      id: connectionId,
+      password: primaryDraft.value,
+      ssh: {
+        ...(config.ssh || {
+          host: "",
+          port: 22,
+          user: "",
+          password: "",
+          keyPath: "",
+        }),
+        password: sshDraft.value,
+      },
+      proxy: {
+        ...(config.proxy || {
+          type: "socks5",
+          host: "",
+          port: 1080,
+          user: "",
+          password: "",
+        }),
+        password: proxyDraft.value,
+      },
+      httpTunnel: {
+        ...(config.httpTunnel || {
+          host: "",
+          port: 8080,
+          user: "",
+          password: "",
+        }),
+        password: httpTunnelDraft.value,
+      },
+      uri: opaqueUriDraft.value,
+      dsn: opaqueDsnDraft.value,
+      mysqlReplicaPassword: mysqlReplicaDraft.value,
+      mongoReplicaPassword: mongoReplicaDraft.value,
+      redisSentinelPassword: redisSentinelDraft.value,
+    },
+    includeDatabases: values.includeDatabases,
+    includeRedisDatabases: isRedisType
+      ? values.includeRedisDatabases
+      : undefined,
+    iconType: customIconType || "",
+    iconColor: customIconColor || "",
+    clearPrimaryPassword: primaryDraft.clearStoredSecret,
+    clearSSHPassword: sshDraft.clearStoredSecret,
+    clearProxyPassword: proxyDraft.clearStoredSecret,
+    clearHttpTunnelPassword: httpTunnelDraft.clearStoredSecret,
+    clearMySQLReplicaPassword: mysqlReplicaDraft.clearStoredSecret,
+    clearMongoReplicaPassword: mongoReplicaDraft.clearStoredSecret,
+    clearRedisSentinelPassword: redisSentinelDraft.clearStoredSecret,
+    clearOpaqueURI: opaqueUriDraft.clearStoredSecret,
+    clearOpaqueDSN: opaqueDsnDraft.clearStoredSecret,
+  };
+};
+
+export const getBlockingSecretClearMessage = ({
+  values,
+  clearSecrets,
+  initialValues,
+  translate: t,
+}: GetBlockingSecretClearMessageParams): string | null => {
+  if (
+    clearSecrets.primaryPassword &&
+    values.type !== "custom" &&
+    !isFileDatabaseType(values.type) &&
+    String(values.password ?? "") === ""
+  ) {
+    return t("connection.modal.secret.blocking.primary");
+  }
+  if (
+    clearSecrets.sshPassword &&
+    values.useSSH &&
+    String(values.sshPassword ?? "") === ""
+  ) {
+    return t("connection.modal.secret.blocking.ssh");
+  }
+  if (
+    clearSecrets.proxyPassword &&
+    values.useProxy &&
+    !values.useHttpTunnel &&
+    String(values.proxyPassword ?? "") === ""
+  ) {
+    return t("connection.modal.secret.blocking.proxy");
+  }
+  if (
+    clearSecrets.httpTunnelPassword &&
+    values.useHttpTunnel &&
+    String(values.httpTunnelPassword ?? "") === ""
+  ) {
+    return t("connection.modal.secret.blocking.httpTunnel");
+  }
+  if (
+    clearSecrets.mysqlReplicaPassword &&
+    isMySQLCompatibleType(values.type) &&
+    values.mysqlTopology === "replica" &&
+    String(values.mysqlReplicaPassword ?? "") === ""
+  ) {
+    return t("connection.modal.secret.blocking.mysqlReplica");
+  }
+  if (
+    clearSecrets.mongoReplicaPassword &&
+    values.type === "mongodb" &&
+    values.mongoTopology === "replica" &&
+    String(values.mongoReplicaPassword ?? "") === ""
+  ) {
+    return t("connection.modal.secret.blocking.mongoReplica");
+  }
+  if (
+    clearSecrets.redisSentinelPassword &&
+    values.type === "redis" &&
+    values.redisTopology === "sentinel" &&
+    String(values.redisSentinelPassword ?? "") === ""
+  ) {
+    return t("connection.modal.secret.blocking.redis_sentinel");
+  }
+  if (
+    values.type === "mongodb" &&
+    values.savePassword === false &&
+    initialValues?.hasPrimaryPassword &&
+    String(values.password ?? "") === ""
+  ) {
+    return t("connection.modal.secret.blocking.mongoPrimary");
+  }
+  return null;
+};
+
+export const buildConnectionConfig = async ({
+  values,
+  forPersist,
+  initialValues,
+  translate: t,
+}: BuildConnectionConfigParams): Promise<ConnectionConfig> => {
+  const mergedValues = { ...values };
+  if (
+    String(mergedValues.type || "")
+      .trim()
+      .toLowerCase() === "jvm"
+  ) {
+    if (
+      hasUnsupportedJVMEditableModes({
+        allowedModes: mergedValues.jvmAllowedModes,
+        preferredMode: mergedValues.jvmPreferredMode,
+      })
+    ) {
+      throw new Error(t("connection.modal.jvm.unsupportedMode.saveTest"));
+    }
+    if (
+      hasUnsupportedJVMDiagnosticTransport(
+        mergedValues.jvmDiagnosticTransport,
+      )
+    ) {
+      throw new Error(
+        t("connection.modal.jvm.unsupportedTransport.saveTest"),
+      );
+    }
+    const existingDiagnostic = initialValues?.config?.jvm?.diagnostic;
+    if (
+      mergedValues.jvmDiagnosticEnabled === undefined &&
+      existingDiagnostic?.enabled !== undefined
+    ) {
+      mergedValues.jvmDiagnosticEnabled = existingDiagnostic.enabled;
+    }
+    if (
+      String(mergedValues.jvmDiagnosticTransport || "").trim() === "" &&
+      existingDiagnostic?.transport
+    ) {
+      mergedValues.jvmDiagnosticTransport = existingDiagnostic.transport;
+    }
+    if (
+      String(mergedValues.jvmDiagnosticBaseUrl || "").trim() === "" &&
+      existingDiagnostic?.baseUrl
+    ) {
+      mergedValues.jvmDiagnosticBaseUrl = existingDiagnostic.baseUrl;
+    }
+    if (
+      String(mergedValues.jvmDiagnosticTargetId || "").trim() === "" &&
+      existingDiagnostic?.targetId
+    ) {
+      mergedValues.jvmDiagnosticTargetId = existingDiagnostic.targetId;
+    }
+    if (
+      String(mergedValues.jvmDiagnosticApiKey || "").trim() === "" &&
+      existingDiagnostic?.apiKey
+    ) {
+      mergedValues.jvmDiagnosticApiKey = existingDiagnostic.apiKey;
+    }
+    if (
+      mergedValues.jvmDiagnosticAllowObserveCommands === undefined &&
+      existingDiagnostic?.allowObserveCommands !== undefined
+    ) {
+      mergedValues.jvmDiagnosticAllowObserveCommands =
+        existingDiagnostic.allowObserveCommands;
+    }
+    if (
+      mergedValues.jvmDiagnosticAllowTraceCommands === undefined &&
+      existingDiagnostic?.allowTraceCommands !== undefined
+    ) {
+      mergedValues.jvmDiagnosticAllowTraceCommands =
+        existingDiagnostic.allowTraceCommands;
+    }
+    if (
+      mergedValues.jvmDiagnosticAllowMutatingCommands === undefined &&
+      existingDiagnostic?.allowMutatingCommands !== undefined
+    ) {
+      mergedValues.jvmDiagnosticAllowMutatingCommands =
+        existingDiagnostic.allowMutatingCommands;
+    }
+    if (
+      (mergedValues.jvmDiagnosticTimeoutSeconds === undefined ||
+        mergedValues.jvmDiagnosticTimeoutSeconds === null ||
+        mergedValues.jvmDiagnosticTimeoutSeconds === "") &&
+      Number(existingDiagnostic?.timeoutSeconds) > 0
+    ) {
+      mergedValues.jvmDiagnosticTimeoutSeconds = Number(
+        existingDiagnostic?.timeoutSeconds,
+      );
+    }
+    const resolvedJvmAllowedModes = normalizeEditableJVMModes(
+      mergedValues.jvmAllowedModes,
+    );
+    const resolvedJvmTimeout = Number(mergedValues.timeout || 30);
+    const preferredJvmMode = String(mergedValues.jvmPreferredMode || "")
+      .trim()
+      .toLowerCase();
+    const resolvedJvmPreferredMode =
+      resolvedJvmAllowedModes.find((mode) => mode === preferredJvmMode) ||
+      resolvedJvmAllowedModes[0];
+    return buildJVMConnectionConfig({
+      ...buildDefaultJVMConnectionValues(),
+      ...mergedValues,
+      jvmAllowedModes: resolvedJvmAllowedModes,
+      jvmPreferredMode: resolvedJvmPreferredMode,
+      jvmEndpointEnabled: resolvedJvmAllowedModes.includes("endpoint"),
+      jvmAgentEnabled: resolvedJvmAllowedModes.includes("agent"),
+      timeout: resolvedJvmTimeout,
+      jvmEndpointTimeoutSeconds: resolvedJvmTimeout,
+    });
+  }
+  const parsedUriValues = parseUriToValues(
+    mergedValues.uri,
+    mergedValues.type,
+  );
+  const isEmptyField = (value: unknown) =>
+    value === undefined ||
+    value === null ||
+    value === "" ||
+    value === 0 ||
+    (Array.isArray(value) && value.length === 0);
+  if (parsedUriValues) {
+    Object.entries(parsedUriValues).forEach(([key, value]) => {
+      if (
+        key === "clickHouseProtocol" &&
+        normalizeClickHouseProtocolValue((mergedValues as any)[key]) ===
+          "auto" &&
+        normalizeClickHouseProtocolValue(value) !== "auto"
+      ) {
+        (mergedValues as any)[key] = value;
+        return;
+      }
+      if (isEmptyField((mergedValues as any)[key])) {
+        (mergedValues as any)[key] = value;
+      }
+    });
+  }
+
+  const type = String(mergedValues.type || "").toLowerCase();
+  const defaultPort = getDefaultPortByType(type);
+  const selectedOceanBaseProtocol =
+    type === "oceanbase"
+      ? normalizeOceanBaseProtocolValue(mergedValues.oceanBaseProtocol)
+      : "mysql";
+  if (type === "clickhouse") {
+    const requestedProtocol = normalizeClickHouseProtocolValue(
+      mergedValues.clickHouseProtocol,
+    );
+    const hostSchemeValues = parseClickHouseHTTPUriToValues(
+      mergedValues.host,
+      Number(mergedValues.port || defaultPort),
+    );
+    if (hostSchemeValues) {
+      mergedValues.host = hostSchemeValues.host;
+      mergedValues.port = hostSchemeValues.port;
+      if (requestedProtocol !== "native") {
+        mergedValues.clickHouseProtocol = "http";
+        mergedValues.useSSL = hostSchemeValues.useSSL;
+        mergedValues.sslMode = hostSchemeValues.sslMode;
+      } else {
+        mergedValues.clickHouseProtocol = "native";
+      }
+      if (isEmptyField(mergedValues.user)) {
+        mergedValues.user = hostSchemeValues.user;
+      }
+      if (isEmptyField(mergedValues.password)) {
+        mergedValues.password = hostSchemeValues.password;
+      }
+      if (isEmptyField(mergedValues.database)) {
+        mergedValues.database = hostSchemeValues.database;
+      }
+    }
+  }
+  const isFileDbType = isFileDatabaseType(type);
+  const sslCapableType = supportsSSLForType(type);
+
+  // Redis 默认不展示用户名字段；若 URI 可解析则以 URI 为准覆盖 user，
+  // 同时清理历史默认值 root，避免 go-redis 发送 ACL AUTH(user, pass) 导致 WRONGPASS。
+  if (type === "redis") {
+    if (
+      parsedUriValues &&
+      Object.prototype.hasOwnProperty.call(parsedUriValues, "user")
+    ) {
+      mergedValues.user = String((parsedUriValues as any).user || "");
+    } else if (String(mergedValues.user || "").trim() === "root") {
+      mergedValues.user = "";
+    }
+  }
+  const sslModeRaw = String(mergedValues.sslMode || "preferred")
+    .trim()
+    .toLowerCase();
+  const sslMode: "preferred" | "required" | "skip-verify" | "disable" =
+    sslModeRaw === "required"
+      ? "required"
+      : sslModeRaw === "skip-verify"
+        ? "skip-verify"
+        : sslModeRaw === "disable"
+          ? "disable"
+          : "preferred";
+  const effectiveUseSSL = sslCapableType && !!mergedValues.useSSL;
+  const sslCAPath = sslCapableType
+    ? String(mergedValues.sslCAPath || "").trim()
+    : "";
+  const sslCertPath = sslCapableType
+    ? String(mergedValues.sslCertPath || "").trim()
+    : "";
+  const sslKeyPath = sslCapableType
+    ? String(mergedValues.sslKeyPath || "").trim()
+    : "";
+  if (type === "dameng" && effectiveUseSSL && (!sslCertPath || !sslKeyPath)) {
+    throw new Error(t("connection.modal.validation.ssl.damengRequired"));
+  }
+  if (effectiveUseSSL && supportsSSLClientCertificateForType(type) && (!!sslCertPath !== !!sslKeyPath)) {
+    throw new Error(t("connection.modal.validation.ssl.clientPairRequired"));
+  }
+
+  let primaryHost = "localhost";
+  let primaryPort = defaultPort;
+  if (isFileDbType) {
+    // 文件型数据库（sqlite/duckdb）这里的 host 即数据库文件路径，不应参与 host:port 拼接与解析。
+    primaryHost = normalizeFileDbPath(String(mergedValues.host || "").trim());
+    primaryPort = 0;
+  } else {
+    const parsedPrimary = parseHostPort(
+      toAddress(
+        mergedValues.host || "localhost",
+        Number(mergedValues.port || defaultPort),
+        defaultPort,
+      ),
+      defaultPort,
+    );
+    primaryHost = parsedPrimary?.host || "localhost";
+    primaryPort = parsedPrimary?.port || defaultPort;
+  }
+
+  let hosts: string[] = [];
+  let topology: "single" | "replica" | "cluster" | "sentinel" | undefined;
+  let replicaSet = "";
+  let authSource = "";
+  let readPreference = "";
+  let mysqlReplicaUser = "";
+  let mysqlReplicaPassword = "";
+  let mongoSrvEnabled = false;
+  let mongoAuthMechanism = "";
+  let mongoReplicaUser = "";
+  let mongoReplicaPassword = "";
+  let redisSentinelMaster = "";
+  let redisSentinelUser = "";
+  let redisSentinelPassword = "";
+  const savePassword =
+    type === "mongodb" ? mergedValues.savePassword !== false : true;
+
+  if (isMySQLCompatibleType(type) && selectedOceanBaseProtocol !== "oracle") {
+    const replicas =
+      mergedValues.mysqlTopology === "replica"
+        ? normalizeAddressList(mergedValues.mysqlReplicaHosts, defaultPort)
+        : [];
+    const allHosts = normalizeAddressList(
+      [`${primaryHost}:${primaryPort}`, ...replicas],
+      defaultPort,
+    );
+    if (mergedValues.mysqlTopology === "replica" || allHosts.length > 1) {
+      hosts = allHosts;
+      topology = "replica";
+      mysqlReplicaUser = String(mergedValues.mysqlReplicaUser || "").trim();
+      mysqlReplicaPassword = String(mergedValues.mysqlReplicaPassword || "");
+    } else {
+      topology = "single";
+    }
+  }
+
+  if (type === "kafka") {
+    const brokers =
+      mergedValues.kafkaTopology === "cluster"
+        ? normalizeAddressList(mergedValues.kafkaHosts, defaultPort)
+        : [];
+    const allHosts = normalizeAddressList(
+      [`${primaryHost}:${primaryPort}`, ...brokers],
+      defaultPort,
+    );
+    if (mergedValues.kafkaTopology === "cluster" || allHosts.length > 1) {
+      hosts = allHosts;
+      topology = "cluster";
+    } else {
+      topology = "single";
+    }
+  }
+
+  if (type === "mqtt") {
+    const brokers =
+      mergedValues.mqttTopology === "cluster"
+        ? normalizeAddressList(mergedValues.mqttHosts, defaultPort)
+        : [];
+    const allHosts = normalizeAddressList(
+      [`${primaryHost}:${primaryPort}`, ...brokers],
+      defaultPort,
+    );
+    if (mergedValues.mqttTopology === "cluster" || allHosts.length > 1) {
+      hosts = allHosts;
+      topology = "cluster";
+    } else {
+      topology = "single";
+    }
+  }
+
+  if (type === "rocketmq") {
+    const nameservers =
+      mergedValues.rocketmqTopology === "cluster"
+        ? normalizeAddressList(mergedValues.rocketmqHosts, defaultPort)
+        : [];
+    const allHosts = normalizeAddressList(
+      [`${primaryHost}:${primaryPort}`, ...nameservers],
+      defaultPort,
+    );
+    if (mergedValues.rocketmqTopology === "cluster" || allHosts.length > 1) {
+      hosts = allHosts;
+      topology = "cluster";
+    } else {
+      topology = "single";
+    }
+  }
+
+  if (type === "mongodb") {
+    mongoSrvEnabled = !!mergedValues.mongoSrv;
+    const extraHosts =
+      mergedValues.mongoTopology === "replica"
+        ? mongoSrvEnabled
+          ? normalizeMongoSrvHostList(mergedValues.mongoHosts, defaultPort)
+          : normalizeAddressList(mergedValues.mongoHosts, defaultPort)
+        : [];
+    const primarySeed = mongoSrvEnabled
+      ? primaryHost
+      : `${primaryHost}:${primaryPort}`;
+    const allHosts = mongoSrvEnabled
+      ? normalizeMongoSrvHostList([primarySeed, ...extraHosts], defaultPort)
+      : normalizeAddressList([primarySeed, ...extraHosts], defaultPort);
+    if (
+      mergedValues.mongoTopology === "replica" ||
+      allHosts.length > 1 ||
+      mergedValues.mongoReplicaSet
+    ) {
+      hosts = allHosts;
+      topology = "replica";
+      mongoReplicaUser = String(mergedValues.mongoReplicaUser || "").trim();
+      mongoReplicaPassword = String(mergedValues.mongoReplicaPassword || "");
+    } else {
+      topology = "single";
+    }
+    replicaSet = String(mergedValues.mongoReplicaSet || "").trim();
+    authSource = String(
+      mergedValues.mongoAuthSource || mergedValues.database || "admin",
+    ).trim();
+    readPreference = String(
+      mergedValues.mongoReadPreference || "primary",
+    ).trim();
+    mongoAuthMechanism = String(mergedValues.mongoAuthMechanism || "")
+      .trim()
+      .toUpperCase();
+  }
+
+  if (type === "redis") {
+    const redisDraft = resolveRedisConfigDraft(
+      mergedValues,
+      primaryHost,
+      primaryPort,
+      defaultPort,
+    );
+    primaryPort = redisDraft.primaryPort;
+    hosts = redisDraft.hosts;
+    topology = redisDraft.topology;
+    redisSentinelMaster = redisDraft.redisSentinelMaster;
+    redisSentinelUser = redisDraft.redisSentinelUser;
+    redisSentinelPassword = redisDraft.redisSentinelPassword;
+    mergedValues.redisDB = redisDraft.redisDB;
+  }
+
+  const sshConfig = mergedValues.useSSH
+    ? {
+        host: mergedValues.sshHost,
+        port: Number(mergedValues.sshPort),
+        user: mergedValues.sshUser,
+        password: mergedValues.sshPassword || "",
+        keyPath: mergedValues.sshKeyPath || "",
+      }
+    : { host: "", port: 22, user: "", password: "", keyPath: "" };
+  const effectiveUseHttpTunnel =
+    !isFileDbType && !!mergedValues.useHttpTunnel;
+  const effectiveUseProxy =
+    !isFileDbType && !!mergedValues.useProxy && !effectiveUseHttpTunnel;
+  const proxyTypeRaw = String(
+    mergedValues.proxyType || "socks5",
+  ).toLowerCase();
+  const proxyType: "socks5" | "http" =
+    proxyTypeRaw === "http" ? "http" : "socks5";
+  const proxyConfig: NonNullable<ConnectionConfig["proxy"]> =
+    effectiveUseProxy
+      ? {
+          type: proxyType,
+          host: String(mergedValues.proxyHost || "").trim(),
+          port: Number(
+            mergedValues.proxyPort || (proxyTypeRaw === "http" ? 8080 : 1080),
+          ),
+          user: String(mergedValues.proxyUser || "").trim(),
+          password: mergedValues.proxyPassword || "",
+        }
+      : {
+          type: "socks5",
+          host: "",
+          port: 1080,
+          user: "",
+          password: "",
+        };
+  const httpTunnelConfig: NonNullable<ConnectionConfig["httpTunnel"]> =
+    effectiveUseHttpTunnel
+      ? {
+          host: String(mergedValues.httpTunnelHost || "").trim(),
+          port: Number(mergedValues.httpTunnelPort || 8080),
+          user: String(mergedValues.httpTunnelUser || "").trim(),
+          password: mergedValues.httpTunnelPassword || "",
+        }
+      : {
+          host: "",
+          port: 8080,
+          user: "",
+          password: "",
+        };
+  if (effectiveUseHttpTunnel) {
+    if (!httpTunnelConfig.host) {
+      throw new Error(t("connection.modal.validation.httpTunnel.hostRequired"));
+    }
+    if (
+      !Number.isFinite(httpTunnelConfig.port) ||
+      httpTunnelConfig.port <= 0 ||
+      httpTunnelConfig.port > 65535
+    ) {
+      throw new Error(t("connection.modal.validation.httpTunnel.portRange"));
+    }
+  }
+
+  const keepPassword = !forPersist || savePassword;
+  const normalizedConnectionParams = supportsConnectionParamsForType(type)
+    ? type === "oceanbase"
+      ? normalizeOceanBaseConnectionParamsText(
+          mergedValues.connectionParams,
+          selectedOceanBaseProtocol,
+        )
+      : normalizeConnectionParamsText(mergedValues.connectionParams)
+    : "";
+
+  return {
+    type: mergedValues.type,
+    host: primaryHost,
+    port: Number(primaryPort || 0),
+    user: mergedValues.user || "",
+    password: keepPassword ? mergedValues.password || "" : "",
+    savePassword: savePassword,
+    database: mergedValues.database || "",
+    useSSL: effectiveUseSSL,
+    sslMode: effectiveUseSSL ? sslMode : "disable",
+    sslCAPath: sslCAPath,
+    sslCertPath: sslCertPath,
+    sslKeyPath: sslKeyPath,
+    useSSH: !!mergedValues.useSSH,
+    ssh: sshConfig,
+    useProxy: effectiveUseProxy,
+    proxy: proxyConfig,
+    useHttpTunnel: effectiveUseHttpTunnel,
+    httpTunnel: httpTunnelConfig,
+    driver: mergedValues.driver,
+    dsn: mergedValues.dsn,
+    connectionParams: normalizedConnectionParams,
+    timeout: Number(mergedValues.timeout || 30),
+    redisDB: Number.isFinite(Number(mergedValues.redisDB))
+      ? Math.max(0, Math.trunc(Number(mergedValues.redisDB)))
+      : 0,
+    redisSentinelMaster: redisSentinelMaster,
+    redisSentinelUser: redisSentinelUser,
+    redisSentinelPassword: keepPassword ? redisSentinelPassword : "",
+    uri: String(mergedValues.uri || "").trim(),
+    clickHouseProtocol:
+      type === "clickhouse"
+        ? normalizeClickHouseProtocolValue(mergedValues.clickHouseProtocol)
+        : undefined,
+    oceanBaseProtocol:
+      type === "oceanbase" ? selectedOceanBaseProtocol : undefined,
+    hosts: hosts,
+    topology: topology,
+    mysqlReplicaUser: mysqlReplicaUser,
+    mysqlReplicaPassword: keepPassword ? mysqlReplicaPassword : "",
+    replicaSet: replicaSet,
+    authSource: authSource,
+    readPreference: readPreference,
+    mongoSrv: mongoSrvEnabled,
+    mongoAuthMechanism: mongoAuthMechanism,
+    mongoReplicaUser: mongoReplicaUser,
+    mongoReplicaPassword: keepPassword ? mongoReplicaPassword : "",
+  };
+};
diff --git a/frontend/src/components/connectionModal/connectionModalUri.ts b/frontend/src/components/connectionModal/connectionModalUri.ts
new file mode 100644
index 0000000..48c84de
--- /dev/null
+++ b/frontend/src/components/connectionModal/connectionModalUri.ts
@@ -0,0 +1,1484 @@
+import { t } from "../../i18n";
+import {
+  getConnectionTypeDefaultPort as getDefaultPortByType,
+} from "../../utils/connectionTypeCatalog";
+import {
+  isFileDatabaseType,
+  isMySQLCompatibleType,
+  isPostgresCompatibleSSLType,
+  singleHostUriSchemesByType,
+  supportsConnectionParamsForType,
+  supportsSSLCAPathForType,
+  supportsSSLClientCertificateForType,
+  supportsSSLForType,
+} from "../../utils/connectionTypeCapabilities";
+import {
+  describeUnsupportedOceanBaseProtocol,
+  normalizeOceanBaseProtocol,
+  OCEANBASE_PROTOCOL_PARAM_KEYS,
+  resolveOceanBaseProtocolFromQueryText as resolveOceanBaseProtocolQueryText,
+  type OceanBaseProtocol,
+} from "../../utils/oceanBaseProtocol";
+import {
+  buildRedisUriFromValues,
+  parseRedisUriToFormValues,
+} from "../../utils/redisConnectionUri";
+
+export type ClickHouseProtocolChoice = "auto" | "http" | "native";
+export type OceanBaseProtocolChoice = OceanBaseProtocol;
+
+const MAX_URI_LENGTH = 4096;
+const MAX_CONNECTION_PARAMS_LENGTH = 4096;
+const MAX_URI_HOSTS = 32;
+const MAX_TIMEOUT_SECONDS = 3600;
+
+export const normalizeClickHouseProtocolValue = (

+  value: unknown,

+): ClickHouseProtocolChoice => {

+  const text = String(value || "")

+    .trim()

+    .toLowerCase();

+  if (text === "http" || text === "https") return "http";

+  if (text === "native" || text === "tcp") return "native";

+  return "auto";

+};

+export const normalizeOceanBaseProtocolValue = (

+  value: unknown,

+): OceanBaseProtocolChoice => {

+  return normalizeOceanBaseProtocol(value) || "mysql";

+};
+
+export const parseHostPort = (
+  raw: string,
+  defaultPort: number,
+): { host: string; port: number } | null => {
+  const text = String(raw || "").trim();
+  if (!text) {
+    return null;
+  }
+  if (text.startsWith("[")) {
+    const closingBracket = text.indexOf("]");
+    if (closingBracket > 0) {
+      const host = text.slice(1, closingBracket).trim();
+      const portText = text
+        .slice(closingBracket + 1)
+        .trim()
+        .replace(/^:/, "");
+      const parsedPort = Number(portText);
+      return {
+        host: host || "localhost",
+        port:
+          Number.isFinite(parsedPort) && parsedPort > 0 && parsedPort <= 65535
+            ? parsedPort
+            : defaultPort,
+      };
+    }
+  }
+
+  const colonCount = (text.match(/:/g) || []).length;
+  if (colonCount === 1) {
+    const splitIndex = text.lastIndexOf(":");
+    const host = text.slice(0, splitIndex).trim();
+    const portText = text.slice(splitIndex + 1).trim();
+    const parsedPort = Number(portText);
+    return {
+      host: host || "localhost",
+      port:
+        Number.isFinite(parsedPort) && parsedPort > 0 && parsedPort <= 65535
+          ? parsedPort
+          : defaultPort,
+    };
+  }
+
+  return { host: text, port: defaultPort };
+};
+
+export const toAddress = (host: string, port: number, defaultPort: number) => {
+  const safeHost = String(host || "").trim() || "localhost";
+  const safePort =
+    Number.isFinite(Number(port)) && Number(port) > 0
+      ? Number(port)
+      : defaultPort;
+  return `${safeHost}:${safePort}`;
+};
+
+export const normalizeAddressList = (
+  rawList: unknown,
+  defaultPort: number,
+): string[] => {
+  const list = Array.isArray(rawList) ? rawList : [];
+  const seen = new Set<string>();
+  const result: string[] = [];
+  list.forEach((entry) => {
+    const parsed = parseHostPort(String(entry || ""), defaultPort);
+    if (!parsed) {
+      return;
+    }
+    const normalized = toAddress(parsed.host, parsed.port, defaultPort);
+    if (seen.has(normalized)) {
+      return;
+    }
+    seen.add(normalized);
+    result.push(normalized);
+  });
+  return result;
+};
+
+const isValidUriHostEntry = (entry: string): boolean => {
+  const text = String(entry || "").trim();
+  if (!text) return false;
+  if (text.length > 255) return false;
+  // 拒绝明显的 DSN 片段或路径/空白，避免把非 URI 主机段误判为合法地址。
+  if (/[()\\/\s]/.test(text)) return false;
+  return true;
+};
+
+export const normalizeMongoSrvHostList = (
+  rawList: unknown,
+  defaultPort: number,
+): string[] => {
+  const list = Array.isArray(rawList) ? rawList : [];
+  const seen = new Set<string>();
+  const result: string[] = [];
+  list.forEach((entry) => {
+    const parsed = parseHostPort(String(entry || ""), defaultPort);
+    if (!parsed?.host) {
+      return;
+    }
+    const host = String(parsed.host).trim();
+    if (!host || seen.has(host)) {
+      return;
+    }
+    seen.add(host);
+    result.push(host);
+  });
+  return result;
+};
+
+const safeDecode = (text: string) => {
+  try {
+    return decodeURIComponent(text);
+  } catch {
+    return text;
+  }
+};
+
+const normalizeUriBool = (raw: unknown) => {
+  const text = String(raw ?? "")
+    .trim()
+    .toLowerCase();
+  return text === "1" || text === "true" || text === "yes" || text === "on";
+};
+
+export const normalizeConnectionParamsText = (raw: unknown) => {
+  let text = String(raw || "").trim();
+  if (!text) return "";
+  const queryIndex = text.indexOf("?");
+  if (queryIndex >= 0) {
+    text = text.slice(queryIndex + 1);
+  }
+  const hashIndex = text.indexOf("#");
+  if (hashIndex >= 0) {
+    text = text.slice(0, hashIndex);
+  }
+  return text.replace(/^[?&]+/, "").trim().slice(0, MAX_CONNECTION_PARAMS_LENGTH);
+};
+
+const serializeConnectionParams = (params: URLSearchParams) => {
+  const cloned = new URLSearchParams();
+  params.forEach((value, key) => {
+    if (String(key || "").trim()) {
+      cloned.append(key, value);
+    }
+  });
+  return cloned.toString().slice(0, MAX_CONNECTION_PARAMS_LENGTH);
+};
+
+export const normalizeOceanBaseConnectionParamsText = (
+  rawParams: unknown,
+  selectedProtocol: OceanBaseProtocolChoice,
+) => {
+  const normalizedParamsText = normalizeConnectionParamsText(rawParams);
+  const protocolFromParams = resolveOceanBaseProtocolQueryText(normalizedParamsText);
+  if (protocolFromParams.unsupportedValue) {
+    throw new Error(describeUnsupportedOceanBaseProtocol(protocolFromParams.unsupportedValue));
+  }
+  const params = new URLSearchParams(normalizedParamsText);
+  for (const key of OCEANBASE_PROTOCOL_PARAM_KEYS) {
+    params.delete(key);
+  }
+  params.set("protocol", selectedProtocol);
+  return params.toString().slice(0, MAX_CONNECTION_PARAMS_LENGTH);
+};
+
+const mergeConnectionParams = (
+  params: URLSearchParams,
+  rawParams: unknown,
+) => {
+  const text = normalizeConnectionParamsText(rawParams);
+  if (!text) return;
+  const extra = new URLSearchParams(text);
+  extra.forEach((value, key) => {
+    if (String(key || "").trim()) {
+      params.set(key, value);
+    }
+  });
+};
+
+export const normalizeFileDbPath = (rawPath: string): string => {
+  let pathText = String(rawPath || "").trim();
+  if (!pathText) {
+    return "";
+  }
+  // 兼容 sqlite:///C:/... 或 sqlite:///C:\... 解析后多出的前导斜杠。
+  if (/^\/[a-zA-Z]:[\\/]/.test(pathText)) {
+    pathText = pathText.slice(1);
+  }
+  // 兼容历史版本把 Windows 文件路径误拼成 :3306:3306。
+  const legacyMatch = pathText.match(/^([a-zA-Z]:[\\/].*?)(?::\d+)+$/);
+  if (legacyMatch?.[1]) {
+    return legacyMatch[1];
+  }
+  return pathText;
+};
+
+const parseMultiHostUri = (uriText: string, expectedScheme: string) => {
+  const prefix = `${expectedScheme}://`;
+  if (!uriText.toLowerCase().startsWith(prefix)) {
+    return null;
+  }
+  let rest = uriText.slice(prefix.length);
+  const hashIndex = rest.indexOf("#");
+  if (hashIndex >= 0) {
+    rest = rest.slice(0, hashIndex);
+  }
+  let queryText = "";
+  const queryIndex = rest.indexOf("?");
+  if (queryIndex >= 0) {
+    queryText = rest.slice(queryIndex + 1);
+    rest = rest.slice(0, queryIndex);
+  }
+
+  let pathText = "";
+  const slashIndex = rest.indexOf("/");
+  if (slashIndex >= 0) {
+    pathText = rest.slice(slashIndex + 1);
+    rest = rest.slice(0, slashIndex);
+  }
+
+  let hostText = rest;
+  let username = "";
+  let password = "";
+  const atIndex = rest.lastIndexOf("@");
+  if (atIndex >= 0) {
+    const userInfo = rest.slice(0, atIndex);
+    hostText = rest.slice(atIndex + 1);
+    const colonIndex = userInfo.indexOf(":");
+    if (colonIndex >= 0) {
+      username = safeDecode(userInfo.slice(0, colonIndex));
+      password = safeDecode(userInfo.slice(colonIndex + 1));
+    } else {
+      username = safeDecode(userInfo);
+    }
+  }
+
+  const hosts = hostText
+    .split(",")
+    .map((item) => item.trim())
+    .filter(Boolean);
+
+  return {
+    username,
+    password,
+    hosts,
+    database: safeDecode(pathText),
+    params: new URLSearchParams(queryText),
+  };
+};
+
+const parseSingleHostUri = (
+  uriText: string,
+  expectedSchemes: string[],
+  defaultPort: number,
+): {
+  host: string;
+  port: number;
+  username: string;
+  password: string;
+  database: string;
+  params: URLSearchParams;
+} | null => {
+  let parsed: ReturnType<typeof parseMultiHostUri> | null = null;
+  for (const scheme of expectedSchemes) {
+    parsed = parseMultiHostUri(uriText, scheme);
+    if (parsed) {
+      break;
+    }
+  }
+  if (!parsed) {
+    return null;
+  }
+  if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
+    return null;
+  }
+  if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
+    return null;
+  }
+  const hostList = normalizeAddressList(parsed.hosts, defaultPort);
+  if (!hostList.length) {
+    return null;
+  }
+  const primary = parseHostPort(
+    hostList[0] || `localhost:${defaultPort}`,
+    defaultPort,
+  );
+  return {
+    host: primary?.host || "localhost",
+    port: primary?.port || defaultPort,
+    username: parsed.username,
+    password: parsed.password,
+    database: parsed.database || "",
+    params: parsed.params,
+  };
+};
+
+export const parseClickHouseHTTPUriToValues = (
+  uriText: string,
+  fallbackPort?: number,
+): Record<string, any> | null => {
+  const trimmed = String(uriText || "").trim();
+  const lower = trimmed.toLowerCase();
+  const isHttps = lower.startsWith("https://");
+  const isHttp = lower.startsWith("http://");
+  if (!isHttp && !isHttps) {
+    return null;
+  }
+  const defaultPort =
+    Number.isFinite(Number(fallbackPort)) && Number(fallbackPort) > 0
+      ? Number(fallbackPort)
+      : isHttps
+        ? 8443
+        : 8123;
+  const parsed = parseSingleHostUri(
+    trimmed,
+    [isHttps ? "https" : "http"],
+    defaultPort,
+  );
+  if (!parsed) {
+    return null;
+  }
+  const skipVerify = normalizeUriBool(parsed.params.get("skip_verify"));
+  return {
+    host: parsed.host,
+    port: parsed.port,
+    user: parsed.username,
+    password: parsed.password,
+    database: parsed.database || "",
+    clickHouseProtocol: "http",
+    useSSL: isHttps,
+    sslMode: isHttps ? (skipVerify ? "skip-verify" : "required") : "disable",
+    ...extractSSLPathValuesFromParams(parsed.params, "clickhouse"),
+    connectionParams: serializeConnectionParams(parsed.params),
+  };
+};
+
+const firstConnectionParamValue = (
+  params: URLSearchParams,
+  names: string[],
+): string => {
+  for (const name of names) {
+    const value = String(params.get(name) || "").trim();
+    if (value) return value;
+  }
+  return "";
+};
+
+const extractSSLPathValuesFromParams = (
+  params: URLSearchParams,
+  type: string,
+): Record<string, string> => {
+  const caPath = firstConnectionParamValue(params, [
+    "sslCAPath",
+    "ssl_ca_path",
+    "sslrootcert",
+    "sslRootCert",
+    "tlsCAFile",
+    "caFile",
+    "certificate",
+    "servercertificate",
+    "serverCertificate",
+  ]);
+  const certPath = firstConnectionParamValue(params, [
+    "sslCertPath",
+    "ssl_cert_path",
+    "SSL_CERT_PATH",
+    "sslcert",
+    "sslCert",
+    "tlsCertificateFile",
+  ]);
+  const keyPath = firstConnectionParamValue(params, [
+    "sslKeyPath",
+    "ssl_key_path",
+    "SSL_KEY_PATH",
+    "sslkey",
+    "sslKey",
+    "tlsKeyFile",
+  ]);
+  return {
+    ...(supportsSSLCAPathForType(type) && caPath ? { sslCAPath: caPath } : {}),
+    ...(supportsSSLClientCertificateForType(type) && certPath ? { sslCertPath: certPath } : {}),
+    ...(supportsSSLClientCertificateForType(type) && keyPath ? { sslKeyPath: keyPath } : {}),
+  };
+};
+
+const appendSSLPathParamsForUri = (
+  params: URLSearchParams,
+  type: string,
+  values: Record<string, any>,
+) => {
+  const caPath = String(values.sslCAPath || "").trim();
+  const certPath = String(values.sslCertPath || "").trim();
+  const keyPath = String(values.sslKeyPath || "").trim();
+  const mode = String(values.sslMode || "preferred")
+    .trim()
+    .toLowerCase();
+  if (supportsSSLCAPathForType(type) && caPath) {
+    if (isPostgresCompatibleSSLType(type)) {
+      if (mode !== "skip-verify" && mode !== "disable") {
+        params.set("sslrootcert", caPath);
+      }
+    } else if (type === "sqlserver") {
+      params.set("certificate", caPath);
+    } else {
+      params.set("sslCAPath", caPath);
+    }
+  }
+  if (supportsSSLClientCertificateForType(type) && certPath) {
+    if (type === "dameng") {
+      params.set("SSL_CERT_PATH", certPath);
+    } else if (isPostgresCompatibleSSLType(type)) {
+      params.set("sslcert", certPath);
+    } else {
+      params.set("sslCertPath", certPath);
+    }
+  }
+  if (supportsSSLClientCertificateForType(type) && keyPath) {
+    if (type === "dameng") {
+      params.set("SSL_KEY_PATH", keyPath);
+    } else if (isPostgresCompatibleSSLType(type)) {
+      params.set("sslkey", keyPath);
+    } else {
+      params.set("sslKeyPath", keyPath);
+    }
+  }
+};
+
+export const parseUriToValues = (
+  uriText: string,
+  type: string,
+): Record<string, any> | null => {
+  const trimmedUri = String(uriText || "").trim();
+  if (!trimmedUri) {
+    return null;
+  }
+  if (trimmedUri.length > MAX_URI_LENGTH) {
+    return null;
+  }
+
+  if (isMySQLCompatibleType(type)) {
+    const mysqlDefaultPort = getDefaultPortByType(type);
+    const parsed =
+      parseMultiHostUri(trimmedUri, "mysql") ||
+      parseMultiHostUri(trimmedUri, "goldendb") ||
+      parseMultiHostUri(trimmedUri, "greatdb") ||
+      parseMultiHostUri(trimmedUri, "gdb") ||
+      parseMultiHostUri(trimmedUri, "jdbc:mysql") ||
+      parseMultiHostUri(trimmedUri, "oceanbase") ||
+      parseMultiHostUri(trimmedUri, "jdbc:oceanbase") ||
+      parseMultiHostUri(trimmedUri, "starrocks") ||
+      parseMultiHostUri(trimmedUri, "jdbc:starrocks") ||
+      parseMultiHostUri(trimmedUri, "diros") ||
+      parseMultiHostUri(trimmedUri, "doris");
+    if (!parsed) {
+      return null;
+    }
+    if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
+      return null;
+    }
+    if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
+      return null;
+    }
+    const hostList = normalizeAddressList(parsed.hosts, mysqlDefaultPort);
+    if (!hostList.length) {
+      return null;
+    }
+    const primary = parseHostPort(
+      hostList[0] || `localhost:${mysqlDefaultPort}`,
+      mysqlDefaultPort,
+    );
+    const timeoutValue = Number(parsed.params.get("timeout"));
+    const topology = String(
+      parsed.params.get("topology") || "",
+    ).toLowerCase();
+    const tlsValue = String(
+      parsed.params.get("tls") || parsed.params.get("useSSL") || "",
+    )
+      .trim()
+      .toLowerCase();
+    const parsedOceanBaseProtocol =
+      type === "oceanbase"
+        ? normalizeOceanBaseProtocolValue(
+            parsed.params.get("protocol") ||
+              parsed.params.get("oceanBaseProtocol") ||
+              parsed.params.get("oceanbaseProtocol") ||
+              parsed.params.get("tenantMode") ||
+              parsed.params.get("compatMode") ||
+              parsed.params.get("mode"),
+          )
+        : undefined;
+    const sslMode =
+      tlsValue === "true"
+        ? "required"
+        : tlsValue === "skip-verify"
+          ? "skip-verify"
+          : tlsValue === "preferred"
+            ? "preferred"
+            : "disable";
+    return {
+      host: primary?.host || "localhost",
+      port: primary?.port || mysqlDefaultPort,
+      user: parsed.username,
+      password: parsed.password,
+      database: parsed.database || "",
+      useSSL: sslMode !== "disable",
+      sslMode,
+      ...extractSSLPathValuesFromParams(parsed.params, type),
+      oceanBaseProtocol: parsedOceanBaseProtocol,
+      mysqlTopology:
+        parsedOceanBaseProtocol === "oracle"
+          ? "single"
+          : hostList.length > 1 || topology === "replica"
+            ? "replica"
+            : "single",
+      mysqlReplicaHosts: hostList.slice(1),
+      connectionParams: serializeConnectionParams(parsed.params),
+      timeout:
+        Number.isFinite(timeoutValue) && timeoutValue > 0
+          ? Math.min(3600, Math.trunc(timeoutValue))
+          : undefined,
+    };
+  }
+
+  if (isFileDatabaseType(type)) {
+    const rawPath = trimmedUri
+      .replace(/^sqlite:\/\//i, "")
+      .replace(/^duckdb:\/\//i, "")
+      .trim();
+    if (!rawPath) {
+      return null;
+    }
+    return { host: normalizeFileDbPath(safeDecode(rawPath)) };
+  }
+
+  if (type === "redis") {
+    return parseRedisUriToFormValues(trimmedUri);
+  }
+
+  if (type === "mongodb") {
+    const parsed =
+      parseMultiHostUri(trimmedUri, "mongodb") ||
+      parseMultiHostUri(trimmedUri, "mongodb+srv");
+    if (!parsed) {
+      return null;
+    }
+    if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
+      return null;
+    }
+    if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
+      return null;
+    }
+    const isSrv = trimmedUri.toLowerCase().startsWith("mongodb+srv://");
+    const hostList = isSrv
+      ? normalizeMongoSrvHostList(parsed.hosts, 27017)
+      : normalizeAddressList(parsed.hosts, 27017);
+    if (!hostList.length) {
+      return null;
+    }
+    const primary = isSrv
+      ? { host: hostList[0] || "localhost", port: 27017 }
+      : parseHostPort(hostList[0] || "localhost:27017", 27017);
+    const timeoutMs = Number(
+      parsed.params.get("connectTimeoutMS") ||
+        parsed.params.get("serverSelectionTimeoutMS"),
+    );
+    const tlsText = String(
+      parsed.params.get("tls") || parsed.params.get("ssl") || "",
+    )
+      .trim()
+      .toLowerCase();
+    const tlsInsecureText = String(
+      parsed.params.get("tlsInsecure") ||
+        parsed.params.get("sslInsecure") ||
+        "",
+    )
+      .trim()
+      .toLowerCase();
+    const tlsEnabled =
+      tlsText === "1" ||
+      tlsText === "true" ||
+      tlsText === "yes" ||
+      tlsText === "on";
+    const tlsInsecure =
+      tlsInsecureText === "1" ||
+      tlsInsecureText === "true" ||
+      tlsInsecureText === "yes" ||
+      tlsInsecureText === "on";
+    return {
+      host: primary?.host || "localhost",
+      port: primary?.port || 27017,
+      user: parsed.username,
+      password: parsed.password,
+      database: parsed.database || "",
+      useSSL: tlsEnabled,
+      sslMode: tlsEnabled
+        ? tlsInsecure
+          ? "skip-verify"
+          : "required"
+        : "disable",
+      ...extractSSLPathValuesFromParams(parsed.params, type),
+      mongoTopology:
+        hostList.length > 1 || !!parsed.params.get("replicaSet")
+          ? "replica"
+          : "single",
+      mongoHosts: hostList.slice(1),
+      mongoSrv: isSrv,
+      mongoReplicaSet: parsed.params.get("replicaSet") || "",
+      mongoAuthSource: parsed.params.get("authSource") || "",
+      mongoReadPreference: parsed.params.get("readPreference") || "primary",
+      mongoAuthMechanism: parsed.params.get("authMechanism") || "",
+      connectionParams: serializeConnectionParams(parsed.params),
+      timeout:
+        Number.isFinite(timeoutMs) && timeoutMs > 0
+          ? Math.min(MAX_TIMEOUT_SECONDS, Math.ceil(timeoutMs / 1000))
+          : undefined,
+      savePassword: true,
+    };
+  }
+
+  if (type === "kafka") {
+    const defaultPort = getDefaultPortByType(type);
+    const parsed =
+      parseMultiHostUri(trimmedUri, "kafka") ||
+      parseMultiHostUri(trimmedUri, "apache-kafka") ||
+      parseMultiHostUri(trimmedUri, "apache_kafka");
+    if (!parsed) {
+      return null;
+    }
+    if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
+      return null;
+    }
+    if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
+      return null;
+    }
+    const hostList = normalizeAddressList(parsed.hosts, defaultPort);
+    if (!hostList.length) {
+      return null;
+    }
+    const primary = parseHostPort(
+      hostList[0] || `localhost:${defaultPort}`,
+      defaultPort,
+    );
+    const tlsEnabled = normalizeUriBool(
+      parsed.params.get("tls") ||
+        parsed.params.get("ssl") ||
+        parsed.params.get("useSSL") ||
+        parsed.params.get("use_ssl"),
+    );
+    const skipVerify = normalizeUriBool(
+      parsed.params.get("skip_verify") || parsed.params.get("skipVerify"),
+    );
+    const topology = String(parsed.params.get("topology") || "")
+      .trim()
+      .toLowerCase();
+    const timeoutValue = Number(parsed.params.get("timeout"));
+    return {
+      host: primary?.host || "localhost",
+      port: primary?.port || defaultPort,
+      user: parsed.username,
+      password: parsed.password,
+      database: parsed.database || "",
+      useSSL: tlsEnabled,
+      sslMode: tlsEnabled ? (skipVerify ? "skip-verify" : "required") : "disable",
+      ...extractSSLPathValuesFromParams(parsed.params, type),
+      kafkaTopology:
+        topology === "cluster" || hostList.length > 1 ? "cluster" : "single",
+      kafkaHosts: hostList.slice(1),
+      connectionParams: serializeConnectionParams(parsed.params),
+      timeout:
+        Number.isFinite(timeoutValue) && timeoutValue > 0
+          ? Math.min(MAX_TIMEOUT_SECONDS, Math.trunc(timeoutValue))
+          : undefined,
+    };
+  }
+
+  if (type === "mqtt") {
+    const defaultPort = getDefaultPortByType(type);
+    const parsed =
+      parseMultiHostUri(trimmedUri, "mqtt") ||
+      parseMultiHostUri(trimmedUri, "mqtts") ||
+      parseMultiHostUri(trimmedUri, "tcp") ||
+      parseMultiHostUri(trimmedUri, "ssl") ||
+      parseMultiHostUri(trimmedUri, "tls");
+    if (!parsed) {
+      return null;
+    }
+    if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
+      return null;
+    }
+    if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
+      return null;
+    }
+    const hostList = normalizeAddressList(parsed.hosts, defaultPort);
+    if (!hostList.length) {
+      return null;
+    }
+    const primary = parseHostPort(
+      hostList[0] || `localhost:${defaultPort}`,
+      defaultPort,
+    );
+    const lowerUri = trimmedUri.toLowerCase();
+    const tlsEnabled =
+      lowerUri.startsWith("mqtts://") ||
+      lowerUri.startsWith("ssl://") ||
+      lowerUri.startsWith("tls://") ||
+      normalizeUriBool(
+        parsed.params.get("tls") ||
+          parsed.params.get("ssl") ||
+          parsed.params.get("useSSL") ||
+          parsed.params.get("use_ssl"),
+      );
+    const skipVerify = normalizeUriBool(
+      parsed.params.get("skip_verify") || parsed.params.get("skipVerify"),
+    );
+    const topology = String(parsed.params.get("topology") || "")
+      .trim()
+      .toLowerCase();
+    const timeoutValue = Number(parsed.params.get("timeout"));
+    return {
+      host: primary?.host || "localhost",
+      port: primary?.port || defaultPort,
+      user: parsed.username,
+      password: parsed.password,
+      database: parsed.database || "",
+      useSSL: tlsEnabled,
+      sslMode: tlsEnabled ? (skipVerify ? "skip-verify" : "required") : "disable",
+      ...extractSSLPathValuesFromParams(parsed.params, type),
+      mqttTopology:
+        topology === "cluster" || hostList.length > 1 ? "cluster" : "single",
+      mqttHosts: hostList.slice(1),
+      connectionParams: serializeConnectionParams(parsed.params),
+      timeout:
+        Number.isFinite(timeoutValue) && timeoutValue > 0
+          ? Math.min(MAX_TIMEOUT_SECONDS, Math.trunc(timeoutValue))
+          : undefined,
+    };
+  }
+
+  if (type === "rocketmq") {
+    const defaultPort = getDefaultPortByType(type);
+    const parsed =
+      parseMultiHostUri(trimmedUri, "rocketmq") ||
+      parseMultiHostUri(trimmedUri, "rmq");
+    if (!parsed) {
+      return null;
+    }
+    if (!parsed.hosts.length || parsed.hosts.length > MAX_URI_HOSTS) {
+      return null;
+    }
+    if (parsed.hosts.some((entry) => !isValidUriHostEntry(entry))) {
+      return null;
+    }
+    const hostList = normalizeAddressList(parsed.hosts, defaultPort);
+    if (!hostList.length) {
+      return null;
+    }
+    const primary = parseHostPort(
+      hostList[0] || `localhost:${defaultPort}`,
+      defaultPort,
+    );
+    const topology = String(parsed.params.get("topology") || "")
+      .trim()
+      .toLowerCase();
+    const timeoutValue = Number(parsed.params.get("timeout"));
+    return {
+      host: primary?.host || "localhost",
+      port: primary?.port || defaultPort,
+      user: parsed.username,
+      password: parsed.password,
+      database: parsed.database || "",
+      rocketmqTopology:
+        topology === "cluster" || hostList.length > 1 ? "cluster" : "single",
+      rocketmqHosts: hostList.slice(1),
+      connectionParams: serializeConnectionParams(parsed.params),
+      timeout:
+        Number.isFinite(timeoutValue) && timeoutValue > 0
+          ? Math.min(MAX_TIMEOUT_SECONDS, Math.trunc(timeoutValue))
+          : undefined,
+    };
+  }
+
+  if (type === "rabbitmq") {
+    const defaultPort = getDefaultPortByType(type);
+    const parsed = parseSingleHostUri(
+      trimmedUri,
+      ["rabbitmq", "http", "https"],
+      defaultPort,
+    );
+    if (!parsed) {
+      return null;
+    }
+    const lowerUri = trimmedUri.toLowerCase();
+    const tlsEnabled =
+      lowerUri.startsWith("https://") ||
+      normalizeUriBool(
+        parsed.params.get("tls") ||
+          parsed.params.get("ssl") ||
+          parsed.params.get("useSSL") ||
+          parsed.params.get("use_ssl"),
+      );
+    const skipVerify = normalizeUriBool(
+      parsed.params.get("skip_verify") || parsed.params.get("skipVerify"),
+    );
+    const timeoutValue = Number(parsed.params.get("timeout"));
+    return {
+      host: parsed.host,
+      port: parsed.port,
+      user: parsed.username,
+      password: parsed.password,
+      database: parsed.database || "",
+      useSSL: tlsEnabled,
+      sslMode: tlsEnabled ? (skipVerify ? "skip-verify" : "required") : "disable",
+      ...extractSSLPathValuesFromParams(parsed.params, type),
+      connectionParams: serializeConnectionParams(parsed.params),
+      timeout:
+        Number.isFinite(timeoutValue) && timeoutValue > 0
+          ? Math.min(MAX_TIMEOUT_SECONDS, Math.trunc(timeoutValue))
+          : undefined,
+    };
+  }
+
+  if (type === "clickhouse") {
+    const httpValues = parseClickHouseHTTPUriToValues(trimmedUri);
+    if (httpValues) {
+      return httpValues;
+    }
+  }
+
+  const singleHostSchemes = singleHostUriSchemesByType[type];
+  if (singleHostSchemes && singleHostSchemes.length > 0) {
+    const parsed = parseSingleHostUri(
+      trimmedUri,
+      singleHostSchemes,
+      getDefaultPortByType(type),
+    );
+    if (!parsed) {
+      return null;
+    }
+    if (type === "oracle" && !String(parsed.database || "").trim()) {
+      // Oracle 需要显式 service name，避免 URI 解析后放过必填校验。
+      return null;
+    }
+    const parsedValues: Record<string, any> = {
+      host: parsed.host,
+      port: parsed.port,
+      user: parsed.username,
+      password: parsed.password,
+      database: parsed.database,
+    };
+    if (supportsConnectionParamsForType(type)) {
+      parsedValues.connectionParams = serializeConnectionParams(parsed.params);
+    }
+
+    if (supportsSSLForType(type)) {
+      Object.assign(parsedValues, extractSSLPathValuesFromParams(parsed.params, type));
+      const normalizeBool = (raw: unknown) => {
+        const text = String(raw ?? "")
+          .trim()
+          .toLowerCase();
+        return (
+          text === "1" || text === "true" || text === "yes" || text === "on"
+        );
+      };
+      if (
+        type === "postgres" ||
+        type === "kingbase" ||
+        type === "highgo" ||
+        type === "vastbase" ||
+        type === "opengauss" ||
+        type === "gaussdb"
+      ) {
+        const sslMode = String(parsed.params.get("sslmode") || "")
+          .trim()
+          .toLowerCase();
+        if (sslMode) {
+          parsedValues.useSSL = sslMode !== "disable" && sslMode !== "false";
+          parsedValues.sslMode =
+            sslMode === "disable" || sslMode === "false"
+              ? "disable"
+              : "required";
+        }
+      } else if (type === "sqlserver") {
+        const encrypt = String(parsed.params.get("encrypt") || "")
+          .trim()
+          .toLowerCase();
+        const trust = String(
+          parsed.params.get("TrustServerCertificate") ||
+            parsed.params.get("trustservercertificate") ||
+            "",
+        )
+          .trim()
+          .toLowerCase();
+        const encrypted =
+          encrypt === "true" ||
+          encrypt === "mandatory" ||
+          encrypt === "yes" ||
+          encrypt === "1" ||
+          encrypt === "strict";
+        if (encrypted) {
+          parsedValues.useSSL = true;
+          parsedValues.sslMode =
+            trust === "true" || trust === "1" || trust === "yes"
+              ? "skip-verify"
+              : "required";
+        } else if (encrypt) {
+          parsedValues.useSSL = false;
+          parsedValues.sslMode = "disable";
+        }
+      } else if (type === "clickhouse") {
+        parsedValues.clickHouseProtocol = normalizeClickHouseProtocolValue(
+          parsed.params.get("protocol"),
+        );
+        const secure = String(
+          parsed.params.get("secure") || parsed.params.get("tls") || "",
+        )
+          .trim()
+          .toLowerCase();
+        const skipVerify = normalizeBool(parsed.params.get("skip_verify"));
+        if (secure) {
+          parsedValues.useSSL = normalizeBool(secure);
+          parsedValues.sslMode = skipVerify
+            ? "skip-verify"
+            : parsedValues.useSSL
+              ? "required"
+              : "disable";
+        }
+      } else if (type === "dameng") {
+        const certPath = String(
+          parsed.params.get("SSL_CERT_PATH") ||
+            parsed.params.get("ssl_cert_path") ||
+            parsed.params.get("sslCertPath") ||
+            "",
+        ).trim();
+        const keyPath = String(
+          parsed.params.get("SSL_KEY_PATH") ||
+            parsed.params.get("ssl_key_path") ||
+            parsed.params.get("sslKeyPath") ||
+            "",
+        ).trim();
+        parsedValues.sslCertPath = certPath;
+        parsedValues.sslKeyPath = keyPath;
+        if (certPath || keyPath) {
+          parsedValues.useSSL = true;
+          parsedValues.sslMode = "required";
+        }
+      } else if (type === "oracle") {
+        const ssl = String(
+          parsed.params.get("SSL") || parsed.params.get("ssl") || "",
+        )
+          .trim()
+          .toLowerCase();
+        const sslVerify = String(
+          parsed.params.get("SSL VERIFY") ||
+            parsed.params.get("ssl verify") ||
+            parsed.params.get("SSL_VERIFY") ||
+            parsed.params.get("ssl_verify") ||
+            "",
+        )
+          .trim()
+          .toLowerCase();
+        if (ssl) {
+          parsedValues.useSSL = normalizeBool(ssl);
+          if (!parsedValues.useSSL) {
+            parsedValues.sslMode = "disable";
+          } else {
+            parsedValues.sslMode = normalizeBool(sslVerify || "true")
+              ? "required"
+              : "skip-verify";
+          }
+        }
+      } else if (type === "tdengine") {
+        const protocol = String(parsed.params.get("protocol") || "")
+          .trim()
+          .toLowerCase();
+        const skipVerify = normalizeBool(parsed.params.get("skip_verify"));
+        if (protocol === "wss") {
+          parsedValues.useSSL = true;
+          parsedValues.sslMode = skipVerify ? "skip-verify" : "required";
+        } else if (protocol === "ws") {
+          parsedValues.useSSL = false;
+          parsedValues.sslMode = "disable";
+        }
+      } else if (type === "chroma" || type === "qdrant") {
+        const tls = String(
+          parsed.params.get("tls") ||
+            parsed.params.get("ssl") ||
+            parsed.params.get("useSSL") ||
+            parsed.params.get("use_ssl") ||
+            "",
+        )
+          .trim()
+          .toLowerCase();
+        const skipVerify = normalizeBool(
+          parsed.params.get("skip_verify") || parsed.params.get("skipVerify"),
+        );
+        const enabled = tls ? normalizeBool(tls) : trimmedUri.toLowerCase().startsWith("https://");
+        parsedValues.useSSL = enabled;
+        parsedValues.sslMode = enabled ? (skipVerify ? "skip-verify" : "required") : "disable";
+      }
+    }
+    return parsedValues;
+  }
+
+  return null;
+};
+
+export const getUriPlaceholder = (dbType: string) => {
+  if (isMySQLCompatibleType(dbType)) {
+    const defaultPort = getDefaultPortByType(dbType);
+    const scheme =
+      dbType === "diros" ? "doris" : dbType === "starrocks" ? "starrocks" : dbType === "oceanbase" ? "oceanbase" : dbType === "goldendb" ? "goldendb" : "mysql";
+    if (dbType === "oceanbase") {
+      return `${scheme}://sys%40oracle001:pass@127.0.0.1:${defaultPort}?protocol=oracle`;
+    }
+    return `${scheme}://user:pass@127.0.0.1:${defaultPort},127.0.0.2:${defaultPort}/db_name?topology=replica`;
+  }
+  if (isFileDatabaseType(dbType)) {
+    return dbType === "duckdb"
+      ? "duckdb:///Users/name/demo.duckdb"
+      : "sqlite:///Users/name/demo.sqlite";
+  }
+  if (dbType === "mongodb") {
+    return "mongodb+srv://user:pass@cluster0.example.com/db_name?authSource=admin&authMechanism=SCRAM-SHA-256";
+  }
+  if (dbType === "clickhouse") {
+    return "clickhouse://default:pass@127.0.0.1:9000/default";
+  }
+  if (dbType === "chroma") {
+    return "http://127.0.0.1:8000/default_database?tenant=default_tenant";
+  }
+  if (dbType === "qdrant") {
+    return "http://127.0.0.1:6333";
+  }
+  if (dbType === "iotdb") {
+    return "iotdb://root:root@127.0.0.1:6667/root.sg";
+  }
+  if (dbType === "rocketmq") {
+    return "rocketmq://accessKey:secretKey@127.0.0.1:9876,127.0.0.2:9876/orders.events?topology=cluster&groupId=gonavi&namespace=prod&tag=TagA&pullBatchSize=32&startOffset=latest";
+  }
+  if (dbType === "mqtt") {
+    return "mqtt://user:pass@127.0.0.1:1883/devices%2F%2B%2Ftelemetry?topology=cluster&clientId=gonavi-desktop&qos=1";
+  }
+  if (dbType === "kafka") {
+    return "kafka://user:pass@127.0.0.1:9092,127.0.0.2:9092/orders.events?topology=cluster&groupId=analytics&mechanism=scram-sha-256";
+  }
+  if (dbType === "rabbitmq") {
+    return "rabbitmq://guest:guest@127.0.0.1:15672/%2F?defaultQueue=orders.queue&exchange=events.topic&timeout=30";
+  }
+  if (dbType === "redis") {
+    return "redis://:pass@127.0.0.1:6379,127.0.0.2:6379/0?topology=cluster 或 redis://:pass@10.0.0.1:26379,10.0.0.2:26379/0?topology=sentinel&master=mymaster";
+  }
+  if (dbType === "oracle") {
+    return "oracle://user:pass@127.0.0.1:1521/ORCLPDB1";
+  }
+  if (dbType === "iris") {
+    return "iris://user:pass@127.0.0.1:1972/USER";
+  }
+  if (dbType === "opengauss") {
+    return "opengauss://user:pass@127.0.0.1:5432/db_name";
+  }
+  if (dbType === "gaussdb") {
+    return "gaussdb://user:pass@127.0.0.1:5432/db_name";
+  }
+  return t("connection.modal.example", {
+    value: "postgres://user:pass@127.0.0.1:5432/db_name",
+  });
+};
+
+export const getConnectionParamsPlaceholder = (
+  dbType: string,
+  oceanBaseProtocol: OceanBaseProtocolChoice,
+) => {
+  if (dbType === "oceanbase") {
+    return oceanBaseProtocol === "oracle"
+      ? "PREFETCH_ROWS=5000"
+      : "useUnicode=true&characterEncoding=utf8&autoReconnect=true&useSSL=false";
+  }
+  if (isMySQLCompatibleType(dbType)) {
+    return "useUnicode=true&characterEncoding=utf8&autoReconnect=true&useSSL=false";
+  }
+  switch (dbType) {
+    case "postgres":
+    case "kingbase":
+    case "highgo":
+    case "vastbase":
+    case "opengauss":
+    case "gaussdb":
+      return "application_name=GoNavi&statement_timeout=30000";
+    case "oracle":
+      return "PREFETCH_ROWS=5000&TRACE FILE=/tmp/go-ora.trc";
+    case "sqlserver":
+      return "app name=GoNavi&packet size=32767";
+    case "iris":
+      return "timeout=30";
+    case "clickhouse":
+      return "max_execution_time=60&compress=lz4";
+    case "mongodb":
+      return "retryWrites=true&readPreference=secondaryPreferred";
+    case "chroma":
+      return "tenant=default_tenant&apiKey=...";
+    case "qdrant":
+      return "apiKey=...";
+    case "dameng":
+      return "schema=SYSDBA";
+    case "tdengine":
+      return "timezone=Asia%2FShanghai";
+    case "iotdb":
+      return "fetchSize=1024&timeZone=Asia%2FShanghai";
+    case "rocketmq":
+      return "groupId=gonavi&namespace=prod&tag=TagA&pullBatchSize=32&startOffset=latest";
+    case "mqtt":
+      return "topics=devices%2F%2B%2Ftelemetry,%24SYS%2F%23&clientId=gonavi-desktop&qos=1&cleanSession=true&fetchWaitMs=4000";
+    case "kafka":
+      return "groupId=gonavi&mechanism=scram-sha-256&clientId=gonavi-desktop&startOffset=latest";
+    case "rabbitmq":
+      return "defaultQueue=orders.queue&exchange=events.topic&managementPathPrefix=/rabbitmq";
+    default:
+      return "key=value&another=value";
+  }
+};
+
+export const buildUriFromValues = (values: any) => {
+  const type = String(values.type || "")
+    .trim()
+    .toLowerCase();
+  const defaultPort = getDefaultPortByType(type);
+  const host = String(values.host || "localhost").trim();
+  const port = Number(values.port || defaultPort);
+  const user = String(values.user || "").trim();
+  const password = String(values.password || "");
+  const database = String(values.database || "").trim();
+  const timeout = Number(values.timeout || 30);
+  const encodedAuth = user
+    ? `${encodeURIComponent(user)}${password ? `:${encodeURIComponent(password)}` : ""}@`
+    : "";
+
+  if (isMySQLCompatibleType(type)) {
+    const selectedOceanBaseProtocol =
+      type === "oceanbase"
+        ? normalizeOceanBaseProtocolValue(values.oceanBaseProtocol)
+        : "mysql";
+    const primary = toAddress(host, port, defaultPort);
+    const replicas =
+      selectedOceanBaseProtocol !== "oracle" && values.mysqlTopology === "replica"
+        ? normalizeAddressList(values.mysqlReplicaHosts, defaultPort)
+        : [];
+    const hosts = normalizeAddressList([primary, ...replicas], defaultPort);
+    const params = new URLSearchParams();
+    if (hosts.length > 1 || values.mysqlTopology === "replica") {
+      params.set("topology", "replica");
+    }
+    if (values.useSSL) {
+      const mode = String(values.sslMode || "preferred")
+        .trim()
+        .toLowerCase();
+      if (mode === "required") {
+        params.set("tls", "true");
+      } else if (mode === "skip-verify") {
+        params.set("tls", "skip-verify");
+      } else {
+        params.set("tls", "preferred");
+      }
+    }
+    appendSSLPathParamsForUri(params, type, values);
+    if (Number.isFinite(timeout) && timeout > 0) {
+      params.set("timeout", String(timeout));
+    }
+    mergeConnectionParams(params, values.connectionParams);
+    if (type === "oceanbase") {
+      params.set("protocol", selectedOceanBaseProtocol);
+    }
+    const dbPath = database ? `/${encodeURIComponent(database)}` : "/";
+    const query = params.toString();
+    const scheme =
+      type === "diros" ? "doris" : type === "starrocks" ? "starrocks" : type === "oceanbase" ? "oceanbase" : type === "goldendb" ? "goldendb" : "mysql";
+    return `${scheme}://${encodedAuth}${hosts.join(",")}${dbPath}${query ? `?${query}` : ""}`;
+  }
+
+  if (type === "kafka") {
+    const primary = toAddress(host, port, defaultPort);
+    const brokers =
+      values.kafkaTopology === "cluster"
+        ? normalizeAddressList(values.kafkaHosts, defaultPort)
+        : [];
+    const allBrokers = normalizeAddressList([primary, ...brokers], defaultPort);
+    const params = new URLSearchParams();
+    if (allBrokers.length > 1 || values.kafkaTopology === "cluster") {
+      params.set("topology", "cluster");
+    }
+    if (values.useSSL) {
+      const mode = String(values.sslMode || "preferred")
+        .trim()
+        .toLowerCase();
+      params.set("tls", "true");
+      if (mode === "skip-verify" || mode === "preferred") {
+        params.set("skip_verify", "true");
+      }
+      appendSSLPathParamsForUri(params, type, values);
+    }
+    if (Number.isFinite(timeout) && timeout > 0) {
+      params.set("timeout", String(timeout));
+    }
+    mergeConnectionParams(params, values.connectionParams);
+    const topicPath = database ? `/${encodeURIComponent(database)}` : "";
+    const query = params.toString();
+    return `kafka://${encodedAuth}${allBrokers.join(",")}${topicPath}${query ? `?${query}` : ""}`;
+  }
+
+  if (type === "mqtt") {
+    const primary = toAddress(host, port, defaultPort);
+    const brokers =
+      values.mqttTopology === "cluster"
+        ? normalizeAddressList(values.mqttHosts, defaultPort)
+        : [];
+    const allBrokers = normalizeAddressList([primary, ...brokers], defaultPort);
+    const params = new URLSearchParams();
+    if (allBrokers.length > 1 || values.mqttTopology === "cluster") {
+      params.set("topology", "cluster");
+    }
+    if (values.useSSL) {
+      const mode = String(values.sslMode || "preferred")
+        .trim()
+        .toLowerCase();
+      params.set("tls", "true");
+      if (mode === "skip-verify" || mode === "preferred") {
+        params.set("skip_verify", "true");
+      }
+      appendSSLPathParamsForUri(params, type, values);
+    }
+    if (Number.isFinite(timeout) && timeout > 0) {
+      params.set("timeout", String(timeout));
+    }
+    mergeConnectionParams(params, values.connectionParams);
+    const topicPath = database ? `/${encodeURIComponent(database)}` : "";
+    const query = params.toString();
+    return `mqtt://${encodedAuth}${allBrokers.join(",")}${topicPath}${query ? `?${query}` : ""}`;
+  }
+
+  if (type === "rocketmq") {
+    const primary = toAddress(host, port, defaultPort);
+    const nameservers =
+      values.rocketmqTopology === "cluster"
+        ? normalizeAddressList(values.rocketmqHosts, defaultPort)
+        : [];
+    const allNameServers = normalizeAddressList([primary, ...nameservers], defaultPort);
+    const params = new URLSearchParams();
+    if (allNameServers.length > 1 || values.rocketmqTopology === "cluster") {
+      params.set("topology", "cluster");
+    }
+    if (Number.isFinite(timeout) && timeout > 0) {
+      params.set("timeout", String(timeout));
+    }
+    mergeConnectionParams(params, values.connectionParams);
+    const topicPath = database ? `/${encodeURIComponent(database)}` : "";
+    const query = params.toString();
+    return `rocketmq://${encodedAuth}${allNameServers.join(",")}${topicPath}${query ? `?${query}` : ""}`;
+  }
+
+  if (type === "rabbitmq") {
+    const address = toAddress(host, port, defaultPort);
+    const params = new URLSearchParams();
+    if (values.useSSL) {
+      const mode = String(values.sslMode || "preferred")
+        .trim()
+        .toLowerCase();
+      params.set("tls", "true");
+      if (mode === "skip-verify" || mode === "preferred") {
+        params.set("skip_verify", "true");
+      }
+      appendSSLPathParamsForUri(params, type, values);
+    }
+    if (Number.isFinite(timeout) && timeout > 0) {
+      params.set("timeout", String(timeout));
+    }
+    mergeConnectionParams(params, values.connectionParams);
+    const vhostPath = database ? `/${encodeURIComponent(database)}` : "";
+    const query = params.toString();
+    return `rabbitmq://${encodedAuth}${address}${vhostPath}${query ? `?${query}` : ""}`;
+  }
+
+  if (type === "redis") {
+    return buildRedisUriFromValues(values);
+  }
+
+  if (isFileDatabaseType(type)) {
+    const pathText = normalizeFileDbPath(String(values.host || "").trim());
+    if (!pathText) {
+      return `${type}://`;
+    }
+    return `${type}://${encodeURI(pathText)}`;
+  }
+
+  if (type === "mongodb") {
+    const useSrv = !!values.mongoSrv;
+    const primaryAddress = useSrv
+      ? parseHostPort(host, 27017)?.host || host || "localhost"
+      : toAddress(host, port, 27017);
+    const extraNodes =
+      values.mongoTopology === "replica"
+        ? useSrv
+          ? normalizeMongoSrvHostList(values.mongoHosts, 27017)
+          : normalizeAddressList(values.mongoHosts, 27017)
+        : [];
+    const hosts = useSrv
+      ? normalizeMongoSrvHostList([primaryAddress, ...extraNodes], 27017)
+      : normalizeAddressList([primaryAddress, ...extraNodes], 27017);
+    const scheme = useSrv ? "mongodb+srv" : "mongodb";
+    const params = new URLSearchParams();
+    const authSource = String(
+      values.mongoAuthSource || database || "admin",
+    ).trim();
+    if (authSource) {
+      params.set("authSource", authSource);
+    }
+    const replicaSet = String(values.mongoReplicaSet || "").trim();
+    if (replicaSet) {
+      params.set("replicaSet", replicaSet);
+    }
+    const readPreference = String(values.mongoReadPreference || "").trim();
+    if (readPreference) {
+      params.set("readPreference", readPreference);
+    }
+    const authMechanism = String(values.mongoAuthMechanism || "").trim();
+    if (authMechanism) {
+      params.set("authMechanism", authMechanism);
+    }
+    if (values.useSSL) {
+      const mode = String(values.sslMode || "preferred")
+        .trim()
+        .toLowerCase();
+      params.set("tls", "true");
+      if (mode === "skip-verify" || mode === "preferred") {
+        params.set("tlsInsecure", "true");
+      } else {
+        params.delete("tlsInsecure");
+      }
+    }
+    appendSSLPathParamsForUri(params, type, values);
+    if (Number.isFinite(timeout) && timeout > 0) {
+      params.set("connectTimeoutMS", String(timeout * 1000));
+      params.set("serverSelectionTimeoutMS", String(timeout * 1000));
+    }
+    mergeConnectionParams(params, values.connectionParams);
+    const dbPath = database ? `/${encodeURIComponent(database)}` : "/";
+    const query = params.toString();
+    return `${scheme}://${encodedAuth}${hosts.join(",")}${dbPath}${query ? `?${query}` : ""}`;
+  }
+
+  const clickHouseProtocol =
+    type === "clickhouse"
+      ? normalizeClickHouseProtocolValue(values.clickHouseProtocol)
+      : "auto";
+  const scheme =
+    type === "gaussdb"
+      ? "gaussdb"
+      : type === "postgres"
+      ? "postgresql"
+      : type === "chroma" || type === "qdrant"
+        ? values.useSSL
+          ? "https"
+          : "http"
+      : type === "clickhouse" && clickHouseProtocol === "http"
+        ? values.useSSL
+          ? "https"
+          : "http"
+        : type;
+  const dbPath = database ? `/${encodeURIComponent(database)}` : "";
+  const params = new URLSearchParams();
+  if (supportsSSLForType(type) && values.useSSL) {
+    const mode = String(values.sslMode || "preferred")
+      .trim()
+      .toLowerCase();
+    if (isPostgresCompatibleSSLType(type)) {
+      params.set(
+        "sslmode",
+        mode === "skip-verify"
+          ? "require"
+          : String(values.sslCAPath || "").trim()
+            ? "verify-ca"
+            : "require",
+      );
+      appendSSLPathParamsForUri(params, type, values);
+    } else if (type === "sqlserver") {
+      params.set("encrypt", "true");
+      params.set(
+        "TrustServerCertificate",
+        mode === "skip-verify" || mode === "preferred" ? "true" : "false",
+      );
+      appendSSLPathParamsForUri(params, type, values);
+    } else if (type === "clickhouse") {
+      if (clickHouseProtocol === "http") {
+        if (mode === "skip-verify" || mode === "preferred") {
+          params.set("skip_verify", "true");
+        }
+      } else {
+        params.set("secure", "true");
+        if (mode === "skip-verify" || mode === "preferred") {
+          params.set("skip_verify", "true");
+        }
+      }
+      appendSSLPathParamsForUri(params, type, values);
+    } else if (type === "dameng") {
+      appendSSLPathParamsForUri(params, type, values);
+    } else if (type === "oracle") {
+      params.set("SSL", "TRUE");
+      params.set("SSL VERIFY", mode === "required" ? "TRUE" : "FALSE");
+    } else if (type === "tdengine") {
+      params.set("protocol", "wss");
+      if (mode === "skip-verify" || mode === "preferred") {
+        params.set("skip_verify", "true");
+      }
+    } else if (type === "chroma" || type === "qdrant") {
+      if (mode === "skip-verify" || mode === "preferred") {
+        params.set("skip_verify", "true");
+      }
+      appendSSLPathParamsForUri(params, type, values);
+    }
+  } else if (supportsSSLForType(type)) {
+    if (isPostgresCompatibleSSLType(type)) {
+      params.set("sslmode", "disable");
+    } else if (type === "sqlserver") {
+      params.set("encrypt", "disable");
+      params.set("TrustServerCertificate", "true");
+    } else if (type === "tdengine") {
+      params.set("protocol", "ws");
+    }
+  }
+  if (type === "clickhouse" && clickHouseProtocol !== "auto") {
+    params.set("protocol", clickHouseProtocol);
+  }
+  if (supportsConnectionParamsForType(type)) {
+    mergeConnectionParams(params, values.connectionParams);
+  }
+  const query = params.toString();
+  return `${scheme}://${encodedAuth}${toAddress(host, port, defaultPort)}${dbPath}${query ? `?${query}` : ""}`;
+};
diff --git a/frontend/src/components/dataGridStyles.ts b/frontend/src/components/dataGridStyles.ts
new file mode 100644
index 0000000..59b95a8
--- /dev/null
+++ b/frontend/src/components/dataGridStyles.ts
@@ -0,0 +1,691 @@
+type DataGridCssTextParams = Record<string, any>;
+
+export const buildDataGridCssText = ({
+    darkMode,
+    dataGridBackdropFilter,
+    dataTableVerticalBorderRule,
+    densityParams,
+    floatingScrollbarBottomOffset,
+    floatingScrollbarHeight,
+    floatingScrollbarInset,
+    floatingScrollbarThumbBg,
+    floatingScrollbarThumbBorderColor,
+    floatingScrollbarThumbHoverBg,
+    floatingScrollbarThumbShadow,
+    gridId,
+    horizontalScrollbarThumbBg,
+    horizontalScrollbarThumbBorderColor,
+    horizontalScrollbarThumbHoverBg,
+    horizontalScrollbarThumbShadow,
+    horizontalScrollbarTrackBg,
+    horizontalScrollbarTrackBorderColor,
+    horizontalScrollbarTrackShadow,
+    paginationAccentBg,
+    paginationAccentBorderColor,
+    paginationActiveItemBg,
+    paginationActiveItemBorderColor,
+    paginationActiveItemTextColor,
+    paginationChipBg,
+    paginationChipBorderColor,
+    paginationHoverBg,
+    paginationPrimaryTextColor,
+    paginationSecondaryTextColor,
+    paginationShellBg,
+    paginationShellBorderColor,
+    paginationShellShadow,
+    panelRadius,
+    rowAddedBg,
+    rowAddedHover,
+    rowModBg,
+    rowModHover,
+    selectionAccentHex,
+    selectionAccentRgb,
+    tableBodyBottomPadding,
+    useVirtualEditablePaintContain,
+    useVirtualEditableVisibilityHints,
+    useVirtualHolderPaintHints,
+    useVirtualRowCellContain,
+    verticalScrollbarTrackBg,
+}: DataGridCssTextParams) => `

+                .${gridId} .data-grid-toolbar-scroll > * {

+                    flex-shrink: 0;

+                }

+                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar {

+                    height: 7px;

+                }

+                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar-thumb {

+                    background: ${darkMode ? 'rgba(255,255,255,0.28)' : 'rgba(0,0,0,0.22)'};

+                    border: 0;

+                    background-clip: border-box;

+                    border-radius: 999px;

+                }

+                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar-thumb:hover {

+                    background: ${darkMode ? 'rgba(255,255,255,0.38)' : 'rgba(0,0,0,0.32)'};

+                    border: 0;

+                    background-clip: border-box;

+                }

+                .${gridId} .data-grid-toolbar-scroll::-webkit-scrollbar-track {

+                    background: transparent;

+                }

+                .${gridId} .ant-table,

+                .${gridId} .ant-table-wrapper,

+                .${gridId} .ant-table-container {

+                    background: transparent !important;

+                    border-radius: ${panelRadius}px !important;

+                }

+                .${gridId} .ant-table-wrapper,

+                .${gridId} .ant-table-container {

+                    border: none !important;

+                    overflow: hidden !important;

+                }

+                .${gridId} .ant-table-tbody > tr > td,

+                .${gridId} .ant-table-tbody .ant-table-row > .ant-table-cell,

+                .${gridId} .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell { background: transparent !important; border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'} !important; border-inline-end: ${dataTableVerticalBorderRule} !important; font-size: ${densityParams.dataFontSize}px !important; vertical-align: middle !important; }

+                .${gridId} .ant-table-thead > tr > th { background: transparent !important; border-bottom: 1px solid ${darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'} !important; border-inline-end: ${dataTableVerticalBorderRule} !important; font-size: ${densityParams.dataFontSize}px !important; }

+                .${gridId} .ant-table-tbody > tr > td:last-child,

+                .${gridId} .ant-table-tbody .ant-table-row > .ant-table-cell:last-child,

+                .${gridId} .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell:last-child,

+                .${gridId} .ant-table-thead > tr > th:last-child {

+                    border-inline-end-color: transparent !important;

+                }

+                /* 选择列对齐：header TH 无 class（Ant Design 虚拟模式），需用 :first-child 匹配 */

+                .${gridId} .ant-table-header th:first-child,

+                .${gridId} .ant-table-thead > tr > th:first-child {

+                    text-align: center !important;

+                    padding-inline-start: 0 !important;

+                    padding-inline-end: 0 !important;

+                    padding-left: 0 !important;

+                    padding-right: 0 !important;

+                }

+                .${gridId} .ant-table-selection-column {

+                    vertical-align: middle !important;

+                    text-align: center !important;

+                    padding-inline-start: 0 !important;

+                    padding-inline-end: 0 !important;

+                }

+                .${gridId} .ant-table-selection-column .ant-checkbox-wrapper {

+                    display: inline-flex !important;

+                    align-items: center !important;

+                    justify-content: center !important;

+                    margin-right: 0 !important;

+                }

+                /* 窄表场景下 rc-table 会按视口等比放大选择列宽度，不能再额外锁死 header 宽度；

+                   这里只统一 header/body 的内边距与对齐方式，避免第一列把后续数据列整体顶偏。 */

+                .${gridId} .ant-table-tbody > tr > td.ant-table-selection-column,

+                .${gridId} .ant-table-tbody .ant-table-row > .ant-table-cell.ant-table-selection-column {

+                    text-align: center !important;

+                    vertical-align: middle !important;

+                    padding-inline-start: 0 !important;

+                    padding-inline-end: 0 !important;

+                    padding-left: 0 !important;

+                    padding-right: 0 !important;

+                }

+                .${gridId} .ant-table-tbody > tr > td.ant-table-selection-column .ant-checkbox-wrapper,

+                .${gridId} .ant-table-tbody .ant-table-row > .ant-table-cell.ant-table-selection-column .ant-checkbox-wrapper {

+                    display: inline-flex !important;

+                    align-items: center !important;

+                    justify-content: center !important;

+                    margin-right: 0 !important;

+                }

+                .${gridId} .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell.ant-table-selection-column {

+                    display: flex !important;

+                    align-items: center !important;

+                    justify-content: center !important;

+                    padding-inline-start: 0 !important;

+                    padding-inline-end: 0 !important;

+                    padding-left: 0 !important;

+                    padding-right: 0 !important;

+                }

+                .${gridId} .ant-table-thead > tr:first-child > th:first-child,

+                .${gridId} .ant-table-header table > thead > tr:first-child > th:first-child {

+                    border-top-left-radius: ${panelRadius}px !important;

+                }

+                .${gridId} .ant-table-thead > tr:first-child > th:last-child,

+                .${gridId} .ant-table-header table > thead > tr:first-child > th:last-child {

+                    border-top-right-radius: ${panelRadius}px !important;

+                }

+                .${gridId} .ant-table-body {

+                    border-bottom-left-radius: ${panelRadius}px !important;

+                    border-bottom-right-radius: ${panelRadius}px !important;

+                }

+                .${gridId} .ant-table-thead > tr > th::before { display: none !important; }

+                .${gridId} .ant-table-thead > tr > th .ant-table-column-sorters { cursor: default !important; }

+                .${gridId} .ant-table-thead > tr > th .ant-table-column-sorter,

+                .${gridId} .ant-table-thead > tr > th .ant-table-column-sorter * { cursor: pointer !important; }

+                .${gridId} .ant-table-tbody > tr:hover > td,

+                .${gridId} .ant-table-tbody .ant-table-row:hover > .ant-table-cell { background-color: ${darkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.02)'} !important; }

+                .${gridId} .ant-table-tbody > tr.ant-table-row-selected > td,

+                .${gridId} .ant-table-tbody .ant-table-row.ant-table-row-selected > .ant-table-cell { background-color: ${darkMode ? `rgba(${selectionAccentRgb}, 0.18)` : `rgba(${selectionAccentRgb}, 0.08)`} !important; }

+                .${gridId} .ant-table-tbody > tr.ant-table-row-selected:hover > td,

+                .${gridId} .ant-table-tbody .ant-table-row.ant-table-row-selected:hover > .ant-table-cell { background-color: ${darkMode ? `rgba(${selectionAccentRgb}, 0.28)` : `rgba(${selectionAccentRgb}, 0.12)`} !important; }

+                .${gridId} .row-added td,

+                .${gridId} .row-added > .ant-table-cell { background-color: ${rowAddedBg} !important; color: ${darkMode ? '#e6fffb' : 'inherit'}; }

+                .${gridId} .row-modified td,

+                .${gridId} .row-modified > .ant-table-cell { background-color: ${rowModBg} !important; color: ${darkMode ? '#e6f7ff' : 'inherit'}; }

+                .${gridId} .row-deleted td,

+                .${gridId} .row-deleted > .ant-table-cell { background-color: ${darkMode ? '#1f1f1f' : '#f0f0f0'} !important; color: ${darkMode ? '#595959' : '#bfbfbf'} !important; text-decoration: line-through; }

+                .${gridId} .ant-table-tbody > tr.row-added:hover > td,

+                .${gridId} .ant-table-tbody .ant-table-row.row-added:hover > .ant-table-cell { background-color: ${rowAddedHover} !important; }

+                .${gridId} .ant-table-tbody > tr.row-modified:hover > td,

+                .${gridId} .ant-table-tbody .ant-table-row.row-modified:hover > .ant-table-cell { background-color: ${rowModHover} !important; }

+                .${gridId} .ant-table-tbody > tr.row-deleted:hover > td,

+                .${gridId} .ant-table-tbody .ant-table-row.row-deleted:hover > .ant-table-cell { background-color: ${darkMode ? '#2a2a2a' : '#e8e8e8'} !important; }

+                .${gridId}.cell-edit-mode .ant-table-tbody > tr > td[data-col-name],

+                .${gridId}.cell-edit-mode .ant-table-tbody .ant-table-row > .ant-table-cell[data-col-name] { user-select: none; -webkit-user-select: none; cursor: crosshair; }

+                .${gridId} .ant-table-tbody > tr > td[data-cell-selected="true"],

+                .${gridId} .ant-table-tbody .ant-table-row > .ant-table-cell[data-cell-selected="true"],

+                .${gridId} [data-cell-selected="true"] {

+                    box-shadow: inset 0 0 0 2px ${selectionAccentHex} !important;

+                    background-image: linear-gradient(${darkMode ? `rgba(${selectionAccentRgb}, 0.20)` : `rgba(${selectionAccentRgb}, 0.08)`}, ${darkMode ? `rgba(${selectionAccentRgb}, 0.20)` : `rgba(${selectionAccentRgb}, 0.08)`}) !important;

+                }

+                .${gridId} .ant-table-content,

+                .${gridId} .ant-table-body {

+                    scrollbar-gutter: stable;

+                }

+                .${gridId} .ant-table-body {

+                    padding-bottom: ${tableBodyBottomPadding}px;

+                    box-sizing: border-box;

+                    scroll-padding-bottom: ${tableBodyBottomPadding}px;

+                    contain: layout paint style;

+                }

+                .${gridId} .ant-table-tbody-virtual-holder,

+                .${gridId} .rc-virtual-list-holder {

+                    padding-bottom: ${tableBodyBottomPadding}px;

+                    box-sizing: border-box;

+                    scroll-padding-bottom: ${tableBodyBottomPadding}px;

+                    contain: ${useVirtualHolderPaintHints ? 'layout paint style' : 'layout style'};

+                    content-visibility: ${useVirtualHolderPaintHints ? 'auto' : 'visible'};

+                }

+                .${gridId} .ant-table-tbody-virtual-holder-inner {

+                    padding-bottom: ${tableBodyBottomPadding}px;

+                    box-sizing: border-box;

+                    contain: ${useVirtualHolderPaintHints ? 'layout paint style' : 'layout style'};

+                }

+                .${gridId} .ant-table-tbody-virtual-holder .ant-table-row,

+                .${gridId} .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell {

+                    contain: ${useVirtualRowCellContain ? 'layout paint style' : 'none'};

+                }

+                .${gridId}.gn-v2-data-grid .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell {

+                    overflow: hidden;

+                    text-overflow: ellipsis;

+                    white-space: nowrap;

+                }

+                .${gridId}.gn-v2-data-grid .ant-table-tbody > tr > td,

+                .${gridId}.gn-v2-data-grid .ant-table-tbody .ant-table-row > .ant-table-cell,

+                .${gridId}.gn-v2-data-grid .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell {

+                    vertical-align: middle !important;

+                }

+                .${gridId}.gn-v2-data-grid .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell.ant-table-cell-row-hover,

+                .${gridId}.gn-v2-data-grid .ant-table-tbody-virtual-holder .ant-table-row > .ant-table-cell.data-grid-virtual-inline-editing {

+                    overflow: visible;

+                    text-overflow: clip;

+                    white-space: normal;

+                }

+                .${gridId} .data-grid-table-wrap {

+                    width: 100%;

+                    max-width: 100%;

+                    overflow: hidden;

+                }

+                .${gridId} .ant-table-sticky-scroll {

+                    display: none !important;

+                }

+                .${gridId} .data-grid-find-highlight {

+                    padding: 0 1px;

+                    border-radius: 3px;

+                    background: ${darkMode ? 'rgba(246, 196, 83, 0.42)' : 'rgba(255, 193, 7, 0.42)'};

+                    color: inherit;

+                }

+                .${gridId} .editable-cell-value-wrap {

+                    display: block;

+                    width: 100%;

+                    min-width: 0;

+                    min-height: 20px;

+                    padding-right: 0;

+                    position: relative;

+                    contain: ${useVirtualEditablePaintContain ? 'layout paint style' : 'layout style'};

+                }

+                .${gridId} .editable-cell-value-wrap > * {

+                    min-width: 0;

+                }

+                .${gridId} .data-grid-inline-editor-form-item,

+                .${gridId} .data-grid-inline-editor-form-item .ant-form-item-row,

+                .${gridId} .data-grid-inline-editor-form-item .ant-form-item-control,

+                .${gridId} .data-grid-inline-editor-form-item .ant-form-item-control-input,

+                .${gridId} .data-grid-inline-editor-form-item .ant-form-item-control-input-content {

+                    width: 100%;

+                    min-width: 0;

+                }

+                .${gridId} .data-grid-inline-editor-input,

+                .${gridId} .data-grid-inline-editor-form-item .ant-picker {

+                    width: 100% !important;

+                    min-width: 0;

+                }

+                .${gridId} .ant-table-tbody-virtual-holder .editable-cell-value-wrap {

+                    content-visibility: ${useVirtualEditableVisibilityHints ? 'auto' : 'visible'};

+                    contain-intrinsic-size: ${useVirtualEditableVisibilityHints ? '24px 160px' : 'auto'};

+                }

+                /* 虚拟表列对齐：阻止 header <table> 通过 min-width:100% 拉伸到视口，

+                   使 header 列宽与虚拟 body 单元格宽度精确一致 */

+                .${gridId} .ant-table-header > table {

+                    min-width: 0 !important;

+                }

+                .${gridId} .ant-table-tbody-virtual-scrollbar.ant-table-tbody-virtual-scrollbar-horizontal {

+                    display: none !important;

+                }

+                .${gridId} .data-grid-table-wrap.data-grid-table-wrap-external-active .ant-table-content {

+                    overflow-x: hidden !important;

+                }

+                .${gridId} .data-grid-table-wrap.data-grid-table-wrap-external-active .ant-table-body {

+                    overflow-x: hidden !important;

+                    overflow-y: auto !important;

+                }

+                .${gridId} .data-grid-table-wrap.data-grid-table-wrap-external-active .ant-table-tbody-virtual-holder,

+                .${gridId} .data-grid-table-wrap.data-grid-table-wrap-external-active .rc-virtual-list-holder {

+                    overflow-x: hidden !important;

+                }

+                .${gridId} .ant-table-body {

+                    scrollbar-width: thin;

+                    scrollbar-color: ${floatingScrollbarThumbBg} transparent;

+                }

+                .${gridId} .ant-table-body::-webkit-scrollbar {

+                    width: ${floatingScrollbarHeight}px;

+                    height: 0;

+                }

+                .${gridId} .ant-table-body::-webkit-scrollbar-track {

+                    background: ${verticalScrollbarTrackBg};

+                    margin: 8px 0;

+                    border-radius: 999px;

+                }

+                .${gridId} .ant-table-body::-webkit-scrollbar-thumb {

+                    background: ${floatingScrollbarThumbBg};

+                    border: 1px solid ${floatingScrollbarThumbBorderColor};

+                    background-clip: border-box;

+                    border-radius: 999px;

+                    box-shadow: ${floatingScrollbarThumbShadow};

+                }

+                .${gridId} .ant-table-body::-webkit-scrollbar-thumb:hover {

+                    background: ${floatingScrollbarThumbHoverBg};

+                    border: 1px solid ${floatingScrollbarThumbBorderColor};

+                    background-clip: border-box;

+                    box-shadow: ${floatingScrollbarThumbShadow};

+                }

+                .${gridId} .rc-virtual-list-holder {

+                    scrollbar-width: thin;

+                    scrollbar-color: ${floatingScrollbarThumbBg} transparent;

+                }

+                .${gridId} .rc-virtual-list-holder::-webkit-scrollbar {

+                    width: ${floatingScrollbarHeight}px;

+                    height: 0;

+                }

+                .${gridId} .rc-virtual-list-holder::-webkit-scrollbar-track {

+                    background: ${verticalScrollbarTrackBg};

+                    margin: 8px 0;

+                    border-radius: 999px;

+                }

+                .${gridId} .rc-virtual-list-holder::-webkit-scrollbar-thumb {

+                    background: ${floatingScrollbarThumbBg};

+                    border: 1px solid ${floatingScrollbarThumbBorderColor};

+                    background-clip: border-box;

+                    border-radius: 999px;

+                    box-shadow: ${floatingScrollbarThumbShadow};

+                }

+                .${gridId} .rc-virtual-list-holder::-webkit-scrollbar-thumb:hover {

+                    background: ${floatingScrollbarThumbHoverBg};

+                    border: 1px solid ${floatingScrollbarThumbBorderColor};

+                    background-clip: border-box;

+                    box-shadow: ${floatingScrollbarThumbShadow};

+                }

+                .${gridId} .data-grid-external-horizontal-scroll {

+                    position: absolute;

+                    left: ${floatingScrollbarInset}px;

+                    right: ${floatingScrollbarInset}px;

+                    bottom: ${floatingScrollbarBottomOffset}px;

+                    height: ${floatingScrollbarHeight + 4}px;

+                    overflow-x: auto;

+                    overflow-y: hidden;

+                    background: transparent;

+                    z-index: 24;

+                }

+                .${gridId} .data-grid-external-horizontal-scroll::-webkit-scrollbar {

+                    height: ${floatingScrollbarHeight}px;

+                }

+                .${gridId} .data-grid-external-horizontal-scroll::-webkit-scrollbar-track {

+                    background: ${horizontalScrollbarTrackBg};

+                    border: 1px solid ${horizontalScrollbarTrackBorderColor};

+                    border-radius: 999px;

+                    box-shadow: ${horizontalScrollbarTrackShadow};

+                }

+                .${gridId} .data-grid-external-horizontal-scroll::-webkit-scrollbar-thumb {

+                    background: ${horizontalScrollbarThumbBg};

+                    border: 1px solid ${horizontalScrollbarThumbBorderColor};

+                    background-clip: border-box;

+                    border-radius: 999px;

+                    box-shadow: ${horizontalScrollbarThumbShadow};

+                }

+                .${gridId} .data-grid-external-horizontal-scroll::-webkit-scrollbar-thumb:hover {

+                    background: ${horizontalScrollbarThumbHoverBg};

+                    border: 1px solid ${horizontalScrollbarThumbBorderColor};

+                    background-clip: border-box;

+                    box-shadow: ${horizontalScrollbarThumbShadow};

+                }

+                .${gridId} .data-grid-external-horizontal-scroll-inner {

+                    height: 1px;

+                }

+                .${gridId} .data-grid-pagination-shell {

+                    display: inline-flex;

+                    align-items: center;

+                    justify-content: flex-end;

+                    gap: 10px;

+                    flex-wrap: wrap;

+                    max-width: 100%;

+                    padding: 8px 10px;

+                    border-radius: 16px;

+                    border: 1px solid ${paginationShellBorderColor};

+                    background: ${paginationShellBg};

+                    box-shadow: ${paginationShellShadow};

+                    backdrop-filter: ${dataGridBackdropFilter};

+                    -webkit-backdrop-filter: ${dataGridBackdropFilter};

+                }

+                .${gridId} .data-grid-pagination-summary,

+                .${gridId} .data-grid-pagination-page-chip {

+                    display: inline-flex;

+                    align-items: center;

+                    gap: 8px;

+                    min-height: 34px;

+                    padding: 0 12px;

+                    border-radius: 999px;

+                    border: 1px solid ${paginationChipBorderColor};

+                    background: ${paginationChipBg};

+                    color: ${paginationPrimaryTextColor};

+                    font-size: 12px;

+                    line-height: 1;

+                    font-variant-numeric: tabular-nums;

+                    white-space: nowrap;

+                }

+                .${gridId} .data-grid-pagination-kicker {

+                    display: inline-flex;

+                    align-items: center;

+                    height: 20px;

+                    padding: 0 8px;

+                    border-radius: 999px;

+                    background: ${paginationAccentBg};

+                    border: 1px solid ${paginationAccentBorderColor};

+                    color: ${paginationActiveItemTextColor};

+                    font-size: 11px;

+                    font-weight: 700;

+                    letter-spacing: 0.02em;

+                }

+                .${gridId} .data-grid-pagination-summary-value {

+                    color: ${paginationPrimaryTextColor};

+                    font-weight: 600;

+                    font-variant-numeric: tabular-nums;

+                }

+                .${gridId} .data-grid-pagination-page-chip {

+                    color: ${paginationSecondaryTextColor};

+                    font-weight: 600;

+                }

+                .${gridId} .ant-pagination {

+                    display: inline-flex;

+                    align-items: center;

+                    gap: 6px;

+                    margin: 0;

+                    color: ${paginationPrimaryTextColor};

+                }

+                .${gridId} .ant-pagination .ant-pagination-item,

+                .${gridId} .ant-pagination .ant-pagination-prev,

+                .${gridId} .ant-pagination .ant-pagination-next,

+                .${gridId} .ant-pagination .ant-pagination-jump-prev,

+                .${gridId} .ant-pagination .ant-pagination-jump-next {

+                    min-width: 34px;

+                    height: 34px;

+                    margin-inline-end: 0;

+                    border-radius: 12px;

+                    border: 1px solid ${paginationChipBorderColor};

+                    background: ${paginationChipBg};

+                    box-shadow: none;

+                    display: inline-flex;

+                    align-items: center;

+                    justify-content: center;

+                    overflow: hidden;

+                    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;

+                }

+                .${gridId} .ant-pagination .ant-pagination-item a,

+                .${gridId} .ant-pagination .ant-pagination-prev .ant-pagination-item-link,

+                .${gridId} .ant-pagination .ant-pagination-next .ant-pagination-item-link,

+                .${gridId} .ant-pagination .ant-pagination-prev > *,

+                .${gridId} .ant-pagination .ant-pagination-next > * {

+                    display: flex;

+                    align-items: center;

+                    justify-content: center;

+                    width: 100%;

+                    height: 100%;

+                    color: ${paginationPrimaryTextColor};

+                    font-weight: 600;

+                    border: none;

+                    background: transparent;

+                    border-radius: inherit;

+                    line-height: 1;

+                }

+                .${gridId} .ant-pagination .ant-pagination-item:hover,

+                .${gridId} .ant-pagination .ant-pagination-prev:hover,

+                .${gridId} .ant-pagination .ant-pagination-next:hover {

+                    background: ${paginationHoverBg};

+                    border-color: ${paginationActiveItemBorderColor};

+                    transform: translateY(-1px);

+                }

+                .${gridId} .ant-pagination .ant-pagination-item-active {

+                    border-color: ${paginationActiveItemBorderColor};

+                    background: ${paginationActiveItemBg};

+                    box-shadow: inset 0 0 0 1px ${paginationAccentBorderColor};

+                }

+                .${gridId} .ant-pagination .ant-pagination-item-active a {

+                    color: ${paginationActiveItemTextColor};

+                }

+                .${gridId} .ant-pagination .ant-pagination-disabled,

+                .${gridId} .ant-pagination .ant-pagination-disabled:hover {

+                    background: transparent;

+                    border-color: ${paginationChipBorderColor};

+                    transform: none;

+                    opacity: 0.42;

+                }

+                .${gridId} .ant-pagination .ant-pagination-jump-prev,

+                .${gridId} .ant-pagination .ant-pagination-jump-next {

+                    padding: 0;

+                }

+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link,

+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link {

+                    position: relative;

+                    display: flex;

+                    align-items: center;

+                    justify-content: center;

+                    width: 100%;

+                    height: 100%;

+                    padding: 0;

+                    margin: 0;

+                    line-height: 1;

+                }

+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-container,

+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-container {

+                    display: flex;

+                    align-items: center;

+                    justify-content: center;

+                    width: 100%;

+                    height: 100%;

+                    position: relative;

+                    line-height: 1;

+                }

+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-ellipsis,

+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-ellipsis,

+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link-icon,

+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link-icon {

+                    position: absolute !important;

+                    top: 0 !important;

+                    right: 0 !important;

+                    bottom: 0 !important;

+                    left: 0 !important;

+                    inset: 0 !important;

+                    width: fit-content !important;

+                    height: fit-content !important;

+                    min-width: 0 !important;

+                    min-height: 0 !important;

+                    margin: auto !important;

+                    padding: 0 !important;

+                    transform: none !important;

+                    display: inline-flex !important;

+                    align-items: center !important;

+                    justify-content: center !important;

+                    line-height: 1 !important;

+                    color: ${paginationSecondaryTextColor};

+                }

+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-ellipsis,

+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-ellipsis {

+                    letter-spacing: 0.18em;

+                    text-indent: 0.18em;

+                    text-align: center;

+                }

+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link-icon .anticon,

+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link-icon .anticon,

+                .${gridId} .ant-pagination .ant-pagination-jump-prev .ant-pagination-item-link-icon svg,

+                .${gridId} .ant-pagination .ant-pagination-jump-next .ant-pagination-item-link-icon svg {

+                    display: inline-flex !important;

+                    align-items: center !important;

+                    justify-content: center !important;

+                    width: 1em;

+                    height: 1em;

+                    line-height: 1;

+                }

+                .${gridId} .data-grid-pagination-nav-icon {

+                    display: inline-flex;

+                    align-items: center;

+                    justify-content: center;

+                    width: 100%;

+                    height: 100%;

+                    font-size: 12px;

+                    line-height: 1;

+                }

+                .${gridId} .data-grid-pagination-nav-icon .anticon {

+                    display: inline-flex;

+                    align-items: center;

+                    justify-content: center;

+                    width: 100%;

+                    height: 100%;

+                }

+                .${gridId} .data-grid-pagination-jump {

+                    display: inline-flex;

+                    align-items: center;

+                    gap: 6px;

+                    height: 34px;

+                    color: ${paginationSecondaryTextColor};

+                    font-size: 12px;

+                    font-weight: 600;

+                    white-space: nowrap;

+                }

+                .${gridId} .data-grid-pagination-jump-label {

+                    color: ${paginationSecondaryTextColor};

+                    font-variant-numeric: tabular-nums;

+                }

+                .${gridId} .data-grid-pagination-jump-input,

+                .${gridId} .data-grid-pagination-jump-input.ant-input-number {

+                    width: 64px;

+                    min-width: 64px;

+                    height: 34px;

+                    display: inline-flex;

+                    align-items: stretch;

+                }

+                .${gridId} .data-grid-pagination-jump-input .ant-input-number-input-wrap,

+                .${gridId} .data-grid-pagination-jump-input .ant-input-number-input {

+                    height: 100%;

+                }

+                .${gridId} .data-grid-pagination-jump-input .ant-input-number-input {

+                    padding: 0 10px;

+                    text-align: center;

+                    color: ${paginationPrimaryTextColor};

+                    font-weight: 600;

+                    font-variant-numeric: tabular-nums;

+                    line-height: 34px;

+                }

+                .${gridId} .data-grid-pagination-jump-input.ant-input-number {

+                    border-radius: 12px;

+                    border: 1px solid ${paginationChipBorderColor};

+                    background: ${paginationChipBg};

+                    box-shadow: none;

+                }

+                .${gridId} .data-grid-pagination-jump-button.ant-btn {

+                    height: 34px;

+                    min-width: 34px;

+                    padding: 0 10px;

+                    border-radius: 12px;

+                    border-color: ${paginationChipBorderColor};

+                    background: ${paginationChipBg};

+                    color: ${paginationPrimaryTextColor};

+                    font-weight: 700;

+                    box-shadow: none;

+                }

+                .${gridId} .data-grid-pagination-size-select {

+                    width: 72px;

+                    min-width: 72px;

+                    max-width: 72px;

+                    height: 34px;

+                    display: inline-flex;

+                    align-items: stretch;

+                }

+                .${gridId} .data-grid-pagination-size-select.ant-select-single,

+                .${gridId} .data-grid-pagination-size-select.ant-select-single.ant-select-sm {

+                    width: 72px;

+                    min-width: 72px;

+                    max-width: 72px;

+                    height: 34px;

+                }

+                .${gridId} .data-grid-pagination-size-select .ant-select-selector {

+                    height: 34px !important;

+                    border-radius: 12px !important;

+                    border: 1px solid ${paginationChipBorderColor} !important;

+                    background: ${paginationChipBg} !important;

+                    box-shadow: none !important;

+                    padding: 0 24px 0 10px !important;

+                    display: flex !important;

+                    align-items: center !important;

+                }

+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-wrap {

+                    display: flex !important;

+                    align-items: center !important;

+                    height: 100%;

+                }

+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-search,

+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-search-input {

+                    height: 100% !important;

+                }

+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-item,

+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-placeholder {

+                    display: flex;

+                    align-items: center;

+                    height: 100%;

+                    line-height: 34px !important;

+                    color: ${paginationPrimaryTextColor};

+                    font-weight: 600;

+                    justify-content: flex-start;

+                    font-variant-numeric: tabular-nums;

+                }

+                .${gridId} .data-grid-pagination-size-select .ant-select-selection-search {

+                    inset-inline-start: 10px !important;

+                    inset-inline-end: 24px !important;

+                }

+                .${gridId} .data-grid-pagination-size-select .ant-select-arrow {

+                    color: ${paginationSecondaryTextColor};

+                    inset-inline-end: 10px;

+                    top: 50%;

+                    transform: translateY(-50%);

+                    margin-top: 0;

+                    display: inline-flex;

+                    align-items: center;

+                    justify-content: center;

+                    height: 16px;

+                    line-height: 1;

+                }

+                .${gridId} .data-grid-pagination-size-select .ant-select-arrow .anticon {

+                    display: inline-flex;

+                    align-items: center;

+                    justify-content: center;

+                    line-height: 1;

+                }

+  `;
diff --git a/frontend/src/components/queryEditor/QueryEditorHelpers.ts b/frontend/src/components/queryEditor/QueryEditorHelpers.ts
new file mode 100644
index 0000000..b913840
--- /dev/null
+++ b/frontend/src/components/queryEditor/QueryEditorHelpers.ts
@@ -0,0 +1,2069 @@
+import type { SqlLanguage } from 'sql-formatter';
+import type { TabData, ColumnDefinition, IndexDefinition } from '../../types';
+import { DBGetColumns, DBGetIndexes, DBQuery } from '../../../wailsjs/go/app/App';
+import { buildRpcConnectionConfig } from '../../utils/connectionRpcConfig';
+import { isOracleLikeDialect, resolveSqlDialect } from '../../utils/sqlDialect';
+import { extractQueryResultTableRef, type QueryResultTableRef } from '../../utils/queryResultTable';
+import { quoteIdentPart } from '../../utils/sql';
+import { splitSidebarQualifiedName } from '../../utils/sidebarLocate';
+import { buildMySQLCompatibleViewMetadataSqls } from '../../utils/sidebarMetadata';
+import { SIDEBAR_SQL_EDITOR_DRAG_MIME, decodeSidebarSqlEditorDragPayload } from '../../utils/sidebarSqlDrag';
+import {
+    DUCKDB_ROWID_LOCATOR_COLUMN,
+    ORACLE_ROWID_LOCATOR_COLUMN,
+    type EditRowLocator,
+} from '../../utils/rowLocator';
+import { getQueryTabDraft, hasQueryTabDraft } from '../../utils/sqlFileTabDrafts';
+import { getColumnDefinitionKey, getColumnDefinitionName } from '../../utils/columnDefinition';
+import { resolveUniqueKeyGroupsFromIndexes } from '../dataGridCopyInsert';
+import { t as translate } from '../../i18n';
+
+export type CompletionTableMeta = {dbName: string, tableName: string, comment?: string};
+export type CompletionColumnMeta = {dbName: string, tableName: string, name: string, type: string, comment?: string};
+export type CompletionViewMeta = {dbName: string, viewName: string, schemaName?: string};
+export type CompletionTriggerMeta = {dbName: string, triggerName: string, tableName: string, schemaName?: string};
+export type CompletionRoutineMeta = {dbName: string, routineName: string, routineType: string, schemaName?: string};
+
+export const QUERY_LOCATOR_ALIAS_PREFIX = '__gonavi_locator_';
+
+export const buildQueryReadOnlyLocator = (reason: string): EditRowLocator => ({
+    strategy: 'none',
+    columns: [],
+    valueColumns: [],
+    readOnly: true,
+    reason,
+});
+
+export type SimpleSelectInfo = {
+    selectsAll: boolean;
+    selectsBareAll: boolean;
+    writableColumns: Record<string, string>;
+};
+
+export type QueryStatementPlan = {
+    originalSql: string;
+    executedSql: string;
+    tableRef?: QueryResultTableRef;
+    pkColumns: string[];
+    editLocator?: EditRowLocator;
+    warning?: string;
+};
+
+export const stripSidebarDropIdentifierQuotes = (part: string): string => {
+    const text = String(part || '').trim();
+    if (!text) return '';
+    if ((text.startsWith('`') && text.endsWith('`')) || (text.startsWith('"') && text.endsWith('"')) || (text.startsWith('[') && text.endsWith(']'))) {
+        return text.slice(1, -1).trim();
+    }
+    return text;
+};
+
+export const shouldPrefixSidebarDropDatabase = (
+    payloadConnectionId: string,
+    payloadDbName: string,
+    payloadText: string,
+    currentConnectionId: string,
+    currentDb: string,
+): boolean => {
+    const sourceDbName = String(payloadDbName || '').trim();
+    if (!sourceDbName) return false;
+    const normalizedSourceDbName = sourceDbName.toLowerCase();
+    if (String(currentDb || '').trim().toLowerCase() === normalizedSourceDbName) return false;
+
+    const sourceConnectionId = String(payloadConnectionId || '').trim();
+    const targetConnectionId = String(currentConnectionId || '').trim();
+    if (sourceConnectionId && targetConnectionId && sourceConnectionId !== targetConnectionId) return false;
+
+    const parts = String(payloadText || '')
+        .split('.')
+        .map(stripSidebarDropIdentifierQuotes)
+        .filter(Boolean);
+    return parts[0]?.toLowerCase() !== normalizedSourceDbName;
+};
+
+export const isQueryEditorPrimaryMouseButton = (event: any): boolean => {
+    if (event?.leftButton === true) return true;
+    if (event?.leftButton === false) return false;
+
+    const browserEvent = event?.browserEvent || event?.nativeEvent || event;
+    if (browserEvent?.button === 0) return true;
+    if (event?.button === 0) return true;
+    if (browserEvent?.buttons === 1) return true;
+    if (event?.buttons === 1) return true;
+    return false;
+};
+
+export const readSidebarSqlDropText = (
+    event: DragEvent,
+    currentConnectionId = '',
+    currentDb = '',
+): string => {
+    const payload = decodeSidebarSqlEditorDragPayload(String(event.dataTransfer?.getData(SIDEBAR_SQL_EDITOR_DRAG_MIME) || ''));
+    if (payload?.text) {
+        if (shouldPrefixSidebarDropDatabase(payload.connectionId || '', payload.dbName || '', payload.text, currentConnectionId, currentDb)) {
+            return `${String(payload.dbName || '').trim()}.${payload.text}`;
+        }
+        return payload.text;
+    }
+    return String(event.dataTransfer?.getData('text/plain') || '').trim();
+};
+
+export const stripQueryIdentifierQuotes = (part: string): string => {
+    const text = String(part || '').trim();
+    if (!text) return '';
+    if ((text.startsWith('`') && text.endsWith('`')) || (text.startsWith('"') && text.endsWith('"'))) {
+        return text.slice(1, -1).trim();
+    }
+    if (text.startsWith('[') && text.endsWith(']')) {
+        return text.slice(1, -1).trim();
+    }
+    return text;
+};
+
+export const MYSQL_SYSTEM_METADATA_SCHEMAS = new Set(['information_schema', 'performance_schema', 'mysql', 'sys']);
+export const POSTGRES_SYSTEM_METADATA_SCHEMAS = new Set(['information_schema', 'pg_catalog']);
+export const SQLITE_SYSTEM_METADATA_TABLES = new Set(['sqlite_master', 'sqlite_schema', 'sqlite_temp_master', 'sqlite_temp_schema']);
+
+export const isSystemMetadataQueryResult = (tableRef: QueryResultTableRef, dbType: string): boolean => {
+    const normalizedDbType = String(dbType || '').trim().toLowerCase();
+    const metadataDbName = stripQueryIdentifierQuotes(tableRef.metadataDbName).toLowerCase();
+    const metadataTableName = stripQueryIdentifierQuotes(tableRef.metadataTableName).toLowerCase();
+
+    if (['mysql', 'goldendb', 'mariadb', 'oceanbase', 'diros', 'starrocks', 'sphinx', 'tidb'].includes(normalizedDbType)) {
+        return MYSQL_SYSTEM_METADATA_SCHEMAS.has(metadataDbName);
+    }
+    if (['postgres', 'kingbase', 'highgo', 'vastbase', 'opengauss', 'gaussdb'].includes(normalizedDbType)) {
+        return POSTGRES_SYSTEM_METADATA_SCHEMAS.has(metadataDbName);
+    }
+    if (normalizedDbType === 'sqlite' || normalizedDbType === 'duckdb') {
+        return SQLITE_SYSTEM_METADATA_TABLES.has(metadataTableName) || metadataDbName === 'information_schema';
+    }
+    if (normalizedDbType === 'sqlserver') {
+        return metadataDbName === 'information_schema' || metadataDbName === 'sys';
+    }
+    if (normalizedDbType === 'clickhouse') {
+        return metadataDbName === 'system' || metadataDbName === 'information_schema';
+    }
+    return false;
+};
+
+export const splitTopLevelComma = (text: string): string[] => {
+    const parts: string[] = [];
+    let current = '';
+    let parenDepth = 0;
+    let inSingle = false;
+    let inDouble = false;
+    let inBacktick = false;
+    let escaped = false;
+
+    for (let index = 0; index < text.length; index++) {
+        const ch = text[index];
+        if (escaped) {
+            current += ch;
+            escaped = false;
+            continue;
+        }
+        if ((inSingle || inDouble) && ch === '\\') {
+            current += ch;
+            escaped = true;
+            continue;
+        }
+        if (!inDouble && !inBacktick && ch === "'") {
+            inSingle = !inSingle;
+            current += ch;
+            continue;
+        }
+        if (!inSingle && !inBacktick && ch === '"') {
+            inDouble = !inDouble;
+            current += ch;
+            continue;
+        }
+        if (!inSingle && !inDouble && ch === '`') {
+            inBacktick = !inBacktick;
+            current += ch;
+            continue;
+        }
+        if (!inSingle && !inDouble && !inBacktick) {
+            if (ch === '(') parenDepth++;
+            if (ch === ')' && parenDepth > 0) parenDepth--;
+            if (ch === ',' && parenDepth === 0) {
+                parts.push(current.trim());
+                current = '';
+                continue;
+            }
+        }
+        current += ch;
+    }
+
+    if (current.trim()) parts.push(current.trim());
+    return parts;
+};
+
+export const SIMPLE_IDENTIFIER_PATH_RE = /^(?:[`"\[]?[A-Za-z_][\w$]*[`"\]]?\s*\.\s*){0,2}[`"\[]?[A-Za-z_][\w$]*[`"\]]?$/;
+export const QUERY_ALIAS_RESERVED = new Set([
+    'where', 'group', 'order', 'having', 'limit', 'fetch', 'offset', 'join', 'left', 'right', 'inner', 'outer', 'on', 'union',
+    'for', 'connect', 'start', 'window', 'sample', 'pivot', 'unpivot', 'qualify', 'model',
+]);
+
+export const getLastIdentifierPart = (path: string): string => {
+    const parts = String(path || '').split('.').map((part) => stripQueryIdentifierQuotes(part.trim())).filter(Boolean);
+    return parts[parts.length - 1] || '';
+};
+
+export const resolveSimpleSelectItemColumn = (item: string): { resultName: string; sourceName: string } | 'all' | undefined => {
+    const text = String(item || '').trim();
+    if (!text) return undefined;
+    if (text === '*' || /\.\s*\*$/.test(text)) return 'all';
+
+    let expr = text;
+    let alias = '';
+    const asMatch = text.match(/^(.*?)\s+AS\s+([`"\[]?[A-Za-z_][\w$]*[`"\]]?)$/i);
+    if (asMatch) {
+        expr = asMatch[1].trim();
+        alias = stripQueryIdentifierQuotes(asMatch[2]);
+    } else {
+        const bareAliasMatch = text.match(/^(.*?)\s+([`"\[]?[A-Za-z_][\w$]*[`"\]]?)$/);
+        if (bareAliasMatch && SIMPLE_IDENTIFIER_PATH_RE.test(bareAliasMatch[1].trim())) {
+            const candidateAlias = stripQueryIdentifierQuotes(bareAliasMatch[2]);
+            if (candidateAlias && !QUERY_ALIAS_RESERVED.has(candidateAlias.toLowerCase())) {
+                expr = bareAliasMatch[1].trim();
+                alias = candidateAlias;
+            }
+        }
+    }
+
+    if (!SIMPLE_IDENTIFIER_PATH_RE.test(expr)) return undefined;
+    const sourceName = getLastIdentifierPart(expr);
+    const resultName = alias || sourceName;
+    return sourceName && resultName ? { resultName, sourceName } : undefined;
+};
+
+export const parseSimpleSelectInfo = (sql: string): SimpleSelectInfo | undefined => {
+    const match = String(sql || '').match(/^\s*SELECT\s+([\s\S]+?)\s+FROM\s+/i);
+    if (!match) return undefined;
+    const selectList = match[1].trim();
+    if (!selectList || /^DISTINCT\b/i.test(selectList)) return undefined;
+
+    const writableColumns: Record<string, string> = {};
+    let selectsAll = false;
+    let selectsBareAll = false;
+    for (const item of splitTopLevelComma(selectList)) {
+        const trimmedItem = String(item || '').trim();
+        const resolved = resolveSimpleSelectItemColumn(item);
+        if (!resolved) continue;
+        if (resolved === 'all') {
+            selectsAll = true;
+            if (trimmedItem === '*') {
+                selectsBareAll = true;
+            }
+            continue;
+        }
+        writableColumns[resolved.resultName] = resolved.sourceName;
+    }
+    return { selectsAll, selectsBareAll, writableColumns };
+};
+
+export const appendQuerySelectExpressions = (sql: string, expressions: string[]): string => {
+    if (expressions.length === 0) return sql;
+    return String(sql || '').replace(
+        /^(\s*SELECT\s+)([\s\S]+?)(\s+FROM\s+[\s\S]*)$/i,
+        (_match, prefix, selectList, rest) => `${prefix}${String(selectList).trimEnd()}, ${expressions.join(', ')}${rest}`,
+    );
+};
+
+export const QUERY_LOCATOR_SOURCE_ALIAS = 'gonavi_query_source';
+
+export const rewriteOracleSelectAllWithExpressions = (sql: string, expressions: string[]): string | undefined => {
+    if (expressions.length === 0) return undefined;
+
+    const match = String(sql || '').match(/^(\s*SELECT\s+)([\s\S]+?)(\s+FROM\s+)([\s\S]*)$/i);
+    if (!match) return undefined;
+
+    const prefix = match[1];
+    const selectList = match[2].trim();
+    const fromKeyword = match[3];
+    const fromTail = match[4];
+    const selectItems = splitTopLevelComma(selectList);
+    if (selectItems.length === 0) return undefined;
+
+    let selectAllFound = false;
+    for (const item of selectItems) {
+        if (String(item || '').trim() === '*') {
+            selectAllFound = true;
+            break;
+        }
+    }
+    if (!selectAllFound) return undefined;
+
+    const fromTrimmed = fromTail.trimStart();
+    const tableMatch = fromTrimmed.match(QUERY_EDITOR_SQL_LEADING_IDENTIFIER_PATH_REGEX);
+    if (!tableMatch) return undefined;
+
+    const tableText = tableMatch[1];
+    const afterTable = tableMatch[2] || '';
+
+    const parseAlias = (tail: string): { alias: string; remainder: string } => {
+        const trimmedTail = String(tail || '').trimStart();
+        if (!trimmedTail) {
+            return { alias: '', remainder: tail };
+        }
+
+        const asMatch = trimmedTail.match(/^AS\s+([`"\[]?[A-Za-z_][\w$]*[`"\]]?)([\s\S]*)$/i);
+        if (asMatch) {
+            const candidate = stripQueryIdentifierQuotes(asMatch[1]);
+            if (candidate && !QUERY_ALIAS_RESERVED.has(candidate.toLowerCase())) {
+                return { alias: candidate, remainder: asMatch[2] || '' };
+            }
+        }
+
+        const bareMatch = trimmedTail.match(/^([`"\[]?[A-Za-z_][\w$]*[`"\]]?)([\s\S]*)$/);
+        if (bareMatch) {
+            const candidate = stripQueryIdentifierQuotes(bareMatch[1]);
+            if (candidate && !QUERY_ALIAS_RESERVED.has(candidate.toLowerCase())) {
+                return { alias: candidate, remainder: bareMatch[2] || '' };
+            }
+        }
+
+        return { alias: '', remainder: tail };
+    };
+
+    const parsedAlias = parseAlias(afterTable);
+    const sourceAlias = parsedAlias.alias || QUERY_LOCATOR_SOURCE_ALIAS;
+    const qualifiedExpressions = expressions
+        .map((expression) => {
+            const trimmed = String(expression || '').trim();
+            if (!trimmed) return '';
+            if (/^ROWID\b/i.test(trimmed)) {
+                return trimmed.replace(/^(\s*)ROWID\b/i, `$1${sourceAlias}.ROWID`);
+            }
+            return trimmed;
+        })
+        .filter(Boolean);
+    if (qualifiedExpressions.length === 0) return undefined;
+
+    const rewrittenSelectItems = selectItems.map((item) => {
+        const trimmed = String(item || '').trim();
+        if (trimmed === '*') {
+            return `${sourceAlias}.*`;
+        }
+        return item.trimEnd();
+    });
+
+    const aliasClause = parsedAlias.alias ? ` ${parsedAlias.alias}` : ` ${sourceAlias}`;
+    const finalSelectItems = [...rewrittenSelectItems, ...qualifiedExpressions];
+    return `${prefix}${finalSelectItems.join(', ')}${fromKeyword}${tableText}${aliasClause}${parsedAlias.remainder}`;
+};
+
+export const findWritableResultColumnForSource = (writableColumns: Record<string, string>, target: string): string | undefined => {
+    const normalizedTarget = String(target || '').trim().toLowerCase();
+    return Object.entries(writableColumns || {}).find(([, sourceColumn]) => (
+        String(sourceColumn || '').trim().toLowerCase() === normalizedTarget
+    ))?.[0];
+};
+
+export const resolveMetadataColumnName = (tableColumnNames: string[], sourceColumn: string): string => {
+    const normalizedSource = String(sourceColumn || '').trim();
+    if (!normalizedSource) return '';
+    return tableColumnNames.find((column) => String(column || '').trim().toLowerCase() === normalizedSource.toLowerCase())
+        || normalizedSource;
+};
+
+export const buildQueryLocatorAlias = (column: string, index: number): string => {
+    const normalized = String(column || '').trim().replace(/[^A-Za-z0-9_]/g, '_').slice(0, 48) || 'column';
+    return `${QUERY_LOCATOR_ALIAS_PREFIX}${index}_${normalized}`;
+};
+
+export const buildQueryLocatorColumnExpression = (dbType: string, column: string, alias: string): string => (
+    `${quoteIdentPart(dbType, column)} AS ${quoteIdentPart(dbType, alias)}`
+);
+
+export const buildQueryRowIDExpression = (dbType: string, sourceAlias?: string): string => (
+    `${sourceAlias ? `${sourceAlias}.` : ''}ROWID AS ${quoteIdentPart(dbType, ORACLE_ROWID_LOCATOR_COLUMN)}`
+);
+
+export const buildDuckDBRowIDExpression = (dbType: string, sourceAlias?: string): string => (
+    `${sourceAlias ? `${sourceAlias}.` : ''}rowid AS ${quoteIdentPart(dbType, DUCKDB_ROWID_LOCATOR_COLUMN)}`
+);
+
+export const escapeMetadataSqlLiteral = (raw: string): string => String(raw || '').replace(/'/g, "''");
+
+export const quoteSqlServerDbIdentifier = (raw: string): string => `[${String(raw || '').replace(/]/g, ']]')}]`;
+
+export type MetadataQuerySpec = {
+    sql: string;
+    inferredType?: 'FUNCTION' | 'PROCEDURE';
+};
+
+export type MetadataQueryResult = {
+    rows: Record<string, any>[];
+    inferredType?: 'FUNCTION' | 'PROCEDURE';
+};
+
+export const normalizeMetadataDialect = (conn: any): string => {
+    const type = String(conn?.config?.type || '').trim().toLowerCase();
+    const driver = String(conn?.config?.driver || '').trim();
+    const dialect = resolveSqlDialect(type, driver, {
+        oceanBaseProtocol: conn?.config?.oceanBaseProtocol,
+    });
+    if (dialect === 'diros' || dialect === 'sphinx' || dialect === 'mariadb' || dialect === 'oceanbase') return 'mysql';
+    if (dialect === 'dameng') return 'oracle';
+    return String(dialect || '').toLowerCase();
+};
+
+export const resolveQueryEditorFormatterLanguage = (conn: any): SqlLanguage => {
+    const dialect = normalizeMetadataDialect(conn);
+    switch (dialect) {
+        case 'postgres':
+        case 'kingbase':
+        case 'highgo':
+        case 'vastbase':
+        case 'opengauss':
+        case 'gaussdb':
+            return 'postgresql';
+        case 'duckdb':
+            return 'duckdb';
+        case 'sqlite':
+            return 'sqlite';
+        case 'sqlserver':
+            return 'transactsql';
+        case 'oracle':
+        case 'dameng':
+            return 'plsql';
+        case 'clickhouse':
+            return 'clickhouse';
+        case 'mysql':
+        case 'goldendb':
+        case 'sphinx':
+            return 'mysql';
+        case 'mariadb':
+            return 'mariadb';
+        default:
+            return 'sql';
+    }
+};
+
+export const buildCompletionTableCommentSQL = (dialect: string, dbName: string): string => {
+    const db = String(dbName || '').trim();
+    const escapedDb = escapeMetadataSqlLiteral(db);
+    switch (dialect) {
+        case 'mysql':
+        case 'starrocks':
+            return `SELECT TABLE_NAME AS table_name, TABLE_COMMENT AS table_comment FROM information_schema.tables WHERE table_schema = '${escapedDb}' AND table_type = 'BASE TABLE' ORDER BY table_name`;
+        case 'postgres':
+        case 'kingbase':
+        case 'vastbase':
+        case 'highgo':
+        case 'opengauss':
+        case 'gaussdb':
+            return `SELECT n.nspname || '.' || c.relname AS table_name, obj_description(c.oid, 'pg_class') AS table_comment FROM pg_class c JOIN pg_namespace n ON n.oid = c.relnamespace WHERE c.relkind IN ('r', 'p') AND n.nspname NOT IN ('pg_catalog', 'information_schema') AND n.nspname NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY n.nspname, c.relname`;
+        case 'sqlserver': {
+            const safeDb = quoteSqlServerDbIdentifier(db);
+            return `SELECT s.name + '.' + t.name AS table_name, ep.value AS table_comment FROM ${safeDb}.sys.tables t JOIN ${safeDb}.sys.schemas s ON t.schema_id = s.schema_id LEFT JOIN ${safeDb}.sys.extended_properties ep ON ep.major_id = t.object_id AND ep.minor_id = 0 AND ep.name = 'MS_Description' WHERE t.type = 'U' ORDER BY s.name, t.name`;
+        }
+        case 'clickhouse':
+            return `SELECT name AS table_name, comment AS table_comment FROM system.tables WHERE database = '${escapedDb}' AND engine NOT IN ('View', 'MaterializedView') ORDER BY name`;
+        case 'oracle': {
+            const owner = escapedDb.toUpperCase();
+            return `SELECT table_name, comments AS table_comment FROM all_tab_comments WHERE owner = '${owner}' ORDER BY table_name`;
+        }
+        default:
+            return '';
+    }
+};
+
+export const getCaseInsensitiveValue = (row: Record<string, any>, keys: string[]): any => {
+    for (const key of keys) {
+        for (const rowKey of Object.keys(row || {})) {
+            if (rowKey.toLowerCase() === key.toLowerCase()) {
+                return row[rowKey];
+            }
+        }
+    }
+    return undefined;
+};
+
+export const normalizeCommentText = (value: unknown): string => {
+    if (value === null || value === undefined) return '';
+    const text = String(value).trim();
+    if (!text || text.toLowerCase() === '<nil>') return '';
+    return text;
+};
+
+export const buildCompletionDocumentation = (comment?: string): string | undefined => {
+    const text = normalizeCommentText(comment);
+    return text ? translate('query_editor.completion.documentation.comment', { comment: text }) : undefined;
+};
+
+export const appendCommentToDetail = (detail: string, comment?: string): string => {
+    const text = normalizeCommentText(comment);
+    return text ? `${detail} - ${text}` : detail;
+};
+
+export const stripCompletionIdentifierQuotes = (ident: string): string => {
+    let raw = String(ident || '').trim();
+    if (!raw) return raw;
+    const first = raw[0];
+    const last = raw[raw.length - 1];
+    if ((first === '`' && last === '`') || (first === '"' && last === '"')) {
+        raw = raw.slice(1, -1);
+    }
+    return raw.trim();
+};
+
+export const normalizeCompletionQualifiedName = (ident: string): string => {
+    const raw = String(ident || '').trim();
+    if (!raw) return raw;
+    return raw
+        .split('.')
+        .map(p => stripCompletionIdentifierQuotes(p.trim()))
+        .filter(Boolean)
+        .join('.');
+};
+
+export const getCompletionQualifiedNameLastPart = (qualified: string): string => {
+    const raw = normalizeCompletionQualifiedName(qualified);
+    if (!raw) return raw;
+    const parts = raw.split('.').filter(Boolean);
+    return parts[parts.length - 1] || raw;
+};
+
+export const splitCompletionSchemaAndTable = (qualified: string): { schema: string; table: string } => {
+    const raw = normalizeCompletionQualifiedName(qualified);
+    if (!raw) return { schema: '', table: '' };
+    const parts = raw.split('.').filter(Boolean);
+    if (parts.length >= 2) {
+        return {
+            schema: parts[parts.length - 2] || '',
+            table: parts[parts.length - 1] || '',
+        };
+    }
+    return { schema: '', table: parts[0] || '' };
+};
+
+export const DEFAULT_QUERY_TEMPLATE = 'SELECT * FROM ';
+
+export const getTabQueryValue = (tab: TabData): string => (
+    typeof tab.query === 'string' ? tab.query : ''
+);
+
+export const getInitialEditorQuery = (tab: TabData): string => {
+    if (hasQueryTabDraft(tab.id)) {
+        return getQueryTabDraft(tab.id);
+    }
+    const tabQuery = getTabQueryValue(tab);
+    if (tabQuery || tab.filePath || tab.savedQueryId || tab.readOnly) {
+        return tabQuery;
+    }
+    return DEFAULT_QUERY_TEMPLATE;
+};
+
+export const resolveNextResultSetIndex = (sets: Array<{ key?: string }>): number => {
+    const maxIndex = sets.reduce((max, item) => {
+        const match = String(item?.key || '').match(/^result-(\d+)$/);
+        const index = match ? Number(match[1]) : 0;
+        return Number.isFinite(index) ? Math.max(max, index) : max;
+    }, 0);
+    return maxIndex + 1;
+};
+
+export const normalizeExecutedSqlKey = (sql: string): string => String(sql || '')
+    .replace(/\r\n/g, '\n')
+    .replace(/；/g, ';')
+    .trim()
+    .replace(/;+\s*$/g, '')
+    .trim()
+    .replace(/\s+/g, ' ')
+    .toLowerCase();
+
+export const areSqlStatementListsEqual = (left: string[], right: string[]): boolean => (
+    left.length === right.length
+    && left.every((statement, index) => normalizeExecutedSqlKey(statement) === normalizeExecutedSqlKey(right[index]))
+);
+
+export const normalizeEditorPosition = (position: any): { lineNumber: number; column: number } | null => {
+    if (!position) return null;
+    const lineNumber = Number(position.positionLineNumber ?? position.lineNumber ?? position.endLineNumber ?? position.startLineNumber ?? position.selectionStartLineNumber);
+    const column = Number(position.positionColumn ?? position.column ?? position.endColumn ?? position.startColumn ?? position.selectionStartColumn);
+    if (!Number.isFinite(lineNumber) || !Number.isFinite(column) || lineNumber < 1 || column < 1) {
+        return null;
+    }
+    return { lineNumber, column };
+};
+
+export const getNormalizedOffsetAtPosition = (
+    sqlText: string,
+    position: { lineNumber: number; column: number },
+): number => {
+    const text = String(sqlText || '').replace(/\r\n/g, '\n');
+    const lines = text.split('\n');
+    const targetLineIndex = Math.max(0, Math.min(lines.length - 1, position.lineNumber - 1));
+    let offset = 0;
+    for (let index = 0; index < targetLineIndex; index++) {
+        offset += (lines[index]?.length || 0) + 1;
+    }
+    return Math.max(0, Math.min(text.length, offset + Math.max(0, position.column - 1)));
+};
+
+export const getFirstRowValue = (row: Record<string, any>): string => {
+    for (const value of Object.values(row || {})) {
+        if (value !== undefined && value !== null) {
+            const normalized = String(value).trim();
+            if (normalized !== '') return normalized;
+        }
+    }
+    return '';
+};
+
+export const getMySQLShowTablesName = (row: Record<string, any>): string => {
+    for (const key of Object.keys(row || {})) {
+        if (!key.toLowerCase().startsWith('tables_in_')) continue;
+        const value = row[key];
+        if (value === undefined || value === null) continue;
+        const normalized = String(value).trim();
+        if (normalized !== '') return normalized;
+    }
+    return '';
+};
+
+export const normalizeMetadataQuerySpecs = (specs: MetadataQuerySpec[]): MetadataQuerySpec[] => {
+    const seen = new Set<string>();
+    const normalized: MetadataQuerySpec[] = [];
+    specs.forEach((spec) => {
+        const sql = String(spec.sql || '').trim();
+        if (!sql) return;
+        const key = `${spec.inferredType || ''}@@${sql}`;
+        if (seen.has(key)) return;
+        seen.add(key);
+        normalized.push({ sql, inferredType: spec.inferredType });
+    });
+    return normalized;
+};
+
+export const buildQualifiedCompletionName = (schemaName: string, objectName: string): string => {
+    const schema = String(schemaName || '').trim();
+    const object = String(objectName || '').trim();
+    if (!object) return '';
+    if (!schema || object.includes('.')) return object;
+    return `${schema}.${object}`;
+};
+
+export const buildCompletionViewsMetadataQuerySpecs = (dialect: string, dbName: string): MetadataQuerySpec[] => {
+    const safeDbName = escapeMetadataSqlLiteral(dbName);
+    switch (dialect) {
+        case 'mysql':
+        case 'starrocks': {
+            return normalizeMetadataQuerySpecs(
+                buildMySQLCompatibleViewMetadataSqls(dbName).map((sql) => ({ sql })),
+            );
+        }
+        case 'postgres':
+        case 'kingbase':
+        case 'highgo':
+        case 'vastbase':
+        case 'opengauss':
+        case 'gaussdb':
+            return [{ sql: `SELECT schemaname AS schema_name, viewname AS view_name FROM pg_catalog.pg_views WHERE schemaname != 'information_schema' AND schemaname NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY schemaname, viewname` }];
+        case 'sqlserver': {
+            const safeDb = quoteSqlServerDbIdentifier(dbName || 'master');
+            return [{ sql: `SELECT s.name AS schema_name, v.name AS view_name FROM ${safeDb}.sys.views v JOIN ${safeDb}.sys.schemas s ON v.schema_id = s.schema_id ORDER BY s.name, v.name` }];
+        }
+        case 'oracle': {
+            return normalizeMetadataQuerySpecs([
+                { sql: 'SELECT VIEW_NAME AS view_name FROM USER_VIEWS ORDER BY VIEW_NAME' },
+                { sql: 'SELECT OWNER AS schema_name, VIEW_NAME AS view_name FROM ALL_VIEWS WHERE OWNER = USER ORDER BY VIEW_NAME' },
+                {
+                    sql: safeDbName
+                        ? `SELECT OWNER AS schema_name, VIEW_NAME AS view_name FROM ALL_VIEWS WHERE OWNER = '${safeDbName.toUpperCase()}' ORDER BY VIEW_NAME`
+                        : '',
+                },
+            ]);
+        }
+        case 'sqlite':
+            return [{ sql: 'SELECT name AS view_name FROM sqlite_master WHERE type = \'view\' ORDER BY name' }];
+        case 'duckdb':
+            return [{ sql: `SELECT table_schema AS schema_name, table_name AS view_name FROM information_schema.views WHERE table_schema NOT IN ('information_schema', 'pg_catalog') ORDER BY table_schema, table_name` }];
+        default:
+            return [];
+    }
+};
+
+export const buildCompletionMaterializedViewsMetadataQuerySpecs = (dialect: string, dbName: string): MetadataQuerySpec[] => {
+    if (dialect !== 'starrocks') {
+        return [];
+    }
+    const safeDbName = escapeMetadataSqlLiteral(dbName);
+    const dbIdent = String(dbName || '').replace(/`/g, '``').trim();
+    return normalizeMetadataQuerySpecs([
+        {
+            sql: safeDbName
+                ? `SELECT TABLE_SCHEMA AS schema_name, TABLE_NAME AS object_name FROM information_schema.tables WHERE TABLE_SCHEMA = '${safeDbName}' AND UPPER(TABLE_TYPE) LIKE '%MATERIALIZED%' ORDER BY TABLE_NAME`
+                : '',
+        },
+        { sql: dbIdent ? `SHOW MATERIALIZED VIEWS FROM \`${dbIdent}\`` : '' },
+        { sql: 'SHOW MATERIALIZED VIEWS' },
+    ]);
+};
+
+export const buildCompletionTriggersMetadataQuerySpecs = (dialect: string, dbName: string): MetadataQuerySpec[] => {
+    const safeDbName = escapeMetadataSqlLiteral(dbName);
+    switch (dialect) {
+        case 'mysql':
+        case 'starrocks': {
+            const dbIdent = String(dbName || '').replace(/`/g, '``').trim();
+            return normalizeMetadataQuerySpecs([
+                {
+                    sql: safeDbName
+                        ? `SELECT TRIGGER_NAME AS trigger_name, EVENT_OBJECT_TABLE AS table_name, TRIGGER_SCHEMA AS schema_name FROM information_schema.triggers WHERE trigger_schema = '${safeDbName}' ORDER BY EVENT_OBJECT_TABLE, TRIGGER_NAME`
+                        : '',
+                },
+                { sql: dbIdent ? `SHOW TRIGGERS FROM \`${dbIdent}\`` : '' },
+                { sql: 'SHOW TRIGGERS' },
+            ]);
+        }
+        case 'postgres':
+        case 'kingbase':
+        case 'highgo':
+        case 'vastbase':
+        case 'opengauss':
+        case 'gaussdb':
+            return [{ sql: `SELECT DISTINCT event_object_schema AS schema_name, event_object_table AS table_name, trigger_name FROM information_schema.triggers WHERE trigger_schema NOT IN ('pg_catalog', 'information_schema') AND trigger_schema NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY event_object_schema, event_object_table, trigger_name` }];
+        case 'sqlserver': {
+            const safeDb = quoteSqlServerDbIdentifier(dbName || 'master');
+            return [{ sql: `SELECT s.name AS schema_name, t.name AS table_name, tr.name AS trigger_name FROM ${safeDb}.sys.triggers tr JOIN ${safeDb}.sys.tables t ON tr.parent_id = t.object_id JOIN ${safeDb}.sys.schemas s ON t.schema_id = s.schema_id WHERE tr.parent_class = 1 ORDER BY s.name, t.name, tr.name` }];
+        }
+        case 'oracle':
+            if (!safeDbName) {
+                return [{ sql: 'SELECT TRIGGER_NAME AS trigger_name, TABLE_NAME AS table_name FROM USER_TRIGGERS ORDER BY TABLE_NAME, TRIGGER_NAME' }];
+            }
+            return [{ sql: `SELECT OWNER AS schema_name, TABLE_NAME AS table_name, TRIGGER_NAME AS trigger_name FROM ALL_TRIGGERS WHERE OWNER = '${safeDbName.toUpperCase()}' ORDER BY TABLE_NAME, TRIGGER_NAME` }];
+        case 'sqlite':
+            return [{ sql: 'SELECT name AS trigger_name, tbl_name AS table_name FROM sqlite_master WHERE type = \'trigger\' ORDER BY tbl_name, name' }];
+        default:
+            return [];
+    }
+};
+
+export const buildCompletionFunctionsMetadataQuerySpecs = (dialect: string, dbName: string): MetadataQuerySpec[] => {
+    const safeDbName = escapeMetadataSqlLiteral(dbName);
+    switch (dialect) {
+        case 'mysql':
+        case 'starrocks':
+            return normalizeMetadataQuerySpecs([
+                {
+                    sql: safeDbName
+                        ? `SELECT ROUTINE_NAME AS routine_name, ROUTINE_TYPE AS routine_type, ROUTINE_SCHEMA AS schema_name FROM information_schema.routines WHERE routine_schema = '${safeDbName}' ORDER BY ROUTINE_TYPE, ROUTINE_NAME`
+                        : '',
+                },
+                {
+                    sql: safeDbName ? `SHOW FUNCTION STATUS WHERE Db = '${safeDbName}'` : 'SHOW FUNCTION STATUS',
+                    inferredType: 'FUNCTION',
+                },
+                {
+                    sql: safeDbName ? `SHOW PROCEDURE STATUS WHERE Db = '${safeDbName}'` : 'SHOW PROCEDURE STATUS',
+                    inferredType: 'PROCEDURE',
+                },
+            ]);
+        case 'postgres':
+        case 'kingbase':
+        case 'highgo':
+        case 'vastbase':
+        case 'opengauss':
+        case 'gaussdb':
+            return normalizeMetadataQuerySpecs([
+                {
+                    sql: `SELECT n.nspname AS schema_name, p.proname AS routine_name, CASE WHEN p.prokind = 'p' THEN 'PROCEDURE' ELSE 'FUNCTION' END AS routine_type FROM pg_proc p JOIN pg_namespace n ON p.pronamespace = n.oid WHERE n.nspname NOT IN ('pg_catalog', 'information_schema') AND n.nspname NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY n.nspname, routine_type, p.proname`,
+                },
+                {
+                    sql: `SELECT r.routine_schema AS schema_name, r.routine_name AS routine_name, COALESCE(NULLIF(UPPER(r.routine_type), ''), 'FUNCTION') AS routine_type FROM information_schema.routines r WHERE r.routine_schema NOT IN ('pg_catalog', 'information_schema') AND r.routine_schema NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY r.routine_schema, routine_type, r.routine_name`,
+                },
+                {
+                    sql: `SELECT n.nspname AS schema_name, p.proname AS routine_name, 'FUNCTION' AS routine_type FROM pg_proc p JOIN pg_namespace n ON p.pronamespace = n.oid WHERE n.nspname NOT IN ('pg_catalog', 'information_schema') AND n.nspname NOT LIKE 'pg|_%' ESCAPE '|' ORDER BY n.nspname, p.proname`,
+                },
+            ]);
+        case 'sqlserver': {
+            const safeDb = quoteSqlServerDbIdentifier(dbName || 'master');
+            return [{ sql: `SELECT s.name AS schema_name, o.name AS routine_name, CASE o.type WHEN 'P' THEN 'PROCEDURE' WHEN 'FN' THEN 'FUNCTION' WHEN 'IF' THEN 'FUNCTION' WHEN 'TF' THEN 'FUNCTION' END AS routine_type FROM ${safeDb}.sys.objects o JOIN ${safeDb}.sys.schemas s ON o.schema_id = s.schema_id WHERE o.type IN ('P','FN','IF','TF') ORDER BY o.type, s.name, o.name` }];
+        }
+        case 'oracle':
+            return normalizeMetadataQuerySpecs([
+                { sql: `SELECT OBJECT_NAME AS routine_name, OBJECT_TYPE AS routine_type FROM USER_OBJECTS WHERE OBJECT_TYPE IN ('FUNCTION','PROCEDURE') ORDER BY OBJECT_TYPE, OBJECT_NAME` },
+                { sql: `SELECT OWNER AS schema_name, OBJECT_NAME AS routine_name, OBJECT_TYPE AS routine_type FROM ALL_OBJECTS WHERE OWNER = USER AND OBJECT_TYPE IN ('FUNCTION','PROCEDURE') ORDER BY OBJECT_TYPE, OBJECT_NAME` },
+                {
+                    sql: safeDbName
+                        ? `SELECT OWNER AS schema_name, OBJECT_NAME AS routine_name, OBJECT_TYPE AS routine_type FROM ALL_OBJECTS WHERE OWNER = '${safeDbName.toUpperCase()}' AND OBJECT_TYPE IN ('FUNCTION','PROCEDURE') ORDER BY OBJECT_TYPE, OBJECT_NAME`
+                        : '',
+                },
+            ]);
+        case 'duckdb':
+            return [{
+                sql: `SELECT schema_name, function_name AS routine_name, 'FUNCTION' AS routine_type FROM duckdb_functions() WHERE internal = false AND lower(function_type) = 'macro' AND COALESCE(macro_definition, '') <> '' ORDER BY schema_name, function_name`,
+                inferredType: 'FUNCTION',
+            }];
+        default:
+            return [];
+    }
+};
+
+export const queryCompletionMetadataRowsBySpecs = async (
+    config: Record<string, any>,
+    dbName: string,
+    specs: MetadataQuerySpec[],
+): Promise<MetadataQueryResult[]> => {
+    const normalizedSpecs = normalizeMetadataQuerySpecs(specs);
+    if (normalizedSpecs.length === 0) {
+        return [];
+    }
+    const results: MetadataQueryResult[] = [];
+    for (const spec of normalizedSpecs) {
+        try {
+            const result = await DBQuery(buildRpcConnectionConfig(config) as any, dbName, spec.sql);
+            if (!result.success || !Array.isArray(result.data)) {
+                continue;
+            }
+            results.push({
+                rows: result.data as Record<string, any>[],
+                inferredType: spec.inferredType,
+            });
+        } catch {
+            // 忽略单条元数据查询失败，继续走兼容查询。
+        }
+    }
+    return results;
+};
+
+export type QueryEditorNavigationTarget =
+    | { type: 'database'; dbName: string }
+    | { type: 'table'; dbName: string; tableName: string; schemaName?: string }
+    | { type: 'view'; dbName: string; viewName: string; schemaName?: string }
+    | { type: 'materialized-view'; dbName: string; viewName: string; schemaName?: string }
+    | { type: 'trigger'; dbName: string; triggerName: string; tableName: string; schemaName?: string }
+    | { type: 'routine'; dbName: string; routineName: string; routineType: string; schemaName?: string };
+
+export type QueryEditorHoverTarget =
+    | { kind: 'database'; dbName: string; range: { startColumn: number; endColumn: number } }
+    | { kind: 'table'; dbName: string; tableName: string; schemaName?: string; comment?: string; range: { startColumn: number; endColumn: number } }
+    | { kind: 'view'; dbName: string; viewName: string; schemaName?: string; range: { startColumn: number; endColumn: number } }
+    | { kind: 'materialized-view'; dbName: string; viewName: string; schemaName?: string; range: { startColumn: number; endColumn: number } }
+    | { kind: 'trigger'; dbName: string; triggerName: string; tableName: string; schemaName?: string; range: { startColumn: number; endColumn: number } }
+    | { kind: 'routine'; dbName: string; routineName: string; routineType: string; schemaName?: string; range: { startColumn: number; endColumn: number } }
+    | { kind: 'column'; dbName: string; tableName: string; columnName: string; type?: string; comment?: string; schemaName?: string; range: { startColumn: number; endColumn: number } };
+
+export const QUERY_EDITOR_IDENTIFIER_CHAR_REGEX = /[A-Za-z0-9_$`"\[\].]/;
+export const QUERY_EDITOR_SQL_UNQUOTED_IDENTIFIER_PATTERN = '[A-Za-z_][A-Za-z0-9_$]*';
+export const QUERY_EDITOR_SQL_QUOTED_IDENTIFIER_PATTERN = '(?:`[^`]+`|"[^"]+"|\\[[^\\]]+\\])';
+export const QUERY_EDITOR_SQL_IDENTIFIER_PATTERN = `(?:${QUERY_EDITOR_SQL_QUOTED_IDENTIFIER_PATTERN}|${QUERY_EDITOR_SQL_UNQUOTED_IDENTIFIER_PATTERN})`;
+export const QUERY_EDITOR_SQL_IDENTIFIER_PATH_PATTERN = `${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN}(?:\\s*\\.\\s*${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN}){0,2}`;
+export const QUERY_EDITOR_SQL_THREE_PART_COMPLETION_REGEX = new RegExp(
+    `(${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*(${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*([A-Za-z0-9_$]*)$`,
+);
+export const QUERY_EDITOR_SQL_QUALIFIER_COMPLETION_REGEX = new RegExp(
+    `(${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN})\\s*\\.\\s*([A-Za-z0-9_$]*)$`,
+);
+export const QUERY_EDITOR_SQL_TABLE_REFERENCE_REGEX = new RegExp(
+    `\\b(?:FROM|JOIN|UPDATE|INTO|DELETE\\s+FROM)\\s+(${QUERY_EDITOR_SQL_IDENTIFIER_PATH_PATTERN})`,
+    'gi',
+);
+export const QUERY_EDITOR_SQL_ALIAS_REFERENCE_REGEX = new RegExp(
+    `\\b(?:FROM|JOIN|UPDATE|INTO|DELETE\\s+FROM)\\s+(${QUERY_EDITOR_SQL_IDENTIFIER_PATH_PATTERN})(?:\\s+(?:AS\\s+)?(${QUERY_EDITOR_SQL_IDENTIFIER_PATTERN}))?`,
+    'gi',
+);
+export const QUERY_EDITOR_SQL_LEADING_IDENTIFIER_PATH_REGEX = new RegExp(`^(${QUERY_EDITOR_SQL_IDENTIFIER_PATH_PATTERN})([\\s\\S]*)$`);
+export const QUERY_EDITOR_HOVER_DELAY_MS = 1000;
+export const QUERY_EDITOR_OBJECT_DECORATION_MAX_TEXT_LENGTH = 200_000;
+export const QUERY_EDITOR_OBJECT_DECORATION_MAX_IDENTIFIERS = 800;
+export const QUERY_EDITOR_OBJECT_DECORATION_MAX_LINES = 1_000;
+export const QUERY_EDITOR_LIVE_DECORATION_MAX_TEXT_LENGTH = 50_000;
+export const QUERY_EDITOR_PERSISTED_DRAFT_MAX_TEXT_LENGTH = 50_000;
+
+export const getQueryEditorModelValueLength = (model: any): number | null => {
+    if (!model || typeof model.getValueLength !== 'function') {
+        return null;
+    }
+    try {
+        const length = Number(model.getValueLength());
+        return Number.isFinite(length) ? length : null;
+    } catch {
+        return null;
+    }
+};
+
+export type QueryIdentifierPathSegment = {
+    raw: string;
+    value: string;
+    quoted: boolean;
+};
+
+export const isQuotedQueryIdentifierPart = (part: string): boolean => {
+    const text = String(part || '').trim();
+    if (!text) return false;
+    return (text.startsWith('`') && text.endsWith('`'))
+        || (text.startsWith('"') && text.endsWith('"'))
+        || (text.startsWith('[') && text.endsWith(']'));
+};
+
+export const splitQueryIdentifierPathSegments = (qualifiedName: string): QueryIdentifierPathSegment[] => {
+    const text = String(qualifiedName || '').trim();
+    if (!text) return [];
+
+    const segments: QueryIdentifierPathSegment[] = [];
+    let current = '';
+    let inDouble = false;
+    let inBacktick = false;
+    let inBracket = false;
+
+    const flush = () => {
+        const raw = current.trim();
+        current = '';
+        if (!raw) return;
+        segments.push({
+            raw,
+            value: stripQueryIdentifierQuotes(raw),
+            quoted: isQuotedQueryIdentifierPart(raw),
+        });
+    };
+
+    for (let index = 0; index < text.length; index += 1) {
+        const ch = text[index];
+        const next = index + 1 < text.length ? text[index + 1] : '';
+
+        if (inDouble) {
+            current += ch;
+            if (ch === '"' && next === '"') {
+                current += next;
+                index += 1;
+                continue;
+            }
+            if (ch === '"') inDouble = false;
+            continue;
+        }
+
+        if (inBacktick) {
+            current += ch;
+            if (ch === '`' && next === '`') {
+                current += next;
+                index += 1;
+                continue;
+            }
+            if (ch === '`') inBacktick = false;
+            continue;
+        }
+
+        if (inBracket) {
+            current += ch;
+            if (ch === ']' && next === ']') {
+                current += next;
+                index += 1;
+                continue;
+            }
+            if (ch === ']') inBracket = false;
+            continue;
+        }
+
+        if (ch === '"') {
+            inDouble = true;
+            current += ch;
+            continue;
+        }
+        if (ch === '`') {
+            inBacktick = true;
+            current += ch;
+            continue;
+        }
+        if (ch === '[') {
+            inBracket = true;
+            current += ch;
+            continue;
+        }
+        if (ch === '.') {
+            flush();
+            continue;
+        }
+        current += ch;
+    }
+
+    flush();
+    return segments;
+};
+
+export const matchLeadingSelectTableReference = (sql: string): { prefix: string; tableText: string; suffix: string } | null => {
+    const match = String(sql || '').match(new RegExp(`^(\\s*SELECT\\s+[\\s\\S]+?\\s+FROM\\s+)(${QUERY_EDITOR_SQL_IDENTIFIER_PATH_PATTERN})([\\s\\S]*)$`, 'i'));
+    if (!match) return null;
+    return {
+        prefix: match[1],
+        tableText: match[2],
+        suffix: match[3] || '',
+    };
+};
+
+export const rewriteLeadingSelectTableReference = (sql: string, replacement: string): string | undefined => {
+    const match = matchLeadingSelectTableReference(sql);
+    if (!match || !replacement) return undefined;
+    return `${match.prefix}${replacement}${match.suffix}`;
+};
+
+export const resolveOracleExactCaseTableReference = (
+    statement: string,
+    currentDb: string,
+    tables: CompletionTableMeta[],
+): string | undefined => {
+    const leadingTable = matchLeadingSelectTableReference(statement);
+    if (!leadingTable) return undefined;
+
+    const segments = splitQueryIdentifierPathSegments(leadingTable.tableText);
+    if (segments.length === 0 || segments.length > 2 || segments.some((segment) => segment.quoted)) {
+        return undefined;
+    }
+    if (!segments.some((segment) => /[a-z]/.test(segment.value))) {
+        return undefined;
+    }
+
+    const rawSchemaName = segments.length === 2 ? String(segments[0]?.value || '').trim() : '';
+    const rawObjectName = String(segments[segments.length - 1]?.value || '').trim();
+    const targetDbName = String(rawSchemaName || currentDb || '').trim();
+    if (!rawObjectName || !targetDbName) return undefined;
+
+    const normalizedTargetDbName = targetDbName.toLowerCase();
+    const matched = tables.find((table) => {
+        if (String(table.dbName || '').trim().toLowerCase() !== normalizedTargetDbName) return false;
+        const parsed = splitSidebarQualifiedName(String(table.tableName || ''));
+        const objectName = String(parsed.objectName || table.tableName || '').trim();
+        const schemaName = String(parsed.schemaName || table.dbName || '').trim();
+        if (objectName !== rawObjectName) return false;
+        if (!rawSchemaName) return true;
+        return schemaName.toLowerCase() === rawSchemaName.toLowerCase();
+    });
+    if (!matched) return undefined;
+
+    const matchedParsed = splitSidebarQualifiedName(String(matched.tableName || ''));
+    const exactObjectName = String(matchedParsed.objectName || matched.tableName || '').trim();
+    const exactSchemaName = String(matchedParsed.schemaName || matched.dbName || rawSchemaName).trim();
+    const quotedParts = rawSchemaName
+        ? [exactSchemaName, exactObjectName]
+        : [exactObjectName];
+    if (quotedParts.some((part) => !String(part || '').trim())) {
+        return undefined;
+    }
+    return quotedParts.map((part) => quoteIdentPart('oracle', part)).join('.');
+};
+
+export const resolveOracleLikeDefaultSchemaName = (config: any): string => {
+    const rawUser = String(config?.user || '').trim();
+    if (!rawUser) return '';
+    const userPart = rawUser.split('@')[0] || rawUser;
+    return String(userPart || '').trim();
+};
+
+export const getQueryEditorModelTextIfWithinLimit = (model: any, maxTextLength: number): string | null => {
+    const modelLength = getQueryEditorModelValueLength(model);
+    if (modelLength !== null && modelLength > maxTextLength) {
+        return null;
+    }
+    const text = String(model?.getValue?.() || '');
+    return text.length <= maxTextLength ? text : null;
+};
+
+export const getQueryEditorObjectResolveText = (
+    model: any,
+    lineContent: string,
+    maxTextLength = QUERY_EDITOR_OBJECT_DECORATION_MAX_TEXT_LENGTH,
+): string => getQueryEditorModelTextIfWithinLimit(model, maxTextLength) ?? lineContent;
+
+export const getQueryEditorDecorationModelTextIfLightweight = (
+    model: any,
+    maxTextLength: number,
+): string | null => {
+    if (!model || typeof model.getLineCount !== 'function' || typeof model.getLineContent !== 'function') {
+        return getQueryEditorModelTextIfWithinLimit(model, maxTextLength);
+    }
+
+    const lineCount = Number(model.getLineCount());
+    if (!Number.isFinite(lineCount) || lineCount <= 0 || lineCount > QUERY_EDITOR_OBJECT_DECORATION_MAX_LINES) {
+        return null;
+    }
+
+    const lines: string[] = [];
+    let textLength = 0;
+    for (let lineNumber = 1; lineNumber <= lineCount; lineNumber += 1) {
+        const lineContent = String(model.getLineContent(lineNumber) || '');
+        textLength += lineContent.length + (lineNumber < lineCount ? 1 : 0);
+        if (textLength > maxTextLength) {
+            return null;
+        }
+        lines.push(lineContent);
+    }
+
+    return lines.join('\n');
+};
+
+export const maskQueryEditorSqlLiteralsAndComments = (source: string): string => {
+    const text = String(source || '').replace(/\r\n/g, '\n');
+    if (!text) return '';
+
+    const chars = text.split('');
+    let inSingle = false;
+    let inLineComment = false;
+    let inBlockComment = false;
+    let escaped = false;
+
+    const maskAt = (index: number) => {
+        if (chars[index] !== '\n') {
+            chars[index] = ' ';
+        }
+    };
+
+    for (let i = 0; i < text.length; i += 1) {
+        const ch = text[i];
+        const next = i + 1 < text.length ? text[i + 1] : '';
+        const prev = i > 0 ? text[i - 1] : '';
+
+        if (inLineComment) {
+            if (ch === '\n') {
+                inLineComment = false;
+            } else {
+                maskAt(i);
+            }
+            continue;
+        }
+
+        if (inBlockComment) {
+            maskAt(i);
+            if (ch === '*' && next === '/') {
+                maskAt(i + 1);
+                i += 1;
+                inBlockComment = false;
+            }
+            continue;
+        }
+
+        if (inSingle) {
+            maskAt(i);
+            if (escaped) {
+                escaped = false;
+                continue;
+            }
+            if (ch === '\\') {
+                escaped = true;
+                continue;
+            }
+            if (ch === '\'' && next === '\'') {
+                maskAt(i + 1);
+                i += 1;
+                continue;
+            }
+            if (ch === '\'') {
+                inSingle = false;
+            }
+            continue;
+        }
+
+        if (ch === '/' && next === '*') {
+            maskAt(i);
+            maskAt(i + 1);
+            i += 1;
+            inBlockComment = true;
+            continue;
+        }
+
+        if (ch === '#') {
+            maskAt(i);
+            inLineComment = true;
+            continue;
+        }
+
+        if (ch === '-' && next === '-' && (i === 0 || /\s/.test(prev))) {
+            maskAt(i);
+            maskAt(i + 1);
+            i += 1;
+            inLineComment = true;
+            continue;
+        }
+
+        if (ch === '\'') {
+            maskAt(i);
+            inSingle = true;
+        }
+    }
+
+    return chars.join('');
+};
+
+export const collectQueryEditorObjectDecorationCandidates = (
+    source: string,
+    maxIdentifiers = QUERY_EDITOR_OBJECT_DECORATION_MAX_IDENTIFIERS,
+): Array<{ lineNumber: number; lineContent: string; positionColumn: number }> => {
+    const text = String(source || '').replace(/\r\n/g, '\n');
+    if (!text) return [];
+
+    const maskedText = maskQueryEditorSqlLiteralsAndComments(text);
+    const lines = text.split('\n');
+    const maskedLines = maskedText.split('\n');
+    const candidates: Array<{ lineNumber: number; lineContent: string; positionColumn: number }> = [];
+    const identifierRegex = /[`"\[]?[A-Za-z_][A-Za-z0-9_$]*(?:[`"\]]?\s*\.\s*[`"\[]?[A-Za-z_][A-Za-z0-9_$]*){0,2}[`"\]]?/g;
+
+    for (const [lineIndex, maskedLine] of maskedLines.entries()) {
+        let match: RegExpExecArray | null;
+        identifierRegex.lastIndex = 0;
+        while ((match = identifierRegex.exec(maskedLine)) !== null) {
+            candidates.push({
+                lineNumber: lineIndex + 1,
+                lineContent: lines[lineIndex] || '',
+                positionColumn: match.index + 2,
+            });
+            if (candidates.length >= maxIdentifiers) {
+                return candidates;
+            }
+        }
+    }
+
+    return candidates;
+};
+
+export const findIdentifierWindowAtOffset = (
+    lineContent: string,
+    rawOffset: number,
+): { start: number; end: number } | null => {
+    const text = String(lineContent || '');
+    if (!text) return null;
+    const searchableText = maskQueryEditorSqlLiteralsAndComments(text);
+    const maxIndex = text.length - 1;
+    if (maxIndex < 0) return null;
+    let offset = Math.max(0, Math.min(maxIndex, Number.isFinite(rawOffset) ? rawOffset : 0));
+
+    if (!QUERY_EDITOR_IDENTIFIER_CHAR_REGEX.test(searchableText[offset] || '')) {
+        if (offset > 0 && QUERY_EDITOR_IDENTIFIER_CHAR_REGEX.test(searchableText[offset - 1] || '')) {
+            offset -= 1;
+        } else if (offset < maxIndex && QUERY_EDITOR_IDENTIFIER_CHAR_REGEX.test(searchableText[offset + 1] || '')) {
+            offset += 1;
+        } else {
+            return null;
+        }
+    }
+
+    let start = offset;
+    while (start > 0 && QUERY_EDITOR_IDENTIFIER_CHAR_REGEX.test(searchableText[start - 1] || '')) {
+        start -= 1;
+    }
+
+    let end = offset + 1;
+    while (end < text.length && QUERY_EDITOR_IDENTIFIER_CHAR_REGEX.test(searchableText[end] || '')) {
+        end += 1;
+    }
+
+    return start < end ? { start, end } : null;
+};
+
+export const normalizeNavigationIdentifierParts = (text: string): string[] => (
+    String(text || '')
+        .split('.')
+        .map((part) => stripCompletionIdentifierQuotes(part))
+        .map((part) => part.trim())
+        .filter(Boolean)
+);
+
+export const buildQueryEditorHoverMarkdown = (target: QueryEditorHoverTarget): string => {
+    const appendComment = (comment?: string): string => {
+        const normalized = normalizeCommentText(comment);
+        return normalized ? `\n\n${normalized}` : '';
+    };
+    const objectInfoLabelSeparator = translate('query_editor.object_info.label.separator');
+    const buildObjectInfoTitle = (key: string, value: string): string =>
+        `**${translate(key)}** \`${value}\``;
+    const buildObjectInfoLabel = (key: string, value: string): string =>
+        `${translate(key)}${objectInfoLabelSeparator}\`${value}\``;
+    switch (target.kind) {
+        case 'database':
+            return buildObjectInfoTitle('query_editor.object_info.database', target.dbName);
+        case 'table':
+            return `${buildObjectInfoTitle('query_editor.object_info.table', target.tableName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}${appendComment(target.comment)}`;
+        case 'view':
+            return `${buildObjectInfoTitle('sidebar.object.view', target.viewName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}`;
+        case 'materialized-view':
+            return `${buildObjectInfoTitle('query_editor.object_info.materialized_view', target.viewName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}`;
+        case 'trigger':
+            return `${buildObjectInfoTitle('trigger_viewer.field.trigger', target.triggerName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.table', target.tableName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}`;
+        case 'routine':
+            return `${buildObjectInfoTitle(target.routineType === 'PROCEDURE' ? 'sidebar.object.procedure' : 'sidebar.object.function', target.routineName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}`;
+        case 'column':
+            return `${buildObjectInfoTitle('query_editor.object_info.column', target.columnName)}${target.type ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.type', target.type)}` : ''}\n\n${buildObjectInfoLabel('query_editor.object_info.label.table', target.tableName)}\n\n${buildObjectInfoLabel('query_editor.object_info.label.database', target.dbName)}${target.schemaName ? `\n\n${buildObjectInfoLabel('query_editor.object_info.label.schema', target.schemaName)}` : ''}${appendComment(target.comment)}`;
+        default:
+            return '';
+    }
+};
+
+export const buildQueryEditorAliasMap = (
+    fullText: string,
+    currentDb: string,
+): Record<string, { dbName: string; tableName: string }> => {
+    const aliasMap: Record<string, { dbName: string; tableName: string }> = {};
+    const reserved = new Set([
+        'where', 'on', 'group', 'order', 'limit', 'having',
+        'left', 'right', 'inner', 'outer', 'full', 'cross', 'join',
+        'union', 'except', 'intersect', 'as', 'set', 'values', 'returning',
+    ]);
+    const aliasRegex = QUERY_EDITOR_SQL_ALIAS_REFERENCE_REGEX;
+    aliasRegex.lastIndex = 0;
+    let match: RegExpExecArray | null;
+    while ((match = aliasRegex.exec(fullText)) !== null) {
+        const tableIdent = normalizeCompletionQualifiedName(match[1] || '');
+        if (!tableIdent) continue;
+        const parts = tableIdent.split('.');
+        let dbName = currentDb || '';
+        let tableName = tableIdent;
+        if (parts.length === 2) {
+            dbName = parts[0];
+            tableName = parts[1];
+        } else if (parts.length >= 3) {
+            dbName = parts[0];
+            tableName = parts.slice(1).join('.');
+        }
+        const shortTable = getCompletionQualifiedNameLastPart(tableIdent);
+        if (shortTable) aliasMap[shortTable.toLowerCase()] = { dbName, tableName };
+
+        const alias = stripCompletionIdentifierQuotes(match[2] || '').trim();
+        if (!alias) continue;
+        const loweredAlias = alias.toLowerCase();
+        if (reserved.has(loweredAlias)) continue;
+        aliasMap[loweredAlias] = { dbName, tableName };
+    }
+    return aliasMap;
+};
+
+export const collectQueryEditorReferencedDatabaseNames = (
+    fullText: string,
+    currentDb: string,
+    visibleDbs: string[],
+): string[] => {
+    const result: string[] = [];
+    const seen = new Set<string>();
+    const addDb = (dbName: string) => {
+        const normalized = String(dbName || '').trim();
+        if (!normalized) return;
+        const key = normalized.toLowerCase();
+        if (seen.has(key)) return;
+        seen.add(key);
+        result.push(normalized);
+    };
+
+    addDb(currentDb);
+
+    const visibleDbByLower = new Map(
+        visibleDbs
+            .map((db) => String(db || '').trim())
+            .filter(Boolean)
+            .map((db) => [db.toLowerCase(), db] as const),
+    );
+    const commonSchemaNames = new Set(['public', 'dbo', 'sys', 'information_schema', 'pg_catalog', 'mysql', 'performance_schema']);
+    const tableRegex = QUERY_EDITOR_SQL_TABLE_REFERENCE_REGEX;
+    tableRegex.lastIndex = 0;
+    let match: RegExpExecArray | null;
+    while ((match = tableRegex.exec(String(fullText || ''))) !== null) {
+        const tableIdent = normalizeCompletionQualifiedName(match[1] || '');
+        if (!tableIdent) continue;
+        const parts = tableIdent.split('.');
+        if (parts.length < 2) continue;
+        const candidate = visibleDbByLower.get(String(parts[0] || '').toLowerCase());
+        if (candidate) {
+            addDb(candidate);
+        } else if (visibleDbByLower.size === 0) {
+            const inferredDb = String(parts[0] || '').trim();
+            const inferredKey = inferredDb.toLowerCase();
+            if (inferredDb && inferredKey !== String(currentDb || '').trim().toLowerCase() && !commonSchemaNames.has(inferredKey)) {
+                addDb(inferredDb);
+            }
+        }
+    }
+    return result;
+};
+
+export const resolveQueryEditorNavigationTarget = (
+    lineContent: string,
+    column: number,
+    currentDb: string,
+    visibleDbs: string[],
+    tables: CompletionTableMeta[],
+    views: CompletionViewMeta[] = [],
+    materializedViews: CompletionViewMeta[] = [],
+    triggers: CompletionTriggerMeta[] = [],
+    routines: CompletionRoutineMeta[] = [],
+): QueryEditorNavigationTarget | null => {
+    const text = String(lineContent || '');
+    if (!text) return null;
+
+    const offset = Math.max(0, Number(column || 1) - 2);
+    const windowRange = findIdentifierWindowAtOffset(text, offset);
+    if (!windowRange) return null;
+
+    const rawIdentifier = text.slice(windowRange.start, windowRange.end).trim();
+    if (!rawIdentifier) return null;
+
+    const parts = normalizeNavigationIdentifierParts(rawIdentifier);
+    if (parts.length === 0 || parts.length > 3) return null;
+
+    const currentDbName = String(currentDb || '').trim();
+    const visibleDbSet = new Set(visibleDbs.map((db) => String(db || '').trim().toLowerCase()).filter(Boolean));
+    const tableMetas = tables.map((table) => {
+        const dbName = String(table.dbName || '').trim();
+        const rawTableName = String(table.tableName || '').trim();
+        const parsed = splitSidebarQualifiedName(rawTableName);
+        return {
+            dbName,
+            rawTableName,
+            normalizedDbName: dbName.toLowerCase(),
+            normalizedRawTableName: rawTableName.toLowerCase(),
+            normalizedObjectName: String(parsed.objectName || rawTableName).trim().toLowerCase(),
+            schemaName: String(parsed.schemaName || '').trim(),
+            normalizedSchemaName: String(parsed.schemaName || '').trim().toLowerCase(),
+        };
+    });
+
+    const buildObjectNameMeta = (
+        dbName: string,
+        rawObjectName: string,
+        explicitSchemaName = '',
+    ) => {
+        const parsed = splitSidebarQualifiedName(rawObjectName);
+        const schemaName = String(explicitSchemaName || parsed.schemaName || '').trim();
+        const objectName = String(parsed.objectName || rawObjectName).trim();
+        return {
+            dbName: String(dbName || '').trim(),
+            rawObjectName: String(rawObjectName || '').trim(),
+            objectName,
+            schemaName,
+            normalizedDbName: String(dbName || '').trim().toLowerCase(),
+            normalizedRawObjectName: String(rawObjectName || '').trim().toLowerCase(),
+            normalizedObjectName: objectName.toLowerCase(),
+            normalizedSchemaName: schemaName.toLowerCase(),
+        };
+    };
+
+    const viewMetas = views.map((view) => buildObjectNameMeta(view.dbName, view.viewName, view.schemaName));
+    const materializedViewMetas = materializedViews.map((view) => buildObjectNameMeta(view.dbName, view.viewName, view.schemaName));
+    const triggerMetas = triggers.map((trigger) => ({
+        ...buildObjectNameMeta(trigger.dbName, trigger.triggerName, trigger.schemaName),
+        tableName: String(trigger.tableName || '').trim(),
+    }));
+    const routineMetas = routines.map((routine) => ({
+        ...buildObjectNameMeta(routine.dbName, routine.routineName, routine.schemaName),
+        routineType: String(routine.routineType || 'FUNCTION').trim().toUpperCase() || 'FUNCTION',
+    }));
+
+    const findTable = (candidateDbName: string, candidateTableName: string, schemaName = ''): QueryEditorNavigationTarget | null => {
+        const normalizedDbName = String(candidateDbName || '').trim().toLowerCase();
+        const normalizedTableName = String(candidateTableName || '').trim().toLowerCase();
+        const normalizedSchemaName = String(schemaName || '').trim().toLowerCase();
+        if (!normalizedDbName || !normalizedTableName) return null;
+
+        const exactQualifiedName = normalizedSchemaName ? `${normalizedSchemaName}.${normalizedTableName}` : normalizedTableName;
+        const exact = tableMetas.find((meta) =>
+            meta.normalizedDbName === normalizedDbName
+            && meta.normalizedRawTableName === exactQualifiedName
+        );
+        if (exact) {
+            return {
+                type: 'table',
+                dbName: exact.dbName,
+                tableName: exact.rawTableName,
+                schemaName: exact.schemaName || undefined,
+            };
+        }
+
+        const matched = tableMetas.find((meta) =>
+            meta.normalizedDbName === normalizedDbName
+            && meta.normalizedObjectName === normalizedTableName
+            && (!normalizedSchemaName || meta.normalizedSchemaName === normalizedSchemaName)
+        );
+        if (!matched) return null;
+        return {
+            type: 'table',
+            dbName: matched.dbName,
+            tableName: matched.rawTableName,
+            schemaName: matched.schemaName || undefined,
+        };
+    };
+
+    const findNamedObject = <TMeta extends {
+        dbName: string;
+        rawObjectName: string;
+        objectName: string;
+        normalizedDbName: string;
+        normalizedRawObjectName: string;
+        normalizedObjectName: string;
+        normalizedSchemaName: string;
+        schemaName: string;
+    }>(
+        metas: TMeta[],
+        candidateDbName: string,
+        candidateObjectName: string,
+        schemaName = '',
+    ): TMeta | null => {
+        const normalizedDbName = String(candidateDbName || '').trim().toLowerCase();
+        const normalizedObjectName = String(candidateObjectName || '').trim().toLowerCase();
+        const normalizedSchemaName = String(schemaName || '').trim().toLowerCase();
+        if (!normalizedDbName || !normalizedObjectName) return null;
+
+        const exactQualifiedName = normalizedSchemaName ? `${normalizedSchemaName}.${normalizedObjectName}` : normalizedObjectName;
+        const exact = metas.find((meta) =>
+            meta.normalizedDbName === normalizedDbName
+            && meta.normalizedRawObjectName === exactQualifiedName
+        );
+        if (exact) {
+            if (!normalizedSchemaName && !exact.normalizedSchemaName) {
+                const schemaQualifiedMatches = metas.filter((meta) =>
+                    meta.normalizedDbName === normalizedDbName
+                    && meta.normalizedObjectName === normalizedObjectName
+                    && Boolean(meta.normalizedSchemaName)
+                );
+                if (schemaQualifiedMatches.length === 1) {
+                    return schemaQualifiedMatches[0];
+                }
+            }
+            return exact;
+        }
+
+        return metas.find((meta) =>
+            meta.normalizedDbName === normalizedDbName
+            && meta.normalizedObjectName === normalizedObjectName
+            && (!normalizedSchemaName || meta.normalizedSchemaName === normalizedSchemaName)
+        ) || null;
+    };
+
+    const findView = (candidateDbName: string, candidateViewName: string, schemaName = ''): QueryEditorNavigationTarget | null => {
+        const matched = findNamedObject(viewMetas, candidateDbName, candidateViewName, schemaName);
+        if (!matched) return null;
+        return {
+            type: 'view',
+            dbName: matched.dbName,
+            viewName: matched.rawObjectName,
+            schemaName: matched.schemaName || undefined,
+        };
+    };
+
+    const findMaterializedView = (candidateDbName: string, candidateViewName: string, schemaName = ''): QueryEditorNavigationTarget | null => {
+        const matched = findNamedObject(materializedViewMetas, candidateDbName, candidateViewName, schemaName);
+        if (!matched) return null;
+        return {
+            type: 'materialized-view',
+            dbName: matched.dbName,
+            viewName: matched.rawObjectName,
+            schemaName: matched.schemaName || undefined,
+        };
+    };
+
+    const findTrigger = (candidateDbName: string, candidateTriggerName: string, schemaName = ''): QueryEditorNavigationTarget | null => {
+        const matched = findNamedObject(triggerMetas, candidateDbName, candidateTriggerName, schemaName);
+        if (!matched) return null;
+        return {
+            type: 'trigger',
+            dbName: matched.dbName,
+            triggerName: matched.rawObjectName,
+            tableName: matched.tableName,
+            schemaName: matched.schemaName || undefined,
+        };
+    };
+
+    const findRoutine = (candidateDbName: string, candidateRoutineName: string, schemaName = ''): QueryEditorNavigationTarget | null => {
+        const matched = findNamedObject(routineMetas, candidateDbName, candidateRoutineName, schemaName);
+        if (!matched) return null;
+        return {
+            type: 'routine',
+            dbName: matched.dbName,
+            routineName: matched.rawObjectName,
+            routineType: matched.routineType,
+            schemaName: matched.schemaName || undefined,
+        };
+    };
+
+    const findObjectInPriorityOrder = (candidateDbName: string, candidateObjectName: string, schemaName = ''): QueryEditorNavigationTarget | null => (
+        findTable(candidateDbName, candidateObjectName, schemaName)
+        || findView(candidateDbName, candidateObjectName, schemaName)
+        || findMaterializedView(candidateDbName, candidateObjectName, schemaName)
+        || findTrigger(candidateDbName, candidateObjectName, schemaName)
+        || findRoutine(candidateDbName, candidateObjectName, schemaName)
+    );
+
+    if (parts.length === 1) {
+        const [singlePart] = parts;
+        const normalizedSingle = singlePart.toLowerCase();
+        if (visibleDbSet.has(normalizedSingle)) {
+            return { type: 'database', dbName: singlePart };
+        }
+        return findObjectInPriorityOrder(currentDbName, singlePart);
+    }
+
+    if (parts.length === 2) {
+        const [firstPart, secondPart] = parts;
+        if (visibleDbSet.has(firstPart.toLowerCase())) {
+            return findObjectInPriorityOrder(firstPart, secondPart);
+        }
+        return findObjectInPriorityOrder(currentDbName, secondPart, firstPart);
+    }
+
+    const [dbName, schemaName, tableName] = parts;
+    if (!visibleDbSet.has(dbName.toLowerCase())) {
+        return null;
+    }
+    return findObjectInPriorityOrder(dbName, tableName, schemaName);
+};
+
+export const resolveQueryEditorHoverTarget = (
+    fullText: string,
+    lineContent: string,
+    column: number,
+    currentDb: string,
+    visibleDbs: string[],
+    tables: CompletionTableMeta[],
+    allColumns: CompletionColumnMeta[],
+    views: CompletionViewMeta[] = [],
+    materializedViews: CompletionViewMeta[] = [],
+    triggers: CompletionTriggerMeta[] = [],
+    routines: CompletionRoutineMeta[] = [],
+): QueryEditorHoverTarget | null => {
+    const text = String(lineContent || '');
+    if (!text) return null;
+
+    const offset = Math.max(0, Number(column || 1) - 2);
+    const windowRange = findIdentifierWindowAtOffset(text, offset);
+    if (!windowRange) return null;
+
+    const rawIdentifier = text.slice(windowRange.start, windowRange.end).trim();
+    if (!rawIdentifier) return null;
+
+    const range = { startColumn: windowRange.start + 1, endColumn: windowRange.end + 1 };
+    const parts = normalizeNavigationIdentifierParts(rawIdentifier);
+    if (parts.length === 0 || parts.length > 3) return null;
+
+    const findMatchingTable = (dbName: string, rawTableName: string, schemaName = ''): CompletionTableMeta | null => {
+        const normalizedDbName = String(dbName || '').trim().toLowerCase();
+        const normalizedRawTableName = String(rawTableName || '').trim().toLowerCase();
+        const normalizedSchemaName = String(schemaName || '').trim().toLowerCase();
+        return tables.find((item) => {
+            if (String(item.dbName || '').trim().toLowerCase() !== normalizedDbName) return false;
+            const itemRawName = String(item.tableName || '').trim();
+            const parsed = splitSidebarQualifiedName(itemRawName);
+            const itemObjectName = String(parsed.objectName || itemRawName).trim().toLowerCase();
+            const itemSchemaName = String(parsed.schemaName || '').trim().toLowerCase();
+            if (normalizedSchemaName) {
+                const normalizedItemRawName = String(itemRawName).trim().toLowerCase();
+                return itemSchemaName === normalizedSchemaName
+                    && (
+                        itemObjectName === normalizedRawTableName
+                        || normalizedItemRawName === normalizedRawTableName
+                        || normalizedItemRawName === `${normalizedSchemaName}.${normalizedRawTableName}`
+                    );
+            }
+            return itemObjectName === normalizedRawTableName || String(itemRawName).trim().toLowerCase() === normalizedRawTableName;
+        }) || null;
+    };
+
+    const navigationTarget = resolveQueryEditorNavigationTarget(
+        lineContent,
+        column,
+        currentDb,
+        visibleDbs,
+        tables,
+        views,
+        materializedViews,
+        triggers,
+        routines,
+    );
+    if (navigationTarget) {
+        if (navigationTarget.type === 'database') {
+            return { kind: 'database', dbName: navigationTarget.dbName, range };
+        }
+        if (navigationTarget.type === 'table') {
+            const meta = findMatchingTable(navigationTarget.dbName, navigationTarget.tableName, navigationTarget.schemaName || '');
+            return {
+                kind: 'table',
+                dbName: navigationTarget.dbName,
+                tableName: navigationTarget.tableName,
+                schemaName: navigationTarget.schemaName,
+                comment: meta?.comment,
+                range,
+            };
+        }
+        if (navigationTarget.type === 'view') {
+            return { kind: 'view', dbName: navigationTarget.dbName, viewName: navigationTarget.viewName, schemaName: navigationTarget.schemaName, range };
+        }
+        if (navigationTarget.type === 'materialized-view') {
+            return { kind: 'materialized-view', dbName: navigationTarget.dbName, viewName: navigationTarget.viewName, schemaName: navigationTarget.schemaName, range };
+        }
+        if (navigationTarget.type === 'trigger') {
+            return { kind: 'trigger', dbName: navigationTarget.dbName, triggerName: navigationTarget.triggerName, tableName: navigationTarget.tableName, schemaName: navigationTarget.schemaName, range };
+        }
+        return { kind: 'routine', dbName: navigationTarget.dbName, routineName: navigationTarget.routineName, routineType: navigationTarget.routineType, schemaName: navigationTarget.schemaName, range };
+    }
+
+    const findColumnTarget = (dbName: string, tableName: string, columnName: string): QueryEditorHoverTarget | null => {
+        const normalizedDbName = String(dbName || '').trim().toLowerCase();
+        const normalizedTableName = String(tableName || '').trim().toLowerCase();
+        const normalizedColumnName = String(columnName || '').trim().toLowerCase();
+        const column = allColumns.find((item) => {
+            if (String(item.dbName || '').trim().toLowerCase() !== normalizedDbName) return false;
+            if (String(item.name || '').trim().toLowerCase() !== normalizedColumnName) return false;
+            const rawTable = String(item.tableName || '').trim().toLowerCase();
+            const parsed = splitCompletionSchemaAndTable(item.tableName || '');
+            return rawTable === normalizedTableName || String(parsed.table || '').trim().toLowerCase() === normalizedTableName;
+        });
+        if (!column) return null;
+        const parsedTable = splitCompletionSchemaAndTable(column.tableName || '');
+        return {
+            kind: 'column',
+            dbName: column.dbName,
+            tableName: column.tableName,
+            columnName: column.name,
+            type: column.type,
+            comment: column.comment,
+            schemaName: parsedTable.schema || undefined,
+            range,
+        };
+    };
+
+    if (parts.length === 2) {
+        const [firstPart, secondPart] = parts;
+        const aliasMap = buildQueryEditorAliasMap(fullText, currentDb);
+        const aliasInfo = aliasMap[firstPart.toLowerCase()];
+        if (aliasInfo) {
+            const aliasedColumn = findColumnTarget(aliasInfo.dbName, aliasInfo.tableName, secondPart);
+            if (aliasedColumn) return aliasedColumn;
+        }
+        const qualifiedTable = findMatchingTable(currentDb, secondPart, firstPart);
+        if (qualifiedTable) {
+            return {
+                kind: 'table',
+                dbName: qualifiedTable.dbName,
+                tableName: qualifiedTable.tableName,
+                schemaName: firstPart,
+                comment: qualifiedTable.comment,
+                range,
+            };
+        }
+    }
+
+    if (parts.length === 1) {
+        const [columnName] = parts;
+        const normalizedCurrentDb = String(currentDb || '').trim().toLowerCase();
+        const directColumns = allColumns.filter((item) =>
+            String(item.dbName || '').trim().toLowerCase() === normalizedCurrentDb
+            && String(item.name || '').trim().toLowerCase() === columnName.toLowerCase()
+        );
+        if (directColumns.length === 1) {
+            const column = directColumns[0];
+            const parsedTable = splitCompletionSchemaAndTable(column.tableName || '');
+            return {
+                kind: 'column',
+                dbName: column.dbName,
+                tableName: column.tableName,
+                columnName: column.name,
+                type: column.type,
+                comment: column.comment,
+                schemaName: parsedTable.schema || undefined,
+                range,
+            };
+        }
+    }
+
+    return null;
+};
+
+export const resolveQueryEditorNavigationDecorations = (
+    lineContent: string,
+    column: number,
+    currentDb: string,
+    visibleDbs: string[],
+    tables: CompletionTableMeta[],
+    views: CompletionViewMeta[] = [],
+    materializedViews: CompletionViewMeta[] = [],
+    triggers: CompletionTriggerMeta[] = [],
+    routines: CompletionRoutineMeta[] = [],
+    shortcutModifierLabel = 'Ctrl/Cmd',
+): Array<{ startColumn: number; endColumn: number; hoverMessage: string }> => {
+    const text = String(lineContent || '');
+    if (!text) return [];
+    const offset = Math.max(0, Number(column || 1) - 2);
+    const windowRange = findIdentifierWindowAtOffset(text, offset);
+    if (!windowRange) return [];
+
+    const navigationTarget = resolveQueryEditorNavigationTarget(
+        lineContent,
+        column,
+        currentDb,
+        visibleDbs,
+        tables,
+        views,
+        materializedViews,
+        triggers,
+        routines,
+    );
+    if (!navigationTarget) return [];
+
+    const hoverMessage = (() => {
+        if (navigationTarget.type === 'database') {
+            return translate('query_editor.hover.switch_database_with_shortcut', {
+                shortcut: shortcutModifierLabel,
+            });
+        }
+        if (navigationTarget.type === 'table') {
+            return translate('query_editor.hover.open_table_with_shortcut', {
+                shortcut: shortcutModifierLabel,
+            });
+        }
+        if (navigationTarget.type === 'view') {
+            return translate('query_editor.hover.open_view_with_shortcut', {
+                shortcut: shortcutModifierLabel,
+            });
+        }
+        if (navigationTarget.type === 'materialized-view') {
+            return translate('query_editor.hover.open_materialized_view_with_shortcut', {
+                shortcut: shortcutModifierLabel,
+            });
+        }
+        if (navigationTarget.type === 'trigger') {
+            return translate('query_editor.hover.open_trigger_with_shortcut', {
+                shortcut: shortcutModifierLabel,
+            });
+        }
+        return navigationTarget.routineType === 'PROCEDURE'
+            ? translate('query_editor.hover.open_procedure_with_shortcut', {
+                shortcut: shortcutModifierLabel,
+            })
+            : translate('query_editor.hover.open_function_with_shortcut', {
+                shortcut: shortcutModifierLabel,
+            });
+    })();
+
+    return [{
+        startColumn: windowRange.start + 1,
+        endColumn: windowRange.end + 1,
+        hoverMessage,
+    }];
+};
+
+export const dispatchQueryEditorSidebarLocate = (detail: Record<string, unknown>) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    const connectionId = String(detail.connectionId || '').trim();
+    const dbName = String(detail.dbName || '').trim();
+    const objectName = String(detail.tableName || detail.viewName || detail.triggerName || detail.routineName || detail.objectName || '').trim();
+    if (!connectionId || !dbName || !objectName) {
+        return;
+    }
+    window.dispatchEvent(new CustomEvent('gonavi:locate-sidebar-object', {
+        detail,
+    }));
+};
+
+export const resolveEventTargetNode = (target: EventTarget | null): Node | null => (
+    typeof Node !== 'undefined' && target instanceof Node ? target : null
+);
+
+export const isDocumentLevelShortcutTarget = (targetNode: Node | null): boolean => {
+    if (!targetNode) {
+        return true;
+    }
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    return targetNode === document.body || targetNode === document.documentElement;
+};
+
+export const clearQueryEditorLinkDecorations = (
+    editor: any,
+    decorationIdsRef: React.MutableRefObject<string[]>,
+) => {
+    if (!editor?.deltaDecorations) {
+        decorationIdsRef.current = [];
+        return;
+    }
+    decorationIdsRef.current = editor.deltaDecorations(decorationIdsRef.current, []);
+};
+
+export const clearQueryEditorObjectDecorations = (
+    editor: any,
+    decorationIdsRef: React.MutableRefObject<string[]>,
+) => {
+    if (!editor?.deltaDecorations) {
+        decorationIdsRef.current = [];
+        return;
+    }
+    decorationIdsRef.current = editor.deltaDecorations(decorationIdsRef.current, []);
+};
+
+export const resolveQueryLocatorPlan = async ({
+    statement,
+    originalStatement,
+    dbType,
+    currentDb,
+    config,
+    forceReadOnly,
+}: {
+    statement: string;
+    originalStatement?: string;
+    dbType: string;
+    currentDb: string;
+    config: any;
+    forceReadOnly: boolean;
+}): Promise<QueryStatementPlan> => {
+    const plan: QueryStatementPlan = {
+        originalSql: originalStatement || statement,
+        executedSql: statement,
+        pkColumns: [],
+    };
+    if (forceReadOnly) return plan;
+
+    const defaultSchema = isOracleLikeDialect(dbType) ? resolveOracleLikeDefaultSchemaName(config) : '';
+    let tableRef = extractQueryResultTableRef(statement, dbType, currentDb, defaultSchema);
+    if (!tableRef) return plan;
+    plan.tableRef = tableRef;
+    if (isSystemMetadataQueryResult(tableRef, dbType)) {
+        plan.editLocator = buildQueryReadOnlyLocator(translate('query_editor.message.read_only_system_metadata'));
+        return plan;
+    }
+
+    const selectInfo = parseSimpleSelectInfo(statement);
+    if (!selectInfo) {
+        // 聚合、函数和表达式结果天然无法安全回写到单行，静默保持只读即可。
+        return plan;
+    }
+    if (!selectInfo.selectsAll && Object.keys(selectInfo.writableColumns).length === 0) {
+        return plan;
+    }
+
+    if (isOracleLikeDialect(dbType) && defaultSchema && !String(tableRef.tableName || '').includes('.')) {
+        tableRef = {
+            ...tableRef,
+            tableName: `${tableRef.metadataDbName}.${tableRef.metadataTableName}`,
+        };
+        plan.tableRef = tableRef;
+    }
+
+    try {
+        const [resCols, resIndexes] = await Promise.all([
+            DBGetColumns(buildRpcConnectionConfig(config) as any, tableRef.metadataDbName, tableRef.metadataTableName),
+            DBGetIndexes(buildRpcConnectionConfig(config) as any, tableRef.metadataDbName, tableRef.metadataTableName)
+                .catch((error: any) => ({ success: false, message: String(error?.message || error || 'Failed to load indexes'), data: [] })),
+        ]);
+        if (!resCols?.success || !Array.isArray(resCols.data)) {
+            const reason = translate('query_editor.message.read_only_table_locator_metadata_unavailable', {
+                table: `${tableRef.metadataDbName}.${tableRef.metadataTableName}`,
+            });
+            plan.editLocator = buildQueryReadOnlyLocator(reason);
+            plan.warning = translate('query_editor.message.read_only_warning_with_detail', { detail: reason });
+            return plan;
+        }
+
+        const tableColumns = resCols.data as ColumnDefinition[];
+        const tableColumnNames = tableColumns.map(getColumnDefinitionName).filter(Boolean);
+        const primaryKeys = tableColumns
+            .filter((column: any) => getColumnDefinitionKey(column) === 'PRI')
+            .map(getColumnDefinitionName)
+            .filter(Boolean);
+        const indexes = resIndexes?.success && Array.isArray(resIndexes.data)
+            ? resIndexes.data as IndexDefinition[]
+            : [];
+        const writableColumns: Record<string, string> = selectInfo.selectsAll
+            ? Object.fromEntries(tableColumnNames.map((column) => [column, column]))
+            : {};
+        Object.entries(selectInfo.writableColumns).forEach(([resultColumn, sourceColumn]) => {
+            const metadataColumn = resolveMetadataColumnName(tableColumnNames, sourceColumn);
+            if (metadataColumn) writableColumns[resultColumn] = metadataColumn;
+        });
+        const appendExpressions: string[] = [];
+        const hiddenColumns: string[] = [];
+        let needsOracleRowIDExpression = false;
+        let needsDuckDBRowIDExpression = false;
+
+        const buildColumnLocator = (strategy: 'primary-key' | 'unique-key', locatorColumns: string[]): EditRowLocator => {
+            const valueColumns = locatorColumns.map((column, index) => {
+                const selectedColumn = findWritableResultColumnForSource(writableColumns, column);
+                if (selectedColumn) return selectedColumn;
+                const alias = buildQueryLocatorAlias(column, index + 1);
+                appendExpressions.push(buildQueryLocatorColumnExpression(dbType, column, alias));
+                hiddenColumns.push(alias);
+                return alias;
+            });
+            return {
+                strategy,
+                columns: locatorColumns,
+                valueColumns,
+                hiddenColumns: hiddenColumns.length > 0 ? [...hiddenColumns] : undefined,
+                writableColumns,
+                readOnly: false,
+            };
+        };
+
+        if (primaryKeys.length > 0) {
+            plan.pkColumns = primaryKeys;
+            plan.editLocator = buildColumnLocator('primary-key', primaryKeys);
+        } else {
+            const uniqueKeyGroups = resolveUniqueKeyGroupsFromIndexes(indexes);
+            const uniqueKeyGroup = uniqueKeyGroups.find((group) => group.length > 0);
+            if (uniqueKeyGroup) {
+                plan.editLocator = buildColumnLocator('unique-key', uniqueKeyGroup);
+            } else if (isOracleLikeDialect(dbType)) {
+                needsOracleRowIDExpression = true;
+                plan.editLocator = {
+                    strategy: 'oracle-rowid',
+                    columns: ['ROWID'],
+                    valueColumns: [ORACLE_ROWID_LOCATOR_COLUMN],
+                    hiddenColumns: [ORACLE_ROWID_LOCATOR_COLUMN],
+                    writableColumns,
+                    readOnly: false,
+                };
+            } else if (String(dbType || '').trim().toLowerCase() === 'duckdb') {
+                needsDuckDBRowIDExpression = true;
+                plan.editLocator = {
+                    strategy: 'duckdb-rowid',
+                    columns: ['rowid'],
+                    valueColumns: [DUCKDB_ROWID_LOCATOR_COLUMN],
+                    hiddenColumns: [DUCKDB_ROWID_LOCATOR_COLUMN],
+                    writableColumns,
+                    readOnly: false,
+                };
+            } else {
+                if (!resIndexes?.success) {
+                    const reason = translate('query_editor.message.read_only_index_metadata_unavailable');
+                    plan.editLocator = buildQueryReadOnlyLocator(reason);
+                    plan.warning = translate('query_editor.message.read_only_warning_with_detail', {
+                        detail: `${tableRef.metadataDbName}.${tableRef.metadataTableName} ${reason}`,
+                    });
+                } else {
+                    const reason = translate('query_editor.message.read_only_no_safe_locator');
+                    plan.editLocator = buildQueryReadOnlyLocator(reason);
+                    plan.warning = translate('query_editor.message.read_only_warning_with_detail', {
+                        detail: `${tableRef.metadataDbName}.${tableRef.metadataTableName} ${reason}`,
+                    });
+                }
+            }
+        }
+
+        const executableAppendExpressions = [
+            ...(needsOracleRowIDExpression ? [buildQueryRowIDExpression(dbType)] : []),
+            ...(needsDuckDBRowIDExpression ? [buildDuckDBRowIDExpression(dbType)] : []),
+            ...appendExpressions,
+        ];
+
+        if (executableAppendExpressions.length > 0 && isOracleLikeDialect(dbType) && selectInfo.selectsBareAll) {
+            const rewritten = rewriteOracleSelectAllWithExpressions(statement, executableAppendExpressions);
+            if (rewritten) {
+                plan.executedSql = rewritten;
+                return plan;
+            }
+
+            const reason = translate('query_editor.message.read_only_oracle_rowid_injection_unavailable');
+            plan.editLocator = buildQueryReadOnlyLocator(reason);
+            plan.warning = translate('query_editor.message.read_only_warning_with_detail', { detail: reason });
+            return plan;
+        }
+
+        plan.executedSql = appendQuerySelectExpressions(statement, executableAppendExpressions);
+        return plan;
+    } catch {
+        const reason = translate('query_editor.message.read_only_table_locator_metadata_unavailable', {
+            table: `${tableRef.metadataDbName}.${tableRef.metadataTableName}`,
+        });
+        plan.editLocator = buildQueryReadOnlyLocator(reason);
+        plan.warning = translate('query_editor.message.read_only_warning_with_detail', { detail: reason });
+        return plan;
+    }
+};
diff --git a/frontend/src/components/useDataGridBatchActions.ts b/frontend/src/components/useDataGridBatchActions.ts
new file mode 100644
index 0000000..f9d7202
--- /dev/null
+++ b/frontend/src/components/useDataGridBatchActions.ts
@@ -0,0 +1,728 @@
+import { useCallback, useEffect } from 'react';
+import type React from 'react';
+import { message } from 'antd';
+import type { Item } from './DataGridCore';
+
+type DataGridBatchActionsContext = Record<string, any> & {
+  CELL_SELECTION_DRAG_THRESHOLD_PX: number;
+  GONAVI_ROW_KEY: string;
+  addedRows: any[];
+  modifiedRows: Record<string, any>;
+  selectedCells: Set<string>;
+  copiedCellPatch: { sourceRowKey: string; values: Record<string, any> } | null;
+  displayDataRef: React.MutableRefObject<any[]>;
+  currentSelectionRef: React.MutableRefObject<Set<string>>;
+  rowIndexMapRef: React.MutableRefObject<Map<string, number>>;
+  selectedRowKeysRef: React.MutableRefObject<React.Key[]>;
+  selectionStartRef: React.MutableRefObject<{
+    rowKey: string;
+    colName: string;
+    rowIndex: number;
+    colIndex: number;
+  } | null>;
+  cellEditModeRef: React.MutableRefObject<boolean>;
+  cellSelectionAutoScrollRafRef: React.MutableRefObject<number | null>;
+  cellSelectionPointerRef: React.MutableRefObject<{ x: number; y: number } | null>;
+  cellSelectionRafRef: React.MutableRefObject<number | null>;
+  cellSelectionScrollRafRef: React.MutableRefObject<number | null>;
+  pendingCellSelectionStartRef: React.MutableRefObject<{
+    rowKey: string;
+    colName: string;
+    x: number;
+    y: number;
+  } | null>;
+  suppressCellSelectionClickRef: React.MutableRefObject<boolean>;
+  isDraggingRef: React.MutableRefObject<boolean>;
+  columnIndexMap: Map<string, number>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  setAddedRows: React.Dispatch<React.SetStateAction<any[]>>;
+  setCellContextMenu: React.Dispatch<React.SetStateAction<any>>;
+  setCellEditMode: React.Dispatch<React.SetStateAction<boolean>>;
+  setCopiedCellPatch: React.Dispatch<
+    React.SetStateAction<{ sourceRowKey: string; values: Record<string, any> } | null>
+  >;
+  setModifiedRows: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+  setSelectedCells: React.Dispatch<React.SetStateAction<Set<string>>>;
+  rowKeyStr: (key: React.Key) => string;
+  makeCellKey: (rowKey: string, colName: string) => string;
+  splitCellKey: (cellKey: string) => { rowKey: string; colName: string } | null;
+  updateCellSelection: (cells: Set<string>) => void;
+  isCellValueEqualForDiff: (left: any, right: any) => boolean;
+  isWritableResultColumn: (columnName: string, editLocator: any) => boolean;
+  translateDataGrid: (key: string, params?: any) => string;
+};
+
+export const useDataGridBatchActions = (ctx: DataGridBatchActionsContext) => {
+  const {
+    CELL_SELECTION_DRAG_THRESHOLD_PX,
+    GONAVI_ROW_KEY,
+    addedRows,
+    batchEditSetNull,
+    batchEditValue,
+    canModifyData,
+    cancelAnimationFrame,
+    cellEditModeRef,
+    cellSelectionAutoScrollRafRef,
+    cellSelectionPointerRef,
+    cellSelectionRafRef,
+    cellSelectionScrollRafRef,
+    closeBatchEditModal,
+    columnIndexMap,
+    containerRef,
+    copiedCellPatch,
+    currentSelectionRef,
+    displayColumnNames,
+    displayDataRef,
+    effectiveEditLocator,
+    isCellValueEqualForDiff,
+    isDraggingRef,
+    isTableSurfaceActive,
+    isWritableResultColumn,
+    makeCellKey,
+    modifiedRows,
+    pendingCellSelectionStartRef,
+    requestAnimationFrame,
+    rowIndexMapRef,
+    rowKeyStr,
+    selectedCells,
+    selectedRowKeysRef,
+    selectionStartRef,
+    setAddedRows,
+    setCellContextMenu,
+    setCellEditMode,
+    setCopiedCellPatch,
+    setModifiedRows,
+    setSelectedCells,
+    splitCellKey,
+    suppressCellSelectionClickRef,
+    translateDataGrid,
+    updateCellSelection,
+  } = ctx;
+
+const handleBatchFillCells = useCallback(() => {
+    const cellsToFill = currentSelectionRef.current;
+    if (cellsToFill.size === 0) {
+      void message.info(translateDataGrid('data_grid.message.select_cells_to_fill'));
+      return;
+    }
+
+    const fillValue = batchEditSetNull ? null : batchEditValue;
+
+    const addedRowMap = new Map<string, any>();
+    addedRows.forEach((r) => {
+      const k = r?.[GONAVI_ROW_KEY];
+      if (k === undefined) return;
+      addedRowMap.set(rowKeyStr(k), r);
+    });
+
+    const baseRowMap = new Map<string, any>();
+    displayDataRef.current.forEach((r) => {
+      const k = r?.[GONAVI_ROW_KEY];
+      if (k === undefined) return;
+      baseRowMap.set(rowKeyStr(k), r);
+    });
+
+    const patchesByRow = new Map<string, Record<string, any>>();
+    let updatedCount = 0;
+
+    cellsToFill.forEach((cellKey) => {
+      const parts = splitCellKey(cellKey);
+      if (!parts) return;
+      const { rowKey, colName } = parts;
+
+      const existing = modifiedRows[rowKey];
+      const baseRow = baseRowMap.get(rowKey);
+      let currentVal: any;
+
+      const addedRow = addedRowMap.get(rowKey);
+      if (addedRow) {
+        currentVal = addedRow?.[colName];
+      } else if (existing && Object.prototype.hasOwnProperty.call(existing as any, GONAVI_ROW_KEY)) {
+        currentVal = (existing as any)?.[colName];
+      } else if (existing && Object.prototype.hasOwnProperty.call(existing as any, colName)) {
+        currentVal = (existing as any)?.[colName];
+      } else {
+        currentVal = baseRow?.[colName];
+      }
+
+      const isSame = isCellValueEqualForDiff(currentVal, fillValue);
+      if (isSame) return;
+
+      const patch = patchesByRow.get(rowKey) || {};
+      patch[colName] = fillValue;
+      patchesByRow.set(rowKey, patch);
+      updatedCount++;
+    });
+
+    if (updatedCount === 0) {
+      void message.info(translateDataGrid('data_grid.message.selected_cells_no_update'));
+      return;
+    }
+
+    // 仅做一次状态提交，避免大量 setState 循环
+    setAddedRows(prev => prev.map(r => {
+      const k = r?.[GONAVI_ROW_KEY];
+      if (k === undefined) return r;
+      const patch = patchesByRow.get(rowKeyStr(k));
+      if (!patch) return r;
+      return { ...r, ...patch };
+    }));
+
+    setModifiedRows(prev => {
+      let next: Record<string, any> | null = null;
+
+      patchesByRow.forEach((patch, keyStr) => {
+        if (addedRowMap.has(keyStr)) return;
+
+        const existing = prev[keyStr];
+        const merged = existing ? { ...(existing as any), ...patch } : patch;
+        if (!next) next = { ...prev };
+        next[keyStr] = merged;
+      });
+
+      return next || prev;
+    });
+
+    void message.success(translateDataGrid('data_grid.message.filled_cells', { count: updatedCount }));
+    closeBatchEditModal();
+
+    // 清除选中状态
+    setSelectedCells(new Set());
+    currentSelectionRef.current = new Set();
+    selectionStartRef.current = null;
+    isDraggingRef.current = false;
+    cellSelectionPointerRef.current = null;
+    if (cellSelectionAutoScrollRafRef.current !== null) {
+      cancelAnimationFrame(cellSelectionAutoScrollRafRef.current);
+      cellSelectionAutoScrollRafRef.current = null;
+    }
+    updateCellSelection(new Set());
+  }, [batchEditValue, batchEditSetNull, addedRows, modifiedRows, rowKeyStr, updateCellSelection, closeBatchEditModal, translateDataGrid]);
+
+  // 事件委托：在容器级别处理单元格拖选；未开启模式时，拖拽超过阈值会自动进入单元格编辑模式。
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!canModifyData || !isTableSurfaceActive) return;
+    if (!container) return;
+    const EDGE_THRESHOLD_PX = 28;
+    const MIN_SCROLL_STEP = 8;
+    const MAX_SCROLL_STEP = 24;
+
+    const isInteractiveTarget = (target: HTMLElement | null): boolean => {
+      if (!target) return false;
+      return !!target.closest('input, textarea, button, select, [contenteditable="true"], .ant-checkbox, .ant-picker, .ant-select, .ant-dropdown, .ant-modal');
+    };
+
+    const getCellElement = (target: HTMLElement | null): HTMLElement | null => {
+      if (!target) return null;
+      const cell = target.closest('[data-row-key][data-col-name]') as HTMLElement;
+      if (!cell || !container.contains(cell)) return null;
+      const colName = cell.getAttribute('data-col-name');
+      if (!colName || !isWritableResultColumn(colName, effectiveEditLocator)) return null;
+      return cell;
+    };
+
+    const getCellInfo = (target: HTMLElement | null): { rowKey: string; colName: string } | null => {
+      const cell = getCellElement(target);
+      if (!cell) return null;
+      const rowKey = cell.getAttribute('data-row-key');
+      const colName = cell.getAttribute('data-col-name');
+      if (!rowKey || !colName) return null;
+      return { rowKey, colName };
+    };
+
+    const getCellInfoFromPoint = (x: number, y: number): { rowKey: string; colName: string } | null => {
+      const target = document.elementFromPoint(x, y) as HTMLElement | null;
+      return getCellInfo(target);
+    };
+
+    const applySelectionUpdate = (cellInfo: { rowKey: string; colName: string }) => {
+      const start = selectionStartRef.current;
+      if (!start) return;
+
+      const currentData = displayDataRef.current;
+      const rowIndexMap = rowIndexMapRef.current;
+      const startRowIndex = start.rowIndex;
+      const endRowIndex = rowIndexMap.get(cellInfo.rowKey) ?? -1;
+      if (startRowIndex === -1 || endRowIndex === -1) return;
+
+      const startColIndex = start.colIndex;
+      const endColIndex = columnIndexMap.get(cellInfo.colName) ?? -1;
+      if (startColIndex === -1 || endColIndex === -1) return;
+
+      const minRowIndex = Math.min(startRowIndex, endRowIndex);
+      const maxRowIndex = Math.max(startRowIndex, endRowIndex);
+      const minColIndex = Math.min(startColIndex, endColIndex);
+      const maxColIndex = Math.max(startColIndex, endColIndex);
+
+      const newSelectedCells = new Set<string>();
+      for (let i = minRowIndex; i <= maxRowIndex; i++) {
+        const row = currentData[i];
+        const rKey = String(row?.[GONAVI_ROW_KEY]);
+        for (let j = minColIndex; j <= maxColIndex; j++) {
+          newSelectedCells.add(makeCellKey(rKey, displayColumnNames[j]));
+        }
+      }
+
+      currentSelectionRef.current = newSelectedCells;
+      updateCellSelection(newSelectedCells);
+    };
+
+    const scheduleSelectionUpdate = (cellInfo: { rowKey: string; colName: string }) => {
+      if (cellSelectionRafRef.current !== null) {
+        cancelAnimationFrame(cellSelectionRafRef.current);
+      }
+
+      cellSelectionRafRef.current = requestAnimationFrame(() => {
+        cellSelectionRafRef.current = null;
+        applySelectionUpdate(cellInfo);
+      });
+    };
+
+    const stopAutoScroll = () => {
+      if (cellSelectionAutoScrollRafRef.current !== null) {
+        cancelAnimationFrame(cellSelectionAutoScrollRafRef.current);
+        cellSelectionAutoScrollRafRef.current = null;
+      }
+    };
+
+    const getScrollStep = (distanceToEdge: number): number => {
+      const ratio = Math.min(1, Math.max(0, distanceToEdge / EDGE_THRESHOLD_PX));
+      return Math.round(MIN_SCROLL_STEP + (MAX_SCROLL_STEP - MIN_SCROLL_STEP) * ratio);
+    };
+
+    const autoScrollTick = () => {
+      if (!isDraggingRef.current || !selectionStartRef.current) {
+        stopAutoScroll();
+        return;
+      }
+
+      const pointer = cellSelectionPointerRef.current;
+      const tableBody = container.querySelector('.ant-table-body') as HTMLElement | null;
+      if (!pointer || !tableBody) {
+        cellSelectionAutoScrollRafRef.current = requestAnimationFrame(autoScrollTick);
+        return;
+      }
+
+      const rect = tableBody.getBoundingClientRect();
+      const maxScrollTop = Math.max(0, tableBody.scrollHeight - tableBody.clientHeight);
+      const maxScrollLeft = Math.max(0, tableBody.scrollWidth - tableBody.clientWidth);
+      let deltaY = 0;
+      let deltaX = 0;
+
+      if (pointer.y < rect.top + EDGE_THRESHOLD_PX && tableBody.scrollTop > 0) {
+        const distance = rect.top + EDGE_THRESHOLD_PX - pointer.y;
+        deltaY = -getScrollStep(distance);
+      } else if (pointer.y > rect.bottom - EDGE_THRESHOLD_PX && tableBody.scrollTop < maxScrollTop) {
+        const distance = pointer.y - (rect.bottom - EDGE_THRESHOLD_PX);
+        deltaY = getScrollStep(distance);
+      }
+
+      if (pointer.x < rect.left + EDGE_THRESHOLD_PX && tableBody.scrollLeft > 0) {
+        const distance = rect.left + EDGE_THRESHOLD_PX - pointer.x;
+        deltaX = -getScrollStep(distance);
+      } else if (pointer.x > rect.right - EDGE_THRESHOLD_PX && tableBody.scrollLeft < maxScrollLeft) {
+        const distance = pointer.x - (rect.right - EDGE_THRESHOLD_PX);
+        deltaX = getScrollStep(distance);
+      }
+
+      let didScroll = false;
+      if (deltaY !== 0) {
+        const nextTop = Math.max(0, Math.min(maxScrollTop, tableBody.scrollTop + deltaY));
+        if (nextTop !== tableBody.scrollTop) {
+          tableBody.scrollTop = nextTop;
+          didScroll = true;
+        }
+      }
+
+      if (deltaX !== 0) {
+        const nextLeft = Math.max(0, Math.min(maxScrollLeft, tableBody.scrollLeft + deltaX));
+        if (nextLeft !== tableBody.scrollLeft) {
+          tableBody.scrollLeft = nextLeft;
+          didScroll = true;
+        }
+      }
+
+      if (didScroll) {
+        const cellInfo = getCellInfoFromPoint(pointer.x, pointer.y);
+        if (cellInfo) scheduleSelectionUpdate(cellInfo);
+      }
+
+      cellSelectionAutoScrollRafRef.current = requestAnimationFrame(autoScrollTick);
+    };
+
+    const ensureAutoScroll = () => {
+      if (cellSelectionAutoScrollRafRef.current !== null) return;
+      cellSelectionAutoScrollRafRef.current = requestAnimationFrame(autoScrollTick);
+    };
+
+    const beginCellSelection = (cellInfo: { rowKey: string; colName: string }, x: number, y: number) => {
+      if (!cellEditModeRef.current) {
+        cellEditModeRef.current = true;
+        setCellEditMode(true);
+      }
+      suppressCellSelectionClickRef.current = true;
+      pendingCellSelectionStartRef.current = null;
+      isDraggingRef.current = true;
+      cellSelectionPointerRef.current = { x, y };
+
+      const currentData = displayDataRef.current;
+      const nextRowIndexMap = new Map<string, number>();
+      currentData.forEach((r, idx) => {
+        const k = r?.[GONAVI_ROW_KEY];
+        if (k === undefined) return;
+        nextRowIndexMap.set(String(k), idx);
+      });
+      rowIndexMapRef.current = nextRowIndexMap;
+
+      const startRowIndex = nextRowIndexMap.get(cellInfo.rowKey) ?? -1;
+      const startColIndex = columnIndexMap.get(cellInfo.colName) ?? -1;
+      selectionStartRef.current = { rowKey: cellInfo.rowKey, colName: cellInfo.colName, rowIndex: startRowIndex, colIndex: startColIndex };
+      currentSelectionRef.current = new Set([makeCellKey(cellInfo.rowKey, cellInfo.colName)]);
+      updateCellSelection(currentSelectionRef.current);
+      ensureAutoScroll();
+    };
+
+    const onMouseDown = (e: MouseEvent) => {
+      if (e.button !== 0) return;
+      const target = e.target instanceof HTMLElement ? e.target : null;
+      if (isInteractiveTarget(target)) return;
+      const cellInfo = getCellInfo(target);
+      if (!cellInfo) return;
+
+      if (cellEditModeRef.current) {
+        e.preventDefault();
+        beginCellSelection(cellInfo, e.clientX, e.clientY);
+        return;
+      }
+
+      pendingCellSelectionStartRef.current = { ...cellInfo, x: e.clientX, y: e.clientY };
+    };
+
+    const onMouseMove = (e: MouseEvent) => {
+      const pendingStart = pendingCellSelectionStartRef.current;
+      if (!isDraggingRef.current && pendingStart) {
+        const dx = e.clientX - pendingStart.x;
+        const dy = e.clientY - pendingStart.y;
+        if (Math.hypot(dx, dy) < CELL_SELECTION_DRAG_THRESHOLD_PX) return;
+
+        e.preventDefault();
+        beginCellSelection(
+          { rowKey: pendingStart.rowKey, colName: pendingStart.colName },
+          e.clientX,
+          e.clientY,
+        );
+      }
+
+      if (!isDraggingRef.current || !selectionStartRef.current) return;
+      e.preventDefault();
+      cellSelectionPointerRef.current = { x: e.clientX, y: e.clientY };
+      ensureAutoScroll();
+
+      const target = e.target instanceof HTMLElement ? e.target : null;
+      const cellInfo = getCellInfo(target) || getCellInfoFromPoint(e.clientX, e.clientY);
+      if (!cellInfo) return;
+      scheduleSelectionUpdate(cellInfo);
+    };
+
+    const onMouseUp = (e: MouseEvent) => {
+      pendingCellSelectionStartRef.current = null;
+      if (!isDraggingRef.current) return;
+      isDraggingRef.current = false;
+      cellSelectionPointerRef.current = null;
+      stopAutoScroll();
+
+      if (cellSelectionRafRef.current !== null) {
+        cancelAnimationFrame(cellSelectionRafRef.current);
+        cellSelectionRafRef.current = null;
+      }
+
+      const target = e.target instanceof HTMLElement ? e.target : null;
+      const cellInfo = getCellInfo(target) || getCellInfoFromPoint(e.clientX, e.clientY);
+      if (cellInfo) applySelectionUpdate(cellInfo);
+
+      if (currentSelectionRef.current.size > 0) {
+        setSelectedCells(new Set(currentSelectionRef.current));
+      }
+    };
+
+    const onClickCapture = (e: MouseEvent) => {
+      if (!suppressCellSelectionClickRef.current) return;
+      suppressCellSelectionClickRef.current = false;
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const onScroll = () => {
+      if (currentSelectionRef.current.size === 0) return;
+      if (cellSelectionScrollRafRef.current !== null) {
+        cancelAnimationFrame(cellSelectionScrollRafRef.current);
+      }
+      cellSelectionScrollRafRef.current = requestAnimationFrame(() => {
+        cellSelectionScrollRafRef.current = null;
+        updateCellSelection(currentSelectionRef.current);
+      });
+    };
+
+    container.addEventListener('mousedown', onMouseDown);
+    container.addEventListener('mousemove', onMouseMove);
+    container.addEventListener('click', onClickCapture, true);
+    container.addEventListener('scroll', onScroll, true);
+    document.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+      container.removeEventListener('mousedown', onMouseDown);
+      container.removeEventListener('mousemove', onMouseMove);
+      container.removeEventListener('click', onClickCapture, true);
+      container.removeEventListener('scroll', onScroll, true);
+      document.removeEventListener('mouseup', onMouseUp);
+      if (cellSelectionRafRef.current !== null) {
+        cancelAnimationFrame(cellSelectionRafRef.current);
+        cellSelectionRafRef.current = null;
+      }
+      if (cellSelectionScrollRafRef.current !== null) {
+        cancelAnimationFrame(cellSelectionScrollRafRef.current);
+        cellSelectionScrollRafRef.current = null;
+      }
+      stopAutoScroll();
+      pendingCellSelectionStartRef.current = null;
+      cellSelectionPointerRef.current = null;
+      isDraggingRef.current = false;
+    };
+  }, [canModifyData, isTableSurfaceActive, displayColumnNames, columnIndexMap, effectiveEditLocator, updateCellSelection]);
+
+  const handleCopySelectedColumnsFromRow = useCallback(() => {
+    const activeSelection = currentSelectionRef.current.size > 0 ? currentSelectionRef.current : selectedCells;
+    if (activeSelection.size === 0) {
+      void message.info(translateDataGrid('data_grid.message.select_same_row_cells_to_copy'));
+      return;
+    }
+
+    const parsed = Array.from(activeSelection)
+      .map((cellKey) => splitCellKey(cellKey))
+      .filter((item): item is { rowKey: string; colName: string } => !!item);
+    if (parsed.length === 0) {
+      void message.info(translateDataGrid('data_grid.message.no_copyable_cells'));
+      return;
+    }
+
+    const sourceRowKeySet = new Set(parsed.map((item) => item.rowKey));
+    if (sourceRowKeySet.size !== 1) {
+      void message.info(translateDataGrid('data_grid.message.copy_columns_same_row_only'));
+      return;
+    }
+
+    const sourceRowKey = parsed[0].rowKey;
+    const selectedColumnNames = Array.from(new Set(parsed.map((item) => item.colName)));
+    if (selectedColumnNames.length === 0) {
+      void message.info(translateDataGrid('data_grid.message.no_copyable_columns'));
+      return;
+    }
+
+    const sourceBaseRow = displayDataRef.current.find((row) => {
+      const key = row?.[GONAVI_ROW_KEY];
+      return key !== undefined && key !== null && rowKeyStr(key) === sourceRowKey;
+    });
+    const sourceAddedRow = addedRows.find((row) => {
+      const key = row?.[GONAVI_ROW_KEY];
+      return key !== undefined && key !== null && rowKeyStr(key) === sourceRowKey;
+    });
+    const sourceModified = modifiedRows[sourceRowKey];
+
+    const values: Record<string, any> = {};
+    selectedColumnNames.forEach((colName) => {
+      if (sourceAddedRow) {
+        values[colName] = sourceAddedRow[colName];
+        return;
+      }
+
+      if (sourceModified && Object.prototype.hasOwnProperty.call(sourceModified as any, colName)) {
+        values[colName] = (sourceModified as any)[colName];
+        return;
+      }
+
+      values[colName] = sourceBaseRow?.[colName];
+    });
+
+    setCopiedCellPatch({ sourceRowKey, values });
+    void message.success(translateDataGrid('data_grid.message.copied_columns', { count: selectedColumnNames.length }));
+  }, [selectedCells, rowKeyStr, addedRows, modifiedRows, translateDataGrid]);
+
+  const handlePasteCopiedColumnsToSelectedRows = useCallback((fallbackRowKey?: React.Key) => {
+    if (!copiedCellPatch || Object.keys(copiedCellPatch.values).length === 0) {
+      void message.info(translateDataGrid('data_grid.message.copy_columns_first'));
+      return;
+    }
+
+    const writablePatchValues = Object.fromEntries(
+      Object.entries(copiedCellPatch.values)
+        .filter(([colName]) => isWritableResultColumn(colName, effectiveEditLocator))
+    );
+    if (Object.keys(writablePatchValues).length === 0) {
+      void message.info(translateDataGrid('data_grid.message.no_pasteable_editable_fields'));
+      return;
+    }
+
+    const targetKeySet = new Set<string>();
+    const selectedKeys = selectedRowKeysRef.current;
+    if (selectedKeys.length > 0) {
+      selectedKeys.forEach((key) => targetKeySet.add(rowKeyStr(key)));
+    } else if (fallbackRowKey !== undefined && fallbackRowKey !== null) {
+      targetKeySet.add(rowKeyStr(fallbackRowKey));
+    } else {
+      void message.info(translateDataGrid('data_grid.message.select_target_rows'));
+      return;
+    }
+
+    targetKeySet.delete(copiedCellPatch.sourceRowKey);
+    if (targetKeySet.size === 0) {
+      void message.info(translateDataGrid('data_grid.message.target_rows_cannot_only_source'));
+      return;
+    }
+
+    const addedRowMap = new Map<string, any>();
+    addedRows.forEach((row) => {
+      const key = row?.[GONAVI_ROW_KEY];
+      if (key === undefined || key === null) return;
+      addedRowMap.set(rowKeyStr(key), row);
+    });
+
+    const baseRowMap = new Map<string, any>();
+    displayDataRef.current.forEach((row) => {
+      const key = row?.[GONAVI_ROW_KEY];
+      if (key === undefined || key === null) return;
+      baseRowMap.set(rowKeyStr(key), row);
+    });
+
+    const patchesByRow = new Map<string, Record<string, any>>();
+    let updatedCellCount = 0;
+
+    targetKeySet.forEach((targetRowKey) => {
+      const patch: Record<string, any> = {};
+      const existing = modifiedRows[targetRowKey];
+      const addedRow = addedRowMap.get(targetRowKey);
+      const baseRow = baseRowMap.get(targetRowKey);
+
+      Object.entries(writablePatchValues).forEach(([colName, nextValue]) => {
+        let currentValue: any;
+
+        if (addedRow) {
+          currentValue = addedRow[colName];
+        } else if (existing && Object.prototype.hasOwnProperty.call(existing as any, GONAVI_ROW_KEY)) {
+          currentValue = (existing as any)[colName];
+        } else if (existing && Object.prototype.hasOwnProperty.call(existing as any, colName)) {
+          currentValue = (existing as any)[colName];
+        } else {
+          currentValue = baseRow?.[colName];
+        }
+
+        if (isCellValueEqualForDiff(currentValue, nextValue)) return;
+        patch[colName] = nextValue;
+        updatedCellCount++;
+      });
+
+      if (Object.keys(patch).length > 0) {
+        patchesByRow.set(targetRowKey, patch);
+      }
+    });
+
+    if (patchesByRow.size === 0 || updatedCellCount === 0) {
+      void message.info(translateDataGrid('data_grid.message.target_rows_no_update'));
+      return;
+    }
+
+    setAddedRows(prev => prev.map((row) => {
+      const key = row?.[GONAVI_ROW_KEY];
+      if (key === undefined || key === null) return row;
+      const patch = patchesByRow.get(rowKeyStr(key));
+      if (!patch) return row;
+      return { ...row, ...patch };
+    }));
+
+    setModifiedRows(prev => {
+      let next: Record<string, any> | null = null;
+
+      patchesByRow.forEach((patch, keyStr) => {
+        if (addedRowMap.has(keyStr)) return;
+        const existing = prev[keyStr];
+        const merged = existing ? { ...(existing as any), ...patch } : patch;
+        if (!next) next = { ...prev };
+        next[keyStr] = merged;
+      });
+
+      return next || prev;
+    });
+
+    void message.success(translateDataGrid('data_grid.message.pasted_columns_to_rows', { rows: patchesByRow.size, cells: updatedCellCount }));
+    setCellContextMenu((prev: any) => ({ ...prev, visible: false }));
+  }, [copiedCellPatch, addedRows, modifiedRows, rowKeyStr, effectiveEditLocator, translateDataGrid]);
+
+  // 批量填充到选中行
+  const handleBatchFillToSelected = useCallback((sourceRecord: Item, dataIndex: string) => {
+    if (!isWritableResultColumn(dataIndex, effectiveEditLocator)) {
+      void message.info(translateDataGrid('data_grid.message.current_field_not_editable'));
+      return;
+    }
+    const sourceValue = sourceRecord[dataIndex];
+    const selKeys = selectedRowKeysRef.current;
+
+    if (selKeys.length === 0) {
+      void message.info(translateDataGrid('data_grid.message.select_rows_to_fill'));
+      return;
+    }
+
+    const sourceKey = sourceRecord?.[GONAVI_ROW_KEY];
+    // 过滤掉源行本身
+    const targetKeys = selKeys.filter(k => k !== sourceKey);
+
+    if (targetKeys.length === 0) {
+      void message.info(translateDataGrid('data_grid.message.no_other_rows_to_fill'));
+      return;
+    }
+
+    // 批量更新
+    const addedKeySet = new Set<string>();
+    addedRows.forEach((r) => {
+      const k = r?.[GONAVI_ROW_KEY];
+      if (k === undefined) return;
+      addedKeySet.add(rowKeyStr(k));
+    });
+
+    const targetKeyStrList = targetKeys.map(rowKeyStr);
+    const targetKeyStrSet = new Set(targetKeyStrList);
+    const updatedCount = targetKeyStrSet.size;
+
+    setAddedRows(prev => prev.map(r => {
+      const k = r?.[GONAVI_ROW_KEY];
+      if (k === undefined) return r;
+      const keyStr = rowKeyStr(k);
+      if (!targetKeyStrSet.has(keyStr)) return r;
+      return { ...r, [dataIndex]: sourceValue };
+    }));
+
+    setModifiedRows(prev => {
+      let next: Record<string, any> | null = null;
+
+      targetKeyStrSet.forEach((keyStr) => {
+        if (addedKeySet.has(keyStr)) return;
+        const existing = prev[keyStr];
+        const patch = { [dataIndex]: sourceValue };
+        const merged = existing ? { ...(existing as any), ...patch } : patch;
+        if (!next) next = { ...prev };
+        next[keyStr] = merged;
+      });
+
+      return next || prev;
+    });
+
+    void message.success(translateDataGrid('data_grid.message.filled_rows', { count: updatedCount }));
+    setCellContextMenu((prev: any) => ({ ...prev, visible: false }));
+  }, [addedRows, rowKeyStr, effectiveEditLocator, translateDataGrid]);
+
+  return {
+    handleBatchFillCells,
+    handleCopySelectedColumnsFromRow,
+    handlePasteCopiedColumnsToSelectedRows,
+    handleBatchFillToSelected,
+  };
+};
diff --git a/frontend/src/components/useDataGridColumnResize.ts b/frontend/src/components/useDataGridColumnResize.ts
new file mode 100644
index 0000000..ce7a733
--- /dev/null
+++ b/frontend/src/components/useDataGridColumnResize.ts
@@ -0,0 +1,209 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { resolveDataTableColumnWidth } from '../utils/dataGridDisplay';
+import { calculateAutoFitColumnWidth } from './dataGridAutoWidth';
+import { DEFAULT_GRID_MONO_FONT_FAMILY } from './DataGridCore';
+
+type UseDataGridColumnResizeContext = Record<string, any>;
+
+export const useDataGridColumnResize = (ctx: UseDataGridColumnResizeContext) => {
+  const {
+    columnMetaMap,
+    columnMetaMapByLowerName,
+    columnWidths,
+    containerRef,
+    dataTableDensity,
+    densityParams,
+    displayColumnNames,
+    displayData,
+    displayDataRef,
+    setColumnWidths,
+    showColumnComment,
+    showColumnType,
+  } = ctx;
+
+  const draggingRef = useRef<{
+    startX: number;
+    startWidth: number;
+    key: string;
+    containerLeft: number;
+  } | null>(null);
+  const ghostRef = useRef<HTMLDivElement>(null);
+  const resizeRafRef = useRef<number | null>(null);
+  const latestClientXRef = useRef<number | null>(null);
+  const isResizingRef = useRef(false);
+  const autoFitCanvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  const flushGhostPosition = useCallback(() => {
+    resizeRafRef.current = null;
+    if (!draggingRef.current || !ghostRef.current) return;
+    if (latestClientXRef.current === null) return;
+    const relativeLeft = latestClientXRef.current - draggingRef.current.containerLeft;
+    ghostRef.current.style.transform = `translateX(${relativeLeft}px)`;
+  }, []);
+
+  const handleResizeStart = useCallback((key: string) => (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    isResizingRef.current = true;
+
+    const startX = e.clientX;
+    const currentWidth = resolveDataTableColumnWidth({
+      manualWidth: columnWidths[key],
+      density: dataTableDensity,
+    });
+    const containerLeft = containerRef.current?.getBoundingClientRect().left ?? 0;
+    draggingRef.current = { startX, startWidth: currentWidth, key, containerLeft };
+    latestClientXRef.current = startX;
+
+    if (ghostRef.current && containerRef.current) {
+      const relativeLeft = startX - containerLeft;
+      ghostRef.current.style.transform = `translateX(${relativeLeft}px)`;
+      ghostRef.current.style.display = 'block';
+    }
+
+    document.addEventListener('mousemove', handleResizeMove);
+    document.addEventListener('mouseup', handleResizeStop);
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  }, [columnWidths, dataTableDensity]);
+
+  const measureTextWidth = useCallback((text: string, font: string) => {
+    if (typeof document === 'undefined') {
+      return text.length * 8;
+    }
+    if (!autoFitCanvasRef.current) {
+      autoFitCanvasRef.current = document.createElement('canvas');
+    }
+    const context = autoFitCanvasRef.current.getContext('2d');
+    if (!context) {
+      return text.length * 8;
+    }
+    context.font = font;
+    return context.measureText(text).width;
+  }, []);
+
+  const buildAutoFitMeasurer = useCallback((element: HTMLElement | null, fallbackFont: string) => {
+    let font = fallbackFont;
+    if (typeof window !== 'undefined' && element) {
+      const computed = window.getComputedStyle(element);
+      const weight = computed.fontWeight || '400';
+      const size = computed.fontSize || '13px';
+      const family = computed.fontFamily || DEFAULT_GRID_MONO_FONT_FAMILY;
+      font = `${weight} ${size} ${family}`;
+    }
+    return (text: string) => measureTextWidth(text, font);
+  }, [measureTextWidth]);
+
+  const autoFitDoneRef = useRef<string>('');
+  useEffect(() => {
+    if (displayColumnNames.length === 0 || displayData.length === 0) return;
+    const sig = displayColumnNames.join(',');
+    if (autoFitDoneRef.current === sig) return;
+    const font = `${densityParams.dataFontSize}px ${DEFAULT_GRID_MONO_FONT_FAMILY}`;
+    const newWidths: Record<string, number> = {};
+    displayColumnNames.forEach((key: string) => {
+      const autoWidth = calculateAutoFitColumnWidth({
+        headerTexts: [key],
+        valueTexts: displayData.slice(0, 200).map((row: any) => row?.[key]),
+        measureHeaderText: (text) => measureTextWidth(text, `600 ${font}`),
+        measureCellText: (text) => measureTextWidth(text, `400 ${font}`),
+        minWidth: 40,
+        maxWidth: 600,
+        defaultWidth: densityParams.defaultColumnWidth,
+      });
+      newWidths[key] = autoWidth;
+    });
+    autoFitDoneRef.current = sig;
+    setColumnWidths((prev: Record<string, number>) => ({ ...newWidths, ...prev }));
+  }, [displayColumnNames, displayData, densityParams, measureTextWidth, setColumnWidths]);
+
+  const autoFitColumnWidth = useCallback((key: string, headerEl?: HTMLElement | null) => {
+    const normalizedKey = String(key || '').trim();
+    if (!normalizedKey) return;
+    const sampleCell = Array.from(
+      containerRef.current?.querySelectorAll('.ant-table-cell[data-col-name]') || [],
+    ).find((node) => (node as HTMLElement).getAttribute('data-col-name') === normalizedKey) as HTMLElement | undefined;
+
+    const meta = columnMetaMap[normalizedKey] || columnMetaMapByLowerName[normalizedKey.toLowerCase()];
+    const headerTexts = [normalizedKey];
+    if (showColumnType && meta?.type) headerTexts.push(meta.type);
+    if (showColumnComment && meta?.comment) headerTexts.push(meta.comment);
+
+    const defaultWidth = resolveDataTableColumnWidth({
+      manualWidth: columnWidths[normalizedKey],
+      density: dataTableDensity,
+    });
+    const containerWidth = containerRef.current?.clientWidth ?? 0;
+    const nextWidth = calculateAutoFitColumnWidth({
+      headerTexts,
+      valueTexts: displayDataRef.current.slice(0, 200).map((row: any) => row?.[normalizedKey]),
+      measureHeaderText: buildAutoFitMeasurer(headerEl ?? null, `600 ${densityParams.dataFontSize}px ${DEFAULT_GRID_MONO_FONT_FAMILY}`),
+      measureCellText: buildAutoFitMeasurer(sampleCell ?? null, `400 ${densityParams.dataFontSize}px ${DEFAULT_GRID_MONO_FONT_FAMILY}`),
+      defaultWidth,
+      minWidth: 80,
+      maxWidth: Math.max(720, Math.floor(containerWidth * 0.85)),
+    });
+
+    setColumnWidths((prev: Record<string, number>) => ({ ...prev, [normalizedKey]: nextWidth }));
+  }, [
+    buildAutoFitMeasurer,
+    columnMetaMap,
+    columnMetaMapByLowerName,
+    columnWidths,
+    dataTableDensity,
+    densityParams.dataFontSize,
+    showColumnComment,
+    showColumnType,
+    setColumnWidths,
+  ]);
+
+  const handleResizeAutoFit = useCallback((key: string) => (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const handleEl = e.currentTarget as HTMLElement | null;
+    const headerEl = handleEl?.closest('th') as HTMLElement | null;
+    autoFitColumnWidth(key, headerEl);
+  }, [autoFitColumnWidth]);
+
+  const handleResizeMove = useCallback((e: MouseEvent) => {
+    if (!draggingRef.current) return;
+    latestClientXRef.current = e.clientX;
+    if (resizeRafRef.current !== null) return;
+    resizeRafRef.current = requestAnimationFrame(flushGhostPosition);
+  }, [flushGhostPosition]);
+
+  const handleResizeStop = useCallback((e: MouseEvent) => {
+    if (!draggingRef.current) return;
+
+    const { startX, startWidth, key } = draggingRef.current;
+    const deltaX = e.clientX - startX;
+    const newWidth = Math.max(50, startWidth + deltaX);
+
+    setColumnWidths((prev: Record<string, number>) => ({ ...prev, [key]: newWidth }));
+
+    if (resizeRafRef.current !== null) {
+      cancelAnimationFrame(resizeRafRef.current);
+      resizeRafRef.current = null;
+    }
+    latestClientXRef.current = null;
+    if (ghostRef.current) ghostRef.current.style.display = 'none';
+    document.removeEventListener('mousemove', handleResizeMove);
+    document.removeEventListener('mouseup', handleResizeStop);
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    draggingRef.current = null;
+
+    setTimeout(() => {
+      isResizingRef.current = false;
+    }, 100);
+  }, [handleResizeMove, setColumnWidths]);
+
+  return {
+    autoFitColumnWidth,
+    ghostRef,
+    handleResizeAutoFit,
+    handleResizeStart,
+    isResizingRef,
+  };
+};
diff --git a/frontend/src/components/useDataGridMetadata.ts b/frontend/src/components/useDataGridMetadata.ts
new file mode 100644
index 0000000..36a76e7
--- /dev/null
+++ b/frontend/src/components/useDataGridMetadata.ts
@@ -0,0 +1,261 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { DBGetColumns, DBGetForeignKeys, DBGetIndexes } from '../../wailsjs/go/app/App';
+import { buildRpcConnectionConfig } from '../utils/connectionRpcConfig';
+import {
+  buildColumnMetaMap,
+  GONAVI_ROW_KEY,
+  hasUsableColumnMeta,
+} from './DataGridCore';
+import { resolveUniqueKeyGroupsFromIndexes } from './dataGridCopyInsert';
+
+type UseDataGridMetadataContext = Record<string, any>;
+
+export const useDataGridMetadata = (ctx: UseDataGridMetadataContext) => {
+  const {
+    connections,
+    connectionId,
+    dbName,
+    tableName,
+    exportScope,
+    visibleColumnNames,
+  } = ctx;
+
+  const [columnMetaMap, setColumnMetaMap] = useState<Record<string, any>>({});
+  const [foreignKeyMap, setForeignKeyMap] = useState<Record<string, any>>({});
+  const [uniqueKeyGroups, setUniqueKeyGroups] = useState<string[][]>([]);
+  const [metadataReloadVersion, setMetadataReloadVersion] = useState(0);
+  const columnMetaCacheRef = useRef<Record<string, Record<string, any>>>({});
+  const columnMetaSeqRef = useRef(0);
+  const foreignKeyCacheRef = useRef<Record<string, Record<string, any>>>({});
+  const foreignKeySeqRef = useRef(0);
+  const uniqueKeyGroupsCacheRef = useRef<Record<string, string[][]>>({});
+  const uniqueKeyGroupsSeqRef = useRef(0);
+
+  useEffect(() => {
+    const normalizedTableName = String(tableName || '').trim();
+    const normalizedDbName = String(dbName || '').trim();
+    if (!connectionId || !normalizedTableName) {
+      setColumnMetaMap({});
+      setForeignKeyMap({});
+      setUniqueKeyGroups([]);
+      return;
+    }
+    const cacheKey = `${connectionId}|${normalizedDbName}|${normalizedTableName}`;
+    setColumnMetaMap(columnMetaCacheRef.current[cacheKey] || {});
+    foreignKeySeqRef.current += 1;
+    setForeignKeyMap(exportScope === 'table' ? (foreignKeyCacheRef.current[cacheKey] || {}) : {});
+    setUniqueKeyGroups(uniqueKeyGroupsCacheRef.current[cacheKey] || []);
+  }, [connectionId, dbName, tableName, exportScope]);
+
+  useEffect(() => {
+    const normalizedTableName = String(tableName || '').trim();
+    const normalizedDbName = String(dbName || '').trim();
+    if (!connectionId || !normalizedTableName) return;
+
+    const cacheKey = `${connectionId}|${normalizedDbName}|${normalizedTableName}`;
+    if (columnMetaCacheRef.current[cacheKey]) return;
+
+    const conn = connections.find((item: any) => item.id === connectionId);
+    if (!conn) {
+      setColumnMetaMap({});
+      return;
+    }
+
+    const config = {
+      ...conn.config,
+      port: Number(conn.config.port),
+      password: conn.config.password || '',
+      database: conn.config.database || '',
+      useSSH: conn.config.useSSH || false,
+      ssh: conn.config.ssh || { host: '', port: 22, user: '', password: '', keyPath: '' },
+    };
+
+    const seq = ++columnMetaSeqRef.current;
+    const loadColumnMeta = async () => {
+      let nextMap: Record<string, any> | null = null;
+      for (let attempt = 0; attempt < 2; attempt += 1) {
+        try {
+          const res = await DBGetColumns(buildRpcConnectionConfig(config) as any, normalizedDbName, normalizedTableName);
+          if (seq !== columnMetaSeqRef.current) return;
+          if (!res.success || !Array.isArray(res.data)) {
+            continue;
+          }
+          const candidateMap = buildColumnMetaMap(res.data as any[]);
+          if (!hasUsableColumnMeta(candidateMap)) {
+            continue;
+          }
+          nextMap = candidateMap;
+          break;
+        } catch {
+          if (seq !== columnMetaSeqRef.current) return;
+        }
+      }
+
+      if (seq !== columnMetaSeqRef.current) return;
+      if (nextMap) {
+        columnMetaCacheRef.current[cacheKey] = nextMap;
+        setColumnMetaMap(nextMap);
+        return;
+      }
+      setColumnMetaMap({});
+    };
+
+    void loadColumnMeta();
+  }, [connections, connectionId, dbName, tableName, metadataReloadVersion]);
+
+  useEffect(() => {
+    const normalizedTableName = String(tableName || '').trim();
+    const normalizedDbName = String(dbName || '').trim();
+    if (!connectionId || !normalizedTableName || exportScope !== 'table') return;
+
+    const cacheKey = `${connectionId}|${normalizedDbName}|${normalizedTableName}`;
+    if (foreignKeyCacheRef.current[cacheKey]) return;
+
+    const conn = connections.find((item: any) => item.id === connectionId);
+    if (!conn) {
+      setForeignKeyMap({});
+      return;
+    }
+
+    const config = {
+      ...conn.config,
+      port: Number(conn.config.port),
+      password: conn.config.password || '',
+      database: conn.config.database || '',
+      useSSH: conn.config.useSSH || false,
+      ssh: conn.config.ssh || { host: '', port: 22, user: '', password: '', keyPath: '' },
+    };
+
+    const seq = ++foreignKeySeqRef.current;
+    DBGetForeignKeys(buildRpcConnectionConfig(config) as any, normalizedDbName, normalizedTableName)
+      .then((res) => {
+        if (seq !== foreignKeySeqRef.current) return;
+        if (!res.success || !Array.isArray(res.data)) {
+          setForeignKeyMap({});
+          return;
+        }
+        const nextMap: Record<string, any> = {};
+        (res.data as any[]).forEach((fk: any) => {
+          const columnName = String(fk?.columnName ?? fk?.ColumnName ?? '').trim();
+          const refTableName = String(fk?.refTableName ?? fk?.RefTableName ?? '').trim();
+          if (!columnName || !refTableName || refTableName === '-') return;
+          nextMap[columnName] = {
+            columnName,
+            refTableName,
+            refColumnName: String(fk?.refColumnName ?? fk?.RefColumnName ?? '').trim(),
+            constraintName: String(fk?.constraintName ?? fk?.ConstraintName ?? fk?.name ?? fk?.Name ?? '').trim(),
+          };
+        });
+        foreignKeyCacheRef.current[cacheKey] = nextMap;
+        setForeignKeyMap(nextMap);
+      })
+      .catch(() => {
+        if (seq !== foreignKeySeqRef.current) return;
+        setForeignKeyMap({});
+      });
+  }, [connections, connectionId, dbName, tableName, exportScope, metadataReloadVersion]);
+
+  useEffect(() => {
+    const normalizedTableName = String(tableName || '').trim();
+    const normalizedDbName = String(dbName || '').trim();
+    if (!connectionId || !normalizedTableName) return;
+
+    const cacheKey = `${connectionId}|${normalizedDbName}|${normalizedTableName}`;
+    if (uniqueKeyGroupsCacheRef.current[cacheKey]) return;
+
+    const conn = connections.find((item: any) => item.id === connectionId);
+    if (!conn) {
+      setUniqueKeyGroups([]);
+      return;
+    }
+
+    const config = {
+      ...conn.config,
+      port: Number(conn.config.port),
+      password: conn.config.password || '',
+      database: conn.config.database || '',
+      useSSH: conn.config.useSSH || false,
+      ssh: conn.config.ssh || { host: '', port: 22, user: '', password: '', keyPath: '' },
+    };
+
+    const seq = ++uniqueKeyGroupsSeqRef.current;
+    DBGetIndexes(config as any, normalizedDbName, normalizedTableName)
+      .then((res) => {
+        if (seq !== uniqueKeyGroupsSeqRef.current) return;
+        if (!res.success || !Array.isArray(res.data)) {
+          setUniqueKeyGroups([]);
+          return;
+        }
+        const nextGroups = resolveUniqueKeyGroupsFromIndexes(res.data as any[]);
+        uniqueKeyGroupsCacheRef.current[cacheKey] = nextGroups;
+        setUniqueKeyGroups(nextGroups);
+      })
+      .catch(() => {
+        if (seq !== uniqueKeyGroupsSeqRef.current) return;
+        setUniqueKeyGroups([]);
+      });
+  }, [connections, connectionId, dbName, tableName, metadataReloadVersion]);
+
+  const columnMetaMapByLowerName = useMemo(() => {
+    const next: Record<string, any> = {};
+    Object.entries(columnMetaMap).forEach(([name, meta]) => {
+      const lowerName = String(name || '').toLowerCase();
+      if (!lowerName || next[lowerName]) return;
+      next[lowerName] = meta;
+    });
+    return next;
+  }, [columnMetaMap]);
+
+  const columnTypeMapByLowerName = useMemo(() => {
+    const next: Record<string, string> = {};
+    Object.entries(columnMetaMapByLowerName).forEach(([name, meta]) => {
+      const type = String((meta as any)?.type || '').trim();
+      if (!name || !type) return;
+      next[name] = type;
+    });
+    return next;
+  }, [columnMetaMapByLowerName]);
+
+  const foreignKeyMapByLowerName = useMemo(() => {
+    const next: Record<string, any> = {};
+    Object.entries(foreignKeyMap).forEach(([name, target]) => {
+      const lowerName = String(name || '').toLowerCase();
+      if (!lowerName || next[lowerName]) return;
+      next[lowerName] = target;
+    });
+    return next;
+  }, [foreignKeyMap]);
+
+  const getColumnFilterType = useCallback((columnName: string): string => {
+    const normalizedName = String(columnName || '').trim();
+    if (!normalizedName) return '';
+    return (columnMetaMap[normalizedName] || columnMetaMapByLowerName[normalizedName.toLowerCase()])?.type || '';
+  }, [columnMetaMap, columnMetaMapByLowerName]);
+
+  const allTableColumnNames = useMemo(() => {
+    const metaColumns = Object.keys(columnMetaMap);
+    if (metaColumns.length > 0) {
+      return metaColumns;
+    }
+    if (exportScope === 'table') {
+      return visibleColumnNames.filter((columnName: string) => columnName !== GONAVI_ROW_KEY);
+    }
+    return [];
+  }, [columnMetaMap, exportScope, visibleColumnNames]);
+
+  return {
+    allTableColumnNames,
+    columnMetaCacheRef,
+    columnMetaMap,
+    columnMetaMapByLowerName,
+    columnTypeMapByLowerName,
+    foreignKeyCacheRef,
+    foreignKeyMap,
+    foreignKeyMapByLowerName,
+    getColumnFilterType,
+    metadataReloadVersion,
+    setMetadataReloadVersion,
+    uniqueKeyGroups,
+    uniqueKeyGroupsCacheRef,
+  };
+};
diff --git a/frontend/src/components/useDataGridV2Actions.ts b/frontend/src/components/useDataGridV2Actions.ts
new file mode 100644
index 0000000..bb8d7f9
--- /dev/null
+++ b/frontend/src/components/useDataGridV2Actions.ts
@@ -0,0 +1,927 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { message } from 'antd';
+import { ExportQueryWithOptions } from '../../wailsjs/go/app/App';
+import type { CopySqlError } from './dataGridCopyInsert';
+import type { V2CellContextMenuActionKey, V2ColumnHeaderContextMenuActionKey } from './V2TableContextMenu';
+import {
+  DEFAULT_DATA_EXPORT_FORMAT,
+  DEFAULT_XLSX_ROWS_PER_SHEET,
+  showDataExportDialog,
+  type DataExportDialogValues,
+  type DataExportFileOptions,
+  type DataExportScopeOption,
+} from './DataExportDialog';
+import type { DataGridExportScope } from './DataGridCore';
+
+type DataGridV2ActionsContext = Record<string, any>;
+
+export const useDataGridV2Actions = (ctx: DataGridV2ActionsContext) => {
+  const {
+    GONAVI_ROW_KEY,
+    addTab,
+    allTableColumnNames,
+    applyColumnSort,
+    autoFitColumnWidth,
+    buildClipboardCsv,
+    buildClipboardJson,
+    buildClipboardMarkdown,
+    buildClipboardTsv,
+    buildCopyDeleteSQL,
+    buildCopyInsertSQL,
+    buildCopyUpdateSQL,
+    buildDataGridSelectBaseSql,
+    buildEffectiveFilterConditions,
+    buildOrderBySQL,
+    buildPaginatedSelectSQL,
+    buildRpcConnectionConfig,
+    buildSelectedCellClipboardText,
+    buildTableExportTab,
+    buildWhereSQL,
+    cellContextMenu,
+    cellEditMode,
+    closeCellEditMode,
+    columnMetaMap,
+    columnMetaMapByLowerName,
+    columnTypeMapByLowerName,
+    connectionId,
+    connections,
+    copiedCellPatch,
+    copyRowsForPaste,
+    copyToClipboard,
+    currentConnConfig,
+    currentSelectionRef,
+    dbName,
+    dbType,
+    ddlText,
+    displayColumnNames,
+    displayData,
+    displayDataRef,
+    displayOutputColumnNames,
+    escapeLiteral,
+    exportData,
+    filterConditions,
+    handleBatchFillToSelected,
+    handleCellSetNull,
+    handleCopyColumnData,
+    handleCopyContextMenuFieldName,
+    handleOpenContextMenuRowEditor,
+    handlePasteCopiedColumnsToSelectedRows,
+    handlePasteCopiedRowsAsNew,
+    handleUndoContextMenuCellChange,
+    hasChanges,
+    hasExplicitSort,
+    hasFilteredExportSql,
+    isQueryResultExport,
+    mergedDisplayData,
+    modal,
+    navigator,
+    objectType,
+    pagination,
+    pickDataGridOutputRows,
+    pickRowsForClipboard,
+    pkColumns,
+    quickWhereCondition,
+    quoteIdentPart,
+    resetCellSelection,
+    resolveContextMenuFieldName,
+    resolveDataSourceType,
+    resultExportAllSql,
+    resultSql,
+    rootRef,
+    rowKeyStr,
+    runExportWithProgress,
+    selectedCells,
+    selectedRowKeys,
+    selectedRowKeysRef,
+    setCellContextMenu,
+    setQueryOptions,
+    setSelectedRowKeys,
+    sortInfo,
+    splitCellKey,
+    supportsCopyInsert,
+    supportsSqlQueryExport,
+    tableName,
+    toggleColumnVisibility,
+    translateDataGrid,
+    uniqueKeyGroups,
+    withSortBufferTuningSQL,
+  } = ctx;
+
+const handleV2ColumnHeaderContextMenuAction = useCallback((action: V2ColumnHeaderContextMenuActionKey) => {
+      const columnName = resolveContextMenuFieldName(cellContextMenu.dataIndex, cellContextMenu.title);
+      if (!columnName) {
+          void message.info(translateDataGrid('data_grid.message.no_field_name'));
+          setCellContextMenu((prev: any) => ({ ...prev, visible: false }));
+          return;
+      }
+
+      switch (action) {
+          case 'copy-field-name':
+              copyToClipboard(columnName);
+              break;
+          case 'copy-column-data':
+              handleCopyColumnData(columnName);
+              break;
+          case 'sort-asc':
+              applyColumnSort(columnName, 'ascend');
+              break;
+          case 'sort-desc':
+              applyColumnSort(columnName, 'descend');
+              break;
+          case 'clear-sort':
+              applyColumnSort(columnName, null);
+              break;
+          case 'auto-fit-column':
+              autoFitColumnWidth(columnName);
+              break;
+          case 'hide-column':
+              if (displayColumnNames.length <= 1) {
+                  void message.info(translateDataGrid('data_grid.message.keep_one_visible_column'));
+                  break;
+              }
+              toggleColumnVisibility(columnName, false);
+              break;
+          case 'show-column-type':
+              setQueryOptions({ showColumnType: true });
+              break;
+          case 'hide-column-type':
+              setQueryOptions({ showColumnType: false });
+              break;
+          case 'show-column-comment':
+              setQueryOptions({ showColumnComment: true });
+              break;
+          case 'hide-column-comment':
+              setQueryOptions({ showColumnComment: false });
+              break;
+          default:
+              break;
+      }
+      setCellContextMenu((prev: any) => ({ ...prev, visible: false }));
+  }, [
+      applyColumnSort,
+      autoFitColumnWidth,
+      cellContextMenu.dataIndex,
+      cellContextMenu.title,
+      copyToClipboard,
+      displayColumnNames.length,
+      handleCopyColumnData,
+      setQueryOptions,
+      translateDataGrid,
+      toggleColumnVisibility,
+  ]);
+
+  const getClipboardRows = useCallback(() => (
+      pickRowsForClipboard({
+          rows: mergedDisplayData as Array<Record<string, unknown>>,
+          selectedRowKeys,
+          columnNames: displayOutputColumnNames,
+          rowKeyField: GONAVI_ROW_KEY,
+          rowKeyToString: rowKeyStr,
+      })
+  ), [mergedDisplayData, selectedRowKeys, displayOutputColumnNames, rowKeyStr]);
+
+  const getClipboardColumnNames = useCallback((rows: Array<Record<string, unknown>>) => {
+      if (rows.length === 0) return [];
+      return displayOutputColumnNames;
+  }, [displayOutputColumnNames]);
+
+  const handleCopyQueryResultCsv = useCallback(() => {
+      const rows = getClipboardRows();
+      const columns = getClipboardColumnNames(rows);
+      const text = buildClipboardCsv(rows, columns);
+      if (!text) {
+          void message.info(translateDataGrid('data_grid.message.result_set_no_copyable_content'));
+          return;
+      }
+      copyToClipboard(text);
+  }, [copyToClipboard, getClipboardColumnNames, getClipboardRows, translateDataGrid]);
+
+  const handleCopyQueryResultJson = useCallback(() => {
+      const rows = getClipboardRows();
+      const text = buildClipboardJson(rows);
+      if (!text) {
+          void message.info(translateDataGrid('data_grid.message.result_set_no_copyable_content'));
+          return;
+      }
+      copyToClipboard(text);
+  }, [copyToClipboard, getClipboardRows, translateDataGrid]);
+
+  const handleCopyQueryResultMarkdown = useCallback(() => {
+      const rows = getClipboardRows();
+      const columns = getClipboardColumnNames(rows);
+      const text = buildClipboardMarkdown(rows, columns);
+      if (!text) {
+          void message.info(translateDataGrid('data_grid.message.result_set_no_copyable_content'));
+          return;
+      }
+      copyToClipboard(text);
+  }, [copyToClipboard, getClipboardColumnNames, getClipboardRows, translateDataGrid]);
+
+  const handleCopyDdl = useCallback(() => {
+      if (!ddlText.trim()) {
+          void message.info(translateDataGrid('data_grid.message.no_ddl_to_copy'));
+          return;
+      }
+      navigator.clipboard.writeText(ddlText)
+          .then(() => message.success(translateDataGrid('data_grid.message.ddl_copied')))
+          .catch(() => message.error(translateDataGrid('data_grid.message.ddl_copy_failed')));
+  }, [ddlText, translateDataGrid]);
+
+  const handleCopySelectedCellsToClipboard = useCallback(() => {
+      const activeSelection = currentSelectionRef.current.size > 0 ? currentSelectionRef.current : selectedCells;
+      if (activeSelection.size === 0) {
+          void message.info(translateDataGrid('data_grid.message.drag_select_cells_to_copy'));
+          return;
+      }
+
+      const parsed = Array.from(activeSelection)
+          .map((cellKey) => splitCellKey(cellKey))
+          .filter((item): item is { rowKey: string; colName: string } => !!item);
+      if (parsed.length === 0) {
+          void message.info(translateDataGrid('data_grid.message.no_copyable_cells'));
+          return;
+      }
+
+      const text = buildSelectedCellClipboardText({
+          selectedCells: parsed,
+          rows: mergedDisplayData as Array<Record<string, any>>,
+          columnOrder: displayColumnNames,
+          rowKeyField: GONAVI_ROW_KEY,
+      });
+      if (!text) {
+          void message.info(translateDataGrid('data_grid.message.selection_no_copyable_content'));
+          return;
+      }
+
+      copyToClipboard(text);
+  }, [selectedCells, mergedDisplayData, displayColumnNames, copyToClipboard, translateDataGrid]);
+
+  useEffect(() => {
+      if (!cellEditMode) return;
+
+      const onKeyDown = (event: KeyboardEvent) => {
+          const activeElement = document.activeElement as HTMLElement | null;
+          const tagName = String(activeElement?.tagName || '').toLowerCase();
+          if (tagName === 'input' || tagName === 'textarea' || activeElement?.isContentEditable) {
+              return;
+          }
+
+          if (event.key === 'Escape') {
+              const activeSelection = currentSelectionRef.current.size > 0 ? currentSelectionRef.current : selectedCells;
+              event.preventDefault();
+              if (activeSelection.size === 0) {
+                  closeCellEditMode();
+                  return;
+              }
+              resetCellSelection();
+              return;
+          }
+
+          const isCopy = (event.ctrlKey || event.metaKey) && !event.altKey && String(event.key || '').toLowerCase() === 'c';
+          if (!isCopy) return;
+
+          const activeSelection = currentSelectionRef.current.size > 0 ? currentSelectionRef.current : selectedCells;
+          if (activeSelection.size === 0) return;
+
+          event.preventDefault();
+          handleCopySelectedCellsToClipboard();
+      };
+
+      window.addEventListener('keydown', onKeyDown);
+      return () => window.removeEventListener('keydown', onKeyDown);
+  }, [cellEditMode, selectedCells, handleCopySelectedCellsToClipboard, resetCellSelection, closeCellEditMode]);
+
+  useEffect(() => {
+      if (!cellEditMode) return;
+
+      const onPointerDown = (event: MouseEvent) => {
+          const root = rootRef.current;
+          const target = event.target instanceof Node ? event.target : null;
+          if (!root || !target || root.contains(target)) return;
+          if (target instanceof HTMLElement
+              && target.closest('.ant-modal, .ant-dropdown, .ant-select-dropdown, .ant-picker-dropdown, .ant-popover')) {
+              return;
+          }
+          closeCellEditMode();
+      };
+
+      document.addEventListener('mousedown', onPointerDown);
+      return () => document.removeEventListener('mousedown', onPointerDown);
+  }, [cellEditMode, closeCellEditMode]);
+  
+  const getTargets = useCallback((clickedRecord: any) => {
+      const selKeys = selectedRowKeysRef.current;
+      const currentData = displayDataRef.current;
+      const clickedKey = clickedRecord?.[GONAVI_ROW_KEY];
+      if (clickedKey !== undefined && selKeys.includes(clickedKey)) {
+          return currentData.filter((d: any) => selKeys.includes(d?.[GONAVI_ROW_KEY]));
+      }
+      return [clickedRecord];
+  }, []);
+
+  const getContextMenuTargetRows = useCallback((clickedRecord: any) => {
+      if (!clickedRecord) return [];
+      const selKeys = selectedRowKeysRef.current;
+      const clickedKey = clickedRecord?.[GONAVI_ROW_KEY];
+      const clickedKeyStr = clickedKey === undefined || clickedKey === null ? '' : rowKeyStr(clickedKey);
+      const selectedKeyStrSet = new Set(selKeys.map(rowKeyStr));
+      if (clickedKeyStr && selectedKeyStrSet.has(clickedKeyStr)) {
+          return mergedDisplayData.filter((row: any) => {
+              const rowKey = row?.[GONAVI_ROW_KEY];
+              return rowKey !== undefined && rowKey !== null && selectedKeyStrSet.has(rowKeyStr(rowKey));
+          });
+      }
+      return [clickedRecord];
+  }, [mergedDisplayData, rowKeyStr]);
+
+  const translateCopySqlError = useCallback((error: CopySqlError): string => {
+      if (typeof error === 'string') {
+          return error;
+      }
+      switch (error.key) {
+          case 'data_grid.copy_sql.error.missing_table_name':
+              return translateDataGrid('data_grid.copy_sql.error.missing_table_name', error.params);
+          case 'data_grid.copy_sql.error.no_copyable_fields':
+              return translateDataGrid('data_grid.copy_sql.error.no_copyable_fields');
+          case 'data_grid.copy_sql.error.missing_safe_where':
+          default:
+              return translateDataGrid('data_grid.copy_sql.error.missing_safe_where');
+      }
+  }, [translateDataGrid]);
+
+  const buildCopySqlBatchText = useCallback((mode: 'insert' | 'update' | 'delete', record: any): string | null => {
+      if (!supportsCopyInsert) {
+          void message.warning(translateDataGrid('data_grid.message.copy_sql_not_supported'));
+          return null;
+      }
+      const records = getTargets(record);
+      const orderedCols = displayOutputColumnNames;
+      if (mode === 'insert') {
+          return records.map((row: any) => buildCopyInsertSQL({
+              dbType,
+              tableName,
+              orderedCols,
+              record: row,
+              columnTypesByLowerName: columnTypeMapByLowerName,
+          })).join('\n\n');
+      }
+
+      const sqlResults = records.map((row: any) => (
+          mode === 'update'
+              ? buildCopyUpdateSQL({
+                  dbType,
+                  tableName,
+                  orderedCols,
+                  record: row,
+                  pkColumns,
+                  uniqueKeyGroups,
+                  allTableColumns: allTableColumnNames,
+                  columnTypesByLowerName: columnTypeMapByLowerName,
+              })
+              : buildCopyDeleteSQL({
+                  dbType,
+                  tableName,
+                  orderedCols,
+                  record: row,
+                  pkColumns,
+                  uniqueKeyGroups,
+                  allTableColumns: allTableColumnNames,
+                  columnTypesByLowerName: columnTypeMapByLowerName,
+              })
+      ));
+      const failedResult = sqlResults.find((result: any) => result.ok === false);
+      if (failedResult && failedResult.ok === false) {
+          void message.warning(translateCopySqlError(failedResult.error));
+          return null;
+      }
+      const sqlTexts: string[] = [];
+      sqlResults.forEach((result: any) => {
+          if (result.ok) {
+              sqlTexts.push(result.sql);
+          }
+      });
+      return sqlTexts.join('\n\n');
+  }, [
+      supportsCopyInsert,
+      getTargets,
+      displayOutputColumnNames,
+      dbType,
+      tableName,
+      columnTypeMapByLowerName,
+      pkColumns,
+      uniqueKeyGroups,
+      allTableColumnNames,
+      translateCopySqlError,
+      translateDataGrid,
+  ]);
+
+  const handleCopyInsert = useCallback((record: any) => {
+      const batchText = buildCopySqlBatchText('insert', record);
+      if (!batchText) return;
+      copyToClipboard(batchText);
+  }, [buildCopySqlBatchText, copyToClipboard]);
+
+  const handleCopyUpdate = useCallback((record: any) => {
+      const batchText = buildCopySqlBatchText('update', record);
+      if (!batchText) return;
+      copyToClipboard(batchText);
+  }, [buildCopySqlBatchText, copyToClipboard]);
+
+  const handleCopyDelete = useCallback((record: any) => {
+      const batchText = buildCopySqlBatchText('delete', record);
+      if (!batchText) return;
+      copyToClipboard(batchText);
+  }, [buildCopySqlBatchText, copyToClipboard]);
+
+  const handleCopyJson = useCallback((record: any) => {
+      const records = getTargets(record);
+      const cleanRecords = pickDataGridOutputRows(records, displayOutputColumnNames);
+      copyToClipboard(JSON.stringify(cleanRecords, null, 2));
+  }, [getTargets, displayOutputColumnNames, copyToClipboard]);
+
+  const handleCopyCsv = useCallback((record: any) => {
+      const records = getTargets(record);
+      const orderedCols = displayOutputColumnNames;
+      const header = orderedCols.map((c: string) => `"${c}"`).join(',');
+      const lines = records.map((r: any) => {
+          const values = orderedCols.map((c: string) => {
+              const v = r[c];
+              if (v === null || v === undefined) return 'NULL';
+              // CSV 标准：值中的双引号转义为两个双引号
+              const escaped = String(v).replace(/"/g, '""');
+              return `"${escaped}"`;
+          });
+          return values.join(',');
+      });
+      copyToClipboard([header, ...lines].join('\n'));
+  }, [getTargets, displayOutputColumnNames, copyToClipboard]);
+
+  const handleCopyRowData = useCallback((record: any) => {
+      const rows = getContextMenuTargetRows(record);
+      const columns = displayOutputColumnNames;
+      const text = buildClipboardTsv(
+          rows,
+          columns,
+          (columnName: string) => (columnMetaMap[columnName] || columnMetaMapByLowerName[columnName.toLowerCase()])?.type,
+          currentConnConfig,
+      );
+      if (!text) {
+          void message.info(translateDataGrid('data_grid.message.current_row_no_copyable_content'));
+          return;
+      }
+      copyToClipboard(text);
+  }, [columnMetaMap, columnMetaMapByLowerName, copyToClipboard, currentConnConfig, displayOutputColumnNames, getContextMenuTargetRows, translateDataGrid]);
+
+  const buildConnConfig = useCallback(() => {
+      if (!connectionId) return null;
+      const conn = connections.find((c: any) => c.id === connectionId);
+      if (!conn) return null;
+      return {
+          ...conn.config,
+          port: Number(conn.config.port),
+          password: conn.config.password || "",
+          database: conn.config.database || "",
+          useSSH: conn.config.useSSH || false,
+          ssh: conn.config.ssh || { host: "", port: 22, user: "", password: "", keyPath: "" }
+      };
+  }, [connections, connectionId]);
+
+  const exportByQuery = useCallback(async (sql: string, defaultName: string, options: DataExportFileOptions, totalRows?: number) => {
+      const config = buildConnConfig();
+      if (!config) return;
+      const totalRowsKnown = Number.isFinite(totalRows) && Number(totalRows) >= 0;
+      await runExportWithProgress({
+          title: `导出 ${defaultName || '查询结果'}`,
+          targetName: defaultName || 'export',
+          format: options.format,
+          totalRows: totalRowsKnown ? Number(totalRows) : undefined,
+          run: (jobId: string) => ExportQueryWithOptions(
+              buildRpcConnectionConfig(config) as any,
+              dbName || '',
+              sql,
+              defaultName || 'export',
+              {
+                  ...options,
+                  jobId,
+                  totalRowsHint: totalRowsKnown ? Number(totalRows) : 0,
+                  totalRowsKnown,
+              } as any,
+          ),
+      });
+  }, [buildConnConfig, dbName, runExportWithProgress]);
+
+  const buildPkWhereSql = useCallback((rows: any[], dbType: string) => {
+      if (!tableName || pkColumns.length === 0) return '';
+      const targets = (rows || []).filter(Boolean);
+      if (targets.length === 0) return '';
+
+      const clauses: string[] = [];
+      for (const r of targets) {
+          const andParts: string[] = [];
+          for (const pk of pkColumns) {
+              const col = quoteIdentPart(dbType, pk);
+              const v = r?.[pk];
+              if (v === null || v === undefined) return '';
+              andParts.push(`${col} = '${escapeLiteral(String(v))}'`);
+          }
+          if (andParts.length === pkColumns.length) {
+              clauses.push(`(${andParts.join(' AND ')})`);
+          }
+      }
+      if (clauses.length === 0) return '';
+      return clauses.join(' OR ');
+  }, [pkColumns, tableName]);
+
+  const buildCurrentPageSql = useCallback((dbType: string) => {
+      if (!tableName || !pagination) return '';
+      const effectiveFilterConditions = buildEffectiveFilterConditions(filterConditions, quickWhereCondition);
+      const whereSQL = buildWhereSQL(dbType, effectiveFilterConditions);
+      const baseSql = buildDataGridSelectBaseSql({
+          dbType,
+          tableName,
+          columnNames: displayOutputColumnNames,
+          whereSql: whereSQL,
+      });
+      const orderBySQL = buildOrderBySQL(dbType, sortInfo, pkColumns);
+      const normalizedType = String(dbType || '').trim().toLowerCase();
+      const hasSortForBuffer = hasExplicitSort(sortInfo);
+      const offset = (pagination.current - 1) * pagination.pageSize;
+      let sql = buildPaginatedSelectSQL(dbType, baseSql, orderBySQL, pagination.pageSize, offset);
+      if (hasSortForBuffer && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
+          sql = withSortBufferTuningSQL(normalizedType, sql, 32 * 1024 * 1024);
+      }
+      return sql;
+  }, [tableName, pagination, filterConditions, quickWhereCondition, sortInfo, pkColumns, displayOutputColumnNames]);
+
+  const buildAllRowsSql = useCallback((dbType: string) => {
+      if (!tableName) return '';
+      return buildDataGridSelectBaseSql({
+          dbType,
+          tableName,
+          columnNames: displayOutputColumnNames,
+      });
+  }, [tableName, displayOutputColumnNames]);
+
+  const buildFilteredAllSql = useCallback((dbType: string) => {
+      if (!tableName) return '';
+      const effectiveFilterConditions = buildEffectiveFilterConditions(filterConditions, quickWhereCondition);
+      const whereSQL = buildWhereSQL(dbType, effectiveFilterConditions);
+      if (!whereSQL) return '';
+      let sql = buildDataGridSelectBaseSql({
+          dbType,
+          tableName,
+          columnNames: displayOutputColumnNames,
+          whereSql: whereSQL,
+      });
+      sql += buildOrderBySQL(dbType, sortInfo, pkColumns);
+      const normalizedType = String(dbType || '').trim().toLowerCase();
+      const hasSortForBuffer = hasExplicitSort(sortInfo);
+      if (hasSortForBuffer && (normalizedType === 'mysql' || normalizedType === 'mariadb')) {
+          sql = withSortBufferTuningSQL(normalizedType, sql, 32 * 1024 * 1024);
+      }
+      return sql;
+  }, [tableName, filterConditions, quickWhereCondition, sortInfo, pkColumns, displayOutputColumnNames]);
+
+  const queryResultCurrentPageRows = useMemo(() => {
+      if (isQueryResultExport) {
+          return mergedDisplayData;
+      }
+      if (!pagination) {
+          return mergedDisplayData;
+      }
+      const offset = Math.max(0, (pagination.current - 1) * pagination.pageSize);
+      return mergedDisplayData.slice(offset, offset + pagination.pageSize);
+  }, [isQueryResultExport, mergedDisplayData, pagination]);
+
+  const exportQueryResultRows = useCallback(async (options: DataExportFileOptions, scope: Exclude<DataGridExportScope, 'filteredAll'>) => {
+      if (scope === 'selected') {
+          const selectedKeySet = new Set(selectedRowKeys.map((key: any) => rowKeyStr(key)));
+          const rows = mergedDisplayData.filter((row: any) => {
+              const key = row?.[GONAVI_ROW_KEY];
+              return key !== undefined && key !== null && selectedKeySet.has(rowKeyStr(key));
+          });
+          if (rows.length === 0) {
+              void message.info(translateDataGrid('data_grid.message.no_rows_selected'));
+              return;
+          }
+          await exportData(rows, options);
+          return;
+      }
+      if (scope === 'page') {
+          await exportData(queryResultCurrentPageRows, options);
+          return;
+      }
+      const exportAllSql = String(resultExportAllSql || '').trim();
+      const fallbackAllSql = String(resultSql || '').trim();
+      const backendExportSql = exportAllSql || fallbackAllSql;
+      if (backendExportSql && connectionId) {
+          const totalRows = pagination && pagination.totalKnown !== false ? Number(pagination.total) : undefined;
+          await exportByQuery(backendExportSql, tableName || 'query_result', options, totalRows);
+          return;
+      }
+      await exportData(mergedDisplayData, options);
+  }, [connectionId, exportByQuery, exportData, mergedDisplayData, pagination, queryResultCurrentPageRows, resultExportAllSql, resultSql, rowKeyStr, selectedRowKeys, tableName]);
+
+  // Context Menu Export
+  const handleExportSelected = useCallback(async (options: DataExportFileOptions, record: any) => {
+      if (isQueryResultExport) {
+          await exportData(getContextMenuTargetRows(record), options);
+          return;
+      }
+      const records = getTargets(record);
+      if (!connectionId || !tableName) {
+          await exportData(records, options);
+          return;
+      }
+
+      // 有未提交修改时，优先按界面数据导出，避免与数据库不一致。
+      if (hasChanges) {
+          await exportData(records, options);
+          void message.warning(translateDataGrid('data_grid.message.export_with_uncommitted_changes'));
+          return;
+      }
+
+      const config = buildConnConfig();
+      if (!config) {
+          await exportData(records, options);
+          return;
+      }
+
+      const dbType = resolveDataSourceType(config);
+      const pkWhere = buildPkWhereSql(records, dbType);
+      if (!pkWhere) {
+          await exportData(records, options);
+          return;
+      }
+
+      const sql = buildDataGridSelectBaseSql({
+          dbType,
+          tableName,
+          columnNames: displayOutputColumnNames,
+          whereSql: `WHERE ${pkWhere}`,
+      });
+      await exportByQuery(sql, tableName || 'export', options, records.length);
+  }, [getTargets, isQueryResultExport, connectionId, tableName, hasChanges, exportData, buildConnConfig, buildPkWhereSql, exportByQuery, displayOutputColumnNames, translateDataGrid]);
+
+  const handleV2CellContextMenuAction = useCallback((action: V2CellContextMenuActionKey) => {
+      const record = cellContextMenu.record;
+      const closeMenu = () => setCellContextMenu((prev: any) => ({ ...prev, visible: false }));
+
+      switch (action) {
+          case 'copy-field-name':
+              handleCopyContextMenuFieldName();
+              return;
+          case 'copy-row-data':
+              if (record) handleCopyRowData(record);
+              closeMenu();
+              return;
+          case 'copy-row-for-paste':
+              if (record) {
+                  const rowKey = record?.[GONAVI_ROW_KEY];
+                  if (rowKey === undefined || rowKey === null) {
+                      void message.info(translateDataGrid('data_grid.message.no_copyable_rows'));
+                  } else {
+                      setSelectedRowKeys([rowKey]);
+                      copyRowsForPaste([rowKey]);
+                  }
+              }
+              closeMenu();
+              return;
+          case 'paste-row-as-new':
+              handlePasteCopiedRowsAsNew();
+              closeMenu();
+              return;
+          case 'copy-column-data':
+              handleCopyColumnData(cellContextMenu.dataIndex);
+              closeMenu();
+              return;
+          case 'undo-cell-change':
+              handleUndoContextMenuCellChange();
+              return;
+          case 'set-null':
+              handleCellSetNull();
+              return;
+          case 'edit-row':
+              handleOpenContextMenuRowEditor();
+              return;
+          case 'fill-selected':
+              if (selectedRowKeys.length > 0 && record) {
+                  handleBatchFillToSelected(record, cellContextMenu.dataIndex);
+              }
+              closeMenu();
+              return;
+          case 'paste-copied-columns':
+              if (copiedCellPatch) {
+                  handlePasteCopiedColumnsToSelectedRows(record?.[GONAVI_ROW_KEY]);
+              }
+              closeMenu();
+              return;
+          case 'copy-insert':
+              if (record) handleCopyInsert(record);
+              closeMenu();
+              return;
+          case 'copy-update':
+              if (record) handleCopyUpdate(record);
+              closeMenu();
+              return;
+          case 'copy-delete':
+              if (record) handleCopyDelete(record);
+              closeMenu();
+              return;
+          case 'copy-json':
+              if (record) handleCopyJson(record);
+              closeMenu();
+              return;
+          case 'copy-csv':
+              if (record) handleCopyCsv(record);
+              closeMenu();
+              return;
+          case 'copy-markdown':
+              if (record) {
+                  const records = getTargets(record);
+                  const columns = getClipboardColumnNames(records);
+                  copyToClipboard(buildClipboardMarkdown(records, columns));
+              }
+              closeMenu();
+              return;
+          case 'export-csv':
+          case 'export-xlsx':
+          case 'export-json':
+          case 'export-html':
+              if (record) {
+                  const format = action.replace('export-', '') as DataExportDialogValues['format'];
+                  handleExportSelected({ format }, record).catch(console.error);
+              }
+              closeMenu();
+              return;
+          default:
+              closeMenu();
+      }
+  }, [
+      cellContextMenu.record,
+      cellContextMenu.dataIndex,
+      copiedCellPatch,
+      copyRowsForPaste,
+      copyToClipboard,
+      getClipboardColumnNames,
+      getTargets,
+      handleBatchFillToSelected,
+      handleCellSetNull,
+      handleUndoContextMenuCellChange,
+      handleCopyContextMenuFieldName,
+      handleCopyCsv,
+      handleCopyDelete,
+      handleCopyInsert,
+      handleCopyJson,
+      handleCopyColumnData,
+      handleCopyRowData,
+      handleCopyUpdate,
+      handleExportSelected,
+      handleOpenContextMenuRowEditor,
+      handlePasteCopiedColumnsToSelectedRows,
+      handlePasteCopiedRowsAsNew,
+      selectedRowKeys.length,
+      translateDataGrid,
+  ]);
+
+  // Export
+  const handleOpenExportDialog = useCallback(async () => {
+      const selectedCount = selectedRowKeys.length;
+      const allRowsLabel = (resultExportAllSql || resultSql)
+          ? '全部结果（重新查询）'
+          : `全部结果（当前缓存 ${mergedDisplayData.length} 条）`;
+      const commonInitialValues: Partial<DataExportDialogValues> = {
+          format: DEFAULT_DATA_EXPORT_FORMAT,
+          xlsxMaxRowsPerSheet: DEFAULT_XLSX_ROWS_PER_SHEET,
+      };
+
+      if (isQueryResultExport) {
+          const scopeOptions: DataExportScopeOption[] = [
+              {
+                  value: 'selected',
+                  label: selectedCount > 0 ? `选中行 (${selectedCount} 条)` : '选中行',
+                  description: '仅导出当前结果集中已勾选的行。',
+                  disabled: selectedCount <= 0,
+              },
+              {
+                  value: 'page',
+                  label: `当前页 (${queryResultCurrentPageRows.length} 条)`,
+                  description: '直接按当前结果页缓存导出。',
+              },
+              {
+                  value: 'all',
+                  label: allRowsLabel,
+                  description: (resultExportAllSql || resultSql)
+                      ? '后台会重新执行 SQL，避免只导出当前页或当前缓存。'
+                      : '当前查询缺少可重放 SQL 时，将导出当前缓存的全部结果。',
+              },
+          ];
+          const values = await showDataExportDialog(modal, {
+              title: '导出查询结果',
+              scopeOptions,
+              initialValues: {
+                  ...commonInitialValues,
+                  scope: (resultExportAllSql || resultSql) ? 'all' : (selectedCount > 0 ? 'selected' : 'page'),
+              },
+          });
+          if (!values) return;
+          await exportQueryResultRows(values, values.scope as Exclude<DataGridExportScope, 'filteredAll'>);
+          return;
+      }
+
+      if (!connectionId) return;
+      const config = buildConnConfig();
+      const dbType = config ? resolveDataSourceType(config) : '';
+      const currentPageSql = config && !hasChanges ? buildCurrentPageSql(dbType) : '';
+      const filteredAllSql = config && supportsSqlQueryExport ? buildFilteredAllSql(dbType) : '';
+      const allRowsSql = config && objectType !== 'table' ? buildAllRowsSql(dbType) : '';
+      const hasKnownFilteredTotal = hasFilteredExportSql && pagination && pagination.totalKnown !== false;
+      const hasKnownAllTotal = !hasFilteredExportSql && pagination && pagination.totalKnown !== false;
+
+      addTab(buildTableExportTab({
+          connectionId,
+          dbName,
+          tableName: tableName || 'export',
+          title: `导出 ${tableName || '数据'}`,
+          objectType,
+          scopeOptions: [
+              {
+                  value: 'page',
+                  label: `当前页 (${displayData.length} 条)`,
+                  description: currentPageSql
+                      ? '后台按当前分页条件重新查询后导出当前页。'
+                      : '当前页依赖前端临时状态，建议直接使用快捷导出。',
+                  disabled: !currentPageSql,
+              },
+              ...(hasFilteredExportSql ? [{
+                  value: 'filteredAll' as const,
+                  label: '筛选结果（全部）',
+                  description: filteredAllSql
+                      ? '按当前筛选条件重新查询数据库并导出全部筛选结果。'
+                      : '当前数据源或当前状态暂不支持在工作台重放筛选导出。',
+                  disabled: !filteredAllSql,
+              }] : []),
+              {
+                  value: 'all',
+                  label: '全表数据',
+                  description: '后台重新查询整张表并导出全部数据。',
+              },
+          ],
+          initialScope: hasFilteredExportSql && filteredAllSql ? 'filteredAll' : 'all',
+          queryByScope: {
+              ...(currentPageSql ? { page: currentPageSql } : {}),
+              ...(filteredAllSql ? { filteredAll: filteredAllSql } : {}),
+              ...(allRowsSql ? { all: allRowsSql } : {}),
+          },
+          rowCountByScope: {
+              page: displayData.length,
+              ...(hasKnownFilteredTotal ? { filteredAll: Number(pagination?.total) } : {}),
+              ...(hasKnownAllTotal ? { all: Number(pagination?.total) } : {}),
+          },
+      }));
+  }, [
+      addTab,
+      buildAllRowsSql,
+      buildConnConfig,
+      buildCurrentPageSql,
+      buildFilteredAllSql,
+      connectionId,
+      dbName,
+      displayData.length,
+      exportQueryResultRows,
+      hasFilteredExportSql,
+      objectType,
+      isQueryResultExport,
+      mergedDisplayData.length,
+      modal,
+      pagination,
+      queryResultCurrentPageRows.length,
+      resultExportAllSql,
+      resultSql,
+      selectedRowKeys.length,
+      supportsSqlQueryExport,
+      tableName,
+      hasChanges,
+  ]);
+
+  return {
+    handleV2ColumnHeaderContextMenuAction,
+    buildConnConfig,
+    buildCopySqlBatchText,
+    getTargets,
+    handleCopyCsv,
+    handleCopyDdl,
+    handleCopyDelete,
+    handleCopyInsert,
+    handleCopyJson,
+    handleCopyQueryResultCsv,
+    handleCopyQueryResultJson,
+    handleCopyQueryResultMarkdown,
+    handleCopyRowData,
+    handleCopySelectedCellsToClipboard,
+    handleCopyUpdate,
+    handleExportSelected,
+    handleV2CellContextMenuAction,
+    handleOpenExportDialog,
+  };
+};
diff --git a/frontend/src/hooks/useAppLogPanelResize.ts b/frontend/src/hooks/useAppLogPanelResize.ts
new file mode 100644
index 0000000..90fd2c8
--- /dev/null
+++ b/frontend/src/hooks/useAppLogPanelResize.ts
@@ -0,0 +1,70 @@
+import React, { useCallback, useRef, useState } from 'react';
+
+const LOG_PANEL_TOOLBAR_HEIGHT = 32;
+const LOG_PANEL_SINGLE_ROW_HEIGHT = 39;
+const LOG_PANEL_MIN_VISIBLE_ROWS = 1;
+const LOG_PANEL_MIN_HEIGHT = LOG_PANEL_TOOLBAR_HEIGHT + (LOG_PANEL_SINGLE_ROW_HEIGHT * LOG_PANEL_MIN_VISIBLE_ROWS);
+const LOG_PANEL_MAX_HEIGHT = 800;
+
+export const useAppLogPanelResize = () => {
+  const [logPanelHeight, setLogPanelHeight] = useState(Math.max(200, LOG_PANEL_MIN_HEIGHT));
+  const [isLogPanelOpen, setIsLogPanelOpen] = useState(false);
+  const logResizeRef = useRef<{ startY: number; startHeight: number } | null>(null);
+  const logGhostRef = useRef<HTMLDivElement>(null);
+
+  const handleToggleLogPanel = useCallback(() => {
+    setIsLogPanelOpen((prev) => !prev);
+  }, []);
+
+  const handleCloseLogPanel = useCallback(() => {
+    setIsLogPanelOpen(false);
+  }, []);
+
+  const handleLogResizeStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    logResizeRef.current = { startY: e.clientY, startHeight: logPanelHeight };
+
+    if (logGhostRef.current) {
+      logGhostRef.current.style.top = `${e.clientY}px`;
+      logGhostRef.current.style.display = 'block';
+    }
+
+    document.addEventListener('mousemove', handleLogResizeMove);
+    document.addEventListener('mouseup', handleLogResizeUp);
+  };
+
+  const handleLogResizeMove = (e: MouseEvent) => {
+    if (!logResizeRef.current) return;
+    if (logGhostRef.current) {
+      logGhostRef.current.style.top = `${e.clientY}px`;
+    }
+  };
+
+  const handleLogResizeUp = (e: MouseEvent) => {
+    if (logResizeRef.current) {
+      const delta = logResizeRef.current.startY - e.clientY;
+      const newHeight = Math.max(
+        LOG_PANEL_MIN_HEIGHT,
+        Math.min(LOG_PANEL_MAX_HEIGHT, logResizeRef.current.startHeight + delta),
+      );
+      setLogPanelHeight(newHeight);
+    }
+
+    if (logGhostRef.current) {
+      logGhostRef.current.style.display = 'none';
+    }
+
+    logResizeRef.current = null;
+    document.removeEventListener('mousemove', handleLogResizeMove);
+    document.removeEventListener('mouseup', handleLogResizeUp);
+  };
+
+  return {
+    handleCloseLogPanel,
+    handleLogResizeStart,
+    handleToggleLogPanel,
+    isLogPanelOpen,
+    logGhostRef,
+    logPanelHeight,
+  };
+};
diff --git a/frontend/src/hooks/useAppSidebarResize.ts b/frontend/src/hooks/useAppSidebarResize.ts
new file mode 100644
index 0000000..fc657dd
--- /dev/null
+++ b/frontend/src/hooks/useAppSidebarResize.ts
@@ -0,0 +1,154 @@
+import React, { useRef } from 'react';
+
+const SIDEBAR_RESIZE_MIN_WIDTH = 200;
+const SIDEBAR_RESIZE_MAX_WIDTH = 600;
+
+type SidebarResizeBounds = { minWidth: number; maxWidth: number };
+type SidebarResizeDragState = SidebarResizeBounds & {
+  startX: number;
+  startWidth: number;
+  startGuideLeft: number;
+};
+
+const parseCssPixelValue = (value: string | null | undefined): number | null => {
+  const parsed = Number.parseFloat(String(value || ''));
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const resolveSidebarResizeBounds = (siderElement: Element | null): SidebarResizeBounds => {
+  if (typeof window === 'undefined' || !(siderElement instanceof HTMLElement)) {
+    return { minWidth: SIDEBAR_RESIZE_MIN_WIDTH, maxWidth: SIDEBAR_RESIZE_MAX_WIDTH };
+  }
+  const computed = window.getComputedStyle(siderElement);
+  const cssMinWidth = parseCssPixelValue(computed.minWidth);
+  const cssMaxWidth = parseCssPixelValue(computed.maxWidth);
+  const minWidth = Math.max(SIDEBAR_RESIZE_MIN_WIDTH, cssMinWidth && cssMinWidth > 0 ? cssMinWidth : SIDEBAR_RESIZE_MIN_WIDTH);
+  const maxWidth = Math.max(minWidth, Math.min(SIDEBAR_RESIZE_MAX_WIDTH, cssMaxWidth && cssMaxWidth > 0 ? cssMaxWidth : SIDEBAR_RESIZE_MAX_WIDTH));
+  return { minWidth, maxWidth };
+};
+
+const clampSidebarResizeWidth = (width: number, bounds: SidebarResizeBounds): number => (
+  Math.max(bounds.minWidth, Math.min(bounds.maxWidth, width))
+);
+
+type UseAppSidebarResizeOptions = {
+  effectiveUiScale: number;
+  setSidebarWidth: (width: number) => void;
+  sidebarWidth: number;
+};
+
+export const useAppSidebarResize = ({
+  effectiveUiScale,
+  setSidebarWidth,
+  sidebarWidth,
+}: UseAppSidebarResizeOptions) => {
+  const sidebarDragRef = useRef<SidebarResizeDragState | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const ghostRef = useRef<HTMLDivElement>(null);
+  const siderRef = useRef<HTMLDivElement | null>(null);
+  const sidebarDragBodyStyleRef = useRef<{ cursor: string; userSelect: string; webkitUserSelect: string } | null>(null);
+  const latestMouseX = useRef<number>(0);
+  const sidebarResizeHandleWidth = Math.max(16, Math.round(16 * effectiveUiScale));
+
+  const restoreSidebarDragBodyStyles = () => {
+    if (!sidebarDragBodyStyleRef.current || typeof document === 'undefined') {
+      sidebarDragBodyStyleRef.current = null;
+      return;
+    }
+
+    const previous = sidebarDragBodyStyleRef.current;
+    document.body.style.cursor = previous.cursor;
+    document.body.style.userSelect = previous.userSelect;
+    (document.body.style as any).WebkitUserSelect = previous.webkitUserSelect;
+    sidebarDragBodyStyleRef.current = null;
+  };
+
+  const handleSidebarMouseDown = (e: React.MouseEvent) => {
+    if (e.button !== 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (typeof document !== 'undefined') {
+      sidebarDragBodyStyleRef.current = {
+        cursor: document.body.style.cursor,
+        userSelect: document.body.style.userSelect,
+        webkitUserSelect: (document.body.style as any).WebkitUserSelect || '',
+      };
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      (document.body.style as any).WebkitUserSelect = 'none';
+    }
+
+    const siderRect = siderRef.current?.getBoundingClientRect();
+    const startGuideLeft = siderRect?.right ?? sidebarWidth;
+    const startWidth = siderRect?.width ?? sidebarWidth;
+    const resizeBounds = resolveSidebarResizeBounds(siderRef.current);
+
+    if (ghostRef.current) {
+      ghostRef.current.style.left = `${startGuideLeft}px`;
+      ghostRef.current.style.display = 'block';
+    }
+
+    sidebarDragRef.current = {
+      startX: e.clientX,
+      startWidth,
+      startGuideLeft,
+      ...resizeBounds,
+    };
+    latestMouseX.current = e.clientX;
+    document.addEventListener('mousemove', handleSidebarMouseMove);
+    document.addEventListener('mouseup', handleSidebarMouseUp);
+  };
+
+  const handleSidebarMouseMove = (e: MouseEvent) => {
+    if (!sidebarDragRef.current) return;
+
+    latestMouseX.current = e.clientX;
+
+    if (rafRef.current) return;
+
+    rafRef.current = requestAnimationFrame(() => {
+      if (!sidebarDragRef.current || !ghostRef.current) return;
+      const { startX, startWidth, startGuideLeft, minWidth, maxWidth } = sidebarDragRef.current;
+      const delta = latestMouseX.current - startX;
+      const newWidth = clampSidebarResizeWidth(startWidth + delta, { minWidth, maxWidth });
+      ghostRef.current.style.left = `${startGuideLeft + (newWidth - startWidth)}px`;
+      rafRef.current = null;
+    });
+  };
+
+  const handleSidebarMouseUp = (e: MouseEvent) => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+
+    if (sidebarDragRef.current) {
+      const { startX, startWidth, minWidth, maxWidth } = sidebarDragRef.current;
+      const delta = e.clientX - startX;
+      const newWidth = clampSidebarResizeWidth(startWidth + delta, { minWidth, maxWidth });
+      setSidebarWidth(newWidth);
+    }
+
+    if (ghostRef.current) {
+      ghostRef.current.style.display = 'none';
+    }
+    restoreSidebarDragBodyStyles();
+
+    sidebarDragRef.current = null;
+    document.removeEventListener('mousemove', handleSidebarMouseMove);
+    document.removeEventListener('mouseup', handleSidebarMouseUp);
+  };
+
+  return {
+    ghostRef,
+    handleSidebarMouseDown,
+    sidebarResizeHandleWidth,
+    siderRef,
+  };
+};
diff --git a/frontend/src/hooks/useAppUpdateManager.ts b/frontend/src/hooks/useAppUpdateManager.ts
new file mode 100644
index 0000000..d83e280
--- /dev/null
+++ b/frontend/src/hooks/useAppUpdateManager.ts
@@ -0,0 +1,471 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { message } from 'antd';
+import { EventsOn } from '../../wailsjs/runtime';
+import { resolveAboutDisplayVersion } from '../utils/appVersionDisplay';
+
+type Translator = (key: string, params?: Record<string, any>) => string;
+
+export type UpdateInfo = {
+  hasUpdate: boolean;
+  currentVersion: string;
+  latestVersion: string;
+  releaseName?: string;
+  releaseNotesUrl?: string;
+  assetName?: string;
+  assetUrl?: string;
+  assetSize?: number;
+  sha256?: string;
+  downloaded?: boolean;
+  downloadPath?: string;
+};
+
+type UpdateDownloadProgressEvent = {
+  status?: 'start' | 'downloading' | 'done' | 'error';
+  percent?: number;
+  downloaded?: number;
+  total?: number;
+  message?: string;
+};
+
+type UpdateDownloadResultData = {
+  info?: UpdateInfo;
+  downloadPath?: string;
+  installLogPath?: string;
+  installTarget?: string;
+  platform?: string;
+  autoRelaunch?: boolean;
+};
+
+type UseAppUpdateManagerOptions = {
+  isMacRuntime: boolean;
+  runtimeBuildType: string;
+  t: Translator;
+};
+
+const createEmptyDownloadProgress = () => ({
+  open: false,
+  version: '',
+  status: 'idle' as 'idle' | 'start' | 'downloading' | 'done' | 'error',
+  percent: 0,
+  downloaded: 0,
+  total: 0,
+  message: '',
+});
+
+export const useAppUpdateManager = ({
+  isMacRuntime,
+  runtimeBuildType,
+  t,
+}: UseAppUpdateManagerOptions) => {
+  const updateCheckInFlightRef = useRef(false);
+  const updateDownloadInFlightRef = useRef(false);
+  const updateUserDismissedRef = useRef(false);
+  const updateDownloadedVersionRef = useRef<string | null>(null);
+  const updateInstallTriggeredVersionRef = useRef<string | null>(null);
+  const updateDownloadMetaRef = useRef<UpdateDownloadResultData | null>(null);
+  const updateNotifiedVersionRef = useRef<string | null>(null);
+  const updateMutedVersionRef = useRef<string | null>(null);
+  const [isAboutOpen, setIsAboutOpen] = useState(false);
+  const isAboutOpenRef = useRef(false);
+  const [aboutLoading, setAboutLoading] = useState(false);
+  const [aboutInfo, setAboutInfo] = useState<{
+    version: string;
+    author: string;
+    buildTime?: string;
+    repoUrl?: string;
+    issueUrl?: string;
+    releaseUrl?: string;
+    communityUrl?: string;
+  } | null>(null);
+  const aboutDisplayVersion = resolveAboutDisplayVersion(runtimeBuildType, aboutInfo?.version);
+  const [aboutUpdateStatus, setAboutUpdateStatus] = useState<string>('');
+  const [lastUpdateInfo, setLastUpdateInfo] = useState<UpdateInfo | null>(null);
+  const [updateDownloadProgress, setUpdateDownloadProgress] = useState(createEmptyDownloadProgress);
+
+  const formatAboutUpdateStatus = useCallback((info: UpdateInfo | null): string => {
+    if (!info) {
+      return t('app.about.update_status.not_checked');
+    }
+    if (info.hasUpdate) {
+      const localDownloaded = updateDownloadedVersionRef.current === info.latestVersion;
+      const hasDownloaded = Boolean(info.downloaded) || localDownloaded;
+      return hasDownloaded
+        ? t('app.about.update_status.new_version_downloaded', { version: info.latestVersion })
+        : t('app.about.update_status.new_version_not_downloaded', { version: info.latestVersion });
+    }
+    return t('app.about.update_status.latest', { version: info.currentVersion || t('common.unknown') });
+  }, [t]);
+
+  const formatBytes = useCallback((bytes?: number) => {
+    if (!bytes || bytes <= 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let value = bytes;
+    let idx = 0;
+    while (value >= 1024 && idx < units.length - 1) {
+      value /= 1024;
+      idx++;
+    }
+    return `${value.toFixed(idx === 0 ? 0 : 1)} ${units[idx]}`;
+  }, []);
+
+  const downloadUpdate = useCallback(async (info: UpdateInfo, silent: boolean) => {
+    if (updateDownloadInFlightRef.current) return;
+    if (updateDownloadedVersionRef.current === info.latestVersion) {
+      if (!silent) {
+        const cachedDownloadPath = updateDownloadMetaRef.current?.downloadPath;
+        void message.info(cachedDownloadPath
+          ? t('app.about.message.update_package_ready_with_path', { version: info.latestVersion, path: cachedDownloadPath })
+          : t('app.about.message.update_package_ready', { version: info.latestVersion }));
+        showUpdateDownloadProgress();
+      }
+      return;
+    }
+    updateDownloadInFlightRef.current = true;
+    updateUserDismissedRef.current = false;
+    updateDownloadMetaRef.current = null;
+    setUpdateDownloadProgress({
+      open: true,
+      version: info.latestVersion,
+      status: 'start',
+      percent: 0,
+      downloaded: 0,
+      total: info.assetSize || 0,
+      message: '',
+    });
+    let res: any = null;
+    try {
+      res = await (window as any).go.app.App.DownloadUpdate();
+    } catch (e) {
+      console.warn('Wails API: DownloadUpdate unavailable', e);
+    }
+    updateDownloadInFlightRef.current = false;
+    if (res?.success) {
+      const resultData = (res?.data || {}) as UpdateDownloadResultData;
+      updateDownloadMetaRef.current = resultData;
+      updateDownloadedVersionRef.current = info.latestVersion;
+      setUpdateDownloadProgress((prev) => {
+        const total = prev.total > 0 ? prev.total : (info.assetSize || 0);
+        return { ...prev, status: 'done', percent: 100, downloaded: total, total, message: '', open: false };
+      });
+      setLastUpdateInfo((prev) => {
+        if (!prev || prev.latestVersion !== info.latestVersion) {
+          return {
+            ...info,
+            downloaded: true,
+            downloadPath: resultData?.downloadPath || info.downloadPath,
+          };
+        }
+        return {
+          ...prev,
+          downloaded: true,
+          downloadPath: resultData?.downloadPath || prev.downloadPath || info.downloadPath,
+        };
+      });
+      if (resultData?.downloadPath) {
+        void message.success({ content: t('app.about.message.download_completed_with_path', { path: resultData.downloadPath }), duration: 5 });
+      } else {
+        void message.success({ content: t('app.about.message.download_completed'), duration: 2 });
+      }
+      setAboutUpdateStatus(formatAboutUpdateStatus({ ...info, downloaded: true }));
+      if (isMacRuntime && !updateUserDismissedRef.current) {
+        try {
+          const openRes = await (window as any).go.app.App.OpenDownloadedUpdateDirectory();
+          if (openRes?.success) {
+            void message.success(openRes?.message || t('app.about.message.install_directory_opened_manual_replace'));
+          }
+        } catch (e) {
+          console.warn('自动打开下载目录失败', e);
+        }
+      }
+    } else {
+      setUpdateDownloadProgress((prev) => ({
+        ...prev,
+        status: 'error',
+        message: res?.message || t('common.unknown'),
+      }));
+      void message.error({ content: t('app.about.message.download_failed_with_error', { error: res?.message || t('common.unknown') }), duration: 4 });
+    }
+  }, [formatAboutUpdateStatus, isMacRuntime, t]);
+
+  const showUpdateDownloadProgress = useCallback(() => {
+    setUpdateDownloadProgress((prev) => {
+      if (prev.status === 'idle') return prev;
+      return { ...prev, open: true };
+    });
+  }, []);
+
+  const hideUpdateDownloadProgress = useCallback(() => {
+    setUpdateDownloadProgress((prev) => ({ ...prev, open: false }));
+  }, []);
+
+  const isLatestUpdateDownloaded = Boolean(lastUpdateInfo?.hasUpdate) && (
+    Boolean(lastUpdateInfo?.downloaded)
+    || (Boolean(lastUpdateInfo?.latestVersion) && updateDownloadedVersionRef.current === lastUpdateInfo?.latestVersion)
+  );
+  const isBackgroundProgressForLatestUpdate = Boolean(lastUpdateInfo?.hasUpdate)
+    && Boolean(lastUpdateInfo?.latestVersion)
+    && updateDownloadProgress.version === lastUpdateInfo?.latestVersion
+    && (updateDownloadProgress.status === 'start'
+      || updateDownloadProgress.status === 'downloading'
+      || updateDownloadProgress.status === 'done'
+      || updateDownloadProgress.status === 'error');
+  const canShowProgressEntry = (isLatestUpdateDownloaded || isBackgroundProgressForLatestUpdate)
+    && updateInstallTriggeredVersionRef.current !== (lastUpdateInfo?.latestVersion || null);
+
+  const handleInstallFromProgress = useCallback(async () => {
+    const canInstall = updateDownloadProgress.status === 'done'
+      || (Boolean(lastUpdateInfo?.hasUpdate) && (Boolean(lastUpdateInfo?.downloaded) || updateDownloadedVersionRef.current === lastUpdateInfo?.latestVersion));
+    if (!canInstall) {
+      return;
+    }
+    if (isMacRuntime) {
+      const res = await (window as any).go.app.App.OpenDownloadedUpdateDirectory();
+      if (!res?.success) {
+        void message.error(t('app.about.message.open_install_directory_failed_with_error', { error: res?.message || t('common.unknown') }));
+        updateDownloadedVersionRef.current = null;
+        updateDownloadMetaRef.current = null;
+        setUpdateDownloadProgress((prev) => ({
+          ...prev,
+          status: 'idle',
+          percent: 0,
+          downloaded: 0,
+          open: false,
+        }));
+        setLastUpdateInfo((prev) => prev ? { ...prev, downloaded: false, downloadPath: undefined } : prev);
+        setAboutUpdateStatus((prev) => lastUpdateInfo ? formatAboutUpdateStatus({ ...lastUpdateInfo, downloaded: false, downloadPath: undefined }) : prev);
+        return;
+      }
+      updateInstallTriggeredVersionRef.current = updateDownloadProgress.version || lastUpdateInfo?.latestVersion || null;
+      hideUpdateDownloadProgress();
+      void message.success(res?.message || t('app.about.message.install_directory_opened_manual_replace'));
+      return;
+    }
+    const res = await (window as any).go.app.App.InstallUpdateAndRestart();
+    if (!res?.success) {
+      void message.error(t('app.about.message.install_failed_with_error', { error: res?.message || t('common.unknown') }));
+      return;
+    }
+    updateInstallTriggeredVersionRef.current = updateDownloadProgress.version || lastUpdateInfo?.latestVersion || null;
+    hideUpdateDownloadProgress();
+  }, [formatAboutUpdateStatus, hideUpdateDownloadProgress, isMacRuntime, lastUpdateInfo, updateDownloadProgress.status, updateDownloadProgress.version, t]);
+
+  const checkForUpdates = useCallback(async (silent: boolean) => {
+    if (updateCheckInFlightRef.current) return;
+    updateCheckInFlightRef.current = true;
+    if (!silent) {
+      setAboutUpdateStatus(t('app.about.update_status.checking'));
+    }
+    const updateAPI = (window as any).go.app.App;
+    const checkFn = silent && typeof updateAPI.CheckForUpdatesSilently === 'function'
+      ? updateAPI.CheckForUpdatesSilently
+      : updateAPI.CheckForUpdates;
+    const res = await checkFn();
+    updateCheckInFlightRef.current = false;
+    if (!res?.success) {
+      if (!silent) {
+        const error = res?.message || t('common.unknown');
+        void message.error(t('app.about.message.check_failed_with_error', { error }));
+        setAboutUpdateStatus(t('app.about.update_status.check_failed', { error }));
+      }
+      return;
+    }
+    const info: UpdateInfo = res.data;
+    if (!info) return;
+    const aboutOpen = isAboutOpenRef.current;
+    if (info.hasUpdate) {
+      if (!info.downloaded && updateDownloadedVersionRef.current === info.latestVersion) {
+        updateDownloadedVersionRef.current = null;
+        updateDownloadMetaRef.current = null;
+      }
+      const localDownloaded = updateDownloadedVersionRef.current === info.latestVersion;
+      const hasDownloaded = Boolean(info.downloaded) || localDownloaded;
+      if (hasDownloaded) {
+        const downloadPath = info.downloadPath || updateDownloadMetaRef.current?.downloadPath || '';
+        updateDownloadedVersionRef.current = info.latestVersion;
+        updateDownloadMetaRef.current = {
+          ...(updateDownloadMetaRef.current || {}),
+          info,
+          downloadPath: downloadPath || undefined,
+        };
+        setUpdateDownloadProgress((prev) => {
+          if (prev.status === 'start' || prev.status === 'downloading') {
+            return prev;
+          }
+          const total = info.assetSize || prev.total || 0;
+          return {
+            ...prev,
+            open: prev.open && prev.version === info.latestVersion,
+            version: info.latestVersion,
+            status: 'done',
+            percent: 100,
+            downloaded: total,
+            total,
+            message: '',
+          };
+        });
+        setLastUpdateInfo({
+          ...info,
+          downloaded: true,
+          downloadPath: downloadPath || undefined,
+        });
+      } else {
+        if (updateDownloadedVersionRef.current !== info.latestVersion) {
+          updateDownloadMetaRef.current = null;
+        }
+        setUpdateDownloadProgress((prev) => {
+          if (prev.status === 'start' || prev.status === 'downloading') {
+            return prev;
+          }
+          return {
+            ...prev,
+            open: false,
+            version: info.latestVersion,
+            status: 'idle',
+            percent: 0,
+            downloaded: 0,
+            total: info.assetSize || 0,
+            message: '',
+          };
+        });
+        setLastUpdateInfo(info);
+      }
+      const statusText = formatAboutUpdateStatus({ ...info, downloaded: hasDownloaded });
+      if (!silent) {
+        void message.info(t('app.about.message.new_version_found', { version: info.latestVersion }));
+        setAboutUpdateStatus(statusText);
+      }
+      if (silent && aboutOpen) {
+        setAboutUpdateStatus(statusText);
+      }
+      if (silent && !aboutOpen && updateMutedVersionRef.current !== info.latestVersion && updateNotifiedVersionRef.current !== info.latestVersion) {
+        updateNotifiedVersionRef.current = info.latestVersion;
+        setIsAboutOpen(true);
+      }
+    } else if (!silent) {
+      setUpdateDownloadProgress((prev) => {
+        if (prev.status === 'start' || prev.status === 'downloading') {
+          return prev;
+        }
+        return createEmptyDownloadProgress();
+      });
+      setLastUpdateInfo(info);
+      const text = formatAboutUpdateStatus(info);
+      void message.success(text);
+      setAboutUpdateStatus(text);
+    } else if (silent && aboutOpen) {
+      setUpdateDownloadProgress((prev) => {
+        if (prev.status === 'start' || prev.status === 'downloading') {
+          return prev;
+        }
+        return createEmptyDownloadProgress();
+      });
+      setLastUpdateInfo(info);
+      const text = formatAboutUpdateStatus(info);
+      setAboutUpdateStatus(text);
+    } else {
+      setLastUpdateInfo(info);
+    }
+  }, [formatAboutUpdateStatus, t]);
+
+  const loadAboutInfo = useCallback(async () => {
+    setAboutLoading(true);
+    const res = await (window as any).go.app.App.GetAppInfo();
+    if (res?.success) {
+      setAboutInfo(res.data);
+    } else {
+      void message.error(t('app.about.message.load_failed', { error: res?.message || t('common.unknown') }));
+    }
+    setAboutLoading(false);
+  }, [t]);
+
+  const muteLatestUpdate = useCallback(() => {
+    if (lastUpdateInfo?.latestVersion) {
+      updateMutedVersionRef.current = lastUpdateInfo.latestVersion;
+    }
+    setIsAboutOpen(false);
+  }, [lastUpdateInfo?.latestVersion]);
+
+  const markUpdateProgressDismissed = useCallback(() => {
+    updateUserDismissedRef.current = true;
+  }, []);
+
+  useEffect(() => {
+    isAboutOpenRef.current = isAboutOpen;
+  }, [isAboutOpen]);
+
+  useEffect(() => {
+    if (isAboutOpen) {
+      setAboutUpdateStatus(formatAboutUpdateStatus(lastUpdateInfo));
+      void loadAboutInfo();
+    }
+  }, [formatAboutUpdateStatus, isAboutOpen, lastUpdateInfo, loadAboutInfo]);
+
+  useEffect(() => {
+    const startupTimer = window.setTimeout(() => {
+      void checkForUpdates(true);
+    }, 2000);
+    const interval = window.setInterval(() => {
+      void checkForUpdates(true);
+    }, 30 * 60 * 1000);
+    return () => {
+      window.clearTimeout(startupTimer);
+      window.clearInterval(interval);
+    };
+  }, [checkForUpdates]);
+
+  useEffect(() => {
+    let offDownloadProgress: any = null;
+    try {
+      offDownloadProgress = EventsOn('update:download-progress', (event: UpdateDownloadProgressEvent) => {
+        if (!event) return;
+        const status = event.status || 'downloading';
+        const nextStatus: 'idle' | 'start' | 'downloading' | 'done' | 'error' =
+          status === 'start' || status === 'downloading' || status === 'done' || status === 'error'
+            ? status
+            : 'downloading';
+        const downloaded = typeof event.downloaded === 'number' ? event.downloaded : 0;
+        const total = typeof event.total === 'number' ? event.total : 0;
+        const percentRaw = typeof event.percent === 'number'
+          ? event.percent
+          : (total > 0 ? (downloaded / total) * 100 : 0);
+        const percent = Math.max(0, Math.min(100, percentRaw));
+        setUpdateDownloadProgress((prev) => ({
+          open: prev.open,
+          version: prev.version,
+          status: nextStatus,
+          percent,
+          downloaded,
+          total,
+          message: String(event.message || ''),
+        }));
+      });
+    } catch (e) {
+      console.warn('Wails API: EventsOn unavailable', e);
+    }
+    return () => {
+      if (offDownloadProgress) offDownloadProgress();
+    };
+  }, []);
+
+  return {
+    aboutDisplayVersion,
+    aboutInfo,
+    aboutLoading,
+    aboutUpdateStatus,
+    canShowProgressEntry,
+    checkForUpdates,
+    downloadUpdate,
+    formatBytes,
+    handleInstallFromProgress,
+    hideUpdateDownloadProgress,
+    isAboutOpen,
+    isBackgroundProgressForLatestUpdate,
+    isLatestUpdateDownloaded,
+    lastUpdateInfo,
+    markUpdateProgressDismissed,
+    muteLatestUpdate,
+    setIsAboutOpen,
+    showUpdateDownloadProgress,
+    updateDownloadProgress,
+  };
+};
diff --git a/frontend/src/hooks/useAppUtilityStyles.tsx b/frontend/src/hooks/useAppUtilityStyles.tsx
new file mode 100644
index 0000000..1727c6c
--- /dev/null
+++ b/frontend/src/hooks/useAppUtilityStyles.tsx
@@ -0,0 +1,303 @@
+import React, { useMemo } from 'react';
+import { isMacLikePlatform } from '../utils/appearance';
+import { buildOverlayWorkbenchTheme } from '../utils/overlayWorkbenchTheme';
+
+type UseAppUtilityStylesOptions = {
+  blurFilter?: string;
+  darkMode: boolean;
+  effectiveOpacity: number;
+  effectiveUiScale: number;
+  resolvedAppearance: {
+    opacity: number;
+    blur: number;
+  };
+  sidebarWidth: number;
+};
+
+export const useAppUtilityStyles = ({
+  blurFilter,
+  darkMode,
+  effectiveOpacity,
+  effectiveUiScale,
+  resolvedAppearance,
+  sidebarWidth,
+}: UseAppUtilityStylesOptions) => {
+  const effectiveBlurFilter = blurFilter || 'none';
+  const getBg = (darkHex: string) => {
+    if (!darkMode) return `rgba(255, 255, 255, ${effectiveOpacity})`;
+    const hex = darkHex.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${effectiveOpacity})`;
+  };
+
+  const bgMain = getBg('#141414');
+  const bgContent = getBg('#1d1d1d');
+  const floatingLogButtonBorderColor = darkMode ? 'rgba(255,255,255,0.20)' : 'rgba(0,0,0,0.16)';
+  const floatingLogButtonTextColor = darkMode ? 'rgba(255,255,255,0.92)' : 'rgba(0,0,0,0.82)';
+  const floatingLogButtonBgColor = darkMode
+    ? `rgba(34, 34, 34, ${Math.max(effectiveOpacity, 0.82)})`
+    : `rgba(255, 255, 255, ${Math.max(effectiveOpacity, 0.9)})`;
+  const floatingLogButtonShadow = darkMode
+    ? '0 8px 22px rgba(0,0,0,0.38)'
+    : '0 8px 20px rgba(0,0,0,0.16)';
+  const isOpaqueUtilityMode = resolvedAppearance.opacity >= 0.999 && resolvedAppearance.blur <= 0;
+  const utilityButtonBgAlpha = darkMode
+    ? Math.max(0.28, Math.min(0.76, effectiveOpacity * 0.72))
+    : Math.max(0.52, Math.min(0.92, effectiveOpacity * 0.9));
+  const utilityButtonBgColor = isOpaqueUtilityMode
+    ? 'transparent'
+    : (darkMode
+      ? `rgba(20, 26, 38, ${utilityButtonBgAlpha})`
+      : `rgba(255, 255, 255, ${utilityButtonBgAlpha})`);
+  const utilityButtonBorderColor = isOpaqueUtilityMode
+    ? (darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(16,24,40,0.10)')
+    : (darkMode
+      ? `rgba(255,255,255,${Math.max(0.08, Math.min(0.18, effectiveOpacity * 0.16))})`
+      : `rgba(16,24,40,${Math.max(0.06, Math.min(0.14, effectiveOpacity * 0.12))})`);
+  const utilityButtonShadow = isOpaqueUtilityMode
+    ? 'none'
+    : (darkMode
+      ? `0 8px 18px rgba(0,0,0,${Math.max(0.10, Math.min(0.22, effectiveOpacity * 0.24))})`
+      : `0 8px 18px rgba(15,23,42,${Math.max(0.04, Math.min(0.12, effectiveOpacity * 0.12))})`);
+  const isSidebarNarrow = sidebarWidth < 360;
+  const isSidebarCompact = sidebarWidth < 320;
+  const isSidebarUltraCompact = sidebarWidth < 260;
+  const utilityButtonStyle = useMemo(() => ({
+    height: Math.max(30, Math.round(32 * effectiveUiScale)),
+    width: '100%',
+    paddingInline: isSidebarCompact ? Math.max(8, Math.round(9 * effectiveUiScale)) : Math.max(10, Math.round(12 * effectiveUiScale)),
+    borderRadius: 10,
+    border: `1px solid ${utilityButtonBorderColor}`,
+    background: utilityButtonBgColor,
+    color: darkMode ? 'rgba(255,255,255,0.94)' : '#162033',
+    boxShadow: utilityButtonShadow,
+    backdropFilter: isOpaqueUtilityMode ? 'none' : effectiveBlurFilter,
+    WebkitBackdropFilter: isOpaqueUtilityMode ? 'none' : effectiveBlurFilter,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: isSidebarCompact ? 4 : 6,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    fontSize: isSidebarCompact ? 13 : 14,
+  }), [effectiveBlurFilter, darkMode, effectiveUiScale, isOpaqueUtilityMode, isSidebarCompact, utilityButtonBgColor, utilityButtonBorderColor, utilityButtonShadow]);
+  const disableLocalBackdropFilter = isMacLikePlatform();
+  const overlayTheme = useMemo(
+    () => buildOverlayWorkbenchTheme(darkMode, { disableBackdropFilter: disableLocalBackdropFilter }),
+    [darkMode, disableLocalBackdropFilter],
+  );
+
+  const sidebarQuickActionBaseStyle = useMemo(() => ({
+    height: Math.max(34, Math.round(36 * effectiveUiScale)),
+    borderRadius: 12,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    paddingInline: Math.max(12, Math.round(14 * effectiveUiScale)),
+    fontWeight: 700,
+    boxShadow: darkMode ? '0 8px 18px rgba(0,0,0,0.16)' : '0 8px 16px rgba(15,23,42,0.08)',
+    backdropFilter: effectiveBlurFilter,
+    WebkitBackdropFilter: effectiveBlurFilter,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  }), [effectiveBlurFilter, darkMode, effectiveUiScale]);
+  const sidebarQueryActionStyle = useMemo(() => ({
+    ...sidebarQuickActionBaseStyle,
+    flex: '1 1 0',
+    border: `1px solid ${darkMode ? 'rgba(255,255,255,0.12)' : 'rgba(16,24,40,0.10)'}`,
+    background: darkMode ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.88)',
+    color: darkMode ? 'rgba(255,255,255,0.92)' : '#162033',
+  }), [darkMode, sidebarQuickActionBaseStyle]);
+  const sidebarCreateConnectionActionStyle = useMemo(() => ({
+    ...sidebarQuickActionBaseStyle,
+    flex: '1 1 0',
+    border: 'none',
+    background: 'linear-gradient(135deg, rgba(34,197,94,0.96) 0%, rgba(22,163,74,0.92) 100%)',
+    color: '#f3fff7',
+  }), [sidebarQuickActionBaseStyle]);
+
+  const utilityModalShellStyle = useMemo(() => ({
+    background: overlayTheme.shellBg,
+    border: overlayTheme.shellBorder,
+    boxShadow: overlayTheme.shellShadow,
+    backdropFilter: overlayTheme.shellBackdropFilter,
+  }), [overlayTheme]);
+  const utilityPanelStyle = useMemo(() => ({
+    padding: 16,
+    borderRadius: 14,
+    border: overlayTheme.sectionBorder,
+    background: overlayTheme.sectionBg,
+  }), [overlayTheme]);
+  const toolCenterModalContentStyle = useMemo<React.CSSProperties>(() => ({
+    ...utilityModalShellStyle,
+    height: 'min(820px, calc(100vh - 64px))',
+    display: 'flex',
+    flexDirection: 'column',
+  }), [utilityModalShellStyle]);
+  const toolCenterModalWorkspaceStyle = useMemo<React.CSSProperties>(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '10px 0 2px',
+    height: '100%',
+    minHeight: 0,
+  }), []);
+  const toolCenterModalSplitStyle = useMemo<React.CSSProperties>(() => ({
+    display: 'grid',
+    gridTemplateColumns: '232px minmax(0, 1fr)',
+    gap: 18,
+    flex: 1,
+    minHeight: 0,
+  }), []);
+  const toolCenterNavPanelStyle = useMemo<React.CSSProperties>(() => ({
+    padding: '4px 12px 4px 0',
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+    borderRight: `1px solid ${overlayTheme.divider}`,
+  }), [overlayTheme.divider]);
+  const toolCenterNavScrollStyle = useMemo<React.CSSProperties>(() => ({
+    display: 'grid',
+    alignContent: 'start',
+    gap: 4,
+    minHeight: 0,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    paddingRight: 8,
+  }), []);
+  const toolCenterContentPanelStyle = useMemo<React.CSSProperties>(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+    minHeight: 0,
+    overflow: 'hidden',
+  }), []);
+  const toolCenterDetailPanelStyle = useMemo<React.CSSProperties>(() => ({
+    ...utilityPanelStyle,
+    flex: 1,
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  }), [utilityPanelStyle]);
+  const toolCenterDetailBodyStyle = useMemo<React.CSSProperties>(() => ({
+    flex: 1,
+    minHeight: 0,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    paddingRight: 6,
+    overscrollBehavior: 'contain',
+  }), []);
+  const toolCenterScrollableListStyle = useMemo<React.CSSProperties>(() => ({
+    flex: 1,
+    minHeight: 0,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    overscrollBehavior: 'contain',
+  }), []);
+  const utilityMutedTextStyle = useMemo(() => ({
+    color: overlayTheme.mutedText,
+    fontSize: 12,
+    lineHeight: 1.6,
+  }), [overlayTheme]);
+  const renderUtilityModalTitle = (
+    icon: React.ReactNode,
+    title: string,
+    description: string,
+  ) => (
+    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, minWidth: 0 }}>
+      <div style={{ width: 36, height: 36, borderRadius: 12, display: 'grid', placeItems: 'center', background: overlayTheme.iconBg, color: overlayTheme.iconColor, flexShrink: 0 }}>
+        {icon}
+      </div>
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontSize: 16, fontWeight: 700, color: overlayTheme.titleText }}>{title}</div>
+        <div style={{ marginTop: 4, color: overlayTheme.mutedText, fontSize: 12, lineHeight: 1.6 }}>{description}</div>
+      </div>
+    </div>
+  );
+  const utilityActionCardStyle = useMemo(() => ({
+    width: '100%',
+    minHeight: 68,
+    borderRadius: 14,
+    border: overlayTheme.sectionBorder,
+    background: overlayTheme.sectionBg,
+    color: overlayTheme.titleText,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: 14,
+    paddingInline: 16,
+    boxShadow: 'none',
+    fontSize: 15,
+    fontWeight: 600,
+  }), [overlayTheme]);
+  const utilityActionHintStyle = useMemo(() => ({
+    fontSize: 12,
+    color: overlayTheme.mutedText,
+    fontWeight: 400,
+    marginTop: 2,
+  }), [overlayTheme]);
+  const toolCenterRowStyle = useMemo(() => ({
+    width: '100%',
+    minHeight: 82,
+    borderRadius: 0,
+    color: overlayTheme.titleText,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 16,
+    paddingInline: 8,
+    boxShadow: 'none',
+    fontSize: 15,
+    fontWeight: 600,
+  }), [overlayTheme]);
+  const toolCenterRowDescriptionStyle = useMemo(() => ({
+    ...utilityActionHintStyle,
+    marginTop: 4,
+    textAlign: 'left' as const,
+    whiteSpace: 'normal' as const,
+    lineHeight: 1.55,
+  }), [utilityActionHintStyle]);
+
+  const sidebarHorizontalPadding = isSidebarCompact ? 8 : 10;
+
+  return {
+    bgContent,
+    bgMain,
+    floatingLogButtonBgColor,
+    floatingLogButtonBorderColor,
+    floatingLogButtonShadow,
+    floatingLogButtonTextColor,
+    isSidebarCompact,
+    isSidebarNarrow,
+    isSidebarUltraCompact,
+    overlayTheme,
+    renderUtilityModalTitle,
+    sidebarCreateConnectionActionStyle,
+    sidebarHorizontalPadding,
+    sidebarQueryActionStyle,
+    toolCenterContentPanelStyle,
+    toolCenterDetailBodyStyle,
+    toolCenterDetailPanelStyle,
+    toolCenterModalContentStyle,
+    toolCenterModalSplitStyle,
+    toolCenterModalWorkspaceStyle,
+    toolCenterNavPanelStyle,
+    toolCenterNavScrollStyle,
+    toolCenterRowDescriptionStyle,
+    toolCenterRowStyle,
+    toolCenterScrollableListStyle,
+    utilityActionCardStyle,
+    utilityActionHintStyle,
+    utilityButtonStyle,
+    utilityModalShellStyle,
+    utilityMutedTextStyle,
+    utilityPanelStyle,
+  };
+};
diff --git a/frontend/src/styles/v2-theme-workbench.css b/frontend/src/styles/v2-theme-workbench.css
new file mode 100644
index 0000000..7d370f1
--- /dev/null
+++ b/frontend/src/styles/v2-theme-workbench.css
@@ -0,0 +1,1869 @@
+/* ─── V2 Query editor ─ */
+body[data-ui-version="v2"] .gn-v2-query-editor {
+  background: var(--gn-bg-app);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-editor-pane {
+  border-bottom: 0.5px solid var(--gn-br-1);
+  background: var(--gn-bg-panel);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-header {
+  min-height: 52px;
+  padding: 10px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 0.5px solid var(--gn-br-1);
+  background: var(--gn-bg-panel);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-title {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-title span,
+body[data-ui-version="v2"] .gn-v2-designer-title span {
+  color: var(--gn-fg-4);
+  font-size: 10.5px;
+  font-weight: 750;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-title strong,
+body[data-ui-version="v2"] .gn-v2-designer-title strong {
+  min-width: 0;
+  color: var(--gn-fg-1);
+  font-family: var(--gn-font-mono);
+  font-size: 15px;
+  font-weight: 750;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-context,
+body[data-ui-version="v2"] .gn-v2-designer-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-context span,
+body[data-ui-version="v2"] .gn-v2-designer-meta span {
+  min-width: 0;
+  max-width: 220px;
+  height: 24px;
+  padding: 0 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 0.5px solid var(--gn-br-1);
+  border-radius: 6px;
+  background: var(--gn-bg-panel-2);
+  color: var(--gn-fg-3);
+  font-family: var(--gn-font-mono);
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar,
+body[data-ui-version="v2"] .gn-v2-designer-toolbar {
+  padding: 8px 12px !important;
+  gap: 6px !important;
+  flex-wrap: wrap;
+  background: var(--gn-bg-panel-2) !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar {
+  min-height: 48px;
+  padding: 8px 12px !important;
+  gap: 6px 10px !important;
+  align-items: center !important;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: var(--gn-bg-panel) !important;
+  border-bottom: 0.5px solid var(--gn-br-1) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-main {
+  display: inline-flex;
+  width: max-content;
+  min-width: 100%;
+  gap: 6px 10px !important;
+  align-items: center !important;
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-selects,
+body[data-ui-version="v2"] .gn-v2-query-toolbar-actions {
+  min-width: 0;
+  gap: 6px !important;
+  flex: 0 0 auto !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-selects {
+  flex-wrap: nowrap;
+  max-width: 760px;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-actions {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-transaction-toolbar {
+  display: inline-flex;
+  max-width: 100%;
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-select {
+  min-width: 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-connection-select {
+  width: 140px !important;
+  flex: 0 1 140px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-database-select {
+  width: 166px !important;
+  flex: 1 1 166px !important;
+  max-width: 220px;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-max-rows-select {
+  width: 132px !important;
+  flex: 0 0 132px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-transaction-mode-select {
+  width: 74px !important;
+  flex: 0 0 74px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-transaction-delay-select {
+  width: 62px !important;
+  flex: 0 0 62px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-select-selector {
+  height: 32px !important;
+  padding: 0 10px !important;
+  border-radius: 9px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-select-selection-item,
+body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-select-selection-placeholder {
+  line-height: 30px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-btn {
+  height: 32px !important;
+  padding: 0 11px !important;
+  border-radius: 9px !important;
+  font-size: 12.5px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-action-group {
+  display: inline-flex !important;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 6px;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-action-pair {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 8px;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-action-group > .ant-btn {
+  flex: 0 0 auto;
+  border-radius: 9px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-action-group > .ant-btn:not(:first-child) {
+  margin-left: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-action-group > .ant-btn::before {
+  display: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 6px;
+  border-color: transparent !important;
+  background: var(--gn-accent-soft) !important;
+  color: var(--gn-accent-2) !important;
+  font-weight: 750 !important;
+  transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:hover,
+body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus,
+body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus-visible,
+body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:active {
+  border-color: rgba(22, 163, 74, 0.18) !important;
+  background: color-mix(in srgb, var(--gn-accent-soft) 80%, rgba(22, 163, 74, 0.28)) !important;
+  color: var(--gn-accent-2) !important;
+  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.12), 0 6px 14px rgba(22, 163, 74, 0.12) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button .gn-v2-toolbar-kbd {
+  margin-left: 0;
+  min-width: 18px;
+  justify-content: center;
+  border: none;
+  background: rgba(22, 163, 74, 0.18);
+  color: var(--gn-accent-2);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:hover .gn-v2-toolbar-kbd,
+body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus .gn-v2-toolbar-kbd,
+body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus-visible .gn-v2-toolbar-kbd,
+body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:active .gn-v2-toolbar-kbd {
+  background: rgba(22, 163, 74, 0.24);
+  color: var(--gn-accent-2);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-icon-action.ant-btn,
+body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-btn-icon-only {
+  width: 34px !important;
+  padding: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-run-action.ant-btn {
+  min-width: 64px;
+  padding: 0 13px !important;
+  font-weight: 650 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-toolbar-ai-action.ant-btn {
+  font-weight: 650 !important;
+}
+
+@media (max-width: 900px) {
+  body[data-ui-version="v2"] .gn-v2-query-toolbar-main {
+    width: max-content;
+    min-width: 100%;
+  }
+
+  body[data-ui-version="v2"] .gn-v2-query-toolbar-selects {
+    max-width: none;
+  }
+
+  body[data-ui-version="v2"] .gn-v2-query-toolbar-actions {
+    justify-content: flex-start;
+  }
+}
+
+body[data-ui-version="v2"] .gn-v2-query-monaco-shell {
+  overflow: hidden;
+  border-top: 0.5px solid var(--gn-br-1);
+  border-bottom: 0.5px solid var(--gn-br-1);
+  background: var(--gn-bg-panel);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-resizer {
+  height: 7px !important;
+  background: var(--gn-bg-panel-2) !important;
+  border-bottom: 0.5px solid var(--gn-br-1);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-resizer:hover {
+  background: var(--gn-bg-hover) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results {
+  background: var(--gn-bg-app);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav {
+  background: var(--gn-bg-panel-2);
+  padding-left: 8px;
+  min-height: 38px;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-extra-content {
+  display: inline-flex;
+  align-items: center;
+  padding-right: 8px;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab {
+  width: auto !important;
+  min-width: 0 !important;
+  max-width: 148px !important;
+  height: 30px !important;
+  min-height: 30px;
+  margin: 4px 6px 4px 0 !important;
+  padding: 0 9px !important;
+  border: 0.5px solid var(--gn-br-1) !important;
+  border-radius: 999px !important;
+  background: color-mix(in srgb, var(--gn-bg-panel) 72%, transparent) !important;
+  color: var(--gn-fg-3) !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 14px;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-nav-list {
+  align-items: center;
+  width: auto;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab-btn {
+  width: auto !important;
+  height: 100%;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 14px !important;
+  line-height: 1 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tab-label {
+  height: 100%;
+  line-height: 1;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tab-text {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab:hover {
+  background: var(--gn-bg-hover) !important;
+  color: var(--gn-fg-1) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active {
+  border-color: color-mix(in srgb, var(--gn-accent) 38%, var(--gn-br-1)) !important;
+  background: color-mix(in srgb, var(--gn-accent) 10%, var(--gn-bg-panel)) !important;
+  color: var(--gn-fg-1) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active::after {
+  display: none;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-results .query-result-tab-count {
+  background: color-mix(in srgb, var(--gn-accent) 12%, var(--gn-bg-active));
+  color: var(--gn-fg-2);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-result-panel-header {
+  background: var(--gn-bg-panel-2);
+  border-bottom-color: var(--gn-br-1);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-result-panel-header .query-result-panel-header-title {
+  color: var(--gn-fg-3);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-empty,
+body[data-ui-version="v2"] .gn-v2-query-success {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gn-fg-4) !important;
+  background: var(--gn-bg-app);
+}
+
+body[data-ui-version="v2"] .gn-v2-query-empty > div,
+body[data-ui-version="v2"] .gn-v2-query-success > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 18px;
+  text-align: center;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-empty strong {
+  color: var(--gn-fg-1);
+  font-size: 13px;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-empty span {
+  color: var(--gn-fg-4);
+  font-size: 12px;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-error {
+  background: var(--gn-bg-panel) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-query-error .custom-scrollbar {
+  border-radius: 8px !important;
+}
+
+/* ─── V2 table designer ─ */
+body[data-ui-version="v2"] .gn-v2-table-designer {
+  padding: 0 !important;
+  background: var(--gn-bg-app);
+  --gn-v2-designer-header-height: 40px;
+  --gn-v2-designer-header-padding: 0 8px;
+  --gn-v2-designer-cell-padding: 3px 8px;
+  --gn-v2-designer-selection-column-width: 44px;
+  --gn-v2-designer-row-selection-min-height: 14px;
+  --gn-v2-designer-content-font-size: 12px;
+}
+
+body[data-ui-version="v2"] .gn-v2-designer-tabs {
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: var(--gn-bg-app) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-designer-tabs > .ant-tabs-nav {
+  padding: 0 10px;
+  background: var(--gn-bg-panel-2);
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs {
+  background: var(--gn-bg-panel) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs > .ant-tabs-nav {
+  padding: 0 12px !important;
+  min-height: 34px;
+  background: var(--gn-bg-panel) !important;
+  border-bottom: 0 !important;
+  box-shadow: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs > .ant-tabs-nav .ant-tabs-nav-list {
+  width: auto !important;
+  min-height: 34px;
+  gap: 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs > .ant-tabs-nav .ant-tabs-tab {
+  height: 34px;
+  min-height: 34px;
+  padding-inline: 12px !important;
+  border-right: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs > .ant-tabs-nav::before {
+  display: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-designer-tabs .ant-tabs-content-holder {
+  padding: 10px;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs .ant-tabs-content-holder {
+  padding: 0 12px 12px !important;
+  border-top: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded {
+  background: var(--gn-bg-panel) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-toolbar {
+  padding: 8px 12px 6px !important;
+  border-left: 0 !important;
+  border-right: 0 !important;
+  background: var(--gn-bg-panel) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs {
+  background: var(--gn-bg-panel) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs > .ant-tabs-nav {
+  padding: 0 12px !important;
+  min-height: 30px;
+  background: var(--gn-bg-panel) !important;
+  border-bottom: 0 !important;
+  box-shadow: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs > .ant-tabs-nav .ant-tabs-nav-list {
+  width: auto !important;
+  min-height: 30px;
+  gap: 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs > .ant-tabs-nav .ant-tabs-tab {
+  height: 30px;
+  min-height: 30px;
+  padding-inline: 10px !important;
+  border-right: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs > .ant-tabs-nav::before {
+  display: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs .ant-tabs-content-holder {
+  padding: 0 12px 12px !important;
+  border-top: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-table-shell,
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tab-content,
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-ddl-shell {
+  border-top: 0 !important;
+  border-left: 0 !important;
+  border-right: 0 !important;
+  border-bottom: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-actionbar {
+  padding-inline: 0 !important;
+  background: transparent !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th,
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-tbody > tr > td {
+  padding: var(--gn-v2-designer-cell-padding) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th {
+  text-align: left !important;
+  font-size: var(--gn-v2-designer-content-font-size);
+  line-height: 1.1;
+  height: var(--gn-v2-designer-header-height);
+  min-height: var(--gn-v2-designer-header-height);
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+  vertical-align: middle !important;
+  white-space: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th .ant-table-column-title {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  min-height: var(--gn-v2-designer-header-height);
+  text-align: left !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th .ant-table-column-sorters {
+  min-height: var(--gn-v2-designer-header-height) !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th.ant-table-selection-column,
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-tbody > tr > td.ant-table-selection-column,
+body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-select-column {
+  width: var(--gn-v2-designer-selection-column-width) !important;
+  min-width: var(--gn-v2-designer-selection-column-width) !important;
+  max-width: var(--gn-v2-designer-selection-column-width) !important;
+  padding-inline: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th.ant-table-selection-column .ant-table-selection,
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-tbody > tr > td.ant-table-selection-column .ant-table-selection,
+body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-select-column .table-designer-select-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: var(--gn-v2-designer-row-selection-min-height);
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th:first-child,
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-tbody > tr > td:first-child {
+  padding-inline: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-tbody > tr > td {
+  vertical-align: middle !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-cell-field .ant-input,
+body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-cell-field .ant-select-selection-item,
+body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-cell-field input {
+  font-size: var(--gn-v2-designer-content-font-size) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-cell-check .ant-checkbox {
+  transform: scale(0.92);
+}
+
+body[data-ui-version="v2"] .gn-v2-designer-table-shell,
+body[data-ui-version="v2"] .gn-v2-designer-tab-content,
+body[data-ui-version="v2"] .gn-v2-designer-ddl-shell {
+  border: 0.5px solid var(--gn-br-1) !important;
+  border-radius: 8px !important;
+  background: var(--gn-bg-panel) !important;
+  overflow: hidden;
+}
+
+body[data-ui-version="v2"] .gn-v2-designer-actionbar {
+  min-height: 36px;
+  padding: 8px;
+  align-items: center;
+  border-bottom: 0.5px solid var(--gn-br-1);
+  background: var(--gn-bg-panel-2);
+}
+
+body[data-ui-version="v2"] .gn-v2-designer-section-note {
+  padding: 0 2px;
+  color: var(--gn-fg-4) !important;
+  font-family: var(--gn-font-mono);
+  font-size: 11.5px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-designer-index-table .ant-tag {
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  line-height: 18px !important;
+  padding: 1px 7px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-wrapper,
+body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-container {
+  border-radius: 0 !important;
+}
+
+/* ─── V2 Redis workbench ─ */
+body[data-ui-version="v2"] .gn-v2-redis-workbench {
+  gap: 10px !important;
+  padding: 10px !important;
+  background: var(--gn-bg-app) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-sidebar {
+  min-width: 320px !important;
+  gap: 10px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-header,
+body[data-ui-version="v2"] .gn-v2-redis-tree-card,
+body[data-ui-version="v2"] .gn-v2-redis-value-header,
+body[data-ui-version="v2"] .gn-v2-redis-value-card,
+body[data-ui-version="v2"] .gn-v2-redis-empty-value {
+  border-radius: 8px !important;
+  border: 0.5px solid var(--gn-br-1) !important;
+  background: var(--gn-bg-panel) !important;
+  box-shadow: var(--gn-shadow-card) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-header {
+  padding: 12px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-toolbar {
+  align-items: center;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-tree-card {
+  padding: 8px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-tree-shell {
+  border-radius: 7px !important;
+  border: 0.5px solid var(--gn-br-1) !important;
+  background: var(--gn-bg-panel-2) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-workbench .ant-tree-checkbox {
+  margin-inline-end: 5px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-value-pane {
+  min-width: 360px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-value-layout {
+  gap: 10px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-value-header {
+  padding: 14px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-value-header strong {
+  font-family: var(--gn-font-mono);
+  font-size: 20px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-value-actions,
+body[data-ui-version="v2"] .gn-v2-redis-view-mode,
+body[data-ui-version="v2"] .gn-v2-redis-value-subtoolbar,
+body[data-ui-version="v2"] .gn-v2-redis-value-actionbar {
+  border-radius: 7px !important;
+  border: 0.5px solid var(--gn-br-1) !important;
+  background: var(--gn-bg-panel-2) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-value-subtoolbar {
+  min-height: 30px;
+  border-width: 0 0 0.5px !important;
+  border-radius: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-value-actionbar {
+  padding: 8px !important;
+  margin-bottom: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-data-section .ant-table-wrapper {
+  flex: 1;
+  min-height: 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-redis-context-menu {
+  width: 208px !important;
+  min-width: 188px !important;
+  padding: 6px !important;
+}
+
+/* ─── V2 Table Overview ─ */
+body[data-ui-version="v2"] .gn-v2-table-overview {
+  background: var(--gn-bg-app) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-overview-header {
+  min-height: 54px;
+  padding: 12px 16px !important;
+  background: var(--gn-bg-panel) !important;
+  border-bottom: 0.5px solid var(--gn-br-1);
+}
+
+body[data-ui-version="v2"] .gn-v2-table-overview-icon {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  color: #fff;
+  background: linear-gradient(135deg, var(--gn-accent) 0%, var(--gn-accent-2) 100%);
+  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.3);
+}
+
+body[data-ui-version="v2"] .gn-v2-table-overview-title {
+  color: var(--gn-fg-1) !important;
+  font-family: var(--gn-font-sans);
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  letter-spacing: 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-overview-summary {
+  color: var(--gn-fg-4) !important;
+  font-family: var(--gn-font-sans);
+  font-weight: 500;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-overview-summary strong {
+  color: var(--gn-fg-2);
+  font-family: var(--gn-font-mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-overview-content {
+  padding: 14px 16px 20px !important;
+  background: var(--gn-bg-app);
+}
+
+body[data-ui-version="v2"] .gn-v2-table-overview-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-overview-section-title {
+  color: var(--gn-fg-4) !important;
+  font-family: var(--gn-font-mono);
+  font-size: var(--gn-font-size-xs, 10px) !important;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-overview-section-title span:last-child {
+  min-width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--gn-bg-active);
+  color: var(--gn-fg-3);
+  font-size: var(--gn-font-size-xs, 10px);
+  font-weight: 700;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-card-grid {
+  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important;
+  gap: 10px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-card,
+body[data-ui-version="v2"] .gn-v2-table-row {
+  border: 0.5px solid var(--gn-br-2) !important;
+  border-radius: 8px !important;
+  background: var(--gn-bg-panel) !important;
+  box-shadow: var(--gn-shadow-card);
+  transition: background 0.08s, border-color 0.08s, box-shadow 0.08s;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-card:hover,
+body[data-ui-version="v2"] .gn-v2-table-row:hover {
+  background: var(--gn-bg-hover) !important;
+  border-color: color-mix(in srgb, var(--gn-accent) 45%, var(--gn-br-2)) !important;
+  box-shadow: var(--gn-shadow-md);
+}
+
+body[data-ui-version="v2"] .gn-v2-table-card-name span {
+  font-family: var(--gn-font-mono);
+}
+
+body[data-ui-version="v2"] .gn-v2-table-card-meta {
+  font-family: var(--gn-font-mono);
+  font-size: 11px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-size-bar {
+  height: 2px;
+  margin-top: 10px;
+  border-radius: 1px;
+  background: var(--gn-bg-active);
+  overflow: hidden;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-size-bar span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--gn-accent) 0%, var(--gn-info) 100%);
+}
+
+body[data-ui-version="v2"] .gn-v2-table-row-list {
+  gap: 0 !important;
+  background: var(--gn-bg-panel);
+  border: 0.5px solid var(--gn-br-1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-row {
+  border-width: 0 0 0.5px !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-table-row:last-child {
+  border-bottom: 0 !important;
+}
+
+/* ─── V2 AI side panel ─ */
+body[data-ui-version="v2"] .gn-v2-ai-panel {
+  width: 340px;
+  background: var(--gn-bg-panel) !important;
+  border-left: 0.5px solid var(--gn-br-1) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-header {
+  min-height: 78px;
+  padding: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: stretch !important;
+  justify-content: flex-start !important;
+  gap: 0 !important;
+  background: var(--gn-bg-panel-2) !important;
+  border-bottom: 0.5px solid var(--gn-br-1) !important;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-header-top,
+body[data-ui-version="v2"] .gn-v2-ai-brand,
+body[data-ui-version="v2"] .gn-v2-ai-header-actions,
+body[data-ui-version="v2"] .gn-v2-ai-mode-tabs,
+body[data-ui-version="v2"] .gn-v2-ai-session-row,
+body[data-ui-version="v2"] .gn-v2-ai-suggestion-divider,
+body[data-ui-version="v2"] .gn-v2-ai-suggestion-list button,
+body[data-ui-version="v2"] .gn-v2-ai-context-row,
+body[data-ui-version="v2"] .gn-v2-ai-context-toggle,
+body[data-ui-version="v2"] .gn-v2-ai-context-add,
+body[data-ui-version="v2"] .gn-v2-ai-input-actions,
+body[data-ui-version="v2"] .gn-v2-ai-token-meter,
+body[data-ui-version="v2"] .gn-v2-ai-token-bar {
+  display: flex;
+  align-items: center;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-header-top {
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  width: 100%;
+  flex: 0 0 auto;
+  height: 44px;
+  padding: 0 8px 0 12px;
+  border-bottom: 0.5px solid var(--gn-br-1);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-brand {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-header-actions {
+  gap: 1px;
+  flex: 0 0 auto;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-header-actions .ant-btn {
+  width: 24px !important;
+  height: 24px !important;
+  padding: 0 !important;
+  border-color: transparent !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-logo {
+  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
+  color: #fff !important;
+  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.3);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-title {
+  color: var(--gn-fg-1) !important;
+  font-size: 13px !important;
+  font-weight: 750 !important;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-title-stack {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-title-stack small {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--gn-fg-5);
+  font-size: 10.5px;
+  font-family: var(--gn-font-mono);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-provider-badge {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 17px;
+  padding: 0 5px;
+  border-radius: 3px;
+  background: var(--gn-accent-soft);
+  color: var(--gn-accent-2);
+  font-size: 9.5px;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-mode-tabs {
+  gap: 2px;
+  width: 100%;
+  flex: 0 0 auto;
+  padding: 8px 10px 4px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-mode-tabs button {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 26px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--gn-fg-4);
+  font-size: 11.5px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-mode-tabs button span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-mode-tabs button.is-active {
+  background: var(--gn-bg-active);
+  color: var(--gn-fg-1);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-messages {
+  padding: 8px 14px 12px;
+  gap: 10px;
+  background: var(--gn-bg-panel);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-welcome {
+  flex: 0 0 auto !important;
+  align-items: stretch !important;
+  justify-content: flex-start;
+  padding: 16px 0 4px !important;
+  gap: 14px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-welcome-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-welcome-title > span {
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  background: var(--gn-info-soft);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--gn-info-soft);
+  color: var(--gn-info);
+  font-family: var(--gn-font-mono);
+  font-size: 11px;
+  font-weight: 650;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-quick-icon {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-quick-card.tone-info .gn-v2-ai-quick-icon {
+  background: var(--gn-info-soft);
+  color: var(--gn-info);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-quick-card.tone-success .gn-v2-ai-quick-icon {
+  background: var(--gn-accent-soft);
+  color: var(--gn-accent-2);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-quick-card.tone-warn .gn-v2-ai-quick-icon {
+  background: var(--gn-warn-soft);
+  color: var(--gn-warn);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-quick-card.tone-purple .gn-v2-ai-quick-icon {
+  background: rgba(168,85,247,0.12);
+  color: #9333ea;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .quick-actions {
+  display: grid !important;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px !important;
+  justify-content: stretch !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .quick-action-btn {
+  min-height: 66px;
+  padding: 10px 11px !important;
+  display: flex !important;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 4px;
+  border-radius: 8px !important;
+  background: var(--gn-bg-panel-2) !important;
+  color: var(--gn-fg-2) !important;
+  border-color: var(--gn-br-2) !important;
+  text-align: left !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .quick-action-btn:hover {
+  background: var(--gn-bg-hover) !important;
+  border-color: var(--gn-br-3) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .quick-action-btn strong {
+  color: var(--gn-fg-1);
+  font-size: 12.5px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .quick-action-btn span {
+  color: var(--gn-fg-4);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-suggestion-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-suggestion-divider {
+  gap: 8px;
+  padding: 2px 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-suggestion-divider span {
+  height: 1px;
+  flex: 1;
+  background: var(--gn-br-1);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-suggestion-divider small {
+  color: var(--gn-fg-5);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-suggestion-list button {
+  width: 100%;
+  gap: 8px;
+  min-height: 31px;
+  padding: 7px 10px;
+  border: 0.5px solid var(--gn-br-1);
+  border-radius: 7px;
+  background: transparent;
+  color: var(--gn-fg-2);
+  text-align: left;
+  font-size: 12px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-suggestion-list button .anticon {
+  color: var(--gn-info);
+  flex: 0 0 auto;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-insights-list,
+body[data-ui-version="v2"] .gn-v2-ai-history-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 8px 2px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-insight-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  padding: 10px;
+  border: 0.5px solid var(--gn-br-1);
+  border-radius: 8px;
+  background: var(--gn-bg-panel-2);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-insight-card.tone-info .gn-v2-ai-insight-icon {
+  background: var(--gn-info-soft);
+  color: var(--gn-info);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-insight-card.tone-accent .gn-v2-ai-insight-icon {
+  background: var(--gn-accent-soft);
+  color: var(--gn-accent-2);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-insight-card.tone-warn .gn-v2-ai-insight-icon {
+  background: var(--gn-warn-soft);
+  color: var(--gn-warn);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-insight-icon {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-insight-card strong {
+  display: block;
+  color: var(--gn-fg-1);
+  font-size: 12.5px;
+  font-weight: 750;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-insight-card p {
+  margin: 4px 0 0;
+  color: var(--gn-fg-4);
+  font-size: 11.5px;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-history-card {
+  width: 100%;
+  padding: 9px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 5px;
+  border: 0.5px solid var(--gn-br-1);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--gn-fg-2);
+  text-align: left;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-history-card.is-active {
+  background: var(--gn-bg-selected);
+  border-color: color-mix(in srgb, var(--gn-accent) 36%, var(--gn-br-1));
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-history-card span {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 7px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-history-card span .anticon {
+  color: var(--gn-info);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-history-card strong {
+  overflow: hidden;
+  color: var(--gn-fg-1);
+  font-size: 12.5px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-history-card small {
+  padding-left: 21px;
+  color: var(--gn-fg-5);
+  font-family: var(--gn-font-mono);
+  font-size: 10.5px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-empty-note {
+  padding: 32px 0;
+  color: var(--gn-fg-5);
+  font-size: 12px;
+  text-align: center;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-input-area {
+  padding: 10px 12px 12px !important;
+  border-top: 0.5px solid var(--gn-br-1) !important;
+  background: var(--gn-bg-panel-2);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-input-wrapper {
+  border-radius: 10px !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  gap: 4px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-row {
+  justify-content: space-between;
+  gap: 6px;
+  min-height: 22px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-toggle,
+body[data-ui-version="v2"] .gn-v2-ai-context-add {
+  height: 22px;
+  border-radius: 6px;
+  font-size: 11.5px;
+  font-weight: 700;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-toggle {
+  gap: 5px;
+  padding: 0 8px;
+  border: 0.5px solid rgba(56,189,248,0.3);
+  background: var(--gn-info-soft);
+  color: var(--gn-info);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-toggle strong {
+  min-width: 15px;
+  height: 15px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--gn-info);
+  color: #fff;
+  font-family: var(--gn-font-mono);
+  font-size: 10px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-toggle .anticon-down {
+  transition: transform 0.12s ease;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-toggle.is-expanded .anticon-down {
+  transform: rotate(180deg);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-add {
+  gap: 4px;
+  padding: 0 8px;
+  border: 0.5px dashed var(--gn-br-3);
+  background: transparent;
+  color: var(--gn-fg-4);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  border: 0.5px solid var(--gn-br-1);
+  border-radius: 8px;
+  background: var(--gn-bg-panel-2);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-detail-title {
+  padding: 0 4px;
+  color: var(--gn-fg-4);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-table-chip {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+  border: 0.5px solid var(--gn-br-1) !important;
+  border-radius: 6px !important;
+  background: var(--gn-bg-panel) !important;
+  color: var(--gn-fg-1) !important;
+  font-family: var(--gn-font-mono);
+  font-size: 11.5px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-attachment-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-attachment-thumb {
+  position: relative;
+  width: 54px;
+  height: 54px;
+  overflow: hidden;
+  border: 0.5px solid var(--gn-br-2);
+  border-radius: 7px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-attachment-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-attachment-thumb button {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0,0,0,0.55);
+  color: #fff;
+  font-size: 10px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-attachment-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: min(100%, 280px);
+  min-height: 28px;
+  padding: 4px 8px;
+  border: 0.5px solid var(--gn-br-2);
+  border-radius: 8px;
+  background: var(--gn-bg-panel);
+  color: var(--gn-fg-1);
+  font-size: 11.5px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-attachment-file.has-warning {
+  border-color: rgba(217, 119, 6, 0.45);
+  background: rgba(217, 119, 6, 0.08);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-attachment-file-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-attachment-file-meta {
+  color: var(--gn-fg-3);
+  flex-shrink: 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-attachment-file button {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--gn-bg-subtle);
+  color: var(--gn-fg-3);
+  line-height: 1;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-input-box {
+  min-height: 68px;
+  padding: 0;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-input-surface {
+  min-height: 68px;
+  padding: 6px 6px 6px 10px;
+  border: 0.5px solid var(--gn-br-2) !important;
+  border-radius: 10px !important;
+  background: var(--gn-bg-input) !important;
+  box-shadow: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-input-box textarea {
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  font-size: 12.5px !important;
+  line-height: 1.55 !important;
+  padding: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-input-box textarea.ant-input:focus,
+body[data-ui-version="v2"] .gn-v2-ai-input-box textarea.ant-input:focus-visible {
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-slash-menu {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  max-height: 220px;
+  padding: 4px;
+  margin-bottom: 4px;
+  overflow-y: auto;
+  border-radius: 8px;
+  box-shadow: var(--gn-shadow-lg);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-input-actions {
+  justify-content: flex-end;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-input-actions .ant-btn {
+  width: 24px !important;
+  height: 24px !important;
+  padding: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-model-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding-top: 0;
+  white-space: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-model-spacer {
+  flex: 1 1 auto;
+  min-width: 4px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-chip,
+body[data-ui-version="v2"] .gn-v2-ai-token-meter {
+  height: 20px;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px;
+  border-radius: 4px !important;
+  border: 0.5px solid var(--gn-br-1) !important;
+  background: var(--gn-bg-active) !important;
+  color: var(--gn-fg-4) !important;
+  font-family: var(--gn-font-mono);
+  font-size: 10.5px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-chip {
+  flex: 1 1 auto;
+  max-width: 180px;
+  overflow: hidden;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-chip > span:last-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-context-live-dot {
+  width: 5px;
+  height: 5px;
+  flex: 0 0 5px;
+  border-radius: 50%;
+  background: var(--gn-accent);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-model-select {
+  width: 132px !important;
+  height: 26px !important;
+  flex: 0 0 132px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-selector {
+  display: flex !important;
+  align-items: center !important;
+  height: 26px !important;
+  min-height: 26px !important;
+  padding: 0 28px 0 10px !important;
+  border: 0.5px solid var(--gn-br-2) !important;
+  border-radius: 7px !important;
+  background: var(--gn-bg-panel) !important;
+  box-shadow: none !important;
+  font-family: var(--gn-font-mono);
+  font-size: 12px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-model-select.ant-select-focused .ant-select-selector,
+body[data-ui-version="v2"] .gn-v2-ai-model-select:hover .ant-select-selector {
+  border-color: var(--gn-info) !important;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-selection-search {
+  left: 10px !important;
+  right: 28px !important;
+  inset-inline-start: 10px !important;
+  inset-inline-end: 28px !important;
+  height: 24px !important;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-selection-search-input {
+  height: 24px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: var(--gn-fg-2) !important;
+  font-family: var(--gn-font-mono) !important;
+  font-size: 12px !important;
+  line-height: 24px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-selection-item,
+body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-selection-placeholder {
+  display: flex !important;
+  align-items: center !important;
+  height: 24px !important;
+  line-height: 24px !important;
+  padding-inline-end: 0 !important;
+  background: transparent !important;
+  color: var(--gn-fg-2) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-arrow {
+  inset-inline-end: 9px !important;
+  color: var(--gn-fg-4) !important;
+  font-size: 11px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-token-meter {
+  flex: 0 0 auto;
+  gap: 5px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-token-meter.is-warn {
+  border-color: color-mix(in srgb, var(--gn-warn) 35%, transparent) !important;
+  color: var(--gn-warn) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-token-bar {
+  width: 32px;
+  height: 4px;
+  overflow: hidden;
+  border-radius: 2px;
+  background: var(--gn-bg-active);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-token-bar span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--gn-info);
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-send-btn {
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 7px !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: 0 !important;
+  border: 0.5px solid var(--gn-info) !important;
+  background: var(--gn-info) !important;
+  background-color: var(--gn-info) !important;
+  color: #fff !important;
+  opacity: 1 !important;
+  cursor: pointer;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-send-btn .anticon,
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-send-btn svg {
+  color: currentColor !important;
+  fill: currentColor !important;
+  font-size: 13px;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-send-btn:disabled {
+  border-color: var(--gn-br-1) !important;
+  background: var(--gn-bg-active) !important;
+  background-color: var(--gn-bg-active) !important;
+  color: var(--gn-fg-5) !important;
+  opacity: 1 !important;
+  cursor: not-allowed;
+}
+
+body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-stop-btn {
+  border-color: rgba(220,38,38,0.28) !important;
+  background: rgba(220,38,38,0.12) !important;
+  background-color: rgba(220,38,38,0.12) !important;
+  color: var(--gn-danger) !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find {
+  display: inline-flex !important;
+  align-items: center !important;
+  height: 28px !important;
+  min-height: 28px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-row {
+  display: grid !important;
+  grid-template-columns: 180px 28px !important;
+  align-items: stretch !important;
+  column-gap: 4px !important;
+  height: 28px !important;
+  min-height: 28px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-field,
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-autocomplete,
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-autocomplete .ant-select,
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-field .ant-input-affix-wrapper {
+  width: 180px !important;
+  min-width: 180px !important;
+  height: 28px !important;
+  min-height: 28px !important;
+  box-sizing: border-box !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-field,
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-autocomplete,
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-autocomplete .ant-select {
+  display: flex !important;
+  align-items: stretch !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-field .ant-input-affix-wrapper {
+  display: flex !important;
+  align-items: center !important;
+  line-height: 28px !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn {
+  width: 28px !important;
+  min-width: 28px !important;
+  max-width: 28px !important;
+  height: 28px !important;
+  min-height: 28px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  align-self: stretch !important;
+  justify-self: stretch !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  line-height: 1 !important;
+  vertical-align: top !important;
+  box-sizing: border-box !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn > span,
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn .ant-btn-icon,
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn .anticon {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 100% !important;
+  height: 100% !important;
+  line-height: 1 !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn .anticon svg {
+  display: block !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn:focus,
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn:focus-visible,
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn:active {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn::after {
+  display: none !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find {
+  gap: 2px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-prefix,
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-suffix {
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-prefix {
+  margin-inline-end: 6px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input,
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input::placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find {
+  max-width: 214px !important;
+  overflow: visible !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-row {
+  display: grid !important;
+  grid-template-columns: 160px 26px 26px !important;
+  column-gap: 2px !important;
+  align-items: stretch !important;
+  height: 26px !important;
+  min-height: 26px !important;
+  flex: 0 0 auto !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-input,
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-input.ant-input-affix-wrapper {
+  width: 160px !important;
+  min-width: 160px !important;
+  max-width: 160px !important;
+  height: 26px !important;
+  min-height: 26px !important;
+  box-sizing: border-box !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-input.ant-input-affix-wrapper {
+  display: flex !important;
+  align-items: center !important;
+  padding-inline: 8px !important;
+  line-height: 26px !important;
+}
+
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-prev.ant-btn,
+body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-next.ant-btn {
+  width: 26px !important;
+  min-width: 26px !important;
+  max-width: 26px !important;
+  height: 26px !important;
+  min-height: 26px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  align-self: stretch !important;
+  justify-self: stretch !important;
+}
diff --git a/frontend/src/test/readV2ThemeCss.ts b/frontend/src/test/readV2ThemeCss.ts
new file mode 100644
index 0000000..76690d8
--- /dev/null
+++ b/frontend/src/test/readV2ThemeCss.ts
@@ -0,0 +1,6 @@
+import { readFileSync } from 'node:fs';
+
+export const readV2ThemeCss = (): string => [
+  readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8'),
+  readFileSync(new URL('../styles/v2-theme-workbench.css', import.meta.url), 'utf8'),
+].join('\n');
diff --git a/frontend/src/v2-theme.css b/frontend/src/v2-theme.css
index 4600679..837f951 100644
--- a/frontend/src/v2-theme.css
+++ b/frontend/src/v2-theme.css
@@ -16,7 +16,7 @@
         tree, tabs, buttons, tables, inputs, dropdowns, modals.
      3. Keep specificity tight to the v2 scope so legacy is untouched.
 
-   File is self-contained — safe to import once at app entry.
+   Workbench-specific rules are imported after this file at app entry.
    ────────────────────────────────────────────────────────────────────── */
 
 /* ─── Light tokens ─────────────────────────────────────── */
@@ -4702,1873 +4702,3 @@ body[data-ui-version="v2"] .gn-v2-context-menu-kbd {
     transform: translateY(0) scale(1);
   }
 }
-
-/* ─── V2 Query editor ─ */
-body[data-ui-version="v2"] .gn-v2-query-editor {
-  background: var(--gn-bg-app);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-editor-pane {
-  border-bottom: 0.5px solid var(--gn-br-1);
-  background: var(--gn-bg-panel);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-header {
-  min-height: 52px;
-  padding: 10px 14px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  border-bottom: 0.5px solid var(--gn-br-1);
-  background: var(--gn-bg-panel);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-title {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-title span,
-body[data-ui-version="v2"] .gn-v2-designer-title span {
-  color: var(--gn-fg-4);
-  font-size: 10.5px;
-  font-weight: 750;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-title strong,
-body[data-ui-version="v2"] .gn-v2-designer-title strong {
-  min-width: 0;
-  color: var(--gn-fg-1);
-  font-family: var(--gn-font-mono);
-  font-size: 15px;
-  font-weight: 750;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-context,
-body[data-ui-version="v2"] .gn-v2-designer-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  min-width: 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-context span,
-body[data-ui-version="v2"] .gn-v2-designer-meta span {
-  min-width: 0;
-  max-width: 220px;
-  height: 24px;
-  padding: 0 8px;
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  border: 0.5px solid var(--gn-br-1);
-  border-radius: 6px;
-  background: var(--gn-bg-panel-2);
-  color: var(--gn-fg-3);
-  font-family: var(--gn-font-mono);
-  font-size: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar,
-body[data-ui-version="v2"] .gn-v2-designer-toolbar {
-  padding: 8px 12px !important;
-  gap: 6px !important;
-  flex-wrap: wrap;
-  background: var(--gn-bg-panel-2) !important;
-  border: 0 !important;
-  border-radius: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar {
-  min-height: 48px;
-  padding: 8px 12px !important;
-  gap: 6px 10px !important;
-  align-items: center !important;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  background: var(--gn-bg-panel) !important;
-  border-bottom: 0.5px solid var(--gn-br-1) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-main {
-  display: inline-flex;
-  width: max-content;
-  min-width: 100%;
-  gap: 6px 10px !important;
-  align-items: center !important;
-  flex: 0 0 auto;
-  flex-wrap: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-selects,
-body[data-ui-version="v2"] .gn-v2-query-toolbar-actions {
-  min-width: 0;
-  gap: 6px !important;
-  flex: 0 0 auto !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-selects {
-  flex-wrap: nowrap;
-  max-width: 760px;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-actions {
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-transaction-toolbar {
-  display: inline-flex;
-  max-width: 100%;
-  flex: 0 0 auto;
-  flex-wrap: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-select {
-  min-width: 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-connection-select {
-  width: 140px !important;
-  flex: 0 1 140px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-database-select {
-  width: 166px !important;
-  flex: 1 1 166px !important;
-  max-width: 220px;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-max-rows-select {
-  width: 132px !important;
-  flex: 0 0 132px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-transaction-mode-select {
-  width: 74px !important;
-  flex: 0 0 74px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-transaction-delay-select {
-  width: 62px !important;
-  flex: 0 0 62px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-select-selector {
-  height: 32px !important;
-  padding: 0 10px !important;
-  border-radius: 9px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-select-selection-item,
-body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-select-selection-placeholder {
-  line-height: 30px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-btn {
-  height: 32px !important;
-  padding: 0 11px !important;
-  border-radius: 9px !important;
-  font-size: 12.5px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-action-group {
-  display: inline-flex !important;
-  align-items: center;
-  flex: 0 0 auto;
-  gap: 6px;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-action-pair {
-  display: inline-flex;
-  align-items: center;
-  flex: 0 0 auto;
-  gap: 8px;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-action-group > .ant-btn {
-  flex: 0 0 auto;
-  border-radius: 9px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-action-group > .ant-btn:not(:first-child) {
-  margin-left: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-action-group > .ant-btn::before {
-  display: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button {
-  display: inline-flex !important;
-  align-items: center;
-  gap: 6px;
-  border-color: transparent !important;
-  background: var(--gn-accent-soft) !important;
-  color: var(--gn-accent-2) !important;
-  font-weight: 750 !important;
-  transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:hover,
-body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus,
-body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus-visible,
-body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:active {
-  border-color: rgba(22, 163, 74, 0.18) !important;
-  background: color-mix(in srgb, var(--gn-accent-soft) 80%, rgba(22, 163, 74, 0.28)) !important;
-  color: var(--gn-accent-2) !important;
-  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.12), 0 6px 14px rgba(22, 163, 74, 0.12) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button .gn-v2-toolbar-kbd {
-  margin-left: 0;
-  min-width: 18px;
-  justify-content: center;
-  border: none;
-  background: rgba(22, 163, 74, 0.18);
-  color: var(--gn-accent-2);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:hover .gn-v2-toolbar-kbd,
-body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus .gn-v2-toolbar-kbd,
-body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus-visible .gn-v2-toolbar-kbd,
-body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:active .gn-v2-toolbar-kbd {
-  background: rgba(22, 163, 74, 0.24);
-  color: var(--gn-accent-2);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-icon-action.ant-btn,
-body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-btn-icon-only {
-  width: 34px !important;
-  padding: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-run-action.ant-btn {
-  min-width: 64px;
-  padding: 0 13px !important;
-  font-weight: 650 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-toolbar-ai-action.ant-btn {
-  font-weight: 650 !important;
-}
-
-@media (max-width: 900px) {
-  body[data-ui-version="v2"] .gn-v2-query-toolbar-main {
-    width: max-content;
-    min-width: 100%;
-  }
-
-  body[data-ui-version="v2"] .gn-v2-query-toolbar-selects {
-    max-width: none;
-  }
-
-  body[data-ui-version="v2"] .gn-v2-query-toolbar-actions {
-    justify-content: flex-start;
-  }
-}
-
-body[data-ui-version="v2"] .gn-v2-query-monaco-shell {
-  overflow: hidden;
-  border-top: 0.5px solid var(--gn-br-1);
-  border-bottom: 0.5px solid var(--gn-br-1);
-  background: var(--gn-bg-panel);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-resizer {
-  height: 7px !important;
-  background: var(--gn-bg-panel-2) !important;
-  border-bottom: 0.5px solid var(--gn-br-1);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-resizer:hover {
-  background: var(--gn-bg-hover) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results {
-  background: var(--gn-bg-app);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav {
-  background: var(--gn-bg-panel-2);
-  padding-left: 8px;
-  min-height: 38px;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-extra-content {
-  display: inline-flex;
-  align-items: center;
-  padding-right: 8px;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab {
-  width: auto !important;
-  min-width: 0 !important;
-  max-width: 148px !important;
-  height: 30px !important;
-  min-height: 30px;
-  margin: 4px 6px 4px 0 !important;
-  padding: 0 9px !important;
-  border: 0.5px solid var(--gn-br-1) !important;
-  border-radius: 999px !important;
-  background: color-mix(in srgb, var(--gn-bg-panel) 72%, transparent) !important;
-  color: var(--gn-fg-3) !important;
-  align-items: center !important;
-  justify-content: center !important;
-  font-size: 14px;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-nav-list {
-  align-items: center;
-  width: auto;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab-btn {
-  width: auto !important;
-  height: 100%;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  font-size: 14px !important;
-  line-height: 1 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tab-label {
-  height: 100%;
-  line-height: 1;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tab-text {
-  font-size: 14px;
-  font-weight: 700;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab:hover {
-  background: var(--gn-bg-hover) !important;
-  color: var(--gn-fg-1) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active {
-  border-color: color-mix(in srgb, var(--gn-accent) 38%, var(--gn-br-1)) !important;
-  background: color-mix(in srgb, var(--gn-accent) 10%, var(--gn-bg-panel)) !important;
-  color: var(--gn-fg-1) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tabs > .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active::after {
-  display: none;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-results .query-result-tab-count {
-  background: color-mix(in srgb, var(--gn-accent) 12%, var(--gn-bg-active));
-  color: var(--gn-fg-2);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-result-panel-header {
-  background: var(--gn-bg-panel-2);
-  border-bottom-color: var(--gn-br-1);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-result-panel-header .query-result-panel-header-title {
-  color: var(--gn-fg-3);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-empty,
-body[data-ui-version="v2"] .gn-v2-query-success {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--gn-fg-4) !important;
-  background: var(--gn-bg-app);
-}
-
-body[data-ui-version="v2"] .gn-v2-query-empty > div,
-body[data-ui-version="v2"] .gn-v2-query-success > div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 18px;
-  text-align: center;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-empty strong {
-  color: var(--gn-fg-1);
-  font-size: 13px;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-empty span {
-  color: var(--gn-fg-4);
-  font-size: 12px;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-error {
-  background: var(--gn-bg-panel) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-query-error .custom-scrollbar {
-  border-radius: 8px !important;
-}
-
-/* ─── V2 table designer ─ */
-body[data-ui-version="v2"] .gn-v2-table-designer {
-  padding: 0 !important;
-  background: var(--gn-bg-app);
-  --gn-v2-designer-header-height: 40px;
-  --gn-v2-designer-header-padding: 0 8px;
-  --gn-v2-designer-cell-padding: 3px 8px;
-  --gn-v2-designer-selection-column-width: 44px;
-  --gn-v2-designer-row-selection-min-height: 14px;
-  --gn-v2-designer-content-font-size: 12px;
-}
-
-body[data-ui-version="v2"] .gn-v2-designer-tabs {
-  padding: 0 !important;
-  border: 0 !important;
-  border-radius: 0 !important;
-  background: var(--gn-bg-app) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-designer-tabs > .ant-tabs-nav {
-  padding: 0 10px;
-  background: var(--gn-bg-panel-2);
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs {
-  background: var(--gn-bg-panel) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs > .ant-tabs-nav {
-  padding: 0 12px !important;
-  min-height: 34px;
-  background: var(--gn-bg-panel) !important;
-  border-bottom: 0 !important;
-  box-shadow: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs > .ant-tabs-nav .ant-tabs-nav-list {
-  width: auto !important;
-  min-height: 34px;
-  gap: 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs > .ant-tabs-nav .ant-tabs-tab {
-  height: 34px;
-  min-height: 34px;
-  padding-inline: 12px !important;
-  border-right: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs > .ant-tabs-nav::before {
-  display: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-designer-tabs .ant-tabs-content-holder {
-  padding: 10px;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .gn-v2-designer-tabs .ant-tabs-content-holder {
-  padding: 0 12px 12px !important;
-  border-top: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded {
-  background: var(--gn-bg-panel) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-toolbar {
-  padding: 8px 12px 6px !important;
-  border-left: 0 !important;
-  border-right: 0 !important;
-  background: var(--gn-bg-panel) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs {
-  background: var(--gn-bg-panel) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs > .ant-tabs-nav {
-  padding: 0 12px !important;
-  min-height: 30px;
-  background: var(--gn-bg-panel) !important;
-  border-bottom: 0 !important;
-  box-shadow: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs > .ant-tabs-nav .ant-tabs-nav-list {
-  width: auto !important;
-  min-height: 30px;
-  gap: 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs > .ant-tabs-nav .ant-tabs-tab {
-  height: 30px;
-  min-height: 30px;
-  padding-inline: 10px !important;
-  border-right: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs > .ant-tabs-nav::before {
-  display: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tabs .ant-tabs-content-holder {
-  padding: 0 12px 12px !important;
-  border-top: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-table-shell,
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-tab-content,
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-ddl-shell {
-  border-top: 0 !important;
-  border-left: 0 !important;
-  border-right: 0 !important;
-  border-bottom: 0 !important;
-  border-radius: 0 !important;
-  background: transparent !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer.is-embedded .gn-v2-designer-actionbar {
-  padding-inline: 0 !important;
-  background: transparent !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th,
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-tbody > tr > td {
-  padding: var(--gn-v2-designer-cell-padding) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th {
-  text-align: left !important;
-  font-size: var(--gn-v2-designer-content-font-size);
-  line-height: 1.1;
-  height: var(--gn-v2-designer-header-height);
-  min-height: var(--gn-v2-designer-header-height);
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-  vertical-align: middle !important;
-  white-space: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th .ant-table-column-title {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  min-height: var(--gn-v2-designer-header-height);
-  text-align: left !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th .ant-table-column-sorters {
-  min-height: var(--gn-v2-designer-header-height) !important;
-  align-items: center !important;
-  justify-content: flex-start !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th.ant-table-selection-column,
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-tbody > tr > td.ant-table-selection-column,
-body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-select-column {
-  width: var(--gn-v2-designer-selection-column-width) !important;
-  min-width: var(--gn-v2-designer-selection-column-width) !important;
-  max-width: var(--gn-v2-designer-selection-column-width) !important;
-  padding-inline: 0 !important;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th.ant-table-selection-column .ant-table-selection,
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-tbody > tr > td.ant-table-selection-column .ant-table-selection,
-body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-select-column .table-designer-select-check {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-height: var(--gn-v2-designer-row-selection-min-height);
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-thead > tr > th:first-child,
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-tbody > tr > td:first-child {
-  padding-inline: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-tbody > tr > td {
-  vertical-align: middle !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-cell-field .ant-input,
-body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-cell-field .ant-select-selection-item,
-body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-cell-field input {
-  font-size: var(--gn-v2-designer-content-font-size) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .table-designer-cell-check .ant-checkbox {
-  transform: scale(0.92);
-}
-
-body[data-ui-version="v2"] .gn-v2-designer-table-shell,
-body[data-ui-version="v2"] .gn-v2-designer-tab-content,
-body[data-ui-version="v2"] .gn-v2-designer-ddl-shell {
-  border: 0.5px solid var(--gn-br-1) !important;
-  border-radius: 8px !important;
-  background: var(--gn-bg-panel) !important;
-  overflow: hidden;
-}
-
-body[data-ui-version="v2"] .gn-v2-designer-actionbar {
-  min-height: 36px;
-  padding: 8px;
-  align-items: center;
-  border-bottom: 0.5px solid var(--gn-br-1);
-  background: var(--gn-bg-panel-2);
-}
-
-body[data-ui-version="v2"] .gn-v2-designer-section-note {
-  padding: 0 2px;
-  color: var(--gn-fg-4) !important;
-  font-family: var(--gn-font-mono);
-  font-size: 11.5px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-designer-index-table .ant-tag {
-  font-size: 12px !important;
-  font-weight: 700 !important;
-  line-height: 18px !important;
-  padding: 1px 7px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-wrapper,
-body[data-ui-version="v2"] .gn-v2-table-designer .ant-table-container {
-  border-radius: 0 !important;
-}
-
-/* ─── V2 Redis workbench ─ */
-body[data-ui-version="v2"] .gn-v2-redis-workbench {
-  gap: 10px !important;
-  padding: 10px !important;
-  background: var(--gn-bg-app) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-sidebar {
-  min-width: 320px !important;
-  gap: 10px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-header,
-body[data-ui-version="v2"] .gn-v2-redis-tree-card,
-body[data-ui-version="v2"] .gn-v2-redis-value-header,
-body[data-ui-version="v2"] .gn-v2-redis-value-card,
-body[data-ui-version="v2"] .gn-v2-redis-empty-value {
-  border-radius: 8px !important;
-  border: 0.5px solid var(--gn-br-1) !important;
-  background: var(--gn-bg-panel) !important;
-  box-shadow: var(--gn-shadow-card) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-header {
-  padding: 12px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-toolbar {
-  align-items: center;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-tree-card {
-  padding: 8px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-tree-shell {
-  border-radius: 7px !important;
-  border: 0.5px solid var(--gn-br-1) !important;
-  background: var(--gn-bg-panel-2) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-workbench .ant-tree-checkbox {
-  margin-inline-end: 5px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-value-pane {
-  min-width: 360px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-value-layout {
-  gap: 10px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-value-header {
-  padding: 14px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-value-header strong {
-  font-family: var(--gn-font-mono);
-  font-size: 20px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-value-actions,
-body[data-ui-version="v2"] .gn-v2-redis-view-mode,
-body[data-ui-version="v2"] .gn-v2-redis-value-subtoolbar,
-body[data-ui-version="v2"] .gn-v2-redis-value-actionbar {
-  border-radius: 7px !important;
-  border: 0.5px solid var(--gn-br-1) !important;
-  background: var(--gn-bg-panel-2) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-value-subtoolbar {
-  min-height: 30px;
-  border-width: 0 0 0.5px !important;
-  border-radius: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-value-actionbar {
-  padding: 8px !important;
-  margin-bottom: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-data-section .ant-table-wrapper {
-  flex: 1;
-  min-height: 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-redis-context-menu {
-  width: 208px !important;
-  min-width: 188px !important;
-  padding: 6px !important;
-}
-
-/* ─── V2 Table Overview ─ */
-body[data-ui-version="v2"] .gn-v2-table-overview {
-  background: var(--gn-bg-app) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-overview-header {
-  min-height: 54px;
-  padding: 12px 16px !important;
-  background: var(--gn-bg-panel) !important;
-  border-bottom: 0.5px solid var(--gn-br-1);
-}
-
-body[data-ui-version="v2"] .gn-v2-table-overview-icon {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 7px;
-  color: #fff;
-  background: linear-gradient(135deg, var(--gn-accent) 0%, var(--gn-accent-2) 100%);
-  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.3);
-}
-
-body[data-ui-version="v2"] .gn-v2-table-overview-title {
-  color: var(--gn-fg-1) !important;
-  font-family: var(--gn-font-sans);
-  font-size: 14px !important;
-  font-weight: 700 !important;
-  letter-spacing: 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-overview-summary {
-  color: var(--gn-fg-4) !important;
-  font-family: var(--gn-font-sans);
-  font-weight: 500;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-overview-summary strong {
-  color: var(--gn-fg-2);
-  font-family: var(--gn-font-mono);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-overview-content {
-  padding: 14px 16px 20px !important;
-  background: var(--gn-bg-app);
-}
-
-body[data-ui-version="v2"] .gn-v2-table-overview-sections {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-overview-section-title {
-  color: var(--gn-fg-4) !important;
-  font-family: var(--gn-font-mono);
-  font-size: var(--gn-font-size-xs, 10px) !important;
-  letter-spacing: 0;
-  text-transform: none;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-overview-section-title span:last-child {
-  min-width: 18px;
-  height: 18px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: var(--gn-bg-active);
-  color: var(--gn-fg-3);
-  font-size: var(--gn-font-size-xs, 10px);
-  font-weight: 700;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-card-grid {
-  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important;
-  gap: 10px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-card,
-body[data-ui-version="v2"] .gn-v2-table-row {
-  border: 0.5px solid var(--gn-br-2) !important;
-  border-radius: 8px !important;
-  background: var(--gn-bg-panel) !important;
-  box-shadow: var(--gn-shadow-card);
-  transition: background 0.08s, border-color 0.08s, box-shadow 0.08s;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-card:hover,
-body[data-ui-version="v2"] .gn-v2-table-row:hover {
-  background: var(--gn-bg-hover) !important;
-  border-color: color-mix(in srgb, var(--gn-accent) 45%, var(--gn-br-2)) !important;
-  box-shadow: var(--gn-shadow-md);
-}
-
-body[data-ui-version="v2"] .gn-v2-table-card-name span {
-  font-family: var(--gn-font-mono);
-}
-
-body[data-ui-version="v2"] .gn-v2-table-card-meta {
-  font-family: var(--gn-font-mono);
-  font-size: 11px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-size-bar {
-  height: 2px;
-  margin-top: 10px;
-  border-radius: 1px;
-  background: var(--gn-bg-active);
-  overflow: hidden;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-size-bar span {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, var(--gn-accent) 0%, var(--gn-info) 100%);
-}
-
-body[data-ui-version="v2"] .gn-v2-table-row-list {
-  gap: 0 !important;
-  background: var(--gn-bg-panel);
-  border: 0.5px solid var(--gn-br-1);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-row {
-  border-width: 0 0 0.5px !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-table-row:last-child {
-  border-bottom: 0 !important;
-}
-
-/* ─── V2 AI side panel ─ */
-body[data-ui-version="v2"] .gn-v2-ai-panel {
-  width: 340px;
-  background: var(--gn-bg-panel) !important;
-  border-left: 0.5px solid var(--gn-br-1) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-header {
-  min-height: 78px;
-  padding: 0 !important;
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: stretch !important;
-  justify-content: flex-start !important;
-  gap: 0 !important;
-  background: var(--gn-bg-panel-2) !important;
-  border-bottom: 0.5px solid var(--gn-br-1) !important;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-header-top,
-body[data-ui-version="v2"] .gn-v2-ai-brand,
-body[data-ui-version="v2"] .gn-v2-ai-header-actions,
-body[data-ui-version="v2"] .gn-v2-ai-mode-tabs,
-body[data-ui-version="v2"] .gn-v2-ai-session-row,
-body[data-ui-version="v2"] .gn-v2-ai-suggestion-divider,
-body[data-ui-version="v2"] .gn-v2-ai-suggestion-list button,
-body[data-ui-version="v2"] .gn-v2-ai-context-row,
-body[data-ui-version="v2"] .gn-v2-ai-context-toggle,
-body[data-ui-version="v2"] .gn-v2-ai-context-add,
-body[data-ui-version="v2"] .gn-v2-ai-input-actions,
-body[data-ui-version="v2"] .gn-v2-ai-token-meter,
-body[data-ui-version="v2"] .gn-v2-ai-token-bar {
-  display: flex;
-  align-items: center;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-header-top {
-  justify-content: space-between;
-  gap: 8px;
-  min-width: 0;
-  width: 100%;
-  flex: 0 0 auto;
-  height: 44px;
-  padding: 0 8px 0 12px;
-  border-bottom: 0.5px solid var(--gn-br-1);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-brand {
-  min-width: 0;
-  flex: 1 1 auto;
-  overflow: hidden;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-header-actions {
-  gap: 1px;
-  flex: 0 0 auto;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-header-actions .ant-btn {
-  width: 24px !important;
-  height: 24px !important;
-  padding: 0 !important;
-  border-color: transparent !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-logo {
-  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
-  color: #fff !important;
-  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.3);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-title {
-  color: var(--gn-fg-1) !important;
-  font-size: 13px !important;
-  font-weight: 750 !important;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-title-stack {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-title-stack small {
-  max-width: 150px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--gn-fg-5);
-  font-size: 10.5px;
-  font-family: var(--gn-font-mono);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-provider-badge {
-  display: inline-flex;
-  align-items: center;
-  flex: 0 0 auto;
-  height: 17px;
-  padding: 0 5px;
-  border-radius: 3px;
-  background: var(--gn-accent-soft);
-  color: var(--gn-accent-2);
-  font-size: 9.5px;
-  font-weight: 800;
-  letter-spacing: 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-mode-tabs {
-  gap: 2px;
-  width: 100%;
-  flex: 0 0 auto;
-  padding: 8px 10px 4px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-mode-tabs button {
-  flex: 1 1 0;
-  min-width: 0;
-  height: 26px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--gn-fg-4);
-  font-size: 11.5px;
-  font-weight: 600;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-mode-tabs button span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-mode-tabs button.is-active {
-  background: var(--gn-bg-active);
-  color: var(--gn-fg-1);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-messages {
-  padding: 8px 14px 12px;
-  gap: 10px;
-  background: var(--gn-bg-panel);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-welcome {
-  flex: 0 0 auto !important;
-  align-items: stretch !important;
-  justify-content: flex-start;
-  padding: 16px 0 4px !important;
-  gap: 14px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-welcome-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-welcome-title > span {
-  width: 26px;
-  height: 26px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 7px;
-  background: var(--gn-info-soft);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-inline {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 1px 5px;
-  border-radius: 4px;
-  background: var(--gn-info-soft);
-  color: var(--gn-info);
-  font-family: var(--gn-font-mono);
-  font-size: 11px;
-  font-weight: 650;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-quick-icon {
-  width: 20px;
-  height: 20px;
-  flex: 0 0 20px;
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-quick-card.tone-info .gn-v2-ai-quick-icon {
-  background: var(--gn-info-soft);
-  color: var(--gn-info);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-quick-card.tone-success .gn-v2-ai-quick-icon {
-  background: var(--gn-accent-soft);
-  color: var(--gn-accent-2);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-quick-card.tone-warn .gn-v2-ai-quick-icon {
-  background: var(--gn-warn-soft);
-  color: var(--gn-warn);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-quick-card.tone-purple .gn-v2-ai-quick-icon {
-  background: rgba(168,85,247,0.12);
-  color: #9333ea;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .quick-actions {
-  display: grid !important;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px !important;
-  justify-content: stretch !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .quick-action-btn {
-  min-height: 66px;
-  padding: 10px 11px !important;
-  display: flex !important;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 4px;
-  border-radius: 8px !important;
-  background: var(--gn-bg-panel-2) !important;
-  color: var(--gn-fg-2) !important;
-  border-color: var(--gn-br-2) !important;
-  text-align: left !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .quick-action-btn:hover {
-  background: var(--gn-bg-hover) !important;
-  border-color: var(--gn-br-3) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .quick-action-btn strong {
-  color: var(--gn-fg-1);
-  font-size: 12.5px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .quick-action-btn span {
-  color: var(--gn-fg-4);
-  font-size: 11px;
-  line-height: 1.35;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-suggestion-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-suggestion-divider {
-  gap: 8px;
-  padding: 2px 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-suggestion-divider span {
-  height: 1px;
-  flex: 1;
-  background: var(--gn-br-1);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-suggestion-divider small {
-  color: var(--gn-fg-5);
-  font-size: 10px;
-  font-weight: 700;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-suggestion-list button {
-  width: 100%;
-  gap: 8px;
-  min-height: 31px;
-  padding: 7px 10px;
-  border: 0.5px solid var(--gn-br-1);
-  border-radius: 7px;
-  background: transparent;
-  color: var(--gn-fg-2);
-  text-align: left;
-  font-size: 12px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-suggestion-list button .anticon {
-  color: var(--gn-info);
-  flex: 0 0 auto;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-insights-list,
-body[data-ui-version="v2"] .gn-v2-ai-history-list {
-  flex: 1 1 auto;
-  min-height: 0;
-  padding: 8px 2px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-insight-card {
-  display: flex;
-  align-items: flex-start;
-  gap: 9px;
-  padding: 10px;
-  border: 0.5px solid var(--gn-br-1);
-  border-radius: 8px;
-  background: var(--gn-bg-panel-2);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-insight-card.tone-info .gn-v2-ai-insight-icon {
-  background: var(--gn-info-soft);
-  color: var(--gn-info);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-insight-card.tone-accent .gn-v2-ai-insight-icon {
-  background: var(--gn-accent-soft);
-  color: var(--gn-accent-2);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-insight-card.tone-warn .gn-v2-ai-insight-icon {
-  background: var(--gn-warn-soft);
-  color: var(--gn-warn);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-insight-icon {
-  width: 22px;
-  height: 22px;
-  flex: 0 0 22px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-insight-card strong {
-  display: block;
-  color: var(--gn-fg-1);
-  font-size: 12.5px;
-  font-weight: 750;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-insight-card p {
-  margin: 4px 0 0;
-  color: var(--gn-fg-4);
-  font-size: 11.5px;
-  line-height: 1.45;
-  word-break: break-word;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-history-card {
-  width: 100%;
-  padding: 9px 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 5px;
-  border: 0.5px solid var(--gn-br-1);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--gn-fg-2);
-  text-align: left;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-history-card.is-active {
-  background: var(--gn-bg-selected);
-  border-color: color-mix(in srgb, var(--gn-accent) 36%, var(--gn-br-1));
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-history-card span {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  gap: 7px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-history-card span .anticon {
-  color: var(--gn-info);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-history-card strong {
-  overflow: hidden;
-  color: var(--gn-fg-1);
-  font-size: 12.5px;
-  font-weight: 650;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-history-card small {
-  padding-left: 21px;
-  color: var(--gn-fg-5);
-  font-family: var(--gn-font-mono);
-  font-size: 10.5px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-empty-note {
-  padding: 32px 0;
-  color: var(--gn-fg-5);
-  font-size: 12px;
-  text-align: center;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-input-area {
-  padding: 10px 12px 12px !important;
-  border-top: 0.5px solid var(--gn-br-1) !important;
-  background: var(--gn-bg-panel-2);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-input-wrapper {
-  border-radius: 10px !important;
-  border: none !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  gap: 4px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-row {
-  justify-content: space-between;
-  gap: 6px;
-  min-height: 22px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-toggle,
-body[data-ui-version="v2"] .gn-v2-ai-context-add {
-  height: 22px;
-  border-radius: 6px;
-  font-size: 11.5px;
-  font-weight: 700;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-toggle {
-  gap: 5px;
-  padding: 0 8px;
-  border: 0.5px solid rgba(56,189,248,0.3);
-  background: var(--gn-info-soft);
-  color: var(--gn-info);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-toggle strong {
-  min-width: 15px;
-  height: 15px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 4px;
-  border-radius: 4px;
-  background: var(--gn-info);
-  color: #fff;
-  font-family: var(--gn-font-mono);
-  font-size: 10px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-toggle .anticon-down {
-  transition: transform 0.12s ease;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-toggle.is-expanded .anticon-down {
-  transform: rotate(180deg);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-add {
-  gap: 4px;
-  padding: 0 8px;
-  border: 0.5px dashed var(--gn-br-3);
-  background: transparent;
-  color: var(--gn-fg-4);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-detail {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 8px;
-  border: 0.5px solid var(--gn-br-1);
-  border-radius: 8px;
-  background: var(--gn-bg-panel-2);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-detail-title {
-  padding: 0 4px;
-  color: var(--gn-fg-4);
-  font-size: 10px;
-  font-weight: 700;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-table-chip {
-  display: inline-flex !important;
-  align-items: center;
-  gap: 6px;
-  min-height: 24px;
-  border: 0.5px solid var(--gn-br-1) !important;
-  border-radius: 6px !important;
-  background: var(--gn-bg-panel) !important;
-  color: var(--gn-fg-1) !important;
-  font-family: var(--gn-font-mono);
-  font-size: 11.5px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-attachment-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-attachment-thumb {
-  position: relative;
-  width: 54px;
-  height: 54px;
-  overflow: hidden;
-  border: 0.5px solid var(--gn-br-2);
-  border-radius: 7px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-attachment-thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-attachment-thumb button {
-  position: absolute;
-  top: 3px;
-  right: 3px;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: rgba(0,0,0,0.55);
-  color: #fff;
-  font-size: 10px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-attachment-file {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: min(100%, 280px);
-  min-height: 28px;
-  padding: 4px 8px;
-  border: 0.5px solid var(--gn-br-2);
-  border-radius: 8px;
-  background: var(--gn-bg-panel);
-  color: var(--gn-fg-1);
-  font-size: 11.5px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-attachment-file.has-warning {
-  border-color: rgba(217, 119, 6, 0.45);
-  background: rgba(217, 119, 6, 0.08);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-attachment-file-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-attachment-file-meta {
-  color: var(--gn-fg-3);
-  flex-shrink: 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-attachment-file button {
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: var(--gn-bg-subtle);
-  color: var(--gn-fg-3);
-  line-height: 1;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-input-box {
-  min-height: 68px;
-  padding: 0;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-input-surface {
-  min-height: 68px;
-  padding: 6px 6px 6px 10px;
-  border: 0.5px solid var(--gn-br-2) !important;
-  border-radius: 10px !important;
-  background: var(--gn-bg-input) !important;
-  box-shadow: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-input-box textarea {
-  border: 0 !important;
-  border-radius: 0 !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  font-size: 12.5px !important;
-  line-height: 1.55 !important;
-  padding: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-input-box textarea.ant-input:focus,
-body[data-ui-version="v2"] .gn-v2-ai-input-box textarea.ant-input:focus-visible {
-  border-color: transparent !important;
-  outline: none !important;
-  box-shadow: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-slash-menu {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  max-height: 220px;
-  padding: 4px;
-  margin-bottom: 4px;
-  overflow-y: auto;
-  border-radius: 8px;
-  box-shadow: var(--gn-shadow-lg);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-input-actions {
-  justify-content: flex-end;
-  gap: 4px;
-  margin-top: 6px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-input-actions .ant-btn {
-  width: 24px !important;
-  height: 24px !important;
-  padding: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-model-bar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  padding-top: 0;
-  white-space: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-model-spacer {
-  flex: 1 1 auto;
-  min-width: 4px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-chip,
-body[data-ui-version="v2"] .gn-v2-ai-token-meter {
-  height: 20px;
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 6px;
-  border-radius: 4px !important;
-  border: 0.5px solid var(--gn-br-1) !important;
-  background: var(--gn-bg-active) !important;
-  color: var(--gn-fg-4) !important;
-  font-family: var(--gn-font-mono);
-  font-size: 10.5px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-chip {
-  flex: 1 1 auto;
-  max-width: 180px;
-  overflow: hidden;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-chip > span:last-child {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-context-live-dot {
-  width: 5px;
-  height: 5px;
-  flex: 0 0 5px;
-  border-radius: 50%;
-  background: var(--gn-accent);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-model-select {
-  width: 132px !important;
-  height: 26px !important;
-  flex: 0 0 132px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-selector {
-  display: flex !important;
-  align-items: center !important;
-  height: 26px !important;
-  min-height: 26px !important;
-  padding: 0 28px 0 10px !important;
-  border: 0.5px solid var(--gn-br-2) !important;
-  border-radius: 7px !important;
-  background: var(--gn-bg-panel) !important;
-  box-shadow: none !important;
-  font-family: var(--gn-font-mono);
-  font-size: 12px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-model-select.ant-select-focused .ant-select-selector,
-body[data-ui-version="v2"] .gn-v2-ai-model-select:hover .ant-select-selector {
-  border-color: var(--gn-info) !important;
-  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-selection-search {
-  left: 10px !important;
-  right: 28px !important;
-  inset-inline-start: 10px !important;
-  inset-inline-end: 28px !important;
-  height: 24px !important;
-  background: transparent !important;
-  border: 0 !important;
-  box-shadow: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-selection-search-input {
-  height: 24px !important;
-  padding: 0 !important;
-  border: 0 !important;
-  border-radius: 0 !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  color: var(--gn-fg-2) !important;
-  font-family: var(--gn-font-mono) !important;
-  font-size: 12px !important;
-  line-height: 24px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-selection-item,
-body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-selection-placeholder {
-  display: flex !important;
-  align-items: center !important;
-  height: 24px !important;
-  line-height: 24px !important;
-  padding-inline-end: 0 !important;
-  background: transparent !important;
-  color: var(--gn-fg-2) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-model-select .ant-select-arrow {
-  inset-inline-end: 9px !important;
-  color: var(--gn-fg-4) !important;
-  font-size: 11px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-token-meter {
-  flex: 0 0 auto;
-  gap: 5px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-token-meter.is-warn {
-  border-color: color-mix(in srgb, var(--gn-warn) 35%, transparent) !important;
-  color: var(--gn-warn) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-token-bar {
-  width: 32px;
-  height: 4px;
-  overflow: hidden;
-  border-radius: 2px;
-  background: var(--gn-bg-active);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-token-bar span {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  background: var(--gn-info);
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-send-btn {
-  width: 28px !important;
-  height: 28px !important;
-  border-radius: 7px !important;
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  padding: 0 !important;
-  border: 0.5px solid var(--gn-info) !important;
-  background: var(--gn-info) !important;
-  background-color: var(--gn-info) !important;
-  color: #fff !important;
-  opacity: 1 !important;
-  cursor: pointer;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-send-btn .anticon,
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-send-btn svg {
-  color: currentColor !important;
-  fill: currentColor !important;
-  font-size: 13px;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-send-btn:disabled {
-  border-color: var(--gn-br-1) !important;
-  background: var(--gn-bg-active) !important;
-  background-color: var(--gn-bg-active) !important;
-  color: var(--gn-fg-5) !important;
-  opacity: 1 !important;
-  cursor: not-allowed;
-}
-
-body[data-ui-version="v2"] .gn-v2-ai-panel .ai-chat-stop-btn {
-  border-color: rgba(220,38,38,0.28) !important;
-  background: rgba(220,38,38,0.12) !important;
-  background-color: rgba(220,38,38,0.12) !important;
-  color: var(--gn-danger) !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find {
-  display: inline-flex !important;
-  align-items: center !important;
-  height: 28px !important;
-  min-height: 28px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-row {
-  display: grid !important;
-  grid-template-columns: 180px 28px !important;
-  align-items: stretch !important;
-  column-gap: 4px !important;
-  height: 28px !important;
-  min-height: 28px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-field,
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-autocomplete,
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-autocomplete .ant-select,
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-field .ant-input-affix-wrapper {
-  width: 180px !important;
-  min-width: 180px !important;
-  height: 28px !important;
-  min-height: 28px !important;
-  box-sizing: border-box !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-field,
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-autocomplete,
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-autocomplete .ant-select {
-  display: flex !important;
-  align-items: stretch !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-field .ant-input-affix-wrapper {
-  display: flex !important;
-  align-items: center !important;
-  line-height: 28px !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn {
-  width: 28px !important;
-  min-width: 28px !important;
-  max-width: 28px !important;
-  height: 28px !important;
-  min-height: 28px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  align-self: stretch !important;
-  justify-self: stretch !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  line-height: 1 !important;
-  vertical-align: top !important;
-  box-sizing: border-box !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn > span,
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn .ant-btn-icon,
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn .anticon {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  width: 100% !important;
-  height: 100% !important;
-  line-height: 1 !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn .anticon svg {
-  display: block !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn:focus,
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn:focus-visible,
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn:active {
-  box-shadow: none !important;
-  outline: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .gn-v2-data-grid-column-quick-find-submit.ant-btn::after {
-  display: none !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find {
-  gap: 2px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-prefix,
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-suffix {
-  display: inline-flex !important;
-  align-items: center !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-prefix {
-  margin-inline-end: 6px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input,
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input::placeholder {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find {
-  max-width: 214px !important;
-  overflow: visible !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-row {
-  display: grid !important;
-  grid-template-columns: 160px 26px 26px !important;
-  column-gap: 2px !important;
-  align-items: stretch !important;
-  height: 26px !important;
-  min-height: 26px !important;
-  flex: 0 0 auto !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-input,
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-input.ant-input-affix-wrapper {
-  width: 160px !important;
-  min-width: 160px !important;
-  max-width: 160px !important;
-  height: 26px !important;
-  min-height: 26px !important;
-  box-sizing: border-box !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-input.ant-input-affix-wrapper {
-  display: flex !important;
-  align-items: center !important;
-  padding-inline: 8px !important;
-  line-height: 26px !important;
-}
-
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-prev.ant-btn,
-body[data-ui-version="v2"] .gn-v2-data-grid-page-find .gn-v2-data-grid-page-find-next.ant-btn {
-  width: 26px !important;
-  min-width: 26px !important;
-  max-width: 26px !important;
-  height: 26px !important;
-  min-height: 26px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  align-self: stretch !important;
-  justify-self: stretch !important;
-}
diff --git a/frontend/src/v2ThemeModalConfirm.test.ts b/frontend/src/v2ThemeModalConfirm.test.ts
index 987974c..a26dd57 100644
--- a/frontend/src/v2ThemeModalConfirm.test.ts
+++ b/frontend/src/v2ThemeModalConfirm.test.ts
@@ -1,11 +1,7 @@
 import { describe, expect, it } from 'vitest';
-import { readFileSync } from 'node:fs';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { readV2ThemeCss } from './test/readV2ThemeCss';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const v2ThemeCss = readFileSync(path.resolve(__dirname, './v2-theme.css'), 'utf8');
+const v2ThemeCss = readV2ThemeCss();
 
 describe('v2 modal confirm theme', () => {
   it('keeps static confirm title and content readable in dark theme', () => {
diff --git a/internal/app/methods_driver.go b/internal/app/methods_driver.go
index 56deff5..ac13650 100644
--- a/internal/app/methods_driver.go
+++ b/internal/app/methods_driver.go
@@ -4582,1335 +4582,3 @@ func prepareDuckDBWindowsDynamicLibraryForBuild() (string, func(), error) {
 
 	return workDir, cleanup, nil
 }
-
-func optionalDriverPublicTypeName(driverType string) string {
-	switch normalizeDriverType(driverType) {
-	case "diros":
-		return "doris"
-	default:
-		return normalizeDriverType(driverType)
-	}
-}
-
-func optionalDriverExecutableBaseNameForType(typeName string) string {
-	base := strings.TrimSpace(typeName)
-	if base == "" {
-		base = "unknown"
-	}
-	name := fmt.Sprintf("%s-driver-agent", base)
-	if stdRuntime.GOOS == "windows" {
-		return name + ".exe"
-	}
-	return name
-}
-
-func optionalDriverReleaseAssetNameForType(typeName string, goos string, goarch string) string {
-	base := strings.TrimSpace(typeName)
-	if base == "" {
-		base = "unknown"
-	}
-	name := fmt.Sprintf("%s-driver-agent-%s-%s", base, goos, goarch)
-	if strings.EqualFold(goos, "windows") {
-		return name + ".exe"
-	}
-	return name
-}
-
-func optionalDriverNameStemCandidates(driverType string, selectedVersion string) []string {
-	candidates := make([]string, 0, 3)
-	seen := make(map[string]struct{}, 3)
-	appendStem := func(stem string) {
-		trimmed := strings.TrimSpace(stem)
-		if trimmed == "" {
-			return
-		}
-		if _, ok := seen[trimmed]; ok {
-			return
-		}
-		seen[trimmed] = struct{}{}
-		candidates = append(candidates, trimmed)
-	}
-
-	base := fmt.Sprintf("%s-driver-agent", optionalDriverPublicTypeName(driverType))
-	if normalizeDriverType(driverType) == "mongodb" {
-		switch resolveMongoDriverMajorFromVersion(selectedVersion) {
-		case 1:
-			appendStem(base + "-v1")
-		case 2:
-			appendStem(base + "-v2")
-			appendStem(base)
-		default:
-			appendStem(base)
-		}
-		return candidates
-	}
-
-	appendStem(base)
-	return candidates
-}
-
-func optionalDriverExecutableBaseNamesForVersion(driverType string, selectedVersion string) []string {
-	names := make([]string, 0, 2)
-	seen := make(map[string]struct{}, 2)
-	appendName := func(stem string) {
-		name := strings.TrimSpace(stem)
-		if strings.TrimSpace(name) == "" {
-			return
-		}
-		if stdRuntime.GOOS == "windows" {
-			name += ".exe"
-		}
-		if _, ok := seen[name]; ok {
-			return
-		}
-		seen[name] = struct{}{}
-		names = append(names, name)
-	}
-
-	for _, stem := range optionalDriverNameStemCandidates(driverType, selectedVersion) {
-		appendName(stem)
-	}
-	return names
-}
-
-func optionalDriverExecutableBaseNames(driverType string) []string {
-	return optionalDriverExecutableBaseNamesForVersion(driverType, "")
-}
-
-func optionalDriverReleaseAssetNamesForVersion(driverType string, selectedVersion string) []string {
-	names := make([]string, 0, 2)
-	seen := make(map[string]struct{}, 2)
-	appendName := func(stem string) {
-		trimmedStem := strings.TrimSpace(stem)
-		if trimmedStem == "" {
-			return
-		}
-		name := fmt.Sprintf("%s-%s-%s", trimmedStem, stdRuntime.GOOS, stdRuntime.GOARCH)
-		if strings.EqualFold(stdRuntime.GOOS, "windows") {
-			name += ".exe"
-		}
-		if strings.TrimSpace(name) == "" {
-			return
-		}
-		if _, ok := seen[name]; ok {
-			return
-		}
-		seen[name] = struct{}{}
-		names = append(names, name)
-	}
-
-	for _, stem := range optionalDriverNameStemCandidates(driverType, selectedVersion) {
-		appendName(stem)
-	}
-	return names
-}
-
-func optionalDriverReleaseAssetNames(driverType string) []string {
-	return optionalDriverReleaseAssetNamesForVersion(driverType, "")
-}
-
-func optionalDriverExecutableBaseName(driverType string) string {
-	names := optionalDriverExecutableBaseNames(driverType)
-	if len(names) == 0 {
-		return optionalDriverExecutableBaseNameForType("")
-	}
-	return names[0]
-}
-
-func optionalDriverReleaseAssetName(driverType string) string {
-	names := optionalDriverReleaseAssetNames(driverType)
-	if len(names) == 0 {
-		return optionalDriverReleaseAssetNameForType("", stdRuntime.GOOS, stdRuntime.GOARCH)
-	}
-	return names[0]
-}
-
-func optionalDriverReleaseAssetNameForVersion(driverType string, selectedVersion string) string {
-	names := optionalDriverReleaseAssetNamesForVersion(driverType, selectedVersion)
-	if len(names) == 0 {
-		return optionalDriverReleaseAssetNameForType("", stdRuntime.GOOS, stdRuntime.GOARCH)
-	}
-	return names[0]
-}
-
-func currentDriverReleaseTag() string {
-	currentVersion := normalizeVersion(getCurrentVersion())
-	if currentVersion == "" || currentVersion == "0.0.0" {
-		return ""
-	}
-	if isDevelopmentDriverReleaseVersion(currentVersion) {
-		return driverReleaseDevTag
-	}
-	return "v" + currentVersion
-}
-
-func isDevelopmentDriverReleaseVersion(version string) bool {
-	normalized := strings.ToLower(strings.TrimSpace(normalizeVersion(version)))
-	if normalized == "" || normalized == "0.0.0" {
-		return false
-	}
-	if strings.HasPrefix(normalized, "dev-") {
-		return true
-	}
-	for _, marker := range []string{"-dev", "-test", "-local", "-snapshot"} {
-		if strings.Contains(normalized, marker) {
-			return true
-		}
-	}
-	return false
-}
-
-func driverReleaseDownloadURL(tag string, assetName string) string {
-	tagName := strings.TrimSpace(tag)
-	asset := strings.TrimSpace(assetName)
-	if tagName == "" || asset == "" {
-		return ""
-	}
-	return fmt.Sprintf("https://github.com/%s/releases/download/%s/%s", driverReleaseRepo, url.PathEscape(tagName), url.PathEscape(asset))
-}
-
-func driverReleaseLatestDownloadURL(assetName string) string {
-	asset := strings.TrimSpace(assetName)
-	if asset == "" {
-		return ""
-	}
-	return fmt.Sprintf("https://github.com/%s/releases/latest/download/%s", driverReleaseRepo, url.PathEscape(asset))
-}
-
-func findReleaseAssetByName(release *githubRelease, assetNames []string) (githubAsset, bool) {
-	if release == nil || len(release.Assets) == 0 || len(assetNames) == 0 {
-		return githubAsset{}, false
-	}
-	for _, expected := range assetNames {
-		trimmed := strings.TrimSpace(expected)
-		if trimmed == "" {
-			continue
-		}
-		for _, asset := range release.Assets {
-			if strings.EqualFold(strings.TrimSpace(asset.Name), trimmed) {
-				return asset, true
-			}
-		}
-	}
-	return githubAsset{}, false
-}
-
-func driverReleaseAssetAPIURL(asset githubAsset) string {
-	urlText := strings.TrimSpace(asset.URL)
-	if urlText != "" {
-		name := strings.TrimSpace(asset.Name)
-		if name == "" {
-			return urlText
-		}
-		parsed, err := url.Parse(urlText)
-		if err != nil {
-			return urlText
-		}
-		parsed.Fragment = name
-		return parsed.String()
-	}
-	urlText = strings.TrimSpace(asset.BrowserDownloadURL)
-	if urlText == "" {
-		return ""
-	}
-	return urlText
-}
-
-func optionalDriverBundlePlatformDir(goos string) string {
-	switch strings.ToLower(strings.TrimSpace(goos)) {
-	case "windows":
-		return "Windows"
-	case "darwin":
-		return "MacOS"
-	case "linux":
-		return "Linux"
-	default:
-		return "Unknown"
-	}
-}
-
-func optionalDriverBundleEntryPathsForVersion(driverType string, selectedVersion string) []string {
-	platformDir := optionalDriverBundlePlatformDir(stdRuntime.GOOS)
-	assetNames := optionalDriverReleaseAssetNamesForVersion(driverType, selectedVersion)
-	result := make([]string, 0, len(assetNames))
-	seen := make(map[string]struct{}, len(assetNames))
-	for _, assetName := range assetNames {
-		entry := filepath.ToSlash(filepath.Join(platformDir, assetName))
-		if _, ok := seen[entry]; ok {
-			continue
-		}
-		seen[entry] = struct{}{}
-		result = append(result, entry)
-	}
-	return result
-}
-
-func optionalDriverBundleEntryPaths(driverType string) []string {
-	return optionalDriverBundleEntryPathsForVersion(driverType, "")
-}
-
-func optionalDriverBundleEntryPathForVersion(driverType string, selectedVersion string) string {
-	paths := optionalDriverBundleEntryPathsForVersion(driverType, selectedVersion)
-	if len(paths) == 0 {
-		return filepath.ToSlash(filepath.Join(optionalDriverBundlePlatformDir(stdRuntime.GOOS), optionalDriverReleaseAssetNameForVersion(driverType, selectedVersion)))
-	}
-	return paths[0]
-}
-
-func optionalDriverBundleEntryPath(driverType string) string {
-	return optionalDriverBundleEntryPathForVersion(driverType, "")
-}
-
-func resolveOptionalDriverAssetSize(sizeByAsset map[string]int64, driverType string) int64 {
-	if len(sizeByAsset) == 0 {
-		return 0
-	}
-	for _, assetName := range optionalDriverReleaseAssetNames(driverType) {
-		sizeBytes := sizeByAsset[assetName]
-		if sizeBytes > 0 {
-			return sizeBytes
-		}
-	}
-	return 0
-}
-
-func resolveOptionalDriverAssetSizeForVersion(sizeByAsset map[string]int64, driverType string, version string) int64 {
-	if len(sizeByAsset) == 0 {
-		return 0
-	}
-	for _, assetName := range optionalDriverReleaseAssetNamesForVersion(driverType, version) {
-		sizeBytes := sizeByAsset[assetName]
-		if sizeBytes > 0 {
-			return sizeBytes
-		}
-	}
-	return 0
-}
-
-func resolveOptionalDriverBundleDownloadURLs() []string {
-	candidates := make([]string, 0, 2)
-	seen := make(map[string]struct{}, 2)
-	appendURL := func(value string) {
-		trimmed := strings.TrimSpace(value)
-		if trimmed == "" {
-			return
-		}
-		if _, ok := seen[trimmed]; ok {
-			return
-		}
-		seen[trimmed] = struct{}{}
-		candidates = append(candidates, trimmed)
-	}
-
-	if tag := currentDriverReleaseTag(); tag != "" {
-		if release, err := fetchReleaseByTag(tag); err == nil {
-			if asset, ok := findReleaseAssetByName(release, []string{optionalDriverBundleAssetName}); ok {
-				appendURL(driverReleaseAssetAPIURL(asset))
-			}
-		}
-		appendURL(driverReleaseDownloadURL(tag, optionalDriverBundleAssetName))
-	}
-	if release, err := fetchLatestReleaseForDriverAssets(); err == nil {
-		if asset, ok := findReleaseAssetByName(release, []string{optionalDriverBundleAssetName}); ok {
-			appendURL(driverReleaseAssetAPIURL(asset))
-		}
-	}
-	appendURL(driverReleaseLatestDownloadURL(optionalDriverBundleAssetName))
-	return candidates
-}
-
-func optionalDriverBundleCacheDir() (string, error) {
-	cacheDir := filepath.Join(os.TempDir(), "gonavi-driver-bundle-cache")
-	if err := os.MkdirAll(cacheDir, 0o755); err != nil {
-		return "", err
-	}
-	return cacheDir, nil
-}
-
-func optionalDriverBundleCachePath(bundleURL string) (string, error) {
-	cacheDir, err := optionalDriverBundleCacheDir()
-	if err != nil {
-		return "", err
-	}
-	sum := sha256.Sum256([]byte(strings.TrimSpace(bundleURL)))
-	return filepath.Join(cacheDir, hex.EncodeToString(sum[:])+".zip"), nil
-}
-
-func cleanupOptionalDriverBundleCache(keepPaths ...string) {
-	cacheDir, err := optionalDriverBundleCacheDir()
-	if err != nil {
-		return
-	}
-
-	keep := make(map[string]struct{}, len(keepPaths)+4)
-	for _, path := range keepPaths {
-		if strings.TrimSpace(path) != "" {
-			keep[filepath.Clean(path)] = struct{}{}
-		}
-	}
-	optionalDriverBundleDownloadMu.Lock()
-	for _, state := range optionalDriverBundleDownloads {
-		if state != nil && strings.TrimSpace(state.path) != "" {
-			keep[filepath.Clean(state.path)] = struct{}{}
-		}
-	}
-	optionalDriverBundleDownloadMu.Unlock()
-
-	type cacheFile struct {
-		path    string
-		modTime time.Time
-	}
-	cacheFiles := make([]cacheFile, 0)
-	now := time.Now()
-	entries, err := os.ReadDir(cacheDir)
-	if err != nil {
-		return
-	}
-	for _, entry := range entries {
-		if entry.IsDir() {
-			continue
-		}
-		path := filepath.Join(cacheDir, entry.Name())
-		cleanPath := filepath.Clean(path)
-		if _, ok := keep[cleanPath]; ok {
-			continue
-		}
-		info, statErr := entry.Info()
-		if statErr != nil {
-			continue
-		}
-		name := strings.ToLower(strings.TrimSpace(entry.Name()))
-		if strings.HasSuffix(name, ".tmp") {
-			if now.Sub(info.ModTime()) > 24*time.Hour {
-				_ = os.Remove(path)
-			}
-			continue
-		}
-		if !strings.HasSuffix(name, ".zip") {
-			continue
-		}
-		if now.Sub(info.ModTime()) > optionalDriverBundleCacheMaxAge {
-			_ = os.Remove(path)
-			continue
-		}
-		cacheFiles = append(cacheFiles, cacheFile{path: path, modTime: info.ModTime()})
-	}
-	if len(cacheFiles) <= optionalDriverBundleCacheMaxFiles {
-		return
-	}
-	sort.Slice(cacheFiles, func(i, j int) bool {
-		return cacheFiles[i].modTime.After(cacheFiles[j].modTime)
-	})
-	for _, item := range cacheFiles[optionalDriverBundleCacheMaxFiles:] {
-		_ = os.Remove(item.path)
-	}
-}
-
-func downloadOptionalDriverBundleToCache(bundleURL string, onProgress func(downloaded, total int64)) (string, error) {
-	cachePath, err := optionalDriverBundleCachePath(bundleURL)
-	if err != nil {
-		return "", err
-	}
-	tempPath := cachePath + fmt.Sprintf(".%d.tmp", time.Now().UnixNano())
-	_ = os.Remove(tempPath)
-	if _, err := downloadFileWithHashWithTimeout(bundleURL, tempPath, onProgress, optionalDriverBundleDownloadTimeout); err != nil {
-		_ = os.Remove(tempPath)
-		return "", err
-	}
-	if err := os.Remove(cachePath); err != nil && !os.IsNotExist(err) {
-		_ = os.Remove(tempPath)
-		return "", err
-	}
-	if err := os.Rename(tempPath, cachePath); err != nil {
-		_ = os.Remove(tempPath)
-		return "", err
-	}
-	reader, err := zip.OpenReader(cachePath)
-	if err != nil {
-		_ = os.Remove(cachePath)
-		return "", fmt.Errorf("打开驱动总包失败：%w", err)
-	}
-	if err := reader.Close(); err != nil {
-		_ = os.Remove(cachePath)
-		return "", fmt.Errorf("关闭驱动总包失败：%w", err)
-	}
-	cleanupOptionalDriverBundleCache(cachePath)
-	return cachePath, nil
-}
-
-func acquireOptionalDriverBundlePath(bundleURL string, onProgress func(downloaded, total int64), onWaiting func()) (string, error) {
-	trimmedURL := strings.TrimSpace(bundleURL)
-	if trimmedURL == "" {
-		return "", fmt.Errorf("驱动总包下载地址为空")
-	}
-
-	for {
-		optionalDriverBundleDownloadMu.Lock()
-		state, ok := optionalDriverBundleDownloads[trimmedURL]
-		if ok {
-			if state.finished {
-				path := strings.TrimSpace(state.path)
-				err := state.err
-				if err == nil && path != "" && fileExists(path) {
-					optionalDriverBundleDownloadMu.Unlock()
-					return path, nil
-				}
-				delete(optionalDriverBundleDownloads, trimmedURL)
-				optionalDriverBundleDownloadMu.Unlock()
-				continue
-			}
-			done := state.done
-			optionalDriverBundleDownloadMu.Unlock()
-			if onWaiting != nil {
-				onWaiting()
-			}
-			<-done
-			optionalDriverBundleDownloadMu.Lock()
-			path := strings.TrimSpace(state.path)
-			err := state.err
-			if err == nil && path != "" && fileExists(path) {
-				optionalDriverBundleDownloadMu.Unlock()
-				return path, nil
-			}
-			if current, exists := optionalDriverBundleDownloads[trimmedURL]; exists && current == state {
-				delete(optionalDriverBundleDownloads, trimmedURL)
-			}
-			optionalDriverBundleDownloadMu.Unlock()
-			if err == nil {
-				err = fmt.Errorf("驱动总包缓存文件不可用")
-			}
-			return "", err
-		}
-
-		state = &optionalDriverBundleDownloadState{done: make(chan struct{})}
-		optionalDriverBundleDownloads[trimmedURL] = state
-		optionalDriverBundleDownloadMu.Unlock()
-
-		path, err := downloadOptionalDriverBundleToCache(trimmedURL, onProgress)
-		optionalDriverBundleDownloadMu.Lock()
-		state.path = path
-		state.err = err
-		state.finished = true
-		if err != nil {
-			delete(optionalDriverBundleDownloads, trimmedURL)
-		}
-		close(state.done)
-		optionalDriverBundleDownloadMu.Unlock()
-
-		if err != nil {
-			return "", err
-		}
-		return path, nil
-	}
-}
-
-func resolveOptionalDriverAgentDownloadURLs(definition driverDefinition, rawURL string, selectedVersion string) []string {
-	candidates := make([]string, 0, 3)
-	seen := make(map[string]struct{}, 3)
-	driverType := normalizeDriverType(definition.Type)
-	appendURL := func(value string) {
-		trimmed := strings.TrimSpace(value)
-		if trimmed == "" {
-			return
-		}
-		if _, ok := seen[trimmed]; ok {
-			return
-		}
-		seen[trimmed] = struct{}{}
-		candidates = append(candidates, trimmed)
-	}
-
-	restrictToExplicitArtifact := shouldRestrictToExplicitVersionArtifact(definition, selectedVersion)
-	appendPublishedURLs := func() {
-		if tag := currentDriverReleaseTag(); tag != "" {
-			if publishedURL, ok := resolvePublishedDriverDownloadURLForTag(definition, selectedVersion, tag); ok {
-				appendURL(publishedURL)
-			}
-		}
-		if publishedURL, ok := resolveLatestPublishedDriverDownloadURLForVersion(definition, selectedVersion); ok {
-			appendURL(publishedURL)
-		}
-	}
-
-	if !restrictToExplicitArtifact && shouldPreferPublishedOptionalDriverDownloads(driverType) {
-		appendPublishedURLs()
-	}
-
-	if parsed, err := url.Parse(strings.TrimSpace(rawURL)); err == nil {
-		switch strings.ToLower(strings.TrimSpace(parsed.Scheme)) {
-		case "http", "https":
-			appendURL(parsed.String())
-		}
-	}
-	if restrictToExplicitArtifact {
-		return candidates
-	}
-
-	if !shouldPreferPublishedOptionalDriverDownloads(driverType) {
-		appendPublishedURLs()
-	}
-	return candidates
-}
-
-func findExistingOptionalDriverAgentCandidate(definition driverDefinition, targetPath string) (string, bool) {
-	driverType := normalizeDriverType(definition.Type)
-	targetAbs, _ := filepath.Abs(targetPath)
-	candidates := resolveOptionalDriverAgentCandidatePaths(definition)
-	for _, candidate := range candidates {
-		candidate = strings.TrimSpace(candidate)
-		if candidate == "" {
-			continue
-		}
-		absPath, err := filepath.Abs(candidate)
-		if err != nil || absPath == "" {
-			continue
-		}
-		if targetAbs != "" && absPath == targetAbs {
-			continue
-		}
-		info, statErr := os.Stat(absPath)
-		if statErr != nil || info.IsDir() {
-			continue
-		}
-		if validateErr := validateOptionalDriverAgentExecutableFunc(driverType, absPath); validateErr != nil {
-			continue
-		}
-		if !isReusableOptionalDriverAgentCandidateRevisionAcceptable(driverType, absPath) {
-			continue
-		}
-		return absPath, true
-	}
-	return "", false
-}
-
-func isReusableOptionalDriverAgentCandidateRevisionAcceptable(driverType string, executablePath string) bool {
-	expected := strings.TrimSpace(db.OptionalDriverAgentRevision(driverType))
-	if expected == "" {
-		return true
-	}
-	actual, current, err := optionalDriverAgentRevisionCurrent(driverType, executablePath)
-	displayName := resolveDriverDisplayName(driverDefinition{Type: driverType})
-	if err != nil {
-		logger.Warnf("可复用 %s 驱动代理候选版本元数据不可用，仍允许安装：path=%s err=%v；建议在驱动管理中重装", displayName, executablePath, err)
-		return true
-	}
-	if !current {
-		actualLabel := strings.TrimSpace(actual)
-		if actualLabel == "" {
-			actualLabel = "空"
-		}
-		logger.Warnf("可复用 %s 驱动代理候选 revision 不匹配，仍允许安装：path=%s actual=%s expected=%s；建议在驱动管理中重装", displayName, executablePath, actualLabel, expected)
-		return true
-	}
-	return true
-}
-
-func resolveOptionalDriverAgentCandidatePaths(definition driverDefinition) []string {
-	driverType := normalizeDriverType(definition.Type)
-	names := optionalDriverExecutableBaseNames(driverType)
-	assetNames := optionalDriverReleaseAssetNames(driverType)
-	pathTypeNames := make([]string, 0, 2)
-	seenPathType := make(map[string]struct{}, 2)
-	appendPathType := func(typeName string) {
-		trimmed := strings.TrimSpace(typeName)
-		if trimmed == "" {
-			return
-		}
-		if _, ok := seenPathType[trimmed]; ok {
-			return
-		}
-		seenPathType[trimmed] = struct{}{}
-		pathTypeNames = append(pathTypeNames, trimmed)
-	}
-	appendPathType(optionalDriverPublicTypeName(driverType))
-
-	candidates := make([]string, 0, 12)
-	appendPath := func(pathText string) {
-		trimmed := strings.TrimSpace(pathText)
-		if trimmed != "" {
-			candidates = append(candidates, trimmed)
-		}
-	}
-
-	if exePath, err := os.Executable(); err == nil && strings.TrimSpace(exePath) != "" {
-		resolved := exePath
-		if evalPath, evalErr := filepath.EvalSymlinks(exePath); evalErr == nil && strings.TrimSpace(evalPath) != "" {
-			resolved = evalPath
-		}
-		exeDir := filepath.Dir(resolved)
-		for _, name := range names {
-			appendPath(filepath.Join(exeDir, name))
-		}
-		for _, assetName := range assetNames {
-			appendPath(filepath.Join(exeDir, assetName))
-		}
-		for _, typeName := range pathTypeNames {
-			for _, name := range names {
-				appendPath(filepath.Join(exeDir, "drivers", typeName, name))
-			}
-			for _, assetName := range assetNames {
-				appendPath(filepath.Join(exeDir, "drivers", typeName, assetName))
-			}
-		}
-
-		resourcesDir := filepath.Clean(filepath.Join(exeDir, "..", "Resources"))
-		for _, typeName := range pathTypeNames {
-			for _, name := range names {
-				appendPath(filepath.Join(resourcesDir, "drivers", typeName, name))
-			}
-			for _, assetName := range assetNames {
-				appendPath(filepath.Join(resourcesDir, "drivers", typeName, assetName))
-			}
-		}
-	}
-	if wd, err := os.Getwd(); err == nil && strings.TrimSpace(wd) != "" {
-		for _, assetName := range assetNames {
-			appendPath(filepath.Join(wd, "dist", assetName))
-			appendPath(filepath.Join(wd, assetName))
-		}
-	}
-
-	unique := make([]string, 0, len(candidates))
-	seen := make(map[string]struct{}, len(candidates))
-	for _, item := range candidates {
-		if _, ok := seen[item]; ok {
-			continue
-		}
-		seen[item] = struct{}{}
-		unique = append(unique, item)
-	}
-	return unique
-}
-
-func resolveDriverDisplayName(definition driverDefinition) string {
-	if strings.TrimSpace(definition.Name) != "" {
-		return strings.TrimSpace(definition.Name)
-	}
-	if strings.TrimSpace(definition.Type) != "" {
-		return strings.TrimSpace(definition.Type)
-	}
-	return "未知"
-}
-
-func activateOptionalDriverAgentBinary(driverType string, installPath string, runtimePath string) error {
-	source := strings.TrimSpace(installPath)
-	target := strings.TrimSpace(runtimePath)
-	if source == "" || target == "" {
-		return fmt.Errorf("agent path is empty")
-	}
-	if source == target {
-		return nil
-	}
-
-	absSource := source
-	absTarget := target
-	if value, err := filepath.Abs(source); err == nil && strings.TrimSpace(value) != "" {
-		absSource = value
-	}
-	if value, err := filepath.Abs(target); err == nil && strings.TrimSpace(value) != "" {
-		absTarget = value
-	}
-	if strings.EqualFold(absSource, absTarget) {
-		return nil
-	}
-	if err := copyAgentBinary(source, target); err != nil {
-		return err
-	}
-	return copyOptionalDriverSupportFilesFromDirectory(driverType, filepath.Dir(source), filepath.Dir(target))
-}
-
-func copyAgentBinary(sourcePath, targetPath string) error {
-	src, err := os.Open(sourcePath)
-	if err != nil {
-		return err
-	}
-	defer src.Close()
-
-	tempPath := targetPath + ".tmp"
-	_ = os.Remove(tempPath)
-	dst, err := os.Create(tempPath)
-	if err != nil {
-		return err
-	}
-	if _, err := io.Copy(dst, src); err != nil {
-		dst.Close()
-		_ = os.Remove(tempPath)
-		return err
-	}
-	if err := dst.Sync(); err != nil {
-		dst.Close()
-		_ = os.Remove(tempPath)
-		return err
-	}
-	if err := dst.Close(); err != nil {
-		_ = os.Remove(tempPath)
-		return err
-	}
-	if chmodErr := os.Chmod(tempPath, 0o755); chmodErr != nil && stdRuntime.GOOS != "windows" {
-		_ = os.Remove(tempPath)
-		return chmodErr
-	}
-	if err := renameTempFileOverTarget(tempPath, targetPath); err != nil {
-		_ = os.Remove(tempPath)
-		return err
-	}
-	if chmodErr := os.Chmod(targetPath, 0o755); chmodErr != nil && stdRuntime.GOOS != "windows" {
-		return chmodErr
-	}
-	return nil
-}
-
-func extractZipFileToPath(file *zip.File, targetPath string) error {
-	if file == nil {
-		return fmt.Errorf("zip 条目为空")
-	}
-	src, err := file.Open()
-	if err != nil {
-		return err
-	}
-	defer src.Close()
-	tempPath := targetPath + ".tmp"
-	_ = os.Remove(tempPath)
-	if err := os.MkdirAll(filepath.Dir(targetPath), 0o755); err != nil {
-		return err
-	}
-	dst, err := os.Create(tempPath)
-	if err != nil {
-		return err
-	}
-	if _, err := io.Copy(dst, src); err != nil {
-		dst.Close()
-		_ = os.Remove(tempPath)
-		return err
-	}
-	if err := dst.Sync(); err != nil {
-		dst.Close()
-		_ = os.Remove(tempPath)
-		return err
-	}
-	if err := dst.Close(); err != nil {
-		_ = os.Remove(tempPath)
-		return err
-	}
-	if err := renameTempFileOverTarget(tempPath, targetPath); err != nil {
-		_ = os.Remove(tempPath)
-		return err
-	}
-	return nil
-}
-
-func copyOptionalDriverSupportFile(sourcePath, targetPath string) error {
-	src, err := os.Open(sourcePath)
-	if err != nil {
-		return err
-	}
-	defer src.Close()
-
-	tempPath := targetPath + ".tmp"
-	_ = os.Remove(tempPath)
-	if err := os.MkdirAll(filepath.Dir(targetPath), 0o755); err != nil {
-		return err
-	}
-	dst, err := os.Create(tempPath)
-	if err != nil {
-		return err
-	}
-	if _, err := io.Copy(dst, src); err != nil {
-		dst.Close()
-		_ = os.Remove(tempPath)
-		return err
-	}
-	if err := dst.Sync(); err != nil {
-		dst.Close()
-		_ = os.Remove(tempPath)
-		return err
-	}
-	if err := dst.Close(); err != nil {
-		_ = os.Remove(tempPath)
-		return err
-	}
-	if err := renameTempFileOverTarget(tempPath, targetPath); err != nil {
-		_ = os.Remove(tempPath)
-		return err
-	}
-	return nil
-}
-
-func renameTempFileOverTarget(tempPath, targetPath string) error {
-	if err := os.Rename(tempPath, targetPath); err == nil {
-		return nil
-	} else {
-		firstErr := err
-		if removeErr := os.Remove(targetPath); removeErr != nil && !os.IsNotExist(removeErr) {
-			return firstErr
-		}
-		if retryErr := os.Rename(tempPath, targetPath); retryErr != nil {
-			return retryErr
-		}
-		return nil
-	}
-}
-
-func copyOptionalDriverSupportFilesFromDirectory(driverType string, sourceDir string, targetDir string) error {
-	names := optionalDriverSupportFileNames(driverType)
-	if len(names) == 0 {
-		return nil
-	}
-	sourceRoot := strings.TrimSpace(sourceDir)
-	targetRoot := strings.TrimSpace(targetDir)
-	if sourceRoot == "" || targetRoot == "" {
-		return fmt.Errorf("运行时依赖目录为空")
-	}
-	for _, name := range names {
-		sourcePath := filepath.Join(sourceRoot, name)
-		targetPath := filepath.Join(targetRoot, name)
-		if err := copyOptionalDriverSupportFile(sourcePath, targetPath); err != nil {
-			return fmt.Errorf("复制 %s 失败：%w", name, err)
-		}
-	}
-	return nil
-}
-
-func findOptionalDriverSupportFileInZip(files []*zip.File, agentEntryName string, supportName string) *zip.File {
-	normalizedAgent := filepath.ToSlash(strings.TrimPrefix(strings.TrimSpace(agentEntryName), "./"))
-	agentDir := filepath.ToSlash(filepath.Dir(normalizedAgent))
-	if agentDir == "." {
-		agentDir = ""
-	}
-	candidatePaths := []string{}
-	if agentDir != "" {
-		candidatePaths = append(candidatePaths, filepath.ToSlash(filepath.Join(agentDir, supportName)))
-	}
-	candidatePaths = append(candidatePaths, supportName)
-
-	for _, candidate := range candidatePaths {
-		for _, file := range files {
-			name := filepath.ToSlash(strings.TrimPrefix(strings.TrimSpace(file.Name), "./"))
-			if name == candidate {
-				return file
-			}
-		}
-		for _, file := range files {
-			name := filepath.ToSlash(strings.TrimPrefix(strings.TrimSpace(file.Name), "./"))
-			if strings.EqualFold(name, candidate) {
-				return file
-			}
-		}
-	}
-	for _, file := range files {
-		name := filepath.ToSlash(strings.TrimPrefix(strings.TrimSpace(file.Name), "./"))
-		if strings.EqualFold(filepath.Base(name), supportName) {
-			return file
-		}
-	}
-	return nil
-}
-
-func extractOptionalDriverSupportFilesFromZip(files []*zip.File, driverType string, agentEntryName string, targetDir string) error {
-	names := optionalDriverSupportFileNames(driverType)
-	if len(names) == 0 {
-		return nil
-	}
-	targetRoot := strings.TrimSpace(targetDir)
-	if targetRoot == "" {
-		return fmt.Errorf("运行时依赖目标目录为空")
-	}
-	for _, name := range names {
-		entry := findOptionalDriverSupportFileInZip(files, agentEntryName, name)
-		if entry == nil {
-			return fmt.Errorf("驱动包缺少运行时依赖：%s", name)
-		}
-		if err := extractZipFileToPath(entry, filepath.Join(targetRoot, name)); err != nil {
-			return fmt.Errorf("解压运行时依赖 %s 失败：%w", name, err)
-		}
-	}
-	return nil
-}
-
-func scaleProgress(downloaded, total, start, end int64) (int64, int64) {
-	if end <= start {
-		return end, 100
-	}
-	if total <= 0 {
-		return start, 100
-	}
-	if downloaded < 0 {
-		downloaded = 0
-	}
-	if downloaded > total {
-		downloaded = total
-	}
-	span := end - start
-	return start + ((downloaded * span) / total), 100
-}
-
-func preloadOptionalDriverPackageSizes(definitions []driverDefinition) map[string]int64 {
-	result := make(map[string]int64)
-	if len(definitions) == 0 {
-		return result
-	}
-
-	needed := make([]string, 0, len(definitions))
-	for _, definition := range definitions {
-		normalizedType := normalizeDriverType(definition.Type)
-		if normalizedType == "" || definition.BuiltIn {
-			continue
-		}
-		if !db.IsOptionalGoDriver(normalizedType) {
-			continue
-		}
-		if !db.IsOptionalGoDriverBuildIncluded(normalizedType) {
-			continue
-		}
-		needed = append(needed, normalizedType)
-	}
-	if len(needed) == 0 {
-		return result
-	}
-
-	tag := currentDriverReleaseTag()
-
-	fillFromSizes := func(sizeByAsset map[string]int64, driverTypes []string) []string {
-		missing := make([]string, 0, len(driverTypes))
-		for _, driverType := range driverTypes {
-			sizeBytes := resolveOptionalDriverAssetSize(sizeByAsset, driverType)
-			if sizeBytes > 0 {
-				result[driverType] = sizeBytes
-				continue
-			}
-			missing = append(missing, driverType)
-		}
-		return missing
-	}
-
-	pending := needed
-	if tag != "" {
-		if sizeByAsset, _, err := loadReleaseAssetSizesCached("tag:"+tag, func() (*githubRelease, error) {
-			return fetchReleaseByTag(tag)
-		}); err == nil {
-			pending = fillFromSizes(sizeByAsset, pending)
-		}
-	}
-	if len(pending) == 0 {
-		return result
-	}
-	if sizeByAsset, _, err := loadReleaseAssetSizesCached("latest", fetchLatestReleaseForDriverAssets); err == nil {
-		_ = fillFromSizes(sizeByAsset, pending)
-	}
-	return result
-}
-
-func loadReleaseAssetSizesCached(cacheKey string, fetch func() (*githubRelease, error)) (map[string]int64, map[string]bool, error) {
-	key := strings.TrimSpace(cacheKey)
-	if key == "" {
-		return nil, nil, fmt.Errorf("缓存 key 为空")
-	}
-
-	driverReleaseSizeMu.RLock()
-	cached, ok := driverReleaseSizeMap[key]
-	driverReleaseSizeMu.RUnlock()
-	if ok {
-		ttl := driverReleaseAssetSizeCacheTTL
-		if strings.TrimSpace(cached.Err) != "" {
-			ttl = driverReleaseAssetSizeErrorCacheTTL
-		}
-		if time.Since(cached.LoadedAt) < ttl {
-			if strings.TrimSpace(cached.Err) != "" {
-				return nil, nil, errors.New(strings.TrimSpace(cached.Err))
-			}
-			return cached.SizeByKey, cached.PublishedAssets, nil
-		}
-	}
-
-	release, err := fetch()
-	entry := driverReleaseAssetSizeCacheEntry{
-		LoadedAt:        time.Now(),
-		SizeByKey:       map[string]int64{},
-		PublishedAssets: map[string]bool{},
-	}
-	if err != nil {
-		entry.Err = err.Error()
-	} else {
-		entry.SizeByKey = buildReleaseAssetSizeMap(release)
-		entry.PublishedAssets = buildReleaseAssetNameMap(release)
-		if indexSizes, indexErr := fetchDriverBundleAssetSizeIndex(release); indexErr == nil {
-			for name, size := range indexSizes {
-				trimmedName := strings.TrimSpace(name)
-				if trimmedName == "" || size <= 0 {
-					continue
-				}
-				entry.SizeByKey[trimmedName] = size
-			}
-		}
-	}
-
-	driverReleaseSizeMu.Lock()
-	driverReleaseSizeMap[key] = entry
-	driverReleaseSizeMu.Unlock()
-
-	if err != nil {
-		return nil, nil, err
-	}
-	return entry.SizeByKey, entry.PublishedAssets, nil
-}
-
-func readReleaseAssetSizesFromCache(cacheKey string) (map[string]int64, map[string]bool, bool) {
-	key := strings.TrimSpace(cacheKey)
-	if key == "" {
-		return nil, nil, false
-	}
-
-	driverReleaseSizeMu.RLock()
-	cached, ok := driverReleaseSizeMap[key]
-	driverReleaseSizeMu.RUnlock()
-	if !ok {
-		return nil, nil, false
-	}
-
-	ttl := driverReleaseAssetSizeCacheTTL
-	if strings.TrimSpace(cached.Err) != "" {
-		ttl = driverReleaseAssetSizeErrorCacheTTL
-	}
-	if time.Since(cached.LoadedAt) >= ttl {
-		return nil, nil, false
-	}
-	if strings.TrimSpace(cached.Err) != "" {
-		return nil, nil, false
-	}
-	return cached.SizeByKey, cached.PublishedAssets, true
-}
-
-func buildReleaseAssetSizeMap(release *githubRelease) map[string]int64 {
-	sizes := make(map[string]int64)
-	if release == nil {
-		return sizes
-	}
-	for _, asset := range release.Assets {
-		name := strings.TrimSpace(asset.Name)
-		if name == "" || asset.Size <= 0 {
-			continue
-		}
-		sizes[name] = asset.Size
-	}
-	return sizes
-}
-
-func buildReleaseAssetNameMap(release *githubRelease) map[string]bool {
-	names := make(map[string]bool)
-	if release == nil {
-		return names
-	}
-	for _, asset := range release.Assets {
-		name := strings.TrimSpace(asset.Name)
-		if name == "" {
-			continue
-		}
-		names[name] = true
-	}
-	return names
-}
-
-func fetchDriverBundleAssetSizeIndex(release *githubRelease) (map[string]int64, error) {
-	if release == nil {
-		return nil, fmt.Errorf("release 为空")
-	}
-	indexURL := ""
-	for _, asset := range release.Assets {
-		if strings.EqualFold(strings.TrimSpace(asset.Name), optionalDriverBundleIndexAssetName) {
-			indexURL = strings.TrimSpace(asset.BrowserDownloadURL)
-			break
-		}
-	}
-	if indexURL == "" {
-		return nil, fmt.Errorf("未找到驱动总包索引资产")
-	}
-
-	client := newHTTPClientWithGlobalProxy(driverReleaseAssetSizeProbeTimeout)
-	req, err := http.NewRequest(http.MethodGet, indexURL, nil)
-	if err != nil {
-		return nil, err
-	}
-	req.Header.Set("User-Agent", "GoNavi-DriverManager")
-	req.Header.Set("Accept", "application/json")
-
-	resp, err := client.Do(req)
-	if err != nil {
-		return nil, err
-	}
-	defer resp.Body.Close()
-	if resp.StatusCode != http.StatusOK {
-		return nil, fmt.Errorf("拉取驱动总包索引失败：HTTP %d", resp.StatusCode)
-	}
-
-	limited := io.LimitReader(resp.Body, driverBundleIndexMaxSize)
-	decoder := json.NewDecoder(limited)
-	var index driverBundleAssetIndex
-	if err := decoder.Decode(&index); err != nil {
-		return nil, fmt.Errorf("解析驱动总包索引失败：%w", err)
-	}
-	if len(index.Assets) == 0 {
-		return nil, fmt.Errorf("驱动总包索引为空")
-	}
-	return index.Assets, nil
-}
-
-func fetchLatestReleaseForDriverAssets() (*githubRelease, error) {
-	return fetchDriverReleaseByURL(driverReleaseLatestAPIURL)
-}
-
-func resolveLatestPublishedDriverDownloadURL(definition driverDefinition) (string, bool) {
-	return resolveLatestPublishedDriverDownloadURLForVersion(definition, "")
-}
-
-func resolveLatestPublishedDriverDownloadURLForVersion(definition driverDefinition, selectedVersion string) (string, bool) {
-	driverType := normalizeDriverType(definition.Type)
-	if driverType == "" {
-		return "", false
-	}
-	if shouldUseDuckDBWindowsDynamicLibrary(driverType) {
-		if sizeByAsset, publishedAssets, ok := readReleaseAssetSizesFromCache("latest"); ok {
-			if publishedAssets[duckDBWindowsDriverZipAssetName] && sizeByAsset[duckDBWindowsDriverZipAssetName] > 0 {
-				if release, err := fetchLatestReleaseForDriverAssets(); err == nil {
-					if asset, found := findReleaseAssetByName(release, []string{duckDBWindowsDriverZipAssetName}); found {
-						return driverReleaseAssetAPIURL(asset), true
-					}
-				}
-				return driverReleaseLatestDownloadURL(duckDBWindowsDriverZipAssetName), true
-			}
-			return "", false
-		}
-
-		sizeByAsset, publishedAssets, err := loadReleaseAssetSizesCached("latest", fetchLatestReleaseForDriverAssets)
-		if err != nil {
-			return "", false
-		}
-		if publishedAssets[duckDBWindowsDriverZipAssetName] && sizeByAsset[duckDBWindowsDriverZipAssetName] > 0 {
-			if release, relErr := fetchLatestReleaseForDriverAssets(); relErr == nil {
-				if asset, found := findReleaseAssetByName(release, []string{duckDBWindowsDriverZipAssetName}); found {
-					return driverReleaseAssetAPIURL(asset), true
-				}
-			}
-			return driverReleaseLatestDownloadURL(duckDBWindowsDriverZipAssetName), true
-		}
-		return "", false
-	}
-
-	assetNames := optionalDriverReleaseAssetNamesForVersion(driverType, selectedVersion)
-	if len(assetNames) == 0 {
-		return "", false
-	}
-
-	if sizeByAsset, publishedAssets, ok := readReleaseAssetSizesFromCache("latest"); ok {
-		for _, assetName := range assetNames {
-			if publishedAssets[assetName] && sizeByAsset[assetName] > 0 {
-				if release, err := fetchLatestReleaseForDriverAssets(); err == nil {
-					if asset, found := findReleaseAssetByName(release, []string{assetName}); found {
-						return driverReleaseAssetAPIURL(asset), true
-					}
-				}
-				return driverReleaseLatestDownloadURL(assetName), true
-			}
-		}
-		return "", false
-	}
-
-	sizeByAsset, publishedAssets, err := loadReleaseAssetSizesCached("latest", fetchLatestReleaseForDriverAssets)
-	if err != nil {
-		return "", false
-	}
-	for _, assetName := range assetNames {
-		if publishedAssets[assetName] && sizeByAsset[assetName] > 0 {
-			if release, relErr := fetchLatestReleaseForDriverAssets(); relErr == nil {
-				if asset, found := findReleaseAssetByName(release, []string{assetName}); found {
-					return driverReleaseAssetAPIURL(asset), true
-				}
-			}
-			return driverReleaseLatestDownloadURL(assetName), true
-		}
-	}
-	return "", false
-}
-
-func fetchReleaseByTag(tag string) (*githubRelease, error) {
-	tagName := strings.TrimSpace(tag)
-	if tagName == "" {
-		return nil, fmt.Errorf("Tag 为空")
-	}
-	apiURL := fmt.Sprintf("https://api.github.com/repos/%s/releases/tags/%s", driverReleaseRepo, url.PathEscape(tagName))
-	return fetchDriverReleaseByURL(apiURL)
-}
-
-func fetchDriverReleaseByURL(apiURL string) (*githubRelease, error) {
-	urlText := strings.TrimSpace(apiURL)
-	if urlText == "" {
-		return nil, fmt.Errorf("API 地址为空")
-	}
-
-	client := newHTTPClientWithGlobalProxy(driverReleaseAssetSizeProbeTimeout)
-	req, err := http.NewRequest(http.MethodGet, urlText, nil)
-	if err != nil {
-		return nil, err
-	}
-	req.Header.Set("User-Agent", "GoNavi-DriverManager")
-	req.Header.Set("Accept", "application/vnd.github+json")
-
-	resp, err := client.Do(req)
-	if err != nil {
-		return nil, err
-	}
-	defer resp.Body.Close()
-	if resp.StatusCode != http.StatusOK {
-		return nil, fmt.Errorf("拉取 Release 信息失败：HTTP %d", resp.StatusCode)
-	}
-
-	var release githubRelease
-	if err := json.NewDecoder(resp.Body).Decode(&release); err != nil {
-		return nil, err
-	}
-	return &release, nil
-}
-
-func resolveDriverPackageSizeText(definition driverDefinition, pkg installedDriverPackage, packageMetaExists bool, packageSizeBytesMap map[string]int64) string {
-	if definition.BuiltIn {
-		return "内置"
-	}
-
-	normalizedType := normalizeDriverType(definition.Type)
-	if packageMetaExists {
-		sizeBytes := readInstalledPackageSizeBytes(pkg)
-		if sizeBytes > 0 {
-			return formatSizeMB(sizeBytes)
-		}
-	}
-	if sizeBytes, ok := packageSizeBytesMap[normalizedType]; ok && sizeBytes > 0 {
-		return formatSizeMB(sizeBytes)
-	}
-
-	if !db.IsOptionalGoDriverBuildIncluded(normalizedType) {
-		return "待发布"
-	}
-	return "-"
-}
-
-func readInstalledPackageSizeBytes(pkg installedDriverPackage) int64 {
-	pathText := strings.TrimSpace(pkg.ExecutablePath)
-	if pathText == "" {
-		pathText = strings.TrimSpace(pkg.FilePath)
-	}
-	if pathText == "" {
-		return 0
-	}
-	info, err := os.Stat(pathText)
-	if err != nil || info.IsDir() {
-		return 0
-	}
-	return info.Size()
-}
-
-func formatSizeMB(sizeBytes int64) string {
-	if sizeBytes <= 0 {
-		return "-"
-	}
-	sizeMB := float64(sizeBytes) / (1024 * 1024)
-	return fmt.Sprintf("%.2f MB", sizeMB)
-}
diff --git a/internal/app/methods_driver_assets.go b/internal/app/methods_driver_assets.go
new file mode 100644
index 0000000..37a9ff1
--- /dev/null
+++ b/internal/app/methods_driver_assets.go
@@ -0,0 +1,1354 @@
+package app
+
+import (
+	"archive/zip"
+	"crypto/sha256"
+	"encoding/hex"
+	"encoding/json"
+	"errors"
+	"fmt"
+	"io"
+	"net/http"
+	"net/url"
+	"os"
+	"path/filepath"
+	stdRuntime "runtime"
+	"sort"
+	"strings"
+	"time"
+
+	"GoNavi-Wails/internal/db"
+	"GoNavi-Wails/internal/logger"
+)
+
+func optionalDriverPublicTypeName(driverType string) string {
+	switch normalizeDriverType(driverType) {
+	case "diros":
+		return "doris"
+	default:
+		return normalizeDriverType(driverType)
+	}
+}
+
+func optionalDriverExecutableBaseNameForType(typeName string) string {
+	base := strings.TrimSpace(typeName)
+	if base == "" {
+		base = "unknown"
+	}
+	name := fmt.Sprintf("%s-driver-agent", base)
+	if stdRuntime.GOOS == "windows" {
+		return name + ".exe"
+	}
+	return name
+}
+
+func optionalDriverReleaseAssetNameForType(typeName string, goos string, goarch string) string {
+	base := strings.TrimSpace(typeName)
+	if base == "" {
+		base = "unknown"
+	}
+	name := fmt.Sprintf("%s-driver-agent-%s-%s", base, goos, goarch)
+	if strings.EqualFold(goos, "windows") {
+		return name + ".exe"
+	}
+	return name
+}
+
+func optionalDriverNameStemCandidates(driverType string, selectedVersion string) []string {
+	candidates := make([]string, 0, 3)
+	seen := make(map[string]struct{}, 3)
+	appendStem := func(stem string) {
+		trimmed := strings.TrimSpace(stem)
+		if trimmed == "" {
+			return
+		}
+		if _, ok := seen[trimmed]; ok {
+			return
+		}
+		seen[trimmed] = struct{}{}
+		candidates = append(candidates, trimmed)
+	}
+
+	base := fmt.Sprintf("%s-driver-agent", optionalDriverPublicTypeName(driverType))
+	if normalizeDriverType(driverType) == "mongodb" {
+		switch resolveMongoDriverMajorFromVersion(selectedVersion) {
+		case 1:
+			appendStem(base + "-v1")
+		case 2:
+			appendStem(base + "-v2")
+			appendStem(base)
+		default:
+			appendStem(base)
+		}
+		return candidates
+	}
+
+	appendStem(base)
+	return candidates
+}
+
+func optionalDriverExecutableBaseNamesForVersion(driverType string, selectedVersion string) []string {
+	names := make([]string, 0, 2)
+	seen := make(map[string]struct{}, 2)
+	appendName := func(stem string) {
+		name := strings.TrimSpace(stem)
+		if strings.TrimSpace(name) == "" {
+			return
+		}
+		if stdRuntime.GOOS == "windows" {
+			name += ".exe"
+		}
+		if _, ok := seen[name]; ok {
+			return
+		}
+		seen[name] = struct{}{}
+		names = append(names, name)
+	}
+
+	for _, stem := range optionalDriverNameStemCandidates(driverType, selectedVersion) {
+		appendName(stem)
+	}
+	return names
+}
+
+func optionalDriverExecutableBaseNames(driverType string) []string {
+	return optionalDriverExecutableBaseNamesForVersion(driverType, "")
+}
+
+func optionalDriverReleaseAssetNamesForVersion(driverType string, selectedVersion string) []string {
+	names := make([]string, 0, 2)
+	seen := make(map[string]struct{}, 2)
+	appendName := func(stem string) {
+		trimmedStem := strings.TrimSpace(stem)
+		if trimmedStem == "" {
+			return
+		}
+		name := fmt.Sprintf("%s-%s-%s", trimmedStem, stdRuntime.GOOS, stdRuntime.GOARCH)
+		if strings.EqualFold(stdRuntime.GOOS, "windows") {
+			name += ".exe"
+		}
+		if strings.TrimSpace(name) == "" {
+			return
+		}
+		if _, ok := seen[name]; ok {
+			return
+		}
+		seen[name] = struct{}{}
+		names = append(names, name)
+	}
+
+	for _, stem := range optionalDriverNameStemCandidates(driverType, selectedVersion) {
+		appendName(stem)
+	}
+	return names
+}
+
+func optionalDriverReleaseAssetNames(driverType string) []string {
+	return optionalDriverReleaseAssetNamesForVersion(driverType, "")
+}
+
+func optionalDriverExecutableBaseName(driverType string) string {
+	names := optionalDriverExecutableBaseNames(driverType)
+	if len(names) == 0 {
+		return optionalDriverExecutableBaseNameForType("")
+	}
+	return names[0]
+}
+
+func optionalDriverReleaseAssetName(driverType string) string {
+	names := optionalDriverReleaseAssetNames(driverType)
+	if len(names) == 0 {
+		return optionalDriverReleaseAssetNameForType("", stdRuntime.GOOS, stdRuntime.GOARCH)
+	}
+	return names[0]
+}
+
+func optionalDriverReleaseAssetNameForVersion(driverType string, selectedVersion string) string {
+	names := optionalDriverReleaseAssetNamesForVersion(driverType, selectedVersion)
+	if len(names) == 0 {
+		return optionalDriverReleaseAssetNameForType("", stdRuntime.GOOS, stdRuntime.GOARCH)
+	}
+	return names[0]
+}
+
+func currentDriverReleaseTag() string {
+	currentVersion := normalizeVersion(getCurrentVersion())
+	if currentVersion == "" || currentVersion == "0.0.0" {
+		return ""
+	}
+	if isDevelopmentDriverReleaseVersion(currentVersion) {
+		return driverReleaseDevTag
+	}
+	return "v" + currentVersion
+}
+
+func isDevelopmentDriverReleaseVersion(version string) bool {
+	normalized := strings.ToLower(strings.TrimSpace(normalizeVersion(version)))
+	if normalized == "" || normalized == "0.0.0" {
+		return false
+	}
+	if strings.HasPrefix(normalized, "dev-") {
+		return true
+	}
+	for _, marker := range []string{"-dev", "-test", "-local", "-snapshot"} {
+		if strings.Contains(normalized, marker) {
+			return true
+		}
+	}
+	return false
+}
+
+func driverReleaseDownloadURL(tag string, assetName string) string {
+	tagName := strings.TrimSpace(tag)
+	asset := strings.TrimSpace(assetName)
+	if tagName == "" || asset == "" {
+		return ""
+	}
+	return fmt.Sprintf("https://github.com/%s/releases/download/%s/%s", driverReleaseRepo, url.PathEscape(tagName), url.PathEscape(asset))
+}
+
+func driverReleaseLatestDownloadURL(assetName string) string {
+	asset := strings.TrimSpace(assetName)
+	if asset == "" {
+		return ""
+	}
+	return fmt.Sprintf("https://github.com/%s/releases/latest/download/%s", driverReleaseRepo, url.PathEscape(asset))
+}
+
+func findReleaseAssetByName(release *githubRelease, assetNames []string) (githubAsset, bool) {
+	if release == nil || len(release.Assets) == 0 || len(assetNames) == 0 {
+		return githubAsset{}, false
+	}
+	for _, expected := range assetNames {
+		trimmed := strings.TrimSpace(expected)
+		if trimmed == "" {
+			continue
+		}
+		for _, asset := range release.Assets {
+			if strings.EqualFold(strings.TrimSpace(asset.Name), trimmed) {
+				return asset, true
+			}
+		}
+	}
+	return githubAsset{}, false
+}
+
+func driverReleaseAssetAPIURL(asset githubAsset) string {
+	urlText := strings.TrimSpace(asset.URL)
+	if urlText != "" {
+		name := strings.TrimSpace(asset.Name)
+		if name == "" {
+			return urlText
+		}
+		parsed, err := url.Parse(urlText)
+		if err != nil {
+			return urlText
+		}
+		parsed.Fragment = name
+		return parsed.String()
+	}
+	urlText = strings.TrimSpace(asset.BrowserDownloadURL)
+	if urlText == "" {
+		return ""
+	}
+	return urlText
+}
+
+func optionalDriverBundlePlatformDir(goos string) string {
+	switch strings.ToLower(strings.TrimSpace(goos)) {
+	case "windows":
+		return "Windows"
+	case "darwin":
+		return "MacOS"
+	case "linux":
+		return "Linux"
+	default:
+		return "Unknown"
+	}
+}
+
+func optionalDriverBundleEntryPathsForVersion(driverType string, selectedVersion string) []string {
+	platformDir := optionalDriverBundlePlatformDir(stdRuntime.GOOS)
+	assetNames := optionalDriverReleaseAssetNamesForVersion(driverType, selectedVersion)
+	result := make([]string, 0, len(assetNames))
+	seen := make(map[string]struct{}, len(assetNames))
+	for _, assetName := range assetNames {
+		entry := filepath.ToSlash(filepath.Join(platformDir, assetName))
+		if _, ok := seen[entry]; ok {
+			continue
+		}
+		seen[entry] = struct{}{}
+		result = append(result, entry)
+	}
+	return result
+}
+
+func optionalDriverBundleEntryPaths(driverType string) []string {
+	return optionalDriverBundleEntryPathsForVersion(driverType, "")
+}
+
+func optionalDriverBundleEntryPathForVersion(driverType string, selectedVersion string) string {
+	paths := optionalDriverBundleEntryPathsForVersion(driverType, selectedVersion)
+	if len(paths) == 0 {
+		return filepath.ToSlash(filepath.Join(optionalDriverBundlePlatformDir(stdRuntime.GOOS), optionalDriverReleaseAssetNameForVersion(driverType, selectedVersion)))
+	}
+	return paths[0]
+}
+
+func optionalDriverBundleEntryPath(driverType string) string {
+	return optionalDriverBundleEntryPathForVersion(driverType, "")
+}
+
+func resolveOptionalDriverAssetSize(sizeByAsset map[string]int64, driverType string) int64 {
+	if len(sizeByAsset) == 0 {
+		return 0
+	}
+	for _, assetName := range optionalDriverReleaseAssetNames(driverType) {
+		sizeBytes := sizeByAsset[assetName]
+		if sizeBytes > 0 {
+			return sizeBytes
+		}
+	}
+	return 0
+}
+
+func resolveOptionalDriverAssetSizeForVersion(sizeByAsset map[string]int64, driverType string, version string) int64 {
+	if len(sizeByAsset) == 0 {
+		return 0
+	}
+	for _, assetName := range optionalDriverReleaseAssetNamesForVersion(driverType, version) {
+		sizeBytes := sizeByAsset[assetName]
+		if sizeBytes > 0 {
+			return sizeBytes
+		}
+	}
+	return 0
+}
+
+func resolveOptionalDriverBundleDownloadURLs() []string {
+	candidates := make([]string, 0, 2)
+	seen := make(map[string]struct{}, 2)
+	appendURL := func(value string) {
+		trimmed := strings.TrimSpace(value)
+		if trimmed == "" {
+			return
+		}
+		if _, ok := seen[trimmed]; ok {
+			return
+		}
+		seen[trimmed] = struct{}{}
+		candidates = append(candidates, trimmed)
+	}
+
+	if tag := currentDriverReleaseTag(); tag != "" {
+		if release, err := fetchReleaseByTag(tag); err == nil {
+			if asset, ok := findReleaseAssetByName(release, []string{optionalDriverBundleAssetName}); ok {
+				appendURL(driverReleaseAssetAPIURL(asset))
+			}
+		}
+		appendURL(driverReleaseDownloadURL(tag, optionalDriverBundleAssetName))
+	}
+	if release, err := fetchLatestReleaseForDriverAssets(); err == nil {
+		if asset, ok := findReleaseAssetByName(release, []string{optionalDriverBundleAssetName}); ok {
+			appendURL(driverReleaseAssetAPIURL(asset))
+		}
+	}
+	appendURL(driverReleaseLatestDownloadURL(optionalDriverBundleAssetName))
+	return candidates
+}
+
+func optionalDriverBundleCacheDir() (string, error) {
+	cacheDir := filepath.Join(os.TempDir(), "gonavi-driver-bundle-cache")
+	if err := os.MkdirAll(cacheDir, 0o755); err != nil {
+		return "", err
+	}
+	return cacheDir, nil
+}
+
+func optionalDriverBundleCachePath(bundleURL string) (string, error) {
+	cacheDir, err := optionalDriverBundleCacheDir()
+	if err != nil {
+		return "", err
+	}
+	sum := sha256.Sum256([]byte(strings.TrimSpace(bundleURL)))
+	return filepath.Join(cacheDir, hex.EncodeToString(sum[:])+".zip"), nil
+}
+
+func cleanupOptionalDriverBundleCache(keepPaths ...string) {
+	cacheDir, err := optionalDriverBundleCacheDir()
+	if err != nil {
+		return
+	}
+
+	keep := make(map[string]struct{}, len(keepPaths)+4)
+	for _, path := range keepPaths {
+		if strings.TrimSpace(path) != "" {
+			keep[filepath.Clean(path)] = struct{}{}
+		}
+	}
+	optionalDriverBundleDownloadMu.Lock()
+	for _, state := range optionalDriverBundleDownloads {
+		if state != nil && strings.TrimSpace(state.path) != "" {
+			keep[filepath.Clean(state.path)] = struct{}{}
+		}
+	}
+	optionalDriverBundleDownloadMu.Unlock()
+
+	type cacheFile struct {
+		path    string
+		modTime time.Time
+	}
+	cacheFiles := make([]cacheFile, 0)
+	now := time.Now()
+	entries, err := os.ReadDir(cacheDir)
+	if err != nil {
+		return
+	}
+	for _, entry := range entries {
+		if entry.IsDir() {
+			continue
+		}
+		path := filepath.Join(cacheDir, entry.Name())
+		cleanPath := filepath.Clean(path)
+		if _, ok := keep[cleanPath]; ok {
+			continue
+		}
+		info, statErr := entry.Info()
+		if statErr != nil {
+			continue
+		}
+		name := strings.ToLower(strings.TrimSpace(entry.Name()))
+		if strings.HasSuffix(name, ".tmp") {
+			if now.Sub(info.ModTime()) > 24*time.Hour {
+				_ = os.Remove(path)
+			}
+			continue
+		}
+		if !strings.HasSuffix(name, ".zip") {
+			continue
+		}
+		if now.Sub(info.ModTime()) > optionalDriverBundleCacheMaxAge {
+			_ = os.Remove(path)
+			continue
+		}
+		cacheFiles = append(cacheFiles, cacheFile{path: path, modTime: info.ModTime()})
+	}
+	if len(cacheFiles) <= optionalDriverBundleCacheMaxFiles {
+		return
+	}
+	sort.Slice(cacheFiles, func(i, j int) bool {
+		return cacheFiles[i].modTime.After(cacheFiles[j].modTime)
+	})
+	for _, item := range cacheFiles[optionalDriverBundleCacheMaxFiles:] {
+		_ = os.Remove(item.path)
+	}
+}
+
+func downloadOptionalDriverBundleToCache(bundleURL string, onProgress func(downloaded, total int64)) (string, error) {
+	cachePath, err := optionalDriverBundleCachePath(bundleURL)
+	if err != nil {
+		return "", err
+	}
+	tempPath := cachePath + fmt.Sprintf(".%d.tmp", time.Now().UnixNano())
+	_ = os.Remove(tempPath)
+	if _, err := downloadFileWithHashWithTimeout(bundleURL, tempPath, onProgress, optionalDriverBundleDownloadTimeout); err != nil {
+		_ = os.Remove(tempPath)
+		return "", err
+	}
+	if err := os.Remove(cachePath); err != nil && !os.IsNotExist(err) {
+		_ = os.Remove(tempPath)
+		return "", err
+	}
+	if err := os.Rename(tempPath, cachePath); err != nil {
+		_ = os.Remove(tempPath)
+		return "", err
+	}
+	reader, err := zip.OpenReader(cachePath)
+	if err != nil {
+		_ = os.Remove(cachePath)
+		return "", fmt.Errorf("打开驱动总包失败：%w", err)
+	}
+	if err := reader.Close(); err != nil {
+		_ = os.Remove(cachePath)
+		return "", fmt.Errorf("关闭驱动总包失败：%w", err)
+	}
+	cleanupOptionalDriverBundleCache(cachePath)
+	return cachePath, nil
+}
+
+func acquireOptionalDriverBundlePath(bundleURL string, onProgress func(downloaded, total int64), onWaiting func()) (string, error) {
+	trimmedURL := strings.TrimSpace(bundleURL)
+	if trimmedURL == "" {
+		return "", fmt.Errorf("驱动总包下载地址为空")
+	}
+
+	for {
+		optionalDriverBundleDownloadMu.Lock()
+		state, ok := optionalDriverBundleDownloads[trimmedURL]
+		if ok {
+			if state.finished {
+				path := strings.TrimSpace(state.path)
+				err := state.err
+				if err == nil && path != "" && fileExists(path) {
+					optionalDriverBundleDownloadMu.Unlock()
+					return path, nil
+				}
+				delete(optionalDriverBundleDownloads, trimmedURL)
+				optionalDriverBundleDownloadMu.Unlock()
+				continue
+			}
+			done := state.done
+			optionalDriverBundleDownloadMu.Unlock()
+			if onWaiting != nil {
+				onWaiting()
+			}
+			<-done
+			optionalDriverBundleDownloadMu.Lock()
+			path := strings.TrimSpace(state.path)
+			err := state.err
+			if err == nil && path != "" && fileExists(path) {
+				optionalDriverBundleDownloadMu.Unlock()
+				return path, nil
+			}
+			if current, exists := optionalDriverBundleDownloads[trimmedURL]; exists && current == state {
+				delete(optionalDriverBundleDownloads, trimmedURL)
+			}
+			optionalDriverBundleDownloadMu.Unlock()
+			if err == nil {
+				err = fmt.Errorf("驱动总包缓存文件不可用")
+			}
+			return "", err
+		}
+
+		state = &optionalDriverBundleDownloadState{done: make(chan struct{})}
+		optionalDriverBundleDownloads[trimmedURL] = state
+		optionalDriverBundleDownloadMu.Unlock()
+
+		path, err := downloadOptionalDriverBundleToCache(trimmedURL, onProgress)
+		optionalDriverBundleDownloadMu.Lock()
+		state.path = path
+		state.err = err
+		state.finished = true
+		if err != nil {
+			delete(optionalDriverBundleDownloads, trimmedURL)
+		}
+		close(state.done)
+		optionalDriverBundleDownloadMu.Unlock()
+
+		if err != nil {
+			return "", err
+		}
+		return path, nil
+	}
+}
+
+func resolveOptionalDriverAgentDownloadURLs(definition driverDefinition, rawURL string, selectedVersion string) []string {
+	candidates := make([]string, 0, 3)
+	seen := make(map[string]struct{}, 3)
+	driverType := normalizeDriverType(definition.Type)
+	appendURL := func(value string) {
+		trimmed := strings.TrimSpace(value)
+		if trimmed == "" {
+			return
+		}
+		if _, ok := seen[trimmed]; ok {
+			return
+		}
+		seen[trimmed] = struct{}{}
+		candidates = append(candidates, trimmed)
+	}
+
+	restrictToExplicitArtifact := shouldRestrictToExplicitVersionArtifact(definition, selectedVersion)
+	appendPublishedURLs := func() {
+		if tag := currentDriverReleaseTag(); tag != "" {
+			if publishedURL, ok := resolvePublishedDriverDownloadURLForTag(definition, selectedVersion, tag); ok {
+				appendURL(publishedURL)
+			}
+		}
+		if publishedURL, ok := resolveLatestPublishedDriverDownloadURLForVersion(definition, selectedVersion); ok {
+			appendURL(publishedURL)
+		}
+	}
+
+	if !restrictToExplicitArtifact && shouldPreferPublishedOptionalDriverDownloads(driverType) {
+		appendPublishedURLs()
+	}
+
+	if parsed, err := url.Parse(strings.TrimSpace(rawURL)); err == nil {
+		switch strings.ToLower(strings.TrimSpace(parsed.Scheme)) {
+		case "http", "https":
+			appendURL(parsed.String())
+		}
+	}
+	if restrictToExplicitArtifact {
+		return candidates
+	}
+
+	if !shouldPreferPublishedOptionalDriverDownloads(driverType) {
+		appendPublishedURLs()
+	}
+	return candidates
+}
+
+func findExistingOptionalDriverAgentCandidate(definition driverDefinition, targetPath string) (string, bool) {
+	driverType := normalizeDriverType(definition.Type)
+	targetAbs, _ := filepath.Abs(targetPath)
+	candidates := resolveOptionalDriverAgentCandidatePaths(definition)
+	for _, candidate := range candidates {
+		candidate = strings.TrimSpace(candidate)
+		if candidate == "" {
+			continue
+		}
+		absPath, err := filepath.Abs(candidate)
+		if err != nil || absPath == "" {
+			continue
+		}
+		if targetAbs != "" && absPath == targetAbs {
+			continue
+		}
+		info, statErr := os.Stat(absPath)
+		if statErr != nil || info.IsDir() {
+			continue
+		}
+		if validateErr := validateOptionalDriverAgentExecutableFunc(driverType, absPath); validateErr != nil {
+			continue
+		}
+		if !isReusableOptionalDriverAgentCandidateRevisionAcceptable(driverType, absPath) {
+			continue
+		}
+		return absPath, true
+	}
+	return "", false
+}
+
+func isReusableOptionalDriverAgentCandidateRevisionAcceptable(driverType string, executablePath string) bool {
+	expected := strings.TrimSpace(db.OptionalDriverAgentRevision(driverType))
+	if expected == "" {
+		return true
+	}
+	actual, current, err := optionalDriverAgentRevisionCurrent(driverType, executablePath)
+	displayName := resolveDriverDisplayName(driverDefinition{Type: driverType})
+	if err != nil {
+		logger.Warnf("可复用 %s 驱动代理候选版本元数据不可用，仍允许安装：path=%s err=%v；建议在驱动管理中重装", displayName, executablePath, err)
+		return true
+	}
+	if !current {
+		actualLabel := strings.TrimSpace(actual)
+		if actualLabel == "" {
+			actualLabel = "空"
+		}
+		logger.Warnf("可复用 %s 驱动代理候选 revision 不匹配，仍允许安装：path=%s actual=%s expected=%s；建议在驱动管理中重装", displayName, executablePath, actualLabel, expected)
+		return true
+	}
+	return true
+}
+
+func resolveOptionalDriverAgentCandidatePaths(definition driverDefinition) []string {
+	driverType := normalizeDriverType(definition.Type)
+	names := optionalDriverExecutableBaseNames(driverType)
+	assetNames := optionalDriverReleaseAssetNames(driverType)
+	pathTypeNames := make([]string, 0, 2)
+	seenPathType := make(map[string]struct{}, 2)
+	appendPathType := func(typeName string) {
+		trimmed := strings.TrimSpace(typeName)
+		if trimmed == "" {
+			return
+		}
+		if _, ok := seenPathType[trimmed]; ok {
+			return
+		}
+		seenPathType[trimmed] = struct{}{}
+		pathTypeNames = append(pathTypeNames, trimmed)
+	}
+	appendPathType(optionalDriverPublicTypeName(driverType))
+
+	candidates := make([]string, 0, 12)
+	appendPath := func(pathText string) {
+		trimmed := strings.TrimSpace(pathText)
+		if trimmed != "" {
+			candidates = append(candidates, trimmed)
+		}
+	}
+
+	if exePath, err := os.Executable(); err == nil && strings.TrimSpace(exePath) != "" {
+		resolved := exePath
+		if evalPath, evalErr := filepath.EvalSymlinks(exePath); evalErr == nil && strings.TrimSpace(evalPath) != "" {
+			resolved = evalPath
+		}
+		exeDir := filepath.Dir(resolved)
+		for _, name := range names {
+			appendPath(filepath.Join(exeDir, name))
+		}
+		for _, assetName := range assetNames {
+			appendPath(filepath.Join(exeDir, assetName))
+		}
+		for _, typeName := range pathTypeNames {
+			for _, name := range names {
+				appendPath(filepath.Join(exeDir, "drivers", typeName, name))
+			}
+			for _, assetName := range assetNames {
+				appendPath(filepath.Join(exeDir, "drivers", typeName, assetName))
+			}
+		}
+
+		resourcesDir := filepath.Clean(filepath.Join(exeDir, "..", "Resources"))
+		for _, typeName := range pathTypeNames {
+			for _, name := range names {
+				appendPath(filepath.Join(resourcesDir, "drivers", typeName, name))
+			}
+			for _, assetName := range assetNames {
+				appendPath(filepath.Join(resourcesDir, "drivers", typeName, assetName))
+			}
+		}
+	}
+	if wd, err := os.Getwd(); err == nil && strings.TrimSpace(wd) != "" {
+		for _, assetName := range assetNames {
+			appendPath(filepath.Join(wd, "dist", assetName))
+			appendPath(filepath.Join(wd, assetName))
+		}
+	}
+
+	unique := make([]string, 0, len(candidates))
+	seen := make(map[string]struct{}, len(candidates))
+	for _, item := range candidates {
+		if _, ok := seen[item]; ok {
+			continue
+		}
+		seen[item] = struct{}{}
+		unique = append(unique, item)
+	}
+	return unique
+}
+
+func resolveDriverDisplayName(definition driverDefinition) string {
+	if strings.TrimSpace(definition.Name) != "" {
+		return strings.TrimSpace(definition.Name)
+	}
+	if strings.TrimSpace(definition.Type) != "" {
+		return strings.TrimSpace(definition.Type)
+	}
+	return "未知"
+}
+
+func activateOptionalDriverAgentBinary(driverType string, installPath string, runtimePath string) error {
+	source := strings.TrimSpace(installPath)
+	target := strings.TrimSpace(runtimePath)
+	if source == "" || target == "" {
+		return fmt.Errorf("agent path is empty")
+	}
+	if source == target {
+		return nil
+	}
+
+	absSource := source
+	absTarget := target
+	if value, err := filepath.Abs(source); err == nil && strings.TrimSpace(value) != "" {
+		absSource = value
+	}
+	if value, err := filepath.Abs(target); err == nil && strings.TrimSpace(value) != "" {
+		absTarget = value
+	}
+	if strings.EqualFold(absSource, absTarget) {
+		return nil
+	}
+	if err := copyAgentBinary(source, target); err != nil {
+		return err
+	}
+	return copyOptionalDriverSupportFilesFromDirectory(driverType, filepath.Dir(source), filepath.Dir(target))
+}
+
+func copyAgentBinary(sourcePath, targetPath string) error {
+	src, err := os.Open(sourcePath)
+	if err != nil {
+		return err
+	}
+	defer src.Close()
+
+	tempPath := targetPath + ".tmp"
+	_ = os.Remove(tempPath)
+	dst, err := os.Create(tempPath)
+	if err != nil {
+		return err
+	}
+	if _, err := io.Copy(dst, src); err != nil {
+		dst.Close()
+		_ = os.Remove(tempPath)
+		return err
+	}
+	if err := dst.Sync(); err != nil {
+		dst.Close()
+		_ = os.Remove(tempPath)
+		return err
+	}
+	if err := dst.Close(); err != nil {
+		_ = os.Remove(tempPath)
+		return err
+	}
+	if chmodErr := os.Chmod(tempPath, 0o755); chmodErr != nil && stdRuntime.GOOS != "windows" {
+		_ = os.Remove(tempPath)
+		return chmodErr
+	}
+	if err := renameTempFileOverTarget(tempPath, targetPath); err != nil {
+		_ = os.Remove(tempPath)
+		return err
+	}
+	if chmodErr := os.Chmod(targetPath, 0o755); chmodErr != nil && stdRuntime.GOOS != "windows" {
+		return chmodErr
+	}
+	return nil
+}
+
+func extractZipFileToPath(file *zip.File, targetPath string) error {
+	if file == nil {
+		return fmt.Errorf("zip 条目为空")
+	}
+	src, err := file.Open()
+	if err != nil {
+		return err
+	}
+	defer src.Close()
+	tempPath := targetPath + ".tmp"
+	_ = os.Remove(tempPath)
+	if err := os.MkdirAll(filepath.Dir(targetPath), 0o755); err != nil {
+		return err
+	}
+	dst, err := os.Create(tempPath)
+	if err != nil {
+		return err
+	}
+	if _, err := io.Copy(dst, src); err != nil {
+		dst.Close()
+		_ = os.Remove(tempPath)
+		return err
+	}
+	if err := dst.Sync(); err != nil {
+		dst.Close()
+		_ = os.Remove(tempPath)
+		return err
+	}
+	if err := dst.Close(); err != nil {
+		_ = os.Remove(tempPath)
+		return err
+	}
+	if err := renameTempFileOverTarget(tempPath, targetPath); err != nil {
+		_ = os.Remove(tempPath)
+		return err
+	}
+	return nil
+}
+
+func copyOptionalDriverSupportFile(sourcePath, targetPath string) error {
+	src, err := os.Open(sourcePath)
+	if err != nil {
+		return err
+	}
+	defer src.Close()
+
+	tempPath := targetPath + ".tmp"
+	_ = os.Remove(tempPath)
+	if err := os.MkdirAll(filepath.Dir(targetPath), 0o755); err != nil {
+		return err
+	}
+	dst, err := os.Create(tempPath)
+	if err != nil {
+		return err
+	}
+	if _, err := io.Copy(dst, src); err != nil {
+		dst.Close()
+		_ = os.Remove(tempPath)
+		return err
+	}
+	if err := dst.Sync(); err != nil {
+		dst.Close()
+		_ = os.Remove(tempPath)
+		return err
+	}
+	if err := dst.Close(); err != nil {
+		_ = os.Remove(tempPath)
+		return err
+	}
+	if err := renameTempFileOverTarget(tempPath, targetPath); err != nil {
+		_ = os.Remove(tempPath)
+		return err
+	}
+	return nil
+}
+
+func renameTempFileOverTarget(tempPath, targetPath string) error {
+	if err := os.Rename(tempPath, targetPath); err == nil {
+		return nil
+	} else {
+		firstErr := err
+		if removeErr := os.Remove(targetPath); removeErr != nil && !os.IsNotExist(removeErr) {
+			return firstErr
+		}
+		if retryErr := os.Rename(tempPath, targetPath); retryErr != nil {
+			return retryErr
+		}
+		return nil
+	}
+}
+
+func copyOptionalDriverSupportFilesFromDirectory(driverType string, sourceDir string, targetDir string) error {
+	names := optionalDriverSupportFileNames(driverType)
+	if len(names) == 0 {
+		return nil
+	}
+	sourceRoot := strings.TrimSpace(sourceDir)
+	targetRoot := strings.TrimSpace(targetDir)
+	if sourceRoot == "" || targetRoot == "" {
+		return fmt.Errorf("运行时依赖目录为空")
+	}
+	for _, name := range names {
+		sourcePath := filepath.Join(sourceRoot, name)
+		targetPath := filepath.Join(targetRoot, name)
+		if err := copyOptionalDriverSupportFile(sourcePath, targetPath); err != nil {
+			return fmt.Errorf("复制 %s 失败：%w", name, err)
+		}
+	}
+	return nil
+}
+
+func findOptionalDriverSupportFileInZip(files []*zip.File, agentEntryName string, supportName string) *zip.File {
+	normalizedAgent := filepath.ToSlash(strings.TrimPrefix(strings.TrimSpace(agentEntryName), "./"))
+	agentDir := filepath.ToSlash(filepath.Dir(normalizedAgent))
+	if agentDir == "." {
+		agentDir = ""
+	}
+	candidatePaths := []string{}
+	if agentDir != "" {
+		candidatePaths = append(candidatePaths, filepath.ToSlash(filepath.Join(agentDir, supportName)))
+	}
+	candidatePaths = append(candidatePaths, supportName)
+
+	for _, candidate := range candidatePaths {
+		for _, file := range files {
+			name := filepath.ToSlash(strings.TrimPrefix(strings.TrimSpace(file.Name), "./"))
+			if name == candidate {
+				return file
+			}
+		}
+		for _, file := range files {
+			name := filepath.ToSlash(strings.TrimPrefix(strings.TrimSpace(file.Name), "./"))
+			if strings.EqualFold(name, candidate) {
+				return file
+			}
+		}
+	}
+	for _, file := range files {
+		name := filepath.ToSlash(strings.TrimPrefix(strings.TrimSpace(file.Name), "./"))
+		if strings.EqualFold(filepath.Base(name), supportName) {
+			return file
+		}
+	}
+	return nil
+}
+
+func extractOptionalDriverSupportFilesFromZip(files []*zip.File, driverType string, agentEntryName string, targetDir string) error {
+	names := optionalDriverSupportFileNames(driverType)
+	if len(names) == 0 {
+		return nil
+	}
+	targetRoot := strings.TrimSpace(targetDir)
+	if targetRoot == "" {
+		return fmt.Errorf("运行时依赖目标目录为空")
+	}
+	for _, name := range names {
+		entry := findOptionalDriverSupportFileInZip(files, agentEntryName, name)
+		if entry == nil {
+			return fmt.Errorf("驱动包缺少运行时依赖：%s", name)
+		}
+		if err := extractZipFileToPath(entry, filepath.Join(targetRoot, name)); err != nil {
+			return fmt.Errorf("解压运行时依赖 %s 失败：%w", name, err)
+		}
+	}
+	return nil
+}
+
+func scaleProgress(downloaded, total, start, end int64) (int64, int64) {
+	if end <= start {
+		return end, 100
+	}
+	if total <= 0 {
+		return start, 100
+	}
+	if downloaded < 0 {
+		downloaded = 0
+	}
+	if downloaded > total {
+		downloaded = total
+	}
+	span := end - start
+	return start + ((downloaded * span) / total), 100
+}
+
+func preloadOptionalDriverPackageSizes(definitions []driverDefinition) map[string]int64 {
+	result := make(map[string]int64)
+	if len(definitions) == 0 {
+		return result
+	}
+
+	needed := make([]string, 0, len(definitions))
+	for _, definition := range definitions {
+		normalizedType := normalizeDriverType(definition.Type)
+		if normalizedType == "" || definition.BuiltIn {
+			continue
+		}
+		if !db.IsOptionalGoDriver(normalizedType) {
+			continue
+		}
+		if !db.IsOptionalGoDriverBuildIncluded(normalizedType) {
+			continue
+		}
+		needed = append(needed, normalizedType)
+	}
+	if len(needed) == 0 {
+		return result
+	}
+
+	tag := currentDriverReleaseTag()
+
+	fillFromSizes := func(sizeByAsset map[string]int64, driverTypes []string) []string {
+		missing := make([]string, 0, len(driverTypes))
+		for _, driverType := range driverTypes {
+			sizeBytes := resolveOptionalDriverAssetSize(sizeByAsset, driverType)
+			if sizeBytes > 0 {
+				result[driverType] = sizeBytes
+				continue
+			}
+			missing = append(missing, driverType)
+		}
+		return missing
+	}
+
+	pending := needed
+	if tag != "" {
+		if sizeByAsset, _, err := loadReleaseAssetSizesCached("tag:"+tag, func() (*githubRelease, error) {
+			return fetchReleaseByTag(tag)
+		}); err == nil {
+			pending = fillFromSizes(sizeByAsset, pending)
+		}
+	}
+	if len(pending) == 0 {
+		return result
+	}
+	if sizeByAsset, _, err := loadReleaseAssetSizesCached("latest", fetchLatestReleaseForDriverAssets); err == nil {
+		_ = fillFromSizes(sizeByAsset, pending)
+	}
+	return result
+}
+
+func loadReleaseAssetSizesCached(cacheKey string, fetch func() (*githubRelease, error)) (map[string]int64, map[string]bool, error) {
+	key := strings.TrimSpace(cacheKey)
+	if key == "" {
+		return nil, nil, fmt.Errorf("缓存 key 为空")
+	}
+
+	driverReleaseSizeMu.RLock()
+	cached, ok := driverReleaseSizeMap[key]
+	driverReleaseSizeMu.RUnlock()
+	if ok {
+		ttl := driverReleaseAssetSizeCacheTTL
+		if strings.TrimSpace(cached.Err) != "" {
+			ttl = driverReleaseAssetSizeErrorCacheTTL
+		}
+		if time.Since(cached.LoadedAt) < ttl {
+			if strings.TrimSpace(cached.Err) != "" {
+				return nil, nil, errors.New(strings.TrimSpace(cached.Err))
+			}
+			return cached.SizeByKey, cached.PublishedAssets, nil
+		}
+	}
+
+	release, err := fetch()
+	entry := driverReleaseAssetSizeCacheEntry{
+		LoadedAt:        time.Now(),
+		SizeByKey:       map[string]int64{},
+		PublishedAssets: map[string]bool{},
+	}
+	if err != nil {
+		entry.Err = err.Error()
+	} else {
+		entry.SizeByKey = buildReleaseAssetSizeMap(release)
+		entry.PublishedAssets = buildReleaseAssetNameMap(release)
+		if indexSizes, indexErr := fetchDriverBundleAssetSizeIndex(release); indexErr == nil {
+			for name, size := range indexSizes {
+				trimmedName := strings.TrimSpace(name)
+				if trimmedName == "" || size <= 0 {
+					continue
+				}
+				entry.SizeByKey[trimmedName] = size
+			}
+		}
+	}
+
+	driverReleaseSizeMu.Lock()
+	driverReleaseSizeMap[key] = entry
+	driverReleaseSizeMu.Unlock()
+
+	if err != nil {
+		return nil, nil, err
+	}
+	return entry.SizeByKey, entry.PublishedAssets, nil
+}
+
+func readReleaseAssetSizesFromCache(cacheKey string) (map[string]int64, map[string]bool, bool) {
+	key := strings.TrimSpace(cacheKey)
+	if key == "" {
+		return nil, nil, false
+	}
+
+	driverReleaseSizeMu.RLock()
+	cached, ok := driverReleaseSizeMap[key]
+	driverReleaseSizeMu.RUnlock()
+	if !ok {
+		return nil, nil, false
+	}
+
+	ttl := driverReleaseAssetSizeCacheTTL
+	if strings.TrimSpace(cached.Err) != "" {
+		ttl = driverReleaseAssetSizeErrorCacheTTL
+	}
+	if time.Since(cached.LoadedAt) >= ttl {
+		return nil, nil, false
+	}
+	if strings.TrimSpace(cached.Err) != "" {
+		return nil, nil, false
+	}
+	return cached.SizeByKey, cached.PublishedAssets, true
+}
+
+func buildReleaseAssetSizeMap(release *githubRelease) map[string]int64 {
+	sizes := make(map[string]int64)
+	if release == nil {
+		return sizes
+	}
+	for _, asset := range release.Assets {
+		name := strings.TrimSpace(asset.Name)
+		if name == "" || asset.Size <= 0 {
+			continue
+		}
+		sizes[name] = asset.Size
+	}
+	return sizes
+}
+
+func buildReleaseAssetNameMap(release *githubRelease) map[string]bool {
+	names := make(map[string]bool)
+	if release == nil {
+		return names
+	}
+	for _, asset := range release.Assets {
+		name := strings.TrimSpace(asset.Name)
+		if name == "" {
+			continue
+		}
+		names[name] = true
+	}
+	return names
+}
+
+func fetchDriverBundleAssetSizeIndex(release *githubRelease) (map[string]int64, error) {
+	if release == nil {
+		return nil, fmt.Errorf("release 为空")
+	}
+	indexURL := ""
+	for _, asset := range release.Assets {
+		if strings.EqualFold(strings.TrimSpace(asset.Name), optionalDriverBundleIndexAssetName) {
+			indexURL = strings.TrimSpace(asset.BrowserDownloadURL)
+			break
+		}
+	}
+	if indexURL == "" {
+		return nil, fmt.Errorf("未找到驱动总包索引资产")
+	}
+
+	client := newHTTPClientWithGlobalProxy(driverReleaseAssetSizeProbeTimeout)
+	req, err := http.NewRequest(http.MethodGet, indexURL, nil)
+	if err != nil {
+		return nil, err
+	}
+	req.Header.Set("User-Agent", "GoNavi-DriverManager")
+	req.Header.Set("Accept", "application/json")
+
+	resp, err := client.Do(req)
+	if err != nil {
+		return nil, err
+	}
+	defer resp.Body.Close()
+	if resp.StatusCode != http.StatusOK {
+		return nil, fmt.Errorf("拉取驱动总包索引失败：HTTP %d", resp.StatusCode)
+	}
+
+	limited := io.LimitReader(resp.Body, driverBundleIndexMaxSize)
+	decoder := json.NewDecoder(limited)
+	var index driverBundleAssetIndex
+	if err := decoder.Decode(&index); err != nil {
+		return nil, fmt.Errorf("解析驱动总包索引失败：%w", err)
+	}
+	if len(index.Assets) == 0 {
+		return nil, fmt.Errorf("驱动总包索引为空")
+	}
+	return index.Assets, nil
+}
+
+func fetchLatestReleaseForDriverAssets() (*githubRelease, error) {
+	return fetchDriverReleaseByURL(driverReleaseLatestAPIURL)
+}
+
+func resolveLatestPublishedDriverDownloadURL(definition driverDefinition) (string, bool) {
+	return resolveLatestPublishedDriverDownloadURLForVersion(definition, "")
+}
+
+func resolveLatestPublishedDriverDownloadURLForVersion(definition driverDefinition, selectedVersion string) (string, bool) {
+	driverType := normalizeDriverType(definition.Type)
+	if driverType == "" {
+		return "", false
+	}
+	if shouldUseDuckDBWindowsDynamicLibrary(driverType) {
+		if sizeByAsset, publishedAssets, ok := readReleaseAssetSizesFromCache("latest"); ok {
+			if publishedAssets[duckDBWindowsDriverZipAssetName] && sizeByAsset[duckDBWindowsDriverZipAssetName] > 0 {
+				if release, err := fetchLatestReleaseForDriverAssets(); err == nil {
+					if asset, found := findReleaseAssetByName(release, []string{duckDBWindowsDriverZipAssetName}); found {
+						return driverReleaseAssetAPIURL(asset), true
+					}
+				}
+				return driverReleaseLatestDownloadURL(duckDBWindowsDriverZipAssetName), true
+			}
+			return "", false
+		}
+
+		sizeByAsset, publishedAssets, err := loadReleaseAssetSizesCached("latest", fetchLatestReleaseForDriverAssets)
+		if err != nil {
+			return "", false
+		}
+		if publishedAssets[duckDBWindowsDriverZipAssetName] && sizeByAsset[duckDBWindowsDriverZipAssetName] > 0 {
+			if release, relErr := fetchLatestReleaseForDriverAssets(); relErr == nil {
+				if asset, found := findReleaseAssetByName(release, []string{duckDBWindowsDriverZipAssetName}); found {
+					return driverReleaseAssetAPIURL(asset), true
+				}
+			}
+			return driverReleaseLatestDownloadURL(duckDBWindowsDriverZipAssetName), true
+		}
+		return "", false
+	}
+
+	assetNames := optionalDriverReleaseAssetNamesForVersion(driverType, selectedVersion)
+	if len(assetNames) == 0 {
+		return "", false
+	}
+
+	if sizeByAsset, publishedAssets, ok := readReleaseAssetSizesFromCache("latest"); ok {
+		for _, assetName := range assetNames {
+			if publishedAssets[assetName] && sizeByAsset[assetName] > 0 {
+				if release, err := fetchLatestReleaseForDriverAssets(); err == nil {
+					if asset, found := findReleaseAssetByName(release, []string{assetName}); found {
+						return driverReleaseAssetAPIURL(asset), true
+					}
+				}
+				return driverReleaseLatestDownloadURL(assetName), true
+			}
+		}
+		return "", false
+	}
+
+	sizeByAsset, publishedAssets, err := loadReleaseAssetSizesCached("latest", fetchLatestReleaseForDriverAssets)
+	if err != nil {
+		return "", false
+	}
+	for _, assetName := range assetNames {
+		if publishedAssets[assetName] && sizeByAsset[assetName] > 0 {
+			if release, relErr := fetchLatestReleaseForDriverAssets(); relErr == nil {
+				if asset, found := findReleaseAssetByName(release, []string{assetName}); found {
+					return driverReleaseAssetAPIURL(asset), true
+				}
+			}
+			return driverReleaseLatestDownloadURL(assetName), true
+		}
+	}
+	return "", false
+}
+
+func fetchReleaseByTag(tag string) (*githubRelease, error) {
+	tagName := strings.TrimSpace(tag)
+	if tagName == "" {
+		return nil, fmt.Errorf("Tag 为空")
+	}
+	apiURL := fmt.Sprintf("https://api.github.com/repos/%s/releases/tags/%s", driverReleaseRepo, url.PathEscape(tagName))
+	return fetchDriverReleaseByURL(apiURL)
+}
+
+func fetchDriverReleaseByURL(apiURL string) (*githubRelease, error) {
+	urlText := strings.TrimSpace(apiURL)
+	if urlText == "" {
+		return nil, fmt.Errorf("API 地址为空")
+	}
+
+	client := newHTTPClientWithGlobalProxy(driverReleaseAssetSizeProbeTimeout)
+	req, err := http.NewRequest(http.MethodGet, urlText, nil)
+	if err != nil {
+		return nil, err
+	}
+	req.Header.Set("User-Agent", "GoNavi-DriverManager")
+	req.Header.Set("Accept", "application/vnd.github+json")
+
+	resp, err := client.Do(req)
+	if err != nil {
+		return nil, err
+	}
+	defer resp.Body.Close()
+	if resp.StatusCode != http.StatusOK {
+		return nil, fmt.Errorf("拉取 Release 信息失败：HTTP %d", resp.StatusCode)
+	}
+
+	var release githubRelease
+	if err := json.NewDecoder(resp.Body).Decode(&release); err != nil {
+		return nil, err
+	}
+	return &release, nil
+}
+
+func resolveDriverPackageSizeText(definition driverDefinition, pkg installedDriverPackage, packageMetaExists bool, packageSizeBytesMap map[string]int64) string {
+	if definition.BuiltIn {
+		return "内置"
+	}
+
+	normalizedType := normalizeDriverType(definition.Type)
+	if packageMetaExists {
+		sizeBytes := readInstalledPackageSizeBytes(pkg)
+		if sizeBytes > 0 {
+			return formatSizeMB(sizeBytes)
+		}
+	}
+	if sizeBytes, ok := packageSizeBytesMap[normalizedType]; ok && sizeBytes > 0 {
+		return formatSizeMB(sizeBytes)
+	}
+
+	if !db.IsOptionalGoDriverBuildIncluded(normalizedType) {
+		return "待发布"
+	}
+	return "-"
+}
+
+func readInstalledPackageSizeBytes(pkg installedDriverPackage) int64 {
+	pathText := strings.TrimSpace(pkg.ExecutablePath)
+	if pathText == "" {
+		pathText = strings.TrimSpace(pkg.FilePath)
+	}
+	if pathText == "" {
+		return 0
+	}
+	info, err := os.Stat(pathText)
+	if err != nil || info.IsDir() {
+		return 0
+	}
+	return info.Size()
+}
+
+func formatSizeMB(sizeBytes int64) string {
+	if sizeBytes <= 0 {
+		return "-"
+	}
+	sizeMB := float64(sizeBytes) / (1024 * 1024)
+	return fmt.Sprintf("%.2f MB", sizeMB)
+}