fix: 编辑器查找/替换输入框无法粘贴内容 (#512) (#515)

自定义粘贴处理器拦截了所有 Ctrl+V 事件，包括查找/替换控件内的输入框。
当焦点在 .find-widget 内时，改为读取剪贴板并直接插入到输入框中，
而非将内容粘贴到编辑器主体。

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

App.tsx

@@ -1,6 +1,7 @@
 import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { activeTabStore, useActiveTabId, useIsSftpActive, useIsTerminalLayerVisible, useIsVaultActive } from './application/state/activeTabStore';
 import { useAutoSync } from './application/state/useAutoSync';
+import { useImmersiveMode } from './application/state/useImmersiveMode';
 import { useManagedSourceSync } from './application/state/useManagedSourceSync';
 import { usePortForwardingAutoStart } from './application/state/usePortForwardingAutoStart';
 import { usePortForwardingState } from './application/state/usePortForwardingState';
@@ -14,6 +15,10 @@ import { initializeUIFonts } from './application/state/uiFontStore';
 import { I18nProvider, useI18n } from './application/i18n/I18nProvider';
 import { matchesKeyBinding } from './domain/models';
 import { resolveHostAuth } from './domain/sshAuth';
+import { resolveHostTerminalThemeId } from './domain/terminalAppearance';
+import { collectSessionIds } from './domain/workspace';
+import { TERMINAL_THEMES } from './infrastructure/config/terminalThemes';
+import { useCustomThemes } from './application/state/customThemeStore';
 import { applySyncPayload } from './domain/syncPayload';
 import { getCredentialProtectionAvailability } from './infrastructure/services/credentialProtection';
 import { netcattyBridge } from './infrastructure/services/netcattyBridge';
@@ -29,7 +34,7 @@ import { KeyboardInteractiveModal, KeyboardInteractiveRequest } from './componen
 import { PassphraseModal, PassphraseRequest } from './components/PassphraseModal';
 import { cn } from './lib/utils';
 import { classifyLocalShellType } from './lib/localShell';
-import { ConnectionLog, Host, HostProtocol, SerialConfig, TerminalTheme } from './types';
+import { ConnectionLog, Host, HostProtocol, SerialConfig, TerminalSession, TerminalTheme } from './types';
 import { LogView as LogViewType } from './application/state/useSessionState';
 import type { SftpView as SftpViewComponent } from './components/SftpView';
 import type { TerminalLayer as TerminalLayerComponent } from './components/TerminalLayer';
@@ -192,6 +197,8 @@ function App({ settings }: { settings: SettingsState }) {
     sessionLogsEnabled,
     sessionLogsDir,
     sessionLogsFormat,
+    reapplyCurrentTheme,
+    immersiveMode,
   } = settings;
 
   const {
@@ -271,6 +278,56 @@ function App({ settings }: { settings: SettingsState }) {
   // isMacClient is used for window controls styling
   const isMacClient = typeof navigator !== 'undefined' && /Mac|Macintosh/.test(navigator.userAgent);
 
+  // ---------------------------------------------------------------------------
+  // Immersive Mode — derive UI chrome colors from the active terminal's theme
+  // ---------------------------------------------------------------------------
+  const activeTabId = useActiveTabId();
+  const customThemes = useCustomThemes();
+
+  // Resolve the effective TerminalTheme for the currently focused terminal tab
+  const activeTerminalTheme = useMemo<TerminalTheme | null>(() => {
+    if (activeTabId === 'vault' || activeTabId === 'sftp') return null;
+
+    const resolveTheme = (s: TerminalSession): TerminalTheme => {
+      const host = hosts.find(h => h.id === s.hostId) ?? null;
+      const themeId = resolveHostTerminalThemeId(host, currentTerminalTheme.id);
+      return TERMINAL_THEMES.find(t => t.id === themeId)
+        || customThemes.find(t => t.id === themeId)
+        || currentTerminalTheme;
+    };
+
+    // Workspace
+    const workspace = workspaces.find(w => w.id === activeTabId);
+    if (workspace) {
+      // Focus mode: use the focused (or first remaining) session's theme
+      if (workspace.viewMode === 'focus') {
+        const wsSessionIds = collectSessionIds(workspace.root);
+        const focused = sessions.find(s => s.id === workspace.focusedSessionId)
+          ?? sessions.find(s => wsSessionIds.includes(s.id));
+        return focused ? resolveTheme(focused) : null;
+      }
+      // Split mode: require all sessions to share the same theme
+      const sessionIds = collectSessionIds(workspace.root);
+      const wsSessions = sessionIds.map(id => sessions.find(s => s.id === id)).filter(Boolean) as TerminalSession[];
+      if (wsSessions.length === 0) return null;
+      const firstTheme = resolveTheme(wsSessions[0]);
+      const allSame = wsSessions.every(s => resolveTheme(s).id === firstTheme.id);
+      return allSame ? firstTheme : null;
+    }
+
+    // Single session tab
+    const session = sessions.find(s => s.id === activeTabId);
+    if (!session) return null;
+    return resolveTheme(session);
+  }, [activeTabId, sessions, workspaces, hosts, currentTerminalTheme, customThemes]);
+
+  useImmersiveMode({
+    isImmersive: immersiveMode,
+    activeTabId,
+    activeTerminalTheme,
+    restoreOriginalTheme: reapplyCurrentTheme,
+  });
+
   // Get port forwarding rules and import function
   const { rules: portForwardingRules, importRules: importPortForwardingRules, startTunnel, stopTunnel } = usePortForwardingState();
 
@@ -1204,7 +1261,7 @@ function App({ settings }: { settings: SettingsState }) {
   }, []);
 
   return (
-    <div className="flex flex-col h-screen text-foreground font-sans netcatty-shell" onContextMenu={handleRootContextMenu}>
+    <div className={cn("flex flex-col h-screen text-foreground font-sans netcatty-shell", immersiveMode && activeTerminalTheme && "immersive-transition")} onContextMenu={handleRootContextMenu}>
       <TopTabs
         theme={resolvedTheme}
         hosts={hosts}
@@ -1225,6 +1282,7 @@ function App({ settings }: { settings: SettingsState }) {
         onToggleTheme={handleToggleTheme}
         onOpenSettings={handleOpenSettings}
         onSyncNow={handleSyncNowManual}
+        isImmersiveActive={immersiveMode && activeTerminalTheme !== null}
         onStartSessionDrag={setDraggingSessionId}
         onEndSessionDrag={handleEndSessionDrag}
         onReorderTabs={reorderTabs}

application/i18n/locales/en.ts

@@ -231,6 +231,9 @@ const en: Messages = {
   'settings.appearance.themeColor.desc': 'Pick a preset palette for each theme',
   'settings.appearance.themeColor.light': 'Light palette',
   'settings.appearance.themeColor.dark': 'Dark palette',
+  'settings.appearance.immersiveMode': 'Immersive Mode',
+  'settings.appearance.immersiveMode.desc':
+    'When enabled, the UI chrome (tab bar, sidebar, status bar) adapts its colors to match the active terminal theme for a visually cohesive experience.',
   'settings.appearance.customCss': 'Custom CSS',
   'settings.appearance.customCss.desc':
     'Add custom CSS to personalize the app appearance. Changes apply immediately.',
@@ -712,6 +715,7 @@ const en: Messages = {
   'sftp.upload.phase.compressed': 'Compressed',
 
   // SFTP File Opener
+  'sftp.context.copyPath': 'Copy file path',
   'sftp.context.openWith': 'Open with...',
   'sftp.context.edit': 'Edit',
   'sftp.context.preview': 'Preview',

application/i18n/locales/zh-CN.ts

@@ -215,6 +215,9 @@ const zhCN: Messages = {
   'settings.appearance.themeColor.desc': '为浅色与深色主题选择预设配色',
   'settings.appearance.themeColor.light': '浅色主题',
   'settings.appearance.themeColor.dark': '深色主题',
+  'settings.appearance.immersiveMode': '沉浸模式',
+  'settings.appearance.immersiveMode.desc':
+    '启用后，UI 外观（标签栏、侧边栏、状态栏）会自动适配当前终端主题的配色，营造视觉一体化的沉浸体验。',
   'settings.appearance.customCss': '自定义 CSS',
   'settings.appearance.customCss.desc': '使用自定义 CSS 个性化界面，修改会立即生效。',
   'settings.appearance.customCss.placeholder':
@@ -1053,6 +1056,7 @@ const zhCN: Messages = {
   'sftp.upload.phase.compressed': '压缩传输',
 
   // SFTP File Opener
+  'sftp.context.copyPath': '复制文件路径',
   'sftp.context.openWith': '打开方式...',
   'sftp.context.edit': '编辑',
   'sftp.context.preview': '预览',

application/state/sftp/utils.ts

@@ -48,7 +48,7 @@ export const joinPath = (base: string, name: string): string => {
     return `${normalizedBase}\\${name}`;
   }
   if (base === "/") return `/${name}`;
-  return `${base}/${name}`;
+  return `${base.replace(/\/+$/, "")}/${name}`;
 };
 
 export const getParentPath = (path: string): string => {

application/state/useImmersiveMode.ts

@@ -0,0 +1,214 @@
+/**
+ * Immersive Mode — makes the entire UI chrome adapt colors to match the active terminal's theme.
+ *
+ * Performance strategy:
+ * - All built-in themes' CSS strings are pre-computed at module load (zero cost at switch time)
+ * - Custom/unknown themes are computed lazily and cached
+ * - A single `<style>` tag with `!important` overrides inline CSS variables atomically
+ * - `useLayoutEffect` ensures the update happens before browser paint (no flash)
+ */
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { TerminalTheme } from '../../domain/models';
+import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
+import { netcattyBridge } from '../../infrastructure/services/netcattyBridge';
+
+// ---------------------------------------------------------------------------
+// Hex → HSL conversion (returns "H S% L%" without the hsl() wrapper)
+// ---------------------------------------------------------------------------
+
+function hexToHsl(hex: string): string {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+  return `${Math.round(h * 3600) / 10} ${Math.round(s * 1000) / 10}% ${Math.round(l * 1000) / 10}%`;
+}
+
+function adjustLightness(hsl: string, delta: number): string {
+  const parts = hsl.split(/\s+/);
+  const newL = Math.max(0, Math.min(100, parseFloat(parts[2]) + delta));
+  return `${parts[0]} ${parts[1]} ${Math.round(newL * 10) / 10}%`;
+}
+
+function adjustSaturation(hsl: string, factor: number): string {
+  const parts = hsl.split(/\s+/);
+  const newS = Math.max(0, Math.min(100, parseFloat(parts[1]) * factor));
+  return `${parts[0]} ${Math.round(newS * 10) / 10}% ${parts[2]}`;
+}
+
+// ---------------------------------------------------------------------------
+// Build the CSS rule string from a TerminalTheme
+// ---------------------------------------------------------------------------
+
+const CSS_VARS = [
+  'background', 'foreground', 'card', 'card-foreground',
+  'popover', 'popover-foreground', 'primary', 'primary-foreground',
+  'secondary', 'secondary-foreground', 'muted', 'muted-foreground',
+  'accent', 'accent-foreground', 'destructive', 'destructive-foreground',
+  'border', 'input', 'ring',
+] as const;
+
+function buildImmersiveCss(theme: TerminalTheme): string {
+  const bg = hexToHsl(theme.colors.background);
+  const fg = hexToHsl(theme.colors.foreground);
+  const cursor = hexToHsl(theme.colors.cursor);
+  const isDark = theme.type === 'dark';
+
+  const card = adjustLightness(bg, isDark ? 4 : -3);
+  const secondary = adjustLightness(bg, isDark ? 6 : -5);
+  const muted = adjustLightness(bg, isDark ? 10 : -8);
+  const mutedFg = adjustSaturation(adjustLightness(fg, isDark ? -20 : 20), 0.5);
+  const border = adjustLightness(bg, isDark ? 12 : -10);
+  const cursorL = parseFloat(cursor.split(' ')[2] ?? '50');
+  const primaryFg = cursorL > 55 ? '0 0% 0%' : '0 0% 100%';
+
+  const values = [
+    bg, fg, card, fg,         // background, foreground, card, card-foreground
+    card, fg,                 // popover, popover-foreground
+    cursor, primaryFg,        // primary, primary-foreground
+    secondary, fg,            // secondary, secondary-foreground
+    muted, mutedFg,           // muted, muted-foreground
+    cursor, primaryFg,        // accent, accent-foreground
+    '0 70% 50%', '0 0% 100%', // destructive, destructive-foreground
+    border, border, cursor,   // border, input, ring
+  ];
+
+  const rules = CSS_VARS.map((name, i) => `--${name}: ${values[i]} !important`).join('; ');
+  return `:root { ${rules}; }`;
+}
+
+// ---------------------------------------------------------------------------
+// Pre-compute CSS for all built-in themes at module load — O(1) lookup at switch time
+// ---------------------------------------------------------------------------
+
+const cssCache = new Map<string, string>();
+
+// Fingerprint: id + type + 3 key colors (detects in-place edits including dark↔light)
+function themeFingerprint(t: TerminalTheme): string {
+  return `${t.id}\0${t.type}\0${t.colors.background}\0${t.colors.foreground}\0${t.colors.cursor}`;
+}
+
+// Pre-compute built-in themes
+for (const theme of TERMINAL_THEMES) {
+  cssCache.set(themeFingerprint(theme), buildImmersiveCss(theme));
+}
+
+/** Get (or lazily compute & cache) the immersive CSS for a theme. */
+function getImmersiveCss(theme: TerminalTheme): string {
+  const fp = themeFingerprint(theme);
+  let css = cssCache.get(fp);
+  if (!css) {
+    css = buildImmersiveCss(theme);
+    cssCache.set(fp, css);
+  }
+  return css;
+}
+
+// ---------------------------------------------------------------------------
+// Style tag management
+// ---------------------------------------------------------------------------
+
+const STYLE_ID = 'netcatty-immersive-override';
+
+function applyImmersiveStyle(css: string, isDark: boolean, bg: string) {
+  const root = document.documentElement;
+  const targetClass = isDark ? 'dark' : 'light';
+  if (!root.classList.contains(targetClass)) {
+    root.classList.remove('light', 'dark');
+    root.classList.add(targetClass);
+  }
+  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+  if (!style) {
+    style = document.createElement('style');
+    style.id = STYLE_ID;
+    document.head.appendChild(style);
+  }
+  style.textContent = css;
+  // Sync native Electron window chrome
+  netcattyBridge.get()?.setTheme?.(isDark ? 'dark' : 'light');
+  netcattyBridge.get()?.setBackgroundColor?.(bg);
+}
+
+function removeImmersiveStyle() {
+  document.getElementById(STYLE_ID)?.remove();
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export function useImmersiveMode({
+  isImmersive,
+  activeTabId,
+  activeTerminalTheme,
+  restoreOriginalTheme,
+}: {
+  isImmersive: boolean;
+  activeTabId: string;
+  activeTerminalTheme: TerminalTheme | null;
+  restoreOriginalTheme: () => void;
+}) {
+  const overrideActiveRef = useRef(false);
+  const appliedFpRef = useRef<string | null>(null);
+  const restoreRef = useRef(restoreOriginalTheme);
+  restoreRef.current = restoreOriginalTheme;
+
+  const isTerminalTab = activeTabId !== 'vault' && activeTabId !== 'sftp' && !activeTabId.startsWith('log-');
+
+  // APPLY: useLayoutEffect — runs before paint, O(1) Map lookup, single DOM write
+  useLayoutEffect(() => {
+    if (isImmersive && isTerminalTab && activeTerminalTheme) {
+      const fp = themeFingerprint(activeTerminalTheme);
+      if (appliedFpRef.current === fp) return;
+      overrideActiveRef.current = true;
+      appliedFpRef.current = fp;
+      applyImmersiveStyle(getImmersiveCss(activeTerminalTheme), activeTerminalTheme.type === 'dark', activeTerminalTheme.colors.background);
+    }
+  }, [isImmersive, isTerminalTab, activeTerminalTheme]);
+
+  // RESTORE: useEffect — runs after paint, with fade overlay
+  useEffect(() => {
+    if (isImmersive && isTerminalTab && activeTerminalTheme) return;
+    if (!overrideActiveRef.current) return;
+    overrideActiveRef.current = false;
+    appliedFpRef.current = null;
+    const bg = getComputedStyle(document.documentElement).getPropertyValue('--background').trim();
+    const overlay = document.createElement('div');
+    overlay.className = 'immersive-fade-overlay';
+    overlay.style.backgroundColor = `hsl(${bg})`;
+    document.body.appendChild(overlay);
+    removeImmersiveStyle();
+    restoreOriginalTheme();
+    requestAnimationFrame(() => {
+      overlay.classList.add('fade-out');
+      overlay.addEventListener('transitionend', () => overlay.remove(), { once: true });
+    });
+    const fallback = setTimeout(() => { if (overlay.parentNode) overlay.remove(); }, 400);
+    return () => { clearTimeout(fallback); if (overlay.parentNode) overlay.remove(); };
+  }, [isImmersive, isTerminalTab, activeTerminalTheme, restoreOriginalTheme]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      removeImmersiveStyle();
+      appliedFpRef.current = null;
+      if (overrideActiveRef.current) {
+        overrideActiveRef.current = false;
+        restoreRef.current();
+      }
+    };
+  }, []);
+}

application/state/useSettingsState.ts

@@ -30,6 +30,7 @@ import {
   STORAGE_KEY_CLOSE_TO_TRAY,
   STORAGE_KEY_GLOBAL_HOTKEY_ENABLED,
   STORAGE_KEY_AUTO_UPDATE_ENABLED,
+  STORAGE_KEY_IMMERSIVE_MODE,
 } from '../../infrastructure/config/storageKeys';
 import { DEFAULT_UI_LOCALE, resolveSupportedLocale } from '../../infrastructure/config/i18n';
 import { TERMINAL_THEMES } from '../../infrastructure/config/terminalThemes';
@@ -120,8 +121,11 @@ const applyThemeTokens = (
   accentOverride: string,
 ) => {
   const root = window.document.documentElement;
-  root.classList.remove('light', 'dark');
-  root.classList.add(resolvedTheme);
+  // If immersive mode is active (style tag present), it owns the dark/light class — don't override
+  if (!document.getElementById('netcatty-immersive-override')) {
+    root.classList.remove('light', 'dark');
+    root.classList.add(resolvedTheme);
+  }
   root.style.setProperty('--background', tokens.background);
   root.style.setProperty('--foreground', tokens.foreground);
   root.style.setProperty('--card', tokens.card);
@@ -324,6 +328,21 @@ export const useSettingsState = () => {
     }
   }, []);
 
+  const [immersiveMode, setImmersiveModeState] = useState<boolean>(() => {
+    const stored = localStorageAdapter.readString(STORAGE_KEY_IMMERSIVE_MODE);
+    if (stored === null || stored === '') {
+      // Persist default so collectSyncableSettings() can include it
+      localStorageAdapter.writeString(STORAGE_KEY_IMMERSIVE_MODE, 'true');
+      return true;
+    }
+    return stored === 'true';
+  });
+  const setImmersiveMode = useCallback((enabled: boolean) => {
+    setImmersiveModeState(enabled);
+    localStorageAdapter.writeString(STORAGE_KEY_IMMERSIVE_MODE, String(enabled));
+    notifySettingsChanged(STORAGE_KEY_IMMERSIVE_MODE, enabled);
+  }, [notifySettingsChanged]);
+
   const syncAppearanceFromStorage = useCallback(() => {
     const storedTheme = readStoredString(STORAGE_KEY_THEME);
     const nextTheme = storedTheme && isValidTheme(storedTheme) ? storedTheme : theme;
@@ -415,9 +434,17 @@ export const useSettingsState = () => {
     const storedAutoOpenSidebar = readStoredString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
     if (storedAutoOpenSidebar === 'true' || storedAutoOpenSidebar === 'false') setSftpAutoOpenSidebar(storedAutoOpenSidebar === 'true');
 
+    // Immersive mode
+    const storedImmersive = readStoredString(STORAGE_KEY_IMMERSIVE_MODE);
+    if (storedImmersive === 'true' || storedImmersive === 'false') {
+      const val = storedImmersive === 'true';
+      setImmersiveModeState(val);
+      notifySettingsChanged(STORAGE_KEY_IMMERSIVE_MODE, val);
+    }
+
     // Custom terminal themes
     customThemeStore.loadFromStorage();
-  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings]);
+  }, [syncAppearanceFromStorage, syncCustomCssFromStorage, setTerminalSettings, notifySettingsChanged]);
 
   useLayoutEffect(() => {
     const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
@@ -558,6 +585,9 @@ export const useSettingsState = () => {
       if (key === STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR && typeof value === 'boolean') {
         setSftpAutoOpenSidebar((prev) => (prev === value ? prev : value));
       }
+      if (key === STORAGE_KEY_IMMERSIVE_MODE && typeof value === 'boolean') {
+        setImmersiveModeState((prev) => (prev === value ? prev : value));
+      }
     });
     return () => {
       try {
@@ -595,7 +625,7 @@ export const useSettingsState = () => {
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
     sftpUseCompressedUpload, sftpAutoOpenSidebar,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
-    globalHotkeyEnabled, autoUpdateEnabled,
+    globalHotkeyEnabled, autoUpdateEnabled, immersiveMode,
   });
   settingsSnapshotRef.current = {
     theme, lightUiThemeId, darkUiThemeId, accentMode, customAccent,
@@ -604,7 +634,7 @@ export const useSettingsState = () => {
     sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles,
     sftpUseCompressedUpload, sftpAutoOpenSidebar,
     editorWordWrap, sessionLogsEnabled, sessionLogsDir, sessionLogsFormat,
-    globalHotkeyEnabled, autoUpdateEnabled,
+    globalHotkeyEnabled, autoUpdateEnabled, immersiveMode,
   };
 
   // Listen for storage changes from other windows (cross-window sync)
@@ -767,6 +797,13 @@ export const useSettingsState = () => {
           setAutoUpdateEnabled(newValue);
         }
       }
+      // Sync immersive mode from other windows
+      if (e.key === STORAGE_KEY_IMMERSIVE_MODE && e.newValue !== null) {
+        const newValue = e.newValue === 'true';
+        if (newValue !== s.immersiveMode) {
+          setImmersiveModeState(newValue);
+        }
+      }
     };
 
     window.addEventListener('storage', handleStorageChange);
@@ -1053,6 +1090,12 @@ export const useSettingsState = () => {
     setTerminalSettings(prev => ({ ...prev, [key]: value }));
   }, [setTerminalSettings]);
 
+  /** Re-apply the current UI theme tokens (used to restore after immersive mode override). */
+  const reapplyCurrentTheme = useCallback(() => {
+    const tokens = getUiThemeById(resolvedTheme, resolvedTheme === 'dark' ? darkUiThemeId : lightUiThemeId).tokens;
+    applyThemeTokens(theme, resolvedTheme, tokens, accentMode, customAccent);
+  }, [theme, resolvedTheme, lightUiThemeId, darkUiThemeId, accentMode, customAccent]);
+
   return {
     theme,
     setTheme,
@@ -1127,6 +1170,9 @@ export const useSettingsState = () => {
     globalHotkeyEnabled,
     setGlobalHotkeyEnabled,
     rehydrateAllFromStorage,
+    reapplyCurrentTheme,
+    immersiveMode,
+    setImmersiveMode,
     // Opaque version that changes when any synced setting changes, used by useAutoSync.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     settingsVersion: useMemo(() => Math.random(), [
@@ -1135,7 +1181,7 @@ export const useSettingsState = () => {
       terminalThemeId, terminalFontFamilyId, terminalFontSize, terminalSettings,
       customKeyBindings, editorWordWrap,
       sftpDoubleClickBehavior, sftpAutoSync, sftpShowHiddenFiles, sftpUseCompressedUpload, sftpAutoOpenSidebar,
-      customThemes,
+      customThemes, immersiveMode,
     ]),
   };
 };

components/SettingsPage.tsx

@@ -152,6 +152,10 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
     const { updateState, checkNow, installUpdate, openReleasePage } = useUpdateCheck({ autoUpdateEnabled: settings.autoUpdateEnabled });
     const [activeTab, setActiveTab] = useState("application");
     const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));
+    const isImmersive = settings.immersiveMode;
+    const toggleImmersive = useCallback(() => {
+        settings.setImmersiveMode(!isImmersive);
+    }, [settings, isImmersive]);
 
     useEffect(() => {
         notifyRendererReady();
@@ -277,6 +281,8 @@ const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }
                             setUiLanguage={settings.setUiLanguage}
                             customCSS={settings.customCSS}
                             setCustomCSS={settings.setCustomCSS}
+                            isImmersive={isImmersive}
+                            onToggleImmersive={toggleImmersive}
                         />
                     )}
 

components/TextEditorModal.tsx

@@ -151,6 +151,7 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
   // Ref to store the latest save function to avoid stale closure in keyboard shortcut
   const handleSaveRef = useRef<() => Promise<void>>(() => Promise.resolve());
   const handlePasteRef = useRef<() => Promise<void>>(() => Promise.resolve());
+  const readClipboardTextRef = useRef<() => Promise<string | null>>(() => Promise.resolve(null));
 
   // Track theme from document.documentElement class (syncs with app theme)
   const [isDarkTheme, setIsDarkTheme] = useState(() =>
@@ -254,6 +255,10 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
     }
   }, [readClipboardTextFromBridge]);
 
+  useEffect(() => {
+    readClipboardTextRef.current = readClipboardText;
+  }, [readClipboardText]);
+
   const handlePaste = useCallback(async () => {
     const editor = editorRef.current;
     if (!editor) return;
@@ -316,7 +321,30 @@ export const TextEditorModal: React.FC<TextEditorModalProps> = ({
     });
 
     // Fallback paste path for Electron environments where Monaco paste can fail.
+    // Skip custom paste when focus is inside the find/replace widget so that
+    // its input fields receive the pasted text via default browser behavior.
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyV, () => {
+      const active = document.activeElement;
+      if (active?.closest('.find-widget')) {
+        // Read clipboard and insert into the find/replace input field.
+        void (async () => {
+          try {
+            const text = await readClipboardTextRef.current();
+            if (!text) return;
+            // Monaco find widget inputs are <textarea> elements inside .monaco-inputbox
+            if (active instanceof HTMLTextAreaElement || active instanceof HTMLInputElement) {
+              const start = active.selectionStart ?? active.value.length;
+              const end = active.selectionEnd ?? active.value.length;
+              active.focus();
+              active.setSelectionRange(start, end);
+              document.execCommand('insertText', false, text);
+            }
+          } catch {
+            // Ignore – paste simply won't work
+          }
+        })();
+        return;
+      }
       void handlePasteRef.current();
     });
   }, []);

components/TopTabs.tsx

@@ -36,6 +36,7 @@ interface TopTabsProps {
   onToggleTheme: () => void;
   onOpenSettings: () => void;
   onSyncNow?: () => Promise<void>;
+  isImmersiveActive?: boolean;
   onStartSessionDrag: (sessionId: string) => void;
   onEndSessionDrag: () => void;
   onReorderTabs: (draggedId: string, targetId: string, position: 'before' | 'after') => void;
@@ -217,6 +218,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
   onToggleTheme,
   onOpenSettings,
   onSyncNow,
+  isImmersiveActive,
   onStartSessionDrag,
   onEndSessionDrag,
   onReorderTabs,
@@ -765,6 +767,7 @@ const TopTabsInner: React.FC<TopTabsProps> = ({
             size="icon"
             className="h-6 w-6 text-muted-foreground hover:text-foreground app-no-drag"
             onClick={onToggleTheme}
+            disabled={isImmersiveActive}
             title="Toggle theme"
           >
             {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
@@ -788,10 +791,12 @@ const topTabsAreEqual = (prev: TopTabsProps, next: TopTabsProps): boolean => {
     prev.orphanSessions === next.orphanSessions &&
     prev.workspaces === next.workspaces &&
     prev.orderedTabs === next.orderedTabs &&
+    prev.logViews === next.logViews &&
     prev.draggingSessionId === next.draggingSessionId &&
     prev.isMacClient === next.isMacClient &&
     prev.onOpenSettings === next.onOpenSettings &&
-    prev.onSyncNow === next.onSyncNow
+    prev.onSyncNow === next.onSyncNow &&
+    prev.isImmersiveActive === next.isImmersiveActive
   );
 };
 

components/ai/AgentIconBadge.tsx

@@ -187,18 +187,27 @@ export const AgentIconBadge: React.FC<{
 
   if (variant === 'plain') {
     return (
-      <img
-        src={visual.src}
-        alt=""
+      <div
         aria-hidden="true"
-        draggable={false}
-        className={cn('shrink-0', imageSize, visual.imageClassName, className)}
+        className={cn('shrink-0', imageSize, className)}
+        style={{
+          maskImage: `url(${visual.src})`,
+          WebkitMaskImage: `url(${visual.src})`,
+          maskSize: 'contain',
+          WebkitMaskSize: 'contain',
+          maskRepeat: 'no-repeat',
+          WebkitMaskRepeat: 'no-repeat',
+          maskPosition: 'center',
+          WebkitMaskPosition: 'center',
+          backgroundColor: 'currentColor',
+        }}
       />
     );
   }
 
   return (
     <div
+      data-agent-badge=""
       className={cn(
         'flex shrink-0 items-center justify-center overflow-hidden border',
         badgeSize,

components/ai/AgentSelector.tsx

@@ -208,7 +208,7 @@ const AgentSelector: React.FC<AgentSelectorProps> = ({
       <DropdownContent
         align="start"
         sideOffset={6}
-        className="w-[288px] rounded-2xl border border-border/50 bg-popover p-0 text-foreground shadow-lg supports-[backdrop-filter]:backdrop-blur-xl"
+        className="w-[288px] overflow-hidden rounded-2xl border border-border/50 bg-popover p-0 text-foreground shadow-lg supports-[backdrop-filter]:backdrop-blur-xl"
       >
         {BUILTIN_AGENTS.map((agent) => (
           <AgentMenuRow

components/settings/tabs/SettingsAppearanceTab.tsx

@@ -25,6 +25,8 @@ export default function SettingsAppearanceTab(props: {
   setUiLanguage: (language: string) => void;
   customCSS: string;
   setCustomCSS: (css: string) => void;
+  isImmersive?: boolean;
+  onToggleImmersive?: () => void;
 }) {
   const { t } = useI18n();
   const availableUIFonts = useAvailableUIFonts();
@@ -45,6 +47,8 @@ export default function SettingsAppearanceTab(props: {
     setUiLanguage,
     customCSS,
     setCustomCSS,
+    isImmersive,
+    onToggleImmersive,
   } = props;
 
   const getHslStyle = useCallback((hsl: string) => ({ backgroundColor: `hsl(${hsl})` }), []);
@@ -254,6 +258,19 @@ export default function SettingsAppearanceTab(props: {
         </SettingRow>
       </div>
 
+      <SectionHeader title={t("settings.appearance.immersiveMode")} />
+      <div className="space-y-0 divide-y divide-border rounded-lg border bg-card px-4">
+        <SettingRow
+          label={t("settings.appearance.immersiveMode")}
+          description={t("settings.appearance.immersiveMode.desc")}
+        >
+          <Toggle
+            checked={!!isImmersive}
+            onChange={() => onToggleImmersive?.()}
+          />
+        </SettingRow>
+      </div>
+
       <SectionHeader title={t("settings.appearance.customCss")} />
       <div className="space-y-2">
         <p className="text-xs text-muted-foreground">

components/sftp/SftpPaneFileList.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { AlertCircle, ArrowDown, ChevronDown, Copy, Download, Edit2, ExternalLink, FilePlus, Folder, FolderPlus, Loader2, Pencil, RefreshCw, Shield, Trash2 } from "lucide-react";
+import { AlertCircle, ArrowDown, ChevronDown, ClipboardCopy, Copy, Download, Edit2, ExternalLink, FilePlus, Folder, FolderPlus, Loader2, Pencil, RefreshCw, Shield, Trash2 } from "lucide-react";
 import { Button } from "../ui/button";
 import {
   ContextMenu,
@@ -9,6 +9,7 @@ import {
   ContextMenuTrigger,
 } from "../ui/context-menu";
 import { cn } from "../../lib/utils";
+import { joinPath } from "../../application/state/sftp/utils";
 import type { SftpFileEntry } from "../../types";
 import type { SftpPane } from "../../application/state/sftp/types";
 import type { ColumnWidths, SortField, SortOrder } from "./utils";
@@ -218,6 +219,14 @@ export const SftpPaneFileList: React.FC<SftpPaneFileListProps> = ({
               <Copy size={14} className="mr-2" />{" "}
               {t("sftp.context.copyToOtherPane")}
             </ContextMenuItem>
+            <ContextMenuItem
+              onClick={() => {
+                navigator.clipboard.writeText(joinPath(pane.connection.currentPath, entry.name));
+              }}
+            >
+              <ClipboardCopy size={14} className="mr-2" />{" "}
+              {t("sftp.context.copyPath")}
+            </ContextMenuItem>
             <ContextMenuSeparator />
             <ContextMenuItem onClick={() => openRenameDialog(entry.name)}>
               <Pencil size={14} className="mr-2" /> {t("common.rename")}

components/terminal/ThemeSidePanel.tsx

@@ -39,7 +39,7 @@ const ThemeItem = memo(({
     onClick={() => onSelect(theme.id)}
     onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(theme.id); } }}
     className={cn(
-      'w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors group cursor-pointer',
+      'w-full flex items-center gap-2.5 px-3 py-2 text-left group cursor-pointer',
       isSelected
         ? 'bg-accent/50'
         : 'hover:bg-accent/50'

domain/sync.ts

@@ -198,6 +198,8 @@ export interface SyncPayload {
     sftpShowHiddenFiles?: boolean;
     sftpUseCompressedUpload?: boolean;
     sftpAutoOpenSidebar?: boolean;
+    // Immersive mode
+    immersiveMode?: boolean;
   };
 
   // Sync metadata

domain/syncPayload.ts

@@ -38,6 +38,7 @@ import {
   STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD,
   STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR,
   STORAGE_KEY_CUSTOM_THEMES,
+  STORAGE_KEY_IMMERSIVE_MODE,
 } from '../infrastructure/config/storageKeys';
 
 // ---------------------------------------------------------------------------
@@ -158,6 +159,10 @@ export function collectSyncableSettings(): SyncPayload['settings'] {
   const autoOpenSidebar = localStorageAdapter.readString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR);
   if (autoOpenSidebar === 'true' || autoOpenSidebar === 'false') settings.sftpAutoOpenSidebar = autoOpenSidebar === 'true';
 
+  // Immersive mode
+  const immersive = localStorageAdapter.readString(STORAGE_KEY_IMMERSIVE_MODE);
+  if (immersive === 'true' || immersive === 'false') settings.immersiveMode = immersive === 'true';
+
   return Object.keys(settings).length > 0 ? settings : undefined;
 }
 
@@ -216,6 +221,9 @@ function applySyncableSettings(settings: NonNullable<SyncPayload['settings']>):
   if (settings.sftpShowHiddenFiles != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_SHOW_HIDDEN_FILES, String(settings.sftpShowHiddenFiles));
   if (settings.sftpUseCompressedUpload != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_USE_COMPRESSED_UPLOAD, String(settings.sftpUseCompressedUpload));
   if (settings.sftpAutoOpenSidebar != null) localStorageAdapter.writeString(STORAGE_KEY_SFTP_AUTO_OPEN_SIDEBAR, String(settings.sftpAutoOpenSidebar));
+
+  // Immersive mode
+  if (settings.immersiveMode != null) localStorageAdapter.writeString(STORAGE_KEY_IMMERSIVE_MODE, String(settings.immersiveMode));
 }
 
 // ---------------------------------------------------------------------------

electron/bridges/windowManager.cjs

@@ -537,27 +537,6 @@ function attachOAuthLoadingOverlay(win) {
   });
 }
 
-async function waitForRootPaint(win, { timeoutMs = 400, intervalMs = 30 } = {}) {
-  const start = Date.now();
-  while (Date.now() - start < timeoutMs) {
-    try {
-      if (win.isDestroyed()) return false;
-      const count = await win.webContents.executeJavaScript(
-        `(() => {
-          const root = document.getElementById("root");
-          return root ? root.children.length : 0;
-        })()`,
-        true,
-      );
-      if (Number(count) > 0) return true;
-    } catch {
-      return false;
-    }
-    await new Promise((r) => setTimeout(r, intervalMs));
-  }
-  return false;
-}
-
 function setupDeferredShow(win, { timeoutMs = 3000, waitForRendererReady = true } = {}) {
   const webContentsId = (() => {
     try {
@@ -605,13 +584,10 @@ function setupDeferredShow(win, { timeoutMs = 3000, waitForRendererReady = true
     tryShow();
   });
 
-  win.webContents.once("did-finish-load", () => {
-    void (async () => {
-      // If the renderer mounts shortly after load, wait briefly to avoid showing a blank root.
-      const painted = await waitForRootPaint(win, { timeoutMs: 800, intervalMs: 50 });
-      if (painted) markRendererReady();
-    })();
-  });
+  // Renderer calls netcattyBridge.rendererReady() after React mount,
+  // which sends IPC "netcatty:renderer:ready" → markRendererReady().
+  // The timeout fallback (timeoutMs) ensures the window is shown even if
+  // the signal is never received.
 
   // Dev/edge-case fallback: don't keep the window hidden forever.
   if (Number(timeoutMs) > 0) {

index.css

@@ -113,6 +113,25 @@ body {
   color: hsl(var(--foreground));
 }
 
+/* Immersive mode: fade-out overlay for smooth theme restoration */
+.immersive-fade-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 200ms ease-out;
+}
+.immersive-fade-overlay.fade-out {
+  opacity: 0;
+}
+
+/* Immersive mode: override agent icon badge colors to follow the theme */
+.immersive-transition [data-agent-badge] {
+  border-color: hsl(var(--primary) / 0.2) !important;
+  background-color: hsl(var(--primary) / 0.1) !important;
+}
+
 .netcatty-shell {
   position: relative;
   background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--background)) 60%, hsl(var(--background) / 0.9) 100%);

infrastructure/config/storageKeys.ts

@@ -90,3 +90,6 @@ export const STORAGE_KEY_AI_SESSIONS = 'netcatty_ai_sessions_v1';
 export const STORAGE_KEY_AI_ACTIVE_SESSION_MAP = 'netcatty_ai_active_session_map_v1';
 export const STORAGE_KEY_AI_AGENT_MODEL_MAP = 'netcatty_ai_agent_model_map_v1';
 export const STORAGE_KEY_AI_WEB_SEARCH = 'netcatty_ai_web_search_v1';
+
+// Immersive Mode
+export const STORAGE_KEY_IMMERSIVE_MODE = 'netcatty_immersive_mode_v1';